@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:url(/_next/static/media/Pretendard-Regular.subset.69ae4866.woff2)format("woff2")}
@font-face{font-family:Pretendard;font-weight:500;font-display:swap;src:url(/_next/static/media/Pretendard-Medium.subset.08f13fdc.woff2)format("woff2")}
@font-face{font-family:Pretendard;font-weight:600;font-display:swap;src:url(/_next/static/media/Pretendard-SemiBold.subset.747db366.woff2)format("woff2")}





/* ★scroll-padding-top — 헤더가 sticky 65~66px 이라 앵커로 뛰면 제목이 그 밑에 깔린다.
   Tab 으로 옮긴 포커스도 같다. 헤더 높이 + 6px 여유. */
html { font-size: clamp(9px, .52vw, 10px); scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  scroll-padding-top: 72px; }

/* ── 스킵 링크 ─────────────────────────────────────────────────
   ⛔여기에 둔다(nyw-page.css 가 아니라) — 그 시트는 하위 지면만 읽는다.
   ⛔rem 금지: root 가 9~10px 라 .8rem 패딩이면 링크가 64×11px 로 그려졌다.
   키보드로 «처음» 닿는 요소라 작으면 안 된다. */
.nyw-skip { position: absolute; left: -9999px; font-size: 14px; }
.nyw-skip:focus { left: 16px; top: 16px; z-index: 99; background: #0a0a0a; color: #fff;
  font-size: 14px; line-height: 1; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 18px; border-radius: 4px; text-decoration: none;
  outline: 2px solid #fff; outline-offset: 2px; }
body { margin: 0; }
h1,h2,h3,h4,h5,h6,p,dl,dd,figure { margin: 0; }
ul,ol { margin: 0; padding: 0; }
a { color: inherit; }
img { border: 0; }
button { font: inherit; }
:where(.nyw) :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ── ① 팔레트 — 주황·브라운 계열을 무채색으로 ─────────────── */
:root, [data-theme="tu"] {
  --text-primary: #0a0a0a;
  --accent-primary: #0a0a0a;
  --accent-on-primary: #ffffff;
  --accent-tertiary: #b4b4b4;
  --bg-brand: #0a0a0a;
  --bg-btn-pressed: #3d3d3d;
  --bg-tertiary: #0a0a0a0d;
  --neutral-900: #0a0a0a;
  --neutral-700: #4f4f4f;
  --neutral-500: #b4b4b4;

  /* 이 지면이 쓰는 토큰 */
  --nyw-ink: #0a0a0a;
  --nyw-paper: #ffffff;
  --nyw-mute: #6b6b6b;
  /* ★2026-09-06 PC/AEO 진단 — #a8a8a8(흰 배경 위 2.38:1)은 WCAG 4.5:1 미달이었다.
     #707070 으로 올린다. 이 토큰의 실사용처 9곳
     (.nyw-kicker·.nyw-lic__foot·.nyw-svc__no/en·.nyw-cv .y·FAQ 화살표·.nyw-pg__en/en2/label)이
     걸치는 두 배경 다 4.5:1 이상이어야 해서 값을 두 번 조정했다 —
     ①처음 #767676 은 흰 배경(4.54:1)엔 맞았지만 #numbers·#info 두 «다크» 섹션의 킥커가
       검정(#0a0a0a) 위에서 8.33:1→4.36:1 로 되레 나빠졌다(playwright 실측, 아래 .nyw-dark
       .nyw-kicker 로 그 두 곳만 원래 밝기로 되돌렸다) ②그 다음 #services 섹션(nyw-surface
       #f5f5f5) 킥커가 4.17:1 로 근소 미달이었다 — #707070 은 흰(4.95:1)·surface(4.54:1)
       둘 다 넘는다(픽셀 계산 확인 완료, playwright 실측 재확인 완료). */
  --nyw-faint: #707070;
  --nyw-line: #e4e4e4;
  --nyw-surface: #f5f5f5;
  --nyw-inverse-line: #2a2a2a;
  --nyw-max: 128rem;
  --nyw-pad: 4rem;

  /* Section header tokens — single source of truth for the three parts of every
     section head (eyebrow label / title / sub copy). The values below are the
     measured home page, which is the canonical reference for this site.
     Donor-derived pages map their own class names onto these tokens at the end
     of this file, so a number is never written twice. */
  /* ⛔px 로 못박는다 — root 가 clamp(9px,.52vw,10px) 라 1.3rem 이 데스크톱에서
     11.7px 로 그려져 12px 하한을 깼다(전 지면 섹션 아이라벨 20건). 토큰이라 한 줄로 끝난다. */
  --nyw-sh-label-size: 12px;
  --nyw-sh-label-weight: 600;
  --nyw-sh-label-tracking: 0.16em;
  --nyw-sh-label-color: var(--nyw-faint);
  --nyw-sh-label-gap: 1.6rem;

  --nyw-sh-title-font: "Arial Narrow", Pretendard, serif;
  --nyw-sh-title-size: clamp(3.2rem, 5.6vw, 7.2rem);
  --nyw-sh-title-weight: 300;
  --nyw-sh-title-leading: 1.02;
  --nyw-sh-title-tracking: -0.02em;
  --nyw-sh-title-gap: 2.4rem;

  --nyw-sh-sub-size: 1.8rem;
  --nyw-sh-sub-leading: 1.85;
  --nyw-sh-sub-color: var(--nyw-mute);

  /* Gap under the breadcrumb row. Reuses the label step so the number is
     written once; see .nyw-crumb in nyw-page.css. */
  --nyw-crumb-gap: var(--nyw-sh-label-gap);
}

/* ── ② 정적 렌더 해제 — JS 가 없으므로 최종 상태로 고정 ────── */
html, body { overflow: visible !important; height: auto !important; }
[data-animate] .textInner,
.textInner, .bubble { opacity: 1 !important; }
.nyw [data-animate] { opacity: 1 !important; transform: none !important; }

/* ── ③ 이 지면 ─────────────────────────────────────────────── */
.nyw {
  background: var(--nyw-paper);
  color: var(--nyw-ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.nyw *, .nyw *::before, .nyw *::after { box-sizing: border-box; }
.nyw img { max-width: 100%; display: block; }
.nyw-wrap { width: 100%; max-width: var(--nyw-max); margin-inline: auto; padding-inline: var(--nyw-pad); }
.nyw-sec { padding-block: 12rem; }
.nyw-sec--tight { padding-block: 8rem; }
.nyw-dark { background: var(--nyw-ink); color: var(--nyw-paper); }
.nyw-surface { background: var(--nyw-surface); }
/* ★2026-09-06 대비 수정 회귀 방지 — --nyw-faint 를 #a8a8a8→#767676 로 올리면서
   흰 배경(9곳)은 2.38:1→4.54:1 로 좋아졌지만, #numbers·#info 두 다크 섹션(.nyw-dark)의
   .nyw-kicker 는 검정 배경(#0a0a0a) 위에서 8.33:1→4.36:1 로 «오히려 나빠졌다»
   (playwright 실측 — "By the numbers"·"Visit" 킥커, 4.5:1 살짝 미달).
   다크 배경만 원래 밝기(#a8a8a8, 8.33:1)로 되돌린다. 히어로 킥커는 이 규칙과 무관하다
   (.nyw-hero 는 .nyw-dark 클래스가 없고 137행에서 이미 따로 흰색 계열로 분리돼 있다). */
.nyw-dark .nyw-kicker { color: #a8a8a8; }

/* 섹션 머리 — 영문 대형 타이틀 + 한글 리드 */
.nyw-eyebrow {
  font-family: var(--nyw-sh-title-font);
  font-size: var(--nyw-sh-title-size);
  font-weight: var(--nyw-sh-title-weight);
  line-height: var(--nyw-sh-title-leading);
  letter-spacing: var(--nyw-sh-title-tracking);
  margin: 0 0 var(--nyw-sh-title-gap);
}
.nyw-lead {
  font-size: clamp(1.8rem, 2.1vw, 2.4rem); font-weight: 600;
  line-height: 1.5; letter-spacing: -0.02em; margin: 0 0 1.2rem;
}
/* ★2026-09-03 전략안 8축 — 본문 16~20px 하한. 루트가 clamp(9px,.52vw,10px)라
   1.6rem 은 데스크톱(9px 고정 구간)에서 14.4px 로 미달했다. 1.8rem = 9px 기준 16.2px · 10px 기준 18px. */
.nyw-body { font-size: var(--nyw-sh-sub-size); line-height: var(--nyw-sh-sub-leading);
  color: var(--nyw-sh-sub-color); margin: 0; }
.nyw-dark .nyw-body { color: #b4b4b4; }
.nyw-kicker {
  font-size: var(--nyw-sh-label-size);
  font-weight: var(--nyw-sh-label-weight);
  letter-spacing: var(--nyw-sh-label-tracking);
  text-transform: uppercase;
  color: var(--nyw-sh-label-color);
  margin: 0 0 var(--nyw-sh-label-gap);
}

/* ── 히어로 ─────────────────────────────────────────────────── */
/* ★iOS Safari 의 vh 는 «주소창이 접힌» 큰 뷰포트 기준이라 최초 진입에서 히어로가
   실제 보이는 영역보다 커진다. dvh 를 뒤에 둬 지원 브라우저만 덮어쓰게 한다. */
.nyw-hero { position: relative; min-height: 92vh; min-height: 92dvh; display: flex; align-items: flex-end;
  background: var(--nyw-ink); color: #fff; overflow: hidden; }
.nyw-hero__media { position: absolute; inset: 0; }

.nyw-hero__media picture { display: block; width: 100%; height: 100%; }
.nyw-hero__media img, .nyw-hero__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
}
/* 세로 그라디언트로 위아래를 덮어 흰 글자를 읽히게 하고, 가로 그라디언트로 왼쪽(글자 쪽)만
   더 덮는다. 얼굴이 앉는 오른쪽은 거의 덮지 않아 혈색이 살아 있다.

   ★2026-09-04 병원 요청(이영은 팀장 18:05 「영상 밝기가 너무 어두워서 조금 더 밝게」) —
     원인은 영상이 아니라 «이 층»이었다. 영상 원본 평균 휘도는 sRGB 123.8/255 로 정상이고
     <video> 에 filter·opacity 도 걸려 있지 않다. 화면이 어두웠던 것은 이 스크림이
     화면 전체를 무겁게 덮고 있었기 때문이다(실측 — 히어로 평균 sRGB 61.4, 좌측 절반 43.0).
   ⛔그렇다고 전면을 그냥 걷으면 흰 글자가 밝은 프레임에서 읽히지 않는다. 그래서 역할을 갈랐다 —
     이 스크림은 «화면 전체»를 옅게만 정돈하고, 글자 대비는 아래 .nyw-hero__inner::before 가
     «글자가 실제로 앉는 자리»에서만 책임진다. 그 결과 영상이 보이는 면은 밝아지고
     글자 뒤 대비는 오히려 올라간다(전 구간 4.5:1 이상 — 아래 주석의 실측표). */
/* ★2026-09-09 — 이 층을 다시 «옅게만 정돈하는» 자리로 되돌린다.
   실측(1440×900 · 전용 크롬 CDP · 영상 정지프레임 · 덮개를 «끈» 화면과 픽셀 대조) —
   구판은 이 층과 아래 ::before 가 겹쳐 사진 실노출이 «23.7%» 였다(기준 55% 이상).
   같은 실측에서 글자 최악 대비는 제목 10.06:1 · 부제 15.96:1 로 4.5:1 의 «두 배 이상»이었다
   — 대비를 잃지 않고 걷어낼 자리가 그만큼 있었다는 뜻이다. */
.nyw-hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,10,.16) 0%, rgba(10,10,10,.11) 42%, rgba(10,10,10,.03) 72%, rgba(10,10,10,.01) 100%),
    linear-gradient(180deg, rgba(10,10,10,.10) 0%, rgba(10,10,10,.02) 34%, rgba(10,10,10,.04) 72%, rgba(10,10,10,.18) 100%); }
/* ★2026-09-04 병원 요청(18:05 「글씨가 영상 반을 차지하고 있어서 조금 아래로」) —
   글자 덩어리를 아래로 내리고 그만큼 영상이 보이는 면을 넓혔다.
   블록이 flex-end 정렬이므로 «높이를 줄이면» 시작점이 그대로 아래로 내려간다.
   실측(1361×963) — 글자 블록이 히어로의 62.9% → 52.5%, 제목 시작 48.4% → 58.4%. */
.nyw-hero__inner { position: relative; width: 100%; padding-block: 5.6rem 7.2rem;
  /* 아래 ::before 를 이 블록 «안»에 가두기 위한 쌓임 맥락 — 없으면 z-index:-1 이
     스크림 아래까지 내려가 글자 뒤 층이 통째로 사라진다. */
  z-index: 1; }

/* 글자 뒤에만 깔리는 국소 층 — 스크림을 걷은 만큼의 대비를 여기서 되찾는다.
   블록을 따라다니므로 글자 위치를 옮겨도 덮는 자리가 저절로 맞는다.
   좌우는 100vw 로 넓혀 «띠»로 보이지 않게 한다(inner 는 max-width 1280px 이다). */
.nyw-hero__inner::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; transform: translateX(-50%); width: 100vw;
  /* ⛔윗변을 글자 바로 위에 붙이지 마라 — 맨 위 킥커가 층 «밖»으로 삐져나가
     그 줄만 덮이지 않는다(2026-09-04 실측 — 킥커가 -2.6% 지점에 앉아 알파 0 이었다). */
  top: -6rem; bottom: -7.2rem;
  /* ⛔윗변에서 알파를 «급하게» 올리지 마라 — 그러면 가로 경계선이 보인다.
     2026-09-09 실측(1440×900 · 전용 크롬 CDP) — 구판은 0%(알파 0) → 8%(.36) 을 45px 만에
     올려서 기울기가 그 지점에서 2.7배 꺾였고, 화면에는 히어로 세로 48.6%(y=402px)에
     «가로 선»으로 보였다. 그 선 위 평균 휘도 0.147 · 아래 0.030 으로 5배 차이가 났다
     (::before 윗변 = inner.top 458 − 60 = 398px · 검출 지점 402px 로 4px 차이).
     ★페이드 거리를 «%가 아니라 rem 으로» 고정한 이유 — % 는 ::before 자신의 높이에
     비례해서, 히어로가 짧아지면 같은 8% 가 더 좁은 픽셀에 몰려 경계가 다시 선다.
     rem 이면 화면 크기와 무관하게 «윗변에서 몇 px 에 걸쳐» 오르는지가 고정된다.
     실측(로컬 정적 서버 · 정지 프레임 · 구판/신판 음성 대조) — 윗변 ±40px 의 휘도 낙차
     0.1852 → 0.1181, 최대 기울기 0.01468 → 0.01136/CSSpx. 윗변 «위» 40px 평균 휘도는
     0.2632 로 그대로고 «아래»가 0.078 → 0.145 로 밝아졌다 — 사진을 더 어둡게 하지 않는다.
     ⛔완전히 없어진 것은 «아니다» — ::before 를 통째로 끈 바닥값이 낙차 0.0341 이므로
     이 층이 만드는 초과분은 0.1511 → 0.0840 으로 44% 줄어든 것이고 절반이 남아 있다.
     제목 대비는 8.95 → 6.86 으로 4.5:1 기준 위를 유지한다. */
  background:
    /* ⛔2026-09-14 실측 — 대제목이 굵어지면서 잉크가 화면 «가로 전체»(x126~1354)로 뻗었는데
       이 가로층은 78% 에서 알파 0 이라 우측 231px 이 무방비였다. 영상 11프레임 중 9프레임에서
       제목 대비 최악 1.95:1(기준 4.5). 우측 끝에 «얕은 바닥»을 깔아 그 구간만 보호한다 —
       0 이 아니라 .12 라 사진 노출에는 거의 영향이 없다. */
    linear-gradient(90deg, rgba(10,10,10,.34) 0%, rgba(10,10,10,.22) 46%,
      rgba(10,10,10,.14) 78%, rgba(10,10,10,.12) 100%),
    linear-gradient(180deg, rgba(10,10,10,0) 0, rgba(10,10,10,.06) 3rem,
      rgba(10,10,10,.18) 6rem, rgba(10,10,10,.34) 9rem, rgba(10,10,10,.50) 12rem,
      rgba(10,10,10,.62) 16rem, rgba(10,10,10,.70) 76%, rgba(10,10,10,.68) 100%);
}
/* ★히어로 킥커만 흰 계열로 올린다 — 지면 본문의 킥커 색(--nyw-faint #a8a8a8)은
   «흰 종이» 위에서 정한 값이라 영상 위에서는 대비가 나오지 않는다. */
.nyw-hero__inner .nyw-kicker { color: rgba(255,255,255,.94); }
/* 메타 줄(면허·개원·위치)도 같은 사유 — #b4b4b4 는 흰 종이용 회색이다. */
.nyw-hero__meta span { color: rgba(255,255,255,.86); }

/* 밝은 프레임이 지나갈 때의 보험 — 스크림 알파만으로는 영상의 «가장 밝은 픽셀»까지
   4.5:1 을 보장할 수 없다. 글자 둘레에만 그림자를 둬 그 순간을 넘긴다. */
.nyw-hero__inner .nyw-kicker,
.nyw-hero__title, .nyw-hero__ko, .nyw-hero__sub, .nyw-hero__meta span {
  text-shadow: 0 1px 3px rgba(0,0,0,.42), 0 2px 14px rgba(0,0,0,.30);
}
.nyw-hero__title {
  font-family: "Arial Narrow", Pretendard, serif; font-weight: 300;
  font-size: clamp(4.4rem, 9vw, 13rem); line-height: 0.96; letter-spacing: -0.03em;
  margin: 0 0 2rem; text-transform: uppercase;
}
.nyw-hero__ko { font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 600; line-height: 1.4;
  letter-spacing: -0.03em; margin: 0 0 1.2rem; }
/* ★2026-09-03 전략안 8축 — 본문 16~20px 하한(위 .nyw-body 와 같은 사유). */
.nyw-hero__sub { font-size: 1.8rem; line-height: 1.8; color: #d2d2d2; margin: 0; max-width: 56rem; }
.nyw-hero__meta { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; margin-top: 2.6rem;
  padding-top: 2rem; border-top: 1px solid var(--nyw-inverse-line); }
.nyw-hero__meta span { font-size: 1.4rem; color: #b4b4b4; letter-spacing: -0.01em; }

/* ★히어로 안 상담 CTA — PC 전용(모바일은 아래 4조 규칙으로 숨긴다).
   outline 스타일 — 배경 투명 + 흰 테두리 + 흰 글자라 뒤 사진·영상을 가리지 않는다. */
.nyw-hero__cta { display: inline-flex; align-items: center; margin-top: 3.2rem;
  padding: 1.3rem 2.8rem; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em;
  color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.7);
  text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,.42), 0 2px 14px rgba(0,0,0,.30);
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.nyw-hero__cta:hover { background: #fff; color: var(--nyw-ink); border-color: #fff;
  text-shadow: none; }

/* ── 면허 3카드 ─────────────────────────────────────────────── */
.nyw-lic__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 5.6rem; }
.nyw-lic__card { display: flex; flex-direction: column; }
.nyw-lic__fig { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--nyw-surface); }
.nyw-lic__fig img { width: 100%; height: 100%; object-fit: cover; }
.nyw-lic__num { position: absolute; top: 1.6rem; left: 1.6rem; font-family: "Arial Narrow", Pretendard, serif;
  font-size: 1.4rem; letter-spacing: .12em; color: #fff; mix-blend-mode: difference; }
.nyw-lic__en { font-family: "Arial Narrow", Pretendard, serif; font-weight: 300;
  font-size: clamp(2.4rem, 3vw, 3.6rem); line-height: 1.1; letter-spacing: -0.02em;
  margin: 2.4rem 0 0.8rem; }
.nyw-lic__ko { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.8rem; }
.nyw-lic__note { font-size: 1.4rem; line-height: 1.7; color: var(--nyw-mute); margin: 0; }
.nyw-lic__foot { margin-top: 4.8rem; padding-top: 2.4rem; border-top: 1px solid var(--nyw-line);
  /* ⛔1.3rem 은 데스크톱에서 11.7px 이라 하한을 깬다 — 아래 --fine 과 같이 px 로 고정한다. */
  font-size: 12px; line-height: 1.8; color: var(--nyw-faint); }
/* 법정 고지 각주 — rem 은 이 지면에서 9~10px 라 px 로 고정한다. 대비 4.5:1 이상. */
.nyw-lic__foot--fine { margin-top: 2.4rem; padding-top: 1.6rem;
  font-size: 12px; line-height: 1.65; color: #6b6b6b; }

/* ── 수치 카드 ──────────────────────────────────────────────── */
.nyw-stat__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  margin-top: 4.8rem; border-top: 1px solid var(--nyw-inverse-line); }
.nyw-stat__cell { padding: 4rem 2rem 3.2rem; border-right: 1px solid var(--nyw-inverse-line); }
.nyw-stat__cell:last-child { border-right: 0; }
.nyw-stat__label { font-size: 1.4rem; font-weight: 600; color: #d2d2d2; margin: 0 0 1.6rem; letter-spacing: -0.02em; }
.nyw-stat__value { font-family: "Arial Narrow", Pretendard, serif; font-weight: 300;
  font-size: clamp(3.2rem, 4vw, 5rem); line-height: 1; letter-spacing: -0.03em; margin: 0 0 1.6rem; }
.nyw-stat__basis { font-size: 1.3rem; line-height: 1.7; color: #8f8f8f; margin: 0; }
.nyw-stat__foot { margin-top: 3.2rem; font-size: 1.3rem; line-height: 1.9; color: #8f8f8f; }

/* ── 시술 상세(구강전정술) ──────────────────────────────────── */
.nyw-proc__top { display: grid; grid-template-columns: 1fr 1fr; gap: 6.4rem; align-items: start; }
.nyw-proc__facts { list-style: none; margin: 3.2rem 0 0; padding: 0;
  border-top: 1px solid var(--nyw-line); }
.nyw-proc__facts li { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem;
  padding: 1.8rem 0; border-bottom: 1px solid var(--nyw-line); font-size: 1.5rem; line-height: 1.65; }
.nyw-proc__facts dt, .nyw-proc__facts .k { font-weight: 600; color: var(--nyw-ink); }
.nyw-proc__facts .v { color: var(--nyw-mute); }

/* 전후사진 */
.nyw-ba { margin-top: 8rem; }
.nyw-ba__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 2.4rem; margin-top: 3.2rem; }
.nyw-ba__set { border: 1px solid var(--nyw-line); background: #fff; }
.nyw-ba__pair { display: grid; grid-template-columns: 1fr 1fr; }
.nyw-ba__half { position: relative; }
.nyw-ba__half + .nyw-ba__half { border-left: 1px solid var(--nyw-line); }

.nyw-ba__half img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.nyw-ba__tag { position: absolute; left: 0; bottom: 0; font-size: 1.2rem; font-weight: 600;
  letter-spacing: .04em; padding: .5rem 1.1rem; background: var(--nyw-ink); color: #fff; }
.nyw-ba__cap { padding: 1.4rem 1.6rem; font-size: 1.3rem; color: var(--nyw-mute); border-top: 1px solid var(--nyw-line); }
.nyw-ba__notice { margin-top: 3.2rem; padding: 2.4rem 2.8rem; background: var(--nyw-surface);
  border-left: 3px solid var(--nyw-ink); font-size: 1.4rem; line-height: 1.85; color: #3d3d3d; }
.nyw-ba__notice strong { display: block; margin-bottom: .8rem; color: var(--nyw-ink); }

/* ── 진료 카테고리 ──────────────────────────────────────────── */
.nyw-svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--nyw-line); border: 1px solid var(--nyw-line); margin-top: 4.8rem; }
.nyw-svc__item { background: #fff; padding: 4rem 3.2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.nyw-svc__no { font-family: "Arial Narrow", Pretendard, serif; font-size: 1.3rem; letter-spacing: .12em; color: var(--nyw-faint); }
.nyw-svc__name { font-size: 2.4rem; font-weight: 600; letter-spacing: -0.03em; margin: 0; line-height: 1.4; }
.nyw-svc__en { font-family: "Arial Narrow", Pretendard, serif; font-size: 1.3rem; letter-spacing: .08em; color: var(--nyw-faint); margin: 0; }
.nyw-svc__desc { font-size: 1.78rem; line-height: 1.75; color: var(--nyw-mute); margin: 1rem 0 0; }

/* ── 사진 브레이크 — 진료안내(이미지 0개) ~ 원장 사진 사이 글자벽을 깬다 ──
   2026-09-03 전략안 8축(글벽) 적용. 새 사진을 만들지 않고 이미 있는 미사용 실사만 쓴다. */
.nyw-photo-break { width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: var(--nyw-surface); }
.nyw-photo-break img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
@media (max-width: 768px) { .nyw-photo-break { aspect-ratio: 4 / 3; } }

/* ── 오시는 길 지도 — 키 없이 쓰는 구글맵 임베드(CSP frame-src 에 이미 열려 있다) ──
   2026-09-03 전략안 8축(글벽) 적용 — 카카오맵 JS SDK 는 VITE_KAKAO_MAP_KEY 가 비어 있어 못 쓴다. */
.nyw-map { width: 100%; aspect-ratio: 16 / 9; margin-top: 3.2rem; border: 0; overflow: hidden; background: var(--nyw-surface); }
.nyw-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 768px) { .nyw-map { aspect-ratio: 4 / 3; } }

/* ── 원장 ───────────────────────────────────────────────────── */
.nyw-dr { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 6.4rem; align-items: start; }
.nyw-dr__fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.nyw-cv { list-style: none; margin: 3.2rem 0 0; padding: 0; }
.nyw-cv li { display: grid; grid-template-columns: 11rem 1fr; gap: 2rem; padding: 1.4rem 0;
  border-bottom: 1px solid var(--nyw-line); font-size: 1.5rem; line-height: 1.7; }
.nyw-cv .y { font-family: "Arial Narrow", Pretendard, serif; color: var(--nyw-faint); }
.nyw-cv .d { color: #3d3d3d; }

/* ── 정보(위치·시간) ────────────────────────────────────────── */
.nyw-info__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6.4rem; margin-top: 4.8rem; }
.nyw-hours { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nyw-inverse-line); }
.nyw-hours li { display: flex; justify-content: space-between; gap: 2rem; padding: 1.6rem 0;
  border-bottom: 1px solid var(--nyw-inverse-line); font-size: 1.5rem; }
.nyw-hours .d { color: #d2d2d2; white-space: nowrap; } .nyw-hours .t { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── FAQ ────────────────────────────────────────────────────── */
.nyw-faq { margin-top: 4.8rem; border-top: 1px solid var(--nyw-line); }
.nyw-faq details { border-bottom: 1px solid var(--nyw-line); }
.nyw-faq summary { list-style: none; cursor: pointer; padding: 2.4rem 4rem 2.4rem 0;
  font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; position: relative; }
.nyw-faq summary::-webkit-details-marker { display: none; }
.nyw-faq summary::after { content: "+"; position: absolute; right: .4rem; top: 50%;
  transform: translateY(-50%); font-size: 2rem; font-weight: 300; color: var(--nyw-faint); }
.nyw-faq details[open] summary::after { content: "–"; }
.nyw-faq .a { padding: 0 4rem 2.8rem 0; font-size: 1.5rem; line-height: 1.9; color: var(--nyw-mute); }
.nyw-faq details > p { padding: 0 4rem 2.8rem 0; font-size: 1.5rem; line-height: 1.9;
  color: var(--nyw-mute); margin: 0; }
section.nyw-faq { margin-top: 0; border-top: 0; }
section.nyw-faq > details:first-of-type { border-top: 1px solid var(--nyw-line); }

/* ── 헤더 ───────────────────────────────────────────────────── */
.nyw-hd { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--nyw-line); }
/* ⛔메뉴가 12개가 되면서 이 gap(3.2rem=28.8px x 3)이 메뉴 자리를 크게 먹는다.
   2rem 으로 줄여 32px 을 메뉴에 돌려준다(2026-09-15 실측). */
.nyw-hd__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  height: 7.2rem; }

/* 로고는 두 낱말이 «붙어» 한 덩이로 읽히는 형태다 — 시안 노드 43:1848 실측:
   문자열 「NEW YORKYONSEI」(YORK↔YONSEI 사이 공백 없음) / Pretendard 18px /
   자간 0.719px(=.04em) / 앞 8자 w400 · 뒤 6자 w600 / 폭 164.3px.
   flex 컨테이너라 텍스트 노드와 b 사이 공백이 사라지는데 그 결과가 시안과 같으므로
   column-gap 을 0 으로 둔다(gap 을 넣으면 시안보다 5.5px 벌어진다). */
.nyw-hd__logo { font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.8rem; font-weight: 400;
  letter-spacing: .04em; text-decoration: none; color: var(--nyw-ink); white-space: nowrap;
  display: inline-flex; align-items: center; column-gap: 0; min-height: 44px;
  /* 좁은 폭에서 로고가 눌려 nav 위로 삐져나오는 것을 막는다(2026-09-09 대표 지적). */
  flex: 0 0 auto; }
/* 로고 점 마크. 로고의 column-gap 이 0 이라 글자와의 간격은 여기서 준다. */
.nyw-hd__mark { flex: 0 0 auto; height: 2.6rem; width: auto; aspect-ratio: 68 / 51;
  margin-right: 1rem; display: block; }
.nyw-nav { display: flex; gap: 2.8rem; }
/* ⛔이 선택자가 «.nyw-nav__top 보다 특이도가 높다»(0,1,1 vs 0,1,0) — 아래에서 아무리
   고쳐도 여기서 이긴다. 2026-09-15 메뉴 12개 재편으로 1.5rem(13.5px) -> 1.4rem(12.6px).
   ★1.4rem 이 바닥이다 — html font-size 가 9px 라 1.3rem 은 11.7px 로 12px 선을 깬다. */
.nyw-nav a { font-size: 1.4rem; font-weight: 500; color: #3d3d3d; text-decoration: none;
  letter-spacing: -0.02em; white-space: nowrap; }
.nyw-nav a:hover { color: var(--nyw-ink); }
.nyw-hd__cta { font-size: 1.4rem; font-weight: 600; color: #fff; background: var(--nyw-ink);
  padding: 1.1rem 2rem; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px; }

/* ── 푸터 ───────────────────────────────────────────────────── */
.nyw-ft { background: var(--nyw-ink); color: #b4b4b4; padding-block: 8rem 5.6rem; }
.nyw-ft__top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6.4rem; }
.nyw-ft__brand { font-family: "Arial Narrow", Pretendard, serif; font-size: 3.2rem; font-weight: 300;
  color: #fff; letter-spacing: -0.02em; margin: 0 0 2rem; }
.nyw-ft dl { display: grid; grid-template-columns: 8rem 1fr; gap: .8rem 2rem; margin: 0; font-size: 1.4rem; line-height: 1.7; }
/* ★2026-09-14 실측 — 푸터 라벨 6건이 어두운 배경 위에서 대비 3.72(기준 4.5)로 미달했다.
   한 단계 밝혀 맞춘다. dd(#d2d2d2)는 이미 통과라 손대지 않는다. */
.nyw-ft dt { color: #8f8f8f; } .nyw-ft dd { margin: 0; color: #d2d2d2; }
/* 푸터에 링크가 생겼다(전화·이메일) — 본문 색을 잇되 밑줄로 링크임을 드러낸다. */
.nyw-ft dd a { color: inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(210,210,210,.45); }
.nyw-ft dd a:hover { text-decoration-color: currentColor; }
.nyw-ft__legal { margin-top: 5.6rem; padding-top: 2.4rem; border-top: 1px solid var(--nyw-inverse-line);
  /* ⛔rem 으로 쓰면 안 된다 — root 가 clamp(9px,.52vw,10px) 라 데스크톱에서 1rem=9px 이고
     1.25rem 이 11.25px 로 그려졌다. 법정 고지라 12px 하한을 «px 로 못박는다».
     대비도 3.72 → 통과선으로 올린다. */
  font-size: 12px; line-height: 1.9; color: #949494; }

/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --nyw-pad: 3.2rem; }
  .nyw-sec { padding-block: 9rem; }
  .nyw-proc__top, .nyw-dr, .nyw-info__grid, .nyw-ft__top { grid-template-columns: 1fr; gap: 4.8rem; }
  .nyw-svc__grid { grid-template-columns: repeat(2, 1fr); }
  .nyw-ba__grid { grid-template-columns: repeat(2, 1fr); }
  .nyw-stat__grid { grid-template-columns: repeat(3, 1fr); }
  .nyw-stat__cell { padding: 3.6rem 2rem 3rem; }
  .nyw-stat__cell:nth-child(3n) { border-right: 0; }
  .nyw-stat__cell:last-child { border-right: 0; }
  .nyw-stat__cell:nth-child(-n+3) { border-bottom: 1px solid var(--nyw-inverse-line); }
  .nyw-nav { display: none; }
}
@media (max-width: 768px) {
  
  html { font-size: 10px; }
  :root { --nyw-pad: 2rem; }
  
  .nyw-hd__in { gap: 1.2rem; height: 6.4rem; }
  .nyw-hd__logo { font-size: 1.6rem; }
  .nyw-hd__mark { height: 2.2rem; margin-right: .8rem; }
  .nyw-hd__cta { font-size: 1.3rem; padding: 1rem 1.2rem; }
  .nyw-sec { padding-block: 7rem; }
  .nyw-sec--tight { padding-block: 5.6rem; }
  /* ★2026-09-06 모바일 히어로 4조 — 첫 화면을 사진에 돌려준다.
     구판 88vh 는 첫 화면의 88% 를 히어로가 먹어 «아래에 무엇이 있는지»가 안 보였다.
     유웰비뇨의학과 실측은 뷰포트의 «정확히 50%»(390×844→422 · 4개 폭 전부)다.
     여기는 헤더가 sticky 65px 라 그만큼 더 주고 62vh 로 잡았다
     — 헤더 65 + 히어로 503 = 568/812 = 첫 화면의 70% 가 사진 영역이다.
     ⛔이 값을 다시 80vh 이상으로 올리지 마라(게이트 E축 FAIL · J축 권장 65% 이하). */
  .nyw-hero { min-height: 62vh; min-height: 62dvh; }
  .nyw-hero__inner { padding-block: 6rem 6.4rem; }
  
  .nyw-hero__media img, .nyw-hero__media video { object-position: 50% 50%; }
  /* 스크림도 바꾼다 — 데스크톱은 «왼쪽»만 덮지만(오른쪽에 얼굴), 모바일은 원장이
     가운데 서므로 왼쪽을 덮으면 얼굴 절반이 어두워진다. 위아래로만 덮는다.

     ★2026-09-04 — 구판은 44% 지점부터 알파 .86~.95 로 «화면 아래 절반을 거의 검게»
       덮고 있었다. 팀장님이 「너무 어둡다」고 본 화면이 이것이다(실측 — 하단 절반 sRGB 35.7).
       이제 이 층은 옅게만 정돈하고, 글자 대비는 .nyw-hero__inner::before 가 맡는다.
       실측(390×844) — 히어로 평균 sRGB 57.5 → 74.2, 영상이 보이는 상단 절반 100.7 → 118.9.
       글자 뒤 최악 대비는 오히려 올라갔다: 제목 4.58:1 · 부제 5.86:1 · 메타 5.10:1
       · 국문 5.69:1 · 킥커 6.27:1 (전 구간 4.5:1 이상). */
  /* ★2026-09-09 실측(375×812 · 전용 크롬 CDP · 영상 정지프레임) —
       모바일은 데스크톱과 «정반대» 결함이었다. 사진 실노출은 78.7% 로 기준(55%)을 넘는데
       제목의 최악 대비가 «3.22:1» 로 4.5:1 에 미달이었다(부제 4.87 · 라벨 8.23).
       원인 = 제목·부제가 앉는 «맨 아래»에서 알파가 .50~.60 까지밖에 안 올라간다.
     ★고침 = 전면을 더 덮지 않고 «글자가 앉는 아래쪽 띠»에서만 올린다(전역
       rules/hospital-site-build.md §모바일 히어로 4조 ⓐ — 글자를 아래로 몰고 그 줄에만 띠).
       74% 위로는 오히려 «옅게» 만들어 사진이 보이는 면을 넓혔다.
     ⛔좌상단 radial 을 크게 걷지 마라 — 12px 라벨이 그 안에 앉는다. .88→.60 으로 걷으면
       라벨 대비가 8.23 → 3.41 로 «떨어져» 이번엔 그쪽이 미달이 된다(실측 기반 계산). */
  .nyw-hero__scrim {
    background:
      radial-gradient(85% 22% at 4% 0%, rgba(10,10,10,.80) 0%, rgba(10,10,10,.68) 42%,
        rgba(10,10,10,.18) 78%, rgba(10,10,10,0) 100%),
      linear-gradient(180deg, rgba(10,10,10,.05) 0%, rgba(10,10,10,0) 30%,
        rgba(10,10,10,.02) 58%, rgba(10,10,10,.30) 74%, rgba(10,10,10,.62) 86%,
        rgba(10,10,10,.70) 100%);
  }
  /* 모바일은 원장이 가운데 서므로 «가로» 방향 편향을 걷는다 — 세로로만 덮는다.

     ★2026-09-05 대표 지시(모바일 히어로 4조 — 「사진이 주인공」) —
       구판은 이 층이 글자 블록 위아래로 6rem 씩 번져 히어로 세로의 절반을 알파 .74~.88 로
       덮고 있었다. 사진은 깔려 있는데 «보이지 않는» 상태다(전역 rules/hospital-site-build.md
       §모바일 히어로 4조 ①의 함정 — 「사진을 깔았다」와 「사진이 보인다」는 다른 말이다).
     ★역할은 그대로 두고 «세기와 번짐»만 줄였다 — 글자 대비는 아래 4조 절에서 글자 덩어리를
       작게 만들어 되찾는다(작은 글자는 같은 알파에서 더 잘 읽힌다) + text-shadow 보강. */
  .nyw-hero__inner::before { display: none; }
  /* 면허 카드 — 3열 → 1열 */
  
  /* 수치 — 5열 → 2열, 세로 구분선 정리 */
  .nyw-stat__grid { grid-template-columns: repeat(2, 1fr); }
  .nyw-stat__cell { padding: 3.2rem 1.6rem 2.8rem; }
  .nyw-stat__cell:nth-child(3n) { border-right: 1px solid var(--nyw-inverse-line); }
  .nyw-stat__cell:nth-child(2n) { border-right: 0; }
  .nyw-stat__cell:last-child { border-right: 0; }
  .nyw-stat__cell:nth-child(-n+4) { border-bottom: 1px solid var(--nyw-inverse-line); }
  .nyw-stat__value { font-size: 3.2rem; }
  .nyw-svc__grid { grid-template-columns: 1fr; }
  .nyw-ba__grid { grid-template-columns: 1fr; }
  .nyw-proc__facts li { grid-template-columns: 10rem 1fr; gap: 1.2rem; font-size: 1.4rem; }
  .nyw-cv li { grid-template-columns: 8rem 1fr; gap: 1.2rem; font-size: 1.4rem; }
  .nyw-ft dl { grid-template-columns: 7rem 1fr; }

  .nyw-wh__prog li { grid-template-columns: 1fr auto; gap: .6rem 1.6rem; }
  .nyw-wh__prog .t { text-align: right; }
  .nyw-wh__prog .d { grid-column: 1 / -1; font-size: 1.35rem; }

  .nyw-proc__top, .nyw-dr, .nyw-info__grid, .nyw-ft__top { gap: 3.2rem; }
  .nyw-svc__item { padding: 2.1rem 2rem; gap: .7rem; }
  .nyw-svc__desc { line-height: 1.55; }
  .nyw-ft { padding-block: 6rem 4rem; }
  .nyw-ft__legal { margin-top: 4rem; }
}

/* 수치 카드의 단위(개국·%)는 숫자보다 작게 */
.nyw-stat__value .u { font-size: .42em; letter-spacing: -0.01em; margin-left: .2rem;
  font-family: Pretendard, sans-serif; font-weight: 500; }
/* 앵커로 이동할 때 sticky 헤더에 제목이 가리지 않게 */
.nyw [id] { scroll-margin-top: 9rem; }
/* 프린트 — 전후사진 지면을 종이로 뽑을 때 */
@media print { .nyw-hd { display: none; } .nyw-hero { min-height: auto; } }


.nyw-ba__elapsed:not(:empty) { margin-left: .8rem; padding-left: .8rem;
  border-left: 1px solid var(--nyw-line); color: var(--nyw-ink); font-weight: 600; }



/* ── ① 히어로 — 병원 이름을 한 덩어리로 크게 ─────────────────────
   두 줄이 서로 다른 성격을 갖는다: 윗줄이 이름, 아랫줄이 업종이다.
   아랫줄은 자간을 넓혀 윗줄과 폭을 맞춘다(간판 글씨의 짜임). */
.nyw-hero__title { display: block; }
.nyw-hero__title .l1,
.nyw-hero__title .l2 { display: block; }
.nyw-hero__title .l1 {
  font-size: clamp(2.9rem, 6.4vw, 10.4rem); letter-spacing: -0.035em; line-height: 0.94;
}
.nyw-hero__title .l2 {
  font-family: Pretendard, sans-serif; font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 2.6rem); letter-spacing: 0.42em; line-height: 1.2;
  margin-top: 1rem; padding-left: .12em; opacity: .92;
}

/* ── ② 면허 3개 — 사진 «안»에 글씨 ──────────────────────────────
   글자를 사진 아래로 내리지 않는다. 사진마다 밝기가 다르므로 글자 자체의
   그림자에 기대지 않고, 아래에서 올라오는 검은 그라데이션이 바닥을 만든다. */
.nyw-lic__fig { display: flex; align-items: flex-end; }
.nyw-lic__fig img { position: absolute; inset: 0; }
.nyw-lic__fig--noimg { background: var(--nyw-surface); }

.nyw-lic__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56%; pointer-events: none;
  background: linear-gradient(to top,
              rgba(0,0,0,.78) 0%, rgba(0,0,0,.56) 34%, rgba(0,0,0,.22) 66%, rgba(0,0,0,0) 100%);
}
.nyw-lic__num { z-index: 2; mix-blend-mode: normal; opacity: .8; }
/* 글자는 사진 하단에 가운데로 앉는다(퍼펙트치과 카드와 같은 짜임) */
.nyw-lic__cap {
  position: relative; z-index: 2; width: 100%;
  padding: 0 2rem 3.2rem; color: #fff; text-align: center;
}
.nyw-lic__cap .nyw-lic__en {
  display: block; margin: 0; color: #fff;
  font-size: clamp(2.6rem, 3.2vw, 4rem); line-height: 1.06; letter-spacing: -0.01em;
}
.nyw-lic__cap .nyw-lic__year {
  display: block; margin-top: .6rem; color: #fff;
  font-family: "Arial Narrow", Pretendard, serif; font-size: 1.6rem; letter-spacing: .18em; opacity: .82;
}
.nyw-lic__cap .nyw-lic__ko {
  display: block; margin: 1.2rem 0 0; color: #fff;
  font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; opacity: .92;
}
/* 사진이 없는 카드는 반전 없이 본문 색으로 */
.nyw-lic__fig--noimg .nyw-lic__scrim { display: none; }
.nyw-lic__fig--noimg .nyw-lic__cap,
.nyw-lic__fig--noimg .nyw-lic__cap * { color: var(--nyw-ink); }
.nyw-lic__note { margin-top: 1.6rem; }

/* ── ④ 치아미백 ────────────────────────────────────────────────── */
.nyw-wh__top { display: grid; grid-template-columns: 1fr 1fr; gap: 6.4rem; align-items: start; }
.nyw-wh__prog { list-style: none; margin: 2.4rem 0 0; padding: 0; }
.nyw-wh__prog li {
  display: grid; grid-template-columns: 10rem 8rem 1fr; gap: 1.6rem; align-items: baseline;
  padding: 1.6rem 0; border-top: 1px solid var(--nyw-line); font-size: 1.5rem;
}
.nyw-wh__prog li:last-child { border-bottom: 1px solid var(--nyw-line); }
.nyw-wh__prog .n { font-weight: 600; letter-spacing: -0.02em; }
.nyw-wh__prog .t { font-family: "Arial Narrow", Pretendard, serif; color: var(--nyw-ink); }
.nyw-wh__prog .d { color: var(--nyw-mute); line-height: 1.6; }
.nyw-wh__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 4.8rem; }
.nyw-wh__strip figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nyw-surface); }
.nyw-wh__strip img { width: 100%; height: 100%; object-fit: cover; display: block; }


