:root { --bg:#faf7f2; --ink:#2b2622; --muted:#8a8178; --line:#e4ddd3; --accent:#b5793f;
  --birchA:#ead3a8; --birchB:#d9b47c; --key:#9c6232; --ok:#3d8b4f; --bad:#b33a3a; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { display:flex; align-items:center; gap:24px; padding:10px 18px; border-bottom:1px solid var(--line); background:#fff; }
.brand { font-weight:700; font-size:18px; } .brand span { color:var(--accent); }
nav a { margin-right:14px; color:var(--muted); text-decoration:none; padding:4px 2px; }
nav a.active { color:var(--ink); border-bottom:2px solid var(--accent); }
.meta { margin-left:auto; color:var(--muted); font-size:12px; }
.meta .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); margin-right:6px; }
main { height: calc(100% - 50px); }
.tab { display:none; height:100%; } .tab.active { display:flex; }
#tab-overview { padding:18px; overflow:auto; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:16px; width:100%; align-content:start; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.card.wide { grid-column: 1 / -1; }
.story { font-size:16px; line-height:1.6; padding:22px 28px; }
.story > * { max-width: 760px; margin-left:auto; margin-right:auto; }
.story h2 { font-size:20px; margin:28px auto 8px; }
.story h3, .card.story h3 { text-transform:none; letter-spacing:normal; font-size:17px; color:inherit; margin:22px auto 6px; }
.story img { display:block; width:100%; max-width:860px; height:auto; margin:18px auto; border-radius:8px; }
.story li { margin:4px 0; }
.card h3 { margin:0 0 10px; font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.ok { color:var(--ok); } .bad { color:var(--bad); }
aside { width:290px; flex:none; overflow:auto; border-right:1px solid var(--line); background:#fff; padding:10px; }
.opt { border:1px solid var(--line); border-radius:8px; padding:8px; margin-bottom:8px; cursor:pointer; background:#fff; }
.opt:hover { border-color:var(--accent); } .opt.active { border-color:var(--accent); box-shadow:0 0 0 2px #b5793f33; }
.opt .name { font-weight:600; } .opt .label { color:var(--muted); font-size:12px; }
.opt .stats { font-size:11px; color:var(--muted); margin-top:4px; }
.badge { display:inline-block; font-size:10px; padding:1px 6px; border-radius:8px; background:var(--accent); color:#fff; margin-left:6px; vertical-align:middle; }
.badge.warn { background:#c9a227; }
.thumb svg { width:100%; height:auto; display:block; } .thumb.big svg { max-height:340px; }
.viewer-wrap { flex:1; display:flex; flex-direction:column; min-width:0; }
.toolbar { display:flex; align-items:center; gap:10px; padding:6px 10px; border-bottom:1px solid var(--line); background:#fff; flex-wrap:wrap; }
.toolbar button { border:1px solid var(--line); background:#fff; border-radius:6px; padding:3px 9px; cursor:pointer; }
.toolbar button:hover, .toolbar button.on { border-color:var(--accent); color:var(--accent); }
.spacer { flex:1; } .mono { font-family: ui-monospace, Menlo, monospace; font-size:12px; color:var(--muted); }
.viewer { flex:1; position:relative; overflow:hidden; background:#fdfbf8; min-height:0; }
#sviewer svg { width:100%; height:100%; display:block; cursor:grab; user-select:none; }
.sheet { fill:#f7ecd8; stroke:#8a8178; stroke-width:1; vector-effect:non-scaling-stroke; }
.sheet-margin { fill:none; stroke:#b5793f; stroke-dasharray:6 4; stroke-width:1; vector-effect:non-scaling-stroke; }
.grp-top { fill:var(--birchB); } .grp-frame { fill:var(--birchA); } .grp-wedge { fill:var(--key); }
.sheet-label { font: 40px system-ui; fill:#8a8178; }
.part-label { font: 22px system-ui; fill:#5a4a3a; pointer-events:none; }
#viewer2d svg, #pviewer svg { width:100%; height:100%; display:block; cursor:grab; user-select:none; }
#viewer2d svg.dragging, #pviewer svg.dragging { cursor:grabbing; }
#part-list .thumb svg { max-height:120px; }
.scalebar { position:absolute; left:14px; bottom:12px; font: 11px ui-monospace, monospace; color:var(--ink); pointer-events:none; }
.scalebar div { height:4px; border:1px solid var(--ink); border-top:none; margin-bottom:2px; }
.hint { padding:4px 10px; font-size:11px; color:var(--muted); border-top:1px solid var(--line); background:#fff; }
#tab-3d { flex-direction:column; } #viewer3d canvas { display:block; }
.hidden { display:none !important; }
#doc { flex:1; overflow:auto; padding:20px 40px; max-width:980px; }
#doc-list a { display:block; padding:6px 8px; border-radius:6px; color:var(--ink); text-decoration:none; }
#doc-list a.active { background:#f3ebdf; }
.markdown table { border-collapse:collapse; margin:10px 0; } .markdown td, .markdown th { border:1px solid var(--line); padding:4px 8px; }
.markdown pre { background:#f4efe7; padding:10px; border-radius:6px; overflow:auto; } .markdown code { font-size:12px; }
/* svg */
.board0 { fill:var(--birchA); } .board1 { fill:var(--birchB); } .key { fill:var(--key); }
.part { stroke:#3b2f25; stroke-width:1; vector-effect:non-scaling-stroke; fill-rule:evenodd; }
.footprint { fill:none; stroke:#555; stroke-dasharray:6 4; stroke-width:1; vector-effect:non-scaling-stroke; }
.grid line { stroke:#00000014; stroke-width:1; vector-effect:non-scaling-stroke; }
.jointmark { fill:none; stroke:var(--accent); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.6; }
.btn-group { display:inline-flex; gap:0; margin-right:10px; }
.btn-group button { border-radius:0; margin-left:-1px; }
.btn-group button:first-child { border-radius:6px 0 0 6px; } .btn-group button:last-child { border-radius:0 6px 6px 0; }
.btn-group button.on { background:#f3ebdf; position:relative; }

/* futon & rug */
.opt.futon .fimg { float: right; width: 84px; height: 84px; object-fit: cover; border-radius: 6px; margin: 0 0 6px 8px; background: #eee; }
.opt.futon .stats { clear: none; line-height: 1.45; }
.opt.futon .stats i { color: #6b5b4b; }
.badge.ok { background: #dfeedd; color: #2f6b2a; }
#fviewer svg { width:100%; height:100%; display:block; cursor:grab; user-select:none; background: #f6f1ea; }
.rug { fill: #b9a68b; }
.rug-border { fill: none; stroke: #8f7a5c; stroke-width: 14; stroke-dasharray: 2 26; }
.futon-floor { fill: #4f5d6b; opacity: .92; }
.futon-flat { fill: none; stroke: #4f5d6b; stroke-width: 6; stroke-dasharray: 30 20; }
.zabuton { fill: #8c3b2f; opacity: .85; }
.knee-zone { fill: rgba(45,106,79,.12); stroke: #2d6a4f; stroke-width: 6; stroke-dasharray: 24 14; }
.knee-label { fill: #1f4d39; font-size: 26px; }
.frame-ghost { fill: none; stroke: #d8c7a6; stroke-width: 5; stroke-dasharray: 12 10; }
.top-disc { fill: #ecd9b4; stroke: #2b2118; stroke-width: 3; }
.plan-label { font: 34px system-ui, sans-serif; fill: #2b2118; text-anchor: middle; }

.card.wide { flex: 1 1 100%; }

/* phones / narrow screens */
@media (max-width: 760px) {
  html, body { height:auto; min-height:100%; }
  header { flex-wrap:wrap; gap:6px 12px; padding:8px 12px; }
  nav { width:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  nav a { margin-right:10px; display:inline-block; padding:6px 2px; }
  .meta { margin-left:0; }
  main { height:auto; }
  .tab.active { flex-direction:column; height:auto; min-height:calc(100vh - 90px); }
  #tab-overview { padding:10px; }
  .cards { grid-template-columns: 1fr; gap:10px; }
  aside { width:100%; max-height:38vh; border-right:none; border-bottom:1px solid var(--line); }
  .viewer-wrap { min-height:60vh; }
  #doc { padding:12px 14px; }
  table { display:block; overflow-x:auto; }
}