/* JARVIS 투자 콘솔 — 사진의 네온 궤도 UI */
:root{
  --bg-deep:#010b1c;
  --bg-mid:#04214a;
  --bg-glow:#0b4c8f;
  --cyan:#25f4e0;
  --cyan-dim:#12b9ad;
  --pink:#ff2f7e;
  --pink-dim:#c41a58;
  --amber:#ffc857;
  --text:#dcf3ff;
  --text-dim:#7ea8c8;
  --panel:rgba(3,20,45,.72);
  --panel-line:rgba(37,244,224,.24);
  --mono:'Orbitron',ui-monospace,monospace;
  --kr:'Noto Sans KR',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, var(--bg-glow) 0%, var(--bg-mid) 42%, var(--bg-deep) 100%);
  color:var(--text);
  font-family:var(--kr);
  overflow:hidden;
}

/* ── 부팅 오버레이 ───────────────────────────────────── */
.boot{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 50%, #05306a 0%, #010b1c 70%);
  transition:opacity .6s ease, visibility .6s}
.boot.done{opacity:0;visibility:hidden}
/* .tabpane 과 같은 함정입니다. [hidden]{display:none}은 UA 스타일이라
   위의 display:grid 에 집니다 — 숨긴 뒤에도 화면 전체를 덮은 채 클릭을
   가로챕니다. 눈에는 안 보이는데 아무것도 안 눌리는 상태가 됩니다. */
.boot[hidden]{display:none}
.boot-inner{text-align:center}
.boot-ring{width:120px;height:120px;margin:0 auto 26px;border-radius:50%;
  border:2px solid rgba(37,244,224,.16);border-top-color:var(--cyan);
  animation:spin 1.1s linear infinite;box-shadow:0 0 40px rgba(37,244,224,.35)}
@keyframes spin{to{transform:rotate(360deg)}}
.boot-title{font-family:var(--mono);font-size:30px;letter-spacing:.5em;color:var(--cyan);
  text-shadow:0 0 22px rgba(37,244,224,.75)}
.boot-sub{margin-top:12px;font-size:13px;color:var(--text-dim)}

/* ── 상단바 ─────────────────────────────────────────── */
.topbar{height:52px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;border-bottom:1px solid var(--panel-line);
  background:linear-gradient(180deg,rgba(2,16,38,.94),rgba(2,16,38,.55));
  position:relative;z-index:20}
.brand{display:flex;align-items:baseline;gap:10px}
.brand-mark{color:var(--cyan);font-size:14px;text-shadow:0 0 12px var(--cyan)}
.brand-name{font-family:var(--mono);font-size:19px;letter-spacing:.34em;color:var(--cyan);
  text-shadow:0 0 16px rgba(37,244,224,.6)}
.brand-sub{font-size:12px;color:var(--text-dim);letter-spacing:.06em}
.topbar-status{display:flex;align-items:center;gap:8px}
.chip{font-size:11px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--panel-line);background:rgba(6,30,60,.7);color:var(--text-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.chip-btn{cursor:pointer;transition:.16s}
.chip-btn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 14px rgba(37,244,224,.28)}
.chip.live{color:var(--cyan);border-color:rgba(37,244,224,.55)}
.chip.offline{color:var(--amber);border-color:rgba(255,200,87,.5)}

.demo-banner{position:relative;z-index:20;padding:7px 18px;font-size:12px;
  background:rgba(255,200,87,.12);border-bottom:1px solid rgba(255,200,87,.34);color:var(--amber)}
.demo-hint{color:var(--text-dim);margin-left:8px}

/* ── 레이아웃 ───────────────────────────────────────── */
.layout{display:grid;grid-template-columns:250px 1fr 430px;height:calc(100vh - 52px);overflow:hidden}
body:has(.demo-banner:not([hidden])) .layout{height:calc(100vh - 84px)}

