/* packages/web-saju1/theme.css — ★ 점신 계열 (2026-08-31 재작성)
 *
 * ★★★★ 왜 또 바뀌었나
 *   1차  "추천 디자인" 이라며 컬럼·폰트·색만 미세 조정 → ★ 폰에서 /saju 와 구분 불가였다
 *   2차  명운소 계열(크림 + 어두운 히어로) → ★ 뿌리가 /saju 와 같아 "완전 다른 느낌" 이 아니었다
 *   3차  ★ 사용자 지정: 점신(https://www.jeomsin.co.kr/) 처럼. ★ 이름 "나무" 는 안 쓴다
 *
 * ★★ 점신 실측 (2026-08-31 · 헬퍼비 브라우저)
 *   배경 #f9f9f9 회백 · 카드 #ffffff · 면색 #f4f7fe · 강조 #669aff
 *   먹 #1f2024 · 포인트 노랑 #fff854 · Pretendard 16px · 모서리 12px
 *   ★ 화면의 주인공 = 48×48 아이콘 타일 그리드 (라벨 13.3px/600)
 *
 * ★★★ 따르는 것 = ★ 구조다. 색은 우리 것으로 간다.
 *   ① #669aff 는 tailwind 파랑 계열이라 정책에 걸린다
 *   ② 경쟁사 색 직카피는 그 자체로 피할 일이다
 *   → ★ 회백 배경 + 흰 카드 + ★ 남먹 강조 + ★ 금빛 포인트.
 *     /saju(크림 + 숲녹, 따뜻함)와 ★ 색상환에서 반대편이고 온도도 반대다.
 *
 * ★★ 어두운 모드 절을 ★ 반드시 유지한다. 이 파일은 app.css 뒤에 실리고 `:root` 에
 *    조건이 없어서, 빠뜨리면 ★ 조용히 밝은 값이 이기고 버튼 글자가 안 읽힌다.
 *    `build-sites.mjs` 의 `checkDarkParity()` 가 빌드 때 센다.
 */

:root {
  /* ★ 점신은 넓게 쓴다. /saju(720) 보다 넓히면 또 "같아 보인다" 가 되므로 좁게 유지 */
  --maxw: 600px;

  /* ① 회백 + 흰 카드 — 점신의 뼈대 */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceef2;
  --line: #e2e5ea;
  --line-strong: #c6ccd6;

  /* ② 먹 — 무채색은 카피가 아니다 */
  --ink: #1f2024;
  --ink-2: #4c525c;
  --ink-3: #818c9a;

  /* ③ ★ 강조 = 남먹. 숲녹(/saju)과도 tailwind 파랑(점신)과도 멀다 */
  --accent: #26324a;
  --accent-hover: #172033;
  --accent-soft: #eceff5;
  --accent-line: #ccd4e2;

  /* ④ ★ 포인트 = 금빛. 점신의 노랑 자리 — 아이콘 강조 조각과 칩에만 쓴다 */
  --point: #c9962b;
  --point-soft: #fbf2dd;

  /* ⑤ 제목 — 점신은 굵은 산세리프다. 세리프를 걷는다 (그게 명운소 계열이었다) */
  --font-display: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
                  'Malgun Gothic', 'Noto Sans KR', 'Segoe UI', sans-serif;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(31, 32, 36, .04), 0 4px 14px rgba(31, 32, 36, .05);
}

/* ══ 어두운 모드 ══════════════════════════════════════════════
   ★★★★ 이 절이 ★ 반드시 있어야 한다. 없으면 조용히 밝은 모드가 이긴다.
     theme.css 는 app.css 뒤에 실리고 위 `:root` 는 조건이 없다 →
     app.css 의 @media(dark) 가 --accent 를 밝게 바꿔도 ★ 여기 밝은 값이 다시 덮는다.
     그때 --accent(남먹) + --accent-ink(어두운 먹) → ★ 버튼 글자가 안 읽힌다. 에러 0건.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121316;
    --surface: #1b1d21;
    --surface-2: #23262b;
    --line: #33373d;
    --line-strong: #4e545d;

    --ink: #eef0f3;
    --ink-2: #c6cbd3;
    --ink-3: #939aa5;

    /* ★ 밝기가 뒤집힌다 — 어두운 바탕에서 남먹은 글자로 못 읽는다 */
    --accent: #9db4dc;
    --accent-hover: #b6c9ea;
    --accent-soft: #1e2634;
    --accent-line: #38445c;

    --point: #e0b352;
    --point-soft: #2c2718;

    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .38);
  }
}

