/* frontend/design-tokens.css
   2026-08-31 지시서(B조): 데스크톱 디자인 기준 한 벌.
   Blueprint/DESIGN_RULES.md 를 값으로 옮긴 "추가 전용" 토큰 파일이다.

   ★ 기존 값을 하나도 덮어쓰지 않는다.
     style.css :root 의 --h24-space-1~6 / --h24-font-* / --h24-color-*
     (2026-08-18 지시서 단계2(바), curator-next-task.css 전용)는 그대로
     둔다. 이 파일은 새 이름만 쓴다. 화면에 실제로 적용하는 것은
     이번 라운드 지정 화면 셋뿐이다(아래 "적용 범위" 참고).

   적용 범위 (2026-08-31 세션):
     role-cockpit.css   -- 전체관리자 한 화면 관제 / 큐레이터 한 화면 업무판
     welfare-results.css -- 복지 확인 결과 화면
   그 외 파일은 이 토큰을 아직 쓰지 않는다. 다음 라운드에서 넓힌다.

   ★ 화면 종류 판정 오류 기록 (보고서 참고):
     지시서는 "복지 추천 결과 화면"을 어르신 화면으로 표기했으나,
     frontend/welfare-results.js:8 주석과 Blueprint/DESIGN_RULES.md는
     이 화면을 명시적으로 "큐레이터 화면(18px 기준), 어르신 화면 아님"
     이라 못박고 있다. 코드의 기존 선언을 신뢰해 이 화면에는 큐레이터
     등급 토큰을 적용했다. 자세한 내용은
     docs/demo/progress/2026-08-31-B조-디자인기준.md 참고. */

:root {
  /* ---------------------------------------------------------------
     여백 -- 4의 배수, 지시서가 요구한 7단계 그대로.
     기존 --h24-space-1~6(4·8·16·24·32·48, 12 없음)과 번호가 어긋나므로
     번호가 아니라 실제 px 값으로 이름 지었다. 헷갈릴 일이 없다.
  --------------------------------------------------------------- */
  --h24-gap-4: 4px;
  --h24-gap-8: 8px;
  --h24-gap-12: 12px;
  --h24-gap-16: 16px;
  --h24-gap-24: 24px;
  --h24-gap-32: 32px;
  --h24-gap-48: 48px;

  /* ---------------------------------------------------------------
     둥글기 · 그림자 -- 조사에서 가장 많이 쓰인 값(border-radius 10px:91회,
     12px:83회)을 기준값으로 삼았다.
  --------------------------------------------------------------- */
  --h24-radius-sm: 10px;
  --h24-radius-md: 14px;
  --h24-radius-lg: 20px;
  --h24-radius-pill: 999px;

  --h24-shadow-sm: 0 2px 7px rgba(23, 43, 33, 0.07);
  --h24-shadow-md: 0 10px 28px rgba(23, 43, 33, 0.1);

  /* ---------------------------------------------------------------
     색 -- 배경 · 카드 · 테두리 · 글자
  --------------------------------------------------------------- */
  --h24-bg: #f4f6f8;
  --h24-surface: #ffffff;
  --h24-surface-muted: #f7f9fc;
  --h24-surface-subtle: #f6f8fb; /* duty-handoff.css가 이미 이 값을 폴백으로 쓰고 있었다 -- 이름만 여기에 등록 */
  --h24-border: #dce3ed;

  /* 글자 밝기 3단계. "연회색 작은 글씨 금지"(DESIGN_RULES 2장)를 지키기
     위해 흐림 단계도 대비 6.39:1을 확보했다(계산값은 보고서 참고). */
  --h24-ink-strong: #17202a; /* 대비(백지) 16.45:1 */
  --h24-ink: #30475d;        /* 대비(백지) 9.61:1  */
  --h24-ink-muted: #55625b;  /* 대비(백지) 6.39:1  */

  /* ---------------------------------------------------------------
     강조색 -- "가장 많이 쓰인 값" 조사 결과를 그대로 옮김(보고서 표 참고).

     ★ 주의: Blueprint/00_CONSTITUTION.md 11장은 "브랜드 기본색은 네이비"
     라 적고 있지만, 실제로 배포된 관제판(role-cockpit.css)은 그린 계열을
     압도적으로 많이 쓴다. 이 파일은 지시서("가장 많이 쓰인 초록을 기준")를
     따라 관제판 전용 강조색을 그린으로 못박되, 기존 --h24-color-brand
     (네이비, style.css)는 건드리지 않는다. 두 색의 역할이 다르다:
       --h24-accent-navy   기존 모바일 단계형 화면(동의·질문·현장조사)
       --h24-accent-green  관제판 화면(전체관리자·중간관리자·큐레이터 업무판)
     대표 확인이 필요한 항목으로 보고서에 남긴다. */
  --h24-accent-navy: #10233f; /* style.css --h24-color-brand 와 동일값, 이름만 명확화 */
  --h24-accent-bg: #ffe4c7; /* policy-browser.css/curator-wellbeing-checkin.css가 이미 이 값을 폴백으로 쓰고 있었다 -- 이름만 여기에 등록, 대비는 --h24-accent-navy와 짝 */
  --h24-accent-green: #173b28; /* role-cockpit.css 안에서 가장 많이 쓰인 값(7회), 대비 12.41:1 */
  --h24-accent-green-action: #2d7247; /* 그린 계열 버튼 배경, 대비(백지 위 흰 글자) 5.82:1 */

  /* 진한 강조색 배경 위에 얹는 흰 글자용. design-components.css의
     .h24-btn-primary/.h24-btn-danger처럼 배경이 이미 --h24-accent-*/
     --h24-danger 등으로 충분히 어두운 곳에서만 쓴다(대비 계산은 그
     배경색 쪽에서 이미 함). Round5(B조): "직접 쓴 색상값" 게이트
     (scripts/verify_design_tokens.py) 대상에서 흰 글자도 예외 없이
     토큰으로 통일하려고 추가했다. */
  --h24-on-accent: #ffffff;

  /* 상태색 -- 의미 전용. DESIGN_RULES 4장: "색만으로 뜻을 전하지 않는다" */
  --h24-success: #166534;      /* 조사 1위 초록값(39회, 이미 "확인됨" 상태색으로 정착) */
  --h24-success-bg: #eef8f1;
  --h24-warning: #8a6a10;
  --h24-warning-bg: #fdf6e3;
  --h24-danger: #b42318;
  --h24-danger-bg: #fff0ef;
  --h24-neutral: #55625b;      /* 미확인 · 기다리는 중 */
  --h24-neutral-bg: #eef1ef;
}

