/* product.css — 4つのプロダクトで共通に使う骨格
   色・書体・余白は tokens.css のトークンだけを参照する（DESIGN.md 参照）。 */

/* ── ヘッダ ───────────────────────────────── */
.topbar { border-bottom: 1px solid var(--rule); }
.topbar-in { max-width: var(--page); margin: 0 auto; padding: var(--sp-3) var(--sp-5); display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.topbar .mark { font-family: var(--font-serif); font-size: var(--fs-3); color: var(--accent-deep); }
.topbar .back {
  margin-left: auto; font-size: var(--fs-2);
  padding: var(--sp-2) 0;            /* タップ領域を24px以上に */
  display: inline-flex; align-items: center; min-height: 24px;
}

/* ── ヒーロー ─────────────────────────────── */
.hero { padding: var(--sp-9) 0 var(--sp-7); border-bottom: 1px solid var(--rule); }
.hero h1 { font-size: var(--fs-8); line-height: 1.2; margin-bottom: var(--sp-5); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { font-size: var(--fs-5); line-height: 1.9; max-width: 34em; margin: 0 0 var(--sp-4); }
.hero .sub { font-size: var(--fs-3); color: var(--ink-mute); max-width: 40em; margin: 0; }

/* ── タブ ─────────────────────────────────── */
.tabs { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--rule-strong); }
.tabs-in { max-width: var(--page); margin: 0 auto; padding: 0 var(--sp-5); display: flex; gap: var(--sp-6); overflow-x: auto; }
.tabs button {
  font: inherit; font-family: var(--font-sans); font-size: var(--fs-3); background: none; border: 0;
  color: var(--ink-mute); padding: var(--sp-4) 0; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--accent); }
.tabs button[aria-selected="true"] { color: var(--accent-deep); border-bottom-color: var(--accent); font-weight: 600; }
.panel { display: none; padding: var(--sp-8) 0 var(--sp-10); }
.panel.on { display: block; }

/* ── ステップ ─────────────────────────────── */
.step { border-top: 1px solid var(--rule); padding: var(--sp-7) 0; }
.step:first-of-type { border-top: 0; padding-top: var(--sp-2); }
.step h2 { font-size: var(--fs-6); margin-bottom: var(--sp-3); }
.step h2 .n { font-family: var(--font-sans); font-size: var(--fs-2); color: var(--accent); letter-spacing: .12em; display: block; margin-bottom: var(--sp-2); font-weight: 600; }
.step .why { font-size: var(--fs-2); color: var(--ink-mute); max-width: 42em; line-height: 1.85; margin: 0 0 var(--sp-5); }
.step .why strong { color: var(--ink); }
.sub-h { font-size: var(--fs-5); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rule-strong); }

/* ── フォーム ─────────────────────────────── */
label.f { display: block; margin-bottom: var(--sp-4); max-width: 44em; }
label.f .lab { display: block; font-size: var(--fs-2); font-weight: 600; margin-bottom: var(--sp-2); }
label.f .hint { display: block; font-size: var(--fs-1); color: var(--ink-mute); margin-bottom: var(--sp-2); line-height: 1.7; }
input.t, textarea.t, select.t {
  font: inherit; font-family: var(--font-sans); font-size: var(--fs-3); width: 100%;
  padding: var(--sp-3); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); line-height: 1.8;
}
textarea.t { min-height: 5.5em; resize: vertical; }
input.t:focus, textarea.t:focus, select.t:focus { border-color: var(--accent); outline: none; }
input[type=checkbox], input[type=radio] {
  accent-color: var(--accent);
  width: 20px; height: 20px;        /* 既定の13pxは小さすぎる。ラベル全体も当たり判定になる */
  flex: none; cursor: pointer;
}

.btn {
  font: inherit; font-family: var(--font-sans); font-size: var(--fs-3);
  padding: var(--sp-3) var(--sp-5); border: 1px solid var(--accent); background: var(--accent);
  color: var(--ink-on-accent); border-radius: var(--radius); cursor: pointer;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn.ghost { background: none; color: var(--accent); }
.btn.ghost:hover { background: var(--accent-weak); color: var(--accent-deep); }
.btn.quiet { background: none; color: var(--ink-mute); border-color: var(--rule-strong); }
.btn.quiet:hover { color: var(--risk); border-color: var(--risk); background: none; }

.saved { font-size: var(--fs-1); color: var(--ok); margin-left: var(--sp-3); opacity: 0; transition: opacity .3s; }
.saved.on { opacity: 1; }

/* ── 結論ブロック ─────────────────────────── */
.verdict-note { margin-top: var(--sp-8); padding: var(--sp-6); background: var(--bg-warm); border-left: 2px solid var(--accent); max-width: 52em; }
.verdict-note p:last-child { margin: 0; font-size: var(--fs-3); line-height: 1.9; }

footer { border-top: 1px solid var(--rule-strong); background: var(--bg-sunk); padding: var(--sp-7) 0 var(--sp-9); font-size: var(--fs-2); color: var(--ink-mute); }