/* 고마워한의원 홈페이지 — 디자인 3판 (2026-10-23 원장님 「촌스럽지 않고 허접·아마추어 느낌 없게 · 잘 만든 한의원 벤치마킹」)
   본보기 = 목동자생(꽉 찬 사진 첫 화면 + 사진 위 투명 머리 + 아래 바로가기 띠) · 등촌따숨(넉넉한 여백 · 짧은 칸 · 짙은 띠로 강조) · 금맥(카드 정돈).
   우리 것: 로고의 벽돌빛 낙관은 «포인트로만» · 옛 홈페이지의 짙은 남색 종이 = 강조 띠 · 따뜻한 흰 바탕 · 실제 한의원 사진.
   글꼴 = Noto Sans KR 한 벌(지금 홈페이지 그대로) — 계층은 굵기 800~900 · 좁은 자간 · 큰 크기로. 🚫명조 금지(원장님 2026-07-30).
   움직임 = 스크롤하면 칸이 살짝 떠오른다(app.js · 화면 밖 칸만 · «움직임 줄이기» 설정이면 안 함) · 사진은 올리면 천천히 커진다.
   레이아웃: 쪽마다 «사진 머리 → 넓은 띠» · 띠 머리는 작은 붉은 머리글 + 큰 제목 + 한 줄. */
:root {
  --paper: #fbf9f7; --paper2: #f3eee9; --paper3: #e9e1da; --card: #ffffff;
  --ink: #1a1c21; --ink2: #5c5652; --ink3: #736c67; --line: #e7dfd8;   /* ink3 은 흰 바탕 4.5:1 넘게(10/26 대비 점검 — #8d8580 은 3.6:1) */
  --brick: #761236; --brick-ink: #761236; --on-brick: #ffffff;   /* 강조색 = 짙은 와인 버건디(원장님 10/29 «촌스러운 주황 쓰지 마 · 메인 색은 버건디») — 이름은 옛 «brick» 그대로 */
  --deep: #18202c; --deep2: #222c3b; --on-deep: #f1f2f5; --deep-mute: #a2abba;
  --ok: #2c8a5a; --rest: #9a928e; --lunch: #d99a2b;
  --sans: "Noto Sans KR", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ly-epi: #f6e6ec; --ly-derm: #eccdd8; --ly-fat: #f7ebc4; --ly-smas: #e7c4d1;   /* 피부층 그림 — 살구빛을 와인 옅은 빛으로(10/29) · 지방층만 노랑 */
  /* 의료진 사진 뒤 와인빛 번짐(10/29 살구빛→와인) — 사진의 동그라미를 지우고 여기서 넓게 번지게(원장님 10/27 「경계가 딱 나뉘지 않게 · 더 넓게 · 색 살짝 더」) */
  --doc-glow: radial-gradient(circle at 50% 64%, rgba(118, 18, 54, .26) 0%, rgba(118, 18, 54, .18) 28%, rgba(118, 18, 54, .09) 52%, rgba(118, 18, 54, .03) 70%, rgba(118, 18, 54, 0) 82%);
  --w: 1200px; --r: 20px; --r-s: 12px; --top-h: 78px;
  --shadow: 0 1px 2px rgba(26, 28, 33, .04), 0 12px 32px -12px rgba(26, 28, 33, .14);
  --shadow-lg: 0 30px 60px -24px rgba(24, 32, 44, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #121419; --paper2: #191c22; --paper3: #22262e; --card: #1b1e24; --bm-body: #4a505c;
  --ink: #eeeae6; --ink2: #b6afaa; --ink3: #8a837e; --line: #2c3038;
  --brick: #d16189; --brick-ink: #dd88a7; --on-brick: #1a0a10;
  --ly-epi: #3a2a31; --ly-derm: #452a35; --ly-fat: #3d3726; --ly-smas: #4c2534;
  --deep: #0c1119; --deep2: #151c27; --on-deep: #eef0f4; --deep-mute: #8e99ab;
  --ok: #4cc08a; --rest: #8a8480; --lunch: #e8b04a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .5); color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #121419; --paper2: #191c22; --paper3: #22262e; --card: #1b1e24; --bm-body: #4a505c;
  --ink: #eeeae6; --ink2: #b6afaa; --ink3: #8a837e; --line: #2c3038;
  --brick: #d16189; --brick-ink: #dd88a7; --on-brick: #1a0a10;
  --ly-epi: #3a2a31; --ly-derm: #452a35; --ly-fat: #3d3726; --ly-smas: #4c2534;
  --deep: #0c1119; --deep2: #151c27; --on-deep: #eef0f4; --deep-mute: #8e99ab;
  --ok: #4cc08a; --rest: #8a8480; --lunch: #e8b04a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .5); color-scheme: dark }

* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 20px) }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.8 var(--sans); word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
a { color: inherit }
img { max-width: 100%; height: auto; display: block }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.28; margin: 0; letter-spacing: -.035em }
p, li, dd, td, figcaption { text-wrap: pretty }
.sym span, .sym b, .tc b, .cd b, .feat-t b, .mi b, .chips li, .pv b, .fd b { text-wrap: balance }   /* 짧은 칸 글은 두 줄이 되면 고르게(«목이 뻣뻣하고 잘 | 안 돌아간다» 10/31) */   /* 마지막 줄에 낱말 하나만 남지 않게(문장 사이 줄바꿈은 build.keep_phrases) */
p { margin: 0 }
.wrap { max-width: var(--w); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)) }
.muted { color: var(--ink2); font-size: .92rem }
.sel { user-select: all; font-variant-numeric: tabular-nums; font-weight: 700 }
:focus-visible { outline: 3px solid var(--brick); outline-offset: 3px; border-radius: 6px }
.ic { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.logo-dark, .logo-white { display: none }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none } :root:not([data-theme="light"]) .logo-dark { display: block } }
:root[data-theme="dark"] .logo-light { display: none }
:root[data-theme="dark"] .logo-dark { display: block }

/* ── 시안 띠 ── */
.draftbar { background: #f2c94c; color: #2a2208; text-align: center; font-size: .78rem; font-weight: 500; padding: 5px 16px; position: relative; z-index: 31 }

/* ── 머리 — 사진 위에선 투명·흰 글자, 스크롤하면(.solid) 흰 바탕 ── */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; height: var(--top-h); transition: background .35s var(--ease), box-shadow .35s var(--ease), color .35s }
.top-in { height: 100%; display: flex; align-items: center; gap: 24px; max-width: 1400px }   /* 머리만 넓게 — 메뉴 아홉이 로고를 덮었다 */
.logo { flex: 0 0 auto; display: block }
.logo img { height: 38px; width: auto }
.gnb { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0 }
.gnb-in { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0 }
.gnb-m { display: none }
.nav-i { position: relative }
.nav-i > a { text-decoration: none; font-weight: 700; font-size: .97rem; padding: 10px 13px; display: block; letter-spacing: -.02em; border-radius: 10px; white-space: nowrap; transition: color .2s, background .2s }
.nav-i > a:hover { background: color-mix(in srgb, currentColor 8%, transparent) }
.nav-i.on > a { color: var(--brick) }
.sub { position: absolute; left: 0; top: calc(100% + 10px); min-width: 14rem; list-style: none; margin: 0; padding: 10px;
  background: var(--card); color: var(--ink); border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  max-height: calc(100vh - var(--top-h) - 40px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease), visibility .2s }
