/* ══ 자비스 통합 웹 — 공통 스타일 (토큰만 쓴다 · tokens.css) ═══════════════ */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Pretendard", "Noto Sans KR", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 13px; line-height: 1.5; color: var(--text);
  background:
    radial-gradient(1200px 700px at 8% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(900px 700px at 105% 110%, var(--bg-glow-2), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--text-2); } .dim { color: var(--text-3); }
.hidden { display: none !important; }
::selection { background: var(--accent-soft); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── 앱 골격 ─────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; }
#views { position: relative; flex: 1; min-height: 0; }
.view { position: absolute; inset: 0; display: none; }
.view.on { display: block; }

/* ── 크롬식 탭 막대 ──────────────────────────────────────── */
#tabbar {
  height: 44px; flex: 0 0 44px; display: flex; align-items: flex-end; gap: 2px;
  padding: 0 10px 0 8px; position: relative; -webkit-app-region: drag;
  background: linear-gradient(180deg, var(--sunken), transparent);
  border-bottom: 1px solid var(--line);
}
/* ── 브랜드 (로고 + 글자) ─ 테마마다 --brand-* 로 색이 바뀐다 (tokens.css) ──
   링의 점 = 자동매매 엔진 연결 상태 (켜지면 초록으로 숨쉰다) */
#tabbar .brand {
  display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px 0 4px; margin-bottom: 4px;
  white-space: nowrap; -webkit-app-region: no-drag; cursor: default; user-select: none;
}
.jv-mark { flex: 0 0 auto; overflow: visible; }
.jv-mark .m-ring { transform-origin: 16px 16px; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.jv-mark .m-node { fill: var(--text-3); stroke: var(--bg); stroke-width: 1.4; transition: fill .3s; }
.brand.on .jv-mark .m-node, .lg-brand .jv-mark .m-node { fill: var(--brand-on); }
.brand.on .jv-mark .m-node { animation: jv-breathe 2.4s ease-in-out infinite; }
.brand:hover .jv-mark .m-ring { transform: rotate(120deg); }
@keyframes jv-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.wm { display: flex; flex-direction: column; line-height: 1; }
.wm b {
  font-size: 13.5px; font-weight: 800; letter-spacing: .26em; margin-right: -.26em;
  background: var(--brand-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wm small { margin-top: 4px; font-size: 7.5px; font-weight: 600; letter-spacing: .34em; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .jv-mark .m-ring { transition: none; } .brand.on .jv-mark .m-node { animation: none; } }
/* 탭 묶음은 내용만큼만 — + 버튼이 마지막 탭 바로 오른쪽에 붙는다 (크롬과 같은 자리). 남는 자리는 창 끌기 영역 */
#tabs { display: flex; align-items: flex-end; gap: 2px; min-width: 0; flex: 0 1 auto; overflow: hidden; -webkit-app-region: no-drag; }
.tab {
  --tw: 210px;
  position: relative; display: flex; align-items: center; gap: 8px; height: 36px;
  width: var(--tw); min-width: 92px; flex: 0 1 var(--tw);
  padding: 0 8px 0 12px; border-radius: 12px 12px 0 0; cursor: pointer; user-select: none;
  color: var(--text-2); background: transparent; border: 1px solid transparent; border-bottom: 0;
  transition: background .15s, color .15s;
}
.tab::before { /* 종류별 옅은 그라데이션 */
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .55; pointer-events: none;
  background: var(--tab-chart);
}
.tab[data-kind="main"]::before { background: var(--tab-main); }
.tab[data-kind="group"]::before { background: var(--tab-group); }
.tab[data-kind="tool"]::before { background: var(--tab-tool); }
.tab[data-kind="new"]::before { background: var(--tab-tool); opacity: .35; }
.tab:hover { color: var(--text); }
.tab:hover::before { opacity: .8; }
.tab.on {
  color: var(--text); background: var(--card-solid); border-color: var(--line);
  box-shadow: 0 -6px 18px rgba(0,0,0,.18);
}
.tab.on::before { opacity: 1; }
.tab.on::after { /* 탭과 본문이 이어져 보이게 */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--card-solid);
}
.tab + .tab:not(.on):not(:hover)::marker { content: none; }
.tab .fav {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 6px; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: var(--accent-ink); background: var(--accent-grad); position: relative; z-index: 1;
}
.tab .fav svg { display: block; }
.tab .ttl { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; white-space: nowrap; position: relative; z-index: 1; }
.tab .ttl b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.tab .ttl .chg { font-size: 11px; font-variant-numeric: tabular-nums; }
.tab .note-chip { /* 노트 차트 켜기/끄기 스위치 */
  position: relative; z-index: 1; font-size: 10px; padding: 1px 6px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-3); border: 1px dashed var(--line-2);
  white-space: nowrap; opacity: .75; transition: opacity .15s, background .15s, color .15s;
}
.tab .note-chip:hover { opacity: 1; color: var(--text); }
.tab .note-chip.on {
  opacity: 1; background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.tab .x {
  position: relative; z-index: 1; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-3); cursor: pointer; font-size: 14px; line-height: 1;
}
.tab .x:hover { background: var(--card-2); color: var(--text); }
/* 자동매매 탭도 보통 탭이다 — 폭은 계산값(--tw)을 따르고 닫기(×)도 보인다
   (2026-10-10 상시 고정 해제). */
.tab[data-kind="group"] { --tw: 270px; }
/* 탭 끌어 옮기기 */
#tabs.dragging { cursor: grabbing; }
#tabs.dragging .tab { transition: none; }
.tab.drag { opacity: .9; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.45); z-index: 3; }

#tabAdd {
  -webkit-app-region: no-drag; flex: 0 0 30px; width: 30px; height: 30px; margin: 0 4px 3px 6px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--text-2); cursor: pointer; font-size: 18px; line-height: 1;
}
#tabAdd:hover { color: var(--text); border-color: var(--line-2); box-shadow: var(--glow); }
#tabbar .tools { display: flex; align-items: center; gap: 6px; margin: 0 0 5px auto; -webkit-app-region: no-drag; }

/* ── 공통 컨트롤 ─────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text);
  cursor: pointer; white-space: nowrap; transition: border-color .15s, box-shadow .15s, background .15s;
}
.pill:hover { border-color: var(--accent-2); box-shadow: var(--glow); }
.pill.primary { background: var(--accent-grad); color: var(--accent-ink); border-color: transparent; font-weight: 650; }
.pill.ghost { background: transparent; }
.pill.sm { height: 24px; padding: 0 10px; font-size: 12px; }
.pill.danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.pill:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.icon-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--card);
  display: inline-grid; place-items: center; cursor: pointer; color: var(--text-2);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-2); }
.icon-btn svg { width: 16px; height: 16px; }

.card {
  position: relative; border-radius: 18px; padding: 16px;
  background: var(--card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
/* 크롬 테두리 — 1px 띠에만 그라데이션을 칠한다 (마스크). 본문은 유리처럼 비친다 */
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card.flat { background: var(--card); border: 1px solid var(--line); box-shadow: none; }
.card.flat::before { display: none; }
.card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .01em; display: flex; align-items: center; gap: 8px; }
.card h3 .sub { font-weight: 400; color: var(--text-3); font-size: 12px; }
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; border: 1px solid var(--line); color: var(--text-2); background: var(--card);
}
.badge.ok { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); background: var(--up-soft); }
.badge.bad { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); background: var(--down-soft); }
.badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.badge.acc { color: var(--accent-2); border-color: var(--line-2); background: var(--accent-soft); }

/* ⚠ flex-basis 를 쓰지 않는다 — 세로 flex 컨테이너 안에서는 basis 가 **높이**에 걸려
   38×38 정사각형이 되고, border-radius:999px 와 만나 토글이 동그라미로 보인다.
   width·height 를 그대로 두고 flex: none 으로 '늘지도 줄지도 않게' 만 한다. */
/* 네이티브 체크박스·라디오 — 테마 강조색을 따른다. 노아르·블루는 밝고, 진주는 진하다.
   (차트 쪽 같은 규칙은 shared/chart-link/theme.css) */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

