/* Cohort Analytics — Layout, Chrome, Components, and Print styles.
   Imports theme, upload, cohort, and responsive sub-modules. */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  background: var(--ux-page);
  color: var(--ux-ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 32px;
  overflow-x: hidden;
}

/* Theme Switcher Segmented Control */
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: var(--ux-surface-2);
  border: 1px solid var(--ux-line-2);
  border-radius: 24px;
  gap: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.theme-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  background: var(--ux-surface);
  border-radius: 20px;
  box-shadow: 0 2px 8px -1px var(--ux-shadow);
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.35, 1), width 0.28s cubic-bezier(0.25, 1, 0.35, 1);
  pointer-events: none;
  z-index: 1;
}

.theme-opt {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 20px;
  border: 0;
  background: transparent;
  color: var(--ux-ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
}

.theme-opt svg {
  opacity: 0.72;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.theme-opt:hover {
  color: var(--ux-ink);
}

.theme-opt:hover svg {
  opacity: 1;
  transform: scale(1.1);
}

.theme-opt.active {
  color: var(--ux-ink);
  font-weight: 600;
}

.theme-opt.active svg {
  opacity: 1;
  color: var(--ux-accent-2);
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 32px 0 4px;
}

.section-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ux-ink-2);
  margin: 0 0 12px;
}

/* Masthead */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--ux-line-2);
  margin-bottom: 8px;
}

.masthead h1 {
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

.masthead-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Tabs — one report per view */
.tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--ux-line-2);
  margin-top: 24px;
}

.tab {
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  color: var(--ux-ink-2);
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 10px 10px 0 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
}

.tab[aria-selected="true"] {
  color: var(--ux-ink);
  background: var(--ux-surface);
  border-color: var(--ux-line-2);
}

.tab:focus-visible { outline: 2px solid var(--ux-accent); outline-offset: 2px; }

.tabpanel[hidden] { display: none; }

/* Export Bar */
.export-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}

.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ux-surface);
  color: var(--ux-ink);
  border: 1px solid var(--ux-line-2);
  border-radius: 8px;
  min-height: 36px;
  padding: 0 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ux-ease);
}

.export-btn:hover {
  background: var(--ux-surface-2);
  border-color: var(--ux-accent-2);
  color: var(--ux-accent);
}

.export-btn svg {
  opacity: 0.75;
}

.export-scope {
  font-weight: 500;
  opacity: 0.75;
}

.export-status { font-size: 12px; color: var(--ux-ink-2); }

/* Footer */
.footer {
  margin-top: 56px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--ux-line-2);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ux-ink-2);
}

.footer a {
  color: var(--ux-ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color .2s, color .2s;
}

.footer a:hover { border-bottom-color: var(--ux-accent); color: var(--ux-accent); }
.footer a:focus-visible { outline: 2px solid var(--ux-accent); outline-offset: 3px; border-radius: 2px; }

.footer-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ux-ink-3);
  flex: none;
}

.print-header { display: none; }

