/* ============================================================
   lang.css — 언어 전환(한국어 ↔ 中文) 공용 스타일 + 언어 선택 랜딩(lang.html)

   설계 원칙
   1. 기존 CSS(styles/renewal/pages/subpage-nav/m_mobile)는 일절 수정하지 않는다.
      전부 이 파일에서 덧입히기만 하므로, 이 <link> 한 줄을 빼면 원상 복구된다.
   2. 닫혀 있을 때 "현재 언어"를 보여주고, 누르면 목록이 펼쳐지는 드롭다운이다.
      - 펼침 버튼에 지구본을 쓰지 않는다. 현재 언어를 그대로 보여줘 추측할 일을 없앤다.
      - 목록 안의 언어 이름은 **어느 페이지에서나 원어 그대로**(한국어 / 中文 / English).
        한국어 페이지에서 '중국어'라고 적으면 정작 중국인이 못 읽는다.
      - 버튼 라벨만 현재 페이지 언어를 따른다(한국어판 「한국어」, 중문판 「中文」, 영문판 「English」).
   3. <details>/<summary> 네이티브 요소를 쓴다. JS가 죽어도 펼침·선택이 동작하고
      키보드·Esc가 브라우저 기본 동작으로 따라온다. lang.js는 "닫는 조건"만 맡는다.
   4. 헤더가 3종류(홈 .top-bar / PC서브 .header_row / 모바일 .mh-actions)라
      배치 변형 4개를 둔다.
   ============================================================ */

/* ── 국기 아이콘 ──
   🇰🇷 이모지는 Windows에서 국기가 아니라 "KR" 글자 두 개로 렌더된다(검수 환경이 Windows).
   그래서 인라인 SVG data URI로 그린다 — 파일 추가도, 네트워크 요청도 없다.
   색상은 rgb()로 적었다. #을 쓰면 data URI 안에서 %23으로 이스케이프해야 해 읽기 어려워진다. */
.lang-flag {
  width: 18px; height: 12px; flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, .12);   /* 태극기 흰 바탕이 흰 패널에 묻히지 않게 */
  background-size: cover; background-position: center;
}
/* 태극기 — 태극(원 지름 = 깃면 높이의 1/2, -56.31° 회전) + 4괘.
   괘 배치는 국기법 시행령 기준: 건 왼쪽 위, 감 오른쪽 위, 리 왼쪽 아래, 곤 오른쪽 아래. */
.lang-flag--ko {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'><rect width='36' height='24' fill='rgb(255,255,255)'/><g transform='rotate(-56.31 18 12)'><circle cx='18' cy='12' r='6' fill='rgb(205,46,58)'/><path fill='rgb(0,71,160)' d='M12 12a3 3 0 0 0 6 0 3 3 0 0 1 6 0 6 6 0 0 1-12 0z'/></g><g fill='rgb(0,0,0)'><g transform='translate(9.43 6.29) rotate(-56.31)'><rect x='-2.5' y='-2.65' width='5' height='1.1'/><rect x='-2.5' y='-.55' width='5' height='1.1'/><rect x='-2.5' y='1.55' width='5' height='1.1'/></g><g transform='translate(26.57 6.29) rotate(56.31)'><rect x='-2.5' y='-2.65' width='2' height='1.1'/><rect x='.5' y='-2.65' width='2' height='1.1'/><rect x='-2.5' y='-.55' width='5' height='1.1'/><rect x='-2.5' y='1.55' width='2' height='1.1'/><rect x='.5' y='1.55' width='2' height='1.1'/></g><g transform='translate(9.43 17.71) rotate(56.31)'><rect x='-2.5' y='-2.65' width='5' height='1.1'/><rect x='-2.5' y='-.55' width='2' height='1.1'/><rect x='.5' y='-.55' width='2' height='1.1'/><rect x='-2.5' y='1.55' width='5' height='1.1'/></g><g transform='translate(26.57 17.71) rotate(-56.31)'><rect x='-2.5' y='-2.65' width='2' height='1.1'/><rect x='.5' y='-2.65' width='2' height='1.1'/><rect x='-2.5' y='-.55' width='2' height='1.1'/><rect x='.5' y='-.55' width='2' height='1.1'/><rect x='-2.5' y='1.55' width='2' height='1.1'/><rect x='.5' y='1.55' width='2' height='1.1'/></g></g></svg>");
}
/* 오성홍기 — 30×20 격자 규격 그대로. 큰 별 중심 (5,5) 반지름 3,
   작은 별 4개는 반지름 1에 각각 꼭짓점 하나가 큰 별 중심을 향하도록 회전. */
.lang-flag--zh {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='rgb(238,28,36)'/><g fill='rgb(255,222,0)'><polygon transform='translate(5 5) scale(3)' points='0,-1 .225,-.309 .951,-.309 .363,.118 .588,.809 0,.382 -.588,.809 -.363,.118 -.951,-.309 -.225,-.309'/><polygon transform='translate(10 2) rotate(-120.96)' points='0,-1 .225,-.309 .951,-.309 .363,.118 .588,.809 0,.382 -.588,.809 -.363,.118 -.951,-.309 -.225,-.309'/><polygon transform='translate(12 4) rotate(-98.13)' points='0,-1 .225,-.309 .951,-.309 .363,.118 .588,.809 0,.382 -.588,.809 -.363,.118 -.951,-.309 -.225,-.309'/><polygon transform='translate(12 7) rotate(-74.05)' points='0,-1 .225,-.309 .951,-.309 .363,.118 .588,.809 0,.382 -.588,.809 -.363,.118 -.951,-.309 -.225,-.309'/><polygon transform='translate(10 9) rotate(-51.34)' points='0,-1 .225,-.309 .951,-.309 .363,.118 .588,.809 0,.382 -.588,.809 -.363,.118 -.951,-.309 -.225,-.309'/></g></svg>");
}

/* 일장기 — 국기법 기준 2:3, 붉은 원 지름 = 세로의 3/5, 정중앙.
   viewBox 36×24 에서 지름 14.4 이므로 반지름 7.2, 중심 (18,12).
   ⚠ 이모지 🇯🇵 는 Windows 에서 국기가 아니라 「JP」 글자 두 개로 렌더된다(검수 환경이 Windows).
      다른 국기와 같은 이유로 인라인 SVG 로 그린다 — 파일 추가도, 네트워크 요청도 없다. */
.lang-flag--ja {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'><rect width='36' height='24' fill='rgb(255,255,255)'/><circle cx='18' cy='12' r='7.2' fill='rgb(188,0,45)'/></svg>");
}

/* 성조기 — 13줄(적7·백6) + 유니온에 별 50개(6·5 교차 9줄).
   실제 국기 비율은 10:19지만 여기서는 태극기·오성홍기와 같은 3:2(36×24)로 그린다.
   한 줄에 나란히 놓이는 아이콘이라 칸 크기가 어긋나는 쪽이 더 눈에 띈다.
   별은 18px 폭에서 물리적으로 형태가 안 잡히므로 원으로 찍는다 — 같은 인상에 데이터가 훨씬 짧다. */
.lang-flag--en {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'><rect width='36' height='24' fill='rgb(255,255,255)'/><g fill='rgb(179,25,66)'><rect y='0' width='36' height='1.846'/><rect y='3.692' width='36' height='1.846'/><rect y='7.385' width='36' height='1.846'/><rect y='11.077' width='36' height='1.846'/><rect y='14.769' width='36' height='1.846'/><rect y='18.462' width='36' height='1.846'/><rect y='22.154' width='36' height='1.846'/></g><rect width='14.4' height='12.923' fill='rgb(10,49,97)'/><g fill='rgb(255,255,255)'><g><circle cx='1.2' cy='1.29' r='.42'/><circle cx='3.6' cy='1.29' r='.42'/><circle cx='6' cy='1.29' r='.42'/><circle cx='8.4' cy='1.29' r='.42'/><circle cx='10.8' cy='1.29' r='.42'/><circle cx='13.2' cy='1.29' r='.42'/></g><g><circle cx='2.4' cy='2.58' r='.42'/><circle cx='4.8' cy='2.58' r='.42'/><circle cx='7.2' cy='2.58' r='.42'/><circle cx='9.6' cy='2.58' r='.42'/><circle cx='12' cy='2.58' r='.42'/></g><g><circle cx='1.2' cy='3.88' r='.42'/><circle cx='3.6' cy='3.88' r='.42'/><circle cx='6' cy='3.88' r='.42'/><circle cx='8.4' cy='3.88' r='.42'/><circle cx='10.8' cy='3.88' r='.42'/><circle cx='13.2' cy='3.88' r='.42'/></g><g><circle cx='2.4' cy='5.17' r='.42'/><circle cx='4.8' cy='5.17' r='.42'/><circle cx='7.2' cy='5.17' r='.42'/><circle cx='9.6' cy='5.17' r='.42'/><circle cx='12' cy='5.17' r='.42'/></g><g><circle cx='1.2' cy='6.46' r='.42'/><circle cx='3.6' cy='6.46' r='.42'/><circle cx='6' cy='6.46' r='.42'/><circle cx='8.4' cy='6.46' r='.42'/><circle cx='10.8' cy='6.46' r='.42'/><circle cx='13.2' cy='6.46' r='.42'/></g><g><circle cx='2.4' cy='7.75' r='.42'/><circle cx='4.8' cy='7.75' r='.42'/><circle cx='7.2' cy='7.75' r='.42'/><circle cx='9.6' cy='7.75' r='.42'/><circle cx='12' cy='7.75' r='.42'/></g><g><circle cx='1.2' cy='9.05' r='.42'/><circle cx='3.6' cy='9.05' r='.42'/><circle cx='6' cy='9.05' r='.42'/><circle cx='8.4' cy='9.05' r='.42'/><circle cx='10.8' cy='9.05' r='.42'/><circle cx='13.2' cy='9.05' r='.42'/></g><g><circle cx='2.4' cy='10.34' r='.42'/><circle cx='4.8' cy='10.34' r='.42'/><circle cx='7.2' cy='10.34' r='.42'/><circle cx='9.6' cy='10.34' r='.42'/><circle cx='12' cy='10.34' r='.42'/></g><g><circle cx='1.2' cy='11.63' r='.42'/><circle cx='3.6' cy='11.63' r='.42'/><circle cx='6' cy='11.63' r='.42'/><circle cx='8.4' cy='11.63' r='.42'/><circle cx='10.8' cy='11.63' r='.42'/><circle cx='13.2' cy='11.63' r='.42'/></g></g></svg>");
}

/* ── 드롭다운 ── */
.lang-dd { position: relative; display: inline-block; }

