/* ═══════════════════════════════════════════════════════════════
   다국어 페이지 공용 스타일 (en / jp / zh / 앞으로 추가될 언어 공통)

   ★여기가 단일 출처(SSoT)다. 예전에는 이 90줄을 각 언어 index.html이
     따로 복사해 들고 있어서, 한 곳을 고치면 언어 수만큼 반복 수정해야 했다.
     새 언어를 추가할 때는 이 파일을 link 하고 <html lang="..."> 만 맞추면 된다.

   불러오는 순서: site.css → subpage.css → lang.css (이 파일)
   ═══════════════════════════════════════════════════════════════ */


  /* 영문 원페이지 전용 보정 (국문 디자인 토큰/블록을 그대로 상속, 최소 조정만) */
  .en-hero-copy h1{word-break:normal;}
  .subhero .lead, .sub-2col .s2-tx p, .sub-full p, .subblk .sec-head .desc{word-break:normal;}
  .subblk .sec-head h2, .sub-2col .s2-tx h2, .sub-cards .card h3, .sub-steps .st-tx h3, .sub-cta h2, .sub-full h2{word-break:normal;}
  .en-note{font-size:16px;color:var(--muted);margin-top:14px;line-height:1.7;}
  .en-sub-list-plain .lwrap{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
  /* 카드형 리스트(제목+설명): 제목 위계 강화 + 본문 가독성 */
  .en-sub-list-plain .mk ul{margin:0;padding:0;list-style:none;}
  .en-sub-list-plain .mk:has(.ld) .lt{font-size:22.5px;font-weight:700;color:var(--g900);line-height:1.4;margin-bottom:8px;letter-spacing:-.01em;}
  .en-sub-list-plain .mk .ld{font-size:19.5px;line-height:1.78;color:#46544c;}
  #precision-tests .lwrap{grid-template-columns:1fr 1fr;}
  #precision-tests .mk-img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:center top;margin:18px 0 0;display:block;border-radius:var(--radius);}
  @media(max-width:780px){#precision-tests .lwrap{grid-template-columns:1fr;}}
  .en-aftercare .lwrap{grid-template-columns:1fr 1fr;align-items:stretch;}
  .en-aftercare .mk{display:flex;flex-direction:column;height:100%;}
  .en-aftercare.sub-list .mk .mk-img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:center top;margin-top:auto;margin-bottom:0;border-radius:var(--radius);}
  @media(max-width:780px){.en-aftercare .lwrap{grid-template-columns:1fr;}}
  .en-lap-fields .lwrap{grid-template-columns:1fr 1fr 1fr;}
  .en-lap-fields .mk-img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:center;margin:0 0 16px;display:block;border-radius:var(--radius);}
  @media(max-width:780px){.en-lap-fields .lwrap{grid-template-columns:1fr;}}
  /* 2026-09-03 담낭절제술 시행 중단으로 항목이 위절제술 1개만 남았다. 3열을 그대로 두면
     오른쪽 두 칸이 비어 균형이 무너진다 → 폭을 절반(gap 40px 반영)으로 키워 가운데 둔다.
     항목이 다시 2개 이상이 되면 이 블록만 지우면 원래 3열 배치로 돌아간다. */
  @media(min-width:781px){
    .en-lap-fields .lwrap{grid-template-columns:minmax(0,calc((100% - 40px)/2));justify-content:center;}
  }
  /* 복강경 수술 — 사진 3장 가로 나란히 + 아래 텍스트 */
  .en-lap-hero{text-align:center;}
  .en-lap-hero .eyebrow{display:inline-block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);color:var(--g700);text-transform:uppercase;}
  .en-lap-hero h2{font-size:var(--fs-h2);font-weight:800;color:var(--g900);letter-spacing:-.025em;line-height:1.25;margin:12px 0 0;word-break:keep-all;}
  .en-lap-hero .lscenes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 24px;}
  .en-lap-hero .lscenes img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:var(--radius);}
  .en-lap-hero p{max-width:820px;margin:0 auto;}
  @media(max-width:780px){.en-lap-hero .lscenes{grid-template-columns:1fr;gap:14px;}}
  /* BIB 위풍선 4단계 — 국문 요약처럼 한 줄 4개 컴팩트 그리드 */
  .en-bib-steps .stpgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
  .en-bib-steps .bstp{position:relative;text-align:center;padding-top:14px;}
  .en-bib-steps .bno{position:absolute;top:-6px;left:11%;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:71px;color:var(--g50);line-height:1;z-index:0;}
  .en-bib-steps .bci{position:relative;z-index:1;width:180px;max-width:82%;margin:0 auto 16px;}
  .en-bib-steps .bci img{width:100%;display:block;}
  .en-bib-steps .bstp h3{margin:0 0 7px;font-size:21px;font-weight:800;color:var(--g900);line-height:1.35;letter-spacing:-.02em;word-break:normal;}
  .en-bib-steps .bstp p{margin:0;font-size:18px;color:#46544c;line-height:1.6;word-break:normal;}
  @media(max-width:768px){.en-bib-steps .stpgrid{grid-template-columns:repeat(2,1fr);gap:32px 18px;}.en-bib-steps .bno{font-size:61.5px;}}
  @media(max-width:430px){.en-bib-steps .stpgrid{grid-template-columns:1fr;gap:28px;}}
  /* 5S 카드 5개 — 데스크톱에서 3+2 균형(가운데 정렬) */
  @media(min-width:781px){
    .en-5s .cgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;}
    .en-5s .card{flex:0 1 calc((100% - 44px)/3);max-width:calc((100% - 44px)/3);}
  }
  .en-wcancer-intro .sec-head{text-align:center;max-width:820px;margin:0 auto 34px;}
  .wc-circles{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,4vw,60px);margin:6px auto 38px;}
  .wc-circle{width:clamp(150px,16vw,186px);aspect-ratio:1/1;border-radius:50%;border:1px solid var(--tline,#e6e8e3);display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;}
  .wc-circle span{font-size:clamp(17px,1.47vw,18.5px);font-weight:600;color:var(--g700);line-height:1.55;}
  .wc-lead{max-width:820px;margin:0 auto;text-align:center;font-size:var(--fs-body);line-height:1.85;color:#46544c;word-break:normal;}
  @media(max-width:560px){.wc-circle{width:132px;}}
  .en-nk-list{margin:8px 0 0;padding:0;list-style:none;}
  .en-nk-list li{position:relative;padding-left:22px;margin:10px 0;font-size:18px;line-height:1.65;color:#46544c;}
  .en-nk-list li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--g700);}
  .en-therapy .th-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.6vw,34px);margin-top:8px;}
  .en-therapy .th-card{display:flex;flex-direction:column;border:1px solid var(--tline,#e6e8e3);border-radius:var(--radius);overflow:hidden;background:#fff;}
  .en-therapy .th-img{aspect-ratio:16/9;background:var(--g50);overflow:hidden;}
  .en-therapy .th-img img{width:100%;height:100%;object-fit:cover;display:block;}
  .en-therapy .th-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;}
  .en-therapy .th-body h3{font-size:clamp(23.5px,2.2vw,28.5px);font-weight:700;color:var(--g900);margin:0 0 10px;}
  .en-therapy .th-body p{font-size:18px;line-height:1.72;color:#46544c;margin:0;}
  .en-therapy .th-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;}
  .en-therapy .th-chips span{font-size:14px;color:var(--g700);background:var(--g50);border:1px solid var(--tline,#e6e8e3);border-radius:999px;padding:5px 12px;line-height:1.3;}
  .en-therapy .th-meta{margin-top:auto;padding-top:16px;font-size:16px;color:var(--muted);}
  .en-therapy .th-meta b{color:var(--g700);font-weight:600;}
  @media(max-width:820px){.en-therapy .th-grid{grid-template-columns:1fr;}}
  .en-mech .mech-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.6vw,34px);margin-top:8px;}
  .en-mech .mech-card{margin:0;border:1px solid var(--tline,#e6e8e3);border-radius:var(--radius);overflow:hidden;background:#fff;}
  .en-mech .mech-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--g50);}
  .en-mech .mech-card figcaption{padding:20px 24px 24px;}
  .en-mech .mech-card h3{font-size:clamp(22px,2.09vw,27px);font-weight:700;color:var(--g900);margin:0 0 10px;}
  .en-mech .mech-card p{font-size:18px;line-height:1.72;color:#46544c;margin:0;}
  @media(max-width:820px){.en-mech .mech-grid{grid-template-columns:1fr;}}
  .map-frame{border:1px solid var(--tline,#e6e8e3);border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;background:var(--g50);}
  .map-frame iframe{width:100%;height:100%;border:0;display:block;}
  /* 장 면역치료 1박2일 진행과정 · 암 통합면역치료 흐름 — 한 줄에 두 항목씩(국문 페이지와 동일) */
  #program .stp-grid,#cancer-flow .stp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px) clamp(32px,5vw,72px);}
  #program .stp,#cancer-flow .stp{grid-template-columns:1fr;gap:16px;margin-top:0;align-items:start;min-width:0;}
  /* 폰트 확대 후 CJK 최소폭이 커져 그리드 칸을 밀어내는 것 방지 */
  #program .stp .st-tx,#cancer-flow .stp .st-tx{min-width:0;}
  #program .stp + .stp,#cancer-flow .stp + .stp{margin-top:0;}
  #program .stp .st-tx,#cancer-flow .stp .st-tx{order:0;text-align:center;}
  #program .st-img,#cancer-flow .st-img{width:54.6%;margin:0 auto;}
  #program .st-tx .st-no,#cancer-flow .st-tx .st-no{font-size:clamp(34.5px,3.92vw,50px);color:var(--g700);}
  #program .st-tx h3{font-size:clamp(18px,1.76vw,22.5px);}
  #cancer-flow .st-tx h3{font-size:clamp(23.5px,2.42vw,30.5px);}
  #program .st-tx h3::after,#cancer-flow .st-tx h3::after{margin-left:auto;margin-right:auto;}
  #program .st-tx p{font-size:calc(var(--fs-body) * 0.7);}
  #cancer-flow .st-tx p{font-size:calc(clamp(21.5px,2.2vw,27.5px) * 0.9);}
  @media(max-width:780px){
    #program .stp-grid,#cancer-flow .stp-grid{grid-template-columns:1fr;gap:32px;}
    #program .st-img,#cancer-flow .st-img{width:78%;}
  }

/* ── 일본어·중국어 전용 보정 ──────────────────────────────────
   CJK는 keep-all이 가로 넘침을 유발하므로 본문만 normal로 되돌리고,
   본문 폰트는 자국 폰트를 우선한다. 영문(en)에는 적용되지 않는다.
   ★2026-08-10: overflow-wrap:break-word 가 CJK 금칙처리(줄 첫머리에 「。」「、」를 두지 않는 규칙)를 깨뜨려
   마지막 줄에 구두점 한 글자만 남는 현상이 있었다(실측). overflow-wrap:normal + line-break:strict 로 바로잡는다. */
:where(html[lang="ja"]) h1,
:where(html[lang="ja"]) h2,
:where(html[lang="ja"]) h3,
:where(html[lang="ja"]) h4,
:where(html[lang="ja"]) h5,
:where(html[lang="ja"]) p,
:where(html[lang="ja"]) li,
:where(html[lang="ja"]) dd,
:where(html[lang="ja"]) dt,
:where(html[lang="ja"]) th,
:where(html[lang="ja"]) td,
:where(html[lang="ja"]) b,
:where(html[lang="ja"]) strong,
:where(html[lang="ja"]) em,
:where(html[lang="ja"]) blockquote,
:where(html[lang="ja"]) figcaption{word-break:normal;overflow-wrap:break-word;line-break:strict;}
:where(html[lang^="zh"]) h1,
:where(html[lang^="zh"]) h2,
:where(html[lang^="zh"]) h3,
:where(html[lang^="zh"]) h4,
:where(html[lang^="zh"]) h5,
:where(html[lang^="zh"]) p,
:where(html[lang^="zh"]) li,
:where(html[lang^="zh"]) dd,
:where(html[lang^="zh"]) dt,
:where(html[lang^="zh"]) th,
:where(html[lang^="zh"]) td,
:where(html[lang^="zh"]) b,
:where(html[lang^="zh"]) strong,
:where(html[lang^="zh"]) em,
:where(html[lang^="zh"]) blockquote,
:where(html[lang^="zh"]) figcaption{word-break:normal;overflow-wrap:break-word;line-break:strict;}
:where(html[lang="ja"]) .en-lap-hero h2{word-break:normal;}
:where(html[lang^="zh"]) .en-lap-hero h2{word-break:normal;}
:where(html[lang="ja"]) .sub-2col .grid > *{min-width:0;}
:where(html[lang^="zh"]) .sub-2col .grid > *{min-width:0;}
:where(html[lang="ja"]) .sub-table table{table-layout:fixed;width:100%;}
:where(html[lang^="zh"]) .sub-table table{table-layout:fixed;width:100%;}
:where(html[lang="ja"]) body{font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic','Meiryo','Noto Sans JP','Pretendard','PretendardFull',sans-serif;}
:where(html[lang^="zh"]) body{font-family:'PingFang SC','Microsoft YaHei','Hiragino Sans GB','Noto Sans SC','Pretendard',sans-serif;}

/* ── 태국어(th) ────────────────────────────────────────────────
   태국어는 단어 사이에 띄어쓰기가 없어 기본 word-break:keep-all 이면
   한 덩어리로 붙어 가로로 넘친다 → 브라우저의 태국어 줄바꿈에 맡긴다.
   ★반드시 :where() 로 감쌀 것 — 우선순위가 0이라 기존 공용 CSS를 밀어내지 않는다.
   Pretendard 에는 태국어 글자가 없어(키릴은 포함) 본문 폰트를 시스템 태국어 폰트 우선으로 둔다. */
:where(html[lang="th"]) h1,
:where(html[lang="th"]) h2,
:where(html[lang="th"]) h3,
:where(html[lang="th"]) h4,
:where(html[lang="th"]) h5,
:where(html[lang="th"]) p,
:where(html[lang="th"]) li,
:where(html[lang="th"]) dd,
:where(html[lang="th"]) dt,
:where(html[lang="th"]) th,
:where(html[lang="th"]) td,
:where(html[lang="th"]) b,
:where(html[lang="th"]) strong,
:where(html[lang="th"]) em,
:where(html[lang="th"]) blockquote,
:where(html[lang="th"]) figcaption{word-break:normal;overflow-wrap:break-word;}
:where(html[lang="th"]) .en-lap-hero h2{word-break:normal;}
:where(html[lang="th"]) .sub-2col .grid > *{min-width:0;}
:where(html[lang="th"]) .sub-table table{table-layout:fixed;width:100%;}
:where(html[lang="th"]) body{font-family:'Noto Sans Thai','Leelawadee UI','Thonburi','Sarabun','Pretendard',sans-serif;line-height:1.75;}

/* ── 러시아어(ru) ──────────────────────────────────────────────
   Pretendard 가 키릴을 포함하므로 폰트 교체는 불필요.
   다만 러시아어는 단어가 길어 좁은 칸에서 넘칠 수 있어 줄바꿈만 완화한다. */
:where(html[lang="ru"]) h1,
:where(html[lang="ru"]) h2,
:where(html[lang="ru"]) h3,
:where(html[lang="ru"]) h4,
:where(html[lang="ru"]) h5,
:where(html[lang="ru"]) p,
:where(html[lang="ru"]) li,
:where(html[lang="ru"]) dd,
:where(html[lang="ru"]) dt,
:where(html[lang="ru"]) th,
:where(html[lang="ru"]) td,
:where(html[lang="ru"]) b,
:where(html[lang="ru"]) strong,
:where(html[lang="ru"]) em,
:where(html[lang="ru"]) blockquote,
:where(html[lang="ru"]) figcaption{word-break:normal;overflow-wrap:break-word;}
/* 자동 하이픈은 좁은 표·본문에서만. 제목에 걸리면 보기 나쁘다. */
:where(html[lang="ru"]) p,
:where(html[lang="ru"]) li,
:where(html[lang="ru"]) td,
:where(html[lang="ru"]) dd{hyphens:auto;}
:where(html[lang="ru"]) h1,
:where(html[lang="ru"]) h2,
:where(html[lang="ru"]) h3,
:where(html[lang="ru"]) h4,
:where(html[lang="ru"]) h5{hyphens:manual;}
:where(html[lang="ru"]) .en-lap-hero h2{word-break:normal;}
:where(html[lang="ru"]) .sub-2col .grid > *{min-width:0;}
:where(html[lang="ru"]) .sub-table table{table-layout:fixed;width:100%;}

/* 러시아어는 라벨이 영어보다 길어 PC 대메뉴가 1280px에서 넘치고(6px),
   상단 고정 앵커바는 모든 폭에서 마지막 항목이 잘렸다(스크롤바를 숨겨 둬 발견도 불가).
   → 러시아어에서만 메뉴 간격과 앵커바 여백을 줄여 해결한다. 실측 기반 수치. */
/* 2026-09-01 「Экскурсия」 항목이 늘어 1600px 이하가 다시 넘쳤다(실측 45~130px) → 재조정 */
:where(html[lang="ru"]) header nav>ul{gap:clamp(13px,1.7vw,44px);}
:where(html[lang="ru"]) header nav>ul>li>a{font-size:18px;}
:where(html[lang="ru"]) .sub-anchor a{padding-left:11px;padding-right:11px;font-size:16.5px;}

/* ★1280px 딱 그 폭에서만 예약 버튼이 4px 넘쳤다(실측). 예약 버튼은 1280px부터 나타나는데
   그 순간 러시아어 메뉴 폭이 딱 4px 모자란다 — 1300px 이상은 원래 정상이다.
   그래서 넘치는 구간(1280~1299px)에만 간격을 좁힌다. 다른 폭의 렌더는 건드리지 않는다. */
@media (min-width:1280px) and (max-width:1299px){
  :where(html[lang="ru"]) header nav>ul{gap:13px;}
}

/* 모바일 햄버거 메뉴 안의 언어 선택기.
   상단 유틸바는 860px 이하에서 숨겨지므로, 그 아래에서는 여기로 언어를 바꾼다.
   (한국어 메인 index.html 인라인 규칙과 동일한 모양) */
.mega .mlang{display:none;}
@media(max-width:860px){
  .mega .mlang{display:block;grid-column:1 / -1;}
  .mega .mlang .lang{display:flex;flex-wrap:wrap;gap:8px;}
  .mega .mlang .lang span{display:flex;align-items:center;gap:7px;padding:9px 14px;min-height:42px;border:1px solid var(--line);border-radius:9px;font-size:16px;color:#3b4a43;cursor:pointer;}
  .mega .mlang .lang span img{width:20px;height:14px;object-fit:cover;border-radius:2px;}
  .mega .mlang .lang span.on{background:var(--g500);color:#fff;border-color:var(--g500);font-weight:700;}
}

/* ── 몽골어(mn) ────────────────────────────────────────────────
   몽골어는 키릴 문자라 Pretendard 가 그대로 커버한다(폰트 교체 불필요, 러시아어와 같음).
   다만 단어가 길어 좁은 칸에서 넘칠 수 있어 줄바꿈만 완화한다.
   자동 하이픈은 브라우저에 몽골어 사전이 없어 무효이므로 걸지 않는다. */
:where(html[lang="mn"]) h1,
:where(html[lang="mn"]) h2,
:where(html[lang="mn"]) h3,
:where(html[lang="mn"]) h4,
:where(html[lang="mn"]) h5,
:where(html[lang="mn"]) p,
:where(html[lang="mn"]) li,
:where(html[lang="mn"]) dd,
:where(html[lang="mn"]) dt,
:where(html[lang="mn"]) th,
:where(html[lang="mn"]) td,
:where(html[lang="mn"]) b,
:where(html[lang="mn"]) strong,
:where(html[lang="mn"]) em,
:where(html[lang="mn"]) blockquote,
:where(html[lang="mn"]) figcaption{word-break:normal;overflow-wrap:break-word;}
:where(html[lang="mn"]) .en-lap-hero h2{word-break:normal;}
:where(html[lang="mn"]) .sub-2col .grid > *{min-width:0;}
:where(html[lang="mn"]) .sub-table table{table-layout:fixed;width:100%;}

/* 몽골어 라벨은 영어보다 훨씬 길어(대메뉴 합계 767px vs 영문 517px) 1280px에서 예약버튼이
   20px 밀려났다 — 실측값. 글꼴을 한 단계 줄이고 메뉴 간격을 고정 범위로 묶어 해결한다.
   ★vw 비례 간격은 넓은 화면(1600px+)에서 다시 넘치므로 상한을 30px로 고정했다. */
:where(html[lang="mn"]) header nav>ul{gap:clamp(13px,1.6vw,28px);}  /* 2026-09-01 항목 8개로 늘어 재조정 */
:where(html[lang="mn"]) header nav>ul>li>a{font-size:18px;}
:where(html[lang="mn"]) .sub-anchor a{padding-left:10px;padding-right:10px;font-size:16px;}

/* 2026-10-08 외국어 홈 원장 경력 — 줄마다 한 항목이라 모바일에서도 줄을 나눈다(국문 #team 과 같은 처리) */
@media(max-width:780px){#doctors .s2-tx p br,#doctor-choi .s2-tx p br{display:revert;}}