/**
 * 공통 셸 스타일 — 8개 화면이 byte 단위로 복제하던 것만 모았다.
 *
 * 로드 순서 계약: 각 페이지의 <head> 에서 이 파일이 페이지 <style> 보다 "먼저" 온다.
 * 그래서 특이도가 같으면 페이지 고유 규칙이 항상 이긴다 — 여기엔 어느 화면에서나
 * 똑같아야 하는 규칙만 넣을 것. 페이지 고유 규칙을 넣으면 8개 화면이 같이 움직인다.
 */

/* ─── 상단 내비 기본형 ───
   public 만 자기 <style> 에 변형(로그인 전 안내용 .nav)을 남겨 두고 덮어쓴다.
   font-size 를 못박는 이유: 페이지마다 body 기본 글씨가 다른데(0.875rem/1rem),
   명시하지 않으면 로고처럼 상속받는 글자가 탭을 옮길 때마다 커졌다 작아졌다 한다. */
.nav { min-height: 48px; font-size: 1rem; background: var(--bg1); border-bottom: 1px solid var(--border2); display: flex; align-items: center; padding: 4px 20px; gap: 24px; position: sticky; top: 0; z-index: 10; }
.nav__logo { font-family: var(--font-mono); font-weight: 600; color: var(--acc); letter-spacing: 1px; }
.nav__logo small { color: var(--text3); font-weight: 400; margin-left: 6px; letter-spacing: 0; }
.nav__links { display:flex; gap:4px; flex:1; min-width:0; flex-wrap:wrap; overflow:visible; }
.nav__link { flex: none; white-space: nowrap; padding: 5px 12px; border-radius: 6px; color: var(--text2); font-size:0.9375rem; cursor: pointer; }
.nav__link--on { background: var(--bg3); color: var(--text); }
.nav__link:hover { color: var(--text); }

/* 키보드·보조기기 공통 피드백. 페이지가 별도 outline을 갖고 있으면 그 규칙이 우선한다. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline:2px solid var(--acc);
  outline-offset:2px;
}
:where(button, [role="button"])[aria-busy="true"] { cursor:progress; }
:where(button, input, select, textarea):disabled { opacity:.62; cursor:not-allowed; }
:where([role="status"], [role="alert"]) { overflow-wrap:anywhere; }

@media (pointer:coarse) {
  :where(button, .nav__link, .tabbar__link, input, select) { min-height:44px; }
}

@media (prefers-reduced-motion:reduce) {
  html:focus-within { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ─── 긴 화면의 구역 바로가기 ───
   기능 카드를 재배치하거나 숨기지 않고, 사용자가 먼저 목적을 고른 뒤 해당 구역으로
   바로 이동하게 한다. 각 페이지의 기존 API·폼·ID는 그대로 유지한다. */
.fj-page-index {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  width:100%;
  padding:10px;
  border:1px solid var(--border2);
  border-radius:12px;
  background:rgba(10,14,20,.88);
  box-shadow:0 12px 32px rgba(0,0,0,.16);
}
.fj-page-index__title {
  padding:0 5px;
  color:var(--text3);
  font-size:max(.75rem,14px);
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
}
.fj-page-index__link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 12px;
  border:1px solid rgba(163,184,220,.14);
  border-radius:9px;
  background:var(--bg2);
  color:var(--text2);
  font-size:max(.8125rem,15px);
  line-height:1.25;
  text-align:center;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}
@media (hover:hover) {
  .fj-page-index__link:hover {
    border-color:rgba(240,165,0,.42);
    background:rgba(240,165,0,.08);
    color:var(--text);
  }
}
.fj-ui :where(.section,.summary,.page-head,.hero,.top2)[id] { scroll-margin-top:5.5rem; }
.fj-ui :where(.section,.summary,.page-head,.hero,.top2)[id]:target {
  border-color:rgba(240,165,0,.5);
  box-shadow:0 0 0 2px rgba(240,165,0,.12),var(--fj-shadow,0 16px 44px rgba(0,0,0,.18));
}
@media (max-width:760px) {
  .fj-page-index { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .fj-page-index__title { grid-column:1/-1; }
  .fj-page-index__link { min-width:0; padding-inline:8px; }
}

/* ─── 글씨 크기 조절 위젯 (shell.js 가 .nav 안에 붙인다) ─── */
.fsz { display:flex; align-items:center; gap:3px; flex:none; margin-left:auto; }
.fsz__lbl { color:var(--text3); font-size:0.75rem; margin-right:3px; white-space:nowrap; }
.fsz__btn { border:1px solid var(--border2); background:var(--bg2); color:var(--text2);
  border-radius:6px; padding:2px 8px; cursor:pointer; line-height:1.3; font-family:inherit; }
.fsz__btn:hover { color:var(--text); border-color:rgba(240,165,0,.5); }
/* login.html 은 --bg4 를 정의하지 않는다 — fallback 으로 --bg3 (기존 login 도 그렇게 했다) */
.fsz__btn[aria-pressed="true"] { background:var(--bg4, var(--bg3)); color:var(--acc); border-color:rgba(240,165,0,.55); }

/* ─── 좁은 데스크톱·태블릿 가로 (≤860px) 내비 줄바꿈 ───
   기본 글씨가 23px 로 커지면서 로고 + 링크 7개 + 글씨크기 위젯 + 계정이 한 줄에 안 들어간다.
   760px 에서만 접히던 탓에 761~860px 구간이 비어 nav 가 옆으로 삐져나왔다(768px 에서 16px).
   여기서는 "줄바꿈만" 풀고, 탭바·라벨 숨김 같은 폰 전용 처리는 아래 760px 블록에 그대로 둔다. */
@media (max-width:860px) {
  .nav { width:100%; max-width:100vw; flex-wrap:wrap; gap:7px 10px; }
  .nav__account { order:2; flex:1 0 100%; max-width:100%; min-width:0; justify-content:flex-end; }
  .nav__account > span { min-width:0; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
  .nav__links { order:3; flex:0 0 100%; width:100%; max-width:100%; }
  /* 같은 7개 목적지가 하단 탭바에 모두 있으므로 폰에서 위 메뉴를 반복해 세로 공간을
     두 번 쓰지 않는다. DOM/키보드 계약은 남고 화면에는 핵심 카드가 바로 올라온다. */
  body.has-tabbar .nav__links { display:none; }
}

/* ─── 폰 폭 (≤760px) 공통 내비 계약 ───
   기본 글씨 20px 에서도 320px 화면이 옆으로 넓어지지 않아야 한다 (실 Edge QA 로 잡은 값).
   order 는 상대 순서만 의미가 있어서 badge 류(order:1)가 없는 화면에서도 그대로 성립한다.
   페이지 고유 badge(.badge/.data-badge/#data-info)의 order:1 은 각 페이지 <style> 에 남겼다. */
@media (max-width:760px) {
  .fsz__lbl { display:none; }
  .nav { width:100%; max-width:100vw; padding:7px 12px; gap:7px 10px; flex-wrap:wrap; }
  .nav__logo { min-width:0; }
  .nav__logo small { display:none; }
  .nav__account { order:2; flex:1 0 100%; max-width:100%; min-width:0; justify-content:flex-end; }
  .nav__account > span { min-width:0; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
  .nav__links { order:3; flex:0 0 100%; width:100%; max-width:100%; }
}

/* ─── 하단 탭바 (shell.js 가 body 끝에 붙인다) ───
   넓은 화면에서는 상단 내비만으로 충분해서 아예 없는 것으로 취급한다. */
.tabbar { display:none; }
@media (max-width:760px) {
  .tabbar { position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; gap:2px;
    background:var(--bg1); border-top:1px solid var(--border2);
    /* env(): 홈 인디케이터가 있는 폰에서 탭이 제스처 바에 겹치지 않게 */
    padding:4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .tabbar__link { flex:1 1 0; min-width:0; text-align:center; padding:8px 2px; border-radius:8px;
    color:var(--text2); font-size:0.8125rem; line-height:1.15; white-space:normal; overflow:visible;
    text-overflow:clip; overflow-wrap:anywhere; }
  .tabbar__link--on { color:var(--acc); background:var(--bg2); }
  /* 고정 탭바 높이만큼 본문 바닥을 비워 마지막 카드가 가려지지 않게 한다 */
  body.has-tabbar { padding-bottom:3.75rem; }
}

/* ─── data-tip 바텀시트 (shell.js) ───
   호버가 없는 환경에서는 CSS 호버 툴팁을 완전히 끈다 — 탭 뒤 hover 가 눌어붙어
   화면을 가리는 것을 막고, 같은 내용을 탭 → 바텀시트로 보여준다. */
@media (hover: none) {
  [data-tip]::before, [data-tip]::after { display:none !important; content:none !important; }
}
#fj-tipsheet[hidden] { display:none; }
#fj-tipsheet .tipsheet__backdrop { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.55); }
#fj-tipsheet .tipsheet__panel { position:fixed; left:0; right:0; bottom:0; z-index:41;
  background:var(--bg2); border-top:1px solid var(--border2); border-radius:14px 14px 0 0;
  box-sizing:border-box; padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); overflow:visible; }
/* data-tip 원문은 줄바꿈으로 문단을 나눈다 — pre-line 으로 그대로 살린다 */
#fj-tipsheet .tipsheet__text { white-space:pre-line; overflow-wrap:anywhere; font-size:0.875rem; line-height:1.7; color:var(--text); }
#fj-tipsheet .tipsheet__close { display:block; width:100%; margin-top:14px; padding:10px;
  border:1px solid var(--border2); border-radius:8px; background:var(--bg3, var(--bg2));
  color:var(--text2); font-size:0.9375rem; min-height:44px; cursor:pointer; font-family:inherit; }
/* 긴 설명이 뷰포트보다 커지면 고정 시트를 끊고 body 끝의 페이지 흐름으로 바꾼다.
   내부 스크롤 없이 위부터 닫기까지 페이지 세로 스크롤로 모두 접근한다. */
#fj-tipsheet.tipsheet--flow .tipsheet__backdrop { display:none; }
#fj-tipsheet.tipsheet--flow .tipsheet__panel {
  position:relative; inset:auto; z-index:1; width:calc(100% - 24px); max-width:42rem;
  margin:18px auto; border:1px solid var(--border2); border-radius:10px;
}

/* ─── Fake Javis UI v2 · 점진적 시각 개선층 ───
   기존 DOM·API·이벤트를 바꾸지 않고, opt-in 한 앱 화면(<html class="fj-ui">)에만 적용한다.
   21st.dev의 대시보드 패턴 중 가독성·상태 피드백·짧은 미세 상호작용만 현재의
   무의존 HTML/CSS 구조로 옮겼다. 주문·킬스위치 같은 위험 동작에는 장식 모션을 쓰지 않는다. */
:root.fj-ui {
  --text2:#a8b2c1;
  --text3:#8692a8;
  --r:#ff5b73;
  --fj-surface-line:rgba(163,184,220,.14);
  --fj-surface-hover:rgba(240,165,0,.28);
  --fj-shadow:0 16px 44px rgba(0,0,0,.18);
}