.nav-i:nth-last-child(-n+3) .sub { left: auto; right: 0 }   /* 🚨가운데 맞춤이면 오른쪽 끝 메뉴가 화면 밖으로 넘쳤다(10/23) */
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px }
.sub a { display: block; padding: 9px 14px; text-decoration: none; border-radius: 10px; font-size: .93rem; white-space: nowrap }
.sub a:hover { background: var(--paper2); color: var(--brick-ink) }
.sub-main { border-bottom: 1px solid var(--line); margin-bottom: 6px; padding-bottom: 6px }
.sub-main a { font-weight: 800; color: var(--brick-ink) }
.nav-i:hover .sub, .nav-i:focus-within .sub { opacity: 1; visibility: visible; transform: none }
.top-act { flex: 0 0 auto; display: flex; align-items: center; gap: 14px }
.top-act .top-live { display: none }   /* 진료 상태는 첫 화면 바로가기 띠와 쪽마다 진료시간 칸이 맡는다 — 머리에 두면 메뉴와 부딪힌다 */
.nav-btn { display: none }
/* 투명(사진 위) */
.site.over .top:not(.solid) { color: #fff; background: linear-gradient(rgba(10, 14, 20, .42), rgba(10, 14, 20, 0)) }
.site.over .top:not(.solid) .logo-light, .site.over .top:not(.solid) .logo-dark { display: none }
.site.over .top:not(.solid) .logo-white { display: block }
.site.over .top:not(.solid) .nav-i.on > a { color: #fff; box-shadow: inset 0 -2px 0 #fff; border-radius: 0 }
.site.over .top:not(.solid) .btn-sm { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); backdrop-filter: blur(8px) }
/* 흰 바탕 */
.top.solid { background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(0, 0, 0, .25); color: var(--ink) }
.site.over main { margin-top: calc(-1 * var(--top-h)) }

/* ── 단추 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brick); color: var(--on-brick); border: 0; border-radius: 999px;
  padding: 13px 24px; font: 700 .97rem var(--sans); text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s }
.btn:hover { background: var(--brick-ink); transform: translateY(-1px) }
.btn .ic { width: 18px; height: 18px }
.btn-sm { padding: 9px 16px; font-size: .9rem }
.btn-lg { padding: 16px 30px; font-size: 1.02rem }
.btn-glass { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); backdrop-filter: blur(10px) }
.btn-glass:hover { background: rgba(255, 255, 255, .24) }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line) }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--brick); color: var(--brick-ink) }
.btn.kakao, .btn-kakao { background: #fee500; color: #191600 }
.btn.kakao:hover, .btn-kakao:hover { background: #f5dc00 }
.btn-naver { background: #03c75a; color: #fff }   /* 네이버 예약 — 네이버 초록(카톡 노랑과 같은 «그 회사 색») */
.btn-naver:hover { background: #02b351 }
.btn-naver .ic { width: 15px; height: 15px; margin-inline: 1px }
/* «준비 중» 알림 — 아직 안 이어진 단추(네이버 예약)를 누르면 화면 가운데 아래에 잠깐 뜬다 */
.soon { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translate(-50%, 8px); opacity: 0;
  background: var(--deep); color: #fff; font-weight: 700; padding: 13px 22px; border-radius: 999px; box-shadow: var(--shadow-lg); pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease); white-space: nowrap }
.soon.in { opacity: 1; transform: translate(-50%, 0) }
.row { display: flex; flex-wrap: wrap; gap: 10px }
.more { color: var(--brick-ink); font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center }
.more::after { content: "›"; transition: transform .2s }   /* «→» 는 단계 진행처럼 보여 꺾쇠로(원장님 11/1) */
.more:hover::after { transform: translateX(3px) }
.live { display: inline-flex; align-items: center; gap: 8px }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rest); flex: 0 0 auto }
.live[data-state="open"]::before { background: #3fd08a; box-shadow: 0 0 0 4px rgba(63, 208, 138, .25); animation: pulse 2.4s ease-in-out infinite }
.live[data-state="lunch"]::before { background: var(--lunch) }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(63, 208, 138, 0) } }

