/* ==========================================================================
   tokens — 모든 화면의 기준값
   근거: ../01-토큰/디자인토큰.md (원본 PARADISE :root 실측값)
   색·크기를 바꿀 때는 이 파일만 고친다. 화면 CSS 에 숫자를 직접 쓰지 않는다.
   ========================================================================== */
:root{
  /* ---- 화면 배율 -------------------------------------------------------
     크롬 100% · 1352×588 화면에서 딱 맞도록 전체를 90% 로 그린다 (base.css html zoom).
     zoom 이 걸리면 vw·vh 도 같이 줄어들므로, 화면 크기는 --vw · --vh 로 쓴다. */
  --ui-zoom: .9;
  --vw: calc(1vw / var(--ui-zoom));
  --vh: calc(1vh / var(--ui-zoom));

  /* ---- 색 : 테마 --------------------------------------------------------
     화이트라벨 데모 — 클라이언트가 5가지 테마를 바꿔 보며 고른다 (js/theme.js · html[data-theme]).
     기본값(:root) = 블랙 · 레드. 아래 [data-theme] 블록이 이 값들을 덮어쓴다.
     화면 CSS 는 아래 이름만 쓴다 — 색 숫자를 직접 쓰지 않는다. */
  --bg:            #0b0b0d;   /* 페이지 바탕 */
  --bg-deep:       #050506;   /* 헤더 · 푸터 · 탭 띠 */
  --surface:       #141417;   /* 카드 · 표 머리 · 상자 */
  --surface-2:     #1d1d21;   /* 한 단계 밝은 면 */
  --surface-3:     #28282e;   /* 호버 */
  --bg-rgb:        11 11 13;  /* 바탕 반투명 덮개용 — rgb(var(--bg-rgb) / .8) */
  --fg-rgb:        255 255 255; /* 글자색 반투명 — 면 위 옅은 선 · 호버 */
  --sky:           var(--accent);

  --line:          #25252b;
  --line-strong:   #4a4a54;

  --text:          #ffffff;
  --text-sub:      #a4a4ae;
  --text-mute:     #6c6c76;
  --text-on-light: #444444;   /* 흰 입력칸 안 글자 */

  /* 포인트 — 채움(accent) · 채움 위 글자(ink) · 바탕 위 글자(fg) · 선(line) 을 따로 둔다.
     형광 라임처럼 흰 바탕 위 글자로 못 쓰는 색이 있어서다. */
  --accent:        #e10600;   /* 버튼 · 뱃지 · 선택 채움 */
  --accent-hi:     #ff2a1f;   /* 호버 */
  --accent-ink:    #ffffff;   /* 채움 위 글자 */
  --accent-fg:     #ff3b30;   /* 바탕 위 강조 글자 · 아이콘 */
  --accent-line:   #e10600;   /* 강조 테두리 · 초점 */
  --accent-2:      var(--accent);   /* 보조 포인트 (화이트 · 볼트 테마의 주황) */
  --accent-soft:   color-mix(in srgb, var(--accent) 12%, transparent);

  /* 메인 배너 — 화이트 테마도 배너는 진하게 둔다(흰 면만 이어지면 허전하다) */
  /* 페이지 바탕 결 — 아주 옅은 사선 + 위쪽 조명 */
  --page-tex: radial-gradient(90% 520px at 50% -120px, color-mix(in srgb, var(--accent) 7%, transparent), transparent),
              repeating-linear-gradient(-60deg, rgb(255 255 255 / .012) 0 1px, transparent 1px 12px);

  --hero-bg:       #08080a;
  --hero-bg-2:     #151518;   /* 배너 바탕 번짐 */
  --hero-fg:       #ffffff;
  --hero-slab:     var(--accent);
  --hero-num:      var(--accent-ink);   /* 사선 면 위 큰 숫자 */
  --hero-kick:     var(--accent-fg);
  --hero-stripe:   var(--accent);

  /* 상세페이지 큰 판(마이페이지 · 예측마켓 · 미니게임 · 게시판 · VIP · 친구초대) — 판 > 상자 > 칸 3단.
     예전 고정 남색(#131b33 → #0d1326 판 · #0c1228 · #0a1022 상자 · #0f1528 · #070b18 칸)을 테마 면으로 바꿨다 (2026-10-02) */
  --pn-top:   var(--surface-2);   /* 큰 판 위 */
  --pn-bot:   var(--surface);     /* 큰 판 아래 */
  --pn-card:  var(--bg);          /* 판 안 상자 (판보다 한 단계 어둡게) */
  --pn-card2: var(--surface);     /* 상자 안 한 단계 밝은 칸 */
  --pn-well:  var(--bg-deep);     /* 가장 깊은 칸 (입력 줄 · 차트 바탕) */
  --pn-line:  rgb(var(--fg-rgb) / .07);

  /* 예전 이름 — 화면 CSS 가 아직 쓰는 곳이 있어 포인트로 잇는다 */
  --gold:          var(--accent-fg);
  --gold-deep:     var(--accent-fg);
  --gold-soft:     var(--accent-soft);
  --text-on-gold:  var(--accent-ink);

  /* ---- 색 : 상태 (테마와 관계없이 같은 뜻) ------------------------------ */
  --danger:        #ff4d4f;
  --success:       #19c95a;
  --info:          #2cb4ff;
  --warn:          #ffa500;
  --private:       #3b82f6;
  --telegram:      #54a9eb;
  --live:          #e5243b;   /* LIVE 표시 — 레드 테마에서도 같은 빨강 */

  /* ---- 금액 : 글자색 굵게 (포인트 색을 쓰면 빨강 테마에서 손실처럼 보인다) ---- */
  --money:         var(--text);

  /* ---- 글꼴 ------------------------------------------------------------ */
  --font-display: "Barlow Condensed", "Noto Sans KR", sans-serif;  /* 로고 · 큰 제목(영문·숫자) — 800 기울임 대문자 */
  --slant: -8deg;
  --display-italic: italic;   /* 큰 영문 · 숫자 기울임 — 스카이 테마는 똑바로 */   /* 스포츠 사선 — 띠 · 버튼 장식의 기울기 */
  --font: "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;   /* 본문 기본 */
  --fs-md: 15px;   /* 상단 텍스트 메뉴 */
  --fs-lg: 16px;   /* GNB · 입력칸 · 버튼 큰 것 */
  --fs-xl: 20px;   /* 카드 제목 */
  --fs-2xl: 22px;  /* 섹션 제목 */
  --fs-3xl: 28px;  /* 페이지 제목 (마이페이지) */
  --fs-4xl: 30px;  /* 페이지 제목 (가운데 정렬형) */
  --fs-5xl: 40px;  /* 마이페이지 인사 닉네임 */
  --fw-regular: 400;
  --fw-bold: 700;

  /* ---- 둥글기 ---------------------------------------------------------- */
  --r:      4px;    /* 버튼 · 입력 — 스포츠 느낌: 각지게 */
  --r-lg:   6px;    /* 카드 · 배너 · 큰 상자 */
  --r-full: 999px;

  /* ---- 여백 ------------------------------------------------------------ */
  --gap-xs: 5px;
  --gap-sm: 10px;
  --gap-md: 15px;
  --gap-lg: 20px;
  --gap-xl: 30px;
  --gap-2xl: 40px;

  /* ---- 뼈대 크기 ------------------------------------------------------- */
  --page-w:      min(1440px, calc(100 * var(--vw) - 200px)); /* 본문 폭 — 양옆 여백 100 이상, 최대 1440 */
  --page-min:    1180px;  /* 원본 body min-width */
  --header-h:    76px;    /* 한 줄 헤더 (원본은 90 + GNB 40 = 130) */
  --notice-h:    40px;
  --quick-w:     72px;
  --mypage-lnb:  210px;

  /* ---- 부품 크기 ------------------------------------------------------- */
  --btn-h:     42px;
  --btn-h-sm:  36px;
  --btn-h-lg:  48px;
  --input-h:   40px;
  --card-gap:  20px;      /* 게임카드 간격 (원본 --game-gap) */

  /* ---- 그림자 · 겹침 --------------------------------------------------- */
  --shadow-header: 0 1px 10px #000;
  --shadow-card:   0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
  --glow-gold:     0 6px 24px color-mix(in srgb, var(--accent) 30%, transparent);
  --shadow-pop:    0 10px 40px rgba(0,0,0,.6);
  --dim:           rgba(0,0,0,.7);

  --z-header:  100;
  --z-quick:   90;
  --z-drop:    110;
  --z-modal:   1000;
  --z-toast:   1100;

  /* ---- 움직임 : 필요한 속성만 (원본은 모든 요소 transition:all) --------- */
  --t-fast: 150ms ease;
  --t:      250ms ease;
}