.nyw-wh__top, .nyw-proc__top { align-items: stretch; }
.nyw-wh__top > :last-child,
.nyw-proc__top > :last-child { display: flex; flex-direction: column; min-width: 0; }
.nyw-fig--fill { aspect-ratio: auto; flex: 1 1 auto; min-height: 34rem; }


@media (max-width: 1024px) {
  .nyw-wh__top { grid-template-columns: 1fr; gap: 4.8rem; }
  
  .nyw-fig--fill { aspect-ratio: 4 / 5; flex: 0 0 auto; min-height: 0; max-height: 56rem; }
}

@media (max-width: 900px) {
  .nyw-wh__top { grid-template-columns: 1fr; gap: 4rem; }
  .nyw-wh__prog li { grid-template-columns: 8.4rem 7rem 1fr; gap: 1rem; font-size: 1.4rem; }
  .nyw-wh__strip { grid-template-columns: 1fr; }
  .nyw-lic__cap { padding: 0 1.6rem 2.4rem; }
  .nyw-lic__scrim { height: 52%; }
  .nyw-hero__title .l2 { letter-spacing: .3em; }
}




.nyw-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  pointer-events: none;
}
.nyw-hero__still { display: block; width: 100%; height: 100%; }

/* ⛔2026-09-14 실측 — 위 421줄의 `.nyw-hero__media img, .nyw-hero__media video`(0,2,1)가
   이 규칙(0,1,0)을 이겨서 모바일 영상 기준점이 42% 의도인데 50% 로 그려졌다.
   선택자를 한 단 올려 되살린다. */
