/* 공개 사이트(site.html) 공통 스타일. --primary/--accent 는 한의원마다 site.html 인라인 <style>에서
   주입(CMS 설정드로어에서 편집) — 나머지 토큰(종이/먹 계열 중립색)은 전 한의원 공통 고정 디자인.
   2026-07-18: 목업(먹/한지/약초 톤) 반영 — 특정 한의원 색을 하드코딩하지 않고 var(--primary)/var(--accent)
   에서 color-mix 로 짙은/옅은 버전을 뽑아써서, 한의원이 어떤 색을 고르든 같은 톤 구조가 나오게 함. */
:root {
  /* ★2026-07-21 — 배경은 흰색이 기본, 색은 실제 사진 있는 자리에서만(참고 레퍼런스 사이트 패턴).
     hero 섹션만 예외 — 기존 종이색 그대로 고정해서 안 건드림(--hero-bg 로 분리, 아래 .hero 참고). */
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --hero-bg: #f1efe7;
  --ink: #262320;
  --ink-soft: #55504a;
  --rule: rgba(38, 35, 32, .12);
  --radius: 3px;

  /* --primary/--accent 는 site.html 인라인 <style>에서 한의원별로 재정의됨 — 여기 기본값은 폴백. */
  --primary: #2e7d5b;
  --accent: #c8a165;

  /* ★2026-07-19 fix — 아래는 전부 두 항 합이 100%(65+35, 70+30 등)가 되도록 씀. color-mix는 합이
     100%를 넘으면 그 비율대로 자동 축소정규화해서, "100%, black 30%"(합130%) 라고 써도 실제로는
     검정이 23%밖에 안 섞임 — 의도한 것보다 훨씬 옅게 나오는 버그였음(목업의 pine-deep은 거의 검정에
     가까운 짙은색인데 그 정도로 안 어두웠던 원인). 합을 100%로 맞춰야 적은 숫자가 곧 실제 비율이 됨. */
  --primary-deep: color-mix(in srgb, var(--primary) 65%, black 35%);
  --primary-mid: color-mix(in srgb, var(--primary) 70%, white 30%);
  --primary-tint: color-mix(in srgb, var(--primary) 25%, var(--paper) 75%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1c19;
    --paper-raised: #21231f;
    --hero-bg: #1a1c19;
    --ink: #ece8df;
    --ink-soft: #b7b2a6;
    --rule: rgba(236, 232, 223, .14);
    --primary-deep: color-mix(in srgb, var(--primary) 75%, white 25%);
    --primary-mid: color-mix(in srgb, var(--primary) 70%, black 30%);
    --primary-tint: color-mix(in srgb, var(--primary) 20%, var(--paper) 80%);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: "Noto Serif KR", "Nanum Myeongjo", "Malgun Gothic", serif;
  line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--primary-deep); text-decoration: none; }
.sans { font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }

/* 운영자 dev 랜딩(landing.html)·기타 레거시 페이지 호환용 유틸 — 새 사이트 마크업(.wrap)과 별개로 유지 */
.container { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.muted { color: var(--ink-soft); }
.clinic-list { list-style: none; margin-top: 20px; }
.clinic-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); }

/* ── nav ── */
.site-header {
  position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--hero-bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule);
}
.nav { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 9px; }
.logo-img { height: 28px; width: auto; max-width: 120px; object-fit: contain; border-radius: 4px; }
.logo { font-size: 19px; letter-spacing: .04em; font-weight: 600; color: var(--primary-deep); }
.nav nav { display: flex; gap: 26px; margin-left: auto; font-family: "Pretendard", sans-serif; font-size: 14px; }
.nav nav a { color: var(--ink-soft); text-decoration: none; }
.nav nav a:hover { color: var(--primary); }
/* 네비 하위탭(드롭다운) — 항목에 자식 있으면 화살표 뜨고, 호버/포커스 시 아래로 펼쳐짐 */
.navitem { position: relative; }
.navcaret { font-size: .7em; opacity: .7; }
.navdrop {
  position: absolute; top: 100%; left: 0; margin-top: 8px; background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px; display: none;
  flex-direction: column; min-width: 140px; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 30;
}
.navitem:hover .navdrop, .navitem:focus-within .navdrop { display: flex; }
.navdrop a { padding: 8px 10px; border-radius: 6px; white-space: nowrap; }
.navdrop a:hover { background: var(--primary-tint); }
.btn-call {
  font-family: "Pretendard", sans-serif; font-size: 13.5px; font-weight: 600; color: var(--paper-raised);
  background: var(--primary-mid); padding: 9px 16px; border-radius: var(--radius); white-space: nowrap;
}

