/* 치과(가상) 견본 — 고급·깔끔형 시안 C
   방향: 따뜻한 흰색·크림 바탕 + 섹션별 옅은 색 블록(크림·세이지) + 강조 1색(깊은 청록)
   규격: tokens.vars.css·tokens.base.css(간격 4·8·12·16·24·32·48·64·96·128, 글자 14·18·20·24·34·40)
   색 대비: 먹 #22302f는 흰·크림·세이지 바탕 모두에서 12:1 이상, 흰 글자는 강조 청록 위에서 8: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 {
  --cbg: #fdfbf6;        /* 따뜻한 흰색 */
  --ccream: #f3ead9;     /* 아주 옅은 크림 블록 — UX점검#4: 명도 차를 벌림 */
  --csage: #dfe8d8;      /* 아주 옅은 세이지 블록 — UX점검#4: 명도 차를 벌림 */
  --cink: #22302f;       /* 먹 */
  --cmuted: #4a5a53;     /* 보조 글자 */
  --caccent: #164b52;    /* 강조 1색 — 깊은 청록 */
  --caccent-ink: #0f373d;
  --caccent-tint: #dce9e7; /* 청록의 아주 옅은 톤 — 테두리·배지용 */
  --cline: #e3dcc9;
  --cline-strong: #b6ae99;
  --cnote-bg: #fff6d6;
  --cnote-ink: #4a3b00;
  --csans: "Pretendard Variable", "Pretendard", "Pretendard Fallback", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --gutter-mobile: 16px;  /* UX점검#9: 규격(4·8·12·16·24…) 밖이던 20px을 16px로 */
  --section-mobile: 48px; /* UX점검#9: 규격 밖이던 56px을 48px로 */
  --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); }
body { margin: 0; background: var(--cbg); color: var(--cink); font-family: var(--csans); font-size: var(--fs-18); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; height: auto; }
a { color: var(--caccent-ink); text-underline-offset: 3px; }
a:hover { color: var(--cink); }
:focus-visible { outline: 3px solid var(--caccent); outline-offset: 2px; }
/* UX점검#1: 청록 바탕(문의 띠·발·휴대폰 전화 버튼) 위에서는 포커스 테두리를 흰색으로 */
.c-cta :focus-visible, .c-foot :focus-visible, .c-mobile-call a.call:focus-visible { outline-color: #fff; }
h1, h2, h3, h4 { color: var(--cink); font-weight: 700; }
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; }
.skip:focus { left: var(--sp-16); top: var(--sp-16); background: #fff; padding: 0 var(--sp-16); z-index: 30; min-height: var(--touch-min); display: inline-flex; align-items: center; }

.shell { max-width: var(--container-shell); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--container-prose); }

/* 견본 고지 띠 */
.demo-bar { background: var(--cnote-bg); color: var(--cnote-ink); 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); }

/* 영문 보조 라벨 — UX점검#5: 어르신 대상에 정보 0·템플릿 인상이라 숨김 */
.c-eyebrow { display: none; }

/* 머리 */
.c-head { border-bottom: 1px solid var(--cline); background: var(--cbg); position: sticky; top: 0; z-index: 20; }
.c-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); min-height: 64px; }
.c-brand { display: flex; align-items: center; gap: var(--sp-8); text-decoration: none; color: var(--cink); font-weight: 700; font-size: var(--fs-20); min-height: var(--touch-min); white-space: nowrap; }
.c-brand svg { width: 32px; height: 32px; }
.c-nav { display: none; }
.c-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-4); }
.c-nav li { margin: 0; }
.c-nav a { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--sp-12); text-decoration: none; color: var(--cink); font-size: var(--fs-18); }
.c-nav a:hover { color: var(--caccent-ink); box-shadow: inset 0 -2px 0 var(--caccent); }
header .c-head-call { display: none; }
.menu-btn { min-height: var(--touch-min); min-width: var(--touch-min); border: 1px solid var(--cline-strong); background: #fff; color: var(--cink); font: inherit; font-size: var(--fs-18); padding: 0 var(--sp-12); border-radius: 2px; cursor: pointer; white-space: nowrap; }
.menu-panel { border-top: 1px solid var(--cline); background: var(--cbg); }
.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(--cline); }
.menu-panel a { display: flex; align-items: center; min-height: var(--btn-height); text-decoration: none; color: var(--cink); }
@media (min-width: 1024px) {
  .c-nav { display: block; }
  .menu-btn, .menu-panel { display: none !important; }
  header .c-head-call { display: inline-flex; }
}

