/* ===== アプリ画面 ===== */
* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  font-family: 'Noto Sans JP', 'Yu Gothic UI', 'Meiryo', sans-serif;
  color: #26292d;
  background: #eceae6;
  font-size: 14px;
}

button, input, select, textarea { font: inherit; color: inherit; }

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid #dcd9d3;
}
.app-bar h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

button {
  border: 1px solid #c9c5bd;
  background: #fff;
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
}
button:hover { background: #f5f3ef; }
button:disabled { opacity: .35; cursor: default; }
button.primary { background: #3a332b; border-color: #3a332b; color: #fff; }
button.primary:hover { background: #50473c; }

.layout {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  height: calc(100% - 57px);
}

.panel {
  overflow-y: auto;
  background: #faf9f7;
  border-right: 1px solid #dcd9d3;
  padding: 4px 16px 32px;
}
.panel section { padding: 12px 0 16px; border-bottom: 1px solid #e6e3dd; }
.panel h2 { margin: 6px 0 12px; font-size: 13px; font-weight: 700; color: #8b6b47; letter-spacing: .08em; }
.panel h3 { display: flex; justify-content: space-between; margin: 12px 0 8px; font-size: 13px; font-weight: 500; }
.panel h3 small { color: #8a8580; font-weight: 400; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field > span { font-size: 12px; color: #5f5a54; }
.field small { color: #8a8580; font-size: 11px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid #cfcac2;
  border-radius: 6px;
  padding: 7px 9px;
  background: #fff;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus,
.thumbs input:focus { outline: 2px solid #b08d63; outline-offset: -1px; }

.dropzone {
  display: block;
  padding: 14px 10px;
  border: 1.5px dashed #c3bdb3;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  color: #77716a;
  font-size: 12px;
  cursor: pointer;
}
.dropzone:hover, .dropzone.over { border-color: #8b6b47; background: #fbf7f1; color: #3a332b; }

.thumbs { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.thumbs li {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px;
  background: #fff;
  border: 1px solid #e3dfd8;
  border-radius: 8px;
}
.thumbs img { width: 56px; height: 42px; object-fit: contain; background: #f2f0ec; border-radius: 4px; }
.thumbs input { min-width: 0; border: 1px solid #e0dcd5; border-radius: 5px; padding: 5px 7px; }
.thumb-actions { display: flex; gap: 2px; }
.thumb-actions button { padding: 3px 7px; font-size: 12px; }

.preview {
  overflow: auto;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.board-scale { position: relative; flex: none; }
.board-scale .board {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .15);
}

@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; height: auto; }
  .panel { border-right: none; border-bottom: 1px solid #dcd9d3; }
  .preview { padding: 16px; }
}

/* ===== プレゼンボード ===== */
.board {
  --u: 1mm;
  width: 420mm;
  height: 297mm;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 10);
  overflow: hidden;
  background: var(--b-bg);
  color: var(--b-ink);
  font-family: 'Noto Sans JP', 'Yu Gothic', sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.board.paper-A4 { --u: 0.70714mm; width: 297mm; height: 210mm; }

.theme-natural { --b-bg: #f6f1e8; --b-ink: #3a332b; --b-accent: #8b6b47; --b-sub: #8a7f72; --b-line: #ddd2c2; --b-panel: #fffdf9; }
.theme-modern  { --b-bg: #ffffff; --b-ink: #1d2125; --b-accent: #1d2125; --b-sub: #6b7178; --b-line: #d9dcdf; --b-panel: #f5f6f7; }
.theme-simple  { --b-bg: #ffffff; --b-ink: #222222; --b-accent: #2c4a6e; --b-sub: #76808a; --b-line: #dfe3e8; --b-panel: #ffffff; }

.b-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 10);
  padding-bottom: calc(var(--u) * 5);
  border-bottom: calc(var(--u) * 0.6) solid var(--b-accent);
}
.theme-modern .b-head {
  margin: calc(var(--u) * -14) calc(var(--u) * -16) 0;
  padding: calc(var(--u) * 11) calc(var(--u) * 16) calc(var(--u) * 7);
  background: #1d2125;
  color: #fff;
  border-bottom: none;
}
.b-catch { margin: 0 0 calc(var(--u) * 2); font-size: calc(var(--u) * 5); color: var(--b-accent); letter-spacing: .08em; }
.theme-modern .b-catch { color: #c3c7cc; }
.b-name {
  margin: 0;
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: calc(var(--u) * 12);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .06em;
}
.b-brand { flex: none; display: flex; align-items: flex-end; }
.b-logo { display: block; max-height: calc(var(--u) * 16); max-width: calc(var(--u) * 70); object-fit: contain; }
.b-company { font-size: calc(var(--u) * 6); font-weight: 700; letter-spacing: .08em; }

.b-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: calc(var(--u) * 10);
}
.b-body.no-side { grid-template-columns: 1fr; }
.b-body.no-side .b-side { display: none; }

.b-main, .b-side { display: flex; flex-direction: column; gap: calc(var(--u) * 6); min-width: 0; min-height: 0; }
.b-hero  { flex: 1.25 1 0; display: flex; gap: calc(var(--u) * 5); min-height: 0; }
.b-plans { flex: 1 1 0; display: flex; gap: calc(var(--u) * 5); min-height: 0; }
.b-info  { flex: 0 0 auto; }
.b-elev  {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: calc(var(--u) * 4);
}
.b-elev.n1 { grid-template-columns: 1fr; }

.fig { margin: 0; flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); }
.fig-img { position: relative; flex: 1; min-height: 0; }
.fig-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.b-hero .fig-img img { object-fit: cover; }
.b-plans .fig-img, .b-elev .fig-img { background: var(--b-panel); }
.fig figcaption { font-size: calc(var(--u) * 3.6); color: var(--b-sub); letter-spacing: .1em; }

.b-concept { margin: 0 0 calc(var(--u) * 5); font-size: calc(var(--u) * 4.2); line-height: 1.9; white-space: pre-wrap; }
.b-table { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 3.8); }
.b-table th, .b-table td { padding: calc(var(--u) * 1.8) 0; border-bottom: calc(var(--u) * 0.25) solid var(--b-line); vertical-align: top; text-align: left; }
.b-table th { width: calc(var(--u) * 26); font-weight: 500; color: var(--b-accent); white-space: nowrap; }
.b-table td { padding-left: calc(var(--u) * 3); }

.b-empty {
  flex: 1;
  display: grid;
  place-items: center;
  border: calc(var(--u) * 0.5) dashed var(--b-line);
  color: var(--b-sub);
  font-size: calc(var(--u) * 6);
}

.b-foot { display: flex; justify-content: flex-end; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 3.6); color: var(--b-sub); min-height: calc(var(--u) * 4); }
.b-foot .sep { opacity: .5; }

/* ===== 印刷・PDF ===== */
@media print {
  html, body { height: auto; background: none; }
  .app-bar, .panel { display: none !important; }
  .layout { display: block; height: auto; }
  .preview { display: block; padding: 0; overflow: visible; }
  .board-scale { width: auto !important; height: auto !important; }
  .board-scale .board { position: static; transform: none !important; box-shadow: none; }
}