@charset "utf-8";
/* =====================================================================
   CROWN TCG 디자인 토큰 · tokens.css  (모든 화면이 맨 먼저 읽는다)
   디자인 정답 = 힉스필드 시안 A '로열 누아르' (design/DESIGN.md · ../design/hf/A_*.png)

   한 줄 요약
   - 바탕은 순검정(#0A0A0A) + 아주 옅은 벨벳 질감(body::before, app.css). 판은 숯색(#131313) + 1px 금빛 머리카락 선.
   - 글자는 따뜻한 흰색(#F4EEDF). 제목·가격·주 버튼은 브러시드 골드(#C9A24A → #F3D27A 그라데이션).
   - 상품 사진(투명 누끼)은 어두운 칸 안에서 위에서 내려오는 금빛 조명을 받는다 — 보석 가게 진열장처럼.
   - 빨강은 LIVE(방송 중) 표시에만(--live).
   - 글꼴: 본문·제목·가격·영문 라벨 모두 Pretendard (10-29 세리프·Cinzel 뺌).

   쓰는 법
   1) 원색 토큰(--gold, --live …)은 '무엇을 칠할지' 정할 때만.
   2) 컴포넌트는 의미 토큰(--bg --surface --text --border --focus --btn-bg …)을 쓴다.
   3) --navy* · --ivory* · --paper · --white 는 G.I. TCG(아이보리) CSS 가 깨지지 않게 남겨 둔 옛 이름 — 값은 새 결로 바꿔 두었다.
      새 코드에서는 쓰지 말 것. (--navy = 이제 '주 강조색' = 금색, --ivory/--paper = 검정·숯색 판)
   브레이크포인트(이 3개만): 기본(폰 ≤599) · 600 · 900(PC 메뉴, 독 숨김) · 1200(넓은 PC)
   ===================================================================== */
