:root {
  color-scheme: light;
  --green-900: #0b3d2e;
  --green-700: #146c43;
  --green-600: #1b8a57;
  --green-500: #22a565;
  --green-100: #dcf2e6;
  --green-50: #eff8f3;
  --bg-canvas: #edeef0;
  --bg-app: #f7f8f9;
  --surface: #ffffff;
  --surface-sub: #f4f5f6;
  --border: #e6e8ea;
  --text-primary: #141715;
  --text-secondary: #5c6660;
  --text-tertiary: #9aa39e;
  --positive: #1b8a57;
  --negative: #d6455d;
  --warning: #e8a23d;

  /* 기존 컴포넌트 호환 토큰: 한국 증시 관례에 따라 상승=로즈, 하락=그린 */
  --bg: var(--bg-canvas);
  --panel: var(--surface);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --accent: var(--green-700);
  --accent-strong: var(--green-900);
  --gain: #d6455d;
  --loss: #1b8a57;
  --soft-gain: #fcecef;
  --soft-loss: #eff8f3;
  --warn: var(--warning);
  --shadow: 0 1px 2px rgba(16, 19, 18, 0.04);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

.topbar {
  display: grid;
  /* 2행은 차트가 남는 폭을 전부 차지하고 액션은 콘텐츠 폭만 사용한다 */
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-rows: auto auto;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 18px;
}

.topbar .brand {
  grid-column: 1;
  grid-row: 1;
  align-self: flex-start;
}

.topbar > .global-nav {
  /* 브랜드와 같은 행 전체를 차지해 액션 열 폭과 무관하게 화면 중앙을 유지한다 */
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  align-self: end;
}

.topbar .index-chart-panel {
  grid-column: 1;
  grid-row: 2;
}

.topbar .topbar-actions {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

.global-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 4px;
  /* 어떤 폭에서도 컨테이너를 넘지 않게 — 좁으면 줄바꿈 */
  max-width: 100%;
  flex-wrap: wrap;
}

/* 데스크톱에서는 햄버거 버튼을 숨기고 링크 묶음을 그대로 노출한다 */
.nav-toggle {
  display: none;
}

.nav-menu {
  display: contents;
}

/* 네비를 품는 브랜드 블록이 flex/grid 안에서 줄어들 수 있게 */
.topbar .brand,
.trade-topbar .brand,
.vending-topbar .brand,
.storage-topbar .brand,
.about-topbar .brand {
  min-width: 0;
}

.global-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  color: var(--muted);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.global-nav a:hover {
  color: var(--accent);
  background: #f4fafb;
}

.global-nav a.active {
  background: var(--accent);
  color: #fff;
}

.global-nav a:focus-visible {
  outline: 2px solid rgba(23, 107, 135, 0.35);
  outline-offset: 3px;
}

.topbar-actions {
  /* 날짜와 갱신 버튼은 맨 위, 상태 pill은 원래 위치(하단)에 분리 배치 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  align-self: stretch;
}

.topbar-actions .status-pill {
  margin-top: auto;
}

.collect-note {
  margin: 0;
  /* 열 너비에 기여하지 않게 해 버튼 폭 안에서 줄바꿈되도록 한다 */
  width: 0;
  min-width: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

#chart-range {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.collect-button {
  min-width: 150px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  padding: 3px 14px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.collect-button:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.collect-button:disabled {
  border-color: var(--line);
  background: #d8e1e5;
  color: #6b7b84;
  cursor: wait;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 40px;
  line-height: 1;
}

.slogan {
  margin-top: 8px;
  color: #24343c;
  font-size: 18px;
  font-weight: 800;
}

h2 {
  font-size: 20px;
}

.status-pill {
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  padding: 9px 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.index-chart-panel {
  /* 내용(지수 정보 + 차트)에 딱 맞게 감싸고 상단 행에서 수직 중앙 배치 */
  align-self: center;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  padding: 16px;
}

.chart-head {
  display: grid;
  /* 텍스트 열은 내용 폭만 차지하고 나머지 가로 공간을 전부 차트에 준다 */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  margin-bottom: 2px;
}

.chart-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.chart-head .exchange-label {
  display: inline-block;
  margin-top: 8px;
  margin-right: 6px;
}

.chart-head strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.chart-head .exchange-value {
  display: inline-block;
  color: var(--muted);
  font-size: 13px;
}

#index-chart {
  display: block;
  width: 100%;
  min-width: 0;
  height: 130px;
  overflow: visible;
  background: #ffffff;
  border-radius: 8px;
}

.chart-grid-line {
  stroke: #e7edf0;
  stroke-width: 1;
}

.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  cursor: help;
}

.chart-area {
  fill: rgba(23, 107, 135, 0.08);
}

.chart-point {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 3;
  cursor: help;
}

/* 포인트가 많을 때 축소된 점: 흰 테두리를 얇게 해 선이 끊겨 보이지 않게 한다 */
.chart-point.dense {
  stroke-width: 0.6;
}

.chart-label {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.status-pill.down {
  border-color: #f8c5d4;
  background: var(--soft-gain);
  color: var(--gain);
}

.status-pill.up {
  border-color: #bfdffe;
  background: var(--soft-loss);
  color: var(--loss);
}

.status-pill.flat {
  border-color: var(--line);
  background: #f2f5f6;
  color: var(--muted);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.summary-card,
.controls,
.notice,
.top-candidates,
.table-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.summary-card {
  padding: 16px;
}

.summary-card span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}

.summary-card strong {
  font-size: 24px;
  line-height: 1.15;
}

.summary-card strong small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.summary-card strong small.num-gain {
  color: var(--gain);
}

.summary-card strong small.num-loss {
  color: var(--loss);
}

.controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  padding: 16px;
  margin-bottom: 14px;
}

.controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

select,
input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
}

select:focus,
input:focus {
  outline: 2px solid rgba(23, 107, 135, 0.2);
  border-color: var(--accent);
}

.toggle-row {
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 8px;
}

.check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.check input {
  width: 16px;
  height: 16px;
}

.notice {
  margin-bottom: 14px;
  padding: 12px 14px;
  color: var(--warn);
  font-size: 14px;
}

.trade-topbar {
  display: grid;
  /* 좌우 1fr 균형 열로 메뉴를 화면 수평 중앙, 슬로건 높이(하단 정렬)에 배치 */
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}

/* 연간 추이 차트는 헤더가 아니라 본문 최상단 전용 패널로 배치한다 */
.trade-year-chart-panel {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  padding: 14px 16px 12px;
}

.trade-year-chart-panel[hidden] {
  display: none;
}

.trade-year-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.trade-year-chart-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.trade-year-chart-head strong {
  color: var(--ink);
  font-size: 14px;
}

#trade-year-chart {
  display: block;
  width: 100%;
  height: 150px;
  overflow: visible;
  background: #fff;
  border-radius: 8px;
}

.year-bar.export {
  fill: var(--accent);
  cursor: help;
}

.year-bar.export.partial {
  fill: rgba(23, 107, 135, 0.38);
}

.year-bar.import {
  fill: var(--green-100);
  cursor: help;
}

