/* ==========================================================================
   빛나래안과 — 이중 진입형 안과 사이트(가상 병원) · theme.css
   형식: 좌우 분할 첫 화면 · 「아주 굵은 + 아주 가는」 제목 · 명조 한 줄 · 우측 진료 안내 탭
   얼굴: 어두운 먹 + 두 센터 색(시력교정 파랑 #1F4FD8 · 안과질환 청록 #13795B — 빨강은 불안감을 줘 바꿨다(2026-09-22 대표 지시)). 모서리는 각지게(정밀함).
   글꼴: Pretendard Variable(SIL OFL 1.1 · jsDelivr) + Nanum Myeongjo(SIL OFL 1.1 · Google Fonts) — 둘 다 상업 사용 가능.
   🔴 글자 크기 바닥 0.875rem — 이 파일의 모든 font-size 가 게이트(sites.test.mjs) 대상이다.
   ========================================================================== */

:root {
  --vision: #1f4fd8;          /* 흰 바탕 6.6:1 */
  --vision-deep: #163a9f;
  --vision-soft: #edf2ff;
  --vision-on-dark: #8fb0ff;
  --disease: #13795b;         /* 흰 바탕 5.7:1 */
  --disease-deep: #0d5540;
  --disease-soft: #edf6f2;
  --disease-on-dark: #86d9bb;
  --tone: #14161b;            /* 지면 강조색 — 센터 지면이 파랑·청록으로 바꾼다 */
  --tone-deep: #000;
  --tone-soft: #f3f4f7;
  --ink-900: #101318;

  --f-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --f-display: var(--f-sans);
  --f-latin: var(--f-sans);
  --f-serif: 'Nanum Myeongjo', 'AppleMyungjo', 'Noto Serif KR', serif;
  --w-display: 800;
  --w-latin: 300;
  --w-body: 400;
  --w-thin: 200;

  --c-ink: #14161b;
  --c-body: #434852;          /* 9.5:1 */
  --c-mute: #5d636e;          /* 6.0:1 */
  --c-line: #e3e5ea;
  --c-line-strong: #c5c9d1;
  --c-panel: #f3f4f7;
  --c-accent: #3a4252;
  --c-deep: #14161b;
  --c-dark: #101318;
  --c-focus: #1f4fd8;
  --hd-h: 5.25rem;
  --radius: 0px;
  --shadow: 0 1px 2px rgba(16, 19, 24, 0.05), 0 18px 40px -18px rgba(16, 19, 24, 0.28);
  --qbar-h: 0px;
}
body.c-vision { --tone: var(--vision); --tone-deep: var(--vision-deep); --tone-soft: var(--vision-soft); }
body.c-disease { --tone: var(--disease); --tone-deep: var(--disease-deep); --tone-soft: var(--disease-soft); }