/* ── hero ── */
.hero { position: relative; padding: 108px 0 96px; overflow: hidden; background: var(--hero-bg); color: var(--ink); text-align: left; }
.hero::before {
  content: ""; position: absolute; right: -8%; top: -20%; width: 640px; height: 640px; border-radius: 50%;
  /* --primary-tint 는 이제 흰 바탕 기준이라 예전보다 살짝 밝아짐 — hero는 안 건드리기로 해서 여기만
     예전 종이색(--hero-bg) 기준으로 직접 다시 계산해 색 그대로 고정 */
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 25%, var(--hero-bg) 75%), transparent 70%);
  opacity: .6; z-index: 0;
}
.hero .container { position: relative; z-index: 1; max-width: 1040px; }
.hero h1 {
  font-size: clamp(32px, 5vw, 50px); line-height: 1.3; font-weight: 600; margin: 0 0 22px; max-width: 15ch;
  text-wrap: balance; color: var(--primary-deep);
}
.hero p {
  font-family: "Pretendard", sans-serif; font-size: 16.5px; color: var(--ink-soft); max-width: 46ch;
  margin: 0 0 32px; font-weight: 400; opacity: 1;
}
.btn-hero {
  font-family: "Pretendard", sans-serif; font-weight: 600; font-size: 15px; color: var(--paper-raised);
  background: var(--accent); padding: 15px 26px; border-radius: var(--radius); letter-spacing: .01em;
}

/* ── section shell ── */
#about, #treatments, #doctors, #hours { padding: 84px 0; border-top: 1px solid var(--rule); }
.section h2, #about h2, #treatments h2, #doctors h2, #hours h2, #location h2 {
  font-size: 27px; font-weight: 600; margin: 0 0 36px; color: var(--primary-deep); text-wrap: balance;
}
.kicker {
  font-size: 12px; letter-spacing: .2em; color: var(--ink-soft); text-transform: uppercase; margin: 0 0 12px;
}

/* about */
.lead { font-family: "Pretendard", sans-serif; font-size: 15.5px; color: var(--ink-soft); max-width: 58ch; }
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.about-stats { display: grid; gap: 22px; font-family: "Pretendard", sans-serif; }
.about-stats .stat { border-left: 2px solid var(--primary-tint); padding-left: 16px; }
.about-stats .stat b { display: block; font-size: 24px; color: var(--primary-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.about-stats .stat span { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }

/* cards (진료항목) */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.card { background: var(--paper-raised); padding: 28px 24px; border: 0; border-radius: 0; }
.card .idx { font-size: 12px; color: var(--ink-soft); letter-spacing: .1em; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.card h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; color: var(--primary-deep); }
.card p { font-family: "Pretendard", sans-serif; font-size: 13.6px; color: var(--ink-soft); margin: 0; }

/* 의료진 — 카드 대신 원형 아바타 + 리스트형(mockup 반영) */
#doctors .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; background: none; border: 0; }
.card.doctor {
  display: flex; gap: 18px; align-items: flex-start; background: none; border: 0; padding: 0;
}
.card.doctor img, .doctor-avatar {
  width: 76px; height: 76px; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--primary-tint); color: var(--primary-deep);
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600;
  font-family: "Pretendard", sans-serif;
}

.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; }

/* hours */
.hours { border-collapse: collapse; font-family: "Pretendard", sans-serif; font-size: 14.5px; width: 100%; }
.hours tr { border-bottom: 1px solid var(--rule); }
.hours tr:last-child { border-bottom: none; }
.hours th { text-align: left; padding: 12px 0; color: var(--ink); font-weight: 600; width: 40%; }
.hours td { padding: 12px 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* location */
#location .lead { margin-bottom: 6px; }
.map { margin-top: 20px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); }
.map iframe { display: block; width: 100%; }
.mapbox {
  margin-top: 20px; height: 200px; border-radius: var(--radius); border: 1px solid var(--rule);
  background: repeating-linear-gradient(135deg, transparent, transparent 12px, var(--rule) 12px, var(--rule) 13px), var(--paper);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--ink-soft);
}