/* ---- 휴대폰 (1023px 이하) : 배율 없이 제 크기로, 양옆 16px 여백 ------------------
   모바일 기준 폭은 모든 CSS 에서 같은 값(1023px — 태블릿 세로까지)을 쓴다. 미디어쿼리에는 변수를 못 써서 숫자로 적는다. */
@media (max-width:1023px){
  :root{
    --ui-zoom: 1;
    --page-w:   calc(100 * var(--vw) - 32px);
    --page-min: 0px;
    --header-h: 56px;
    --mtab-h:   62px;    /* 아래 탭 높이 */
    --fs-2xl: 19px;
    --fs-3xl: 22px;
    --fs-4xl: 24px;
    --fs-5xl: 28px;
    --gap-xl: 20px;
    --gap-2xl: 28px;
    --card-gap: 10px;
  }
}

/* ---- 태블릿 가로 (1024~1079px) : PC 틀(최소 1180)을 조금 더 줄여 옆 스크롤이 생기지 않게 ---- */
@media (min-width:1024px) and (max-width:1079px){
  :root{ --ui-zoom: .85; }
}

/* ==========================================================================
   테마 5종 — html[data-theme="…"] (js/theme.js 가 붙인다)
   ========================================================================== */
/* 블랙 · 레드 — 기본값(:root) 과 같다. 이름만 둔다 */
:root[data-theme="dark-red"]{ }

