/* 베르니체 고객용 사이트 — DESIGN.md 토큰만 쓴다. 블랙/화이트/옐로우 + 검증된 회색. */
@font-face { font-family: "Pretendard"; src: url("fonts/Pretendard.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --black: #0A0A0A; --gray: #1C1C1C; --white: #FFFFFF; --yellow: #FFD400;
  --text-1: #0A0A0A; --text-2: #4A4A4A; --text-3: #5C5C5C; --line: rgba(10, 10, 10, .10);
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: 48px; --fs-4xl: 64px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --sp-12: 96px;
  --r-sm: 6px; --r-md: 12px; --r-full: 999px;
  --latin: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --kr: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --section: var(--sp-12);
}
@media (max-width: 760px) { :root { --section: var(--sp-8); } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--text-1); font-family: var(--latin), var(--kr); font-size: var(--fs-base); line-height: 1.7; word-break: keep-all; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
@media (max-width: 760px) { h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-5); }
.prose { max-width: 68ch; }
.wrap.prose { max-width: 1120px; }          /* 왼쪽 그리드 선에 맞춘다. 가운데로 떠 보이지 않게 */
.wrap.prose > * { max-width: 68ch; }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }
.label { font-family: var(--latin); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.num { font-family: var(--latin); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

/* 헤더 */
.header { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 64px; }
.logo img { height: 26px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav a { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text-1); }
.nav-toggle { display: none; background: none; border: 0; padding: var(--sp-2); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
@media (max-width: 900px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; }
  .nav.open { display: flex; }
  .nav a { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-base); }
  .nav .btn { display: none; }
  .nav-toggle { display: inline-block; }
}

/* 버튼 — 옐로우는 화면당 1포인트, 라이트 배경에선 박스 배경으로만 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 48px; padding: 0 var(--sp-5); border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-sm); border: 1px solid var(--black); background: var(--black); color: var(--white); transition: opacity 200ms ease-out; white-space: nowrap; }
.btn:hover { opacity: .85; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-yellow { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
/* 헤더의 예약은 글자 링크다. 박스 버튼 하나 더 얹으면 흔한 AI 헤더 지문이 된다. */
.nav .btn-sm { height: auto; padding: 0; border: 0; background: transparent; color: var(--text-1); font-size: var(--fs-sm); }
.nav .btn-sm::after { content: " →"; }
.btn-ghost { background: transparent; color: var(--black); }
.btn-sm { height: 40px; padding: 0 var(--sp-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* 히어로 */
.hero { padding: var(--sp-8) 0 var(--section); }   /* 아래를 더 무겁게 — 히어로가 페이지에 앉는다 */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-8); align-items: end; }
.hero h1 { font-size: var(--fs-4xl); font-weight: 800; margin-top: var(--sp-4); }
/* 첫 화면 한 번만 움직인다. 320ms ease-out, 글자 → 사진 순. */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-grid > div:first-child > * { animation: rise 320ms ease-out both; }
.hero-grid > div:first-child > *:nth-child(2) { animation-delay: 60ms; }
.hero-grid > div:first-child > *:nth-child(3) { animation-delay: 120ms; }
.hero-grid > div:first-child > *:nth-child(4) { animation-delay: 180ms; }
.hero-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-md); background: var(--gray); animation: rise 320ms ease-out 120ms both; }
.stats { animation: rise 320ms ease-out 240ms both; }
.hero .lede { font-size: var(--fs-lg); color: var(--text-2); margin-top: var(--sp-5); max-width: 34ch; }
.hero .actions { margin-top: var(--sp-6); }
/* 히어로 사진 순환 — 첫 장은 바닥에 고정. 2~4장은 위에 떠올라 다음 장이 다 뜬 뒤에 꺼지고, 마지막 장만 서서히 걷혀 첫 장이 드러난다(25초 주기, 흰 배경이 비치지 않는다) */
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero-photo img + img { opacity: 0; animation: hero-in 25s ease-out infinite both; }
.hero-photo img:nth-child(2) { animation-delay: 5s; }
.hero-photo img:nth-child(3) { animation-delay: 10s; }
.hero-photo img:nth-child(4) { animation-delay: 15s; }
.hero-photo img:nth-child(5) { animation-name: hero-out; animation-delay: 20s; }
@keyframes hero-in { 0% { opacity: 0; } 4% { opacity: 1; } 24% { opacity: 1; } 24.01% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-out { 0% { opacity: 0; } 4% { opacity: 1; } 16% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.stats b { display: block; font-family: var(--latin); font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stats span { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-1); }
@media (max-width: 760px) {
  .hero h1 { font-size: 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero-photo { order: -1; }
  .hero-photo { aspect-ratio: 4 / 3; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  /* 모바일에선 하단 바가 옐로우 1포인트다. 히어로 버튼은 검정으로. */
  .hero .btn-yellow { background: var(--black); color: var(--white); border-color: var(--black); }
}

/* 섹션 */
.section { padding: var(--section) 0; border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-6); margin-bottom: var(--sp-8); }
.section-head p { color: var(--text-2); max-width: 60ch; }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-6); } }
.section-foot { margin-top: var(--sp-8); }

