.executive-dashboard { background: var(--color-canvas-soft); color: var(--color-body); }
.executive-dashboard h1, .executive-dashboard h2, .executive-dashboard h3,
.executive-dashboard h4, .executive-dashboard h5 { color: var(--color-ink); }
.executive-dashboard button { cursor: pointer; }

.executive-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  background: var(--color-canvas);
  color: var(--color-ink);
}
.demo-data-banner { padding: 10px var(--space-6); background: #8a251f; color: #fff; text-align: center; font-size: 14px; font-weight: 900; letter-spacing: .02em; }
.demo-data-banner[hidden] { display: none; }

/* Four-area management dashboard */
.mandatory-notice { display:flex; gap:var(--space-4); margin-bottom:var(--space-5); padding:var(--space-4) var(--space-5); border-radius:var(--radius-card); background:var(--color-primary-pale); color:var(--color-ink-deep); }
.unavailable-state { padding:var(--space-6); border-radius:var(--radius-input); background:var(--color-canvas-soft); }
.unavailable-state strong { font-size:24px; color:var(--color-ink); }
.unavailable-state p,.unavailable-state small { color:var(--color-muted); }
.contribution-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); }
.contribution-group { min-width:0; padding:var(--space-4); border-radius:var(--radius-input); background:var(--color-canvas-soft); }
.compact-row { display:flex; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--color-line); font-variant-numeric:tabular-nums; }
.compact-row b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compact-row span { color:var(--color-muted); text-align:right; }
.bar-row { display:grid; grid-template-columns:minmax(110px,1fr) minmax(90px,1.2fr) auto; align-items:center; gap:var(--space-3); width:100%; padding:var(--space-3) 0; border:0; border-bottom:1px solid var(--color-line); background:transparent; color:var(--color-body); text-align:left; }
.bar-row i { height:10px; border-radius:var(--radius-pill); background:var(--color-canvas-soft); overflow:hidden; }
.bar-row i b { display:block; height:100%; background:var(--color-positive); }
.bar-row strong { color:var(--color-ink); font-variant-numeric:tabular-nums; }
.suggestion-list { display:grid; gap:var(--space-3); }
.suggestion-item { padding:var(--space-5); border-left:5px solid var(--color-primary); border-radius:var(--radius-card); background:var(--color-canvas-soft); }
.suggestion-item p { margin:var(--space-2) 0 0; color:var(--color-body); font-size:13px; }
.suggestion-item p b { color:var(--color-ink); }
.empty-result { margin:0; padding:var(--space-5); border-radius:var(--radius-input); background:var(--color-canvas-soft); color:var(--color-muted); }
.feature-number { display:block; margin:var(--space-6) 0; color:var(--color-ink); font-size:36px; font-weight:900; font-variant-numeric:tabular-nums; }
.area-heading { display:flex; justify-content:space-between; align-items:end; gap:var(--space-5); margin-bottom:var(--space-6); }
.area-heading h1 { margin:var(--space-2) 0; font-size:clamp(30px,4vw,54px); font-weight:900; letter-spacing:-.04em; }
.area-heading p { margin:0; color:var(--color-muted); }
.five-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-4); margin-bottom:var(--space-5); }
.five-kpis .executive-kpi { display:flex; min-width:0; min-height:310px; flex-direction:column; }
.five-kpis .executive-kpi.single-period { min-height:156px; }
.five-kpis b { display:block; margin-top:var(--space-3); color:var(--color-body); font-variant-numeric:tabular-nums; }
.situation-grid,.area-grid,.financial-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); margin-bottom:var(--space-5); }
.area-card { min-width:0; padding:var(--space-6); border-radius:var(--radius-card); background:var(--color-canvas); }
.area-card>header { display:flex; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); }
.area-card h2,.area-card h3 { margin:0; color:var(--color-ink); }
.area-card header p { margin:var(--space-2) 0 0; color:var(--color-muted); font-size:12px; }
.wide-card { grid-column:span 2; }
.executive-brand { display: flex; align-items: center; gap: var(--space-4); min-width: max-content; text-decoration: none; }
.header-logo { display: block; width: auto; height: 28px; }
.executive-brand div { display: grid; }
.brand-mark { font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.executive-brand b { font-size: 15px; }
.executive-brand small, .bar-period > span { color: var(--color-muted); font-size: 12px; }
.live-badge { color: var(--color-body); font-size: 12px; white-space: nowrap; }
.live-badge i { display: inline-block; width: 8px; height: 8px; margin-right: var(--space-2); border-radius: var(--radius-pill); background: var(--color-positive); }
.bar-left { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.bar-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); min-width: 0; }
.bar-period { display: flex; align-items: center; gap: var(--space-3); }
.period-switch, .view-switch { display: flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-button); background: var(--color-canvas-soft); }
.period-switch button, .view-switch button {
  min-height: 38px;
  border: 0;
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  color: var(--color-body);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.period-switch button.active, .view-switch button[aria-selected="true"] { background: var(--color-ink); color: var(--color-canvas); }
.admin-link {
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-4);
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.executive-bar .session-slot { max-width: 250px; }

.decision-statement > button {
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-button);
  padding: var(--space-4) var(--space-6);
  font-weight: 700;
  white-space: nowrap;
}
#executiveAskButton, .decision-statement > button { background: var(--color-primary); color: var(--color-ink); }
#executiveAskButton:hover, .decision-statement > button:hover { background: var(--color-primary-active); }

