/* theme.css — 스탬프 투어 디자인 토큰 (유일한 진실의 출처)
 *
 * index.html · admin.html · staff.html 이 이 파일을 링크한다.
 * 색을 바꾸려면 여기만 고친다.
 *
 * ⚠️ display.html(전광판)은 이 파일을 쓰지 않는다.
 *    전광판은 체육관에서 10~30m 밖에서 보는 다른 매체라,
 *    어두운 HUD 바탕을 유지하고 강조색만 보라로 맞췄다.
 *
 * 2026-09-24 테마 변경 — "라벤더 글래스"
 *   참고 이미지: 개선/테마.png (연보라 그라데이션 · 반투명 카드 · 보라 알약 버튼)
 *   이전(벽돌 주황) 버전: _backup_20260924/theme.css
 *
 * 변수 이름(--warm-* · --brand-*)은 그대로 두고 값만 바꿨다.
 * 이름을 바꾸면 admin/staff 의 수백 곳을 고쳐야 한다.
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

:root {
    /* ── 라벤더 회색 (이름은 옛 --warm-* 유지) ──────────── */
    --warm-50:  #f8f7fd;
    --warm-100: #f1eefb;
    --warm-200: #e4e0f3;
    --warm-300: #d3cde8;
    --warm-400: #9a95b3;
    --warm-500: #655f82;
    --warm-600: #4f4a68;
    --warm-700: #3b3752;
    --warm-800: #2a2740;
    --warm-900: #1d1a33;

    /* ── 보라 ─────────────────────────────────────── */
    --brand-50:  #f6f3ff;
    --brand-100: #ede8ff;
    --brand-200: #ddd3ff;
    --brand-300: #c3b3ff;
    --brand-400: #a28bfa;
    --brand-500: #8b6cf6;
    --brand-600: #6a48e0;
    --brand-700: #5f3dc9;
    --brand-800: #4c31a3;
    --brand-900: #3b2780;

    /* 그라데이션 짝 — 분홍빛 라벤더 */
    --pink-300: #f0b5e4;
    --pink-400: #e39ad8;

    /* ── 의미 이름 — 화면에서는 이쪽을 쓴다 ────────────── */
    --bg:      #f3f0fc;              /* 연라벤더 */
    --card:    #ffffff;
    --surface: var(--warm-50);
    --panel:   #f3f0fb;              /* 카드 안 면 */

    --ink:   var(--warm-900);        /* 제목 */
    --body:  var(--warm-600);        /* 본문 */
    --muted: var(--warm-500);        /* 보조 텍스트 (흰 5.98:1 · 라벤더 5.2:1) */
    --faint: var(--warm-400);        /* ⚠️ 아이콘·장식 전용. 본문 금지 (2.9:1) */

    --line:        var(--warm-200);
    --line-strong: var(--warm-300);

    --brand:           var(--brand-600);   /* 채움 (흰 글씨 5.8:1) */
    --brand-text:      var(--brand-700);   /* 밝은 바탕 위 글씨 (7.0:1) */
    --brand-soft:      var(--brand-100);
    --brand-soft-line: var(--brand-200);

    --ok:      #2f7d52;
    --ok-soft: #eaf6ef;
    --warn:      #9a4a06;                  /* 주의는 보라가 아닌 호박색 (흰 6.3:1) */
    --warn-soft: #fff4e5;
    --danger:  #b3261e;

    /* ── 라벤더 글래스 ─────────────────────────────── */
    /* 배경: 위는 옅은 보라, 아래는 분홍빛 라벤더 */
    --grad-bg: radial-gradient(120% 60% at 0% 0%, #e6defd 0%, rgba(230,222,253,0) 60%),
               radial-gradient(90% 55% at 100% 100%, #f6e3f7 0%, rgba(246,227,247,0) 60%),
               linear-gradient(180deg, #f5f2fe 0%, #efeafb 100%);
    /* 기본 버튼: 라벤더 → 보라 (가운데 흰 글씨 대비 4.8:1 이상) */
    --grad-brand: linear-gradient(95deg, #9a6cf2 0%, #7453e6 50%, #5d3fd6 100%);
    --grad-soft:  linear-gradient(135deg, #f7f3ff 0%, #f2ebfd 100%);

    --glass:       rgba(255,255,255,.72);
    --glass-strong:rgba(255,255,255,.88);
    --glass-line:  rgba(255,255,255,.9);
    --shadow-soft: 0 10px 30px -12px rgba(88,62,180,.28), 0 2px 6px rgba(88,62,180,.06);
    --shadow-btn:  0 10px 22px -8px rgba(93,63,214,.55);

    /* ── 형태 ───────────────────────────────────────── */
    --radius-sm:   16px;   /* 입력·작은 요소 */
    --radius:      22px;   /* 카드·버튼 */
    --radius-lg:   28px;   /* 큰 카드 */
    --radius-pill: 999px;

    --font: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
}

/* 보라 사용 규칙 — 넓은 면은 흰 유리 카드, 보라는 기본 버튼·진행 막대·강조 글씨.
   ⚠️ backdrop-filter(흐림)는 저가형 폰에서 버벅이므로 index.html 의 .panel 에만 쓴다. */