/* 치과(가상) 견본 — 시안 고급 A: 다크·화이트 교차 + 금색 포인트
   규격: ../../site/assets/tokens.vars.css·tokens.base.css 그대로 사용
         간격은 --sp-4~--sp-128만, 글자는 14·18·20·24·34·40 6종만 사용
   방향: 짙은 차콜·남색 구간과 흰 구간을 번갈아 리듬을 만들고, 포인트색은 금색(앰버) 1개만.
         사진은 아직 없다 — 모든 사진 자리는 .photo-slot(추상 선그림+자리표시 문구)로 둔다.
   대비 확인(흰 바탕): --ink 19:1 · --muted 5.9:1 · --gold-ink 5.0:1
   대비 확인(다크 바탕 --dark): --on-dark 16:1 · --muted-dark 8.4:1 · --gold 6.5:1 · 금색bg+ink텍스트 6.9:1 */

@font-face {
  font-family: "Pretendard Fallback";
  src: local("Malgun Gothic"), local("맑은 고딕"), local("Apple SD Gothic Neo"), local("Noto Sans KR");
  size-adjust: 97%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

:root {
  --bg: #ffffff;
  --bg-soft: #f4f2eb;
  --dark: #12161c;
  --dark-2: #1b212b;
  --ink: #14181f;
  --muted: #5b6472;
  --on-dark: #f5f2ea;
  --muted-dark: #aab2bd;
  --gold: #c79a4b;
  --gold-ink: #8a6a2e;
  --line: #e4e0d4;
  --line-dark: #2a313c;
  --sans: "Pretendard Variable", "Pretendard", "Pretendard Fallback", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --section-mobile: 64px; /* UX점검 #8: 기본 56px은 4·8·…·64·96 규격 밖, 64로 규격화 */
  --gutter: var(--gutter-mobile);
  --section: var(--section-mobile);
}
@media (min-width: 768px) { :root { --gutter: var(--gutter-desktop); --section: var(--section-desktop); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--sp-96); overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--fs-18); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; height: auto; }
a { color: var(--gold-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { color: var(--ink); font-weight: 800; letter-spacing: -0.01em; }
ul, ol { margin: 0 0 var(--para-gap); padding-left: var(--sp-24); }
li { line-height: var(--lh-listitem); margin-bottom: var(--sp-8); }
.skip { position: absolute; left: -9999px; min-height: var(--touch-min); display: inline-flex; align-items: center; }
.skip:focus { left: var(--sp-16); top: var(--sp-16); background: #fff; padding: 0 var(--sp-16); z-index: 40; }

.shell { max-width: var(--container-shell); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--container-prose); }
/* UX점검 #7: FAQ의 .shell.prose 조합만 680px로 다시 좁아져 가운데 좁은 단(x≈410)으로 떴다. 다른 섹션과 같은 1200px 축(x=152)으로 되돌린다 */
.shell.prose { max-width: var(--container-shell); }
.muted { color: var(--muted); }

/* 영문 보조 라벨(눈썹 라벨) — 흰 구간 기본, 다크 구간은 더 밝은 금색 */
.eyebrow { font-size: var(--fs-14); line-height: var(--lh-caption); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; margin: 0 0 var(--sp-8); }
.hero-a .eyebrow, .hours-a .eyebrow, .cta .eyebrow { color: var(--gold); }
.kicker { font-size: var(--fs-14); line-height: var(--lh-caption); color: var(--muted-dark); margin: 0 0 var(--sp-12); }
.lead { font-size: var(--fs-20); line-height: var(--lh-body); }

h2 { font-size: var(--fs-24); line-height: var(--lh-head); margin: 0 0 var(--sp-16); }
@media (min-width: 1024px) { h2 { font-size: var(--fs-34); } }
h3 { font-size: var(--fs-20); line-height: var(--lh-subhead); margin: var(--h3-top) 0 var(--h3-bottom); }

/* 견본 고지 띠 */
.demo-bar { background: #fff6d6; color: #4a3b00; font-size: var(--fs-14); line-height: var(--lh-caption); border-bottom: 1px solid #e8d78f; }
.demo-bar .shell { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }

/* 머리 — 다크 고정 */
.site-head { background: var(--dark); position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line-dark); }
.site-head .shell { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--sp-8); text-decoration: none; color: var(--on-dark); font-weight: 800; font-size: var(--fs-18); min-height: var(--touch-min); white-space: nowrap; }
.brand svg { width: 32px; height: 32px; }
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-4); }
.nav li { margin: 0; }
.nav a { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--sp-12); text-decoration: none; color: var(--muted-dark); font-size: var(--fs-18); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--on-dark); box-shadow: inset 0 -2px 0 var(--gold); }
.site-head .head-call { display: none; }
.menu-btn { min-height: var(--touch-min); min-width: var(--touch-min); border: 1px solid var(--line-dark); background: var(--dark-2); color: var(--on-dark); font: inherit; font-size: var(--fs-18); padding: 0 var(--sp-12); border-radius: 4px; cursor: pointer; white-space: nowrap; }
.menu-panel { border-top: 1px solid var(--line-dark); background: var(--dark); }
.menu-panel[hidden] { display: none; }
.menu-panel ul { list-style: none; margin: 0; padding: var(--sp-8) var(--gutter) var(--sp-16); }
.menu-panel li { margin: 0; border-bottom: 1px solid var(--line-dark); }
.menu-panel a { display: flex; align-items: center; min-height: var(--btn-height); text-decoration: none; color: var(--on-dark); }
@media (min-width: 1024px) {
  .nav { display: block; }
  .menu-btn, .menu-panel { display: none !important; }
  .site-head .head-call { display: inline-flex; }
}