.fj-ui body {
  font-size:1rem;
  line-height:1.55;
  background-color:var(--bg);
  background-image:
    radial-gradient(58rem 34rem at 10% -8%, rgba(56,176,240,.08), transparent 62%),
    radial-gradient(48rem 32rem at 95% 8%, rgba(240,165,0,.055), transparent 68%);
  background-attachment:fixed;
}

.fj-ui .nav {
  background:rgba(10,14,20,.9);
  border-bottom-color:rgba(163,184,220,.14);
  box-shadow:0 10px 34px rgba(0,0,0,.16);
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
}
.fj-ui .nav__link {
  position:relative;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  transition:color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.fj-ui .nav__link--on {
  color:var(--text);
  background:linear-gradient(135deg, rgba(240,165,0,.15), rgba(56,176,240,.08));
  box-shadow:inset 0 0 0 1px rgba(240,165,0,.16);
}
.fj-ui .nav__link--on::after {
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:2px;
  height:2px;
  border-radius:99px;
  background:var(--acc);
  box-shadow:0 0 12px rgba(240,165,0,.38);
  animation:fj-nav-in .2s ease-out both;
}

/* 카드는 위치를 움직이지 않는다. 기존 툴팁 기준점과 가로 표 레이아웃을 보존한다. */
.fj-ui .section,
.fj-ui .metric,
.fj-ui .card,
.fj-ui .stat,
.fj-ui .hero__b {
  border-color:var(--fj-surface-line);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.022), transparent 42%),
    radial-gradient(32rem 18rem at 8% 0%, rgba(56,176,240,.035), transparent 72%);
  box-shadow:var(--fj-shadow), inset 0 1px 0 rgba(255,255,255,.018);
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.fj-ui .section__title,
.fj-ui .card__title {
  font-size:max(.9375rem, 16px);
  line-height:1.4;
}
.fj-ui .section__meta,
.fj-ui .eyebrow,
.fj-ui .last-check,
.fj-ui .metric__label,
.fj-ui .metric__sub,
.fj-ui .autotrade-overview__label,
.fj-ui .shadow-readiness__label,
.fj-ui .legend__value,
.fj-ui .filters [role="status"],
.fj-ui .symbol small,
.fj-ui .tag,
.fj-ui .event__time,
.fj-ui .event__sym {
  font-size:max(.75rem, 14px);
  line-height:1.45;
}
.fj-ui .shadow-readiness__badge,
.fj-ui .shadow-readiness__status,
.fj-ui .field__hint,
.fj-ui .sizing-form__msg {
  font-size:max(.8125rem, 15px);
  line-height:1.5;
}
.fj-ui .metric__value,
.fj-ui .stat__val,
.fj-ui .hero__v,
.fj-ui .money-now__v,
.fj-ui .autotrade-overview__value,
.fj-ui .shadow-readiness__value {
  font-variant-numeric:tabular-nums;
  transition:color .18s ease, text-shadow .18s ease, background-color .18s ease;
}

.fj-ui .btn,
.fj-ui .chip,
.fj-ui .preset,
.fj-ui .mode span,
.fj-ui .autotrade-mode span,
.fj-ui .side-tabs span,
.fj-ui input,
.fj-ui select,
.fj-ui textarea {
  transition:border-color .16s ease, background-color .16s ease, color .16s ease,
    box-shadow .16s ease, transform .12s ease;
}
.fj-ui .btn { min-height:44px; }
.fj-ui :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height:44px; }
.fj-ui :where(input,select,textarea):focus {
  border-color:rgba(56,176,240,.72);
  box-shadow:0 0 0 3px rgba(56,176,240,.12);
}
.fj-ui :where(.autotrade-mode,.mode-tabs,.side-tabs) input:checked + span,
.fj-ui .preset--active {
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.14);
}

/* 상태는 색뿐 아니라 기존 상태 문구와 함께 보이며, glow는 해당 경계 안에서만 쓴다. */
.fj-ui [data-autotrade-tone="running"] {
  box-shadow:0 18px 48px rgba(0,192,96,.07), inset 3px 0 0 rgba(0,192,96,.72);
}
.fj-ui [data-autotrade-tone="halted"] {
  box-shadow:0 18px 48px rgba(255,91,115,.08), inset 3px 0 0 rgba(255,91,115,.82);
}
.fj-ui [data-autotrade-tone="stale"],
.fj-ui [data-shadow-tone="blocked"] {
  box-shadow:0 18px 48px rgba(240,165,0,.07), inset 3px 0 0 rgba(240,165,0,.72);
}
.fj-ui [data-shadow-tone="ready"] {
  box-shadow:inset 3px 0 0 rgba(0,192,96,.64);
}
.fj-ui [data-shadow-tone="unsafe"] {
  box-shadow:inset 3px 0 0 rgba(255,91,115,.78);
}
.fj-ui #autotrade-state-badge,
.fj-ui .shadow-readiness__badge {
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:4px 9px;
  border:1px solid var(--border2);
  border-radius:999px;
  background:rgba(255,255,255,.025);
}

.fj-ui .table-wrap,
.fj-ui .scroll-box,
.fj-ui .events {
  scrollbar-color:rgba(134,146,168,.72) rgba(255,255,255,.025);
  scrollbar-width:thin;
}
.fj-ui .table-wrap thead th,
.fj-ui .scroll-box thead th {
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(10,14,20,.96);
  backdrop-filter:blur(10px);
}
.fj-ui tbody tr { transition:background-color .14s ease, box-shadow .14s ease; }
.fj-ui tbody tr:focus-within { box-shadow:inset 3px 0 0 var(--acc); }
.fj-ui :where(.section,.metric,.card,.stat,.hero__b):focus-within {
  outline:1px solid rgba(56,176,240,.52);
  outline-offset:2px;
}

.fj-ui .event__icon {
  border-radius:999px;
  background:rgba(56,176,240,.08);
  box-shadow:inset 0 0 0 1px rgba(56,176,240,.12);
}
.fj-ui .toast--show { animation:fj-toast-in .2s ease-out both; }
.fj-ui .loading {
  background-image:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.055) 45%, transparent 70%);
  background-size:220% 100%;
  animation:fj-loading 1.4s ease-in-out infinite;
}
.fj-ui :where([role="progressbar"],.progress__fill,.bar__fill) {
  transition:width .3s ease, background-color .2s ease;
}

@media (hover:hover) and (pointer:fine) {
  .fj-ui .section:not([data-autotrade-tone]):not([data-fj-static]):hover,
  .fj-ui .metric:not([data-fj-static]):hover,
  .fj-ui .card:not([data-fj-static]):hover,
  .fj-ui .stat:not([data-fj-static]):hover,
  .fj-ui .hero__b:not([data-fj-static]):hover {
    border-color:var(--fj-surface-hover);
    box-shadow:0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035);
  }
  .fj-ui .btn:not(.btn--danger):not(:disabled):hover,
  .fj-ui .chip:not(:disabled):hover,
  .fj-ui .preset:not(:disabled):hover { transform:translateY(-1px); }
  .fj-ui .btn:not(.btn--danger):not(:disabled):active,
  .fj-ui .chip:not(:disabled):active,
  .fj-ui .preset:not(:disabled):active { transform:scale(.98); }
  /* 위험 버튼은 클래스가 아니라 id/속성으로만 표시된 오래된 화면도 있다. */
  .fj-ui :where(.btn,.chip,.preset):is(.btn--danger,[data-autotrade-action],[data-kill],[data-danger],[data-del],[data-destructive],[data-fj-static],[id*="kill" i],[id*="halt" i],[id*="stop" i],[id*="order" i],[id*="reset" i],[id*="del" i],[id*="danger" i],[id*="autotrade" i],[id*="disconnect" i],[id*="wipe" i],[id*="restore" i],[id*="unlock" i]),
  .fj-ui [data-fj-static] :where(.btn,.chip,.preset) { transform:none !important; }
}

@keyframes fj-nav-in { from { opacity:0; transform:scaleX(.4); } }
@keyframes fj-toast-in { from { opacity:0; transform:translateY(8px) scale(.985); } }
@keyframes fj-loading { from { background-position:180% 0; } to { background-position:-40% 0; } }

@media (max-width:760px) {
  .fj-ui body { background-attachment:scroll; }
  .fj-ui .nav { background:rgba(10,14,20,.96); backdrop-filter:blur(12px); }
  .fj-ui .nav__link { min-height:44px; }
  .fj-ui .section,
  .fj-ui .metric,
  .fj-ui .card,
  .fj-ui .stat,
  .fj-ui .hero__b { box-shadow:0 10px 28px rgba(0,0,0,.16); }
}

@media (prefers-reduced-motion:reduce) {
  .fj-ui .nav__link--on::after,
  .fj-ui .toast--show,
  .fj-ui .loading { animation:none !important; }
  .fj-ui :where(.btn,.chip,.preset) { transform:none !important; }
  .fj-ui body { background-attachment:scroll; }
}

/* ─── Magic UI inspired motion layer ───────────────────────────────────────
   React/Tailwind 의존성을 들이지 않고 공개 Magic UI 컴포넌트의 상호작용 원리를
   현재 HTML/CSS/JS 셸에 맞춰 옮긴다. 모두 data-magic-* opt-in 이며 주문·중단 같은
   위험 조작부에는 붙이지 않는다. JS가 꺼져도 내용과 레이아웃은 그대로 남는다. */