/* Print Media — Optimized for A4 Black & White / Grayscale high-contrast printouts */
@media print {
  @page {
    size: A4 landscape;
    margin: 12mm 10mm;
  }

  :root {
    color-scheme: light;
    --ux-page: #FFFFFF;
    --ux-surface: #FFFFFF;
    --ux-surface-2: #F8F9FA;
    --ux-surface-3: #EEEEEE;
    --ux-ink: #000000;
    --ux-ink-2: #333333;
    --ux-ink-3: #666666;
    --ux-line: #CCCCCC;
    --ux-line-2: #999999;
    --ux-accent: #000000;
    --ux-accent-ink: #FFFFFF;
    --ux-heat: #333333;
  }

  /* Completely hide UI chrome from print */
  .upload, .upload-bespoke, .theme-toggle, .theme-switch, .tabs, .export-bar, .masthead, .footer,
  .dash-controls, .followup-toolbar, #export-followup-csv, .pagination-bar {
    display: none !important;
  }

  .page {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.3 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .print-header {
    display: block !important;
    margin-bottom: 14px;
    border-bottom: 2px solid #000000;
    padding-bottom: 8px;
  }

  .print-header h1 {
    font-size: 16pt !important;
    font-weight: bold;
    color: #000000 !important;
    margin: 0 0 4px !important;
    text-transform: none;
  }

  .print-header p {
    font-size: 10pt !important;
    color: #444444 !important;
    margin: 0 !important;
  }

  /* Pure B&W / High Contrast Tables for Printing */
  /* Pure B&W / High Contrast Tables for Printing & Photocopying */
  .u161 .cohort,
  .cohort {
    font-family: Arial, Helvetica, sans-serif !important;
    color: #000000 !important;
    background: #FFFFFF !important;
  }

  /* Row and Column Header Labels (e.g. Jan 2026, Feb 2026 / M0, M1...) */
  .u161 .cohort .label,
  .cohort .label {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 9.5pt !important;
    border: 1.5px solid #000000 !important;
    padding: 6px 4px !important;
    text-align: center !important;
    border-radius: 0 !important;
    position: static !important;
  }

  .u161 .cohort .week,
  .cohort .week {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 9.5pt !important;
    text-align: center !important;
  }

  .u161 .cohort button,
  .cohort button {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1.5px solid #000000 !important;
    border-radius: 0 !important;
  }

  .u161 .cohort button.high,
  .cohort button.high {
    background: #EAEAEA !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border: 2px solid #000000 !important;
  }

  .u161 .cohort button[aria-pressed="true"],
  .cohort button[aria-pressed="true"] {
    background: #FFFFFF !important;
    outline: 2px solid #000000 !important;
    color: #000000 !important;
    transform: none !important;
  }

  .cohort .n {
    color: #000000 !important;
    font-size: 9pt !important;
    font-weight: 700 !important;
  }

  .cohort .p {
    color: #000000 !important;
    font-size: 8pt !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }

  /* Result / Status panel below cohort table — fully black and readable */
  .u161 .status {
    border-top: 2px solid #000000 !important;
    color: #000000 !important;
    padding-top: 10px !important;
    margin-top: 14px !important;
    display: block !important;
  }

  .u161 .status *,
  .u161 .result-head,
  .u161 .result-note,
  .u161 .result-metric span,
  .u161 .result-metric b {
    color: #000000 !important;
    opacity: 1 !important;
  }

  .u161 .result-head {
    font-size: 11pt !important;
    font-weight: 700 !important;
  }

  .u161 .result-note {
    font-size: 9pt !important;
    color: #111111 !important;
  }

  .u161 .result-metric span {
    font-size: 8.5pt !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
  }

  .u161 .result-metric b {
    font-size: 13pt !important;
    font-weight: 700 !important;
  }

  /* Executive Dashboard - KPI Cards */
  .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .kpi-card {
    border: 1.5px solid #000000 !important;
    box-shadow: none !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    padding: 12px !important;
    break-inside: avoid !important;
  }

  .kpi-title {
    color: #000000 !important;
    font-size: 9.5pt !important;
    font-weight: 700 !important;
  }

  .kpi-value {
    color: #000000 !important;
    font-size: 18pt !important;
    font-weight: 800 !important;
  }

  .kpi-sub {
    color: #222222 !important;
    font-size: 8.5pt !important;
    font-weight: 500 !important;
    opacity: 1 !important;
  }

  .kpi-trend {
    border: 1px solid #000000 !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    font-weight: 700 !important;
  }

  .kpi-icon-badge {
    border: 1px solid #000000 !important;
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  /* Dashboard Section & Chart */
  .dashboard-section {
    border: 1.5px solid #000000 !important;
    box-shadow: none !important;
    background: #FFFFFF !important;
    padding: 14px !important;
    margin-bottom: 14px !important;
    break-inside: avoid !important;
  }

  .dash-heading {
    color: #000000 !important;
    font-size: 12pt !important;
    font-weight: 700 !important;
  }

  .dash-subheading {
    color: #222222 !important;
    font-size: 9pt !important;
  }

  .chart-viewport {
    height: 220px !important;
  }

  .retention-svg-chart {
    filter: none !important;
  }

  .chart-grid line {
    stroke: #888888 !important;
    stroke-dasharray: 2 2 !important;
  }

  .chart-axis-label {
    fill: #000000 !important;
    font-size: 9pt !important;
    font-weight: 700 !important;
  }

  .chart-line-path {
    stroke: #000000 !important;
    stroke-width: 3px !important;
  }

  .chart-area-path {
    fill: rgba(0, 0, 0, 0.08) !important;
  }

  .chart-data-dot {
    fill: #000000 !important;
    stroke: #000000 !important;
    r: 4.5 !important;
  }

  /* Inflow & Milestones Sub-cards */
  .dash-cohorts-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    break-inside: avoid !important;
  }

  .dash-sub-card {
    border: 1.5px solid #000000 !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    padding: 12px !important;
  }

  .dash-sub-card h3 {
    color: #000000 !important;
    font-size: 10.5pt !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #000000 !important;
    padding-bottom: 4px !important;
    margin-bottom: 8px !important;
  }

  .dash-list-item {
    border: 1px solid #666666 !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    padding: 6px 10px !important;
  }

  .dash-list-item .item-label,
  .dash-list-item .item-badge {
    color: #000000 !important;
    font-weight: 700 !important;
  }

  .dash-list-item .item-meta {
    color: #222222 !important;
  }

  .dash-prog-label {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 9pt !important;
  }

  .dash-prog-bar-bg {
    background: #FFFFFF !important;
    border: 1px solid #000000 !important;
    height: 10px !important;
  }

  .dash-prog-bar-fill {
    background: #000000 !important;
  }

  .dash-progress-row strong {
    color: #000000 !important;
    font-weight: 700 !important;
  }

  /* Followup table in print */
  .followup-table-container {
    border: 1.5px solid #000000 !important;
    box-shadow: none !important;
  }

  .followup-data-table {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9pt !important;
  }

  .followup-data-table th {
    background: #EAEAEA !important;
    color: #000000 !important;
    border-bottom: 2px solid #000000 !important;
    border-right: 1px solid #CCCCCC !important;
    text-align: center !important;
    padding: 6px 8px !important;
    font-weight: 700 !important;
  }

  .followup-data-table td {
    border-bottom: 1px solid #888888 !important;
    border-right: 1px solid #EEEEEE !important;
    color: #000000 !important;
    text-align: center !important;
    padding: 6px 8px !important;
  }

  .followup-data-table td strong {
    color: #000000 !important;
    font-weight: 700 !important;
  }

  .status-badge {
    border: 1px solid #000000 !important;
    background: transparent !important;
    color: #000000 !important;
    font-weight: 700 !important;
  }

  /* Category cards in print */
  .category-insights-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .cat-insight-card {
    border: 1.5px solid #000000 !important;
    box-shadow: none !important;
    break-inside: avoid !important;
    padding: 10px !important;
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  .cat-name, .cat-rate-badge {
    color: #000000 !important;
    font-weight: 700 !important;
  }

  .cat-rate-badge {
    border: 1.5px solid #000000 !important;
    background: transparent !important;
  }

  .cat-stat-line {
    color: #222222 !important;
  }

  .cat-stat-line strong {
    color: #000000 !important;
    font-weight: 700 !important;
  }

  .cat-progress-bg {
    border: 1px solid #000000 !important;
    background: #FFFFFF !important;
    height: 8px !important;
  }

  .cat-progress-fill {
    background: #000000 !important;
  }
}

/* Shared .ux base rules */
.ux, .ux *, .ux *::before, .ux *::after { box-sizing: border-box; }

.ux {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  color: var(--ux-ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
  overflow-wrap: break-word;
}

:where(.ux) :is(button, input, textarea, select) { font: inherit; color: inherit; }
:where(.ux) button { cursor: pointer; }
.ux :focus-visible { outline: 2px solid var(--ux-accent); outline-offset: 3px; }
.ux [hidden] { display: none !important; }
.ux ::selection { background: var(--ux-accent-soft); color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .ux, .ux *, .ux *::before, .ux *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}