/* ============================================================
   24ping — 디자인 시스템  (24ping.css)  v1
   ------------------------------------------------------------
   ⚠️ Claude Code: 이 파일을 "있는 그대로" 프로젝트에 import 하세요.
   값을 다시 추론하지 마세요 — 색 농도·글로우 세기/속도·tier 폰트 점프 같은
   "예쁨을 만드는 정확한 숫자"가 여기 박혀 있습니다. 클래스명만 그대로 쓰면 됩니다.

   짝꿍 파일: 24ping.helpers.js (heatColor / tier / tileHTML 등 동일 상수)
   폰트: Pretendard (CDN 또는 로컬). 배경은 near-black 고정 — 라이트모드 없음.
   ============================================================ */

:root{
  /* ── 색: 의미 기반 (장식용 색 없음) ── */
  --bg:#07090D; --panel:#10131A; --panel-2:#141821; --panel-h:#191E28;
  --line:#212732; --line-2:#1A1F29;
  --txt:#ECEEF2; --txt-2:#9AA1AD; --txt-3:#6E7582;
  --up:#FF4D5E;        /* 상승 = 빨강 (한국식, 반전 금지) */
  --down:#3D8BFF;      /* 하락 = 파랑 */
  --gold:#E8B45E;      /* AI 추정·예측 */
  --live:#33D17A;      /* 신뢰·적중·장 열림 */
  --ping:#FF1F4B; --ping-glow:rgba(255,31,75,.55);   /* 극단 상승 네온 */
  --ping-dn:#1FA8FF;                                  /* 극단 하락 네온 */

  /* ── 타입 스케일 (px) ── */
  --fs-display:40px; --fs-h1:19px; --fs-h2:15px; --fs-title:13px;
  --fs-body:12.5px; --fs-label:11px; --fs-micro:9.5px;
  /* ── 여백 ── */
  --sp-1:4px; --sp-2:7px; --sp-3:10px; --sp-4:14px; --sp-5:18px; --sp-6:24px;
  /* ── 라운드 ── */
  --r-sm:8px; --r-md:11px; --r-lg:14px;
}

/* ── base ── */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);
  font-family:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;
}
/* 모든 숫자는 tabular — 실시간 갱신 시 자릿수 흔들림 방지 (타협 없는 규칙) */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.up{color:var(--up)} .down{color:var(--down)}

/* 공통 애니메이션 */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes pingrad{0%{transform:scale(1);opacity:.85}80%{opacity:0}100%{transform:scale(3.4);opacity:0}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.16}}
@keyframes tg{0%{opacity:0}12%{opacity:var(--ga,.4)}24%{opacity:0}36%{opacity:var(--ga,.4)}50%{opacity:0}100%{opacity:0}}

/* ============================================================
   브랜드 — 핑 레이더 마크 (브랜드/LIVE 전용 모션. 아이덴티티)
   ============================================================ */
.pingmark{position:relative;width:22px;height:22px;flex:none;display:grid;place-items:center}
.pingmark .pd{width:8px;height:8px;border-radius:50%;background:var(--ping);box-shadow:0 0 11px var(--ping),0 0 20px var(--ping-glow);z-index:2}
.pingmark .pr{position:absolute;width:9px;height:9px;border-radius:50%;border:1.6px solid var(--ping);opacity:0;animation:pingrad 1.9s ease-out infinite}
.pingmark .pr.r2{animation-delay:.95s}
.brand{display:flex;align-items:center;gap:9px}
.brand .nm{font-size:19px;font-weight:800;letter-spacing:-.04em}
.brand .nm b{color:var(--ping);text-shadow:0 0 14px var(--ping-glow)}   /* ping = 네온 */
.brand .tg{font-size:11px;color:var(--txt-2);font-weight:600;white-space:nowrap}

/* ============================================================
   헤더 + 세션 배지 + 카운트다운
   ============================================================ */
