/* ==========================================================================
   메인 화면 개편 (2026-11)
   - 건강 쇼츠 (#shorts)            : 기존 '신내과 둘러보기' 자리
   - 이럴 때 진료받으세요 (#situations) : 기존 '진료과목' 자리
   - 처음 오시는 분 안내 (#firstvisit)  : 기존 '당뇨 교육 프로그램' 자리
   - PC : 왼쪽·가운데 칸 맨 아래 끝선 맞춤
   - 모바일 : 처음 오시는 환자 동선 순서로 재배치
   ========================================================================== */

/* ---------- 공통 : 제목줄 오른쪽 링크 ---------- */
#shorts .stb-right{display:flex;align-items:center;gap:6px}
#firstvisit .section-title-bar{justify-content:space-between}
.home-more{font-size:11px;color:#8aa0b6;text-decoration:none}
.home-more:hover{color:#1a6db5}

/* ==========================================================================
   1. 건강 쇼츠
   ========================================================================== */
#shorts{overflow:hidden}
#shorts .sh-all{font-size:11.5px;color:#1a6db5;text-decoration:none;font-weight:600;margin-right:4px}
#shorts .sh-arrow{width:22px;height:22px;border-radius:50%;border:1px solid #cfdeea;background:#fff;color:#0f3d6e;display:grid;place-items:center;cursor:pointer;font-size:11px;line-height:1;padding:0;transition:.2s}
#shorts .sh-arrow:hover{background:#1a6db5;color:#fff;border-color:#1a6db5}
#shorts .sh-body{padding:12px 0 10px;background:#fff}
#shorts .sh-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 14px 2px;scroll-padding:0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#shorts .sh-track::-webkit-scrollbar{display:none}
#shorts .sh-item{flex:0 0 115px;scroll-snap-align:start;cursor:pointer}
#shorts .sh-card{width:115px;height:204px;border-radius:10px;position:relative;overflow:hidden;background:#0f3d6e;box-shadow:0 3px 10px rgba(15,61,110,.12);transition:transform .25s,box-shadow .25s}
#shorts .sh-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
#shorts .sh-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,.18) 100%)}
#shorts .sh-item:hover .sh-card{transform:translateY(-3px);box-shadow:0 12px 24px rgba(15,61,110,.22)}
#shorts .sh-item:hover img{transform:scale(1.05)}
#shorts .sh-ep{position:absolute;top:6px;left:6px;z-index:2;font-size:9.5px;font-weight:700;color:#fff;background:rgba(26,109,181,.92);padding:2px 6px;border-radius:20px;letter-spacing:-.3px}
#shorts .sh-ep.thy{background:rgba(15,61,110,.92)}
#shorts .sh-new{position:absolute;top:7px;right:6px;z-index:2;font-size:8.5px;font-weight:800;color:#0f3d6e;background:#ffd84d;padding:2px 4px;border-radius:3px}
#shorts .sh-play{position:absolute;right:6px;bottom:6px;z-index:2;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.7);display:grid;place-items:center;transition:.25s}
#shorts .sh-play i{width:0;height:0;border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
#shorts .sh-item:hover .sh-play{background:#ff0033;border-color:#ff0033}
#shorts .sh-t{margin-top:6px;padding:0 1px;font-size:11.5px;line-height:1.4;font-weight:600;color:#1d2b3a;letter-spacing:-.3px;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:32px}
#shorts .sh-item:hover .sh-t{color:#1a6db5}
#shorts .sh-foot{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid #e6eef5;background:#f9fbfd}
#shorts .sh-yt{width:22px;height:22px;border-radius:50%;background:#ff0033;display:grid;place-items:center;flex-shrink:0}
#shorts .sh-yt i{width:0;height:0;border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
#shorts .sh-fi{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#shorts .sh-fi b{font-size:12px;color:#0f3d6e}
#shorts .sh-fi span{font-size:10.5px;color:#6b7f93;margin-left:6px}
#shorts .sh-sub{font-size:11px;font-weight:700;color:#fff;background:#0f3d6e;border-radius:20px;padding:5px 11px;text-decoration:none;white-space:nowrap;transition:.2s}
#shorts .sh-sub:hover{background:#ff0033}

/* 쇼츠 재생 창 */
.sh-modal{position:fixed;inset:0;z-index:9999;background:rgba(5,20,38,.82);display:none;align-items:center;justify-content:center}
.sh-modal.open{display:flex}
.sh-modal .sh-stage{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 12px}
.sh-modal .sh-frame{height:min(640px,calc(100vh - 170px));height:min(640px,calc(100dvh - 170px));aspect-ratio:9/16;max-width:92vw;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.sh-modal iframe{width:100%;height:100%;border:0;display:block}
.sh-modal .sh-now{max-width:min(360px,92vw);color:#fff;font-size:13px;font-weight:600;text-align:center;line-height:1.4;letter-spacing:-.3px;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-modal .sh-ctrl{display:flex;align-items:center;gap:12px}
.sh-modal .sh-ctrl button{min-width:96px;height:40px;border-radius:22px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s}
.sh-modal .sh-ctrl button:hover,.sh-modal .sh-ctrl button:active{background:rgba(255,255,255,.28)}
.sh-modal .sh-ctrl .sh-next{background:#1a6db5;border-color:#1a6db5}
.sh-modal .sh-ctrl .sh-next:hover,.sh-modal .sh-ctrl .sh-next:active{background:#2a82d0}
.sh-modal .sh-count{min-width:44px;text-align:center;color:rgba(255,255,255,.8);font-size:12.5px;font-weight:600}
.sh-modal .sh-x{position:absolute;top:12px;right:14px;width:40px;height:40px;color:#fff;font-size:30px;line-height:1;cursor:pointer;background:none;border:0;z-index:2}

/* ==========================================================================
   2. 이럴 때 진료받으세요
   ========================================================================== */
#situations .sit-body{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 12px 12px}
#situations .sit-col{border:1px solid #e3ecf4;border-radius:10px;overflow:hidden;background:#fff}
#situations .sit-head{display:flex;align-items:center;justify-content:space-between;padding:10px;font-size:13px;font-weight:800;letter-spacing:-.3px}
#situations .th .sit-head{background:#eef6ff;color:#0f3d6e}
#situations .dm .sit-head{background:#fff3f1;color:#8a2a1c}
#situations .sit-head a{font-size:10.5px;font-weight:600;text-decoration:none;color:inherit;opacity:.75}
#situations .sit-row{display:flex;align-items:center;gap:6px;min-height:44px;box-sizing:border-box;padding:12px 10px;border-top:1px solid #eef3f8;text-decoration:none;color:#1d2b3a;font-size:12px;line-height:1.4;letter-spacing:-.4px;word-break:keep-all;transition:background .2s}
#situations .sit-row:hover{background:#f5f9fd;color:#1a6db5}
#situations .sit-row span{flex:1}
#situations .sit-row em{font-style:normal;color:#9aacbd;font-size:13px}
#situations .sit-tag{display:inline-block;margin-top:3px;font-size:9.5px;font-weight:700;font-style:normal;color:#1a6db5;background:#e8f2fc;border-radius:3px;padding:1px 5px}
#situations .dm .sit-tag{color:#b23a28;background:#fdecea}
#situations .sit-etc{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:2px 12px 14px;font-size:11px;color:#6b7f93}
#situations .sit-etc b{color:#0f3d6e;font-size:11px;margin-right:2px}
#situations .sit-etc a{font-size:10px;color:#3b5875;background:#f3f6f9;border:1px solid #e3ecf4;border-radius:20px;padding:2px 6px;text-decoration:none;white-space:nowrap}
#situations .sit-etc a:hover{border-color:#1a6db5;color:#1a6db5}

/* ==========================================================================
   3. 처음 오시는 분 안내
   ========================================================================== */
#firstvisit .fv-flow{display:grid;grid-template-columns:repeat(4,1fr);padding:18px 12px 6px}
#firstvisit .fv-step{text-align:center;position:relative}
#firstvisit .fv-step:not(:last-child)::after{content:"";position:absolute;top:13px;left:calc(50% + 16px);right:calc(-50% + 16px);border-top:2px dashed #c7d9ea}
#firstvisit .fv-n{width:26px;height:26px;border-radius:50%;background:#1a6db5;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;margin:0 auto 5px}
#firstvisit .fv-step:last-child .fv-n{background:#0f3d6e}
#firstvisit .fv-step b{display:block;font-size:11.5px;color:#0f3d6e;letter-spacing:-.3px}
#firstvisit .fv-step span{display:block;font-size:10px;color:#6b7f93;line-height:1.35;margin-top:2px;letter-spacing:-.3px;word-break:keep-all}
#firstvisit .fv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
#firstvisit .fv-card{border:1px solid #e3ecf4;border-radius:8px;padding:11px;background:#fbfdff}
#firstvisit .fv-card h5{margin:0 0 4px;font-size:11.5px;color:#0f3d6e;letter-spacing:-.3px}
#firstvisit .fv-card p{margin:0;font-size:10.5px;color:#4a5d70;line-height:1.5;letter-spacing:-.3px;word-break:keep-all}
#firstvisit .fv-card p strong{color:#1a6db5}
#firstvisit .fv-card p a{color:#6b7f93}
#firstvisit .fv-m{display:none}
#firstvisit .fv-pg{margin:2px 12px 14px;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;background:linear-gradient(90deg,#0f3d6e,#1a6db5);color:#fff;text-decoration:none}
#firstvisit .fv-pg .ic{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:15px;flex-shrink:0}
#firstvisit .fv-pg b{display:block;font-size:11.5px;letter-spacing:-.3px}
#firstvisit .fv-pg span{display:block;font-size:10px;opacity:.8;letter-spacing:-.3px}
#firstvisit .fv-pg em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;background:#fff;color:#0f3d6e;border-radius:20px;padding:4px 10px;white-space:nowrap}

/* ==========================================================================
   4. PC (901px 이상) : 가운데 '진료시간' 칸은 오른쪽 칸과 중복이라 숨김,
      맨 아래 끝선 맞춤
   ========================================================================== */
@media (min-width:901px){
  .center-col #hours{display:none}
  .main-grid > .center-col{align-self:stretch}
  .main-grid > .center-col > #faq{flex:1 0 auto}
  #faq .faq-q{min-height:43px}
}

/* ==========================================================================
   5. 모바일 (900px 이하) : 순서 (2026-11-05 원장님 지정)
      메인 사진 → 원장 인사말(접기) → 최신 강의·좌장 영상 → 건강 쇼츠 → 공지사항 → 당뇨상식 → 진료시간
      → 커뮤니티 갤러리 → 언론보도(학술지 기고·강의 좌장) → 이럴 때 진료받으세요
      → 처음 오시는 분 안내 → 자주 묻는 질문 → (생활관리 아이콘)
   ========================================================================== */
/* 원장 인사말 더보기 버튼 : PC에서는 숨김 */
#doctor .doc-toggle{display:none}
@media (max-width:900px){
  .main-grid{display:flex !important;flex-direction:column;gap:10px;align-items:stretch !important}
  .main-grid > .mobile-left, .main-grid > .center-col{display:contents !important}
  .main-grid > .mobile-left > *, .main-grid > .center-col > *{margin-top:0 !important;margin-bottom:0 !important;width:100% !important;max-width:100%;min-width:0;box-sizing:border-box;align-self:stretch !important}
  .main-grid .mobile-hero{order:1}
  .main-grid #doctor{order:2}
  .main-grid #lecture-spotlight{order:3}
  .main-grid #shorts{order:4}
  .main-grid #notice{order:5}
  .main-grid .mobile-dmnews{order:6}
  .main-grid #hours{order:7}
  .main-grid #gallery{order:8}
  .main-grid #press-home{order:9}
  .main-grid #situations{order:10}
  .main-grid #firstvisit{order:11}
  .main-grid #faq{order:12}
  .main-grid .center-col > .box:not([id]):not(.mobile-dmnews){order:13}
  /* 원장 인사말 : '저희도 최선을 다하겠습니다.' 까지만, 누르면 펼침 */
  #doctor .doc-more, #doctor .career-tags{display:none}
  #doctor.doc-open .doc-more{display:inline}
  #doctor.doc-open .career-tags{display:flex}
  #doctor .doc-toggle{display:inline-flex;align-items:center;gap:4px;margin:8px 0 2px;padding:4px 12px;border:1px solid #cfdeea;border-radius:20px;background:#f5f9fd;color:#1a6db5;font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer}
  #doctor .doc-toggle i{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s}
  #doctor .doc-toggle .t-close{display:none}
  #doctor.doc-open .doc-toggle .t-open{display:none}
  #doctor.doc-open .doc-toggle .t-close{display:inline}
  #doctor.doc-open .doc-toggle i{transform:rotate(-135deg) translate(-1px,-1px)}
  #doctor.doc-open .doc-toggle{margin-bottom:8px}
  /* 바로 아래 '진료시간' 칸이 있으므로 접수 마감 카드 대신 주차 카드 */
  #firstvisit .fv-pc{display:none}
  #firstvisit .fv-m{display:block}
}
@media (max-width:480px){
  #shorts .sh-fi span{display:none}
  #situations .sit-etc{gap:3px;padding-left:10px;padding-right:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #situations .sit-etc::-webkit-scrollbar{display:none}
  #situations .sit-etc b{flex-shrink:0;font-size:10px;margin-right:1px}
  #situations .sit-etc a{flex-shrink:0;padding:2px 5px;font-size:9.5px;letter-spacing:-.3px}
}