/* ── 첫 화면 · 쪽 머리 (사진) ── */
.hero { position: relative; color: #fff; overflow: hidden; isolation: isolate; background: var(--deep) }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: -2; transform: scale(1.04); animation: heroIn 1.6s var(--ease) both }
.hero-bg-r { object-position: 82% 30% }
.hero-vid { animation: none; transform: none }   /* 사진용 «커지며 나타나기»(투명 40%→)는 영상엔 빼다 — 들어올 때 흐릿하게 준비 중처럼 보였다(11/1) */   /* 넓힌 판 — 좁은 화면에서도 오른쪽 사람이 남게(content_v2.HERO_WIDE) */
@keyframes heroIn { from { transform: scale(1.12); opacity: .4 } }
.hero-shade { position: absolute; inset: 0; z-index: -1; opacity: var(--sd, 1);   /* 쪽마다 옅게 — 배율은 content/hero_shade.json(qa_shade.py 가 잼) */
  background: linear-gradient(100deg, rgba(14, 19, 28, .86) 0%, rgba(14, 19, 28, .6) 45%, rgba(14, 19, 28, .15) 100%),
              linear-gradient(0deg, rgba(14, 19, 28, .55), rgba(14, 19, 28, 0) 40%) }
.hero-in, .hero-foot { width: 100% }   /* 🚨격자 안에서 margin:auto 인 칸은 내용 폭으로 줄어든다 — 글이 가운데로 밀려 있었다 */
.hero-in { position: relative; display: grid; gap: 20px; justify-items: start; text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 18px rgba(0, 0, 0, .3) }   /* 밝은 사진 위 글자 받침 */
.hero h1 { display: grid; gap: 14px; font-weight: 900 }
.hero-ey { font-size: 1rem; font-weight: 700; color: #f2c4d4; letter-spacing: .02em }
.hero .lead { color: rgba(255, 255, 255, .86); font-size: 1.12rem; max-width: 36rem; line-height: 1.75 }
/* 첫 화면 요일별 진료시간 — 요일 칸 폭을 맞춰 시간이 한 줄로 서게 · 시간·«점심시간 없이»는 덩어리째로만 줄을 바꾼다 */
.lead-hours { list-style: none; margin: -6px 0 0; padding: 0; display: grid; gap: 4px; color: rgba(255, 255, 255, .9); font-size: 1.05rem }
.lead-hours li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; align-items: baseline }
.lead-hours b { font-weight: 800; color: #fff; white-space: nowrap }
.lead-hours .lh-t > span { display: inline-block; white-space: nowrap }
.lead-hours .lh-note { margin-left: .6em; color: rgba(255, 255, 255, .72); font-size: .92em }
.hero-home { min-height: clamp(620px, 92vh, 880px); display: grid; grid-template-rows: 1fr auto }
.hero-home .hero-in { align-self: end; padding-top: calc(var(--top-h) + 60px); padding-bottom: 48px }
.hero-big { font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: 1.1; letter-spacing: -.05em }
.hero-in > * { animation: rise .9s var(--ease) both }
.hero-in > *:nth-child(2) { animation-delay: .12s }
.hero-in > *:nth-child(3) { animation-delay: .24s }
.hero-in > *:nth-child(4) { animation-delay: .36s }
@keyframes rise { from { opacity: 0; transform: translateY(22px) } }
.hero-foot { padding-bottom: 32px }
/* 🎬대문 영상 끝의 흰 바탕(상황 줄·표어·로고) 동안 — 그늘을 걷고 글자를 검게(app.js 가 .hero-light 를 단다 · 원장님 11/1)
   영상이 흰 바탕인 건 어두운 테마에서도 같으니 색은 글자값으로 못박는다 */
.hero-home .hero-shade, .hero-home .hero-in, .hero-home .hero-in *, .hero-home .hbar, .hero-home .hb, .hero-home .hb span, .hero-home .chips li { transition: color .6s, background-color .6s, opacity .6s, box-shadow .6s, text-shadow .6s }
.hero-home.hero-light .hero-shade { opacity: 0 }
.hero-home.hero-light, .hero-home.hero-light .hb { color: #1a1c21 }
.hero-home.hero-light .hero-in { text-shadow: none; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s }   /* 글자 구간엔 대문 제목·시간·칩을 잠시 감춘다 — 영상 속 글자와 포개졌다(원장님 11/1 «그거도 괜찮아 · 제목은 이미 보셨으니») */
.hero-home.hero-light { background: #f9f9f9 }
.hero-home.hero-light .hero-vid { top: calc(var(--top-h) + 8px); bottom: var(--foot-h, 140px); height: auto; object-fit: contain; transform: none; animation: none }   /* 꽉 채우면 영상 속 글자가 아래 네 칸과 겹치고 잘렸다 — 흰 바탕일 때만 바꾸므로 바뀌는 순간이 안 보인다 */
@media (max-width: 640px) {   /* 폰(세로) — 통째로 줄이면 글자가 너무 작다 → 화면 폭의 1.25배 높이로 두고 가운데를 보인다(글자 덩어리는 영상 가로 0.17~0.83 · 원장님 11/1 «폰 좁은 화면도 텍스트 보이게») */
  .hero-home.hero-light .hero-vid { height: 80vw; bottom: auto; top: calc((var(--top-h) + 100% - var(--foot-h, 220px) - 80vw) / 2); object-fit: cover; object-position: 50% 50% }
}
.hero-home.hero-light .hero-ey { color: #761236 }
.hero-home.hero-light .lead, .hero-home.hero-light .lead-hours, .hero-home.hero-light .lead-hours b { color: #1a1c21 }
.hero-home.hero-light .lead-hours .lh-note, .hero-home.hero-light .hb span { color: #5c5652 }
.hero-home.hero-light .chips li { background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(26, 28, 33, .14) }
.hero-home.hero-light .chips .ic { color: #761236 }
.hero-home.hero-light .hbar { background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(26, 28, 33, .12) }
.hero-home.hero-light .hb + .hb { box-shadow: inset 1px 0 0 rgba(26, 28, 33, .1) }
.hbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 18px; overflow: hidden;
  background: rgba(14, 19, 28, .38); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2) }   /* 밝은 사진 위에서도 글이 읽히게(10/27 대비 실측) */
.hb { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; text-decoration: none; color: #fff; min-width: 0; transition: background .2s }
.hb + .hb { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .16) }
a.hb:hover { background: rgba(255, 255, 255, .1) }
/* 카톡·네이버 아이콘만 제 색 동그라미 — 칸 통째로 칠하면 광고 단추처럼 튀어 톤이 깨졌다(원장님 10/31 «아이콘만 노랑·초록» · «모바일도 똑같이») */
.hbar .hb-kakao > .ic, .hbar .hb-naver > .ic { box-sizing: content-box; width: 20px; height: 20px; padding: 9px; border-radius: 50%; opacity: 1; flex: 0 0 auto }
.hbar .hb-kakao > .ic { background: #fee500; color: #191600 }
.hbar .hb-naver > .ic { background: #03c75a; color: #fff; width: 16px; height: 16px; padding: 11px }
@media (max-width: 640px) {
  .hbar .hb-kakao > .ic { width: 17px; height: 17px; padding: 7px }
  .hbar .hb-naver > .ic { width: 14px; height: 14px; padding: 8.5px }
}
.hb > .ic { width: 26px; height: 26px; stroke-width: 1.6; opacity: .9 }
.hb div { display: grid; min-width: 0 }
.hb b { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em }
.hb span { font-size: .84rem; color: rgba(255, 255, 255, .72); line-height: 1.45 }   /* 말줄임 대신 줄바꿈 — «…내일 09» 처럼 잘렸다(10/24) */
.hb .live::before { width: 7px; height: 7px }

.hero-sub { min-height: clamp(380px, 52vh, 500px); display: grid; align-items: end }
.hero-sub .hero-in { padding-top: calc(var(--top-h) + 56px); padding-bottom: 56px; gap: 14px }
/* 하위 쪽 머리 사진 — 덮개를 글 쪽(왼쪽)에만 깔고 오른쪽은 사진을 살린다. 위쪽 띠는 메뉴 글자를 읽히게 */
/* 10/27 원장님 «미백약침 소개 글 오른쪽이 잘 안 보여» → 모든 쪽 대비 실측(homepage/qa_contrast.py) 뒤 글 자리만큼 진하게
   → 같은 날 「그늘이 너무 짙다 · 살짝 덜」로 폰·태블릿·PC 모두 한 단계 옅게(대비 기준은 그대로 0곳). 더 옅게 하려면 qa_contrast 를 다시 돌려 볼 것 */
.hero-sub .hero-shade { background: linear-gradient(100deg, rgba(14, 19, 28, .8) 0%, rgba(14, 19, 28, .64) 40%, rgba(14, 19, 28, .24) 66%, rgba(14, 19, 28, .05) 84%),
  linear-gradient(180deg, rgba(14, 19, 28, .45) 0%, rgba(14, 19, 28, 0) 28%), linear-gradient(0deg, rgba(14, 19, 28, .35), rgba(14, 19, 28, 0) 35%) }
.hero-sub h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -.045em }
.hero-plain { background: radial-gradient(120% 140% at 85% 0%, var(--deep2) 0%, var(--deep) 60%) }
.hero-mark { position: absolute; right: -40px; bottom: -70px; z-index: -1; opacity: .09; transform: rotate(-8deg) }
.hero-mark img { width: 420px; filter: brightness(0) invert(1) }
.bc { font-size: .84rem; color: rgba(255, 255, 255, .7); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px }
.bc a { text-decoration: none }
.bc a:hover { color: #fff }
.bc i { font-style: normal; opacity: .45 }
.chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; background: rgba(14, 19, 28, .56);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); backdrop-filter: blur(8px); font-weight: 700; font-size: .9rem }
.chips .ic { width: 15px; height: 15px; stroke-width: 2.6; color: #eeb0c6 }
.hero-cta { margin-top: 6px }
.hero .btn:not(.btn-glass):not(.btn-kakao):not(.btn-naver) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 26px -10px rgba(0, 0, 0, .5) }   /* 어두운 사진 위 와인 단추 — 가는 밝은 테로 사진과 갈라 보이게(10/29 와인 바꿈) */
.byline { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .84rem; color: rgba(255, 255, 255, .62); margin-top: 6px }
.byline a { color: #fff; font-weight: 700; text-decoration: none }

/* ── 한눈에 넷(첫 화면 아래) ── */
.stats-band { background: var(--card); border-bottom: 1px solid var(--line) }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.stats div { display: grid; gap: 2px; padding: 34px 26px; text-align: center }
.stats div + div { box-shadow: inset 1px 0 0 var(--line) }
.stats b { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 900; letter-spacing: -.04em }
.stats span { color: var(--ink2); font-size: .9rem }

/* ── 띠 ── */
.band { padding-block: clamp(72px, 9vw, 120px) }
.band.alt { background: var(--paper2) }
/* 같은 바탕 띠가 이어지면 사이 여백을 한 번만 */
.band:not(.alt):not(.consult-band) + .band:not(.alt):not(.consult-band), .band.alt + .band.alt { padding-top: 0 }
.band-in { display: grid; gap: 40px }
.band-h { display: grid; gap: 12px; max-width: 46rem }
.ey { color: var(--brick); font-weight: 800; font-size: .92rem; letter-spacing: .02em }
.band-h h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 900; letter-spacing: -.045em }
.band-sub { color: var(--ink2); font-size: 1.06rem }
.band-plain { padding-block: 40px }
/* 하위 쪽은 띠 여백을 줄인다 — 문답 두세 개뿐인 쪽이 빈 칸이 더 많아 휑했다(원장님 10/24 «디자인 더 개선») */
/* 🚨이름은 pg-… — «sub» 는 메뉴 펼침 목록 이름이라 쪽 전체가 숨었다(10/24) */
.pg-sub .band { padding-block: clamp(52px, 6vw, 84px) } .pg-sub .band-in { gap: 32px }
/* 합친 띠 — 인사 아래 의료진 · 둘러보기 아래 층별 안내 */
.space + .fls { margin-top: 8px }
.gr-docs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center }
.gr-docs .dms { grid-template-columns: minmax(0, 1fr); gap: 16px }
.band-plain + .band-plain { padding-top: 0 }

/* 진료 카드(첫 쪽) — 사진 위에 이름 */
.feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px }
.feat a { position: relative; display: block; border-radius: var(--r); overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; box-shadow: var(--shadow) }
.feat-img { display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--paper3) }
.feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease) }
.feat a:hover .feat-img img { transform: scale(1.06) }
.feat-t { position: absolute; inset: auto 0 0 0; padding: 70px 22px 22px; display: grid; gap: 4px;
  background: linear-gradient(0deg, rgba(14, 19, 28, .88) 0%, rgba(14, 19, 28, .55) 55%, rgba(14, 19, 28, 0) 100%) }
.feat-t b { font-size: 1.32rem; font-weight: 900; letter-spacing: -.04em }
.feat-t span { font-size: .9rem; color: rgba(255, 255, 255, .82); line-height: 1.55 }
/* 줄맞춤(원장님 10/23 「글 양이 들쑥날쑥해 글자 위치 통일성 없고」) — 글 칸이 바닥에 붙어 있어 설명이 한 줄이면 이름이 내려앉았다.
   설명 칸을 늘 두 줄 높이로 두고 낱말 칩은 한 줄로 묶어, 한 줄 카드들의 이름 위치를 같게 한다 */
.feat-t > span:not(.feat-tags) { min-height: calc(1.55em * 2) }
.feat-t .ic { position: absolute; right: 20px; top: 26px; width: 22px; height: 22px; opacity: 0; transform: translateX(-6px); transition: .3s var(--ease) }
.feat a:hover .feat-t .ic { opacity: 1; transform: none }
.mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.mini a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 16px; align-items: center; text-decoration: none; padding: 26px 22px; transition: background .2s }
.mini a + a { box-shadow: inset 1px 0 0 var(--line) }
.mini a:hover { background: var(--card) }
.mini .mi { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brick) 10%, transparent); color: var(--brick) }
.mini .mi .ic { width: 21px; height: 21px }
.mini b { font-weight: 800; letter-spacing: -.02em }
.mini span { color: var(--ink2); font-size: .86rem; line-height: 1.5 }

/* 대표원장 인사 */
.gr { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center }
.gr-ph { border-radius: 28px; overflow: hidden; display: grid; place-items: end center; aspect-ratio: 4/4.4;
  background: radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--brick) 9%, var(--paper3)) 0%, var(--paper3) 70%) }   /* 은은하게(원장님 10/27 «주황 동그라미가 너무 진해») */