.dashboard-app { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; min-width: 0; }
.chat-collapsed .dashboard-app { grid-template-columns: minmax(0, 1fr); }
.chat-collapsed .management-chat { display: none; }
.dashboard-canvas { width: min(1500px, 100%); margin: 0 auto; padding: var(--space-6); }
.dashboard-view { display: none; min-width: 0; }
.dashboard-view.active { display: block; }
.section-label { margin: 0; color: var(--color-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; }

.decision-statement {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  padding: var(--space-7);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
}
.hero-metric { min-width: 0; }
.hero-metric-label { display: block; margin-top: var(--space-4); color: var(--color-muted); font-size: 14px; white-space: nowrap; }
.decision-statement h1 {
  max-width: 100%;
  margin: var(--space-1) 0 var(--space-3);
  overflow: hidden;
  color: var(--color-ink);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-meta { display: flex; gap: var(--space-4); color: var(--color-muted); font-size: 12px; }
.hero-meta b { color: var(--color-body); }

.executive-kpis, .risk-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.executive-kpi, .risk-kpis article {
  min-width: 0;
  min-height: 150px;
  overflow: hidden;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
}
.executive-kpi label, .risk-kpis label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: 12px;
  white-space: nowrap;
}
.executive-kpi label b { color: var(--color-body); font-size: 11px; font-weight: 700; white-space: nowrap; }
.executive-kpi > strong, .risk-kpis strong {
  display: block;
  margin-top: var(--space-3);
  overflow: hidden;
  color: var(--color-ink);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.executive-kpi > small, .risk-kpis small { display: block; margin-top: var(--space-2); color: var(--color-muted); font-size: 11px; white-space: nowrap; }
.spark, .mini-chart { height: 36px; margin-top: var(--space-3); }
.spark svg, .mini-chart svg { width: 100%; height: 100%; }
.static-spark { position: relative; border-bottom: 1px solid var(--color-line); }
.static-spark i { position: absolute; bottom: -1px; left: 0; width: 45%; height: 3px; background: var(--color-positive); }

.executive-grid, .operations-grid { display: grid; gap: var(--space-6); margin-bottom: var(--space-6); }
.primary-grid { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); }
.secondary-grid, .operations-grid { grid-template-columns: 1fr 1fr; }
.executive-panel, .analysis-card, .cause-intro, .answer-panel, .commercial-section,
.control-heading, .data-readiness {
  min-width: 0;
  padding: var(--space-6);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-canvas);
}
.executive-panel > header, .commercial-table-panel header, .analysis-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.executive-panel h2, .commercial-heading h2 { margin: var(--space-1) 0 0; font-size: 20px; font-weight: 800; }
.executive-panel header button, .commercial-table-panel header button {
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-4);
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.legend { display: flex; gap: var(--space-5); margin-bottom: var(--space-3); color: var(--color-muted); font-size: 12px; }
.legend span { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; }
.legend i { width: 20px; height: 4px; border-radius: var(--radius-pill); }
.legend-ink { background: var(--color-ink); }
.legend-cyan { background: var(--color-cyan); }
.legend-gold { background: var(--color-warning); }
.legend-teal { background: var(--color-positive); }
.legend-positive { background: var(--color-positive); }
.chart { width: 100%; max-width: 100%; overflow: hidden; }
.large-chart { min-height: 230px; }
.chart svg { display: block; width: 100%; height: auto; }
.signal-panel ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.signal-panel li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-input); background: var(--color-canvas-soft); }
.signal-panel li span { color: var(--color-positive-deep); font-size: 12px; font-weight: 800; white-space: nowrap; }
.signal-panel li.watch span { color: var(--color-warning-content); }
.signal-panel li p { margin: 0; font-size: 12px; }
.margin-visual { display: grid; gap: var(--space-4); }
.margin-row { display: grid; grid-template-columns: 100px 110px 1fr; align-items: center; gap: var(--space-4); }
.margin-row span, .margin-row b { white-space: nowrap; }
.margin-row b { color: var(--color-ink); text-align: right; }
.margin-row > div { height: 8px; border-radius: var(--radius-pill); background: var(--color-canvas-soft); overflow: hidden; }
.margin-row i { display: block; height: 100%; background: var(--color-positive); }
.action-buttons { display: grid; gap: var(--space-3); }
.action-buttons button, .quick-questions button, .suggested-followups button {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-5);
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  font-weight: 700;
  text-align: left;
}

.chat-header-toggle, .chat-heading button {
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-4);
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.management-chat {
  position: sticky;
  top: 64px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: calc(100vh - 64px);
  min-width: 0;
  border-left: 1px solid var(--color-line);
  background: var(--color-canvas-soft);
}
.chat-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-canvas);
}
.chat-heading > div:first-child { display: grid; }
.chat-heading span { color: var(--color-muted); font-size: 12px; }
.chat-heading strong { color: var(--color-ink); font-size: 18px; }
.chat-heading-actions { display: flex; gap: var(--space-3); }
.chat-messages { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5); }
.chat-empty { padding: var(--space-3) 0; color: var(--color-muted); text-align: center; }
.chat-empty strong { color: var(--color-ink); font-size: 18px; }
.chat-empty p { margin: var(--space-3) 0 0; }
.chat-starter-questions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-top: var(--space-4); text-align: left; }
.chat-starter-questions button { width: 100%; border: 1px solid var(--color-line); border-radius: var(--radius-button); padding: var(--space-2) var(--space-3); background: var(--color-canvas); color: var(--color-ink); font-size: 13px; line-height: 1.4; text-align: left; word-break: keep-all; }
.chat-starter-questions button:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.chat-message { display: flex; margin-bottom: var(--space-4); }
.chat-message.user { justify-content: flex-end; }
.chat-message.assistant { justify-content: flex-start; }
.chat-bubble { box-sizing: border-box; min-width: 0; max-width: 88%; padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); overflow-wrap: anywhere; }
.chat-message.user .chat-bubble { border-bottom-right-radius: var(--radius-input); background: var(--color-ink); color: var(--color-canvas); }
.chat-message.assistant .chat-bubble { border-bottom-left-radius: var(--radius-input); background: var(--color-canvas); color: var(--color-body); }
.chat-bubble p { margin: 0; white-space: pre-wrap; }
.chat-answer-title { display: block; margin-bottom: var(--space-3); color: var(--color-ink); }
.chat-conclusion { color: var(--color-body); }
.chat-section-label { display: block; margin-top: var(--space-4); color: var(--color-muted); font-size: 12px; font-weight: 700; }
.chat-bubble ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.chat-bubble li + li { margin-top: var(--space-2); }
.chat-failure, .chat-restriction { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-input); background: var(--color-canvas-soft); }
.chat-failure strong { color: var(--color-negative-deep); }
.chat-failure p + p { margin-top: var(--space-2); }
.chat-restriction { color: var(--color-body); font-size: 12px; }
.chat-bubble details { max-width: 100%; margin-top: var(--space-4); border-top: 1px solid var(--color-line); padding-top: var(--space-3); }
.chat-bubble summary { color: var(--color-ink); font-weight: 700; cursor: pointer; }
.chat-evidence-scroll { width: 100%; max-width: 100%; overflow-x: auto; margin-top: var(--space-3); }
.chat-bubble table { width: 100%; min-width: 520px; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
.chat-bubble th, .chat-bubble td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); text-align: left; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; vertical-align: top; }
.chat-bubble th { background: var(--color-canvas-soft); color: var(--color-body); }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.chat-suggestions button { border: 1px solid var(--color-line); border-radius: var(--radius-button); padding: var(--space-3) var(--space-4); background: var(--color-canvas); color: var(--color-ink); font-size: 12px; text-align: left; }
.chat-message.pending .chat-bubble { color: var(--color-muted); }
.chat-message.pending span::after { content: '…'; }
.chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--color-line); background: var(--color-canvas); }
.chat-composer textarea { width: 100%; min-width: 0; max-height: 144px; resize: vertical; border: 1px solid var(--color-ink); border-radius: var(--radius-input); padding: var(--space-3) var(--space-4); background: var(--color-canvas); color: var(--color-ink); }
.chat-composer button { align-self: stretch; min-width: 68px; border: 0; border-radius: var(--radius-button); padding: var(--space-3) var(--space-4); background: var(--color-primary); color: var(--color-ink); font-weight: 700; }
.chat-composer button:hover { background: var(--color-primary-active); }
.chat-composer small { grid-column: 1 / -1; color: var(--color-muted); }
.chat-scrim { display: none; }