/* 버튼 — 직사각형, 모서리 4px, 색은 금 1가지만 */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: var(--btn-height); padding: 0 var(--sp-24); border-radius: 4px; font-size: var(--fs-18); font-weight: 700; line-height: var(--lh-button); letter-spacing: var(--ls-button); text-decoration: none; border: 1px solid var(--gold); }
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: #d9ad63; color: var(--ink); }
.btn-line { background: transparent; color: var(--on-dark); border-color: var(--gold); }
.btn-line:hover { background: rgba(255,255,255,.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

/* 섹션 리듬 */
.section { padding: var(--section) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-soft { background: var(--bg-soft); }

/* 사진 자리 — 사진이 아직 없을 때의 공통 표시 */
.photo-slot { position: relative; background: linear-gradient(145deg, #e9e6dc, #d7d2c3); overflow: hidden; border-radius: 4px; }
.photo-slot svg { width: 100%; height: 100%; display: block; }
.slot-label { display: inline-flex; align-items: center; gap: var(--sp-8); position: absolute; left: var(--sp-16); bottom: var(--sp-16); background: rgba(18,22,28,.72); color: var(--on-dark); font-size: var(--fs-14); line-height: 1.3; padding: var(--sp-8) var(--sp-12); border: 1px solid rgba(199,154,75,.6); border-radius: 4px; max-width: calc(100% - var(--sp-32)); }
.slot-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }

/* 홈 첫 화면 — 화면의 80~90% */
.hero-a { position: relative; min-height: 80vh; display: flex; align-items: flex-end; overflow: hidden; }
@media (min-width: 1024px) { .hero-a { min-height: 80vh; align-items: center; } } /* UX점검 #2: 88vh→80vh, 데스크톱은 세로 가운데로 끌어올림 */
.hero-a__bg { position: absolute; inset: 0; border-radius: 0; }
.hero-a__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,13,17,.92) 0%, rgba(10,13,17,.62) 45%, rgba(10,13,17,.28) 100%); }
.hero-a__content { position: relative; z-index: 2; width: 100%; padding-top: var(--sp-96); padding-bottom: var(--sp-64); color: var(--on-dark); }
.hero-a h1 { color: var(--on-dark); font-size: var(--fs-34); line-height: var(--lh-display); margin: 0 0 var(--sp-24); }
.hero-a .lead { color: var(--muted-dark); margin-bottom: var(--sp-32); }
/* UX점검 #1(치명): 기본 .slot-label의 left/bottom과 아래 right/top이 함께 걸려 상자가 히어로 전체로 늘어나 h1·전화 버튼을 덮었다. left/bottom을 끊고 콘텐츠(z-index:2)보다 아래(z-index:1)로 둔다 */
.hero-a .slot-label { position: absolute; left: auto; bottom: auto; right: var(--gutter); top: var(--sp-16); z-index: 1; }
@media (min-width: 1024px) { .hero-a h1 { font-size: var(--fs-40); max-width: 14ch; } .hero-a .lead { max-width: 46ch; } }
@media (max-width: 767px) { .hero-a .btn-row .btn { width: 100%; } } /* UX점검 #3: 전화·시간 버튼 폭을 모바일에서 맞춤 */

/* 진료 안내 — 큰 타일 2 + 작은 타일 8 */
.care-a .prose { margin-bottom: var(--sp-32); }
.tiles-feature { display: grid; gap: var(--sp-24); margin: 0 0 var(--sp-32); }
@media (min-width: 768px) { .tiles-feature { grid-template-columns: 1fr 1fr; gap: var(--sp-32); } }
.tile-feature { display: block; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.tile-feature:hover { border-color: var(--gold); }
.tile-feature__photo { aspect-ratio: 4 / 3; border-radius: 0; }
.tile-feature__body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-8) var(--sp-16); padding: var(--sp-24); min-height: var(--btn-height); }
.tile-feature .name { grid-column: 1 / 2; font-size: var(--fs-24); font-weight: 800; }
.tile-feature .desc { grid-column: 1 / 2; color: var(--muted); font-size: var(--fs-18); }
.tile-feature .go { grid-row: 1 / 3; grid-column: 2; color: var(--gold-ink); font-size: var(--fs-24); }
.tile-feature:hover .name { color: var(--gold-ink); text-decoration: underline; }