.switch { position: relative; width: 38px; height: 22px; flex: none; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i {
  position: absolute; inset: 0; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line-2);
  transition: background .2s, border-color .2s; cursor: pointer;
}
.switch i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-3); transition: transform .2s, background .2s;
}
.switch input:checked + i { background: var(--accent-soft); border-color: var(--accent-2); }
.switch input:checked + i::after { transform: translateX(16px); background: var(--accent); box-shadow: 0 0 10px var(--accent-soft); }
html[data-jv-theme="noir"] .switch input:checked + i::after { background: #fff; }

.field { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.field:last-child { border-bottom: 0; }
.field .lab { flex: 1; min-width: 0; }
.field .lab b { display: block; font-weight: 550; font-size: 13px; }
.field .lab small { display: block; color: var(--text-3); font-size: 11.5px; line-height: 1.4; margin-top: 1px; }
.field.dirty .lab b::after { content: ' •'; color: var(--warn); }
.field.off { opacity: .45; }
.inp {
  height: 30px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--sunken);
  min-width: 0; width: 120px; text-align: right; font-variant-numeric: tabular-nums;
}
.inp.wide { width: 220px; text-align: left; }
.inp:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.inp { height: auto; min-height: 60px; padding: 8px 10px; text-align: left; width: 100%; resize: vertical; }

/* 커스텀 드롭다운 (네이티브 select 금지 — 프로젝트 규칙) */
.dd { position: relative; }
.dd-trigger {
  height: 30px; min-width: 150px; max-width: 240px; padding: 0 30px 0 12px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--sunken); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative;
}
.dd-trigger::after { content: ''; position: absolute; right: 12px; top: 11px; width: 6px; height: 6px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(45deg); }
.dd-menu {
  /* ⚠ 모달(.modal-back z-4000)보다 위여야 한다. 메뉴는 body 에 붙는데 아래로 깔리면
     backdrop-filter 에 흐려지고 클릭까지 배경이 가로챈다 (실제로 그렇게 막혔다).
     토스트(5000)·로그인(6000)보다는 아래에 둔다. */
  position: fixed; z-index: 4500; min-width: 180px; max-height: 320px; overflow: auto; padding: 6px; border-radius: 14px;
  background: var(--card-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
.dd-item { padding: 7px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.dd-item:hover, .dd-item.hl { background: var(--accent-soft); }
.dd-item.on { color: var(--accent-2); font-weight: 650; }

.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); gap: 2px; }
.seg button { border: 0; background: transparent; height: 26px; padding: 0 12px; border-radius: 999px; cursor: pointer; color: var(--text-2); white-space: nowrap; }
.seg button.on { background: var(--card-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-jv-theme="violet"] .seg button.on, html[data-jv-theme="pearl"] .seg button.on { background: var(--accent-grad); color: var(--accent-ink); box-shadow: none; }

/* ── 토스트 ─────────────────────────────────────────────── */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 5000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto; max-width: 420px; padding: 10px 14px; border-radius: 14px; background: var(--card-solid);
  border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: tin .25s ease;
}
.toast.ok { border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.toast.err { border-color: color-mix(in srgb, var(--down) 55%, transparent); }
@keyframes tin { from { transform: translateY(10px); opacity: 0; } }

/* ── 모달 ───────────────────────────────────────────────── */
.modal-back { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.45); display: grid; place-items: center; backdrop-filter: blur(6px); }
/* ⚠ .card 는 유리(거의 투명)다. 모달에 그대로 쓰면 **뒤 화면이 비쳐** 카드·입력칸 모양이
   유령 상자처럼 떠오른다 (배경 흐림만으로는 가려지지 않는다). 모달은 불투명한 면을 쓴다. */
.modal { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 60px); overflow: auto;
  background: var(--card-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal .mhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.modal .mhead h2 { margin: 0; font-size: 17px; flex: 1; }

/* ── 로그인 ─────────────────────────────────────────────── */
#login { position: fixed; inset: 0; z-index: 6000; display: grid; place-items: center; overflow: hidden; }
#login .arc { position: absolute; width: 900px; height: 900px; border-radius: 50%; right: -420px; top: -460px; background: var(--arc); filter: blur(1px);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px)); mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px)); opacity: .9; }
#login .arc.b { width: 620px; height: 620px; right: auto; left: -360px; top: auto; bottom: -380px; opacity: .55; transform: rotate(140deg); }
#login .box { width: min(400px, calc(100vw - 32px)); padding: 30px 28px; }
#login .lg-brand { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
#login .lg-brand .jv-mark .m-ring { animation: jv-spin 18s linear infinite; }
#login .lg-brand .wm b { font-size: 26px; letter-spacing: .24em; margin-right: -.24em; }
#login .lg-brand .wm small { margin-top: 7px; font-size: 9.5px; }
@keyframes jv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #login .lg-brand .jv-mark .m-ring { animation: none; } }
#login .lead { color: var(--text-2); margin: 0 0 22px; }
#login label { display: block; font-size: 12px; color: var(--text-2); margin: 12px 0 6px; }
#login .inp { width: 100%; text-align: left; height: 40px; border-radius: 12px; }
#login .row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 8px; }
#login .err { color: var(--down); min-height: 18px; margin-top: 10px; font-size: 12px; }
#login .code { letter-spacing: .5em; text-align: center; font-size: 20px; }

/* ── 메인 탭 (좌: 자동매매 · 우: 일지) ────────────────────── */
/* 격자 숨 고르기 (2026-10-10 사용자 지시) — 카드가 서로 붙어 한 덩어리로 읽혔다 */
.main-grid { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(420px, 46fr) minmax(460px, 54fr); gap: 20px; padding: 18px; }
.main-col { min-height: 0; overflow: auto; padding: 2px 4px 40px 2px; display: flex; flex-direction: column; gap: 18px; scrollbar-gutter: stable; }
.colhead { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
.colhead h2 { margin: 0; font-size: 16px; letter-spacing: .02em; }
.colhead .sp { flex: 1; }
@media (max-width: 1100px) { .main-grid { grid-template-columns: 1fr; grid-auto-rows: max-content; overflow: auto; } .main-col { overflow: visible; } }

/* 운용 현황 */
.engine-strip { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.engine-orb { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; position: relative;
  background: radial-gradient(circle at 35% 30%, var(--card-2), var(--sunken)); border: 1px solid var(--line-2); }
/* 전원 아이콘 — 글꼴 글립(⏻ U+23FB)은 윈도우에 없어 두부로 보인다. 그려서 넣는다 */
.engine-orb svg { width: 24px; height: 24px; color: var(--text-3); transition: color .25s; }
.engine-orb.on svg { color: var(--up); }
.engine-orb.on { box-shadow: 0 0 0 4px var(--up-soft), 0 0 30px var(--up-soft); border-color: color-mix(in srgb, var(--up) 60%, transparent); }
.engine-orb.on::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--up); opacity: .35; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.9); opacity: .5; } 100% { transform: scale(1.25); opacity: 0; } }
.kv { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.kv div { min-width: 70px; }
.kv small { display: block; color: var(--text-3); font-size: 11px; }
.kv b { font-size: 15px; font-variant-numeric: tabular-nums; }

/* 보유 목록 — 소유 구분 마커 + 옅은 그라데이션 */
.hold { display: grid; grid-template-columns: 4px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px 9px 0; border-radius: 12px; margin: 4px 0; }
.hold[data-own="auto"] { background: var(--own-auto); }
.hold[data-own="manual"] { background: var(--own-manual); }
.hold[data-own="direct"] { background: var(--own-direct); }
.hold[data-own="legacy"] { background: var(--own-legacy); }
.hold .bar { height: 100%; min-height: 34px; border-radius: 4px; }
.hold[data-own="auto"] .bar { background: var(--c-auto); }
.hold[data-own="manual"] .bar { background: var(--c-manual); }
.hold[data-own="direct"] .bar { background: var(--c-direct); }
.hold[data-own="legacy"] .bar { background: var(--c-legacy); }
.hold .sym { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hold .meta { color: var(--text-3); font-size: 11.5px; }
.own-tag { font-size: 10.5px; padding: 0 7px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid; }
.own-tag[data-own="auto"] { color: var(--c-auto); border-color: color-mix(in srgb, var(--c-auto) 45%, transparent); }
.own-tag[data-own="manual"] { color: var(--c-manual); border-color: color-mix(in srgb, var(--c-manual) 45%, transparent); }
.own-tag[data-own="direct"] { color: var(--c-direct); border-color: color-mix(in srgb, var(--c-direct) 45%, transparent); }
.own-tag[data-own="legacy"] { color: var(--c-legacy); border-color: color-mix(in srgb, var(--c-legacy) 45%, transparent); }
.hold .pnl { text-align: right; font-variant-numeric: tabular-nums; }
.hold .acts { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--text-2); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }

/* 설정 — 기능 묶음 */
.set-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap; padding: 8px; border-radius: 16px;
  background: var(--card-solid); border: 1px solid var(--line); box-shadow: var(--shadow); }
.set-nav button { border: 1px solid var(--line); background: transparent; height: 28px; padding: 0 12px; border-radius: 999px; cursor: pointer; color: var(--text-2); white-space: nowrap; }
.set-nav button.on { color: var(--accent-ink); background: var(--accent-grad); border-color: transparent; }
.set-nav .search { flex: 1 1 140px; min-width: 120px; }
.set-nav .search input { width: 100%; height: 28px; border-radius: 999px; border: 1px solid var(--line); background: var(--sunken); padding: 0 12px; }
.mod { padding: 0; overflow: hidden; }
.mod-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; }
.mod-head .ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: var(--card-2); border: 1px solid var(--line); flex: 0 0 32px; }
.mod-head .ttl { flex: 1; min-width: 0; }
.mod-head .ttl b { display: block; font-size: 14px; }
.mod-head .ttl small { display: block; color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-head .chev { width: 8px; height: 8px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); transition: transform .2s; margin: 0 6px 4px; }
.mod.open .mod-head .chev { transform: rotate(-135deg); margin-bottom: -2px; }
.mod-body { display: none; padding: 2px 16px 12px; border-top: 1px solid var(--line); }
.mod.open .mod-body { display: block; }
.mod.disabled .mod-head .ttl b { color: var(--text-2); }
.mod.disabled .mod-body .fields { opacity: .45; }
.mod .conflict { margin: 10px 0 2px; padding: 8px 10px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 12px; border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.mod .note { margin: 10px 0 2px; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--text-2); font-size: 12px; }
.sub-group { margin: 8px 0; border-radius: 12px; border: 1px solid var(--line); }
.sub-group > summary { list-style: none; cursor: pointer; padding: 8px 12px; font-weight: 600; color: var(--text-2); }
.sub-group > summary::-webkit-details-marker { display: none; }
.sub-group > .fields { padding: 0 12px 6px; }
.adv-toggle { margin-top: 6px; font-size: 12px; color: var(--accent-2); cursor: pointer; background: none; border: 0; padding: 4px 0; }
/* 분류 제목 — 카드 위에 겹치지 않게 아래 여백을 양수로 두고, 카드(::before 테두리)보다 위 층에 둔다 */
.cat-title { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 18px 4px 4px; padding: 2px 0; color: var(--text-2); font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; }
.cat-title:first-child { margin-top: 4px; }
.cat-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* ── 진입 엔진 흐름도 (카드 안에서 신호 → 주문 전 과정) ──────────────── */
.flow { position: relative; margin: 2px 0 10px; padding-left: 30px; }
.flow::before { content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--line-2); opacity: .5; }
.fl-spark { position: absolute; left: 11px; top: 0; width: 6px; height: 42px; border-radius: 4px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--accent), transparent); filter: blur(1px); opacity: 0;
  animation: jv-flow 3.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes jv-flow { 0% { top: 0; opacity: 0 } 12% { opacity: .9 } 86% { opacity: .9 } 100% { top: calc(100% - 42px); opacity: 0 } }
.fl-node { position: relative; margin: 0 0 6px; }
.fl-dot { position: absolute; left: -30px; top: 6px; width: 28px; height: 28px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; font-size: 14px; line-height: 1;
  background: var(--card-solid); border: 1.5px solid var(--accent-2); box-shadow: 0 0 0 3px var(--card-solid);
  transition: border-color .2s, filter .2s, transform .15s; }
.fl-node.off .fl-dot { border-color: var(--line-2); filter: grayscale(1) opacity(.5); }
.fl-node.dim .fl-dot { border-style: dashed; }
.fl-node:hover .fl-dot { transform: scale(1.07); }
.fl-main { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 8px 10px; }
.fl-node.open .fl-main { border-color: var(--accent-2); box-shadow: var(--glow); }
.fl-node.dirty .fl-main { border-color: var(--accent); }
.fl-head { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.fl-head b { font-size: 13px; }
.fl-head .sp { flex: 1; }
.fl-chip { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--text-2); white-space: nowrap; }
.fl-node.off .fl-chip { background: var(--card-2); color: var(--text-3); }
.fl-tag { font-size: 9.5px; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; border: 1px dashed var(--line-2); color: var(--text-3); white-space: nowrap; }
.fl-tag.part { border-style: solid; }
.fl-head .chev { width: 7px; height: 7px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); transition: transform .2s; margin: 0 2px 3px; }
.fl-node.open .fl-head .chev { transform: rotate(-135deg); margin-bottom: -1px; }
.fl-short { display: block; color: var(--text-3); font-size: 11.5px; line-height: 1.5; margin-top: 3px; }
.fl-fields { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.fl-node.open .fl-fields { display: block; }
.switch.sm { transform: scale(.8); }
/* 새 워크스페이스 — 관리자 콘솔은 목록과 떼어 하단 가운데 */
/* 계정에 딸린 화면(자동매매 · 관리자 콘솔) — 워크스페이스 목록과 한 칸 떨어뜨린 같은 줄 */
.launcher .ln-admin { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.launcher .ln-admin .lcard { width: min(290px, 100%); }

/* ── 관리자 콘솔 ────────────────────────────────────────── */
.tool.adm .adm-body { position: absolute; inset: 52px 0 0; overflow: auto; padding: 0 14px 14px; }
.tool.adm .card.scroll { padding: 12px; overflow: visible; }
.adm table.grid { width: 100%; }
.adm table.grid td, .adm table.grid th { white-space: nowrap; }
.adm tr.off { opacity: .55; }
.adm .acts { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.tag { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line-2); color: var(--text-2); background: var(--card-2); }
.tag.ok { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); background: var(--up-soft, var(--accent-soft)); }
.tag.bad { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); background: transparent; }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.tag.acc { color: var(--accent-2); border-color: var(--line-2); background: var(--accent-soft); }
#adNav .dot { display: inline-block; min-width: 15px; padding: 0 4px; margin-left: 4px; border-radius: 999px;
  background: var(--warn); color: var(--accent-ink); font-size: 10px; }
