* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 14px; color: #2c2c2a; background: #f1efe8;
  display: flex; flex-direction: column;
}

/* ---------- top bar ---------- */
#topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px; background: #fff; border-bottom: 1px solid #d3d1c7;
  flex-wrap: wrap;
}
.brand { font-weight: 600; font-size: 15px; }
#topbar .tabs { display: flex; gap: 4px; }
#topbar .tabs button {
  padding: 5px 16px; border: 1px solid #d3d1c7; background: #fff;
  border-radius: 6px; cursor: pointer; font-size: 13px;
}
#topbar .tabs button.active { background: #185fa5; color: #fff; border-color: #185fa5; }
#metrics { display: flex; gap: 12px; font-size: 12px; color: #5f5e5a; }
#metrics b { color: #2c2c2a; font-size: 13px; }
#topbar .actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
#topbar .actions button {
  padding: 5px 12px; border: 1px solid #d3d1c7; background: #fff;
  border-radius: 6px; cursor: pointer; font-size: 13px;
}
#topbar .actions button:hover { background: #f1efe8; }
#topbar .actions button:disabled { opacity: .35; cursor: default; }
#topbar .actions button:disabled:hover { background: #fff; }
.snapLabel { font-size: 12px; color: #5f5e5a; display: flex; align-items: center; gap: 4px; }
.snapLabel select { padding: 4px; border: 1px solid #d3d1c7; border-radius: 6px; font-size: 12px; }
.sep { width: 1px; height: 20px; background: #d3d1c7; margin: 0 4px; }

/* ---------- layout ---------- */
main { flex: 1; display: flex; min-height: 0; }

/* ---------- palette ---------- */
#palette {
  width: 228px; background: #fff; border-right: 1px solid #d3d1c7;
  display: flex; flex-direction: column; min-height: 0;
}
#catTabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid #e5e3da; }
#catTabs button {
  padding: 4px 10px; border: 1px solid #d3d1c7; background: #fff;
  border-radius: 999px; cursor: pointer; font-size: 12px;
}
#catTabs button.active { background: #e6f1fb; border-color: #378add; color: #0c447c; }
#items { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.itemCard {
  border: 1px solid #d3d1c7; border-radius: 8px; padding: 8px; cursor: pointer;
  background: #fff;
}
.itemCard:hover { border-color: #378add; background: #f6faff; }
.itemCard.active { border-color: #185fa5; background: #e6f1fb; }
.itemCard .nm { font-size: 13px; font-weight: 600; }
.itemCard .sz { font-size: 11px; color: #888780; margin-top: 2px; }
.itemCard svg { width: 100%; height: 44px; display: block; margin-bottom: 4px; }
.groundCard { display: flex; align-items: center; gap: 8px; }
.groundCard .sw { width: 36px; height: 26px; border-radius: 4px; border: 1px solid #b4b2a9; flex: none; }
.groundCard svg { width: 36px; height: 26px; margin: 0; }

/* ---------- canvas ---------- */
#canvasWrap { flex: 1; position: relative; min-width: 0; }
#cv { width: 100%; height: 100%; display: block; background: #faf9f5; outline: none; }
#cv.placing { cursor: crosshair; }
#cv.panning { cursor: grabbing; }
#hint {
  position: absolute; left: 12px; bottom: 12px; font-size: 12px;
  background: rgba(44,44,42,.82); color: #fff; padding: 6px 12px; border-radius: 6px;
  pointer-events: none; max-width: 70%;
}
#hint:empty { display: none; }

/* ---------- props ---------- */
#props {
  width: 232px; background: #fff; border-left: 1px solid #d3d1c7;
  overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px;
}
.pCard { border: 1px solid #e5e3da; border-radius: 8px; padding: 10px; }
.pCard h3 { font-size: 12px; color: #5f5e5a; font-weight: 600; margin-bottom: 6px; }
.pCard .big { font-size: 19px; font-weight: 600; }
.pCard .sub { font-size: 11px; color: #888780; }
.pRow { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pRow label { font-size: 12px; color: #5f5e5a; width: 42px; flex: none; }
.pRow input[type=text], .pRow input[type=number] {
  flex: 1; min-width: 0; padding: 5px 6px; border: 1px solid #d3d1c7; border-radius: 6px; font-size: 13px;
}
.pBtns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pBtns button {
  padding: 4px 9px; border: 1px solid #d3d1c7; background: #fff; border-radius: 6px;
  cursor: pointer; font-size: 12px;
}
.pBtns button:hover { background: #f1efe8; }
.pBtns button.on { background: #e6f1fb; border-color: #378add; color: #0c447c; }
.pBtns button.danger { color: #a32d2d; border-color: #f0c1c1; }
.pBtns button.danger:hover { background: #fcebeb; }
.warnMsg { margin-top: 8px; font-size: 12px; color: #a32d2d; background: #fcebeb; border-radius: 6px; padding: 6px 8px; }
.okMsg { margin-top: 8px; font-size: 12px; color: #3b6d11; background: #eaf3de; border-radius: 6px; padding: 6px 8px; }

/* ---------- svg objects ---------- */
.obj { cursor: move; }
.obj text { pointer-events: none; user-select: none; }
.obj.sel .selBox { stroke: #185fa5; stroke-dasharray: 60 40; fill: none; }
/* ---------- リフォーム：現況／計画の差分表示 ---------- */
.obj.rfDemo .bodyShape { stroke: #e24b4a !important; stroke-width: 45 !important; stroke-dasharray: 220 140 !important; fill: none !important; }
.obj.rfDemo text { fill: #c23b3a !important; }
.obj.rfNew .bodyShape { stroke: #1a7f37 !important; stroke-width: 40 !important; }
.obj.rfMod .bodyShape { stroke: #c77700 !important; stroke-width: 40 !important; }
.rfDemoWall { stroke: #e24b4a; stroke-width: 150; stroke-dasharray: 320 200; stroke-linecap: butt; }
.rfNewWall { stroke: #1a7f37; stroke-width: 150; stroke-linecap: butt; }

.obj.warn .bodyShape { stroke: #e24b4a !important; stroke-width: 30 !important; }
.vHandle { fill: #fff; stroke: #185fa5; cursor: move; }
.vMid { fill: #185fa5; opacity: .35; cursor: copy; }
.vMid:hover { opacity: 1; }
.edgeLen { font-size: 260px; fill: #185fa5; cursor: pointer; user-select: none; }
.edgeLen:hover { font-weight: bold; }
.rzHandle { fill: #fff; stroke: #185fa5; cursor: nwse-resize; }
.ghost { opacity: .55; pointer-events: none; }
.dimText { user-select: none; pointer-events: none; }
.bandRect { fill: rgba(24, 95, 165, .08); stroke: #185fa5; stroke-width: 30; stroke-dasharray: 120 80; pointer-events: none; }

/* ---------- PDF出力プレビュー ---------- */
#printOverlay {
  position: fixed; inset: 0; z-index: 60; overflow: auto;
  background: #6f6d66; padding: 20px;
}
#printOverlay[hidden] { display: none; }
.printBar { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 14px; }
.printBar button {
  padding: 8px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px;
  background: #185fa5; color: #fff;
}
.printBar button#closePrint { background: #fff; color: #2c2c2a; }
.printNote { font-size: 12px; color: #f1efe8; }
#printOverlay .sheet {
  background: #fff; width: min(1080px, 96%); margin: 0 auto; padding: 26px 30px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); color: #2c2c2a;
}
.phead { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid #2c2c2a; padding-bottom: 10px; margin-bottom: 12px; }
.phead h1 { font-size: 19px; margin: 0; }
.psub { font-size: 14px; color: #5f5e5a; }
.pdate { margin-left: auto; font-size: 12px; color: #5f5e5a; }
.pbody { display: flex; gap: 18px; align-items: flex-start; }
.pbody .fig { flex: 1; border: 1px solid #d3d1c7; min-width: 0; }
.pbody .fig svg { width: 100%; height: auto; display: block; }
.areas { width: 230px; flex: none; }
.areas h2 { font-size: 14px; margin: 0 0 8px; }
.areas table { width: 100%; border-collapse: collapse; font-size: 12px; }
.areas th, .areas td { border: 1px solid #b4b2a9; padding: 5px 8px; text-align: right; }
.areas td:first-child { text-align: left; }
.areas thead th { background: #f1efe8; text-align: center; }
.pnote { margin-top: 10px; font-size: 10px; color: #888780; }

/* ---------- 費用設定パネル ---------- */
.costSheet {
  background: #fff; width: min(760px, 96%); margin: 0 auto; padding: 22px 26px;
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.35); color: #2c2c2a;
}
.costRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.costLbl { font-size: 13px; color: #5f5e5a; width: 64px; flex: none; }
.costRow input[type=number] { padding: 5px 6px; border: 1px solid #d3d1c7; border-radius: 6px; font-size: 13px; }
.costRow input[type=range] { flex: 1; min-width: 120px; }
.gradeBtn {
  padding: 5px 12px; border: 1px solid #d3d1c7; background: #fff; border-radius: 999px;
  cursor: pointer; font-size: 12px;
}
.gradeBtn.on { background: #e6f1fb; border-color: #185fa5; color: #0c447c; }
.costTable { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.costTable td { padding: 5px 4px; border-bottom: 1px solid #eceade; }
.costTable .exRow td { font-size: 12px; color: #888780; border-bottom: none; padding: 2px 4px; }
.costTable .totalRow td { border-top: 2px solid #2c2c2a; border-bottom: none; padding-top: 8px; font-size: 15px; }
.costGroup { font-size: 12px; font-weight: 600; color: #5f5e5a; margin: 10px 0 6px; }
.costGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.costCell { font-size: 11px; color: #5f5e5a; display: flex; flex-direction: column; gap: 2px; }
.costCell input { padding: 4px 6px; border: 1px solid #d3d1c7; border-radius: 6px; font-size: 12px; }

/* ---------- サンプルギャラリー ---------- */
.tplGrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px; max-width: 1100px; margin: 0 auto;
}
.tplCard {
  background: #fff; border-radius: 10px; padding: 14px; cursor: pointer;
  border: 2px solid transparent; box-shadow: 0 3px 12px rgba(0,0,0,.25);
}
.tplCard:hover { border-color: #378add; }
.tplCard svg { width: 100%; height: 190px; display: block; background: #faf9f5; border-radius: 6px; }
.tplName { font-size: 15px; font-weight: 600; margin-top: 10px; }
.tplDesc { font-size: 12px; color: #5f5e5a; margin-top: 4px; line-height: 1.6; }

/* ---------- リフォームモードのUI ---------- */
.modeSw { display: flex; border: 1px solid #d3d1c7; border-radius: 999px; overflow: hidden; flex: none; }
.modeSw button {
  padding: 5px 14px; border: none; background: #fff; cursor: pointer; font-size: 13px; color: #5f5e5a;
}
.modeSw button.active { background: #8a5a1f; color: #fff; }
body.reform #topbar { background: #fdfaf4; }
#layerTabs[hidden] { display: none; }
.rlayerTabs button.active { background: #8a5a1f !important; border-color: #8a5a1f !important; color: #fff; }
.rfCard { border-color: #e3d7c2; background: #fffdf8; }
.rfBadge { font-size: 11px; padding: 1px 7px; border-radius: 999px; color: #fff; }
.rfBadge.rf-demo { background: #c23b3a; }
.rfBadge.rf-new { background: #1a7f37; }
.rfBadge.rf-mod { background: #c77700; }
.recMsg { margin-top: 8px; font-size: 12px; color: #8a5a1f; background: #fbf1e2; border-radius: 6px; padding: 6px 8px; line-height: 1.6; }
.rfQty { margin: 4px 0 0 16px; font-size: 12px; color: #2c2c2a; line-height: 1.8; }
.rfChk { display: block; margin-top: 8px; font-size: 12px; color: #5f5e5a; }
.rfChks { gap: 14px; }
.rfChks label { font-size: 13px; display: flex; align-items: center; gap: 4px; }
.rfMust { color: #c23b3a; }
.rfRec { color: #8a5a1f; }
.rfGroupRow td { font-weight: 600; background: #faf7f0; border-bottom: 1px solid #e3d7c2; }
.rfDetail { font-size: 11px; color: #a09d94; }
.rfLink { font-size: 12px; color: #185fa5; }
.bgFrame { fill: none; stroke: #8a5a1f; stroke-width: 40; stroke-dasharray: 200 140; pointer-events: none; }
.bgPick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; }
.bgThumb { padding: 0; border: 1px solid #d3d1c7; border-radius: 6px; background: #fff; cursor: pointer; overflow: hidden; aspect-ratio: 4/3; }
.bgThumb:hover { border-color: #8a5a1f; }
.bgThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rfEra {
  display: inline-block; font-size: 11px; color: #8a5a1f; background: #fbf1e2;
  border-radius: 999px; padding: 2px 10px; margin-bottom: 8px;
}

/* ---------- スマホ（375px 対応） ---------- */
@media (max-width: 760px) {
  html, body { overflow: auto; }
  body { height: auto; min-height: 100%; }
  #topbar { gap: 5px 6px; padding: 5px 7px; }
  .brand { font-size: 12px; }
  #topbar .tabs { flex-wrap: wrap; gap: 3px; }
  #topbar .tabs button { padding: 3px 9px; font-size: 11px; }
  .modeSw button { padding: 3px 11px; font-size: 11px; }
  #metrics { width: 100%; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; }
  #metrics b { font-size: 11px; }
  #topbar .actions { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 4px; }
  #topbar .actions button { padding: 3px 8px; font-size: 11px; }
  #topbar .sep { display: none; }
  .snapLabel { font-size: 11px; }
  .snapLabel select { font-size: 11px; padding: 2px; max-width: 130px; }
  main { flex-direction: column; }
  #palette { width: 100%; border-right: none; border-bottom: 1px solid #d3d1c7; max-height: 30vh; }
  #catTabs { padding: 5px 6px; gap: 3px; }
  #catTabs button { padding: 3px 8px; font-size: 11px; }
  #items { flex-direction: row; flex-wrap: wrap; padding: 6px; gap: 5px; }
  #items .itemCard { width: calc(50% - 3px); padding: 6px; }
  #items .itemCard svg { height: 34px; }
  #items .groundCard { width: 100%; }
  #canvasWrap { height: 62vh; flex: none; }
  #hint { max-width: calc(100% - 24px); font-size: 11px; }
  #props { width: 100%; border-left: none; border-top: 1px solid #d3d1c7; }
  #printOverlay { padding: 10px; }
  #printOverlay .sheet, .costSheet { width: 100%; padding: 14px; }
  .pbody { flex-direction: column; }
  .areas { width: 100%; }
  .costLbl { width: 100%; }
  .costRow input[type=range] { width: 100%; }
  .costGrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .tplGrid { grid-template-columns: 1fr; }
  .tplCard svg { height: 150px; }
  .printBar { flex-wrap: wrap; }
  .printNote { width: 100%; text-align: center; }
}

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; overflow: visible; height: auto; }
  #topbar, main, .printBar { display: none !important; }
  #printOverlay { position: static; padding: 0; background: #fff; overflow: visible; }
  #printOverlay .sheet { width: auto; box-shadow: none; padding: 0; margin: 0; }
  .pbody .fig svg { max-height: 165mm; }
}