:root {
  color-scheme: light;
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --ink: #101820;
  --muted: #65717d;
  --line: #d9dfe4;
  --surface: #ffffff;
  --canvas: #f3f5f6;
  --signal: #ffca0a;
  --signal-soft: #fff5c4;
  --green: #087f5b;
  --green-soft: #e7f5ef;
  --red: #c53b32;
  --red-soft: #fdecea;
  --blue: #1d5fa7;
  --radius: 8px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, input { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
.topbar {
  min-height: 78px; display: flex; align-items: center; gap: 14px;
  padding: 14px clamp(18px, 4vw, 54px); background: var(--ink); color: #fff;
  border-bottom: 4px solid var(--signal);
}
.brand-mark { width: 38px; height: 38px; display: grid; gap: 4px; align-content: center; }
.brand-mark span { display: block; height: 4px; background: var(--signal); }
.brand-mark span:nth-child(2) { width: 72%; }
.brand-mark span:nth-child(3) { width: 42%; }
h1, h2, p { margin: 0; }
h1 { font-size: 21px; line-height: 1.2; }
h2 { font-size: 18px; line-height: 1.3; }
.eyebrow { font-size: 10px; font-weight: 800; color: var(--muted); }
.topbar .eyebrow { color: #9da8b2; }
.top-actions { margin-left: auto; display: flex; gap: 8px; }
.button { min-height: 38px; border: 1px solid transparent; border-radius: 6px; padding: 0 15px; font-weight: 800; }
.button.secondary { background: #25313b; color: #fff; border-color: #3e4b55; }
main { max-width: 1440px; margin: 0 auto; padding: 22px clamp(14px, 3vw, 34px) 36px; }
.instrument-band { margin-bottom: 18px; }
.section-heading, .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.ticker-label { font-size: 13px; color: var(--muted); font-weight: 800; }
.instrument-selector { display: grid; grid-template-columns: repeat(5, minmax(112px, 1fr)); gap: 9px; }
.instrument-button {
  min-height: 60px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-align: left; color: var(--ink);
}
.instrument-button span { display: block; font-size: 14px; font-weight: 850; }
.instrument-button small { color: var(--muted); font-size: 10px; }
.instrument-button.active { background: var(--signal); border-color: #e1ad00; }
.instrument-button.active small { color: #564300; }
.workspace { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(430px, 1.25fr) minmax(280px, .8fr); gap: 14px; align-items: start; }
.panel, .result-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.result-panel { position: sticky; top: 14px; background: var(--ink); color: #fff; border-color: var(--ink); }
.field-grid { display: grid; gap: 11px; }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.field input { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 6px; padding: 0 11px; background: #fbfcfc; color: var(--ink); }
.field input:focus { outline: 2px solid #f4c300; outline-offset: 1px; border-color: #f4c300; }
.field.emphasis .input-shell { border-color: #e1ad00; background: var(--signal-soft); }
.input-shell { display: flex; height: 42px; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfc; overflow: hidden; }
.input-shell input { border: 0; background: transparent; min-width: 0; }
.input-shell > span { padding-left: 11px; color: var(--muted); font-weight: 750; }
.input-shell.suffix > span { padding: 0 10px 0 0; font-size: 11px; }
.auto-toggle { display: flex; align-items: center; gap: 7px; min-height: 34px; color: var(--muted); font-size: 11px; font-weight: 800; cursor: pointer; }
.auto-toggle input { width: 18px; height: 18px; accent-color: var(--ink); }
.product-settings { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.product-settings summary { cursor: pointer; font-size: 12px; font-weight: 800; color: var(--blue); }
.settings-grid { margin-top: 12px; }
.count-badge { padding: 6px 9px; background: var(--signal-soft); color: #725900; font-size: 11px; font-weight: 800; border-radius: 6px; }
.entry-header, .entry-row { display: grid; grid-template-columns: 52px 48px minmax(110px, 1fr) 72px 82px; align-items: center; gap: 8px; }
.entry-header { min-height: 32px; color: var(--muted); font-size: 10px; font-weight: 800; text-align: right; }
.entry-header span:first-child, .entry-header span:nth-child(2) { text-align: center; }
.entry-row { min-height: 57px; border-top: 1px solid #e6eaed; }
.entry-row.disabled { opacity: .45; }
.entry-check { display: grid; place-items: center; }
.entry-check input { width: 22px; height: 22px; accent-color: var(--ink); }
.entry-index { text-align: center; font-weight: 900; }
.entry-position { text-align: right; }
.entry-price-input { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 5px; padding: 0 7px; background: #fff; color: var(--ink); text-align: right; font-size: 12px; font-weight: 800; }
.entry-price-input[readonly] { border-color: transparent; background: transparent; }
.entry-price-input:focus { outline: 2px solid #f4c300; outline-offset: 1px; }
.entry-position small { color: var(--muted); font-size: 10px; }
.weight-input { width: 66px; height: 35px; border: 1px solid var(--line); border-radius: 6px; padding: 0 7px; text-align: right; }
.entry-lot { text-align: right; font-variant-numeric: tabular-nums; font-weight: 900; }
.entry-loss { grid-column: 3 / 6; text-align: right; color: var(--muted); font-size: 10px; padding-bottom: 7px; }
.status-block { display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #34414b; padding-bottom: 14px; }
.status-block .eyebrow { color: #92a0ab; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #73808a; box-shadow: 0 0 0 4px #2a3741; }
.status-block.ready .status-dot { background: #20c997; box-shadow: 0 0 0 4px #184d41; }
.status-block.warning .status-dot { background: var(--signal); box-shadow: 0 0 0 4px #544710; }
.status-block.danger .status-dot { background: #ff6b61; box-shadow: 0 0 0 4px #542724; }
.primary-result { padding: 24px 0 19px; border-bottom: 1px solid #34414b; }
.primary-result span, .primary-result small { display: block; color: #9ca8b2; font-size: 11px; }
.primary-result strong { display: block; margin: 5px 0; color: var(--signal); font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.result-list { margin: 0; }
.result-list div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #2c3943; }
.result-list dt { color: #9ca8b2; font-size: 11px; }
.result-list dd { margin: 0; font-weight: 850; font-variant-numeric: tabular-nums; }
.message-box { min-height: 42px; margin-top: 15px; padding: 11px; border-radius: 6px; background: #26323b; color: #dce2e7; font-size: 11px; line-height: 1.55; }
footer { display: flex; justify-content: space-between; gap: 12px; max-width: 1440px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 34px) 28px; color: var(--muted); font-size: 10px; }

@media (max-width: 1050px) {
  .workspace { grid-template-columns: 1fr 1.2fr; }
  .result-panel { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .status-block, .primary-result, .message-box { grid-column: 1; }
  .result-list { grid-column: 2; grid-row: 1 / span 3; }
}
@media (max-width: 720px) {
  .topbar { padding: 11px 14px; min-height: 68px; }
  .brand-mark { width: 30px; }
  h1 { font-size: 18px; }
  .top-actions .button { padding: 0 11px; }
  main { padding-top: 16px; }
  .instrument-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instrument-button:last-child { grid-column: 1 / -1; }
  .workspace { grid-template-columns: 1fr; }
  .result-panel { grid-column: auto; display: block; }
  .field-grid.two { grid-template-columns: 1fr 1fr; }
  .entry-header, .entry-row { grid-template-columns: 42px 42px minmax(92px, 1fr) 64px 68px; gap: 5px; }
  .panel, .result-panel { padding: 15px; }
  .weight-input { width: 60px; }
}
@media (max-width: 420px) {
  .field-grid.two { grid-template-columns: 1fr; }
  .entry-header { display: none; }
  .entry-row { grid-template-columns: 38px 36px minmax(82px, 1fr) 58px 62px; }
  .entry-lot { font-size: 12px; }
  .primary-result strong { font-size: 34px; }
}