@property --magic-beam-angle {
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

:root.fj-ui {
  --fj-magic-cyan:rgba(56,176,240,.82);
  --fj-magic-amber:rgba(240,165,0,.72);
  --fj-magic-grid:rgba(134,146,168,.045);
  --fj-magic-duration:460ms;
}

/* Magic UI Grid Pattern — 배경 장식은 정적이고 본문 대비를 침범하지 않는다. */
.fj-ui body {
  background-image:
    linear-gradient(var(--fj-magic-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fj-magic-grid) 1px, transparent 1px),
    radial-gradient(58rem 34rem at 10% -8%, rgba(56,176,240,.08), transparent 62%),
    radial-gradient(48rem 32rem at 95% 8%, rgba(240,165,0,.055), transparent 68%);
  background-size:36px 36px,36px 36px,auto,auto;
  background-position:-1px -1px,-1px -1px,0 0,0 0;
}

/* Bento Grid — 기존 카드 DOM을 그대로 두고 중요도만 열 너비로 표현한다. */
.fj-ui .magic-bento {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
}
.fj-ui .magic-bento > * { grid-column:span 4; min-width:0; }
.fj-ui .magic-bento > [data-magic-span="wide"] { grid-column:span 8; }
.fj-ui .magic-bento > [data-magic-span="full"] { grid-column:1 / -1; }
.fj-ui .magic-bento > [data-magic-span="half"] { grid-column:span 6; }

/* Magic Card — shell.js가 장식 span을 삽입한다. 콘텐츠보다 먼저 그려져 가리지 않는다. */
.fj-ui [data-magic-card] {
  --magic-x:50%;
  --magic-y:50%;
  --magic-glow:rgba(56,176,240,.13);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.fj-ui [data-magic-card="warm"] { --magic-glow:rgba(240,165,0,.12); }
.fj-ui [data-magic-card="good"] { --magic-glow:rgba(0,192,96,.11); }
.fj-ui [data-magic-card="risk"] { --magic-glow:rgba(255,91,115,.1); }
.fj-ui .magic-card__glow {
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(320px circle at var(--magic-x) var(--magic-y),var(--magic-glow),transparent 66%);
  transition:opacity .22s ease;
}
@media (hover:hover) and (pointer:fine) {
  .fj-ui [data-magic-card]:hover > .magic-card__glow,
  .fj-ui [data-magic-card]:focus-within > .magic-card__glow { opacity:1; }
}

/* Cursor Spotlight — data-magic-spotlight opt-in 카드만 켠다.
   shell.js가 안전 게이트를 통과한 host에 magic-spotlight-ready를 붙이고,
   pointermove 좌표를 rAF로 --mx/--my에 기록한다. 위험 host는 span 자체를 만들지 않는다. */
.fj-ui [data-magic-spotlight] {
  --mx:50%;
  --my:50%;
  --magic-spotlight-glow:rgba(56,176,240,.14);
  position:relative;
  isolation:isolate;
}
.fj-ui [data-magic-spotlight="warm"] { --magic-spotlight-glow:rgba(240,165,0,.14); }
.fj-ui [data-magic-spotlight="good"] { --magic-spotlight-glow:rgba(0,192,96,.12); }
.fj-ui [data-magic-spotlight="risk"] { --magic-spotlight-glow:rgba(255,91,115,.11); }
.fj-ui .magic-spotlight__glow {
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(380px circle at var(--mx) var(--my),var(--magic-spotlight-glow),transparent 68%);
  transition:opacity .18s ease;
}
@media (hover:hover) and (pointer:fine) {
  .fj-ui [data-magic-spotlight].magic-spotlight-ready:hover > .magic-spotlight__glow,
  .fj-ui [data-magic-spotlight].magic-spotlight-ready:focus-within > .magic-spotlight__glow { opacity:1; }
}
.fj-ui [data-fj-static] > :where(.magic-card__glow,.magic-spotlight__glow,.magic-border-beam) {
  display:none !important;
}

/* Border Beam — 새 분석/상태 카드가 등장할 때 두 바퀴만 돌고 멈춘다. */
.fj-ui [data-magic-beam] { position:relative; isolation:isolate; overflow:hidden; }
.fj-ui .magic-border-beam {
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:conic-gradient(from var(--magic-beam-angle,0deg),transparent 0 76%,var(--fj-magic-cyan) 86%,var(--fj-magic-amber) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:fj-magic-beam 3.2s linear 2 both;
}

/* Focus 강조 — 페이지당 딱 하나. "이 탭에서는 이것만 봐도 된다"를 정적으로 가리킨다.
   PHASE3의 무한 효과 4종 제한 때문에 회전은 없고 테두리·배지만 남긴다.
   배지("먼저 볼 것")는 shell.js 가 진짜 요소로 넣는다 — ::before 가 아니라서
   화면을 못 보는 사용자의 보조기기도 읽는다. */
.fj-ui [data-magic-beam="focus"] {
  box-shadow:0 0 0 1px rgba(56,176,240,.34),0 0 24px -8px rgba(56,176,240,.34);
}
.fj-ui .magic-border-beam--focus {
  display:none;
  animation:none;
}
/* !important 는 signal-lab 의 데모 모드 규칙(.lab-card > :not(...) { position:relative })이
   특이도로 이 배지를 눌러 위치가 어긋나는 것을 막기 위한 최소한의 방어다. */
.fj-ui .magic-focus-badge {
  position:absolute !important;
  z-index:4 !important;
  top:8px !important;
  right:10px !important;
  left:auto !important;
  padding:2px 9px;
  border-radius:999px;
  border:1px solid rgba(56,176,240,.45);
  background:var(--bg3,#1E293B);
  color:var(--text,#E6EDF7);
  font-size:11px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.02em;
  white-space:nowrap;
  pointer-events:none;
}

/* Blur Fade — JS 준비 전에는 숨기지 않아 무스크립트에서도 전부 읽힌다. */
.fj-ui.magic-ui-ready [data-magic-reveal] {
  opacity:0;
  filter:blur(7px);
  transform:translateY(12px);
  transition:opacity var(--fj-magic-duration) ease,filter var(--fj-magic-duration) ease,transform var(--fj-magic-duration) cubic-bezier(.22,1,.36,1);
}
.fj-ui.magic-ui-ready [data-magic-reveal].magic-in {
  opacity:1;
  filter:blur(0);
  transform:none;
}

/* Number Ticker — 값이 실제 DOM에서 바뀌었을 때만 shell.js가 실행한다. */
.fj-ui [data-magic-number] { font-variant-numeric:tabular-nums; }
.fj-ui [data-magic-number].magic-number-running {
  color:var(--text);
  text-shadow:0 0 16px rgba(56,176,240,.22);
}

/* Animated List — 기존 목록을 반복 재생하지 않고 새 항목만 한 번 등장시킨다. */
.fj-ui .magic-list-item-enter {
  animation:fj-magic-list-in .42s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(min(var(--magic-order,0),7) * 38ms);
}

/* Animated Circular Progress — 기존 SVG/conic gauge 계산은 건드리지 않는다. */
.fj-ui [data-magic-progress] {
  transition:filter .28s ease,transform .28s ease;
  filter:drop-shadow(0 0 8px rgba(56,176,240,.1));
}
.fj-ui [data-magic-progress].magic-progress-updated {
  filter:drop-shadow(0 0 14px rgba(56,176,240,.34));
  transform:scale(1.025);
}
.fj-ui [data-magic-progress] :where(circle,.score-orbit__fill) {
  transition:stroke-dashoffset .65s cubic-bezier(.22,1,.36,1),stroke .22s ease;
}

/* 긴 연구 페이지용 Scroll Progress. */
.fj-ui [data-magic-scroll-progress] {
  --magic-scroll:0;
  position:fixed;
  z-index:60;
  top:0;
  left:0;
  width:100%;
  height:2px;
  pointer-events:none;
  transform:scaleX(var(--magic-scroll));
  transform-origin:left center;
  background:linear-gradient(90deg,var(--acc),var(--b));
  box-shadow:0 0 10px rgba(56,176,240,.3);
}

@keyframes fj-magic-beam {
  from { --magic-beam-angle:0deg; }
  to { --magic-beam-angle:360deg; }
}
@keyframes fj-magic-list-in {
  from { opacity:0; transform:translateY(9px) scale(.992); filter:blur(5px); }
  to { opacity:1; transform:none; filter:blur(0); }
}

@media (max-width:980px) {
  .fj-ui .magic-bento > *,
  .fj-ui .magic-bento > [data-magic-span="wide"],
  .fj-ui .magic-bento > [data-magic-span="half"] { grid-column:span 6; }
}
@media (max-width:760px) {
  .fj-ui body { background-size:28px 28px,28px 28px,auto,auto; }
  .fj-ui .magic-bento > *,
  .fj-ui .magic-bento > [data-magic-span] { grid-column:1 / -1; }
  .fj-ui .magic-card__glow { display:none; }
}
@media (forced-colors:active) {
  .fj-ui .magic-card__glow,
  .fj-ui .magic-border-beam { display:none; }
  /* 빔만 지우고 "먼저 볼 것" 표시는 남긴다. */
  .fj-ui [data-magic-beam="focus"] { box-shadow:none; outline:2px solid Highlight; outline-offset:1px; }
  .fj-ui .magic-focus-badge { border:1px solid CanvasText; background:Canvas; color:CanvasText; }
}
@media (prefers-reduced-motion:reduce) {
  .fj-ui.magic-ui-ready [data-magic-reveal] { opacity:1; filter:none; transform:none; transition:none; }
  .fj-ui .magic-border-beam { display:none; animation:none; }
  /* 모션을 껐어도 "무엇을 먼저 볼지"는 알아야 한다 — 빔 대신 정적 테두리를 조금 더 진하게. */
  .fj-ui [data-magic-beam="focus"] { box-shadow:0 0 0 1.5px rgba(56,176,240,.55); }
  .fj-ui .magic-list-item-enter { animation:none; }
  .fj-ui [data-magic-progress],
  .fj-ui [data-magic-progress] :where(circle,.score-orbit__fill) { transition:none; transform:none; }
  .fj-ui [data-magic-scroll-progress] { display:none; }
}

/* ─── 시안 A · 터미널 프로 테마 (opt-in: <html class="fj-ui fj-terminal">) ─────
   블룸버그 터미널의 정밀함 — 슬레이트 배경 · 1px 구분선 · 모서리 4~6px · 그림자 최소.
   전부 .fj-terminal 스코프다. 클래스가 없는 페이지는 픽셀 하나 변하지 않는다.
   페이지별 :root 변수(--bg,--bg1..4,--border,--border2,--acc,--g,--r,--b,--text,--text2,
   --text3,--font-mono)를 전부 덮는다 — :root.fj-terminal 이 페이지 :root 보다 특이도가 높다. */
:root.fj-terminal {
  /* ── 면 3단 (2026-08-27) ─────────────────────────────────────────────
     카드 위계를 "색"으로 만든다. 예전 팔레트는 카드면이 한 단계뿐이라
     무엇이 중요한 카드인지 색으로 구분할 수단이 아예 없었다.
     bg(바닥) < pane-lo(3순위) < bg2/bg1(2순위 기본) < pane-hi(1순위) */
  /* [5차 2026-08-27] 사용자 "너무 어둡고 칙칙" → 바닥·카드·패널을 한 단계씩 밝히고 색 채도를 올렸다.
     대비는 그대로 AA 이상(text3 7.4:1 · ink4 5.6:1 · 칩 글자 7:1 이상 — 아래 표 주석은 예전 값 기준). */
  --bg:#0C1628;    /* 바닥 (예전 #070D18) */
  --bg1:#152541;   /* 내비 = 카드색 */
  --bg2:#152541;   /* 카드 = 2순위 기본면 (예전 #0C1626 → 두 단계 밝게) */
  --bg3:#1F3253;   /* 패널 (카드 안 한 단계 위) */
  --bg4:#2C3F66;   /* 눌린 버튼·선택된 항목 */
  --border:#2A3E64;          /* 안쪽 구분선(카드 헤더 밑줄·행 구분) */
  --border2:#3A5078;         /* 카드 테두리·주 구분선 */
  /* [6차 2026-08-28] 사용자 "노랑·초록이 좀 진했으면 — 지금은 칙칙" → 액센트 3색의 채도를 한 단계 더 올렸다.
     밝기는 거의 그대로 두고 채도만 올려서 대비(AA)는 유지한다.
     실측(카드면 #152541 기준): acc 9.69:1 · g 9.23:1 · r 5.45:1 · b 8.24:1.
     가장 불리한 패널면 #1F3253 위에서도 r 4.56:1 로 AA 통과 — 빨강을 더 진하게 하면 여기서 먼저 깨진다. */
  --acc:#FFC53D;             /* 액센트(앰버): 오늘의 결론 · "먼저 볼 것" · 주의 (예전 #FFBE5C) */
  --g:#28E58C;               /* 상승 텍스트 (예전 #3EE39A) */
  --r:#FF6969;               /* 하락 텍스트 (예전 #FF6B7A — 파랑기를 빼서 더 진한 빨강. 패널면에서도 AA 유지) */
  --b:#4FCBFF;               /* 정보 = 시안 (--fj-cyan 과 같은 값) */
  --text:#EEF3FF;            /* 1단 — 숫자 본문·제목 */
  --text2:#C4CFE6;           /* 2단 — 설명 문장 */
  --text3:#A2B3CF;           /* 3단 — 라벨·단위 */
  /* 한글 대체 글꼴은 monospace 앞 (기존 계약과 동일) */
  --font-mono:'Fira Code','IBM Plex Mono','Courier New','Noto Sans KR','Malgun Gothic',monospace;

  /* ── 신규 역할 토큰 (§2.1) — 기존 이름은 하나도 지우지 않았다 ── */
  --fj-pane-hi:#1C3052;      /* 1순위 카드면 (한 화면에 2개까지) */
  --fj-pane-lo:#122038;      /* 3순위 카드면 — 서랍·푸터·각주 */
  --fj-ink4:#8A9BBB;         /* 글자 4단 — 각주·단위. 밝힌 카드면 위에서도 AA 4.5:1 이상 */
  /* [6차] 칩 배경도 한 단계 진하게 — 예전 값은 카드면과 1.2:1 밖에 안 벌어져 "색이 있다"는 느낌이 안 났다.
     칩 글자 대비는 여전히 AA 이상(up 5.5:1 · down 6.9:1 · acc 6.9:1 · cyan 7.6:1). */
  --fj-up-deep:#0B5C39;      /* 상승 칩 배경 (예전 #13492F) */
  --fj-down-deep:#6B1F30;    /* 하락 칩 배경 (예전 #4C1B27) */
  --fj-acc-deep:#5E4310;     /* 주의 칩 배경 (예전 #453212) */
  --fj-cyan:#4FCBFF;         /* 보조 강조 — 링크·현재 선택·기준 시각 */
  --fj-cyan-deep:#0E4361;    /* 정보 칩 배경 (예전 #0F3349) */
  /* 칩 글자색: deep 배경 위에서 8:1 이상 (실측값은 아래 대비표 주석 참고) */
  --fj-up-ink:#7BEBB6;
  --fj-down-ink:#FFB9C1;
  --fj-acc-ink:#FFD9A3;
  --fj-cyan-ink:#A9E4FF;
  /* 칩 테두리 — deep 배경만으로는 카드면과 1.2:1 밖에 안 벌어져 윤곽선을 준다. [6차] .34 → .55 로 진하게 */
  --fj-up-line:rgba(40,229,140,.55);
  --fj-down-line:rgba(255,105,105,.55);
  --fj-acc-line:rgba(255,197,61,.55);
  --fj-cyan-line:rgba(79,203,255,.55);

  /* 큰 마크(차트 선·막대·링)는 진한 색, 작은 등락 텍스트는 --g/--r 를 쓴다 */
  --fj-up-mark:#17E389;
  --fj-down-mark:#FF4257;
  --fj-warn-mark:#FFAC24;
  --fj-warn-text:#FFC53D;

  /* ── [6차] 아침회의 네 데스크 · 구역 식별색 ──────────────────────────────
     4장이 똑같은 카드라 "누가 무슨 말을 하는 자리"인지 색으로 구분되지 않았다.
     데스크마다 고유색을 주고, 판정(stance)은 그 위에 상태색 칩으로 얹는다. */
  --fj-desk-trend:#4FCBFF;   --fj-desk-trend-deep:#0E3B57;
  --fj-desk-crowd:#B58CFF;   --fj-desk-crowd-deep:#332257;
  --fj-desk-event:#FFC53D;   --fj-desk-event-deep:#5E4310;
  --fj-desk-risk:#28E58C;    --fj-desk-risk-deep:#0B5233;
  /* fj-ui 레이어의 하드코딩 색 중 새 팔레트와 충돌하는 것 재정의 */
  --fj-surface-line:#3A5078;
  --fj-surface-hover:#516FA8;
  --fj-shadow:0 1px 2px rgba(3,7,16,.55);
  --fj-magic-cyan:rgba(79,203,255,.92);
  --fj-magic-amber:rgba(255,197,61,.85);
  --fj-magic-grid:rgba(132,148,176,.045);
}

/* ── WCAG 대비 실측 (2026-08-27, 이 팔레트 그대로 계산) ────────────────
   면: bg #070D18 · pane #0C1626 · pane-hi #111E33 · pane-lo #0A1220 · bg3 #15213A
   글자(가장 불리한 면 = bg3 기준):
     --text  15.7~13.6 : 1     --text2 10.2~8.9 : 1
     --text3  7.3~6.0  : 1     --fj-ink4 5.4~4.8 : 1   ← 본문 4.5 통과
     --g 9.6 · --r 6.3 · --acc 10.3 · --fj-cyan 9.5 (pane 기준)
   칩(글자 vs deep 배경):
     up  #7BEBB6/#0E3B27 8.6 : 1     down #FFB9C1/#3F1620 9.6 : 1
     warn #FFD9A3/#3A2A0E 10.4 : 1   info #A9E4FF/#0C2A3D 10.8 : 1
   ⚠ --fj-ink4 는 시안 원값 #6B7C9B(3.8~4.3:1)이면 작은 글씨 AA 미달이라
     #7C8DAC 로 한 단계 올렸다. 더 어둡게 내리지 말 것. */

/* 배경: 은은한 격자 + 위쪽 앰버·시안 무대 조명 (시안 2 의 depth) */
.fj-terminal body {
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--fj-magic-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fj-magic-grid) 1px, transparent 1px),
    radial-gradient(68rem 26rem at 68% -9rem, rgba(255,180,84,.05), transparent 62%),
    radial-gradient(56rem 24rem at 12% -8rem, rgba(87,199,255,.045), transparent 60%),
    radial-gradient(64rem 40rem at 50% -14%, rgba(29,44,72,.55), transparent 72%);
  background-size:36px 36px,36px 36px,auto,auto,auto;
  background-position:-1px -1px,-1px -1px,0 0,0 0,0 0;
}

/* 내비·고정 표머리·구역 바로가기의 하드코딩 rgba(10,14,20,…) → 새 카드색 */
.fj-terminal.fj-ui .nav {
  background:rgba(12,22,38,.93);
  border-bottom-color:var(--border2);
  box-shadow:none;
}
.fj-terminal.fj-ui .nav__link { border-radius:4px; }
.fj-terminal.fj-ui .nav__link--on {
  background:var(--bg3);
  box-shadow:inset 0 0 0 1px var(--border2);
}
.fj-terminal.fj-ui .nav__link--on::after {
  background:var(--acc);
  box-shadow:0 0 12px rgba(255,180,84,.42);
}
.fj-terminal.fj-ui .table-wrap thead th,
.fj-terminal.fj-ui .scroll-box thead th { background:rgba(12,22,38,.97); }
.fj-terminal .fj-page-index {
  border-radius:6px;
  background:rgba(12,22,38,.92);
  box-shadow:var(--fj-shadow, 0 1px 2px rgba(3,7,16,.55));
}
.fj-terminal .fj-page-index__link { border-radius:4px; border-color:var(--border2); }
@media (hover:hover) {
  .fj-terminal .fj-page-index__link:hover {
    border-color:rgba(255,180,84,.5);
    background:rgba(255,180,84,.09);
  }
}
.fj-terminal.fj-ui :where(.section,.summary,.page-head,.hero,.top2)[id]:target {
  border-color:rgba(255,180,84,.5);
  box-shadow:0 0 0 2px rgba(255,180,84,.14),var(--fj-shadow);
}
.fj-terminal .fsz__btn { border-radius:4px; }
.fj-terminal .fsz__btn:hover { border-color:rgba(255,180,84,.5); }
.fj-terminal .fsz__btn[aria-pressed="true"] { border-color:rgba(255,180,84,.55); }
/* fj-ui 레이어가 하드코딩한 파랑·호박을 새 팔레트로 맞춘다 (같은 화면에 두 종류 파랑 금지) */
.fj-terminal.fj-ui :where(input,select,textarea):focus {
  border-color:rgba(87,199,255,.75);
  box-shadow:0 0 0 3px rgba(87,199,255,.14);
}
.fj-terminal.fj-ui :where(.section,.metric,.card,.stat,.hero__b):focus-within {
  outline-color:rgba(87,199,255,.55);
}
.fj-terminal.fj-ui .event__icon {
  background:rgba(87,199,255,.09);
  box-shadow:inset 0 0 0 1px rgba(87,199,255,.14);
}
.fj-terminal.fj-ui [data-magic-scroll-progress] {
  background:linear-gradient(90deg,var(--acc),var(--fj-cyan));
  box-shadow:0 0 10px rgba(87,199,255,.34);
}
.fj-terminal .magic-focus-badge {
  border-color:var(--fj-cyan-line);
  background:var(--fj-cyan-deep);
  color:var(--fj-cyan-ink);
}
.fj-terminal.fj-ui [data-magic-beam="focus"] {
  box-shadow:0 0 0 1px rgba(87,199,255,.4),0 0 26px -8px rgba(87,199,255,.4);
}

/* 카드: 4~6px 모서리 · 유리 그라데이션 제거 · 최소 그림자 */
.fj-terminal.fj-ui :where(.section,.metric,.card,.stat,.hero__b) {
  border-radius:6px;
  background-image:none;
  box-shadow:var(--fj-shadow);
}
@media (hover:hover) and (pointer:fine) {
  .fj-terminal.fj-ui :where(.section:not([data-autotrade-tone]),.metric,.card,.stat,.hero__b):hover {
    border-color:#475569;
    box-shadow:var(--fj-shadow);
  }
}
.fj-terminal :is(.btn,.chip,.preset,select,textarea,
  input:not([type="checkbox"]):not([type="radio"])) { border-radius:4px; }
.fj-terminal.fj-ui #autotrade-state-badge,
.fj-terminal.fj-ui .shadow-readiness__badge { border-radius:4px; }

/* 상태 톤 스트라이프를 팔레트 마크색으로 */
.fj-terminal.fj-ui [data-autotrade-tone="running"] { box-shadow:var(--fj-shadow), inset 3px 0 0 var(--fj-up-mark); }
.fj-terminal.fj-ui [data-autotrade-tone="halted"] { box-shadow:var(--fj-shadow), inset 3px 0 0 var(--fj-down-mark); }
.fj-terminal.fj-ui [data-autotrade-tone="stale"],
.fj-terminal.fj-ui [data-shadow-tone="blocked"] { box-shadow:var(--fj-shadow), inset 3px 0 0 var(--fj-warn-mark); }
.fj-terminal.fj-ui [data-shadow-tone="ready"] { box-shadow:var(--fj-shadow), inset 3px 0 0 var(--fj-up-mark); }
.fj-terminal.fj-ui [data-shadow-tone="unsafe"] { box-shadow:var(--fj-shadow), inset 3px 0 0 var(--fj-down-mark); }

/* magic 카드 글로우 색을 팔레트로 */
.fj-terminal [data-magic-card] { --magic-glow:rgba(87,199,255,.14); }
.fj-terminal [data-magic-card="warm"] { --magic-glow:rgba(255,180,84,.13); }
.fj-terminal [data-magic-card="good"] { --magic-glow:rgba(53,214,140,.11); }
.fj-terminal [data-magic-card="risk"] { --magic-glow:rgba(255,99,115,.1); }
.fj-terminal [data-magic-spotlight] { --magic-spotlight-glow:rgba(87,199,255,.16); }
.fj-terminal [data-magic-spotlight="warm"] { --magic-spotlight-glow:rgba(255,180,84,.15); }
.fj-terminal [data-magic-spotlight="good"] { --magic-spotlight-glow:rgba(53,214,140,.13); }
.fj-terminal [data-magic-spotlight="risk"] { --magic-spotlight-glow:rgba(255,99,115,.12); }

/* 터미널 인상: 라벨은 자간을 벌린 대문자 모노 — 유틸리티 클래스로도 제공 */
.fj-terminal :is(.section__title,.card__title) { letter-spacing:.03em; }
.fj-terminal :is(.eyebrow,.section__meta,.metric__label,.autotrade-overview__label,
  .shadow-readiness__label,.last-check) {
  text-transform:uppercase;
  letter-spacing:.08em;
}
.fj-terminal .fj-term-label {
  font-family:var(--font-mono);
  font-size:max(.6875rem,13px);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text3);
}
/* 작은 글씨 하한 — 13px 아래로는 내려가지 않는다 (fj-ui 의 max() 패턴) */
.fj-terminal :is(small,.tag,.eyebrow,.legend__value,.event__time,.event__sym,.last-check,
  .field__hint,.section__meta) { font-size:max(.6875rem,13px); }
.fj-terminal :is(.metric__value,.stat__val,.hero__v,.money-now__v) {
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

/* ─── 전광판 (tape) — window.FakeJavisTape.render(container, items) 가 채운다 ───
   items = [{sym, price, chgPct}]. 데이터가 없으면 JS가 컨테이너를 hidden 으로 숨긴다.
   그룹을 통째로 복제(aria-hidden)해 translateX(-50%) 무한 루프 → 이음새가 없다. */
.fj-terminal .fj-tape {
  position:relative;
  /* contain:paint가 전광판 궤적만 자른다. overflow 컨테이너가 아니므로 사용자가
     카드 안을 따로 스크롤하는 구조가 생기지 않고, 페이지 폭도 늘리지 않는다. */
  overflow:visible;
  contain:paint;
  background:var(--bg);
  /* 목업 .tape 는 아래 구분선만 있다 — 위쪽은 내비의 border-bottom 이 이미 긋는다 */
  border-top:0;
  border-bottom:1px solid var(--border);
}
.fj-terminal .fj-tape[hidden] { display:none; }
.fj-terminal .fj-tape::before,
.fj-terminal .fj-tape::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:64px;
  z-index:1;
  pointer-events:none;
}
.fj-terminal .fj-tape::before { left:0; background:linear-gradient(90deg,var(--bg),transparent); }
.fj-terminal .fj-tape::after { right:0; background:linear-gradient(270deg,var(--bg),transparent); }
.fj-terminal .fj-tape__track {
  display:flex;
  width:max-content;
  animation:fj-tape var(--fj-tape-dur,90s) linear infinite;
}
@media (hover:hover) and (pointer:fine) {
  .fj-terminal .fj-tape:hover .fj-tape__track { animation-play-state:paused; }
}
.fj-terminal .fj-tape__group,
.fj-terminal .fj-tape__set { display:flex; min-width:max-content; }
.fj-terminal .fj-tape__item {
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:6px 18px;
  border-right:1px solid var(--border);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:max(.7rem,14px);   /* 목업 .tape__item = 14px */
  white-space:nowrap;
}
.fj-terminal .fj-tape__sym { font-weight:700; color:var(--text); }
.fj-terminal .fj-tape__px { color:var(--text2); }
/* 등락은 맨 텍스트가 아니라 칩 — 띠가 회색 벽으로 보이던 원인 */
.fj-terminal :where(.fj-tape__chg--up,.fj-tape__chg--down,.fj-tape__chg--flat) {
  padding:1px 7px;
  border-radius:4px;
  border:1px solid transparent;
  font-weight:700;
}
.fj-terminal .fj-tape__chg--up {
  color:var(--fj-up-ink); background:var(--fj-up-deep); border-color:var(--fj-up-line);
}
.fj-terminal .fj-tape__chg--down {
  color:var(--fj-down-ink); background:var(--fj-down-deep); border-color:var(--fj-down-line);
}
.fj-terminal .fj-tape__chg--flat { color:var(--fj-ink4); }
@keyframes fj-tape { to { transform:translateX(-50%); } }

/* ─── 차트 액션 키트 ───
   data-magic-chart="draw": 안의 stroke 있는 path/polyline 을 dashoffset 으로 그린다 (JS).
   .magic-chart-dot: 차트 끝점 요소에 붙이는 은은한 글로우 펄스.
   .magic-bar-sheen: 값 갱신 시 광택이 한 번 쓸고 가는 막대 (FakeJavisMagicUI.sheen). */
.fj-terminal [data-magic-chart="draw"] :where(path,polyline).magic-chart-draw {
  transition:stroke-dashoffset var(--fj-chart-draw-dur,.9s) cubic-bezier(.22,1,.36,1);
}
.fj-terminal .magic-chart-dot { animation:fj-chart-dot 2.6s ease-in-out infinite; }
.fj-terminal canvas { filter:drop-shadow(0 0 10px rgba(87,199,255,.18)); }
.fj-terminal .magic-bar-sheen { overflow:hidden; }
.fj-terminal .magic-bar-sheen::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(248,250,252,.32) 50%,transparent 65%);
  transform:translateX(-110%);
  animation:fj-bar-sheen .7s ease-out 1 both;
}
@keyframes fj-chart-dot {
  0%,100% { opacity:1; filter:drop-shadow(0 0 2px currentColor); }
  50% { opacity:.55; filter:drop-shadow(0 0 7px currentColor); }
}
@keyframes fj-bar-sheen { to { transform:translateX(110%); } }

