/* ボドゲ選びナビ — 方針は plan_b_site/DESIGN.md */
:root {
  --bg:#FAF6EE; --surface:#FFFFFF; --surface-2:#F1EADC;
  --ink:#26221E; --ink-2:#5C554D; --line:#E3DACB;
  --brand:#1E6F63; --brand-soft:#DDEEE9; --accent:#D9822B; --accent-soft:#FBEBD6;
  --shadow:0 1px 2px rgba(38,34,30,.06);
  --r:12px; --r-pill:999px;
  --font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","YuGothic","Meiryo",sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.9; font-size:16px; font-feature-settings:"palt"; }
a { color:var(--brand); text-underline-offset:.2em; }
a:hover { color:#155a50; }
img { max-width:100%; height:auto; }
.wrap { max-width:1040px; margin:0 auto; padding:0 16px; }
.wrap.narrow { max-width:720px; }
.skip { position:absolute; left:-999px; top:8px; background:var(--brand); color:#fff; padding:8px 12px; border-radius:var(--r-pill); }
.skip:focus { left:8px; z-index:10; }
.sp { display:none; }

/* header */
.site-header { background:var(--surface); border-bottom:1px solid var(--line); }
.header-row { display:flex; align-items:baseline; gap:16px; padding:14px 16px; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:700; font-size:1.2rem; letter-spacing:.02em; }
.brand-mark { width:28px; height:28px; fill:var(--brand); flex:none; align-self:center; }
.tagline { margin:0; color:var(--ink-2); font-size:.85rem; }
.scene-nav { border-top:1px solid var(--line); background:var(--surface); }
.scene-nav ul { list-style:none; margin:0; padding:8px 0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.scene-nav ul::-webkit-scrollbar { display:none; }
.scene-nav a { display:inline-block; white-space:nowrap; padding:6px 14px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:.9rem; background:var(--surface); }
.scene-nav a:hover { background:var(--brand-soft); border-color:var(--brand-soft); color:var(--brand); }

/* hero */
.hero { background:linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%); padding:40px 0 32px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 8px; color:var(--accent); font-weight:700; font-size:.85rem; letter-spacing:.08em; }
.hero h1 { margin:0 0 12px; font-size:clamp(1.7rem, 4.5vw, 2.5rem); line-height:1.35; letter-spacing:.01em; }
.lead { margin:0 0 28px; color:var(--ink-2); max-width:38em; }
.scene-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.scene-card { display:flex; flex-direction:column; gap:2px; padding:14px 14px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:var(--ink); box-shadow:var(--shadow); min-height:104px; transition:transform .12s ease, border-color .12s ease; }
.scene-card:hover { transform:translateY(-2px); border-color:var(--brand); color:var(--ink); }
.scene-label { font-weight:700; font-size:1.05rem; color:var(--brand); }
.scene-desc { font-size:.82rem; color:var(--ink-2); line-height:1.5; flex:1; }
.scene-count { font-size:.78rem; color:var(--ink-2); margin-top:6px; }

/* sections & cards */
.section { padding:40px 16px 0; }
.section:last-of-type { padding-bottom:56px; }
.section-title { font-size:1.3rem; margin:0 0 16px; padding-left:.6em; border-left:4px solid var(--brand); line-height:1.4; }
.section-title small { display:block; font-size:.8rem; font-weight:400; color:var(--ink-2); }
.card-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 14px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; }
.card-title { font-weight:700; color:var(--ink); text-decoration:none; line-height:1.55; font-size:1.02rem; }
.card-title:hover { color:var(--brand); }
.card-desc { margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta { margin:auto 0 0; color:var(--ink-2); font-size:.8rem; padding-top:6px; }
.chip { display:inline-block; align-self:flex-start; padding:2px 10px; border-radius:var(--r-pill); background:var(--accent-soft); color:#8a4e0f; font-size:.75rem; font-weight:700; letter-spacing:.02em; }

/* post */
.breadcrumb { font-size:.82rem; color:var(--ink-2); padding:16px 0 0; }
.breadcrumb a { color:var(--ink-2); }
.post { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px 20px 28px; margin-top:12px; box-shadow:var(--shadow); }
.post-header h1 { font-size:clamp(1.4rem, 4vw, 1.9rem); line-height:1.45; margin:10px 0 10px; letter-spacing:.01em; }
.ad-pill { display:inline-block; margin:0; padding:2px 10px; border-radius:var(--r-pill); background:var(--accent-soft); color:#8a4e0f; font-size:.72rem; }
.meta { margin:0 0 8px; color:var(--ink-2); font-size:.85rem; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.toc { background:var(--surface-2); border-radius:var(--r); padding:14px 18px; margin:20px 0 8px; }
.toc-title { margin:0 0 4px; font-weight:700; font-size:.9rem; }
.toc ol { margin:0; padding-left:1.4em; font-size:.92rem; line-height:1.9; }
.toc a { color:var(--ink); text-decoration:none; }
.toc a:hover { color:var(--brand); text-decoration:underline; }
.post-body { font-size:1rem; }
.post-body > p { margin:1.2em 0; }
.post-body h2 { font-size:1.3rem; line-height:1.45; margin:2.4em 0 .8em; padding-left:.6em; border-left:4px solid var(--brand); }
.post-body h3 { font-size:1.1rem; margin:1.8em 0 .5em; }
.post-body ul, .post-body ol { padding-left:1.5em; }
.post-body li { margin:.3em 0; }
.post-body strong { font-weight:700; }
.post-body blockquote { margin:1.4em 0; padding:12px 16px; background:var(--surface-2); border-left:4px solid var(--accent); border-radius:0 var(--r) var(--r) 0; color:var(--ink); }
.post-body blockquote p { margin:.3em 0; }
.post-body hr { border:0; border-top:1px solid var(--line); margin:2.4em 0; }
.table-wrap { overflow-x:auto; margin:1.4em 0; border:1px solid var(--line); border-radius:var(--r); -webkit-overflow-scrolling:touch; }
.post-body table { border-collapse:collapse; width:100%; font-size:.88rem; line-height:1.6; min-width:520px; }
.post-body th, .post-body td { border-bottom:1px solid var(--line); padding:.6em .8em; text-align:left; vertical-align:top; }
.post-body th { background:var(--surface-2); font-weight:700; white-space:nowrap; }
.post-body tr:last-child td { border-bottom:0; }
.post-body td:first-child, .post-body th:first-child { position:sticky; left:0; background:var(--surface); font-weight:700; box-shadow:1px 0 0 var(--line); }
.post-body th:first-child { background:var(--surface-2); }
.buy-links { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:.6em 0 1.8em; }
.buy-name { font-size:.85rem; color:var(--ink-2); margin-right:4px; }
.buy-links a { display:inline-block; padding:.45em 1.1em; border-radius:var(--r-pill); text-decoration:none; font-size:.88rem; font-weight:700; border:1px solid; line-height:1.4; }
.buy-links .rakuten { background:#FBECEC; border-color:#D9A3A3; color:#8B1A1A; }
.buy-links .rakuten:hover { background:#F6DADA; }
.buy-links .amazon { background:#FFF4E0; border-color:#E8C184; color:#7A4A00; }
.buy-links .amazon:hover { background:#FBE9C8; }
.post-note { margin:2em 0 0; padding-top:1em; border-top:1px solid var(--line); color:var(--ink-2); font-size:.82rem; }
.related { margin-top:40px; }
.back { margin:28px 0 56px; }

/* footer */
.site-footer { border-top:1px solid var(--line); background:var(--surface); padding:28px 0 36px; color:var(--ink-2); font-size:.82rem; line-height:1.8; }
.disclosure { margin:0 0 10px; }
.footer-links { margin:0 0 6px; }
.footer-links a { color:var(--ink-2); }
.copy { margin:0; }

@media (min-width: 1000px) {
  .scene-grid { grid-template-columns:repeat(7, 1fr); }
  .scene-label { font-size:1rem; }
}
@media (max-width: 600px) {
  .sp { display:inline; }
  .header-row { gap:4px 12px; padding:12px 16px; }
  .tagline { font-size:.78rem; }
  .hero { padding:28px 0 24px; }
  .scene-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .scene-card { min-height:92px; padding:12px; }
  .scene-grid li:last-child:nth-child(odd) { grid-column:span 2; }
  .scene-label { font-size:1rem; }
  .section { padding-top:32px; }
  .post { padding:20px 16px 24px; border-radius:10px; }
  .card-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .scene-card { transition:none; } }