/* ============================================================================
   tokens.css — 태권도 올인원 디자인 토큰
   ----------------------------------------------------------------------------
   이 파일에는 "값"만 둔다. 선택자에 스타일을 쓰지 마라.
   색·글자크기·간격을 바꿀 일이 생기면 언제나 여기만 고친다.

   원본에서 이어받은 것
     - 남색 #15213B (신뢰), 빨강 #E23A2E (강조), 종이색 #FBFAF6
       → taekwondo\dojang_survey.html, 샘플_탭형리포트.html
     - "색은 장식이 아니라 신호다" 원칙 → 네이버블로그자동화\public\style.css

   고친 것 (이유는 docs\design.md 3절)
     - 본문 빨강 #E23A2E 는 흰 배경에서 대비 4.31:1 로 WCAG AA(4.5:1) 미달이다.
       그래서 "글자·아이콘·버튼 채움"에는 #C12E24(5.26:1)를 쓰고,
       #E23A2E 는 테두리·큰 글씨(24px+)·장식에만 쓴다.
     - 회색 본문 #6C7180 → #5D6373 (종이색 위 5.7:1)
     - 기본 글자 크기 15px → 17px (관장 40~60대)
   ========================================================================== */

:root {
  /* ── 서체 ────────────────────────────────────────────────────────────────
     Pretendard 를 CDN으로 불러오지 않는다. 설문 페이지는 관장님이 데이터 요금으로
     여는 페이지이고, CDN 이 죽으면 글꼴이 통째로 흔들린다.
     Pretendard 가 기기에 있으면 쓰고, 없으면 OS 기본 한글 글꼴로 내려간다.
     자체 호스팅하려면 base.css 맨 위 @font-face 주석을 참고. */
  --font-sans:
    "Pretendard Variable", Pretendard,
    -apple-system, BlinkMacSystemFont, system-ui,
    "Apple SD Gothic Neo", "Noto Sans KR",
    "Segoe UI", "Malgun Gothic", "맑은 고딕",
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
    "D2Coding", "Nanum Gothic Coding", monospace;

  /* 글자 크기 — 본문 기준 17px. 13px 미만은 어디에도 쓰지 않는다. */
  --fs-100: 0.8125rem;  /* 13px — 배지, 표의 보조 메타. 본문 금지 */
  --fs-200: 0.875rem;   /* 14px — 표 안 보조 정보 */
  --fs-300: 0.9375rem;  /* 15px — 힌트, 캡션 */
  --fs-400: 1.0625rem;  /* 17px — 본문 기본 */
  --fs-500: 1.1875rem;  /* 19px — 라벨 강조, 소제목 */
  --fs-600: 1.375rem;   /* 22px — 섹션 제목 */
  --fs-700: 1.625rem;   /* 26px — 화면 제목 */
  --fs-800: 2rem;       /* 32px — 완료 화면, 점수 */
  --fs-900: 2.375rem;   /* 38px — 대형 숫자 */

  --lh-tight: 1.3;
  --lh-snug: 1.45;
  --lh-base: 1.65;      /* 한글 본문 기본 */
  --lh-relaxed: 1.8;    /* 긴 안내문 */

  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* ── 간격 (4px 배수) ───────────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */

  /* ── 모서리 ────────────────────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ── 크기 ──────────────────────────────────────────────────────────────── */
  --tap-min: 44px;        /* 어떤 조작 요소도 이보다 작으면 안 된다 */
  --control-h: 52px;      /* 설문·관장 화면의 입력/버튼 높이 */
  --control-h-sm: 40px;   /* 운영자 화면의 조밀한 조작(표 안 버튼 등) */
  --control-h-lg: 60px;   /* 제출 같은 주요 행동 */

  --container-form: 720px;  /* 설문 */
  --container-read: 880px;  /* 리포트·안내 */
  --container-app: 1280px;  /* 운영자 대시보드 */

  --border-w: 1px;
  --border-w-strong: 2px;
  --focus-w: 3px;

  /* ── 겹침 순서 ─────────────────────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 20;
  --z-rail: 30;
  --z-drawer: 50;
  --z-toast: 60;
  --z-modal: 70;

  /* ── 움직임 ────────────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ── 브랜드 원색 (의미 없는 순수 값. 화면에서 직접 쓰지 말 것) ────────── */
  --brand-navy: #15213b;
  --brand-navy-soft: #24324f;
  --brand-red: #e23a2e;        /* 테두리·24px 이상 큰 글씨·장식 전용 */
  --brand-red-strong: #c12e24; /* 본문 크기 글자와 버튼 채움은 이것 */
  --brand-red-deep: #9e2019;
  --brand-gold: #ffd9a0;
}