/* 블랙 · 그린 */
:root[data-theme="dark-green"]{
  --accent:#16e05b; --accent-hi:#3cf27a; --accent-ink:#04140a; --accent-fg:#2cf06d; --accent-line:#16e05b;
}

/* 블랙 · 오렌지 */
:root[data-theme="dark-orange"]{
  --accent:#ff5f00; --accent-hi:#ff7a26; --accent-ink:#0b0b0d; --accent-fg:#ff7a26; --accent-line:#ff5f00;
}

/* 화이트 공통 — 흰 바탕 · 검정 글자 */
:root[data-theme^="light-"]{
  color-scheme: light;
  --page-tex: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #0a0e18) 0, transparent 620px),
              repeating-linear-gradient(-60deg, rgb(10 14 24 / .03) 0 1px, transparent 1px 12px);
  --bg:#eef0f4; --bg-deep:#ffffff; --surface:#ffffff; --surface-2:#f2f4f7; --surface-3:#e6e9ef;
  --bg-rgb:238 240 244; --fg-rgb:10 14 24;
  --line:#dde1e8; --line-strong:#aab1bf;
  --text:#0a0e18; --text-sub:#4c5566; --text-mute:#8b93a3;
  --shadow-header:0 1px 0 var(--line), 0 6px 20px rgba(10,14,24,.06);
  --shadow-card:0 8px 24px rgba(10,14,24,.08);
  --shadow-pop:0 14px 40px rgba(10,14,24,.16);
  --dim:rgba(10,14,24,.55);
  /* 큰 판 — 흰 테마: 옅은 회색 판 위에 흰 상자 */
  --pn-top:var(--surface-2); --pn-bot:var(--surface-2); --pn-card:var(--surface); --pn-card2:var(--surface-2); --pn-well:var(--bg);
  --pn-line:rgb(var(--fg-rgb) / .09);
}
/* 화이트 · 블루 */
:root[data-theme="light-blue"]{
  --accent:#1665ff; --accent-hi:#3a7dff; --accent-ink:#ffffff; --accent-fg:#1260f5; --accent-line:#1665ff;
  --hero-bg:#071536; --hero-bg-2:#0d2a6e; --hero-slab:#1665ff; --hero-num:#ffffff; --hero-kick:#7fb2ff; --hero-stripe:#5b9bff;
}
/* 화이트 · 볼트(형광) + 오렌지 — 채움은 형광 라임, 흰 바탕 위 글자 · 선은 오렌지 */
:root[data-theme="light-volt"]{
  --accent:#c8f31d; --accent-hi:#d6ff3a; --accent-ink:#0a0e18; --accent-fg:#f05a00; --accent-line:#f05a00;
  --accent-2:#ff6a13;
  --hero-bg:#0c0d10; --hero-bg-2:#1a1c21; --hero-slab:#c8f31d; --hero-num:#0a0e18; --hero-kick:#c8f31d; --hero-stripe:#ff6a13;
}