/* ─── 숫자 플래시 — 체결 번쩍임. magicAnimateNumber 가 이전 값과 비교해 500ms 붙인다 ─── */
.fj-terminal .magic-flash-up { color:var(--g); animation:fj-num-flash .5s ease-out 1; }
.fj-terminal .magic-flash-down { color:var(--r); animation:fj-num-flash .5s ease-out 1; }
@keyframes fj-num-flash {
  0% { filter:brightness(1.7) drop-shadow(0 0 9px currentColor); }
  100% { filter:none; }
}

/* ═══ 밀도 토큰 · 벤토 그리드 · 재사용 유틸리티 ═════════════════════════════
   값은 승인 시안 docs/design-drafts/sian-a.html 의 .frame/.grid/.card/.card__head
   실측치를 그대로 옮긴 것이다. 색이 아니라 "촘촘함"이 이 테마의 정체성이다.
   전부 .fj-terminal 스코프 — 클래스 없는 화면은 픽셀 하나 변하지 않는다. */
:root.fj-terminal {
  --fj-frame-max:1440px;      /* 목업 .frame */
  --fj-frame-pad:14px 20px 30px;
  --fj-gap:12px;              /* 목업 .grid gap */
  --fj-card-pad:14px 16px;    /* 목업 .card */
  --fj-card-radius:6px;
  --fj-panel-pad:9px 11px;    /* 목업 .cock__stat / .perf__cell — 카드 안 작은 패널 */
  --fj-panel-radius:5px;
  --fj-head-gap:12px;         /* 카드 헤더 아래 여백 */
  --fj-head-pad:9px;          /* 카드 헤더 구분선까지의 패딩 */
  --fj-label:max(.65rem,13px);/* 대문자 모노 라벨 — 목업 13px */
  --fj-meta:max(.7rem,14px);  /* 한글 부제·메타 — 목업 14px */
  --fj-lede-size:max(.9rem,18px); /* 굵은 한 줄 결론 — 목업 .verdict__msg 18px */
}