@media (max-width: 768px) { .nyw-hero__media video.nyw-hero__video { object-position: 50% 42%; } }
/* 움직임을 줄이도록 설정한 사용자에게는 사진을 보여준다. */
@media (prefers-reduced-motion: reduce) { .nyw-hero__video { display: none; } }


.nyw-hero__sub--narrow { display: none; }
@media (max-width: 768px) {
  .nyw-hero__sub--wide { display: none; }
  .nyw-hero__sub--narrow { display: inline; }
  .nyw-hero__meta--wide { display: none; }
  /* ★모바일(root=10px 고정)에서도 16px 하한을 지킨다 — 1.5rem 이면 15px 로 미달이었다.
     ⛔여기 글자 크기를 더 줄여 자리를 벌지 마라. 본문 하한은 전략안 8축이 정한 값이다. */
  .nyw-hero__sub { font-size: 1.6rem; line-height: 1.72; }
  /* ★2026-09-04 — 「글씨가 영상 반을 차지」의 모바일 몫. 본문 크기는 그대로 두고
     제목 크기와 «칸 사이 여백»만 줄여 덩어리를 아래로 내렸다.
     실측(390×844) — 글자 블록이 히어로의 56.0% → 46.6%, 제목 시작 55.0% → 62.2%. */
  .nyw-hero__meta { margin-top: 1.8rem; padding-top: 1.4rem; gap: .8rem 2rem; }
  .nyw-hero__inner { padding-block: 3.4rem 4.4rem; }
  .nyw-hero__title { margin: 0 0 1.8rem; }
  .nyw-hero__title .l2 { margin-top: 1rem; }
  .nyw-hero__ko { font-size: 1.8rem; margin: 0 0 1rem; }
}

