/* ============================================================
   탱글 모바일 레이어 (2026-09-22) — 폰·태블릿(≤820px)에서 랜딩·서브 공통의 여백·글자·모듈 폭을 한 규칙으로 맞춘다.
   · 전 페이지가 마지막에 읽는다(index.html·htm/*.html 의 </head> 앞). 번역 페이지(/en/… 등)는 같은 HTML 이라 함께 적용된다.
   · 값은 아래 :root 변수로 조정한다. 페이지가 자체 CSS 에 !important 를 박아 두어(psd2html 산출물) 여기 규칙도 !important 를 쓴다.
   · PC(821px↑)는 손대지 않는다. 배경·색·그림은 그대로 두고 여백·크기·줄바꿈만 바꾼다.
   ============================================================ */
@media (max-width:820px){
:root{
  --m-gutter:20px;          /* 화면 좌우 여백 */
  --m-sec:56px;             /* 구역 위·아래 여백 */
  --m-sec-in:24px;          /* 구역 제목 묶음 아래 여백 */
  --m-h1:30px; --m-h2:26px; --m-h3:19px; --m-h4:16px; --m-body:15px; --m-note:13px;
  --m-font:'NanumBG','NanumBarunGothic','Pretendard Variable',Pretendard,'Apple SD Gothic Neo',sans-serif;
}
html,body{overflow-x:hidden}

/* ── 1. 뷰포트 여백 — 본문 컨테이너는 모두 좌우 20px (헤더는 제 규칙대로) ── */
body .container:not(.site-header .container):not(.hd-nav .container):not(.subnav .container),
.mc_youtube_container,.mc_model_container,.mc_event_container,#mc_academic .ac_inner,#mc_system .mc_system_wrap>.wrap{
  padding-left:var(--m-gutter)!important;padding-right:var(--m-gutter)!important;box-sizing:border-box;width:auto!important;max-width:none!important}
.tg-fr,.tg-fr *{--gutter:var(--m-gutter)!important}   /* 조각(.tg-fr)은 --gutter 변수로 좌우 여백을 잡는다 — 16px 짜리까지 20px 로 */

/* ── 2. 랜딩(index): 구역 세로 리듬 56px, 제목 묶음 아래 24px ── */
#mc_academic,#mc_youtube,#mc_shorts,#mc_model,#mc_bna,#mc_event,#mc_system{padding-top:var(--m-sec)!important;padding-bottom:var(--m-sec)!important;margin:0!important}
.mc_title_wrap{padding:0 0 var(--m-sec-in)!important;margin:0!important;text-align:left!important}
#mc_academic .ac_head{padding:0!important;margin:0 0 var(--m-sec-in)!important}
.tg-title{margin:0 0 var(--m-sec-in)!important;padding:0!important;width:auto!important;max-width:none!important}
.mc_title_wrap .common_btn_more,#mc_academic .ac_more{top:0!important;bottom:auto!important;width:44px!important;height:44px!important;border-radius:22px!important}
#mc_shorts .sw,#mc_bna .bw{width:auto!important;max-width:none!important;margin:0!important;padding:0 var(--m-gutter)!important;display:block!important;box-sizing:border-box}
#mc_shorts .sh,#mc_bna .bh{height:auto!important;margin:0 0 var(--m-sec-in)!important;display:block!important}
#mc_shorts .sh-bot,#mc_bna .bh-bot{margin-top:16px!important}
#mc_shorts .srail,#mc_bna .brail{width:100%!important;max-width:100%!important;margin:0!important}
#mc_bna{--bc-w:calc(100vw - 40px)}   /* 전후 카드는 한 장이 화면 폭 */
#mc_youtube .list_wrap{padding-right:0!important}
#mc_academic .ac_list{width:auto!important}
/* 랜딩 글자: 눈썹 12 · 제목 30 · 설명 15 */
/* 페이지 규칙이 #mc_xxx .tg-h2{…!important} 처럼 ID 를 쓰므로 ID 를 두 번 겹쳐(2,1,x) 이긴다 */
html body :is(#mc_special,#mc_banner,#mc_academic,#mc_youtube,#mc_shorts,#mc_model,#mc_bna,#mc_event,#mc_system,#info):is(#mc_special,#mc_banner,#mc_academic,#mc_youtube,#mc_shorts,#mc_model,#mc_bna,#mc_event,#mc_system,#info) :is(.tg-eyebrow,.ac_eyebrow,.hs-copy .en){
  font-size:12px!important;letter-spacing:.16em!important;margin-bottom:10px!important}