.tiles-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .tiles-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tiles-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.tiles-grid li { margin: 0; background: var(--bg); }
.tiles-grid a { display: flex; flex-direction: column; gap: var(--sp-8); height: 100%; padding: var(--sp-24); text-decoration: none; color: var(--ink); min-height: var(--btn-height); }
.tiles-grid .icon { width: 32px; height: 32px; color: var(--gold-ink); }
.tiles-grid .name { font-size: var(--fs-18); font-weight: 800; }
.tiles-grid .desc { color: var(--muted); font-size: var(--fs-14); line-height: var(--lh-caption); flex: 1; }
.tiles-grid a:hover { background: var(--bg-soft); }
.tiles-grid a:hover .name { color: var(--gold-ink); }

/* 진료 시간 — 다크 구간 */
.hours-a { background: var(--dark); color: var(--on-dark); }
.hours-a h2 { color: var(--on-dark); }
.hours-a p { color: var(--muted-dark); }
.hours-a a { color: var(--gold); }
.hours-a .split { display: grid; gap: var(--sp-48); }
@media (min-width: 1024px) { .hours-a .split { grid-template-columns: 5fr 7fr; gap: var(--sp-96); align-items: center; } }
.hours-a__big { display: flex; align-items: baseline; gap: var(--sp-16); margin: var(--sp-32) 0 0; }
.hours-a__big .num { font-size: var(--fs-40); font-weight: 800; color: var(--gold); line-height: 1; }
.hours-a__big .label { font-size: var(--fs-14); color: var(--muted-dark); max-width: 14ch; }
.hours-a__table { width: 100%; border-collapse: collapse; font-size: var(--fs-18); }
.hours-a__table th, .hours-a__table td { text-align: left; padding: var(--sp-16) 0; border-bottom: 1px solid var(--line-dark); vertical-align: top; }
.hours-a__table th { font-weight: 700; width: 42%; padding-right: var(--sp-16); color: var(--on-dark); }
.hours-a__table td { color: var(--muted-dark); }
.hours-a__table tr.is-peak td, .hours-a__table tr.is-peak th { color: var(--gold); }
.hours-a__table caption { text-align: left; font-size: var(--fs-14); color: var(--muted-dark); padding-bottom: var(--sp-8); }