.gr-ph img { width: 108%; max-width: none; object-fit: contain; object-position: bottom; margin-bottom: -2% }
.gr-t { display: grid; gap: 18px; justify-items: start }
.gr-t h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 900 }
.gr-t > p { color: var(--ink2); max-width: 32rem; font-size: 1.06rem }
.gr-t .eyebrow { color: var(--brick); font-weight: 800; font-size: .92rem }
.gr-sign { color: var(--ink) !important; font-size: .95rem !important }
.gr-sign b { font-size: 1.3rem; margin-left: 6px; font-weight: 900 }

/* 둘러보기 사진 */
.space { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.space figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r) }
.space img { aspect-ratio: 16/9; width: 100%; object-fit: cover;   /* 원내 사진은 16:9 통째로 — 4:3 으로 잘라 답답했다(원장님 10/31 «그냥 안 자르면 안 되냐») */
  transition: transform .9s var(--ease) }
.space figure:hover img { transform: scale(1.05) }
.space figcaption { position: absolute; inset: auto 0 0 0; padding: 40px 18px 16px; color: #fff; font-weight: 800; font-size: .98rem;
  background: linear-gradient(0deg, rgba(14, 19, 28, .7), rgba(14, 19, 28, 0)) }

/* 진료시간 · 오시는 길 */
.visit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: stretch }
.visit > div { background: var(--card); border-radius: var(--r); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow) }
.visit h3 { font-size: 1.3rem; font-weight: 900; margin-bottom: 18px }
.wk { display: grid; gap: 2px; font-variant-numeric: tabular-nums }
.wk-r { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) 7.6rem; gap: 14px; align-items: center; padding: 8px 10px; border-radius: 10px }
.wk-d { font-weight: 800; font-size: .95rem; white-space: nowrap }
.wk-bar { position: relative; height: 8px; border-radius: 999px; background: var(--paper3) }
.wk-bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 100%); width: calc((var(--e) - var(--s)) * 100%); background: var(--deep); border-radius: 999px }
.wk-t { font-size: .9rem; line-height: 1.35; text-align: right; font-weight: 500 }
.wk-t small { display: block; color: var(--ink3); font-size: .74rem; font-weight: 400 }
.wk-r.today { background: color-mix(in srgb, var(--brick) 9%, transparent) }
.wk-r.today .wk-bar i { background: var(--brick) }
.wk-r.today .wk-d::after { content: "오늘"; margin-left: 6px; font: 800 .66rem var(--sans); color: var(--on-brick); background: var(--brick); padding: 2px 7px; border-radius: 999px; vertical-align: 2px }
.wk-axis { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) 7.6rem; gap: 14px; padding-inline: 10px; font-size: .72rem; color: var(--ink3) }
.wk-axis div { display: flex; justify-content: space-between }
.wk-note { color: var(--ink2); font-size: .88rem; margin-top: 12px }
.map { display: grid; gap: 16px }
.map-addr { font-weight: 900; font-size: 1.25rem; line-height: 1.45; letter-spacing: -.03em }
.map dl { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 10px 12px; margin: 0; font-size: .94rem }
.map dt { color: var(--ink3) }
.map dd { margin: 0 }
.park { max-width: 240px; border-radius: var(--r-s); border: 1px solid var(--line) }

/* 증상 카드 */
.sym { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px }   /* 줄마다 높이가 달랐다(한 칸만 두 줄이면 그 줄만 커짐) → 모든 칸을 가장 큰 칸에 맞춤(원장님 11/1 «크기가 들쑥날쑥») */
.sym li { display: flex; align-items: center; gap: 14px; padding: 22px 20px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); font-weight: 700; line-height: 1.5; letter-spacing: -.02em }
.sym .ic { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: color-mix(in srgb, var(--brick) 12%, transparent); color: var(--brick); stroke-width: 2.6 }

/* 질문 + 답 */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 2px solid var(--ink) }
.qa-i { padding: 30px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start }
.qa-i h3 { font-size: 1.2rem; font-weight: 800; display: flex; gap: 12px; align-items: baseline }
.qa-i h3 span { color: var(--brick); font-weight: 900; font-size: 1.3rem }
.qa-i p { color: var(--ink2); padding-left: 30px }

/* 받는 차례 */
.st { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative }
.st::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: repeating-linear-gradient(90deg, var(--paper3) 0 8px, transparent 8px 14px) }
.st li { position: relative; display: grid; gap: 8px; align-content: start }
.st-n { width: 56px; height: 56px; border-radius: 50%; background: var(--deep); color: var(--on-deep); display: grid; place-items: center; font-weight: 900; font-size: 1.15rem; margin-bottom: 10px; box-shadow: 0 0 0 8px var(--paper2) }
.st b { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em }
.st li > span:last-child { color: var(--ink2); font-size: .95rem; line-height: 1.65 }

/* 치료 칸 — 상자 없이 위 줄로 가른다 */
.tcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px }
.tcs.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.tc { display: grid; gap: 8px; padding: 28px 0 30px; border-top: 1px solid var(--line); align-content: start }
.tc b { font-size: 1.22rem; font-weight: 900; letter-spacing: -.03em }
.tc span { color: var(--ink2); font-size: .97rem; line-height: 1.7 }
a.tc { text-decoration: none; transition: border-color .2s }
a.tc b { display: flex; justify-content: space-between; gap: 8px }
a.tc b i { font-style: normal; color: var(--brick); transition: transform .2s }
.tc-go span { color: var(--brick-ink); font-weight: 700; font-size: .92rem }   /* «○○ 보기 ›» — 누르면 그 제품으로 간다는 것을 글자로 */
.tc-go:hover span { text-decoration: underline; text-underline-offset: 3px }
a.tc:hover { border-top-color: var(--brick) }
a.tc:hover b i { transform: translateX(4px) }

/* ▶ 본사 영상 */
.vd { margin: 0 auto; width: 100%; max-width: 880px }
.vd-b, .vd iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r); overflow: hidden; background: #000 }
.vd-b { position: relative; padding: 0; cursor: pointer }
.vd-b img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9 }
.vd-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0, 0, 0, .6) }
.vd-play::after { content: ""; position: absolute; left: 29px; top: 22px; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent }
.vd-b:hover .vd-play { background: var(--brick) }
.vd figcaption { margin-top: 10px; color: var(--ink2); font-size: .9rem; text-align: center }

/* 📢 알려 드립니다 */
.nt { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.nt li { padding: 16px 20px; border-radius: var(--r-s); background: var(--card); box-shadow: var(--shadow); font-weight: 800; border-left: 4px solid var(--brick) }

/* 🧍통증 몸 그림 입구 */
.bm { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: center }
.bm-svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto }
.bm-body > * { fill: var(--bm-body, var(--paper3)) }   /* 어두운 판에선 몸 그림이 바탕에 묻혔다(11/02) */
.bm-ring { fill: var(--brick); opacity: .18; transition: opacity .2s }
.bm-dot { fill: var(--brick) }
.bm-svg text { font-size: 15px; font-weight: 800; fill: var(--ink) }
.bm-svg a:hover .bm-ring, .bm-svg a:focus .bm-ring { opacity: .4 }
.bm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.bm-list a { display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--ink) }
.bm-list b { display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 900 }
.bm-list b i { font-style: normal; color: var(--brick) }
.bm-list span { color: var(--ink2); font-size: .93rem; line-height: 1.55 }
.q-top .ic { transform: rotate(-90deg) }

/* 머리 밑 한 줄 안내 */
.notice-line { background: var(--deep); color: var(--on-deep) }
.notice-line .wrap { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 12px; padding-bottom: 12px; font-weight: 800; font-size: .95rem; text-align: center }
.notice-line .ic { width: 18px; height: 18px; flex: 0 0 auto }

/* 수壽 복용·보관·주의 */
.dose { margin: 16px 0 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.dose summary { cursor: pointer; padding: 14px 0; font-weight: 800; color: var(--ink) }
.dose-b { padding: 4px 0 14px }
.dose-b h3 { margin: 18px 0 6px; font-size: 1rem; font-weight: 800 }
.dose-b .muted { margin: 8px 0 0; line-height: 1.7 }

/* 쪽 안 바로가기 탭 — 머리 밑에 붙어 내려온다 */
.jump { position: sticky; top: var(--top-h); z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
.jump-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px }
.jump-in::-webkit-scrollbar { display: none }
.jump a { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; font-weight: 800; font-size: .92rem; color: var(--ink) }
.jump a:hover { color: var(--brick-ink) }
.jump a.on { background: var(--deep); color: var(--on-deep) }
main > section[id^="sec"] { scroll-margin-top: calc(var(--top-h) + 64px) }
.si-band { scroll-margin-top: calc(var(--top-h) + 64px) }
/* 주소 복사 */
.map-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px }
.copy { font: inherit; font-size: .82rem; font-weight: 800; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink2); cursor: pointer }
.copy.done { color: var(--brick-ink); border-color: var(--brick) }
/* 상담 칸 예시 질문 */
.kk-ask { grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0 }
.kk-ask a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: inherit; text-decoration: none; font-size: .9rem; font-weight: 700 }
.kk-ask a::before { content: "Q. "; opacity: .7 }
.kk-ask a:hover { background: rgba(255, 255, 255, .18) }

/* 사진 + 글 나란히(split) */
.sp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center }
.sp-rev .sp-img { order: 2 }
.sp-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); display: block }
.sp-wide .sp-img img { aspect-ratio: 16 / 9 }   /* 원내 사진(16:9)은 자르지 않는다 */
.sp-t h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 6px 0 16px; letter-spacing: -.03em }
.sp-t p { font-size: 1.04rem; line-height: 1.85; color: var(--ink2); margin: 0 0 12px }
.sp-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; padding: 0 }
.sp-tags li { padding: 7px 14px; border-radius: 999px; background: var(--paper2); font-size: .9rem; font-weight: 700 }

/* ✨피부 깊이 그림(고마워뷰티) — 행 = 피부층 · 열 = 시술 · 막대 = 닿는 깊이 */
.ly-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center }
.ly-p p { font-size: 1.05rem; line-height: 1.85; margin: 0 0 14px; color: var(--ink) }
.ly-fig { margin: 0 }
.lyc { display: grid; grid-template-columns: 5.4rem repeat(var(--n), minmax(0, 1fr)); grid-auto-rows: 52px; grid-template-rows: auto; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px 16px 18px 0; overflow: hidden }
.lyh { display: flex; align-items: flex-end; justify-content: center; text-align: center; padding: 0 4px 10px; font-weight: 800; font-size: .9rem; line-height: 1.3; letter-spacing: -.03em; text-decoration: none; color: var(--ink2); word-break: keep-all }
.lyh.on { color: var(--brick-ink) }
.lyl { display: flex; align-items: center; padding-left: 16px; font-size: .85rem; font-weight: 700; color: var(--ink2); word-break: keep-all; line-height: 1.25 }
.lyl, .lyb { position: relative }
.ly-epi { background: var(--ly-epi) } .ly-derm { background: var(--ly-derm) } .ly-fat { background: var(--ly-fat) } .ly-smas { background: var(--ly-smas) }
.lyb.fill::after { content: ""; position: absolute; left: 50%; width: 22px; margin-left: -11px; top: 0; bottom: 0; background: var(--brick); opacity: .9 }
.lyb.ly-s::after { top: 8px; border-radius: 999px 999px 0 0 }
.lyb.ly-e::after { bottom: 8px; border-radius: 0 0 999px 999px }
.lyb.ly-s.ly-e::after { border-radius: 999px }
.lyb.dim::after { background: var(--ink3); opacity: .35 }
.ly-fig figcaption { margin-top: 12px; line-height: 1.7 }

/* 더 알아보기 */
.lk { display: flex; flex-wrap: wrap; gap: 10px }
.lk a { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; font-weight: 700; transition: transform .2s var(--ease), color .2s }
.lk a i { font-style: normal; color: var(--brick) }
.lk a:hover { transform: translateY(-2px); color: var(--brick-ink) }

/* 수壽 제품 · 사진첩 */
.pds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px }
/* 수壽 묶은 쪽의 제품 칸 — 사진 왼쪽 · 글 오른쪽, 칸마다 바탕을 번갈아 */
.si { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center }
.si-img { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); background: var(--paper3) }
.si-img img { width: 100%; height: 100%; object-fit: cover }
.si-t { display: grid; gap: 16px; align-content: start }
.si-t h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -.04em; margin: 0 }
.si-lead { color: var(--ink2); font-size: 1.04rem; line-height: 1.7; margin: 0 }
.si-t .facts { max-width: none }
.si-band:nth-of-type(even) { background: var(--paper2) }
.si-band { scroll-margin-top: var(--top-h) }
/* 진료 카드 낱말 칩 */
.feat-tags { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 5px; margin-top: 6px }
.feat-tags i { flex: 0 0 auto; white-space: nowrap }
.feat-tags i { font-style: normal; font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28) }
/* 증상으로 찾기 */
.fd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px }
.fd.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .fd.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.fd-g { background: var(--card); border-radius: var(--r); padding: 22px 22px 14px; box-shadow: var(--shadow) }
.fd-g h3 { font-size: 1.12rem; font-weight: 900; margin: 0 0 8px; color: var(--brick) }
.fd-g ul { list-style: none; margin: 0; padding: 0 }
.fd-g a { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.45 }
.fd-g li:first-child a { border-top: 0 }
.fd-g a i { font-style: normal; color: var(--brick); transition: transform .2s }
.fd-g a:hover { color: var(--brick-ink) } .fd-g a:hover i { transform: translateX(3px) }
/* 층별 안내 */
.fls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px }
.fl { display: flex; align-items: flex-start;   /* 위 맞춤 — 설명 줄 수가 달라도 3F·4F 이름 높이가 같게 */
  gap: 22px; background: var(--card); border-radius: var(--r); padding: 26px 28px; box-shadow: var(--shadow) }
.fl-n { flex: 0 0 auto; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 16px; background: var(--deep); color: #fff; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em }
.fl div { display: grid; gap: 4px } .fl b { font-size: 1.24rem; font-weight: 900; letter-spacing: -.03em } .fl div span { color: var(--ink2); font-size: .95rem }   /* 🚨«.fl span» 이면 3F 글자까지 회색이 돼 짙은 바탕에 묻혔다 */
/* 첫 쪽 의료진 두 분 */
.dms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px }
.dm { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 22px; align-items: start;   /* 두 분 이름 위치를 같게(가운데 맞춤이면 약력 줄 수만큼 어긋났다) */
  background: var(--card); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); text-decoration: none; color: inherit }
.dm-ph { border-radius: 14px; overflow: hidden; aspect-ratio: 3/4; background: var(--doc-glow), var(--paper2); display: grid; place-items: end center }
.dm-ph img { width: 100%; height: 100%; object-fit: contain; object-position: bottom }
.dm-t { display: grid; gap: 4px; min-width: 0 } .dm-t b { font-size: 1.45rem; font-weight: 900; margin-bottom: 4px } .dm-l { color: var(--ink2); font-size: .9rem }
/* 눌러서 고르는 자가 체크 */
.sym-check li { padding: 0; background: none; box-shadow: none; display: grid; align-items: stretch; min-width: 0 }   /* 🚨«.sym li» 의 align-items:center 를 물려받아 단추가 칸 높이를 못 채웠다(폴드 펼침 «허리가 아프다»만 작고 떠 보임 · 11/1) */   /* 단추가 칸 높이를 다 채우게 — 한 줄 안 단추 높이를 같게 */
.sym-b { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 14px; padding: 22px 20px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); font-weight: 700; line-height: 1.5; letter-spacing: -.02em; transition: box-shadow .2s, background .2s }
.sym-b span { min-width: 0; overflow-wrap: anywhere }   /* «디스크·협착증으로»처럼 끊을 데 없는 낱말이 칸 밖으로 밀려 옆 칸과 겹쳤다(11/1) */
.sym-b:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px }
.sym-b[aria-pressed="true"] { background: color-mix(in srgb, var(--brick) 10%, var(--card)); box-shadow: inset 0 0 0 2px var(--brick) }
.sym-b[aria-pressed="true"] .ic { background: var(--brick); color: #fff }
.sym-res { margin-top: 22px; padding: 22px 24px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); display: grid; gap: 14px }
.sym-res[hidden] { display: none }   /* 🚨display:grid 가 hidden 을 이겨 «0가지를 고르셨습니다»가 처음부터 떠 있었다(CSS 함정) */
.sym-res p { margin: 0 } .sym-res b { color: var(--brick); font-size: 1.2rem }
/* 하위 쪽 사진 카드 — 센터 첫 쪽에서 하위 쪽으로(첫 쪽 진료 카드와 같은 결: 사진 + 이름) */
.cds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px }
.cds.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .cds.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px }
.cd { display: grid; gap: 6px; align-content: start; text-decoration: none; color: inherit }
.cd-img { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r); background: var(--paper3); margin-bottom: 10px; box-shadow: var(--shadow) }
.cd-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease) }
.cd:hover .cd-img img { transform: scale(1.06) }
.cd b { display: flex; justify-content: space-between; gap: 8px; font-size: 1.14rem; font-weight: 900; letter-spacing: -.03em }
.cd b i { font-style: normal; color: var(--brick); transition: transform .2s }
.cd:hover b i { transform: translateX(4px) }
.cd span:not(.cd-img) { color: var(--ink2); font-size: .93rem; line-height: 1.6; min-height: calc(1.6em * 2) }   /* 한 줄이든 두 줄이든 칸 높이 같게 */
.pd { display: grid; gap: 4px; align-content: start; text-decoration: none }
.pd img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: 18px; background: var(--paper2); margin-bottom: 12px; transition: transform .5s var(--ease), box-shadow .5s }
.pd:hover img { transform: translateY(-4px); box-shadow: var(--shadow) }
.pd b { font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em }
.pd span { color: var(--ink2); font-size: .88rem; line-height: 1.55 }
.ph { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px }
.ph figure { margin: 0; display: grid; gap: 8px; text-align: center; font-size: .88rem; color: var(--ink2); font-weight: 500 }
.ph img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: 50%; background: var(--card); box-shadow: var(--shadow) }