/* 버튼 — 직사각형, 모서리는 거의 없음(고급·깔끔) */
.c-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: 2px; 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(--caccent); }
.c-btn-primary { background: var(--caccent); color: #fff; }
.c-btn-primary:hover { background: var(--caccent-ink); color: #fff; }
.c-btn-line { background: transparent; color: var(--caccent-ink); }
.c-btn-line:hover { background: var(--caccent-tint); color: var(--cink); }
.c-btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

/* 섹션 리듬 — 흰색/크림/세이지를 번갈아 */
.c-section { padding: var(--section) 0; }
.c-section-cream { background: var(--ccream); }
.c-section-sage { background: var(--csage); }
/* UX점검#4: 제목 위 청록 짧은 막대 — 위쪽 섹션에도 강조색을 보이게 */
.c-section h2::before { content: ""; display: block; width: var(--sp-32); height: 3px; background: var(--caccent); margin-bottom: var(--sp-16); }
.c-lead { font-size: var(--fs-20); line-height: var(--lh-body); color: var(--cink); }
.muted { color: var(--cmuted); }
.small { font-size: var(--fs-14); line-height: var(--lh-caption); }

/* 사진 자리 — 임시 선그림 SVG + 라벨 */
.photo-slot { position: relative; background: var(--ccream); overflow: hidden; border: 1px solid var(--cline); }
.photo-slot svg { width: 100%; height: 100%; display: block; }
.photo-slot .pf-bg { fill: var(--ccream); }
.photo-slot .pf-sage { fill: var(--csage); }
.photo-slot .pf-line { stroke: var(--caccent); fill: none; }
.photo-slot .pf-accent { fill: var(--caccent); }
.photo-slot .pf-tint { fill: var(--caccent-tint); }
.photo-label { position: absolute; left: var(--sp-12); bottom: var(--sp-12); background: #fff; color: var(--cmuted); font-size: var(--fs-14); line-height: var(--lh-caption); padding: var(--sp-4) var(--sp-12); border: 1px solid var(--cline); }

/* 첫 화면 — 왼쪽 큰 제목, 오른쪽 비대칭 콜라주 */
.c-hero { padding: var(--sp-48) 0 var(--sp-64); }
.c-hero-grid { display: grid; gap: var(--sp-32); align-items: center; }
.c-hero h1 { font-size: var(--fs-34); line-height: var(--lh-display); margin: 0 0 var(--sp-24); }
.c-hero .c-lead { margin-bottom: var(--sp-32); }
/* UX점검#3: 진료시간 발췌 — 진료 시간 표(아래 섹션)에 이미 있는 문장을 그대로 옮긴 것 */
.c-hero-facts { margin-top: var(--sp-32); padding-top: var(--sp-16); border-top: 1px solid var(--cline-strong); font-size: var(--fs-14); line-height: var(--lh-caption); color: var(--cmuted); }
.c-hero-facts p { margin: 0 0 var(--sp-4); }
.c-hero-facts p:last-child { margin-bottom: 0; }
.c-collage { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: var(--sp-16); height: 320px; }
.c-collage > .photo-slot:nth-of-type(1) { grid-column: 1; grid-row: 1 / 3; }
.c-collage > .photo-slot:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.c-collage > .photo-slot:nth-of-type(3) { grid-column: 2; grid-row: 2; }
@media (min-width: 1024px) {
  .c-hero { padding: var(--sp-64) 0 var(--sp-96); }
  .c-hero-grid { grid-template-columns: 6fr 6fr; gap: var(--sp-64); }
  .c-hero h1 { font-size: var(--fs-40); max-width: 12em; }
  .c-hero-facts { font-size: var(--fs-18); }
  .c-collage { height: 420px; }
  /* UX점검#2: 섹션 제목이 본문과 거의 같은 무게로 읽히던 것을 1024↑에서 벌림 */
  .c-section h2 { font-size: var(--fs-34); line-height: var(--lh-head); margin-bottom: var(--sp-24); }
}
/* UX점검#8: 첫 화면 두 버튼 폭이 들쭉날쭉 — 1023px 이하는 전체 폭으로 */
@media (max-width: 1023px) {
  .c-hero .c-btn { width: 100%; }
}

/* 진료 안내 — 큰 사진 카드 3개 */
.c-feature-grid { display: grid; gap: var(--sp-24); margin: var(--sp-32) 0 var(--sp-48); }
.c-feature-card { display: block; text-decoration: none; color: var(--cink); border: 1px solid var(--cline); background: #fff; }
.c-feature-card .photo-slot { aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid var(--cline); }
.c-feature-card .c-feature-body { padding: var(--sp-16) var(--sp-16) var(--sp-24); }
.c-feature-name { display: block; font-size: var(--fs-20); font-weight: 700; margin-bottom: var(--sp-8); }
.c-feature-desc { display: block; color: var(--cmuted); font-size: var(--fs-18); line-height: var(--lh-body); }
.c-feature-card:hover { border-color: var(--caccent); }
.c-feature-card:hover .c-feature-name { color: var(--caccent-ink); text-decoration: underline; }
@media (min-width: 1024px) { .c-feature-grid { grid-template-columns: repeat(3, 1fr); } }

/* 나머지 7개 — 깔끔한 2단 목록 */
.c-list-2col { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cink); }
.c-list-2col li { margin: 0; border-bottom: 1px solid var(--cline); }
.c-list-2col a { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4) var(--sp-16); padding: var(--sp-16) 0; text-decoration: none; color: var(--cink); min-height: var(--btn-height); }
.c-list-2col .name { font-size: var(--fs-18); font-weight: 700; line-height: var(--lh-subhead); }
.c-list-2col .desc { grid-column: 1 / 2; color: var(--cmuted); font-size: var(--fs-18); line-height: var(--lh-body); }
.c-list-2col .go { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--caccent); font-size: var(--fs-20); }
.c-list-2col a:hover .name { color: var(--caccent-ink); text-decoration: underline; }
@media (min-width: 1024px) {
  .c-list-2col { columns: 2; column-gap: var(--sp-64); border-top: 0; }
  .c-list-2col li { break-inside: avoid; }
  .c-list-2col li:first-child, .c-list-2col li:nth-child(5) { border-top: 1px solid var(--cink); }
}

/* 진료 시간 표 */
.c-hours { width: 100%; border-collapse: collapse; font-size: var(--fs-18); }
.c-hours th, .c-hours td { text-align: left; padding: var(--sp-12) 0; border-bottom: 1px solid var(--cline); vertical-align: top; }
.c-hours th { font-weight: 700; width: 40%; padding-right: var(--sp-16); }
.c-split { display: grid; gap: var(--sp-48); }
@media (min-width: 1024px) { .c-split { grid-template-columns: 5fr 7fr; gap: var(--sp-96); } }

/* 진료를 이렇게 합니다 — 가늘고 큰 숫자 */
.c-steps { display: grid; gap: var(--sp-32); margin-top: var(--sp-32); }
.c-step { display: grid; grid-template-columns: var(--sp-64) 1fr; gap: var(--sp-16); border-top: 1px solid var(--cline-strong); padding-top: var(--sp-24); }
.c-step-num { font-size: var(--fs-40); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; color: var(--caccent); }
.c-step h3 { margin-top: 0; margin-bottom: var(--sp-8); }
.c-step p { margin-bottom: 0; color: var(--cmuted); }
@media (min-width: 1024px) { .c-steps { grid-template-columns: repeat(3, 1fr); } .c-step { grid-template-columns: 1fr; } .c-step-num { margin-bottom: var(--sp-8); } }

/* FAQ — UX점검#6: 좁은 가운데 정렬 상자 대신 다른 섹션과 같은 왼쪽선에서 시작 */
.faq { max-width: var(--container-prose); }
.faq details { border-bottom: 1px solid var(--cline); }
.faq details:first-of-type { border-top: 1px solid var(--cline); }
.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(--caccent); font-size: var(--fs-24); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 0 var(--sp-16); }
.faq .a p { color: var(--cmuted); }