/* ==========================================================================
   라이트 테마 (기본)
   ========================================================================== */
:root {
  color-scheme: light;

  /* 면 */
  --bg-page: #fbfaf6;        /* 종이색. 흰 화면보다 눈이 덜 아프다 */
  --bg-surface: #ffffff;     /* 카드 */
  --bg-surface-2: #f6f5f0;   /* 카드 안의 한 단계 들어간 면 */
  --bg-inset: #faf9f5;       /* 입력칸 배경(비활성 등) */
  --bg-dark: var(--brand-navy);   /* 헤더 */
  --bg-overlay: rgba(21, 33, 59, 0.66);
  --bg-hover: #f2f1ec;
  --bg-selected: #fceded;

  /* 선
     --border-strong 은 입력칸·칩·버튼의 "경계"다. WCAG 1.4.11 은 조작 요소를
     식별하는 경계선에 3:1 을 요구한다. 원본의 #E5E1D8 은 흰 배경에서 1.3:1 이라
     한참 못 미쳤다. 여기서는 3:1 을 넘는 값으로 올렸다 — 40~60대에게도 칸이 또렷해진다.
     --border 는 카드 가장자리 같은 장식용이라 3:1 을 요구하지 않는다. */
  --border: #e5e1d8;
  --border-strong: #8a8474;
  --border-muted: #efece4;

  /* 글자 */
  --text-strong: #15213b;    /* 제목 */
  --text: #212529;           /* 본문 */
  --text-muted: #5d6373;     /* 보조·힌트. 종이색 위 5.7:1 */
  --text-faint: #7d8393;     /* 비활성 표시 전용. 정보 전달 금지 */
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #b6c0d6;
  --text-on-accent: #ffffff;
  --text-link: #1c4f9c;
  --text-link-visited: #5b3a86;

  /* 행동(빨강)
     --accent      = 채움(버튼 배경). 그 위에는 --text-on-accent 가 올라간다
     --accent-text = 글자색으로 쓸 때. 라이트에서는 같은 값이지만
                     다크에서는 갈라진다 — 어두운 면 위에서 읽히려면 밝아야 하고,
                     흰 글자를 얹으려면 어두워야 해서 한 값으로는 둘 다 만족할 수 없다 */
  --accent: var(--brand-red-strong);
  --accent-text: var(--brand-red-strong);
  --accent-hover: #ab2820;
  --accent-active: var(--brand-red-deep);
  --accent-tint: #fcedeb;
  --accent-border: #f0b5af;
  --accent-decor: var(--brand-red);   /* 큰 글씨·테두리 전용 */

  /* 보조 행동(남색) */
  --action: var(--brand-navy);
  --action-hover: #0e1729;
  --action-tint: #eaedf4;
  --action-border: #c3cadb;

  /* 상태 — 각 상태는 "글자색 / 배경 / 테두리" 세 쌍으로만 쓴다 */
  --ok: #187a54;
  --ok-tint: #e6f4ee;
  --ok-border: #a7d8c3;

  --warn: #8a5300;
  --warn-tint: #fff3e0;
  --warn-border: #e6be7e;

  --danger: #b3261e;
  --danger-tint: #fdecea;
  --danger-border: #f0b0aa;

  --info: #1c4f9c;
  --info-tint: #eaf1ff;
  --info-border: #b9cdf0;

  --pending: #5d6373;        /* 대기·미착수 */
  --pending-tint: #eeeeea;
  --pending-border: #d8d5cc;

  --live: #8a6100;           /* 진행 중 */
  --live-tint: #fff8e3;
  --live-border: #e4cc86;

  /* 민감 정보(내부 전용) — 다른 어떤 상태색과도 겹치지 않는 자주색 */
  --secret: #6b2d7a;
  --secret-tint: #f7edfa;
  --secret-border: #d8b6e2;

  /* 레일 — 화면 맨 위 색 띠.
     상태색(--live, --danger, --secret)을 그대로 배경에 깔면 안 된다.
     그 색들은 "연한 배경 위의 글자색"으로 맞춰 둔 값이라, 다크 모드에서는
     밝은 색이 되어 흰 글자가 읽히지 않는다. 그래서 레일 전용 짝을 따로 둔다. */
  --rail-bg: var(--brand-navy);
  --rail-fg: #ffffff;
  --rail-private-bg: #5b2568;   /* 내부 전용 */
  --rail-private-fg: #ffffff;
  --rail-live-bg: #7a5500;      /* 작업 중 */
  --rail-live-fg: #ffffff;
  --rail-danger-bg: #a32219;    /* 문제 발생 */
  --rail-danger-fg: #ffffff;

  /* 포커스 — 어떤 배경 위에서도 보여야 한다 */
  --focus: #1c4f9c;
  --focus-halo: rgba(28, 79, 156, 0.28);
  --focus-on-dark: #ffd9a0;

  /* 그림자 */
  --shadow-sm: 0 1px 2px rgba(21, 33, 59, 0.06);
  --shadow-md: 0 2px 4px rgba(21, 33, 59, 0.06), 0 8px 20px rgba(21, 33, 59, 0.07);
  --shadow-lg: 0 8px 16px rgba(21, 33, 59, 0.08), 0 24px 48px rgba(21, 33, 59, 0.12);
  --shadow-accent: 0 6px 16px rgba(193, 46, 36, 0.28);
  --shadow-inset: inset 0 1px 2px rgba(21, 33, 59, 0.05);

  /* 골격(로딩 자리표시자) */
  --skeleton-a: #eceae3;
  --skeleton-b: #f7f6f1;

  /* 그래프·점수 막대 */
  --track: #e8e5dc;
}

