/* ============================================================
   NTT-YG speed test — original design, 4-metric card layout
   ============================================================ */
:root {
  --bg:        oklch(98.4% 0.004 250);
  --bg-soft:   oklch(96% 0.006 250);
  --surface:   oklch(100% 0 0);
  --ink:       oklch(22% 0.02 255);
  --ink-soft:  oklch(44% 0.02 255);
  --line:      oklch(89% 0.01 255);
  --navy:      oklch(34% 0.09 255);
  --navy-deep: oklch(26% 0.08 258);
  --accent:    oklch(64% 0.16 35);
  --accent-ink:oklch(45% 0.16 32);
  --ok:        oklch(62% 0.16 150);
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Zen Kaku Gothic New", system-ui, -apple-system, "Noto Sans JP", sans-serif;
  --radius: 18px;
  --dur: 320ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 2px oklch(22% 0.02 255 / 0.06), 0 4px 14px oklch(22% 0.02 255 / 0.06);
  --shadow-lg: 0 10px 30px oklch(26% 0.08 258 / 0.12), 0 30px 60px oklch(26% 0.08 258 / 0.10);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink); line-height: 1.7;
  background:
    radial-gradient(120% 70% at 50% -10%, oklch(94% 0.03 255 / 0.7), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(820px, 92vw); margin-inline: auto; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); font-weight: 900; letter-spacing: -0.02em; margin: 0.4rem 0 0.6rem; }
a { color: inherit; }
.eyebrow {
  font-family: var(--serif); font-size: 0.8rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin: 0;
}

/* header */
.st-header {
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px);
  background: oklch(98.4% 0.004 250 / 0.8); border-bottom: 1px solid var(--line);
}
.st-header-inner { display: flex; align-items: center; gap: 1rem; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 900; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--navy-deep); color: oklch(97% 0.03 80); font-family: var(--serif); font-size: 0.8rem; }
.brand-text { font-size: 1.1rem; }
.brand-text em { font-style: normal; color: var(--accent-ink); }
.back-link { margin-left: auto; font-size: 0.92rem; color: var(--ink-soft); text-decoration: none; transition: color var(--dur) var(--ease); }
.back-link:hover { color: var(--accent-ink); }

/* main */
.st-main { padding: clamp(2rem, 1rem + 4vw, 3.5rem) 0 3rem; text-align: center; }
.st-intro { max-width: 52ch; margin-inline: auto; }
.lead { color: var(--ink-soft); font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem); margin: 0; }

/* results: DOWNLOAD/UPLOAD large (top), PING/JITTER small (bottom) */
.results {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: 2.4rem auto 1.8rem; max-width: 640px;
}
.rcard {
  position: relative; display: grid; gap: 0.2rem; justify-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1rem; text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.rcard--sm { padding: 1.1rem 1rem; }
.rcard[data-live] { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.rcard[data-done] { border-color: oklch(80% 0.06 150); }
.rc-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-soft); }
.rc-icon { color: var(--accent-ink); font-weight: 900; }
.rc-value {
  font-family: var(--serif); font-weight: 900; color: var(--navy-deep);
  font-variant-numeric: tabular-nums; line-height: 1.05; margin-top: 0.2rem;
}
.rcard--lg .rc-value { font-size: clamp(2.6rem, 1.8rem + 4vw, 3.6rem); }
.rcard--sm .rc-value { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem); }
.rcard[data-live] .rc-value { color: var(--accent-ink); }
.rc-unit { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; }
.rc-status { font-size: 0.74rem; color: var(--accent-ink); min-height: 1.1em; letter-spacing: 0.04em; }
.rcard[data-done] .rc-status { color: var(--ok); }

/* start button */
.btn-start {
  appearance: none; border: 0; cursor: pointer; font-family: var(--sans);
  font-weight: 800; font-size: 1.1rem; color: oklch(99% 0 0);
  background: var(--accent); padding: 1em 3em; border-radius: 999px;
  box-shadow: 0 10px 26px oklch(64% 0.16 35 / 0.38);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-start:hover { transform: translateY(-2px); box-shadow: 0 14px 34px oklch(64% 0.16 35 / 0.48); }
.btn-start:active { transform: translateY(0); }
.btn-start:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.btn-start[disabled] { background: var(--navy); opacity: 0.6; cursor: progress; box-shadow: none; transform: none; }

/* note + footer */
.st-note { max-width: 56ch; margin: 1.6rem auto 0; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.7; }
.st-footer { border-top: 1px solid var(--line); padding: 1.6rem 0; margin-top: 2.4rem; text-align: center; }
.st-footer small { color: var(--ink-soft); font-size: 0.82rem; }
.st-footer a { color: var(--accent-ink); }

@media (max-width: 520px) {
  .rcard--lg .rc-value { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rcard, .btn-start { transition: none; }
}