:root {
  --cat-living: #f6c453;
  --cat-bedroom: #7fb0e0;
  --cat-wet: #6fc3c0;
  --cat-storage: #b79ad0;
  --cat-circulation: #c9cdd4;
  --band-ok: #2e7d5b;
  --band-ng: #c0392b;
  --strip-warn: #b8860b;
  --strip-budget: #8a6d3b;
  --ink: #222;
  --line: #d0d4da;
}
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; color: var(--ink); margin: 0; padding: 1rem; }
main { max-width: 960px; margin: 0 auto; }
.block { border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; margin: .75rem 0; }
.block > legend { font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.chip { background: #eef1f5; border-radius: 999px; padding: .15rem .6rem; font-size: .85rem; }
.floors { display: flex; flex-wrap: wrap; gap: 1rem; }          /* PC 横並び・スマホ縦積み */
.floor { margin: 0; }
.floor > figcaption { font-weight: 600; margin-bottom: .25rem; }
svg.plan { width: 100%; max-width: 420px; height: auto; background: #fff; }
svg.plan .grid { stroke: var(--line); stroke-width: .5; stroke-opacity: .5; }
svg.plan .room { stroke: #fff; stroke-width: 1.5; }
svg.plan .room.cat-living { fill: var(--cat-living); }
svg.plan .room.cat-bedroom { fill: var(--cat-bedroom); }
svg.plan .room.cat-wet { fill: var(--cat-wet); }
svg.plan .room.cat-storage { fill: var(--cat-storage); }
svg.plan .room.cat-circulation { fill: var(--cat-circulation); }
svg.plan .rname { font-size: 11px; text-anchor: middle; }
svg.plan .rjo { font-size: 10px; text-anchor: middle; fill: #333; }
svg.plan .dim { font-size: 10px; text-anchor: middle; fill: #555; }
.band { color: #fff; padding: .3rem .6rem; border-radius: 6px; display: inline-block; }
.band--ok { background: var(--band-ok); }
.band--ng { background: var(--band-ng); }
.strip { padding: .4rem .6rem; border-radius: 6px; margin: .4rem 0; color: #fff; }
.strip--warn { background: var(--strip-warn); }
.strip--budget { background: var(--strip-budget); }
.result--gray .msg { color: #555; }
.meta { color: #666; font-size: .85rem; margin: .4rem 0; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }