/* ==========================================================================
   CenturyQuest — Design Tokens
   다크 전용(현재). 모든 색/간격을 변수로 → 추후 data-theme="light" 확장 대비.
   시안 기준(README §8): 배경 #080A12 / 카드 #121625 / 골드 #D6A84F / 퍼플 #7C5CFF
   ========================================================================== */

:root,
[data-theme="dark"] {
  /* ---- 색상 ---- */
  --cq-bg:            #080A12;
  --cq-bg-2:         #0C0F1A;   /* 약간 밝은 배경(섹션 구분) */
  --cq-card:         #121625;
  --cq-card-2:       #171C2E;   /* 카드 위 카드/호버 */
  --cq-line:         #232A40;   /* 보더/디바이더 */
  --cq-line-soft:    #1A2032;

  --cq-gold:         #D6A84F;
  --cq-gold-soft:    #E7C77E;
  --cq-purple:       #7C5CFF;
  --cq-purple-soft:  #9B83FF;
  --cq-purple-deep:  #5A3FD6;

  --cq-text:         #F4F4F5;
  --cq-text-sub:     #A1A1AA;
  --cq-text-mute:    #6B7280;

  --cq-danger:       #EF4444;
  --cq-success:      #22C55E;
  --cq-warn:         #F59E0B;
  --cq-info:         #38BDF8;

  /* 상태 배지(대기중/진행중/종료) */
  --cq-status-wait:  #38BDF8;
  --cq-status-live:  #22C55E;
  --cq-status-end:   #6B7280;

  /* ---- 그라디언트 ---- */
  --cq-grad-purple:  linear-gradient(135deg, #7C5CFF 0%, #5A3FD6 100%);
  --cq-grad-gold:    linear-gradient(135deg, #E7C77E 0%, #C9923A 100%);
  --cq-grad-card:    linear-gradient(180deg, #161B2C 0%, #10131F 100%);
  /* 썸네일/배경 위 텍스트 가독용 오버레이 */
  --cq-overlay:      linear-gradient(180deg, rgba(8,10,18,0) 0%, rgba(8,10,18,.55) 60%, rgba(8,10,18,.92) 100%);
  --cq-overlay-soft: linear-gradient(180deg, rgba(8,10,18,.15) 0%, rgba(8,10,18,.75) 100%);

  /* ---- 타이포 ---- */
  --cq-font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --cq-font-display: "Cinzel", "Pretendard", serif; /* 로고/타이틀 장식용 */

  --cq-fs-xs:   11px;
  --cq-fs-sm:   12px;
  --cq-fs-base: 14px;
  --cq-fs-md:   16px;
  --cq-fs-lg:   18px;
  --cq-fs-xl:   22px;
  --cq-fs-2xl:  28px;
  --cq-fs-3xl:  34px;

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

  /* ---- 라운드 ---- */
  --cq-r-sm:  8px;
  --cq-r-md:  12px;
  --cq-r-lg:  16px;
  --cq-r-xl:  20px;
  --cq-r-pill: 999px;

  /* ---- 그림자/글로우 ---- */
  --cq-shadow:      0 8px 24px rgba(0,0,0,.45);
  --cq-shadow-sm:   0 2px 8px rgba(0,0,0,.35);
  --cq-glow-purple: 0 0 0 1px rgba(124,92,255,.35), 0 6px 20px rgba(124,92,255,.30);
  --cq-glow-gold:   0 0 0 1px rgba(214,168,79,.40), 0 6px 20px rgba(214,168,79,.25);

  /* ---- 레이아웃 ---- */
  --cq-maxw:    480px;   /* 모바일 우선: 콘텐츠 최대폭 */
  --cq-header-h: 56px;
  --cq-nav-h:    64px;   /* 하단 고정 네비 높이 */
  --cq-safe-b:  env(safe-area-inset-bottom, 0px);

  /* ---- 스프라이트 시트 경로(이미지 수령 후 채움) ----
     각 세트는 '균일 그리드 PNG 한 장'. 셀 슬라이싱은 background-position 으로.
     이미지가 없으면 none → 플레이스홀더 그라디언트로 폴백. */
  --cq-sheet-scene:    url("../img/scenes.jpg?v=20260617b");     /* 세트1: 4×4 장면 16종 */
  --cq-sheet-portrait: url("../img/portraits.jpg?v=20260617b");  /* 세트2: 4×8 인물 32종 */
  --cq-sheet-rulebook: url("../img/rulebooks.jpg?v=20260617b");  /* 세트3: 4×4 룰북 16종 */
  --cq-mascot:         url("../img/mascot/mascot-1.png?v=20260617b"); /* 세트5 */

  --cq-sheet-scene-cols:    4;
  --cq-sheet-scene-rows:    4;
  --cq-sheet-portrait-cols: 4;
  --cq-sheet-portrait-rows: 8;
  --cq-sheet-rulebook-cols: 4;
  --cq-sheet-rulebook-rows: 4;
}