/* ==========================================================================
   다크 테마
   ----------------------------------------------------------------------------
   운영자 화면은 밤에도 본다. 설문 페이지도 폰이 다크 모드면 그대로 따라간다.
   [data-theme="light"] 가 붙어 있으면 시스템 설정을 무시하고 라이트로 둔다.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg-page: #12151c;
    --bg-surface: #1a1f2a;
    --bg-surface-2: #232936;
    --bg-inset: #161b24;
    --bg-dark: #0d1017;
    --bg-overlay: rgba(4, 6, 10, 0.72);
    --bg-hover: #262d3b;
    --bg-selected: #33222a;

    --border: #323a4a;
    --border-strong: #6b7688;   /* 조작 요소 경계. --bg-surface 대비 3:1 이상 */
    --border-muted: #262d3a;

    --text-strong: #f2f4f8;
    --text: #e4e7ee;
    --text-muted: #a8b0c0;      /* #1a1f2a 위 7.0:1 */
    --text-faint: #7d8697;
    --text-on-dark: #ffffff;
    --text-on-dark-muted: #a8b0c0;
    --text-on-accent: #ffffff;
    --text-link: #8fb4ff;
    --text-link-visited: #c6a8e8;

    /* 다크에서는 채움과 글자색이 갈라진다.
       흰 글자를 얹으려면 어두워야 하고(≤ 어떤 밝기), 어두운 면 위에서 읽히려면
       밝아야 한다(≥ 어떤 밝기). 한 값으로 둘 다 만족하는 색은 존재하지 않는다. */
    /* 채움 색은 위아래로 동시에 끼여 있다.
       흰 글자를 얹으려면 어두워야 하고(4.5:1), 어두운 카드 위에서 버튼 자체가
       보이려면 밝아야 한다(1.4.11 의 3:1). 그 사이의 좁은 구간을 고른 값이다. */
    --accent: #cc372b;          /* 흰 글자 4.9:1 · --bg-surface 대비 3.2:1 */
    --accent-text: #ff8074;     /* 글자색. 어두운 면 위 6.75:1 */
    --accent-hover: #d84438;
    --accent-active: #ab2820;
    --accent-tint: #2c1a1c;
    --accent-border: #6b3833;
    --accent-decor: #ff8074;

    --action: #33405c;
    --action-hover: #3f4e6e;
    --action-tint: #222a3b;
    --action-border: #465470;

    --ok: #5bc79a;
    --ok-tint: #16281f;
    --ok-border: #2f5c47;

    --warn: #e8b665;
    --warn-tint: #2a2013;
    --warn-border: #5c4726;

    --danger: #ff8d82;
    --danger-tint: #2d1917;
    --danger-border: #6b3833;

    --info: #8fb4ff;
    --info-tint: #182135;
    --info-border: #34456b;

    --pending: #a8b0c0;
    --pending-tint: #22262f;
    --pending-border: #3a4252;

    --live: #e0c169;
    --live-tint: #262113;
    --live-border: #574a24;

    --secret: #d6a3e6;
    --secret-tint: #281b2d;
    --secret-border: #55385e;

    --rail-bg: #1f2941;
    --rail-fg: #ffffff;
    --rail-private-bg: #4a2456;
    --rail-private-fg: #ffffff;
    --rail-live-bg: #5c4110;
    --rail-live-fg: #ffffff;
    --rail-danger-bg: #8c2a22;
    --rail-danger-fg: #ffffff;

    --focus: #8fb4ff;
    --focus-halo: rgba(143, 180, 255, 0.32);
    --focus-on-dark: #ffd9a0;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.55);
    --shadow-accent: 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);

    --skeleton-a: #232936;
    --skeleton-b: #2c3442;

    --track: #2c3442;
  }
}

