/* §6 컬러 — 2026-09-16 곽팀장: "검정은 시인성이 나쁘다. 회색/파란색 톤으로."
   → 다크 터미널에서 **라이트 계기판**으로 전환. 규율은 그대로:
     한 화면에 강조색 하나(파랑) · 구분은 선/간격/밀도로 · 상태에만 색을 쓴다. */
:root{
  /* 곽팀장 2026-09-16: "하얀색은 쓰지 말 것" → 순백 제거, 회청색 3단 계조로만 구분한다.
     가장 밝은 면이 #E9EDF3 (흰색 아님), 가장 어두운 면이 바탕 #D3DAE4. */
  --bg:#CDD5E0;            /* 페이지 바탕 — 회청 */
  --surface:#EBEFF5;       /* 카드 */
  --surface2:#E0E6EF;      /* 카드 안쪽 줄·스트립 */
  --line:#AAB7C8; --line2:#8494A9;
  --tx:#0E1621; --tx2:#3A4759; --tx3:#5F6E80;
  --acc:#1557C0;           /* ACCENT — 파랑. 한 화면에 이것 하나만(§6) */
  --accbg:#D3E1FA;         /* 강조 배경(옅은 파랑) */
  --accln:#A9C7F8;
  /* 상태색 — 배경/테두리 짝을 토큰으로 둔다(하드코딩 hex 금지) */
  --warn:#8A5600; --warnbg:#F4E7C8; --warnln:#E7C787;
  --crit:#B3201F; --critbg:#F4DADA; --critln:#F0B3B3;
  --okbg:#D9ECDF; --okln:#A9D8B6;
  --wait:#8A96A6;
  --up:#D42B2B; --dn:#1565C0;          /* 상승 적색 / 하락 청색 (국내 관행) */
  --barbg:#C6CFDB; --barfill:#AFC8EE;  /* 막대 바탕·채움 */
  --code:#DCE2EA;                      /* 코드·입력 바탕 */
  /* §9 타이포 스케일 — "읽는 UI"가 아니라 "보는 UI". 11px 미만 금지. */
  --fs-hero:40px;  --lh-hero:48px;
  --fs-sec:28px;   --lh-sec:34px;
  --fs-st:20px;    --lh-st:26px;
  --fs-bs:15px; --fs-b:14px; --fs-meta:12px; --fs-micro:11px;
  --rad:3px;
  /* 숫자·코드도 **본문과 같은 서체**로 통일한다(곽팀장 2026-09-16 윈도우 지적).
     자릿수 정렬은 tabular-nums 로 잡는다. 진짜 코드 블록만 --codefont 를 쓴다. */
  --mono:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","Segoe UI",sans-serif;
  --codefont:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --ui:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕","Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--tx);font-family:var(--ui);
  font-size:14px;line-height:1.5;letter-spacing:-.003em;font-weight:500;
  -webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.dim{color:var(--tx2)} .dim3{color:var(--tx3)}
.note{color:var(--tx2)}
.up{color:var(--up)} .dn{color:var(--dn)}
.acc{color:var(--acc)} .warn{color:var(--warn)} .crit{color:var(--crit)}
hr{border:0;border-top:1px solid var(--line);margin:10px 0}

/* ── TOP SIGNAL BAR (§4.2) ─────────────────────────────── */
#top{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.tbar{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none}
.tbar::-webkit-scrollbar{display:none}
.tcell{padding:4px 12px;border-right:1px solid var(--line);white-space:nowrap;min-width:max-content}
.tcell .k{font-size:11px;letter-spacing:.04em;color:var(--tx3);display:block;font-weight:600}
.tcell .v{font-size:var(--fs-st);line-height:var(--lh-st);font-family:var(--ui);font-variant-numeric:tabular-nums;font-weight:700;color:var(--tx)}
.tcell .v small{font-size:12px;font-weight:400;color:var(--tx2);margin-left:4px}
.tcell.brand{color:var(--acc);font-weight:700;letter-spacing:.16em;font-size:var(--fs-bs);
  display:flex;align-items:center;gap:8px}
.tcell.grow{flex:1;border-right:0}
.lights{display:flex;gap:6px;align-items:center;padding:0 10px}
.light{display:flex;align-items:center;gap:4px;font-size:11px;letter-spacing:.08em;color:var(--tx3)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--wait);display:inline-block}
.dot.ok{background:var(--acc)} .dot.warn{background:var(--warn)} .dot.off{background:var(--line2)}
.dot.crit{background:var(--crit)}
.dot.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.modechip{border:1px solid var(--line2);border-radius:var(--rad);padding:2px 7px;font-size:11px;
  letter-spacing:.1em;color:var(--tx2);background:var(--surface)}
.modechip.LIVE{color:var(--crit);border-color:var(--crit)}
.modechip.PAPER{color:var(--acc);border-color:var(--accln)}
.modechip.SIMULATION,.modechip.REPLAY{color:var(--warn);border-color:var(--warnln)}

/* ── 레이아웃: 좌 rail + 본문 ───────────────────────────── */
#shell{display:flex;min-height:calc(100vh - 62px)}
#rail{width:112px;flex:0 0 112px;border-right:1px solid var(--line);background:var(--bg);
  position:sticky;top:62px;height:calc(100vh - 62px);padding-top:6px}
.navi{display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;
  padding:9px 12px;font-size:11px;letter-spacing:.12em;color:var(--tx3);cursor:pointer}
.navi:hover{color:var(--tx)}
.navi.on{color:var(--acc);border-left-color:var(--acc);background:var(--accbg);border-left-width:3px}
.navi .sub{display:block;font-size:11px;letter-spacing:.02em;color:var(--tx3);margin-top:1px}
#main{flex:1;min-width:0;padding:12px 14px 40px}

/* ── 섹션 ───────────────────────────────────────────────── */
.sec{border:1px solid var(--line2);background:var(--surface);border-radius:var(--rad);margin-bottom:10px;
  box-shadow:0 1px 2px rgba(14,22,33,.07)}
/* 제목(h3) = 진한 글자 + 바탕 톤 + 굵은 밑선 · 소제목(.r) = 회색 작은 글자 · 본문 = 기본색
   세 층이 색·크기·배경으로 동시에 갈리게 한다(곽팀장 "지금은 다 비슷해서 흐리멍텅") */