/* =====================================================================
   화면 등급별 글자 · 버튼 규격
   DESIGN_RULES.md 0장 "화면 종류 3분류"를 CSS 변수로 옮긴 것.
   래퍼 클래스(.h24-tier-*)를 화면 최상위 요소에 붙이면 하위 요소가
   var(--h24-t-*)를 그대로 참조할 수 있다. 색은 위 :root 값을 공유한다.
   ===================================================================== */

/* ① 어르신 화면 (동의 · 질문 8장 · 복지 추천 결과 안내)
   이번 라운드에는 실제로 적용하지 않는다 -- 값만 미리 정의해 둔다. */
.h24-tier-elder {
  --h24-t-display: 32px;
  --h24-t-title: 28px;
  --h24-t-sub: 22px;
  --h24-t-body: 20px;
  --h24-t-small: 18px;
  --h24-t-button: 22px;
  --h24-btn-h: 56px;
  --h24-content-max: 640px; /* 데스크톱에서도 폭 제한 + 가운데 정렬 */
}

/* ② 큐레이터 화면 (업무판 · 방문조사 · 가구 프로필)
   이번 라운드 적용 대상: role-cockpit.css, welfare-results.css */
.h24-tier-curator {
  --h24-t-display: 28px;
  --h24-t-title: 22px;
  --h24-t-sub: 18px;
  --h24-t-body: 18px;
  --h24-t-small: 14px;
  --h24-t-button: 18px;
  --h24-btn-h: 48px;
  --h24-content-max: 1320px; /* 데스크톱: 넓게 써서 스크롤을 줄인다 */
}

/* ③ 관리자 화면 (운영현황 · KPI · 대상·배정 · 정책 열람)
   정보 밀도가 필요해 본문 15~16px을 허용한다. 표·그래프는 여기만 허용
   (DESIGN_RULES: 큐레이터 화면에 통계 금지, 헌법 제6조). */
.h24-tier-admin {
  --h24-t-display: 26px;
  --h24-t-title: 20px;
  --h24-t-sub: 16px;
  --h24-t-body: 15px;
  --h24-t-small: 13px;
  --h24-t-button: 15px;
  --h24-btn-h: 40px;
  --h24-content-max: none; /* 스크롤 허용, 폭 제한 없음 */
}