html body :is(#mc_special,#mc_banner,#mc_academic,#mc_youtube,#mc_shorts,#mc_model,#mc_bna,#mc_event,#mc_system,#info):is(#mc_special,#mc_banner,#mc_academic,#mc_youtube,#mc_shorts,#mc_model,#mc_bna,#mc_event,#mc_system,#info) :is(.tg-h2,.ac_title,.st,.bt,.hs-copy h2){
  font-family:var(--m-font)!important;font-size:var(--m-h1)!important;line-height:1.25!important;letter-spacing:-.02em!important;margin:8px 0 0!important;font-weight:700!important}
html body :is(#mc_special,#mc_banner,#mc_academic,#mc_youtube,#mc_shorts,#mc_model,#mc_bna,#mc_event,#mc_system,#info):is(#mc_special,#mc_banner,#mc_academic,#mc_youtube,#mc_shorts,#mc_model,#mc_bna,#mc_event,#mc_system,#info) :is(.tg-lead,.ac_desc,.sl,.bl,.hs-copy p){
  font-family:var(--m-font)!important;font-size:var(--m-body)!important;line-height:1.65!important;margin:10px 0 0!important;letter-spacing:0!important}
html body :is(#mc_shorts,#mc_bna):is(#mc_shorts,#mc_bna) :is(.sn,.bn){font-size:12.5px!important;line-height:1.6!important;margin-top:8px!important}
/* 유튜브 목록: 제목 두 줄 · 설명 한 줄 */
html body #mc_youtube#mc_youtube .txt_wrap .subject{font-family:var(--m-font)!important;font-size:15px!important;line-height:1.4!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip!important}
html body #mc_youtube#mc_youtube .txt_wrap .contents{font-size:13px!important;line-height:1.5!important}

/* ── 3. 서브 공통 모듈 (원본 사이트의 1288·920px 고정 모듈) ── */
/* TV — 플레이어 위, 목록 아래 한 줄로 */
.mod-tv{padding:0!important}
.mod-tv .container{padding:0 var(--m-gutter)!important;max-width:none!important}
.mod-tv .tv-head{padding:var(--m-sec) 0 var(--m-sec-in)!important}
.mod-tv .tv-head .wrap,.mod-selfie .selfie-head .wrap,.mod-event .evt-head .wrap{padding-bottom:16px!important;gap:10px!important}
.mod-tv .tv-head p,.mod-selfie .selfie-head .wrap>p,.mod-event .evt-head .wrap>p{font-size:26px!important}
.mod-tv .tv-head p.tangle span,.mod-selfie .selfie-head .wrap>p.tangle span,.mod-event .evt-head .wrap>p.tangle span{font-size:.68em!important;left:2.48em!important;top:.05em!important}
.mod-tv .tv-wrap{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
.mod-tv .tv-player{width:100%!important;height:auto!important;aspect-ratio:16/9!important;margin:0!important}
.mod-tv .tv-list{max-height:none!important;min-height:0!important}
.mod-tv .tv-item>a{grid-template-columns:120px minmax(0,1fr)!important;gap:0 12px!important;padding:12px 0!important}
.mod-tv .tv-item .tv-thumb{width:120px!important;height:auto!important;aspect-ratio:16/9!important}
.mod-tv .tv-item .tv-t{margin:0!important;white-space:normal!important;overflow:hidden!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:clip!important;font-size:var(--m-body)!important;line-height:1.4!important;letter-spacing:0!important}
.mod-tv .tv-item .tv-d{margin:6px 0 0!important;height:auto!important;overflow:hidden!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:var(--m-note)!important;line-height:1.5!important;letter-spacing:0!important}
.mod-tv .tv-note{width:auto!important;margin:16px 0 0!important;font-size:var(--m-note)!important;line-height:1.6!important;letter-spacing:0!important}
/* 전후사진 앨범(.mod-album) — 큰 사진은 화면 폭, 썸네일 2열 */
.mod-album{width:100%!important;max-width:100%!important;margin:0!important;padding:0 var(--m-gutter)!important;box-sizing:border-box}
.mod-album .albumtitle{height:auto!important;padding:var(--m-sec) 0 var(--m-sec-in)!important}
.mod-album .albumtitle img{max-width:min(100%,320px)!important;height:auto!important}
.mod-album .bna_container{width:100%!important;margin:0 auto 20px!important}
.mod-album .photo_container{width:100%!important;height:auto!important;aspect-ratio:2/1}
.mod-album .photo_container .photo>img{width:100%!important;height:100%!important;object-fit:cover}
.mod-album .photo_container .lock_wrap{width:50%!important;height:100%!important}
.mod-album .photo_container .lock_wrap .gp,.mod-album .thumb .lock_wrap .gp{background-size:contain!important}
.mod-album .btn_pn_wrap{width:44px!important;margin:0!important}
.mod-album .btn_pn_prev{left:0!important}.mod-album .btn_pn_next{right:0!important}
.mod-album .btn_pn{margin:-22px 0 0 -22px!important;padding:10px!important;border-radius:6px!important;background:rgba(51,51,51,.85)!important}
.mod-album .btn_pn .gp{width:24px!important;height:18px!important;background-size:contain!important;background-position:center!important}
.mod-album .subject_wrap{padding-top:20px!important}
.mod-album .subject_wrap .t1{font-size:18px!important;line-height:1.35!important}
.mod-album .subject_wrap .t2{font-size:14px!important;line-height:1.5!important;margin:8px 0 0!important;padding-top:10px!important}
.mod-album .btn_wrap{height:auto!important;margin-top:8px!important}
.mod-album .btn_wrap .btn{margin:8px 4px 0!important;width:auto!important;min-width:56px;padding:0 10px!important;height:30px!important}
.mod-album .btn_wrap .btn>p{font-size:14px!important;line-height:18px!important;padding:5px 0!important;white-space:nowrap}
.mod-album .listArea{width:100%!important;padding:var(--m-sec-in) 0 8px!important}
.mod-album .module_contents2{display:flex!important;flex-wrap:wrap!important;gap:20px 12px!important;margin-bottom:24px!important;height:auto!important;text-align:left!important}
.mod-album .thumb{width:calc(50% - 6px)!important;height:auto!important;margin:0!important;display:block!important}
.mod-album .thumb .photo_wrap{width:100%!important;height:auto!important}
.mod-album .thumb .photo img{width:100%!important;height:auto!important}
.mod-album .thumb .lock_wrap{width:50%!important;height:100%!important}
/* 2026-09-23: 영문 제외. 3줄 제한(54px)에 한국어 제목은 들어가지만 번역 제목은 네 줄이 되어
   **영문에서만** 잘린다(body_01_01 390px 실측 en sh72 > ch54, ko 는 3줄 안). 완료조건 "문구 잘림 0" 에 걸린다.
   영문 칸은 `_i18n/en-system.css` 가 정한다(글꼴·크기는 원본 14px/20px 그대로, 높이만 자람). */
html:not([data-tgi-sys]) .mod-album .thumb .subject{font-size:var(--m-note)!important;line-height:18px!important;height:auto!important;max-height:54px;margin-top:8px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mod-album .pagenavi{padding-top:16px!important}
.mod-album .pagenavi span{min-width:0!important;margin:0 2px!important;padding:6px 8px!important;font-size:13px!important}
.mod-album .pagenavi a span,.mod-album .pagenavi strong span{width:28px!important;padding:6px 0!important}
.mod-album .s_notice{padding:var(--m-sec-in) 0 var(--m-sec)!important}
.mod-album .s_notice p{font-size:var(--m-note)!important;line-height:1.6!important;letter-spacing:0!important}
/* 전후사진 2열 카드(.mod-bna) — 한 열로 */
.mod-bna{padding:var(--m-sec) 0 0!important}
.mod-bna .container{padding:0 var(--m-gutter)!important;max-width:none!important}
.mod-bna .mod-head{margin:0 auto var(--m-sec-in)!important}
.mod-bna .mod-head h3{width:100%!important;max-width:300px!important;height:68px!important;background-size:contain!important;background-position:center!important}
.mod-bna .bna-grid{grid-template-columns:1fr!important;gap:24px!important;justify-content:stretch!important}
.mod-bna .bna .ph{aspect-ratio:2/1!important}
.mod-bna .bna .cap{font-size:var(--m-note)!important;line-height:1.5!important;margin-top:10px!important}
.mod-bna .bna-note{margin-top:28px!important;font-size:var(--m-note)!important;line-height:1.6!important;letter-spacing:0!important}
.mod-bna .bna-more{margin-top:24px!important}
.mod-bna .bna-more-btn,.mod-bna .bna-more-btn:hover{width:200px!important;height:53px!important;background-size:contain!important;background-repeat:no-repeat!important}
/* 이벤트 — 카드 2열 */
.mod-event .container{padding:0 var(--m-gutter)!important;max-width:none!important}
.mod-event .evt-head{padding:var(--m-sec) 0 var(--m-sec-in)!important}
.mod-event .evt-head .more-round,.mod-selfie .selfie-head .more-round{width:40px!important;height:40px!important;border-radius:20px!important;top:auto!important;bottom:20px!important}
.mod-event .evt-grid{flex-wrap:wrap!important;gap:12px!important;justify-content:flex-start!important}
.mod-event .evt{width:calc(50% - 6px)!important;flex:0 0 calc(50% - 6px)!important}
.mod-event .evt-more{width:100%!important;margin:var(--m-sec-in) 0 0!important}
.mod-event .evt-more-btn{width:100%!important;height:52px!important}
/* 셀피 — 2열 */
.mod-selfie,section.mod-selfie-bot{padding-top:0!important;margin-top:var(--m-sec)!important}
section.mod-selfie-bot::before{left:0!important;margin-left:0!important;width:100%!important}
.mod-selfie .selfie-head{padding:var(--m-sec) 0 var(--m-sec-in)!important}
.mod-selfie .container{padding:0 var(--m-gutter) var(--m-sec)!important;max-width:none!important}
.mod-selfie .selfie-grid{column-count:2!important;column-gap:10px!important}
/* 하단 CTA */
section.cta{padding:var(--m-sec) 0!important}
.cta-box{padding:28px 20px!important;border-radius:16px!important}
.cta-box h3{font-size:22px!important;line-height:1.3!important}
.cta-box p{font-size:var(--m-body)!important;line-height:1.6!important}
.cta-box::after{font-size:140px!important}
/* 모듈 머리(제목) — 고정 폭 풀기 */
.mod-head{display:block!important}
.mod-head h3{width:auto!important;max-width:100%!important;font-size:var(--m-h2)!important;line-height:1.3!important}

/* ── 4. 서브 조각(.tg-fr) 글자 규칙 — 한국어 산세리프 한 벌, 역할별 크기 ──
      제외: 화면 낭독용(.sr), 표시용 영문·손글씨·번호·눈썹·단계·꼬리표·배지(디자인 요소), 번역 페이지의 영문 라벨(data-fr-en) */
.tg-fr #hero :is(h1,h2):not(.sr):not([class*="display"]):not([class*="hand"]):not([class*="eyebrow"]):not([class*="kicker"]):not([class*="num"]):not([data-fr-en]){
  font-family:var(--m-font)!important;font-size:var(--m-h1)!important;line-height:1.25!important;font-weight:700!important;letter-spacing:-.02em!important}
.tg-fr :is(h1,h2):not(.sr):not(#hero *):not([class*="display"]):not([class*="hand"]):not([class*="eyebrow"]):not([class*="kicker"]):not([class*="num"]):not([data-fr-en]){
  font-family:var(--m-font)!important;font-size:var(--m-h2)!important;line-height:1.3!important;font-weight:700!important;letter-spacing:-.02em!important}
.tg-fr h3:not(.sr):not([class*="display"]):not([class*="hand"]):not([class*="eyebrow"]):not([class*="kicker"]):not([class*="num"]):not([class*="step"]):not([data-fr-en]){
  font-family:var(--m-font)!important;font-size:var(--m-h3)!important;line-height:1.4!important;font-weight:700!important;letter-spacing:-.01em!important}
.tg-fr :is(h4,h5,dt):not(.sr):not([class*="display"]):not([class*="hand"]):not([class*="eyebrow"]):not([class*="kicker"]):not([class*="num"]):not([class*="step"]):not([data-fr-en]){
  font-family:var(--m-font)!important;font-size:var(--m-h4)!important;line-height:1.5!important;font-weight:700!important;letter-spacing:0!important}
.tg-fr :is(p,li,dd,td,th,figcaption):not(.sr):not([class*="display"]):not([class*="hand"]):not([class*="eyebrow"]):not([class*="kicker"]):not([class*="num"]):not([class$="__n"]):not([class$="-n"]):not([class*="step"]):not([class*="tag"]):not([class*="badge"]):not([class*="label"]):not([class*="cap"]):not([class*="note"]):not([class*="disc"]):not([class*="lead"]):not([data-fr-en]){
  font-family:var(--m-font)!important;font-size:var(--m-body)!important;line-height:1.7!important;letter-spacing:0!important}
.tg-fr :is(p,li,dd)[class*="lead"]:not([data-fr-en]){font-family:var(--m-font)!important;font-size:16px!important;line-height:1.65!important;letter-spacing:0!important}
.tg-fr :is(p,li,dd,span,small)[class*="cap"]:not([data-fr-en]),.tg-fr :is(p,li,dd,span,small)[class*="note"]:not([data-fr-en]),.tg-fr :is(p,li,dd,span,small)[class*="disc"]:not([data-fr-en]){
  font-family:var(--m-font)!important;font-size:var(--m-note)!important;line-height:1.6!important;letter-spacing:0!important}
}
@media (max-width:820px){
/* ── intro_doctor 학술활동 CTA(.s3-cta) — PC 좌표(격자 3열)에 남아 화면 밖 1,200px 에 있던 것 → 글 아래 흐름으로 ── */
[class*="tcf_intro_doctor"] .s3-cta{position:static!important;display:inline-flex!important;flex-wrap:wrap;align-items:center;gap:8px 12px;width:auto!important;max-width:100%;margin:20px 0 0!important;left:auto!important;top:auto!important;transform:none!important}
[class*="tcf_intro_doctor"] .s3-cta :is(.s3-cta1,.s3-cta2,.s3-go){position:static!important;text-align:left!important;font-size:14px!important;line-height:1.4!important}
}