/* style/tokens.css — CheatCode design tokens (single source of truth)
 *
 * Loaded app-wide via `@import url("tokens.css")` at the top of global.css.
 * Every page's per-page CSS @imports global.css, so these tokens + global
 * rules reach every page with no PHP edits.
 *
 * Design direction: "Dark Chrome, Light Data" — dark slate chrome (navbar,
 * section headers, table headers, modal headers) framing white data surfaces.
 * Blue = the single action accent. Naver green / Coupang red = identity only.
 * Volt (#F5E761) = the "cheat-key" moment (keyword highlight + low quota).
 *
 * No build step. Plain CSS custom properties. No JS-bound class renames.
 */

/* ── Pretendard Variable — self-hosted (CSP blocks CDN fonts). One woff2
   covers weights 100–900. The Spoqa @font-face in global.css is commented
   out, so the app currently renders in fallback fonts — this is a pure
   upgrade with zero layout risk. ── */
@font-face {
  font-family: "Pretendard Variable";
  src: url("../fonts/pretendard/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ═══ CHROME (dark frame) ═══════════════════════════════════════ */
  --chrome-900:      #0b1220;   /* navbar base, deepest chrome */
  --chrome-800:      #14203a;   /* navbar gradient end / raised chrome */
  --chrome-700:      #1e293b;   /* table thead, toolbars, modal header, fold bar */
  --chrome-600:      #334155;   /* chrome hover states */
  --chrome-line:     rgba(148, 163, 184, 0.18);  /* hairline ON dark chrome */
  --chrome-text:     #e2e8f0;   /* primary text on chrome */
  --chrome-text-dim: #94a3b8;   /* secondary text on chrome */
  --chrome-text-faint: rgba(226, 232, 240, 0.55);
  --chrome-input-bg:   rgba(255, 255, 255, 0.07);  /* inputs sitting on chrome */
  --chrome-input-border: rgba(255, 255, 255, 0.14);

  /* ═══ SURFACES (light data) ═════════════════════════════════════ */
  --surface-0:  #eef2f7;   /* page background base */
  --surface-1:  #ffffff;   /* cards, table bodies — OPAQUE */
  --surface-2:  #f8fafc;   /* wells, input bg, hover-raised inner tiles */
  --surface-3:  #f1f5f9;   /* insets, chip rails, generic badges */
  --surface-hover:    #eef6ff;  /* table row hover */
  --surface-selected: #e0edff;  /* selected row */
  --surface-white-chip: #ffffff; /* product thumbnails — never tint merchandise */

  /* ═══ BORDERS on light ══════════════════════════════════════════ */
  --border:        rgba(15, 23, 42, 0.08);   /* default hairline */
  --border-strong: rgba(15, 23, 42, 0.14);   /* input borders, table outer frame */
  --border-grid:   rgba(15, 23, 42, 0.06);   /* whisper-quiet table gridlines */

  /* ═══ TEXT on light ═════════════════════════════════════════════ */
  --text:        #0f172a;   /* primary */
  --text-2:      #334155;   /* labels, secondary */
  --text-muted:  #64748b;   /* meta, captions, dates */
  --text-faint:  #94a3b8;   /* placeholders, disabled */
  --text-stale:  #9ca3af;   /* stale metric values */

  /* ═══ ACCENT (single action family — blue) ══════════════════════ */
  --accent:        #2563eb;   --accent: oklch(54% 0.20 262);
  --accent-hover:  #1d4ed8;
  --accent-active: #1e40af;
  --accent-soft:   rgba(37, 99, 235, 0.10);
  --accent-border: rgba(37, 99, 235, 0.28);
  --accent-text:   #1d4ed8;   /* accent as text on white (5.9:1) */
  --accent-on-dark:#60a5fa;   /* accent used ON chrome */

  /* ═══ VOLT — the "cheat-key" moment (legacy --color10 #F5E761).
     ONLY: keyword <mark> highlight + low-quota counter. Never body,
     never buttons-at-rest. ── */
  --volt:          #f5e761;
  --volt-ink:      #7a6a00;   /* volt as text on white — legibility */
  --volt-tint:     rgba(245, 231, 97, 0.22);
  --volt-border:   rgba(202, 178, 20, 0.45);

  /* ═══ STATUS / SEMANTIC ═════════════════════════════════════════ */
  --success:       #059669;  --success-soft: rgba(5,150,105,.10);  --success-border: rgba(5,150,105,.32);
  --warning:       #d97706;  --warning-soft: rgba(217,119,6,.10);  --warning-border: rgba(217,119,6,.32);
  --danger:        #dc2626;  --danger-soft:  rgba(220,38,38,.08);  --danger-border:  rgba(220,38,38,.35);
  --danger-hover:  #b91c1c;
  --info:          #0891b2;  --info-soft:    rgba(8,145,178,.10);

  /* ═══ METRIC DELTAS — KR stock convention: 상승=red, 하락=blue.
       ONE switch point. Flip these two if product wants SaaS convention. ══ */
  --delta-up:      #dc2626;   /* 상승 */
  --delta-up-soft: rgba(220, 38, 38, 0.10);
  --delta-down:    #2563eb;   /* 하락 */
  --delta-down-soft: rgba(37, 99, 235, 0.10);
  --delta-flat:    #94a3b8;

  /* ═══ PLATFORM IDENTITY (nouns, never verbs). Raw brand colors fail
     4.5:1 as text on white; -deep variants are text-safe. ══ */
  --naver:        #03c75a;   /* brand fill: dots, badges, tab underline */
  --naver-deep:   #05834a;   /* text on white */
  --naver-soft:   rgba(3, 199, 90, 0.10);
  --naver-border: rgba(3, 199, 90, 0.30);
  --coupang:        #e63312;
  --coupang-deep:   #c22a0e; /* text on white */
  --coupang-soft:   rgba(230, 51, 18, 0.09);
  --coupang-border: rgba(230, 51, 18, 0.28);
  --rocket-blue:    #0f3785; /* 로켓배송 badge */
  --rocket-teal:    #0d9488; /* 판매자로켓 badge */

  /* ═══ FOCUS ═════════════════════════════════════════════════════ */
  --focus:            #2563eb;
  --focus-ring:       0 0 0 3px rgba(37, 99, 235, 0.30);
  --focus-ring-on-dark: 0 0 0 3px rgba(96, 165, 250, 0.45);

  /* ═══ ELEVATION (soft, small; nothing over 24px blur but modals) ══ */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-2: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-3: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15,23,42,.06);
  --shadow-4: 0 16px 40px rgba(2, 6, 23, 0.22), 0 4px 12px rgba(2,6,23,.10);
  --shadow-chrome: 0 6px 16px rgba(2, 6, 23, 0.18);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ═══ RADIUS ════════════════════════════════════════════════════ */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 9999px;

  /* ═══ SPACING (strict 4px grid) ═════════════════════════════════ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* ═══ Z-INDEX SCALE (kills the table.css z:9999 hazard) ═════════ */
  --z-base:       1;
  --z-sticky-th:  30;
  --z-navbar:     40;
  --z-fullscreen: 60;
  --z-popover:    70;
  --z-popup:      80;
  --z-modal:      100;
  --z-toast:      10000;

  /* ═══ MOTION ════════════════════════════════════════════════════ */
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 280ms;
  --dur-exit: 150ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ═══ TYPOGRAPHY ════════════════════════════════════════════════ */
  --font-ui: "Pretendard Variable", Pretendard, "Spoqa Han Sans Neo",
             -apple-system, BlinkMacSystemFont, system-ui, Roboto,
             "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* ─── LEGACY ALIASES — keep every existing selector resolving.
     tokens.css is imported BEFORE global.css's own :root, and global.css
     no longer redefines these, so the aliases below win app-wide. ─── */
  --color60: var(--surface-1);
  --color30: var(--chrome-700);        /* was #002D49 navy → unified onto chrome */
  --color10: var(--volt);              /* #F5E761 preserved */
  --border-color: var(--border);
  --button-border-radius: var(--r-lg); /* table.css referenced this undefined var */

  --font-family-spoqa-bold:    var(--font-ui);
  --font-family-spoqa-medium:  var(--font-ui);
  --font-family-spoqa-light:   var(--font-ui);
  --font-family-spoqa-regular: var(--font-ui);

  --cp-red:        var(--coupang);
  --cp-red-light:  var(--coupang-soft);
  --cp-red-border: var(--coupang-border);
  --tp-accent:        var(--accent);
  --tp-accent-light:  var(--accent-soft);
  --tp-accent-border: var(--accent-border);
  --tp-warn:        var(--warning);
  --tp-warn-light:  var(--warning-soft);
  --tp-warn-border: var(--warning-border);
  --tp-ok:        var(--success);
  --tp-ok-light:  var(--success-soft);
  --tp-ok-border: var(--success-border);
  --tp-danger:    var(--danger);
  --navbar-h: 44px;   /* compact uniform nav; drawer on ≤900px */
}