.panel{background:var(--panel);backdrop-filter:blur(9px);display:flex;flex-direction:column;min-height:0}
.panel-left{border-right:1px solid var(--panel-line)}
.panel-right{border-left:1px solid var(--panel-line)}
.panel-head{padding:13px 15px 8px;display:flex;align-items:baseline;justify-content:space-between}
.panel-head h2{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--cyan)}
.panel-note{font-size:10px;color:var(--text-dim)}
.legend-row{display:flex;gap:14px;padding:0 15px 9px;font-size:10px;color:var(--text-dim)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.dot-in{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.dot-out{background:var(--pink);box-shadow:0 0 8px var(--pink)}

/* 자금압력 리스트 */
.flow-list{list-style:none;overflow-y:auto;flex:1;padding:0 9px 9px}
.flow-item{padding:7px 7px;border-radius:7px;cursor:pointer;transition:.14s;margin-bottom:2px}
.flow-item:hover{background:rgba(37,244,224,.09)}
.flow-item.active{background:rgba(37,244,224,.15);box-shadow:inset 0 0 0 1px rgba(37,244,224,.4)}
.flow-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.flow-name{font-size:12px;color:var(--text)}
.flow-code{font-family:var(--mono);font-size:9px;color:var(--text-dim);letter-spacing:.08em}
.flow-score{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.flow-score.pos{color:var(--cyan)}
.flow-score.neg{color:var(--pink)}
.flow-bar{height:3px;margin-top:5px;border-radius:2px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.flow-bar span{position:absolute;top:0;bottom:0;left:50%;border-radius:2px}
.flow-meta{display:flex;justify-content:space-between;font-size:9px;color:var(--text-dim);margin-top:4px}
.panel-foot{padding:9px 15px;font-size:10px;color:var(--text-dim);border-top:1px solid var(--panel-line)}

/* ── 궤도 무대 ──────────────────────────────────────── */
.stage{position:relative;min-width:0;overflow:hidden}
#orbit{display:block;width:100%;height:100%}
.axis-label{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;
  letter-spacing:.34em;color:rgba(126,168,200,.65);pointer-events:none}
.axis-top{top:12px}
.axis-bottom{bottom:12px}

/* 이상 감지 패널 */
.alerts{position:absolute;top:14px;right:14px;width:298px;pointer-events:none}
.alerts-head{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--pink);
  text-align:right;margin-bottom:7px;text-shadow:0 0 12px rgba(255,47,126,.55)}
.alerts-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.alert-item{border:1px solid rgba(255,47,126,.55);border-radius:5px;padding:5px 9px;
  background:rgba(60,4,28,.6);font-size:11px;display:flex;gap:9px;align-items:center;
  box-shadow:0 0 16px rgba(255,47,126,.2);animation:alertIn .35s ease}
@keyframes alertIn{from{opacity:0;transform:translateX(14px)}}
.alert-sigma{font-family:var(--mono);color:var(--pink);font-size:11.5px;white-space:nowrap}
.alert-text{color:#ffd7e6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alert-item.calm{border-color:rgba(37,244,224,.4);background:rgba(4,40,60,.55);box-shadow:none}
.alert-item.calm .alert-sigma{color:var(--cyan)}
.alert-item.calm .alert-text{color:var(--text-dim)}

/* 로테이션 박스 */
.rotation-box{position:absolute;left:14px;bottom:14px;width:264px;
  border:1px solid var(--panel-line);border-radius:8px;padding:10px 12px;
  background:rgba(2,16,38,.82);backdrop-filter:blur(7px)}
.rotation-head{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}
.rotation-title{font-size:12px;color:var(--text)}
.rotation-sub{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--text-dim)}
.rotation-body{font-size:11.5px;line-height:1.65;color:var(--text-dim)}
.rot-line{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.rot-from{color:var(--pink)}
.rot-to{color:var(--cyan)}
.rot-arrow{color:var(--text-dim)}
.rot-pct{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--amber)}
.rotation-foot{margin-top:7px;font-size:9.5px;color:rgba(126,168,200,.75);line-height:1.5}

/* 툴팁 */
.tooltip{position:absolute;z-index:30;pointer-events:none;max-width:280px;
  border:1px solid var(--panel-line);border-radius:7px;padding:9px 11px;
  background:rgba(2,16,38,.95);font-size:11.5px;line-height:1.6;
  box-shadow:0 8px 30px rgba(0,0,0,.55)}
.tt-title{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:.1em;margin-bottom:4px}
.tt-row{display:flex;justify-content:space-between;gap:14px;color:var(--text-dim)}
.tt-row b{color:var(--text);font-weight:500}
.tt-note{margin-top:6px;font-size:10px;color:rgba(126,168,200,.8);line-height:1.45}

/* ── 오른쪽 패널: 탭 ────────────────────────────────── */
.tabs{display:flex;border-bottom:1px solid var(--panel-line)}
.tab{flex:1;padding:11px 4px;background:none;border:none;cursor:pointer;
  font-family:var(--kr);font-size:11.5px;color:var(--text-dim);transition:.16s;
  border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab-active{color:var(--cyan);border-bottom-color:var(--cyan);background:rgba(37,244,224,.12)}
.tabpane{flex:1;display:flex;flex-direction:column;min-height:0}
/* `hidden` 속성만으로는 숨겨지지 않습니다. 브라우저 기본값 [hidden]{display:none}은
   UA 스타일이라 위의 .tabpane{display:flex}(author 스타일)에 항상 집니다.
   그래서 탭을 눌러도 네 패널이 전부 쌓여 보였습니다. */
.tabpane[hidden]{display:none}

.trend-bar{padding:9px 13px;font-size:11px;line-height:1.55;color:var(--text-dim);
  border-bottom:1px solid var(--panel-line);background:rgba(37,244,224,.05)}
.trend-bar b{color:var(--cyan);font-weight:500}

.chat-scroll{flex:1;overflow-y:auto;padding:12px 13px;display:flex;flex-direction:column;gap:9px;min-height:0}

/* 뉴스 말풍선 */
.news-msg{border-radius:11px;padding:9px 11px;background:rgba(8,36,70,.72);
  border:1px solid rgba(37,244,224,.14);animation:msgIn .3s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(9px)}}
.news-msg.fear{border-color:rgba(255,47,126,.4);background:rgba(52,8,30,.6)}
.news-msg.greed{border-color:rgba(37,244,224,.42);background:rgba(4,48,58,.6)}
.news-head{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-size:9.5px;color:var(--text-dim)}
.news-mood{padding:1px 6px;border-radius:999px;border:1px solid currentColor;font-size:9px}
.news-mood.fear{color:var(--pink)}
.news-mood.greed{color:var(--cyan)}
.news-mood.neutral{color:var(--text-dim)}
.news-title{font-size:12.5px;line-height:1.6;color:var(--text)}
.news-title a{color:inherit;text-decoration:none}
.news-title a:hover{color:var(--cyan);text-decoration:underline}
.news-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.news-tag{font-size:9px;padding:1.5px 6px;border-radius:999px;cursor:pointer;
  background:rgba(37,244,224,.11);color:var(--cyan);border:1px solid rgba(37,244,224,.26)}
.news-tag:hover{background:rgba(37,244,224,.24)}
.news-words{font-size:9px;color:rgba(126,168,200,.7);margin-top:4px}

/* 자비스 대화 */
.msg{max-width:92%;border-radius:12px;padding:9px 12px;font-size:12.5px;line-height:1.68;animation:msgIn .3s ease}
.msg-jarvis{align-self:flex-start;background:rgba(8,40,72,.8);border:1px solid rgba(37,244,224,.24)}
.msg-user{align-self:flex-end;background:rgba(37,244,224,.14);border:1px solid rgba(37,244,224,.34)}
.msg-who{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--cyan);margin-bottom:4px}
.msg-user .msg-who{color:var(--text-dim)}
.msg-body{white-space:pre-wrap}
.msg-meta{margin-top:6px;font-size:9.5px;color:rgba(126,168,200,.78);display:flex;gap:9px;flex-wrap:wrap}
.msg-thinking .msg-body::after{content:'▊';animation:blink 1s steps(2) infinite;color:var(--cyan)}
@keyframes blink{50%{opacity:0}}

.quick-asks{display:flex;flex-wrap:wrap;gap:5px;padding:0 13px 9px}
.quick{font-size:10.5px;padding:5px 9px;border-radius:999px;cursor:pointer;transition:.14s;
  background:rgba(37,244,224,.08);border:1px solid rgba(37,244,224,.24);color:var(--text-dim);font-family:var(--kr)}
.quick:hover{background:rgba(37,244,224,.2);color:var(--cyan)}

.ask-bar{display:flex;gap:7px;padding:10px 13px;border-top:1px solid var(--panel-line);
  background:rgba(2,16,38,.85)}
#askInput{flex:1;background:rgba(6,30,60,.85);border:1px solid var(--panel-line);border-radius:999px;
  padding:9px 15px;color:var(--text);font-size:12.5px;font-family:var(--kr);outline:none;transition:.16s}
#askInput:focus{border-color:var(--cyan);box-shadow:0 0 16px rgba(37,244,224,.22)}
#askInput::placeholder{color:rgba(126,168,200,.55)}
.icon-btn{width:37px;border-radius:50%;cursor:pointer;font-size:14px;transition:.16s;
  background:rgba(6,30,60,.85);border:1px solid var(--panel-line);color:var(--text-dim)}
.icon-btn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 14px rgba(37,244,224,.28)}
.icon-send{background:rgba(37,244,224,.14);color:var(--cyan)}
.icon-btn.listening{border-color:var(--pink);color:var(--pink);animation:pulse 1.1s infinite}
@keyframes pulse{50%{box-shadow:0 0 20px rgba(255,47,126,.65)}}

