/* ============================================================================
   VeriGateQuant — 매매 시스템 UI 디자인 시스템
   plan/04_ui_design.md v3 기준. 다크 테마, 카드 기반.

   ★ 설계 규칙 (plan/04 §4):
     - 절대 수익률 단독 표기 금지 → .excess 사용
     - 성과 숫자 옆에 게이트 상태 필수 → .gates
     - 게이트 미통과 항목은 회색 → .muted-perf
     - 유니버스 종류 상시 표시 → .univ-pit / .univ-survivor

   ★★★ 2026-08-29 디자인 개편 — 바꾼 것은 «값»이고 «이름»이 아니다.
   화면 10종과 JS 20여 종이 여기 클래스 이름을 문자열로 직접 들고 있으므로
   (`.card`·`.kpi`·`.b-ok`·`.note-warn` …) 이름을 바꾸면 조용히 스타일이 빠진다.
   그래서 이 개편은 **토큰과 규칙만** 손대고 선택자는 그대로 둔다.

   개편의 근거가 된 실측 세 가지:
     ① 표면 단계가 3칸(bg·bg2·bg3)뿐이라 «카드 위의 카드»를 그릴 자리가 없었다
        → 화면 전체가 같은 회색 한 겹으로 읽혔다. bg4·line2 를 더해 4단으로.
     ② `--accent`(#f4655c)가 `--up`(상승 적색 #e0524a)과 사실상 같은 색이라
        브랜드 마크·활성 탭·선택된 종목이 전부 «상승» 신호처럼 보였다.
        → 강조색을 인디고로 옮긴다. **강조색은 가격 방향 어느 쪽도 아니어야 한다.**
     ③ 숫자와 설명문이 같은 크기·같은 무게였다 → 무엇을 먼저 볼지가 없었다.
        → 타입 스케일을 토큰으로 두고 숫자를 크게·문장을 작게 가른다.
   ========================================================================= */

:root{
  /* ── 표면(surface) — 숫자가 클수록 «위에 얹힌» 판이다 ───────────── */
  --bg:#080a11; --bg2:#0f1420; --bg3:#161c2a; --bg4:#1e2534;
  --line:#222a3c; --line2:#303a52;

  /* ── 글자 ── */
  --fg:#eef1f8; --fg2:#a4aec4; --fg3:#6c7691;

  /* ── 가격 방향 — 한국 관행: 상승 적색 / 하락 청색.
       ⛔ 이 둘을 UI 강조(활성 탭·선택·브랜드)에 쓰지 말 것. */
  --up:#f2564d; --down:#4d8ef5;

  /* ── 상태 ── */
  --ok:#2fce87; --warn:#efa72e; --bad:#ef4444; --info:#38bdf8;

  /* ── 브랜드 강조 — 가격 방향과 겹치지 않는 인디고 ── */
  --accent:#6d7cf7; --accent2:#a78bfa;
  --accent-soft:rgba(109,124,247,.15); --accent-line:rgba(109,124,247,.42);
  --purple:#a78bfa;

  /* ── 반경 ── */
  --r:12px; --r-sm:8px; --r-xs:6px; --r-lg:16px;

  /* ── 그림자 — 「떠 있다」를 말하는 유일한 수단 ── */
  --sh1:0 1px 2px rgba(0,0,0,.4);
  --sh2:0 6px 20px -6px rgba(0,0,0,.55);
  --sh3:0 18px 44px -14px rgba(0,0,0,.7);
  /* 카드 위쪽 1px 하이라이트 — 판이 «물체»로 읽히게 하는 값싼 장치 */
  --edge:inset 0 1px 0 rgba(255,255,255,.045);

  /* ── 타입 스케일 ── */
  --t-micro:11px; --t-xs:11.5px; --t-sm:12.5px; --t-md:13.5px;
  --t-lg:15px; --t-xl:19px; --t-2xl:24px; --t-3xl:30px;

  /* ── 숫자용 글꼴 — 자릿수가 흔들리면 표를 세로로 읽을 수 없다 ── */
  --font-num:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Mono",
             Menlo,Consolas,"D2Coding",monospace;

  /* ── 동작 ── */
  --ease:cubic-bezier(.32,.72,0,1); --dur:.16s;

  /* ★★ 이 한 줄이 **네이티브 컨트롤 전부**의 명암을 정한다 (2026-08-18 신설).
     선언이 없으면 브라우저는 이 페이지를 라이트로 보고 `<select>` 의 **펼침 목록**을
     흰 배경으로 그린다 — 닫힌 상태는 우리 CSS 가 칠하니 멀쩡해 보이고, **펼쳐야만**
     흰 배경에 옅은 글자가 드러난다(사용자 보고, 2026-08-18).
     드롭다운뿐 아니라 스크롤바·체크박스·날짜 선택기도 함께 어두워진다. */
  color-scheme: dark;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--fg);
  /* 단색 대신 아주 옅은 방사 그라디언트 — 넓은 모니터에서 «끝없는 회색»을 없앤다.
     ⚠ 고정 배경이라 스크롤해도 따라오지 않는다(내용이 판 위를 지나가는 느낌). */
  background:
    radial-gradient(1200px 620px at 12% -6%, rgba(109,124,247,.07), transparent 62%),
    radial-gradient(900px 520px at 96% 0%, rgba(167,139,250,.05), transparent 58%),
    var(--bg);
  background-attachment:fixed;
  font:14px/1.6 Pretendard,"Pretendard Variable",-apple-system,BlinkMacSystemFont,
       "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","맑은 고딕",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* ★★ 2026-08-29 — 키보드 포커스 표시가 **이 저장소에 하나도 없었다**.
   브라우저 기본 outline 은 `button{}` 규칙들이 지우고 있었고 대체물이 없어서,
   Tab 으로 돌아다니면 «지금 어디»를 알 수 없었다(접근성 문제이자, 값을 입력하는
   화면에서 실수를 만드는 자리다). `:focus-visible` 이라 마우스 클릭에는 안 뜬다. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs)}