/* ═══ 모바일 히어로 4조 (2026-09-05 대표 지시) ═══════════════════════════
   「딱 열면 사진이 주인공이니까 사진이 대문짝만하게 나오면서 시작해야하는데
    이건 무슨 쓸데 없이 글씨만 큰거야 글씨는 사이즈 줄여서 사진을 서브하는 용도로
    위 아래 쪽으로 치우치게 배치해야지 그래야 가운데 온전히 주인공 사진이 가운데 오지」

   ① 사진이 주인공  ② 글자는 작게·아래로 몰기  ③ 캐러셀 화살표·정지 버튼 제거
   ④ 스와이프로 넘김   — 정본은 전역 ~/.claude/rules/hospital-site-build.md

   ★이 히어로는 캐러셀이 아니라 «단일 영상 한 장»이다 — ③④ 는 구조상 해당이 없다.
     여기서 하는 일은 ①② 다.
   ★2026-09-06 PC/AEO 진단(유웰 대조) — PC 에 상담 CTA 1개를 새로 달았다(.nyw-hero__cta).
     모바일은 유웰과 같이 0개로 둔다 — 버튼이 화면을 차지해 ①(사진이 주인공)과 부딪힌다.
     그래서 아래 768px 규칙에서 display:none 으로 걷는다.

   ★글자 블록은 flex-end 정렬 + padding-bottom «px 고정»이라 아래 기준선이 흔들리지 않고
     줄이 늘면 위로만 자란다(유웰비뇨의학과 실측과 같은 짜임 — bottom 고정 · % 아님).
     ⛔여기에 % 높이를 쓰지 마라. 제목 줄 수가 바뀌는 순간 기준선이 따라 흔들린다.

   실측(390×844) — 글자 블록이 히어로의 46.3% → 32.9%, 제목 시작 62.4% → 71.4%.
   ⛔본문(.nyw-hero__sub) 16px 하한은 건드리지 않았다 — 전략안 8축이 정한 값이다.
     줄인 것은 «영문 간판·킥커·메타»와 칸 사이 여백이고, 본문 크기는 그대로다.

   2026-09-06 — hero copy is capped at four slots: locality tag (top-left),
   one headline, one supporting line, indicator (none here, single video).
   Everything else is hidden with CSS only; the markup keeps it for crawlers.
   Rationale lives in scripts/build-nyw-root.py. */