/* 스크롤바 */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.22)}
::-webkit-scrollbar-thumb{background:rgba(37,244,224,.26);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(37,244,224,.45)}

@media (max-width:1200px){
  .layout{grid-template-columns:200px 1fr 360px}
  .alerts{width:240px}
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr;grid-template-rows:minmax(320px,46vh) 1fr;height:auto;overflow:auto}
  body{overflow:auto}
  .panel-left{display:none}
  .panel-right{border-left:none;border-top:1px solid var(--panel-line);height:54vh}
}

/* 접근성 — 키보드 포커스와 모션 최소화 설정 존중 */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
.flow-item:focus-visible,.news-tag:focus-visible{outline-offset:1px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .boot-ring{animation:none;border-top-color:var(--cyan)}
}


/* 봉 주기 스위치 — 실시간성의 핵심 컨트롤 */
.tf-switch{display:flex;border:1px solid var(--panel-line);border-radius:999px;overflow:hidden;
  background:rgba(6,30,60,.7)}
.tf{padding:5px 11px;background:none;border:none;cursor:pointer;font-family:var(--kr);
  font-size:11px;color:var(--text-dim);transition:.14s;white-space:nowrap}
.tf:hover{color:var(--text)}
.tf-active{background:rgba(37,244,224,.18);color:var(--cyan)}
.tf:disabled{opacity:.45;cursor:wait}

/* 실시간 갱신 표시 */
#freshChip.pulse{animation:freshPulse .9s ease}
@keyframes freshPulse{0%{color:var(--cyan);box-shadow:0 0 14px rgba(37,244,224,.5)}100%{}}
.chip.stale{color:var(--amber);border-color:rgba(255,200,87,.45)}


/* ── 뉴스 필터 / 업그레이드된 말풍선 ─────────────────── */
.news-filters{display:flex;gap:5px;padding:8px 13px;border-bottom:1px solid var(--panel-line);
  flex-wrap:wrap;align-items:center;background:rgba(2,16,38,.5)}