/* ── 프레임: 1440px 폭, 목업 패딩 ── */
.fj-terminal :where(.dashboard-frame,.fj-frame) {
  max-width:var(--fj-frame-max);
  padding:var(--fj-frame-pad);
}

/* ── 카드: 14px 16px · 6px 모서리. 세로로 늘어지던 여백을 목업 값으로 조인다 ── */
.fj-terminal.fj-ui :where(.section,.card) {
  padding:var(--fj-card-pad);
  border-radius:var(--fj-card-radius);
}
/* 카드 안의 작은 통계 패널 */
.fj-terminal.fj-ui :where(.stat,.metric) {
  padding:var(--fj-panel-pad);
  border-radius:var(--fj-panel-radius);
}

/* ── 카드 헤더: 아래 1px 구분선 + baseline 정렬 (목업 .card__head) ── */
.fj-terminal.fj-ui :where(.section__title,.card__title) {
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:var(--fj-head-gap);
  padding-bottom:var(--fj-head-pad);
  border-bottom:1px solid var(--border);
  font-size:var(--fj-meta);
  line-height:1.4;
}
.fj-terminal.fj-ui :where(.section__meta,.eyebrow,.last-check) { font-size:var(--fj-label); }

/* ── 그리드 간격: 16px → 12px ── */
.fj-terminal :where(.main,.grid,.top2,.cards,.magic-bento) { gap:var(--fj-gap); }

/* ── .fj-eyebrow — 대문자 모노 영문 라벨. 목업의 "TODAY'S CALL" ──
   쓰는 법: <span class="fj-eyebrow">TODAY'S CALL</span> 오늘의 판단 */
.fj-terminal .fj-eyebrow {
  font-family:var(--font-mono);
  font-size:var(--fj-label);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text3);
  white-space:nowrap;
}

/* ── .fj-lede — 카드 맨 위 굵은 한 줄 결론. 읽어야 할 글자는 크게 남긴다 ── */
.fj-terminal .fj-lede {
  margin:0 0 6px;
  font-size:var(--fj-lede-size);
  font-weight:700;
  line-height:1.5;
  color:var(--text);
  overflow-wrap:anywhere;
}
.fj-terminal .fj-lede + :where(p,.fj-lede__sub) { margin-top:0; }
.fj-terminal .fj-lede__sub {
  margin:0;
  font-size:var(--fj-meta);
  line-height:1.6;
  color:var(--text2);
}