.sec>h3{margin:0;padding:7px 12px;font-size:13px;letter-spacing:-.01em;color:var(--tx);
  background:var(--surface2);border-bottom:2px solid var(--line2);font-weight:700;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.sec>h3 .r{color:var(--tx3);letter-spacing:0;font-weight:500;font-size:var(--fs-meta)}
.secbody{padding:9px 12px;color:var(--tx)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px}

/* ── DECISION SPINE (§5) ───────────────────────────────── */
.spine{padding:4px 4px 2px}
.snode{display:grid;grid-template-columns:132px 1fr;gap:10px;align-items:start;position:relative;
  padding:0 0 2px 0}
.snode .lbl{display:flex;align-items:center;gap:8px;padding:5px 0 5px 10px;position:relative}
.snode .lbl .nm{font-size:12px;letter-spacing:.1em;color:var(--tx2)}
.snode .lbl .n{font-family:var(--mono);font-size:15px;font-weight:700}
.snode .lbl:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line2)}
.snode.has .lbl .nm{color:var(--tx)}
.snode.has .lbl:before{background:var(--acc)}
.snode .strips{display:flex;flex-direction:column;gap:2px;padding:2px 0}
.snode .empty{color:var(--tx3);font-size:11px;padding:5px 0}
.spinehead{display:flex;align-items:baseline;gap:10px;padding:4px 10px 10px}
.spinehead .big{font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:700;
  font-family:var(--mono);letter-spacing:-.02em}
.spinehead .lab{font-size:14px;letter-spacing:.12em;color:var(--tx2)}

/* ── 종목 스트립 (§8) ───────────────────────────────────── */
.strip{display:grid;grid-template-columns:86px 1fr 46px 92px;gap:8px;align-items:center;
  border:1px solid var(--line);border-left:2px solid var(--line2);background:var(--surface2);
  padding:4px 8px;border-radius:2px;cursor:pointer;font-size:14px}