/* ═════════════════════════════════════════════════════════════
   ① 뼈대 — 회백 바탕에 흰 카드가 뜬다 (점신의 기본 인상)
   ★ `[data-site=…] body` 로 쓰면 영영 안 걸린다 — data-site 가 body ★ 자신에 붙는다.
     붙여 쓴다. build-sites 가 이 형태를 검사한다.
   ═════════════════════════════════════════════════════════════ */

body[data-site="saju1"] { background: var(--bg); }

[data-site="saju1"] header.site {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
}
[data-site="saju1"] header.site .wrap { min-height: 54px; }
/* ★ 이름 = "금빛사주" (2026-09-04 개명). ★ 정본은 packages/api/src/sites.json 이다 */
[data-site="saju1"] .brand .name { font-size: 18px; font-weight: 800; letter-spacing: -.04em; }
[data-site="saju1"] .brand .sub { font-size: 12px; font-weight: 500; color: var(--ink-3); }

[data-site="saju1"] .wrap { padding-left: 16px; padding-right: 16px; }
[data-site="saju1"] main.wrap { padding-bottom: 26px; }

/* 제목 — 점신은 굵은 산세리프에 자간을 조인다 */
[data-site="saju1"] h1,
[data-site="saju1"] h2 {
  font-family: var(--font-display);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.28;
}
[data-site="saju1"] h1 { font-size: 27px; }
[data-site="saju1"] h2 { font-size: 19px; margin: 0 0 10px; }
[data-site="saju1"] h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }

/* ═════════════════════════════════════════════════════════════
   ② 히어로 — ★ 어둡지 않다. 점신은 밝은 배너다
   ═════════════════════════════════════════════════════════════ */

[data-site="saju1"] .hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 20px 26px;
  margin: 16px 0 14px;
  text-align: center;
}
[data-site="saju1"] .hero h1 { font-size: 26px; line-height: 1.34; margin: 0 0 12px; }
@media (max-width: 400px) { [data-site="saju1"] .hero h1 { font-size: 23px; } }
[data-site="saju1"] .hero p { font-size: 15px; color: var(--ink-3); max-width: 400px; margin-bottom: 18px; }
[data-site="saju1"] .hero .btn { min-width: 220px; }

/* ═════════════════════════════════════════════════════════════
   ③ 카드 — 점신은 전부 흰 카드다. 편집형 구획선을 걷는다
   ═════════════════════════════════════════════════════════════ */

[data-site="saju1"] .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 18px 16px;
  margin: 0 0 12px;
}

/* ═════════════════════════════════════════════════════════════
   ④ 버튼 — 점신은 꽉 찬 알약형이다
   ═════════════════════════════════════════════════════════════ */

[data-site="saju1"] .btn { border-radius: 10px; font-weight: 700; }
[data-site="saju1"] .btn-ghost { border-color: var(--line-strong); background: var(--surface); }

/* ═════════════════════════════════════════════════════════════
   ⑤ 탭 — 알약형에서 밑줄형으로 (7개가 좁은 폭에 눌린다)
   ★ `.tabs` 라는 클래스는 ★ 없다. 실제는 `<div class="seg" id="tabs">` + `aria-pressed` 다.
   ★ `.seg` 로 넓히면 성별·시각 토글까지 밑줄형이 된다 — `#tabs` 로 좁힌다.
   ═════════════════════════════════════════════════════════════ */
[data-site="saju1"] #tabs.seg {
  display: flex; gap: 2px; overflow-x: auto; border-radius: 0;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent; padding: 0;
  scrollbar-width: none;
}
[data-site="saju1"] #tabs.seg::-webkit-scrollbar { display: none; }
[data-site="saju1"] #tabs.seg button {
  flex: 0 0 auto; border: 0; background: transparent; border-radius: 0;
  padding: 11px 14px; font-size: 15px; font-weight: 600; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