:root{
  /* ---- 1. 브러시드 골드 (주 강조: 제목 · 가격 · 주 버튼 · 선택) ---- */
  --gold:#C9A24A;           /* 기본 금색: 선·아이콘·큰 글자 (검정 위 8:1) */
  --gold-hi:#F3D27A;        /* 밝은 금: hover · 하이라이트 */
  --gold-lo:#8C6A26;        /* 어두운 금: 눌림 · 그라데이션 끝 */
  --gold-ink:#D9B766;       /* 작은 금색 글자(검정 위 10:1) */
  --gold-badge:#C9A24A;     /* NEW 배지 바탕(검정 글자) */
  --gold-grad:linear-gradient(180deg,#F6DC8E 0%,#D9B55E 46%,#A97F2E 100%);   /* 금속 글자 · 순위 숫자 · 주 버튼 */
  --gold-grad-h:linear-gradient(90deg,#A97F2E 0%,#E8C773 50%,#A97F2E 100%);  /* 가로 금빛 선 */
  --gold-line:rgba(201,162,74,.55);
  --gold-line-2:rgba(201,162,74,.28);
  --gold-wash:rgba(201,162,74,.10);
  --gold-glow:0 0 0 1px rgba(201,162,74,.35),0 10px 40px -12px rgba(243,210,122,.35);
  --on-gold:#17110A;        /* 금색 바탕 위 글자 */

  /* ---- 2. 방송 빨강 (LIVE 에만) ---- */
  --live:#E5262D; --live-hi:#FF4B4F; --live-wash:rgba(229,38,45,.14);
  --live-chip:#C4161D;       /* 글자를 얹는 작은 빨간 칩(LIVE·NEW) 바탕 — 크림 글자와 5.2:1 (browse-10, --live 는 3.9:1) */

  /* ---- 3. 바탕 · 판 ---- */
  --black:#0A0A0A;          /* 페이지 바탕 */
  --char:#131313;           /* 판 · 카드 */
  --char-2:#1A1A1A;         /* 판 안의 칸 · hover */
  --char-3:#222222;         /* 진한 테두리 · 비활성 */
  --well:#0E0E0E;           /* 상품 사진 칸 바탕(조명 그라데이션 아래) */
  --well-grad:radial-gradient(120% 90% at 50% 0%,rgba(243,210,122,.16) 0%,rgba(201,162,74,.05) 38%,rgba(0,0,0,0) 70%),#0E0E0E;
  --texture:url("/static/img/hf/ct-texture.webp");

  /* ---- 4. 상태색 (어두운 바탕용, 채도 낮춘 알약) ---- */
  --ok:#5CC58E; --ok-wash:rgba(92,197,142,.13); --ok-line:rgba(92,197,142,.4);
  --warn:#E3AE4F; --warn-wash:rgba(227,174,79,.14); --warn-line:rgba(227,174,79,.4);
  --info:#7AA7EC; --info-wash:rgba(122,167,236,.14); --info-line:rgba(122,167,236,.4);
  --violet:#A993E6; --violet-wash:rgba(169,147,230,.14);
  --teal:#5BC7BA; --teal-wash:rgba(91,199,186,.13); --teal-ink:var(--teal);   /* teal-ink = 옅은 청록 바탕 위 글자 (QA VIS-12) */
  --mute:#9A9384; --mute-wash:rgba(255,255,255,.06);
  --danger:#F06A60; --danger-wash:rgba(240,106,96,.13);
  --on-danger:var(--on-gold);  /* 빨강 단추(btn--danger) 위 글자 — 어두운 화면은 먹색(6.2:1) */

  /* ---- 5. 결제·SNS 브랜드 색 (그 브랜드 자리에서만) ---- */
  --kakao:#FEE500; --kakao-ink:#191600;
  --naver:#03C75A; --toss:#0064FF; --payco:#FA2D2D; --samsung:#1428A0;
  --insta:linear-gradient(45deg,#F58529,#DD2A7B 52%,#8134AF);
  --youtube:#FF0000; --tiktok:#000000;

  /* ---- 6. HIT 등급 ---- */
  --g-top:var(--gold);      /* MUR · UR · SAR · SEC */
  --g-mid:#8E86C9;          /* SR · AR · HR */

  /* ---- 7. 글꼴 ---- */
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --serif:var(--font);      /* 한글 제목 · 가격 숫자 — 10-29 세리프가 잘 안 읽힌다고 해서 Pretendard 굵게로 */
  --display:var(--font);    /* 영문 대문자 라벨 · 섹션 영문 제목 (옛 Cinzel) */
  --sport:var(--font);
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:14px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:26px; --fs-4xl:32px;
  --lh-tight:1.28; --lh:1.55; --lh-loose:1.7;
  --track-caps:.1em;        /* 영문 대문자 자간 */

  /* ---- 8. 간격 (4의 배수) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;

  /* ---- 9. 둥글기 (시안: 판 8~10, 버튼 알약/6) ---- */
  --r-xs:3px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-pill:999px;

  /* ---- 10. 그림자 (검정 바탕 — 그림자보다 금빛 선·빛으로 띄운다) ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 1px 2px rgba(0,0,0,.45),0 12px 28px -14px rgba(0,0,0,.8);
  --sh-3:0 2px 4px rgba(0,0,0,.5),0 28px 56px -22px rgba(0,0,0,.9);
  --sh-float:0 -1px 0 rgba(201,162,74,.35),0 -12px 32px -12px rgba(0,0,0,.9);
  --sh-frame:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 1px rgba(201,162,74,.22);

  /* ---- 11. 겹침 순서 ---- */
  --z-base:1; --z-sticky:30; --z-header:40; --z-dock:45; --z-scrim:55; --z-drawer:60; --z-modal:70; --z-toast:80; --z-skip:100;

  /* ---- 12. 움직임 ---- */
  --ease:cubic-bezier(.2,.7,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
  --t-fast:.15s; --t:.22s; --t-slow:.32s;

  /* ---- 13. 판 ---- */
  --wrap:1360px;            /* 시안 A PC 실측: 머리·홈·목록 본문 폭 ≈ 1360 (화면마다 같은 폭) */
  --gut:16px;
  --hd:56px;
  --bottom-bar:0px;         /* 하단 고정 바(독·구매 바) 높이 — app.js 가 잰다 */

  /* ---- 의미 토큰 (컴포넌트는 이것만) ---- */
  --bg:var(--black);
  --surface:var(--char);
  --surface-2:rgba(255,255,255,.035);
  --surface-3:rgba(255,255,255,.065);
  --text:#F4EEDF; --text-2:#CFC7B4; --text-3:#9A9384;   /* text-3 = 검정 위 6:1 */
  --heading:var(--gold-hi);                              /* 섹션 제목 · 큰 한글 제목 (세리프) */
  --price:var(--gold-hi);                                /* 가격 숫자 (세리프) */
  --border:rgba(201,162,74,.30); --border-2:rgba(201,162,74,.55);
  --hair:var(--gold-line-2);                             /* 금빛 머리카락 선(구분선) */
  --line-soft:rgba(255,255,255,.08);                     /* 판 안의 옅은 구분선 */
  --accent:var(--gold); --accent-text:var(--gold-ink);
  --focus:#F3D27A;
  --input-bg:#101010; --input-line:rgba(255,255,255,.16);
  --btn-bg:var(--gold-grad); --btn-fg:var(--on-gold); --btn-hover:linear-gradient(180deg,#FFE7A3 0%,#E6C36C 46%,#B98D38 100%);
  --btn2-bg:transparent; --btn2-fg:var(--gold-hi); --btn2-line:var(--gold-line); --btn2-hover:rgba(201,162,74,.10);
  --scrim:rgba(0,0,0,.62);
  --pulse:var(--live);

  /* ---- 옛 이름 (G.I. TCG · TCG KING CSS 호환 — 새 코드에서 쓰지 말 것) ---- */
  --navy:var(--gold); --navy-hi:var(--gold-hi); --navy-lo:#000000; --navy-2:var(--char-2);
  --navy-wash:rgba(201,162,74,.10); --navy-line:var(--gold-line);
  --ivory:var(--black); --ivory-2:#0F0F0F; --ivory-3:rgba(201,162,74,.30);
  --paper:var(--char); --white:#FFFFFF;
  --red:var(--gold); --red-hi:var(--gold-hi); --red-lo:var(--gold-lo); --red-deep:var(--gold-lo);
  --red-text:var(--gold-ink); --red-on-dark:var(--gold-hi); --red-ink:var(--gold-ink);
  --red-wash:var(--gold-wash); --red-line:var(--gold-line); --red-line-2:var(--gold-line-2);
  --red-badge:var(--gold);
  --ink:var(--black); --ink-2:#0F0F0F;
  --stage:var(--black); --stage-2:#0F0F0F; --stage-3:var(--char); --stage-4:var(--char-3);
  --panel:var(--char); --panel-2:rgba(255,255,255,.035); --panel-3:rgba(255,255,255,.065); --panel-solid:var(--char);
  --img-well:var(--well);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --line-3:rgba(255,255,255,.3);
  --glass:rgba(19,19,19,.72); --glass-2:rgba(19,19,19,.88); --glass-3:var(--char);
  --glass-line:var(--border); --glass-line-2:var(--gold-line-2);
  --on-stage:var(--text); --on-stage-2:var(--text-2); --on-stage-3:var(--text-3);
  --glow-page:var(--texture); --stage-glow:var(--texture);
  --glow-ring:var(--sh-2); --glow-ring-sm:var(--sh-1); --glow-in:none; --glow-btn:0 8px 22px -10px rgba(243,210,122,.45); --glow-gold:var(--gold-glow);
  --sh-red:var(--glow-btn); --sh-gold:var(--gold-glow);
  color-scheme:dark;
}
@media (min-width:900px){:root{--gut:24px;--hd:68px}}     /* 시안 A PC 헤더 ≈ 68px */
@media (min-width:1200px){:root{--gut:32px;--hd:70px}}

[data-surface="stage"],.stage,[data-surface="paper"],.paper{color:var(--text)}

/* ---- 관리자 (시안 A_admin_pc: 검정 사이드바 + 숯색 본문 + 진한 판, 금색 강조) ---- */
.admin{
  --bg:#141414;
  --surface:#1A1A1A; --surface-2:#202020; --surface-3:#262626;
  --text:#F2ECDD; --text-2:#C9C1AE; --text-3:#9A9384;
  --border:rgba(201,162,74,.22); --border-2:rgba(201,162,74,.45);
  --side:#0B0B0B;           /* 사이드바 바탕 */
  --side-w:240px;
  --bar-off:#3A3A3A;        /* 7일 막대(오늘 아닌 날) — 오늘은 금색 */
}

/* ---- 밝은 화면 (손님 화면 오른쪽 위 해/달 단추 → <html data-theme="light">, base.html·js/theme.js) ----
   '로열 누아르'의 짝 = 아이보리·흰 판 + 같은 브러시드 골드 + 진한 먹색 글자. 금색 글자는 밝은 바탕에서 읽히게 한 단계 진하게(AA).
   여기서는 토큰 값만 바꾼다. 토큰 대신 색을 박아 둔 곳은 css/theme-light.css 가 덮는다.
   --black 은 이름 그대로 검정으로 둔다(영상 칸 등 진짜 검정 자리) — 페이지 바탕은 --bg.
   관리자(/admin)·방송 화면(/o/*)에는 data-theme 이 붙지 않는다(늘 어두운 화면). */
:root[data-theme="light"]{
  --gold:#A47D2E;           /* 선·아이콘·큰 글자 (아이보리 위 3.4:1) */
  --gold-hi:#86621A;        /* 밝은 바탕에선 '강조 금' = 진한 금 (아이보리 위 5:1) — 제목·가격·금색 글자 */
  --gold-lo:#6B4E12;
  --gold-ink:#7A5815;       /* 작은 금색 글자 (아이보리 위 5.8:1) */
  --gold-grad:linear-gradient(180deg,#F1D488 0%,#D4AF58 46%,#A9802F 100%);   /* 주 버튼 바탕(먹색 글자) — 어두운 화면과 같은 금 */
  --gold-grad-text:linear-gradient(180deg,#B08834 0%,#86621A 52%,#5E4410 100%);   /* 금속 글자(제목·가격) — 밝은 바탕에서 읽히게 진하게 (theme-light.css 가 글자 자리에만 끼운다) */
  --gold-line:rgba(164,125,46,.55);
  --gold-line-2:rgba(164,125,46,.30);
  --gold-wash:rgba(164,125,46,.10);
  --gold-glow:0 0 0 1px rgba(164,125,46,.35),0 10px 30px -14px rgba(164,125,46,.40);

  --live:#D7191F; --live-hi:#C8141A; --live-wash:rgba(215,25,31,.10);
  --live-chip:#C8141A;       /* 흰 글자와 5.8:1 */

  --char:#FFFFFF;           /* 판 · 카드 = 흰색 */
  --char-2:#F3EFE6;         /* 판 안의 칸 · hover */
  --char-3:#E6E0D3;         /* 진한 테두리 · 비활성 */
  --well:#EFEBE2;           /* 상품 사진 칸 = 밝은 회백 진열장 */
  --well-grad:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 42%,rgba(255,255,255,0) 72%),linear-gradient(180deg,#F5F2EB 0%,#E9E4D8 100%);
  --texture:none;

  --ok:#1A7647; --ok-wash:rgba(26,118,71,.10); --ok-line:rgba(26,118,71,.38);
  --warn:#975C05; --warn-wash:rgba(151,92,5,.10); --warn-line:rgba(151,92,5,.38);
  --info:#2B5DB0; --info-wash:rgba(43,93,176,.09); --info-line:rgba(43,93,176,.36);
  --violet:#6247B8; --violet-wash:rgba(98,71,184,.09);
  --teal:#13786D; --teal-wash:rgba(19,120,109,.09); --teal-ink:#0F6158;   /* 밝은 화면 언커먼 칩 글자 6.4:1 (--teal 은 4.25:1 — QA VIS-12) */
  --mute:#6A6152; --mute-wash:rgba(28,25,20,.05);
  --danger:#BE3027; --danger-wash:rgba(190,48,39,.09);
  --on-danger:#FFFDF8;      /* 밝은 화면 빨강 단추 위 글자 = 흰색 5.7:1 (먹색은 3.25:1 — QA VIS-11) */
  --g-mid:#5E55A8;

  --sh-1:0 1px 2px rgba(60,45,20,.10);
  --sh-2:0 1px 2px rgba(60,45,20,.08),0 12px 28px -16px rgba(60,45,20,.30);
  --sh-3:0 2px 4px rgba(60,45,20,.08),0 24px 48px -24px rgba(60,45,20,.38);
  --sh-float:0 -1px 0 rgba(164,125,46,.30),0 -10px 28px -14px rgba(60,45,20,.30);
  --sh-frame:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(164,125,46,.24);

  --bg:#F6F2E9;             /* 페이지 바탕 = 아이보리 */
  --surface:#FFFFFF;
  --surface-2:rgba(28,25,20,.035);
  --surface-3:rgba(28,25,20,.065);
  --text:#1C1914; --text-2:#4A4336; --text-3:#6A6152;   /* 먹색 · text-3 = 아이보리 위 5.4:1 */
  --heading:var(--gold-ink);
  --price:var(--gold-ink);
  --border:rgba(164,125,46,.32); --border-2:rgba(164,125,46,.58);
  --line-soft:rgba(28,25,20,.08);
  --focus:#86621A;
  --input-bg:#FFFFFF; --input-line:rgba(28,25,20,.22);
  --btn-hover:linear-gradient(180deg,#F8E19E 0%,#DDBB66 46%,#B08635 100%);
  --btn2-hover:rgba(164,125,46,.10);
  --scrim:rgba(28,22,12,.45);

  /* 옛 이름 — 값이 어두운 칸을 가리키던 것들 */
  --navy-lo:#1C1914; --navy-wash:rgba(164,125,46,.10);
  --ivory:var(--bg); --ivory-2:#EFEBE2; --ivory-3:rgba(164,125,46,.30);
  --ink:var(--bg); --ink-2:#EFEBE2;
  --stage:var(--bg); --stage-2:#EFEBE2;
  --panel-2:rgba(28,25,20,.035); --panel-3:rgba(28,25,20,.065);
  --line:rgba(28,25,20,.10); --line-2:rgba(28,25,20,.18); --line-3:rgba(28,25,20,.30);
  --glass:rgba(255,255,255,.80); --glass-2:rgba(255,255,255,.92);
  --glow-btn:0 8px 20px -10px rgba(164,125,46,.55);
  color-scheme:light;
}