.nf{font-size:10.5px;padding:4px 9px;border-radius:999px;cursor:pointer;transition:.14s;
  background:rgba(37,244,224,.07);border:1px solid rgba(37,244,224,.2);color:var(--text-dim);
  font-family:var(--kr)}
.nf:hover{color:var(--cyan);background:rgba(37,244,224,.16)}
.nf-active{background:rgba(37,244,224,.22);color:var(--cyan);border-color:var(--cyan)}
.nf-select{margin-left:auto;font-size:10.5px;padding:4px 7px;border-radius:6px;cursor:pointer;
  background:rgba(6,30,60,.9);border:1px solid rgba(37,244,224,.2);color:var(--text-dim);
  font-family:var(--kr);outline:none;max-width:120px}
.nf-select:focus{border-color:var(--cyan)}

.news-foot{padding:7px 13px;font-size:9.5px;color:var(--text-dim);
  border-top:1px solid var(--panel-line);display:flex;justify-content:space-between;gap:8px}

/* 속보 */
.news-msg.breaking{border-color:rgba(255,200,87,.6);background:rgba(48,36,6,.6);
  box-shadow:0 0 18px rgba(255,200,87,.16)}
.news-badge{font-size:8.5px;padding:1.5px 6px;border-radius:999px;letter-spacing:.06em;
  border:1px solid currentColor;white-space:nowrap}
.badge-breaking{color:var(--amber);animation:breathe 2.2s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55}}
.badge-count{color:var(--text-dim);border-color:rgba(126,168,200,.4)}
.news-outlets{font-size:9px;color:rgba(126,168,200,.85);margin-top:4px}
.news-age{color:var(--cyan)}
.news-age.old{color:var(--text-dim)}

/* 새로 들어온 기사 강조 */
@keyframes flashIn{0%{border-color:var(--cyan);box-shadow:0 0 22px rgba(37,244,224,.45)}}
.news-msg.just-in{animation:msgIn .3s ease, flashIn 1.8s ease}


/* 거래소 장 상태 */
#hoursChip{cursor:default}
#hoursChip .open{color:var(--cyan)}
#hoursChip .closed{color:rgba(126,168,200,.55)}


/* ── 학습 패널 ───────────────────────────────────────── */
.learn-card{border:1px solid var(--panel-line);border-radius:9px;padding:10px 12px;
  background:rgba(8,36,70,.55)}
.learn-card h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--cyan);
  margin-bottom:8px;font-weight:500}
.learn-stat{display:flex;justify-content:space-between;font-size:11.5px;padding:3px 0;
  color:var(--text-dim)}
.learn-stat b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.learn-note{margin-top:8px;font-size:9.5px;line-height:1.55;color:rgba(126,168,200,.8)}

.bucket-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  padding:5px 0;border-top:1px solid rgba(37,244,224,.1);font-size:11px}
.bucket-name{color:var(--text)}
.bucket-n{font-size:9.5px;color:var(--text-dim)}
.bucket-edge{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}
.edge-pos{color:var(--cyan)}
.edge-neg{color:var(--pink)}
.edge-noise{color:rgba(126,168,200,.6)}
.bucket-bar{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(255,255,255,.06);
  position:relative;overflow:hidden;margin-top:2px}
.bucket-bar span{position:absolute;top:0;bottom:0;left:50%;border-radius:2px}
.sig-badge{font-size:8.5px;padding:1px 5px;border-radius:999px;border:1px solid currentColor}

/* 피처 검증 — 무엇이 실제로 쓸모 있나 */
.feat-row{display:grid;grid-template-columns:1fr auto auto auto;gap:7px;align-items:center;
  padding:4px 0;border-top:1px solid rgba(37,244,224,.08);font-size:10px;
  color:var(--text-dim);font-variant-numeric:tabular-nums}
.feat-name{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat-hz{font-size:9px}
.feat-edge{font-family:var(--mono);font-size:9.5px}
.feat-row .dim{color:rgba(126,168,200,.55);font-size:9px}
.chance-row{display:flex;justify-content:space-between;gap:8px;margin-top:6px;
  padding-top:5px;border-top:1px solid rgba(255,92,138,.18);font-size:9.5px;
  color:var(--text-dim);flex-wrap:wrap}
.chance-row b{color:var(--text)}
.chance-row .dim{color:var(--pink)}

/* 수집기 상태 · 자기 개선 */
.collector{font-size:8.5px;padding:1px 6px;border-radius:999px;border:1px solid currentColor;
  margin-left:6px;font-weight:400}
.collector.on{color:var(--cyan)}
.collector.off{color:var(--pink)}
.collector.idle{color:rgba(126,168,200,.75)}
.tune-badge{font-size:8.5px;padding:1px 6px;border-radius:999px;border:1px solid currentColor;
  margin-left:6px;font-weight:400}
.tune-badge.change{color:var(--cyan)}
.tune-badge.keep{color:rgba(126,168,200,.75)}
.tune-badge.wait{color:var(--text-dim)}
.fold-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;
  border-top:1px solid rgba(37,244,224,.08);font-size:10.5px;color:var(--text-dim);
  font-variant-numeric:tabular-nums}