/* 고민 — 박스 없이 선으로 */
/* 고민 — 번호 붙은 목록 + 상담에서 보는 것 사진 */
.concerns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--sp-8); align-items: center; }
.quotes { margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: q; }
.quotes li { list-style: none; counter-increment: q; display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-4); align-items: baseline; padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; }
.quotes li::before { content: "0" counter(q); font-family: var(--latin); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .08em; color: var(--text-2); }
.concerns-photo { margin: 0; }
.concerns-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); background: var(--gray); }
.concerns-photo figcaption { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-2); }
@media (max-width: 900px) { .concerns { grid-template-columns: 1fr; } .quotes li { font-size: var(--fs-lg); padding: var(--sp-4) 0; } }

/* 이유 */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.reasons > div { border-top: 1px solid var(--black); padding-top: var(--sp-5); }
.reasons .idx { display: block; font-family: var(--latin); font-size: var(--fs-3xl); font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin-bottom: var(--sp-6); font-variant-numeric: tabular-nums; }
.reasons h3 { font-size: var(--fs-xl); }
.reasons p { color: var(--text-2); margin-top: var(--sp-3); }
@media (max-width: 760px) { .reasons { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* 다크 섹션 — 흰 화면만 이어지지 않게. 다크 위 옐로우 숫자는 허용(대비 13.8:1) */
.section-dark { background: var(--black); color: var(--white); border-top: 0; }
.section-dark .section-head p, .section-dark .steps p { color: #B4B4B4; }
.section-dark .steps li { border-top-color: rgba(255, 255, 255, .18); }
.section-dark .steps li::before { color: var(--yellow); }
.section-dark + .section { border-top: 0; }

/* 전후 슬라이더 */
.ba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 900px) { .ba-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.ba { margin: 0; }
/* 정사각으로 잘라 아래쪽 워터마크 띠를 프레임 밖으로 보낸다. 눈썹은 위쪽에 있다. */
.ba-frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-md); background: var(--gray); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--white); transform: translateX(-1px); pointer-events: none; }
.ba-handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: var(--r-full); background: var(--white); color: var(--black); font-family: var(--latin); font-size: var(--fs-sm); font-weight: 600; display: grid; place-items: center; }
.ba-tag { position: absolute; bottom: var(--sp-3); font-family: var(--latin); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); background: rgba(10, 10, 10, .72); color: var(--white); pointer-events: none; }
.ba-tag-b { left: var(--sp-3); }
.ba-tag-a { right: var(--sp-3); }
.ba-frame input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba-frame input[type="range"]:focus-visible + * { outline: 2px solid var(--yellow); }
.ba figcaption { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-2); }

/* 플레이스 방문자 리뷰 — 박스 없이 선으로 나눈 목록 */
.pl-reviews { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-6); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .pl-reviews { grid-template-columns: 1fr; } }
.pl-reviews li { padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--sp-2); align-content: start; }
.pl-reviews .who { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pl-reviews .who b { color: var(--text-1); font-weight: 600; }
.pl-reviews .body { font-size: var(--fs-base); line-height: 1.7; }
.pl-reviews .tags { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); }
.pl-reviews .reply { font-size: var(--fs-sm); color: var(--text-2); padding-left: var(--sp-3); border-left: 2px solid var(--line); }