.year-bar.import.partial {
  fill: rgba(159, 195, 207, 0.42);
}

.year-bar:hover {
  fill: var(--accent-strong);
}

.year-bar.import:hover {
  fill: var(--green-600);
}

.year-partial-label {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.year-axis-label,
.year-unit-label {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.year-chart-legend text {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.trade-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trade-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

.trade-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.trade-card {
  display: grid;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfe;
  padding: 13px;
}

.trade-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.trade-card-head strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.trade-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.trade-card-head b {
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-size: 16px;
  line-height: 1.2;
  text-align: right;
}

.trade-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.trade-card-metrics em,
.trade-balance span,
.trade-card-head b,
.trade-sort-control span {
  cursor: help;
  font-style: normal;
}

.trade-card-metrics b {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.trade-card-metrics b.num-gain,
.trade-balance.num-gain strong {
  color: var(--gain);
}

.trade-card-metrics b.num-loss,
.trade-balance.num-loss strong {
  color: var(--loss);
}

.trade-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.trade-balance strong {
  color: var(--ink);
  font-size: 13px;
  text-align: right;
}

.trade-data-notice {
  color: var(--muted);
}

.trade-sort-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.trade-sort-control select {
  width: auto;
  min-width: 190px;
  padding: 7px 28px 7px 10px;
}

.top-candidates {
  margin-bottom: 14px;
  overflow: hidden;
}

.candidate-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}

.candidate-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdfe;
}

.candidate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.candidate-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff !important;
  font-size: 13px;
  font-weight: 900;
}

.candidate-title {
  min-width: 0;
}

.candidate-title strong,
.candidate-title .stock-detail-trigger {
  display: block;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.candidate-title span {
  color: var(--muted);
  font-size: 12px;
}

.candidate-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.candidate-score {
  display: grid;
  gap: 2px;
  justify-items: end;
  color: var(--accent-strong);
  text-align: right;
}

.candidate-score strong {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.candidate-score span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.candidate-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.candidate-meta b {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.candidate-meta b.num-gain,
td.num-gain {
  color: var(--gain);
}

.candidate-meta b.num-loss,
td.num-loss {
  color: var(--loss);
}

.mini-chart {
  width: 100%;
  height: 82px;
  margin-top: 4px;
}

.mini-chart-grid {
  stroke: #e7edf0;
  stroke-width: 1;
}

.mini-chart-axis {
  stroke: #cfd9de;
  stroke-width: 1.2;
}

.mini-chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.mini-chart-area {
  fill: rgba(23, 107, 135, 0.08);
}

.mini-chart-volume {
  fill: rgba(23, 107, 135, 0.22);
  cursor: help;
}

.mini-chart-volume:hover {
  fill: rgba(23, 107, 135, 0.5);
}

.mini-chart-line:hover {
  stroke: var(--accent-strong);
}

.mini-chart-point {
  fill: var(--accent);
  cursor: help;
}

.mini-chart-line {
  cursor: help;
}

.mini-chart-label {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.chart-tooltip {
  position: fixed;
  z-index: 30;
  display: none;
  max-width: 280px;
  border-radius: 6px;
  background: #172026;
  color: #fff;
  padding: 7px 9px;
  box-shadow: 0 8px 20px rgba(23, 32, 38, 0.2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  pointer-events: none;
  /* 긴 설명글도 잘리지 않고 박스 안에서 줄바꿈되도록 한다 */
  white-space: normal;
  width: max-content;
}

.table-section {
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.section-header p {
  color: var(--muted);
  font-size: 14px;
}

.section-title {
  display: grid;
  gap: 4px;
}

.page-size-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.page-size-control select {
  width: auto;
  min-width: 72px;
  padding: 7px 28px 7px 10px;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  min-width: 1220px;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  text-align: right;
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef3f5;
  color: #40505a;
  font-size: 12px;
}

.sort-button {
  position: relative;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: inherit;
  font-weight: 800;
}

.sort-button::after {
  content: "↕";
  display: inline-block;
  width: 1em;
  margin-left: 3px;
  color: #7b8a93;
}

.sort-button.active.asc::after {
  content: "▲";
  color: var(--accent);
}

.sort-button.active.desc::after {
  content: "▼";
  color: var(--accent);
}

.sort-button:focus-visible {
  outline: 2px solid rgba(23, 107, 135, 0.35);
  outline-offset: 3px;
}

.sort-button[data-tooltip]:hover::before,
.sort-button[data-tooltip]:focus-visible::before {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 5;
  width: max-content;
  max-width: 260px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: #172026;
  color: #fff;
  padding: 8px 10px;
  box-shadow: 0 8px 20px rgba(23, 32, 38, 0.18);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}

.sort-button[data-tooltip]:hover::after,
.sort-button[data-tooltip]:focus-visible::after {
  color: var(--accent);
}

td {
  font-size: 14px;
}

th:nth-child(2),
td:nth-child(2) {
  text-align: left;
}

tbody tr:hover {
  background: #f8fbfc;
}

.stock-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.stock-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.stock-name strong,
.stock-name .stock-detail-trigger {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-name span {
  color: var(--muted);
  font-size: 12px;
}

.stock-detail-trigger {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font: inherit;
  font-weight: 800;
}

.stock-detail-trigger:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stock-detail-trigger:focus-visible {
  outline: 2px solid rgba(23, 107, 135, 0.35);
  outline-offset: 3px;
  border-radius: 4px;
}

.stock-compare-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.stock-compare-button:hover {
  border-color: var(--accent);
  background: #f4fafb;
}

.stock-compare-button.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.stock-compare-button:focus-visible {
  outline: 2px solid rgba(23, 107, 135, 0.35);
  outline-offset: 3px;
}

.compare-waiting-badge {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 36;
  display: flex;
  align-items: center;
  max-width: min(720px, calc(100vw - 24px));
  transform: translateX(-50%);
  border: 1px solid rgba(23, 107, 135, 0.28);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(25, 38, 45, 0.14);
  color: var(--ink);
  gap: 10px;
  padding: 9px 10px 9px 16px;
}

.compare-waiting-badge[hidden] {
  display: none;
}

.compare-waiting-badge span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-waiting-badge button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fbfc;
  color: var(--accent);
  cursor: pointer;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

.compare-waiting-badge button:hover {
  border-color: var(--accent);
  background: #f4fafb;
}

.compare-waiting-badge button:focus-visible {
  outline: 2px solid rgba(23, 107, 135, 0.35);
  outline-offset: 3px;
}

.num-gain {
  color: var(--gain);
  font-weight: 700;
}

.num-loss {
  color: var(--loss);
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  border-radius: 999px;
  padding: 3px 8px;
  background: #edf7f4;
  color: #0a6b4f;
  font-size: 12px;
  font-weight: 800;
}

.empty {
  padding: 36px 12px;
  color: var(--muted);
  text-align: center !important;
}

.table-footer {
  display: flex;
  justify-content: center;
  padding: 12px 16px 16px;
}

.load-more-button {
  min-width: 150px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 800;
}

.load-more-button:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  background: #f4fafb;
}

.load-more-button[hidden] {
  display: none;
}

body.drawer-open {
  overflow: hidden;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(23, 32, 38, 0.32);
  opacity: 0;
  transition: opacity 180ms ease;
}

.drawer-backdrop.open {
  opacity: 1;
}

.stock-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  display: flex;
  width: min(520px, 100vw);
  min-width: 0;
  background: var(--panel);
  box-shadow: -16px 0 36px rgba(23, 32, 38, 0.18);
  transform: translateX(100%);
  transition: transform 180ms ease;
}

.stock-drawer.compare-mode {
  width: min(1040px, 92vw);
}

.stock-drawer.open {
  transform: translateX(0);
}

.stock-drawer[hidden],
.drawer-backdrop[hidden] {
  display: none;
}

.stock-drawer-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
  border-left: 1px solid var(--line);
  background: var(--panel);
  flex-direction: column;
}

.stock-drawer-panel + .stock-drawer-panel {
  border-left-color: #cfd9de;
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 20px;
}

.drawer-kicker {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.drawer-head h2 {
  font-size: 24px;
  line-height: 1.2;
}

.drawer-head p[id^="stock-drawer-description"] {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.drawer-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.drawer-close:focus-visible {
  outline: 2px solid rgba(23, 107, 135, 0.35);
  outline-offset: 3px;
}

.stock-drawer-content {
  display: grid;
  flex: 1 1 auto;
  gap: 18px;
  min-height: 0;
  overflow: auto;
  padding: 18px 20px 24px;
  overscroll-behavior: contain;
}

.drawer-section {
  display: grid;
  gap: 10px;
}

.drawer-section h3 {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.score-section {
  grid-template-columns: minmax(112px, 132px) minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.compare-mode .score-section {
  grid-template-columns: 1fr;
}

.score-overview {
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(23, 107, 135, 0.2);
  border-radius: 8px;
  background: #f4fafb;
  padding: 12px;
  color: var(--accent-strong);
  text-align: center;
}

.score-overview span,
.score-overview small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.score-overview strong {
  font-size: 34px;
  line-height: 1.1;
}

.score-part-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.score-part-list li {
  display: grid;
  gap: 5px;
}

.score-part-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.score-part-list strong {
  color: var(--ink);
  font-size: 12px;
}

.score-track {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #e9eff2;
}

.score-part-list i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.detail-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.detail-metric {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfe;
  padding: 9px 10px;
}

.detail-metric span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.detail-metric strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-metric strong.num-gain {
  color: var(--gain);
}

.detail-metric strong.num-loss {
  color: var(--loss);
}

.detail-metric strong a {
  overflow: hidden;
  color: var(--accent);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-metric strong a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.company-metric-grid .detail-metric:last-child,
.company-metric-grid .detail-metric-wide {
  grid-column: 1 / -1;
}

.trade-tag {
  display: inline-block;
  margin-left: 6px;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 800;
  vertical-align: 1px;
  cursor: help;
}

.trade-tag-up {
  background: var(--soft-gain);
  color: var(--gain);
  border: 1px solid #f8c5d4;
}

.trade-tag-down {
  background: var(--soft-loss);
  color: var(--loss);
  border: 1px solid #bfdffe;
}

/* 후보 카드 연관 품목군 칩 */
.candidate-trade {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.candidate-trade-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 2px 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}

.candidate-trade-chip b {
  font-size: 11px;
}

.trade-chapter-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfe;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.trade-chapter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.trade-chapter-head strong {
  font-size: 14px;
}

.trade-chapter-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.trade-chapter-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.trade-chapter-metrics b {
  font-size: 12px;
}

.trade-sparkline {
  width: 100%;
  height: 44px;
}

.trade-chapter-note {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.trade-chapter-note a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.trade-chapter-note a:hover {
  text-decoration: underline;
}

.trade-related {
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.trade-related > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  cursor: help;
}

.trade-related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.trade-related-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 2px 9px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.business-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfe;
  padding: 10px 12px;
}

.business-card span,
.business-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.business-card a {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
}

.business-card a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.business-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.business-keywords span {
  border-radius: 999px;
  background: #e8f3f6;
  color: var(--accent);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.business-summary {
  display: grid;
  gap: 6px;
}

.business-card a + small + .business-summary,
.business-keywords + .business-summary {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.business-summary p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}

.drawer-chart {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfe;
  padding: 10px 8px 4px;
}

.drawer-chart .mini-chart {
  height: 150px;
}

.stock-news-list,
.stock-reports-list {
  min-height: 48px;
}

.news-status {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfe;
  color: var(--muted);
  padding: 12px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.news-error {
  color: var(--warn);
}

.news-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-item {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfe;
  padding: 10px 12px;
}

.news-item a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-item a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-item a:focus-visible {
  outline: 2px solid rgba(23, 107, 135, 0.35);
  outline-offset: 3px;
  border-radius: 4px;
}

.news-item span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-item span .report-pdf-link {
  display: inline;
  overflow: visible;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  line-height: inherit;
  text-decoration: none;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

.news-item span .report-pdf-link:hover {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vending-shell,
.storage-shell,
.about-shell {
  max-width: 1320px;
}

.vending-topbar,
.storage-topbar,
.about-topbar {
  display: grid;
  /* 좌우 1fr 균형 열로 메뉴를 화면 수평 중앙, 슬로건 높이(하단 정렬)에 배치 */
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}

.vending-status-card {
  /* 상태 카드는 헤더 오른쪽 끝을 유지한다 */
  justify-self: end;
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.vending-status-card[data-tone="ok"] {
  color: #0a6b4f;
}

.vending-status-card[data-tone="warn"] {
  color: var(--warn);
}

.vending-main {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  gap: 14px;
}

.vending-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.slot-panel,
.dial-panel,
.term-panel,
.vending-machine-panel,
.result-panel,
.vending-notice {
  grid-column: auto;
}

.term-panel,
.vending-machine-panel,
.result-panel,
.vending-notice {
  grid-column: 1 / -1;
}

.slot-list {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.slot-item {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfe;
  padding: 10px;
}

.slot-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.slot-type-chip {
  justify-self: start;
  border-radius: 999px;
  background: #edf7f4;
  color: #0a6b4f;
  padding: 3px 8px;
  font-size: 11px;
}

.slot-type-chip.link {
  background: #fff5df;
  color: var(--warn);
}

.slot-type-chip.body {
  background: var(--green-50);
  color: var(--green-700);
}

.slot-type-chip.empty {
  background: #f2f5f6;
  color: var(--muted);
}

.slot-paste {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.slot-paste:hover {
  border-color: var(--accent);
  background: #f4fafb;
}

.slot-delete {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.slot-delete:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.slot-textarea {
  width: 100%;
  min-height: 54px;
  /* 최대 20행까지만 늘어나고 그 이상은 슬롯 안에서 스크롤 */
  max-height: calc(1.45em * 20 + 22px);
  resize: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 10px;
  font: inherit;
  line-height: 1.45;
}

.slot-textarea:focus {
  outline: 2px solid rgba(23, 107, 135, 0.2);
  border-color: var(--accent);
}

.slot-inline-error {
  margin: 0;
  border-radius: 6px;
  background: #fff8e6;
  color: var(--warn);
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 800;
}

.slot-drop-zone {
  margin: 0 16px 12px;
  border: 1px dashed rgba(23, 107, 135, 0.4);
  border-radius: 8px;
  background: #f8fbfc;
  color: var(--muted);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.slot-drop-zone.drag-over {
  border-color: var(--accent);
  background: #edf7f4;
  color: var(--accent-strong);
}

.vending-helper-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
}

.vending-history {
  display: grid;
  gap: 8px;
  padding: 0 16px 12px;
}

.vending-history[hidden] {
  display: none;
}

.vending-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vending-history strong {
  color: var(--muted);
  font-size: 12px;
}

.history-clear-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.history-clear-button:hover {
  color: var(--gain);
}

.vending-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

.history-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.quick-draw-toggle {
  margin: 0 16px 12px;
}

.secondary-button,
.vending-draw-button {
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
}

.secondary-button {
  background: #fff;
  color: var(--accent);
  padding: 7px 12px;
  font-size: 13px;
}

.secondary-button:hover {
  background: #f4fafb;
}

.vending-draw-button {
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  background: var(--accent);
  color: #fff;
  padding: 12px 16px;
  font-size: 16px;
}

.vending-draw-button.compact {
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
}

.secondary-button:disabled,
.vending-draw-button:disabled {
  border-color: var(--line);
  background: #f2f5f6;
  color: var(--muted);
  cursor: not-allowed;
}

.dial-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 16px;
}

.dial-group {
  display: grid;
  gap: 8px;
}

.dial-group h2 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.segmented-control,
.budget-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.budget-presets {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.segmented-control button,
.budget-presets button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 900;
}

.segmented-control button.active,
.budget-presets button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.budget-input-label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.recommend-errors {
  margin: 14px 16px 0;
  border: 1px solid #f0d494;
  border-radius: 8px;
  background: #fff8e6;
  color: var(--warn);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
}

.term-chip-list,
.matched-term-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.term-chip-list {
  padding: 16px;
}

.term-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: #edf7f4;
  color: var(--accent-strong);
  cursor: pointer;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 900;
}

.term-chip small {
  color: var(--muted);
  font-size: 11px;
}

.term-chip.excluded {
  border-color: var(--line);
  background: #fff;
  color: var(--muted);
  text-decoration: line-through;
}

.manual-term-form {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}

.manual-term-form input {
  flex: 1 1 auto;
}

.manual-term-form .secondary-button {
  flex: 0 0 auto;
}

.vending-results {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.vending-results .empty {
  grid-column: 1 / -1;
}

.vending-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfe;
  padding: 13px;
}

.vending-card-rank {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.vending-card-main {
  display: grid;
  gap: 2px;
  padding-right: 34px;
}

.vending-stock-link {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  text-decoration: none;
}

.vending-stock-link:hover {
  color: var(--accent);
}

.vending-card-main span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.vending-score strong {
  display: block;
  color: var(--accent-strong);
  font-size: 34px;
  line-height: 1;
}

.vending-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.vending-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.vending-score-grid b {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.vending-score-grid b.num-gain {
  color: var(--gain);
}

.vending-score-grid b.num-loss {
  color: var(--loss);
}

.matched-term-list span {
  border-radius: 999px;
  background: #edf7f4;
  color: #0a6b4f;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
}

.vending-card-summary {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.compact-empty {
  width: 100%;
  padding: 16px 12px;
}

.vending-notice {
  color: var(--warn);
}

.vending-notice p {
  margin: 0;
}

.vending-notice p + p {
  margin-top: 4px;
}

.result-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.storage-main,
.storage-list {
  display: grid;
  gap: 14px;
}

.storage-controls,
.storage-card,
.storage-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.storage-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
}

.storage-controls > strong {
  color: var(--ink);
  font-size: 15px;
}

.storage-control-actions,
.storage-sort-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.storage-sort-control {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.storage-sort-control select {
  min-width: 112px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 7px 30px 7px 12px;
}

.storage-card {
  overflow: hidden;
}

.storage-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.storage-card-head > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.storage-card-head strong {
  color: var(--ink);
  font-size: 16px;
}

.storage-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.storage-delete-button {
  flex: 0 0 auto;
}

.storage-condition-block {
  display: grid;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: #fbfdfe;
  padding: 14px 16px;
}

.storage-term-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.storage-term-chips span {
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--soft-loss);
  color: var(--green-700);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 900;
}

.storage-setting-summary,
.storage-budget-excluded {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.storage-budget-excluded {
  color: var(--warn);
}

.storage-slot-details {
  color: var(--muted);
  font-size: 13px;
}

.storage-slot-details summary {
  width: fit-content;
  cursor: pointer;
  color: var(--accent);
  font-weight: 900;
}

.storage-slot-details ol {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 24px;
}

.storage-slot-details li {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* 추천 종목은 가로로 나란히 배치한다 (좁아지면 자동 줄바꿈) */
.storage-stock-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  list-style: none;
}

.storage-stock-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  align-content: start;
  gap: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}

.storage-stock-score,
.storage-stock-price {
  grid-column: 2;
}

.storage-stock-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--gain);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.storage-stock-name,
.storage-stock-score,
.storage-stock-price {
  display: grid;
  gap: 1px;
}

.storage-stock-name a {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

.storage-stock-name a:hover {
  color: var(--accent);
}

.storage-stock-name span,
.storage-stock-score span,
.storage-stock-price small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.storage-stock-score strong {
  color: var(--gain);
  font-size: 21px;
  line-height: 1.1;
}

.storage-stock-price {
  justify-items: start;
  text-align: left;
}

.storage-stock-price strong,
.storage-stock-price > span {
  font-size: 13px;
  font-weight: 900;
}

.storage-stock-price > span.num-gain {
  color: var(--gain);
}

.storage-stock-price > span.num-loss {
  color: var(--loss);
}

.storage-stock-reason {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.storage-empty {
  margin: 0;
}

.storage-notice {
  margin-bottom: 0;
}

.storage-notice p {
  margin: 0;
}

.storage-notice p + p {
  margin-top: 4px;
}

.about-main {
  display: grid;
  max-width: 860px;
  margin: 0 auto;
  gap: 14px;
}

.about-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 26px 28px;
  box-shadow: var(--shadow);
}

.about-section > p {
  margin: 14px 0 0;
  color: var(--ink);
}

.about-section-head {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
}

.about-section-head p,
.about-section-head h2 {
  margin: 0;
}

.about-section-head p {
  color: var(--gain);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-section-head h2 {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.35;
}

.about-quote {
  margin: 20px 0;
  border-left: 4px solid var(--gain);
  border-radius: 0 8px 8px 0;
  background: var(--soft-gain);
  padding: 16px 18px;
}

.about-quote ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 22px;
}

.about-story-actions {
  display: flex;
  /* 영상과 이름 유래 문구를 본문 너비의 세로 흐름으로 배치한다 */
  align-items: stretch;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.about-story-actions p {
  margin: 0;
  color: var(--muted);
  /* 이름 유래 문구가 영상 아래에서 충분히 드러나도록 강조한다 */
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.about-menu-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--panel);
  font-weight: 900;
  text-decoration: none;
}

.about-video-link {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  padding: 0;
}

.about-menu-card a:hover {
  background: var(--accent-strong);
}

.about-menu-card a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.about-video-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.about-video-link img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: rgba(23, 32, 38, 0.22);
}

.about-video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--gain);
  color: var(--panel);
  padding-left: 3px;
  box-shadow: var(--shadow);
  font-size: 21px;
  line-height: 1;
}

.about-video-label {
  border-radius: 999px;
  background: var(--ink);
  color: var(--panel);
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 900;
}

.about-video-link:hover .about-video-play {
  background: var(--accent);
}

.about-video-embed {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  box-shadow: var(--shadow);
}

.about-score-table-wrap {
  margin-top: 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.about-score-table {
  min-width: 680px;
}

.about-score-table th,
.about-score-table td {
  padding: 12px 14px;
  text-align: left;
  white-space: normal;
}

.about-score-table th:nth-child(2),
.about-score-table td:nth-child(2) {
  width: 82px;
  text-align: center;
  white-space: nowrap;
}

.about-score-table td:nth-child(2) strong {
  color: var(--loss);
}

.about-method-note {
  border-radius: 8px;
  background: var(--soft-loss);
  padding: 12px 14px;
}

.about-reason-box {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  padding: 14px 16px;
}

.about-reason-box h3,
.about-reason-box p {
  margin: 0;
}

.about-reason-box h3 {
  color: var(--accent-strong);
  font-size: 16px;
}

.about-reason-box p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

.about-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about-menu-card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  border: 1px solid var(--line);
  border-top: 4px solid var(--loss);
  border-radius: 8px;
  background: var(--bg);
  padding: 18px;
}

.about-menu-card:nth-child(2n) {
  border-top-color: var(--gain);
}

.about-menu-card h3,
.about-menu-card p {
  margin: 0;
}

.about-menu-card h3 {
  color: var(--ink);
  font-size: 18px;
}

.about-menu-card p {
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 14px;
}

.about-menu-card a {
  margin-top: auto;
  padding: 7px 12px;
  font-size: 12px;
}

.about-data-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 22px;
}

.about-data-list li::marker {
  color: var(--gain);
}

.about-integrity-note {
  border-left: 4px solid var(--accent);
  background: var(--bg);
  padding: 11px 14px;
}

.about-notice {
  margin-bottom: 0;
}

.about-notice p {
  margin: 0;
}

.about-notice p + p {
  margin-top: 4px;
}

.vending-machine-panel[hidden] {
  display: none;
}

/* 배출 완료 후 처리 창이 부드럽게 접히는 전환 */
.vending-machine-panel.collapsing {
  opacity: 0;
  border-color: transparent;
  box-shadow: none;
  transition: height 420ms ease, opacity 300ms ease, border-color 300ms ease;
}

.vending-machine-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 16px;
}

.vending-machine-head h2 {
  margin: 0;
  font-size: 18px;
}

.vending-machine-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.vending-machine-window {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  min-height: 330px;
  margin: 16px;
  border: 1px solid rgba(23, 107, 135, 0.28);
  border-radius: 8px;
  background: var(--surface-sub);
  padding: 14px;
  overflow: hidden;
}

.machine-slot-tray {
  display: flex;
  align-items: center;
  min-height: 58px;
  gap: 8px;
  border: 1px dashed rgba(23, 107, 135, 0.32);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px;
  overflow: hidden;
}

/* 티켓 투입이 끝나면 빈 투입구는 접어서 없앤다 */
.machine-slot-tray.consumed {
  min-height: 0;
  border-color: transparent;
  background: transparent;
  opacity: 0;
  padding: 0;
  transition: min-height 300ms ease, padding 300ms ease, opacity 240ms ease;
}

.machine-ticket {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 170px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  padding: 6px 10px;
  box-shadow: 0 8px 18px rgba(23, 32, 38, 0.08);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: 50% 0;
  white-space: nowrap;
}

.machine-ticket.animate {
  animation: ticket-feed 650ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
  animation-delay: var(--ticket-delay);
}

.machine-stage-area {
  display: grid;
  grid-template-rows: minmax(54px, auto) 1fr auto;
  gap: 12px;
  min-height: 190px;
  border: 1px solid rgba(223, 229, 232, 0.85);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  padding: 12px;
}

.machine-keyword-drop {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 54px;
}

.machine-keyword-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #edf7f4;
  color: #0a6b4f;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
}

.machine-keyword-chip.animate {
  animation: keyword-drop 460ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
  animation-delay: var(--keyword-delay);
}

.machine-reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-self: center;
}

.machine-reel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #172026;
  color: #fff;
  padding: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.machine-reel span {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  animation: reel-tick 360ms linear infinite;
}

.machine-reel.stopped {
  border-color: var(--accent);
  background: var(--accent-strong);
}

.machine-reel.stopped span {
  animation: reel-stop 260ms ease-out both;
}

.machine-gauge {
  display: grid;
  /* 제목과 게이지 막대 사이 여백 */
  gap: 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

/* 트랙과 채움 막대를 같은 셀에 겹쳐 그린다 */
.machine-gauge::after {
  content: "";
  grid-row: 2;
  grid-column: 1;
  display: block;
  width: 100%;
  height: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.machine-gauge i {
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  display: block;
  width: 0%;
  height: 12px;
  border-radius: 999px;
  background: #ffb14d;
  transition: width 460ms ease;
  z-index: 1;
}

/* 진행 결과는 버튼이 아니라 알림 메시지창처럼 보이게 한다 */
.machine-output-slot {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-left: 4px solid #c7d2d9;
  border-radius: 8px;
  background: #f7f9fa;
  color: var(--muted);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
}

.machine-output-slot.active {
  border-color: rgba(23, 107, 135, 0.3);
  border-left-color: var(--accent);
  background: var(--soft-loss);
  color: var(--accent-strong);
  animation: output-pulse 620ms ease-out both;
}

.vending-card.eject-card {
  opacity: 0;
  transform-origin: 50% 0;
  animation: card-eject 620ms cubic-bezier(0.18, 0.88, 0.24, 1.18) both;
  animation-delay: var(--card-delay);
}

.vending-card.eject-card.top-card {
  overflow: hidden;
}

.vending-card.eject-card.top-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: rgba(255, 255, 255, 0.64);
  transform: skewX(-18deg);
  animation: shine-sweep 900ms ease-out both;
  animation-delay: calc(var(--card-delay) + 420ms);
  pointer-events: none;
}

.vending-machine-panel.reduced-motion .machine-ticket,
.vending-machine-panel.reduced-motion .machine-keyword-chip,
.vending-machine-panel.reduced-motion .machine-reel span,
.vending-machine-panel.skipped .machine-ticket,
.vending-machine-panel.skipped .machine-keyword-chip,
.vending-machine-panel.skipped .machine-reel span {
  animation: none;
}

@keyframes ticket-feed {
  0% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
  45% {
    opacity: 1;
    transform: translateY(10px) rotateX(58deg) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translateY(88px) rotateX(82deg) scale(0.22);
  }
}

@keyframes keyword-drop {
  0% {
    opacity: 0;
    transform: translateY(-22px) scale(0.86);
  }
  70% {
    opacity: 1;
    transform: translateY(3px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reel-tick {
  0% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(12px);
  }
}

@keyframes reel-stop {
  0% {
    transform: scale(0.92);
  }
  70% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes output-pulse {
  0% {
    transform: scaleY(1);
  }
  45% {
    transform: scaleY(0.86);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes card-eject {
  0% {
    opacity: 0;
    transform: translateY(-42px) scale(0.94);
  }
  55% {
    opacity: 1;
    transform: translateY(12px) scale(1.02);
  }
  78% {
    opacity: 1;
    transform: translateY(-5px) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shine-sweep {
  0% {
    left: -70%;
  }
  100% {
    left: 125%;
  }
}

@media (max-width: 1180px) {
  .vending-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1099px) {
  .stock-drawer,
  .stock-drawer.compare-mode {
    width: 100vw;
    flex-direction: column;
  }

  .stock-drawer-panel {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .stock-drawer-panel:first-child {
    border-top: 0;
  }

  .stock-drawer:not(.compare-mode) .stock-drawer-panel {
    height: 100vh;
  }

  .stock-drawer.compare-mode .stock-drawer-panel {
    height: 50vh;
    min-height: 360px;
  }
}

@media (max-width: 1040px) {
  .topbar {
    align-items: flex-start;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
  }

  .topbar .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .topbar > .global-nav {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .topbar .index-chart-panel {
    grid-column: 1;
    grid-row: 3;
  }

  .topbar .topbar-actions {
    grid-column: 1;
    grid-row: 4;
    justify-self: stretch;
  }

  .chart-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .app-shell {
    width: min(100% - 20px, 1480px);
    padding-top: 16px;
  }

  .summary-grid,
  .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .candidate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 좁은 폭에서는 5개 화면 공통으로 브랜드→메뉴→부속 순 세로 스택 */
  .trade-topbar,
  .vending-topbar,
  .storage-topbar,
  .about-topbar {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .trade-topbar .global-nav,
  .vending-topbar .global-nav,
  .storage-topbar .global-nav,
  .about-topbar .global-nav {
    justify-self: start;
  }

  .vending-status-card {
    justify-self: stretch;
    width: 100%;
  }

  .vending-main {
    grid-template-columns: 1fr;
  }

  .slot-panel,
  .dial-panel,
  .term-panel,
  .vending-machine-panel,
  .result-panel,
  .vending-notice {
    grid-column: 1;
  }

  .vending-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  h1 {
    font-size: 34px;
  }

  .topbar .brand,
  .trade-topbar .brand,
  .vending-topbar .brand,
  .storage-topbar .brand,
  .about-topbar .brand {
    width: 100%;
  }

  /* 모바일: 햄버거 버튼 + 드롭다운 메뉴 */
  .global-nav {
    position: relative;
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 900;
    box-shadow: var(--shadow);
  }

  .nav-menu {
    display: none;
  }

  .global-nav.open .nav-menu {
    display: block;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 6px;
  }

  .global-nav.open .nav-menu a {
    display: flex;
    justify-content: center;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
  }

  .summary-grid,
  .controls {
    grid-template-columns: 1fr;
  }

  .candidate-grid {
    grid-template-columns: 1fr;
  }

  .trade-grid {
    grid-template-columns: 1fr;
  }

  .about-section {
    padding: 20px 18px;
  }

  .about-section-head h2 {
    font-size: 21px;
  }

  .about-menu-grid {
    grid-template-columns: 1fr;
  }

  .vending-results,
  .segmented-control,
  .budget-presets {
    grid-template-columns: 1fr;
  }

  .storage-controls,
  .storage-control-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .storage-sort-control {
    justify-content: space-between;
  }

  .storage-stock-list {
    grid-template-columns: 1fr;
  }

  .result-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .manual-term-form {
    align-items: stretch;
    flex-direction: column;
  }

  .machine-reels {
    grid-template-columns: 1fr;
  }

  .section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .compare-waiting-badge {
    align-items: stretch;
    border-radius: 8px;
    flex-direction: column;
    padding: 11px 12px;
  }

  .compare-waiting-badge span {
    white-space: normal;
  }

  .compare-waiting-badge button {
    width: 100%;
  }

  .stock-drawer {
    width: 100vw;
  }

  .drawer-head {
    padding: 18px 16px;
  }

  .stock-drawer-content {
    padding: 16px;
  }

  .score-section,
  .detail-metric-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .machine-ticket,
  .machine-keyword-chip,
  .machine-reel span,
  .machine-output-slot.active,
  .vending-card.eject-card,
  .vending-card.eject-card.top-card::after {
    animation: none !important;
    transition: none !important;
  }

  .vending-card.eject-card {
    opacity: 1;
    transform: none;
  }
}

/* 1라운드 앱 셸: 기존 카드·버튼·테이블 컴포넌트 규칙은 그대로 유지한다. */
html {
  background: var(--bg-canvas);
}

body {
  background: var(--bg-canvas);
}

.app-shell,
.vending-shell,
.storage-shell,
.about-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  width: 260px;
  min-height: 100vh;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 22px 16px 18px;
  flex-direction: column;
}

.sidebar-brand {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
}

.sidebar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--green-700);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.app-sidebar .global-nav {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.nav-overline {
  margin: 0 10px 10px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.app-sidebar .nav-menu {
  display: grid;
  gap: 4px;
}

.app-sidebar .global-nav a {
  display: flex;
  min-height: 40px;
  border-radius: 10px;
  color: var(--text-secondary);
  padding: 0 12px;
  justify-content: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
}

.app-sidebar .global-nav a > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentColor;
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
}

.app-sidebar .global-nav a:hover {
  background: var(--surface-sub);
  color: var(--text-primary);
}

.app-sidebar .global-nav a.active,
.app-sidebar .global-nav a.active:hover {
  background: #101312;
  color: #fff;
}

.app-sidebar .global-nav a:focus-visible,
.sidebar-brand:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

.sidebar-disclaimer {
  margin-top: auto;
  border-radius: 14px;
  background: var(--surface-sub);
  padding: 14px;
}

.sidebar-disclaimer strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 650;
}

.sidebar-disclaimer p {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.55;
}

.app-main {
  min-width: 0;
  min-height: 100vh;
  margin-left: 260px;
  background: var(--bg-app);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 64px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 0 28px;
  gap: 8px;
}

.topbar-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.topbar-page-title {
  min-width: 0;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}

.topbar-meta {
  overflow: hidden;
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-topbar .vending-status-card {
  min-width: 0;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: var(--surface-sub);
  box-shadow: none;
  padding: 6px 10px;
  font-size: 12px;
}

.app-content {
  width: 100%;
  max-width: 1160px;
  min-height: calc(100vh - 64px);
  margin: 0 auto;
  padding: 28px;
}

.market-overview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: stretch;
  gap: 20px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 16px;
}

.market-overview-card .index-chart-panel {
  align-self: stretch;
  border: 0;
  background: transparent;
  padding: 0;
}

.market-overview-card .chart-head {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 40px;
}

.market-overview-card .topbar-actions {
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-left: 20px;
}

.market-overview-card .collect-note {
  width: auto;
  min-width: 0;
}

.status-pill.down {
  border-color: #c7e8d6;
  background: var(--soft-loss);
  color: var(--loss);
}

.status-pill.up {
  border-color: #f3c5ce;
  background: var(--soft-gain);
  color: var(--gain);
}

.trade-tag-up {
  border-color: #f3c5ce;
}

.trade-tag-down {
  border-color: #c7e8d6;
}

.nav-toggle,
.sidebar-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .market-overview-card {
    grid-template-columns: 1fr;
  }

  .market-overview-card .chart-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .market-overview-card .topbar-actions {
    border-top: 1px solid var(--border);
    border-left: 0;
    padding-top: 16px;
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  body.nav-drawer-open {
    overflow: hidden;
  }

  .app-sidebar {
    width: min(260px, 86vw);
    box-shadow: 18px 0 40px rgba(16, 19, 18, 0.16);
    transform: translateX(-105%);
    transition: transform 0.18s ease;
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop,
  .sidebar-backdrop.open {
    position: fixed;
    inset: 0;
    z-index: 29;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(16, 19, 18, 0.38);
    cursor: pointer;
    padding: 0;
  }

  .sidebar-backdrop[hidden] {
    display: none;
  }

  .app-main {
    margin-left: 0;
  }

  .app-topbar {
    padding: 0 16px;
  }

  .app-topbar .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-height: 38px;
    margin-right: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: none;
    color: var(--text-primary);
    padding: 0;
  }

  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    display: block;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    content: "";
  }

  .nav-toggle-icon {
    position: relative;
  }

  .nav-toggle-icon::before {
    position: absolute;
    top: -5px;
  }

  .nav-toggle-icon::after {
    position: absolute;
    top: 5px;
  }

  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .topbar-breadcrumb {
    display: none;
  }

  .topbar-page-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-meta {
    display: none;
  }

  .app-topbar .vending-status-card {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-content {
    padding: 20px 16px 32px;
  }
}

/* 2라운드 컴포넌트 시스템: DESIGN.md 5·6장 */
.summary-card,
.market-overview-card,
.controls,
.notice,
.top-candidates,
.table-section,
.trade-year-chart-panel,
.trade-section,
.vending-panel,
.storage-controls,
.storage-card,
.storage-empty,
.about-section {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 19, 18, 0.04);
}

.summary-grid {
  gap: 20px;
  margin-bottom: 20px;
}

.summary-card {
  min-height: 120px;
  padding: 20px;
}

.summary-card span {
  margin-bottom: 10px;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
}

.summary-card strong {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
}

.kospi-highlight-card {
  border-color: transparent;
  background: linear-gradient(160deg, #1b8a57 0%, #146c43 55%, #0b3d2e 100%);
  color: #fff;
}

.kospi-highlight-card > span,
.kospi-highlight-card > strong,
.kospi-highlight-card > strong.num-gain,
.kospi-highlight-card > strong.num-loss {
  color: #fff;
}

.kospi-highlight-card > span {
  opacity: 0.82;
}

.kospi-highlight-card > strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  margin-inline: auto;
  gap: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  padding: 5px 10px;
  white-space: nowrap;
}

.kospi-highlight-card > strong::before {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

/* 고정 사이드바가 있는 중간 화면에서는 5열 카드가 지나치게 좁아지지 않게 한다. */
@media (min-width: 981px) and (max-width: 1180px) {
  .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.market-overview-card {
  margin-bottom: 20px;
  background: var(--surface);
  padding: 20px;
}

.controls {
  gap: 12px;
  margin-bottom: 20px;
  padding: 20px;
}

.notice {
  margin-bottom: 20px;
  padding: 20px;
}

.top-candidates,
.trade-section {
  margin-bottom: 20px;
}

.trade-year-chart-panel {
  margin-bottom: 20px;
  padding: 20px;
}

.candidate-grid,
.trade-grid,
.slot-list,
.term-chip-list,
.vending-results {
  gap: 12px;
  padding: 20px;
}

.candidate-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.section-header,
.vending-machine-head,
.storage-card-head {
  padding: 20px 24px;
}

.vending-main,
.storage-main,
.storage-list,
.about-main {
  gap: 20px;
}

.dial-panel {
  gap: 20px;
  padding: 20px;
}

.storage-controls {
  padding: 20px;
}

.storage-condition-block,
.storage-stock-list {
  padding: 20px;
}

.storage-stock-list {
  gap: 12px;
}

.storage-empty {
  padding: 20px;
}

.about-section {
  padding: 24px;
}

.candidate-card,
.trade-card,
.vending-card,
.about-menu-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 19, 18, 0.04);
  padding: 20px;
}

.about-menu-card {
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--green-700);
}

.about-menu-card:nth-child(2n) {
  border-top-color: var(--border);
  border-left-color: var(--green-700);
}

.slot-item,
.storage-stock-row,
.score-overview,
.detail-metric,
.trade-chapter-card,
.business-card,
.drawer-chart,
.news-status,
.news-item,
.about-score-table-wrap,
.about-method-note,
.about-reason-box,
.vending-machine-window,
.machine-slot-tray,
.machine-stage-area,
.machine-reel,
.machine-output-slot {
  border-color: var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
}

.slot-item,
.storage-stock-row,
.detail-metric,
.trade-chapter-card,
.business-card,
.drawer-chart,
.news-status,
.news-item,
.about-reason-box {
  padding: 14px;
}

.vending-machine-window {
  margin: 20px;
  background: var(--surface-sub);
  padding: 14px;
}

.about-video-link,
.about-video-embed {
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.about-quote {
  border-left-color: var(--green-700);
  border-radius: 0 12px 12px 0;
  background: var(--green-50);
}

.about-section-head p,
.about-data-list li::marker {
  color: var(--green-700);
}

.about-method-note,
.about-integrity-note {
  background: var(--green-50);
}

.about-integrity-note {
  border-left-color: var(--green-700);
}

.about-reason-box {
  background: var(--surface-sub);
}

.about-video-play,
.storage-stock-rank {
  background: var(--green-700);
}

.storage-stock-score strong {
  color: var(--green-900);
}

.collect-button,
.vending-draw-button,
.about-menu-card a {
  height: 38px;
  min-height: 38px;
  border: 1px solid var(--green-700);
  border-radius: 10px;
  background: var(--green-700);
  color: #fff;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 650;
}

.collect-button:hover,
.vending-draw-button:hover,
.about-menu-card a:hover {
  border-color: var(--green-600);
  background: var(--green-600);
  color: #fff;
}

.secondary-button,
.load-more-button {
  height: 38px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
}

.secondary-button:hover,
.load-more-button:hover {
  border-color: var(--green-600);
  background: var(--surface-sub);
  color: var(--green-700);
}

.secondary-button:disabled,
.vending-draw-button:disabled,
.collect-button:disabled,
.load-more-button:disabled {
  border-color: var(--border);
  background: var(--surface-sub);
  color: var(--text-tertiary);
}

.segmented-control,
.budget-presets {
  border-radius: 999px;
}

.segmented-control button,
.budget-presets button {
  min-height: 38px;
  border-color: var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.segmented-control button.active,
.budget-presets button.active,
.stock-compare-button.selected,
.term-chip.active {
  border-color: var(--green-700);
  background: var(--green-700);
  color: #fff;
}

.term-chip.active small {
  color: rgba(255, 255, 255, 0.76);
}

.slot-paste,
.history-chip,
.term-chip,
.stock-compare-button,
.drawer-close,
.compare-waiting-badge button {
  border-color: var(--border);
  background: var(--surface);
  transition: all 0.15s ease;
}

.slot-paste:hover,
.history-chip:hover,
.term-chip:hover,
.stock-compare-button:hover,
.drawer-close:hover,
.compare-waiting-badge button:hover {
  border-color: var(--green-600);
  background: var(--surface-sub);
  color: var(--green-700);
}

.drawer-head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: #101312;
}

.drawer-head .drawer-kicker {
  color: rgba(255, 255, 255, 0.62);
}

.drawer-head h2 {
  color: #fff;
}

.drawer-head p[id^="stock-drawer-description"] {
  color: rgba(255, 255, 255, 0.7);
}

.drawer-head .drawer-close {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.drawer-head .drawer-close:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.segmented-control button.active:hover,
.budget-presets button.active:hover,
.stock-compare-button.selected:hover,
.term-chip.active:hover {
  border-color: var(--green-600);
  background: var(--green-600);
  color: #fff;
}

button,
input,
select,
textarea,
.about-menu-card a,
.app-sidebar .global-nav a {
  transition: all 0.15s ease;
}

select,
input:not([type="checkbox"]):not([type="radio"]),
textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-primary);
  padding: 0 12px;
}

textarea,
.slot-textarea {
  height: auto;
  min-height: 54px;
  padding: 10px 12px;
}

.slot-textarea {
  border-radius: 10px;
}

.slot-textarea:focus,
.slot-textarea:focus-visible {
  border-color: var(--green-500);
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

.slot-inline-error {
  border-radius: 10px;
}

.slot-drop-zone,
.recommend-errors {
  border-radius: 12px;
}

.machine-ticket {
  border-radius: 8px;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

select:focus,
input:focus,
textarea:focus,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  border-color: var(--green-500);
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--green-700);
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

.sort-button:focus-visible,
.stock-detail-trigger:focus-visible,
.stock-compare-button:focus-visible,
.drawer-close:focus-visible,
.compare-waiting-badge button:focus-visible,
.news-item a:focus-visible,
.about-menu-card a:focus-visible,
.about-video-link:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

.storage-sort-control select {
  min-height: 38px;
  border-radius: 10px;
  background: var(--surface);
}

.status-pill,
.badge,
.trade-tag,
.app-topbar .vending-status-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.trade-tag {
  min-width: max-content;
  flex-wrap: nowrap;
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
}

.status-pill::before,
.badge::before,
.trade-tag::before,
.app-topbar .vending-status-card::before {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status-pill {
  min-height: 32px;
  padding: 6px 10px;
}

.status-pill.up {
  border-color: transparent;
  background: var(--soft-gain);
  color: var(--gain);
}

.status-pill.down {
  border-color: transparent;
  background: var(--soft-loss);
  color: var(--loss);
}

.status-pill.flat {
  border-color: var(--border);
  background: var(--surface-sub);
  color: var(--text-secondary);
}

.badge {
  background: var(--green-50);
  color: var(--green-700);
}

.trade-tag-up {
  border-color: transparent;
  background: var(--soft-gain);
  color: var(--gain);
}

.trade-tag-down {
  border-color: transparent;
  background: var(--soft-loss);
  color: var(--loss);
}

.slot-type-chip,
.term-chip,
.matched-term-list span,
.storage-term-chips span,
.machine-keyword-chip,
.candidate-trade-chip,
.trade-related-chip {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.slot-type-chip.body,
.storage-term-chips span,
.business-keywords span,
.machine-keyword-chip,
.matched-term-list span {
  border-color: transparent;
  background: var(--green-50);
  color: var(--green-700);
}

table {
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

thead th {
  height: 42px;
  border-bottom: 0;
  background: var(--surface-sub);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
}

thead th:first-child {
  border-radius: 10px 0 0 10px;
}

thead th:last-child {
  border-radius: 0 10px 10px 0;
}

tbody tr {
  height: 56px;
}

tbody td {
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 14px;
  text-align: right;
}

tbody tr:hover,
tbody tr:hover td {
  background: var(--surface-sub);
}

.table-wrap {
  padding: 0 20px;
}

.table-footer {
  padding: 16px 20px 20px;
}

.chart-tooltip,
.sort-button[data-tooltip]:hover::before,
.sort-button[data-tooltip]:focus-visible::before {
  border-radius: 10px;
  background: #101312;
  box-shadow: var(--shadow);
  color: #fff;
  font-size: 12px;
}

.chart-line,
.mini-chart-line {
  stroke: var(--green-600);
}

.chart-point,
.mini-chart-point {
  fill: var(--green-600);
}

.chart-area,
.mini-chart-area {
  fill: rgba(27, 138, 87, 0.08);
}

.mini-chart-volume {
  fill: rgba(27, 138, 87, 0.2);
}

.mini-chart-volume:hover {
  fill: rgba(27, 138, 87, 0.44);
}

.year-bar.export {
  fill: var(--green-700);
}

.year-bar.export.partial {
  fill: rgba(20, 108, 67, 0.42);
}

.year-bar.import {
  fill: var(--green-100);
}

.year-bar.import.partial {
  fill: rgba(220, 242, 230, 0.58);
}

.year-bar:hover,
.year-bar.import:hover {
  fill: var(--green-600);
}

.chart-grid-line,
.mini-chart-grid {
  stroke: var(--border);
}

.stock-drawer {
  box-shadow: -1px 0 0 var(--border);
}

.compare-waiting-badge {
  border-color: var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.compare-waiting-badge,
.machine-ticket,
.about-video-play {
  box-shadow: var(--shadow);
}

.vending-card.eject-card.top-card::after {
  display: none;
}

@media (max-width: 640px) {
  .app-sidebar {
    visibility: hidden;
    box-shadow: 8px 0 24px rgba(16, 19, 18, 0.08);
    transition: transform 0.18s ease, visibility 0s linear 0.18s;
  }

  .app-sidebar.open {
    visibility: visible;
    transition: transform 0.18s ease, visibility 0s linear 0s;
  }

  .summary-grid {
    gap: 12px;
  }

  .candidate-grid,
  .trade-grid,
  .slot-list,
  .term-chip-list,
  .vending-results,
  .storage-condition-block,
  .storage-stock-list {
    padding: 16px;
  }

  .candidate-grid {
    grid-template-columns: 1fr;
  }

  .section-header,
  .vending-machine-head,
  .storage-card-head,
  .about-section {
    padding: 20px;
  }

  .table-wrap {
    padding: 0 16px;
  }
}