[data-site="saju1"] #tabs.seg button[aria-pressed="true"] {
  color: var(--ink); border-bottom-color: var(--ink);
  background: transparent; font-weight: 800;
}

/* ═════════════════════════════════════════════════════════════
   ⑥ 본문 안 요소들 — 금빛 포인트를 아끼며 쓴다
   ═════════════════════════════════════════════════════════════ */

[data-site="saju1"] .story-head {
  background: var(--point-soft);
  border: 1px solid var(--point);
  border-radius: var(--radius);
}
[data-site="saju1"] .story-title { font-weight: 800; font-size: 23px; line-height: 1.36; }

[data-site="saju1"] .img-cell .q { color: var(--accent); font-weight: 700; font-size: 14px; }
[data-site="saju1"] .imagery .pic { font-size: 19px; line-height: 1.6; font-weight: 700; }
[data-site="saju1"] .flow-row.now {
  background: var(--point-soft);
  box-shadow: inset 3px 0 0 var(--point);
  border-radius: 0 8px 8px 0;
}
[data-site="saju1"] .fig svg { max-width: 340px; }
[data-site="saju1"] .pair-dial .num { font-weight: 800; font-size: 48px; }
[data-site="saju1"] .persona-card .nm { font-weight: 800; }
[data-site="saju1"] .dang-figs {
  background: var(--surface-2);
  border-color: var(--line);
  border-radius: var(--radius);
}

/* 하단 탭바 — 컬럼 폭에 맞춘다 */
[data-site="saju1"] .tabbar { max-width: var(--maxw); margin: 0 auto; background: var(--surface); }

/* ═════════════════════════════════════════════════════════════
   로고 마크 — "네 기둥 한 칸" (2026-08-31)

   ★ 네 기둥(四柱)을 세로 획으로, 가운데를 끊어 위칸(천간)·아래칸(지지) —
     ★ 네 열·여덟 칸이 곧 사주 여덟 글자다.
     굵은 열 = ★ 일주(우리 명식은 시·일·월·년 순이라 ★ 2열),
     그 윗칸 금빛 = ★ 일간, 즉 나 자신.
   ★ 마크에 색을 안 박았다 — 여기서 칠한다. 그래서 어두운 모드가 규칙 없이 따라온다.
   ═════════════════════════════════════════════════════════════ */
[data-site="saju1"] .brand .mark { color: var(--accent); flex: none; }
[data-site="saju1"] .brand .mark .k { fill: var(--point); }

/* ═════════════════════════════════════════════════════════════
   ★★ 붓글씨 워드마크 (2026-09-01 — 기하 마크에서 교체)

   ★ 워드마크가 이미 "금빛사주" 를 말한다 → ★ 옆의 텍스트 이름을 감춘다.
     안 감추면 머리글에 같은 말이 ★ 두 번 나와서 로고가 아니라 오타로 읽힌다.
     ★ 지우지 않고 감춘다 — 화면낭독기와 검색엔진에는 남아야 한다.
   ★ 색은 CSS 가 아니라 ★ 파일 두 벌(라이트/다크)이 쥔다. build-sites 주석 참조.
   ═════════════════════════════════════════════════════════════ */
/* ★★ 크기는 ★ 실측으로 정했다.
   높이 30px 로 놓으니 폭이 47px 이 되어 ★ 글자당 15px — 안 읽힌다(실측).
   워드마크 비율이 1.56:1 이라 ★ 세 글자가 가로로 눕지 않고 비스듬히 쌓여 있다.
   → 높이 44px = 폭 69px = ★ 글자당 23px 이라야 읽힌다. 머리글도 그만큼 키운다. */
[data-site="saju1"] .brand .wm { display: block; flex: none; line-height: 0; }
[data-site="saju1"] .brand .wm-img { display: block; height: 44px; width: auto; }
[data-site="saju1"] header.site .wrap { min-height: 64px; }
@media (max-width: 400px) {
  [data-site="saju1"] .brand .wm-img { height: 38px; }
  [data-site="saju1"] header.site .wrap { min-height: 56px; }
}
/* ★ 감추되 ★ 접근성 트리에는 남긴다 (display:none 이면 낭독기에서도 사라진다) */
[data-site="saju1"] .brand .name {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}