/* XTXC 결재함 (web-next) — XTXC Exchange design (xtxc.trade/exchange), measured values from run/xtxc-ref2.
   Readability exceptions for ordinary users: chat body 15px, key numbers 15–16px, touch targets ≥ 40–44px. */
:root {
  --bg: #000000; --bg-2: #080909; --text: #f7f7f4; --heading: #f0f1ee; --ink: #161918;
  --panel: #101411; --panel-line: #29312a; --panel-2: #121613; --panel-2-line: #303632;
  --line: #252828; --outline: #373d3a; --chip-on: #232b24; --chip-on-text: #e6eae2; --chip-off: #969e99;
  --muted: #939d95; --sub: #8d9a90; --label: #999f9b; --nav-idle: #858c8b; --nav-on: #f0f2f0; --tab-idle: #8e9792; --tab-on: #f3f5ef;
  --ok: #75d78b; --danger: #ff8d83; --caution: #e6c46a;
  --cover-blue: #d8def5; --cover-blue-ink: #263d72; --cover-lime: #dbe9a5; --cover-lime-ink: #33482e;
  --cover-violet: #e2dcf3; --cover-violet-ink: #3b2f66;
  --r: 10px; --r-lg: 12px; --r-btn: 8px; --maxw: 560px; --dock-h: 0px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); word-break: keep-all; overflow-wrap: break-word; -webkit-tap-highlight-color: transparent; }
