:root {
  color-scheme: light;
  --canvas: #f3f1e9;
  --canvas-deep: #ebe8de;
  --surface: #fffefb;
  --surface-soft: #faf8f1;
  --ink: #19232b;
  --ink-soft: #52616b;
  --ink-faint: #5f6c73;
  --line: #dedbd1;
  --line-strong: #cbc7bc;
  --line-input: #88857b;
  --brand: #246f90;
  --product-symbol-c: #1f5873;
  --product-symbol-accent: #f2a23a;
  --brand-deep: #174f6c;
  --brand-ink: #0f3a51;
  --brand-soft: #e5f2f5;
  --brand-glow: #6cbccf;
  --logo-red: #d94a45;
  --danger: #a63d38;
  --danger-soft: #fbe9e6;
  --sage: #356b59;
  --sage-soft: #e7f2ec;
  --amber: #845a1b;
  --amber-soft: #f7eed8;
  --peach: #92502f;
  --peach-soft: #f8e9df;
  --lavender: #6b6290;
  --lavender-soft: #efecf7;
  --planned: #5f6c73;
  --neutral-soft: #efeee9;
  --white: #ffffff;
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, .74);
  --on-dark-line: rgba(255, 255, 255, .16);
  --on-dark-fill: rgba(255, 255, 255, .08);
  --scrim: rgba(25, 35, 43, .42);
  --focus: rgba(36, 111, 144, .30);
  --shadow-card: 0 2px 8px rgba(39, 48, 52, .06);
  --shadow-lift: 0 14px 32px rgba(39, 48, 52, .10), 0 2px 6px rgba(39, 48, 52, .05);
  --shadow-overlay: 0 24px 64px rgba(31, 41, 45, .16);
  --hero-grad: linear-gradient(135deg, #174f6c 0%, #1f6585 55%, #2d7c96 100%);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-20: 20px; --fs-26: 26px; --fs-32: 32px; --fs-44: 44px; --fs-56: 56px;

  --nav-w: 248px;
  --rail-w: 88px;
  --topbar-h: 64px;
  --content-max: 1200px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-press: 100ms;
  --t-hover: 180ms;
  --t-route: 320ms;
  --t-nav: 280ms;
  --t-dialog: 240ms;

  --on-accent: #ffffff;
  --canvas-glass: rgba(243, 241, 233, .82);
  --canvas-veil: rgba(243, 241, 233, .72);
  --surface-glass: rgba(255, 254, 251, .96);
  --surface-hover: rgba(250, 248, 241, .9);
  --track: rgba(25, 35, 43, .08);
  --sheen: rgba(255, 255, 255, .7);
  --edge-shade: rgba(25, 35, 43, .16);
  --rose: #7d3552;
  --rose-soft: #f6e3ea;
  --mark: #f9d98a;
  --well: #eceae4;
  --checker-a: #f3f1ea;
  --checker-b: #faf8f2;
  --stripe-a: #fbf3df;
  --stripe-b: #f5e9c9;
  --bad-grad-a: #fbefec;
  --bad-grad-b: #f6f3ea;
  --page-art-opacity: 1;
  --inverse: #19232b;
  --on-light-ink: #0f3a51;
}
:root {
  --background: var(--canvas);
  --muted: var(--ink-soft);
  --wash: var(--surface-soft);
  --warning: var(--peach);
  --warning-wash: var(--peach-soft);
  --positive: var(--sage);
  --negative: var(--danger);
  --body: var(--fs-14);
  --small: var(--fs-13);
  --heading: var(--fs-26);
  --radius: var(--r-sm);
  --panel-radius: var(--r-md);
  --content: var(--content-max);
  --collection-max: 420px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font:
    var(--body) / 1.6 "Segoe UI",
    "Malgun Gothic",
    sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1,
h2,
p {
  margin: 0;
}
h1 {
  max-width: 24ch;
  font-size: var(--heading);
  line-height: 1.3;
  letter-spacing: -0.025em;
}
h2 {
  font-size: 22px;
  line-height: 1.4;
}
a {
  color: inherit;
}
button,
input {
  min-height: 44px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  font: inherit;
  padding: var(--s2) var(--s3);
}
button {
  cursor: pointer;
  transition: background 120ms;
}
button:hover:not(:disabled) {
  background: var(--wash);
}
button:disabled {
  cursor: wait;
  opacity: 0.65;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.shell {
  width: min(100%, var(--content));
  margin-inline: auto;
  padding-inline: var(--s8);
}
.masthead {
  min-height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  border-bottom: 1px solid var(--line);
}
.brand {
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand span {
  color: var(--muted);
  font-weight: 400;
}
.account-actions,
.heading-actions,
.source-key {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}
.badge,
.source-mark {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--s1) var(--s2);
  border-radius: 999px;
  background: var(--wash);
  font-size: var(--small);
}
.synthetic-badge {
  font-weight: 650;
}
.content {
  padding-block: var(--s12);
}
.dashboard {
  display: grid;
  gap: var(--s6);
}
.overview {
  display: grid;
  min-width: 0;
  gap: var(--s6);
}
.signal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.signal-copy {
  display: grid;
  min-width: 0;
  gap: var(--s2);
}
.signal h2 {
  font-size: 24px;
  line-height: 1.35;
}
.signal[data-tone="warning"] {
  background: var(--warning-wash);
}
.overview-metrics {
  display: grid;
  min-width: 0;
  gap: var(--s3);
}
.overview-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
}
.overview-heading > div {
  display: grid;
  gap: var(--s1);
}
.overview-heading h2 {
  font-size: 22px;
}
.page-heading,
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
}
.page-heading > div:first-child {
  display: grid;
  gap: var(--s2);
}
.eyebrow {
  color: var(--muted);
  font-size: var(--small);
}
.muted,
.footnote,
.unknown-note {
  color: var(--muted);
  font-size: var(--small);
}
.panel {
  min-width: 0;
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
}
.notice {
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  background: var(--wash);
}