.learn-note.warn{color:rgba(255,92,138,.85)}
/* 고장 — 재시작마다 학습이 0부터 시작하는 상태. 경고보다 세게 그립니다. */
.learn-note.bad{color:rgba(255,92,138,.95);background:rgba(255,92,138,.08);
  border-left:2px solid rgba(255,92,138,.5);padding:6px 8px;border-radius:3px}
.learn-note code{font-family:var(--mono);font-size:9px;padding:1px 4px;border-radius:3px;
  background:rgba(37,244,224,.1);color:var(--cyan)}

/* 일정 — 왜 비었는지, 무엇이 큰 이벤트인지 */
.cal-notice{margin:0 0 8px;padding:8px 10px;border-radius:8px;font-size:9.5px;
  line-height:1.6;background:rgba(255,92,138,.07);border:1px solid rgba(255,92,138,.22);
  color:var(--text-dim)}
.cal-notice b{color:var(--pink);display:block;margin-bottom:3px;font-weight:500}
.cal-notice .dim{color:rgba(126,168,200,.6);margin-top:3px}
.cal-big{font-size:8px;padding:1px 5px;border-radius:999px;margin-left:6px;
  color:var(--pink);border:1px solid currentColor;vertical-align:1px}
.cal-surprise{margin-top:3px;font-size:9.5px;color:var(--text-dim);
  font-variant-numeric:tabular-nums}
.cal-surprise b{color:var(--text)}
.cal-surprise .dim{color:rgba(126,168,200,.6)}

/* 발표 뒤 실제 반응 — 발표 전 흐름과 구분해서 */
.cal-reaction{margin-top:4px;padding-top:4px;border-top:1px dashed rgba(37,244,224,.14);
  font-size:9.5px;color:var(--text-dim);display:flex;gap:8px;flex-wrap:wrap;
  align-items:center;font-variant-numeric:tabular-nums}
.cal-reaction b{color:var(--text)}
.cal-reaction .dim{color:rgba(126,168,200,.6)}
.cal-reaction.none{color:rgba(126,168,200,.55)}
.cal-rx-label{color:var(--cyan);white-space:nowrap}
.cal-rx-label b{color:var(--cyan)}

/* 전망 차트 — 예측선이 아니라 퍼지는 범위 */
.fc{margin:8px 0 4px;padding:9px 10px;border-radius:9px;
  background:rgba(6,20,32,.55);border:1px solid rgba(37,244,224,.16)}
.fc-head{font-size:10px;color:var(--cyan);letter-spacing:.04em;margin-bottom:4px}
.fc-svg{width:100%;height:auto;display:block}
.fc-cone2{fill:rgba(37,244,224,.10)}
.fc-cone1{fill:rgba(37,244,224,.22)}
.fc-now{stroke:rgba(126,168,200,.45);stroke-width:1;stroke-dasharray:3 3}
.fc-dot{fill:var(--cyan)}
.fc-tick{stroke:rgba(126,168,200,.4);stroke-width:1}
.fc-label{font-size:8.5px;fill:var(--text-dim);font-family:var(--mono)}
.fc-label.now{fill:var(--cyan)}
.fc-label.dim{fill:rgba(126,168,200,.5)}
.fc-legend{display:flex;gap:12px;font-size:9px;color:var(--text-dim);margin-top:5px}
.fc-legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:4px;vertical-align:-1px}
.fc-legend .sw1{background:rgba(37,244,224,.35)}
.fc-legend .sw2{background:rgba(37,244,224,.14)}
.fc-note{margin-top:6px;font-size:9px;line-height:1.55;color:rgba(126,168,200,.8)}
/* 장기 봉을 받는 동안 자리를 지키는 줄. 아무것도 안 뜨면 사용자는
   예측봉 기능이 없는 줄 압니다 — 실제로 그렇게 보였습니다. */
.fc-wait{margin:6px 0;padding:7px 10px;border-radius:8px;font-size:10px;
  color:rgba(126,168,200,.9);background:rgba(37,244,224,.06);
  border:1px solid rgba(37,244,224,.16)}
.fc-note b{color:var(--text)}

.fc-dir{margin-top:8px;padding-top:7px;border-top:1px solid rgba(37,244,224,.12)}
.fc-dir-head{font-size:10px;color:var(--text-dim);margin-bottom:5px}
.fc-strength{font-size:8.5px;padding:1px 6px;border-radius:999px;
  border:1px solid currentColor;margin-left:5px}
.fc-strength.strong{color:var(--cyan)}
.fc-strength.weak{color:rgba(126,168,200,.7)}
.fc-bar{position:relative;height:7px;border-radius:4px;overflow:visible;
  background:rgba(255,255,255,.07)}