/* summary는 기본 display가 list-item이라 삼각형 마커가 붙는다. 브라우저별로 제거 경로가 달라 셋 다 쓴다. */
/* min-width 를 버튼에 주고 목록은 width:100%(= .lang-dd 폭 = 버튼 폭)로 받는다.
   그래야 「한국어」와 「中文」처럼 글자 수가 다른 언어에서도 버튼과 목록의 가로가 항상 일치한다.
   space-between 은 남는 폭을 국기·라벨·화살표 사이로 흘려보내 첨부 화면과 같은 배치를 만든다. */
.lang-dd-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
  min-width: 104px;
  padding: 4px 8px 4px 8px;
  border: 1px solid rgba(94, 69, 52, .3);
  border-radius: 999px;
  color: #5a4332;
  font-size: 12.5px; font-weight: 700; line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none; user-select: none;
  transition: background .2s ease, border-color .2s ease;
}
.lang-dd-btn::-webkit-details-marker { display: none; }
.lang-dd-btn::marker { content: ''; }
.lang-dd-btn:hover,
.lang-dd[open] > .lang-dd-btn {
  background: rgba(90, 67, 50, .08);
  border-color: rgba(94, 69, 52, .55);
}
.lang-dd-btn:focus-visible { outline: 2px solid rgba(94, 69, 52, .55); outline-offset: 2px; }
.lang-dd-caret { font-size: 14px; line-height: 1; color: #8b7d70; transition: transform .18s ease; }
.lang-dd[open] .lang-dd-caret { transform: rotate(180deg); }

/* 패널은 오른쪽 끝(right:0) 기준으로 붙인다 — 버튼이 화면 우측에 있어 왼쪽 기준이면 밖으로 나간다.
   width:100% 는 .lang-dd(= 버튼) 폭을 그대로 물려받는다는 뜻이라 버튼과 목록의 가로가 일치한다.
   min-width:max-content 는 --sub 가 좁은 폭에서 국기+화살표로 접힐 때만 발동하는 안전장치다. */
.lang-dd-list {
  position: absolute; z-index: 20;
  top: calc(100% + 6px); right: 0;
  width: 100%; min-width: max-content;
  margin: 0; padding: 4px;
  list-style: none;
  background: #FFFEFC;
  border: 1px solid rgba(94, 69, 52, .18);
  border-radius: 11px;
  box-shadow: 0 10px 28px rgba(44, 37, 32, .16);
  animation: langDdIn .16s ease both;
}
@keyframes langDdIn { from { opacity: 0; transform: translateY(-4px); } }
.lang-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px;
  border-radius: 8px;
  color: #5a4332; font-size: 13px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; text-decoration: none;
}
.lang-dd-item:hover,
.lang-dd-item:focus-visible { background: rgba(90, 67, 50, .07); color: #4a3628; }

/* ── 선택된 항목 ──
   체크 아이콘 대신 '칠해진 칸'으로 표시한다. 아이콘이 차지하던 자리가 사라져
   목록 폭이 펼침 버튼 폭과 정확히 맞아떨어진다.
   브랜드 크림(#f6efea) 배경 + 왼쪽 액센트 바 — 색만으로 구분하지 않아 대비가 낮은 화면에서도 읽힌다.
   시각 표시가 바뀐 것뿐이므로 aria-current="true"는 마크업에 그대로 남겨 두었다. */
.lang-dd-item.is-current {
  position: relative;
  background: #f6efea;
  color: #4a3628;
  font-weight: 700;
}
.lang-dd-item.is-current::before {
  content: '';
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 15px;
  border-radius: 2px;
  background: #5a4332;
}
.lang-dd-item.is-current:hover { background: #efe4dc; }

/* 언어 이름은 그 언어의 폰트로. 중문판에서 「한국어」가 SC 폰트로, 한국어판에서 「中文」이
   KR 폰트로 떨어지면 자형이 어색해진다. */
.lang-dd [lang="ko"], .lang-dd-cur[lang="ko"] { font-family: 'Noto Sans KR', sans-serif; }
.lang-dd [lang="zh-Hans"], .lang-dd-cur[lang="zh-Hans"] { font-family: 'Noto Sans SC', 'Noto Sans KR', sans-serif; }

/* 홈은 .util-bar(z:50)와 .top-bar(z:50)가 같은 층인데 top-bar가 DOM 뒤라 패널이 헤더 뒤로 숨는다.
   서브페이지는 util-bar 1001 > header_wrap 1000이라 원래 문제없다.
   lang.js가 열려 있는 동안만 body에 .lang-open을 붙인다 — 상시로 올리면 다른 레이어 순서가 바뀐다. */
body.lang-open .util-bar { z-index: 1002; }

/* ── 배치 ①(주): PC 유틸리티 바 .util-bar-inner ──
   ⚠ util-bar의 성질 두 가지가 있다.
     (1) 스크롤을 시작하면 접힌다 — body.page-scrolled .util-bar{transform:translateY(-100%)}
         → 펼친 채로 스크롤하면 목록이 딸려 올라가므로 lang.js가 스크롤 시 닫는다.
     (2) 좁은 화면에서는 아예 숨는다 — 홈·서브 모두 ≤767.98px에서 display:none
         → 그 구간만 헤더 쪽 예비 배치(②③)가 받는다. */
.lang-dd--util { margin-left: auto; }
/* 홈의 .util-bar-inner는 width가 없어 콘텐츠 폭까지만 늘어난다 → margin-left:auto가 먹지 않음.
   서브페이지 쪽은 width:var(--wrap)이 이미 있으므로 건드리면 안 되어 body 클래스로 갈라 쓴다. */
body:not(.subpage) .util-bar-inner { flex: 1; }

/* ── 배치 ②: 홈 .top-bar-right (util-bar가 숨는 구간 예비) ── */
.lang-dd--top { display: none; }
.lang-dd--top .lang-dd-btn { padding: 6px 9px; }
.top-bar-right { display: flex; align-items: center; gap: 8px; }

/* ── 배치 ③: PC 서브페이지 .header_row (util-bar가 숨는 구간 예비) ── */
.lang-dd--sub { display: none; margin-left: auto; }
.lang-dd--sub .lang-dd-btn { padding: 6px 9px; }

/* ── 배치 ④: 모바일 전용판 .mh-actions ──
   .mutil(모바일 유틸바)은 폰 폭에서 전화·진료시간만으로 이미 꽉 차고 스크롤 시 접힌다.
   QR 유입이 전부 이 화면이므로 언어 선택은 헤더에 상시 노출한다. */
.lang-dd--m { margin-right: 2px; }
.lang-dd--m .lang-dd-btn { padding: 6px 8px; }
.mh-actions { gap: 2px; }

/* util-bar가 숨는 지점은 홈·서브가 동일하게 767.98px다
   (renewal.css:601 / subpage-nav.css:118 — 둘 다 @media(max-width:767.98px) 안에 있다).
   여기서부터 헤더 쪽 예비 배치가 받는다. 이 구간 밖에서는 반드시 --util 하나만 보여야 한다. */
@media (max-width: 767.98px) {
  .lang-dd--top,
  .lang-dd--sub { display: inline-block; }

  /* ⚠ styles.css:999가 ≤1024px에서 .mobile_menu_btn{margin-left:auto}를 준다.
     --sub에도 margin-left:auto가 있으면 남은 여백을 둘이 나눠 가져 드롭다운이 헤더 한가운데로
     밀리고, 같은 구간에서 절대 배치로 중앙 정렬되는 병원명(.logo_text_link)과 겹친다.
     여기서만 햄버거의 auto를 걷어내 --sub가 여백을 전부 먹고 오른쪽 끝에 붙게 한다. */
  .lang-dd--sub ~ .mobile_menu_btn { margin-left: 0; }
}
@media (max-width: 520px) {
  /* PC 서브페이지만의 사정: styles.css:1000이 ≤1024px에서 병원명(.logo_text_link)을
     화면 정중앙에 절대 배치한다. 「릴리프정형외과의원」은 9자라 480px에서 드롭다운과 맞닿고
     420px에서는 30px 겹친다(실측). 이 구간에서만 라벨을 접어 국기+화살표로 줄인다 —
     현재 언어는 국기가 계속 알려주고, 펼치면 이름이 다시 나온다.
     (모바일 전용판 --m 은 병원명이 왼쪽 정렬이라 해당 없음. 홈 --top 도 마찬가지.) */
  .lang-dd--sub .lang-dd-cur { display: none; }
  /* 라벨이 빠졌으니 폭 고정도 함께 푼다 — 안 그러면 104px 안에서 국기와 화살표만
     space-between 으로 양끝에 밀려 가운데가 텅 빈다. 목록은 max-content 로 제 폭을 찾는다. */
  .lang-dd--sub .lang-dd-btn { gap: 3px; padding: 6px 6px; min-width: 0; }
}
@media (max-width: 400px) {
  /* 초소형 폰: 로고 이름·햄버거와 한 줄에 들어가도록 전체를 한 단계 줄인다.
     국기·라벨·화살표는 셋 다 남긴다 — 무엇이 선택돼 있고 펼쳐진다는 신호가 여기서 제일 필요하다. */
  .lang-flag { width: 15px; height: 10px; }
  .lang-dd-btn { font-size: 11.5px; gap: 4px; padding: 5px 7px; }
  .lang-dd-caret { font-size: 13px; }
  .lang-dd-list { min-width: 128px; }
}

/* ============================================================
   중문 페이지 폰트 (원칙 7)
   Noto Sans KR에는 简体 전용 자형(过/关/来 등)이 없어 fallback되면 자형이 섞인다.
   본문은 Noto Sans SC로, 영문 장식 헤드라인(Playfair)은 그대로 둔다 —
   중문 카피에 세리프 이탤릭을 씌우면 어색하므로 확장하지 않는다.

   아래 셀렉터는 각 CSS가 'Noto Sans KR'을 직접 박아둔 지점 전부다(그 외는 body 상속):
     styles.css  body / .logo_text_pretendard / .logo_text_eng / .map_marker::after
     renewal.css body / .logo-name-en / .hero_eyebrow
     m_mobile.css body / .mstat-num small
   ============================================================ */
/* 일본어 — Noto Sans KR 에는 일본 신자체 자형(直·対·様·広 등)이 없어
   그대로 두면 한국 한자와 일본 한자가 섞여 보인다. 중문판과 같은 이유로 앞에 세운다.
   장식 영문(Playfair)은 건드리지 않는다 — 일본어 카피에 세리프 이탤릭을 씌우지 않는 것과 별개. */
html[lang="ja"] body,
html[lang="ja"] .logo_text_pretendard,
html[lang="ja"] .logo_text_eng,
html[lang="ja"] .logo-name-en,
html[lang="ja"] .hero_eyebrow,
html[lang="ja"] .mstat-num small,
html[lang="ja"] .map_marker::after {
  font-family: 'Noto Sans JP', 'Noto Sans KR', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}
/* 일본어도 어절 개념이 없어 한국어용 keep-all 이면 긴 문장이 한 덩어리로 밀려
   가로 스크롤이 생긴다. 중문판과 같은 처리. */
html[lang="ja"] body { word-break: normal; overflow-wrap: break-word; }

/* ── 진료과 오해 차단 문구 (일본어판 전용) ──
   일본어로 「韓国 整形外科」를 검색하면 미용성형 클리닉이 거의 전부다. 한국 병원이라는 점이
   오해 위험을 키워서, 첫 화면과 안심가이드 두 곳에서 진료 영역을 밝힌다.
   마크업은 build_ja.mjs 가 넣는다(한국어 원본에 대응 문구가 없는 신설 항목이라 사전에 못 넣는다). */

/* 히어로 — 사진 위 밝은 글자. 병원명(.hero_sub)보다 한 단 낮춰 이름을 가리지 않게. */
html[lang="ja"] .ja-hero-note {
  margin-top: .3em;
  font-size: .95rem; font-weight: 500; line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
/* 안심가이드 — 밝은 배경. 「읽고 넘어가는 안내」로 보이게 옅은 카드에 담는다.
   접히는 FAQ 항목이 아니라 탭 위에 그냥 둔 이유: 오해한 사람은 누르기 전에 떠난다. */
html[lang="ja"] .ja-faq-note {
  margin: 18px 0 0; padding: 12px 16px;
  border-left: 3px solid var(--main, #5a4332);
  border-radius: 0 8px 8px 0;
  background: #F6F1EB;
  font-size: 15px; line-height: 1.7; color: #5E5248;
}
/* 푸터 브랜드 열 — index 를 뺀 11장이 여기에 진료 영역 한 줄을 싣는다.
   히어로가 없는 서브페이지에서 12장 모두 같은 구조를 가진 유일한 자리라 여기로 정했다.
   태그라인 바로 밑, 같은 크기에 브랜드색만 얹어 「병원 설명의 일부」로 읽히게 한다. */
html[lang="ja"] .ja-foot-note {
  margin-top: 6px;
  font-size: 13px; line-height: 1.5; font-weight: 500;
  color: var(--main, #5a4332);
}

@media (max-width: 767.98px) {
  html[lang="ja"] .ja-hero-note { font-size: 13px; }
  html[lang="ja"] .ja-faq-note { font-size: 13.5px; padding: 11px 13px; }
  html[lang="ja"] .ja-foot-note { font-size: 12.5px; }
}

html[lang="zh-Hans"] body,
html[lang="zh-Hans"] .logo_text_pretendard,
html[lang="zh-Hans"] .logo_text_eng,
html[lang="zh-Hans"] .logo-name-en,
html[lang="zh-Hans"] .hero_eyebrow,
html[lang="zh-Hans"] .mstat-num small,
html[lang="zh-Hans"] .map_marker::after {
  font-family: 'Noto Sans SC', 'Noto Sans KR', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
/* 한국어는 어절 단위로 끊는 keep-all이 자연스럽지만, 중문은 어절 개념이 없어
   keep-all이면 긴 문장이 한 덩어리로 밀려 가로 스크롤이 생긴다. */
html[lang="zh-Hans"] body { word-break: normal; overflow-wrap: break-word; }

/* 원문 병기(한글 주소·역명·간판) — 중문 본문 안에서 톤을 낮춰 보조 정보로 읽히게.
   택시 기사·지도 앱에 그대로 보여줄 수 있어야 하므로 절대 숨기지 않는다. (원칙 5) */
.ko-orig {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: .88em;
  color: #766A5F;
  font-weight: 500;
  word-break: keep-all;
}

/* ── "이 줄을 상대에게 보여주세요" 카드 ──
   중문 페이지에 한글이 그냥 놓여 있으면 번역 누락으로 오해받는다.
   용도(기사·행인에게 제시)를 중문 라벨로 밝히고, 실제로 내밀 수 있게 크고 또렷하게. */
.ko-show {
  display: block;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed rgba(94, 69, 52, .42);
  border-radius: 10px;
  background: #FFFDF9;
}
.ko-show-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: #8b7d70;
  margin-bottom: 7px;
}
.ko-show-label i { font-size: 14px; color: #5a4332; }
.ko-show-text {
  display: block;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 15.5px; font-weight: 700; line-height: 1.6;
  color: #3f3128; word-break: keep-all;
}
@media (max-width: 639.98px) {
  .ko-show { padding: 11px 12px; }
  .ko-show-text { font-size: 14.5px; }
}

/* ============================================================
   영문판 전용 보정 (원칙 7)
   ============================================================ */

/* ── 헤더 로고 2행 ──
   로고는 「1행 현지어 병원명 / 2행 로마자 병기」 2행 락업이다.
   한국어 「릴리프정형외과의원 / RELIEF ORTHOPEDICS」, 중문 「Relief 骨科 / RELIEF ORTHOPEDICS」는
   두 행이 서로 다르지만, 영문판은 양쪽 다 Relief Orthopedics 가 되어 같은 말이 두 번 찍혔다.
   그래서 2행을 한글 원문으로 채운다(build_lang.mjs · lang_cfg.mjs 의 logoSub).
   아래는 그 자리가 전부 **로마자 전제**로 짜여 있어 한글이 깨지는 것을 되돌리는 규칙이다.
     styles.css:319    .logo_text_eng  — uppercase · 자간 .12em
     renewal.css:103   .logo-name-en   — uppercase · 자간 .14em
     m_mobile.css:66   .mh-name-en     — Playfair Display **italic** (한글 자형 없음) */
html[lang="en"] .logo-name-en,
html[lang="en"] .logo_text_eng,
html[lang="en"] .mh-name-en {
  font-family: 'Noto Sans KR', sans-serif;
  font-style: normal;
  /* 로마자용 넓은 자간을 한글에 그대로 걸면 낱글자로 흩어져 단어로 안 읽힌다. */
  letter-spacing: .01em;
  text-transform: none;
}
/* 로마자 9자와 한글 9자는 같은 px 에서 밀도가 다르다 — 원래 크기(8~9.6px)면 뭉개진다.
   .logo-name-en 은 vw 단위라 좁은 창에서 6px 까지 내려간다. 한글이 형태를 유지하는
   하한을 max() 로 두면 renewal.css 의 브레이크포인트를 따라다니지 않아도 된다.
   2행이 1행보다 항상 짧으므로(한글 9자 < Relief Orthopedics 18자) 헤더 폭은 안 넓어진다. */
html[lang="en"] .logo-name-en { font-size: max(10px, 0.86vw); }
html[lang="en"] .logo_text_eng { font-size: .72rem; }
html[lang="en"] .mh-name-en { font-size: 10px; }

/* ── 원장 약력 라벨 컬럼 (index.html #section3) ──
   styles.css:598 은 .career_label 이 min-width:90px(≥1280 은 :1304 의 96px)이다.
   한국어 「연수 · 학회」는 그 안에 들어가지만 영문 「Fellowships and societies」는 약 205px —
   **그 행만** 컬럼이 늘어나 본문 시작 위치가 어긋난다. 폭을 고정하고 라벨을 줄바꿈시킨다.
   공용 규칙을 안 고치는 이유: 한국어·중문 라벨은 지금 폭에 문제가 없고 이미 감수가 끝났다. */
html[lang="en"] #section3 .career_label {
  width: 132px; min-width: 132px;
  line-height: 1.45;
  word-break: normal; overflow-wrap: break-word;
}
/* styles.css:613 에서 행이 세로 스택으로 바뀌는 구간 — 라벨이 제 줄을 통째로 쓰므로 고정폭이 무의미하다. */
@media (max-width: 1024px) {
  html[lang="en"] #section3 .career_label { width: auto; min-width: 0; }
}

/* ============================================================
   중국어 브라우저 안내 띠 (lang.js가 동적으로 삽입)
   하단 고정 — 상단은 고정 헤더/유틸바가 이미 쓰고 있어 겹친다.
   모바일에는 하단 퀵바(.mobile_bottom_bar / 모바일판 탭바)가 있어 그만큼 띄운다.
   ============================================================ */
.lang-hint {
  position: fixed; z-index: 880;
  left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 24px);
  padding: 11px 12px 11px 18px;
  border-radius: 999px;
  background: rgba(28, 22, 16, .95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(28, 22, 16, .3);
  font-family: 'Noto Sans SC', 'Noto Sans KR', sans-serif;
  font-size: 13.5px; color: rgba(253, 251, 249, .88);
  animation: langHintIn .35s ease both;
}
@keyframes langHintIn { from { opacity: 0; transform: translate(-50%, 12px); } }
.lang-hint-go {
  flex-shrink: 0;
  padding: 7px 14px; border-radius: 999px;
  background: #FDFBF9; color: #4a3628;
  font-weight: 700; font-size: 13px; text-decoration: none;
}
.lang-hint-go:hover { background: #fff; }
.lang-hint-x {
  flex-shrink: 0;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: rgba(253, 251, 249, .6); font-size: 20px; line-height: 1;
  cursor: pointer;
}
.lang-hint-x:hover { color: #FDFBF9; }
@media (max-width: 991.98px) {
  .lang-hint {
    bottom: calc(72px + env(safe-area-inset-bottom));
    font-size: 12.5px; gap: 8px; padding: 9px 10px 9px 15px;
  }
  .lang-hint-go { font-size: 12px; padding: 6px 12px; }
}

/* ============================================================
   언어 선택 랜딩 (lang.html 전용)
   ============================================================ */
.lp-body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: 'Noto Sans KR', 'Noto Sans SC', sans-serif;
  color: #FDFBF9;
  background: #1C1610;
  -webkit-font-smoothing: antialiased;
}
/* 랜딩 전용 축소본(1200px, 60KB). 원본 hero_1.jpg는 2000px·314KB로 홈에서 계속 쓴다.
   QR 유입은 지하철 승강장 = 약한 신호라 첫 화면 무게가 곧 이탈률이다.
   어차피 아래 ::after 그라데이션이 82% 덮으므로 화질 손실이 보이지 않는다. */
.lp-bg {
  position: fixed; inset: 0; z-index: 0;
  background: #1C1610 url('./assets/images/main/hero_lang.jpg') center / cover no-repeat;
}
.lp-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(28, 22, 16, .82) 0%, rgba(44, 33, 23, .74) 45%, rgba(28, 22, 16, .9) 100%);
}
.lp-main {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 34px;
  padding: 56px 20px 40px;
  text-align: center;
}
.lp-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lp-brand img { height: 62px; width: auto; }
.lp-brand-en {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-weight: 600;
  font-size: 26px; letter-spacing: .06em;
  color: #FDFBF9; margin: 0;
}
.lp-brand-sub {
  margin: 0; font-size: 13.5px; font-weight: 500; letter-spacing: .02em;
  color: rgba(253, 251, 249, .72); line-height: 1.7;
}
.lp-brand-sub b { font-weight: 700; color: rgba(253, 251, 249, .92); }

/* ── 진료 상태 배지 ──
   스캔 직후 첫 질문("지금 열었나")에 한 줄로 답한다. lang.js가 한국 시간으로 채운다.
   상태를 점 색 하나로만 구분하지 않고 문구로도 적는다 — 색각 이상·햇빛 아래 화면을 고려. */
.lp-status {
  display: inline-flex; align-items: center; gap: 10px;
  margin: -8px 0 -4px;
  padding: 9px 16px 9px 14px;
  border: 1px solid rgba(253, 251, 249, .22);
  border-radius: 999px;
  background: rgba(253, 251, 249, .09);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-align: left;
}
.lp-status[hidden] { display: none; }
.lp-status-dot {
  flex-shrink: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(253, 251, 249, .45);
}
.lp-status.is-open  .lp-status-dot { background: #6FD08C; box-shadow: 0 0 0 4px rgba(111, 208, 140, .18); }
.lp-status.is-soon  .lp-status-dot { background: #E8B84B; box-shadow: 0 0 0 4px rgba(232, 184, 75, .18); }
.lp-status-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.lp-status-ko { font-size: 14px; font-weight: 700; color: #FDFBF9; }
.lp-status-zh {
  font-family: 'Noto Sans SC', 'Noto Sans KR', sans-serif;
  font-size: 12px; font-weight: 500; color: rgba(253, 251, 249, .62);
}

.lp-pick {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(253, 251, 249, .5);
}

/* ── 전화 · 길찾기 ──
   언어를 고르지 않아도 바로 되는 두 가지. 언어 카드와 같은 폭에 맞춰 아래에 둔다.
   랜딩은 remixicon을 불러오지 않으므로(무게) 아이콘은 인라인 SVG data URI로 그린다. */
.lp-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; width: 100%; max-width: 560px;
}
.lp-action {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 12px;
  border: 1px solid rgba(253, 251, 249, .28);
  border-radius: 12px;
  color: #FDFBF9; text-decoration: none;
  font-size: 14.5px; font-weight: 700;
  transition: background .2s ease, border-color .2s ease;
}
.lp-action:hover, .lp-action:focus-visible {
  background: rgba(253, 251, 249, .12);
  border-color: rgba(253, 251, 249, .55);
}
.lp-action--call { background: rgba(253, 251, 249, .1); }
.lp-action-zh {
  font-family: 'Noto Sans SC', 'Noto Sans KR', sans-serif;
  font-size: 12.5px; font-weight: 500; color: rgba(253, 251, 249, .6);
}
.lp-action-ico {
  width: 18px; height: 18px; flex-shrink: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.lp-ico-call {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(253,251,249)'><path d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/></svg>");
}
.lp-ico-map {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(253,251,249)'><path d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>");
}

/* ⚠ 카드 **개수에 맞춰** 늘어나야 한다. 일본어판이 감수 전에는 꺼져 있어(inject_ja_flag --off)
   3장, 켜면 4장이 된다. grid 로 열 수를 고정하면 3장일 때 오른쪽에 빈 칸이 생겨 고장처럼 보인다.
   flex + flex-grow 면 3장이면 3등분, 4장이면 4등분으로 저절로 맞는다. */
.lp-langs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; width: 100%; max-width: 640px;
}
.lp-lang {
  /* ⚠ box-sizing 이 필요하다. grid 였을 때는 아이템이 트랙 **테두리 상자**를 채워
     패딩이 저절로 포함됐지만, flex-basis 는 기본(content-box)에서 **안쪽 폭**을 뜻한다.
     그대로 두면 좌우 패딩 32px + 테두리 2px 이 더해져 한 줄에 못 들어가고 카드가 흩어진다. */
  box-sizing: border-box;
  flex: 1 1 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 26px 16px;
  border: 1px solid rgba(253, 251, 249, .26);
  border-radius: 16px;
  background: rgba(253, 251, 249, .07);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #FDFBF9; text-decoration: none;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.lp-lang:hover, .lp-lang:focus-visible {
  background: rgba(253, 251, 249, .15);
  border-color: rgba(253, 251, 249, .6);
  transform: translateY(-2px);
}
/* 랜딩은 어두운 배경이라 헤더용 검은 테두리가 묻힌다 — 밝은 쪽으로 뒤집는다. */
.lp-lang .lang-flag {
  width: 30px; height: 20px;
  border-radius: 3px;
  border-color: rgba(253, 251, 249, .38);
  margin-bottom: 3px;
}
.lp-lang-name { font-size: 21px; font-weight: 700; letter-spacing: .01em; }
.lp-lang-note { font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(253, 251, 249, .58); }
.lp-lang--zh .lp-lang-name { font-family: 'Noto Sans SC', 'Noto Sans KR', sans-serif; }
/* ⚠ 일본어 카드에는 폰트 규칙을 두지 않는다. lang.html 은 **일본어 본문이 없어** Noto Sans JP 를
   불러오지 않는다(지하철 신호에서 CJK 폰트를 하나 더 받는 값이 「日本語」 세 글자보다 비싸다).
   이 세 글자는 KR·JP 자형이 사실상 같아 Noto Sans KR 로 제대로 보인다.
   중문 카드에 규칙이 있는 것은 lang.html 에 중문 **본문**이 있어 SC 를 이미 받기 때문이다. */

/* 스캔 직후 바로 필요한 실용 정보 — 랜딩에서 한 번 더 노출 (원칙 1) */
.lp-info {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(253, 251, 249, .14);
  padding: 22px 20px 30px;
  display: grid; gap: 10px;
  text-align: center;
}
.lp-info-row { font-size: 13px; line-height: 1.6; color: rgba(253, 251, 249, .8); }
.lp-nw { white-space: nowrap; }
.lp-info-row b { font-weight: 700; color: #FDFBF9; }
.lp-info-row .lp-zh { font-family: 'Noto Sans SC', 'Noto Sans KR', sans-serif; }
.lp-info-row .ko-orig { color: rgba(253, 251, 249, .58); }
.lp-info a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(253, 251, 249, .3); }

@media (max-width: 480px) {
  .lp-main { gap: 22px; padding: 36px 18px 28px; }
  .lp-brand img { height: 50px; }
  .lp-brand-en { font-size: 22px; }
  /* 언어 카드는 1열로 세우되, 전화·길찾기는 2열을 유지한다 —
     둘 다 세로로 쌓으면 첫 화면이 넘쳐 언어 선택이 스크롤 아래로 밀린다. */
  /* 언어 카드는 1열로 세우되, 전화·길찾기는 2열을 유지한다 —
     둘 다 세로로 쌓으면 첫 화면이 넘쳐 언어 선택이 스크롤 아래로 밀린다.
     ⚠ 2열로 만들어 보았으나 좁은 폭에서 깨진다. 가로 배치 카드의 최소 폭은
        [국기 30 + 이름 + 영문 표기]라 약 177px 이고, 두 장이면 365px 로 340px 를 넘는다.
        일부만 두 장씩 들어가 줄마다 폭이 달라지므로 **전부 한 줄씩**으로 통일한다.
        flex-basis 를 100% 로 두면 카드가 3장이든 4장이든 같은 모양이다. */
  .lp-langs { gap: 11px; max-width: 340px; }
  .lp-lang { flex: 1 1 100%; flex-direction: row; justify-content: center; gap: 10px; padding: 15px 16px; }
  .lp-lang .lang-flag { margin-bottom: 0; }
  .lp-lang-name { font-size: 19px; }
  .lp-actions { max-width: 340px; }
  .lp-action { padding: 12px 10px; font-size: 13.5px; }
  .lp-status { padding: 8px 14px 8px 12px; }
  .lp-status-ko { font-size: 13px; }
  .lp-status-zh { font-size: 11.5px; }
  /* 폰 한 화면에 언어 선택까지 들어가야 한다. 하단 정보는 그 아래로 밀리되 잘리지 않게. */
  .lp-brand { gap: 10px; }
  .lp-brand-sub { font-size: 12.5px; }
  .lp-info { padding: 18px 18px 26px; gap: 8px; }
  .lp-info-row { font-size: 12px; }
}

/* ============================================================
   국기 직링크 (index.html 전용 — 드롭다운 대체)
   드롭다운 없이 오성홍기·성조기를 바로 노출, 클릭 즉시 해당 언어 사이트로 이동.
   .lang-dd 규칙은 다른 페이지(서브·zh·모바일판)가 아직 사용하므로 그대로 둔다. */
.lang-links { display: inline-flex; align-items: center; gap: 10px; }
.lang-link { display: inline-flex; border-radius: 4px; }
.lang-link .lang-flag {
  width: 33px; height: 22px;              /* 기존 18×12 드롭다운 국기 대비 확대 */
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(20,14,8,.15);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lang-link:hover .lang-flag,
.lang-link:focus-visible .lang-flag { transform: scale(1.12); box-shadow: 0 3px 8px rgba(20,14,8,.25); }
.lang-link:focus-visible { outline: 2px solid rgba(94,69,52,.55); outline-offset: 2px; }

/* 배치: 기존 lang-dd --util/--top/--sub/--m과 동일한 노출 규칙 (전 페이지 국기 직링크로 이관) */
.lang-links--util { margin-left: auto; }
.lang-links--top { display: none; }
.lang-links--sub { display: none; margin-left: auto; }   /* PC 서브페이지 헤더 예비 배치 */
.lang-links--m { margin-right: 2px; }                    /* 모바일 전용판 헤더 상시 노출 */
@media (max-width: 767.98px) {
  .lang-links--top,
  .lang-links--sub { display: inline-flex; } /* util-bar가 숨는 구간은 헤더가 받는다 */
  /* styles.css:999가 ≤1024px에서 .mobile_menu_btn{margin-left:auto} — --sub가 여백을 전부
     먹고 오른쪽 끝에 붙도록 햄버거의 auto를 걷어냄 (구 lang-dd--sub와 동일 처리) */
  .lang-links--sub ~ .mobile_menu_btn { margin-left: 0; }
}
@media (max-width: 400px) {
  /* 초소형 폰: 헤더 한 줄 유지 — 그래도 드롭다운 시절(15×10)보다 훨씬 크다 */
  .lang-link .lang-flag { width: 27px; height: 18px; }
}