.bn { letter-spacing: -0.01em; }
.bn :is(h1, h2, h3, h4) { letter-spacing: -0.025em; }
/* 어두운 면 위 포커스 링은 흰색 — 파란 링이 파란 사진 위에서 사라지지 않게 */
.bn :is(.duo, .chero, .cross, .process, .cband, .ft, .fm, .care__call, .qbar, .caside--dark) :focus-visible { outline-color: #fff; }
/* 번호는 하이픈에서 꺾지 않는다(360 폭에서 「1588-/0000」 · site.mjs nb()) */
.nb { white-space: nowrap; }


/* ── 공통 타이포 ─────────────────────────────────────────────────────────── */
.sec-title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.24; letter-spacing: -0.035em; color: var(--c-ink); }
.sec-desc { margin-top: 1.25rem; font-size: var(--fs-lead); line-height: 1.8; color: var(--c-body); max-width: 34em; }
.sec-head-x { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); max-width: 46rem; }
.sec-head-x .eyebrow, .row-head .eyebrow, .vtypes__head .eyebrow, .about__text .eyebrow, .process__head .eyebrow { margin-bottom: 1rem; }
.eyebrow { letter-spacing: 0.06em; color: var(--c-accent); }
.eyebrow--vision { color: var(--vision); }
.eyebrow--disease { color: var(--disease); }
.c-vision .eyebrow, .c-disease .eyebrow { color: var(--tone); }
.row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.row-head__acts { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.row-head__desc { max-width: 28em; color: var(--c-body); }
.link-arrow { min-height: 2.75rem; }
.med-note, .stock-note, .photo-note { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.7; color: var(--c-mute); }
.med-note { padding-left: 0.875rem; border-left: 2px solid var(--c-line-strong); }
@media (max-width: 760px) { .row-head { flex-direction: column; align-items: flex-start; } }

/* 동심원 장식 — 각막 지형 검사기의 링 */
.rings { fill: none; stroke: currentColor; stroke-width: 1; pointer-events: none; }

/* 센터 버튼 */
.cbtn { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-width: 15.5rem; min-height: 3.375rem; padding: 0 1.125rem 0 1.375rem; background: var(--vision); color: #fff; font-size: 1rem; font-weight: 700; transition: background-color 0.3s var(--ease); }
.cbtn--disease { background: var(--disease); }
.cbtn:hover { background: var(--vision-deep); }
.cbtn--disease:hover { background: var(--disease-deep); }
.cbtn .ico { transition: transform 0.3s var(--ease); }
.cbtn:hover .ico { transform: translateX(4px); }

/* ── 헤더 ─────────────────────────────────────────────────────────────────── */
.bn .hd__inner { gap: 1.5rem; }
.bn .gnb { flex: 1 1 0; min-width: 0; margin-left: 0; }
.bn .gnb__list { gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.bn .gnb__link { font-size: 0.9375rem; font-weight: 700; }
.bn .gnb__item--vision .gnb__link::after { background: var(--vision); height: 3px; }
.bn .gnb__item--disease .gnb__link::after { background: var(--disease); height: 3px; }
.bn.has-visual .hd:not(.is-scrolled) .gnb__item--vision .gnb__link::after { background: var(--vision-on-dark); }
.bn.has-visual .hd:not(.is-scrolled) .gnb__item--disease .gnb__link::after { background: var(--disease-on-dark); }
.hd__right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; min-width: 0; }
.hd__link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.9375rem; font-weight: 600; opacity: 0.9; }
.hd__link:hover, .hd__link[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 0.35em; }
.hd__cta { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid currentColor; font-size: 0.9375rem; font-weight: 700; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.hd__cta:hover, .hd__cta[aria-current] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.bn.has-visual .hd:not(.is-scrolled) .hd__cta:hover { background: #fff; border-color: #fff; color: var(--c-ink); }
.bn .hd__menu { margin-left: 0.25rem; }
.bn.has-visual .hd.is-scrolled { background: rgba(16, 19, 24, 0.8); }

/* 로고 — 좌우 반원(파랑 | 청록)이 가운데 눈동자를 감싼다 */
.bn .logo { gap: 0.625rem; font-weight: 800; flex: none; }
.bn .logo__mark { display: block; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 0; fill: none; stroke-width: 2.6; }
.logo__l { stroke: var(--vision); }
.logo__r { stroke: var(--disease); }
.logo__mark circle { fill: currentColor; stroke: none; }
.bn.has-visual .hd:not(.is-scrolled) .logo__l, .bn.has-visual .hd.is-scrolled .logo__l, .ft .logo__l, .fm .logo__l { stroke: var(--vision-on-dark); }
.bn.has-visual .hd:not(.is-scrolled) .logo__r, .bn.has-visual .hd.is-scrolled .logo__r, .ft .logo__r, .fm .logo__r { stroke: var(--disease-on-dark); }
.logo__word { display: grid; line-height: 1; }
.logo__ko { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.045em; }

@media (max-width: 1180px) { .bn .gnb, .hd__link { display: none; } }
@media (max-width: 1080px) { .bn .gnb { display: none; } .bn .hd__menu { margin-left: 0.25rem; } }
@media (max-width: 640px) {
  .hd__cta { display: none; }
  .logo__ko { font-size: 1.3125rem; }
  .bn .logo__mark { width: 2rem; height: 2rem; }
}

/* ── 홈 첫 화면: 좌우 이중 진입 ───────────────────────────────────────────── */
.duo { position: relative; height: 100vh; height: 100svh; min-height: 42rem; max-height: 70rem; color: #fff; background: #0b0d11; overflow: hidden; --bar-h: 6rem; }
.duo__panels { display: flex; height: 100%; }
.duo__panel { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; transition: flex-grow 0.85s var(--ease); }
.duo__panel--vision { --tint: #2352e0; --img-b: 0.92; }
.duo__panel--disease { --tint: #13795b; --img-b: 0.7; }
.duo__media { position: absolute; inset: 0; z-index: -1; }
.duo__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(var(--img-b, 0.92)); transform: scale(1.06); transition: transform 1.4s var(--ease), filter 0.8s var(--ease); }
/* 사진 위에 센터 색을 곱한다 — 흰 부분도 센터 색보다 밝아지지 않아 흰 글자 대비가 보장된다 */
.duo__media::after { content: ''; position: absolute; inset: 0; background: var(--tint); mix-blend-mode: multiply; }
.duo__media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 7, 12, 0.5) 0%, rgba(5, 7, 12, 0.08) 26%, rgba(5, 7, 12, 0.12) 62%, rgba(5, 7, 12, 0.78) 100%); transition: background-color 0.8s var(--ease); }
.duo__panel + .duo__panel { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.12); }
.duo__body { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 36rem; padding: calc(var(--hd-h) + 1.5rem) 2rem calc(var(--bar-h) + 2.5rem); }
.duo__list { font-family: var(--f-serif); font-size: clamp(1rem, 0.82rem + 0.45vw, 1.3125rem); font-weight: 400; line-height: 1.6; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.92); text-wrap: balance; }
.duo__en { margin-top: clamp(1rem, 2.4vh, 1.75rem); font-size: clamp(1rem, 0.88rem + 0.4vw, 1.375rem); font-weight: 500; letter-spacing: 0; color: #fff; }
.duo__title { display: flex; flex-direction: column; align-items: center; margin-top: 0.125rem; color: #fff; font-size: clamp(3.25rem, 1.4rem + 4.6vw, 6.25rem); line-height: 1.04; letter-spacing: -0.05em; }
.duo__title strong { font-weight: 900; }
.duo__title span { font-weight: var(--w-thin); letter-spacing: -0.03em; }
.duo__btn { margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.duo__foot { margin-top: clamp(2rem, 7vh, 4.5rem); font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem); font-weight: 300; line-height: 1.75; color: rgba(255, 255, 255, 0.88); }
.duo__foot b { display: inline-block; margin-top: 0.125rem; font-size: 1.2em; font-weight: 700; color: #fff; }
/* 가리키거나 키보드로 들어간 쪽이 넓어진다(데스크톱). 마우스가 우선이고 반대편은 조금 어두워진다. */
@media (hover: hover) and (min-width: 861px) {
  .duo__panel:is(:hover, :focus-within) { flex-grow: 1.42; }
  .duo__panels:has(.duo__panel:hover) .duo__panel:focus-within:not(:hover) { flex-grow: 1; }
  .duo__panel:is(:hover, :focus-within) .duo__media img { transform: scale(1); filter: grayscale(1) contrast(1.1) brightness(calc(var(--img-b, 0.92) + 0.1)); }
  .duo__panels:has(.duo__panel:is(:hover, :focus-within)) .duo__panel:not(:hover):not(:focus-within) .duo__media::before { background-color: rgba(5, 7, 12, 0.42); }
}

/* 하단 바 — 빠른 상담 · 예약 · 의료진 찾기 */
.duo__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-right: 3.75rem; background: rgba(8, 10, 14, 0.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.duo__bar-in { display: flex; align-items: center; gap: 1.5rem; min-height: var(--bar-h); }
.qlink { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding-right: 1.5rem; border-right: 1px solid rgba(255, 255, 255, 0.22); font-size: 1.0625rem; font-weight: 800; color: #fff; white-space: nowrap; }
.qlink .ico { opacity: 0.85; transition: transform 0.3s var(--ease); }
.qlink:hover .ico { transform: translateY(-2px); }
.finder { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.finder__label { margin-right: 0.5rem; font-size: 0.9375rem; font-weight: 500; color: rgba(255, 255, 255, 0.84); white-space: nowrap; }
.finder__sel, .finder__input { height: 3rem; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0; background-color: rgba(255, 255, 255, 0.08); color: #fff; font-size: 0.9375rem; transition: border-color 0.2s, background-color 0.2s; }
.finder__sel { appearance: none; -webkit-appearance: none; min-width: 9.25rem; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.125rem; cursor: pointer; }
.finder__sel option { color: #14161b; background: #fff; }
.finder__input { width: 13rem; }
.finder__input::placeholder { color: rgba(255, 255, 255, 0.72); }
.finder__sel:focus, .finder__input:focus { border-color: #fff; background-color: rgba(255, 255, 255, 0.14); }
.finder__sel:focus-visible, .finder__input:focus-visible, .finder__input:focus { outline: 2px solid #fff; outline-offset: 2px; }
.finder__go { display: grid; place-items: center; width: 3rem; height: 3rem; color: #fff; transition: transform 0.3s var(--ease); }
.finder__go:hover { transform: scale(1.08); }
@media (max-width: 1240px) { .finder__label { display: none; } .finder__input { width: 11rem; } .finder__sel { min-width: 8.25rem; } }
@media (max-width: 1080px) { .qlink { font-size: 1rem; padding-right: 1rem; } .qlink .ico { display: none; } }

/* 모바일: 위아래로 나눈다 · 하단 바는 사진 아래로 */
@media (max-width: 860px) {
  .duo { height: auto; min-height: 0; max-height: none; }
  .duo__panels { flex-direction: column; }
  .duo__panel { min-height: calc(50svh - 2.5rem); }
  .duo__panel--vision { min-height: calc(50svh + 0.5rem); }
  .duo__body { padding: 2.25rem 1.25rem 2.5rem; }
  .duo__panel--vision .duo__body { padding-top: calc(var(--hd-h) + 0.75rem); }
  .duo__panel + .duo__panel { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.14); }
  .duo__list { font-size: 0.9375rem; max-width: 20rem; }
  .duo__en { margin-top: 0.75rem; font-size: 1rem; }
  .duo__title { font-size: 2.875rem; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 0.5rem; }
  .duo__btn { margin-top: 1.25rem; min-width: 14rem; }
  .duo__foot { display: none; }  /* 모바일 첫 화면은 샘플 표식이 이 자리에 뜬다 */
  .duo__panel--disease .duo__body { padding-bottom: 4.5rem; }
  .duo__bar { position: static; padding-right: 0; background: #0e1116; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .duo__bar-in { flex-wrap: wrap; gap: 0.625rem; padding-block: 1.25rem 1.75rem; }
  .qlink { flex: 1 1 0; justify-content: center; padding: 0 0.75rem; min-height: 3.25rem; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.9375rem; }
  .qlink .ico { display: inline; }
  .finder { width: 100%; margin: 0.5rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 3rem; gap: 0.5rem; }
  .finder__label { display: block; grid-column: 1 / -1; margin: 0; }
  .finder__sel { min-width: 0; width: 100%; }
  .finder__sel + .sr-only + .finder__sel { grid-column: 2 / -1; }
  .finder__input { grid-column: 1 / 3; width: 100%; }
  .finder__go { border: 1px solid rgba(255, 255, 255, 0.16); }
}

/* 샘플 표식 — 홈은 첫 화면 하단 바(6rem) 위에 띄운다(바의 빠른 상담 링크를 덮지 않게 · 키트 변수 --badge-bottom). */
@media (min-width: 861px) { .is-home { --badge-bottom: 7rem; } }

/* ── 홈: 소개 · 숫자 ─────────────────────────────────────────────────────── */
.about__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.about__title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.28; letter-spacing: -0.04em; }
.about__title em { font-style: normal; font-weight: var(--w-thin); color: var(--vision); }
.about__lead { margin-top: 1.75rem; font-size: var(--fs-lead); line-height: 1.85; max-width: 32em; }
.about__text .link-arrow { margin-top: 1.75rem; }
.about__visual { position: relative; width: 100%; max-width: 32rem; aspect-ratio: 1; justify-self: center; color: var(--c-line-strong); }
.about__rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.about__iris { position: absolute; inset: 23.5%; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px rgba(16, 19, 24, 0.55); }
.about__iris img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.about__cap { position: absolute; left: 0; right: 0; bottom: -0.5rem; text-align: center; font-size: 0.875rem; color: var(--c-mute); }
.about__cap span { font-weight: 700; color: var(--c-ink); margin-right: 0.375rem; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(4rem, 8vw, 6.5rem); border-top: 1px solid var(--c-ink); }
.facts__item { padding: 1.5rem 1.5rem 0 0; }
.facts__item + .facts__item { padding-left: 1.5rem; border-left: 1px solid var(--c-line); }
.facts__item dt { font-size: 0.9375rem; font-weight: 600; color: var(--c-mute); }
.facts__item dd { margin: 0.75rem 0 0; display: flex; align-items: baseline; gap: 0.25rem; }
.facts__num { font-size: clamp(2.75rem, 1.7rem + 3.2vw, 4.75rem); font-weight: var(--w-thin); line-height: 1; letter-spacing: -0.05em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.facts__unit { font-size: 1.125rem; font-weight: 700; color: var(--c-ink); }
.facts__note { margin-top: 1.25rem; font-size: 0.875rem; color: var(--c-mute); }
@media (max-width: 960px) { .about__grid { grid-template-columns: minmax(0, 1fr); } .about__visual { max-width: 24rem; } }
@media (max-width: 760px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__item:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts__item:nth-child(n + 3) { margin-top: 1.5rem; border-top: 1px solid var(--c-line); }
}

/* ── 홈: 시력교정 방식 카드 ──────────────────────────────────────────────── */
.vtypes__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.6fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.vtypes__head { position: sticky; top: calc(var(--hd-h) + 2.5rem); }
.vtypes__head .cbtn { margin-top: 2.25rem; }
.vcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.vcard { background: #fff; }
.vcard__link { display: flex; flex-direction: column; height: 100%; padding: 1.75rem 1.75rem 2rem; transition: background-color 0.35s var(--ease); }
.vcard__link:hover { background: var(--vision-soft); }
.vcard__fig { display: block; margin: 0 -0.5rem 1.25rem; }
.vcard__no { font-size: 0.875rem; font-weight: 700; color: var(--vision); }
.vcard__name { margin-top: 0.25rem; font-size: 1.5rem; font-weight: 800; color: var(--c-ink); letter-spacing: -0.03em; }
.vcard__name small { margin-left: 0.375rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--c-mute); }
.vcard__how { margin-top: 0.375rem; font-size: 0.9375rem; color: var(--c-body); }
.vcard__fit { margin-top: auto; padding-top: 1.25rem; font-size: 0.9375rem; line-height: 1.65; color: var(--c-mute); }
.vcard__fit b { display: block; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--c-line); margin-bottom: 0.25rem; font-size: 0.875rem; color: var(--c-ink); }
@media (max-width: 960px) { .vtypes__grid { grid-template-columns: minmax(0, 1fr); } .vtypes__head { position: static; } }
@media (max-width: 560px) { .vcards { grid-template-columns: minmax(0, 1fr); } }

/* 눈 단면 그림 */
.eye { width: 100%; height: auto; overflow: visible; }
.eye__ball { fill: var(--c-panel); stroke: var(--c-line-strong); stroke-width: 1.2; }
.eye__ray { fill: none; stroke: #8a909b; stroke-width: 0.9; stroke-dasharray: 3 3; }
.eye__retina { fill: none; stroke: #9aa1ad; stroke-width: 3; }
.eye__cornea { fill: none; stroke: var(--c-ink); stroke-width: 1.6; }
.eye__iris { stroke: var(--c-ink); stroke-width: 2.4; }
.eye__lens { fill: #fff; stroke: var(--c-ink); stroke-width: 1.4; }
.eye__nerve { stroke: #9aa1ad; stroke-width: 2; }
.eye__hl { fill: var(--vision); }
.eye__hl--soft { fill-opacity: 0.28; }
.eye__hl-line { fill: none; stroke: var(--vision); stroke-width: 3.2; stroke-linecap: round; }
.eye__hl-line--thick { stroke-width: 5.5; stroke-opacity: 0.85; }
.eye__hl-ring { fill: none; stroke: var(--vision); stroke-width: 1.2; }

/* ── 홈: 질환 카드 ───────────────────────────────────────────────────────── */
.dcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.75rem, 1.2vw, 1rem); }
.dcard__link { display: flex; flex-direction: column; height: 100%; background: #fff; border-top: 3px solid var(--disease); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.dcard__link:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.dcard__link > :not(.dcard__media) { padding-inline: 1.25rem; }
.dcard__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-panel); }
.dcard__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 1.1s var(--ease); }
.dcard__link:hover .dcard__media img { transform: scale(1.05); }
.dcard__no { margin-top: 1.25rem; font-size: 0.875rem; font-weight: 700; color: var(--disease); }
.dcard__name { margin-top: 0.125rem; font-size: 1.375rem; font-weight: 800; color: var(--c-ink); letter-spacing: -0.03em; }
.dcard__en { font-size: 0.875rem; color: var(--c-mute); }
.dcard__signs { display: grid; gap: 0.375rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-line); font-size: 0.9375rem; line-height: 1.6; color: var(--c-body); }
.dcard__signs span { position: relative; padding-left: 0.875rem; }
.dcard__signs span::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 0.375rem; height: 1px; background: var(--disease); }
.dcard__more { margin-top: auto; display: flex; align-items: center; gap: 0.375rem; padding-block: 1.25rem; font-size: 0.9375rem; font-weight: 700; color: var(--disease); }
.dcard__more .ico { transition: transform 0.3s var(--ease); }
.dcard__link:hover .dcard__more .ico { transform: translateX(4px); }
@media (max-width: 1100px) { .dcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .dcards { grid-template-columns: minmax(0, 1fr); }
  .dcard__link { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 1rem; border-top: 0; border-left: 3px solid var(--disease); }
  .dcard__link > :not(.dcard__media) { padding-inline: 0 1rem; grid-column: 2; }
  .dcard__media { grid-row: 1 / -1; aspect-ratio: auto; height: 100%; }
  .dcard__no { margin-top: 1rem; }
  .dcard__signs { display: none; }
  .dcard__more { padding-block: 0.5rem 1rem; }
}

/* ── 홈: 검사 과정(어두운 면) ────────────────────────────────────────────── */
.process { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-900); color: rgba(255, 255, 255, 0.76); }
.process .eyebrow { color: rgba(255, 255, 255, 0.72); }
.process .sec-title { color: #fff; }
.process__rings { position: absolute; z-index: -1; right: -14rem; top: 50%; width: 48rem; height: 48rem; transform: translateY(-50%); color: rgba(255, 255, 255, 0.07); }
.process__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.psteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.3); }
.pstep { padding: 1.75rem 1.5rem 0.5rem 0; }
.pstep + .pstep { padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.pstep__no { display: block; margin-bottom: 1.5rem; font-size: 2.75rem; font-weight: var(--w-thin); line-height: 1; letter-spacing: -0.04em; color: #fff; }
.pstep__title { margin-bottom: 0.625rem; font-size: 1.25rem; font-weight: 800; color: #fff; }
.pstep__desc { font-size: 0.9375rem; line-height: 1.75; color: rgba(255, 255, 255, 0.74); }
.psteps--light { margin-top: clamp(3rem, 6vw, 4.5rem); border-top-color: var(--c-ink); }
.psteps--light .pstep + .pstep { border-left-color: var(--c-line); }
.psteps--light .pstep__no { color: var(--tone); }
.psteps--light .pstep__title { color: var(--c-ink); }
.psteps--light .pstep__desc { color: var(--c-mute); }
.process__note { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.25rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.9375rem; color: rgba(255, 255, 255, 0.84); }
.process__note .ico { margin-top: 0.25rem; }
@media (max-width: 860px) {
  .psteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pstep:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pstep:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .psteps--light .pstep:nth-child(n + 3) { border-top-color: var(--c-line); }
}
@media (max-width: 520px) {
  .psteps { grid-template-columns: minmax(0, 1fr); }
  .pstep + .pstep { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .psteps--light .pstep + .pstep { border-top-color: var(--c-line); }
  .pstep { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); padding: 1.25rem 0; }
  .pstep__no { grid-row: 1 / 3; margin: 0; font-size: 2rem; }
}

/* ── 홈: 공간·장비 ───────────────────────────────────────────────────────── */
.space__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(13rem, 21vw, 18.5rem); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.space__item--1 { grid-column: 1 / 3; }
.space__item--2 { grid-column: 3; grid-row: 1 / 3; }
.space__fig { position: relative; height: 100%; overflow: hidden; background: var(--c-panel); }
.space__fig img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); transition: transform 1.2s var(--ease); }
.space__fig:hover img { transform: scale(1.04); }
/* 캡션 글자 뒤는 늘 짙게 — 옅어지는 구간(3rem)을 글자 위쪽 여백 안에 가둔다(예전엔 전체 높이로 번져 「굴절 검사」 뒤가 옅어 대비 3.6 · 2026-09-22 재검증) */
.space__cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.125rem; padding: 3rem 1.5rem 1.25rem; background: linear-gradient(180deg, rgba(8, 10, 14, 0) 0, rgba(8, 10, 14, 0.42) 1.5rem, rgba(8, 10, 14, 0.72) 3rem, rgba(8, 10, 14, 0.86) 100%); color: rgba(255, 255, 255, 0.92); font-size: 0.9375rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.space__cap b { font-size: 1.125rem; color: #fff; }
@media (max-width: 760px) {
  .space__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 12rem; }
  .space__item--1 { grid-column: 1 / -1; }
  .space__item--2 { grid-column: auto; grid-row: auto; }
  .space__item--4 { grid-column: 1 / -1; }
  .space__cap { padding: 2.5rem 1rem 1rem; }
  .space__cap span { display: none; }
}

/* ── 홈: 의료진 가로 목록 · 카드 ─────────────────────────────────────────── */
.row-head__acts .slider__btn:disabled { opacity: 0.32; cursor: default; }
.row-head__acts .slider__btn:disabled:hover { background: none; }
.row-head__acts .slider__btn:disabled:hover .ico { color: inherit; }
.docs-rail { --rail-w: 16.5rem; --rail-gap: clamp(1rem, 1.6vw, 1.5rem); padding: 0.25rem 0.25rem 0.75rem; margin: -0.25rem; }
.doc { display: flex; flex-direction: column; background: #fff; }
/* 의료진 사진 — 배경·복장이 제각각인 자료 사진을 한 벌로 보이게 한다.
   ① 흑백으로 바꿔 옅은 회청 바탕에 곱하고(multiply) ② 먹색으로 밝히기(lighten)해 같은 두 색(듀오톤)으로 맞춘 뒤
   ③ 가장자리를 바탕색으로 흐려 배경 차이를 줄이고 ④ 사진마다 배율·기준점(--fs·--fx·--fy)으로 얼굴 높이·크기를 맞춘다. */
.doc__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #e4e8ef; isolation: isolate; }
.doc__media img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--fx, 50%) var(--fy, 20%); transform: scale(var(--fs, 1)); filter: grayscale(1) contrast(1.08) brightness(var(--fb, 1.05)); mix-blend-mode: multiply; transition: transform 1.1s var(--ease); }
.doc__media::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 70% 62% at 50% 38%, rgba(228, 232, 239, 0) 55%, rgba(228, 232, 239, 0.72) 100%), linear-gradient(180deg, rgba(228, 232, 239, 0) 70%, rgba(228, 232, 239, 0.35) 100%); }
.doc__media::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #1b2231; mix-blend-mode: lighten; }
.doc:hover .doc__media img { transform: scale(calc(var(--fs, 1) * 1.03)); }
.doc--info { display: flex; }
.doc__infobox { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 100%; padding: clamp(1.5rem, 2.2vw, 2rem); overflow: hidden; isolation: isolate; background: var(--ink-900); color: rgba(255, 255, 255, 0.8); }
.doc__rings { position: absolute; z-index: -1; right: -9rem; bottom: -9rem; width: 22rem; height: 22rem; color: rgba(255, 255, 255, 0.1); }
.doc__infoeye { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); }
.doc__infot { margin-top: 0.75rem; font-size: 1.375rem; font-weight: 800; line-height: 1.4; letter-spacing: -0.03em; color: #fff; }
.doc__infod { margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.7; }
.doc__infobtn { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3rem; margin-top: auto; padding: 0 1.125rem; background: #fff; color: var(--c-ink); font-weight: 700; }
.doc__infobtn:hover { background: var(--vision); color: #fff; }
.doc__infolink { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: #fff; }
.doc__infobox > .doc__infod { margin-bottom: 1.5rem; }
.doc__body { padding-top: 1.125rem; }
.doc__tag { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--c-mute); }
.doc__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--vision); flex: none; }
.doc--disease .doc__dot { background: var(--disease); }
.doc__name { margin-top: 0.375rem; font-size: 1.375rem; font-weight: 800; }
.doc__name span { margin-left: 0.25rem; font-size: 1rem; font-weight: 500; color: var(--c-mute); }
.doc__spec { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--c-body); }
.doc__branch { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; font-size: 0.875rem; color: var(--c-mute); }
.doc__more { margin-top: 0.875rem; border-top: 1px solid var(--c-line); }
.doc__more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 2.875rem; font-size: 0.9375rem; font-weight: 700; color: var(--c-ink); cursor: pointer; }
.doc__more summary::-webkit-details-marker { display: none; }
.doc__more summary .ico { transition: transform 0.3s var(--ease); }
.doc__more[open] summary .ico { transform: rotate(180deg); }
.sch { width: 100%; border-collapse: collapse; margin-bottom: 0.5rem; font-size: 0.875rem; text-align: center; }
.sch th, .sch td { padding: 0.4375rem 0; border-bottom: 1px solid var(--c-line); }
.sch thead th { font-weight: 600; color: var(--c-mute); }
.sch tbody th { text-align: left; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.sch__on { color: var(--vision); }
.doc--disease .sch__on { color: var(--disease); }
.sch__off { color: #666c77; }

/* ── 홈: 소식 탭 ─────────────────────────────────────────────────────────── */
.ntabs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-ink); }
.ntabs__list { display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); overflow-x: auto; scrollbar-width: none; }
.ntabs__list::-webkit-scrollbar { display: none; }
.ntabs__tab { min-height: 2.75rem; font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.5rem); font-weight: 300; letter-spacing: -0.04em; color: #6a707b; white-space: nowrap; transition: color 0.2s; }
.ntabs__tab:hover { color: var(--c-ink); }
.ntabs__tab[aria-selected='true'] { font-weight: 800; color: var(--c-ink); }
.nrow { display: grid; grid-template-columns: 8.5rem 6.5rem minmax(0, 1fr) auto; grid-template-areas: 'thumb tag t date' 'thumb tag s date'; column-gap: 1.75rem; align-items: center; padding-block: 1.25rem; border-bottom: 1px solid var(--c-line); }
.nrow__thumb { grid-area: thumb; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-panel); }
.nrow__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.9s var(--ease); }
.nrow:hover .nrow__thumb img { transform: scale(1.06); }
.nrow__tag { grid-area: tag; font-size: 0.875rem; font-weight: 700; color: var(--c-accent); }
.nrow__t { grid-area: t; align-self: end; font-size: 1.1875rem; font-weight: 700; color: var(--c-ink); }
.nrow:hover .nrow__t { text-decoration: underline; text-underline-offset: 0.25em; }
.nrow__s { grid-area: s; align-self: start; margin-top: 0.25rem; font-size: 0.9375rem; color: var(--c-mute); }
.nrow__date { grid-area: date; font-size: 0.9375rem; color: var(--c-mute); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .ntabs__head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .nrow { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-areas: 'thumb tag' 'thumb t' 'thumb date'; column-gap: 1rem; row-gap: 0.125rem; }
  .nrow__s { display: none; }
  .nrow__t { font-size: 1.0625rem; line-height: 1.45; }
  .nrow__date { font-size: 0.875rem; }
}