@media (max-width: 768px) {
  /* Copy layer spans the media box, so slot 1 can anchor to the hero's own top-left
     while slots 2-3 stay pinned to the bottom edge. */
  .nyw-hero__inner {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: flex-end;
  }
  /* Slot 1 of 4 — locality tag, top-left corner of the hero. */
  .nyw-hero__inner .nyw-kicker {
    position: absolute; top: 1.4rem; left: var(--nyw-pad); right: var(--nyw-pad);
    margin: 0; font-size: 1.2rem; letter-spacing: .18em;
  }
  /* Wordmark stays for crawlers and screen readers; the sticky header already shows it. */
  .nyw-hero__title {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap; clip-path: inset(50%);
  }
  /* Slot 2 of 4 — the one headline. */
  .nyw-hero__ko { font-size: 1.7rem; line-height: 1.34; margin: 0 0 .8rem; }
  /* Slot 3 of 4 — one supporting line; the leading sentence is dropped below.
     Lifted off #d2d2d2 so the line clears 4.5:1 against the brightest video frames
     now that the local scrim behind the copy is gone (measured 4.22 -> 5.4). */
  .nyw-hero__sub { line-height: 1.6; color: #e8e8e8; }
  .nyw-hero__sub--drop { display: none; }
  /* Licence and address lines live in #licenses and #visit; drop them from the hero.
     Scoped to .nyw-hero on purpose: 50 sub pages reuse .nyw-hero__meta inside .nyw-phero
     for statutory notices, and those must stay on screen — so the metrics below are
     kept verbatim for those pages while the home hero copy is hidden outright. */
  .nyw-hero__meta { margin-top: 1.2rem; padding-top: 1rem; gap: .5rem 2rem; }
  .nyw-hero__meta span { font-size: 1.3rem; }
  .nyw-hero .nyw-hero__meta { display: none; }
  /* PC 전용 CTA — 모바일 히어로 4조 ①(사진이 주인공)과 부딪혀 걷는다(위 조 설명 참고). */
  .nyw-hero__cta { display: none; }
  /* 위아래로 몰아 «가운데»를 사진에 비운다.
     ⛔아래 여백을 더 줄이지 마라 — 하단 고정 상담바(60px)가 마지막 줄을 먹는다.
       2.8rem 으로 줄였을 때 메타 줄과 상담바 사이가 4px 까지 붙었다(09-05 실측). */
  .nyw-hero__inner { padding-block: 2rem 4rem; }
  /* 밝은 프레임 보험 — 스크림을 걷은 만큼 글자 둘레 그림자를 조금 더 준다. */
  .nyw-hero__inner .nyw-kicker,
  .nyw-hero__title, .nyw-hero__ko, .nyw-hero__sub, .nyw-hero__meta span {
    text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 2px 18px rgba(0,0,0,.60);
  }
}

/* ─── ① Dental Programs ─────────────────────────────────────────────────── */
.nyw-pg__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 5.6rem; background: var(--nyw-line);
  border: 1px solid var(--nyw-line);
}
.nyw-pg__item { background: var(--nyw-paper); padding: 2.8rem 2.4rem; min-width: 0; }
.nyw-pg__ko {
  font-size: 1.7rem; font-weight: 700; color: var(--nyw-ink);
  letter-spacing: -0.03em; margin: 0; overflow-wrap: anywhere;
}
.nyw-pg__en {
  font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nyw-faint); margin: 0.8rem 0 0; overflow-wrap: anywhere;
}
.nyw-pg__label {
  display: flex; align-items: center; gap: 1.6rem;
  margin: 8rem 0 0; font-size: 1.3rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--nyw-faint);
}
.nyw-pg__label::after { content: ""; flex: 1; height: 1px; background: var(--nyw-line); }
.nyw-pg__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4.8rem 2.4rem; margin-top: 3.2rem;
}
.nyw-pg__card { min-width: 0; }
.nyw-pg__fig {
  margin: 0 0 2rem; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--nyw-paper); border: 1px solid var(--nyw-line);
}
.nyw-pg__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nyw-pg__name {
  font-size: 1.8rem; font-weight: 700; color: var(--nyw-ink);
  letter-spacing: -0.03em; margin: 0; line-height: 1.35; overflow-wrap: anywhere;
}
.nyw-pg__en2 {
  font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nyw-faint); margin: 0.6rem 0 1.2rem;
}
.nyw-pg__desc { font-size: 1.45rem; line-height: 1.8; color: var(--nyw-mute); margin: 0; }

/* ─── ② 숫자 — 배경 사진 위 ─────────────────────────────────────────────── */
.nyw-count { position: relative; overflow: hidden; }
.nyw-count__bg { position: absolute; inset: 0; }
.nyw-count__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nyw-count__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.92) 100%);
}
.nyw-count__in { position: relative; }