/* Simplified Chinese: CJK fonts first, and normal line breaking (keep-all would never break between Han characters) */
html:lang(zh) { --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
html:lang(zh) body { word-break: normal; line-break: strict; }
html:lang(en) body { word-break: normal; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--heading); }
:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, table, .stat-main, .totals, .kpi-v { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em; }
.break { word-break: break-all; overflow-wrap: anywhere; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.strong, .strong-num { font-weight: 600; }
.strong-num { color: var(--heading); font-size: 15px; }
.link { color: var(--heading); text-underline-offset: 3px; text-decoration-color: var(--outline); }
.caution-text { color: var(--caution); } .danger-text { color: var(--danger); } .ok-text { color: var(--ok); font-weight: 600; } .accent-text { color: var(--heading); font-weight: 600; }
.glyph { display: inline-block; min-width: 1em; text-align: center; font-weight: 700; }
.glyph.ok { color: var(--ok); } .glyph.caution { color: var(--caution); } .glyph.danger { color: var(--danger); }
.block { display: block; }
p { margin: 0 0 8px; }
ul, ol { margin: 0; padding: 0; }
.plain, .steps, .orders, .tl, .results, .misses, .weights, .wp-lines, .mini-steps, .round-tl { list-style: none; }
.plain li + li { margin-top: 4px; }
.bullets { padding-left: 1.1em; } .bullets li + li { margin-top: 6px; }

/* ---------- header (XTXC topbar) ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 20; background: rgba(8, 9, 9, 0.93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); padding: calc(10px + var(--sat)) calc(18px + var(--sar)) 0 calc(18px + var(--sal));
}
.top-row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--heading); min-height: 44px; }
.wordmark { position: relative; display: inline-block; width: 68px; aspect-ratio: 1460 / 710; overflow: hidden; flex: none; }
.wordmark img { position: absolute; width: 109.589%; max-width: none; height: auto; left: -3.4247%; top: -12.676%; }
.brand-sub { font-size: 12px; color: var(--nav-idle); letter-spacing: 0.02em; }
.chain-label { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: 0.14em; color: var(--label); text-transform: uppercase; white-space: nowrap; margin-left: auto; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(117, 215, 139, 0.15); flex: none; display: inline-block; }
.wallet-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 37px; padding: 0 12px; border-radius: 22px; background: transparent; white-space: nowrap;
  border: 1px solid var(--outline); color: var(--nav-on); font-size: 12px; cursor: pointer; font-variant-numeric: tabular-nums; margin-left: 8px;
}
/* language switch: compact "EN ▾" button on phones, XTXC chain-switch style segmented pill on desktop */
.lang-pill { display: none; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: #101113; border: 1px solid #303236; flex: none; }
.lang-pill button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--nav-idle); font-size: 12px; cursor: pointer; white-space: nowrap; }
.lang-pill button:hover { color: var(--nav-on); }
.lang-pill button[aria-pressed="true"] { background: #232624; color: var(--nav-on); font-weight: 600; }
.lang-btn { display: inline-flex; align-items: center; min-height: 37px; padding: 0 11px; border-radius: 22px; background: transparent; border: 1px solid var(--outline); color: var(--nav-on); font-size: 12px; cursor: pointer; white-space: nowrap; flex: none; }
.chain-label[hidden] ~ .lang-btn, .chain-label[hidden] ~ .lang-pill { margin-left: auto; }
.lang-btn + .wallet-chip { margin-left: 0; }
.lang-list .btn { width: 100%; justify-content: flex-start; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip-kind { color: var(--nav-idle); }
@media (max-width: 419px) { .chip-kind { display: none; } .chain-label { display: none !important; } .lang-btn { margin-left: auto; } .top-row { gap: 8px; } }
.chip-dot.on { background: var(--ok); } .chip-dot.off { background: #6d7470; }
.tabs { display: flex; justify-content: space-between; gap: 4px; margin: 2px -14px 0; }
.tabs a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 11px 14px; color: var(--nav-idle); text-decoration: none; font-size: 12px; }
.tabs a[aria-current="page"] { color: var(--nav-on); }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: currentColor; }
.banner { margin: 10px 18px 0; padding: 8px 12px; border-radius: 8px; font-size: 12px; }
.banner.mock { background: rgba(230, 196, 106, 0.08); color: var(--caution); border: 1px solid rgba(230, 196, 106, 0.3); }
.banner.dev { background: var(--panel); color: var(--sub); border: 1px solid var(--panel-line); }

/* ---------- progress bar (phone) ---------- */
.progress { display: flex; align-items: stretch; gap: 8px; border-top: 1px solid var(--line); margin: 0 calc(-18px - var(--sar)) 0 calc(-18px - var(--sal)); padding: 6px calc(18px + var(--sar)) 8px calc(18px + var(--sal)); }
.progress:empty { display: none; }
.progress-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 6px; align-items: center; background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; min-height: 44px; }
.progress-main .steps5 { grid-column: 1 / -1; }
.progress-next { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-now { color: var(--heading); font-weight: 600; margin-right: 6px; }
.progress-main .chev { font-size: 16px; }
.stop-mini { flex: none; align-self: center; min-height: 32px; padding: 0 12px; border-radius: 22px; border: 1px solid rgba(255, 141, 131, 0.45); background: transparent; color: var(--danger); font-size: 11px; cursor: pointer; }
.steps5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.steps5 li { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--tab-idle); }
.steps5 li::before { content: ""; height: 2px; border-radius: 1px; background: var(--panel-line); }
.steps5 li[data-state="done"] { color: var(--sub); } .steps5 li[data-state="done"]::before { background: var(--ok); }
.steps5 li[data-state="current"] { color: var(--tab-on); font-weight: 600; } .steps5 li[data-state="current"]::before { background: var(--tab-on); }
.s5-dot { display: none; }
.steps5.vertical { grid-template-columns: 1fr; gap: 0; margin: 4px 0 8px; }
.steps5.vertical li { flex-direction: row; align-items: center; gap: 10px; font-size: 13px; padding: 7px 0; }
.steps5.vertical li::before { display: none; }
.steps5.vertical .s5-dot { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 11px; border: 1px solid var(--panel-line); color: var(--sub); }
.steps5.vertical li[data-state="done"] .s5-dot { background: var(--ok); border-color: var(--ok); color: #000; font-weight: 700; }
.steps5.vertical li[data-state="current"] .s5-dot { border-color: var(--tab-on); color: var(--tab-on); }

/* ---------- layout ---------- */
.layout { flex: 1; display: flex; width: 100%; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { flex: 1; outline: none; padding: 14px calc(18px + var(--sar)) 24px calc(18px + var(--sal)); }
.side-panel { display: none; }
.screen { display: flex; flex-direction: column; gap: 14px; }
.screen-title { font-size: 24px; line-height: 1.2; font-weight: 570; letter-spacing: -0.9px; color: var(--heading); margin: 8px 0 0; outline: none; }
.dock {
  position: sticky; bottom: 0; z-index: 15; display: flex; flex-direction: column; gap: 8px;
  padding: 10px calc(18px + var(--sar)) calc(12px + var(--sab)) calc(18px + var(--sal));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg) 16px); border-top: 0;
}
.dock-hint { margin: 0; color: var(--sub); text-align: center; font-size: 12px; }