/* ═══ Global reduced-motion guard — MUST live here to cover every page ══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ Global focus-visible floor (WCAG 2.2: ≥2px, 3:1, not obscured) ══ */
:where(a, button, input, select, textarea, [tabindex], label.lbl_top,
       .btn_view_toggle, .btn_detail_tab, .ta_tab, .aa_filter_btn):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: inherit;
}
.div_top :focus-visible,
[class*="_modal_head"] :focus-visible { outline-color: var(--accent-on-dark); }

/* ═══ Tabular numerals wherever digit columns must align ══════════════ */
.tbl_keyword td, .tbl_track td, .detail_pane td, .tbl_monthlyCount td,
.ta_table td, .aa_table td, .metric, .quota, .summary_chip_value,
.result_card_info_value, .result_card_score_item strong, .compact_metric_top,
.tp_compact_metric_top, .top_meta_chip { font-variant-numeric: tabular-nums; }

/* ═══ Cross-browser scrollbars (Firefox + webkit) ════════════════════ */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }
.div_top ::-webkit-scrollbar-thumb,
[class*="_modal_head"] ::-webkit-scrollbar-thumb { background: #475569; }

/* ═══ Shared skeleton loader (retires the off-palette lds-hourglass) ══ */
.skel-cell {
  display: block;
  height: 12px;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 37%, #eef1f6 63%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.5s linear infinite;
}
@keyframes skel-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel-cell { animation: none; background: #eef1f6; }
}

/* Running-job LED (수집중): the one looping animation at rest */
.cc_led {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; vertical-align: middle;
  animation: cc-led-pulse 1.2s var(--ease-inout) infinite;
}
@keyframes cc-led-pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc_led { animation: none; opacity: .9; } }