.loglist { display: flex; flex-direction: column; gap: 2px; }
.logrow { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 12px; }
.logrow:nth-child(odd) { background: var(--sunken); }
.logrow .dim { flex: 0 0 140px; }

.ro-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ro-row { display: flex; align-items: baseline; gap: 10px; padding: 4px 8px; border-radius: 8px; background: var(--sunken); font-size: 12px; }
.ro-row span { color: var(--text-3); flex: 1; }
.ro-row b { font-variant-numeric: tabular-nums; }
.card.mod.flash { animation: jv-flash 1.4s ease-out; }
@keyframes jv-flash { 0%, 100% { box-shadow: none } 15% { box-shadow: var(--glow), 0 0 0 2px var(--accent) } }
@media (prefers-reduced-motion: reduce) { .fl-spark { display: none; } }

.savebar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px;
  background: var(--card-solid); border: 1px solid var(--accent-2); box-shadow: var(--glow); }
.savebar .sp { flex: 1; }
.list-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 260px; }
.list-chips span { padding: 1px 8px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); font-size: 11.5px; }

/* 일지 대시보드 */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.kpi small { color: var(--text-3); font-size: 11px; display: block; }
.kpi b { font-size: 20px; font-variant-numeric: tabular-nums; display: block; margin-top: 2px; }
.kpi .sub { color: var(--text-2); font-size: 11.5px; }
/* 눌러서 차트를 여는 지표 카드 — 누를 수 있다는 것이 보여야 누른다 */
.kpi.go { cursor: pointer; transition: border-color .15s, background .15s; }
.kpi.go:hover { border-color: var(--line-2); background: var(--card-2); }
.kpi.go:active { transform: translateY(1px); }

/* ? 도움말 — 머리글·라벨 옆의 작은 동그라미와 그 풍선 */
.hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px; border-radius: 50%; vertical-align: middle;
  border: 1px solid var(--line-2); color: var(--text-3);
  font-size: 9.5px; font-style: normal; font-weight: 600; line-height: 1;
  cursor: help; user-select: none; transition: color .15s, border-color .15s;
}
.hint:hover, .hint:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.hint-pop {
  position: fixed; z-index: 9000; width: 340px; max-width: calc(100vw - 16px);
  padding: 12px 14px; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--line-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color: var(--text-2); font-size: 12px; line-height: 1.65; font-weight: 400;
  white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .12s, transform .12s, visibility .12s;
}
.hint-pop.on { opacity: 1; visibility: visible; transform: none; }
.hint-pop b { color: var(--text); }
.hint-pop .hp-t { display: block; font-size: 13px; color: var(--text); margin-bottom: 6px; }
.hint-pop .hp-s { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.hint-pop table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.hint-pop td { padding: 3px 6px 3px 0; vertical-align: top; font-size: 11.5px; }
.hint-pop tr + tr td { border-top: 1px solid var(--line); }
.hint-pop .hp-k { color: var(--text-3); white-space: nowrap; }

/* 로그인 화면 — 가입 요청 */
.lg-alt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  text-align: center; font-size: 12.5px; color: var(--text-3); }
.lnk { background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent-2); font: inherit; font-weight: 550; text-decoration: underline;
  text-underline-offset: 3px; }
.lnk:hover { color: var(--accent); }
.lg-done { text-align: center; padding: 10px 0 4px; }
.lg-done-ic { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px;
  color: var(--up); background: var(--up-soft);
  border: 1px solid color-mix(in srgb, var(--up) 45%, transparent); }
.lg-done b { display: block; font-size: 15px; margin-bottom: 6px; }
.lg-done p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.6; }
/* 트레이딩 일지 본문 — 줄과 줄 **사이**(위아래) 간격.
   #djBody 는 규칙이 아예 없어 .kpis·.dash-row 들이 블록으로 맞붙어 있었다
   (가로 간격만 있고 세로가 0 이라 한 덩어리로 보였다). */