/* 블로그 */
.bloglist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }
.bloglist a { display: grid; align-content: start; gap: 10px; text-decoration: none; padding: 26px; border-radius: var(--r); height: 100%; background: var(--card); box-shadow: var(--shadow); transition: transform .3s var(--ease) }
.bloglist a:hover { transform: translateY(-4px) }
.bloglist time { color: var(--brick); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em }
.bloglist b { font-size: 1.06rem; line-height: 1.5; font-weight: 800; letter-spacing: -.02em }
.bloglist span { color: var(--ink2); font-size: .9rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.blk.blog { display: grid; gap: 24px }

/* 상담 띠 */
.consult-band { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; isolation: isolate }
.consult-band::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 60%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(closest-side, rgba(209, 97, 137, .16), transparent); display: none }   /* 번짐을 걷었다(10/29) — 짙은 와인은 남색 위에서 갈색 얼룩, 밝은 와인은 띠 아래 끝에서 잘려 줄이 졌다 */
.consult-band .consult-card { background: var(--card); color: var(--ink); border: 0; box-shadow: var(--shadow-lg) }
.cb { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center }
.cb-t { display: grid; gap: 18px; justify-items: start }
.cb-t h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 900 }
.cb-t p { color: var(--deep-mute); font-size: 1.04rem }
.cb-t .tel { font-weight: 900; font-size: clamp(2rem, 3.6vw, 2.6rem); font-variant-numeric: tabular-nums; letter-spacing: -.02em; user-select: all; color: #fff }
.consult-card { border-radius: 24px; padding: clamp(24px, 3vw, 36px); background: var(--card); box-shadow: var(--shadow); display: grid; gap: 18px }
.consult-card h2 { font-size: 1.35rem; font-weight: 900 }
.qform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.qf { display: grid; gap: 6px; min-width: 0 }
.qf.full { grid-column: 1 / -1 }
.qform label { font-weight: 700; font-size: .86rem; color: var(--ink2) }
.qform input, .qform select, .qform textarea { font: inherit; font-size: .97rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; transition: border-color .2s, box-shadow .2s }
.qform input:focus, .qform select:focus, .qform textarea:focus { outline: none; border-color: var(--brick); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brick) 16%, transparent) }
.qform .chk { grid-column: 1 / -1; font-weight: 400; display: flex; gap: 8px; align-items: flex-start; color: var(--ink2); font-size: .88rem }
.qform .chk input { width: auto; margin-top: .3em; accent-color: var(--brick) }
.qform-ft { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.qform-msg { min-height: 1.4em; color: var(--brick-ink); font-weight: 700; font-size: .9rem }

/* 카카오톡 상담 칸 — 양식 없이 바로 채널로 */
.kk { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px 48px; align-items: center }
.kk-t { display: grid; gap: 14px }
.kk-t h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 900 }
.kk-t p { color: var(--deep-mute); font-size: 1.06rem; max-width: 34rem }
.kk-a { display: grid; gap: 12px; min-width: 16rem }
.kk-card { border-radius: var(--r); padding: clamp(28px, 4vw, 44px) }
.bt { display: grid; gap: 0; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; max-width: 40rem }
.bt-r { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line) }
.bt-r:last-child { border-bottom: 0 }
.bt-r b { font-weight: 800 }
.bt-r span { display: flex; flex-wrap: wrap; gap: 6px }
.bt-r i { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--brick) 10%, transparent); color: var(--brick-ink) }

/* 미용 예약 달력 */
.bcal { display: grid; gap: 12px }
.bcal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px }
.bcal-days button { font: 800 1.02rem var(--sans); border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 14px; padding: 10px 0; cursor: pointer; display: grid; line-height: 1.3; font-variant-numeric: tabular-nums; transition: border-color .2s }
.bcal-days button:hover:not([disabled]) { border-color: var(--brick) }
.bcal-days button small { color: var(--ink3); font: 500 .72rem var(--sans) }
.bcal-days button[disabled] { opacity: .3; cursor: default }
.bcal-days button[aria-pressed="true"], .bcal-slots button[aria-pressed="true"] { background: var(--brick); color: var(--on-brick); border-color: var(--brick) }
.bcal-days button[aria-pressed="true"] small { color: inherit }
.bcal-slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 2.6rem; color: var(--ink2); font-size: .9rem; align-items: center }
.bcal-slots button { font: 700 .95rem var(--sans); border: 1.5px solid var(--brick); color: var(--brick-ink); background: transparent; border-radius: 999px; padding: 7px 18px; cursor: pointer; font-variant-numeric: tabular-nums }

/* 한눈 칸 · 표 · 의료진 */
.blk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0 }
.blk h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 900 }
.blk-sub { color: var(--ink2) }
.facts { display: grid; grid-template-columns: 8rem minmax(0, 1fr); margin: 0; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; max-width: 52rem }
.facts dt, .facts dd { margin: 0; padding: 20px 24px; border-bottom: 1px solid var(--line) }
.facts dt { color: var(--ink3); font-weight: 700; font-size: .9rem }
.facts dd { font-size: 1.04rem; font-weight: 500 }
.facts dt:last-of-type, .facts dd:last-of-type { border-bottom: 0 }
.tbl-wrap { overflow-x: auto; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow) }
.tbl { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: .95rem }
.tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 15px 20px; text-align: left; vertical-align: top }
.tbl tr > :first-child:nth-last-child(n+3) { white-space: nowrap }   /* 「구분·기타」 같은 두 글자가 「구|분」으로 갈라졌다 — 세 칸 이상 표의 «구분» 칸만.
   두 칸 표(서류 발급)는 첫 칸이 긴 항목 이름이라 묶으면 금액 칸이 폰에서 화면 밖으로 밀렸다(10/28) */
.tbl tr > :last-child:nth-child(2) { white-space: nowrap; text-align: right }   /* 두 칸 표의 금액은 한 줄·오른쪽 끝 */
@media (max-width: 640px) { .tbl th, .tbl td { padding: 13px 14px } }
/* 줄바꿈 — «·»로 이은 짧은 말·전화번호는 build.keep_phrases 가 붙임표로 한 덩어리 · anywhere 는 낱말 가운데를 잘라 걷었다(10/24) */
.tbl tr:last-child td { border-bottom: 0 }
.tbl thead th { background: var(--paper2); font-weight: 800; color: var(--ink2); font-size: .86rem }
.docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
.doc { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 24px; align-items: start; background: var(--card); border-radius: var(--r); padding: 28px; box-shadow: var(--shadow); scroll-margin-top: 120px }
.doc-ph { border-radius: 16px; overflow: hidden; display: grid; place-items: end center; aspect-ratio: 3/4; background: var(--doc-glow), var(--paper2) }
.doc-ph img { width: 100%; height: 100%; object-fit: contain; object-position: bottom }
.doc-t { display: grid; gap: 6px; min-width: 0 }
.doc-role { color: var(--brick); font-weight: 800; font-size: .86rem }
.doc h3 { font-size: 1.6rem; font-weight: 900 }
.doc h4 { margin: 12px 0 2px; font-size: .9rem; font-weight: 800 }
.dots { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .92rem; color: var(--ink2) }
.dots li { position: relative; padding-left: 1.1em }
.dots li::before { content: ""; position: absolute; left: .1em; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--brick) }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.tags li { padding: 6px 14px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: .9rem }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary { cursor: pointer; font-weight: 700; padding-block: 16px }
.faq details p { padding-bottom: 16px; color: var(--ink2) }
.fig { margin: 0 } .fig-box { border-radius: var(--r); overflow: hidden; background: var(--paper2) }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 45%), 1fr)); gap: 12px }
.gallery img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-s); width: 100% }
.gallery.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.gallery.g4 img { aspect-ratio: 1 / 1; border-radius: var(--r) }