/* ─── ③ 브랜드 대문 ─────────────────────────────────────────────────────── */
.nyw-brand { position: relative; overflow: hidden; background: var(--nyw-ink); color: var(--nyw-paper); }
.nyw-brand__bg { position: absolute; inset: 0; }
.nyw-brand__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nyw-brand__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.94) 100%);
}
.nyw-brand__in { position: relative; }
.nyw-brand__type {
  font-family: "Arial Narrow", Pretendard, serif; font-weight: 300;
  font-size: clamp(3.6rem, 8vw, 10rem); line-height: 1.02;
  letter-spacing: 0.06em; margin: 0 0 3.2rem; color: var(--nyw-paper);
  overflow-wrap: anywhere;
}
.nyw-brand__type span { display: inline-block; }
.nyw-brand__br { display: none; }
.nyw-brand__h {
  font-size: clamp(2.2rem, 3.4vw, 3.6rem); font-weight: 600;
  line-height: 1.4; letter-spacing: -0.03em; margin: 0 0 3.2rem;
}
.nyw-brand__txt p {
  font-size: 1.6rem; line-height: 1.9; color: #b4b4b4;
  margin: 0 0 1.6rem; max-width: 72rem;
}
.nyw-brand__txt p:last-child { margin-bottom: 0; }
.nyw-brand__keys {
  display: flex; flex-wrap: wrap; gap: 1rem; list-style: none;
  margin: 4rem 0 0; padding: 0;
}
.nyw-brand__keys li {
  font-size: 1.35rem; color: #d2d2d2; letter-spacing: -0.02em;
  border: 1px solid var(--nyw-inverse-line); padding: 0.9rem 1.8rem;
}

/* ─── ④ 유튜브 ──────────────────────────────────────────────────────────── */
.nyw-yt__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 3.2rem 2.4rem; margin-top: 5.6rem;
}
.nyw-yt__card { display: block; text-decoration: none; color: inherit; min-width: 0; }
.nyw-yt__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--nyw-surface); border: 1px solid var(--nyw-line);
}
.nyw-yt__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nyw-yt__play {
  position: absolute; left: 50%; top: 50%; width: 4.8rem; height: 4.8rem;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(10, 10, 10, .72); border: 1px solid rgba(255, 255, 255, .5);
}
.nyw-yt__play::after {
  content: ""; position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 1.3rem solid #fff;
  border-top: .8rem solid transparent; border-bottom: .8rem solid transparent;
}
.nyw-yt__card:hover .nyw-yt__play { background: rgba(10, 10, 10, .9); }
.nyw-yt__tit {
  display: block; margin-top: 1.6rem; font-size: 1.45rem; font-weight: 600;
  line-height: 1.55; letter-spacing: -0.03em; color: var(--nyw-ink);
  overflow-wrap: anywhere;
}
.nyw-yt__more { margin: 4.8rem 0 0; }
.nyw-yt__more a {
  display: inline-block; font-size: 1.4rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--nyw-ink); text-decoration: none;
  border-bottom: 1px solid var(--nyw-ink); padding-bottom: .4rem;
}

/* ─── 반응형 ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nyw-pg__list { grid-template-columns: repeat(2, 1fr); }
  .nyw-pg__grid { grid-template-columns: repeat(2, 1fr); gap: 4rem 2.4rem; }
  .nyw-yt__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .nyw-pg__list { grid-template-columns: repeat(2, 1fr); margin-top: 4rem; }
  .nyw-pg__item { padding: 2.2rem 1.8rem; }
  .nyw-pg__label { margin-top: 5.6rem; }
  .nyw-pg__grid { grid-template-columns: 1fr; gap: 4rem; }
  .nyw-yt__grid { grid-template-columns: 1fr; gap: 3.2rem; margin-top: 4rem; }
  .nyw-brand__br { display: block; }
  .nyw-brand__type { letter-spacing: 0.04em; }
  .nyw-brand__keys { gap: .8rem; }
  .nyw-brand__keys li { font-size: 1.25rem; padding: .8rem 1.4rem; }
}


.nyw-hd__in { min-width: 0; }
.nyw-nav { min-width: 0; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap;
  row-gap: .4rem; column-gap: 2rem; }
.nyw-nav a { white-space: nowrap; }
.nyw-hd__cta { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 1320px) { .nyw-nav { column-gap: 1.4rem; } .nyw-nav a { font-size: 1.4rem; } }


.nyw-burger { display: none; position: relative; }
.nyw-burger__btn { list-style: none; display: flex; flex-direction: column; justify-content: center;
  gap: .5rem; width: 4.4rem; min-width: 4.4rem; height: 4.4rem; flex: none; box-sizing: border-box;
  padding: 0 1rem; cursor: pointer; }
.nyw-burger__btn::-webkit-details-marker { display: none; }
.nyw-burger__btn span { display: block; height: 2px; background: var(--nyw-ink, #1e1e1e); border-radius: 2px; }
.nyw-burger[open] .nyw-burger__btn span:nth-child(2) { opacity: .25; }
.nyw-burger:not([open]) .nyw-burger__panel { display: none; }
.nyw-burger__panel { position: absolute; right: 0; top: 5.2rem; z-index: 9500; min-width: 24rem;
  background: #fff; border: 1px solid #e1e1e1; border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); max-height: 76vh; overflow-y: auto; }
.nyw-burger__list { list-style: none; margin: 0; padding: 0; }
.nyw-burger__list a { display: block; padding: 1.3rem 2rem; font-size: 1.5rem; line-height: 1.4;
  color: #1e1e1e; text-decoration: none; border-bottom: 1px solid #f0f0f0; min-height: 48px; }
.nyw-burger__list a:hover { background: #f7f7f7; }
.nyw-burger__cta { display: flex; gap: .6rem; padding: 1.2rem 1.4rem 1.4rem; border-top: 1px solid #e1e1e1; }
.nyw-burger__cta a { flex: 1; text-align: center; padding: 1.1rem .4rem; font-size: 1.3rem;
  font-weight: 600; text-decoration: none; color: #fff; background: var(--nyw-ink, #1e1e1e);
  border-radius: 4px; min-height: 44px; }
/* ⛔2026-09-15 — 가로 메뉴를 1339px 이하에서 숨겼으므로(메뉴 12개가 안 들어간다)
   햄버거도 «같은 경계»에서 나와야 한다. 1024 로 두면 1025~1339 구간에 메뉴가 통째로 사라진다. */
@media (max-width: 1339px) { .nyw-burger { display: block !important; margin-left: auto; } }

@media (max-width: 640px) {
  .nyw-hd__in { gap: .8rem; padding-inline: 1.4rem; }
  .nyw-hd__logo { font-size: 1.5rem; letter-spacing: .02em; }
  /* 이 폭에서는 로고와 CTA, 버거가 가로를 거의 다 쓴다. 마크를 키우면 헤더가
     뷰포트를 넘겨 가로 스크롤이 생기므로 작게 둔다. */
  .nyw-hd__mark { height: 1.6rem; margin-right: .4rem; }
  /* ⛔12px 하한 — 헤더 대표 CTA 다. 글자를 줄이지 말고 패딩을 줄여 자리를 만든다.
     ★rem 금지(root=9~10px 가변) — px 로 못박는다. */
  .nyw-hd__cta { font-size: 12px; padding: .9rem .8rem; letter-spacing: -.02em; }
  .nyw-burger__btn { width: 3.8rem; padding: 0 .6rem; }
}



.nyw-lic__grid { align-items: start; }
.nyw-lic__card .nyw-lic__fig { aspect-ratio: 3 / 4.1; }
.nyw-lic__card:nth-child(2) { margin-top: 5.6rem; }
.nyw-lic__card:nth-child(2) .nyw-lic__fig { aspect-ratio: 3 / 4.55; }
.nyw-lic__card:nth-child(3) { margin-top: 2.2rem; }
.nyw-lic__card:nth-child(3) .nyw-lic__fig { aspect-ratio: 3 / 3.85; }
.nyw-lic__card .nyw-lic__cap .nyw-lic__en {
  font-size: clamp(2.8rem, 2.6vw, 4.2rem); letter-spacing: -0.015em;
}
.nyw-lic__card .nyw-lic__cap .nyw-lic__ko {
  margin-top: .9rem; font-size: 1.45rem; font-weight: 500; opacity: .9;
}
/* 알약형 배지 — 연도. 지어낸 영문 슬로건을 넣지 않는다(면허·연도가 이 병원의 내용이다). */
.nyw-lic__pill {
  display: inline-block; margin-top: 1.8rem; padding: .85rem 1.9rem;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-family: "Arial Narrow", Pretendard, serif; font-size: 1.25rem; letter-spacing: .14em;
  color: #fff; white-space: nowrap;
}
.nyw-lic__fig--noimg .nyw-lic__pill {
  border-color: var(--nyw-line); background: transparent; color: var(--nyw-ink);
}
/* 카드 밖으로 뺀 설명 — 한 문단, 폭을 제한해 읽기 편하게 */
.nyw-lic__note {
  margin-top: 5.6rem; max-width: 88rem; font-size: 1.5rem; line-height: 1.85;
  color: var(--nyw-mute);
}