#djBody { display: flex; flex-direction: column; gap: 18px; }
.dash-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dash-row.two { grid-template-columns: 3fr 2fr; }
@media (max-width: 1400px) { .dash-row { grid-template-columns: 1fr 1fr; gap: 12px; } .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }
@media (max-width: 1100px) { .main-grid { gap: 14px; padding: 14px; } .main-col { gap: 14px; } #djBody { gap: 14px; } }
.donut-wrap { display: flex; align-items: center; gap: 14px; }
.donut-wrap svg { flex: 0 0 auto; }
.donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; min-width: 0; }
.donut-legend div { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.donut-legend i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
.donut-legend span { color: var(--text-3); margin-left: auto; padding-left: 8px; font-variant-numeric: tabular-nums; }
.bars .row { display: grid; grid-template-columns: 74px 1fr 64px; gap: 10px; align-items: center; padding: 5px 0; font-size: 12px; }
.bars .track { height: 8px; border-radius: 8px; background: var(--sunken); position: relative; overflow: hidden; }
.bars .fill { position: absolute; top: 0; bottom: 0; border-radius: 8px; }
.bars .zero { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--line-2); left: 50%; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.cal .d { aspect-ratio: 1.25; border-radius: 8px; font-size: 10.5px; padding: 5px 7px; display: flex; flex-direction: column; justify-content: space-between; background: var(--sunken); color: var(--text-3); }
.cal .d.has { color: var(--text); }
.cal .d b { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.cal .hd { text-align: center; font-size: 10.5px; color: var(--text-3); }
.trade-list { display: flex; flex-direction: column; }
.trade-row { display: grid; grid-template-columns: 4px 90px 1fr auto auto; gap: 12px; align-items: center; padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.trade-row:hover { background: var(--card-2); }
.trade-row .bar { align-self: stretch; border-radius: 4px; }
.score-gauge { display: flex; align-items: center; gap: 16px; }
.empty { padding: 24px; text-align: center; color: var(--text-3); }

/* ── 차트 워크스페이스 ──────────────────────────────────── */
/* [차트] ┃ [체결 띠 --tape] [호가·주문 --side] */
.ws { --tape: 230px; position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 6px var(--tape) var(--side, 340px); }
.ws.group { grid-template-columns: minmax(0, 1fr) 6px minmax(0, 1fr) 6px var(--tape) var(--side, 320px); }
.ws iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.ws .split { position: relative; cursor: col-resize; background: var(--line); }
.ws .split:hover { background: var(--accent-2); }
/* 패널 열기/닫기 손잡이 — 구분선에 마우스를 올릴 때만 보인다 */
.ws .sp-toggle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6;
  width: 18px; height: 54px; padding: 0; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--card-solid); color: var(--text-2); font-size: 11px;
  box-shadow: var(--shadow, 0 4px 14px rgba(0,0,0,.35)); opacity: 0; pointer-events: none; transition: opacity .15s;
}
.ws .split:hover .sp-toggle { opacity: 1; pointer-events: auto; }
.ws .sp-toggle:hover { color: var(--text); border-color: var(--accent-2); }
.ws .side { min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-left: 1px solid var(--line); background: linear-gradient(180deg, var(--card), transparent); }
/* 패널을 닫으면 구분선만 오른쪽 끝 얇은 띠로 남는다 (올리면 ◂ 손잡이) */
.ws.noside { grid-template-columns: minmax(0, 1fr) 8px; }
.ws.noside .tape, .ws.noside .side { display: none; }
.ws.noside .split[data-split="side"] { cursor: default; background: transparent; border-left: 1px solid var(--line); }
.ws.noside .split[data-split="side"]:hover { background: var(--accent-soft); }
.ws.group.noside { grid-template-columns: minmax(0, 1fr) 6px minmax(0, 1fr) 8px; }
/* 체결 세로 띠 */
.ws .tape { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 10px 8px 8px; border-left: 1px solid var(--line); background: linear-gradient(180deg, var(--card), transparent); }
.ws .tape h4 { margin: 0 2px 6px; font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.ws .tape .tp-head { display: grid; grid-template-columns: 1fr 1fr 58px; padding: 0 4px 4px; font-size: 10.5px; color: var(--text-3); }
.ws .tape .tp-head span:not(:first-child) { text-align: right; }
.ws .tape .tp-flow { display: flex; height: 3px; border-radius: 2px; overflow: hidden; margin: 0 4px 6px; background: var(--line); }
.ws .tape .tp-flow .b { background: var(--up); transition: width .3s; } .ws .tape .tp-flow .s { background: var(--down); transition: width .3s; }
.ws .tape .tp-list { flex: 1; min-height: 0; max-height: none; overflow: hidden; }
.side .box { border-radius: 14px; background: var(--card); border: 1px solid var(--line); padding: 10px; }
.side .box h4 { margin: 0 0 8px; font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.ob { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ob .r { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 1px 4px; position: relative; cursor: pointer; }
.ob .r:hover { background: var(--card-2); }
.ob .r span { position: relative; z-index: 1; }
/* 첫 자식은 절대 위치의 깊이 막대다 — 글자 칸은 2·3·4번째 */
.ob .r span:nth-child(3), .ob .r span:nth-child(4) { text-align: right; }
.ob .r .depth { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 3px; z-index: 0; }
.ob .ask span:nth-child(2) { color: var(--down); } .ob .ask .depth { background: var(--down-soft); }
.ob .bid span:nth-child(2) { color: var(--up); } .ob .bid .depth { background: var(--up-soft); }
.side .sd-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.side .sd-head .sd-sym { white-space: nowrap; }
.side .sd-hl { flex-basis: 100%; }
.ob .mid { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; font-size: 16px; font-weight: 700; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; }
.ob .mid small { font-size: 11px; font-weight: 400; color: var(--text-3); }
.ob .ratio { display: flex; height: 6px; border-radius: 6px; overflow: hidden; margin-top: 6px; }
.tp-list { font-size: 11.5px; font-variant-numeric: tabular-nums; max-height: 240px; overflow: auto; }
.tp-list .r { display: grid; grid-template-columns: 1fr 1fr 58px; padding: 1px 4px; line-height: 15px; }
.tp-list .r span:nth-child(2) { text-align: right; } .tp-list .r span:nth-child(3) { text-align: right; color: var(--text-3); }
.tp-list .r.big { background: var(--accent-soft); border-radius: 4px; }
.of .tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.of .tabs button { border: 0; background: none; padding: 6px 0; cursor: pointer; color: var(--text-3); border-bottom: 2px solid transparent; }
.of .tabs button.on { color: var(--text); border-color: var(--accent); }
.of .row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.of .row label { width: 54px; color: var(--text-3); font-size: 12px; flex: 0 0 54px; }
.of .row .inp { flex: 1; width: auto; text-align: right; }
.of .unit { color: var(--text-3); font-size: 11.5px; min-width: 36px; }
.of .slider { width: 100%; accent-color: var(--accent); }
.of .marks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); }
.of .buy, .of .sell { flex: 1; height: 38px; border-radius: 12px; border: 0; font-weight: 700; cursor: pointer; color: #fff; }
.of .buy { background: linear-gradient(135deg, color-mix(in srgb, var(--up) 85%, #fff), var(--up)); }
.of .sell { background: linear-gradient(135deg, color-mix(in srgb, var(--down) 85%, #fff), var(--down)); }
.of .buy:disabled, .of .sell:disabled { opacity: .5; cursor: not-allowed; }
.of .info { font-size: 11.5px; color: var(--text-3); display: flex; justify-content: space-between; }
.of .chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }

/* ── 새 워크스페이스 고르기 ─────────────────────────────── */
.launcher { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; padding: 30px; }
.launcher .inner { width: min(1080px, 100%); }
.launcher h2 { text-align: center; font-size: 24px; margin: 0 0 6px; letter-spacing: .02em; }
.launcher p.lead { text-align: center; color: var(--text-2); margin: 0 0 22px; }
.launcher .pick-sym { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.launcher .pick-sym .inp { width: 220px; text-align: left; height: 36px; border-radius: 999px; }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.lcard { cursor: pointer; transition: transform .15s, box-shadow .15s; min-height: 150px; display: flex; flex-direction: column; gap: 6px; }
.lcard:hover { transform: translateY(-3px); box-shadow: var(--glow), var(--shadow); }
.lcard .big { font-size: 26px; }
.lcard b { font-size: 15px; }
.lcard p { margin: 0; color: var(--text-2); font-size: 12.5px; flex: 1; }
.lcard .tagline { font-size: 11px; color: var(--text-3); }
.lcard.lock { opacity: .55; cursor: not-allowed; }

/* ── 도구 워크스페이스 (히트맵·펀딩·신호·포지션) ─────────── */
.tool { position: absolute; inset: 0; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tool .bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.heat { position: relative; flex: 1; min-height: 480px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.heat .cell { position: absolute; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;
  border: 1px solid rgba(0,0,0,.25); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); transition: filter .15s; }
.heat .cell:hover { filter: brightness(1.2); z-index: 2; outline: 2px solid var(--accent); }
.heat .cell b { font-size: 12px; } .heat .cell span { font-size: 11px; opacity: .9; }
table.grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.grid th, table.grid td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.grid th:first-child, table.grid td:first-child { text-align: left; }
table.grid th { color: var(--text-3); font-weight: 500; font-size: 12px; cursor: pointer; position: sticky; top: 0; background: var(--card-solid); }
table.grid tr:hover td { background: var(--card-2); cursor: pointer; }

/* 설치된 앱 창 (window-controls-overlay) — 탭 막대가 제목 표시줄 자리를 차지한다 (크롬 탭처럼).
   창 버튼(최소화·닫기) 아래로 탭이 들어가지 않게 그 폭만큼 비운다. */
@media (display-mode: window-controls-overlay) {
  #tabbar {
    padding-left: max(8px, env(titlebar-area-x, 8px));
    padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 10px);
  }
}

/* PWA 설치 — 버튼은 계정 창 '📲 앱으로 설치' 칸에 있다 (account.js) */
.install-steps { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); font-size: 12px; line-height: 1.7; }
.install-steps b { color: var(--text); }

/* ── 관리자 콘솔 · 사용자 상세 (줄을 누르면 아래로 펼쳐진다) ───────────────
   12칸 격자 하나로만 짠다 — c3(1/4) · c6(1/2) · c12(전체) 세 가지 폭뿐이라
   줄이 바뀌어도 라벨이 **같은 세로선**에 선다. 칸 안의 입력은 언제나 칸을 꽉
   채운다: `.inp` 는 원래 숫자 설정칸용(120px 고정 · 오른쪽 정렬)이라 그대로
   쓰면 넓은 칸에 작은 입력이 떠 있고 글자가 오른쪽 끝에 붙는다. */
.adm .us-row { cursor: pointer; }
.adm .us-row:hover > td { background: var(--card-2); }
.adm .us-row.on > td { background: var(--accent-soft); }
.adm tr.us-detail > td { padding: 0; background: var(--sunken); }
.adm .us-box { padding: 16px 18px 13px; border-left: 3px solid var(--accent); }

.adm .us-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 15px 16px; }
.adm .us-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.adm .us-f.c3 { grid-column: span 3; }
.adm .us-f.c6 { grid-column: span 6; }
.adm .us-f.c12 { grid-column: span 12; }
@media (max-width: 1240px) { .adm .us-f.c3 { grid-column: span 6; } }
@media (max-width: 820px)  { .adm .us-f.c3, .adm .us-f.c6 { grid-column: span 12; } }

/* 라벨 — 제목 한 줄, 설명은 그 아래로 흘린다 (옆에 붙이면 폭마다 줄이 달라진다) */
.adm .us-f > span:first-child { font-size: 12px; font-weight: 600; line-height: 1.35; }
.adm .us-f > span:first-child small { display: block; font-weight: 400; color: var(--text-3); font-size: 11px; margin-top: 2px; }

/* 입력은 칸을 꽉 채우고 글자는 왼쪽부터 */
.adm .us-form .inp.txt { width: 100%; text-align: left; }
.adm .us-form .inp:disabled { opacity: .6; cursor: not-allowed; }
/* 값만 보여 주는 자리(등급·상태) — 입력칸과 같은 높이라야 한 줄에서 들뜨지 않는다 */
.adm .us-val { display: flex; align-items: center; height: 30px; min-width: 0; font-size: 11.5px; }
.adm .us-val > .tag { flex: none; }
.adm .us-inline { display: flex; gap: 8px; align-items: center; }
.adm .us-inline .inp { flex: 1; min-width: 0; }
.adm .us-inline .pill { flex: none; }
/* 빠른 연장 단추 — 날짜 칸 바로 아래 */
.adm .us-plus { display: flex; gap: 5px; flex-wrap: wrap; }
.adm .us-plus .pill { padding: 0 9px; }

.adm .us-foot { display: flex; align-items: center; gap: 10px; margin-top: 15px;
  padding-top: 11px; border-top: 1px dashed var(--line); font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════════════
   자동매매 콘솔 (2026-10-15 전면 재구현)
   ──────────────────────────────────────────────────────────────────────────────
   왜 카드를 버렸는가 — 섹션마다 유리 카드를 두면 테두리·여백·그림자가 세 겹씩
   쌓여 같은 정보가 1.6배 높이를 먹는다. 설정이 200개가 넘는 화면에서 그건 곧
   "스크롤만 하는 화면" 이다. 그래서 콘솔은 면(面)으로 간다 —
   구획은 머리글과 머리카락 선(hairline)이 가르고, 색은 상태를 말할 때만 쓴다.
     ① 위에서 아래로 한 줄기: 엔진 → 보유 → 감시 → 규칙(설정)
     ② 한 행은 36~44px. 열고 닫는 것은 행 자신이고 바깥 상자가 늘어나지 않는다
     ③ 색은 의미다 — 롱/숏/헷지, 임계 초과 손익, 적용 중/적용됨
   ═══════════════════════════════════════════════════════════════════════════ */
.cns { display: flex; flex-direction: column; gap: 0; }
.cns-sec { position: relative; }
.cns-sec + .cns-sec { margin-top: 20px; }
/* 구획 머리글 — 스크롤에 붙어 '지금 어디' 를 잃지 않게 한다 */
.cns-h {
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: center; gap: 9px; min-height: 32px;
  padding: 6px 2px 7px; margin-bottom: 2px;
  background: linear-gradient(180deg, var(--bg) 62%, transparent);
  backdrop-filter: blur(6px);
}
.cns-h .ic { font-size: 13px; opacity: .9; }
.cns-h b { font-size: 13.5px; font-weight: 700; letter-spacing: .03em; }
.cns-h .sub { color: var(--text-3); font-size: 11.5px; font-weight: 400; }
.cns-h .sp { flex: 1; }
.cns-h::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--line-2), var(--line) 30%, transparent);
}

/* ── 아이콘 단추 (갱신 · 접기 · 설정) ───────────────────────────────────── */
.ibtn {
  width: 26px; height: 26px; flex: 0 0 26px; padding: 0;
  display: inline-grid; place-items: center;
  border-radius: 9px; border: 1px solid var(--line); background: transparent;
  color: var(--text-3); cursor: pointer; font-size: 13px; line-height: 1;
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
.ibtn:hover { color: var(--text); border-color: var(--line-2); background: var(--card-2); }
.ibtn:active { transform: scale(.92); }
.ibtn.on { color: var(--accent-2); border-color: var(--accent-2); background: var(--accent-soft); }
.ibtn svg { width: 14px; height: 14px; display: block; }
.ibtn.spin svg { animation: jv-spin 0.9s linear infinite; }
.ibtn:disabled { opacity: .4; cursor: default; }

/* ── ① 운용 스트립 — 엔진의 지금 ──────────────────────────────────────── */
.ops {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: 18px;
  background:
    radial-gradient(130% 160% at 0% 0%, var(--accent-soft), transparent 58%),
    var(--card);
  border: 1px solid var(--line);
  transition: border-color .3s, box-shadow .3s;
}
.ops.live { border-color: color-mix(in srgb, var(--up) 42%, transparent); box-shadow: 0 0 0 1px var(--up-soft), 0 10px 34px -18px var(--up); }
.ops.halt { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.ops-orb {
  width: 50px; height: 50px; border-radius: 50%; position: relative;
  display: grid; place-items: center;
  background: var(--sunken); border: 1px solid var(--line-2);
}
.ops-orb svg { width: 22px; height: 22px; color: var(--text-3); transition: color .3s; }
.ops.live .ops-orb svg { color: var(--up); }
.ops.halt .ops-orb svg { color: var(--warn); }
.ops.live .ops-orb { border-color: color-mix(in srgb, var(--up) 55%, transparent); box-shadow: 0 0 0 4px var(--up-soft); }
.ops.live .ops-orb::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--up); opacity: .3; animation: pulse 2.6s ease-out infinite;
}
.ops-ttl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ops-ttl b { font-size: 15px; }
.ops-kv { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 7px; }
.ops-kv > div { min-width: 64px; }
.ops-kv small { display: block; color: var(--text-3); font-size: 10.5px; letter-spacing: .02em; }
.ops-kv b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ops-sw { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ops-sw small { color: var(--text-3); font-size: 10.5px; }
/* 엔진이 왜 안 넣는지 — 사유 띠 */
.ops-why {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.ops-why:empty { display: none; }

/* ── ② 보유 목록 — 방향색 · 임계 손익 ─────────────────────────────────── */
.pos-list { display: flex; flex-direction: column; }
.pos {
  position: relative; display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto; gap: 11px; align-items: center;
  padding: 8px 10px 8px 0; border-radius: 12px;
  border-bottom: 1px solid var(--line);
  transition: background .25s, box-shadow .25s;
}
.pos:last-child { border-bottom: 0; }
.pos:hover { background: var(--card-2); }
/* 왼쪽 띠 = 진입 방향. 헷지(양방향 보유)는 두 색을 섞어 한 띠에 담는다 —
   "이 종목은 롱과 숏을 같이 들고 있다" 를 글자 없이 알리는 자리다 */
.pos .dir {
  align-self: stretch; min-height: 34px; border-radius: 3px;
  background: var(--c-legacy);
}
.pos[data-dir="long"]  .dir { background: linear-gradient(180deg, var(--up), color-mix(in srgb, var(--up) 55%, transparent)); }
.pos[data-dir="short"] .dir { background: linear-gradient(180deg, var(--down), color-mix(in srgb, var(--down) 55%, transparent)); }
.pos[data-dir="hedge"] .dir {
  background: linear-gradient(180deg, var(--up) 0%, var(--up) 42%, var(--warn) 50%, var(--down) 58%, var(--down) 100%);
  box-shadow: 0 0 10px -2px var(--warn);
}
/* 설정한 손익값을 벗어나면 행 전체에 옅은 바탕이 깔린다 (임계는 머리글에서 조절) */
.pos[data-hl="profit"] { background: linear-gradient(90deg, color-mix(in srgb, var(--up) 15%, transparent), transparent 76%); }
.pos[data-hl="loss"]   { background: linear-gradient(90deg, color-mix(in srgb, var(--down) 16%, transparent), transparent 76%); }
.pos[data-hl="profit"]:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--up) 22%, transparent), transparent 76%); }
.pos[data-hl="loss"]:hover   { background: linear-gradient(90deg, color-mix(in srgb, var(--down) 23%, transparent), transparent 76%); }
.pos[data-hl="profit"] .dir { box-shadow: 0 0 12px -1px var(--up); }
.pos[data-hl="loss"]   .dir { box-shadow: 0 0 12px -1px var(--down); }
.pos-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.3; }
.pos-top .sym { font-weight: 750; font-size: 13.5px; letter-spacing: .01em; }
.pos-side { font-size: 11px; font-weight: 700; }
.pos-meta { color: var(--text-3); font-size: 11px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pos-right { display: flex; align-items: center; gap: 10px; }
.pos-pnl { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; }
.pos-pnl b { font-size: 13.5px; display: block; }
.pos-pnl small { font-size: 11px; color: var(--text-3); }
.pos-pnl.up b, .pos-pnl.up small { color: var(--up); }
.pos-pnl.down b, .pos-pnl.down small { color: var(--down); }
/* ROE 게이지 — 임계까지 얼마나 왔는지 한 줄로 */
.pos-gauge { position: relative; height: 3px; max-width: 260px; border-radius: 3px; background: var(--line); margin-top: 6px; overflow: hidden; opacity: .8; }
.pos-gauge i { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: left .4s, width .4s; }
.pos-gauge .z { position: absolute; top: -1px; bottom: -1px; width: 1px; left: 50%; background: var(--line-2); }
.pos-acts { display: flex; gap: 4px; }
/* 손익 임계 조절 — 머리글에 붙는다 */
.hl-tune { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-3); }
.hl-tune input { width: 44px; height: 22px; border-radius: 7px; border: 1px solid var(--line); background: var(--sunken); color: var(--text); text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.hl-tune input:focus { outline: none; border-color: var(--accent-2); }

/* ── ③ 감시 목록 — 엔진이 순회하는 종목 ───────────────────────────────── */
.wl-list { display: flex; flex-direction: column; }
.wl {
  display: grid; grid-template-columns: 3px minmax(0, 1fr) 78px auto; gap: 10px; align-items: center;
  padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); border-radius: 11px;
  transition: background .2s;
}
.wl:last-child { border-bottom: 0; }
.wl:hover { background: var(--card-2); }
.wl .mk { align-self: stretch; min-height: 28px; border-radius: 3px; background: var(--line-2); transition: background .3s; }
.wl[data-st="entered"] .mk { background: var(--up); box-shadow: 0 0 10px -2px var(--up); }
.wl[data-st="blocked"] .mk { background: var(--warn); }
.wl[data-st="holding"] .mk { background: var(--c-auto); box-shadow: 0 0 10px -2px var(--c-auto); }
.wl.lock { opacity: .66; }
.wl-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wl-top .sym { font-weight: 700; font-size: 13px; }
.wl-sig { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.wl-px { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; line-height: 1.3; }
.wl-px small { display: block; font-size: 10.5px; }
.wl-acts { display: flex; gap: 4px; align-items: center; }
.wl-add { display: flex; gap: 7px; margin: 9px 0 2px; }
.wl-add .inp { flex: 1; text-align: left; }
/* 신호 알 — 엔진이 이 종목에서 무엇을 봤는지 */
.sigchip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--text-3); background: var(--sunken);
  font-variant-numeric: tabular-nums;
}
.sigchip.ok { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); background: var(--up-soft); }
.sigchip.no { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 38%, transparent); background: var(--warn-soft); }
.sigchip.acc { color: var(--accent-2); border-color: var(--line-2); background: var(--accent-soft); }
/* 신호 현황 요약 — 칸 셋 */
.sig-sum { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 2px 0 10px; }
.sig-sum > div { padding: 8px 10px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--line); }
.sig-sum small { display: block; color: var(--text-3); font-size: 10.5px; }
.sig-sum b { font-size: 17px; font-variant-numeric: tabular-nums; }