.freshness {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block: var(--s3);
  color: var(--muted);
  font-size: var(--small);
}

.freshness p,
.freshness ul {
  margin: 0;
}

.freshness-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--ink);
}

.freshness-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.freshness ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  list-style-position: inside;
  padding-inline-start: 0;
  flex-basis: 100%;
}
.notice[data-tone="warning"] {
  color: var(--warning);
  background: var(--warning-wash);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.kpi-card {
  display: grid;
  min-width: 0;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
}
.kpi-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1);
}
.kpi-heading h3 {
  margin: 0;
  font-size: var(--body);
}
.kpi-periods {
  display: grid;
  gap: var(--s1);
  margin: 0;
}
.period-value {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: baseline;
  gap: 0 var(--s1);
  padding-top: var(--s1);
  border-top: 1px solid var(--line);
}
.period-value dt {
  color: var(--muted);
  font-size: 13px;
}
.period-value dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 18px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}
.period-coverage {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}
.period-delta {
  grid-column: 1 / -1;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.period-delta[data-direction="good"] {
  color: var(--positive);
  font-weight: 650;
}
.period-delta[data-direction="bad"] {
  color: var(--negative);
  font-weight: 650;
}
.trend-panel {
  display: grid;
  min-width: 0;
  gap: var(--s3);
  margin: 0;
}
.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13px;
}
.trend-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}
.trend-legend i {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
}
.spend-key {
  background: var(--ink);
  opacity: 0.35;
}
.trend-legend .conversion-key {
  height: 3px;
  background: var(--focus);
}
.trend-chart-wrap {
  min-width: 0;
  padding-block: var(--s1);
  border-bottom: 1px solid var(--line);
}
.trend-scale {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.trend-chart {
  display: block;
  width: 100%;
  height: 180px;
  overflow: visible;
}
.chart-gridline {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.chart-spend-bar {
  fill: var(--ink);
  opacity: 0.28;
}
.chart-conversion-line {
  fill: none;
  stroke: var(--focus);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.chart-conversion-point {
  fill: var(--focus);
}
.chart-missing-mark {
  fill: none;
  stroke: var(--warning);
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}
.chart-today-mark {
  fill: var(--warning);
}
.trend-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.trend-selector-label {
  color: var(--muted);
  font-size: var(--small);
}
.trend-selector {
  width: 100%;
  min-height: 44px;
  padding-inline: 0;
  accent-color: var(--focus);
}
.trend-readout {
  display: block;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  background: var(--wash);
  font-variant-numeric: tabular-nums;
}
.metric {
  min-width: 0;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
}
.metric dt {
  color: var(--muted);
  font-size: var(--small);
}
.metric dd {
  margin: var(--s1) 0 0;
  font-size: 24px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.history-panel {
  display: grid;
  gap: var(--s4);
}
.section-heading {
  align-items: flex-start;
}
.section-heading > div {
  display: grid;
  gap: var(--s1);
}
.source-key {
  justify-content: flex-end;
}
.source-mark {
  border-radius: var(--radius);
  font-size: 13px;
}
.kpi-heading .source-mark {
  padding-inline: var(--s1);
  font-size: 12px;
  white-space: nowrap;
}
.provider-mark {
  background: var(--wash);
}
.computed-mark {
  background: transparent;
  border: 1px solid var(--line);
}
.source-note {
  max-width: 80ch;
}
.history-scroll {
  max-width: 100%;
  overflow-x: auto;
}
.group-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
}
.group-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 641px) {
  .group-table col:first-child {
    width: 42%;
  }
  .group-table col:not(:first-child) {
    width: 14.5%;
  }
}
:where(.group-table tbody th) {
  overflow-wrap: anywhere;
  font-weight: 550;
}
.group-table th,
.group-table td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}
:where(.group-table) th:first-child,
:where(.group-table) td:first-child {
  text-align: left;
}
.keyword-panel {
  display: grid;
  gap: var(--s4);
}
.keyword-filter-label {
  display: grid;
  max-width: 480px;
  gap: var(--s1);
}
.keyword-scroll {
  max-block-size: var(--collection-max);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.keyword-scroll:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.keyword-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
}
.keyword-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.keyword-table th,
.keyword-table td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}
:where(.keyword-table tbody th) {
  max-width: 280px;
  overflow-wrap: anywhere;
  text-align: left;
  font-weight: 550;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
}
.history-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.history-table th,
.history-table td {
  padding: var(--s2);
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}
.group-table thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--wash);
  font-weight: 680;
}
.history-table thead th {
  background: var(--wash);
  font-weight: 680;
}
.history-table thead th:first-child,
.history-table tbody th {
  text-align: left;
}
.history-table tbody th {
  white-space: nowrap;
}
.history-table tbody tr:last-child th,
.history-table tbody tr:last-child td {
  border-bottom: 0;
}
.unknown-note {
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.entity-panel {
  display: grid;
  gap: var(--s4);
}
.campaign-list {
  display: grid;
  gap: var(--s2);
}
.campaign-details {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.campaign-details > summary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: wrap;
  min-height: 44px;
  gap: var(--s2);
  padding: var(--s3) calc(var(--s4) + 1rem) var(--s3) var(--s4);
  cursor: pointer;
}
.campaign-alert {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius);
  background: var(--wash);
  font-size: 13px;
}
.campaign-alert[data-tone="warning"] {
  color: var(--warning);
  background: var(--warning-wash);
}
.campaign-sparkline {
  flex: 0 0 80px;
  width: 80px;
  height: 24px;
}
.campaign-sparkline polyline {
  fill: none;
  stroke: var(--focus);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.keyword-disclosure {
  display: grid;
  gap: var(--s3);
}
.keyword-disclosure > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 650;
}
.keyword-disclosure > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.overview-group-table col:first-child {
  width: 34%;
}
.overview-group-table col:not(:first-child) {
  width: 13.2%;
}
.overview-group-table td[data-tone="warning"] {
  color: var(--warning);
}
.campaign-details > summary::after {
  content: "▸";
  position: absolute;
  top: var(--s3);
  right: var(--s4);
  color: var(--muted);
  transition: transform 120ms ease;
}
.campaign-details[open] > summary::after {
  transform: rotate(90deg);
}
.campaign-details > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.campaign-summary-heading,
.campaign-summary-total {
  min-width: 0;
  width: 100%;
}
.campaign-summary-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}
.campaign-summary-total {
  color: var(--muted);
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
}
.group-scroll {
  max-block-size: var(--collection-max);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
}
.orphan-groups {
  padding: var(--s4);
  border-top: 1px solid var(--line);
}
.orphan-groups h3 {
  margin: 0 0 var(--s3);
  font-size: var(--body);
}
.campaign-empty {
  padding: var(--s4);
  color: var(--muted);
}
.footnote {
  padding-bottom: var(--s8);
}
.skip-link {
  position: absolute;
  z-index: 1;
  top: var(--s2);
  left: var(--s2);
  transform: translateY(-150%);
  padding: var(--s2);
  background: var(--surface);
}
.skip-link:focus {
  transform: translateY(0);
}
.login-panel,
.status-panel {
  max-width: 560px;
  margin-inline: auto;
  display: grid;
  gap: var(--s4);
}
.login-form {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s2);
}
.field {
  display: grid;
  gap: var(--s1);
  font-size: var(--small);
}
.field input {
  width: 100%;
}
.primary-button,
.primary-link {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
  font: inherit;
  font-weight: 650;
}
.primary-button:hover,
.primary-link:hover {
  background: var(--muted);
}
.quiet-button {
  min-width: 44px;
}
@media (max-width: 760px) {
  .shell {
    padding-inline: var(--s4);
  }
  .content {
    padding-block: var(--s8);
  }
  .page-heading,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .source-key {
    justify-content: flex-start;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .overview-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (min-width: 1200px) {
  .metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .history-table,
  .history-table tbody {
    display: block;
  }
  .history-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .history-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--line);
  }
  .history-table tbody tr:last-child {
    border-bottom: 0;
  }
  .history-table tbody th,
  .history-table tbody td {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
    padding: var(--s2);
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .history-table tbody th {
    grid-column: 1 / -1;
    border-radius: var(--radius);
    background: var(--wash);
  }
  .history-table tbody td::before {
    content: attr(data-label);
    color: var(--muted);
  }
  .group-table,
  .group-table tbody {
    display: block;
  }
  .group-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .group-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s1) var(--s2);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--line);
  }
  .group-table tbody th,
  .group-table tbody td {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
    padding: var(--s1);
    border: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .group-table tbody th {
    grid-column: 1 / -1;
  }
  .group-table tbody td::before {
    content: attr(data-label);
    color: var(--muted);
  }
  .campaign-details > summary {
    padding: var(--s3);
  }
  .masthead {
    min-height: 64px;
  }
  .heading-actions {
    width: 100%;
    justify-content: space-between;
  }
  .signal {
    align-items: flex-start;
    flex-direction: column;
  }
  .signal h2 {
    font-size: 20px;
  }
  .kpi-card {
    padding: var(--s2);
  }
  .kpi-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .period-value {
    grid-template-columns: minmax(0, 1fr);
  }
  .period-value dd,
  .period-delta {
    text-align: left;
  }
  .trend-chart {
    height: 150px;
  }
  .campaign-summary-heading {
    padding-right: var(--s6);
  }
  .campaign-sparkline {
    flex-basis: 64px;
    width: 64px;
  }
  .panel {
    padding: var(--s4);
  }
}
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}
[hidden] {
  display: none;
}
:where(.keyword-table thead th) {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--wash);
}

