:root{
  --bg:#FAFAF7;
  --fg:#1A1A1A;
  --muted:#6B6B6B;
  --line:#E3E0D8;
  --card:#FFFFFF;
  --accent:#C8102E;
  --accent-soft:#F6E7E8;
  --ink:#222;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.04);
  --serif:'Noto Serif JP','Yu Mincho',serif;
  --sans:'Noto Sans JP','Hiragino Sans','Yu Gothic UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121210;
    --fg:#ECECEC;
    --muted:#9A9A9A;
    --line:#2A2A27;
    --card:#1A1A18;
    --accent:#E85060;
    --accent-soft:#2A1618;
    --ink:#ECECEC;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--fg);
  line-height:1.7;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{
  max-width:780px;
  margin:0 auto;
  padding:48px 20px 80px;
}
.hero{text-align:center;padding:40px 0 32px;border-bottom:1px solid var(--line)}
.eyebrow{
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.3em;
  color:var(--accent);
  margin:0 0 12px;
  text-transform:uppercase;
}
.hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(28px,5vw,40px);
  margin:0 0 12px;
  letter-spacing:.08em;
}
.lede{color:var(--muted);font-size:14px;margin:0}

/* mode grid */
.mode-grid{display:grid;gap:16px;margin:40px 0}
@media (min-width:640px){ .mode-grid{grid-template-columns:1fr 1fr} }
.mode-card{
  display:block;
  position:relative;
  padding:28px 24px 72px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none;
  transition:.18s ease;
  box-shadow:var(--shadow);
}
.mode-card:hover{transform:translateY(-2px);border-color:var(--fg)}
.mode-index{
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--accent);
  display:block;
  margin-bottom:8px;
}
.mode-card h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:20px;
  margin:0 0 8px;
  letter-spacing:.04em;
}
.mode-card p{color:var(--muted);font-size:14px;margin:0}
.mode-arrow{
  position:absolute;
  right:24px;
  bottom:24px;
  font-size:20px;
  color:var(--accent);
}

/* form */
.form-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  margin-bottom:24px;
}
.form-card legend{
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.2em;
  color:var(--accent);
  padding:0 8px;
  background:var(--card);
}
.form-card h2{
  font-family:var(--serif);
  font-weight:500;
  margin:0 0 20px;
  font-size:18px;
  letter-spacing:.04em;
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;color:var(--muted);font-weight:500}
.field input[type=text],
.field input[type=date],
.field select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  padding:12px 14px;
  background:transparent;
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font:inherit;
  font-size:15px;
  transition:.15s;
}
.field input:focus,.field select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.radio-group{display:flex;gap:8px}
.radio-group label{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:14px;
  transition:.15s;
  color:var(--fg);
  background:transparent;
}
.radio-group input{position:absolute;opacity:0;pointer-events:none}
.radio-group input:checked + span{color:var(--accent);font-weight:700}
.radio-group label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}

.btn-row{display:flex;gap:12px;margin-top:24px}
.btn{
  flex:1;
  padding:14px;
  font:inherit;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:.15s;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.btn-ghost:hover{color:var(--fg);border-color:var(--fg)}
.note{color:var(--muted);font-size:12px;margin:6px 0 0}

.page-nav{margin-bottom:16px}
.page-nav a{
  color:var(--muted);
  font-size:13px;
  text-decoration:none;
  letter-spacing:.08em;
}
.page-nav a:hover{color:var(--accent)}

.foot{text-align:center;color:var(--muted);margin-top:40px}

/* result page */
.result-header{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.result-name{
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  margin:0;
  letter-spacing:.06em;
}
.result-meta{color:var(--muted);font-size:13px}
.section{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}
.section h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:14px;
  letter-spacing:.25em;
  color:var(--accent);
  margin:0 0 16px;
  padding-bottom:12px;
  border-bottom:1px dotted var(--line);
}
.kv{display:flex;gap:12px;font-size:14px;margin:4px 0}
.kv dt{color:var(--muted);min-width:80px}
.kv dd{margin:0;color:var(--fg)}
.tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:99px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:11px;
  letter-spacing:.1em;
  margin:0 4px 4px 0;
}
.timeline{
  display:grid;
  gap:4px;
  margin:12px 0 0;
}
.timeline-row{
  display:grid;
  grid-template-columns:80px 60px 1fr;
  gap:12px;
  padding:8px 0;
  border-bottom:1px dotted var(--line);
  font-size:13px;
  align-items:center;
}
.timeline-row:last-child{border:0}
.timeline-year{font-variant-numeric:tabular-nums;font-weight:600}
.timeline-age{color:var(--muted);font-size:12px}
.timeline-body{display:flex;flex-wrap:wrap;gap:4px}

/* グローバルフッター (ページ末) */
.page-foot{
  text-align:center;
  padding:24px 16px 48px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.05em;
  opacity:.7;
}
.page-foot small{font-family:var(--serif)}