/* ── ④ 규칙(설정) 콘솔 ─────────────────────────────────────────────────── */
/* 분류 레일 — 칩 한 줄 + 찾기. 카드가 아니라 띠다 */
.cns-rail {
  position: sticky; top: 0; z-index: 9;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 7px 8px; margin-bottom: 4px; border-radius: 14px;
  background: color-mix(in srgb, var(--card-solid) 88%, transparent);
  border: 1px solid var(--line); backdrop-filter: blur(10px);
}
.cns-rail button {
  height: 26px; padding: 0 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; background: transparent; color: var(--text-2); font-size: 12px;
  transition: color .15s, background .15s, border-color .15s;
}
.cns-rail button:hover { color: var(--text); background: var(--card-2); }
.cns-rail button.on { color: var(--accent-ink); background: var(--accent-grad); border-color: transparent; font-weight: 650; }
.cns-rail .find { flex: 1 1 130px; min-width: 110px; display: flex; }
.cns-rail .find input {
  width: 100%; height: 26px; border-radius: 999px; padding: 0 12px; font-size: 12px;
  border: 1px solid var(--line); background: var(--sunken); color: var(--text);
}
.cns-rail .find input:focus { outline: none; border-color: var(--accent-2); }
/* 적용 상태 — 저장 버튼이 있던 자리를 대신한다 */
.cns-live {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 11px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--text-3); background: var(--sunken);
  transition: color .2s, border-color .2s, background .2s;
}
.cns-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cns-live.busy { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.cns-live.busy i { animation: jv-breathe 1s ease-in-out infinite; }
.cns-live.done { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); background: var(--up-soft); }
.cns-live.off { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }

/* 모듈 — 테두리 없는 행. 열면 아래로 자라고 바깥은 그대로다 */
.cmod { border-bottom: 1px solid var(--line); }
.cmod:last-child { border-bottom: 0; }
.cmod-h {
  /* flex 다. grid 로 칸을 고정하면 마스터 스위치가 끼어들 때 칸이 모자라
     다음 줄로 접혀 ˇ 가 혼자 아래에 떨어진다 (칸 수가 모듈마다 다르다). */
  display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 5px 6px 5px 2px;
  cursor: pointer; user-select: none; border-radius: 10px;
  transition: background .15s;
}
.cmod-h:hover { background: var(--card-2); }
.cmod-h .ic { flex: 0 0 22px; font-size: 15px; text-align: center; line-height: 1; filter: saturate(.9); transition: filter .2s, transform .15s; }
.cmod-h:hover .ic { transform: scale(1.1); }
.cmod.off .cmod-h .ic { filter: grayscale(1) opacity(.45); }
.cmod-h .ttl { flex: 1 1 auto; min-width: 0; }
.cmod-h .ttl b { display: block; font-size: 13px; font-weight: 600; }
.cmod-h .ttl small { display: block; color: var(--text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmod.off .cmod-h .ttl b { color: var(--text-2); }
.cmod-h .chev { flex: 0 0 7px; width: 7px; height: 7px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); transition: transform .22s; margin: 0 4px 3px; }
.cmod.open .cmod-h .chev { transform: rotate(-135deg); margin-bottom: -1px; }
.cmod-sum { font-size: 10.5px; padding: 1px 8px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmod.on .cmod-sum { color: var(--text-2); border-color: var(--line-2); }
.cmod-b { display: none; padding: 2px 6px 12px 35px; }
.cmod.open .cmod-b { display: block; animation: cns-open .22s ease-out; }
@keyframes cns-open { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
.cmod.off .cmod-b { opacity: .5; }
.cmod.flash { animation: jv-flash 1.4s ease-out; border-radius: 10px; }

/* 설정 한 줄 */
.cns-f { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.cns-f:last-child { border-bottom: 0; }
.cns-f > .lab { min-width: 0; }
.cns-f > .lab b { display: block; font-size: 12.5px; font-weight: 500; }
.cns-f > .lab small { display: block; color: var(--text-3); font-size: 11px; line-height: 1.45; margin-top: 1px; }
.cns-f > .ctl { display: flex; align-items: center; gap: 7px; }
.cns-f .inp { height: 28px; }
/* 적용 신호 — 그 줄에서만 */
.cns-f.saving > .lab b::after { content: ' ⟳'; color: var(--warn); display: inline-block; animation: jv-spin .9s linear infinite; }
.cns-f.saved  > .lab b::after { content: ' ✓'; color: var(--up); animation: cns-fade 1.6s ease-out forwards; }
@keyframes cns-fade { 0%,55% { opacity: 1 } 100% { opacity: 0 } }
.cns-sub { margin: 8px 0 2px; font-size: 11px; color: var(--text-3); letter-spacing: .04em; font-weight: 600; }
.cns-sub::after { content: ''; display: block; height: 1px; margin-top: 4px; background: var(--line); }
.cns-note { margin: 8px 0 4px; padding: 7px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--text-2); font-size: 11.5px; line-height: 1.55; }
.cns-warn { margin: 8px 0 4px; padding: 7px 10px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 11.5px; line-height: 1.55; border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); }
.cns-more { margin-top: 7px; font-size: 11.5px; color: var(--accent-2); cursor: pointer; background: none; border: 0; padding: 3px 0; }
.cns-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 금액 입력 — 단위가 설정을 따라 바뀐다 (고정=USDT · 비율=%) */
.amt { display: flex; align-items: center; gap: 7px; }
.amt .unit { font-size: 11px; color: var(--text-3); min-width: 32px; text-align: right; }
.amt .inp { width: 92px; }
.amt-pct { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.amt-pct .bar { width: 120px; height: 4px; border-radius: 4px; background: var(--sunken); position: relative; overflow: hidden; }
.amt-pct .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent-grad); transition: width .3s; }
.amt-pct small { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* 흐름도 — 기존 애니메이션은 사용자가 마음에 들어 한 것이므로 모양만 조인다 */
.cmod-b .flow { padding-left: 27px; margin: 4px 0 8px; }
.cmod-b .flow::before { left: 11px; }
.cmod-b .fl-dot { left: -27px; width: 24px; height: 24px; font-size: 12px; top: 5px; }
.cmod-b .fl-main { padding: 6px 9px; }
.cmod-b .fl-head b { font-size: 12.5px; }
.cmod-b .fl-short { font-size: 11px; margin-top: 2px; }

/* 콘솔은 좁은 폭에서도 읽혀야 한다 */
@media (max-width: 900px) {
  .ops { grid-template-columns: auto 1fr; }
  .ops-sw { grid-column: 2; align-items: flex-start; }
  .cns-f { grid-template-columns: 1fr; }
  .cns-f > .ctl { justify-content: flex-start; }
  .wl { grid-template-columns: 3px minmax(0,1fr) auto; }
  .wl-px { display: none; }
}

/* 작은 보정 — 칩 묶음은 스스로 flex 가 돼야 간격이 생긴다 */
.x-chips, .x-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cns-sec.flash { animation: jv-flash 1.4s ease-out; border-radius: 14px; }

/* ══════════════════════════════════════════════════════════════════════════════
   트레이딩 일지 (2026-10-15 전면 재구현 — .jr-*)
   ──────────────────────────────────────────────────────────────────────────────
   예전 화면은 카드 열두 개를 격자에 늘어놓은 것이었다. 카드마다 제목·테두리·여백이
   있어서 **무엇이 중요한지 서열이 없었고**, 같은 질문("내가 돈을 벌고 있나")에
   답하는 숫자가 네 군데에 흩어져 있었다.
   새 구성은 질문 순서를 따른다.
     ① 얼마나 벌었나      — 띠(hero) 하나. 큰 숫자 + 곡선이 바탕에 깔린다
     ② 어떻게 벌었나      — 점수 링 + 승패·방향·출처 '한 줄 저울'
     ③ 언제 벌었나        — 달력 열 + 시간대/요일 열지도
     ④ 무엇으로 벌었나    — 종목·엔진 순위
     ⑤ 그래서 무엇을 고칠까 — 인사이트 · 최근 거래
   애니메이션은 '값이 들어오는 것' 에만 쓴다 (막대가 자라고 숫자가 올라간다).
   장식용 움직임은 손익 화면에서 읽기를 방해한다.
   ═══════════════════════════════════════════════════════════════════════════ */
#djBody { display: flex; flex-direction: column; gap: 16px; }
.jr-sec { position: relative; }
.jr-h { display: flex; align-items: center; gap: 9px; margin: 0 2px 8px; }
.jr-h b { font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.jr-h .sub { color: var(--text-3); font-size: 11.5px; }
.jr-h .sp { flex: 1; }
.jr-h::after { content: none; }

/* ── ① 히어로 — 큰 숫자 하나와 그 뒤에 깔린 곡선 ─────────────────────── */
.jr-hero {
  position: relative; overflow: hidden; border-radius: 20px;
  padding: 16px 18px 12px; border: 1px solid var(--line);
  background: radial-gradient(120% 150% at 8% 0%, var(--accent-soft), transparent 60%), var(--card);
}
.jr-hero.up { border-color: color-mix(in srgb, var(--up) 34%, transparent); }
.jr-hero.down { border-color: color-mix(in srgb, var(--down) 34%, transparent); }
.jr-hero .curve { position: absolute; inset: auto 0 0 0; height: 58%; opacity: .34; pointer-events: none; }
/* 곡선 위에 옅은 장막 — 곡선이 글자 뒤를 지나갈 때 숫자가 흐려지면 안 된다 */
.jr-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 62%, transparent), transparent 46%); }
.jr-hero > * { position: relative; z-index: 1; }
.jr-hero .curve svg { width: 100%; height: 100%; display: block; }
.jr-hero-top { position: relative; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.jr-net { line-height: 1; }
.jr-net small { display: block; color: var(--text-3); font-size: 11px; letter-spacing: .04em; margin-bottom: 4px; }
.jr-net b { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.jr-net .u { font-size: 13px; color: var(--text-3); margin-left: 4px; font-weight: 500; }
.jr-mini { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; position: relative; }
.jr-mini > div { min-width: 72px; }
.jr-mini small { display: block; color: var(--text-3); font-size: 10.5px; }
.jr-mini b { font-size: 16px; font-variant-numeric: tabular-nums; }
.jr-mini .x { font-size: 10.5px; color: var(--text-3); display: block; }
.jr-foot { position: relative; margin-top: 12px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-3); }
.jr-foot b { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── ② 한 줄 저울 — 도넛 셋을 대체한다 ────────────────────────────────
   도넛은 두 값의 비율을 읽기에는 과한 그림이다. 가로 저울은 같은 정보를
   1/3 높이에 담고, 손익(숫자)을 같은 줄에서 함께 보여 줄 수 있다. */
.jr-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.jr-panel { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.jr-panel > h4 { margin: 0 0 10px; font-size: 12px; font-weight: 650; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.jr-panel > h4 .sub { font-weight: 400; color: var(--text-3); font-size: 11px; margin-left: auto; }
.jr-scale { display: flex; flex-direction: column; gap: 9px; }
.jr-scale .row { display: grid; grid-template-columns: 1fr; gap: 4px; }
.jr-scale .lbl { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; }
.jr-scale .lbl i { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 8px; }
.jr-scale .lbl .n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-2); }
.jr-scale .tr { height: 6px; border-radius: 6px; background: var(--sunken); overflow: hidden; }
.jr-scale .tr i { display: block; height: 100%; border-radius: 6px; width: 0; transition: width .7s cubic-bezier(.2,.8,.2,1); }

/* 점수 링 */
.jr-score { display: flex; align-items: center; gap: 16px; }
.jr-score svg { flex: 0 0 auto; }
.jr-score .comp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.jr-score .comp .row { display: grid; grid-template-columns: 58px 1fr 26px; gap: 8px; align-items: center; font-size: 11px; }
.jr-score .comp .tr { height: 5px; border-radius: 5px; background: var(--sunken); overflow: hidden; }
.jr-score .comp .tr i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--accent-2); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.jr-score .comp .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* ── ③ 달력 열 + 열지도 ───────────────────────────────────────────── */
.jr-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.jr-cal .hd { text-align: center; font-size: 10px; color: var(--text-3); padding-bottom: 2px; }
.jr-cal .d {
  position: relative; aspect-ratio: 1.3; border-radius: 9px; padding: 4px 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--sunken); color: var(--text-3); font-size: 10px;
  transition: transform .15s, box-shadow .15s, background .4s;
}
.jr-cal .d.has { color: var(--text); cursor: default; }
.jr-cal .d.has:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -8px var(--text); z-index: 2; }
.jr-cal .d.today { outline: 1px solid var(--accent-2); outline-offset: -1px; }
.jr-cal .d b { font-size: 10px; font-variant-numeric: tabular-nums; }
.jr-cal .d .dot { position: absolute; right: 5px; top: 5px; width: 4px; height: 4px; border-radius: 50%; }

/* 시간대 24칸 · 요일 7칸 열지도 */
.jr-heat { display: grid; gap: 3px; }
.jr-heat.h24 { grid-template-columns: repeat(12, 1fr); }
.jr-heat.h7 { grid-template-columns: repeat(7, 1fr); }
.jr-heat span {
  position: relative; aspect-ratio: 1.5; border-radius: 6px; background: var(--sunken);
  display: grid; place-items: center; font-size: 9.5px; color: var(--text-3);
  transition: transform .15s, background .5s;
}
.jr-heat span.has { color: var(--text); }
.jr-heat span:hover { transform: scale(1.14); z-index: 2; }
.jr-legend { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-3); margin-top: 7px; }
.jr-legend i { width: 36px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--down), var(--sunken), var(--up)); }

/* ── ④ 순위 — 이름 · 막대 · 숫자 ──────────────────────────────────── */
.jr-rank { display: flex; flex-direction: column; }
.jr-rank .row { display: grid; grid-template-columns: 70px 1fr 66px; gap: 9px; align-items: center; padding: 5px 0; font-size: 11.5px; border-bottom: 1px dashed var(--line); }
.jr-rank .row:last-child { border-bottom: 0; }
.jr-rank .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-rank .tr { position: relative; height: 7px; border-radius: 7px; background: var(--sunken); }
.jr-rank .tr .z { position: absolute; top: -2px; bottom: -2px; width: 1px; left: 50%; background: var(--line-2); }
.jr-rank .tr i { position: absolute; top: 0; bottom: 0; border-radius: 7px; width: 0; transition: width .7s cubic-bezier(.2,.8,.2,1), left .7s cubic-bezier(.2,.8,.2,1); }
.jr-rank .vl { text-align: right; font-variant-numeric: tabular-nums; }