.hd{display:flex;align-items:center;gap:13px;padding:0 24px;height:56px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#11151D,#0B0E13);flex:none}
.hd .sp{flex:1}
.sess{display:flex;gap:6px}
.sess .s{font-size:10.5px;font-weight:800;color:var(--txt-3);border:1px solid var(--line);border-radius:7px;padding:5px 9px;white-space:nowrap}
.sess .s.on{color:var(--up);border-color:color-mix(in srgb,var(--ping) 40%,var(--line));background:rgba(255,31,75,.08)}  /* 현재 라이브 장만 */
.sess .s.on .d{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--up);margin-right:4px;animation:pulse 1.5s infinite}
.cd{font-size:12px;font-weight:800;color:var(--txt-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cd b{color:var(--ping)}

/* ============================================================
   매크로 스트립 — 값은 중립색, 등락분만 색 (환율·금리·원자재·VIX)
   ============================================================ */
.macro{display:flex;border-bottom:1px solid var(--line);background:#0A0D13;flex:none}
.macro .m{flex:1;display:flex;align-items:baseline;gap:7px;padding:8px 16px;border-right:1px solid var(--line-2);white-space:nowrap;min-width:0}
.macro .m:last-child{border-right:none}
.macro .m .l{font-size:10.5px;font-weight:700;color:var(--txt-3)}
.macro .m .v{font-size:13px;font-weight:800;color:var(--txt-2);font-variant-numeric:tabular-nums}  /* 값 = 중립 */
.macro .m .c{font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;margin-left:auto}    /* 등락 = .up/.down */

/* ============================================================
   히트맵 타일 — 제품의 심장. 강도(|Δ%|)가 시각적으로 보여야 함.
   인라인 style 로 flex-grow:{heat} + background:{heatColor} + --gl/--ga/--gd 주입.
   (모두 24ping.helpers.js 의 tileHTML 이 계산)
   ============================================================ */
.secrow{padding:0}
.sechead{display:flex;align-items:center;gap:8px;padding:9px 4px 7px}
.sechead .flag{font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:5px;letter-spacing:.03em}
.sechead .flag.kr{background:rgba(255,77,94,.14);color:#FF8A95}
.sechead .flag.us{background:rgba(61,139,255,.14);color:#8FB6FF}
.sechead .flag.lev{background:rgba(232,180,94,.14);color:var(--gold)}
.sechead .flag.pre{background:rgba(167,139,250,.14);color:#B9A6F8}
.sechead .t{font-size:13px;font-weight:800}
.sechead .c{font-size:10.5px;font-weight:700;color:var(--txt-3)}
.sechead .live{margin-left:auto;font-size:10px;font-weight:800;color:var(--live)}

.tiles{display:flex;gap:6px}
.tile{flex-grow:var(--h,1);flex-basis:0;min-width:70px;position:relative;border-radius:10px;padding:9px 11px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(255,255,255,.06);cursor:pointer}
.tile .tn{font-size:12.5px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.big .tn{font-size:15px}
.tile .ts{font-size:9px;font-weight:700;color:rgba(255,255,255,.6);margin-top:1px}
.tile .tb{margin-top:8px}
.tile .tp{font-size:11px;font-weight:800;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums;white-space:nowrap}
.tile .tc{font-size:12px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:2px}
.tile.big .tc{font-size:16px}
/* 이중화살표(▲▲/▼▼)는 숫자보다 작게 — 큰 % 가 좁은 타일에서 잘리지 않게 */
.tile .tc .ar{font-size:.58em;letter-spacing:-.06em}
/* tier3+ : 흰 테두리 글로우 (강한 변동) */
.tile.hot{box-shadow:0 0 0 1px rgba(255,255,255,.26),0 0 16px -5px var(--gl)}
/* 강도 글로우 : 카드 전체가 숨쉬듯 깜빡 (opacity 합성 = GPU 친화) */
.tile.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 50% 35%,var(--gl),transparent 72%);mix-blend-mode:screen;opacity:0;animation:tg var(--gd,1.6s) ease-in-out infinite}
/* tier4 폭등/폭락 태그 + 점멸 점 */
.tile .flag3{position:absolute;top:8px;right:9px;font-size:8px;font-weight:800;padding:1px 5px;border-radius:4px;display:flex;align-items:center;gap:3px}
.tile .flag3 .al{width:3px;height:3px;border-radius:50%;background:currentColor;animation:blink .6s steps(1,end) infinite}

/* ============================================================
   KOSPI 예측 카드 + 주요지수 칩 (예측이 메인, 값 중립·등락만 색)
   ============================================================ */
.kcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 17px;flex:none}
.kcard .kh{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--txt-3)}
.kcard .kh .badge{font-size:9px;font-weight:800;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);padding:1px 6px;border-radius:5px}
.kcard .kh .more{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--gold);cursor:pointer}
.kcard .kfig{display:flex;align-items:baseline;gap:10px;margin-top:9px}
.kcard .kfig .nm{font-size:13px;font-weight:800;color:var(--txt-2)}
.kcard .kfig .v{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:.9}
.kcard .kfig .c{font-size:17px;font-weight:800}
.kcard .ksub{font-size:11px;font-weight:700;color:var(--txt-3);margin-top:7px}
.kcard .kacc{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line-2);font-size:11.5px;font-weight:700;color:var(--txt-2)}
.kcard .kacc b{color:var(--live)}
.kcard .kacc .rdot{width:6px;height:6px;border-radius:50%;background:var(--live);animation:pulse 1.6s infinite}
.kidx{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:11px}
.kidx .ki{background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;padding:6px 9px;display:flex;align-items:baseline;gap:6px;min-width:0}
.kidx .ki .l{font-size:10px;font-weight:700;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:3px}
.kidx .ki .est{font-size:7px;font-weight:800;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);padding:0 3px;border-radius:3px;flex:none}
.kidx .ki .v{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--txt-2);font-variant-numeric:tabular-nums}
.kidx .ki .c{font-size:9.5px;font-weight:800;font-variant-numeric:tabular-nums;flex:none}