/* ── 홈: 빛나래TV ────────────────────────────────────────────────────────── */
.tv__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.tv__main, .tv__item { display: block; }
.tv__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.tv__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); transition: transform 1s var(--ease); }
.tv__main:hover .tv__thumb img, .tv__item:hover .tv__thumb img { transform: scale(1.04); }
.tv__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(6, 8, 12, 0.26); transition: background-color 0.3s; }
.tv__main:hover .tv__play, .tv__item:hover .tv__play { background: rgba(6, 8, 12, 0.12); }
.tv__dur { position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.125rem 0.5rem; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tv__meta { display: block; margin-top: 1rem; }
.tv__tag { display: inline-block; margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: 700; color: var(--c-accent); }
.tv__title { display: block; font-size: 1.375rem; font-weight: 800; line-height: 1.4; color: var(--c-ink); letter-spacing: -0.03em; }
.tv__list { display: grid; gap: 1.25rem; align-content: start; }
.tv__item { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.125rem; align-items: center; }
.tv__item .tv__meta { margin-top: 0; }
.tv__item .tv__title { font-size: 1.0625rem; line-height: 1.5; }
@media (max-width: 960px) { .tv__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .tv__item { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.875rem; } .tv__title { font-size: 1.1875rem; } }

/* ── 센터·하위 지면 첫 화면 ─────────────────────────────────────────────── */
.chero { position: relative; display: flex; align-items: flex-end; min-height: clamp(30rem, 70vh, 42rem); color: #fff; overflow: hidden; isolation: isolate; background: #0b0d11; --tint: #66728a; }
.chero--vision { --tint: #2352e0; }
.chero--disease { --tint: #13795b; } /* 첫 화면(duo)과 같은 청록 — 빨강은 불안감을 줘 바꿨다(2026-09-22) */
.chero__media { position: absolute; inset: 0; z-index: -2; }
.chero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transform: scale(1.06); animation: kenburns 12s var(--ease) forwards; }
.chero__media::after { content: ''; position: absolute; inset: 0; background: var(--tint); mix-blend-mode: multiply; }
.chero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 7, 12, 0.55) 0%, rgba(5, 7, 12, 0.1) 35%, rgba(5, 7, 12, 0.62) 100%); }
.chero__rings { position: absolute; z-index: -1; right: -10rem; top: 50%; width: min(46rem, 90vw); height: auto; transform: translateY(-46%); color: rgba(255, 255, 255, 0.16); }
.chero__inner { padding-top: calc(var(--hd-h) + 3.5rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.chero__list { font-family: var(--f-serif); font-size: clamp(1rem, 0.88rem + 0.4vw, 1.25rem); letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.9); }
.chero__en { margin-top: 1.25rem; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); font-weight: 500; color: #fff; }
.chero__list + .chero__en { margin-top: 1rem; }
.chero__title { margin-top: 0.125rem; font-size: clamp(3rem, 1.6rem + 4.4vw, 5.75rem); line-height: 1.04; letter-spacing: -0.05em; color: #fff; }
.chero__title strong { font-weight: 900; }
.chero__title span { font-weight: var(--w-thin); letter-spacing: -0.03em; }
.chero__lead { margin-top: 1.5rem; max-width: 34em; font-size: var(--fs-lead); font-weight: 500; line-height: 1.8; color: rgba(255, 255, 255, 0.9); }
@media (max-width: 640px) { .chero { min-height: 30rem; } .chero__rings { right: -12rem; width: 30rem; } }

/* 흰 바탕 지면 머리(상담 신청) */
.phead { padding-top: calc(var(--hd-h) + clamp(3rem, 6vw, 5rem)); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); border-bottom: 1px solid var(--c-line); }
.phead .eyebrow { margin-bottom: 0.875rem; }
.phead__title { font-size: clamp(2.75rem, 1.7rem + 3.6vw, 4.75rem); line-height: 1.05; letter-spacing: -0.05em; }
.phead__title strong { font-weight: 900; }
.phead__title span { font-weight: var(--w-thin); }
.phead__lead { margin-top: 1.25rem; max-width: 40em; font-size: var(--fs-lead); line-height: 1.8; color: var(--c-body); }
/* 사진 두 장을 겹친 머리(상담 신청) — 큰 사진 오른쪽 위 · 작은 사진 왼쪽 아래 · 뒤에 동심원 */
.phead--media { overflow: hidden; } /* 동심원이 화면 밖으로 나가 가로 스크롤을 만들지 않게 */
.phead--media .phead__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.phead__fig { position: relative; margin: 0; padding: 0 0 2.75rem 3.5rem; color: var(--c-line-strong); isolation: isolate; }
.phead__rings { position: absolute; z-index: -1; right: -4rem; top: -3.5rem; width: 17rem; height: 17rem; }
.phead__main { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-panel); }
.phead__main img, .phead__inset img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82); }
.phead__inset { position: absolute; left: 0; bottom: 0; width: 34%; aspect-ratio: 1; overflow: hidden; border: 6px solid #fff; background: var(--c-panel); box-shadow: var(--shadow); }
.phead__cap { position: absolute; right: 0; bottom: 0.625rem; font-size: 0.875rem; color: var(--c-mute); }
@media (max-width: 960px) {
  .phead--media .phead__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .phead__fig { padding: 0 0 2.5rem 2.25rem; }
  .phead__rings { right: -3rem; top: -2.5rem; width: 12rem; height: 12rem; }
  .phead__inset { width: 36%; border-width: 4px; }
}

/* 지면 안 바로가기 */
.anav { position: sticky; top: var(--hd-h); z-index: 50; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line); transition: top 0.4s var(--ease); }
.hd-hidden .anav { top: 0; }
.anav__list { display: flex; justify-content: center; gap: clamp(0.25rem, 2vw, 2rem); max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
.anav__list::-webkit-scrollbar { display: none; }
.anav__link { position: relative; display: flex; align-items: center; min-height: 3.75rem; padding-inline: 1rem; font-size: 0.9375rem; font-weight: 700; color: var(--c-mute); white-space: nowrap; transition: color 0.2s; }
.anav__link:hover { color: var(--c-ink); }
.anav__link[aria-current] { color: var(--c-ink); font-weight: 800; }
.anav__link[aria-current]::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: -1px; height: 3px; background: var(--tone); }
.bn [id] { scroll-margin-top: calc(var(--hd-h) + 4.75rem); }
@media (max-width: 640px) { .anav__list { justify-content: flex-start; padding-inline: 0.5rem; } }

