/* top.css — トップ（製品窓がエンジン・白ベース）
   2026-09-02 Takeshi: 「ダークではなく白ベースで。削りすぎて何をすべきか分からないので、直感的に理解できる導線を」
   世界はサイト既存の光の系（kabau-ui.css の 藍・紙・墨・Shippori Mincho／Noto Sans JP）を継承する。
   トップだけが黒だったのが外れ値で、記事・パック・ギャップボードは全てこの世界で組まれている。
   CSP: style-src 'self'（インライン不可）・font-src 'self'（自己ホストのみ。fonts.css）。 */
:root {
  --sumi: #211F1C;
  --sumi-2: #4B463E;
  --sumi-3: #6B6456;
  --ai: #165E83;
  --ai-deep: #0F4362;
  --ai-wash: #EDF3F6;
  --kami: #F7F4EC;
  --shiro: #FFFFFF;
  --keisen: #E2DCCE;
  --keisen-2: #CFC7B4;
  --tokiwa: #10714C;
  --shu: #B94047;
  --radius: 4px;
  --font-display: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
  --font-body: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--shiro); }
body {
  background: var(--shiro);
  color: var(--sumi);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ai); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--sumi); color: #fff; padding: 8px 12px; border-radius: var(--radius); z-index: 50; }

.wrap { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }

/* ── header（サイト共通の nav と同じ声） ─────────────────────────── */
header {
  min-height: 60px; padding: 8px 0;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--keisen);
  background: rgba(255,255,255,.92);
  position: sticky; top: 0; z-index: 20;
}
.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .02em; color: var(--ai); white-space: nowrap; flex: 0 0 auto; }
.nav-links { flex: 1 1 auto; min-width: 0; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 16px; color: var(--sumi-2); font-size: 13.5px; }
.nav-links a:hover { color: var(--ai); }
.pill {
  background: var(--ai); color: #fff;
  border: 0; border-radius: var(--radius);
  padding: 8px 14px; font-size: 13px; font-weight: 700;
}
.pill:hover { background: var(--ai-deep); }

/* ── hero（見出しは指示の文。その下に「何が出るか」の約束） ─────── */
.hero { padding: 40px 0 20px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.32;
  letter-spacing: .01em;
  color: var(--sumi);
}
.hero .lead {
  margin-top: 12px;
  max-width: 44em;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--sumi-2);
}
.hero .lead strong { color: var(--sumi); font-weight: 700; }

/* ── 手順（順序そのものが情報なので番号を付ける） ─────────────── */
.steps {
  list-style: none;
  margin: 18px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 12px 14px 12px 46px;
  border: 1px solid var(--keisen);
  border-radius: var(--radius);
  background: var(--kami);
  font-size: 14px; line-height: 1.6;
  color: var(--sumi);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 14px; top: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ai); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}
.step small { display: block; color: var(--sumi-3); font-size: 12.5px; margin-top: 2px; }
.step.is-now { border-color: var(--ai); box-shadow: inset 0 0 0 1px var(--ai); background: var(--ai-wash); }
.step.is-done::before { background: var(--tokiwa); }

/* ── 製品窓（エンジン） ─────────────────────────────────────── */
.stage {
  margin: 14px auto 48px;
  border: 1px solid var(--keisen-2);
  border-radius: var(--radius);
  background: var(--shiro);
  border-color: var(--ai);
  box-shadow: none;
  overflow: hidden;
  display: grid;
  grid-template-columns: 300px 1fr;
}
.rail {
  border-right: 1px solid var(--keisen);
  background: var(--kami);
  padding: 22px 18px 18px;
}
.rail-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--sumi); margin-bottom: 4px; }
.rail-sub { font-size: 12.5px; color: var(--sumi-3); margin-bottom: 12px; line-height: 1.6; }
.q { margin-bottom: 12px; }
.q h3 { font-size: 13px; color: var(--sumi-2); font-weight: 700; margin-bottom: 8px; }
.q h3 .n { display: inline-block; min-width: 1.6em; color: var(--ai); }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt {
  flex: 1 1 auto; min-height: 44px;
  background: var(--shiro); color: var(--sumi);
  border: 1px solid var(--keisen-2); border-radius: var(--radius);
  padding: 9px 12px; font-size: 14px; text-align: center;
}
.opt:hover { border-color: var(--ai); }
.opt[aria-pressed="true"] {
  background: var(--ai); color: #fff; border-color: var(--ai);
  font-weight: 700;
}
.q-help { font-size: 12px; color: var(--sumi-3); margin-top: 4px; line-height: 1.5; }
.go {
  display: block; width: 100%;
  margin-top: 6px; min-height: 50px;
  background: var(--ai); color: #fff; border: 0;
  border-radius: var(--radius); padding: 12px 16px;
  font-size: 15px; font-weight: 700; letter-spacing: .03em;
}
.go:not([disabled]):hover { background: var(--ai-deep); }
.go[disabled] { background: var(--ai-wash); color: var(--ai); border: 1px solid var(--ai); cursor: default; }
.go-note { font-size: 12px; color: var(--sumi-3); margin-top: 8px; text-align: center; }
.go-row { padding: 6px 4px 0; }
.go.go-main { width: auto; min-width: 280px; margin-top: 8px; }
@media (max-width: 860px) { .go.go-main { width: 100%; } }