/* 선택 영역 — 기본 파랑은 `--down`(하락)과 같은 색이라 표에서 오해를 만든다. */
::selection{background:rgba(109,124,247,.32); color:#fff}

/* 스크롤바 — 기본 회색 막대가 카드 위에서 도드라졌다. */
*{scrollbar-width:thin; scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3f4a68;background-clip:content-box}

/* 동작을 끄고 쓰는 사용자를 존중한다(멀미·전정기관 문제). */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ── 상단 네비 ────────────────────────────────────────────── */
.topnav{position:sticky;top:0;z-index:50;background:rgba(8,10,17,.86);
  backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.tn-inner{max-width:1680px;margin:0 auto;padding:0 18px;height:52px;
  display:flex;align-items:center;gap:22px}
.tn-brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.2px}
.tn-brand .mark{width:24px;height:24px;border-radius:6px;background:var(--accent);
  display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}
.tn-brand .beta{font-size:10px;padding:1px 5px;border-radius:4px;
  background:var(--bg3);color:var(--fg2);border:1px solid var(--line)}
.tn-menu{display:flex;gap:2px;margin-left:6px}
.tn-menu a{padding:7px 12px;border-radius:8px;color:var(--fg2);font-size:13.5px;white-space:nowrap}
.tn-menu a{transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.tn-menu a:hover{background:var(--bg3);color:var(--fg)}
.tn-menu a.active{color:var(--fg);background:var(--accent-soft);font-weight:650;
  box-shadow:inset 0 -2px 0 var(--accent)}
.tn-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.tn-right button{background:var(--bg3);border:1px solid var(--line);color:var(--fg2);
  padding:6px 11px;border-radius:8px;font-size:12.5px}
.tn-right button:hover{color:var(--fg);border-color:#33405a}

/* ── 레이아웃 ────────────────────────────────────────────── */
/* ★ 2026-08-18 사용자 요청 — **홈과 같은 꽉 찬 폭.**
   홈은 `body.shell > .shell-body`(그리드)라 뷰포트를 그대로 채우는데 `.wrap` 을 쓰는
   화면들만 1680px 로 가운데 정렬돼 넓은 모니터에서 양옆이 남았다.
   적용 대상: backtest · calendar · dashboard · data · **live · track** (6개 전부).
   ⚠ 좌우 여백 18px 은 남긴다 — 0 이면 카드가 화면 끝에 붙는다.
   ⚠ 아래 `.disclaimer` 도 같이 풀어야 한다. 안 그러면 본문만 넓어지고 면책 문구만
     가운데 좁게 남아 **한 화면에 두 폭**이 생긴다. */
.wrap{max-width:none;margin:0 auto;padding:18px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
@media(max-width:1200px){.g2,.g3,.g-2-1,.g-1-2{grid-template-columns:1fr}}

/* ── 카드 ────────────────────────────────────────────────── */
/* ★ 카드가 «판»으로 읽히게 하는 값은 셋뿐이다 — 위쪽 1px 하이라이트(--edge),
   바닥 그림자, 그리고 머리말 아래 실선. 앞의 둘이 없으면 배경과 같은 평면이라
   화면이 «칸막이 없는 목록»처럼 보인다(개편 전 상태). */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--sh1),var(--edge)}
.card.pad0{padding:0}
/* 누를 수 있는 카드만 반응한다 — 전부 반응하면 «어디가 버튼인지»가 사라진다. */
.card.act{cursor:pointer;transition:border-color var(--dur) var(--ease),
  transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card.act:hover{border-color:var(--line2);transform:translateY(-1px);
  box-shadow:var(--sh2),var(--edge)}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:13px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
/* 실선이 방해가 되는 자리(빽빽한 사이드 패널 등)를 위한 해제 클래스 */
.card-head.nb{padding-bottom:0;border-bottom:0}
.card-title{font-size:var(--t-lg);font-weight:700;letter-spacing:-.3px}
.card-sub{font-size:12px;color:var(--fg3)}
.card-more{margin-left:auto;font-size:12px;color:var(--fg3)}
/* 전략연구실 단계 번호·파라미터 — 작은 우측 패널에서도 순서가 먼저 읽히게 한다. */
.lab-step{border-left:3px solid var(--accent)}
.step-no{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:12px;font-weight:800;flex:0 0 auto}
.lab-params label{display:flex;flex-direction:column;gap:3px;color:var(--fg3)}
.lab-params input,.lab-params select{padding:5px 7px;min-height:28px}

/* ⚠ `background:inherit` 만으로는 부족하다 — 그것은 **닫힌 컨트롤**만 칠하고,
   펼침 목록은 별도로 그려진다. `option` 을 직접 칠해 두 번째 겹을 둔다
   (`color-scheme:dark` 가 먹는 브라우저에서는 같은 값이라 표시가 안 바뀐다). */
select,option{background-color:var(--bg3);color:var(--fg)}
option:checked,option:hover{background-color:var(--bg2)}
.sec-title{font-size:12.5px;font-weight:700;color:var(--fg2);
  text-transform:uppercase;letter-spacing:.6px;margin:22px 0 10px}

/* ── 배지 ────────────────────────────────────────────────── */
.b{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:650;
  line-height:1.5;padding:2.5px 9px;border-radius:999px;border:1px solid transparent;
  white-space:nowrap;letter-spacing:-.1px}
.b-ok{background:rgba(34,197,94,.13);color:#4ade80;border-color:rgba(34,197,94,.3)}
.b-bad{background:rgba(239,68,68,.13);color:#f87171;border-color:rgba(239,68,68,.3)}
.b-warn{background:rgba(245,158,11,.13);color:#fbbf24;border-color:rgba(245,158,11,.3)}
.b-info{background:rgba(56,189,248,.12);color:#7dd3fc;border-color:rgba(56,189,248,.28)}
.b-mut{background:var(--bg3);color:var(--fg3);border-color:var(--line)}
.b-buy{background:rgba(224,82,74,.15);color:#ff8a82;border-color:rgba(224,82,74,.35)}
.b-sell{background:rgba(59,130,246,.15);color:#93c5fd;border-color:rgba(59,130,246,.35)}
.b-hold{background:var(--bg3);color:var(--fg2);border-color:var(--line)}
.b-purple{background:rgba(167,139,250,.14);color:#c4b5fd;border-color:rgba(167,139,250,.32)}
#tb-node{max-width:140px;cursor:pointer}
#tb-cluster-sync{cursor:pointer}

/* ── ★ 게이트 표시 (plan/04 §4) ──────────────────────────── */
.gates{display:inline-flex;gap:3px;align-items:center}
.gate{width:17px;height:17px;border-radius:5px;display:grid;place-items:center;
  font-size:10px;font-weight:800;cursor:help}
.gate.pass{background:rgba(34,197,94,.18);color:#4ade80}
.gate.fail{background:rgba(239,68,68,.18);color:#f87171}
.gate.na{background:var(--bg3);color:var(--fg3)}
.gate-legend{font-size:11px;color:var(--fg3);margin-top:6px}

/* 게이트 미통과 성과는 회색 처리 */
.muted-perf{opacity:.45;filter:grayscale(.7)}

/* ── ★ 초과수익 표기 (절대 수익률 단독 금지) ─────────────── */
.excess{font-variant-numeric:tabular-nums;font-weight:700}
.excess.pos{color:#ff8a82}
.excess.neg{color:#93c5fd}
.abs-ret{font-size:11.5px;color:var(--fg3);font-variant-numeric:tabular-nums}

/* ── KPI ─────────────────────────────────────────────────── */
.kpis{display:grid;gap:10px}
.kpis.k4{grid-template-columns:repeat(4,1fr)}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
/* ★ 개편 전에는 라벨(11.5px)과 값(19px)의 차가 작아 «설명과 숫자»가 한 덩어리로
   읽혔다. 값을 24px 로 올리고 라벨을 낮춰 **먼저 보이는 것이 숫자**가 되게 한다. */
.kpi{background:linear-gradient(180deg,var(--bg3),rgba(15,20,32,.6));
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;
  box-shadow:var(--edge)}
.kpi .lb{font-size:var(--t-micro);color:var(--fg3);margin-bottom:5px;letter-spacing:.2px}
.kpi .vl{font-size:var(--t-2xl);font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.8px;line-height:1.15}
.kpi .sub{font-size:11px;color:var(--fg3);margin-top:4px}
@media(max-width:900px){.kpis.k4,.kpis.k3{grid-template-columns:repeat(2,1fr)}}

/* ── 표 ──────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:var(--t-xs);color:var(--fg3);font-weight:650;
  padding:9px 10px;border-bottom:1px solid var(--line2);white-space:nowrap;
  letter-spacing:.2px}
td{padding:9px 10px;border-bottom:1px solid rgba(34,42,60,.55);vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.025)}
/* ★ 숫자 칸은 오른쪽 정렬 + 고정폭 숫자 — 자릿수가 흔들리면 열을 세로로 못 읽는다. */
.num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.tbl-wrap{overflow-x:auto}
/* 머리말 고정은 **켜는 곳에서만** — 전역으로 걸면 중첩 표에서 유령 줄이 생긴다. */
.tbl-sticky thead th{position:sticky;top:0;z-index:2;background:var(--bg2)}

/* ── breadth 바 (상승/보합/하락) ─────────────────────────── */
.breadth{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--bg3);min-width:120px}
.breadth i{display:block;height:100%}
.breadth .u{background:var(--up)}
.breadth .f{background:var(--fg3)}
.breadth .d{background:var(--down)}
.breadth-lb{font-size:11px;color:var(--fg3);white-space:nowrap}

/* ── ★ 79차 — 백그라운드 작업 진행바(종목 헤더 위) ──────────────
   평소엔 `display:none`이라 레이아웃을 전혀 차지하지 않는다. 작업이 끝나면
   그대로 사라져 원래 화면이 된다(사용자 요청). */
/* 종목 헤더 **안쪽**에 인라인으로 놓는다 — 별도 줄을 만들면 레이아웃이 흔들린다. */
.sb-prog{display:inline-flex;align-items:center;gap:7px;margin-left:10px;
  padding:2px 8px;border:1px solid var(--line,#232a3a);border-radius:12px;
  background:var(--bg2,#141924);max-width:340px;white-space:nowrap}
.sb-prog #bgprog-label{color:var(--fg2,#c7d2de);overflow:hidden;
  text-overflow:ellipsis;max-width:210px}
#bgprog-pct{color:var(--fg3);font-variant-numeric:tabular-nums;flex:none}
.bgprog-track{display:inline-block;width:70px;height:4px;border-radius:2px;
  background:var(--line,#232a3a);overflow:hidden;flex:none;vertical-align:middle}
.bgprog-track > i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,#60a5fa,#a78bfa);transition:width .3s ease}
/* 총량을 모를 때(수집처럼) — 진행 중이라는 것만 알린다 */
.bgprog-track.indet > i{width:35%;animation:bgprog-slide 1.1s ease-in-out infinite}
@keyframes bgprog-slide{0%{margin-left:-35%}100%{margin-left:100%}}

/* ── ★ 팩터 준비 상태 마커 (plan/04 §2.5) ────────────────── */
/* 2026-07-28 — 부모(#rlegend)가 flex-wrap:wrap인 채로 .ready에 flex:none/
   white-space:nowrap이 없어서, 셋 중 하나가 줄바꿈 대상으로 잡히면 뱃지 전체가
   다음 줄로 넘어가는 대신 뱃지 "안" 텍스트가 글자 단위로 줄바꿈되는 경우가 있었다
   (한글은 공백 없이 이어져 줄바꿈 지점이 글자 사이라 세로쓰기처럼 보임 — 14차
   투자자동향 막대 라벨과 같은 종류의 원인). flex:none으로 뱃지 자체가 줄어들지
   않게 하고 white-space:nowrap으로 뱃지 내부 텍스트는 항상 한 줄로 고정.*/
.ready{display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;flex:none}
.ready .dot{width:9px;height:9px;border-radius:50%;flex:none}
/* 2026-07-28 — 아래 세 선택자는 원래 .ready.gate/.ready.obs/.ready.none(맨클래스)였는데,
   "gate"가 이 파일 84행의 완전히 무관한 로직엔진 게이트 아이콘용 `.gate{width:17px;
   height:17px;display:grid;...}`와 이름이 겹쳐 같이 적용되면서 이 뱃지가 17x17px로
   찌그러지고 텍스트가 다음 뱃지 위로 흘러넘쳐 겹쳐 보였다. app.js의 ready()가 이제
   "ready-gate"/"ready-obs"/"ready-none" 접두사 클래스를 붙이므로 선택자도 맞춰 변경. */
.ready.ready-gate .dot{background:var(--ok)}                                   /* ● 게이트 편입 가능 */
.ready.ready-obs  .dot{background:transparent;border:2px solid var(--warn)}    /* ◌ 관측 전용 */
.ready.ready-none .dot{background:transparent;border:2px solid var(--fg3)}    /* ○ 미수집 */
.ready.ready-none{color:var(--fg3)}

/* ── 진행 바 ─────────────────────────────────────────────── */
.prog{height:6px;border-radius:3px;background:var(--bg3);overflow:hidden}
.prog i{display:block;height:100%;background:var(--ok)}

/* ── 유니버스 표시 ───────────────────────────────────────── */
.univ-pit{background:rgba(34,197,94,.13);color:#4ade80;border:1px solid rgba(34,197,94,.3)}
.univ-survivor{background:rgba(245,158,11,.16);color:#fbbf24;border:1px solid rgba(245,158,11,.38)}

/* ── 상태바 ──────────────────────────────────────────────── */
.statusbar{position:sticky;bottom:0;z-index:40;background:rgba(17,22,33,.96);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);font-size:12px}
.sb-inner{max-width:1680px;margin:0 auto;padding:7px 18px;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center;color:var(--fg2)}
.sb-item{display:inline-flex;gap:5px;align-items:center;padding:2px 8px;
  border-radius:6px;background:var(--bg3);border:1px solid var(--line)}
.dot-ok{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.dot-warn{width:7px;height:7px;border-radius:50%;background:var(--warn)}

/* ── 면책 ────────────────────────────────────────────────── */
.disclaimer{max-width:none;margin:20px auto 0;padding:14px 18px 26px;
  font-size:11.5px;color:var(--fg3);line-height:1.7;border-top:1px solid var(--line)}
.disclaimer b{color:var(--fg2)}

/* ── 탭 ──────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.tabs button{background:none;border:0;color:var(--fg3);padding:9px 14px;font-size:var(--t-md);
  border-bottom:2px solid transparent;white-space:nowrap;border-radius:var(--r-xs) var(--r-xs) 0 0;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.tabs button:hover{color:var(--fg2);background:rgba(255,255,255,.03)}
.tabs button.active{color:var(--fg);border-bottom-color:var(--accent);font-weight:650}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{background:var(--bg3);border:1px solid var(--line);color:var(--fg2);
  padding:5px 12px;border-radius:999px;font-size:var(--t-sm);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.pill:hover{background:var(--bg4);color:var(--fg);border-color:var(--line2)}
/* ★ 선택된 알약을 흰색에서 강조색으로 바꿨다 — 흰색은 «강조»가 아니라 «밝음»이라
   같은 화면의 큰 숫자들과 시선을 다퉜다. */
.pill.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:650;
  box-shadow:0 3px 12px -4px var(--accent-line)}

/* ── 조건 태그 (FIELD_SPECS) ─────────────────────────────── */
.cond{display:inline-block;background:var(--bg3);border:1px solid var(--line);
  color:var(--fg2);padding:3px 9px;border-radius:6px;font-size:11.5px;margin:0 4px 4px 0}
.cond.np{border-color:rgba(167,139,250,.4);color:#c4b5fd}   /* 비가격 정보 */
.cond.live{border-color:rgba(245,158,11,.4);color:#fbbf24}  /* live 전용 */

/* ── 로직 카드 ───────────────────────────────────────────── */
.logic{background:var(--bg3);border:1px solid var(--line);border-radius:9px;padding:13px;margin-bottom:10px}
.logic-top{display:flex;align-items:center;gap:9px;margin-bottom:5px;flex-wrap:wrap}
.logic-name{font-weight:700;font-size:14px}
.logic-desc{font-size:12.5px;color:var(--fg2);margin-bottom:9px}
.logic-metrics{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--fg2);margin-bottom:8px}
.logic-metrics b{color:var(--fg);font-variant-numeric:tabular-nums}

/* ── 경고 박스 ───────────────────────────────────────────── */
/* ★★ 이 화면에는 주의문이 **197곳**이다(실측). 옛 규칙은 상자 전체를 색칠해서,
   규율 문장이 많은 화면(백테스트·노드)이 통째로 노란 벽이 됐다 — 다 강조하면
   아무것도 강조되지 않는다. 색은 **왼쪽 3px 레일**로 옮기고 바탕은 거의 지운다. */
.note{border-radius:var(--r-sm);padding:11px 14px;font-size:var(--t-sm);line-height:1.7;
  margin:10px 0;background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--line2)}
.note-warn{background:rgba(239,167,46,.045);border-color:rgba(239,167,46,.22);
  border-left-color:var(--warn);color:#f2cd8e}
.note-bad{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.22);
  border-left-color:var(--bad);color:#f4a8a8}
.note-info{background:rgba(56,189,248,.045);border-color:rgba(56,189,248,.2);
  border-left-color:var(--info);color:#a5dcf7}
.note-mut{background:var(--bg3);border-color:var(--line);border-left-color:var(--fg3);color:var(--fg2)}
.note b{color:var(--fg)}

/* ── ★ 지식그래프 관계 카드 (2026-08-02) ──────────────────────
   이전엔 `소속 / 소속 / 영향 받음 / 공급 / 공급 / 같은 테마`가 **2열 표 한 덩어리**로
   나열됐다. 라벨이 반복되고 위계가 없어 "무엇을 먼저 봐야 하는지"가 안 보였다.
   트레이딩 화면의 관례(Bloomberg SPLC·Panjiva Network View의 **밸류체인 가로 흐름**,
   TradingView Peers 탭의 **등락률 붙은 피어 표**)를 따라 4개 구획으로 나눈다.
   ── 포지션(정체성) · 밸류체인(구조) · 촉매(이벤트) · 동종 종목(오늘의 움직임) ── */
.kg-sec{margin-top:13px}
.kg-sec:first-child{margin-top:2px}
.kg-h{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--fg3);
  text-transform:none;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.kg-h .right{font-weight:600}

/* 포지션 — 섹터 › 테마 브레드크럼 칩 */
.kg-pos{display:flex;flex-wrap:wrap;gap:6px}
.kg-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  padding:4px 10px;border-radius:7px;background:var(--bg3);border:1px solid var(--line)}
.kg-chip .s{color:var(--fg3);font-size:11px}
.kg-chip b{color:#c4b5fd}

/* 밸류체인 — 후방(공급처) → 이 종목 → 전방(고객) */
.kg-chain{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.kg-node{flex:1 1 0;min-width:104px;background:var(--bg3);border:1px solid var(--line);
  border-radius:8px;padding:7px 9px}
.kg-node.self{background:rgba(167,139,250,.10);border-color:rgba(167,139,250,.34)}
.kg-node .cap{font-size:10.5px;color:var(--fg3);margin-bottom:3px}
.kg-node .val{font-size:12.5px;font-weight:600;line-height:1.45}
.kg-node.self .val{color:#c4b5fd}
.kg-node .none{color:var(--fg3);font-weight:400}
.kg-arrow{flex:none;display:grid;place-items:center;width:26px;color:var(--fg3);font-size:14px}

/* 촉매 — 이벤트 칩(raw id는 title 속성에만) */
.kg-evs{display:flex;flex-wrap:wrap;gap:6px}
.kg-ev{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:999px;cursor:help}
.kg-ev .via{font-weight:400;font-size:11px;opacity:.75}
.kg-ev.up{background:rgba(224,82,74,.13);color:#ff8a82;border:1px solid rgba(224,82,74,.32)}
.kg-ev.dn{background:rgba(59,130,246,.13);color:#93c5fd;border:1px solid rgba(59,130,246,.32)}

/* 밸류체인 종목 구획의 역할 배지 — 후방(청)/전방(적)으로 방향을 색으로도 준다 */
.kg-rb{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px}
.kg-rb.up{background:rgba(56,189,248,.14);color:#7dd3fc}
.kg-rb.dn{background:rgba(245,158,11,.14);color:#fbbf24}

/* 동종 종목 — 이름·코드·테마·등락률 + 발산 막대 */
.kg-peers{width:100%;border-collapse:collapse;font-size:12.5px}
.kg-peers td{padding:5px 6px;border-bottom:1px solid var(--line)}
.kg-peers th{padding:3px 6px;font-size:10.5px;font-weight:600;color:var(--fg3);
  text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.kg-peers th.num{text-align:right}
.kg-peers tbody tr:last-child td{border-bottom:0}
.kg-peers tbody tr.me{background:rgba(167,139,250,.09)}
.kg-peers tbody tr.me td:first-child{box-shadow:inset 2px 0 0 #a78bfa}
/* 평균 행 — 개별 종목과 섞이지 않게 위쪽 경계를 진하게 */
.kg-peers tfoot td{border-top:1px solid var(--fg3);border-bottom:0;
  background:var(--bg3);font-weight:600}
.kg-peers td.num{white-space:nowrap}
.kg-peers .nm{font-weight:600}
.kg-peers tr.me .nm{color:#c4b5fd}
.kg-peers .cd{color:var(--fg3);font-size:11px;margin-left:5px}
.kg-peers .th{color:var(--fg3);font-size:11px;white-space:nowrap}
/* 발산 막대 — 가운데 0, 오른쪽 상승(적)·왼쪽 하락(청). 폭은 |등락|/최대값. */
.kg-bar{position:relative;width:74px;height:7px;background:var(--bg3);border-radius:3px}
.kg-bar::before{content:'';position:absolute;left:50%;top:-1px;bottom:-1px;width:1px;
  background:var(--line)}
.kg-bar i{position:absolute;top:0;height:100%;border-radius:2px}

/* ── ★ 종목 즐겨찾기 · 섹터 종목 펼치기 (2026-08-02) ────────── */
.sb-fav{cursor:pointer;font-size:16px;line-height:1;color:var(--fg3);padding:0 4px;
  user-select:none;transition:color .12s}
.sb-fav:hover{color:#fbbf24}
.sb-fav.on{color:#fbbf24}

/* 섹터/테마를 펼쳤을 때의 소속 종목 행 — 더블클릭하면 그 종목으로 이동한다 */
.sec-mems{margin:5px 0 7px;border-left:2px solid var(--line);padding-left:9px}
.sec-mem{display:flex;align-items:center;gap:6px;font-size:12px;padding:3px 4px;
  border-radius:4px;cursor:pointer;user-select:none}
.sec-mem:hover{background:var(--bg3)}
.sec-mem .nm{font-weight:600}
.sec-mem .cd{color:var(--fg3);font-size:10.5px}
.sec-caret{flex:none}
/* KRX 섹터 탭 — 업종 행(더블클릭으로 펼침) */
.sec-row .sec-mems{margin:0 0 8px 12px}
[data-sec-open]:hover, [data-sec-toggle]:hover{background:var(--bg3)}
/* 더블클릭 대상임을 알 수 있게 — 표 행에도 같은 신호를 준다 */
tr[data-symbol]{cursor:pointer}
tr[data-symbol]:hover{background:var(--bg3)}

/* ── ★ 지표분석(모델 입력 피처) 2026-08-02 ──────────────────
   `ret_open  0.0123` 한 줄짜리 나열을 **그룹 + 한글 라벨 + 단위 붙은 값**으로.
   내부 이름은 지우지 않고 라벨 아래 작게 남긴다(번들 meta.json 대조에 필요). */
.ind-g{margin-bottom:11px}
.ind-gh{font-size:11px;font-weight:700;color:var(--fg3);padding:0 0 4px;
  border-bottom:1px solid var(--line);display:flex;align-items:center}
.ind-t{width:100%;border-collapse:collapse;font-size:12.5px}
.ind-t td{padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.ind-t tr:last-child td{border-bottom:0}
.ind-t tr:hover{background:var(--bg3)}
.ind-t th{padding:3px 6px;font-size:10px;font-weight:600;color:var(--fg3);
  text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.ind-t th.num{text-align:right}
.ind-l{font-weight:600}
.ind-n{font-size:10px;color:var(--fg3);line-height:1.3;margin-top:1px}
.ind-v{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ind-v.up{color:var(--up)}
.ind-v.dn{color:var(--down)}

/* 종합 점수 = 모델 P(상승). ★ 새 점수를 발명한 게 아니라 **게이트를 통과한 결합**을
   그 자리에 놓은 것 — 19·20차에 근거 없는 "컨디션 링"을 두 번 지운 이유와 같은 원칙 */
.ind-score{background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.28);
  border-radius:9px;padding:11px 13px;margin-bottom:12px}
.ind-sh{font-size:11.5px;font-weight:700;color:#c4b5fd;margin-bottom:8px;
  display:flex;align-items:center;gap:7px}
.ind-sv{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.ind-sb .cap{font-size:10.5px;color:var(--fg3);margin-bottom:1px}
.ind-sb .v{font-size:23px;font-weight:800;letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.ind-sb .v.up{color:var(--up)} .ind-sb .v.dn{color:var(--down)}
.ind-sb.grow{margin-left:auto;text-align:right}
.ind-oh-w{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ind-oh{font-size:11.5px;color:var(--fg2);white-space:nowrap}

/* 구조 요약 — 그룹별 평균 백분위. 관측이지 점수가 아니다 */
.ind-gs{display:flex;align-items:center;gap:8px;padding:4px 6px;
  border-bottom:1px solid var(--line);font-size:12px}
.ind-gs:last-child{border-bottom:0}
.ind-gs .nm{width:66px;flex:none;color:var(--fg2)}
.ind-gb{flex:1;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;
  background-image:linear-gradient(90deg,transparent 50%,var(--line) 50%,var(--line) calc(50% + 1px),transparent calc(50% + 1px))}
.ind-gb i{display:block;height:100%;background:#a78bfa;border-radius:3px;opacity:.7}

/* 변화량 — 현재값 아래 한 줄. 값보다 작고 흐리게(주가 아니라 보조 정보) */
.ind-dr{display:flex;gap:5px;justify-content:flex-end;margin-top:1px}
.ind-d{font-size:10px;color:var(--fg3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ind-d.up{color:var(--up);opacity:.85}
.ind-d.dn{color:var(--down);opacity:.85}

/* 스파크라인 — 축 없음. "오르는 중인가 꺾였나"만 보는 용도 */
.ind-sc{width:60px;padding-right:0!important}
.ind-sp{display:block;width:58px;height:16px}

/* 백분위 — 자기 이력에서의 위치. 양 끝 10%는 노란 눈금 */
.ind-pc{width:62px;white-space:nowrap}
.ind-pb{position:relative;display:inline-block;width:38px;height:5px;
  background:var(--bg3);border-radius:3px;vertical-align:middle;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:50% 100%}
.ind-pb i{position:absolute;top:-2px;width:2px;height:9px;background:var(--fg2);border-radius:1px}
.ind-pn{font-size:10px;color:var(--fg3);margin-left:4px;font-variant-numeric:tabular-nums}
.ind-pn.ext{color:#fbbf24;font-weight:700}
.ind-dt{opacity:.7;margin-right:3px;font-weight:600}

/* 가격 레벨 (원) — GBM 이격도 카드와 같은 탭, 다른 눈금 */
.ind-lv-head{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.ind-lv-close{font-size:22px;font-weight:800;letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.ind-cl{display:flex;align-items:baseline;gap:8px;padding:4px 6px;
  border-bottom:1px solid var(--line);font-size:12.5px;flex-wrap:wrap}
.ind-cl:last-child{border-bottom:0}
.ind-cl-side{width:28px;flex:none;font-weight:700;font-size:11px}
.ind-cl-side.up{color:var(--up)} .ind-cl-side.dn{color:var(--down)}
.ind-cl-px{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.ind-cl-gap{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--fg3);font-size:11px}
.ind-lv-now{background:var(--accent-soft)}
.ind-lv-now td{border-bottom-color:var(--accent-line)!important}
.ind-plan{margin-top:12px}
.ind-plan-keys{display:flex;gap:18px;flex-wrap:wrap;margin:6px 0 8px}
.ind-plan-keys .cap{font-size:10.5px;color:var(--fg3)}
.ind-plan-keys .v{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.ind-plan-keys .v.dn{color:var(--down)}

/* ── 종목 헤더 ───────────────────────────────────────────── */
.sym-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.sym-logo{width:44px;height:44px;border-radius:10px;background:#1428a0;display:grid;
  place-items:center;font-weight:800;font-size:12px;color:#fff;flex:none}
.sym-name{font-size:21px;font-weight:800;letter-spacing:-.5px}
.sym-meta{font-size:12.5px;color:var(--fg3)}
.sym-price{margin-left:auto;text-align:right}
.sym-price .p{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.sym-price .c{font-size:13px;font-weight:600}

/* ── 시나리오 ────────────────────────────────────────────── */
.scen{display:grid;gap:8px}
.scen-block + .scen-block{margin-top:10px}
.scen-h{font-size:11px;color:var(--fg3);margin:0 0 4px;font-variant-numeric:tabular-nums}
.scen-row{display:flex;align-items:center;gap:11px;font-size:13px}
.scen-row .nm{width:52px;color:var(--fg2);flex:none}
.scen-row .bar{flex:1;height:20px;border-radius:5px;background:var(--bg3);overflow:hidden}
.scen-row .bar i{display:block;height:100%}
.scen-row .pc{width:44px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;flex:none}

/* ── 미니 스파크 ─────────────────────────────────────────── */
canvas.spark{display:block;width:100%;height:38px}
.mono{font-family:var(--font-num);font-size:12px;font-variant-numeric:tabular-nums}
/* ★ 11.5px → 12px. 이 클래스는 화면에 **674곳**이고 대부분이 «왜 그런가»를 적는
   규율 문장이다 — 반 픽셀이 아니라 읽히느냐 마느냐의 차이였다. */
.small{font-size:12px;color:var(--fg3);line-height:1.65}
.hr{height:1px;background:var(--line);margin:13px 0}
.flex{display:flex;align-items:center;gap:9px}
.flex.wrap{flex-wrap:wrap}
.right{margin-left:auto}

/* ============================================================================
   3단 셸 레이아웃 — 알파스퀘어형 (좌 관심목록 / 중앙 차트 / 우 분석 사이드)
   URL: index.html?code=005930&tab=ai-predict
   ========================================================================= */
body.shell{overflow:hidden;height:100vh;display:flex;flex-direction:column}

/* ══ 상단 바 ══════════════════════════════════════════════════════
   ★★★ 2026-08-29 개편 — 여기가 이번 작업에서 가장 크게 바뀐 자리다.
   개편 전: 같은 크기·같은 모양의 알약 **11개**가 한 줄에 나란히 있었다
   (시장 대시보드·성과 추적·캘린더·데이터·종목발굴·GraphRAG·백테스팅·
    마켓 워크벤치·KAIROS·기능 지도·물어보기). 전부 같은 무게라 **어디부터
   보는 것이 순서인지**가 화면에 없었고, 1280px 아래에서는 줄이 넘쳤다.
   개편 후: 매매 작업의 실제 순서대로 다섯 묶음이 된다 —
     ① 시장을 읽는다  ② 종목을 찾는다  ③ 검증한다  ④ 운용한다
   그리고 각 항목에 «이 화면이 무엇을 하는가» 한 줄을 붙였다. 그 설명은
   전에도 있었지만 `title` 속성(마우스를 1초 올려야 뜨는 자리)뿐이었다. */
.tbar{height:52px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;
  background:rgba(15,20,32,.92);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);position:relative;z-index:100}
.tbar .brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;
  letter-spacing:-.3px;flex:0 0 auto}
.tbar .brand .mark{width:26px;height:26px;border-radius:8px;
  background:linear-gradient(145deg,#8b95ff,var(--accent));
  display:grid;place-items:center;font-size:12px;color:#fff;font-weight:800;
  box-shadow:0 3px 10px -3px var(--accent-line)}
.tbar .brand .beta{font-size:9.5px;padding:1.5px 5px;border-radius:5px;font-weight:700;
  background:var(--bg3);color:var(--fg3);border:1px solid var(--line);letter-spacing:.3px}
.tbar .search{flex:1 1 260px;max-width:380px;margin-left:auto;position:relative}
.tbar .search input{width:100%;background:var(--bg3);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--fg);padding:7px 58px 7px 31px;font:inherit;
  font-size:var(--t-sm);transition:border-color var(--dur) var(--ease),
    background var(--dur) var(--ease)}
.tbar .search input:hover{border-color:var(--line2)}
.tbar .search input:focus{border-color:var(--accent-line);background:var(--bg2);outline:none}
.tbar .search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.45}
.tbar .tb-right{margin-left:0;display:flex;gap:6px;align-items:center;flex:0 0 auto}

/* 좁아지면 순서대로 버린다 — 검색과 이동 메뉴가 마지막까지 남는다. */
/* 1500 → 1320px. 1400px 는 흔한 노트북 폭인데 거기서 이미 이름이 사라졌다. */
@media(max-width:1320px){.tbar .brand .word,.tbar .brand .beta{display:none}}
@media(max-width:1240px){.tbar .tb-badges{display:none}}
@media(max-width:1040px){.tbar .tb-g>button,.tbar .tb-lnk{padding:6px 8px;font-size:12.5px}
  .tbar .search{flex-basis:180px}}

/* 3단 그리드 — ★ 2026-07-30(64차) 좌·우 폭을 드래그로 조절할 수 있게 CSS 변수로 뺐다.
   예전엔 206px/380px 고정이라 관심목록 종목명이 잘리거나 우측 탭이 좁아도 손댈 수 없었다.
   폭은 localStorage에 남아 다음 실행에도 유지된다(app.js `initSideResizers`). */
/* ★ 2026-08-04(78차) — 맨 오른쪽에 **아이콘 레일**(4번째 칸)을 두고 우측 패널을
   접을 수 있게 했다(트레이딩뷰식). 레일은 항상 보이고, 그룹 버튼을 누르면 패널이
   열리며 **열린 버튼을 다시 누르면 닫힌다.**

   ★ 접을 때 `--side-r`을 0으로 만들지 않는다. 두 가지 이유:
     ① 그 변수는 app.js가 **인라인 스타일로** 넣으므로 클래스로는 못 이긴다.
     ② 접었다 폈을 때 사용자가 드래그로 맞춰둔 폭이 그대로여야 한다.
   대신 접힘 상태에서 **그리드 3번째 칸만 0**으로 만든다 — 폭 기억과 접기가 서로
   간섭하지 않는 유일한 방법이다. */
/* ★ 2026-08-29 기본 폭 206 → 228px. 실측에서 「KOSEF 국고채10년」이 「KOS…」로,
   「삼성전자」가 「삼…」으로 잘렸다 — 종목 목록에서 이름이 안 보이면 그 목록은
   목록이 아니다. 사용자가 끌어서 맞춘 값이 있으면 그것이 이긴다(인라인 스타일). */
.shell-body{flex:1;display:grid;
  grid-template-columns:var(--side-l,228px) minmax(0,1fr) var(--side-r,380px) var(--sr-rail,40px);
  min-height:0;position:relative}
.shell-body.sr-closed{
  grid-template-columns:var(--side-l,228px) minmax(0,1fr) 0 var(--sr-rail,40px)}
.shell-body.sr-closed .side-r,
.shell-body.sr-closed .side-split.r{display:none}

/* ★ 2026-08-31 — **왼쪽도 접힌다**(사용자 요청). 오른쪽과 **같은 방식**이다:
   상태는 CSS 클래스 하나(`.sl-closed`)가 정본이고 JS 변수에 따로 들고 있지 않는다.
   ⚠ 폭(`--side-l`)은 건드리지 않는다 — 접기와 «끌어서 맞춘 폭»이 서로 간섭하면
     다시 폈을 때 폭이 0 이 된다(오른쪽에서 같은 이유로 폭을 안 건드린다).
   ⚠⚠ 둘 다 접힌 경우를 **따로** 적어야 한다 — `.sl-closed`(0,2,0)와
     `.sr-closed`(0,2,0)는 특정도가 같아 **뒤에 온 규칙이 이긴다.** 즉 한쪽만 적으면
     둘 다 접었을 때 한쪽이 되살아난다. */
.shell-body.sl-closed{
  grid-template-columns:0 minmax(0,1fr) var(--side-r,380px) var(--sr-rail,40px)}
.shell-body.sl-closed.sr-closed{
  grid-template-columns:0 minmax(0,1fr) 0 var(--sr-rail,40px)}
.shell-body.sl-closed .side-l,
.shell-body.sl-closed .side-split.l{display:none}

/* ★★ 칸을 **명시**한다 — 자동 배치에 맡기면 안 된다.
   접을 때 `.side-r`이 display:none이 되면 그리드 흐름에서 빠지고, 그러면 뒤에 있던
   레일이 **한 칸 당겨져 3번째 칸(폭 0)에 들어가 통째로 사라진다.** 실제로 그렇게
   숨겨져 "다시 열 버튼이 없어지는" 상태가 됐다(2026-08-04 실측).
   자동 배치는 앞 형제가 사라지는 순간을 고려하지 않는다 — 위치가 중요한 칸은 적어 둘 것. */
.side-r{grid-column:3}
.sr-rail{grid-column:4}
.shell-body.wide-right{--side-r:460px}
@media(max-width:1400px){.shell-body{--side-l:180px;--side-r:340px}}
/* ⚠ `.shell-body.sr-closed`(0,2,0)가 `.shell-body`(0,1,0)보다 강하므로 좁은 화면
   규칙에도 두 선택자를 같이 적어야 한다 — 안 그러면 접은 채로 폰에서 열었을 때
   3단 그리드가 그대로 남는다. */
/* ════════════════════════════════════════════════════════════════════
   모바일 (plan/22 M1·M2, 101차)

   ★★ 여기 있던 규칙은 좁은 화면에서 `.side-l`·`.side-r`·`.sr-rail`을 통째로
      **`display:none`** 했다. 3열이 안 뭉개지긴 하는데 **관심목록과 우측 분석 탭에
      갈 방법이 아예 없어진다** — plan/22가 "기능 손실 없이"를 비목표로 못박은 바로
      그 상태다. 폰에서는 차트 하나만 남아 있었다.
   → 셋 다 살려두고 **한 번에 하나만** 보여준다(하단 뷰 스위처). 뷰 상태는
      `<body data-mview>` 하나이고, 라우팅(`?grp=&tab=&code=`)은 건드리지 않는다.
      데스크톱 링크가 폰에서도 그대로 열려야 하기 때문이다. */
@media(max-width:1100px){
  .shell-body,.shell-body.sr-closed{grid-template-columns:1fr}
  .side-split,.sr-rail{display:none}
  /* 세 판을 다 감추고 고른 것 하나만 되살린다. `.center`만 flex, 나머지는 block —
     원래 display가 서로 달라서 한 값으로 되살리면 레이아웃이 깨진다. */
  .side-l,.side-r,.center{display:none}
  body[data-mview="list"] .side-l{display:block}
  body[data-mview="info"] .side-r{display:block}
  body[data-mview="chart"] .center{display:flex}
  /* ⚠ `.shell-body.sr-closed .side-r{display:none}`(0,2,0)를 이겨야 한다 —
     데스크톱에서 우측을 접어둔 채 폰으로 열면 정보 뷰가 안 열린다. */
  body[data-mview="info"] .shell-body.sr-closed .side-r{display:block}
  /* data-mview가 아직 없을 때(첫 렌더·JS 실패)는 차트를 보여준다 */
  body:not([data-mview]) .center{display:flex}
  .mview-bar{display:flex}
  .shell-body{padding-bottom:54px}
}

/* 하단 뷰 스위처 — 좁은 화면에서만 나타난다(데스크톱은 존재조차 하지 않는다). */
.mview-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--bg2);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0)}
.mview-bar button{flex:1;background:none;border:0;color:var(--fg3);
  /* ★ 44px — 손가락으로 누를 수 있는 최소 높이(plan/22 M1). */
  min-height:48px;font-size:13px;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mview-bar button[aria-current="true"]{color:var(--fg);
  box-shadow:inset 0 2px 0 var(--accent)}

/* M1 — 터치 타깃. 좁은 화면에서만 키운다(데스크톱 밀도는 그대로). */
@media(max-width:820px){
  .pills button,.tabs button,.sr-tabs button,.sr-sub button{
    min-height:40px;font-size:13px;padding-left:11px;padding-right:11px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  /* 표는 잘리는 대신 **자기 안에서** 가로 스크롤한다 — 페이지 본문은 절대
     가로로 스크롤되지 않아야 한다(그러면 세로 스와이프가 어긋난다). */
  .card table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* 드래그 손잡이 — 사이드바 경계에 겹쳐 놓는다(그리드 칸을 따로 쓰지 않아 기존 3칸 구조 유지) */
.side-split{position:absolute;top:0;bottom:0;width:7px;cursor:col-resize;z-index:20}
.side-split:hover,.side-split.dragging{background:linear-gradient(90deg,
  transparent,var(--accent,#3b82f6),transparent);opacity:.55}
.side-split.l{left:calc(var(--side-l,206px) - 3px)}
/* 레일이 오른쪽 끝을 차지하므로 손잡이는 그만큼 안쪽에 있다 */
.side-split.r{right:calc(var(--side-r,380px) + var(--sr-rail,40px) - 3px)}
body.side-resizing{cursor:col-resize;user-select:none}

/* 우측 아이콘 레일 — 세로쓰기 라벨(아이콘 세트가 없어 글자를 세운다. 그림 대신
   글자를 쓰면 "이 아이콘이 무슨 탭이더라"가 아예 생기지 않는다) */
.sr-rail{background:var(--bg2);border-left:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 0;overflow:hidden}
.sr-rail button{width:30px;background:none;border:1px solid transparent;border-radius:7px;
  color:var(--fg3);padding:10px 0;cursor:pointer;font-size:12px;letter-spacing:1px;
  writing-mode:vertical-rl;text-orientation:upright;
  display:flex;align-items:center;justify-content:center}
.sr-rail button:hover{color:var(--fg2);background:var(--bg3)}
.sr-rail button.on{color:var(--accent);background:var(--bg3);border-color:var(--accent);
  font-weight:700}

.side-l,.side-r{background:var(--bg2);overflow-y:auto;min-height:0}
.side-l{border-right:1px solid var(--line)}
.side-r{border-left:1px solid var(--line)}
.center{overflow-y:auto;min-height:0;display:flex;flex-direction:column}

/* 좌: 관심목록 */
.wl-head{padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px;
  display:flex;align-items:center;gap:6px;color:var(--fg2)}
.wl-group{padding:9px 12px 3px;font-size:11px;color:var(--fg3);font-weight:700;letter-spacing:.4px}
.wl-item{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;
  border-left:2px solid transparent}
.wl-item:hover{background:var(--bg3)}
/* ★ 2026-08-28 — 관심목록 순서 바꾸기(사용자 요청).
   ⚠ 행 전체에 드래그를 걸면 «종목 이동»(onclick)과 싸운다 — 작은 끌림이 클릭으로
     끝나 엉뚱한 종목으로 이동한다. 그래서 **전용 핸들**에서만 끌기를 시작한다. */
/* ⚠ 처음엔 `opacity:0`(호버에만 보임)이었는데 사용자가 «핸들이 안 나타난다»고
   보고했다. 원인은 그리드 보기 미배선이었지만, **호버 전에 아무 단서도 없는 것**
   자체가 발견을 어렵게 한다 — 옅게 항상 보이고 호버에 진해진다. */
.wl-grip{cursor:grab;color:var(--fg3);opacity:.35;flex:0 0 auto;
  padding:0 2px;font-size:12px;line-height:1;user-select:none;
  transition:opacity .12s}
.wl-item:hover .wl-grip,.wl-card:hover .wl-grip{opacity:.75}
/* ⚠ 그리드 카드는 위쪽 줄이 좁다 — 핸들이 순위·시장 배지를 밀지 않게 자리를 고정한다. */
.wl-card .wl-grip{margin-right:2px}
/* ★ 행 전체가 «끌 수 있는 것» 이라고 커서가 말해 준다 — 표시가 없으면 아무도 안 끈다. */
.wl-item[draggable="true"],.wl-card[draggable="true"]{cursor:grab}
.wl-item[draggable="true"]:active,.wl-card[draggable="true"]:active{cursor:grabbing}
.wl-card.wl-dragging{opacity:.45}
.wl-card.wl-over{box-shadow:inset 2px 0 0 var(--accent)}
.wl-card.wl-over-dn{box-shadow:inset -2px 0 0 var(--accent)}
.wl-grip:active{cursor:grabbing}
.wl-item.wl-dragging{opacity:.45}
.wl-item.wl-over{box-shadow:inset 0 2px 0 var(--accent)}
.wl-item.wl-over-dn{box-shadow:inset 0 -2px 0 var(--accent)}
.wl-item.active{background:var(--bg3);border-left-color:var(--accent)}
.wl-ico{width:20px;height:20px;border-radius:5px;flex:none;display:grid;place-items:center;
  font-size:9px;font-weight:800;color:#fff}
/* ★ 79차 — 시가총액 그룹의 순위 표시.
   ⚠ 예측 순위(`.wl-rank`)와 **다른 값**이라 색·자리를 일부러 다르게 뒀다.
   두 자리 수까지는 아이콘 안에 들어가고, 세 자리(100위)면 글자를 줄인다. */
.wl-ico-rank{font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.wl-caprank{background:var(--bg2);border-radius:3px;padding:0 3px;flex:none;
  font-variant-numeric:tabular-nums;color:var(--fg3);font-weight:700}
.wl-nm{flex:1;min-width:0}
.wl-nm b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.wl-nm span{font-size:10.5px;color:var(--fg3)}
.wl-px{text-align:right;font-variant-numeric:tabular-nums;flex:none}
.wl-px b{display:block;font-size:12px;font-weight:700}
.wl-px span{font-size:10.5px}
/* 우리 확장 컬럼 */
.wl-ext{display:flex;gap:5px;padding:0 12px 7px 42px;font-size:10px}
.wl-ext .r{color:var(--fg3)}
/* ★ 값이 없는 칸은 자리를 차지하지 않는다 — 「P —」 「#—」 가 종목마다 두 번씩
   찍히던 자리다(30종목이면 60개의 «없음»). :has 를 지원하지 않는 엔진에서는
   예전처럼 줄이 남을 뿐 깨지지 않는다. */
.wl-ext .wl-p:empty,.wl-ext .wl-rank:empty,.wl-ext .wl-src:empty{display:none}
.wl-ext:not(:has(:not(:empty))){display:none}
.wl-hint{padding:7px 12px;color:var(--fg3);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.015);line-height:1.55}
.wl-hint b{color:var(--fg2)}
/* NXT(넥스트레이드) 보조 시세 — wl-px(가격 컬럼)의 flex 폭에 얹으면 이름 컬럼이
   찌부러지는 버그가 있어서(2026-07-28 사용자 지적) 별도의 전체너비 행으로 뺐다.
   기본 가격/등락(.wl-px b 12px, .wl-chg 10.5px)보다 눈에 띄게 작게, 오른쪽 정렬. */
.wl-nxt{text-align:right;padding:0 12px 6px;font-size:9px;color:var(--fg3)}

/* ── 관심목록 그리드형 보기(64차) ─────────────────────────────────────────
   증권앱식 카드 배치. 열 수를 고정하지 않고 auto-fill로 두는 이유는 같은 라운드에
   추가한 사이드바 폭 조절과 맞물리기 때문 — 좁히면 1열, 넓히면 2·3열로 알아서 접힌다.
   클래스 훅(.wl-close/.wl-chg/...)은 목록형과 동일해 갱신 코드를 공유한다. */
.wl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:6px;padding:2px 8px 8px}
.wl-card{background:var(--bg3);border:1px solid var(--line);border-radius:7px;
  padding:7px 8px;cursor:pointer;min-width:0}
.wl-card:hover{border-color:var(--fg3)}
.wl-card.active{border-color:var(--accent)}
.wl-card-top{display:flex;align-items:center;gap:4px;font-size:9.5px;color:var(--fg3)}
.wl-card-mkt{background:var(--bg2);border-radius:3px;padding:0 3px;
  max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-card-top .wl-del{margin-left:auto;cursor:pointer}
.wl-card-nm{font-size:12px;font-weight:700;margin:3px 0 2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-card-px{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.wl-card-px b{font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.wl-card-px .wl-chg{font-size:11px}
.wl-card-sub{display:flex;gap:5px;align-items:center;margin-top:3px;
  font-size:9.5px;color:var(--fg3);flex-wrap:wrap}
.wl-card-sub .wl-rank{margin-left:auto}
/* 그리드 안에서는 NXT 보조행이 카드 폭을 넘지 않도록 패딩을 없앤다 */
.wl-card .wl-nxt{padding:2px 0 0;text-align:left}

/* 중앙: 종목 헤더 + 툴바 */
.sym-bar{padding:9px 14px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg2)}
.sym-bar .nm{font-size:15px;font-weight:800}
.sym-bar .cd{font-size:12px;color:var(--fg3)}
.sym-bar .px{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.sym-bar .meta{font-size:11.5px;color:var(--fg3)}
.chart-tools{padding:7px 14px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:4px;flex-wrap:wrap;background:var(--bg2);font-size:12px}
.ctool{background:none;border:0;color:var(--fg2);padding:4px 9px;border-radius:var(--r-xs);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.ctool:hover{background:var(--bg3);color:var(--fg)}
.ctool.on{background:var(--accent-soft);color:var(--accent2);font-weight:650}
.tf-group{display:flex;gap:2px;background:var(--bg3);border-radius:var(--r-xs);padding:2px}
.tf{background:none;border:0;color:var(--fg3);padding:4px 9px;border-radius:5px;font-size:12px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.tf:hover{color:var(--fg2)}
.tf.on{color:#fff;background:var(--accent);font-weight:700}

/* ★★ 2026-08-29 — 툴바 묶음.
   컨트롤 22개가 평평하게 놓여 있으면 사용자는 매번 **처음부터 훑어야** 한다.
   묶음마다 아주 작은 이름표를 위에 얹어(«차트»·«캔들 위»·«모델») 어느 덩어리를
   봐야 하는지가 먼저 읽히게 한다. 이름표는 11px 회색 — 컨트롤보다 약해야 한다.
   ⚠ 이름표는 `data-lb` 에서 나온다. 마크업에 <span> 을 더 넣으면 그 자체가
     또 다른 클릭 대상처럼 보인다. */
.ct-grp{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap;
  position:relative;padding:9px 7px 3px;border-radius:var(--r-sm)}
/* ★ 0건 + diag 는 호버(title)가 아니라 화면. ⚠ 고장(--warn)과 ⓘ 못 잰다(--info)는
   다른 사실이라 색을 가른다. 새 토큰을 만들지 않는다(`--info` 는 :root 에 있다). */
.ct-marks-unscored{display:block;margin-top:3px;max-width:min(720px,70vw);
  color:var(--info);font-size:11px;line-height:1.45;white-space:normal;font-weight:400}
.ct-marks-counts{white-space:nowrap}
.ct-grp::before{content:attr(data-lb);position:absolute;top:0;left:8px;
  font-size:9.5px;color:var(--fg3);letter-spacing:.3px;line-height:1;pointer-events:none}
.ct-grp:hover{background:rgba(255,255,255,.022)}
.ct-sep{width:1px;align-self:stretch;margin:4px 5px;background:var(--line);flex:0 0 auto}
.ct-right{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.ct-right .tf-group{margin-left:0}
/* 「아직 없는 것」 — 지우지 않되 손이 가는 자리에서 비킨다. */
.ct-todo{color:var(--fg3);border:1px dashed var(--line2);cursor:help;font-size:11px;
  padding:3px 8px;border-radius:999px}
.ct-todo:hover{color:var(--fg2);border-color:var(--fg3);background:none}
.chart-area{flex:1;min-height:340px;padding:8px 12px;position:relative}
.ticker-bar{border-top:1px solid var(--line);background:var(--bg2);padding:6px 14px;
  display:flex;gap:16px;overflow-x:auto;font-size:11.5px;flex:none}
.tk{display:flex;gap:6px;align-items:center;white-space:nowrap}
.tk b{font-variant-numeric:tabular-nums}

/* 우: 사이드 탭 */
.sr-tabs{display:flex;border-bottom:1px solid var(--line);background:var(--bg2);
  position:sticky;top:0;z-index:5}
.sr-tabs button{flex:1;background:none;border:0;color:var(--fg3);padding:9px 4px;
  font-size:12px;border-bottom:2px solid transparent;display:flex;flex-direction:column;
  align-items:center;gap:2px;transition:color var(--dur) var(--ease),
    background var(--dur) var(--ease)}
.sr-tabs button:hover{color:var(--fg2);background:rgba(255,255,255,.03)}
.sr-tabs button.on{color:var(--accent2);border-bottom-color:var(--accent);font-weight:700;
  background:var(--accent-soft)}
.sr-sub{display:flex;border-bottom:1px solid var(--line);background:var(--bg2);
  position:sticky;top:39px;z-index:5}
.sr-sub button{flex:1;background:none;border:0;color:var(--fg3);padding:8px 4px;
  font-size:12.5px;border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease)}
.sr-sub button:hover{color:var(--fg2)}
/* ★ 하위 탭은 **흰색**으로 켠다 — 상위 탭(강조색)과 같은 색이면 두 줄이 같은
   위계로 보여 «어느 것이 지금 열린 큰 묶음인지»가 사라진다. */
.sr-sub button.on{color:var(--fg);border-bottom-color:var(--fg);font-weight:700}
.sr-body{padding:13px}
.sr-body .card{padding:12px;margin-bottom:11px}

/* 접히는 설명 — ★ 2026-08-04(78차). 긴 안내가 결과를 화면 밖으로 밀어내던 것을
   `<details>`로 접는다. **JS 상태를 만들지 않는 것이 요점** — 열림/닫힘을 변수로 들면
   재렌더마다 어긋난다(이 저장소가 "보이는 상태 vs 실제 상태"로 반복해 다친 지점).
   브라우저 기본 삼각형은 숨기고 직접 그린다(테마와 색이 맞지 않아서). */
details.expl{border:1px solid var(--line);border-radius:8px;background:var(--bg3)}
details.expl>summary{cursor:pointer;padding:8px 11px;font-size:12px;color:var(--fg2);
  list-style:none;user-select:none}
details.expl>summary::-webkit-details-marker{display:none}
details.expl>summary::before{content:'▸ ';color:var(--fg3)}
details.expl[open]>summary::before{content:'▾ '}
details.expl>summary:hover{color:var(--fg)}
details.expl .body{padding:0 11px 10px;font-size:11.5px;color:var(--fg3);line-height:1.55}
details.expl .body b{color:var(--fg2)}

/* 상승/하락 비율 막대 (78차) — 폭이 비율, 안의 숫자가 건수.
   ⚠ 라벨에 `nowrap`이 없으면 좁은 칸에서 글자가 세로로 깨진다 —
   11·14·16차에 같은 종류로 세 번 다쳤다. */
.updown-bar{flex:1;display:flex;height:22px;border-radius:6px;overflow:hidden;
  background:var(--bg3);min-width:0}
.updown-bar i{display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;min-width:0}

/* 게이지 (투자의견) */
.gauge{position:relative;height:74px;margin:4px 0 2px}
.gauge canvas{width:100%;height:74px;display:block}
.gauge-lb{position:absolute;bottom:0;width:100%;text-align:center;font-size:11px;color:var(--fg3)}

/* 투자자 동향 바 — 값 라벨은 항상 한 줄. 막대(.bw i)가 짧으면(예: 값이 작은 항목)
   라벨이 그 좁은 막대 폭 안에 갇혀 줄바꿈되던 버그(2026-07-28 스크린샷 — "기관" 막대처럼
   짧을 때 숫자가 두 줄로 깨짐) 수정: `white-space:nowrap`으로 줄바꿈을 막고, 막대
   자체(<i>)는 `overflow:visible`로 둬서 라벨이 막대 폭을 넘어서도(트랙 배경 위로)
   그대로 흘러나가 보이게 한다 — 트랙(.bw)은 계속 `overflow:hidden`이라 라벨이 트랙
   전체 폭 밖으로까지 새지는 않는다. */
.inv{display:grid;grid-template-columns:44px 1fr;gap:6px 9px;align-items:center;font-size:11.5px}
.inv .lb{color:var(--fg3)}
.inv .bw{position:relative;height:17px;background:var(--bg3);border-radius:4px;overflow:hidden}
.inv .bw i{position:absolute;top:0;height:100%;display:flex;align-items:center;overflow:visible;
  padding:0 5px;font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap}

/* 컨디션 원형 */
.cond-ring{width:56px;height:56px;border-radius:50%;border:3px solid var(--down);
  display:grid;place-items:center;font-size:19px;font-weight:800;flex:none}

/* 팩터 바 목록 */
.fbar{margin-bottom:10px}
.fbar-top{display:flex;align-items:center;gap:6px;font-size:12.5px;margin-bottom:4px}
.fbar-top .v{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.fbar-tr{height:5px;border-radius:3px;background:var(--bg3);overflow:hidden}
.fbar-tr i{display:block;height:100%}

/* 시나리오 카드 3열 */
.scen3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.scen3{grid-template-columns:1fr}}
.scen-card{border-radius:9px;padding:12px;border:1px solid var(--line);background:var(--bg3)}
.scen-card .h{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;margin-bottom:6px}
.scen-card .pc{margin-left:auto;font-size:15px;font-weight:800}
.scen-card .rg{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:6px}
.scen-card .why{font-size:11px;color:var(--fg3);line-height:1.6}

/* 단계 추론 */
.steps{counter-reset:s}
.step{display:flex;gap:9px;font-size:12.5px;line-height:1.65;margin-bottom:7px}
.step .n{flex:none;width:19px;height:19px;border-radius:5px;background:var(--bg3);
  display:grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--fg2);margin-top:1px}

/* TOP3 시상대 */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:10px;align-items:end}
.pod{border-radius:9px 9px 0 0;padding:12px;text-align:center;border:1px solid var(--line);
  border-bottom:0;background:var(--bg3)}
.pod.p1{background:linear-gradient(180deg,rgba(245,158,11,.16),var(--bg3));height:112px}
.pod.p2{height:88px}.pod.p3{background:linear-gradient(180deg,rgba(224,82,74,.1),var(--bg3));height:80px}
.pod .r{font-size:20px;font-weight:800;color:var(--fg3)}

/* 일자별 성과 그리드 */
.dayg{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}
@media(max-width:1200px){.dayg{grid-template-columns:repeat(5,1fr)}}
.day{border:1px solid var(--line);border-radius:8px;padding:8px 4px;text-align:center;background:var(--bg3)}
.day.sel{border-color:var(--ok);box-shadow:0 0 0 1px rgba(34,197,94,.3)}
.day .d{font-size:10.5px;color:var(--fg3)}
.day .v{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;margin:2px 0}
.day .e{font-size:9.5px;color:var(--fg3)}

/* 캘린더 */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-h{font-size:11px;color:var(--fg3);text-align:center;padding:5px 0;font-weight:700}
.cal-d{min-height:74px;border:1px solid var(--line);border-radius:7px;padding:6px;
  background:var(--bg2);font-size:11px}
.cal-d.off{opacity:.35}
.cal-d.today{border-color:var(--ok)}
.cal-d .dn{font-weight:700;margin-bottom:4px;display:flex}
.cal-d .cnt{margin-left:auto;color:var(--fg3);font-size:10px}
.cal-ev{font-size:10px;color:var(--fg2);white-space:normal;word-break:keep-all;
  overflow-wrap:break-word;line-height:1.4;margin-bottom:2px}
.cal-ev i{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:4px;
  flex:none;vertical-align:middle}
.cal-d{height:auto}

/* 전략 서술 (번호 목록) */
.strat h5{font-size:12.5px;font-weight:700;margin:12px 0 6px;padding-left:8px;
  border-left:2px solid var(--accent);color:var(--fg)}
.strat ol{margin:0;padding-left:19px;font-size:12.5px;line-height:1.75;color:var(--fg2)}
.strat ol li{margin-bottom:4px}
.strat b{color:var(--fg)}

/* 셸 하단 면책 바 */
.shell-note{flex:none;background:var(--bg2);border-top:1px solid var(--line);
  padding:5px 14px;font-size:10.5px;color:var(--fg3);display:flex;gap:14px;flex-wrap:wrap}
.shell-note b{color:var(--fg2)}

/* ══ 팩터 선택 모달 (2026-08-18) ══════════════════════════════════════
   ★ 마크업을 각 페이지에 두지 않고 `app.js`가 body 에 만든다 — 두 벌이 되면
     한쪽만 낡는다. 그래서 스타일도 공용인 여기에 둔다. */
#fx-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;padding:18px}
#fx-modal[hidden]{display:none}
#fx-modal .fx-back{position:absolute;inset:0;background:rgba(0,0,0,.62)}
#fx-modal .fx-panel{position:relative;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;width:min(880px,100%);max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 18px 60px rgba(0,0,0,.55)}
#fx-modal .fx-top{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
#fx-modal .fx-top b{font-size:14px}
#fx-modal .fx-body{padding:12px 14px;overflow:auto}
.fx-note{font-size:11.5px;line-height:1.6;color:var(--fg3);margin-bottom:10px}
.fx-note.warn{color:#fcd34d;background:rgba(251,191,36,.10);border-radius:7px;padding:8px 10px}
.fx-group{margin-bottom:14px}
.fx-group>h4{margin:0 0 7px;font-size:12px;color:var(--accent);
  display:flex;align-items:center;gap:7px}
.fx-group>h4::after{content:"";flex:1;height:1px;background:var(--line)}
.fx-item{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg3);margin-bottom:6px;cursor:pointer}
.fx-item:hover{border-color:var(--accent)}
.fx-item.on{border-color:var(--accent);background:rgba(56,189,248,.07)}
.fx-item.off{opacity:.55;cursor:not-allowed}
.fx-item input{margin-top:3px;flex:none}
.fx-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px}
.fx-h b{font-size:12.5px}
.fx-what{font-size:11.5px;color:var(--fg2);line-height:1.5}
.fx-guide{font-size:11px;color:var(--fg3);line-height:1.55;margin-top:4px}
.fx-why{font-size:11px;color:#fcd34d;line-height:1.55;margin-top:4px}
.fx-src{font-size:10.5px;color:var(--fg3);margin-top:4px;opacity:.8}
@media(max-width:560px){#fx-modal{padding:8px}.fx-item{padding:8px}}

/* ── LLM 분석 본문 (113차 · 사용자 요청 «가독성») ─────────────────────────
   ★★★ 옛 화면은 답을 통째로 `<pre>` 에 넣었다. 모델은 머리표와 불릿을 **이미
   내고 있었는데** 화면이 그것을 평문으로 흘려서 «벽»이 됐다(실측 줄당 163자).
   여기서 하는 일은 전부 **간격과 위계**다 — 글자를 지우거나 줄이지 않는다.
   ⚠ 색·크기는 이 페이지의 기존 토큰만 쓴다(`--fg`·`--fg2`·`--line`·`--ok`…).
     새 토큰을 만들면 `--k-card` 처럼 «정의된 적 없는 이름»이 또 생긴다. */
.ld-body{margin:9px 0 0}

/* 요약 — 제일 먼저 읽는 자리라 상자로 뽑는다.
   ★★ 114차(사용자 요청) — 한 줄이 아니라 **축마다 한 줄**(수급·차트 위치·GBM…).
   «축 이름 — 문장»을 **같은 줄**에 둔다: 핵심 절처럼 머리말을 위로 올리면
   3~4축이 8줄이 되어 «요약»이 아니게 된다. */
.ld-sum{background:var(--bg3);border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:9px;padding:10px 12px;margin:0 0 11px;
  font-size:12.5px;line-height:1.6;color:var(--fg2)}
.ld-sumline+.ld-sumline{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
/* 축 이름은 줄 앞에서 바로 찾을 수 있어야 한다 — 매번 같은 자리에 같은 순서로 온다. */
.ld-sumline>b{color:var(--fg)}
.ld-sumline>span b{color:var(--fg)}

.ld-sec{margin:0 0 12px}
.ld-sec:last-child{margin-bottom:0}
/* 절 이름 — 본문보다 작고 옅게. 읽는 순서는 «요약 → 항목»이고 머리표는 이정표다. */
.ld-h{margin:0 0 6px;font-size:11.5px;font-weight:700;color:var(--fg3);
  letter-spacing:.4px;display:flex;align-items:center;gap:7px}
.ld-h::after{content:"";flex:1;height:1px;background:var(--line)}

.ld-l{list-style:none;margin:0;padding:0}
/* ★ 항목 사이 간격이 이 화면의 핵심이다 — 붙어 있으면 문단으로 읽힌다. */
.ld-i{position:relative;padding:0 0 0 13px;margin:0 0 9px;line-height:1.7;font-size:12.5px}
.ld-i:last-child{margin-bottom:0}
.ld-i::before{content:"";position:absolute;left:0;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--fg3)}
.ld-lead{display:block;color:var(--fg);font-size:12.5px;margin-bottom:2px}
.ld-b{color:var(--fg2)}
/* ★★ 한 문장 = 한 줄. 긴 항목이 «벽»이 되는 것을 막는 유일한 규칙이다. */
.ld-b .ld-s{display:block}
.ld-b .ld-s+.ld-s{margin-top:3px}
.ld-b b{color:var(--fg)}
/* 들여쓴 근거 줄 — 관찰과 수치를 눈으로 가른다. */
.ld-sub{margin:3px 0 0 2px;padding-left:9px;border-left:2px solid var(--line);
  color:var(--fg3);font-size:12px;line-height:1.6}

/* 채팅 답 — 같은 규칙을 쓰되 말풍선 안이라 여백을 줄인다. */
.ld-chat-body{font-size:12.5px;line-height:1.65;color:var(--fg2)}
.ld-chat-body .ld-b{color:var(--fg2)}
.ld-l-chat .ld-i{margin-bottom:6px;font-size:12.5px}

/* 원문 폴백 — ⚠ 접어 두되 **항상 있다**(구조화가 무언가를 삼켰는지 볼 길). */
.ld-raw{margin-top:10px}
.ld-raw>summary{cursor:pointer;font-size:11.5px;color:var(--fg3);
  list-style:none;user-select:none}
.ld-raw>summary::-webkit-details-marker{display:none}
.ld-raw>summary::before{content:"▸ ";color:var(--fg3)}
.ld-raw[open]>summary::before{content:"▾ "}
.ld-raw>summary:hover{color:var(--fg2)}
.ld-raw pre{white-space:pre-wrap;margin:7px 0 0;padding:9px 10px;border-radius:8px;
  background:var(--bg);border:1px solid var(--line);
  color:var(--fg3);font-size:11.5px;line-height:1.65;max-height:44vh;overflow:auto}

.ld-meta{color:var(--fg3)}

/* ── 총평(매매 의견) — 115차 사용자 요청 ────────────────────────────────
   ⚠⚠ 이 페이지에서 **가장 오독되기 쉬운 자리**다. 매매 의견 한 줄은 «검증된
   신호»로 읽히기 딱 좋고, 이 저장소가 가장 비싸게 치르는 실패가 정확히 그것이다.
   → 상자가 «LLM 의견 · 검증된 신호 아님»을 **머리에 달고** 나온다. 카드 위쪽
   배지와 중복이지만 여기서는 중복이 맞다 — 스크롤하면 그 배지는 안 보인다.
   ⚠ 그래서 강조색은 --ok(초록)가 아니라 **--warn 계열**이다. 초록은 «통과»로
   읽히는데 이 상자는 통과한 적이 없다. */
.ld-verdict{background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.28);
  border-left:3px solid var(--warn);border-radius:9px;padding:9px 12px 10px;
  margin:0 0 11px;font-size:12.5px;line-height:1.6;color:var(--fg2)}
.ld-vhead{font-size:11px;font-weight:700;color:var(--warn);letter-spacing:.3px;
  margin-bottom:7px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.ld-vhead>span{font-weight:600;color:var(--fg3);letter-spacing:0}
.ld-vline+.ld-vline{margin-top:6px}
.ld-vline>b{color:var(--fg);display:block;margin-bottom:1px}
.ld-vline .ld-b{color:var(--fg2)}
.ld-vline .ld-b b{color:var(--fg)}
/* ★ 「의견」 줄 — 사용자가 찾는 그 한 줄이라 상자 안에서 한 번 더 갈라 놓는다. */
.ld-vline.call{margin-top:9px;padding-top:8px;border-top:1px solid rgba(245,158,11,.25)}
.ld-vline.call>b{color:var(--warn)}
.ld-vline.call .ld-b{color:var(--fg)}


/* ============================================================================
   ★★★ 2026-08-29 디자인 개편 — 새 부품
   여기 있는 것은 «전에 없던» 규칙뿐이다. 위쪽 규칙을 덮어쓰지 않는다
   (덮어쓰기로 쌓으면 다음 사람이 어느 줄이 이기는지 매번 세어야 한다).
   ========================================================================= */

/* ── 버튼 ─────────────────────────────────────────────────────────
   ⚠ 개편 전 이 저장소에는 **공용 버튼 규칙이 없었다** — `.btn` 은
   `visual_flow.css` 안에만 있었고 화면마다 `.bt-btn`·`ctool`·인라인
   스타일로 각자 그렸다. 그래서 같은 «실행» 버튼이 화면마다 달랐다.
   페이지 `<style>` 은 이 파일보다 뒤에 오므로 기존 화면은 안 바뀐다. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--bg3);border:1px solid var(--line);color:var(--fg2);
  padding:7px 13px;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600;
  white-space:nowrap;transition:background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),color var(--dur) var(--ease),
    transform var(--dur) var(--ease)}
.btn:hover{background:var(--bg4);color:var(--fg);border-color:var(--line2)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-off{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(180deg,#818dfa,var(--accent));
  border-color:transparent;color:#fff;box-shadow:0 4px 14px -6px var(--accent-line)}
.btn-primary:hover{background:linear-gradient(180deg,#8f99fb,#7683f8);color:#fff}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--bg3);border-color:var(--line)}
.btn-sm{padding:4px 10px;font-size:var(--t-xs)}
.btn-lg{padding:10px 18px;font-size:var(--t-md)}

/* ── 상단 네비 묶음(드롭다운) ─────────────────────────────────── */
.tb-nav{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.tb-g{position:relative}
.tb-g>button,.tb-lnk{display:inline-flex;align-items:center;gap:5px;background:transparent;
  border:1px solid transparent;color:var(--fg2);padding:6px 12px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;white-space:nowrap;letter-spacing:-.2px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.tb-lnk:hover{background:var(--bg3);color:var(--fg)}
.tb-lnk.on{background:var(--accent-soft);color:var(--fg);border-color:var(--accent-line)}
.tb-g>button .caret{font-size:8px;opacity:.45;transition:transform var(--dur) var(--ease)}
.tb-g>button:hover{background:var(--bg3);color:var(--fg)}
/* «지금 이 화면» — 열림 상태와 **다른 색**이어야 한다. 같으면 메뉴를 열었을 때
   어느 것이 현재 위치인지 사라진다. */
.tb-g.on>button{background:var(--accent-soft);color:var(--fg);border-color:var(--accent-line)}
.tb-g.open>button{background:var(--bg4);color:var(--fg);border-color:var(--line2)}
.tb-g.open>button .caret{transform:rotate(180deg)}
/* 폭 — 설명 한 줄이 «두 줄로 접히지 않는» 최소값을 실측으로 잡았다(330px).
   좁으면 「지수를 군중으로 읽는다 — 캔들 심리·레짐 사이징·매크로」가 세 줄이 된다. */
.tb-menu{position:absolute;top:calc(100% + 7px);left:0;z-index:200;min-width:330px;
  padding:6px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:var(--r);box-shadow:var(--sh3);display:none}
.tb-menu.r{left:auto;right:0}
.tb-g.open .tb-menu{display:block;animation:tbMenuIn .15s var(--ease)}
@keyframes tbMenuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.tb-menu .mhd{font-size:10.5px;color:var(--fg3);padding:7px 10px 4px;letter-spacing:.4px;
  font-weight:700}
.tb-menu a{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;
  border-radius:var(--r-sm);color:var(--fg2);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.tb-menu a:hover{background:var(--bg3);color:var(--fg)}
.tb-menu a.on{background:var(--accent-soft);color:var(--fg)}
.tb-menu a .ic{width:19px;flex:0 0 auto;text-align:center;font-size:14px;line-height:1.35}
.tb-menu a .tx{min-width:0}
.tb-menu a .tx b{display:block;font-size:13px;font-weight:650;color:inherit;letter-spacing:-.2px}
/* ★ 이 한 줄이 이번 개편의 «직관성» 몫이다 — 전에는 title 툴팁에만 있었다. */
.tb-menu a .tx span{display:block;font-size:11.5px;color:var(--fg3);line-height:1.5;margin-top:2px}
.tb-menu hr{border:0;border-top:1px solid var(--line);margin:5px 6px}

/* 아이콘 전용 상단 버튼(기능 지도·물어보기) */
.tb-ic{width:33px;height:33px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:transparent;border:1px solid transparent;color:var(--fg2);font-size:14px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.tb-ic:hover{background:var(--bg3);color:var(--fg);border-color:var(--line)}
.tb-badges{display:flex;gap:6px;align-items:center}
.tb-sep{width:1px;height:20px;background:var(--line);margin:0 3px;flex:0 0 auto}

/* 키 힌트 알약 — 검색창 오른쪽 ⌘K */
.kbd{display:inline-flex;align-items:center;gap:2px;font-family:var(--font-num);
  font-size:10px;color:var(--fg3);background:var(--bg2);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:1px 5px;line-height:1.5}
.tbar .search .kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  pointer-events:none}

/* ── 검색 결과 드롭다운 ───────────────────────────────────────── */
.sd{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:var(--sh3);padding:5px;overflow:auto}
.sd-hd{font-size:10.5px;color:var(--fg3);padding:6px 9px 3px;letter-spacing:.4px;font-weight:700}
.sd-row{display:flex;gap:9px;align-items:center;padding:7px 9px;cursor:pointer;
  border-radius:var(--r-sm);color:var(--fg2)}
.sd-row:hover,.sd-row.sel{background:var(--bg3);color:var(--fg)}
.sd-row .ic{width:18px;text-align:center;flex:0 0 auto;font-size:13px}
.sd-empty{padding:12px 10px;color:var(--fg3);font-size:12px;text-align:center}

/* ── 구획 제목 — 카드 묶음 위에 붙는 작은 머리말 ───────────────── */
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--fg3)}

/* ── 표에 붙는 미니 막대(비율) ───────────────────────────────── */
.bar{height:6px;border-radius:99px;background:var(--bg3);overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--accent)}

/* ── 골격 로딩(내용이 오기 전 자리를 잡아 준다) ─────────────────
   ⚠ 이것을 «데이터 없음»으로 쓰지 말 것 — 이 저장소의 규율은 빈 칸에
   **사유를 적는 것**이고, 골격은 «오는 중»일 때만 쓴다. */
.sk{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 37%,var(--bg3) 63%);
  background-size:400% 100%;animation:skShine 1.4s ease infinite;border-radius:var(--r-xs)}
@keyframes skShine{from{background-position:100% 0}to{background-position:0 0}}

/* ══ 가격·지표 알람 (2026-08-31 · 사용자 요청) ═══════════════════════════
   ★ 마크업은 `app.js` 가 body 에 만든다(팩터 모달과 같은 규율 — 두 벌이 되면
     한쪽만 낡는다). 여기는 스타일만.
   ⚠ 색은 **기존 토큰만** 쓴다. `--k-card` 처럼 «정의된 적 없는 이름»을 또 만들면
     폴백이 없는 자리에서 선언이 통째로 무효가 된다(2026-08-29 에 6건 잡았다). */
#al-modal{position:fixed;inset:0;z-index:92;display:flex;align-items:center;
  justify-content:center;padding:18px}
#al-modal[hidden]{display:none}
#al-modal .al-back{position:absolute;inset:0;background:rgba(0,0,0,.62)}
#al-modal .al-panel{position:relative;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;width:min(920px,100%);max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 18px 60px rgba(0,0,0,.55)}
#al-modal .al-top{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
#al-modal .al-top b{font-size:14px}
#al-modal .al-body{padding:12px 14px;overflow:auto}

.al-sec{margin-bottom:14px}
.al-sec>h4{margin:0 0 7px;font-size:12px;color:var(--accent);
  display:flex;align-items:center;gap:7px}
.al-sec>h4::after{content:"";flex:1;height:1px;background:var(--line)}
.al-line{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.al-line select,.al-line input[type=number],.al-line input[type=text]{
  background:var(--bg3);color:var(--fg);border:1px solid var(--line2);
  border-radius:6px;padding:4px 7px;font-size:12px}
.al-line input[type=number]{width:82px}
.al-p{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--fg3)}
.al-p input{width:66px}
.al-prev{margin-top:7px;padding:7px 9px;border-radius:8px;background:var(--bg3);
  border:1px solid var(--line);font-size:13px}

/* ★★★ 「현재가냐 종가냐」 — 이 기능 요청의 핵심이라 가장 크게 둔다. */
.al-basis{display:flex;gap:8px;flex-wrap:wrap}
.al-basis-o{flex:1 1 260px;display:flex;gap:8px;align-items:flex-start;padding:9px 10px;
  border-radius:9px;border:1px solid var(--line);background:var(--bg3);cursor:pointer}
.al-basis-o:hover{border-color:var(--accent)}
.al-basis-o.on{border-color:var(--accent);background:rgba(109,124,247,.09)}
.al-basis-o input{margin-top:3px;flex:none}
.al-basis-o b{font-size:12.5px}
.al-sub{font-size:11px;color:var(--fg3);line-height:1.55;margin-top:2px}

.al-tg{display:flex;gap:6px;flex-wrap:wrap}
.al-tg label{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  padding:4px 8px;border:1px solid var(--line);border-radius:14px;background:var(--bg3);cursor:pointer}

/* 목록 */
.al-row{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg3);margin-bottom:6px}
.al-row.off{opacity:.6}
.al-main{flex:1;min-width:0}
.al-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px}
.al-cond{font-size:13px;color:var(--fg);margin:2px 0}
.al-meta,.al-state,.al-check{font-size:11px;color:var(--fg3);line-height:1.55}
.al-check{margin-top:3px;opacity:.85}
.al-dim{color:var(--fg3)}
.al-fired{color:var(--warn)}
.al-vals{margin-left:8px}
.al-act{display:flex;flex-direction:column;gap:4px;flex:none}
.al-empty{padding:14px;text-align:center;color:var(--fg3);font-size:12px}

/* 상태 알림 — ⚠ 「평가가 안 돌고 있다」와 「조건이 아직 아니다」는 화면에서 둘 다
   «조용함»으로 보인다. 그래서 전자를 눈에 띄게 적는다. */
.al-run{font-size:11px;color:var(--fg3);margin-bottom:7px}
.al-warn{font-size:11.5px;line-height:1.6;color:#fcd34d;background:rgba(251,191,36,.10);
  border-left:3px solid #fcd34d;border-radius:0 7px 7px 0;padding:8px 10px;margin-bottom:8px}
.al-info,.al-fire{font-size:12px;line-height:1.7;padding:9px 11px;border-radius:8px;
  border:1px solid var(--line);background:var(--bg3);margin-top:8px}
.al-fire{border-color:var(--warn)}
.al-msg{margin-top:7px}
.al-msg pre{margin:3px 0 0;padding:8px 10px;background:var(--bg);border:1px solid var(--line);
  border-radius:7px;font-size:11px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
@media(max-width:560px){#al-modal{padding:8px}.al-row{flex-direction:column}
  .al-act{flex-direction:row;flex-wrap:wrap}}

/* 「이 조합은 이렇게 동작합니다」 — 2026-08-31 사용자 질문에서 나온 자리.
   연산자(무엇을)와 재알림(얼마나 자주)이 **따로 있다는 것**이 화면에 안 보여서
   「조건이 성립할 때마다」가 「조건이 (새로) 성립할 때마다」로 읽혔다. */
.al-hint{font-size:11.5px;line-height:1.65;color:var(--fg3);margin-top:7px;
  padding:7px 9px;border-left:3px solid var(--line2);background:var(--bg3);border-radius:0 7px 7px 0}
.al-hint b{color:var(--fg2)}
.al-hint-w{font-size:11.5px;line-height:1.65;color:#fcd34d;margin-top:5px;
  padding:7px 9px;border-left:3px solid #fcd34d;background:rgba(251,191,36,.10);border-radius:0 7px 7px 0}

/* 조건 종류(지표 값 / 매매신호) — 2026-08-31 사용자 요청 */
.al-kinds{display:flex;gap:8px;flex-wrap:wrap}
.al-kind{flex:1 1 280px;display:flex;gap:8px;align-items:center;padding:8px 10px;
  border-radius:9px;border:1px solid var(--line);background:var(--bg3);cursor:pointer;font-size:12px}
.al-kind:hover{border-color:var(--accent)}
.al-kind.on{border-color:var(--accent);background:rgba(109,124,247,.09)}
.al-kind input{flex:none}

/* 조건 미리보기 그래프 (2026-08-31 · 사용자 요청)
   ⚠ 아래 `.al-pv-note` 는 «백테스트가 아니다»를 적는 자리다 — 스타일을 지워
     안 보이게 만들지 말 것(그림만 남으면 성과표로 읽힌다). */
.al-pv{margin-top:8px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg3)}
.al-pv-h{font-size:12px;color:var(--fg);margin-bottom:5px}
.al-pv-svg{width:100%;height:auto;display:block;border-radius:6px;background:var(--bg)}
.al-pv-lg{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--fg3);margin-top:6px}
.al-pv-lg span{display:inline-flex;align-items:center;gap:4px}
.al-sw{width:14px;height:0;border-top:2px solid var(--accent);flex:none;display:inline-block}
.al-sw.al-dash{border-top-style:dashed;border-color:var(--fg3)}
.al-sw.al-band{height:9px;border:0;background:var(--accent);opacity:.35;border-radius:2px}
.al-sw.al-dot{height:7px;width:7px;border:0;border-radius:50%;background:var(--warn)}
.al-pv-note{font-size:10.5px;line-height:1.55;color:#fcd34d;margin-top:6px;
  border-left:3px solid #fcd34d;padding-left:7px}
.al-pv-note b{color:#fde68a}
.al-pv-btn{margin-top:4px}

/* ── 신호 비교 모달 (2026-09-07 신설) ────────────────────────────────────
   `#al-modal`과 같은 뼈대(위치·배경·패널)를 그대로 옮겼다 — 모달 두 벌을 다르게
   짜면 한쪽만 나중에 고쳐진다. 마크업은 `app.js`가 body에 만든다(위 al-modal
   규율과 동일). ⚠ 색은 기존 토큰만(2026-08-29 CSS 미정의 토큰 6건 사고 참고). */
#sc-modal{position:fixed;inset:0;z-index:92;display:flex;align-items:center;
  justify-content:center;padding:18px}
#sc-modal[hidden]{display:none}
#sc-modal .sc-back{position:absolute;inset:0;background:rgba(0,0,0,.62)}
#sc-modal .sc-panel{position:relative;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;width:min(980px,100%);max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 18px 60px rgba(0,0,0,.55)}
#sc-modal .sc-top{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
#sc-modal .sc-top b{font-size:14px}
#sc-modal .sc-body{padding:12px 14px;overflow:auto}
.sc-modes{display:flex;flex-wrap:wrap;gap:2px 14px;padding:8px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg3);margin-bottom:8px;max-height:160px;overflow:auto}
.sc-opts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px;
  font-size:11.5px;color:var(--fg3)}
.sc-opts input[type=number]{width:70px;background:var(--bg3);color:var(--fg);
  border:1px solid var(--line2);border-radius:6px;padding:3px 6px;font-size:12px}
.sc-run{margin-bottom:10px}
.sc-out table.tbl th,.sc-out table.tbl td{font-size:11.5px;padding:6px 8px}