.strip:hover{border-color:var(--acc);background:var(--accbg)}
.strip .sym{font-family:var(--mono);font-weight:700;font-size:var(--fs-bs)}
.strip .nm{color:var(--tx2);font-size:var(--fs-meta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip .sc{font-family:var(--mono);font-size:var(--fs-bs);font-weight:600;text-align:right;color:var(--tx)}
.strip .st{font-size:var(--fs-meta);letter-spacing:.06em;text-align:right;color:var(--tx3)}
.strip.ENTRY_READY{border-left-color:var(--acc)} .strip.ENTRY_READY .st{color:var(--acc)}
.strip.MANAGE,.strip.ENTERED{border-left-color:#2F7FB5} .strip.EXIT{border-left-color:var(--warn)}
.strip.REJECTED{border-left-color:var(--line2);opacity:.62}
.strip.WATCH{border-left-color:var(--wait)}

/* ── LIVE FEED (§6) ─────────────────────────────────────── */
.feed{max-height:430px;overflow:auto;font-size:var(--fs-b)}
.fline{display:grid;grid-template-columns:58px 82px 1fr;gap:10px;padding:4px 12px;
  border-bottom:1px solid var(--line)}
.fline:hover{background:var(--surface2)}
.fline .t{font-family:var(--mono);color:var(--tx3)}
.fline .sc{font-size:var(--fs-micro);letter-spacing:.08em;color:var(--tx3);padding-top:1px}
.fline .m{color:var(--tx)}
.fline .m .sub{color:var(--tx2);font-size:var(--fs-meta)}
.fline.MARKET .sc{color:#4B6EA9} .fline.SYMBOL .sc{color:var(--acc)}
.fline.HUMAN .sc{color:var(--crit)} .fline.RISK .sc{color:var(--warn)}
.fline.PROMPT .sc{color:#7E57C2} .fline.STRATEGY .sc{color:#2E8B85}
.fline.new{animation:flash 1.4s ease-out}
@keyframes flash{from{background:var(--accbg)}to{background:transparent}}

/* ── 계기·미터 ─────────────────────────────────────────── */
.meter{height:3px;background:var(--barbg);border-radius:2px;overflow:hidden}
.meter>i{display:block;height:100%;background:var(--acc)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:14px}
.kv .k{color:var(--tx2)}
table.t{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--tx)}
table.t th{text-align:left;font-weight:700;color:var(--tx2);font-size:11px;letter-spacing:.02em;
  border-bottom:1px solid var(--line);padding:4px 6px}
table.t td{border-bottom:1px solid var(--line);padding:4px 6px;vertical-align:top}
table.t td.n,table.t th.n{text-align:right;font-family:var(--mono)}
table.t tr:hover td{background:var(--surface2)}
.tape{display:flex;gap:0;overflow-x:auto;border:1px solid var(--line);border-radius:2px}
.tape .ti{padding:5px 10px;border-right:1px solid var(--line);white-space:nowrap;font-size:11px}
.tape .ti b{font-family:var(--mono);font-weight:600;margin-left:6px}
.chk{display:flex;align-items:center;gap:7px;padding:2px 0;font-size:12px}
.chk .b{width:13px;height:13px;border:1px solid var(--line2);border-radius:2px;flex:0 0 13px;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--bg)}
.chk.pass .b{background:var(--acc);border-color:var(--acc)}
.chk.fail .b{border-color:var(--crit);color:var(--crit)}
.chk.na .b{border-style:dashed}
.chk .need{color:var(--tx3);font-size:12px;margin-left:auto;font-family:var(--mono)}
.funnel .fr{display:grid;grid-template-columns:96px 1fr 58px;gap:8px;align-items:center;padding:2px 0;
  font-size:12px}
.funnel .bar{height:9px;background:var(--barbg);position:relative;border-radius:1px}
.funnel .bar>i{display:block;height:100%;background:var(--barfill);border-right:1px solid var(--acc)}
.funnel .drop{color:var(--crit);font-size:11px;font-family:var(--mono);text-align:right}
.badge{display:inline-block;border:1px solid var(--line2);border-radius:2px;padding:0 5px;
  font-size:11px;letter-spacing:.06em;color:var(--tx2)}
.badge.ok{color:var(--acc);border-color:var(--accln)}
.badge.warn{color:var(--warn);border-color:var(--warnln)}
.badge.crit{color:var(--crit);border-color:var(--critln)}
.badge.off{color:var(--tx3)}

/* ── 버튼 ───────────────────────────────────────────────── */
.btn{background:var(--surface2);border:1px solid var(--line2);color:var(--tx);border-radius:2px;
  min-height:36px;padding:0 14px;font-size:var(--fs-meta);cursor:pointer;letter-spacing:.04em}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.pri{border-color:var(--accln);color:var(--acc)}
.btn.dan{border-color:var(--critln);color:var(--crit)}
.btn.on{background:var(--accbg);border-color:var(--acc);color:var(--acc)}
.btns{display:flex;flex-wrap:wrap;gap:6px}
input.f,select.f,textarea.f{background:var(--code);border:1px solid var(--line2);color:var(--tx);
  border-radius:2px;padding:4px 7px;font-size:12px;font-family:var(--mono)}
textarea.f{width:100%;font-family:var(--mono);min-height:120px}

/* ── Detail Canvas(우측 슬라이드) ──────────────────────── */
#canvas{position:fixed;top:0;right:0;width:min(460px,94vw);height:100vh;background:var(--surface);
  border-left:1px solid var(--line2);z-index:60;transform:translateX(102%);transition:transform .22s ease;
  overflow:auto;padding:0 0 40px}
#canvas.open{transform:translateX(0)}
#canvas .ch{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--line);
  padding:10px 12px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
#canvas .cb{padding:10px 12px}
#canvas h4{margin:14px 0 5px;font-size:11px;letter-spacing:.14em;color:var(--tx3);font-weight:600}
.tl{border-left:1px solid var(--line2);margin-left:5px;padding-left:12px}
.tl .ev{position:relative;padding:3px 0;font-size:12px}
.tl .ev:before{content:"";position:absolute;left:-16.5px;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--line2)}
.tl .ev.hi:before{background:var(--acc)}
.pill{font-size:28px;font-weight:700;letter-spacing:-.01em}
.note{font-size:12px;color:var(--tx3);margin-top:6px;line-height:1.5}
.scroll{max-height:340px;overflow:auto}
pre.src{background:var(--code);font-family:var(--codefont);border:1px solid var(--line);border-radius:2px;padding:9px;
  font-size:12px;color:var(--tx);overflow:auto;max-height:420px;white-space:pre-wrap}
.err{color:var(--crit);font-size:12px}
.fold{cursor:pointer;color:var(--tx3);font-size:12px}
@media(max-width:820px){
  #rail{width:62px;flex:0 0 62px}
  .navi{padding:9px 3px;font-size:11px;letter-spacing:0;text-align:center;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .navi .sub{display:none}
  .cols,.grid2,.grid3{grid-template-columns:1fr}
  .snode{grid-template-columns:96px 1fr}
  #main{padding:10px 8px 40px}
  .strip{grid-template-columns:70px 1fr 38px}
  .strip .st{display:none}
}

/* ═══════════ ASSETS — Asset Flow & Trade Ledger (Add-on §70~§73)
   금융 터미널 톤 유지: 카드형 KPI·파이차트·과도한 적녹 금지. 선·레일·테이프·막대만 쓴다. */
.abar{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:0;
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.abar .ac{padding:7px 10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.abar .ac .k{display:block;font-size:11px;letter-spacing:.11em;color:var(--tx3)}
.abar .ac .v{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:var(--fs-st);line-height:var(--lh-st);font-weight:600;margin-top:2px;
  letter-spacing:-.01em;white-space:nowrap}
.abar .ac .ko{display:block;font-size:11px;color:var(--tx3);margin-top:1px}
.abar .ac.big .v{font-size:var(--fs-sec);line-height:var(--lh-sec);white-space:nowrap}

.eqsvg{width:100%;height:190px;display:block}
.eqsvg .eq{fill:none;stroke:var(--acc);stroke-width:1.4;vector-effect:non-scaling-stroke}
.eqsvg .bench{fill:none;stroke:var(--tx3);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.eqsvg .gl{stroke:var(--line2);stroke-width:1;vector-effect:non-scaling-stroke}
.eqsvg .gl.base{stroke-dasharray:2 4}
.eqax{display:flex;justify-content:space-between;font-size:11px;color:var(--tx3);padding:2px 0 0}
.ddwrap{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.ddlab{font-size:11px;letter-spacing:.11em;color:var(--tx3);display:flex;gap:8px;align-items:baseline}
.ddsvg{width:100%;height:54px;display:block}
.ddsvg .dd{fill:var(--critbg);stroke:var(--crit);stroke-width:.8;vector-effect:non-scaling-stroke}

table.led tr{cursor:pointer}
table.led tr:hover td{background:var(--accbg)}
.strip.opos{grid-template-columns:86px 1fr 62px 128px;cursor:pointer}

.cbar{display:grid;grid-template-columns:132px 1fr 92px 78px;gap:8px;align-items:center;
  padding:2.5px 0;font-size:12px}
.cbar .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)}
.cbar .tr{height:9px;background:var(--barbg);border-radius:1px;position:relative}
.cbar .tr>i{display:block;height:100%;border-radius:1px}
.cbar .tr>i.p{background:var(--barfill);border-right:1px solid var(--acc)}
.cbar .tr>i.m{background:var(--critbg);border-right:1px solid var(--crit)}
.cbar .vv{text-align:right;font-size:12px}
.cbar .nn{text-align:right;font-size:11px}

.chline{display:grid;grid-template-columns:78px 52px 1fr 92px 1.2fr;gap:8px;align-items:center;
  padding:3px 0;font-size:12px;border-bottom:1px solid var(--line)}
.chline:last-child{border-bottom:0}
.chline .dim3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp{flex:1}
.note.crit{color:var(--crit)}

@media (max-width:860px){
  .cols{grid-template-columns:1fr}
  .chline{grid-template-columns:70px 48px 1fr 84px;}
  .chline .dim3{display:none}
  .cbar{grid-template-columns:92px 1fr 78px 60px}
}
/* 원장 숫자는 줄바꿈 금지 — "-283/만" 으로 쪼개지면 금액을 잘못 읽는다 */
table.led td.n,table.led td.mono{white-space:nowrap}
table.led td:first-child{white-space:nowrap}

/* ═══════════ UI MASTER — 화면 골격 (1초 시장 / 2초 AI / 3초 보유 / 5초 다음행동)
   하드 규칙: MAX 6 TOP METRICS · MAX 8 FEED ROWS · MAX 4 TABLE COLUMNS
              MAX 2 CHARTS · MAX 1 ACCENT COLOR · ONE SCREEN ONE PURPOSE
   순서: STATE FIRST → ACTION SECOND → NEXT THIRD → WHY ON DEMAND → DETAIL LAST */
.tbar{height:56px}                          /* 56px Top Bar */
.tcell{display:flex;flex-direction:column;justify-content:center}

/* 레일: 영문 3글자(CMD) → 한글 라벨(상황판)로 바꾸면서 폭을 넓혔다.
   곽팀장 2026-09-16 "한글 용어로". 사양서 56px 는 영문 기준이라 한글에선 잘린다. */
#rail{width:72px;flex:0 0 72px}
.navi{padding:11px 2px;text-align:center;font-size:13px;letter-spacing:.02em;font-weight:600}
.navi .sub{display:none}                    /* 레일에 설명문을 두지 않는다 — title 로 뺐다 */

/* 64px Asset Rail — 자본 계열은 항상 바닥 고정 */
#arail{position:fixed;left:0;right:0;bottom:0;height:64px;z-index:45;
  background:var(--bg);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none}
#arail::-webkit-scrollbar{display:none}
#arail .arc{padding:0 22px;border-right:1px solid var(--line);min-width:max-content;
  display:flex;flex-direction:column;justify-content:center;height:100%}
#arail .arc .k{font-size:11px;letter-spacing:.04em;color:var(--tx3);font-weight:600}
#arail .arc .v{font-family:var(--ui);font-variant-numeric:tabular-nums;
  font-size:20px;font-weight:700;margin-top:2px;color:var(--tx)}

#main{padding:12px 32px 84px}               /* 32px Margin · 하단 Asset Rail 만큼 비운다 */
.cols{gap:24px}                             /* 24px Gutter */
#shell{min-height:calc(100vh - 56px)}
.strip{min-height:44px}                     /* 44px Row */
.feed{max-height:none}                      /* 8행으로 이미 잘라서 내려온다 */

/* 애니메이션 180~260ms */
.strip,.btn,.navi{transition:border-color .2s ease,background .2s ease,color .2s ease}

/* 모바일: 하단 레일은 유지하되 여백을 줄인다 */
@media (max-width:860px){
  #main{padding:10px 14px 78px}
  #arail .arc{padding:0 14px}
  #arail .arc .v{font-size:15px}
}
.snode .more{font-size:var(--fs-meta);color:var(--tx3);padding:5px 2px;cursor:pointer}
.snode .more:hover{color:var(--acc)}
.sec.grow>.idle,.snode .idle{font-size:var(--fs-meta);color:var(--tx3);padding:5px 12px;border-top:1px solid var(--line);
  cursor:pointer;letter-spacing:.04em}
.snode .idle:hover{color:var(--tx2)}
.fline1{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--tx2)}
.fline1 .fs b{color:var(--tx);font-weight:600;margin-right:3px}
.fline1 .ar{color:var(--tx3)}
/* NO TRADE 는 한 줄로 — 상태 먼저, 이유는 그 다음(STATE FIRST) */
.secbody.nt{display:flex;align-items:baseline;gap:12px;flex-wrap:nowrap;overflow:hidden;padding:2px 12px 6px}
.pill2{font-size:var(--fs-hero);line-height:var(--lh-hero);font-weight:700;letter-spacing:-.02em;
  white-space:nowrap}                       /* Hero — 화면에서 가장 큰 글자는 AI 의 행동 하나뿐 */
