/* ===== Design Kit v1 (tokens) ===== */
:root{
  /* colors */
  --bg:#0b1020;            /* page background tint for hero areas */
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#0f172a;
  --muted:#475569;
  --border:#e5e7eb;
  --accent:#2563eb;        /* ← Web Appのプライマリに合わせて後で変更OK */
  --accent-ink:#ffffff;

  /* radius & shadow */
  --radii:16px;
  --shadow:0 6px 24px rgba(2,8,23,.08),0 2px 8px rgba(2,8,23,.06);

  /* spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* typography */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --fs-1:clamp(2.2rem,1.2rem + 2.8vw,3.6rem); /* h1 */
  --fs-2:clamp(1.6rem,1rem + 1.6vw,2.2rem);   /* h2 */
  --fs-3:clamp(1.2rem,.9rem + .8vw,1.4rem);   /* h3 */
  --fs-body:1rem;
  --lh:1.7;
}

@media (prefers-color-scheme: dark){
  :root{
    --surface:#0b1020;
    --surface-2:#0f172a;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --border:#1f2937;
    --shadow:0 8px 28px rgba(0,0,0,.35);
  }
}

/* ===== base ===== */
html{scroll-behavior:smooth}
body{font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh); color:var(--text); background:#fff}
img{max-width:100%; height:auto}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
::selection{background:rgba(37,99,235,.18)}

/* container & sections */
.container{max-width:1100px; margin:0 auto; padding:0 var(--s-5)}
.section{padding:var(--s-6) 0}
.section-tight{padding:var(--s-6) 0}
.section-title{font-size:var(--fs-2); margin-bottom:var(--s-5)}
.subtle{color:var(--muted)}

/* headings */
h1{font-size:var(--fs-1); letter-spacing:-.01em; line-height:1.15; margin:0 0 var(--s-4)}
h2{font-size:var(--fs-2); letter-spacing:-.01em; margin:var(--s-7) 0 var(--s-4)}
h3{font-size:var(--fs-3); margin:var(--s-5) 0 var(--s-3)}

/* hero */
.hero{
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(1200px 600px at -10% -10%, rgba(99,102,241,.12), transparent 60%),
    var(--surface);
  padding:var(--s-9) 0 var(--s-7);
  border-bottom:1px solid var(--border);
}
.hero .lead{font-size:1.125rem; color:var(--muted); max-width:64ch}
.hero .actions{display:flex; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-5)}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; height:44px; padding:0 18px; border-radius:9999px;
  font-weight:600; text-decoration:none; border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow)}
.btn-primary:hover{text-decoration:none; filter:saturate(1.1)}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text)}
.btn-ghost:hover{background:var(--surface-2); text-decoration:none}

/* cards */
.grid{display:grid; gap:var(--s-5)}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:960px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid.cols-3{grid-template-columns:1fr}}
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radii); padding:var(--s-5); box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px)}

/* badges / meta */
.badge{display:inline-block; padding:4px 10px; border-radius:9999px; background:var(--surface-2); border:1px solid var(--border); color:var(--muted); font-size:.875rem}

/* sticky header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px);
  background:color-mix(in srgb, var(--surface) 80%, transparent); border-bottom:1px solid var(--border);
}
.site-nav{display:flex; gap:18px; align-items:center; height:60px}
.site-nav a{color:var(--text); font-weight:600}
.site-nav a[rel~="external"]::after{content:"↗"; margin-left:6px; opacity:.6}

/* footer / disclaimer */
.medical-disclaimer{margin:var(--s-6) 0 var(--s-4); padding:.75rem 1rem; border-top:1px solid var(--border); opacity:.9}

/* article prose (軽量版) */
.prose{color:var(--text); font-size:1.05rem}
.prose p{margin:1em 0}
.prose blockquote{margin:1.25em 0; padding:.75em 1em; background:var(--surface-2); border-left:3px solid var(--accent)}
.prose img{border-radius:12px}
.prose figure{margin:1.25em 0}
.prose figcaption{color:var(--muted); font-size:.9rem; margin-top:.5em}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}