/* ═══════════════════════════════════════════════════════════
   운쏠 디자인 토큰 v1  "따뜻한 설명서"  (Phase 5 · 단일 소스)
   - 안티레퍼런스: 검정+금박 무속 무드
   - 컨셉: 사람에게 딸려 나오는 '제품 설명서'를 따뜻한 종이 질감으로.
     권위 대신 다정한 정확함.

   ⚠ 이 파일이 전 서비스 색·형태의 단일 소스다.
     - 모든 색은 여기의 변수를 경유한다 (템플릿·JS 하드코딩 색 0건이 DoD).
     - 파생색(그림자·그라디언트 포함)도 아래 토큰 조합으로만 만든다.
     - [교체 정책] 아래 브랜드 색은 post-MVP에 운영자가 교체할 수 있다.
       --berry 값 1개를 바꾸면 전 화면 액션 컬러가 일괄 변해야 한다.
   Ref: life-manual-990-mvp.phase5-frontend.workorder.md §2
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── 바탕 ───────────────────────────────── */
  --paper:      #FBF7F1;  /* 바탕 — 따뜻한 조개색 종이 */
  --paper-deep: #F3ECE3;  /* 카드/섹션 구분 */
  --line:       #E5DCD0;  /* 헤어라인 */
  --surface:    #FFFFFF;  /* 카드·칩·입력 표면 (종이 위에 뜨는 흰 면) */
  --on-accent:  #FFFFFF;  /* 채도 높은 배경(berry·오행 셀) 위 텍스트 */

  /* ── 잉크 ───────────────────────────────── */
  --ink:        #38302C;  /* 본문 잉크 — 따뜻한 흑갈 */
  --ink-soft:   #7A6F68;  /* 보조 텍스트 */
  /* --ink 채널 분해 — rgba 파생(그림자 등) 전용. --ink 교체 시 함께 갱신할 것 */
  --ink-rgb:    56, 48, 44;

  /* ── 액션 (브랜드 — 교체 대상) ───────────── */
  --berry:      #A84E63;  /* 주 액션 — 연지·베리 */
  --berry-deep: #8E3F53;  /* 액션 press/hover */
  --berry-tint: #F6E7EB;  /* 선택 배경·강조 배경 */
  --apricot:    #F0D9C0;  /* 하이라이트 살구 */

  /* ── 오행 (만세력 정보 색 — 브랜드 컬러 아님, 임의 교체 대상 제외) ──
     이 5색은 명식 기둥의 오행을 구분하는 '정보 색'이다. 브랜드 팔레트가
     아니므로 --berry 교체 리허설 대상에서 제외한다. 값 변경은 오행 판독성
     검토 후에만. */
  --wood:  #7FA588;  /* 목 */
  --fire:  #D98A80;  /* 화 */
  --earth: #D9B26A;  /* 토 */
  --metal: #CFC9BD;  /* 금 */
  --water: #7D93AD;  /* 수 */
  /* 금(metal)은 명도가 높아 흰 글자 대비가 부족 → 셀 텍스트 전용 잉크 */
  --metal-ink: #5D564C;

  /* ── 타이포 ─────────────────────────────── */
  /* Codex P2 부분 완화(2026-07-13, Fable 승인): 폰트 CDN 장애 시 한글이 두부글자로
     깨지지 않도록 한국어 시스템 폰트 폴백을 보강했다. */
  --disp: 'Gowun Batang', 'Noto Serif KR', serif;                  /* 제목·pull-quote·숫자 */
  --body: 'Pretendard Variable', Pretendard, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;

  /* ── 형태 ───────────────────────────────── */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  /* 그림자 — --ink 채널 파생 (하드코딩 rgb 금지) */
  --shadow: 0 6px 24px rgba(var(--ink-rgb), .08);

  /* ── 오행 파생 그라디언트 (정보 색 조합 — 브랜드 아님) ──────────
     spine(표지)·brew(로딩 스피너)가 공유하는 5색 시퀀스를 여기서 한 번만
     정의한다. 오행 토큰 변경이 자동 전파되도록 하기 위함. */
  --grad-oheng-linear: linear-gradient(90deg, var(--wood), var(--fire), var(--earth), var(--metal), var(--water));
  --grad-oheng-conic:  conic-gradient(var(--wood), var(--fire), var(--earth), var(--metal), var(--water), var(--wood));

  /* ── 레이아웃 ───────────────────────────── */
  /* 모바일 우선 콘텐츠 폭. 프로토타입 .phone(430px 데모 무대)은 이식하지
     않는다 — 실서비스는 본문 컬럼만 이 폭으로 제한하고 body는 full-bleed. */
  --content-max: 480px;
  --gutter: 24px;
}