/* 살던집 토큰 — 값만 둔다(규칙서 §8-1). 컴포넌트·화면은 이 이름만 쓴다. 표·대비는 DESIGN.md §2.
   방향(2026-10-27 사용자 요청 — doczip 느낌): 흰 바탕 + 주황 한 색 포인트, 보조 동작 하나에만 초록, 회색 글자 단계, 크고 둥근 카드.
   서체 Pretendard(자체 호스팅) — fonts/pretendard/pretendard.css 는 layout.php 가 먼저 싣는다 */

:root {
  color-scheme: light;

  /* 바탕·선·글자 */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f5;          /* 입력 칸·약한 바탕(회색 채움) */
  --surface-3: #ececec;
  --border: #ebebeb;
  --border-strong: #d4d4d4;
  --text: #141414;
  --text-2: #4d4d4d;
  --text-3: #6b6b6b;

  /* 포인트 — 주황 하나(흰 글자 4.76:1). 작은 강조 글자도 같은 계열 */
  --primary: #cf410e;
  --primary-hover: #b5390c;
  --primary-ink: #c43d0c;
  --primary-soft: #fff1ea;
  --on-primary: #ffffff;

  /* 보조 동작 하나에만 초록(흰 글자 5.0:1) */
  --accent: #15803d;
  --accent-hover: #116b33;
  --accent-soft: #e8f5ec;
  --on-accent: #ffffff;

  /* 상태 — 의심 신호는 호박색(주황 포인트와 구분), 오류 빨강, 완료 초록 */
  --warn: #855400;
  --warn-strong: #b77900;
  --warn-soft: #fff6dc;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --on-danger: #ffffff;
  --success: #116b33;            /* 옅은 초록 바탕 위 작은 글자 4.5:1 이상 */
  --success-soft: #e8f5ec;
  --focus: #cf410e;
  --overlay: rgba(10, 10, 10, .48);
  --tip-bg: #1f1f1f;
  --tip-text: #f5f5f5;
  --tip-err: #ff9b91;
  --tip-ok: #74e0a0;

  /* 관리자 틀 — 지금 어느 쪽인지 바로 알게(규칙서 §5) */
  --admin-bar: #253049;
  --admin-bar-text: #f1f4fa;
  --admin-side: #f3f4f8;
  --admin-side-active: #e3e7f1;

  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* 글자 — 12px 미만 없음, 본문 16 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;        /* 첫 화면 제목·큰 숫자 하나 */
  --text-num: 48px;        /* 카드 안 큰 숫자(남은 날 등) */
  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* 모서리·그림자·높이 — 크고 둥근 카드, 옅은 테두리 + 퍼진 그림자 */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 24px;
  --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(20, 20, 20, .04);
  --shadow-card: 0 6px 24px rgba(20, 20, 20, .06);
  --shadow-2: 0 12px 32px rgba(20, 20, 20, .12);
  --control-h-sm: 40px;
  --control-h-md: 48px;
  --control-h-lg: 56px;

  --content-w: 720px;
  --wide-w: 1040px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
}

/* 다크 — 시스템 설정을 따르고(저장값 없으면), 직접 고르면 data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121212; --surface: #1b1b1b; --surface-2: #242424; --surface-3: #2e2e2e;
    --border: #2c2c2c; --border-strong: #3d3d3d;
    --text: #f2f2f2; --text-2: #c4c4c4; --text-3: #9e9e9e;
    --primary: #ff7a45; --primary-hover: #ff8f61; --primary-ink: #ff8a5c; --primary-soft: #3a1d10; --on-primary: #1a0a03;
    --accent: #4ade80; --accent-hover: #6ee79a; --accent-soft: #0f2e1a; --on-accent: #052e12;
    --warn: #f5c04a; --warn-strong: #f5c04a; --warn-soft: #33270a;
    --danger: #f2877d; --danger-soft: #3a1714; --on-danger: #2a0b08;
    --success: #6ad493; --success-soft: #11301d;
    --focus: #ff8a5c; --overlay: rgba(0, 0, 0, .62);
    --tip-bg: #f2f2f2; --tip-text: #141414; --tip-err: #b42318; --tip-ok: #15803d;
    --admin-bar: #1b2438; --admin-bar-text: #e9eef8; --admin-side: #161a22; --admin-side-active: #232b3d;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-card: 0 6px 24px rgba(0, 0, 0, .35); --shadow-2: 0 12px 32px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121212; --surface: #1b1b1b; --surface-2: #242424; --surface-3: #2e2e2e;
  --border: #2c2c2c; --border-strong: #3d3d3d;
  --text: #f2f2f2; --text-2: #c4c4c4; --text-3: #9e9e9e;
  --primary: #ff7a45; --primary-hover: #ff8f61; --primary-ink: #ff8a5c; --primary-soft: #3a1d10; --on-primary: #1a0a03;
  --accent: #4ade80; --accent-hover: #6ee79a; --accent-soft: #0f2e1a; --on-accent: #052e12;
  --warn: #f5c04a; --warn-strong: #f5c04a; --warn-soft: #33270a;
  --danger: #f2877d; --danger-soft: #3a1714; --on-danger: #2a0b08;
  --success: #6ad493; --success-soft: #11301d;
  --focus: #ff8a5c; --overlay: rgba(0, 0, 0, .62);
  --tip-bg: #f2f2f2; --tip-text: #141414; --tip-err: #b42318; --tip-ok: #15803d;
  --admin-bar: #1b2438; --admin-bar-text: #e9eef8; --admin-side: #161a22; --admin-side-active: #232b3d;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-card: 0 6px 24px rgba(0, 0, 0, .35); --shadow-2: 0 12px 32px rgba(0, 0, 0, .5);
}