/* ── ⑤ 인사이트 · 최근 거래 ───────────────────────────────────────── */
.jr-tips { display: flex; flex-direction: column; gap: 7px; }
.jr-tip {
  display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: 12px;
  background: var(--sunken); border: 1px solid var(--line); font-size: 11.5px; line-height: 1.6;
  animation: jr-in .35s ease-out both;
}
.jr-tip .em { font-size: 14px; line-height: 1.2; flex: 0 0 auto; }
.jr-tip.warn { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-soft); }
.jr-tip.good { border-color: color-mix(in srgb, var(--up) 28%, transparent); background: var(--up-soft); }
@keyframes jr-in { from { opacity: 0; transform: translateY(6px) } }
.jr-trades { display: flex; flex-direction: column; }
.jr-trade {
  display: grid; grid-template-columns: 3px 72px 1fr auto 44px; gap: 10px; align-items: center;
  padding: 7px 6px 7px 0; border-bottom: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  font-size: 11.5px;
}
.jr-trade:last-child { border-bottom: 0; }
.jr-trade:hover { background: var(--card-2); }
.jr-trade .src { align-self: stretch; min-height: 22px; border-radius: 3px; }
.jr-trade .t { color: var(--text-3); font-variant-numeric: tabular-nums; }
.jr-trade .v { font-variant-numeric: tabular-nums; font-weight: 650; }
.jr-trade .r { text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 10.5px; }

