/* ZTM Quant
 *
 * 손익을 읽는 화면이라 어두운 배경에 숫자를 띄운다. 색은 딱 세 가지 의미만 쓴다.
 * 파랑=수익, 빨강=손실, 노랑=주의(비활성/차단). 그 외에는 회색조로 둬서 숫자가
 * 먼저 보이게 한다. HTMX 없이도 전부 동작하도록 폼과 링크로만 만들었다.
 */

:root {
  --bg: #0b0e14;
  --panel: #141922;
  --panel-2: #1b2230;
  --line: #232b3a;
  --text: #e6e9ef;
  --muted: #8b93a7;
  --dim: #5c6478;
  --up: #4c8dff;
  --down: #ff5c6c;
  --warn: #ffb84d;
  --ok: #35c98a;
  --accent: #7c5cff;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--up); text-decoration: none; }
a:hover { text-decoration: underline; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.up { color: var(--up); }
.down { color: var(--down); }
.warn { color: var(--warn); }
.ok { color: var(--ok); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
/* 무효가 된 매도 목표. 색만 흐리게 하면 "아직 살아 있는 값" 으로 읽힌다. */
.strike { text-decoration: line-through; }

/* 매도 목표: 매도 차수를 열, 매수분을 행으로 둔 작은 표.
   바깥 표의 한 칸 안에 들어가므로, 물려받는 테두리와 여백을 끊어야 한다. */
.tp-grid {
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
  width: auto;
}
.tp-grid th,
.tp-grid td {
  border: 0;
  padding: 0 6px 2px 0;
  text-align: right;
  vertical-align: top;
  font-weight: 400;
  background: none;
}
/* 열 머리글(매도 차수)과 행 머리글(매수분). 값과 구분되게 흐리게 둔다. */
.tp-grid tr:first-child th { color: var(--dim); text-align: right; }
.tp-grid tr > th:first-child { color: var(--dim); text-align: left; padding-right: 8px; }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ── 레이아웃 ─────────────────────────────────────────────── */

header.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 20px;
  background: rgba(11, 14, 20, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.logo { display: flex; align-items: baseline; gap: 8px; }
.logo b { font-size: 17px; letter-spacing: -.2px; }
.logo span { color: var(--accent); font-size: 12px; }

nav.top-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav.top-nav a {
  padding: 6px 12px; border-radius: 8px; color: var(--muted); font-size: 13px;
}
nav.top-nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
nav.top-nav a.on { background: var(--panel-2); color: var(--text); }

main { padding: 20px; max-width: 1680px; margin: 0 auto; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.panel > h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.panel > h2 .muted { font-weight: 400; font-size: 12px; margin-left: 6px; }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }
.spacer { height: 12px; }

/* ── 배지와 버튼 ──────────────────────────────────────────── */

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; line-height: 18px; white-space: nowrap;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
}
.badge.b-real { color: var(--ok); border-color: #21503c; }
.badge.b-sim { color: var(--warn); border-color: #54401a; }
.badge.b-mirror { color: var(--accent); border-color: #3b2f6b; }
.badge.b-live { color: var(--up); border-color: #1e3a63; }
.badge.b-closed { color: var(--dim); }
.badge.b-alert { color: var(--down); border-color: #5c2029; }

.btn {
  display: inline-block; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); font-size: 13px; font-family: inherit;
}
.btn:hover { border-color: #3a455c; }
.btn.primary { background: var(--up); border-color: var(--up); color: #06121f; font-weight: 600; }
.btn.danger { color: var(--down); border-color: #4a1f26; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── 폼 ───────────────────────────────────────────────────── */

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

input[type=text], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 8px 10px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-variant-numeric: tabular-nums;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--up); }
input:disabled, select:disabled {
  opacity: .45; cursor: not-allowed; background: #10141c;
}
textarea { resize: vertical; min-height: 60px; }

.field { margin-bottom: 12px; }
.fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; }
.check input { width: auto; }
.check label { margin: 0; color: inherit; font-size: inherit; }

/* ── 표 ───────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
th {
  font-size: 11px; color: var(--muted); font-weight: 600;
  text-transform: none; white-space: nowrap;
  position: sticky; top: 0; background: var(--panel);
}
tbody tr:hover { background: var(--panel-2); }
td.tight { padding: 4px 10px; }

/* ── 필터 ─────────────────────────────────────────────────── */

.filter-groups { display: grid; gap: 10px; }
.filter-group { display: flex; gap: 8px; align-items: flex-start; }
.filter-group > .glabel {
  min-width: 72px; padding-top: 5px; font-size: 12px; color: var(--dim);
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }

.chip {
  padding: 4px 11px; border-radius: 999px; font-size: 12px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.chip:hover { color: var(--text); text-decoration: none; }
.chip.on { background: var(--up); border-color: var(--up); color: #06121f; font-weight: 600; }
.chip.on:hover { color: #06121f; }
/* 충돌하는 필터. 클릭 자체가 안 되게 pointer-events 를 끈다. */
.chip.off { opacity: .32; pointer-events: none; text-decoration: line-through; }

/* ── 요약 카드 ────────────────────────────────────────────── */

.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.card {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
.card .k { font-size: 11px; color: var(--muted); }
.card .v { font-size: 19px; font-weight: 600; margin-top: 2px; }

/* ── 진행 막대 ────────────────────────────────────────────── */

.bar { height: 5px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--up); }
.bar.warn > i { background: var(--warn); }

/* ── 알림 ─────────────────────────────────────────────────── */

.alert {
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--line); background: var(--panel-2); font-size: 13px;
}
.alert.err { border-color: #5c2029; color: #ffc4ca; background: #23151a; }
.alert.warn { border-color: #54401a; color: #ffdfa8; background: #221c11; }
.alert.info { border-color: #1e3a63; color: #cfe1ff; background: #121a26; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

/* ── TP 사다리 ────────────────────────────────────────────── */

.ladder { display: grid; gap: 8px; }
.ladder-row {
  display: grid; gap: 8px; align-items: end;
  grid-template-columns: 44px 1fr 88px 1fr 88px;
}
.ladder-row .tier { color: var(--muted); font-size: 12px; padding-bottom: 9px; }
.lot-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; background: var(--panel-2);
}
.lot-box.locked { opacity: .5; }
.lot-box > h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }

/* ── 상세 ─────────────────────────────────────────────────── */

.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.timeline { border-left: 2px solid var(--line); padding-left: 14px; }
.timeline .ev { margin-bottom: 12px; }
.timeline .ev .t { font-size: 11px; color: var(--dim); }

/* ── 자동 갱신 ────────────────────────────────────────────── */

/*
  값이 바뀐 칸만 잠깐 밝아진다. 1초마다 화면이 조용히 바뀌면 무엇이 움직였는지
  알 수 없어서, 바뀐 자리를 눈에 보이게 남긴다. 0.6초면 다음 갱신 전에 사라진다.
*/
.flash { animation: flash 0.6s ease-out; border-radius: 4px; }

@keyframes flash {
  from { background: rgba(124, 92, 255, 0.28); }
  to { background: transparent; }
}

/* 값이 계속 튀는 화면에서 깜빡임이 거슬리면 시스템 설정을 따른다. */
@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; }
}

@media (max-width: 720px) {
  main { padding: 12px; }
  .ladder-row { grid-template-columns: 1fr 1fr; }
  .kv { grid-template-columns: 90px 1fr; }
}