/*
 * V3 디자인 토큰. Figma `Tokenpost V3 - Library` 추출본이다.
 *
 * ⚠️ Primitives 와 Semantic 은 **반드시 함께** 있어야 한다. 한쪽만 넣으면 선언 없는
 *    변수가 생기고, 그건 문법 오류 없이 조용히 무효 처리되어 색이 사라진다.
 *    고친 뒤 `py docs/tools/check_css_vars.py public/assets/css/v3/*.css` 를 돌린다.
 *
 * ⚠️ 원시값(#1a1f29)을 직접 쓰지 않는다. 항상 시맨틱(var(--text-primary))을 거친다.
 */

/* ── 1. Primitives ───────────────────────────────────────── */
:root{
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,sans-serif;

  --gray-01:#fafbfc; --gray-02:#f5f6f9; --gray-03:#ebecf0; --gray-04:#d9dce5;
  --gray-05:#bec3d0; --gray-06:#969eae; --gray-07:#6e7686; --gray-08:#4b5363;
  --gray-09:#303744; --gray-10:#1a1f29; --gray-11:#0d1117;
  --white:#ffffff; --black:#000000;

  --primary-01:#f5f9ff; --primary-02:#f0f6ff; --primary-03:#e6f1ff; --primary-04:#cce2ff;
  --primary-05:#bdd9ff; --primary-06:#99c5ff; --primary-07:#80b7ff; --primary-08:#4294ff;
  --primary-09:#2f80eb; --primary-10:#1c6cd7;

  --red-01:#fcf7f7; --red-02:#fff2f2; --red-03:#ffebeb; --red-04:#ffd6d6; --red-05:#f5abab;
  --red-06:#f59393; --red-07:#f57b7c; --red-08:#f65252; --red-09:#eb4b4b;

  --green-01:#f7faf9; --green-02:#e4f9f0; --green-03:#dcf5ed; --green-04:#c0f0e0;
  --green-05:#a1e5cf; --green-06:#6cd9b5; --green-07:#29cc96; --green-08:#24b283;

  --yellow-01:#fffcf5; --yellow-02:#fff8eb; --yellow-03:#fff3db; --yellow-04:#ffe5b2;
  --yellow-05:#ffdd99; --yellow-06:#ffcc66; --yellow-07:#ffc34d; --yellow-08:#ffb21a; --yellow-09:#ffaa00;

  --purple-01:#f9f7fc; --purple-02:#f5f0ff; --purple-03:#eee5ff; --purple-04:#e7dbff;
  --purple-05:#d4c4f5; --purple-06:#c9b6ff; --purple-07:#b8a0fa; --purple-08:#9d7bff; --purple-09:#8d66ff;

  --logo-default:#007f98;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-full:9999px;
}

