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

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; }
  body, h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
}

@layer base {
  :root {
    --bg: #fafafa;
    --surface: #ffffff;
    --ink: #1a1a1a;
    --ink-soft: #555;
    --ink-muted: #888;
    --line: #e5e5e5;
    --line-soft: #f0f0f0;
    --accent: #c2410c;
    --accent-soft: #fff7ed;
    --good: #16a34a;
    --warn: #d97706;
    --bad: #dc2626;
    --top-bg: #fef3c7;
    --top-border: #f59e0b;
    --radius: 8px;
    --shadow: 0 1px 3px rgb(0 0 0 / 0.05), 0 1px 2px rgb(0 0 0 / 0.08);
    --font-sans: -apple-system, BlinkMacSystemFont, "Pretendard", "SF Pro Text", system-ui, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  code { font-family: var(--font-mono); font-size: 0.92em; background: var(--accent-soft); padding: 1px 5px; border-radius: 4px; color: var(--accent); }
  em { font-style: normal; color: var(--accent); font-weight: 600; }
  strong { color: var(--ink); font-weight: 600; }
}

@layer layout {
  main {
    max-width: 980px;
    margin-inline: auto;
    padding: 48px 24px 80px;
    container-type: inline-size;
  }
  section { margin-block-start: 56px; }
  section > h2 {
    font-size: 22px;
    font-weight: 700;
    margin-block-end: 20px;
    padding-block-end: 10px;
    border-block-end: 2px solid var(--ink);
  }
}

@layer components {
  /* Hero */
  .hero { padding-block-end: 8px; }
  .eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent);
    margin-block-end: 12px;
  }
  .hero h1 {
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .lede {
    margin-block-start: 14px;
    font-size: 16px;
    color: var(--ink-soft);
    max-width: 70ch;
  }
  .winner {
    display: flex; gap: 20px; align-items: center;
    background: var(--accent-soft);
    border: 1px solid #fed7aa;
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-block-start: 28px;
  }
  .winner .rank {
    font-size: 24px; font-weight: 800;
    color: var(--accent);
    background: white;
    border-radius: 6px;
    padding: 6px 12px;
    font-feature-settings: "tnum";
  }
  .winner h2 { font-size: 18px; font-weight: 700; border: none; padding: 0; margin: 0; }
  .winner p { font-size: 14px; color: var(--ink-soft); margin-block-start: 4px; }

  /* Situation */
  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .grid-2 > div {
    padding: 14px 18px;
    border-block-end: 1px solid var(--line-soft);
    border-inline-end: 1px solid var(--line-soft);
  }
  .grid-2 > div:nth-child(2n) { border-inline-end: none; }
  .grid-2 > div:nth-last-child(-n+2) { border-block-end: none; }
  .grid-2 dt { font-size: 12px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-block-end: 4px; }
  .grid-2 dd { font-size: 14px; color: var(--ink); }

  /* Table */
  .caption { font-size: 13px; color: var(--ink-muted); margin-block-end: 12px; }
  .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  thead th {
    background: var(--line-soft);
    text-align: center;
    padding: 12px 10px;
    font-weight: 700;
    font-size: 13px;
    border-block-end: 1px solid var(--line);
    color: var(--ink);
  }
  thead th small { font-weight: 500; color: var(--ink-muted); font-size: 11px; }
  thead th:nth-child(2) { text-align: left; }
  tbody td {
    padding: 12px 10px;
    text-align: center;
    border-block-end: 1px solid var(--line-soft);
    font-feature-settings: "tnum";
  }
  tbody td:nth-child(2) { text-align: left; }
  tbody tr:last-child td { border-block-end: none; }
  tr.top { background: var(--top-bg); }
  tr.top td { font-weight: 600; }
  tr.top td:last-child { color: var(--accent); font-size: 16px; }

  /* Options */
  .opt {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-block-end: 16px;
  }
  .opt-1 { border-color: var(--top-border); background: linear-gradient(180deg, #fffbeb 0%, var(--surface) 30%); }
  .opt h3 { font-size: 17px; font-weight: 700; margin-block-end: 14px; }
  .pros-cons {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  }
  .pros-cons h4 {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; margin-block-end: 8px;
  }
  .pros-cons > div:first-child h4 { color: var(--good); }
  .pros-cons > div:last-child h4 { color: var(--bad); }
  .pros-cons ul li {
    font-size: 14px; line-height: 1.55;
    padding-inline-start: 14px;
    position: relative;
    margin-block-end: 6px;
  }
  .pros-cons ul li::before {
    content: "·"; position: absolute; inset-inline-start: 4px; color: var(--ink-muted);
  }

  /* Recommend */
  .steps { counter-reset: step; display: flex; flex-direction: column; gap: 18px; }
  .steps li {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 22px;
    position: relative;
  }
  .steps li h3 { font-size: 15px; font-weight: 700; color: var(--accent); margin-block-end: 10px; }
  .steps ul li {
    background: transparent; border: none; padding: 0 0 0 14px; position: relative;
    margin-block-end: 6px; font-size: 14px;
  }
  .steps ul li::before { content: "▸"; position: absolute; inset-inline-start: 0; color: var(--accent); font-size: 12px; }

  /* Caveats */
  .caveats ul { display: flex; flex-direction: column; gap: 10px; }
  .caveats ul li {
    background: #fef2f2; border-inline-start: 3px solid var(--bad);
    padding: 12px 16px; border-radius: 4px; font-size: 14px;
  }

  footer { margin-block-start: 64px; padding-block-start: 24px; border-block-start: 1px solid var(--line); color: var(--ink-muted); font-size: 12px; text-align: center; }
}

@container (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2 > div { border-inline-end: none; }
  .grid-2 > div:nth-last-child(2) { border-block-end: 1px solid var(--line-soft); }
  .pros-cons { grid-template-columns: 1fr; gap: 16px; }
  .winner { flex-direction: column; align-items: flex-start; }
}