/* 원장 */
.director-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-8); align-items: center; }
.director-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: var(--r-md); background: var(--gray); }
.director-intro { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); max-width: 52ch; }
.director-intro p { font-size: var(--fs-lg); line-height: 1.6; }
.cv { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.cv li { padding-left: var(--sp-4); position: relative; color: var(--text-2); }
.cv li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1px; background: var(--text-1); }
@media (max-width: 760px) { .director-grid { grid-template-columns: 1fr; gap: var(--sp-6); } .director-photo img { aspect-ratio: 4 / 5; } }

/* 손글씨 후기 */
.hand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 760px) { .hand-grid { grid-template-columns: 1fr; } }
.hand { margin: 0; }
.hand img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); }
.hand figcaption { margin-top: var(--sp-3); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }

/* 시술 흐름 — 진짜 순서라 번호를 쓴다 */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-5); counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--black); padding-top: var(--sp-4); }
.steps li::before { content: "0" counter(step); display: block; font-family: var(--latin); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .08em; color: var(--text-2); }
.steps h3 { font-size: var(--fs-lg); margin-top: var(--sp-2); }
.steps p { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--sp-2); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* 갤러리 */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.tabs button { font: inherit; font-size: var(--fs-sm); font-weight: 600; height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-full); border: 1px solid var(--line); background: var(--white); color: var(--text-2); cursor: pointer; transition: background 120ms ease-out, color 120ms ease-out; }
.tabs button[aria-pressed="true"] { background: var(--black); color: var(--white); border-color: var(--black); }
.tabs button:active { transform: translateY(1px); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.grid figure { margin: 0; }
.grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); background: var(--gray); }
.grid figcaption { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-2); }
.grid figure[hidden] { display: none; }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
/* 갤러리 섹션은 화면 끝까지 — 모든 섹션이 같은 폭·같은 리듬으로 반복되지 않게 */
.section-bleed .grid { margin: 0 calc(-1 * var(--sp-5)); padding: 0 var(--sp-2); }
@media (min-width: 1200px) { .section-bleed .grid { margin: 0 calc((1120px - 100vw) / 2 + var(--sp-5)); padding: 0 var(--sp-5); } }

/* 후기 */
.review-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.review-band .big { font-family: var(--latin); font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.review-band .big small { font-size: var(--fs-lg); color: var(--text-2); font-weight: 400; margin-left: var(--sp-2); }
@media (max-width: 760px) { .review-band { grid-template-columns: 1fr; gap: var(--sp-5); } .review-band .big { font-size: var(--fs-3xl); } }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--latin); font-weight: 400; color: var(--text-2); }
.faq details[open] summary::after { content: "–"; }
.faq .answer { color: var(--text-2); padding: 0 0 var(--sp-5); max-width: 68ch; }

/* 케어 노트 목록 — 썸네일 + 날짜 + 제목 */
.notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
.notes li a { display: grid; gap: var(--sp-2); }
.notes img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-md); background: var(--gray); margin-bottom: var(--sp-2); }
.notes time { font-family: var(--latin); font-size: var(--fs-sm); color: var(--text-2); }
.notes .ext { font-size: var(--fs-xs); color: var(--text-3); }
.notes h3 { font-size: var(--fs-lg); }
.notes li a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.notes p { color: var(--text-2); font-size: var(--fs-sm); }
@media (max-width: 900px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .notes { grid-template-columns: 1fr; } }