/* ── .fj-bento — 목업의 12칸 그리드. 자식에 .c3/.c4/.c5/.c6/.c8/.c12 로 폭을 준다 ──
   글씨를 23px 로 키워도 3열이 깨지지 않도록 모든 칸에 min-width:0.
   안쪽 표도 별도 스크롤 영역을 만들지 않고 카드 폭 안에서 자연스럽게 확장한다. */
.fj-terminal .fj-bento {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--fj-gap);
  align-items:start;
  min-width:0;
}
.fj-terminal .fj-bento > * { grid-column:span 12; min-width:0; }
.fj-terminal .fj-bento > .c3 { grid-column:span 3; }
.fj-terminal .fj-bento > .c4 { grid-column:span 4; }
.fj-terminal .fj-bento > .c5 { grid-column:span 5; }
.fj-terminal .fj-bento > .c6 { grid-column:span 6; }
.fj-terminal .fj-bento > .c8 { grid-column:span 8; }
.fj-terminal .fj-bento > .c12 { grid-column:span 12; }
.fj-terminal .fj-bento :where(table) { min-width:0; }
.fj-terminal .fj-bento :where(.table-wrap,.scroll-box,.tblwrap,.fj-scroll-x) {
  width:100%;
  max-width:100%;
  overflow:visible;
  min-width:0;
}
/* 980px 이하 = 6칸(2열), 760px 이하 = 12칸(1열).
   ⚠ 접힘 규칙은 반드시 `> .c3` 명시(특이도 0,3,0)로 쓴다 — 예전 `:where(...)`·`> *`(0,2,0)는
   위의 폭 규칙 `> .c3`(0,3,0)에 져서 두 브레이크포인트가 통째로 무력화됐다
   (2026-08-26 헤드리스 실측: 390px 에서 .c3=83px·.c4=114px 3열 유지). 미디어쿼리는
   특이도를 올려주지 않는다. c8→12칸 규칙은 (0,3,0)이라 원래부터 정상이었다. */
@media (max-width:980px) {
  .fj-terminal .fj-bento > .c3,
  .fj-terminal .fj-bento > .c4,
  .fj-terminal .fj-bento > .c5,
  .fj-terminal .fj-bento > .c6 { grid-column:span 6; }
  .fj-terminal .fj-bento > .c8 { grid-column:span 12; }
}
@media (max-width:760px) {
  .fj-terminal .fj-bento > *,
  .fj-terminal .fj-bento > .c3,
  .fj-terminal .fj-bento > .c4,
  .fj-terminal .fj-bento > .c5,
  .fj-terminal .fj-bento > .c6 { grid-column:span 12; }
}

/* ═══ 중요도 3단 · 등락 칩 · 셀 — "3초 안에 무엇이 중요한지" ═══════════════
   2026-08-27. 사용자 지적: "글씨와 숫자들이 전부 흰색이라 뭐가 중요한지 모르겠다."
   원인은 카드면이 한 단계뿐이고 등락 숫자가 맨 텍스트라 표가 회색 벽으로 보인 것.
   화면 담당은 **여기 있는 클래스만 붙이면 된다** — 색을 직접 쓰지 말 것. */
:root.fj-terminal {
  --fj-card-pad-hi:18px 20px;   /* 1순위 카드 — 기본 14px 16px 보다 한 단계 넓게 */
  --fj-rank-line:3px;           /* 1순위 좌측 강조선 두께 */
}

/* ── 1순위: 오늘의 결론·콕핏 같은 "먼저 볼 카드". 한 화면에 2개까지 ──
   쓰는 법: <section class="section fj-rank1"> … </section>
            시안 계열 강조선이 필요하면 .fj-rank1.fj-rank1--cyan */
.fj-terminal.fj-ui .fj-rank1 {
  padding:var(--fj-card-pad-hi);
  border-color:var(--border2);
  background-color:var(--fj-pane-hi);
  background-image:linear-gradient(180deg,rgba(255,180,84,.055),transparent 42%);
}
/* 좌측 강조선은 inset 그림자 — 폭을 늘리지 않아 3열 그리드가 흔들리지 않는다.
   콕핏처럼 [data-autotrade-tone] 이 이미 상태 스트라이프를 그리는 카드는 건드리지 않는다. */
.fj-terminal.fj-ui .fj-rank1:not([data-autotrade-tone]) {
  box-shadow:inset var(--fj-rank-line) 0 0 var(--acc),var(--fj-shadow);
}
.fj-terminal.fj-ui .fj-rank1--cyan:not([data-autotrade-tone]) {
  background-image:linear-gradient(180deg,rgba(87,199,255,.05),transparent 42%);
  box-shadow:inset var(--fj-rank-line) 0 0 var(--fj-cyan),var(--fj-shadow);
}
.fj-terminal .fj-rank1 :where(.fj-lede,.section__title,.card__title) { color:var(--text); }

/* ── 2순위: 기본면. 명시적으로 되돌리고 싶을 때만 쓴다 ── */
.fj-terminal.fj-ui .fj-rank2 {
  padding:var(--fj-card-pad);
  background-color:var(--bg2);
  background-image:none;
  border-color:var(--fj-surface-line);
}

/* ── 3순위: 서랍·푸터·각주. 눌러야 보이는 것들 ── */
.fj-terminal.fj-ui .fj-rank3 {
  background-color:var(--fj-pane-lo);
  background-image:none;
  border-color:var(--border);
  color:var(--fj-ink4);
}
.fj-terminal .fj-rank3 :where(p,li,td,dd,small,.section__meta,.fj-lede__sub) { color:var(--fj-ink4); }
.fj-terminal .fj-rank3 :where(.section__title,.card__title,.fj-lede,summary) { color:var(--text3); }
/* 각주 한 줄용 텍스트 유틸 (카드가 아니라 문장에 붙인다) */
.fj-terminal .fj-note { color:var(--fj-ink4); font-size:var(--fj-label); line-height:1.5; }

/* ── 등락 칩 — deep 배경 + 진한 글자 + ▲▼ 여백 ────────────────────────
   쓰는 법 (둘 중 하나):
     1) <span class="fj-chip--up"><i class="fj-chip__dir">▲</i>1.24%</span>
     2) <span class="fj-chip--up" data-arrow>1.24%</span>   ← ▲▼ 를 CSS 가 넣는다
   부호는 색만으로 구분하지 않는다(색약 배려) — 반드시 ▲▼ 또는 +/− 를 함께 둔다. */
.fj-terminal :where(.fj-chip,.fj-chip--up,.fj-chip--down,.fj-chip--warn,.fj-chip--info,.fj-chip--flat) {
  display:inline-flex;
  align-items:baseline;
  gap:.28em;
  padding:1px 8px;
  border:1px solid var(--border2);
  border-radius:4px;
  background:var(--bg3);
  color:var(--text2);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:max(.7rem,14px);
  font-weight:700;
  line-height:1.5;
  white-space:nowrap;
  vertical-align:baseline;
}
.fj-terminal .fj-chip__dir { font-style:normal; font-size:.86em; line-height:1; }
.fj-terminal .fj-chip--up {
  background:var(--fj-up-deep); border-color:var(--fj-up-line); color:var(--fj-up-ink);
}
.fj-terminal .fj-chip--down {
  background:var(--fj-down-deep); border-color:var(--fj-down-line); color:var(--fj-down-ink);
}
.fj-terminal .fj-chip--warn {
  background:var(--fj-acc-deep); border-color:var(--fj-acc-line); color:var(--fj-acc-ink);
}
.fj-terminal .fj-chip--info {
  background:var(--fj-cyan-deep); border-color:var(--fj-cyan-line); color:var(--fj-cyan-ink);
}
.fj-terminal .fj-chip--flat { background:var(--fj-pane-lo); border-color:var(--border); color:var(--fj-ink4); }
.fj-terminal .fj-chip--up[data-arrow]::before { content:"▲"; font-size:.8em; }
.fj-terminal .fj-chip--down[data-arrow]::before { content:"▼"; font-size:.8em; }
.fj-terminal .fj-chip--flat[data-arrow]::before { content:"·"; font-size:.8em; }
/* 표 안에서 쓸 때 칸 높이를 키우지 않게 */
.fj-terminal :where(td,th) > :where(.fj-chip,.fj-chip--up,.fj-chip--down,.fj-chip--warn,.fj-chip--info,.fj-chip--flat) {
  margin:-1px 0;
}
/* 큰 칩 — 히어로 등락처럼 눈에 먼저 들어와야 하는 자리 */
.fj-terminal .fj-chip--lg { padding:3px 11px; font-size:max(.78rem,15px); border-radius:5px; }

/* ── 매트릭스·달력 셀 ──────────────────────────────────────────────────
   농도(배경 알파)는 **데이터의 max(|값|)에서 화면이 계산해 inline style 로** 준다.
   shell 은 상수를 갖지 않는다(없는 숫자 금지). 여기서는 뼈대와 빈 셀만 책임진다. */
.fj-terminal .fj-cell {
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:max(.62rem,12px);
  text-align:center;
  white-space:nowrap;
  border:1px solid var(--bg);
  color:var(--text2);
}
.fj-terminal .fj-cell--up { background:var(--fj-up-deep); color:var(--fj-up-ink); }
.fj-terminal .fj-cell--down { background:var(--fj-down-deep); color:var(--fj-down-ink); }
/* 값이 없는 날 = 0 이 아니다. 빗금 + 흐린 글자로 "자료 없음"을 눈에 보이게. */
.fj-terminal .fj-cell--null {
  background-color:var(--fj-pane-lo);
  background-image:repeating-linear-gradient(45deg,transparent 0 3px,rgba(148,166,194,.14) 3px 6px);
  color:var(--fj-ink4);
}
/* 셀 호버 확대 — 달력·매트릭스 전용. 표 레이아웃은 그대로 두고 transform 만 쓴다. */
.fj-terminal .fj-zoom-cell {
  position:relative;
  transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s ease;
}
@media (hover:hover) and (pointer:fine) {
  .fj-terminal .fj-zoom-cell:hover {
    transform:scale(1.22);
    z-index:3;
    box-shadow:0 4px 14px rgba(3,7,16,.6);
  }
}
.fj-terminal .fj-zoom-cell:focus-visible {
  transform:scale(1.22);
  z-index:3;
}

/* ── 라이브 dot — 데이터 수신·자동매매 "살아있음" 표시 (무한 3.4s) ──
   쓰는 법: <span class="fj-live-dot" aria-hidden="true"></span> 수신 중
   ⚠ 상태를 색·점만으로 알리지 말 것 — 반드시 옆에 글자를 함께 둔다. */
