/* 시안 A — 안쪽 페이지 덧입힘 (theme.css)
   대상: site/assets/site.css 로 그려지는 안쪽 15쪽. 홈(a.css)과 같은 사이트로 보이게 다크 차콜 + 금색 포인트만 덧씌운다.
   규칙: 간격·글자 크기는 새로 쓰지 않는다(이미 site.css가 다 썼다). 이 파일은 "색"만 바꾼다.
   순서: tokens.vars.css → tokens.base.css → site.css → theme.css(이 파일, 마지막 로드 = 승리).
   대비 실측(파이썬 WCAG 공식): 금색bg+먹글자 5.67:1 · 금색-먹(gold-ink) on 흰 4.81:1 ·
   금색(gold) on 다크 7.04:1 · on-dark on 다크 16.22:1 · muted-dark on 다크 8.48:1 — 전부 4.5:1 이상. */

:root {
  /* 포인트색을 청록(#1f5c73)에서 금색으로. 배경·테두리·장식 = --accent, 흰 바탕 위 글자 = --accent-ink */
  --accent: #c79a4b;      /* gold */
  --accent-ink: #8a6a2e;  /* gold-ink, 흰 바탕 글자 4.81:1 */
  /* 다크 구간(머리글·바닥글·문의 띠·안쪽 페이지 머리) 전용 토큰 — 홈 a.css와 같은 값 */
  --dark: #12161c;
  --dark-2: #1b212b;
  --on-dark: #f5f2ea;
  --muted-dark: #aab2bd;
  --line-dark: #2a313c;
  --gold: #c79a4b;        /* 다크 바탕 위 금색 글자 7.04:1 */
  /* UX점검 #4: 홈(a.css)은 --bg:#ffffff·--bg-soft:#f4f2eb인데 안쪽은 site.css 기본값(미색)이라 같은 사이트로 안 보였다. 안쪽도 홈과 같게 */
  --bg: #ffffff;
  --soft: #f4f2eb;
}

/* 머리글 — 다크로 */
.site-head { background: var(--dark); border-bottom: 1px solid var(--line-dark); }
.brand { color: var(--on-dark); }
.nav a { color: var(--muted-dark); }
.nav a:hover,
.nav a[aria-current="page"] { color: var(--on-dark); box-shadow: inset 0 -2px 0 var(--gold); }
.menu-btn { background: var(--dark-2); border-color: var(--line-dark); color: var(--on-dark); }
.menu-btn:hover { background: var(--line-dark); }
.menu-panel { background: var(--dark); border-top-color: var(--line-dark); }
.menu-panel li { border-bottom-color: var(--line-dark); }
.menu-panel a { color: var(--on-dark); }

/* 버튼 — 금색 1가지, 글자는 먹색 */
.btn { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: #d9ad63; color: var(--ink); }
.btn-line { color: var(--accent-ink); border-color: var(--accent); }
.btn-line:hover { background: var(--soft); color: var(--ink); }

/* 안쪽 페이지 머리 — 홈 첫 화면처럼 다크 띠 */
.page-head { background: var(--dark); border-bottom: 2px solid var(--gold); } /* UX점검 #5: 1px 다크 테두리뿐이라 머리띠가 그냥 검은 상자였다 — 홈과 같은 금색을 단다 */
.page-head h1 { color: var(--on-dark); }
.page-head h1::after { content: ""; display: block; width: 48px; height: 2px; margin-top: var(--sp-16); background: var(--gold); }
.page-head .lead { color: var(--muted-dark); }
.crumbs, .crumbs a { color: var(--muted-dark); }
.page-head .crumbs a:hover { color: var(--on-dark); }
/* UX점검 #6: "홈" 링크만 44px 터치 높이라 기준선이 어긋나고, "홈" 터치 폭도 44px에 못 미쳤다 */
.crumbs ol { align-items: center; }
.crumbs li { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.crumbs a { min-width: var(--touch-min); }

/* 글자 색 — 흰/옅은 바탕에서 포인트는 gold-ink로(가독성), 장식선·테두리는 gold 그대로 */
.steps li::before { color: var(--accent-ink); }
.faq summary::after { color: var(--accent-ink); }
.placeholder { border-radius: 2px; }

/* 문의 띠 — 다크 */
.cta { background: var(--dark); color: var(--on-dark); }
.cta h2 { color: var(--on-dark); }
.cta p { color: var(--muted-dark); }
.cta .btn-primary { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.cta .btn-primary:hover { background: #d9ad63; color: var(--ink); }
.cta .btn-line { color: var(--on-dark); border-color: var(--gold); }
.cta .btn-line:hover { background: rgba(255, 255, 255, .08); color: var(--on-dark); }

/* 발 — 다크(바닥글 전용 토큰으로 명시, --ink 재사용 대신) */
.site-foot { background: var(--dark); color: var(--muted-dark); 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); }
.foot-legal { border-top-color: var(--line-dark); color: var(--muted-dark); }

/* 휴대폰 아래 고정 전화 — 배경은 --accent(금색) 자동 상속, 글자만 먹색으로 */
.mobile-call a.call { color: var(--ink); }