/* 글 본문 */
.article { padding: var(--section) 0; }
.article header { max-width: 68ch; margin-bottom: var(--sp-8); }
.article header h1 { margin-top: var(--sp-3); }
.article .cover { margin: var(--sp-8) 0; }
.article .cover img { width: 100%; max-height: 640px; object-fit: cover; border-radius: var(--r-md); }
.article .body { max-width: 68ch; }
.article .body p { margin-bottom: var(--sp-5); }
.article .body h2 { font-size: var(--fs-xl); margin: var(--sp-8) 0 var(--sp-3); }
.article .photos { margin-top: var(--sp-8); }
.article .photos h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-5); }
.article .source { margin-top: var(--sp-8); font-size: var(--fs-sm); color: var(--text-2); }

/* 오시는 길 */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, .8fr); gap: var(--sp-8); }
.contact-photo { margin: 0; }
.contact-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 40%; border-radius: var(--r-md); background: var(--gray); }
.contact-photo figcaption { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-2); }
.kv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.kv li { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.kv li span:first-child { color: var(--text-2); }
.map { aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--gray); color: var(--white); display: flex; align-items: flex-end; padding: var(--sp-5); }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* 공간 사진 — 풀블리드 띠. 글자를 얹지 않는다 */
.photo-band { margin: 0; padding-bottom: var(--section); }
.photo-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 55%; background: var(--gray); }
.photo-band figcaption { font-size: var(--fs-sm); color: var(--text-2); padding-top: var(--sp-3); }
@media (max-width: 760px) { .photo-band img { aspect-ratio: 4 / 3; } }

/* 시술 흐름 — 단계 목록 옆에 시술실 사진. 사진 높이는 목록에 맞춘다 */
.process { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-8); }
.process .steps { grid-template-columns: 1fr; gap: 0; align-content: start; }
.process .steps li { padding: var(--sp-4) 0; }
.process .steps li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.process-photo { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--sp-2); }
.process-photo img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 45%; border-radius: var(--r-md); background: var(--gray); }
.process-photo figcaption { font-size: var(--fs-sm); color: #B4B4B4; }
@media (max-width: 900px) { .process { grid-template-columns: 1fr; } .process-photo img { height: auto; aspect-ratio: 4 / 3; } }

/* 사진 두 장 나란히(원장 페이지) */
.photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.photo-pair figure { margin: 0; }
.photo-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 45%; border-radius: var(--r-md); background: var(--gray); }
.photo-pair figcaption { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-2); }
@media (max-width: 760px) { .photo-pair { grid-template-columns: 1fr; } }

/* 다크 CTA 밴드 — 다크 위 옐로우 텍스트는 허용(대비 13.8:1) */
.band { background: var(--black); color: var(--white); padding: var(--section) 0; }
.band h2 { font-size: var(--fs-3xl); }
.band p { color: #B4B4B4; margin-top: var(--sp-4); max-width: 40ch; }
.band .actions { margin-top: var(--sp-6); }
.band .btn { border-color: var(--white); background: var(--white); color: var(--black); }
.band .btn-ghost { background: transparent; color: var(--white); }
.band .hi { color: var(--yellow); }
@media (max-width: 760px) { .band h2 { font-size: var(--fs-2xl); } }

/* 푸터 — 링크 기둥 3개 대신 한 줄 명함. 상호·주소·전화·시간 한 줄, 링크 한 줄 */
.footer { padding: var(--sp-8) 0 calc(var(--sp-8) + 64px); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.footer .row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3) var(--sp-6); }
.footer .row + .row { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.footer img { height: 18px; width: auto; }
.footer a { color: var(--text-1); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.footer .nap { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }

/* 모바일 하단 고정 바 */
.bar { display: none; }
@media (max-width: 900px) {
  .bar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); }
  .bar .btn { width: 100%; }
}

/* 사실 블록 — 시술 안내·FAQ 위. 검색엔진과 AI가 옮겨 적기 좋은 짧은 항목 */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); margin: 0; border-top: 1px solid var(--black); padding-top: var(--sp-5); }
.facts div { min-width: 0; }
.facts dt { font-size: var(--fs-sm); color: var(--text-2); }
.facts dd { margin: var(--sp-1) 0 0; font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 스크롤 등장 — JS가 .reveal을 붙인 요소만. 투명도·이동만 움직인다 */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 320ms ease-out, transform 320ms ease-out; }
.reveal.in { opacity: 1; transform: none; }

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