.main { padding: 22px 26px 26px; display: flex; flex-direction: column; min-width: 0; }
.main-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--keisen);
  color: var(--sumi-3); font-size: 13px;
}
.main-bar b { color: var(--sumi); font-weight: 700; }
.state { padding: 3px 10px; border-radius: var(--radius); background: var(--kami); border: 1px solid var(--keisen); white-space: nowrap; }
.state.is-ready { background: var(--ai-wash); border-color: var(--ai); color: var(--ai); }
.state.is-done { background: #EDF5F0; border-color: var(--tokiwa); color: var(--tokiwa); }

/* 空状態＝「押すと何が出るか」を先に見せる */
.empty { flex: 1; padding: 18px 4px 8px; }
.empty h2 { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--sumi); line-height: 1.5; }
.empty p { color: var(--sumi-2); font-size: 14px; margin-top: 6px; }
.preview { margin-top: 12px; display: grid; gap: 6px; }
.preview li {
  list-style: none;
  display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline;
  padding: 8px 12px; border: 1px dashed var(--keisen-2); border-radius: var(--radius);
  font-size: 13.5px; color: var(--sumi-2);
}
.preview li b { color: var(--ai); font-weight: 700; font-size: 13px; }
.preview li span { display: block; }

.result { margin-top: 14px; }
.result section { padding: 14px 0 16px; border-top: 1px solid var(--keisen); }
.result section:first-child { border-top: 0; padding-top: 6px; }
.result h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--sumi); margin-bottom: 8px; }
.result pre { white-space: pre-wrap; font-family: var(--font-body); font-size: 14px; line-height: 1.85; color: var(--sumi); font-variant-numeric: tabular-nums; }
.result .cond { font-size: 13px; color: var(--sumi-3); margin-bottom: 6px; }
.result .tail { font-size: 12.5px; color: var(--sumi-3); padding-top: 12px; border-top: 1px solid var(--keisen); }
@media (prefers-reduced-motion: no-preference) { .result:not([hidden]) { animation: rise .32s cubic-bezier(.2,.8,.2,1) both; } }
.out {
  display: none;
  margin-top: 16px;
  white-space: pre-wrap;
  font-family: var(--font-body);
  font-size: 13.5px; line-height: 1.85;
  color: var(--sumi);
  background: var(--kami);
  border: 1px solid var(--keisen);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.out.is-on { display: block; }

.after { display: none; margin-top: 14px; }
.after.is-on { display: block; }
.after-promise { font-size: 13.5px; line-height: 1.8; color: var(--sumi); margin: 0 0 10px; padding: 10px 12px; background: var(--ai-wash); border-radius: var(--radius); }
.after-promise[hidden] { display: none; }
.after-label { font-size: 13px; font-weight: 700; color: var(--sumi); margin-bottom: 6px; }
.after-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share { margin: 0 0 14px; }
.share[hidden] { display: none; }
.share-row input {
  flex: 1 1 240px; min-height: 46px;
  background: var(--kami); color: var(--sumi);
  /* 記入欄の枠は記入欄罫（3.17:1）。罫線2（1.68:1）は WCAG 1.4.11 の 3:1 に届かず、
     公開前ゲートで配布が止まっていた（2026-09-15・DESIGN.md の input-border）。 */
  border: 1px solid var(--input-border, #9A9078); border-radius: var(--radius);
  padding: 10px 12px; font-size: 13px;
}

/* /r/{id} 結果ページ（page-result.js） */
.r-page-main { padding: 28px 0 64px; }
.r-page-kicker { margin: 0 0 8px; font-size: 13px; color: var(--sumi-3); }
.r-page-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; color: var(--sumi); line-height: 1.5; margin: 0 0 16px;
}
.r-page-lead { margin: 0 0 20px; color: var(--sumi-2); line-height: 1.8; }
.r-page-body { white-space: pre-wrap; word-break: break-word; }
.r-page-cta { display: inline-flex; text-decoration: none; }
.r-page-again { margin-top: 20px; }
.r-page-again a { color: var(--ai); }

.after input {
  flex: 1 1 240px; min-height: 46px;
  background: var(--shiro); color: var(--sumi);
  border: 1px solid #9A9078; border-radius: var(--radius);
  padding: 10px 12px; font-size: 14px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 16px;
  border-radius: var(--radius); font-size: 14px; font-weight: 700;
  border: 1px solid var(--ai); background: var(--ai); color: #fff;
}
.btn:hover { background: var(--ai-deep); border-color: var(--ai-deep); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.ghost { background: var(--shiro); color: var(--ai); }
.btn.ghost:hover { background: var(--ai-wash); }
.msg { margin-top: 8px; font-size: 13px; color: var(--sumi-2); min-height: 1.2em; }
.msg.ok { color: var(--tokiwa); }
.msg.ng { color: var(--shu); }
.fine { margin-top: 10px; font-size: 12px; color: var(--sumi-3); line-height: 1.7; }
.fine a { color: var(--ai); text-decoration: underline; text-underline-offset: 2px; }

/* ブラウザ面もパレットから: placeholder・caret・scrollbar */
.after input::placeholder { color: var(--sumi-3); opacity: 1; }
input, textarea { caret-color: var(--ai); }
html { scrollbar-color: var(--keisen-2) var(--shiro); }
.result-note { margin-top: 12px; font-size: 12.5px; color: var(--sumi-3); }

/* 次の一手（結果の後にだけ出す。パックは二次） */
.next { display: none; margin-top: 18px; gap: 10px; grid-template-columns: 1fr 1fr; }
.next.is-on { display: grid; }
.next a {
  display: block; padding: 14px 16px;
  border: 1px solid var(--keisen-2); border-radius: var(--radius);
  background: var(--shiro); color: var(--sumi);
}
.next a:hover { border-color: var(--ai); background: var(--ai-wash); }
.next b { display: block; font-weight: 700; color: var(--ai); font-size: 14px; }
.next span { display: block; font-size: 12.5px; color: var(--sumi-2); margin-top: 3px; line-height: 1.6; }

/* ── 今の状況から選ぶ（二次導線） ──────────────────────────── */
.paths { padding: 0 0 56px; }
.paths h2, .about h2 { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--sumi); margin-bottom: 14px; }
.start-paths { border-top: 1px solid var(--keisen); }
.start-path {
  display: grid; grid-template-columns: 260px 1fr; gap: 6px 24px; align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid var(--keisen);
  color: var(--ai); font-size: 15px; font-weight: 700;
}
.start-path:hover { background: var(--ai-wash); }
.start-path-sub { display: block; color: var(--sumi-2); font-size: 13px; font-weight: 400; line-height: 1.6; }

/* ── このページでできること ───────────────────────────────── */
.about { padding: 0 0 56px; }
.about dl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 24px; }
.about dt { font-weight: 700; color: var(--sumi); font-size: 14px; }
.about dd { color: var(--sumi-2); font-size: 14px; line-height: 1.75; margin-top: 4px; }
.about dd a { color: var(--ai); text-decoration: underline; text-underline-offset: 2px; }

