:root { --fg:#2b2118; --muted:#7a6a55; --bg:#faf6ef; --accent:#9a5b2f; --up:#b3502e; --down:#3f7d4f; --line:#e6dccb; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Hiragino Sans", sans-serif; color:var(--fg); background:var(--bg); line-height:1.6; }
header, main, footer { max-width: 720px; margin: 0 auto; padding: 16px; }
.layout { display: grid; gap: 18px; }
h1 { font-size: 1.4rem; margin: 8px 0 0; }
.note { color: var(--muted); font-size: .85rem; }
.hero { display: flex; align-items: center; gap: 14px; }
.hero h1 { margin: 0; font-size: 1.3rem; }
.brand-link { flex: none; display: inline-flex; line-height: 0; }
.hero-logo { width: 76px; height: 76px; display: block; }
@media (max-width: 759px) { .hero-logo { width: 60px; height: 60px; } .hero h1 { font-size: 1.15rem; } }
form { display:grid; gap:14px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
form > label { display:grid; gap:4px; font-weight:600; font-size:.9rem; }
select { padding:8px; font-size:1rem; border:1px solid var(--line); border-radius:8px; background:#fff; }
fieldset { border:none; padding:0; margin:0; }
legend { font-weight:600; font-size:.9rem; margin-bottom:4px; }
.seg { display:inline-flex; align-items:center; gap:4px; margin:2px 8px 2px 0; font-weight:400; font-size:.92rem; }
.result { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; position:sticky; top:8px; z-index:10; box-shadow:0 6px 18px rgba(43,33,24,.06); }
.result h2 { margin:0 0 .3em; }

/* Desktop: two columns, result pinned beside the form */
@media (min-width: 760px) {
  header, main, footer { max-width: 960px; }
  .layout { grid-template-columns: 1fr 340px; align-items: start; }
}

/* Mobile: result pinned to the top as a full-bleed bar so the price is always visible */
@media (max-width: 759px) {
  .layout { display:flex; flex-direction:column; gap:14px; }
  .result { order:-1; top:0; margin:0 -16px; border-radius:0 0 12px 12px; padding:12px 16px; }
  .result h2 { font-size:1rem; }
  .result .price { font-size:1.35rem; }
  .result .sub { margin:.15em 0 .55em; }
}
.price { font-size:1.6rem; font-weight:700; color:var(--accent); margin:.2em 0; }
.price .ref { font-size:.8rem; color:var(--muted); }
.sub { color:var(--muted); font-size:.9rem; margin:.2em 0 1em; }
.factors { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.chip { font-size:.82rem; padding:3px 10px; border-radius:999px; border:1px solid var(--line); }
.chip.wood { background:#f1e9da; }
.chip.up { color:#fff; background:var(--up); }
.chip.down { color:#fff; background:var(--down); }
.ship { font-size:.9rem; color:var(--muted); }
.tools ul { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.tools a { display:inline-block; padding:8px 14px; border:1px solid var(--accent); border-radius:8px; color:var(--accent); text-decoration:none; }
.basis { margin-top:16px; font-size:.9rem; color:var(--muted); }
footer { color:var(--muted); font-size:.8rem; border-top:1px solid var(--line); margin-top:24px; }