@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  img, picture, video { display: block; max-width: 100%; }
  input, button, textarea { font: inherit; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --fg: #111418;
    --muted: #5b6573;
    --subtle: #f5f7fa;
    --line: #e3e7ee;
    --pri: oklch(58% 0.16 250);
    --pri-soft: color-mix(in oklch, var(--pri), white 88%);
    --pos: oklch(58% 0.14 150);
    --pos-soft: color-mix(in oklch, var(--pos), white 88%);
    --neg: oklch(58% 0.18 25);
    --neg-soft: color-mix(in oklch, var(--neg), white 88%);
    --warn: oklch(72% 0.14 70);
    --warn-soft: color-mix(in oklch, var(--warn), white 86%);
    --radius: 0.6rem;
    --radius-lg: 1rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --font-sans: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  }
}

@layer base {
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-sans);
    line-height: 1.65;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
  }
  main {
    max-width: 1080px;
    margin-inline: auto;
    padding: var(--space-5) var(--space-4) var(--space-6);
  }
  h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
  h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem); }
  h2 { font-size: 1.5rem; margin-top: var(--space-6); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--line); }
  h3 { font-size: 1.15rem; margin-top: var(--space-4); margin-bottom: var(--space-2); }
  p { margin-block: var(--space-2); }
  a { color: var(--pri); text-underline-offset: 2px; }
  ul, ol { padding-inline-start: 1.4rem; }
  li { margin-block: 0.25rem; }
  code { font-family: var(--font-mono); font-size: 0.92em; background: var(--subtle); padding: 0.1em 0.4em; border-radius: 0.3rem; }
  strong { font-weight: 700; }
}

@layer components {
  header.hero {
    padding: var(--space-5) var(--space-4);
    background: linear-gradient(135deg, var(--pri-soft), white 70%);
    border-bottom: 1px solid var(--line);
  }
  header.hero .inner {
    max-width: 1080px;
    margin-inline: auto;
  }
  header.hero .meta {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: var(--space-2);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  header.hero h1 { margin-bottom: var(--space-2); }
  header.hero .lede {
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 70ch;
  }

  .tldr {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--pri-soft);
    border-left: 4px solid var(--pri);
    border-radius: var(--radius);
  }
  .tldr h2 {
    margin: 0 0 var(--space-2);
    border: 0;
    padding: 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pri);
  }
  .tldr p { margin: 0; font-size: 1.05rem; }
  .tldr strong { color: var(--pri); }

  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-block: var(--space-4);
  }
  .stat {
    padding: var(--space-3);
    background: var(--subtle);
    border-radius: var(--radius);
    border: 1px solid var(--line);
  }
  .stat .label {
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .stat .value {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: var(--space-1);
    font-variant-numeric: tabular-nums;
  }
  .stat .sub {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: var(--space-1);
  }
  .stat .value.pos { color: var(--pos); }
  .stat .value.neg { color: var(--neg); }

  table {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    margin-block: var(--space-3);
  }
  thead { background: var(--subtle); }
  th, td {
    padding: 0.7rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  th { font-weight: 600; font-size: 0.92rem; color: var(--fg); }
  tbody tr:last-child td { border-bottom: 0; }
  td.num, th.num { text-align: right; }
  td.rank { font-weight: 700; }

  .rank-row.r1 { background: color-mix(in oklch, var(--pos-soft), white 30%); }
  .rank-row.r1 td.rank { color: var(--pos); }

  .badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
  }
  .badge.buy { background: var(--pos-soft); color: var(--pos); }
  .badge.hold { background: var(--warn-soft); color: oklch(45% 0.14 70); }
  .badge.sell { background: var(--neg-soft); color: var(--neg); }
  .badge.trim { background: var(--pri-soft); color: var(--pri); }

  .option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
    margin-block: var(--space-4);
  }
  .option-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    background: white;
  }
  .option-card.winner {
    border-color: var(--pos);
    border-width: 2px;
    background: color-mix(in oklch, var(--pos-soft), white 50%);
  }
  .option-card h3 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .option-card .score {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--pri);
    font-variant-numeric: tabular-nums;
  }
  .option-card.winner .score { color: var(--pos); }

  @scope (.pros-cons) {
    :scope {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
      margin-top: var(--space-2);
    }
    h4 {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: var(--space-1);
    }
    .pros h4 { color: var(--pos); }
    .cons h4 { color: var(--neg); }
    ul { padding-inline-start: 1.1rem; font-size: 0.92rem; }
  }

  details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    margin-block: var(--space-2);
    background: var(--subtle);
  }
  details[open] { background: white; }
  summary {
    cursor: pointer;
    font-weight: 600;
    padding: var(--space-1) 0;
  }
  details ul { margin-top: var(--space-2); }

  .matrix-table th:first-child,
  .matrix-table td:first-child { text-align: left; min-width: 12ch; }
  .matrix-table th.num, .matrix-table td.num { text-align: right; }
  .matrix-table .weight {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 400;
  }
  .matrix-table tfoot td {
    font-weight: 700;
    background: var(--subtle);
    border-top: 2px solid var(--line);
  }
  .matrix-table tfoot td.win { color: var(--pos); }

  .verdict {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--pos-soft), white 80%);
    border: 1px solid var(--pos);
    border-radius: var(--radius-lg);
  }
  .verdict h2 { border: 0; margin-top: 0; color: var(--pos); }
  .verdict p { font-size: 1.05rem; }

  .scenarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin-block: var(--space-3);
  }
  .scenario {
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid var(--line);
  }
  .scenario.bull { background: var(--pos-soft); }
  .scenario.base { background: var(--subtle); }
  .scenario.bear { background: var(--neg-soft); }
  .scenario h4 { margin-top: 0; }

  footer.sources {
    margin-top: var(--space-6);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.88rem;
  }
  footer.sources ol { padding-inline-start: 1.4rem; }
  footer.sources a { word-break: break-all; }
}

@layer utilities {
  .container { max-width: 1080px; margin-inline: auto; }
  .muted { color: var(--muted); }
  .small { font-size: 0.9rem; }
  .nowrap { white-space: nowrap; }
}

@container (max-width: 600px) {
  .pros-cons { grid-template-columns: 1fr; }
}