/* footer */
.site-footer {
  background: var(--primary-mid); color: color-mix(in srgb, var(--paper) 82%, transparent);
  padding: 44px 0; font-family: "Pretendard", sans-serif;
}
.site-footer .container { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; }
.site-footer strong { color: #fff; font-family: "Noto Serif KR", serif; font-size: 17px; display: block; margin-bottom: 6px; }
.site-footer span { font-size: 13px; opacity: .85; }

@media (max-width: 640px) {
  .nav nav { display: none; }
  .hero h1 { font-size: 2rem; }
  .site-footer .container { flex-direction: column; align-items: flex-start; }
  #doctors .cards { grid-template-columns: 1fr; }
  .split, .about-grid { grid-template-columns: 1fr; }
  /* ★위치이동(드래그) 오프셋은 PC 화면 기준 좌표라 폭 좁은 화면에선 겹치거나 밀려날 수 있어 모바일에서 무효화 —
     문서흐름 자체(요소가 차지하는 공간)는 안 바뀌니 안전하게 원래 자리로 돌아감.
     ★reviewer 지적 — [data-field]는 admin/edit.html(편집화면) 전용 속성이라 실제 방문자가 보는 site.html
     엔 아예 없음(0개, grep 확인) → 이 규칙이 편집화면에서만 먹고 진짜 공개사이트 모바일에선 무효했음.
     site.html의 fstyle()이 오프셋 있을 때만 style="...transform:translate(...)..."를 찍으므로,
     그 문자열을 잡는 속성선택자를 추가해서 공개사이트에도 실제로 적용되게 함. */
  [data-field], [style*="translate("] { transform: none !important; }
}

/* ── 랜딩페이지(page.html) / 홈의 증상별 안내 ─────────────────────────
   근거: project_homepage.md 「AI 검색(GEO) 노출 설계」 GEO-2.
   본문 가독성 = 인용 가능성. 한 컬럼, 긴 문단, 질문형 h2 가 눈에 띄게. */
.crumb { padding: 18px 20px 0; font-size: 13px; color: var(--ink-soft); }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--primary); }
.crumb span { margin: 0 6px; }

.landing { padding: 28px 0 84px; }
.landing .container { max-width: 760px; }   /* 읽기 좋은 줄길이 */
.landing h1 { font-size: 32px; line-height: 1.35; margin: 10px 0 18px; color: var(--primary-deep); }
.landing > .container > .lead { font-size: 17px; line-height: 1.85; color: var(--ink); max-width: none; }
.landing .region { margin-top: 10px; font-size: 13px; }

.landing .qa { margin-top: 44px; }
.landing .qa h2 { font-size: 21px; line-height: 1.5; margin: 0 0 14px; color: var(--primary-deep); }
.landing .qa p { font-family: "Pretendard", sans-serif; font-size: 15.5px; line-height: 1.9; margin: 0 0 14px; }

.landing .faq { margin-top: 56px; border-top: 1px solid var(--rule); padding-top: 32px; }
.landing .faq dt { font-weight: 600; margin-top: 20px; color: var(--primary-deep); }
.landing .faq dd { margin: 8px 0 0; font-family: "Pretendard", sans-serif; font-size: 15px; line-height: 1.85; color: var(--ink-soft); }

.landing .cta { margin-top: 56px; padding: 28px; background: var(--paper-raised); text-align: center; }
.landing .cta p { margin-top: 12px; font-size: 13px; }

.landing .related { margin-top: 48px; border-top: 1px solid var(--rule); padding-top: 24px; }
.landing .related h2 { font-size: 17px; margin-bottom: 12px; }
.landing .related ul { list-style: none; display: grid; gap: 10px; font-size: 15px; }
.landing .related a { color: var(--primary-deep); text-decoration: none; border-bottom: 1px solid var(--primary-tint); }
.landing .related a:hover { color: var(--primary); }

#guides { padding: 84px 0; border-top: 1px solid var(--rule); }
#guides h2 { font-family: "Noto Serif KR", serif; }
a.card.guide { display: block; text-decoration: none; color: inherit; transition: background .15s; }
a.card.guide:hover { background: var(--primary-tint); }
a.card.guide p { font-family: "Pretendard", sans-serif; font-size: 14px; color: var(--ink-soft); line-height: 1.7; }

@media (max-width: 720px) {
  .landing h1 { font-size: 25px; }
  .landing .qa h2 { font-size: 19px; }
}