/* 시스템이 라이트여도 강제로 다크를 켜는 경로 (운영자 화면 설정용) */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: #12151c;
  --bg-surface: #1a1f2a;
  --bg-surface-2: #232936;
  --bg-inset: #161b24;
  --bg-dark: #0d1017;
  --bg-overlay: rgba(4, 6, 10, 0.72);
  --bg-hover: #262d3b;
  --bg-selected: #33222a;

  --border: #323a4a;
  --border-strong: #6b7688;
  --border-muted: #262d3a;

  --text-strong: #f2f4f8;
  --text: #e4e7ee;
  --text-muted: #a8b0c0;
  --text-faint: #7d8697;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #a8b0c0;
  --text-on-accent: #ffffff;
  --text-link: #8fb4ff;
  --text-link-visited: #c6a8e8;

  --accent: #cc372b;
  --accent-text: #ff8074;
  --accent-hover: #d84438;
  --accent-active: #ab2820;
  --accent-tint: #2c1a1c;
  --accent-border: #6b3833;
  --accent-decor: #ff8074;

  --action: #33405c;
  --action-hover: #3f4e6e;
  --action-tint: #222a3b;
  --action-border: #465470;

  --ok: #5bc79a;
  --ok-tint: #16281f;
  --ok-border: #2f5c47;

  --warn: #e8b665;
  --warn-tint: #2a2013;
  --warn-border: #5c4726;

  --danger: #ff8d82;
  --danger-tint: #2d1917;
  --danger-border: #6b3833;

  --info: #8fb4ff;
  --info-tint: #182135;
  --info-border: #34456b;

  --pending: #a8b0c0;
  --pending-tint: #22262f;
  --pending-border: #3a4252;

  --live: #e0c169;
  --live-tint: #262113;
  --live-border: #574a24;

  --secret: #d6a3e6;
  --secret-tint: #281b2d;
  --secret-border: #55385e;

  --rail-bg: #1f2941;
  --rail-fg: #ffffff;
  --rail-private-bg: #4a2456;
  --rail-private-fg: #ffffff;
  --rail-live-bg: #5c4110;
  --rail-live-fg: #ffffff;
  --rail-danger-bg: #8c2a22;
  --rail-danger-fg: #ffffff;

  --focus: #8fb4ff;
  --focus-halo: rgba(143, 180, 255, 0.32);
  --focus-on-dark: #ffd9a0;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);

  --skeleton-a: #232936;
  --skeleton-b: #2c3442;

  --track: #2c3442;
}