/* ============================================================
   라이브 브리핑 — 카테고리 구획 피드 (핵심 IA 컴포넌트)
   시황=ping / 거시·종목 이슈=evt / 잡다=news 를 한 스트림에 섞지 말 것.
   각 구획 헤더의 점 색이 카테고리를 표시 (3px 좌측 바 금지 — AI-slop).
   ============================================================ */
.brief-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;margin-bottom:2px}
.brief-h .pdot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--ping);box-shadow:0 0 10px var(--ping);flex:none}
.brief-h .pdot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--ping);opacity:.5;animation:pingrad 1.9s ease-out infinite}
.brief-h .live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:var(--up)}
.brief-h .live .d{width:6px;height:6px;border-radius:50%;background:var(--up);animation:pulse 1.5s infinite}

.fgrp + .fgrp{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.fgrp-h{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--txt-2);margin-bottom:4px}
.fgrp-h .gdot{width:7px;height:7px;border-radius:50%;flex:none}   /* 카테고리 색: ping=빨강 / evt=골드 / news=회색 */
.fgrp-h .live{margin-left:auto;font-size:9.5px;font-weight:800;color:var(--up);display:inline-flex;gap:4px;align-items:center}
.fgrp-h .live .d{width:5px;height:5px;border-radius:50%;background:var(--up);animation:pulse 1.5s infinite}
.fgrp-h .c{margin-left:auto;font-size:9.5px;font-weight:700;color:var(--txt-3)}

/* 핑/이벤트 항목 : 시간/배지 · 종목태그 → 헤드라인 → (핑) →대응(골드) */
.fi{padding:8px 0}
.fi + .fi{border-top:1px solid var(--line-2)}
.fi .row{display:flex;align-items:baseline;gap:7px;margin-bottom:3px}
.fi .when{font-size:10px;font-weight:700;color:var(--txt-3);font-variant-numeric:tabular-nums}
.fi .badge{font-size:8.5px;font-weight:800;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);padding:1px 5px;border-radius:4px}
.fi .tag{margin-left:auto;font-size:10px;font-weight:700;color:var(--txt-3);white-space:nowrap}
.fi .ti{font-size:13px;font-weight:700;color:var(--txt);line-height:1.42}
.fi .do{margin-top:5px;font-size:11px;font-weight:800;color:var(--gold);display:flex;gap:5px;align-items:flex-start}
.fi .do::before{content:"→";font-weight:900;flex:none}
/* 뉴스 : 가장 가벼운 tier — 1줄 ellipsis + 시간 + 더보기 */
.nrow{display:flex;align-items:baseline;gap:10px;padding:6px 0}
.nrow + .nrow{border-top:1px solid var(--line-2)}
.nrow .ti{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--txt-2);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrow:hover .ti{color:var(--txt)}
.nrow .when{flex:none;font-size:9.5px;font-weight:700;color:var(--txt-3);font-variant-numeric:tabular-nums}
.fmore{margin-top:9px;font-size:10.5px;font-weight:800;color:var(--txt-3);cursor:pointer}
.fmore:hover{color:var(--txt-2)}

/* ============================================================
   면책 · 푸터 (필수)
   ============================================================ */
.foot{flex:none;display:flex;align-items:center;gap:22px;padding:11px 24px;border-top:1px solid var(--line);background:#090C11}
.foot .fl{font-size:11px;font-weight:600;color:var(--txt-3);line-height:1.65;max-width:780px}
.foot .fl b{color:var(--txt-2);font-weight:700}
.foot .fn{margin-left:auto;display:flex;align-items:center;flex:none}
.foot .fn a{font-size:11px;font-weight:700;color:var(--txt-2);padding:0 11px;border-right:1px solid var(--line);white-space:nowrap;cursor:pointer;text-decoration:none}
.foot .fn a.em{color:var(--txt)}
.foot .fn a:last-child{border-right:none;padding-right:0}
.foot .fn a:hover{color:var(--txt)}
.foot .fc{font-size:11px;font-weight:700;color:var(--txt-3);white-space:nowrap;flex:none}

/* ============================================================
   접근성: 모션 끄기 — 정적으로도 위계가 읽혀야 함
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .tile.glow::after,.tile .flag3 .al,.pingmark .pr,.sess .s.on .d,
  .brief-h .live .d,.fgrp-h .live .d,.kcard .kacc .rdot{animation:none !important}
}