.fc-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.fc-fill.strong{background:var(--cyan)}
.fc-fill.weak{background:rgba(126,168,200,.5)}
/* 기저확률 눈금 — 이게 없으면 "상승 49%"가 좋아 보입니다 */
.fc-base{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--pink)}
.fc-dir-nums{display:flex;gap:9px;font-size:9.5px;margin-top:5px;
  color:var(--text-dim);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.fc-dir-nums b{color:var(--text)}
.fc-dir-nums .dim{color:rgba(126,168,200,.6)}

/* 가격대별 확률 — 방향이 아니라 폭 */
.zones{margin:6px 0 2px;padding:9px 10px;border-radius:9px;
  background:rgba(6,20,32,.45);border:1px solid rgba(37,244,224,.12)}
.zone-head{font-size:10px;color:var(--cyan);letter-spacing:.03em;margin-bottom:5px}
.zone-head .dim{color:var(--text-dim);letter-spacing:0;margin-left:5px}
.zone-row{display:grid;grid-template-columns:52px 1fr 62px 30px;gap:7px;align-items:center;
  padding:2px 0;font-size:9.5px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.zone-row.mid{color:var(--text)}
.zone-name{white-space:nowrap}
.zone-range{font-family:var(--mono);font-size:8.5px;text-align:right;
  color:rgba(126,168,200,.75)}
.zone-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.zone-bar span{display:block;height:100%;border-radius:3px;background:rgba(126,168,200,.45)}
.zone-row.mid .zone-bar span{background:var(--cyan)}
.zone-pct{text-align:right;font-family:var(--mono);font-size:9px}

/* 차트 패턴 — 16종 유사도 */
.pat{margin:6px 0 2px;padding:9px 10px;border-radius:9px;
  background:rgba(6,20,32,.45);border:1px solid rgba(37,244,224,.12)}
.pat-head{font-size:10.5px;color:var(--text-dim);margin-bottom:6px}
.pat-head b{color:var(--cyan);font-weight:500;margin:0 5px}
.pat-head b.dim{color:rgba(126,168,200,.7)}
.pat-top{font-size:9px;color:var(--text-dim)}
.pat-row{display:grid;grid-template-columns:1fr 78px 30px;gap:7px;align-items:center;
  padding:2px 0;font-size:9.5px;color:var(--text-dim)}
.pat-row.top{color:var(--text)}
.pat-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pat-bias{font-style:normal;font-size:8px;padding:0 4px;border-radius:999px;
  margin-left:4px;border:1px solid currentColor;opacity:.65}
.pat-bias.up{color:var(--cyan)}
.pat-bias.down{color:var(--pink)}
.pat-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.pat-bar span{display:block;height:100%;border-radius:3px;background:rgba(126,168,200,.45)}
.pat-row.top .pat-bar span{background:var(--cyan)}
.pat-pct{text-align:right;font-family:var(--mono);font-size:9px;
  font-variant-numeric:tabular-nums}
.pat-record{margin-top:6px;padding-top:5px;border-top:1px solid rgba(37,244,224,.1);
  font-size:9.5px;color:var(--text-dim);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pat-record b{color:var(--text)}
.pat-record.dim{color:rgba(126,168,200,.6)}
.pat-more{margin-top:5px}
.pat-more summary{font-size:9px;color:rgba(126,168,200,.65);cursor:pointer}
.pat-more summary:hover{color:var(--cyan)}
.pat-mini-wrap{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.pat-mini{font-size:8.5px;padding:1px 5px;border-radius:999px;color:rgba(126,168,200,.7);
  background:rgba(255,255,255,.04);font-variant-numeric:tabular-nums}
.pat-note{margin-top:6px;font-size:9px;line-height:1.55;color:rgba(126,168,200,.75)}
.pat-note b{color:var(--text)}

/* 답변 피드백 */
.msg-feedback{display:flex;gap:5px;margin-top:7px}
.fb{font-size:9.5px;padding:3px 8px;border-radius:999px;cursor:pointer;transition:.14s;
  background:rgba(37,244,224,.06);border:1px solid rgba(37,244,224,.2);color:var(--text-dim);
  font-family:var(--kr)}
.fb:hover{color:var(--cyan);background:rgba(37,244,224,.18)}
.fb.done{color:var(--cyan);border-color:var(--cyan);cursor:default}


/* ── 발표 일정 ───────────────────────────────────────── */
.cal-item{border:1px solid var(--panel-line);border-radius:9px;padding:9px 11px;
  background:rgba(8,36,70,.55)}
.cal-item.high{border-color:rgba(255,200,87,.45);background:rgba(44,34,8,.5)}
.cal-head{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.cal-when{font-family:var(--mono);font-size:10px;color:var(--cyan);white-space:nowrap}
.cal-item.high .cal-when{color:var(--amber)}
.cal-kind{font-size:8.5px;padding:1px 6px;border-radius:999px;border:1px solid currentColor;
  color:var(--text-dim)}
.cal-date{margin-left:auto;font-size:9.5px;color:var(--text-dim)}
.cal-name{font-size:12.5px;color:var(--text);margin-bottom:6px}
.cal-affected{display:flex;flex-wrap:wrap;gap:4px}
.cal-chip{font-size:9.5px;padding:2px 7px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(37,244,224,.24);background:rgba(37,244,224,.08)}
.cal-chip:hover{background:rgba(37,244,224,.2)}
.cal-chip .pos{color:var(--cyan)}
.cal-chip .neg{color:var(--pink)}
.cal-history{margin-top:7px;font-size:9.5px;line-height:1.5;color:rgba(126,168,200,.85);
  padding-top:6px;border-top:1px solid rgba(37,244,224,.12)}
.cal-history.none{color:rgba(126,168,200,.55)}


/* 안 읽은 내용이 있는 탭 — 탭을 강제로 바꾸지 않고 표시만 합니다 */
.tab-unread{position:relative}
.tab-unread::after{content:'';position:absolute;top:7px;right:7px;width:5px;height:5px;
  border-radius:50%;background:var(--cyan);box-shadow:0 0 7px var(--cyan)}


/* ── 뉴스 넓게 보기 ─────────────────────────────────────
   오른쪽 패널 폭에서는 한 번에 예닐곱 건이 한계입니다. 넓게 보기를 켜면
   패널이 화면을 덮고 여러 단으로 깔려 전체 흐름이 한눈에 들어옵니다. */
/* display:none 인 그리드 아이템은 그리드에서 아예 빠집니다. 그래서 컬럼을
   `0 0 1fr`로 두면 남은 패널이 첫 컬럼(0px)으로 들어가 사라집니다.
   숨긴 뒤에는 컬럼도 하나만 남겨야 합니다. */
body.news-wide .layout{grid-template-columns:1fr}
body.news-wide .panel-left,
body.news-wide .stage{display:none}
body.news-wide .panel-right{border-left:none}
body.news-wide #newsScroll{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:9px;align-content:start}
body.news-wide .news-msg{margin:0}
.nf-wide.on{background:rgba(37,244,224,.28);color:var(--cyan);border-color:var(--cyan)}

/* ── 학습 현황 ─────────────────────────────────────────── */
.prog-row{display:grid;grid-template-columns:44px 1fr auto;gap:9px;align-items:center;
  padding:5px 0;font-size:11px}
.prog-h{font-family:var(--mono);font-size:10px;color:var(--text-dim)}
.prog-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.prog-bar span{display:block;height:100%;border-radius:3px;background:var(--cyan);
  transition:width .4s ease}
.prog-bar span.done{background:var(--amber)}
.prog-n{font-family:var(--mono);font-size:10px;color:var(--text-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* 행 수는 맥락일 뿐 판단 기준이 아닙니다 — 독립 표본보다 흐리게 둡니다.
   같은 굵기로 두면 큰 숫자(행 13,305)가 눈에 먼저 들어와, 정작 판단
   기준인 39를 못 보게 됩니다. */
.prog-raw{opacity:.55;font-size:9px}

.feat-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.feat{font-size:9px;padding:2px 7px;border-radius:999px;
  background:rgba(37,244,224,.07);border:1px solid rgba(37,244,224,.18);color:var(--text-dim)}

.pend-row{display:flex;justify-content:space-between;font-size:10.5px;padding:3px 0;
  color:var(--text-dim)}
.pend-due{color:var(--amber)}

/* ── 로그인 ──────────────────────────────────────────────────────────
   주소만 알면 들어오던 상태를 끝냅니다. 로그인 전에는 이 화면만 뜨므로
   배경 화면이 잠깐이라도 비치지 않도록 불투명하게 덮습니다. */
.auth-gate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;background:#070b12}
/* 이게 없으면 로그인에 성공해도 화면이 그대로 덮여 있어 아무것도 눌리지
   않습니다. hidden 은 붙어 있으니 눈에는 사라진 것처럼 보이고요. */
.auth-gate[hidden]{display:none}
.auth-card{display:flex;flex-direction:column;gap:10px;width:min(320px,86vw);
  padding:28px 24px;border:1px solid rgba(126,168,200,.22);border-radius:10px;
  background:rgba(12,18,28,.9)}
.auth-title{font-family:var(--mono);font-size:17px;letter-spacing:.32em;
  color:#7ee8ff;text-align:center}
.auth-sub{font-size:10px;color:rgba(126,168,200,.75);text-align:center;
  margin-bottom:6px;line-height:1.5}
.auth-card input{padding:9px 11px;border:1px solid rgba(126,168,200,.25);
  border-radius:5px;background:rgba(4,8,14,.85);color:#dbe9f5;font-size:12px;
  font-family:inherit}
.auth-card input:focus{outline:none;border-color:rgba(126,232,255,.55)}
.auth-btn{padding:9px;border:1px solid rgba(126,232,255,.4);border-radius:5px;
  background:rgba(126,232,255,.1);color:#7ee8ff;font-size:12px;cursor:pointer;
  font-family:inherit}
.auth-btn:hover{background:rgba(126,232,255,.18)}
.auth-btn:disabled{opacity:.5;cursor:default}
.auth-msg{font-size:10px;line-height:1.5;text-align:center;min-height:14px}
.auth-msg.bad{color:rgba(255,92,138,.9)}
.auth-msg.good{color:rgba(126,232,255,.85)}

/* ── 계정 관리 ───────────────────────────────────────────────────── */
.adm-row{display:flex;align-items:center;gap:8px;padding:7px 0;
  border-bottom:1px solid rgba(126,168,200,.1)}
.adm-name{flex:1;min-width:0}
.adm-name b{font-size:11px;color:#dbe9f5}
.adm-name span{display:block;font-size:9px;color:rgba(126,168,200,.65)}
.adm-use{font-family:var(--mono);font-size:10px;text-align:right;
  color:rgba(126,168,200,.8);white-space:nowrap}
.adm-use.hot{color:rgba(255,92,138,.95)}
.adm-btn{padding:3px 8px;border:1px solid rgba(126,168,200,.28);border-radius:4px;
  background:transparent;color:rgba(126,168,200,.85);font-size:9px;cursor:pointer;
  font-family:inherit;white-space:nowrap}
.adm-btn:hover{border-color:rgba(255,92,138,.5);color:rgba(255,92,138,.9)}
.adm-btn.on{border-color:rgba(255,92,138,.5);color:rgba(255,92,138,.9)}
.adm-alert{padding:8px 10px;margin-bottom:6px;border-radius:4px;font-size:10px;
  line-height:1.5;color:rgba(255,92,138,.95);background:rgba(255,92,138,.08);
  border-left:2px solid rgba(255,92,138,.5)}
.adm-save{padding:9px 10px;margin:8px 0;border-radius:4px;font-size:10px;
  line-height:1.55;color:rgba(255,196,92,.95);background:rgba(255,196,92,.08);
  border-left:2px solid rgba(255,196,92,.55)}
.adm-save textarea{width:100%;margin-top:6px;height:52px;font-family:var(--mono);
  font-size:9px;padding:5px;border:1px solid rgba(126,168,200,.22);border-radius:4px;
  background:rgba(4,8,14,.85);color:#dbe9f5;resize:vertical}
.adm-form{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.adm-form input{flex:1;min-width:80px;padding:6px 8px;font-size:10px;
  border:1px solid rgba(126,168,200,.25);border-radius:4px;
  background:rgba(4,8,14,.85);color:#dbe9f5;font-family:inherit}

/* ── 기간별 예상 범위 (D+1D / D+1W / D+1M) ───────────────────────────
   기간이 길수록 넓어지는 걸 눈으로 보이게, 셋을 같은 축에 그립니다. */
.hz-card{margin:8px 0;padding:10px 11px;border:1px solid rgba(126,168,200,.18);
  border-radius:6px;background:rgba(10,16,26,.55)}
.hz-title{font-size:10px;color:rgba(126,168,200,.85);margin-bottom:9px}
.hz-row{margin-bottom:11px}
.hz-row:last-of-type{margin-bottom:4px}
.hz-head{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.hz-head b{font-family:var(--mono);font-size:10px;color:#7ee8ff}
.hz-head span{font-size:9px;color:rgba(126,168,200,.7)}
.hz-head em{margin-left:auto;font-style:normal;font-family:var(--mono);
  font-size:9px;color:rgba(126,168,200,.85)}
.hz-track{position:relative;height:9px;display:flex;align-items:center;
  justify-content:center}
.hz-track span{position:absolute;height:100%;border-radius:2px}
.hz-2s{background:rgba(126,232,255,.13)}
.hz-1s{background:rgba(126,232,255,.32)}
.hz-mid{width:1px!important;height:13px!important;background:rgba(255,255,255,.6);
  border-radius:0!important}
.hz-nums{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:3px;font-family:var(--mono);font-size:9px;
  color:rgba(126,168,200,.55)}
.hz-nums b{font-size:10px;color:#dbe9f5}
.hz-note{margin-top:3px;font-size:9px;color:rgba(126,168,200,.65)}
.hz-foot{margin-top:8px;font-size:9px;line-height:1.5;color:rgba(126,168,200,.6)}
.auth-switch{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(126,168,200,.14);
  font-size:10px;color:rgba(126,168,200,.7)}
.auth-switch[hidden]{display:none}
.auth-switch button{background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:10px;color:#7ee8ff;text-decoration:underline}
.auth-switch button:hover{color:#a8f0ff}
/* 상단 우측 "누구로 들어와 있는지" + 로그아웃 */
.chip-user{color:var(--cyan);border-color:rgba(37,244,224,.35)}
.chip-user:hover{background:rgba(255,92,138,.14);border-color:rgba(255,92,138,.5);
  color:rgba(255,92,138,.95)}
.chip-user[hidden]{display:none}

/* 봉 주기별 축적 — 같은 자산군을 다른 창으로 본 서로 다른 기록입니다. */
.tf-row{display:flex;align-items:baseline;gap:8px;padding:5px 0;
  border-bottom:1px solid rgba(126,168,200,.09);font-size:10px}
.tf-row:last-child{border-bottom:none}
.tf-name{min-width:44px;color:#7ee8ff;font-size:10px}
.tf-nums{flex:1;color:rgba(126,168,200,.8)}
.tf-nums b{color:#dbe9f5;font-family:var(--mono)}
.tf-nums i{font-style:normal;color:rgba(126,168,200,.5);font-size:9px}
.tf-ago{font-family:var(--mono);font-size:9px;color:rgba(126,168,200,.55);
  white-space:nowrap}
/* 승인 버튼은 차단과 반대 색으로 — 실수로 누르면 안 되는 쪽이 빨강입니다. */
.adm-btn.ok{border-color:rgba(126,232,255,.45);color:#7ee8ff}
.adm-btn.ok:hover{background:rgba(126,232,255,.14);border-color:rgba(126,232,255,.7);
  color:#a8f0ff}
/* 처리해야 할 건수 — 제목 옆에 붙습니다. */
.learn-card h4 .badge{display:inline-block;margin-left:6px;padding:1px 6px;
  border-radius:8px;background:rgba(255,92,138,.9);color:#0a0f18;
  font-family:var(--mono);font-size:9px;vertical-align:middle}