.fj-terminal .fj-live-dot {
  position:relative;
  display:inline-block;
  flex:none;
  width:9px;
  height:9px;
  border-radius:50%;
  background:currentColor;
  color:var(--g);
  vertical-align:baseline;
}
.fj-terminal .fj-live-dot--warn { color:var(--acc); }
.fj-terminal .fj-live-dot--risk { color:var(--r); }
.fj-terminal .fj-live-dot--info { color:var(--fj-cyan); }
.fj-terminal .fj-live-dot--off { color:var(--fj-ink4); }
.fj-terminal .fj-live-dot::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:currentColor;
  opacity:0;
  pointer-events:none;
  animation:fj-live-dot 3.4s cubic-bezier(.22,1,.36,1) infinite;
}
.fj-terminal .fj-live-dot--off::after { animation:none; }
@keyframes fj-live-dot {
  0% { transform:scale(1); opacity:.55; }
  70%,100% { transform:scale(2.8); opacity:0; }
}

/* ── border-beam "live" — 테두리를 도는 앰버 빛, 무한 ──────────────────
   data-magic-beam="live" 는 **한 화면에서 1순위 카드 딱 하나**에만 쓴다.
   "focus"(먼저 볼 것 배지 + 시안 빔)와 성격이 다르다: live 는 배지가 없고 앰버다.
   ⚠ 킬스위치·주문·삭제·초기화 카드에는 절대 붙이지 않는다(§3.4). */