/* ── 시력교정센터 ────────────────────────────────────────────────────────── */
.vdetail { display: grid; gap: clamp(3.5rem, 7vw, 6rem); }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.vrow--flip .vrow__fig { order: 2; }
.vrow__fig { position: relative; margin-bottom: 2rem; }
.vrow__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-panel); }
.vrow__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.02); }
.vrow__diagram { position: absolute; right: -1.5rem; bottom: -2rem; display: grid; place-items: center; width: 54%; aspect-ratio: 4 / 3; padding: 0.75rem 0.75rem 2.25rem; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.vrow--flip .vrow__diagram { right: auto; left: -1.5rem; }
.vrow__rings { position: absolute; width: 125%; height: auto; color: rgba(31, 79, 216, 0.14); }
.vrow__fig .eye { position: relative; width: 92%; }
.vrow__fig .eye__ball { fill: #fff; }
.vrow__cap { position: absolute; left: 1rem; bottom: 0.625rem; font-size: 0.875rem; font-weight: 700; color: var(--vision-deep); }
.vrow__no { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--vision); }
.vrow__name { margin-top: 0.5rem; font-size: clamp(2rem, 1.4rem + 1.8vw, 2.875rem); font-weight: 800; letter-spacing: -0.04em; }
.vrow__what { margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.8; color: var(--c-body); }
.vrow__fit { margin-top: 1.75rem; }
.vrow__label, .dpanel__label { margin-bottom: 0.75rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--c-line); font-size: 0.9375rem; font-weight: 800; color: var(--c-ink); }
.checks { display: grid; gap: 0.5rem; }
.checks li { display: flex; gap: 0.625rem; align-items: flex-start; color: var(--c-body); }
.checks .ico { margin-top: 0.3rem; color: var(--vision); }
.checks--disease .ico { color: var(--disease); }
.vrow__note { margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--c-panel); font-size: 0.9375rem; line-height: 1.7; color: var(--c-body); }
.vrow__note b { display: block; margin-bottom: 0.125rem; color: var(--c-ink); }
@media (max-width: 860px) {
  .vrow { grid-template-columns: minmax(0, 1fr); }
  .vrow--flip .vrow__fig { order: 0; }
  .vrow__diagram, .vrow--flip .vrow__diagram { right: 0.75rem; left: auto; bottom: -1.75rem; width: 62%; }
}