/* ── 바로가기 — PC 오른쪽 아래 둥근 셋 · 폰 아래 세 칸 ── */
.quick { position: fixed; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 29; display: grid; gap: 10px;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease) }
.quick.show { opacity: 1; transform: none; pointer-events: auto }
.q { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-lg); position: relative; transition: transform .2s var(--ease) }
.q:hover { transform: scale(1.06) }
.q .ic { width: 23px; height: 23px }
.q span { position: absolute; right: calc(100% + 10px); white-space: nowrap; background: var(--deep); color: #fff; font-size: .8rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; opacity: 0; transform: translateX(6px); transition: .2s; pointer-events: none }
.q:hover span { opacity: 1; transform: none }
.q-kakao { background: #fee500; color: #191600 }
.q-tel { background: var(--brick); color: var(--on-brick) }
.q-naver { background: #03c75a; color: #fff }
.q-naver .ic { width: 20px; height: 20px }

/* 이벤트 알림 */
.pop { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: min(560px, calc(100vw - 32px)); background: var(--card); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden }
.pop-in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; padding: 12px; overflow-x: auto }
.pop-card { display: grid; gap: 4px; text-decoration: none }
.pop-card img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; width: 100% }
.pop-card span { color: var(--ink2); font-size: .8rem }
.pop-ft { display: flex; justify-content: space-between; border-top: 1px solid var(--line) }
.pop-ft button { font: inherit; background: none; border: 0; padding: 10px 16px; cursor: pointer; color: var(--ink) }

/* ── 바닥 ── */
.ft { background: var(--deep); color: var(--deep-mute); padding-block: 64px 44px; font-size: .9rem }
.ft-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px }
.ft-brand { display: grid; gap: 18px; align-content: start }
.ft-brand img { height: 34px; width: auto; opacity: .95 }
.ft h2, .ft .ft-h { color: var(--on-deep); font-size: .92rem; font-weight: 800; margin: 0 0 12px; letter-spacing: 0 }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px }
.ft a { text-decoration: none; transition: color .2s }
.ft a:hover { color: var(--on-deep) }
.ft .sel { color: var(--on-deep) }
.ft-note { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 22px; font-size: .8rem; display: grid; gap: 4px; color: color-mix(in srgb, var(--deep-mute) 80%, transparent) }

/* ── 스크롤하면 떠오르기(app.js 가 «화면 밖» 칸에만 .rv 를 단다 — 글이 늘 보이는 상태가 기본) ── */
/* 🚨투명(opacity 0)으로 숨기지 않는다 — 떠오르기 장치가 어떤 브라우저에서 안 돌면 칸·그림이 통째로 안 보였다(원장님 10/24 «그림이 전부 안 떠»).
   이제 살짝 아래에 있다가 올라오기만 한다. 장치가 안 돌아도 26px 아래에 «보이는 채로» 있을 뿐이다 */
.rv { transform: translateY(26px); transition: transform .8s var(--ease); transition-delay: var(--d, 0s) }
.rv.in { opacity: 1; transform: none }

/* ── 좁은 화면 ── */
@media (max-width: 1360px) {
  .nav-i > a { padding: 10px 9px; font-size: .93rem }
}
/* 햄버거 메뉴 — 좁은 화면 + «손가락으로 쓰는 기기»(pointer:coarse — 큰 태블릿 가로 1366px 도 마우스 올리기가 없어 하위 메뉴를 못 연다 · hover:none 은 헤드리스 시험 브라우저까지 걸려 PC 메뉴를 못 쟀다) */
@media (max-width: 1240px), (pointer: coarse) {
  :root { --top-h: 64px }
  .gnb { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--top-h)); background: var(--card); color: var(--ink); display: none; flex-direction: column; justify-content: flex-start;
    overflow-y: auto; overscroll-behavior: contain; padding: 8px max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--line) }
  /* 🚨메뉴를 fixed 로 두면 머리의 backdrop-filter 가 기준 상자가 되어 높이 0 — 태블릿에서 «눌러도 안 보임»(10/23). 머리 기준 absolute 로 */
  .menu-open .top { backdrop-filter: none; background: var(--card) }
  .gnb.open { display: flex }
  .gnb-in { flex-direction: column; width: 100% }
  .nav-i > a { font-size: 1.15rem; font-weight: 800; padding: 16px 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink) !important; box-shadow: none !important }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 4px 0 12px 12px; background: transparent; min-width: 0; display: grid; grid-template-columns: 1fr 1fr }
  .sub a { padding: 7px 0; color: var(--ink2) }
  .sub-main { display: none }   /* 폰 메뉴는 큰 이름 자체가 본 쪽으로 가는 단추라 겹친다 */
  .gnb-m { display: grid; gap: 10px; margin-top: 24px }
  .top-act .btn-sm { display: none }
  .nav-btn { display: grid; gap: 5px; margin-left: auto; width: 44px; height: 44px; place-content: center; background: none; border: 0; color: inherit; cursor: pointer }
  .nav-btn span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: .3s var(--ease) }
  .nav-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
  .nav-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
  .nav-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
  .top-act { margin-left: auto }
  .logo img { height: 32px }
}
@media (max-width: 1100px) {
  .sym { grid-template-columns: repeat(2, minmax(0, 1fr)) }   /* 폴드 펼침(883)·태블릿에서 네 칸이면 글이 두세 줄로 접혀 들쑥날쑥 → 두 칸(11/1) */
  .pds { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .cds.c4, .cds.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .si { grid-template-columns: minmax(0, 1fr); gap: 24px }
  .fd, .fd.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dms, .fls { grid-template-columns: minmax(0, 1fr) }
  .gr-docs { grid-template-columns: minmax(0, 1fr) }
  .tcs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .docs { grid-template-columns: minmax(0, 1fr) }
  .gr { gap: 40px }
}
@media (max-width: 860px) {
  .ft-c2 > .ft-h { display: none }
  .bm { grid-template-columns: minmax(0, 1fr); gap: 20px } .bm-svg { max-width: 220px } .bm-list { gap: 10px } .bm-list a { padding: 16px }
  .gallery.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .sp { grid-template-columns: 1fr; gap: 24px } .sp-rev .sp-img { order: 0 }
  .ly-two { grid-template-columns: 1fr; gap: 24px }
  .lyc { grid-template-columns: 4.2rem repeat(var(--n), minmax(0, 1fr)); grid-auto-rows: 46px; padding-right: 8px }
  .lyl { padding-left: 10px; font-size: .78rem }
  .lyh { font-size: .8rem }
  .feat { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .feat-img { aspect-ratio: 1/1 }   /* 폰·태블릿 두 칸 — 4:3 이면 세로 사진의 가운데만 남아 얼굴이 잘렸다(원장님 11/1) → 정사각 + 위쪽 기준 */
  .feat-img img { object-position: 50% 14% }
  .mini { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .mini a:nth-child(3) { box-shadow: inset 0 1px 0 var(--line) }
  .mini a:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line) }
  .hbar, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hb:nth-child(3) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) }
  .hb:nth-child(4) { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .16) }
  .stats div:nth-child(3) { box-shadow: inset 0 1px 0 var(--line) }
  .stats div:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line) }
  .sym, .st { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .st::before { display: none }
  .pds { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .ph { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .bloglist, .docs { grid-template-columns: minmax(0, 1fr) }
  .gr, .visit, .cb, .kk { grid-template-columns: minmax(0, 1fr) }
  .kk-a { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .gr-ph { max-width: 26rem; aspect-ratio: 1 }
  .ft-in { grid-template-columns: minmax(0, 1fr) 1fr }
  .ft-brand { grid-column: 1 / -1 }
}
@media (max-width: 980px) {
  .hero-home .hero-in { padding-top: calc(var(--top-h) + 40px) }
}
@media (max-width: 640px) {
  body { font-size: 16px }
  .wrap { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)) }
  .hero-home { min-height: 640px }
  .hero-home .hero-in { padding-bottom: 28px }
  .hero .lead { font-size: 1rem }
  .lead-hours { font-size: .95rem }
  .lead-hours li { grid-template-columns: 6.6em minmax(0, 1fr); gap: 8px }
  .btn-lg { padding: 14px 22px; font-size: .97rem }
  .hb { padding: 16px 14px; gap: 10px }
  .hb > .ic { width: 22px; height: 22px }
  .hb b { font-size: .9rem }
  .hb span { font-size: .76rem }
  .stats div { padding: 24px 12px }
  .hero-sub { min-height: 340px }
  .hero-sub .hero-in { padding-bottom: 40px }
  .feat { gap: 12px }
  .feat-t { padding: 50px 14px 14px }
  .feat-t b { font-size: 1.08rem }
  .feat-t span { display: none }
  .mini { grid-template-columns: minmax(0, 1fr) }
  .mini a, .mini a:nth-child(n) { box-shadow: inset 0 1px 0 var(--line) }
  .mini a:first-child { box-shadow: none }
  .space { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .sym { gap: 10px; grid-template-columns: minmax(0, 1fr) }   /* 폰은 한 줄에 하나 — 두 칸이면 글이 서너 줄로 접혀 칸 높이가 들쑥날쑥했다 */
  .sym li { padding: 16px 14px; font-size: .92rem; gap: 10px }
  .sym .ic { width: 24px; height: 24px; padding: 5px }
  .sym-b { padding: 16px 14px; font-size: .92rem; gap: 10px }
  .sym-check li { padding: 0; background: none; box-shadow: none }   /* 바로 위 «.sym li» 폰 여백이 단추 칸에도 붙어 단추 사이가 벌어졌다 */
  .fd, .fd.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }   /* 폰도 두 칸 — 한 칸이면 증상 찾기만 1,600px 였다(10/24) */
  .fd-g { padding: 16px 14px 8px } .fd-g h3 { font-size: 1rem } .fd-g a { font-size: .86rem; padding: 8px 0 }
  .dm { grid-template-columns: 6rem minmax(0, 1fr); gap: 16px; padding: 16px }
  .fl { padding: 18px; gap: 16px } .fl-n { width: 3.4rem; height: 3.4rem; font-size: 1.2rem }
  .qa { grid-template-columns: minmax(0, 1fr) }
  .qa-i p { padding-left: 0 }
  .st, .tcs { grid-template-columns: minmax(0, 1fr) }
  .st li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px }
  .st-n { grid-row: span 2; margin-bottom: 0; box-shadow: none }
  .pds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
  .cds, .cds.c3, .cds.c4, .cds.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px }
  .cd b { font-size: 1rem }
  .cd span:not(.cd-img) { font-size: .84rem }
  .ph { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
  .ph figure { font-size: .76rem }
  .qform { grid-template-columns: minmax(0, 1fr) }
  .kk-a { grid-template-columns: minmax(0, 1fr) }
  .facts { grid-template-columns: 5.6rem minmax(0, 1fr) }
  .facts dt, .facts dd { padding: 14px }
  .doc { grid-template-columns: minmax(0, 1fr); padding: 22px }
  .doc-ph { max-width: 11rem }
  .wk-r, .wk-axis { grid-template-columns: 3.6rem minmax(0, 1fr) 6.2rem; gap: 10px }
  .wk-r.today .wk-d::after { content: none }
  .hero-shade { opacity: var(--sm, 1) }
  .hero-shade, .hero-sub .hero-shade { background: linear-gradient(0deg, rgba(14, 19, 28, .8) 0%, rgba(14, 19, 28, .68) 50%, rgba(14, 19, 28, .52) 100%) }   /* 폰은 글이 화면 폭 전부라 고르게(하위 쪽의 왼쪽만 그늘이 폰에도 걸려 오른쪽 글이 묻혔다) */
  .quick { left: 0; right: 0; bottom: 0; grid-auto-flow: column; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--card); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px) }
  .q { width: auto; height: auto; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 2px 8px; font-weight: 800 }   /* 글자를 칸 가운데로(원장님 10/26 «치우쳐져 있어») · 네 칸이 되며(10/28 네이버 예약) 그림 위·글 아래로 */
  .q .ic { width: 21px; height: 21px }
  .q-naver .ic { width: 17px; height: 17px; margin-block: 2px }
  .q span { position: static; opacity: 1; transform: none; background: none; color: inherit; padding: 0; font-size: .78rem }
  .q:hover { transform: none }
  .q-map { background: var(--card); color: var(--ink) }
  .quick, .quick.show { opacity: 1; transform: none; pointer-events: auto }
  .is-home .quick:not(.show) { opacity: 0; transform: translateY(100%); pointer-events: none }   /* 첫 쪽은 첫 화면 네모(카톡·전화)를 지나야 나온다 — 같은 단추가 동시에 두 번 보였다(원장님 10/31) */
  .q-top { display: none }   /* 폰은 아래 네 칸을 늘 띄운다(카톡·네이버 예약·전화·오시는 길 — 문의로 바로) */
  .ft { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) }
  .ft-in { grid-template-columns: minmax(0, 1fr) }
  .pop { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) }
}
/* 메뉴 뒤 쪽이 같이 스크롤되지 않게 — 🚨body 에도 overflow:hidden 을 주면 body 가 스크롤 상자가 되어 «붙는 머리»가 화면 위로 사라진다(10/23 실측) · html 에만 */
html.menu-open { overflow: hidden }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
  .rv { opacity: 1; transform: none }
}

