/* ───────────────────────────────────────────────
   WOOSUB iframe 통합 스킨 v2 — 원톤 + 입체 (2026-10-07)
   라이트 = 흰베이스 + 흰박스 + 소프트쉐도우(입체)
   다크   = 바이올렛(보라끼 딥다크 + 상단 하이라이트)
   폰트   = IBM Plex Sans KR / IBM Plex Mono

   ※ 이 파일은 각 iframe 페이지 맨 끝에 링크됨(기존 iframe_skin.css 자리 교체).
     링크가 맨 뒤라서 페이지 자체 :root 토큰을 덮어씀 → screener/auto/struct
     처럼 --bg/--panel/--line/--txt/--accent 를 쓰는 페이지에 바로 먹음.
     opt / triangulation 은 토큰명이 달라 하단 §REMAP 블록으로 맞춤.
   ─────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

/* ===== 1) 토큰: 라이트(입체) ===== */
:root{
  --bg:#f8f9fb; --panel:#ffffff; --panel2:#f3f5f9; --line:#edf0f4; --line2:#e4e8ef;
  --txt:#1a2433; --mut:#3f4b5c; --dim:#5e6a79;
  --accent:#7c3aed; --acc:#7c3aed; --acc2:#8b5cf6; --blu:#7c3aed; --primary:#7c3aed;
  --a-soft:color-mix(in srgb,var(--accent) 10%,transparent);
  --a-line:color-mix(in srgb,var(--accent) 26%,transparent);
  --mono:"IBM Plex Mono","IBM Plex Sans KR",ui-monospace,"SF Mono",Menlo,monospace;
  --shadow-card:0 1px 3px rgba(23,31,56,.06),0 7px 18px -7px rgba(23,31,56,.10);
  --shadow-hi:0 2px 6px rgba(23,31,56,.08),0 16px 34px -14px rgba(23,31,56,.17);
}

/* ===== 2) 토큰: 다크(바이올렛) ===== */
:root[data-theme="dark"], html[data-theme="dark"]{
  --bg:#0b0912; --panel:#171324; --panel2:#1f1930; --line:#2a2240; --line2:#372c52;
  --txt:#f8f5ff; --mut:#dad3ec; --dim:#b2aacb;
  --accent:#9d7bff; --acc:#9d7bff; --acc2:#b89bff; --blu:#9d7bff; --primary:#9d7bff;
  --a-soft:color-mix(in srgb,var(--accent) 20%,transparent);
  --a-line:color-mix(in srgb,var(--accent) 46%,transparent);
  --shadow-card:inset 0 1px 0 rgba(184,156,255,.08),0 10px 28px -12px rgba(0,0,0,.72);
  --shadow-hi:inset 0 1px 0 rgba(184,156,255,.12),0 20px 46px -16px rgba(0,0,0,.86);
}
/* 시스템 다크(명시 선택 없을 때)도 동일하게 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0912; --panel:#171324; --panel2:#1f1930; --line:#2a2240; --line2:#372c52;
    --txt:#f8f5ff; --mut:#dad3ec; --dim:#b2aacb;
    --accent:#9d7bff; --acc:#9d7bff; --acc2:#b89bff; --blu:#9d7bff; --primary:#9d7bff;
    --a-soft:color-mix(in srgb,var(--accent) 20%,transparent);
    --a-line:color-mix(in srgb,var(--accent) 46%,transparent);
    --shadow-card:inset 0 1px 0 rgba(184,156,255,.08),0 10px 28px -12px rgba(0,0,0,.72);
    --shadow-hi:inset 0 1px 0 rgba(184,156,255,.12),0 20px 46px -16px rgba(0,0,0,.86);
  }
}

/* ===== 3) 폰트 ===== */
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI","Malgun Gothic",system-ui,sans-serif;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{letter-spacing:-.02em;font-weight:700}

/* ★ 배경: iframe 페이지가 각자 자기 배경을 칠하게.
   (transparent 였던 페이지 포함 — 부모 index.html 도 같은 --bg 로 맞출 것, APPLY 참고) */
body{background:var(--bg) !important;color:var(--txt)}

/* ===== 4) 입체 박스 (공통 클래스 전부) ===== */
.panel,.card,.box,.tile,.pcard,.kpi,.fcard,.scard,.tcard,.widget,.sect,.block,
.stat,.c,.cc,.regime,.hit,.step,.chartbox,.numcard{
  border-radius:14px;
  box-shadow:var(--shadow-card);
}
.card,.c,.cc,.hit,.kpi{transition:box-shadow .16s,transform .16s}
.card:hover,.c:hover,.cc:hover,.hit:hover{box-shadow:var(--shadow-hi);transform:translateY(-2px)}

/* ===== 5) 프리미엄 스크롤바 ===== */
*{scrollbar-width:thin;scrollbar-color:rgba(132,140,160,.38) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(132,140,160,.34);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(132,140,160,.6);background-clip:padding-box}
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}

button{font-family:inherit;transition:background .14s,border-color .14s,color .14s}

/* ===== §REMAP) opt.html / triangulation.html 전용 ─ 토큰명이 다름 ===== */
/* opt.html: --bg/--pnl/--pnl2/--bd/--bd2/--tx/--mut/--dim (+ 차트색 --call/--put/--mp/--spot/--gam 유지) */
/* triangulation.html: --bg/--pnl/--bd/--tx/--mut (+ --grn/--red/--blu 유지) */
:root{
  --pnl:var(--panel); --pnl2:var(--panel2); --bd:var(--line); --bd2:var(--line2); --tx:var(--txt);
}
/* ↑ 이 매핑으로 opt/tri 의 배경·패널·보더·텍스트가 같은 톤을 따름.
   단 opt/tri 의 차트/히트맵 기능색(--call/--put/--mp/--grn/--red 등)은 건드리지 않음(의도). */