/* 문의 띠 */
.c-cta { background: var(--caccent); color: #fff; padding: var(--sp-48) 0; }
.c-cta h2 { color: #fff; margin: 0 0 var(--sp-12); }
.c-cta p { color: #fff; }
.c-cta .c-btn-primary { background: #fff; color: var(--caccent-ink); border-color: #fff; }
.c-cta .c-btn-line { color: #fff; border-color: #fff; }
.c-cta .c-btn-line:hover { background: var(--caccent-ink); color: #fff; }
.c-cta-grid { display: grid; gap: var(--sp-24); align-items: end; }
@media (min-width: 1024px) { .c-cta-grid { grid-template-columns: 1fr auto; } }

/* 발 — 강조 청록으로 마감 */
.c-foot { background: var(--caccent-ink); color: #e4ece9; padding: var(--sp-48) 0 var(--sp-64); font-size: var(--fs-14); line-height: var(--lh-caption); }
.c-foot a { color: #fff; }
.c-foot h2 { color: #fff; font-size: var(--fs-18); margin: 0 0 var(--sp-12); }
.c-foot-grid { display: grid; gap: var(--sp-32); }
@media (min-width: 1024px) { .c-foot-grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-64); } }
/* UX점검#9: 전화·주소가 발에서 가장 작은 글자였던 것을 한 단계 올림 */
.c-foot-grid > div:first-child { font-size: var(--fs-18); }
.c-foot ul { list-style: none; padding: 0; margin: 0; }
.c-foot li { margin: 0; }
.c-foot li a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.c-foot-legal { border-top: 1px solid #3c5a57; margin-top: var(--sp-32); padding-top: var(--sp-16); color: #b9c7c2; }
.c-foot-legal p { margin-bottom: var(--sp-8); }
.placeholder { background: var(--cnote-bg); color: var(--cnote-ink); padding: 0 var(--sp-4); }

/* 휴대폰 아래 고정 전화 */
.c-mobile-call { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cline); border-top: 1px solid var(--cline); }
.c-mobile-call a { display: flex; align-items: center; justify-content: center; min-height: var(--btn-height); background: var(--cbg); color: var(--cink); text-decoration: none; font-weight: 700; font-size: var(--fs-18); }
.c-mobile-call a.call { background: var(--caccent); color: #fff; }
body { padding-bottom: var(--btn-height); }
@media (min-width: 1024px) { .c-mobile-call { display: none; } body { padding-bottom: 0; } }