/* ── 2. Semantic ─────────────────────────────────────────── */
:root{
  --text-primary:var(--gray-10); --text-secondary:var(--gray-07);
  --text-tertiary:var(--gray-06); --text-disabled:var(--gray-05);
  --text-inverse:var(--white); --text-brand:var(--logo-default);

  --icon-primary:var(--gray-10); --icon-secondary:var(--gray-06); --icon-disabled:var(--gray-05);

  --surface-default:var(--white); --surface-subtle:var(--gray-01);
  --surface-muted:var(--gray-02); --surface-inverse:var(--gray-11);
  --surface-strong:var(--gray-04);
  --page-bg:var(--white);

  --border-default:var(--gray-03); --border-strong:var(--gray-04);
  --border-focus:var(--primary-08);

  --interactive-default:var(--primary-08); --interactive-hover:var(--primary-09);
  --interactive-pressed:var(--primary-10); --interactive-subtle:var(--primary-03);
  --interactive-ghost-hover:var(--primary-01); --interactive-selected-bg:var(--primary-02);

  /* 상승 레드 / 하락 블루 */
  --status-up:var(--red-08);         --status-up-bg:var(--red-02);
  --status-down:var(--primary-08);   --status-down-bg:var(--primary-03);
  --status-warning:var(--yellow-08); --status-warning-bg:var(--yellow-03);
  --status-flat:var(--gray-06);
  /*
   * 어두운 바탕(고른 MY 코인 칩 gray-09) 위의 등락색. 기본 빨강·파랑은 그 위에서
   * 묻히고, 회색으로 누르면 고른 코인만 신호가 사라진다 — 밝기만 올린다(v5 tokens.css).
   */
  --status-up-on-dark:#ff9c9c; --status-down-on-dark:#9ec8ff; --status-flat-on-dark:#bcc3d0;

  /* 안쪽에 파인 바탕 — 썸네일 자리·취소 단추(v5 surface-inset) */
  --surface-inset:var(--gray-03);
  /* 팝업 — v5 Modal 의 딤(검정 30%)과 그림자(elevation-2) */
  --modal-dim:rgba(0,0,0,.3);
  --elevation-2:0 0 20px 0 rgba(0,0,0,.1);
  /* 밝은 사진이 바탕에 묻히지 않게 두르는 얇은 선(v5 border-black/10) */
  --thumb-border:rgba(0,0,0,.1);
  /* 색 바탕(분위기 카드) 위의 구분선 — 회색이면 바탕색과 섞여 탁해진다(v5 border-black/5) */
  --divider-on-tone:rgba(0,0,0,.05);
  /* 토큰포스트 앱 카드 — 브랜드 값이라 테마를 따르지 않는다(v5 AppPromo) */
  /* 검색 결과 위 토포AI 띠 — v5 SearchAiBanner 가 이 자리에만 쓰는 값이다(테마를 따르지 않는다) */
  --search-ai-banner-bg:linear-gradient(90deg,#eef2ff 0%,#eaf3ff 50%,#f3edff 100%);
  /* 메인 토픽 카드 셋째 색 — 시안에 변수 없이 박힌 값(v5 TOPIC_COLORS) */
  --topic-orange:#f7931a;
  /* 토픽 카드 그림 테두리 — 기사 썸네일(.1)보다 옅다(v5 border-black/[0.06]) */
  --thumb-border-soft:rgba(0,0,0,.06);
  /* 작은 얼굴 위 +N 같은 글자 받침(v5 bg-black/55) */
  --overlay-strong:rgba(0,0,0,.55);
  /* 토포AI 대화창 — 이름 글자 · 사용량 막대(보라→파랑), 보내기 단추, 입력칸 뒤 번지는 빛(v5 ai-dialog) */
  --ai-dialog-brand:linear-gradient(90deg,#9d7bff 0%,#4294ff 100%);
  --ai-brand-button:linear-gradient(150deg,#9d7bff 7.7%,#4294ff 92.3%);
  --ai-input-glow:linear-gradient(179.22deg,#66ccff 0%,#6666ff 25%,#cc66ff 50%,#6666ff 75%,#66ccff 100%);
  --ai-pop-shadow:0 16px 40px 0 rgba(0,0,0,.18);
  /* 이용 동의 — 결정을 받는 창이라 곁창 덮개(30%)보다 짙다 */
  --ai-agree-dim:rgba(0,0,0,.5);
  --ai-agree-shadow:0 16px 38px 0 rgba(16,22,38,.24);
  --app-promo-bg:linear-gradient(115.71deg,#cfefff .81%,#7cb5ff 99.99%);
  --app-promo-qr-border:#e5e8eb;
  /* 장 넘김(paged.js) — 상자가 지금 장(--tp-p)을, 칸이 자기 장(--tp-i)을 인라인으로 덮어쓴다 */
  --tp-p:0; --tp-i:0;

  /* 개수 배지 · 추천 눌림 — red/08 (v5 --color-badge) */
  --badge:var(--red-08);
  --elevation-1:0 2px 3px 0 rgba(0,0,0,.06);
  /* 떠 있는 작은 목록(기고자 펼침) 그림자 */
  --elevation-pop:0 8px 24px 0 rgba(26,31,41,.12);
  --surface-inset-strong:var(--gray-04);
  /* 드로어 입력칸 — 목록 위에 얹힌 판이라 위로 옅은 그림자 */
  --drawer-foot-shadow:0 -4px 12px rgba(0,0,0,.05);
  /* 곁창 폭 — 쓰는 쪽이 style 로 덮는다(댓글 480) */
  --drawer-w:480px;
  /* 팝업 광고 딤 — 검정 50%(v5 ad-popup) */
  --ad-popup-dim:rgba(0,0,0,.5);
  /* 앱 QR 위젯 그림자(v5 app-qr-widget) */
  --qr-shadow:0 4px 16px rgba(17,17,17,.08);
  --qr-shadow-hover:0 8px 24px rgba(17,17,17,.14);
  /* 토포AI 알약 — 테마를 따르지 않는다. 접힘 primary/07 · 펼침 gray/09 */
  --floating-ai-bg:var(--primary-07);
  --floating-ai-bg-open:var(--gray-09);
  --floating-ai-shadow:0 0 5.5px rgba(0,0,0,.2);
  /* 모바일 전체 메뉴 윗줄 — 92% 비침(v5 bg-surface-default/92) */
  --mobile-menu-top-bg:rgba(255,255,255,.92);
  /* 앱 설치 이벤트 단추(v4 mobile_new.css:4284) */
  --menu-event-bg:linear-gradient(96deg,#4294ff 0%,#83c0f2 100%);
  /* 알림 드로어 — 딤 40% · 그림자 */
  --alarm-dim:rgba(0,0,0,.4);
  --alarm-shadow:0 16px 38px 0 rgba(16,22,38,.14);
  --alarm-pop-shadow:0 8px 20px 0 rgba(16,22,38,.18);
  /* 고른 칸(분류 탭 켜짐) — gray/09. 다크에서는 밝게 뒤집힌다(v5 surface-selected) */
  --surface-selected:var(--gray-09);
  /* 가로 넘김 화살표 그림자(v5 HScroller) */
  --hscroll-shadow:0 2px 6px 0 rgba(26,31,41,.12);
  /* 이미지 확대 — 검은 판 85% 위 원본, 흰 빛 테두리 */
  --zoom-dim:rgba(0,0,0,.85);
  --zoom-glow:0 0 20px rgba(255,255,255,.3);

  /* 기사 본문 글자 — 라이트는 시안대로 gray-09, 다크는 text-primary(아래 html.dark) */
  --article-body-text:var(--gray-09);
  /* 본문 속 AI 기사요약 상자(배경이 인라인) — 다크에서만 덮는 색. 크림색을 어둡게 옮긴 것 */
  --article-ai-box-dark:#2a211a;
  /* 토포AI 요약 제목 그라데이션(v5 ai-summary.tsx) */
  --ai-summary-title:linear-gradient(to right,#7c50ff,#4294ff);

  /* 앱 설치 이벤트 배너 — 광고 소재에 가까워 테마를 따르지 않는다(v4 article.css 값) */
  --app-event-bg:linear-gradient(180deg,#afdbff 0%,#b4e6ff 100%);
  --app-event-title:#050c40;
  --app-event-text:#1a1f29;
  --app-event-item-border:#cbb4ff;
  --app-event-item-bg:#f5f0ff;
  --app-event-label-bg:#b8a0fa;

  --brand-logo:var(--logo-default);
  --placeholder-bg:#dfe3ea;
  --overlay:rgba(0,0,0,.6);

  /* 콘텐츠 최대 폭 */
  --page-w:1280px;

  /*
   * 토포AI 브랜드 그라데이션.
   *
   * 토큰 표에 없는 유일한 색이다 — 시안이 네 지점 그라데이션으로 정의해 두어
   * 단색 토큰으로 쪼갤 수 없다. 여기 한 번만 적고 쓰는 곳에서는 참조한다.
   * 다크에서도 테두리 색은 그대로 두고 안쪽 배경만 어둡게 한다.
   */
  --ai-brand:linear-gradient(111.25deg,#7c50ff 5.34%,#5d95fb 40.96%,#69b1ff 61.75%,#0d47da 93.4%);
  --ai-panel-w:420px;

  /*
   * 히어로 배경 — v5 시안(185:15510)의 네 지점 그라데이션이다. 단색 토큰으로
   * 쪼갤 수 없어 여기 한 번만 적는다. 헤더가 sticky 로 겹치므로 모바일에서는
   * 단색(primary-03)과 **같은 색**이어야 경계선이 안 보인다.
   */
  --hero-bg:var(--primary-03);
  --hero-bg-wide:linear-gradient(100deg,#eaf1fe 0%,#fafbff 38%,#fdfbff 62%,#f4ecff 100%);
  /* 브랜드 글자(토포AI)용. 구슬의 --ai-brand 와 각도·멈춤점이 다르다 */
  --ai-brand-text:linear-gradient(176.48deg,#4294ff 18.894%,#8080ff 51.83%,#d480ff 84.766%);
}

/* ── 3. 컴포넌트 치수 ─────────────────────────────────────── */
:root{
  --btn-h-xs:28px; --btn-h-sm:32px; --btn-h-md:36px; --btn-h:40px; --btn-h-xl:48px;
  --btn-radius:var(--radius-md);
  --btn-padding-y:var(--sp-2); --btn-padding-x:var(--sp-3);
  --btn-padding-x-xs:var(--sp-2); --btn-padding-x-sm:var(--sp-3);
  --btn-padding-x-md:var(--sp-3); --btn-padding-x-lg:var(--sp-5);
  --btn-gap:var(--sp-3); --btn-border-w:1px;
  --btn-focus-ring-w:2px; --btn-focus-ring-offset:2px; --btn-loading-opacity:.6;

  --input-h:40px; --input-radius:var(--radius-xs); --input-border-w:1px;
  --input-padding-y:var(--sp-2); --input-padding-x:var(--sp-3);
  --input-gap:var(--sp-2); --input-label-gap:var(--sp-1);
  --input-bg:var(--surface-default); --input-bg-disabled:var(--surface-muted);
  --input-text:var(--gray-11); --input-text-placeholder:var(--gray-08);
  --input-text-disabled:var(--gray-05);
  --input-label:var(--gray-07); --input-icon:var(--gray-06); --input-suffix:var(--gray-06);
  --input-border-default:var(--border-default); --input-border-focus:var(--border-focus);
  --input-border-error:var(--red-08); --input-border-success:var(--primary-08);
  --input-border-disabled:var(--border-default);
  --input-message-error:var(--red-08); --input-message-success:var(--primary-08);

  --select-h:var(--input-h); --select-radius:var(--input-radius); --select-item-h:36px;
  --select-item-padding-y:var(--sp-1); --select-item-padding-x:var(--sp-3);
  --select-item-bg:var(--input-bg); --select-item-bg-hover:var(--surface-subtle);
  --select-item-bg-selected:var(--surface-muted);
  --select-dropdown-bg:var(--input-bg);
  --select-dropdown-radius:var(--radius-xs); --select-dropdown-offset:var(--sp-2);

  --tab-h:40px; --tab-padding-x:var(--sp-2); --tab-padding-y:var(--sp-2);
  --tab-indicator-w:2px; --tab-divider-w:1px;
  --tab-segmented-h:40px; --tab-segmented-radius:var(--radius-md);
  --tab-segmented-item-radius:var(--radius-sm);
  --tab-segmented-padding:var(--sp-1); --tab-segmented-gap:var(--sp-2);

  --table-row-h:56px; --table-row-h-lg:88px; --table-header-h:40px;
  --table-cell-padding-y:var(--sp-3); --table-cell-padding-x:var(--sp-2);
  --table-cell-gap:var(--sp-1); --table-divider-w:1px; --table-sort-icon:12px;

  --modal-radius:var(--radius-lg); --modal-padding:var(--sp-6);
  --modal-header-gap:var(--sp-4); --modal-body-gap:var(--sp-5);
  --modal-footer-btn-gap:var(--sp-3);
  --modal-w-sm:340px; --modal-w-md:600px; --modal-w-lg:900px;
  --modal-max-h-md:640px; --modal-max-h-lg:912px;
  --modal-btn-w:140px; --modal-close:20px; --modal-overlay-opacity:.6;
}

/* ── 4. 다크 모드 ────────────────────────────────────────── */
/*
 * 시맨틱만 덮어쓴다. Primitives 는 건드리지 않는다.
 * 레이어는 3단계 — 페이지 → 카드/패널 → 호버/중첩. 그림자가 아니라 밝기로 구분한다.
 * 상승 레드 / 하락 블루 전경색은 그대로 두고 배경 틴트만 어둡게 한다.
 *
 * 켜지는 조건은 서버가 정한다 — useDarkModeV3 == 'Y' 일 때만 html 에 dark 가 붙는다.
 */
html.dark{
  --text-primary:#e8ecf3; --text-secondary:#a6aebd;
  --text-tertiary:#8b93a3; --text-disabled:#69717f; --text-inverse:#0f141a;
  --icon-primary:#e8ecf3; --icon-secondary:#8b93a3;

  --page-bg:#0f141a;
  --surface-default:#151b23;
  --surface-subtle:#1a212a;
  --surface-muted:#2b333f;
  --surface-strong:#414d60;
  --surface-inverse:#e8ecf3;

  --border-default:#2b333f; --border-strong:#3b4553;

  --interactive-subtle:#16263f;
  --interactive-selected-bg:#16233a;
  --interactive-ghost-hover:#1a212a;

  --status-up-bg:#2b1c20; --status-down-bg:#101a27; --status-warning-bg:#2a2216;

  --placeholder-bg:#232b36; --overlay:rgba(0,0,0,.4);
  --surface-inset:#2b333f;
  --surface-inset-strong:#3b4553;
  --elevation-1:0 2px 3px 0 rgba(0,0,0,.4);
  --article-body-text:var(--text-primary);
  --mobile-menu-top-bg:rgba(21,27,35,.92);
  --surface-selected:#cfd6e2;
  --elevation-2:0 0 20px 0 rgba(0,0,0,.5);

  --hero-bg:var(--page-bg);
  --hero-bg-wide:linear-gradient(180deg,#101a27 0%,#12172a 60%,#0f141a 100%);
}