.ntact{font-size:var(--fs-st);color:var(--tx);white-space:nowrap}
.ntwhy{font-size:var(--fs-meta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* 피드 1행 = 1줄 */
.fline{align-items:baseline}
.fline .m{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec{margin-bottom:8px}
/* 1280×720 무스크롤 마감 */
#main{padding:10px 32px 72px}
.sec{margin-bottom:6px}
.spinehead{padding:0 12px 4px}
.spinehead .big{font-size:28px}
.snode{gap:8px}

/* §55 ALERT STRIP — Top Bar 아래 32px. Critical 1건 우선 · §42 KILL 은 실전에서만 */
#alert{height:32px;display:flex;align-items:center;gap:10px;padding:0 14px;
  border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.02em}
#alert.hide{display:none}
#alert.lv-crit{background:var(--critbg);color:var(--crit);border-bottom-color:var(--critln)}
#alert.lv-warn{background:var(--warnbg);color:var(--warn);border-bottom-color:var(--warnln)}
#alert .am{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#alert .amore{color:var(--tx3);font-family:var(--mono);flex:0 0 auto}
#alert .kill{margin-left:auto;background:var(--critbg);border:1px solid var(--crit);color:var(--crit);
  border-radius:2px;padding:2px 12px;font-size:11px;font-weight:700;letter-spacing:.12em;cursor:pointer}
/* Alert Strip(32px) 만큼 되찾는다 — 1280×720 무스크롤 유지 */
#main{padding:2px 32px 66px}     /* 32px Margin(§46) · 상단 여백은 글자에 양보한다 */
.sec{margin-bottom:4px}
#shell{min-height:calc(100vh - 88px)}
.fline1{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fline1 .fs{flex:0 0 auto}
/* 상단바 56 + Alert 32 + Asset Rail 64 = 152px 를 제외한 만큼만 차지한다 */
#shell{min-height:calc(100vh - 152px)}
/* 100vh 는 모바일 주소창·헤드리스에서 실제 뷰포트와 어긋난다 — dvh 로 고정 */
#shell{min-height:calc(100dvh - 152px)}
/* 셸 최소높이를 두지 않는다 — vh 계열은 환경마다 실뷰포트와 어긋나 스크롤을 만든다.
   하단 Asset Rail 이 fixed 라 빈 공간은 생기지 않는다. */
#shell{min-height:0}
#rail{align-self:stretch}
/* 옛 규칙 #rail{height:calc(100vh - 62px)} 가 셸 높이를 강제해 스크롤을 만들고 있었다.
   레일은 콘텐츠만큼만 차지하고 나머지는 flex 가 늘린다. */
#rail{height:auto;align-self:stretch;top:88px}

/* 좁은 화면에서 상단바 셀이 문서 자체를 가로로 밀고 있었다(390px 에서 277px 밀림).
   상단바는 자기 안에서만 스크롤하고, 문서는 절대 옆으로 밀리지 않는다(§45). */
html{overflow-x:hidden}
@media (max-width:860px){
  .tcell{padding:4px 10px}
  .lights{display:none}                     /* 부수 표시등은 좁은 화면에서 접는다 */
}

/* ═══════════ HOW — 사용법 · AI 루프 · 엔진 맵 (곽팀장 2026-09-16)
   "설명 화면"이라고 글자를 쏟지 않는다. 같은 규율: 선·간격·밀도로 읽히게 하고,
   색은 상태(진행/사람차례/중단)에만 쓴다. 강조색은 여전히 하나(--acc). */
.ghero{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:6px 12px 8px}
/* 히어로 한 단어의 색은 서버가 준 tone 클래스(acc/warn/crit/dim)가 정한다 */
.ghero .gword{font-size:var(--fs-hero);line-height:var(--lh-hero);font-weight:700;letter-spacing:-.02em;
  white-space:nowrap;color:var(--tx)}
.ghero .gword.acc{color:var(--acc)} .ghero .gword.warn{color:var(--warn)}
.ghero .gword.crit{color:var(--crit)} .ghero .gword.dim{color:var(--tx2)}
.ghero .gline{font-size:var(--fs-st);color:var(--tx);min-width:0}
.ghero .gchips{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.achip{border:1px solid var(--line2);border-radius:2px;padding:3px 9px;font-size:var(--fs-meta);
  color:var(--tx2);white-space:nowrap}
.achip.on{border-color:var(--accln);color:var(--acc)}
.achip.turn{border-color:var(--critln);color:var(--crit)}
.gwarn{border-top:1px solid var(--line);color:var(--warn);font-size:var(--fs-meta);padding:6px 12px}

/* ── 루프 트랙: 1→4 오른쪽으로, 8←5 왼쪽으로 꺾어 ⑧이 ①밑에 오게 한다(닫힌 고리) */
.loopwrap{padding:8px 12px 10px}
/* minmax(0,1fr) 이 아니면 nowrap 인 모델명이 칼럼 최소폭을 밀어 화면 밖으로 넘친다
   (html{overflow-x:hidden} 때문에 넘친 게 조용히 잘린다 — 실측으로만 발각된다) */
.lrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.stn{position:relative;border:1px solid var(--line);border-left-width:2px;background:var(--surface2);
  padding:7px 10px 8px;margin-right:16px}
.lrow.f .stn:after,.lrow.b .stn:after{content:"›";position:absolute;top:50%;transform:translateY(-50%);
  font-size:20px;color:var(--tx3);width:16px;text-align:center}
.lrow.f .stn:after{right:-16px}
.lrow.b .stn:after{content:"‹";left:-16px}
.lrow.b .stn{margin-right:0;margin-left:16px}
.lrow.f .stn:last-child:after,.lrow.b .stn:first-child:after{content:""}
.stn.code{border-left-color:var(--line2)}
.stn.ai{border-left-color:var(--acc)}
.stn.human{border-left-color:var(--crit)}
.stn.s-active{background:var(--accbg);border-color:var(--accln)}
.stn.s-off{opacity:.55}
.stn .sh{display:flex;align-items:baseline;gap:7px}
.stn .sh .no{font-family:var(--mono);font-size:var(--fs-micro);color:var(--tx3);
  border:1px solid var(--line2);border-radius:2px;padding:0 4px}
.stn .sh .nm{font-size:var(--fs-st);line-height:var(--lh-st);font-weight:700;letter-spacing:.04em}
.stn .sh .who{margin-left:auto;font-size:var(--fs-micro);letter-spacing:.1em;color:var(--tx3)}
.stn .sh .who.ai{color:var(--acc)} .stn .sh .who.human{color:var(--crit)}
.stn .sw{font-size:var(--fs-meta);color:var(--tx2);margin-top:3px;min-height:32px}
.stn .sm{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-micro);margin-top:3px}
.stn .sm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stn .sm span:last-child{flex:0 0 auto}
.stn .sst{display:flex;align-items:center;gap:6px;font-size:var(--fs-micro);margin-top:5px;
  border-top:1px solid var(--line);padding-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lturn{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:var(--fs-meta);color:var(--tx3)}
.lturn .rt{border:1px dashed var(--line2);border-radius:2px;padding:1px 8px}
.lturn .dn{margin-left:auto;color:var(--tx3)}

/* ── 쓰는 법 3동작 */
.ustep{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line)}
.ustep:last-of-type{border-bottom:0}
.ustep .un{font-family:var(--mono);font-size:var(--fs-sec);line-height:1;font-weight:700;color:var(--tx3);text-align:center}
.ustep .ub{font-size:var(--fs-b)}
.ustep .ub b{font-size:var(--fs-bs);margin-right:6px}
.ustep .uh{display:block;font-size:var(--fs-meta);margin-top:2px}

/* ── 엔진 맵 3층 */
.emap{display:flex;flex-direction:column;gap:6px}
.lyr{border:1px solid var(--line);border-left:2px solid var(--line2);padding:6px 10px 7px;background:var(--surface2)}
.lyr.mac{border-left-color:var(--acc);background:var(--accbg)}
.lyr .lh{display:flex;align-items:baseline;gap:8px}
.lyr .ln{font-size:var(--fs-bs);font-weight:700;letter-spacing:.04em}
.lyr .lk{font-size:var(--fs-micro);font-family:var(--mono);margin-left:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%}
.lyr .lhead{font-size:var(--fs-meta);color:var(--tx2);margin-top:1px}
.lyr .ldo{margin:3px 0 4px;padding-left:15px;font-size:var(--fs-micro);color:var(--tx3)}
.lyr .ldo li{margin:1px 0}
.erow{display:grid;grid-template-columns:22px minmax(0,1.25fr) minmax(0,1.4fr) 104px;gap:8px;
  align-items:center;border-top:1px solid var(--line);padding:4px 0;font-size:var(--fs-meta)}
.erow.off{opacity:.62}
.erow .rk{color:var(--acc)}
.erow .en{overflow:hidden}
.erow .en .ro{display:block;font-size:var(--fs-micro);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erow .mdl{font-size:var(--fs-bs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erow .mdl .src{display:block;font-size:var(--fs-micro);font-weight:400}
.erow .est{display:flex;align-items:center;gap:5px;font-size:var(--fs-micro);justify-content:flex-end;white-space:nowrap}
.enote{font-size:var(--fs-micro);padding:0 0 3px 30px}

/* ── FAQ */
.gcols{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
.gfaq{display:grid;grid-template-columns:1fr;gap:6px 18px}
.fq{border-left:1px solid var(--line2);padding:2px 0 4px 9px;font-size:var(--fs-meta)}
.fq>b{display:block;font-size:var(--fs-b);margin-bottom:1px}
.fq span{color:var(--tx2)}

@media (max-width:1100px){
  .lrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lrow.f .stn{margin-right:8px} .lrow.b .stn{margin-left:8px}
  .lrow.b .stn:after,.lrow.f .stn:after{content:""}
  .gfaq{grid-template-columns:1fr}
  .erow{grid-template-columns:20px minmax(0,1fr);row-gap:2px}
  .erow .mdl,.erow .est{grid-column:2}
  .erow .est{justify-content:flex-start}
}
@media (max-width:640px){
  .lrow{grid-template-columns:minmax(0,1fr)}
  .lrow.f .stn,.lrow.b .stn{margin:0 0 4px}
  .ghero .gword{font-size:var(--fs-sec);line-height:var(--lh-sec)}
  .ghero .gchips{margin-left:0}
  .stn .sw{min-height:0}
}

/* 실주문 주문서 — 위험한 화면이니 시각적으로 구분한다(적색 좌측선) */
.ordrow{align-items:center}
.ordrow input.f,.ordrow select.f{height:34px}
.sec:has(#ord-lv){border-left:2px solid var(--crit)}

/* ═══════════ 상황판 세로 채움 (곽팀장 2026-09-16 "PC 화면은 아래 간격도 최대한 사용")
   규칙은 그대로 — 무스크롤은 유지하되, 남는 세로를 피드·척추가 나눠 먹는다.
   (vh 로 높이를 강제하지 않는다. flex 로 늘린다 — 09/16 사고 재발 방지) */
#shell{align-items:stretch}
#main{display:flex;flex-direction:column;min-height:0}
#main>.cols{flex:1 1 auto;min-height:0;align-items:stretch}
#main>.cols>div{display:flex;flex-direction:column;min-height:0}
.sec.grow{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
/* 머리말·버튼줄은 제 높이를 지키고, **목록만** 남는 높이를 먹는다.
   (전부 flex:1 로 두면 버튼줄이 눌려 잘린다 — 실측으로 잡음) */
.sec.grow>*{flex:0 0 auto}
.sec.grow>.feed,.sec.grow>.spine{flex:1 1 auto;overflow:auto;min-height:0}
/* 세로가 남으면 줄 간격을 조금 키워 빈 칸이 아니라 '여유'로 보이게 */
@media (min-height:760px){
  .strip{min-height:48px}
  .fline{padding:6px 12px}
  .snode .strips{gap:4px}
}

/* PC(≥1000px)에서는 **화면 한 판**으로 고정한다 — 문서가 늘어나는 대신 내부가 늘어난다.
   body 를 세로 flex 로 만들어 상단바·경고띠·자산레일 높이를 자동 반영한다(vh 산수 금지).
   모바일은 기존 흐름 그대로(자산레일은 fixed). */
@media (min-width:1000px){
  body.fixed-view{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  body.fixed-view #top{flex:0 0 auto}
  body.fixed-view #shell{flex:1 1 auto;min-height:0}
  body.fixed-view #main{overflow:hidden;padding-bottom:8px}
  body.fixed-view #rail{position:static;height:auto}
  body.fixed-view #arail{position:static;flex:0 0 64px;width:100%}
  body.fixed-view .sec.grow>.feed,body.fixed-view .sec.grow>.spine{overflow:auto}
}

.sec>.idle{font-size:var(--fs-meta);color:var(--tx3);padding:6px 12px;border-top:1px solid var(--line);cursor:pointer}
.sec>.idle:hover{color:var(--tx2)}

/* 사용법 화면 QC — 카드 밖으로 밀려나던 것들 */
.stn{overflow:hidden}
.stn .sw{overflow-wrap:anywhere}
.erow .mdl{white-space:normal;overflow-wrap:anywhere}
.erow .en .ro{white-space:normal}

/* 가로 넘침 방지 — 그리드 칸·테이프가 카드를 밀어 카드 테두리가 화면 밖으로 나가던 문제
   (1366 폭 MACRO 카드에서 실측). 칸은 0까지 줄어들 수 있어야 한다. */
.grid2>*,.grid3>*,.cols>*{min-width:0}
.tape{min-width:0;max-width:100%}
.sec{min-width:0}

/* 상단 오른쪽 상태등: 자리가 남는데 세로로 쌓여 있었다(.tcell 의 column 상속) → 가로 한 줄 */
.tcell.lights{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.light{white-space:nowrap}

/* ═══════════════ 모바일 최적화 (곽팀장 2026-09-16 "모바일 최적화 UI 적용")
   원칙: 엄지로 닿는 곳에 이동수단을, 눈으로 보는 곳에 상태를.
     · 좌측 레일(마우스용) → **하단 5탭**(§44·81) + '더보기' 바텀시트
     · 상세 캔버스 → 화면 아래에서 올라오는 **시트**
     · 표는 카드 안에서 가로 스크롤(문서를 옆으로 밀지 않는다)
     · 터치 타겟 44px 이상 */
#tabs{display:none}
#sheet{display:none}

@media (max-width:860px){
  /* 이동 = 하단 탭. 레일은 숨긴다 */
  #rail{display:none}
  #tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;
    z-index:55;height:58px;background:var(--surface);border-top:1px solid var(--line2);
    padding-bottom:env(safe-area-inset-bottom)}
  .tab{background:none;border:0;border-top:3px solid transparent;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:1px;min-height:44px;cursor:pointer;padding:0 2px}
  .tab b{font-size:13px;font-weight:700;color:var(--tx2)}
  .tab i{font-style:normal;font-size:10px;color:var(--tx3);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:100%}
  .tab.on{border-top-color:var(--acc);background:var(--accbg)}
  .tab.on b{color:var(--acc)}

  /* 자산 레일은 탭 위에 얇게 */
  #arail{bottom:58px;height:50px;border-top:1px solid var(--line)}
  #arail .arc{padding:0 12px}
  #arail .arc .v{font-size:16px}
  #main{padding:6px 12px calc(120px + env(safe-area-inset-bottom))}

  /* '더보기' 바텀시트 */
  #sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);
    border-top:1px solid var(--line2);border-radius:10px 10px 0 0;transform:translateY(102%);
    transition:transform .22s ease;box-shadow:0 -6px 20px rgba(14,22,33,.22);
    padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  #sheet.open{transform:translateY(0)}
  #sheet .sh{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
    font-size:14px;font-weight:700;border-bottom:1px solid var(--line)}
  #sheet .sb{padding:6px 10px 10px}
  .mrow{display:block;width:100%;text-align:left;background:var(--surface2);border:1px solid var(--line);
    border-radius:var(--rad);padding:11px 12px;margin:6px 0;min-height:52px;cursor:pointer}
  .mrow b{display:block;font-size:15px;font-weight:700;color:var(--tx)}
  .mrow span{font-size:12px;color:var(--tx2)}

  /* 상세는 아래에서 올라오는 시트로(옆에서 밀고 들어오면 좁은 화면에서 답답하다) */
  #canvas{width:100%;height:88dvh;top:auto;bottom:0;border-left:0;border-top:1px solid var(--line2);
    border-radius:10px 10px 0 0;transform:translateY(102%)}
  #canvas.open{transform:translateY(0)}
  #canvas .cb{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  /* 표는 카드 안에서만 옆으로 — 문서 자체는 절대 밀리지 않는다 */
  .secbody{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.t{min-width:460px}
  .kv{grid-template-columns:auto 1fr}

  /* 터치 타겟·가독성 */
  .btn{min-height:44px;padding:0 14px;font-size:13px}
  .strip{min-height:52px}
  .tcell{padding:4px 12px}
  .tbar{height:52px}
  .sec>h3{font-size:13px;padding:8px 12px}
  .ghero .gword{font-size:26px;line-height:32px}
  .ustep{grid-template-columns:28px 1fr;row-gap:6px}
  .ustep .btn{grid-column:2}
}
@media (max-width:420px){
  #main{padding:6px 10px calc(118px + env(safe-area-inset-bottom))}
  .tab i{display:none}
  .tab b{font-size:14px}
  .abar{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 모바일 상단바: 가로 스크롤이라 뒤쪽 칸(안전장치·다음 일정)을 못 봤다 →
   **2줄 그리드**로 접는다. 작은 화면에서는 부수 지표(실현손익·다음 일정)를 숨긴다.
   (UI MASTER MAX 6 은 PC 기준 — 모바일은 4칸이면 '1초 시장 / 2초 AI'가 성립한다) */
@media (max-width:860px){
  .tbar{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);height:auto;overflow:visible}
  .tcell{border-bottom:1px solid var(--line);padding:5px 10px;min-width:0}
  .tcell.brand{grid-column:1;grid-row:1;border-bottom:1px solid var(--line)}
  .tcell .v{font-size:17px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tcell .v small{font-size:11px}
  .tcell.c-ev{grid-column:span 2}
  .tcell.lights{display:none}
}
@media (max-width:620px){
  /* 부수 지표는 숨긴다 — 상단 3줄은 너무 무겁다(실측 202px). 2줄 = 시장·AI / 보유·안전장치.
     실현손익은 '자산', 다음 일정은 '상황판' 본문에서 본다. */
  .tcell.c-pnl,.tcell.c-ev{display:none}
  .tcell{padding:4px 10px}
  .tcell .k{font-size:10.5px}
  .tcell .v{font-size:16px;line-height:20px}
  .tcell.brand{font-size:13px;gap:6px}
}

/* ── 🔥 CATALYST — 촉매–확인 (곽팀장 2026-09-17) ───────────────────────────
   색은 **등급**이 아니라 '지금 무엇을 하라는가'다: 점화=행동(악센트) · 소멸=경고(적)
   · 관찰=대기(중립). MAX 1 ACCENT 규칙을 지키려 점화만 악센트를 쓴다. */
.cathero{display:flex;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:2px;
  margin-bottom:8px;flex-wrap:wrap}
.cathero .cx{padding:6px 14px;border-right:1px solid var(--line);min-width:118px}
.cathero .cx b{display:block;font-size:var(--fs-sec);line-height:var(--lh-sec);font-weight:700;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.cathero .cx i{font-style:normal;font-size:var(--fs-micro);letter-spacing:.06em;color:var(--tx3)}
.cathero .cx.ign b{color:var(--acc)} .cathero .cx.fad b{color:var(--crit)}
.cathero .cx.wat b{color:var(--warn)} .cathero .cx.non b{color:var(--tx2)}
.cathero .cbtns{display:flex;align-items:center;gap:6px;padding:0 10px;margin-left:auto}

.gchip{display:inline-block;border:1px solid var(--line2);border-radius:2px;padding:1px 7px;
  font-size:var(--fs-micro);letter-spacing:.08em;font-weight:700;color:var(--tx2)}
.gchip.ign{color:var(--acc);border-color:var(--acc);background:var(--accbg)}
.gchip.fad{color:var(--crit);border-color:var(--critln);background:var(--critbg)}
.gchip.wat{color:var(--warn);border-color:var(--warnln);background:var(--warnbg)}

.crow{display:grid;grid-template-columns:minmax(0,180px) 54px 42px 128px minmax(0,190px) minmax(0,1fr);
  gap:10px;align-items:center;padding:5px 8px;border:1px solid var(--line);border-left-width:3px;
  border-left-color:var(--line2);border-radius:2px;margin-bottom:3px;cursor:pointer;font-size:var(--fs-b)}
.crow:hover{border-color:var(--acc);background:var(--accbg)}
.crow.ign{border-left-color:var(--acc)} .crow.fad{border-left-color:var(--crit)}
.crow.wat{border-left-color:var(--warn)}
.crow .sym{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .sym .hold{margin-left:6px;font-size:var(--fs-micro);font-weight:600;color:var(--tx3);
  border:1px solid var(--line2);border-radius:2px;padding:0 4px}
.crow .sc{text-align:right;font-weight:700;font-size:var(--fs-bs)}
.crow .fac,.crow .rf{font-size:var(--fs-meta);color:var(--tx2);white-space:nowrap}
.crow .rf b{font-family:var(--mono)}
.crow .wy{font-size:var(--fs-meta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chh{margin:12px 0 5px;font-size:var(--fs-meta);letter-spacing:.1em;color:var(--tx2);font-weight:700}

/* 좁은 화면 — 한 줄에 다 못 넣는다. 종목·등급·점수만 남기고 나머지는 접는다(잘라 숨기지 않는다) */
@media (max-width:1000px){
  .crow{grid-template-columns:minmax(0,1fr) 54px 42px;row-gap:2px}
  .crow .fac{display:none}
  .crow .rf,.crow .wy{grid-column:1/-1;white-space:normal}
}
/* 촉매 상세 캔버스의 뉴스 한 줄 — 감성·제목·나이 (표가 아니라 줄로 읽는다) */
.nrow{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:3px 0;
  border-bottom:1px solid var(--line);font-size:var(--fs-meta);align-items:baseline}
.nrow>span:first-child{font-weight:700;font-size:var(--fs-micro)}
.nrow a{color:var(--acc);text-decoration:none} .nrow a:hover{text-decoration:underline}
.nrow .nmeta{margin-left:6px;white-space:nowrap}

/* ═══ 모바일 버튼·카드 정렬 규칙 (곽팀장 2026-09-18 "버튼이 기준없이 정렬돼 정신없다") ═══
   종전엔 `.btns{flex-wrap}` 하나로 **고르는 버튼·하는 버튼·입력칸**을 한 줄에 섞어 흘렸다.
   좁아지면 흐르는 자리가 그때그때 달라져 화면마다 기준이 없어 보인다.
   → 쓰임새로 셋만 나눈다. 같은 쓰임새는 **어느 화면에서나 같은 모양**이다.
     ① 고른다(배타 선택) = `.seg`  — 칸 폭이 같은 한 줄. 고른 칸만 악센트.
     ② 한다(행동)      = `.actions` — 같은 줄의 버튼은 폭이 같고 44px 이상(엄지).
     ③ 넣는다(입력)    = `.fform`  — 라벨이 붙은 2칸 격자. 자리표시자만으로 뜻을 알게 하지 않는다.
   ⚠ 이 블록은 파일 **맨 끝**에 둔다 — 같은 특이도면 뒤가 이긴다(앞선 .btns 규칙과 싸우지 않게). */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  border:1px solid var(--line2);border-radius:var(--rad);overflow:hidden;background:var(--surface2)}
.seg .sg{background:none;border:0;border-right:1px solid var(--line2);color:var(--tx2);
  font:inherit;font-size:13px;font-weight:600;min-height:42px;padding:0 6px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.seg .sg:last-child{border-right:0}
.seg .sg:hover{color:var(--tx)}
.seg .sg.on{background:var(--accbg);color:var(--acc);box-shadow:inset 0 -3px 0 var(--acc)}
.segs{display:flex;flex-direction:column;gap:8px}

.actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.actions>.btn{min-height:44px;width:100%}

.fform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}
.fform .fl{display:flex;flex-direction:column;gap:3px;min-width:0}
.fform .fl.w2{grid-column:1/-1}
.fform .fl>span{font-size:var(--fs-micro);letter-spacing:.04em;color:var(--tx3);font-weight:700}
.fform .f{width:100%;min-height:42px;box-sizing:border-box;font-size:14px}
.fform .f:disabled{opacity:.45}

@media (min-width:861px){
  /* PC 에서는 행동 버튼이 화면 폭을 다 먹을 이유가 없다 — 글자 폭으로 */
  .actions{grid-auto-columns:max-content}
  .actions>.btn{width:auto;min-height:32px}
  .fform{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}
  .fform .fl.w2{grid-column:auto}
  .fform .f{min-height:34px}
  .seg{max-width:max-content}
  .seg .sg{min-height:32px;padding:0 14px}
}

@media (max-width:860px){
  /* 남아 있는 옛 `.btns` 묶음도 최소한 엄지에 닿게 (한 번에 다 못 바꾼다) */
  .btns{gap:8px}
  .btns>.btn{min-height:44px}
  /* 🔴 카드 제목이 **글자 중간에서 꺾이던** 자리 — "자산 요/약"(곽팀장 스크린샷).
     제목과 오른쪽 메타가 같은 줄을 다투다 생긴 일이다. 메타를 아랫줄로 내린다. */
  .sec>h3{flex-wrap:wrap;align-items:baseline;gap:2px 8px}
  .sec>h3 .r{flex:1 0 100%;order:2;text-align:left}
  /* 촉매 요약 띠 — 버튼은 띠 아래 한 줄을 통째로 쓴다(숫자 칸 사이에 끼지 않게) */
  .cathero .cbtns{flex:1 0 100%;margin:0;padding:8px;border-top:1px solid var(--line);gap:8px}
  .cathero .cx{flex:1 1 calc(50% - 1px);min-width:0}
}
@media (max-width:420px){
  .seg .sg{font-size:12px;padding:0 4px}
}

/* 접히는 카드(details) — 드물고 위험한 패널용. 겉모습은 일반 카드와 같게 한다. */
.sec.dsc{padding:0}
.sec.dsc>summary{margin:0;padding:7px 12px;font-size:13px;letter-spacing:-.01em;color:var(--tx);
  background:var(--surface2);border-bottom:2px solid var(--line2);font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:8px;list-style:none}
.sec.dsc>summary::-webkit-details-marker{display:none}
.sec.dsc>summary .r{color:var(--tx3);font-weight:500;font-size:var(--fs-meta);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec.dsc>summary .chev{color:var(--acc);font-weight:700;font-size:var(--fs-meta);
  border:1px solid var(--accln);border-radius:var(--rad);padding:2px 8px;white-space:nowrap}
.sec.dsc[open]>summary .chev::after{content:" ▲"}
.sec.dsc:not([open])>summary .chev::after{content:" ▼"}
.sec.dsc[open]>summary .chev{color:var(--tx2);border-color:var(--line2)}
@media (max-width:860px){
  .sec.dsc>summary{flex-wrap:wrap;padding:10px 12px;min-height:44px}
  .sec.dsc>summary .ttl{flex:1 0 auto}
  .sec.dsc>summary .r{flex:1 0 100%;order:3}
}

/* 자산 레일 — 모바일에서 **칸이 잘려** 마지막 지표(최대낙폭)가 반만 보였다(390px 실측).
   가로 스크롤 대신 **같은 폭 5칸 격자**로 접는다. 숫자는 작아져도 다섯 개가 다 보인다. */
@media (max-width:860px){
  #arail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden}
  #arail .arc{padding:0 6px;min-width:0;overflow:hidden}
  #arail .arc .k{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  #arail .arc .v{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
}
@media (max-width:420px){
  #arail .arc .k{font-size:9.5px;letter-spacing:0}
  #arail .arc .v{font-size:13px}
}
/* 버튼 넷짜리 묶음(학습 큐 승격 단계 등) — 모바일에서는 2×2. 한 줄에 넷은 글자가 잘린다. */
@media (max-width:860px){
  .actions.quad{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ─── 분석보고서 (곽팀장 2026-09-19) — 목록은 날짜·종목·요약, 본문은 캔버스에서 읽는다.
   새 색을 만들지 않는다(§6 MAX 1 ACCENT). 칩·KPI 는 기존 토큰만 쓴다. */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--surface2);border:1px solid var(--line);border-radius:2px;color:var(--tx2);
  padding:4px 9px;font-size:var(--fs-meta);cursor:pointer;min-height:30px}
.chip b{font-weight:700;color:var(--tx3);margin-left:3px}
.chip:hover{border-color:var(--line2);color:var(--tx)}
.chip.on{background:var(--accbg);border-color:var(--accln);color:var(--acc)}
.chip.on b{color:var(--acc)}
.rv{display:inline-block;background:var(--accbg);border:1px solid var(--accln);color:var(--acc);
  border-radius:2px;padding:3px 10px;font-size:var(--fs-st);line-height:var(--lh-st);font-weight:700}
.rkpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:4px}
.rk{border:1px solid var(--line);border-radius:2px;background:var(--surface2);padding:6px 10px;min-width:0}
.rk .l{display:block;font-size:var(--fs-micro);letter-spacing:.05em;color:var(--tx3);font-weight:700}
.rk .v{display:block;font-size:var(--fs-st);line-height:var(--lh-st);font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rk .v.up{color:var(--up)} .rk .v.dn{color:var(--dn)}
.rk .m{display:block;font-size:var(--fs-meta);color:var(--tx3)}
@media(max-width:560px){.rkpi{grid-template-columns:1fr}}
/* 보고서 목록 — 표는 좁은 화면에서 요약을 잘라먹는다(390px 실측). 그래서 격자로 만들고
   모바일에서는 요약을 **아랫줄 전체**로 내린다(모바일 카드 규칙과 같은 손). */
.rlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px}
.rhead,.rrow{display:grid;grid-template-columns:118px 170px 76px minmax(0,1fr);gap:10px;
  background:var(--surface);padding:7px 10px;align-items:baseline}
.rhead{background:var(--surface2);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--tx3);font-weight:700}
.rrow{cursor:pointer;font-size:var(--fs-meta)}
.rrow:hover{background:var(--accbg)}
.rrow .rs{font-size:var(--fs-b);font-weight:600}
.rrow .rsum{color:var(--tx2);line-height:1.45}
@media(max-width:620px){
  .rhead{display:none}
  .rrow{grid-template-columns:1fr auto;gap:2px 8px;padding:9px 10px}
  .rrow .rd{order:1;color:var(--tx3);font-size:var(--fs-micro)}
  .rrow .rvd{order:2;text-align:right;font-weight:700}
  .rrow .rs{order:3;grid-column:1/-1}
  .rrow .rsum{order:4;grid-column:1/-1}
}

/* 2026-10-02: 레일에 외부 화면 링크(레이더)를 넣었다 — a 는 기본 밑줄을 끈다 */
a.navi{text-decoration:none}