.exam-photos { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-auto-rows: clamp(15rem, 28vw, 24rem); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.exam-photo, .chk__fig, .first-foot__fig, .hgrid__fig, .floors__fig { position: relative; overflow: hidden; background: var(--c-panel); }
.exam-photo img, .chk__fig img, .first-foot__fig img, .hgrid__fig img, .floors__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82); }
.exam-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.125rem; padding: 3rem 1.5rem 1.25rem; background: linear-gradient(180deg, rgba(8, 10, 14, 0), rgba(8, 10, 14, 0.82)); color: rgba(255, 255, 255, 0.88); font-size: 0.9375rem; }
.exam-photo figcaption b { font-size: 1.125rem; color: #fff; }
.exam-photos + .photo-note { margin-top: 0.75rem; }
.exams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem); background: var(--c-line); border: 1px solid var(--c-line); }
.exam { background: #fff; padding: 1.5rem 1.5rem 1.875rem; }
.exam__no { display: block; font-size: 0.875rem; font-weight: 700; color: var(--c-mute); }
.exam .ico { margin: 1.75rem 0 1rem; color: var(--vision); }
.exam__t { font-size: 1.125rem; font-weight: 800; }
.exam__d { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.65; color: var(--c-mute); }
@media (max-width: 960px) { .exams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .exam-photos { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 14rem; }
  .exam { padding: 1.25rem 1.125rem 1.5rem; }
  .exam .ico { margin: 1rem 0 0.75rem; }
}

.twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.tcard { --tp: clamp(1.75rem, 3vw, 2.75rem); padding: var(--tp); border: 1px solid var(--c-line); border-top: 3px solid var(--tone); }
.tcard__fig { margin: calc(var(--tp) * -1) calc(var(--tp) * -1) 1.75rem; aspect-ratio: 16 / 8; overflow: hidden; background: var(--c-panel); }
.tcard__fig img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7); }
.tcard__label { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--tone); }
.tcard__t { margin: 0.375rem 0 1.25rem; font-size: 1.625rem; font-weight: 800; }
@media (max-width: 760px) { .twocol { grid-template-columns: minmax(0, 1fr); } }

.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__fig { margin-top: 2.25rem; aspect-ratio: 4 / 5; max-width: 22rem; overflow: hidden; background: #fff; }
.faq__fig img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7); }
.faq { border-top: 1px solid var(--c-ink); }
.faq__item { border-bottom: 1px solid var(--c-line-strong); }
.faq__item summary { list-style: none; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; min-height: 4.5rem; padding-block: 1rem; font-size: 1.125rem; font-weight: 700; color: var(--c-ink); cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font-size: 1.5rem; font-weight: var(--w-thin); line-height: 1; color: var(--tone); }
.faq__item summary .ico { color: var(--c-mute); transition: transform 0.3s var(--ease); }
.faq__item[open] summary .ico { transform: rotate(45deg); color: var(--tone); }
.faq__a { padding: 0 2.5rem 1.75rem 3rem; line-height: 1.85; color: var(--c-body); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } .faq__a { padding: 0 0 1.5rem 3rem; } .faq__fig { aspect-ratio: 16 / 9; max-width: none; margin-top: 1.75rem; } .faq__fig img { object-position: 50% 30%; } }

