/* 結婚シミュレーター
   配色はブランドパレット固定（spec §1.1）。
   アクセント #E0B57A はCTAのみ。カウンターの減少に警告色は使わない。 */

:root {
  --base:#F7F4EF;
  --main:#D8C2A8;
  --accent:#E0B57A;
  --text:#3F3A34;
  --line:#e6ded2;
  --muted:#8a8175;
  --white:#fff;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:var(--base);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  font-size:16px;
  line-height:1.8;
}

#app { max-width:640px; margin:0 auto; padding:0 20px 80px; }

h1, .ask { font-size:21px; font-weight:700; margin:28px 0 10px; letter-spacing:.02em; }

/* 画面1の冒頭だけに置くタイトル。名乗りであって誘いではないので、静かに置く */
.hero { margin:26px 0 26px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.app-title { font-size:23px; font-weight:700; margin:0 0 6px; letter-spacing:.02em; line-height:1.5; }
.app-sub { font-size:15px; color:var(--muted); margin:0; }
.app-note { font-size:12.5px; color:var(--muted); line-height:1.75; margin:12px 0 0; }
.hero + .ask { margin-top:0; }
.lead, .privacy { color:var(--muted); font-size:13.5px; margin:0 0 22px; }

/* ---- ステップナビ ---- */
.steps { display:flex; gap:5px; padding:20px 0 4px; }
.steps button {
  flex:1; font:inherit; font-size:12px; padding:8px 2px;
  background:transparent; color:var(--muted);
  border:none; border-bottom:2px solid var(--line);
  cursor:pointer; transition:color .2s, border-color .2s;
  white-space:nowrap;
}
.steps button.on { color:var(--text); border-bottom-color:var(--main); font-weight:600; }
/* 画面4を見るまで、画面5（出口）は開かない */
.steps button.locked { opacity:.4; cursor:default; }

/* ---- 積み上げ表示（画面3・4）---- */
.stack-row {
  display:flex; flex-direction:column; gap:8px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.stack-row:last-child { border-bottom:none; }
.stack-main { flex:1; min-width:0; }
.stack-label { font-size:13.5px; color:var(--muted); }
.stack-sub { font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.6; }
.stack-vals { text-align:right; white-space:nowrap; }
.stack-num {
  font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* ％と人数は同じ大きさで並べる */
/* ％と人数はそれぞれ1行（説明が横で潰れないように） */
.stack-vals .stack-num { display:block; font-size:22px; font-weight:700; color:var(--text); }
.stack-pct {
  display:block; font-size:22px; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1.4;
}
.stack-pct.male { color:#7F97B8; }
.stack-pct.female { color:#D89AA8; }
/* 比べるために添える一般値。主役の数字より一段落とす */
.stack-pct.muted-val { color:var(--muted); font-size:18px; font-weight:600; }
.card.stack { padding:8px 22px; }

.sub-h { font-size:16px; font-weight:700; margin:36px 0 4px; }

table.want { border-collapse:collapse; width:100%; font-size:14.5px; }
table.want th, table.want td { padding:10px 8px; border-bottom:1px solid var(--line); text-align:right; }
table.want th { font-size:12px; color:var(--muted); font-weight:600; background:var(--base); }
table.want th:first-child, table.want td:first-child { text-align:left; }
table.want td.strong { font-weight:700; }
/* それぞれの上位3つ（男性=#7F97B8／女性=#D89AA8。男女の判断基準の図解と同じ配色） */
table.want td.top { font-weight:700; }
table.want td.top.female { color:#D89AA8; background:rgba(216,154,168,.10); }
table.want td.top.male { color:#7F97B8; background:rgba(127,151,184,.12); }

.s5-note { font-size:12.5px; color:var(--muted); margin:16px 0 0; }

/* 「未婚男性のほうが多い」＝体感の反転。数字だけを置き、煽らない */
.ratio {
  font-size:14.5px; line-height:1.85; margin:0 0 6px;
  padding:14px 18px; border-radius:12px;
  /* コーポレートのメイン色を薄く敷く（濃いと主張が強すぎる） */
  background:rgba(216,194,168,.30);
}
.ratio strong { font-weight:700; }

/* ---- 画面5：出口 ---- */
.turn { font-size:15px; line-height:1.9; margin:28px 0 10px; }
.turn-sub { font-size:15px; line-height:1.95; margin:0 0 22px; }
.turn-sub strong, .body strong { font-weight:700; }
.body { font-size:15px; line-height:1.95; margin:0 0 12px; }
.body:last-child { margin-bottom:0; }
.want3-pct { font-style:normal; font-size:13px; color:var(--muted); font-weight:600; margin-left:auto; }
/* 画面5の小見出しは「問い」なので弱く、その下の答え（.turn-sub）を立たせる */
#screen-5 .sub-h { font-size:15px; font-weight:600; color:var(--muted); margin:44px 0 8px; }
#screen-5 .order { margin-top:36px; }

.fact {
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:16px 20px; margin-bottom:10px;
}
.fact-head { font-size:13px; font-weight:700; color:var(--muted); margin-bottom:2px; }
.fact p { margin:0; font-size:14.5px; line-height:1.85; }

.recall {
  font-size:15px; font-weight:600; margin:22px 0 0; padding:16px 20px;
  background:var(--main); border-radius:12px; line-height:1.8;
}

.order { margin:40px 0 0; }
.order-lead { font-size:15px; margin:0 0 12px; }
.order-steps { list-style:none; margin:0; padding:0; }
.order-steps li {
  display:flex; align-items:center; gap:12px;
  font-size:18px; font-weight:700; padding:13px 0;
  border-bottom:1px solid var(--line);
}
.order-steps li:last-child { border-bottom:none; }
.order-steps span {
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:var(--main); color:var(--text);
  font-size:14px; display:flex; align-items:center; justify-content:center;
}
.order-notes { margin:22px 0 0; }

.cta { margin:44px 0 0; text-align:center; }
.cta-lead { font-size:15.5px; line-height:1.85; margin:0 0 14px; text-align:left; }
.cta-lead:last-of-type { margin-bottom:22px; }
.cta-btn {
  display:block; text-decoration:none;
  background:var(--accent); color:var(--base);
  font-size:17px; font-weight:700; padding:17px 20px; border-radius:30px;
}

/* ---- カード ---- */
.card {
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:22px; margin-bottom:18px;
}

.field { margin-bottom:18px; }
.field:last-child { margin-bottom:0; }
label { display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; }

select {
  font:inherit; font-size:16px; width:100%;
  padding:11px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--base); color:var(--text);
}


/* ---- 条件 ---- */
.control { margin-bottom:24px; }
.control:last-child { margin-bottom:0; }
.control-head {
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; color:var(--muted); margin-bottom:8px;
}
.control-head b { font-size:15px; color:var(--text); font-weight:600; }

input[type=range] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:3px;
  background:var(--line); outline:none; margin:10px 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%;
  background:var(--main); border:3px solid var(--white);
  box-shadow:0 1px 4px rgba(63,58,52,.22); cursor:pointer;
}
input[type=range]::-moz-range-thumb {
  width:24px; height:24px; border-radius:50%;
  background:var(--main); border:3px solid var(--white);
  box-shadow:0 1px 4px rgba(63,58,52,.22); cursor:pointer;
}
/* 上限・下限を1本の帯にまとめる（つまみ2つ）。--lo/--hi は main.ts が入れる */
.dual { position:relative; height:34px; margin:10px 0; }
.dual::before, .dual::after { content:''; position:absolute; top:15px; height:4px; border-radius:3px; }
.dual::before { left:0; right:0; background:var(--line); }
.dual::after { left:var(--lo,0%); right:calc(100% - var(--hi,100%)); background:var(--main); }
.dual input[type=range] {
  position:absolute; top:0; left:0; width:100%; height:34px; margin:0;
  background:transparent;
  /* 帯全体で受けると下のつまみが掴めなくなるので、つまみだけ触れるようにする */
  pointer-events:none;
}
.dual input[type=range]::-webkit-slider-thumb { pointer-events:auto; }
.dual input[type=range]::-moz-range-thumb { pointer-events:auto; }
.dual input[type=range]::-moz-range-track { background:transparent; }

.toggles { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.toggles label {
  display:flex; align-items:center; gap:8px;
  font-size:15px; color:var(--text); margin:0; cursor:pointer;
}
.toggles input { width:19px; height:19px; accent-color:var(--main); }

/* ---- 内訳 ---- */
.breakdown-box {
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:14px 20px; margin-bottom:18px;
}
.breakdown-box summary { cursor:pointer; font-size:13.5px; color:var(--muted); }
.breakdown-box table { border-collapse:collapse; width:100%; margin-top:12px; font-size:14px; }
.breakdown-box td { padding:10px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.breakdown-box tr:last-child td { border-bottom:none; }
.bd-label { font-size:14px; }
.bd-note { font-size:12px; color:var(--muted); margin-top:2px; line-height:1.6; }
.bd-how {
  font-size:12.5px; color:var(--muted); line-height:1.8;
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line);
}
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.factor { text-align:right; color:var(--muted); font-size:12.5px; width:5.5em; }
.src { font-size:11.5px; color:var(--muted); margin:12px 0 2px; line-height:1.6; }

/* ---- 条件のコスト ---- */
.ela-row {
  display:flex; align-items:center; gap:14px;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; margin-bottom:10px;
}
.ela-main { flex:1; min-width:0; }
.ela-label { font-size:15px; font-weight:600; }
.ela-detail { font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.ela-mult { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ela-try {
  font:inherit; font-size:12.5px; padding:7px 12px; white-space:nowrap;
  background:var(--base); color:var(--text);
  border:1px solid var(--main); border-radius:20px; cursor:pointer;
}
.ela-try:hover { background:var(--main); }
.empty { color:var(--muted); font-size:14px; }

/* エリアは「相手に求める条件」ではないので、リストと分けて弱く置く */
.area-step { margin-top:32px; padding-top:22px; border-top:1px solid var(--line); }
.area-step h2 { font-size:15px; font-weight:600; margin:0 0 4px; }
.area-note { font-size:12.5px; color:var(--muted); margin:0 0 12px; }
.area-step .ela-row { background:transparent; border-style:dashed; }

/* ---- ボタン ---- */
button.primary, button.ghost {
  font:inherit; font-size:16px; padding:14px 20px;
  border-radius:28px; cursor:pointer; width:100%;
  line-height:1.5;  /* 2段になっても詰まらないように */
}
button.primary { background:var(--accent); color:var(--base); border:none; font-weight:600; }
button.ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
.row { display:flex; gap:10px; margin-top:22px; }
.row button.ghost { flex:0 0 34%; }
/* 1つしか無いときは幅いっぱい（文字が折り返さないように） */
.row button.ghost:only-child { flex:1 1 auto; }

/* ---- フッター ---- */
footer {
  margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted); line-height:1.75;
}
footer p { margin:4px 0; }

.error { padding:60px 0; text-align:center; color:var(--muted); }

@media (max-width:480px) {
  .counter #counter { font-size:38px; }
  #app { padding:0 16px 60px; }

  /* 長いボタンが3段に折れるので、狭い画面では縦積みにする
     （column-reverse で、主のボタンが上・「戻る」が下） */
  .row { flex-direction:column-reverse; }
  .row button.ghost { flex:1 1 auto; }

  /* 条件のコストは、狭い画面では2段に分ける
     （1段目＝条件名と人数、2段目＝倍率とボタン） */
  .ela-row { flex-wrap:wrap; row-gap:12px; gap:0 12px; }
  .ela-main { flex:1 1 100%; }
  .ela-detail { margin-top:2px; }
  .ela-try { margin-left:auto; }
}

/* ---------- シェア（画面5の出口だけ） ---------- */
.share{margin:26px auto 0;max-width:520px;text-align:center}
.share-lead{margin:0 0 10px;font-size:13px;color:#8A8175}
.share-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.share-btn{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  display:inline-block;padding:10px 16px;border-radius:999px;
  background:#fff;border:1px solid #D8C2A8;color:#3F3A34;
  font-size:13px;font-family:inherit;text-decoration:none;line-height:1.4;
}
.share-btn:hover{background:#F7F4EF}
@media(max-width:400px){ .share-btn{padding:9px 12px;font-size:12px} }