/* 글꼴 모양 — html[data-style] (js/theme.js 가 테마마다 붙인다)
   sprint = 좁은 기울임(기본) · geo = 넓은 기하학 · 똑바로 · block = 높고 굵은 세로형 · 똑바로 */
:root[data-style="geo"]{ --font-display: "Montserrat", "Noto Sans KR", sans-serif; --display-italic: normal; }
:root[data-style="block"]{ --font-display: "Anton", "Noto Sans KR", sans-serif; --display-italic: normal; }
:root[data-style="lux"]{ --font-display: "Cinzel", "Noto Sans KR", serif; --display-italic: normal; }   /* 카지노 럭셔리 — 로마자 대문자 세리프 */

/* 블랙 · 스카이 / 화이트 · 스카이 — 남색 바탕 · 하늘색 포인트 · 흰 사선 막대 · 기하학 글꼴(똑바로 선 대문자) */
:root[data-theme$="-sky"]{
  --accent:#2f8fe0; --accent-hi:#4aa3ef; --accent-ink:#ffffff; --accent-fg:#4aa3ef; --accent-line:#2f8fe0;
  --accent-2:#ffffff;
  --hero-bg:#060b16; --hero-bg-2:#0c1a33; --hero-slab:#2f8fe0; --hero-num:#ffffff; --hero-kick:#ffffff; --hero-stripe:#ffffff;
}
:root[data-theme="dark-sky"]{
  --bg:#070b14; --bg-deep:#04070d; --surface:#0e1522; --surface-2:#151e2e; --surface-3:#1e293d;
  --bg-rgb:7 11 20; --line:#1c2638; --line-strong:#3a4a66;
  --text-sub:#9aa8bf; --text-mute:#62708a;
}
:root[data-theme="light-sky"]{
  --accent-fg:#1f7fd0; --accent-line:#2f8fe0; --accent-2:#0c1a33;
}
:root[data-theme="light-sky"] .dark-zone{ --bg-deep:#060b16; --surface:#0e1522; --surface-2:#151e2e; --line:#1c2638; --accent-fg:#4aa3ef; --accent-line:#4aa3ef; }

/* 어두운 면 — 화이트 테마에서도 진하게 두는 곳(푸터 등). 이 안에서는 다크 값으로 돌아간다 */
:root[data-theme^="light-"] .dark-zone{
  --bg:#0b0b0d; --bg-deep:#050506; --surface:#141417; --surface-2:#1d1d21; --surface-3:#28282e;
  --bg-rgb:11 11 13; --fg-rgb:255 255 255; --line:#25252b; --line-strong:#4a4a54;
  --text:#ffffff; --text-sub:#a4a4ae; --text-mute:#6c6c76;
  color:var(--text);
}
:root[data-theme="light-blue"] .dark-zone{ --bg-deep:#071536; --surface:#0d2150; --surface-2:#132b63; --line:#1c3470; --accent-fg:#7fb2ff; --accent-line:#5b9bff; }
:root[data-theme="light-volt"] .dark-zone{ --accent-fg:#c8f31d; --accent-line:#c8f31d; }