/* 상담 띠 */
.cband { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem); overflow: hidden; isolation: isolate; background: var(--vision); color: #fff; }
.cband--disease { background: var(--disease); }
.cband__rings { position: absolute; z-index: -1; right: -8rem; top: 50%; width: 34rem; height: 34rem; transform: translateY(-50%); color: rgba(255, 255, 255, 0.2); }
.cband__title { font-size: var(--fs-h3); font-weight: 800; line-height: 1.35; color: #fff; letter-spacing: -0.03em; }
.cband__desc { margin-top: 0.625rem; max-width: 32em; color: rgba(255, 255, 255, 0.9); }
.cband__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; flex: none; }
.cband__btn { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3.25rem; padding: 0 1.375rem; border: 1px solid rgba(255, 255, 255, 0.72); color: #fff; font-weight: 700; transition: background-color 0.25s, color 0.25s; }
.cband__btn:hover { background: rgba(255, 255, 255, 0.14); }
.cband .cband__btn--solid { background: #fff; border-color: #fff; color: var(--c-ink); }
.cband .cband__btn--solid:hover { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
@media (max-width: 760px) { .cband { flex-direction: column; align-items: flex-start; } }

/* 반대편 센터로 */
.cross { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(24rem, 56vh, 34rem); overflow: hidden; isolation: isolate; background: #0b0d11; color: #fff; }
.cross--vision { --tint: #2352e0; }
.cross--disease { --tint: #13795b; --img-b: 0.7; }
.cross__media { position: absolute; inset: 0; z-index: -1; }
.cross__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(var(--img-b, 0.92)); }
.cross__media::after { content: ''; position: absolute; inset: 0; background: var(--tint); mix-blend-mode: multiply; }
.cross__media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(5, 7, 12, 0.3); }
.cross__in { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 4.5rem; }
.cross__list { font-family: var(--f-serif); font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); color: rgba(255, 255, 255, 0.9); letter-spacing: -0.02em; }
.cross__en { margin-top: 1rem; font-size: 1.125rem; font-weight: 500; }
.cross__title { margin: 0.125rem 0 2rem; font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem); line-height: 1.05; letter-spacing: -0.05em; color: #fff; }
.cross__title strong { font-weight: 900; }
.cross__title span { font-weight: var(--w-thin); }

/* ── 안과질환센터 ────────────────────────────────────────────────────────── */
.dtabs__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-line); }
.dtabs__tab { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; min-height: 6.75rem; padding: 1.125rem 1.25rem; text-align: left; color: var(--c-mute); transition: background-color 0.25s, color 0.25s; }
.dtabs__tab + .dtabs__tab { border-left: 1px solid var(--c-line); }
.dtabs__no { font-size: 0.875rem; font-weight: 700; }
.dtabs__tab b { margin-top: auto; font-size: 1.25rem; font-weight: 800; color: var(--c-ink); letter-spacing: -0.03em; }
.dtabs__tab small { font-size: 0.875rem; }
.dtabs__tab:hover { background: var(--disease-soft); }
.dtabs__tab[aria-selected='true'] { background: var(--disease); color: rgba(255, 255, 255, 0.9); }
.dtabs__tab[aria-selected='true'] b { color: #fff; }
.dpanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.dpanel__media { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; background: var(--c-panel); }
.dpanel__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.dpanel__sum { position: absolute; left: 0; bottom: 0; padding: 0.75rem 1.25rem; background: var(--disease); color: #fff; font-size: 0.9375rem; font-weight: 700; }
.dpanel__name { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.875rem); font-weight: 800; letter-spacing: -0.04em; }
.dpanel__name small { margin-left: 0.5rem; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--c-mute); }
.dpanel__about { margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.8; color: var(--c-body); }
.dpanel__block { margin-top: 1.75rem; }
.miniflow { display: grid; gap: 0.625rem; }
.miniflow li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--c-body); }
.miniflow span { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: 0.0625rem; border: 1px solid var(--disease); border-radius: 50%; color: var(--disease); font-size: 0.875rem; font-weight: 700; }
.dpanel__docs { margin-top: 1.75rem; }
.dchip { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; margin: 0 0.5rem 0.5rem 0; padding: 0.375rem 1.25rem 0.375rem 0.375rem; border: 1px solid var(--c-line-strong); border-radius: 999px; font-size: 0.9375rem; color: var(--c-body); transition: border-color 0.2s, background-color 0.2s; }
.dchip:hover { border-color: var(--disease); background: var(--disease-soft); }
.dchip__img { position: relative; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; overflow: hidden; background: #e4e8ef; isolation: isolate; }
.dchip__img img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--fx, 50%) var(--fy, 20%); transform: scale(calc(var(--fs, 1) * 1.35)); filter: grayscale(1) contrast(1.08) brightness(var(--fb, 1)); mix-blend-mode: multiply; }
.dchip b { color: var(--c-ink); }
@media (max-width: 860px) {
  .dtabs__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(8.5rem, 1fr); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .dtabs__list::-webkit-scrollbar { display: none; }
  .dtabs__tab { min-height: 5.75rem; }
  .dpanel { grid-template-columns: minmax(0, 1fr); }
}