.dashboard-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--nav-w); padding: var(--s6) var(--s4); background: var(--surface); border-right: 1px solid var(--line); }
.sidebar-brand { display: grid; gap: var(--s1); margin-bottom: var(--s10); font-size: var(--fs-20); font-weight: 700; text-decoration: none; color: var(--brand-ink); }
.sidebar-brand span { font-size: var(--fs-13); font-weight: 400; color: var(--ink-soft); }
.dashboard-navigation { display: grid; gap: var(--s2); }
.dashboard-navigation a, .dashboard-navigation button { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: var(--s2) var(--s3); border-radius: var(--r-sm); text-decoration: none; font-size: var(--fs-14); }
.dashboard-navigation .active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 650; }
.dashboard-navigation button { text-align: left; border: 0; color: var(--planned); background: transparent; cursor: default; opacity: 1; }
.sidebar-note { margin-top: var(--s8); color: var(--ink-faint); font-size: var(--fs-12); }
.masthead { min-height: var(--topbar-h); background: var(--canvas); padding-inline: var(--s8); }
.content { padding-block: var(--s6); }
.has-dashboard .masthead, .has-dashboard .content { margin-inline-start: var(--nav-w); width: calc(100% - var(--nav-w)); max-width: none; }
.dashboard { gap: var(--s4); }
.page-heading { align-items: center; }
.page-heading h1 { font-size: var(--fs-26); }
.eyebrow { font-size: var(--fs-12); }
.panel, .kpi-card { box-shadow: var(--shadow-card); }
.notice { padding: var(--s2) var(--s3); font-size: var(--fs-13); }
.freshness { margin-block: 0; font-size: var(--fs-12); }
.overview { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s4); align-items: start; }
.signal, .overview-metrics { grid-column: 1 / -1; }
.signal { padding: var(--s4) var(--s5); gap: var(--s3); align-items: center; flex-direction: row; }
.signal-copy { flex: 1; min-width: 0; }
.signal h2 { font-size: var(--fs-20); line-height: 1.35; margin-bottom: var(--s1); }
.signal-symbol { display: grid; place-items: center; flex: 0 0 36px; height: 36px; font-size: var(--fs-26); font-weight: 750; }
.signal[data-tone="good"] { background: var(--sage-soft); color: var(--sage); }
.signal[data-tone="warning"] { background: var(--peach-soft); color: var(--peach); }
.signal[data-tone="danger"] { background: var(--danger-soft); color: var(--danger); }
.signal .eyebrow, .signal .muted { color: inherit; }
.overview-heading { margin-bottom: var(--s2); align-items: center; }
.overview-heading .eyebrow { display: none; }
.overview-heading h2 { font-size: var(--fs-16); }
.metric-period-tabs { display: flex; gap: var(--s1); }
.metric-period-tabs button { min-height: 44px; padding: var(--s2) var(--s3); font-size: var(--fs-13); }
.metric-period-tabs button[aria-pressed="true"] { background: var(--brand); color: var(--on-dark); border-color: var(--brand); }
.kpi-card { padding: var(--s4); border-radius: var(--r-md); background: var(--surface); }
.kpi-heading h3 { font-size: var(--fs-14); }
.kpi-periods { margin: 0; }
.period-value { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding: 0; border: 0; }
.period-value dt { color: var(--ink-soft); font-size: var(--fs-12); }
.period-value dd { font-size: var(--fs-32); line-height: 1.25; font-weight: 750; text-align: left; margin: 0; letter-spacing: -.035em; }
.period-delta { text-align: left; font-size: var(--fs-12); }
.period-coverage { font-size: var(--fs-12); }
.source-info { position: relative; color: var(--ink-soft); }
.source-info summary { cursor: pointer; list-style: none; min-height: 24px; min-width: 24px; text-align: center; font-size: var(--fs-13); }
.source-info[open] p, .data-explanation[open] > p { position: absolute; z-index: 3; inset-inline-end: 0; min-width: 240px; max-width: min(320px, 85vw); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); box-shadow: var(--shadow-lift); font-size: var(--fs-13); }
.data-explanation { position: relative; font-size: var(--fs-12); color: var(--ink-soft); }
.data-explanation summary, .trend-explanation summary { cursor: pointer; min-height: 24px; }
.data-explanation[open] > p { position: static; }
.trend-explanation { font-size: var(--fs-12); color: var(--ink-soft); }
.trend-panel { margin: 0; gap: var(--s2); padding: var(--s4); }
.trend-panel .section-heading { margin: 0; align-items: center; }
.trend-panel h2, .entity-panel h2 { font-size: var(--fs-16); }
.trend-panel .eyebrow { display: none; }
.trend-chart { height: 190px; }
.chart-spend-bar { fill: var(--brand-glow); opacity: .75; }
.chart-conversion-line, .campaign-sparkline polyline { stroke: var(--brand-deep); }
.chart-conversion-point { fill: var(--brand-deep); }
.trend-legend .conversion-key { background: var(--brand-deep); }
.trend-selector-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.trend-readout { min-height: 36px; padding: var(--s2); font-size: var(--fs-12); }
.entity-panel { gap: var(--s2); padding: var(--s4); }
.entity-panel .section-heading { margin: 0; align-items: center; }
.entity-panel .eyebrow { font-size: var(--fs-12); }
.campaign-list { max-block-size: calc(var(--s8) * 10); overflow-y: auto; overscroll-behavior: contain; }
.campaign-details > summary { padding: var(--s3); gap: var(--s2); }
.campaign-summary-heading { gap: var(--s2); }
.campaign-summary-heading strong { flex: 1; }
.campaign-alert { width: 100%; font-size: var(--fs-12); min-height: 24px; }
.campaign-summary-total { font-size: var(--fs-12); }
.campaign-sparkline { flex-basis: 64px; width: 64px; }
.planned-note { font-size: var(--fs-12); color: var(--planned); }
.planned-controls { display: flex; flex-wrap: wrap; gap: var(--s1); width: 100%; margin-top: var(--s1); }
.planned-controls button { min-height: 36px; font-size: var(--fs-12); padding: var(--s1) var(--s2); color: var(--planned); background: var(--neutral-soft); }
.group-table .planned-controls { font-weight: 400; }
.history-panel, .keyword-disclosure { display: block; padding: var(--s3) var(--s4); }
.history-panel > summary, .keyword-disclosure > summary { display: list-item; min-height: 36px; cursor: pointer; font-size: var(--fs-13); font-weight: 600; }
.history-panel[open] > :not(summary) { margin-top: var(--s3); }
.footnote { font-size: var(--fs-12); padding-bottom: var(--s2); }
.primary-button, .primary-link { background: var(--brand); border-color: var(--brand); color: var(--on-dark); }
.primary-button:hover, .primary-link:hover { background: var(--brand-deep); }
:focus-visible { outline-color: var(--brand); }
@media (max-width: 1100px) {
  .overview { grid-template-columns: minmax(0, 1fr); }
  .signal, .overview-metrics { grid-column: auto; }
}
@media (max-width: 760px) {
  .dashboard-sidebar { display: none; }
  .masthead { padding-inline: var(--s4); min-height: 56px; }
  .content { padding-block: var(--s5); }
  .has-dashboard .masthead, .has-dashboard .content { margin-inline-start: 0; width: 100%; }
  .page-heading { flex-direction: row; gap: var(--s2); }
  .page-heading h1 { font-size: var(--fs-20); }
  .heading-actions { width: auto; flex-direction: column; align-items: flex-end; gap: var(--s1); }
  .heading-actions button { min-height: 36px; font-size: var(--fs-12); padding: var(--s1) var(--s2); }
  .page-heading .eyebrow { max-width: 180px; }
  .signal { flex-direction: row; padding: var(--s3); }
  .signal-symbol { flex-basis: 24px; height: 28px; font-size: var(--fs-20); }
  .signal h2 { font-size: var(--fs-16); }
  .signal .muted { font-size: var(--fs-12); }
  .overview-heading { flex-direction: row; flex-wrap: wrap; }
  .metric-period-tabs button { min-height: 36px; font-size: var(--fs-12); padding: var(--s1) var(--s2); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .kpi-card { padding: var(--s3); }
  .kpi-heading { flex-direction: row; align-items: center; }
  .kpi-heading h3 { font-size: var(--fs-12); }
  .period-value dd { font-size: var(--fs-26); }
  .period-delta { font-size: var(--fs-12); }
  .trend-chart { height: 165px; }
  .trend-panel .section-heading { flex-direction: row; }
  .trend-legend { font-size: var(--fs-12); }
  .entity-panel .section-heading { flex-direction: row; }
}

/* B273 · 화면 확인 뒤 고침(1920×920 한 화면 · 44px · 숫자 단위 · 네이버 제공/우리 계산 표시) */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.overview-heading > .metric-period-tabs { display: flex; flex-wrap: nowrap; gap: var(--s1); }
.metric-period-tabs button, .heading-actions button, .planned-controls button { min-height: 44px; }
.source-info summary, .data-explanation summary { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
.source-info summary::-webkit-details-marker { display: none; }
.history-panel > summary, .keyword-disclosure > summary { min-height: 44px; display: flex; align-items: center; }
.history-panel > summary::before, .keyword-disclosure > summary::before { content: "▸"; margin-inline-end: var(--s2); color: var(--ink-soft); }
.history-panel[open] > summary::before, .keyword-disclosure[open] > summary::before { content: "▾"; }
.kpi-heading { gap: var(--s2); }
.kpi-heading h3 { flex: 1; min-width: 0; }
.source-tag { flex: none; padding: 0 var(--s2); border-radius: var(--r-pill); font-size: var(--fs-12); line-height: 22px; white-space: nowrap; }
.source-tag[data-source="provider"] { background: var(--brand-soft); color: var(--brand-ink); }
.source-tag[data-source="computed"] { border: 1px solid var(--line-strong); color: var(--ink-soft); line-height: 20px; }
.period-value dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.value-unit { margin-inline-start: 2px; font-size: .55em; font-weight: 650; letter-spacing: 0; }
.signal .eyebrow { display: none; }
.signal-copy { gap: 0; }
.page-heading > div:first-child { gap: 0; }
.page-heading .eyebrow { display: none; }
.trend-panel .section-heading { flex-direction: row; align-items: center; gap: var(--s2); }
.trend-panel .trend-legend { margin-inline-start: auto; }
@media (min-width: 1101px) {
  .masthead { min-height: 56px; }
  .content { padding-block: var(--s4); }
  .dashboard { gap: var(--s3); }
  .overview { gap: var(--s3); align-items: stretch; }
  .overview-heading { margin-bottom: 0; }
  .kpi-card { gap: var(--s2); padding: var(--s3) var(--s4); }
  .period-value dd { font-size: var(--fs-26); }
  .trend-chart { height: 160px; }
  /* 캠페인 칸은 옆 그림 칸 높이에 맞추고 넘치는 줄은 칸 안에서 스크롤한다. */
  .entity-panel { display: flex; flex-direction: column; height: 0; min-height: 100%; overflow: hidden; }
  .entity-panel .campaign-list { flex: 1 1 auto; min-height: 0; max-block-size: none; }
}
@media (max-width: 760px) {
  .heading-actions button, .metric-period-tabs button { min-height: 44px; }
  .metric-period-tabs { width: 100%; }
  .metric-period-tabs button { flex: 1; }
  .period-value dd { font-size: var(--fs-20); }
  .kpi-heading { flex-wrap: wrap; }
  .kpi-heading h3 { flex-basis: 100%; order: -1; }
  .trend-panel h2 { font-size: var(--fs-15); }
}
.period-value dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brand, .skip-link { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; }
@media (max-width: 760px) {
  .period-value dd { font-size: 22px; }
  .trend-panel .section-heading { flex-wrap: wrap; }
  .trend-panel .trend-legend { order: 3; flex-basis: 100%; margin-inline-start: 0; }
}

/* B273 · 어둠 모드: 통합관리 tokens.css 의 :root[data-color-mode="dark"] 값 그대로. 광고앱에는 보기 설정이 없어 기기 설정(prefers-color-scheme)을 따르고, data-color-mode 로도 고정할 수 있다. 배치·크기는 그대로, 색만 바꾼다. */
:root[data-color-mode="dark"] {
  color-scheme: dark;
  --canvas: #14191d;
  --canvas-deep: #0f1417;
  --surface: #1c2328;
  --surface-soft: #222a30;
  --ink: #e8ecee;
  --ink-soft: #b3bec5;
  --ink-faint: #9ba7ae;
  --line: #313b42;
  --line-strong: #6a7882;
  --line-input: #74828c; /* 표면 위 4.0:1 · 부드러운 표면 위 3.7:1 */
  --brand: #5fb4d3;
  --product-symbol-c: #ffffff;
  --product-symbol-accent: #f2a23a;
  --brand-deep: #8fd0e6;
  --brand-ink: #bfe6f2;
  --brand-soft: #173340;
  --brand-glow: #6cbccf;
  --logo-red: #e2605b;
  --danger: #f08a82;
  --danger-soft: #3a2020;
  --sage: #7cc9a4;
  --sage-soft: #17302a;
  --amber: #e3b25e;
  --amber-soft: #342913;
  --peach: #eaa27d;
  --peach-soft: #36241b;
  --lavender: #b8aee8;
  --lavender-soft: #272338;
  --planned: #9ba7ae;
  --neutral-soft: #262e34;
  --white: #ffffff;
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, .74);
  --on-dark-line: rgba(255, 255, 255, .16);
  --on-dark-fill: rgba(255, 255, 255, .08);
  --scrim: rgba(0, 0, 0, .6);
  --focus: rgba(95, 180, 211, .45);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-lift: 0 14px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, .6);
  --hero-grad: linear-gradient(135deg, #0f3447 0%, #164a63 55%, #1d5b76 100%);
  --on-accent: #0d1a20;
  --canvas-glass: rgba(20, 25, 29, .82);
  --canvas-veil: rgba(20, 25, 29, .72);
  --surface-glass: rgba(28, 35, 40, .96);
  --surface-hover: rgba(255, 255, 255, .05);
  --track: rgba(255, 255, 255, .1);
  --sheen: rgba(255, 255, 255, .05);
  --edge-shade: rgba(0, 0, 0, .5);
  --rose: #eaa0bd;
  --rose-soft: #3a2130;
  --mark: #6b5320;
  --well: #262e34;
  --checker-a: #20282e;
  --checker-b: #262e34;
  --stripe-a: #342913;
  --stripe-b: #2b220f;
  --bad-grad-a: #3a2020;
  --bad-grad-b: #222a30;
  --page-art-opacity: 0;
  --inverse: #2c363d;
  --on-light-ink: #0f3a51;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-color-mode="light"]) {
    color-scheme: dark;
    --canvas: #14191d;
    --canvas-deep: #0f1417;
    --surface: #1c2328;
    --surface-soft: #222a30;
    --ink: #e8ecee;
    --ink-soft: #b3bec5;
    --ink-faint: #9ba7ae;
    --line: #313b42;
    --line-strong: #6a7882;
    --line-input: #74828c; /* 표면 위 4.0:1 · 부드러운 표면 위 3.7:1 */
    --brand: #5fb4d3;
    --product-symbol-c: #ffffff;
    --product-symbol-accent: #f2a23a;
    --brand-deep: #8fd0e6;
    --brand-ink: #bfe6f2;
    --brand-soft: #173340;
    --brand-glow: #6cbccf;
    --logo-red: #e2605b;
    --danger: #f08a82;
    --danger-soft: #3a2020;
    --sage: #7cc9a4;
    --sage-soft: #17302a;
    --amber: #e3b25e;
    --amber-soft: #342913;
    --peach: #eaa27d;
    --peach-soft: #36241b;
    --lavender: #b8aee8;
    --lavender-soft: #272338;
    --planned: #9ba7ae;
    --neutral-soft: #262e34;
    --white: #ffffff;
    --on-dark: #ffffff;
    --on-dark-soft: rgba(255, 255, 255, .74);
    --on-dark-line: rgba(255, 255, 255, .16);
    --on-dark-fill: rgba(255, 255, 255, .08);
    --scrim: rgba(0, 0, 0, .6);
    --focus: rgba(95, 180, 211, .45);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-lift: 0 14px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-overlay: 0 24px 64px rgba(0, 0, 0, .6);
    --hero-grad: linear-gradient(135deg, #0f3447 0%, #164a63 55%, #1d5b76 100%);
    --on-accent: #0d1a20;
    --canvas-glass: rgba(20, 25, 29, .82);
    --canvas-veil: rgba(20, 25, 29, .72);
    --surface-glass: rgba(28, 35, 40, .96);
    --surface-hover: rgba(255, 255, 255, .05);
    --track: rgba(255, 255, 255, .1);
    --sheen: rgba(255, 255, 255, .05);
    --edge-shade: rgba(0, 0, 0, .5);
    --rose: #eaa0bd;
    --rose-soft: #3a2130;
    --mark: #6b5320;
    --well: #262e34;
    --checker-a: #20282e;
    --checker-b: #262e34;
    --stripe-a: #342913;
    --stripe-b: #2b220f;
    --bad-grad-a: #3a2020;
    --bad-grad-b: #222a30;
    --page-art-opacity: 0;
    --inverse: #2c363d;
    --on-light-ink: #0f3a51;
  }
}
/* 진한 바탕 단추 글자: 통합관리처럼 --on-accent(밝음 = 흰색 · 어둠 = 짙은 남색) */
.metric-period-tabs button[aria-pressed="true"], .primary-button, .primary-link { color: var(--on-accent); }

/* B273 후속 · 캠페인 줄은 「카드(이름·숫자·준비 중 단추) + 따로 펼치는 광고그룹 표」 — 단추가 summary 안에 들어가지 않는다. */
.campaign-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.campaign-card-head { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); }
.campaign-details { border: 0; border-radius: 0; background: transparent; }
.campaign-details > summary { flex-direction: row; align-items: center; flex-wrap: nowrap; min-height: 44px; gap: var(--s2); padding: 0 var(--s3); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-13); }
.campaign-card .campaign-details > summary::after { position: static; margin-left: auto; }
.campaign-summary-heading { padding-right: 0; }