.fj-ui [data-magic-beam="live"] {
  box-shadow:0 0 0 1px rgba(255,180,84,.34),0 0 30px -10px rgba(255,180,84,.5);
}
.fj-ui .magic-border-beam--live {
  padding:1.5px;
  opacity:.9;
  background:conic-gradient(from var(--magic-beam-angle,0deg),
    transparent 0 60%,rgba(255,180,84,.22) 73%,var(--acc,#FFB454) 86%,#FFE0B0 92%,transparent 100%);
  animation:fj-magic-beam 4.2s linear infinite;
}

/* ── 카드 호버: 살짝 떠오름 + 테두리 밝아짐 ────────────────────────────
   ⚠ 위험 조작부 제외 목록은 shell.js 의 팔레트 위험 판별(FJ_DANGER_*)과 **같은 규칙**이다.
   id 에 kill/halt/stop/order/reset/del/danger/autotrade/disconnect/wipe 가 들어가거나
   안에 .btn--danger·[data-autotrade-action]·[data-kill]·[data-danger] 가 있으면 정적 유지.
   화면이 직접 끄고 싶으면 카드에 data-fj-static 을 붙인다. */
@media (hover:hover) and (pointer:fine) {
  .fj-terminal.fj-ui :where(.section,.card,.metric,.stat,.hero__b,.fj-rank1,.fj-rank2,.fj-rank3):not([data-autotrade-tone],[data-fj-static],[id*="kill" i],[id*="halt" i],[id*="stop" i],[id*="order" i],[id*="reset" i],[id*="del" i],[id*="danger" i],[id*="autotrade" i],[id*="disconnect" i],[id*="wipe" i]):not(:has(.btn--danger,[data-autotrade-action],[data-autotrade-tone],[data-kill],[data-danger],[data-del],[data-destructive],[data-fj-static])):hover {
    transform:translateY(-2px);
    border-color:var(--fj-surface-hover);
    box-shadow:0 10px 24px rgba(3,7,16,.5),var(--fj-shadow);
  }
}

/* 텍스트 액션 — 색 전환 + 아래선이 왼쪽에서 오른쪽으로 짧게 열린다.
   내비의 현재 탭 선·data-tip 말풍선과 pseudo-element가 겹치지 않게 그 둘은 제외한다. */
.fj-terminal.fj-ui :where(
  a:not(.nav__link):not(.tabbar__link):not(.fj-statusbar__item):not([data-tip]),
  button:not([data-tip])
) {
  position:relative;
  transition:color .16s ease,border-color .16s ease,background-color .16s ease;
}
.fj-terminal.fj-ui :where(
  a:not(.nav__link):not(.tabbar__link):not(.fj-statusbar__item):not([data-tip]),
  button:not([data-tip])
)::after {
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:1px;
  height:1px;
  border-radius:1px;
  background:linear-gradient(90deg,var(--fj-cyan),var(--acc));
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine) {
  .fj-terminal.fj-ui :where(
    a:not(.nav__link):not(.tabbar__link):not(.fj-statusbar__item):not([data-tip]),
    button:not([data-tip])
  ):hover { color:var(--fj-cyan); }
  .fj-terminal.fj-ui :where(
    a:not(.nav__link):not(.tabbar__link):not(.fj-statusbar__item):not([data-tip]),
    button:not([data-tip])
  ):is(:hover,:focus-visible)::after { transform:scaleX(1); }
}
/* 위험 조작부와 그 host: 색 전환 외의 이동·발광·밑줄 모션은 무조건 끈다. */
.fj-terminal.fj-ui [data-fj-static],
.fj-terminal.fj-ui [data-autotrade-tone] { transform:none !important; }
/* 위험 host 안의 숫자·목록·게이지·로딩까지 정적이다. JS 게이트가 늦게 붙거나
   꺼져 있어도 주문·중단·삭제 영역에서 장식 모션이 한 프레임도 남지 않는다. */
.fj-terminal.fj-ui [data-fj-static],
.fj-terminal.fj-ui [data-fj-static] * {
  animation:none !important;
  transition-duration:0s !important;
}
.fj-terminal.fj-ui [data-fj-static] :where(a,button)::after,
.fj-terminal.fj-ui :where(a,button):is(.btn--danger,[data-autotrade-action],[data-kill],[data-danger],[data-del],[data-destructive],[data-fj-static],[href*="autotrade" i],[href*="kill" i],[href*="stop" i],[id*="kill" i],[id*="halt" i],[id*="stop" i],[id*="order" i],[id*="reset" i],[id*="del" i],[id*="danger" i],[id*="autotrade" i],[id*="disconnect" i],[id*="wipe" i],[id*="restore" i],[id*="unlock" i])::after {
  content:none !important;
}
.fj-terminal.fj-ui [data-magic-beam][data-fj-static] { box-shadow:none !important; }

@media (max-width:760px) {
  .fj-terminal.fj-ui .nav { background:rgba(12,22,38,.97); }
  .fj-terminal .fj-tape::before,
  .fj-terminal .fj-tape::after { width:32px; }
  .fj-terminal :where(.dashboard-frame,.fj-frame) { padding:12px 12px 26px; }
  .fj-terminal.fj-ui .fj-rank1 { padding:15px 15px; }
}
@media (forced-colors:active) {
  .fj-terminal body { background-image:none; }
  .fj-terminal .fj-tape::before,
  .fj-terminal .fj-tape::after { display:none; }
  .fj-terminal canvas { filter:none; }
  .fj-terminal .magic-chart-dot { animation:none; filter:none; }
  .fj-terminal .magic-bar-sheen::after { content:none; }
  /* 강제 색 모드: 칩·셀은 배경색이 사라지므로 테두리와 부호로만 구분된다 */
  .fj-terminal :where(.fj-chip,.fj-chip--up,.fj-chip--down,.fj-chip--warn,.fj-chip--info,.fj-chip--flat),
  .fj-terminal :where(.fj-cell,.fj-cell--up,.fj-cell--down,.fj-cell--null) {
    border:1px solid CanvasText;
    background:Canvas;
    color:CanvasText;
    background-image:none;
  }
  .fj-terminal .fj-live-dot::after { animation:none; }
  .fj-terminal .fj-rank1,
  .fj-terminal .fj-rank3 { background-image:none; box-shadow:none; }
  .fj-terminal .fj-rank1 { outline:2px solid Highlight; outline-offset:-2px; }
}
@media (prefers-reduced-motion:reduce) {
  /* 사용자 선택이 최우선이다. 카드·행·버튼·링크까지 남아 있던 짧은 transition도 모두 끈다. */
  .fj-terminal.fj-ui *,
  .fj-terminal.fj-ui *::before,
  .fj-terminal.fj-ui *::after {
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  /* 전광판: 정지된 정적 목록 — 복제는 숨기고 첫 세트를 여러 줄로 감싼다. */
  .fj-terminal .fj-tape { overflow:visible; contain:paint; }
  .fj-terminal .fj-tape__track { animation:none; transform:none; width:100%; flex-wrap:wrap; }
  .fj-terminal .fj-tape__group,
  .fj-terminal .fj-tape__set { width:100%; min-width:0; flex-wrap:wrap; justify-content:center; }
  .fj-terminal .fj-tape__group--dup { display:none; }
  .fj-terminal .fj-tape__set[aria-hidden="true"] { display:none; }
  .fj-terminal .fj-tape__item { white-space:normal; }
  .fj-terminal [data-magic-chart="draw"] :where(path,polyline) {
    transition:none;
    stroke-dasharray:none !important;
    stroke-dashoffset:0 !important;
  }
  .fj-terminal .magic-chart-dot { animation:none; filter:none; }
  .fj-terminal .magic-bar-sheen::after { content:none; animation:none; }
  .fj-terminal .magic-flash-up,
  .fj-terminal .magic-flash-down { animation:none; filter:none; }
  /* 2026-08-27 신규 효과도 전부 정지 — 색·테두리(정보)는 남고 움직임만 사라진다 */
  .fj-terminal .magic-spotlight__glow { transition:none; }
  .fj-terminal.fj-ui :where(a,button)::after { transition:none; }
  .fj-terminal .fj-live-dot::after { animation:none; opacity:0; }
  .fj-ui .magic-border-beam--live { animation:none; display:none; }
  .fj-ui [data-magic-beam="live"] { box-shadow:0 0 0 1.5px rgba(255,180,84,.6); }
  .fj-terminal.fj-ui [data-magic-beam="focus"] { box-shadow:0 0 0 1.5px rgba(87,199,255,.6); }
  .fj-terminal .fj-zoom-cell { transition:none; transform:none !important; }
  .fj-terminal.fj-ui :where(.section,.card,.metric,.stat,.hero__b,.fj-rank1,.fj-rank2,.fj-rank3):hover {
    transform:none;
  }
}
@media print {
  /* 인쇄·저장본에서는 등장 모션이 끝나지 않은 카드도 전부 보여야 한다 */
  .fj-ui.magic-ui-ready [data-magic-reveal] { opacity:1 !important; filter:none !important; transform:none !important; }
  .fj-ui .magic-border-beam,
  .fj-terminal .fj-live-dot::after { display:none; }
}

/* ─── 숫자 카운트업 (data-magic-countup · shell.js) ───
   등장 시 0→값 1회. 자릿수가 도는 동안 폭이 널뛰지 않게 tabular-nums 고정.
   모션 자체는 JS(rAF)라 reduced-motion 이면 아예 시작하지 않는다. */
.fj-ui [data-magic-countup] { font-variant-numeric:tabular-nums; }

/* ─── 하단 고정 상태줄 — window.FakeJavisStatusbar.render(el, items) 가 채운다 ───
   데이터 시각 · PAPER 상태 · 멈춤 경로 링크 · "규칙 기반·참고용" 같은 항목을
   페이지가 실데이터로 넣는다. 빈 items·미호출이면 hidden — 아무것도 안 보인다.
   z-index 29: 모바일 탭바(30)·바텀시트(40)·스크롤 진행바(60) 아래.
   모바일에서는 탭바 "위"에 얇게 얹힌다 — 오프셋·본문 여백은 shell.js 가 실측으로 넣는다. */
.fj-ui .fj-statusbar {
  position:fixed;
  left:0;
  right:0;
  bottom:var(--fj-statusbar-offset, 0px);
  z-index:29;
  border-top:1px solid var(--border2);
  background:rgba(10,14,20,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.fj-ui .fj-statusbar[hidden] { display:none; }
.fj-terminal .fj-statusbar { background:rgba(10,18,32,.96); border-top-color:var(--border2); }
.fj-ui .fj-statusbar__track {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  max-width:var(--fj-frame-max, 1440px);
  margin:0 auto;
  padding:6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
  overflow:visible;
  white-space:normal;
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  /* 움직임을 끈 폰에서는 전광판 18개를 세로로 모두 펼치지 않는다. 관심종목 전량은
     본문 카드/매트릭스에 있고, 위 띠는 대표 두 종목만 정적으로 요약한다. */
  .fj-terminal .fj-tape__track,
  .fj-terminal .fj-tape__group,
  .fj-terminal .fj-tape__set { flex-wrap:nowrap; justify-content:center; }
  .fj-terminal .fj-tape__item:nth-child(n+3) { display:none; }
}
.fj-ui .fj-statusbar__item {
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  color:var(--text2);
  text-decoration:none;
  overflow-wrap:anywhere;
}
.fj-ui .fj-statusbar__label {
  color:var(--text3);
  font-family:var(--font-mono, inherit);
  font-size:max(.6875rem, 13px);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.fj-ui .fj-statusbar__value {
  color:var(--text);
  font-size:max(.75rem, 14px);
  line-height:1.45;
  font-variant-numeric:tabular-nums;
}
.fj-ui .fj-statusbar__item--ok .fj-statusbar__value { color:var(--g); }
.fj-ui .fj-statusbar__item--warn .fj-statusbar__value { color:var(--fj-warn-text, var(--acc)); }
.fj-ui .fj-statusbar__item--muted .fj-statusbar__value { color:var(--text3); }
/* 링크 항목(멈춤 경로 등)은 밑줄로 링크임을 드러낸다 — 색만으로 구분하지 않는다 */
.fj-ui a.fj-statusbar__item .fj-statusbar__value { text-decoration:underline; text-underline-offset:3px; }
.fj-ui a.fj-statusbar__item:hover .fj-statusbar__value,
.fj-ui a.fj-statusbar__item:hover .fj-statusbar__label { color:var(--acc); }
.fj-ui .fj-statusbar__cmd {
  margin-left:auto;
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  padding:2px 9px;
  border:1px solid var(--border2);
  border-radius:6px;
  background:var(--bg2);
  color:var(--text2);
  font-family:inherit;
  font-size:max(.6875rem, 13px);
  cursor:pointer;
}
.fj-ui .fj-statusbar__cmd:hover { color:var(--text); border-color:rgba(240,165,0,.5); }
.fj-terminal .fj-statusbar__cmd { border-radius:4px; }
.fj-terminal .fj-statusbar__cmd:hover { border-color:rgba(255,180,84,.55); color:var(--acc); }
.fj-ui .fj-statusbar__cmd kbd {
  font-family:var(--font-mono, monospace);
  font-size:max(.625rem, 12px);
  border:1px solid var(--border2);
  border-radius:4px;
  padding:0 4px;
  background:var(--bg3, var(--bg2));
}
/* 본문 마지막 카드가 상태줄에 가려지지 않게 — 정확한 값은 shell.js 가 실측으로 갱신 */
.fj-ui body.has-fj-statusbar { padding-bottom:var(--fj-statusbar-clearance, 3.25rem); }
@media (max-width:760px) {
  .fj-ui .fj-statusbar__track { gap:12px; padding-inline:12px; }
  /* 탭바가 켜진 화면: 안전영역 패딩은 탭바가 이미 가졌다 — 여기서 겹으로 더하지 않는다 */
  .fj-ui body.has-tabbar .fj-statusbar .fj-statusbar__track { padding-bottom:6px; }
}
@media (pointer:coarse) {
  /* [QA 2026-08-26] 터치 표적 44px 계약(browser-smoke 모바일 a11y, 절대 유지) — 32px 는 미달이라 상향 */
  .fj-ui .fj-statusbar__cmd { min-height:44px; }
}
@media (forced-colors:active) {
  .fj-ui .fj-statusbar { border-top:1px solid CanvasText; background:Canvas; }
}

/* ─── 명령 팔레트 (Ctrl+K · window.FakeJavisPalette · native dialog) ───
   이동·조회 전용. showModal() 이라 top layer — z-index 경쟁이 없다. */
.fj-ui .fj-palette {
  position:fixed;
  inset:16px auto auto 50%;
  width:min(760px, calc(100vw - 32px));
  max-width:none;
  max-height:calc(100dvh - 32px);
  margin:0;
  padding:0;
  border:1px solid var(--border2);
  border-radius:8px;
  background:var(--bg2, #0F172A);
  color:var(--text, #E6EDF7);
  box-shadow:0 24px 64px rgba(0,0,0,.45);
  overflow:visible;
  transform:translateX(-50%);
}
.fj-terminal .fj-palette { border-radius:6px; }
.fj-ui .fj-palette::backdrop { background:rgba(2,6,23,.62); }
.fj-ui .fj-palette__input {
  width:100%;
  box-sizing:border-box;
  border:0;
  border-bottom:1px solid var(--border2);
  border-radius:0;
  background:transparent;
  color:var(--text);
  padding:13px 16px;
  font-family:inherit;
  font-size:max(.9375rem, 16px);
  line-height:1.4;
}
.fj-ui .fj-palette__input:focus {
  outline:none;
  box-shadow:none;
  border-bottom-color:rgba(240,165,0,.55);
}
.fj-ui .fj-palette__list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  list-style:none;
  margin:0;
  padding:6px;
  overflow:visible;
}
.fj-ui .fj-palette__group {
  grid-column:1 / -1;
  padding:8px 10px 3px;
  color:var(--text3);
  font-family:var(--font-mono, inherit);
  font-size:max(.6875rem, 12px);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.fj-ui .fj-palette__opt {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  border-radius:6px;
  color:var(--text2);
  cursor:pointer;
  line-height:1.45;
}
.fj-terminal .fj-palette__opt { border-radius:4px; }
.fj-ui .fj-palette__opt[aria-selected="true"] {
  background:var(--bg3, #1E293B);
  color:var(--text);
  box-shadow:inset 0 0 0 1px var(--border2);
}
.fj-ui .fj-palette__opt small {
  color:var(--text3);
  font-family:var(--font-mono, monospace);
  font-size:max(.6875rem, 12px);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  max-width:45%;
}
@media (max-width:480px) {
  /* 폰 고정줄은 긴 진단 5개를 쌓아 화면 절반을 덮지 않는다. 가장 중요한 멈춤 경로만
     고정하고 데이터 시각·PAPER 상태는 바로 위 헤더/카드에서 그대로 확인한다. */
  .fj-ui .fj-statusbar__track { justify-content:center; gap:0; padding:5px 8px; }
  .fj-ui .fj-statusbar__item:nth-of-type(n+2),
  .fj-ui .fj-statusbar__cmd { display:none; }
  /* 고정줄의 멈춤 링크도 실제 조작 경로다. 글자 높이에 기대지 않고 44px 터치 표적을 보장한다. */
  .fj-ui .fj-statusbar__item { justify-content:center; }
  .fj-ui a.fj-statusbar__item { min-height:44px; align-items:center; }
}
.fj-ui .fj-palette__empty {
  grid-column:1 / -1;
  padding:16px 14px;
  color:var(--text3);
  font-size:max(.8125rem, 15px);
}
.fj-ui .fj-palette__foot {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  padding:8px 14px;
  border-top:1px solid var(--border);
  color:var(--text3);
  font-size:max(.6875rem, 12px);
}
.fj-ui .fj-palette__foot kbd {
  font-family:var(--font-mono, monospace);
  border:1px solid var(--border2);
  border-radius:4px;
  padding:0 4px;
  background:var(--bg3, var(--bg2));
}
.fj-ui .fj-palette__close {
  min-width:72px; min-height:44px; margin-left:auto; padding:7px 12px;
  border:1px solid var(--border2); border-radius:5px; background:var(--bg3, var(--bg2));
  color:var(--text2); font:inherit; cursor:pointer;
}
/* 두 열로도 뷰포트에 다 들어오지 않는 많은 명령은 native dialog.show()로
   페이지 흐름에 옮긴다. 이 모드의 유일한 스크롤 축은 body/html 세로 축이다. */
.fj-ui .fj-palette.fj-palette--flow {
  position:relative; inset:auto; max-height:none; width:calc(100% - 24px);
  margin:18px auto; overflow:visible; box-shadow:0 18px 44px rgba(0,0,0,.32); transform:none;
}
.fj-terminal .fj-palette { background:var(--fj-pane-hi); }
.fj-terminal .fj-palette__input:focus { border-bottom-color:rgba(255,180,84,.6); }
.fj-terminal .fj-palette__opt[aria-selected="true"] { background:var(--bg3); }
/* 팔레트로 이동한 구역의 1회성 표시 — 위험 조작부에는 JS 가 클래스를 아예 붙이지 않는다 */
.fj-ui .fj-palette-hit { animation:fj-palette-hit 1.2s ease-out 1; }
.fj-terminal .fj-palette-hit { animation:fj-palette-hit-term 1.3s ease-out 1; }
@keyframes fj-palette-hit {
  0% { box-shadow:0 0 0 2px rgba(56,176,240,.55); }
  100% { box-shadow:0 0 0 2px rgba(56,176,240,0); }
}
@keyframes fj-palette-hit-term {
  0% { box-shadow:0 0 0 2px rgba(87,199,255,.6); }
  100% { box-shadow:0 0 0 2px rgba(87,199,255,0); }
}
@media (max-width:760px) {
  .fj-ui .fj-palette { width:calc(100vw - 24px); margin-top:16px; }
  .fj-ui .fj-palette__list { grid-template-columns:minmax(0,1fr); }
  .fj-ui .fj-palette__group,.fj-ui .fj-palette__empty { grid-column:1; }
  .fj-ui .fj-palette__opt { align-items:flex-start; }
  .fj-ui .fj-palette__foot { gap:8px 12px; }
  .fj-ui .fj-palette__foot > span { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .fj-ui .fj-palette-hit { animation:none; }
}
@media (forced-colors:active) {
  .fj-ui .fj-palette__opt[aria-selected="true"] { outline:2px solid Highlight; outline-offset:-2px; }
  .fj-ui .fj-palette-hit { animation:none; }
}