/* ---------- surfaces (XTXC cards) ---------- */
.card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r); padding: 15px; }
.card.flat { background: var(--panel-2); border-color: var(--panel-2-line); }
.card.empty { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.card-title { font-size: 14px; margin: 0 0 10px; font-weight: 550; letter-spacing: -0.3px; color: var(--heading); }
.section-title { font-size: 14px; font-weight: 550; letter-spacing: -0.3px; margin: 0 0 6px; color: var(--heading); }
.card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.card-head .card-title { margin: 0; flex: 1; }
.ver { color: var(--sub); font-size: 11px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row-between.wrap { flex-wrap: wrap; }
.btn-row { display: flex; gap: 10px; } .btn-row > * { flex: 1; }
.btn-row.wrap { flex-wrap: wrap; } .btn-row.wrap > * { flex: 1 1 auto; }
.box { border-radius: var(--r); padding: 12px 14px; border: 1px solid; }
.box p:last-child { margin-bottom: 0; }
.box.ok { background: rgba(117, 215, 139, 0.06); border-color: rgba(117, 215, 139, 0.35); }
.box.caution { background: rgba(230, 196, 106, 0.06); border-color: rgba(230, 196, 106, 0.35); }
.box.danger { background: rgba(255, 141, 131, 0.06); border-color: rgba(255, 141, 131, 0.4); }
.box-title { font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.box.ok .box-title, .box.ok > .glyph { color: var(--ok); }
.box.caution .box-title, .box.caution > .glyph { color: var(--caution); }
.box.danger .box-title, .box.danger > .glyph { color: var(--danger); }
.link-box { display: flex; align-items: center; gap: 6px; min-height: 48px; color: var(--text); text-decoration: none; }
.chev { margin-left: auto; color: var(--sub); font-size: 18px; line-height: 1; }
.disclaimer { text-align: center; color: var(--sub); font-size: 12px; padding: 4px 0; }
.guard { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--panel-line); font-size: 12px; color: var(--text); }
.guard .glyph { color: var(--ok); }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.card.more > summary { min-height: 28px; font-weight: 550; display: flex; align-items: center; font-size: 13px; }
.card.more > summary::after, .more-inline > summary::after { content: "⌄"; margin-left: auto; color: var(--sub); padding-left: 8px; }
.card.more[open] > summary { margin-bottom: 10px; }
.more-inline > summary { display: flex; min-height: 44px; align-items: center; color: var(--sub); }

/* ---------- buttons (XTXC) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 11px 17px; border-radius: var(--r-btn);
  border: 1px solid transparent; font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; width: 100%; text-align: center;
}
.btn.primary { background: var(--heading); color: var(--ink); }
.btn.secondary { background: transparent; color: var(--heading); border-color: var(--outline); }
.btn.ghost { background: transparent; color: var(--heading); font-weight: 500; }
.btn.danger { background: transparent; color: var(--danger); border-color: rgba(255, 141, 131, 0.5); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.btn.small-btn { min-height: 40px; width: auto; padding: 8px 14px; font-size: 12px; }
.btn[aria-pressed="true"] { border-color: var(--ok); color: var(--ok); }
.icon-btn { min-width: 44px; min-height: 44px; border-radius: var(--r-btn); background: transparent; border: 0; color: var(--sub); font-size: 16px; cursor: pointer; }
.chip-btn { min-height: 32px; padding: 0 11px; border-radius: 6px; border: 0; background: var(--chip-on); color: var(--chip-on-text); cursor: pointer; font-size: 12px; position: relative; }
.chip-btn::after { content: ""; position: absolute; inset: -6px -2px; }

/* ---------- badges & lights ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; border: 1px solid; white-space: nowrap; }
.badge .glyph { min-width: 0.9em; }
.badge.ok { color: var(--ok); border-color: rgba(117, 215, 139, 0.4); }
.badge.caution { color: var(--caution); border-color: rgba(230, 196, 106, 0.4); }
.badge.danger { color: var(--danger); border-color: rgba(255, 141, 131, 0.45); }
.badge.muted { color: var(--sub); border-color: var(--panel-line); }
.badge.accent { color: var(--heading); border-color: var(--outline); }
.guess, .guess-inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lights-wrap > .small { margin-bottom: 6px; color: var(--sub); }
.lights { display: flex; gap: 2px; }
.light { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; min-height: 64px; padding: 7px 2px; background: transparent; border: 1px solid transparent; border-radius: var(--r-btn); cursor: pointer; flex: 1 1 0; color: inherit; }
.light[aria-expanded="true"] { background: var(--panel-2); border-color: var(--panel-2-line); }
.dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #000; font-weight: 800; font-size: 13px; }
.dot.ok { background: var(--ok); } .dot.caution { background: var(--caution); } .dot.danger { background: var(--danger); }
.dot.muted { background: transparent; border: 1.5px solid var(--sub); color: var(--sub); }
.light-label { font-size: 10px; color: var(--label); text-align: center; line-height: 1.25; }
.light-detail { margin-top: 8px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--panel-2-line); border-radius: var(--r-btn); font-size: 13px; }
.light-detail p:last-child { margin: 0; }
.light-detail-head { margin-bottom: 6px; }

/* ---------- conversation ---------- */
.chat-screen { gap: 12px; }
.thread { display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; flex-direction: column; max-width: 92%; }
.msg.me { align-self: flex-end; }
.msg.me .msg-body { background: var(--chip-on); color: var(--chip-on-text); border-radius: 12px 12px 4px 12px; padding: 10px 14px; margin: 0; font-size: 15px; }
.msg.ai .msg-body { font-size: 15px; line-height: 1.6; color: var(--text); }
.msg.ai .msg-body p { margin: 0 0 6px; }
.msg.ai.error .msg-body { color: var(--danger); }
.msg-who { display: inline-flex; align-items: center; gap: 7px; color: var(--label); margin: 0 0 4px; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
.ai-list { margin: 4px 0 6px; padding-left: 1.1em; } .ai-list li + li { margin-top: 4px; }
.ai-more > summary { color: var(--sub); font-size: 12px; min-height: 32px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.ai-more[open] > summary { margin-bottom: 4px; }
.term { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--sub); text-underline-offset: 4px; }
.term-def { font-size: 15px; line-height: 1.6; }
.glossary { display: grid; gap: 4px 0; margin: 0; }
.glossary dt { font-weight: 600; color: var(--heading); margin-top: 10px; font-size: 14px; }
.glossary dd { margin: 0; color: var(--text); font-size: 13px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--label); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin: 8px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--panel-line); }
.typing-dots { display: inline-flex; gap: 5px; padding: 8px 0; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--sub); animation: blink 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: 0.2s; } .typing-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.ccard { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-kicker { margin: 0; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.cc-title { margin: 0; font-size: 13px; font-weight: 500; color: var(--heading); }
.cc-title.big { font-size: 18px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.35; }
.brows { display: flex; flex-direction: column; }
.brow { display: grid; grid-template-columns: 7.2em 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--panel-line); font-size: 13px; }
.brow:first-child { border-top: 0; }
.brow-k { color: var(--sub); }
.brow-v { color: var(--heading); }
.brow.changed { background: rgba(117, 215, 139, 0.06); margin: 0 -8px; padding: 7px 8px; border-radius: 6px; }
.chg { color: var(--ok); font-size: 11px; white-space: nowrap; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { background: var(--panel-2); border: 1px solid var(--panel-2-line); border-radius: var(--r-btn); padding: 10px; min-width: 0; }
.kpi-k { margin: 0 0 4px; font-size: 10px; color: var(--label); line-height: 1.3; }
.kpi-v { margin: 0; font-size: 16px; font-weight: 600; color: var(--heading); letter-spacing: -0.3px; }
.kpi-s { margin: 2px 0 0; font-size: 10px; color: var(--sub); }
.kv2 { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.kv2 dt { color: var(--sub); } .kv2 dd { margin: 0; text-align: right; color: var(--heading); font-size: 15px; font-weight: 600; }
.mini-steps li { font-size: 13px; padding: 3px 0; display: flex; align-items: center; gap: 6px; }
.live-label { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: 0.14em; color: var(--label); }
.progress-ccard.old { padding: 10px 15px; }
.progress-ccard .pending { background: transparent; border: 0; padding: 0; }
.qchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.qchips::-webkit-scrollbar { display: none; }
.qchip { flex: none; min-height: 38px; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--panel-line); background: var(--panel); color: var(--chip-on-text); font-size: 13px; cursor: pointer; white-space: nowrap; }
.qchip.accent { background: var(--heading); color: var(--ink); border-color: var(--heading); font-weight: 600; }
.qchip.danger { color: var(--danger); border-color: rgba(255, 141, 131, 0.45); background: transparent; }
.qchip.tool { background: transparent; border-style: dashed; color: var(--sub); width: auto; font-weight: 400; }
.composer { display: flex; gap: 8px; align-items: flex-end; background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r); padding: 6px 6px 6px 14px; }
.composer-input { flex: 1; resize: none; border: 0; background: transparent; min-height: 40px; max-height: 120px; padding: 9px 0; outline: none; line-height: 1.45; font-size: 15px; color: var(--heading); }
.composer-input::placeholder { color: #6f7872; }
.composer:focus-within { border-color: #6d766f; }
.send-btn { width: 40px; height: 40px; border-radius: var(--r-btn); border: 0; background: var(--heading); color: var(--ink); font-size: 18px; font-weight: 800; cursor: pointer; flex: none; }
.send-btn[disabled] { opacity: 0.4; }
.composer-note { margin: 0; color: #6f7872; font-size: 10px; text-align: center; }
.covers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cover { position: relative; border: 0; border-radius: 11px; padding: 14px; min-height: 120px; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; }
.cover.blue { background: var(--cover-blue); color: var(--cover-blue-ink); }
.cover.lime { background: var(--cover-lime); color: var(--cover-lime-ink); }
.cover.violet { background: var(--cover-violet); color: var(--cover-violet-ink); grid-column: 1 / -1; min-height: 84px; }
.cover-name { font-size: 22px; font-weight: 750; letter-spacing: -0.9px; line-height: 1.05; }
.cover-sub { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }

/* legacy chat pieces (full conditions editor) */
.msg-who + .msg-body { margin: 0; }
.typing::after { content: "…"; }
.suggest { display: flex; flex-direction: column; gap: 8px; }
.suggest-btn { text-align: left; min-height: 48px; padding: 10px 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--panel-line); color: var(--text); cursor: pointer; }
.brief-card { display: flex; flex-direction: column; gap: 0; }
.brief-card[aria-busy="true"] { opacity: 0.7; }
.field { padding: 12px 0; border-top: 1px solid var(--panel-line); }
.field:first-of-type { border-top: 0; }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.field-label { font-weight: 500; font-size: 13px; color: var(--heading); }
.field-help { margin: 6px 0 0; color: var(--sub); }
.value { margin: 0; }
.stepper { display: flex; align-items: center; gap: 6px; }
.step-btn { width: 44px; height: 44px; border-radius: var(--r-btn); border: 1px solid var(--outline); background: transparent; font-size: 18px; cursor: pointer; flex: none; color: var(--heading); }
.step-input { width: 100%; min-width: 0; flex: 1; height: 44px; border-radius: var(--r-btn); border: 1px solid var(--panel-line); background: var(--bg); text-align: right; padding: 0 10px; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--heading); }
.step-unit { color: var(--sub); font-size: 13px; min-width: 2.6em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { min-height: 40px; padding: 7px 11px; border-radius: 6px; border: 0; background: var(--chip-on); color: var(--chip-on-text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tchip[aria-pressed="true"] .tchip-mark { color: var(--ok); }
.tchip[aria-pressed="false"] { background: transparent; color: var(--chip-off); text-decoration: line-through; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: #101113; border: 1px solid #303236; border-radius: 999px; align-self: flex-start; }
.seg-opt { position: relative; flex: 1 1 auto; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-text { display: flex; flex-direction: column; justify-content: center; min-height: 38px; padding: 6px 14px; border-radius: 999px; text-align: center; color: var(--nav-idle); font-size: 13px; }
.seg-text small { color: var(--sub); font-size: 10px; }
.seg-opt input:checked + .seg-text { background: #252a27; color: var(--nav-on); font-weight: 500; }
.seg-opt input:focus-visible + .seg-text { outline: 2px solid var(--heading); outline-offset: 1px; }
.seg-opt input:disabled + .seg-text { opacity: 0.4; }
.seg.compact .seg-text { min-height: 32px; padding: 4px 11px; font-size: 12px; }
.seg.compact .seg-opt { flex: 0 0 auto; }
.seg.compact .seg-opt::after { content: ""; position: absolute; inset: -5px 0; }
.seg.stack-seg { display: flex; flex-direction: column; border-radius: var(--r); gap: 2px; align-self: stretch; }
.seg.stack-seg .seg-text { text-align: left; border-radius: 8px; }
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; background: transparent; border: 0; cursor: pointer; padding: 0; color: var(--heading); }
.switch-knob { width: 44px; height: 26px; border-radius: 999px; background: var(--outline); position: relative; transition: background 0.2s; }
.switch-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--heading); transition: transform 0.2s; }
.switch[aria-checked="true"] .switch-knob { background: var(--ok); }
.switch[aria-checked="true"] .switch-knob::after { transform: translateX(18px); background: #000; }
.questions { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-btn); background: var(--panel-2); }

/* ---------- steps (progress lists) ---------- */
.steps { display: flex; flex-direction: column; gap: 2px; }
.steps.card { padding: 10px 14px; }
.step { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 13px; }
.step-mark { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid var(--panel-line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #000; }
.step[data-state="done"] .step-mark { background: var(--ok); border-color: var(--ok); }
.step[data-state="failed"] .step-mark { background: var(--danger); border-color: var(--danger); }
.step[data-state="warn"] .step-mark { background: var(--caution); border-color: var(--caution); }
.step[data-state="running"] .step-mark { border-color: var(--heading); color: var(--heading); }
.step[data-state="todo"], .step[data-state="skip"] { color: var(--sub); }
.step-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.step-detail { margin-top: 2px; color: var(--sub); }
.step-time { margin-left: auto; padding-left: 8px; white-space: nowrap; color: var(--sub); }
.loading { display: flex; align-items: center; gap: 10px; color: var(--sub); padding: 20px 4px; font-size: 13px; }
.spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--panel-line); border-top-color: var(--heading); animation: spin 0.9s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- research ---------- */
.chart-card { padding: 12px 12px 8px; }
.chart { margin: 0; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--sub); margin: 0 4px 6px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.key { width: 16px; height: 2px; border-radius: 1px; display: inline-block; }
.key.s-main { background: var(--heading); } .key.s-bench { background: #6f7a72; }
.chart-svg { display: block; width: 100%; touch-action: pan-y; outline: none; border-radius: 6px; }
.chart-svg .grid { stroke: #1d231e; stroke-width: 1; } .chart-svg .grid.base { stroke: #3a423c; }
.chart-svg .axis-text { fill: var(--label); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .line.s-main { stroke: var(--heading); } .chart-svg .line.s-bench { stroke: #6f7a72; }
.chart-svg .end { stroke: var(--panel); stroke-width: 2; }
.chart-svg .end.s-main { fill: var(--heading); } .chart-svg .end.s-bench { fill: #6f7a72; }
.chart-svg .end-label { fill: var(--text); font-size: 10px; } .chart-svg .end-value { font-weight: 700; }
.chart-svg .holdout { fill: rgba(240, 241, 238, 0.05); }
.chart-svg .scrub-line { stroke: var(--text); stroke-width: 1; opacity: 0.5; }
.chart-readout { margin: 6px 4px 0; min-height: 1.4em; color: var(--sub); }
.stats { margin: 0; display: flex; flex-direction: column; }
.stat { padding: 10px 0; border-top: 1px solid var(--panel-line); }
.stat:first-child { border-top: 0; padding-top: 0; }
.stat-label { color: var(--sub); font-size: 12px; }
.stat-main { margin: 2px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.4px; color: var(--heading); }
.stat-side { font-size: 13px; font-weight: 400; color: var(--sub); }
.stat-note { margin: 4px 0 0; }
.xtxc-line { margin: 0 0 4px; padding: 10px 12px; border-radius: var(--r-btn); background: var(--panel-2); border: 1px solid var(--panel-2-line); }
.xtxc-line strong { color: var(--heading); }
.xtxc-line p:last-child { margin-bottom: 0; }
.weights li { display: grid; grid-template-columns: 7.5em 1fr 3em; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; }
.weights li > span:last-child { text-align: right; }
.bar { height: 6px; border-radius: 3px; background: var(--panel-line); position: relative; overflow: hidden; }
.bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); background: var(--heading); border-radius: 3px; }
.bar.cash::after { background: #6f7a72; }
.table-wrap { overflow-x: auto; margin: 4px 0 10px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
caption { text-align: left; padding-bottom: 6px; }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--panel-line); text-align: right; white-space: nowrap; }
th[scope="row"], thead th:first-child { text-align: left; font-weight: 400; color: var(--sub); }
thead th { color: var(--sub); font-weight: 400; }

/* ---------- plan ---------- */
.big-sentence { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 2px 0 0; letter-spacing: -0.6px; color: var(--heading); }
.big-sentence.small-big { font-size: 16px; margin: 8px 0; letter-spacing: -0.3px; }
.orders li + li { border-top: 1px solid var(--panel-line); }
.order > summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; min-height: 56px; }
.order-name strong { font-weight: 500; color: var(--heading); }
.order-krw { font-weight: 600; font-size: 15px; text-align: right; color: var(--heading); }
.order-sub { grid-column: 1 / -1; color: var(--sub); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 12px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--panel-2-line); border-radius: var(--r-btn); }
.kv dt { color: var(--sub); } .kv dd { margin: 0; text-align: right; min-width: 0; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--panel-line); }
.totals dt { color: var(--sub); } .totals dd { margin: 0; text-align: right; font-weight: 600; font-size: 15px; color: var(--heading); }
.quote-timer { margin: 0 0 10px; color: var(--sub); }
.quote-timer.expired { color: var(--danger); }
.modes { border: 1px solid var(--panel-line); margin: 0; display: flex; flex-direction: column; gap: 8px; }
.modes > legend { float: left; width: 100%; padding: 0; }
.mode-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-btn); border: 1px solid var(--panel-2-line); background: var(--panel-2); cursor: pointer; min-height: 56px; }
.mode-opt:has(input:checked) { border-color: var(--heading); }
.mode-opt[data-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.mode-opt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--heading); flex: none; }
.mode-text { display: flex; flex-direction: column; gap: 2px; }
.mode-text strong { font-weight: 550; color: var(--heading); }
.presign-extra { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 0; }
.presign-extra .link { min-height: 44px; display: inline-flex; align-items: center; }
.risk-box { border-color: rgba(230, 196, 106, 0.4); }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ok); }
.read-timer { margin: 4px 0 0; color: var(--caution); }
.unblock { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 141, 131, 0.3); }
.wallet-preview .wp-step { background: var(--bg-2); border: 1px solid var(--panel-2-line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
.wp-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.wp-lines li + li { border-top: 1px solid #1c211d; }
.wp-lines .neg { color: var(--heading); font-weight: 600; }
.wp-lines .pos { color: var(--ok); font-weight: 600; text-align: right; }
.mock-switch { display: flex; align-items: center; gap: 6px; }
.dev-tools summary { min-height: 32px; display: flex; align-items: center; color: var(--sub); font-size: 12px; }
.dev-tools .btn-row { margin-top: 8px; }
.slice-tag { grid-column: 1 / -1; color: var(--heading); }
.slice-box { display: flex; flex-direction: column; gap: 6px; border-color: var(--panel-2-line); background: var(--panel-2); }
.slice-box .card-title { margin-bottom: 2px; }
.slice-why li + li { margin-top: 4px; }
.round-list li { padding: 4px 0; border-top: 1px solid var(--panel-line); }
.round-list li:first-child { border-top: 0; }
.rounds { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.rounds .meter { margin: 0; }
.round-tl { margin: 0 0 0 11px; padding: 0; border-left: 1px solid var(--panel-line); }
.round { position: relative; display: flex; gap: 10px; padding: 6px 0 6px 18px; }
.round-mark { position: absolute; left: -12px; top: 8px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--panel); border: 1px solid var(--panel-line); color: #000; }
.round.done .round-mark { background: var(--ok); border-color: var(--ok); }
.round.next .round-mark { border-color: var(--heading); color: var(--heading); }
.round-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.round.later .round-body { color: var(--sub); }
.sim-box { padding: 8px 10px; border-radius: var(--r-btn); background: var(--bg-2); border: 1px solid var(--panel-2-line); margin: 4px 0 8px; }
.sim-box p { margin: 0; } .sim-box p + p { margin-top: 2px; }
.card-tools { margin: 4px 0 8px; }
.sim-note { margin: 8px 0 0; }

/* ---------- slide to approve ---------- */
.slide { display: flex; flex-direction: column; gap: 6px; }
.slide-track { position: relative; height: 56px; border-radius: 999px; background: var(--panel); border: 1px solid var(--outline); overflow: hidden; user-select: none; -webkit-user-select: none; }
.slide-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(240, 241, 238, 0.1); border-radius: 999px; }
.slide-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--heading); padding-left: 48px; pointer-events: none; }
.slide-knob { position: absolute; top: 4px; left: 4px; width: 50px; height: 46px; border-radius: 999px; background: var(--heading); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; cursor: grab; touch-action: none; }
.slide-knob:active { cursor: grabbing; }
.slide.animate .slide-knob, .slide.animate .slide-fill { transition: transform 0.25s ease, width 0.25s ease; }
.slide.locked .slide-track { border-color: var(--panel-line); }
.slide.locked .slide-knob { background: #2a302c; color: var(--sub); cursor: not-allowed; }
.slide.locked .slide-text { color: var(--sub); }
.slide.done .slide-track { border-color: var(--ok); }
.slide.done .slide-knob { background: var(--ok); color: #000; }
.slide-hint { margin: 0; text-align: center; color: var(--caution); }

/* ---------- sheets ---------- */
dialog.sheet { width: 100%; max-width: 560px; margin: auto auto 0; padding: 0; border: 1px solid var(--panel-line); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--panel); color: var(--text); max-height: 88dvh; }
dialog.sheet::backdrop, dialog.fullsheet::backdrop { background: rgba(0, 0, 0, 0.7); }
dialog.sheet[open] { animation: rise 0.22s ease-out; }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 0 20px; }
.sheet-head h2 { font-size: 15px; font-weight: 550; letter-spacing: -0.3px; margin: 0; color: var(--heading); }
.sheet-body { padding: 8px 20px calc(20px + var(--sab)); overflow-y: auto; max-height: calc(88dvh - 60px); }
.note { margin-top: 6px; }
dialog.fullsheet { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text); overflow-y: auto; }
.fs-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: calc(6px + var(--sat)) 12px 6px 6px; background: rgba(8, 9, 9, 0.95); border-bottom: 1px solid var(--line); }
.fs-title { margin: 0; font-size: 14px; font-weight: 550; letter-spacing: -0.3px; color: var(--heading); }
.fs-main { padding: 10px 18px 20px; }
.fs-dock { position: sticky; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px; padding: 10px 18px calc(12px + var(--sab)); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg) 16px); }
.progress-sheet .summary { margin: 0; }

/* ---------- progress summary / side panel ---------- */
.summary { margin: 0; font-size: 13px; }
.srow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--panel-line); }
.srow:first-child { border-top: 0; }
.srow dt { color: var(--sub); flex: none; }
.srow dd { margin: 0; text-align: right; color: var(--heading); min-width: 0; }
.panel-kicker { margin: 0; font-size: 9px; letter-spacing: 0.14em; color: var(--label); text-transform: uppercase; }
.panel-next { margin: 2px 0 6px; font-size: 14px; color: var(--heading); font-weight: 500; }
.panel-title { font-size: 15px; font-weight: 550; letter-spacing: -0.3px; margin: 0 0 12px; color: var(--heading); }
.usage-line { color: var(--sub); margin: 10px 0; }
.stop-btn { width: 100%; }

/* ---------- records ---------- */
.seal { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.seal .plain { width: 100%; }
.seal.is-ok { border-color: rgba(117, 215, 139, 0.3); } .seal.is-bad { border-color: rgba(255, 141, 131, 0.45); }
.seal details { width: 100%; }
.mono-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.mono-grid dt { color: var(--sub); font-size: 12px; white-space: nowrap; }
.mono-grid dd { margin: 0; min-width: 0; }
.filter-chips { display: flex; gap: 4px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; }
.fchip { flex: none; min-height: 34px; padding: 7px 11px; border-radius: 6px; border: 0; background: transparent; color: var(--chip-off); cursor: pointer; font-size: 12px; }
.fchip[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-text); }
.tl-day + .tl-day { margin-top: 12px; }
.tl-date { margin: 0 0 6px; font-weight: 400; color: var(--label); }
.tl { border-left: 1px solid var(--panel-line); margin-left: 6px; }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: -4px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--panel-line); }
.tl-link { display: grid; grid-template-columns: auto auto 1fr auto; gap: 4px 8px; align-items: baseline; padding: 10px 0 10px 14px; min-height: 44px; color: var(--text); text-decoration: none; font-size: 13px; }
.tl-time { white-space: nowrap; color: var(--sub); }
.tl-text { grid-column: 1 / 4; }
.tl-link .chev { grid-row: 1 / 3; grid-column: 4; align-self: center; }
.tchip-type { display: inline-block; font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 4px; border: 1px solid; width: max-content; }
.tchip-type.accent { color: var(--heading); border-color: var(--outline); }
.tchip-type.danger { color: var(--danger); border-color: rgba(255, 141, 131, 0.45); }
.tchip-type.caution { color: var(--caution); border-color: rgba(230, 196, 106, 0.4); }
.tchip-type.ok { color: var(--ok); border-color: rgba(117, 215, 139, 0.4); }
.tchip-type.muted { color: var(--sub); border-color: var(--panel-line); }
.row-link { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); text-decoration: none; }
.row-link > span:first-child { flex: 1; }
.more-btn { margin-top: 12px; }