footer {
  border-top: 1px solid var(--keisen);
  padding: 24px 0 44px;
  color: var(--sumi-3);
  font-size: 12.5px; line-height: 1.8;
}
footer .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--sumi-2); }
footer a:hover { color: var(--ai); }
.foot-note { margin-top: 10px; }
.foot-note a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
  .nav-links { gap: 6px 10px; font-size: 12px; }
  .brand { font-size: 16px; }
  .hero { padding: 40px 0 20px; }
  .steps { grid-template-columns: 1fr; gap: 6px; }
  .stage { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: 1px solid var(--keisen); }
  .opt { flex: 1 1 45%; }
  .main { padding: 18px 16px 20px; }
  .preview li { grid-template-columns: 1fr; gap: 2px; }
  .next { grid-template-columns: 1fr; }
  .start-path { grid-template-columns: 1fr; gap: 2px; }
  .about dl { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .out.is-on { animation: rise .32s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media print {
  header, .hero, .rail, .after, .msg, .fine, .next, .paths, .about, footer, .empty, .main-bar, .out { display: none !important; }
  .stage { border: 0; box-shadow: none; display: block; }
  .result { display: block; max-height: none; background: #fff; color: #000; border: 0; padding: 0; font-size: 10.5pt; }
  @page { size: A4; margin: 18mm; }
}