/* 진료를 이렇게 합니다 */
.way-a__head { margin-bottom: var(--sp-32); max-width: var(--container-prose); }
.way-a__photo { aspect-ratio: 16 / 7; margin-bottom: var(--sp-48); }
@media (max-width: 767px) { .way-a__photo { aspect-ratio: 4 / 3; } } /* UX점검 권고: 390폭 16:7은 높이 150px 남짓이라 4:3으로 */
.way-a__list { display: grid; gap: var(--sp-32); }
@media (min-width: 768px) { .way-a__list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-48); } }
.way-a__item { display: flex; flex-direction: column; gap: var(--sp-16); }
.way-a__item .icon { width: 40px; height: 40px; color: var(--gold-ink); flex: none; }
.way-a__item h3 { margin: 0; }
.way-a__item p { margin: 0; color: var(--muted); }

/* 치과 건강보험 */
.ins-a__nums { display: flex; gap: var(--sp-32); margin: 0 0 var(--sp-24); flex-wrap: wrap; }
.ins-a__nums .num { display: block; font-size: var(--fs-40); font-weight: 800; color: var(--gold-ink); line-height: 1; }
.ins-a__nums .num small { display: block; font-size: var(--fs-14); font-weight: 700; color: var(--muted); margin-top: var(--sp-8); }
.split { display: grid; gap: var(--sp-48); }
@media (min-width: 1024px) { .split { grid-template-columns: 5fr 7fr; gap: var(--sp-96); } }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-16); align-items: center; min-height: var(--btn-height); padding: var(--sp-16) 0; font-weight: 700; font-size: var(--fs-18); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-ink); font-size: var(--fs-24); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 0 var(--sp-16); color: var(--muted); max-width: var(--container-prose); } /* #7 폭 확장 뒤에도 답변 한 줄 길이는 읽기 좋게 유지 */
.faq .a a { color: var(--gold-ink); }

/* 문의 띠 — 다크 */
.cta { background: var(--dark); color: var(--on-dark); padding: var(--section) 0; } /* UX점검 #8: 48px 고정값을 섹션 리듬(--section)에 맞춤 */
.cta h2 { color: var(--on-dark); margin: 0 0 var(--sp-12); }
.cta p { color: var(--muted-dark); }
.cta-grid { display: grid; gap: var(--sp-24); align-items: end; }
@media (min-width: 1024px) { .cta-grid { grid-template-columns: 1fr auto; } }

/* 발 — 다크 */
.site-foot { background: var(--dark); color: var(--muted-dark); padding: var(--sp-48) 0 var(--sp-64); font-size: var(--fs-14); line-height: var(--lh-caption); border-top: 1px solid var(--line-dark); }
.site-foot a { color: var(--on-dark); }
.site-foot a:hover { color: var(--gold); }
.site-foot h2 { color: var(--on-dark); font-size: var(--fs-18); margin: 0 0 var(--sp-12); }
.foot-grid { display: grid; gap: var(--sp-32); }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-64); } }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.foot-legal { border-top: 1px solid var(--line-dark); margin-top: var(--sp-32); padding-top: var(--sp-16); color: #8b93a0; }
.foot-legal p { margin-bottom: var(--sp-8); }
.placeholder { background: #fff6d6; color: #4a3b00; padding: 0 var(--sp-4); border-radius: 2px; }

/* 휴대폰 아래 고정 전화 */
/* UX점검 #10: 다크 사이트 위에 순백 칸이 떠서 금색 전화 칸보다 시선을 끌던 것을 다크 톤으로 맞춤(전화 칸은 금색 그대로) */
.mobile-call { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-dark); border-top: 1px solid var(--line-dark); }
.mobile-call a { display: flex; align-items: center; justify-content: center; min-height: var(--btn-height); background: var(--dark); color: var(--on-dark); text-decoration: none; font-weight: 700; font-size: var(--fs-18); }
.mobile-call a.call { background: var(--gold); color: var(--ink); }
body { padding-bottom: var(--btn-height); }
@media (min-width: 1024px) { .mobile-call { display: none; } body { padding-bottom: 0; } }