/* 설화신녀 디자인 토큰 — 색·글꼴의 단일 진실 공급원
 *
 * 배경색이 파일마다 세 가지(#0b0910 · #0f0a14 · #0a0a0a)로 어긋나 있었고
 * 글꼴은 시스템 기본이라 정체성이 없었습니다. 여기 한 벌만 둡니다.
 * 화면별 CSS 는 이 변수를 참조하고, 자기 색을 새로 만들지 않습니다.
 */

@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=IBM+Plex+Sans+KR:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── 바탕
     예전 배경은 보라(257°)였는데 그림은 따뜻한 호박빛(34°)입니다.
     온도가 어긋나서 UI 가 그림 위에 얹힌 것처럼 보였습니다.
     이제 아주 옅은 먹빛 warm neutral 로 맞춥니다. */
  --bg:        #100E0C;
  --surface:   #191614;   /* 카드 */
  --surface-2: #221E1B;   /* 입력칸 */
  --rule:      #2C2724;   /* 실선 */
  --rule-soft: #201C19;

  /* ── 글자. 노란기 도는 크림(#FFF7D6)이 아니라 뼈빛입니다. */
  --fg:   #E9E4DB;
  --fg2:  #968E84;
  --fg3:  #6B645C;

  /* ── 등불빛
     새 썸네일에서 실제로 뽑았습니다 — 색조 34°, 채도 40% 언저리.
     예전 #D4AF37 은 46°/52% 로 그림보다 노랗고 셌습니다.
     ⚠ 이 색은 '누를 것'과 '지금 여기'에만 씁니다. 제목·값·테두리에
       다 바르면 위계가 사라지고 그림과 싸웁니다. */
  --accent:    #C9A063;
  --accent-hi: #E2C48E;   /* 눌렀을 때 · 강조 */
  --accent-dim: rgba(201,160,99,.34);
  --on-accent: #1A1512;

  /* 오류. 강조색과 다른 의미이므로 따로 둡니다. 팔레트에 맞춰 채도를 낮췄습니다. */
  --err:    #E08877;
  --err-bg: rgba(176,74,58,.15);
  --err-line: rgba(176,74,58,.42);

  /* ── 오방정색. 갈래 표시에만 씁니다. 버튼에는 절대 쓰지 마세요. */
  --o-geum: #D8D2C4;  /* 금 · 백 · 설화 */
  --o-hwa:  #B4574B;  /* 화 · 적 · 단하 */
  --o-mok:  #5C8A78;  /* 목 · 청 · 청람 */
  --o-to:   #C09A4E;  /* 토 · 황 · 무산 */
  --o-su:   #7D8590;  /* 수 · 흑 · 현담 */

  /* ── 글꼴
     본문은 IBM Plex Sans KR, 제목은 고운바탕(명조).
     사주는 글로 파는 상품이라 제목이 명조여야 격이 섭니다. */
  --font-body: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-display: "Gowun Batang", "Nanum Myeongjo", "Apple SD Gothic Neo", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── 한지 질감
 *
 * 영상과 썸네일에는 한지 결이 깔려 있는데 화면만 매끈해서 재질이 끊겼습니다.
 * 파일을 받지 않고 SVG 노이즈로 만듭니다 — 용량 0, 요청 0.
 *
 * ⚠ 진하게 넣지 마세요. 어두운 바탕에서 노이즈가 세면 JPEG 뭉개진 것처럼
 *   보입니다. 3% 언저리가 한계입니다.
 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) { body::before { will-change: auto; } }

/* 오방정색 표기. 신관을 색으로 알립니다.
   ⚠ 버튼에는 쓰지 마세요. 결제로 가는 문의 색이 상품마다 흔들리면 손해입니다. */
.oh { color: var(--o-geum); }
.oh[data-o="금"] { color: var(--o-geum); }
.oh[data-o="화"] { color: var(--o-hwa); }
.oh[data-o="목"] { color: var(--o-mok); }
.oh[data-o="토"] { color: var(--o-to); }
.oh[data-o="수"] { color: var(--o-su); }