.chk { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(0.75rem, 1.4vw, 1rem); }
.chk__fig { min-height: 22rem; }
.chk__fig figcaption, .first-foot__fig figcaption, .hgrid__fig figcaption, .floors__fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.25rem 1rem; background: linear-gradient(180deg, rgba(8, 10, 14, 0), rgba(8, 10, 14, 0.8)); color: #fff; font-size: 0.9375rem; font-weight: 600; }
.chkcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1rem); }
.chkcard { background: #fff; padding: 1.75rem 1.5rem 2rem; }
.chkcard .ico { color: var(--disease); }
.chkcard__t { margin-top: 1.5rem; font-size: 1.1875rem; font-weight: 800; }
.chkcard__d { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.65; color: var(--c-mute); }
@media (max-width: 860px) { .chk { grid-template-columns: minmax(0, 1fr); } .chk__fig { min-height: 15rem; } }
@media (max-width: 480px) { .chkcards { grid-template-columns: minmax(0, 1fr); } .chkcard { padding: 1.5rem 1.25rem; } .chkcard__t { margin-top: 1rem; } }

/* ── 의료진 지면 ─────────────────────────────────────────────────────────── */
.dfilter { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--c-panel); }
.seg { display: inline-flex; width: max-content; max-width: 100%; border: 1px solid var(--c-ink); background: #fff; }
.seg__btn { min-height: 3rem; padding: 0 1.5rem; font-size: 0.9375rem; font-weight: 700; color: var(--c-ink); transition: background-color 0.2s, color 0.2s; }
.seg__btn + .seg__btn { border-left: 1px solid var(--c-ink); }
.seg__btn:hover { background: var(--c-panel); }
.seg__btn[aria-pressed='true'] { background: var(--c-ink); color: #fff; }
.seg__btn--vision[aria-pressed='true'] { background: var(--vision); }
.seg__btn--disease[aria-pressed='true'] { background: var(--disease); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--c-line-strong); border-radius: 999px; background: #fff; font-size: 0.9375rem; font-weight: 600; color: var(--c-body); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.chip:hover { border-color: var(--c-ink); color: var(--c-ink); }
.chip[aria-pressed='true'] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.chip--vision[aria-pressed='true'] { background: var(--vision); border-color: var(--vision); }
.chip--disease[aria-pressed='true'] { background: var(--disease); border-color: var(--disease); }
.dfilter__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.dfilter__field { display: grid; gap: 0.375rem; }
.dfilter__field--q { flex: 1 1 16rem; }
.dfilter__label { font-size: 0.875rem; font-weight: 700; color: var(--c-ink); }
.dfilter__sel, .dfilter__input { min-height: 3rem; padding: 0 1rem; border: 1px solid var(--c-line-strong); border-radius: 0; background: #fff; color: var(--c-ink); font-size: 1rem; }
.dfilter__sel { min-width: 11rem; }
.dfilter__input { width: 100%; }
.dfilter__sel:focus, .dfilter__input:focus { outline: 2px solid var(--c-focus); outline-offset: 0; border-color: var(--c-focus); }
.dfilter__count { margin-left: auto; font-size: 0.9375rem; color: var(--c-body); }
.dfilter__count b { margin: 0 0.125rem; font-size: 1.5rem; font-weight: 800; color: var(--c-ink); }
.docgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem); }
.dempty { padding: 3.5rem 1rem; text-align: center; border: 1px dashed var(--c-line-strong); }
.dempty__t { font-weight: 700; color: var(--c-ink); }
.dempty__reset { margin-top: 1rem; min-height: 2.75rem; padding: 0 1.25rem; border: 1px solid var(--c-ink); font-weight: 700; }
.dempty__reset:hover { background: var(--c-ink); color: #fff; }
@media (max-width: 760px) { .docgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dfilter__count { margin-left: 0; width: 100%; } }
@media (max-width: 560px) {
  .seg { width: 100%; }
  .seg__btn { flex: 1 1 0; padding: 0 0.5rem; }
  .dfilter__sel { min-width: 0; width: 100%; }
  .dfilter__field { flex: 1 1 100%; }
  .docgrid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .docgrid .doc { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-line); }
  .docgrid .doc__media { align-self: start; }
  .docgrid .doc__body { padding-top: 0; }
  .docgrid .doc__name { font-size: 1.25rem; }
  .docgrid .doc--info { display: flex; padding-bottom: 0; border-bottom: 0; }
}

/* ── 진료 안내 지면 ──────────────────────────────────────────────────────── */
.hgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.hgrid__fig { min-height: 24rem; }
/* 층별 안내 */
.floors { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.floors .sec-head-x { margin-bottom: 0; }
.floors__fig { margin-top: 2.25rem; aspect-ratio: 1; max-width: 24rem; }
.floors__list { border-top: 1px solid var(--c-ink); }
.floor { display: grid; grid-template-columns: 5.5rem minmax(0, 10rem) minmax(0, 1fr); gap: 0.5rem 1.25rem; align-items: center; padding-block: 1.25rem; border-bottom: 1px solid var(--c-line-strong); }
.floor__no { font-size: 2rem; font-weight: var(--w-thin); line-height: 1; letter-spacing: -0.03em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.floor__t { font-size: 1.125rem; font-weight: 800; color: var(--c-ink); }
.floor--vision .floor__t { color: var(--vision); }
.floor--disease .floor__t { color: var(--disease); }
.floor__d { font-size: 0.9375rem; color: var(--c-body); }
@media (max-width: 860px) { .floors { grid-template-columns: minmax(0, 1fr); } .floors__fig { max-width: none; aspect-ratio: 16 / 9; } }
@media (max-width: 560px) { .floor { grid-template-columns: 4.25rem minmax(0, 1fr); } .floor__no { grid-row: 1 / 3; font-size: 1.625rem; } .floor__d { grid-column: 2; } }
.hcard { display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--c-line); }
.hcard__head { margin-bottom: 0.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-ink); }
.hcard__t { font-size: 1.5rem; font-weight: 800; }
.hcard__scope { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--c-mute); }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 0.875rem 0; border-bottom: 1px solid var(--c-line); text-align: left; font-size: 1rem; }
.hours th { width: 8.5rem; font-weight: 600; color: var(--c-mute); white-space: nowrap; }
.hours td { font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 800; color: var(--c-ink); }
.hours__note { display: block; margin-top: 0.125rem; font-size: 0.875rem; font-weight: 500; color: var(--c-mute); }
.hours tr.is-today th::after { content: '오늘'; display: inline-block; margin-left: 0.5rem; padding: 0.0625rem 0.5rem; border-radius: 999px; background: var(--c-ink); color: #fff; font-size: 0.875rem; font-weight: 700; line-height: 1.5; vertical-align: 0.0625rem; }
.hcard__note { margin-top: 1rem; font-size: 0.9375rem; color: var(--c-mute); }
.hcard__tel { display: flex; align-items: baseline; gap: 0.75rem; margin-top: auto; padding-top: 1.25rem; }
.hcard__tel span { font-size: 0.9375rem; color: var(--c-mute); }
.hcard__tel strong { font-size: 1.5rem; font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.callbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; margin-top: clamp(1rem, 2vw, 1.5rem); padding: 1.75rem clamp(1.5rem, 3vw, 2.5rem); background: var(--ink-900); color: rgba(255, 255, 255, 0.8); }
.callbar p:first-child { display: flex; align-items: baseline; gap: 0.875rem; }
.callbar p:first-child span { font-size: 0.9375rem; }
.callbar strong { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.callbar__desc { flex: 1 1 18rem; }
.callbar .cband__btn { border-color: #fff; background: #fff; color: var(--c-ink); }
.callbar .cband__btn:hover { background: transparent; color: #fff; }
.callbar :focus-visible { outline-color: #fff; }
@media (max-width: 760px) { .hgrid { grid-template-columns: minmax(0, 1fr); } .hgrid__fig { min-height: 14rem; } .hours th { width: 7.25rem; } }

.first-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.first-foot__fig { min-height: 18rem; }
.bring { display: grid; align-content: center; padding: 0.5rem clamp(1.5rem, 3vw, 2.5rem); background: #fff; }
.bring li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 0; border-bottom: 1px solid var(--c-line); color: var(--c-body); }
.bring li:last-child { border-bottom: 0; }
.bring .ico { margin-top: 0.125rem; color: var(--c-ink); }
.bring b { display: block; font-size: 1.0625rem; color: var(--c-ink); }
@media (max-width: 760px) { .first-foot { grid-template-columns: minmax(0, 1fr); } .first-foot__fig { min-height: 14rem; } }

.locs { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.loc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border: 1px solid var(--c-line); }
.loc__map { position: relative; min-height: 21rem; overflow: hidden; background: #eef0f4; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__bg { fill: #eef0f4; }
.map__river { fill: none; stroke: #d3dff6; stroke-width: 26; }
.map__block { fill: #e1e4ea; }
.map__road { fill: none; stroke: #fff; stroke-width: 9; }
.map__road--main { stroke-width: 16; }
.map__halo { fill: rgba(31, 79, 216, 0.12); }
.map__halo--2 { fill: rgba(31, 79, 216, 0.22); }
.map__pin { fill: var(--vision); }
.map__pin-dot { fill: #fff; }
.loc__pinlabel { position: absolute; left: 1rem; top: 1rem; padding: 0.375rem 0.75rem; background: var(--c-ink); color: #fff; font-size: 0.875rem; font-weight: 700; }
.loc__body { padding: clamp(1.75rem, 3vw, 2.5rem); }
.loc__t { font-size: 1.5rem; font-weight: 800; }
.loc__addr { margin-top: 0.5rem; color: var(--c-body); }
.loc__addr span { color: var(--c-mute); }
.loc__ways { display: grid; gap: 0.875rem; margin: 1.5rem 0; padding-top: 1.5rem; border-top: 1px solid var(--c-line); }
.loc__ways li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; color: var(--c-body); }
.loc__ways b { display: block; color: var(--c-ink); }
@media (max-width: 860px) { .loc { grid-template-columns: minmax(0, 1fr); } .loc__map { min-height: 14rem; } }

/* ── 병원 소식 지면 ──────────────────────────────────────────────────────── */
.nfilter { margin-bottom: 2rem; }
.nboard { border-top: 1px solid var(--c-ink); }
.nitem { border-bottom: 1px solid var(--c-line); }
.nitem summary { list-style: none; display: grid; grid-template-columns: 7.5rem 6.5rem minmax(0, 1fr) auto 1.5rem; gap: 1.5rem; align-items: center; padding-block: 1.25rem; cursor: pointer; }
.nitem summary::-webkit-details-marker { display: none; }
.nitem__thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-panel); }
.nitem__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.nitem__cat { justify-self: start; padding: 0.25rem 0.625rem; border: 1px solid currentColor; font-size: 0.875rem; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.nitem__cat--notice { color: var(--disease); }
.nitem__cat--story { color: var(--vision); }
.nitem__t { font-size: 1.1875rem; font-weight: 700; color: var(--c-ink); }
.nitem summary:hover .nitem__t { text-decoration: underline; text-underline-offset: 0.25em; }
.nitem__meta { display: flex; gap: 0.75rem; font-size: 0.9375rem; color: var(--c-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nitem summary .ico { color: var(--c-mute); transition: transform 0.3s var(--ease); }
.nitem[open] summary .ico { transform: rotate(180deg); }
.nitem__body { max-width: 52rem; padding: 0 0 2rem calc(7.5rem + 6.5rem + 3rem); line-height: 1.85; color: var(--c-body); }
.nitem__body p + p { margin-top: 1rem; }
@media (max-width: 860px) {
  .nitem summary { grid-template-columns: 5.5rem minmax(0, 1fr) 1.5rem; grid-template-areas: 'thumb cat ico' 'thumb t ico' 'thumb meta ico'; gap: 0.25rem 1rem; }
  .nitem__thumb { grid-area: thumb; align-self: start; }
  .nitem__cat { grid-area: cat; }
  .nitem__t { grid-area: t; font-size: 1.0625rem; line-height: 1.45; }
  .nitem__meta { grid-area: meta; font-size: 0.875rem; }
  .nitem summary .ico { grid-area: ico; }
  .nitem__body { padding-left: 0; }
}

/* ── 상담 신청 지면 ──────────────────────────────────────────────────────── */
.consult { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.cform { gap: 1.75rem; }
.cform__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.cform__set legend { margin-bottom: 0.75rem; padding: 0; }
.rchips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rchip { position: relative; display: inline-flex; cursor: pointer; }
.rchip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rchip span { display: inline-flex; align-items: center; min-height: 2.875rem; padding: 0 1.125rem; border: 1px solid var(--c-line-strong); border-radius: 999px; background: #fff; font-size: 0.9375rem; font-weight: 600; color: var(--c-body); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.rchip:hover span { border-color: var(--c-ink); color: var(--c-ink); }
.rchip input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.rchip--vision input:checked + span { background: var(--vision); border-color: var(--vision); }
.rchip--disease input:checked + span { background: var(--disease); border-color: var(--disease); }
.rchip input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.rchip input[aria-invalid='true'] + span { border-color: #c8321f; box-shadow: inset 0 0 0 1px #c8321f; }
.cform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.input, .select, .textarea { font-size: 1rem; }
.agree { display: grid; gap: 1rem; padding: 1.25rem; background: var(--c-panel); }
.agree__block { display: grid; gap: 0.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--c-line-strong); }
.agree__info { display: grid; gap: 0.25rem; margin: 0; padding: 0.875rem 1rem; background: #fff; font-size: 0.875rem; line-height: 1.6; color: var(--c-body); }
.agree__info div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.5rem; }
.agree__info dt { font-weight: 700; color: var(--c-ink); }
.agree__info dd { margin: 0; }
.agree__note { font-size: 0.875rem; line-height: 1.65; color: var(--c-body); }
.cform__submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.875rem; padding: 0 1.5rem; background: var(--c-ink); color: #fff; font-size: 1.0625rem; font-weight: 800; transition: background-color 0.25s; }
.cform__submit:hover { background: var(--vision); }
.consult__aside { position: sticky; top: calc(var(--hd-h) + 1.5rem); display: grid; gap: 1rem; }
.caside__fig { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-panel); }
.caside__fig img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); }
.caside { padding: 1.75rem; border: 1px solid var(--c-line); }
.caside__label { margin-bottom: 1rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--c-mute); }
.caside__steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding: 0.875rem 0; border-top: 1px solid var(--c-line); font-size: 0.9375rem; color: var(--c-body); }
.caside__steps span { grid-row: 1 / 3; font-size: 1.375rem; font-weight: var(--w-thin); line-height: 1.2; color: var(--c-ink); }
.caside__steps b { color: var(--c-ink); }
.caside--dark { background: var(--ink-900); border-color: var(--ink-900); color: rgba(255, 255, 255, 0.8); }
.caside--dark .caside__label { color: rgba(255, 255, 255, 0.7); }
.caside__tel { font-size: 2.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.caside__hours { margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.75; }
.caside__btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; margin-top: 1.25rem; padding: 0 1.25rem; background: #fff; color: var(--c-ink); font-weight: 700; }
.caside__note { padding-left: 1rem; border-left: 2px solid var(--disease); font-size: 0.9375rem; color: var(--c-body); }
@media (max-width: 960px) { .consult { grid-template-columns: minmax(0, 1fr); } .consult__aside { position: static; } }
@media (max-width: 560px) { .cform__row { grid-template-columns: minmax(0, 1fr); } }

/* ── 전체 메뉴 ───────────────────────────────────────────────────────────── */
.fm__grid { display: grid; grid-template-columns: 1.25fr 1.25fr 1fr 1fr 1fr; gap: 2.5rem clamp(1.5rem, 3vw, 3rem); width: 100%; }
.fm__chead { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid var(--vision-on-dark); }
.fm__center--disease .fm__chead { border-bottom-color: var(--disease-on-dark); }
.fm__cen { font-size: 0.9375rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.fm__cko { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: var(--w-thin); letter-spacing: -0.04em; color: #fff; }
.fm__cko b { font-weight: 900; }
.fm__chead:hover .fm__cko { color: rgba(255, 255, 255, 0.84); }
@media (max-width: 1080px) { .fm__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .fm__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fm__chead { padding-block: 1.125rem; margin: 0; border-bottom-width: 1px; }
  .fm__cko { font-size: 1.625rem; }
}

/* ── 진료 안내 탭 · 패널 ────────────────────────────────────────────────── */
.care-tab { position: fixed; right: 0; top: 50%; z-index: 110; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 3.75rem; padding: 1rem 0.5rem 1.125rem; transform: translateY(-50%); background: var(--c-ink); color: #fff; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; text-align: center; box-shadow: -8px 12px 30px -12px rgba(0, 0, 0, 0.45); border-left: 3px solid; border-image: linear-gradient(180deg, var(--vision) 0 50%, var(--disease) 50% 100%) 1; transition: background-color 0.25s, padding 0.25s var(--ease); }
.care-tab span { width: 2em; }
.care-tab:hover { background: #000; padding-right: 0.875rem; }
html.care-open .care-tab { visibility: hidden; }
.care { position: fixed; inset: 0; z-index: 250; }
.care__scrim { position: absolute; inset: 0; background: rgba(6, 8, 12, 0.52); opacity: 0; transition: opacity 0.35s var(--ease); }
.care__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 1rem; width: min(28rem, 100%); padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem) 2.5rem; overflow-y: auto; overscroll-behavior: contain; background: #fff; box-shadow: -24px 0 60px -24px rgba(0, 0, 0, 0.5); transform: translateX(100%); transition: transform 0.45s var(--ease); }
.care.is-open .care__scrim { opacity: 1; }
.care.is-open .care__panel { transform: none; }
html.care-open { overflow: hidden; }
.care__head { position: relative; padding-right: 3rem; }
.care__eyebrow { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; color: var(--c-mute); }
.care__title { margin-top: 0.25rem; font-size: 2rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.04em; }
.care__date { display: block; font-weight: var(--w-thin); }
.care__close { position: absolute; right: -0.5rem; top: -0.25rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--c-ink); transition: transform 0.3s var(--ease); }
.care__close:hover { transform: rotate(90deg); }
.care__status { padding: 1rem 1.125rem; border-left: 3px solid var(--vision); background: var(--c-panel); font-weight: 700; color: var(--c-ink); }
.care__status.is-closed { border-left-color: #737985; }
.care__status.is-break { border-left-color: var(--disease); }
.care__sub { margin-top: 0.25rem; font-size: 0.9375rem; font-weight: 800; color: var(--c-ink); }
.care .hours th { width: 7.5rem; }
.care .hours th, .care .hours td { padding: 0.75rem 0; font-size: 0.9375rem; }
.care__note { font-size: 0.875rem; color: var(--c-mute); }
.care__call { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; background: var(--ink-900); color: #fff; }
.care__call span { display: block; font-size: 0.875rem; color: rgba(255, 255, 255, 0.72); }
.care__call strong { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.care__callbtn { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0 1rem; background: #fff; color: var(--c-ink); font-size: 0.9375rem; font-weight: 700; white-space: nowrap; }
.care__branches { display: grid; gap: 0.625rem; font-size: 0.9375rem; color: var(--c-body); }
.care__branches li { display: grid; gap: 0.125rem; }
.care__branches b { color: var(--c-ink); }
.care__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: auto; }
.care__links a { display: flex; align-items: center; gap: 0.5rem; min-height: 3.25rem; padding: 0 1rem; border: 1px solid var(--c-line-strong); font-size: 0.9375rem; font-weight: 700; color: var(--c-ink); transition: border-color 0.2s, background-color 0.2s; }
.care__links a:hover { border-color: var(--c-ink); background: var(--c-panel); }
@media (max-width: 860px) { .care-tab { display: none; } }

/* ── 모바일 하단 빠른 메뉴 ──────────────────────────────────────────────── */
.qbar { display: none; }
@media (max-width: 860px) {
  :root { --qbar-h: 4rem; }
  .qbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: env(safe-area-inset-bottom); background: rgba(13, 15, 19, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .qbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: var(--qbar-h); color: rgba(255, 255, 255, 0.9); font-size: 0.875rem; font-weight: 600; }
  .qbar__item:first-child { background: var(--vision); color: #fff; }
  html.fm-open .qbar, html.care-open .qbar { display: none; }
  /* 샘플 표식은 고정 바 위로 올린다(키트 변수) · 키보드로 옮긴 포커스가 바 뒤에 숨지 않게 아래 여백을 둔다 */
  :root { --badge-bottom: calc(var(--qbar-h) + 0.75rem + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(var(--qbar-h) + 1.5rem + env(safe-area-inset-bottom)); }
  .c-disease .qbar__item:first-child { background: var(--disease); }
  .toast { bottom: calc(var(--qbar-h) + 4.5rem); }
  .ft__bottom { padding-bottom: calc(var(--qbar-h) + 5rem); }
}

/* ── 푸터 ─────────────────────────────────────────────────────────────────── */
@media (min-width: 861px) { .bn .ft .wrap--wide { padding-right: max(var(--gutter), calc(4.75rem - max(0px, (100vw - var(--container-wide) - 2 * var(--gutter)) / 2))); } }
.bn .ft { background: #0c0e12; color: rgba(255, 255, 255, 0.66); font-size: 0.9375rem; }
.ft__top { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.bn .ft .logo { color: #fff; font-size: inherit; }
.ft__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.ft__links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: rgba(255, 255, 255, 0.74); transition: color 0.2s; }
.ft__links a:hover { color: #fff; }
.ft__links b { color: #fff; }
.ft__sns { display: flex; gap: 0.5rem; margin-left: auto; }
.ft__sns a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: rgba(255, 255, 255, 0.82); transition: background-color 0.2s, color 0.2s; }
.ft__sns a:hover { background: #fff; color: var(--c-ink); }
.ft__branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding-block: 2rem; }
.ft__bname { margin-bottom: 0.5rem; font-weight: 700; color: #fff; }
.ft__bname span { font-weight: 400; color: rgba(255, 255, 255, 0.6); }
.ft__bname span[lang='en'] { margin-left: 0.25rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.72); }
.bn .ft__info { margin-top: 0; }
.bn .ft__demo { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 760px) { .ft__branches { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .ft__sns { margin-left: 0; } }

/* 캡처(?shot) — 움직임 없이 첫 모습 */
html.shot .duo__media img, html.shot .chero__media img { animation: none; transform: none; transition: none; }