.cause-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-6); }
.question-rail {
  align-self: start;
  position: sticky;
  top: 144px;
  min-width: 0;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-ink);
  color: var(--color-canvas);
}
.question-rail h1 { margin: var(--space-2) 0 var(--space-4); color: var(--color-canvas); font-size: 30px; font-weight: 900; white-space: nowrap; }
.question-rail > p:not(.section-label) { margin: 0; color: var(--color-line); font-size: 12px; }
.question-rail .section-label { color: var(--color-canvas); }
.quick-questions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.question-rail .quick-questions button { background: var(--color-body); color: var(--color-canvas); }
.cause-workarea { display: grid; gap: var(--space-6); min-width: 0; }
.cause-intro { display: flex; justify-content: space-between; gap: var(--space-5); }
.cause-intro h2 { margin: var(--space-2) 0; font-weight: 800; }
.cause-intro p { margin: 0; color: var(--color-muted); }
.cause-intro > span, .answer-head > b, .analysis-card > header > b {
  align-self: flex-start;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  background: var(--color-canvas-soft);
  color: var(--color-body);
  font-size: 12px;
  white-space: nowrap;
}
.answer-panel { margin: 0; }
.answer-head { display: flex; justify-content: space-between; gap: var(--space-5); }
.answer-head h3 { margin: var(--space-2) 0; font-size: 22px; font-weight: 800; }
.answer-head p { margin: 0; }
.answer-insights { margin: var(--space-5) 0; padding: var(--space-5) var(--space-7); border-radius: var(--radius-input); background: var(--color-canvas-soft); }
.answer-accounts { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.account-chip { min-width: 0; min-height: 110px; border: 0; border-radius: var(--radius-card); padding: var(--space-4); background: var(--color-canvas-soft); color: var(--color-ink); text-align: left; }
.account-chip > span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-canvas); }
.account-chip small, .account-chip i { display: block; margin-top: var(--space-2); overflow: hidden; color: var(--color-muted); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.suggested-followups { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.suggested-followups > span { color: var(--color-muted); font-size: 12px; font-weight: 700; }
.suggested-followups > div { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.detail-panel { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.detail-bars > div { display: grid; grid-template-columns: 120px 1fr 110px; gap: var(--space-3); align-items: center; margin: var(--space-3) 0; }
.detail-bars span, .detail-bars strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.detail-bars i { height: 10px; border-radius: var(--radius-pill); background: var(--color-canvas-soft); overflow: hidden; }
.detail-bars i b { display: block; height: 100%; background: var(--color-positive); }
.description-list article { display: grid; grid-template-columns: 150px 1fr 110px; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-line); }

.commercial-heading { display: flex; justify-content: space-between; gap: var(--space-5); }
.commercial-heading p { margin: var(--space-2) 0 0; color: var(--color-muted); }
.commercial-heading a, .data-readiness a {
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-5);
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.commercial-empty { margin-top: var(--space-5); padding: var(--space-6); border-radius: var(--radius-card); background: var(--color-canvas-soft); }
.commercial-empty p { margin-bottom: 0; color: var(--color-muted); }
.commercial-kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin: var(--space-5) 0; }
.commercial-kpi-strip > div { min-width: 0; padding: var(--space-4); border-radius: var(--radius-input); background: var(--color-canvas-soft); }
.commercial-kpi-strip span, .commercial-kpi-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commercial-kpi-strip span { color: var(--color-muted); font-size: 11px; }
.commercial-kpi-strip strong { margin-top: var(--space-2); color: var(--color-ink); font-size: 18px; }
.commercial-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: var(--space-4); }
.commercial-table-panel { min-width: 0; border-radius: var(--radius-card); background: var(--color-canvas-soft); overflow: hidden; }
.commercial-table-panel header { padding: var(--space-4); }
.commercial-table-panel h3 { margin: 0; }
.commercial-table, .income-table, .financial-table { max-width: 100%; overflow-x: auto; }
.commercial-table table, .income-table table, .financial-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.commercial-table th, .commercial-table td, .income-table th, .income-table td, .financial-table th, .financial-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-line); text-align: right; white-space: nowrap; }
.commercial-table th:first-child, .commercial-table td:first-child, .income-table th:first-child, .income-table td:first-child, .financial-table th:first-child, .financial-table td:first-child { text-align: left; }
.financial-table { margin-top: 32px; }
.financial-table table { width:max-content; min-width:100%; }
.financial-table th:first-child { position:sticky; left:0; z-index:3; min-width:180px; background:var(--color-canvas); box-shadow:1px 0 0 var(--color-line); }
.financial-table thead th:first-child { z-index:4; background:var(--color-canvas-soft); }
.financial-table thead th { background:var(--color-canvas-soft); }
.financial-table .section-row th,.financial-table .section-row td{background:var(--color-canvas-soft);font-weight:900}
.financial-table .section-row th:first-child{background:var(--color-canvas-soft)}
.table-scroll-hint { position:sticky; left:0; width:max-content; margin:0 0 8px; color:var(--color-muted); font-size:11px; font-weight:800; }
.financial-table .sub-row th { padding-left: var(--space-6); color: var(--color-muted); font-weight: 700; }
.financial-grid .large-chart { overflow-x: auto; }
.financial-grid .large-chart svg { min-width: 720px; }
.financial-grid .c-lbl { font-size: 9px; }
.chart-selection { margin: 10px 0 0; color: var(--color-muted); font-size: 12px; font-weight: 700; }
.comparison-warning { border: 1px solid #d9a441; background: #fff8e6; color: #73510b; font-weight: 800; }
.data-note { margin: var(--space-4) 0 0; padding: var(--space-4); border-radius: var(--radius-input); background: var(--color-canvas-soft); color: var(--color-muted); font-size: 12px; }

.control-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.control-heading h1 { margin: var(--space-2) 0; font-size: clamp(28px, 4vw, 40px); font-weight: 900; }
.control-heading p { margin: 0; color: var(--color-muted); }
.control-lights { display: flex; gap: var(--space-3); }
.control-lights span { border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); background: var(--color-canvas-soft); font-size: 12px; font-weight: 700; white-space: nowrap; }
.control-lights span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: var(--space-2); border-radius: var(--radius-pill); background: var(--color-positive); }
.control-lights .warn::before { background: var(--color-warning); }
.control-lights .neutral::before { background: var(--color-muted); }
.risk-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.data-readiness { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.data-readiness h2 { margin: var(--space-2) 0; font-weight: 800; }
.data-readiness p { margin: 0; color: var(--color-muted); }

@media (max-width: 1180px) {
  .executive-bar { display: flex; flex-wrap: wrap; }
  .view-switch { order: 4; width: 100%; justify-content:center; }
  .view-switch button { flex: 1; }
  .executive-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .risk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cause-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .question-rail { position: static; }
}
@media (max-width: 1023px) {
  .dashboard-app, .chat-collapsed .dashboard-app { display: block; }
  .management-chat {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 70;
    width: min(420px, 100vw);
    height: 100vh;
    border-left: 1px solid var(--color-line);
    transform: translateX(0);
  }
  .chat-collapsed .management-chat { display: grid; transform: translateX(100%); }
  .chat-scrim { position: fixed; inset: 0; z-index: 60; display: block; border: 0; background: var(--color-overlay); }
  .chat-collapsed .chat-scrim { display: none; }
}
@media (max-width: 900px) {
  .executive-brand small, .live-badge { display: none; }
  .primary-grid, .secondary-grid, .operations-grid, .commercial-grid { grid-template-columns: 1fr; }
  .cause-layout { grid-template-columns: 1fr; }
  .question-rail .quick-questions { grid-template-columns: repeat(2, 1fr); }
  .answer-accounts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .executive-bar { position: relative; padding: var(--space-3) var(--space-5); }
  .executive-brand { min-width: 0; }
  .brand-mark { display: none; }
  .bar-left, .bar-right { width: 100%; justify-content: space-between; }
  .bar-period { width: auto; margin-left: 0; }
  .bar-period .period-switch { width: 100%; }
  .bar-period button { flex: 1; }
  .dashboard-canvas { padding: var(--space-4); }
  .decision-statement { align-items: stretch; flex-direction: column; padding: var(--space-6); }
  .decision-statement h1 { font-size: clamp(28px, 9vw, 32px); }
  .decision-statement > button { align-self: flex-start; }
  .executive-kpis, .risk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .executive-kpi, .risk-kpis article { min-height: 136px; padding: var(--space-5); }
  .executive-kpi label, .risk-kpis label { font-size: 11px; }
  .executive-kpi > strong, .risk-kpis strong { font-size: 18px; }
  .executive-kpi:last-child, .risk-kpis article:last-child { grid-column: 1 / -1; }
  .executive-panel, .analysis-card, .cause-intro, .answer-panel, .commercial-section,
  .control-heading, .data-readiness { padding: var(--space-5); }
  .margin-row { grid-template-columns: 82px 90px minmax(0, 1fr); gap: var(--space-3); }
  .question-rail .quick-questions { grid-template-columns: 1fr; }
  .cause-intro, .answer-head, .commercial-heading, .control-heading, .data-readiness { display: block; }
  .cause-intro > span, .answer-head > b, .commercial-heading a, .data-readiness a { display: inline-flex; margin-top: var(--space-4); }
  .answer-accounts { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-bars > div { grid-template-columns: 90px minmax(0, 1fr); }
  .detail-bars strong { grid-column: 1 / -1; }
  .description-list article { grid-template-columns: 1fr; }
  .commercial-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commercial-kpi-strip > div:last-child { grid-column: 1 / -1; }
  .control-lights { flex-wrap: wrap; margin-top: var(--space-4); }
}
@media (max-width: 390px) {
  .chat-heading, .chat-messages { padding-inline: var(--space-4); }
  .chat-heading-actions { gap: var(--space-2); }
  .chat-heading button { padding-inline: var(--space-3); }
  .executive-kpi, .risk-kpis article { padding: var(--space-4); }
  .answer-accounts { grid-template-columns: 1fr; }
}
@media (min-width: 600px) {
  .chat-starter-questions button { white-space: nowrap; }
}
@media (max-width: 600px) {
  .view-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .view-switch button { min-width:0; padding:var(--space-2); font-size:11px; }
  .area-heading { display:block; }
  .area-heading h1 { font-size:30px; }
  .five-kpis,.situation-grid,.area-grid,.financial-grid,.contribution-grid { grid-template-columns:1fr; }
  .wide-card { grid-column:auto; }
  .area-card { padding:var(--space-5); }
  .mandatory-notice { flex-direction:column; }
  .bar-row { grid-template-columns:minmax(0,1fr) 70px; }
  .bar-row strong { grid-column:1 / -1; }
  .executive-kpi:last-child { grid-column:auto; }
  .dashboard-canvas,.executive-bar { max-width:100vw; overflow-x:hidden; }
}

/* ---- 공용 SVG 차트 ---- */
.chart{position:relative;width:100%;overflow-x:auto}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.c-lbl{font-size:12px;fill:#6b7269}
.c-tick{font-size:12px;fill:#6b7269}
.c-val{font-size:11px;font-weight:800;fill:#0e0f0c}
.c-inbar{font-size:11px;font-weight:800}
.c-center{font-size:24px;font-weight:900;fill:#0e0f0c}
.c-empty{font-size:12px;fill:#6b7269}
.c-clickable{cursor:pointer}
.c-clickable:hover{opacity:.82}
.c-interactive{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:filter .12s ease,transform .12s ease}
.c-interactive:hover,.c-interactive.is-highlighted,.c-interactive:focus{filter:drop-shadow(0 2px 3px rgba(14,15,12,.35));outline:none}
circle.c-interactive:hover,circle.c-interactive.is-highlighted,circle.c-interactive:focus{transform:scale(1.6)}
rect.c-interactive:hover,rect.c-interactive.is-highlighted,rect.c-interactive:focus{stroke:#fff;stroke-width:2px}
.chart-tooltip{position:absolute;z-index:8;max-width:min(310px,calc(100% - 16px));transform:translate(-50%,-100%);pointer-events:none;border-radius:9px;padding:8px 10px;background:#0e0f0c;color:#fff;font-size:11px;font-weight:800;line-height:1.35;white-space:nowrap;box-shadow:0 7px 20px rgba(14,15,12,.24)}
.bar-right .chat-header-toggle {
  border: 1px solid var(--color-ink);
  background: var(--color-canvas);
  color: var(--color-ink);
}
.chart-legend{display:flex;flex-direction:row;flex-wrap:wrap;gap:7px 16px;margin-top:10px;font-size:12px;line-height:1.35;color:#6b7269}
.chart-legend span{white-space:nowrap}

/* ---- 매출: 서로 독립적인 세 조회 구역 ---- */
.sales-section{overflow:hidden}
.sales-section+.sales-section{margin-top:48px}
.sales-channel-section>header>div{min-width:0}.sales-channel-change-note{overflow-wrap:anywhere}
.sales-query-row{display:flex;align-items:flex-start;gap:16px}
.sales-query-row>.period-picker{flex:1}
.sales-product-filter{display:grid;min-width:280px;max-width:360px;gap:7px;color:#6b7269;font-size:12px;font-weight:800}
.sales-product-filter>input{min-height:40px;border:1px solid #d5dad1;border-radius:10px;padding:0 12px;background:#fff;color:#0e0f0c;font-weight:700}
.sales-product-actions{display:flex;gap:7px}
.sales-product-actions button{flex:1;min-width:0;min-height:32px;border:1px solid #c9cec5;border-radius:8px;padding:0 12px;background:#fff;color:#343a33;font-size:11px;font-weight:800;cursor:pointer}
.sales-product-options{display:grid;max-height:230px;overflow:auto;border:1px solid #d5dad1;border-radius:10px;padding:6px;background:#fff}
.sales-product-options label{display:flex;align-items:flex-start;gap:7px;border-radius:7px;padding:7px 8px;color:#343a33;font-size:11px;font-weight:700;line-height:1.3;cursor:pointer}
.sales-product-options label:hover{background:#eef0ec}
.sales-product-options input{flex:0 0 auto;margin:1px 0 0}
.channel-toggle{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px}
.sales-line-chart{min-height:0;margin-top:18px}
.sales-line-chart svg{min-width:0}
.sales-line-chart .c-lbl{font-size:12px}
.sales-visual-table{margin-top:28px;overflow-x:auto}
.sales-table-heading{margin:42px 0 0;padding-top:24px;border-top:2px solid #d5dad1}.sales-table-heading h3{margin:0;font-size:20px}.sales-table-heading p{margin:6px 0 0;color:#6b7269;font-size:12px;font-weight:700}
#salesProductTable.sales-visual-table{margin-top:0}
.sales-visual-table table{width:100%;min-width:760px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sales-visual-table th,.sales-visual-table td{position:relative;padding:15px 16px;border-bottom:1px solid #d5dad1;text-align:right;white-space:nowrap}
.sales-visual-table thead th{position:sticky;top:0;z-index:2;background:#eef0ec;color:#0e0f0c;font-size:12px}
.sales-visual-table th:first-child{text-align:left}
.sales-visual-table tbody th{max-width:300px;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.sales-visual-table tbody td{font-size:13px;font-weight:700}
.sales-money-cell{isolation:isolate;overflow:hidden}
.sales-cell-bar{position:absolute;z-index:-1;right:0;bottom:6px;height:calc(100% - 12px);border-radius:5px 0 0 5px;background:rgba(159,232,112,.28)}
.sales-cell-bar.negative{background:rgba(192,57,43,.15)}
.sales-change.good{color:#2f7d3a}
.sales-change.bad{color:#c0392b}
@media (max-width:900px){.sales-query-row{display:grid}.sales-product-filter{min-width:0}}
.chart-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
/* 기간 선택기 */
.period-picker{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px;background:#f3f5f1;border-radius:16px;margin-bottom:18px}
.period-picker b{font-size:11px;color:#6b7269;font-weight:800;letter-spacing:.04em}
.period-picker .sep{width:1px;height:22px;background:#d5dad1;margin:0 4px}
.period-chip{border:1px solid #d5dad1;background:#fff;border-radius:20px;padding:6px 15px;font-size:12.5px;font-weight:700;cursor:pointer}
.period-chip[aria-pressed=true]{background:#0e0f0c;color:#fff;border-color:#0e0f0c}
.period-chip:disabled{opacity:.4;cursor:not-allowed}
.range-control{display:flex;gap:6px;align-items:center;min-width:0;margin:0;padding:7px 9px;border:1px solid #d5dad1;border-radius:12px;background:#fff}
.range-control legend{padding:0 4px;color:#343a33;font-size:11px;font-weight:900}
.range-control label{display:flex;gap:4px;align-items:center;color:#6b7269;font-size:10px;font-weight:800}
.range-control select{min-height:30px;max-width:104px;border:1px solid #d5dad1;border-radius:8px;background:#fff;color:#0e0f0c;font-size:11px}
.range-control.inactive{opacity:.55;background:#ecefe9}
.range-toggle{min-height:28px;border:1px solid #c9cec5;border-radius:8px;background:#fff;color:#555d53;font-size:10px;font-weight:800;cursor:pointer}
.range-toggle[aria-pressed=true]{background:#646b62;color:#fff}
.granularity-control{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.period-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
#salesProductPeriodPicker .period-actions,#salesChannelPeriodPicker .period-actions,#salesReturnPeriodPicker .period-actions,#productPeriodPicker .period-actions,#productRankingPeriodPicker .period-actions{flex:1;justify-content:center;margin-left:0}
#salesProductPeriodPicker .period-actions{order:1}
#salesProductPeriodPicker .granularity-control{order:2;flex-basis:100%}
.period-error{margin:0;color:#b3261e;font-size:11px;font-weight:800}
.period-submit{min-height:36px;padding:0 22px;border:0;border-radius:10px;background:#0e0f0c;color:#fff;font-size:13px;font-weight:900;cursor:pointer}
.period-submit:disabled{opacity:.4;cursor:not-allowed}
.custom-period{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.custom-period[hidden]{display:none}
.custom-period label{display:flex;gap:5px;align-items:center;color:#6b7269;font-size:11px;font-weight:800}
.custom-period select{min-height:30px;border:1px solid #d5dad1;border-radius:8px;background:#fff;color:#0e0f0c;font-size:12px}
.kpi-current{display:grid;gap:3px;margin-top:12px;padding-bottom:9px;border-bottom:1px solid #eef0ec}
.kpi-value-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:#6b7269;font-size:11px}
.kpi-value-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-value-row strong{color:#0e0f0c;font-size:14px;white-space:nowrap}
.kpi-current .kpi-value-row strong{font-size:20px}
.kpi-comparisons{display:grid;gap:8px;margin-top:9px}
.kpi-comparisons:empty{display:none}
.kpi-comparison{display:grid;gap:2px;margin:0}
.kpi-comparison-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:#6b7269}
.kpi-comparison-meta small{font-size:11px;white-space:nowrap}
.kpi-comparison-meta .kpi-delta:only-child{margin-left:auto;text-align:right}
.executive-kpi .kpi-exact-value{overflow:visible;color:#4f574d;font-size:11px;font-variant-numeric:tabular-nums;text-overflow:clip;white-space:nowrap}
.kpi-comparison-meta small.good{color:#2f7d3a}
.kpi-comparison-meta small.bad{color:#c0392b}
.kpi-delta.increase{color:#c0392b}
.kpi-delta.decrease{color:#4a6fa5}
.kpi-delta.zero{color:#868685}
.mini-kpi-chart{height:auto;min-height:94px;margin-top:auto;padding-top:10px;overflow:visible}
.c-clickable{cursor:pointer}
@media (max-width:600px){.period-picker{padding:10px}.period-chip{padding:5px 11px;font-size:12px}.custom-period,.range-control,.granularity-control,.period-actions{width:100%}.range-control{flex-wrap:wrap}.period-actions{margin-left:0;justify-content:flex-end}}

/* ---- 제품 수익성 페이지 ---- */
#view-product:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:0 16px;align-items:start}
#view-product>.area-heading,#view-product>.product-comparisons,#view-product>.product-ranking-section{grid-column:1/-1}
.product-selector{display:grid;min-width:0;gap:8px;margin:0 0 24px;padding:14px;border:1px solid #d5dad1;border-radius:16px;background:#f3f5f1}
.product-selector header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.product-selector header strong{font-size:16px}.product-selector header span,.product-selector>label{color:#6b7269;font-size:11px;font-weight:800}
.product-selector>input{min-height:42px;border:1px solid #d5dad1;border-radius:10px;padding:0 12px;background:#fff;font-weight:700}
.product-selector-actions{display:flex;gap:7px}.product-selector-actions button{flex:1;min-width:0;min-height:34px;border:1px solid #c9cec5;border-radius:8px;padding:0 12px;background:#fff;font-size:11px;font-weight:900;cursor:pointer}
.product-selector-actions #productPeriodSearchButton{margin-left:auto;border-color:#0e0f0c;background:#0e0f0c;color:#fff}.product-selector-actions button:disabled{opacity:.4;cursor:not-allowed}
.product-selector .sales-product-options{max-height:250px}
.period-tone-1{--period-color:#0e0f0c}.period-tone-2{--period-color:#d39a12}.period-tone-3{--period-color:#4a6fa5}
.range-control.period-tone-1,.range-control.period-tone-2,.range-control.period-tone-3{border-top:3px solid var(--period-color)}
.product-detail-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.product-detail-heading h2{margin:0}.product-detail-heading span{color:#6b7269;font-size:12px;font-weight:800}
.product-period-detail{display:grid;min-width:0;gap:12px;padding:16px;border:1px solid #d5dad1;border-top:4px solid var(--period-color);border-radius:14px;background:#fff}
.product-period-detail>h3{margin:0;color:var(--period-color);font-size:14px}.product-excluded-note{margin:0;color:#8b5f00;font-size:11px;font-weight:800}.product-excluded-note summary{cursor:pointer;line-height:1.5}.product-excluded-note ul{max-height:220px;margin:7px 0 0;padding:0 4px 0 20px;overflow-y:auto;line-height:1.5}.product-excluded-note li{padding:3px 0}
.c2-period-donuts{display:grid;grid-template-columns:1fr;gap:9px}.c2-donut-section{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;align-items:center;padding:10px;border-radius:10px;background:#f7f8f5}.c2-donut-section h4{grid-column:1/-1;margin:0;font-size:13px}.c2-donut-chart{min-height:150px}.c2-donut-section .number-table{margin:0}.c2-donut-section .number-row{grid-template-columns:minmax(70px,1fr) minmax(90px,auto);padding:6px 0;font-size:11px}
.break-even-card{padding:14px;border-left:4px solid #8c9189;border-radius:10px;background:#f3f5f1}.break-even-card.status-달성{border-color:#2f7d3a;background:#edf7ec}.break-even-card.status-미달{border-color:#c0392b;background:#fff0ee}
.break-even-card{display:grid;align-content:start;min-height:128px}.break-even-card header{display:flex;align-items:center;gap:7px}.break-even-card h4{margin:0}.break-even-card p{margin:9px 0 0;font-size:12px;line-height:1.55}.break-even-card small{display:block;margin-top:6px;color:#2f7d3a;font-weight:900}
.break-even-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.break-even-metrics>div{display:grid;align-content:start;gap:6px;min-width:0;padding:9px;border-radius:8px;background:rgba(255,255,255,.68)}.break-even-metrics span{color:#6b7269;font-size:10px;font-weight:800}.break-even-metrics strong{color:#0e0f0c;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.break-even-bar{display:flex;height:10px;margin-top:10px;overflow:hidden;border-radius:999px;background:#d5dad1}.break-even-bar i:first-child{background:#343a33}.break-even-bar i:last-child{background:#65ad5c}
.info-tip{position:relative;display:inline-grid;width:18px;height:18px;place-items:center;border:1px solid #9aa095;border-radius:50%;padding:0;background:#fff;color:#555d53;font-size:10px;font-weight:900;cursor:help;vertical-align:middle}
.info-tip:hover::after,.info-tip:focus::after{position:absolute;z-index:12;right:0;bottom:calc(100% + 7px);width:250px;border-radius:9px;padding:8px 10px;background:#0e0f0c;color:#fff;content:attr(aria-label);font-size:11px;font-weight:800;line-height:1.4;text-align:left;white-space:normal;box-shadow:0 7px 20px rgba(14,15,12,.24)}
.break-even-badge{display:inline-block;border-radius:999px;padding:5px 8px;background:#ecefe9;color:#555d53;font-size:11px;font-weight:900}.break-even-badge.status-달성{background:#daf0d6;color:#22662c}.break-even-badge.status-미달{background:#fde0dc;color:#a4291e}
.product-ranking-tabs{display:flex;gap:8px;margin:0 0 12px}.product-ranking-tabs .period-chip:nth-child(2)[aria-pressed=true]{border-color:#d39a12;background:#d39a12}.product-ranking-tabs .period-chip:nth-child(3)[aria-pressed=true]{border-color:#4a6fa5;background:#4a6fa5}
.product-ranking-controls fieldset{display:flex;align-items:center;gap:12px;min-height:50px;border:1px solid #d5dad1;border-radius:10px;padding:7px 10px}.product-ranking-controls fieldset legend{color:#6b7269;font-size:11px;font-weight:900}
.period-triplet{display:inline-flex;gap:7px}.period-triplet b{font-size:11px}.period-text-1{color:#0e0f0c}.period-text-2{color:#b77d00}.period-text-3{color:#4a6fa5}
.product-controls{display:flex;align-items:end;gap:16px;margin-bottom:18px}
.product-controls label{display:grid;gap:7px;color:#6b7269;font-size:12px;font-weight:800}
.product-controls select{min-height:44px;border:1px solid #d5dad1;border-radius:10px;padding:0 12px;background:#fff;color:#0e0f0c;font-weight:700}
.product-controls small{padding-bottom:12px;color:#6b7269}
.product-comparisons{display:grid;gap:22px}
.product-comparison-row{min-width:0;padding-top:18px;border-top:2px solid #d5dad1;overflow-x:auto}
.product-comparison-row>h2{margin:0 0 14px;font-size:20px}
.product-period-columns{display:grid;grid-template-columns:repeat(3,minmax(290px,1fr));gap:16px;align-items:stretch;min-width:900px}
.product-period-columns.period-count-1{grid-template-columns:minmax(0,1fr);min-width:0}
.product-period-columns.period-count-2{grid-template-columns:repeat(2,minmax(290px,1fr));min-width:596px}
.product-period-label,.product-period-metrics>h3{margin:0 0 10px;color:#49604d;font-size:13px;font-weight:900}
.product-period-metrics{min-width:0}
.product-kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:0}
.product-kpi-grid .executive-kpi:last-child{grid-column:1/-1}
.period-count-1 .product-kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.product-kpi-grid .executive-kpi{min-height:68px;padding:10px 12px}.product-kpi-grid .executive-kpi strong{margin-top:5px;font-size:20px}
.product-single-donuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.product-donuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}
.product-donuts .area-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}
.product-ranking-section{margin-top:28px;padding-top:22px;border-top:2px solid #0e0f0c}
.product-ranking-section>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.product-ranking-section h2{margin:0;color:#0e0f0c;font-size:22px}
.product-ranking-section header p{margin:5px 0 0;color:#6b7269;font-size:12px}
.product-ranking-section header strong{white-space:nowrap;font-variant-numeric:tabular-nums}
.product-ranking-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:12px;border-radius:12px;background:#f3f5f1}
.product-ranking-controls label{display:grid;gap:6px;color:#6b7269;font-size:11px;font-weight:800}
.product-ranking-controls input,.product-ranking-controls select{min-height:36px;min-width:86px;border:1px solid #d5dad1;border-radius:9px;padding:0 10px;background:#fff;color:#0e0f0c;font-size:12px;font-weight:700}
.product-ranking-controls .loss-only-control{display:flex;align-items:center;min-height:36px;color:#0e0f0c;font-size:13px}
.product-ranking-controls .loss-only-control input{min-width:18px;min-height:18px;margin:0;padding:0}
.ranking-period-picker{margin-bottom:12px}
.product-ranking-controls select{min-width:160px}
.product-ranking-controls button,.product-ranking-more{min-height:36px;border:0;border-radius:10px;padding:0 20px;background:#0e0f0c;color:#fff;font-size:13px;font-weight:900}
.product-ranking-controls button:disabled{opacity:.45;cursor:not-allowed}
.product-ranking-table{max-width:100%;overflow-x:auto;border-radius:10px;background:#fff}.product-ranking-table .table-scroll-hint{position:sticky;left:0;margin:0;padding:7px 10px;background:#eef2eb;color:#596457;font-size:11px;font-weight:800;text-align:center}
.product-ranking-table table{min-width:1720px;width:100%;border-collapse:collapse;font-size:13px}
.product-ranking-table th,.product-ranking-table td{height:48px;padding:12px;border-bottom:1px solid #d5dad1;text-align:right;white-space:nowrap;vertical-align:middle}
.product-ranking-table thead th{background:#f3f5f1;color:#343a33;font-size:12px;font-weight:900}
.product-ranking-table thead th,.product-ranking-table thead th:first-child{text-align:center}
.product-ranking-table th:first-child,.product-ranking-table td:first-child{position:sticky;left:0;z-index:2;background:#fff;text-align:left}.product-ranking-table thead th:first-child{z-index:4;background:#f3f5f1}.product-ranking-table tbody tr{cursor:pointer}.product-ranking-table tbody tr:hover th,.product-ranking-table tbody tr:hover td{background-color:#f7faf5}
.product-ranking-table tbody th{min-width:190px}
.product-ranking-table tbody th b,.product-ranking-table tbody th small{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-ranking-table tbody th small{margin-top:4px;color:#6b7269;font-weight:700}
.ranking-pair{display:inline-grid;grid-template-columns:auto auto;gap:7px;align-items:baseline;font-variant-numeric:tabular-nums}
.ranking-pair b{color:#0e0f0c}
.ranking-pair small{color:#6b7269}
.ranking-stack{width:320px;min-width:320px}
.ranking-stack svg{height:36px}
.product-ranking-more{margin-top:12px;background:#f3f5f1;color:#0e0f0c}
#productRankingExcluded{margin-top:14px;padding:12px;border-radius:10px;background:#f3f5f1;color:#343a33}
#productRankingExcluded summary{font-weight:900;cursor:pointer}
#productRankingExcludedList{max-height:220px;overflow:auto;margin-top:8px}
#productRankingExcludedList p{margin:0;padding:8px 0;border-top:1px solid #d5dad1;font-size:12px}
#productRankingExcludedList span{color:#6b7269}
.number-table{display:grid;gap:0;margin-top:8px}
.number-row{display:grid;grid-template-columns:minmax(90px,1fr) minmax(120px,auto);gap:12px;padding:10px 0;border-top:1px solid #d5dad1;font-size:13px}
.number-row span{min-width:0;color:#6b7269}
.number-row strong{min-width:0;overflow-wrap:anywhere;color:#0e0f0c;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:900px){.product-controls,.product-donuts{grid-template-columns:1fr}}
@media (max-width:600px){.period-picker{padding:10px}.period-chip{padding:5px 11px;font-size:12px}.product-controls{display:grid}.product-comparison-row{overflow-x:visible}.product-period-columns,.product-period-columns.period-count-2{grid-template-columns:1fr;min-width:0}.period-count-1 .product-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.period-count-1 .product-kpi-grid .executive-kpi:last-child{grid-column:1/-1}.product-single-donuts{grid-template-columns:1fr}.number-row{grid-template-columns:1fr}.five-kpis{gap:16px}.five-kpis .executive-kpi{min-height:296px}.five-kpis .executive-kpi.single-period{min-height:auto}.five-kpis .executive-kpi.single-period .kpi-current{border-bottom:0;padding-bottom:0}.area-card{padding:18px}.large-chart{min-height:0}.chart-legend{gap:6px 12px}}
@media (max-width:600px){#view-product:not([hidden]){grid-template-columns:minmax(0,1fr)}#view-product>*{min-width:0}.product-selector{width:100%;max-width:none}.product-selector header{align-items:flex-start;flex-direction:column}.product-selector-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.product-selector-actions button{min-width:0;padding-inline:6px}.product-selector-actions #productPeriodSearchButton{grid-column:1/-1;width:100%;margin-left:0}.product-period-columns,.product-period-columns.period-count-2,.product-period-columns.period-count-3{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}.product-period-detail{width:100%;padding:13px}.product-period-detail .product-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-period-detail .product-kpi-grid .executive-kpi:last-child{grid-column:1/-1}.c2-donut-section{grid-template-columns:120px minmax(0,1fr);padding:8px}.c2-donut-chart{min-height:120px}.c2-donut-chart svg{width:120px;height:120px}.break-even-metrics{grid-template-columns:1fr}.break-even-card{min-height:0}.product-ranking-controls{display:grid}.product-ranking-controls fieldset{align-items:flex-start;flex-direction:column}.product-ranking-table{overflow-x:auto}}
@media (max-width:600px){#salesProductPeriodPicker .period-submit,#salesChannelPeriodPicker .period-submit,#salesReturnPeriodPicker .period-submit,#productPeriodPicker .period-submit,#productRankingPeriodPicker .period-submit{width:100%}}
@media (max-width:600px){#salesProductPeriodPicker .period-actions,#salesProductPeriodPicker .granularity-control{order:initial}.period-picker{width:100%;min-width:0}.period-picker>.range-control{flex:0 0 100%;width:100%}.period-picker>.period-actions{flex:0 0 100%;width:100%}.period-picker .period-submit{min-width:0}.area-heading p,.mandatory-notice,.product-detail-heading{overflow-wrap:anywhere}.dashboard-view,.area-card{max-width:100%}}
@media (max-width:600px){.sales-channel-section>header{align-items:flex-start;flex-direction:column}.sales-channel-section>header>div{width:100%}}

@media (max-width:600px){
  .sales-visual-table{overflow-x:visible}
  .sales-visual-table table{display:block;min-width:0}
  .sales-visual-table thead{display:none}
  .sales-visual-table tbody{display:grid;gap:10px}
  .sales-visual-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;border:1px solid var(--color-line);border-radius:12px;background:var(--color-canvas-soft)}
  .sales-product-section .sales-visual-table tbody tr,
  .sales-channel-section .sales-visual-table tbody tr{grid-template-columns:minmax(0,1fr)}
  .sales-visual-table tbody th{grid-column:1/-1;max-width:none;padding:0 0 9px;overflow:visible;text-overflow:clip;white-space:normal;font-size:13px}
  .sales-visual-table tbody td{display:flex;min-width:0;justify-content:space-between;gap:8px;padding:8px 6px;border-top:1px solid var(--color-line);border-bottom:0;overflow-wrap:normal;white-space:nowrap;font-size:12px}
  .sales-visual-table tbody td::before{content:attr(data-label);flex:0 0 auto;color:var(--color-muted);font-size:10px;font-weight:700}
  .sales-cell-bar{display:none}
}

/* hidden 속성이 항상 이기게 한다. 탭 버튼처럼 display 를 지정한 요소는
   hidden 을 붙여도 CSS 규칙에 눌려 계속 보였다. */
[hidden]{display:none!important}

/* S6-b typography: page title / card title / body / helper text. */
.area-card h2{font-size:20px}
.area-card,.financial-table table{font-size:14px}
.financial-table table{font-size:13px}
.financial-table th,.financial-table td{padding:12px 14px}
.financial-grid .c-lbl,.financial-grid .c-tick{font-size:12px}
.financial-grid .chart-legend{flex-direction:row}