/* 트레이딩 데스크 전용 스타일. 공용 토큰은 shared-ui/afw-tokens.css. */

main {
  width: min(1720px, 100%);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-12);
}

.t-notice {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  font-size: var(--fs-compact);
  color: var(--text-muted);
}

.t-notice.is-paper {
  border-color: color-mix(in srgb, var(--info) 45%, transparent);
  color: var(--info);
}

.t-notice.is-live {
  border-color: var(--err);
  color: var(--err);
  font-weight: 600;
}

.t-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: start;
}

.t-panel {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.t-panel[data-span="3"] { grid-column: span 3; }
.t-panel[data-span="4"] { grid-column: span 4; }
.t-panel[data-span="5"] { grid-column: span 5; }
.t-panel[data-span="6"] { grid-column: span 6; }
.t-panel[data-span="7"] { grid-column: span 7; }
.t-panel[data-span="8"] { grid-column: span 8; }
.t-panel[data-span="9"] { grid-column: span 9; }
.t-panel[data-span="10"] { grid-column: span 10; }
.t-panel[data-span="11"] { grid-column: span 11; }
.t-panel[data-span="12"] { grid-column: span 12; }

.t-panel.is-pinned {
  border-color: var(--accent);
}

.t-panel-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

.t-panel-title {
  font-size: var(--fs-body-compact);
  font-weight: 700;
}

.t-panel-status:empty {
  display: none;
}

.t-panel-body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.t-sub {
  font-size: var(--fs-body-compact);
  color: var(--text-muted);
  margin: 0;
}

.t-grow {
  flex: 1 1 auto;
}

.t-field-row {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* 시세 요약 */

.t-summary {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

.t-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.t-summary-item:hover {
  background: var(--surface-hover);
}

.t-summary-name {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.t-summary-value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-section);
  font-weight: 700;
}

.t-summary-change {
  font-family: var(--font-num);
  font-size: var(--fs-caption);
}

/* 차트 */

.t-chart-controls {
  gap: var(--sp-2);
}

.t-chart-host {
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  padding: var(--sp-1);
}

/* 차트 클릭 주문 */

.m-chart-svg.is-orderable {
  cursor: crosshair;
}

.t-chart-order-hint {
  margin-top: var(--sp-1);
}

.t-basket-form {
  margin-bottom: var(--sp-3);
}

.m-chart-svg { display: block; touch-action: pan-y; }
.m-grid-line { stroke: var(--line); stroke-width: 1; }
.m-grid-line.is-dashed { stroke-dasharray: 3 3; }
.m-axis-label { fill: var(--text-faint); font-size: 11px; font-family: var(--font-num); }
.m-wick.is-up, .m-body.is-up { stroke: var(--up); fill: var(--up); }
.m-wick.is-down, .m-body.is-down { stroke: var(--down); fill: var(--down); }
.m-wick { stroke-width: 1; }
.m-vol.is-up { fill: color-mix(in srgb, var(--up) 55%, transparent); }
.m-vol.is-down { fill: color-mix(in srgb, var(--down) 55%, transparent); }
.m-line { stroke-width: 1.4; fill: none; }
.m-line.is-ma5 { stroke: #f3b23c; }
.m-line.is-ma20 { stroke: #4c9aff; }
.m-line.is-ma60 { stroke: #a97bff; }
.m-line.is-bb { stroke: #7f8fa6; stroke-dasharray: 4 3; }
.m-line.is-bb-mid { stroke: #5a6b82; }
.m-line.is-rsi { stroke: #34c77b; }
.m-crosshair.is-hidden { display: none; }
.m-cross-line { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.m-readout {
  min-height: 20px;
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* 호가 */

.t-book {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.t-book-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 26px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: 4px;
  background: var(--bg-sunken);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-compact);
  cursor: pointer;
  overflow: hidden;
}

.t-book-row:hover {
  background: var(--surface-hover);
}

.t-book-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  pointer-events: none;
}

/*
 * 잔량 막대 폭. CSP 가 `style-src 'self'` 라 인라인 스타일로 폭을 줄 수 없어
 * 5% 단위 클래스로 표현한다.
 */
.t-book-bar.w-0 { width: 0; }
.t-book-bar.w-5 { width: 5%; }
.t-book-bar.w-10 { width: 10%; }
.t-book-bar.w-15 { width: 15%; }
.t-book-bar.w-20 { width: 20%; }
.t-book-bar.w-25 { width: 25%; }
.t-book-bar.w-30 { width: 30%; }
.t-book-bar.w-35 { width: 35%; }
.t-book-bar.w-40 { width: 40%; }
.t-book-bar.w-45 { width: 45%; }
.t-book-bar.w-50 { width: 50%; }
.t-book-bar.w-55 { width: 55%; }
.t-book-bar.w-60 { width: 60%; }
.t-book-bar.w-65 { width: 65%; }
.t-book-bar.w-70 { width: 70%; }
.t-book-bar.w-75 { width: 75%; }
.t-book-bar.w-80 { width: 80%; }
.t-book-bar.w-85 { width: 85%; }
.t-book-bar.w-90 { width: 90%; }
.t-book-bar.w-95 { width: 95%; }
.t-book-bar.w-100 { width: 100%; }

.t-book-row.is-ask .t-book-bar {
  background: color-mix(in srgb, var(--down) 16%, transparent);
}

.t-book-row.is-bid .t-book-bar {
  background: color-mix(in srgb, var(--up) 16%, transparent);
}

.t-book-price {
  position: relative;
  flex: 1 1 auto;
  font-family: var(--font-num);
  font-weight: 600;
}

.t-book-qty {
  position: relative;
  color: var(--text-muted);
}

.t-book-mid {
  padding: var(--sp-2);
  margin: var(--sp-1) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  text-align: center;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--fs-body-compact);
}

.t-book-fallback {
  text-align: center;
  padding: var(--sp-3);
}

/* 주문 */

.t-side-toggle {
  display: flex;
  gap: var(--sp-2);
}

.t-side {
  flex: 1 1 0;
  justify-content: center;
  min-height: var(--ctl);
  font-weight: 600;
}

.t-side.is-buy[aria-pressed="true"] {
  background: color-mix(in srgb, var(--up) 20%, transparent);
  border-color: var(--up);
  color: var(--up);
}

.t-side.is-sell[aria-pressed="true"] {
  background: color-mix(in srgb, var(--down) 20%, transparent);
  border-color: var(--down);
  color: var(--down);
}

/* 잔고 */

.t-metrics {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.t-metric {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
}

.t-metric-label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.t-metric-value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-body);
  font-weight: 700;
}

/* 관심 목록 */

.t-watch-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-height: 300px;
  overflow-y: auto;
}

.t-watch-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  font-size: var(--fs-compact);
}

.t-watch-row.is-active {
  outline: 1px solid var(--accent);
}

.t-watch-pick {
  flex: 1 1 auto;
  min-height: var(--ctl-compact);
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* 알림 */

.t-alert-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-height: 280px;
  overflow-y: auto;
}

.t-alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--line-strong);
  background: var(--bg-sunken);
  font-size: var(--fs-compact);
}

.t-alert.is-warn { border-left-color: var(--warn); }
.t-alert.is-error { border-left-color: var(--err); }
.t-alert.is-info { border-left-color: var(--info); }

.t-alert-time {
  flex: 0 0 64px;
  color: var(--text-faint);
  font-family: var(--font-num);
  font-size: var(--fs-caption);
}

/* 배치 설정 */

.t-layout-list,
.t-preset-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.t-layout-row,
.t-preset-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
}

.t-layout-row > .afw-chip:first-child {
  min-width: 116px;
  justify-content: flex-start;
}

.t-preset-row > span:first-child {
  flex: 1 1 auto;
  font-size: var(--fs-body-compact);
}

.t-layout-span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.t-span-input {
  width: 64px;
  min-height: var(--ctl-compact);
}

.t-mode-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.t-mode-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.t-mode-row > .afw-chip {
  flex: 0 0 82px;
  justify-content: center;
}

/* 주문 확인 */

.t-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
}

.t-confirm-row {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-body-compact);
}

.t-confirm-label {
  flex: 0 0 84px;
  color: var(--text-muted);
}

.t-confirm-value {
  font-weight: 600;
  font-family: var(--font-num);
}

.t-footer-note {
  margin-top: var(--sp-2);
  max-width: 78ch;
}

@media (max-width: 1180px) {
  .t-panel[data-span] {
    grid-column: span 6;
  }

  .t-panel[data-span="12"],
  .t-panel[data-span="11"],
  .t-panel[data-span="10"] {
    grid-column: span 12;
  }
}

@media (max-width: 840px) {
  main {
    padding: var(--sp-3);
  }

  .t-panel[data-span] {
    grid-column: span 12;
  }

  .t-panel-head {
    flex-wrap: wrap;
  }

  .t-side {
    min-height: var(--ctl-touch);
  }
}