@media (max-width: 900px) {
  /* 세로 나열 금지 — 옆으로 미는 캐러셀 */
  .nyw-lic__grid {
    display: flex; gap: 1.2rem; margin-top: 3.6rem; padding-bottom: 1.2rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nyw-lic__grid::-webkit-scrollbar { display: none; }
  .nyw-lic__card { flex: 0 0 64%; min-width: 0; scroll-snap-align: start; }
  .nyw-lic__card,
  .nyw-lic__card:nth-child(2),
  .nyw-lic__card:nth-child(3) { margin-top: 0; }
  .nyw-lic__card .nyw-lic__fig,
  .nyw-lic__card:nth-child(2) .nyw-lic__fig,
  .nyw-lic__card:nth-child(3) .nyw-lic__fig { aspect-ratio: 3 / 4.2; }
  .nyw-lic__card .nyw-lic__cap { padding: 0 1.4rem 2.2rem; }
  .nyw-lic__card .nyw-lic__cap .nyw-lic__en { font-size: 2.6rem; }
  .nyw-lic__card .nyw-lic__cap .nyw-lic__ko { font-size: 1.3rem; margin-top: .6rem; }
  .nyw-lic__pill { margin-top: 1.2rem; padding: .7rem 1.4rem; font-size: 1.1rem; letter-spacing: .1em; }
  .nyw-lic__note { margin-top: 3.2rem; font-size: 1.4rem; }
}

/* 사진마다 밝기가 달라 글자가 묻히는 자리가 있다(밝은 하늘·설산).
   스크림만으로 부족한 만큼 글자 자체에 옅은 그림자를 준다. */
.nyw-lic__card .nyw-lic__cap .nyw-lic__en { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.nyw-lic__card .nyw-lic__cap .nyw-lic__ko { opacity: 1; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.nyw-lic__card .nyw-lic__num { text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.nyw-lic__card .nyw-lic__pill { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.nyw-lic__card .nyw-lic__scrim {
  background: linear-gradient(to top,
              rgba(0,0,0,.86) 0%, rgba(0,0,0,.64) 34%, rgba(0,0,0,.26) 66%, rgba(0,0,0,0) 100%);
}


.nyw-nav { display: flex; flex-wrap: nowrap !important; align-items: center;
  /* ⛔2026-09-15 대표 지시로 메뉴가 9개 -> 12개가 됐다(카테고리 16개 재편).
     1440px 에서 메뉴 폭 763px 이 되어 검색 아이콘 위로 올라탔다(실측).
     ★간격을 줄여 폭을 되찾는다 — 글자는 12px 하한이 있어 더 못 줄인다. */
  gap: clamp(.7rem, .85vw, 1.15rem); column-gap: clamp(.7rem, .85vw, 1.15rem);
  justify-content: center; min-width: 0;
  /* 메뉴 묶음을 로고와 우측 버튼군 사이 한가운데에 둔다.
     flex 를 0 1 auto 로 두어 메뉴가 남는 자리를 혼자 삼키지 않게 하고,
     좌우 auto 여백이 남는 자리를 똑같이 나눠 가져 양쪽 간격이 같아진다.
     flex: 1 1 auto 로 되돌리면 메뉴가 우측 버튼군에 다시 달라붙는다. */
  flex: 0 1 auto; margin-inline: auto;
  /* 메뉴가 자기 칸보다 넓어지면 넘친 부분이 왼쪽(로고 자리)으로 밀려 로고를 덮는다.
     safe 는 넘칠 때 정렬을 시작점으로 되돌려 그 침범을 막는다.
     윗줄 center 는 safe 를 모르는 브라우저의 폴백이니 지우지 않는다. */
  justify-content: safe center; }
.nyw-nav__item { position: relative; flex: 0 0 auto; }
.nyw-nav__top { display: inline-block; padding: 2.2rem 0; font-size: clamp(1.34rem, .95vw, 1.45rem);  /* ⛔하한 1.3rem 은 11.7px 라 12px 선을 깼다 */
  font-weight: 500; color: #3d3d3d; text-decoration: none; white-space: nowrap;
  letter-spacing: -.02em; border-bottom: 2px solid transparent; transition: color .16s, border-color .16s; }
.nyw-nav__item:hover .nyw-nav__top,
.nyw-nav__item:focus-within .nyw-nav__top { color: var(--nyw-ink, #1e1e1e); }
.nyw-nav__item.is-on .nyw-nav__top { color: var(--nyw-ink, #1e1e1e); font-weight: 600;
  border-bottom-color: var(--nyw-ink, #1e1e1e); }

/* 패널은 자기 메뉴 글자의 가로 중심에 맞춰 곧게 내려온다.
   left 50% + translateX(-50%) 로 항목 중심에 걸고, 폭은 내용에 맞추되 항목 폭
   아래로는 줄이지 않는다. 항목보다 지나치게 넓으면 글자가 옆 메뉴 밑까지 퍼져
   삐뚤어 보인다. 글자도 가운데 정렬이라 보이는 글자의 중심이 메뉴 글자 중심과 같다. */
.nyw-nav__panel { position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  width: max-content; min-width: max(12rem, 100%);
  max-width: min(34rem, calc(100vw - 3rem));
  padding: 1.2rem 0 1.4rem; background: #fff; background-color: #fff;
  border: 1px solid #d8d8d8;
  border-radius: .6rem; box-shadow: 0 1.2rem 3.2rem rgba(0,0,0,.12); z-index: 9400;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, .6rem);
  transition: opacity .16s ease, transform .16s ease, visibility .16s; }

.nyw-nav__item:hover .nyw-nav__panel,
.nyw-nav__item:focus-within .nyw-nav__panel {
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  transform: translate(-50%, 0); }
.nyw-nav__list { list-style: none; margin: 0; padding: 0; }
.nyw-nav__list a { display: block; padding: .85rem 1.8rem; font-size: 1.4rem; line-height: 1.45;
  color: #4a4a4a; text-decoration: none; white-space: nowrap; text-align: center; }
.nyw-nav__list a:hover { background: #f5f5f5; color: var(--nyw-ink, #1e1e1e); }
.nyw-nav__sub { margin: 1rem 1.8rem .5rem; padding-top: 1rem; border-top: 1px solid #ececec;
  font-size: 1.15rem; font-weight: 600; letter-spacing: .04em; color: #9a9a9a; }
.nyw-nav__panel > .nyw-nav__sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* 마지막 두 칸을 우측 정렬(right:0)로 두면 패널이 항목보다 왼쪽으로 치우쳐 보인다.
   메뉴 오른쪽에는 검색·상담 버튼 자리가 남아 있어 가운데로 두어도 화면을 넘지 않는다.
   그래서 모든 칸을 같은 가운데 정렬로 통일하고 예외 칸을 만들지 않는다.
   화면 경계 보호는 위 max-width(100vw - 3rem)가 맡는다. */

/* 소그룹 제목은 항목과 «다른 층»으로 읽혀야 한다 — 배경 띠 + 위쪽 구분선. */
.nyw-nav__sub { background: #fafafa; margin: .9rem 0 .4rem; padding: .7rem 1.8rem .5rem;
  border-top: 1px solid #ececec; border-bottom: 1px solid #f2f2f2; text-align: center; }
.nyw-nav__panel > .nyw-nav__sub:first-child { margin-top: 0; border-top: 0; }

@media (min-width: 1025px) {
  .nyw-hd__in { gap: clamp(1.2rem, 1.2vw, 2rem); }
  /* ⛔2026-09-15 — 메뉴가 9개 -> 12개가 되면서 이 gap 이 검색 아이콘을 밀어냈다.
     ★이 줄이 «최종 승자»다 — 위쪽 .nyw-nav 선언들을 고쳐도 여기서 덮인다.
       1440px 실측: clamp(8.1, 15.12, 14.4) = 14.4px -> 8.93px (항목 11칸 x 5.5 = 60px 절약) */
  /* 메뉴가 우측 버튼군에서 떨어져 나오면서 남는 자리가 생겼다 — 그만큼만 칸을 벌린다.
     상한을 넘기면 메뉴가 로고 자리를 침범하므로 남는 폭 안에서만 벌린다. */
  .nyw-nav { gap: clamp(.9rem, .75vw, 1.3rem); column-gap: clamp(.9rem, .75vw, 1.3rem); }
}

/* ⛔2026-09-15 — 메뉴 12개가 1279px 이하에서는 어떤 간격으로도 검색 아이콘을 침범한다
   (1280 실측 33px). 그 구간은 전체 메뉴 버튼(햄버거)으로 넘긴다 — 항목은 하나도 안 없어진다. */
@media (max-width: 1339px) { .nyw-nav { display: none; } }

/* 영문·일문은 메뉴 라벨이 한국어보다 훨씬 길어(영문은 약 3.5배) 가로 메뉴가 칸에 들어가지
   않는다. 그 두 언어에서는 가로 메뉴 대신 전체 메뉴 버튼을 쓴다 — 항목이 사라지는 것이
   아니라 전체 메뉴 안에 대분류·하위가 그대로 들어 있다.
   ⛔중국어는 한국어보다 짧아 해당하지 않는다. 규칙에 넣지 마라. */
html:lang(en) .nyw-nav,
html:lang(ja) .nyw-nav { display: none; }
html:lang(en) .nyw-burger,
html:lang(ja) .nyw-burger { display: block; margin-left: auto; }

/* 모바일 전체 메뉴 — 대분류/소제목/하위 위계를 그대로 보여준다 */
.nyw-burger__panel { max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.nyw-burger__grp a { font-weight: 600; font-size: 1.5rem; color: var(--nyw-ink, #1e1e1e);
  background: #f4f4f4; }
.nyw-burger__kid a { padding-left: 3.4rem; font-size: 1.35rem; color: #555; }
.nyw-burger__sub { padding: .9rem 2rem .3rem 3.4rem; font-size: 1.1rem; font-weight: 600;
  letter-spacing: .04em; color: #9a9a9a; }

.nyw-ba__car { position: relative; margin-top: 3.2rem;
  
  max-width: 1100px; margin-inline: auto; }

.nyw-ba__track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);   /* 3열 x 2행 = 6쌍이 한 화면 */
  grid-auto-columns: 100%;          /* 한 칸 = 한 «화면». 그 안을 행 래퍼가 채운다 */
  gap: 2.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;      
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .4rem;
}
.nyw-ba__track::-webkit-scrollbar { display: none; }
.nyw-ba__track:focus-visible { outline: 2px solid var(--nyw-ink); outline-offset: 4px; }

.nyw-ba__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; align-items: start; }
/* 행 2개(=6쌍)마다 한 묶음이 딱 멈춘다 */
.nyw-ba__track > .nyw-ba__row { scroll-snap-align: none; }
.nyw-ba__track > .nyw-ba__row:nth-child(2n + 1) { scroll-snap-align: start; }

/* 좌우 화살표 — 트랙 위에 겹쳐 둔다(바깥에 두면 본문 폭을 넘는다) */
.nyw-ba__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 4.4rem; height: 4.4rem; border: 1px solid var(--nyw-line);
  background: rgba(255,255,255,.94); color: var(--nyw-ink);
  font-size: 2.2rem; line-height: 1; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.nyw-ba__nav--prev { left: -1.6rem; }
.nyw-ba__nav--next { right: -1.6rem; }
.nyw-ba__nav:hover:not(:disabled) { background: var(--nyw-ink); color: #fff; }
.nyw-ba__nav:focus-visible { outline: 2px solid var(--nyw-ink); outline-offset: 3px; }
.nyw-ba__nav:disabled { opacity: .28; cursor: default; }
.nyw-ba__nav[hidden] { display: none; }

/* 인디케이터 */
.nyw-ba__dots { display: flex; justify-content: center; gap: .8rem; margin-top: 2rem; }
.nyw-ba__dots[hidden] { display: none; }
.nyw-ba__dot {
  width: 3.2rem; height: .4rem; padding: 0; border: 0; cursor: pointer;
  background: var(--nyw-line); transition: background .2s ease;
}
.nyw-ba__dot.is-on { background: var(--nyw-ink); }
.nyw-ba__dot:focus-visible { outline: 2px solid var(--nyw-ink); outline-offset: 3px; }

@media (max-width: 1024px) {
  .nyw-ba__nav--prev { left: -.8rem; }
  .nyw-ba__nav--next { right: -.8rem; }
}
@media (max-width: 768px) {
  
  .nyw-ba__track { grid-template-rows: repeat(1, auto); gap: 1.6rem; }
  .nyw-ba__row { grid-template-columns: 1fr; gap: 1.6rem; }
  .nyw-ba__track > .nyw-ba__row { scroll-snap-align: start; }
  .nyw-ba__nav { width: 3.8rem; height: 3.8rem; font-size: 1.9rem; }
  .nyw-ba__nav--prev { left: -.4rem; }
  .nyw-ba__nav--next { right: -.4rem; }
  .nyw-ba__dot { width: 2.4rem; }
}
/* 움직임을 줄이도록 설정한 분께는 부드러운 이동을 끈다(스크립트도 같이 본다) */
@media (prefers-reduced-motion: reduce) {
  .nyw-ba__track { scroll-behavior: auto; }
  .nyw-ba__dot { transition: none; }
}

/* ── Section head label alignment for donor-derived pages ────────────────────
   Three pages are still served from the donor clone stylesheets (sub/*.css) and
   from a page-scoped <style> block. Their section titles are already restated in
   nyw-align.css; what that sheet does not cover is the eyebrow LABEL that sits
   above the title. Those labels were 11.52-13.5px in near-black with 2.16-2.57em
   tracking against 11.7px / #707070 / 0.16em everywhere else, so the label read
   as a different element from page to page.
   Mapping the donor class names onto the --nyw-sh-label-* tokens keeps the value
   written once. !important is required because sub/page-a.css sets font-size on
   .dn-label with !important; this file loads after it.
   Card and panel titles inside a section are NOT touched. */
.dn-label,
.about-hub__section-label {
  display: block;
  font-size: var(--nyw-sh-label-size) !important;
  font-weight: var(--nyw-sh-label-weight) !important;
  letter-spacing: var(--nyw-sh-label-tracking) !important;
  text-transform: uppercase;
  color: var(--nyw-sh-label-color) !important;
  margin: 0 0 var(--nyw-sh-label-gap) !important;
}

/* ── 2026-09-08 병원 지시(이영은 팀장) 반영분 ─────────────────────────
   ① 히어로는 병원 이름만  ② 철학 먼저  ③ Records 문구 + ⓘ 토글
   ④ 면허 카드를 눌러 나라별 면허증 보기(모바일 한 화면)  ⑤ 진료 안내는 이미지+링크
   ⛔ 여기에 인라인 스크립트를 쓰지 않는다 — 토글은 전부 <details> 다.
      프로덕션 CSP 는 nonce 방식이라 새 인라인 스크립트는 조용히 죽는다.            */

/* ③ Records — 문구를 앞세우고 집계 기준은 ⓘ 안으로 */
.nyw-stat__cap { display: flex; align-items: baseline; gap: .6rem;
  flex-wrap: wrap; margin-top: 1.2rem; }
.nyw-stat__phrase { font-size: 1.45rem; line-height: 1.6; color: #d2d2d2;
  letter-spacing: -0.02em; }
/* ⛔<details> 자신의 display 를 바꾸지 않는다(위 면허 절과 같은 이유). */
.nyw-stat__info:not([open]) .nyw-stat__basis { display: none; }
.nyw-stat__info > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; color: #cfcfcf; font-size: 1.5rem; line-height: 1;
  border: 1px solid rgba(255,255,255,.34); background: transparent; }
.nyw-stat__info > summary::-webkit-details-marker { display: none; }
.nyw-stat__info > summary:hover,
.nyw-stat__info[open] > summary { color: #fff; border-color: rgba(255,255,255,.7); }
.nyw-stat__info > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* ⛔ [open] 로 한정한다 — 닫힌 <details> 의 자식에 display 를 주면
   브라우저 기본 스타일(닫히면 숨김)을 «작성자 스타일이 이겨» 항상 보인다.
   2026-09-09 실측 — 이 한 줄 때문에 집계 기준이 접히지 않았다. */
.nyw-stat__info[open] .nyw-stat__basis { display: block; margin-top: .8rem; }
.nyw-stat__cell .nyw-stat__basis { font-size: 1.25rem; }

/* ④ 면허 — 카드를 눌러 나라별 면허증을 연다
   ⛔<details> 에 display:flex/grid 를 주면 «닫혀 있어도 자식이 그대로 그려진다».
     위쪽 .nyw-lic__card 규칙(display:flex)이 그대로 걸리므로 여기서 block 으로 되돌린다.
     2026-09-09 실측 — 이걸 안 하면 면허증 패널이 처음부터 펼쳐진 채로 나온다.
   ★그리고 접힘을 브라우저 기본값에만 맡기지 않고 :not([open]) 로 «직접» 숨긴다. */
details.nyw-lic__card { display: block; }
details.nyw-lic__card:not([open]) > .nyw-lic__doc { display: none; }
.nyw-lic__sum { list-style: none; cursor: pointer; display: block; position: relative; }
.nyw-lic__sum::-webkit-details-marker { display: none; }
.nyw-lic__sum:focus-visible { outline: 2px solid var(--nyw-ink); outline-offset: 3px; }
.nyw-lic__more { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 3;
  padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.34); color: #fff; font-size: 12px; letter-spacing: -0.01em; }
.nyw-lic__card[open] .nyw-lic__more { background: rgba(0,0,0,.62); }
.nyw-lic__doc { border: 1px solid var(--nyw-line); border-top: 0;
  padding: 2rem; background: #fff; }
.nyw-lic__doc img { display: block; width: 100%; height: auto; }
.nyw-lic__docnote { margin: 0; font-size: 1.4rem; line-height: 1.8; color: var(--nyw-mute); }

/* ⑤ 진료 안내 — 이미지 카드 8개, 누르면 그 지면으로 */
.nyw-svc__grid { grid-template-columns: repeat(4, 1fr); }
.nyw-svc__item--link { display: flex; flex-direction: column; gap: 0;
  padding: 0; text-decoration: none; color: inherit; }
.nyw-svc__fig { margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--nyw-surface); }
.nyw-svc__fig img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.nyw-svc__item--link:hover .nyw-svc__fig img { transform: scale(1.04); }
.nyw-svc__body { display: flex; flex-direction: column; gap: 1rem;
  padding: 2.8rem 2.4rem 3.2rem; }
.nyw-svc__body .nyw-svc__desc { font-size: 1.5rem; margin: .6rem 0 0; }
.nyw-svc__go { margin-top: 1.6rem; font-size: 1.3rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--nyw-ink); display: inline-flex;
  align-items: center; gap: .8rem; }
.nyw-svc__go::after { content: ""; width: 1.6rem; height: 1px;
  background: currentColor; transition: width .3s ease; }
.nyw-svc__item--link:hover .nyw-svc__go::after { width: 2.8rem; }
.nyw-svc__item--link:focus-visible { outline: 2px solid var(--nyw-ink); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .nyw-svc__fig img { transition: none; }
  .nyw-svc__item--link:hover .nyw-svc__fig img { transform: none; }
}
@media (max-width: 1024px) { .nyw-svc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .nyw-svc__body { padding: 2rem 1.6rem 2.4rem; }
  .nyw-svc__body .nyw-svc__name { font-size: 1.9rem; }
  .nyw-svc__body .nyw-svc__desc { font-size: 1.4rem; }
}

/* ④-모바일 — 면허 3장이 «한 화면»에 들어오게 (2026-09-08 병원 지시)
   종전에는 옆으로 미는 캐러셀 + 카드 폭 64% 라 세 장이 한 화면에 안 들어왔다. */
@media (max-width: 900px) {
  .nyw-lic__grid { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .8rem; overflow: visible; margin-top: 3.2rem; padding-bottom: 0; }
  .nyw-lic__card, .nyw-lic__card:nth-child(2), .nyw-lic__card:nth-child(3) { margin-top: 0; }
  .nyw-lic__card .nyw-lic__fig,
  .nyw-lic__card:nth-child(2) .nyw-lic__fig,
  .nyw-lic__card:nth-child(3) .nyw-lic__fig { aspect-ratio: 3 / 4; }
  .nyw-lic__card .nyw-lic__cap { padding: 0 .5rem 1rem; }
  .nyw-lic__card .nyw-lic__cap .nyw-lic__en { font-size: 1.5rem; line-height: 1.15; }
  .nyw-lic__card .nyw-lic__cap .nyw-lic__ko { display: none; }
  .nyw-lic__pill { margin-top: .6rem; padding: .4rem .7rem; font-size: 12px;
    letter-spacing: .04em; }
  .nyw-lic__num { top: .8rem; left: .8rem; font-size: 1.2rem; }
  .nyw-lic__more { top: .6rem; right: .6rem; padding: .3rem .7rem; font-size: 12px; }
  .nyw-lic__doc { padding: 1.4rem; }
  .nyw-lic__docnote { font-size: 1.35rem; }
}

/* ① 히어로(모바일) — 남은 것이 «병원 이름 한 덩이»뿐이라 그것을 보여야 한다.
   종전에는 위쪽 768px 규칙이 이 h1 을 화면 밖으로 숨겼다(상단 헤더 로고와 겹쳐서).
   2026-09-08 병원 지시로 한국어 제목·부제·면허/위치 줄·전화 CTA 를 걷은 뒤에는
   그 규칙이 그대로 남아 «히어로에 글자가 하나도 없는» 화면이 됐다(2026-09-09 실측).
   ⛔이 블록을 지우지 마라 — 지우면 모바일 첫 화면에서 병원 이름이 사라진다. */
@media (max-width: 768px) {
  .nyw-hero .nyw-hero__title {
    position: static; width: auto; height: auto; margin: 0; padding: 0;
    overflow: visible; white-space: normal; clip-path: none;
  }
  .nyw-hero .nyw-hero__title .l1 { font-size: 3.2rem; line-height: 1.1; }
  .nyw-hero .nyw-hero__title .l2 { font-size: 1.6rem; margin-top: .8rem; }
  /* 하단 고정 상담바(약 60px)가 마지막 줄을 먹지 않게 아래 여백을 넉넉히 둔다. */
  .nyw-hero .nyw-hero__inner { padding-block: 2rem 9rem; }
}

/* ── 우측 세로 퀵바(.nyw-side) 자리를 본문에서 비운다 ─────────────────
   퀵바는 1101px 이상에서 화면 오른쪽에 고정되고 폭 54px + right 16px = 70px 대역을 쓴다.
   그런데 .nyw-wrap 의 좌우 여백은 --nyw-pad(36px) 뿐이라, 감싼 폭이 화면을 다 채우는
   구간에서 본문 오른쪽 끝이 그 대역 안으로 들어가 글자가 덮였다
   (2026-09-10 실측 — 1150px 에서 하위 지면 본문 11행이 최대 39px 덮여 있었다).
   ★1260px 이상은 최대폭 128rem 로 가운데 맞춤이 되면서 오른쪽 여백이 저절로 70px 를
     넘으므로 손대지 않는다 — 넓은 화면에서 본문이 왼쪽으로 밀리는 것을 막는다. */
@media (min-width: 1101px) and (max-width: 1259px) {
  .nyw-wrap { padding-right: 86px; }
}

/* ── 헤더는 «본문 그리드»에 가두지 않는다 ─────────────────────────────
   가로 메뉴 항목이 12개라 잉크 폭이 약 770px 인데, .nyw-wrap 이 본문 그리드
   (--nyw-max)에 묶여 메뉴가 쓸 수 있는 폭은 그보다 좁다. 항목은 줄바꿈도
   축소도 하지 않으므로(white-space:nowrap · flex:0 0 auto) 넘친 잉크가
   오른쪽으로 삐져나와 검색·언어 버튼 위로 올라탄다.
   넓은 화면일수록 더 심하다 — 루트 글꼴이 화면 폭에 따라 커지는데 메뉴가
   쓸 수 있는 폭은 본문 그리드에 갇혀 안 늘어나기 때문이다.

   ★본문은 그 그리드를 지켜야 하지만 헤더는 아니다 — 헤더만 화면 폭을 쓰게 푼다.
   ⛔오른쪽 여백은 우측 세로 퀵바(폭 54 + right 16 = 70px 대역)를 피해야 한다.
     그냥 풀면 「상담 예약」 버튼이 그 바 밑으로 들어간다.
   ⛔1339px 이하는 가로 메뉴가 전체 메뉴 버튼으로 바뀌므로 이 블록이 필요 없다. */
@media (min-width: 1340px) {
  .nyw-hd .nyw-wrap {
    max-width: none;
    padding-left: clamp(24px, 2.6vw, 56px);
    padding-right: clamp(86px, calc(2.6vw + 70px), 118px);
  }
}