/* ============================================
   THE 1% LAQ — Design Tokens (단일 소스)
   ============================================

   이 파일이 프로젝트의 유일한 CSS 커스텀 프로퍼티 정의처다.
   새 토큰은 반드시 여기에 추가한다. 템플릿·개별 CSS에 `:root`를 다시 만들지 않는다.

   [스코프 규칙]
   - 토큰은 `:root`가 아니라 `html.scope-*`에 정의한다. 명시도 (0,1,1).
   - 스코프 클래스는 반드시 `<html>`에 건다. `<body>`에 걸면 결과지의
     `applyResultViewMode()`가 `documentElement.style.setProperty(...)`로 넣는
     인라인 값이 스코프 정의에 가려져 PDF 렌더가 깨진다.
   - 블록 순서 public → exam → report → admin 은 기존 로드 순서(style.css →
     페이지 <style>)를 그대로 재현하기 위한 것이다. 순서를 바꾸지 말 것.
   - 같은 이름이라도 스코프별 값이 다르다(예: `--gold` exam #c9a84c / admin #bf8f17,
     `--navy` exam #f4f6fa / report #f3f6fb). 값이 비슷하다고 합치지 않는다.

   [토큰화하지 않은 색]
   - 홈 팔레트: `app/static/css/index.css`에 hex 리터럴로 있다(고유 26색, var() 사용 0건).
   - 결과지 영역 막대 5색: `app/static/js/habit_result.js`의 `AREA_DISPLAY_BAR_COLOR`.

   [🚫 `--danger`를 추가하지 말 것]
   `admin/questionnaires/upload.html`이 `var(--danger, #b91c1c)`를 3곳에서 쓴다.
   `--danger`는 어디에도 정의돼 있지 않아 현재는 fallback `#b91c1c`로 렌더된다.
   여기에 정의하는 순간 그 3곳의 색이 바뀐다.

   [브레이크포인트 대장 — 값 변경 금지, CSS 변수로 토큰화 불가]
   CSS 커스텀 프로퍼티는 `@media` 조건부에서 해석되지 않는다.
   새 미디어 쿼리는 아래 목록에서 고른다.
       420             admin/students.html
       480             style.css, test_runner.css
       520             habit/test.html
       540             index.css
       560             habit/invite_profile.html
       767 / 768(min)  result.html
       980             index.css, result.html
       1020 / 1021(min) admin 전체
   ============================================ */


/* --- ① 공개 화면 (`/`, 초대·완료 페이지, /diagnosis/*) ← style.css ---

   이 블록만 명시도가 (0,1,0)이다 — `html.scope-public`(0,1,1)이 아니다.
   B1a에서 `result.html`의 `:root`(0,1,0)와 경쟁할 때 뒤집힘을 막으려고 낮춘 값이다.
   B1b에서 그 `:root` 2개가 제거되고 결과지가 `scope-report`를 받게 되어
   **경쟁하는 `:root`는 프로젝트 전체에 0개**다. 경쟁자가 없으므로 명시도는 무의미하고,
   `html.scope-public`으로 승격할 필요도 없다(승격해도 결과 동일). 그대로 둔다. --- */
.scope-public {
    --bg-deep: #f4f6fa;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f4ff;
    --accent: #3a6fd8;
    --accent-glow: rgba(58, 111, 216, 0.15);
    --accent-soft: rgba(58, 111, 216, 0.06);
    --text-primary: #1a2030;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --border: rgba(0, 0, 0, 0.1);
    --border-active: rgba(201, 168, 76, 0.6);
    --success: #38a169;
    --selected-bg: rgba(58, 111, 216, 0.08);
    --selected-border: rgba(58, 111, 216, 0.4);
}

/* --- ② 검사 화면 `/habit/test` ← habit/test.html --- */
html.scope-exam {
    --navy:      #f4f6fa;
    --navy2:     #ffffff;
    --navy3:     #eef2f7;
    --gold:      #c9a84c;
    --gold-light:#e2c97e;
    --blue:      #4f8cff;
    --text:      #1a2030;
    --text-muted:#718096;
    --border:    #d9e1ec;
    --success:   #3fb950;
    --radius:    12px;
}

/* --- ③ 결과지 ← habit/result.html (구 토큰 + v11 토큰) --- */
html.scope-report {
    --navy:       #f3f6fb;
    --navy2:      #ffffff;
    --navy3:      #eef2f7;
    --gold:       #c9a84c;
    --gold-light: #e2c97e;
    --gold-dim:   rgba(201,168,76,0.15);
    --blue:       #4f8cff;
    --text:       #172033;
    --text-muted: #5f6b7a;
    --border:     #d8dee8;
    --stable:     #3fb950;
    --supplement: #4f8cff;
    --caution:    #f0883e;
    --critical:   #f85149;
    --radius:     12px;
    --radius-lg:  16px;

    /* v11 PDF layout adaptation: shared web/PDF visual tone */
    --v11-ink: #06111c;
    --v11-cream: #fff4ce;
    --v11-paper: #ffffff;
    --v11-panel: #efefef;
    --v11-line: #d8d8d8;
    --v11-peach: #ffc9ba;
    --v11-orange: #ff552f;
    --v11-shadow: 8px 8px 11px rgba(0, 0, 0, 0.24);
    --v11-shadow-soft: 5px 5px 8px rgba(0, 0, 0, 0.16);
}

/* --- ④ admin 전 화면 ← admin/base.html --- */
html.scope-admin {
    --bg: #f8f7f3;
    --surface: #ffffff;
    --surface-soft: #fbfaf7;
    --line: #e7e1d7;
    --line-soft: #f0ebe3;
    --text: #202838;
    --text-sub: #667085;
    --text-muted: #98a2b3;
    --gold: #bf8f17;
    --gold-dark: #9a720d;
    --gold-soft: #fbf3df;
    --blue: #3b82f6;
    --blue-soft: #eff6ff;
    --green: #2fb36d;
    --green-soft: #eaf8f0;
    --orange: #f07a24;
    --orange-soft: #fff3e8;
    --red: #d92d20;
    --red-soft: #fff0ef;
    --sidebar-w: 246px;
    --radius: 8px;
    --shadow: 0 18px 45px rgba(27, 33, 44, 0.08);
}