/* ---------- receipt ---------- */
.results { padding: 4px 15px; }
.result { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 0; align-items: center; }
.result + .result { border-top: 1px solid var(--panel-line); }
.result-name strong { font-weight: 500; color: var(--heading); }
.result-sub { grid-column: 1 / -1; color: var(--sub); }
.receipt .mono-grid dd { font-size: 12px; }

/* ---------- scorecard ---------- */
.score-line { font-size: 16px; line-height: 1.4; margin-bottom: 10px; color: var(--heading); }
.score-line strong { font-size: 22px; letter-spacing: -0.5px; }
.meter { height: 6px; border-radius: 3px; background: var(--panel-line); overflow: hidden; margin-bottom: 10px; }
.meter-fill { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--ok); border-radius: 3px; }
.metric-rows { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--panel-line); }
.miss + .miss { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-line); }
.miss p { margin-bottom: 2px; }

/* ---------- wallet check ---------- */
.ask { border: 1px solid var(--panel-line); display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ask > legend { float: left; width: 100%; padding: 0; }
.note-input { width: 100%; border-radius: var(--r-btn); border: 1px solid var(--panel-line); background: var(--bg); padding: 10px 12px; resize: vertical; color: var(--heading); }
.check-list li { padding: 4px 0; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; transform: translate(-50%, 20px); bottom: calc(var(--dock-h) + 24px + var(--sab)); z-index: 60; width: min(calc(100% - 32px), 440px); padding: 12px 16px; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--panel-2-line); color: var(--heading); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { border-color: rgba(117, 215, 139, 0.5); } .toast.caution { border-color: rgba(230, 196, 106, 0.5); } .toast.danger { border-color: rgba(255, 141, 131, 0.6); }

/* ---------- desktop: exchange grid (main + watchlist-style progress panel) ---------- */
@media (min-width: 900px) {
  .top { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); padding: 0 30px; }
  .top-row { min-height: 76px; gap: 28px; }
  .wordmark { width: 80px; }
  .lang-pill { display: inline-flex; }
  .lang-btn { display: none; }
  .lang-pill + .lang-btn + .wallet-chip { margin-left: 0; }
  .tabs { position: absolute; left: 170px; top: 0; height: 76px; margin: 0; gap: 8px; justify-content: flex-start; align-items: stretch; }
  .tabs a { font-size: 14px; padding: 12px 15px; min-height: 76px; }
  .tabs a[aria-current="page"]::after { left: 15px; right: 15px; }
  .top { position: sticky; }
  .progress { display: none; }
  .banner { max-width: 1220px; margin: 12px auto 0; width: calc(100% - 60px); }
  .layout { max-width: 1280px; margin: 0 auto; }
  .main-col { padding: 0 36px 0 30px; }
  main { padding: 26px 0 24px; max-width: 760px; width: 100%; }
  .dock { max-width: 760px; width: 100%; padding-left: 0; padding-right: 0; }
  .screen-title { font-size: 29px; }
  .side-panel { display: block; width: 300px; flex: none; border-left: 1px solid var(--panel-line); padding: 26px 26px 40px; position: sticky; top: 77px; align-self: flex-start; max-height: calc(100dvh - 77px); overflow-y: auto; }
  .card { padding: 20px; }
  .ccard { max-width: 620px; }
  dialog.fullsheet { max-width: 760px; margin: 0 auto; border-left: 1px solid var(--panel-line); border-right: 1px solid var(--panel-line); }
  .msg.ai .msg-body { max-width: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .dot, .step-mark, .badge, .tchip-type, .steps5 li::before { border: 1px solid CanvasText; }
}

/* 변동 예측 (forecast) card */
.fc-item { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.forecast-ccard .cc-head + .fc-item { border-top: 0; padding-top: 0; }
.fc-item p { margin: 0; }
.fc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fc-name { font-weight: 700; color: var(--heading); font-size: 15px; }
.fc-range { font-size: 20px; font-weight: 750; letter-spacing: -0.4px; color: var(--heading); }
.fc-bar { position: relative; height: 14px; margin: 6px 4px 0; }
.fc-band { position: absolute; left: 0; right: 0; top: 4px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 141, 131, 0.6), rgba(147, 157, 149, 0.35) 50%, rgba(117, 215, 139, 0.6)); }
.fc-ref { position: absolute; top: 0; width: 2px; height: 14px; margin-left: -1px; background: var(--heading); border-radius: 1px; }
.fc-dip { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--danger); background: var(--bg); }
.fc-ends { display: flex; justify-content: space-between; color: var(--muted); }
.fc-proof { color: var(--sub); }

/* AI 전략 설계 card: rules are sentences, not numbers */
.design-card dl.rules { margin: 4px 0 2px; }
.design-card dl.rules dt { color: var(--muted); font-size: 12px; margin-top: 8px; }
.design-card dl.rules dd { margin: 2px 0 0; color: var(--text); font-size: 13px; line-height: 1.45; }