/* 기간 선택 · 머리글 */
#djBody .empty { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.jr-wide { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .jr-net b { font-size: 27px; }
  .jr-mini { margin-left: 0; gap: 12px; }
  .jr-heat.h24 { grid-template-columns: repeat(8, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   구획·분류 머리글 (2026-10-15 2차)
   ──────────────────────────────────────────────────────────────────────────────
   설정이 서른 묶음인 화면에서 분류 이름이 11px 회색 글자 한 줄이면 **눈이 걸리지
   않는다** — 스크롤하다 보면 어느 분류를 보고 있는지 놓친다. 그래서 분류마다
   ① 고유색 ② 아이콘 배지 ③ 아주 옅은 격자 무늬 ④ 7초에 한 번 지나가는 빛 띠
   를 준다. 색은 장식이 아니라 **좌표**다 — 위 레일의 칩에도 같은 색 점을 찍어
   "지금 이 색 구간에 있다"를 잇는다.
   무늬와 빛 띠는 전부 CSS 그라데이션이다 (이미지 파일 0개 · 요청 0건).
   ═══════════════════════════════════════════════════════════════════════════ */
[data-cat="run"]     { --catc: #7fb2ff; }
[data-cat="cards"]   { --catc: #5cd2be; }
[data-cat="entry"]   { --catc: #c878ff; }
[data-cat="gate"]    { --catc: #f0b24a; }
[data-cat="size"]    { --catc: #8fa0c8; }
[data-cat="dca"]     { --catc: #4fc3f7; }
[data-cat="exit"]    { --catc: #33c58f; }
[data-cat="protect"] { --catc: #f2626e; }
[data-cat="manual"]  { --catc: #e0a060; }
[data-cat="notify"]  { --catc: #ffd166; }
[data-cat="misc"]    { --catc: #9aa2ad; }
[data-cat="all"]     { --catc: var(--accent-2); }

.cns-cat {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 11px;
  margin: 22px 0 8px; padding: 9px 14px;
  border-radius: 14px;
  background:
    radial-gradient(130% 190% at 0% 0%, color-mix(in srgb, var(--catc, var(--accent-2)) 17%, transparent), transparent 56%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--catc, var(--line-2)) 24%, transparent);
}
.cns-cat:first-child { margin-top: 6px; }
.cns-cat > .ic {
  position: relative; z-index: 1; flex: 0 0 28px;
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  background: color-mix(in srgb, var(--catc, var(--accent-2)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--catc, var(--line-2)) 36%, transparent);
}
.cns-cat > .tx { position: relative; z-index: 1; min-width: 0; }
.cns-cat b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
.cns-cat small { display: block; color: var(--text-3); font-size: 11px; margin-top: 1px; }
.cns-cat .n {
  position: relative; z-index: 1; margin-left: auto; white-space: nowrap;
  font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--catc, var(--line)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--catc, var(--line)) 26%, transparent);
}
/* 옅은 격자 — 왼쪽에서만 보이고 오른쪽으로 사라진다 */
.cns-cat::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(color-mix(in srgb, var(--catc, var(--line)) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--catc, var(--line)) 10%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(100deg, #000, transparent 68%);
  mask-image: linear-gradient(100deg, #000, transparent 68%);
}
/* 느리게 한 번 지나가는 빛 띠 — 7초에 한 번, 눈에 걸리되 방해하지 않는 속도 */
.cns-cat::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 36%; left: -42%; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--catc, var(--accent-2)) 16%, transparent), transparent);
  animation: cat-sheen 7s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes cat-sheen { 0% { left: -42% } 52% { left: 112% } 100% { left: 112% } }

/* 구획 머리글(운용·보유·감시·규칙)도 같은 말투로 — 아이콘에 배지를 준다 */
.cns-h .ic {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center; font-size: 12.5px; line-height: 1;
  background: var(--card-2); border: 1px solid var(--line);
}
.cns-h b { font-size: 14px; }

/* 레일 칩 — 분류 색 점을 달아 아래 머리글과 잇는다 */
.cns-rail button { display: inline-flex; align-items: center; gap: 7px; }
.cns-rail button[data-cat]::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px;
  background: var(--catc, var(--text-3)); box-shadow: 0 0 6px -1px var(--catc, transparent);
}
.cns-rail button.on::before { background: var(--accent-ink); box-shadow: none; }

@media (prefers-reduced-motion: reduce) { .cns-cat::after { display: none; } }

/* ── 일지 '언제' 구획 — 달력과 열지도의 좌우 폭 ────────────────────────────
   auto-fit 격자에 달력을 전폭(jr-wide)으로 두었더니 칸 하나가 100px 넘게 자라
   화면의 절반을 먹고, 시간대·요일은 그 아래에서 눌려 범례가 두 줄로 접혔다.
   달력은 제 비율대로, 열지도 둘은 그 옆에 세로로 쌓는다. */
.jr-when { display: grid; grid-template-columns: minmax(300px, 1.25fr) minmax(250px, 1fr); gap: 14px; align-items: start; }
.jr-when > .jr-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.jr-cal .d { aspect-ratio: auto; height: 46px; }
.jr-heat span { aspect-ratio: auto; height: 26px; }
.jr-legend { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .jr-when { grid-template-columns: 1fr; } }

/* ── 감시: 자동 수집 띠 · 발굴 후보 (2026-10-16) ──────────────────────────
   이 목록이 **어떻게 채워지는지**를 목록보다 먼저 말한다. 켜져 있으면 숨 쉬는
   위성 아이콘, 꺼져 있으면 손 아이콘 — 글을 읽기 전에 모양으로 먼저 알게 한다. */
.wl-auto {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 11px;
  margin: 6px 0 10px; padding: 9px 13px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  transition: border-color .3s;
}
.wl-auto.on {
  border-color: color-mix(in srgb, var(--c-auto) 38%, transparent);
  background: radial-gradient(130% 200% at 0% 0%, color-mix(in srgb, var(--c-auto) 14%, transparent), transparent 58%), var(--card);
}
.wl-auto > .ic {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; font-size: 14px; line-height: 1;
  background: var(--sunken); border: 1px solid var(--line);
}
.wl-auto.on > .ic {
  background: color-mix(in srgb, var(--c-auto) 16%, transparent);
  border-color: color-mix(in srgb, var(--c-auto) 38%, transparent);
  animation: jv-breathe 3.2s ease-in-out infinite;
}
.wl-auto > .tx { flex: 1; min-width: 0; }
.wl-auto .tx b { display: block; font-size: 12.5px; }
.wl-auto .tx small { display: block; color: var(--text-3); font-size: 11px; line-height: 1.5; margin-top: 1px; }
.wl-auto .pill { flex: none; }

/* 손으로 넣기 — 보조 수단이므로 접어 둔다 */
.wl-manual { margin-top: 10px; }
.wl-manual > summary {
  list-style: none; cursor: pointer; font-size: 11.5px; color: var(--text-3);
  padding: 5px 0; user-select: none;
}
.wl-manual > summary::-webkit-details-marker { display: none; }
.wl-manual > summary::before { content: '▸ '; }
.wl-manual[open] > summary::before { content: '▾ '; }
.wl-manual > summary:hover { color: var(--text-2); }

/* 발굴 후보 — 활성도 막대 하나로 순위를 읽는다 */
.wl-found {
  margin: 2px 0 12px; padding: 10px 12px; border-radius: 14px;
  background: var(--sunken); border: 1px solid var(--line-2);
  animation: cns-open .25s ease-out;
}
.wl-found .fh { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.wl-found .fh b { font-size: 12.5px; }
.wl-found .fh .dim { font-size: 10.5px; }
.wl-found .fl { display: flex; flex-direction: column; max-height: 260px; overflow: auto; }
.wl-found .fr {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 54px 26px; gap: 9px; align-items: center;
  padding: 4px 2px; border-bottom: 1px dashed var(--line); font-size: 11.5px;
}
.wl-found .fr:last-child { border-bottom: 0; }
.wl-found .fr.on { opacity: .5; }
.wl-found .fr .nm { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-found .fr .tr { height: 6px; border-radius: 6px; background: var(--card-2); overflow: hidden; }
.wl-found .fr .tr i { display: block; height: 100%; border-radius: 6px; background: var(--accent-grad); }
.wl-found .fr .ch { text-align: right; font-variant-numeric: tabular-nums; }
.wl-found .fr .ibtn { width: 22px; height: 22px; flex: 0 0 22px; font-size: 12px; }

/* 스티키 두 겹 — 맨 위 구획 레일(#mainNav)이 top:0 을 차지하므로, 그 아래 머리글과
   설정 분류 레일은 그 높이만큼 내려서 붙는다. 안 그러면 뒤에 숨어 잘린다. */
#mainLeft .cns-h { top: 46px; }
#mainLeft .cns-rail { top: 46px; }

/* ══ 🩺 점검 구획 (2026-10-16) ═══════════════════════════════════════════════
   한 줄이 하나의 "손볼 곳" 이다. 왼쪽 띠 색이 심각도이고, 오른쪽 단추가 고치는 손이다.
   목록 자체가 할 일 목록이 되도록 — 읽고 나서 어디로 가야 할지 묻지 않게 한다. */
.dx-sum { margin: 4px 0 12px; }
.dx-sum .dx-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dx-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--sunken); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.dx-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dx-pill b { font-size: 13px; }
.dx-pill.danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 42%, transparent); background: var(--down-soft); }
.dx-pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, transparent); background: var(--warn-soft); }
.dx-pill.tip { color: var(--accent-2); border-color: var(--line-2); background: var(--accent-soft); }
.dx-pill.zero { color: var(--text-3); border-color: var(--line); background: var(--sunken); }
/* 건강 막대 — 위험이 있으면 붉은 칸이 보인다 */
.dx-health { display: flex; height: 5px; border-radius: 5px; overflow: hidden; background: var(--sunken); gap: 1px; }
.dx-health i { display: block; transition: flex .5s; }
.dx-health .d { background: var(--down); }
.dx-health .w { background: var(--warn); }
.dx-health .t { background: var(--accent-2); }
.dx-health .ok { background: color-mix(in srgb, var(--up) 55%, transparent); }

.dx {
  position: relative; display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 11px;
  padding: 10px 12px 10px 0; border-radius: 12px; margin-bottom: 7px;
  border: 1px solid var(--line); background: var(--card);
  animation: jr-in .3s ease-out both;
}
.dx .dx-bar { align-self: stretch; border-radius: 3px 0 0 3px; background: var(--line-2); }
.dx[data-sev="danger"] { border-color: color-mix(in srgb, var(--down) 30%, transparent); background: linear-gradient(100deg, var(--down-soft), transparent 48%), var(--card); }
.dx[data-sev="danger"] .dx-bar { background: var(--down); box-shadow: 0 0 12px -2px var(--down); }
.dx[data-sev="warn"] { border-color: color-mix(in srgb, var(--warn) 28%, transparent); background: linear-gradient(100deg, var(--warn-soft), transparent 48%), var(--card); }
.dx[data-sev="warn"] .dx-bar { background: var(--warn); }
.dx[data-sev="tip"] .dx-bar { background: var(--accent-2); }
.dx.ok { border-color: color-mix(in srgb, var(--up) 30%, transparent); }
.dx.ok .dx-bar { background: var(--up); }
.dx-b { min-width: 0; padding: 1px 0; }
.dx-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-t b { font-size: 13px; font-weight: 650; }
.dx[data-sev="danger"] .dx-t .sigchip { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); background: var(--down-soft); }
.dx[data-sev="warn"] .dx-t .sigchip { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.dx-w { color: var(--text-2); font-size: 12px; line-height: 1.65; margin-top: 5px; }
.dx-w b { color: var(--text); }
.dx-acts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 9px; }

/* 레일 버튼의 개수 배지 */
.dx-badge {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; font-size: 10.5px; font-weight: 650; line-height: 1;
  background: var(--warn); color: var(--accent-ink);
}
.dx-badge.danger { background: var(--down); color: #fff; animation: jv-breathe 1.8s ease-in-out infinite; }

/* 구획으로 뛸 때 스티키 레일(46px) 뒤로 숨지 않게 — scrollIntoView 가 이 여백을 쓴다 */
#mainLeft .cns-sec { scroll-margin-top: 54px; }

/* 자동 수집 조절기 — 시점·주기·개수를 띠 안에서 바로 바꾼다 */
.wl-auto { flex-wrap: wrap; }
.wl-knobs { flex: 1 0 100%; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.wl-knobs .lb { font-size: 11px; color: var(--text-3); }
.wl-knobs .inp.num { width: 56px; height: 26px; padding: 0 8px; text-align: center; }
.wl-knobs .dd-trigger { height: 26px; font-size: 12px; }
.wl-left { color: var(--text-2); }
/* 방금 들어온 종목 */
.wl-found .fr.neu { background: color-mix(in srgb, var(--up) 10%, transparent); border-radius: 7px; }
.wl-found .fr .nu { font-size: 9px; letter-spacing: .06em; color: var(--up); vertical-align: 1px; }
/* 구획 바깥 상자(#mainHold · #mainWatch · #mainDoc · #mainSet)에도 같은 여백 —
   레일 버튼은 이 상자로 뛴다. 없으면 구획 머리글이 레일 뒤로 반쯤 숨는다. */
#mainLeft .cns > div { scroll-margin-top: 54px; }

/* ── 감시 목록 접기 (2026-10-16) ─────────────────────────────────────────
   50종목을 상세 행으로 그리면 화면이 아니라 두루마리가 된다. 기본은 한 줄로
   접고(.dense), 누른 행만 펼친다(.open). 중첩 스크롤은 쓰지 않는다 —
   바깥 스크롤과 싸우고, 긴 목록에서 '어디까지 봤는지' 를 잃는다. */
.wl-list.dense .wl {
  grid-template-columns: 3px minmax(0, 1fr) 72px auto;
  padding: 2px 8px 2px 0; border-bottom: 1px solid var(--line);
  border-radius: 8px; cursor: pointer;
}
.wl-list.dense .wl .mk { min-height: 20px; }
.wl-list.dense .wl .wl-top { gap: 5px; line-height: 1.25; }
.wl-list.dense .wl .wl-top .sym { font-size: 12px; }
.wl-list.dense .wl .wl-sig { display: none; }
/* 접힌 줄에서도 '보유' 와 '막힘' 은 남긴다 — 그 둘이 지금 중요한 전부다 */
.wl-list.dense .wl .x-chips .sigchip { display: none; }
.wl-list.dense .wl .x-chips .sigchip.acc,
.wl-list.dense .wl .x-chips .sigchip.no { display: inline-flex; padding: 0 5px; font-size: 9.5px; }
.wl-list.dense .wl .wl-acts { gap: 0; }
.wl-list.dense .wl .wl-acts > * { display: none; }
.wl-list.dense .wl .wl-px { font-size: 11px; }
.wl-list.dense .wl .wl-px small { font-size: 9.5px; }
/* 펼친 줄은 원래 모습으로 돌아온다 */
.wl-list.dense .wl.open {
  grid-template-columns: 3px minmax(0, 1fr) 78px auto;
  padding: 7px 8px 7px 0; background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.wl-list.dense .wl.open .wl-sig { display: flex; }
.wl-list.dense .wl.open .x-chips .sigchip { display: inline-flex; padding: 1px 6px; font-size: 10px; }
.wl-list.dense .wl.open .wl-acts > * { display: inline-flex; }
.wl-list.dense .wl.open .wl-acts { gap: 4px; }
.wl-list.dense .wl.open .wl-top .sym { font-size: 13px; }
.wl-list.dense .wl.open .mk { min-height: 28px; }
/* 접혔다는 것이 보이게 — 펼치면 사라지는 작은 홑화살표 */
.wl-list.dense .wl .wl-px::after { content: '›'; margin-left: 6px; color: var(--text-3); font-size: 11px; }
.wl-list.dense .wl.open .wl-px::after { content: none; }

.wl-more {
  width: 100%; margin-top: 7px; padding: 7px 0; border-radius: 10px; cursor: pointer;
  border: 1px dashed var(--line-2); background: transparent; color: var(--text-2); font-size: 11.5px;
  transition: color .15s, border-color .15s, background .15s;
}
.wl-more:hover { color: var(--text); border-color: var(--accent-2); background: var(--card-2); }

/* 구획 통째 접기 — 머리글과 자동 수집 띠만 남긴다 */
#wlSec.fold .sig-sum, #wlSec.fold .wl-list, #wlSec.fold #wlMore,
#wlSec.fold #wlFound, #wlSec.fold .wl-manual, #wlSec.fold > .dim { display: none; }
/* 접힌 줄에도 **가장 최근 결말 한 칩**은 남긴다 — 왼쪽 띠 색만으로는
   "왜 막혔는지" 를 알 수 없다. 심볼 옆에 한 줄로 붙이고 넘치면 자른다. */
.wl-list.dense .wl > div:nth-child(2) { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wl-list.dense .wl .wl-sig { display: flex; margin-top: 0; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.wl-list.dense .wl .wl-sig .sigchip { display: none; }
.wl-list.dense .wl .wl-sig .sigchip:first-child {
  display: inline-flex; max-width: 160px; padding: 0 5px; font-size: 9.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-list.dense .wl.open > div:nth-child(2) { display: block; }
.wl-list.dense .wl.open .wl-sig { margin-top: 3px; flex-wrap: wrap; overflow: visible; }
.wl-list.dense .wl.open .wl-sig .sigchip { display: inline-flex; max-width: none; padding: 1px 6px; font-size: 10px; }

/* ── 설정 · 단위 접미 ────────────────────────────────────────────────────
   힌트가 단위 한 글자뿐이면 이름 아래 설명 줄로 깔지 않고 입력칸 옆에 붙인다.
   (비중 6줄이 전부 '%' 만 달고 있어 설명처럼 보이던 화면) */
.cns-f .ctl.has-unit { display: flex; align-items: center; gap: 6px; }
.cns-f .ctl.has-unit .inp { text-align: right; }
.cns-f .ctl .unit { color: var(--text-3); font-size: 12px; min-width: 2.2em; }

/* ── 설정 · 전략 비중 배분 결과 ──────────────────────────────────────────
   입력값은 상대 가중치다. 꺼진 전략을 빼고 다시 나눠 슬롯이 정해지므로,
   "입력한 수" 와 "실제로 받는 슬롯" 이 다르다. 그 결과를 그린다.
   색은 막대와 목록 점이 같아야 눈으로 이어진다 — data-k 하나로 묶는다. */
.alc { margin: 10px 0 2px; padding: 10px 12px; border: 1px solid var(--line);
       border-radius: 10px; background: var(--sunken); }
.alc-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden;
           background: var(--line); margin-bottom: 10px; }
.alc-seg { height: 100%; transition: width .25s ease; }
.alc-list { display: grid; grid-template-columns: auto 1fr auto auto; gap: 4px 10px;
            align-items: center; font-size: 12.5px; }
.alc-row { display: contents; }
.alc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.alc-row b { font-weight: 500; color: var(--text); }
.alc-eff { color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
.alc-cap { color: var(--text); font-variant-numeric: tabular-nums; text-align: right;
           min-width: 3.6em; }
.alc-row.off b, .alc-row.off .alc-eff, .alc-row.off .alc-cap { color: var(--text-3); }
.alc-row.off .alc-dot { background: var(--line) !important; }
/* 켜 두었는데 0슬롯 — 진입이 영영 나가지 않는다. 가장 눈에 띄어야 할 상태다. */
.alc-row.dead .alc-cap { color: var(--down); font-weight: 500; }
.alc-note { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line);
            color: var(--text-3); font-size: 12px; line-height: 1.6; }
.alc-note.warn { color: var(--text-2); }
.alc-note b { color: var(--text); font-weight: 500; }

.alc-seg[data-k="jarvis"],       .alc-dot[data-k="jarvis"]       { background: #e05f8a; }
.alc-seg[data-k="heung"],        .alc-dot[data-k="heung"]        { background: #e0a54f; }
.alc-seg[data-k="apex"],         .alc-dot[data-k="apex"]         { background: #d8d04a; }
.alc-seg[data-k="range_sniper"], .alc-dot[data-k="range_sniper"] { background: #4fb3e0; }
.alc-seg[data-k="obv_sniper"],   .alc-dot[data-k="obv_sniper"]   { background: #7f77dd; }
.alc-seg[data-k="smr_radar"],    .alc-dot[data-k="smr_radar"]    { background: #1d9e75; }