/* ═══ 🎨 배경 «rich» 판 — 원장님 10/26 「밋밋한 단색 · 좀 더 고급스럽게」 시안. 글 칸은 그대로 밝게, 바탕에만 살짝(build.THEME) ═══ */
.theme-rich .band { position: relative; isolation: isolate; overflow-x: clip }   /* 도장 무늬(right:-70px)가 쪽을 옆으로 밀었다(1366→1436) */
.theme-rich .band.alt { background-color: var(--paper2); background-image: url(hanji.png) }   /* 한지 결 — 잔 결 + 가로로 긴 섬유 */
.theme-rich .band:not(.band-steps):not(.consult-band)::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 420px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(118, 18, 54, .07), transparent 72%) }               /* 위에서 번지는 와인빛(10/29 벽돌빛→와인) */
.theme-rich .band.alt:not(.band-steps)::after { content: ""; position: absolute; right: -70px; top: 36px; width: min(380px, 60vw); aspect-ratio: 1; z-index: -1;
  pointer-events: none; background: url(img/home_03_01_wine.png) center / contain no-repeat; opacity: .065 }             /* 도장 무늬 */
.theme-rich .band-steps { background: #18202c url(img/index_06_01.jpg) center / cover; color: #fff ; padding-block: clamp(72px, 9vw, 120px) !important }
.theme-rich .band-steps + .band { padding-top: clamp(72px, 9vw, 120px) }   /* 짙은 띠 앞뒤는 붙지 않게(같은 갈래 띠끼리 위 여백을 없애는 규칙을 이긴다) */
.theme-rich .band-steps::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 27, 38, .86), rgba(20, 27, 38, .78)) }
.theme-rich .band-steps .band-h h2, .theme-rich .band-steps .st b { color: #fff }
.theme-rich .band-steps .band-sub, .theme-rich .band-steps .st li > span:last-child { color: rgba(255, 255, 255, .78) }
.theme-rich .band-steps .st-n { background: var(--brick); color: var(--on-brick); box-shadow: 0 0 0 8px rgba(255, 255, 255, .13) }   /* 짙은 띠 위 와인 동그라미 — 테두리 빛을 조금 밝혀 띠와 갈라 보이게(10/29) */
.theme-rich .band-steps .st::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 8px, transparent 8px 14px) }
.theme-rich .stats-band { background-image: url(hanji.png) }
/* 📱 폰·태블릿(터치) — 스크롤 끊김(원장님 10/27 «모바일 스크롤이 부드럽지 않고 끊겨»). 붙어 있는 머리·탭 줄의 «뒤 흐리기»를
   스크롤할 때마다 다시 그리느라 무거웠다 → 흐림을 끄고 불투명 바탕으로. 넓은 화면(마우스)은 그대로. */
@media (max-width: 1240px), (pointer: coarse) {
  .top.solid { backdrop-filter: none; background: var(--card) }
  .jump { backdrop-filter: none; background: var(--paper) }
  .btn-glass, .hbar, .hb, .site.over .top:not(.solid) .btn-sm, .chips li { backdrop-filter: none }
  .rv { transition-duration: .35s }
}
/* 태블릿 폭 — 글 줄이 화면 절반을 넘게 가서 왼쪽만 짙은 그늘로는 오른쪽 글이 묻혔다(10/27 대비 실측) → 휴대폰처럼 고르게 */
@media (min-width: 641px) and (max-width: 1100px) {
  .hero-shade { opacity: var(--st, 1) }
  .hero-shade, .hero-sub .hero-shade { background: linear-gradient(100deg, rgba(14, 19, 28, .8) 0%, rgba(14, 19, 28, .66) 55%, rgba(14, 19, 28, .42) 85%, rgba(14, 19, 28, .28) 100%) }
}

/* 👆폰에서 작은 글자 링크도 손가락으로 누르기 쉽게 — 보이는 자리는 그대로, 누르는 자리만 넓힌다(11/02 점검) */
.bc a, .byline a { display: inline-block; padding: 10px 6px; margin: -10px -6px }
/* 폰에서 바로가기 탭 다섯이 한 줄에 다 들어오게(«블로그»가 잘려 뒤에 더 있는 줄 몰랐다 · 11/02) */
@media (max-width: 480px) { .jump-in { gap: 4px } .jump a { padding: 8px 11px; font-size: .88rem } }