/* よろずDesignブース設計 — スタイル（Liberkaデザインガイドラインのトークンに準拠） */
:root{
  /* Liberka Core palette (semantic roles) */
  --ink:#102626; --ink-muted:#536B65;
  --brand:#009EA1; --brand-hover:#007477; --brand-strong:#005456;
  --mint:#8ECCB0; --soft:#DCEFE7; --soft-hover:#C7E5D8;
  --canvas:#E4EFEE; --surface:#FFFFFF; --on-brand:#F6F7F8;
  --border:#6F8B82; --divider:#B8CCC6;
  --danger:#B42318; --danger-hover:#912018; --warning:#B54708;
  --bg-base:#FFFFFF; --bg-mint:rgba(142,204,176,.24);
  --scene:#F3F8F7; --hall:#E4EFEE;
  /* spacing */
  --s2:2px; --s3:3px; --s4:4px; --s6:6px; --s12:12px; --s24:24px; --s36:36px; --s48:48px; --s72:72px;
  /* radius */
  --r-control:10px; --r-card:14px; --r-surface:18px; --r-pill:999px;
  --ease:cubic-bezier(0.2,0,0,1);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E6F1EF; --ink-muted:#A3B9B3;
    --brand:#3FC3C5; --brand-hover:#6FD3D4; --brand-strong:#8ADFE0;
    --soft:#173A38; --soft-hover:#1E4A47; --canvas:#0F1C1C; --surface:#152523; --on-brand:#0B1717;
    --border:#7E9A92; --divider:#2E4642; --danger:#F07468; --danger-hover:#F59A91; --warning:#F0A25B;
    --bg-base:#0F1C1C; --bg-mint:rgba(142,204,176,.10); --scene:#132321; --hall:#1A2F2C;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#E6F1EF; --ink-muted:#A3B9B3;
  --brand:#3FC3C5; --brand-hover:#6FD3D4; --brand-strong:#8ADFE0;
  --soft:#173A38; --soft-hover:#1E4A47; --canvas:#0F1C1C; --surface:#152523; --on-brand:#0B1717;
  --border:#7E9A92; --divider:#2E4642; --danger:#F07468; --danger-hover:#F59A91; --warning:#F0A25B;
  --bg-base:#0F1C1C; --bg-mint:rgba(142,204,176,.10); --scene:#132321; --hall:#1A2F2C;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
body{margin:0;height:100%;color:var(--ink);
  background-color:var(--bg-base);
  background-image:radial-gradient(120% 90% at 0% 0%, var(--bg-mint) 0%, rgba(142,204,176,0) 60%);
  background-attachment:fixed;
  font-family:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  font-size:16px;line-height:1.7;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i.sm{width:16px;height:16px}
h1,h2,h3{margin:0;line-height:1.35}
.vh{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s6);min-height:44px;padding:var(--s6) 16px;
  border:1px solid transparent;border-radius:var(--r-control);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background-color .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease)}
.btn.sm{min-height:36px;padding:var(--s4) var(--s12);font-size:14px}
.btn.primary{background:#007477;color:#F6F7F8}
.btn.primary:hover{background:#005456}
.btn.secondary{background:var(--soft);color:var(--brand-strong)}
.btn.secondary:hover{background:var(--soft-hover)}
.btn.quiet{background:var(--surface);color:var(--brand-strong);border-color:var(--divider)}
.btn.quiet:hover{background:var(--soft)}
.btn.danger{background:var(--danger);color:#FFFFFF}
.btn.danger:hover{background:var(--danger-hover)}
.btn.danger-quiet{background:var(--surface);color:var(--danger);border-color:var(--danger)}
.btn.danger-quiet:hover{background:#FCEBEA}
.btn:disabled{cursor:not-allowed;background:var(--surface);color:var(--ink-muted);border-color:var(--divider)}
@supports (corner-shape: squircle){ .btn:not(.pill){corner-shape:squircle} .card{corner-shape:squircle} }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn.primary{background:var(--brand);color:#0B1717} :root:not([data-theme="light"]) .btn.primary:hover{background:var(--brand-hover)} }

/* ---------- App bar ---------- */
.appbar{display:flex;align-items:center;gap:var(--s12);min-height:60px;padding:var(--s6) var(--s24);border-bottom:1px solid var(--divider);background:var(--surface)}
.product{display:flex;align-items:center;gap:var(--s6);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap}
.product .mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--soft);color:var(--brand-strong)}
.appbar .spacer{flex:1}

/* ---------- Setup ---------- */
#setup{min-height:100%}
.page{max-width:1200px;margin:0 auto;padding:var(--s36) var(--s24) var(--s72)}
@media (min-width:1100px){.page{padding-inline:var(--s48)}}
@media (max-width:420px){.page{padding-inline:var(--s12)}}
.page-head{margin-bottom:var(--s36);max-width:720px}
.page-head h1{font-size:30px;font-weight:700;letter-spacing:.01em}
.page-head p{margin:var(--s12) 0 0;color:var(--ink-muted)}
.setup-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s24);align-items:start}
@media (max-width:960px){.setup-grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--divider);border-radius:var(--r-card)}
.form{padding:var(--s12) var(--s24) 0}
.fsec{padding:var(--s24) 0;border-bottom:1px solid var(--divider)}
.fsec:last-of-type{border-bottom:none}
.fsec > h2,.panel-h{display:flex;align-items:center;gap:var(--s6);font-size:18px;font-weight:700;margin-bottom:var(--s12);color:var(--ink)}
.fsec > h2 .i,.panel-h .i{color:var(--brand-strong)}
.fsec > p.desc{margin:-6px 0 var(--s12);color:var(--ink-muted);font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12) var(--s24)}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s12) var(--s24)}
@media (max-width:560px){.row2,.row3{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:var(--s4);min-width:0;margin-bottom:var(--s12)}
.field > label,.field > .lab{font-size:14px;font-weight:600;color:var(--ink)}
.field .req{font-weight:400;color:var(--ink-muted);font-size:13px;margin-left:var(--s4)}
.input,.select{width:100%;min-height:44px;padding:var(--s6) var(--s12);background:var(--surface);color:var(--ink);
  border:1px solid var(--border);border-radius:var(--r-control);font-size:16px;transition:border-color .12s var(--ease)}
.input:focus-visible,.select:focus-visible{outline:none;border-color:var(--brand-strong);box-shadow:inset 0 0 0 1px var(--brand-strong)}
.input::placeholder{color:var(--ink-muted);opacity:.85}
.select{appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23536B65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.unit{position:relative}
.unit .input{padding-right:48px;font-weight:600}
.unit span{position:absolute;right:var(--s12);top:50%;transform:translateY(-50%);color:var(--ink-muted);font-size:14px;pointer-events:none}
.dates{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.dates .input{flex:1 1 150px;min-width:0}
.hint{font-size:13px;color:var(--ink-muted);margin:var(--s4) 0 0}
.chips{display:flex;flex-wrap:wrap;gap:var(--s6)}
.chip{min-height:36px;padding:var(--s4) var(--s12);border-radius:var(--r-pill);border:1px solid var(--divider);background:var(--surface);color:var(--ink);font-size:14px;cursor:pointer;transition:background-color .12s var(--ease)}
.chip:hover{background:var(--soft)}
.chip[aria-pressed="true"]{background:var(--soft);border-color:var(--brand-strong);color:var(--brand-strong);font-weight:600}
fieldset{border:none;margin:0;padding:0;min-width:0}
legend{padding:0;font-size:14px;font-weight:600;margin-bottom:var(--s6)}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
@media (max-width:380px){.choices{grid-template-columns:1fr}}
.opt{display:flex;gap:var(--s12);align-items:flex-start;padding:var(--s12);border:1px solid var(--divider);border-radius:var(--r-control);background:var(--surface);cursor:pointer;transition:background-color .12s var(--ease),border-color .12s var(--ease)}
.opt:hover{background:var(--soft)}
.opt:has(input:checked){border-color:var(--brand-strong);background:var(--soft)}
.opt b{display:block;font-size:15px;font-weight:600;line-height:1.4}
.opt small{display:block;font-size:13px;color:var(--ink-muted);line-height:1.5;margin-top:2px}
input[type=radio],input[type=checkbox]{appearance:none;flex:none;width:20px;height:20px;margin:2px 0 0;border:1.5px solid var(--border);background:var(--surface);display:grid;place-items:center;cursor:pointer}
input[type=radio]{border-radius:50%}
input[type=radio]:checked{border-color:var(--brand-strong);background:radial-gradient(circle,var(--brand-strong) 0 4.5px,var(--surface) 5px)}
input[type=checkbox]{border-radius:5px}
input[type=checkbox]:checked{border-color:var(--brand-strong);background:var(--brand-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F6F7F8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}
input[type=radio]:focus-visible,input[type=checkbox]:focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px}
.check{display:flex;align-items:center;gap:var(--s12);font-size:15px;min-height:44px;cursor:pointer}
.check input{margin:0}
.subopts{display:flex;flex-wrap:wrap;gap:var(--s6) var(--s24);align-items:center;margin-top:var(--s12);padding:var(--s12) var(--s12) var(--s6);border-radius:var(--r-control);background:var(--canvas)}
.subopts .field{margin:0;flex:0 1 200px}
.form-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--s12);flex-wrap:wrap;padding:var(--s24) 0;border-top:1px solid var(--divider)}
.err{color:var(--danger);font-size:14px;margin-right:auto;display:flex;gap:var(--s6);align-items:center}
.plan{position:sticky;top:var(--s24);padding:var(--s24)}
.plan #planSvg{display:block;width:100%;height:auto;max-height:58vh}
.plan-cap{margin-top:var(--s12);display:flex;flex-direction:column;gap:2px}
.plan-cap strong{font-size:20px}
.plan-cap span{color:var(--ink-muted);font-size:14px}
.legend{display:flex;flex-wrap:wrap;gap:var(--s6) var(--s24);margin-top:var(--s12);font-size:13px;color:var(--ink-muted)}
.legend i{display:inline-block;width:18px;height:0;border-top:3px solid var(--ink);vertical-align:middle;margin-right:var(--s6)}
.legend i.open{border-top:2px dashed var(--brand-strong)}
.legend i.wall{border-top:6px solid var(--border)}
.legend i.aisle{width:14px;height:14px;border:1px solid #DDC57F;border-radius:3px;background:#EAD9A6;vertical-align:-2px}
.legend i.carpet{width:14px;height:14px;border:1px solid var(--border);border-radius:3px;background:var(--carpet,#8E959B);vertical-align:-2px}

/* ---------- Editor ---------- */
/* エディタはビューポートに固定したアプリ画面（ページ全体はスクロールさせず、サイドバーだけをスクロール） */
#editor{height:100%;display:grid;grid-template-columns:238px minmax(0,1fr) 290px;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}
@media (min-width:1001px){ body.mode-editor{overflow:hidden} }
#editor .appbar{grid-column:1/-1}
.projinfo{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.35;padding-left:var(--s12);border-left:1px solid var(--divider)}
.projinfo strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.projinfo span{font-size:13px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filebar{display:flex;gap:var(--s6);flex-wrap:nowrap;justify-content:flex-end;flex:none}
.toolbar{grid-column:2;display:flex;align-items:center;gap:var(--s6) var(--s12);flex-wrap:wrap;padding:var(--s6) var(--s12);background:var(--surface);border-bottom:1px solid var(--divider)}
.tgroup{display:flex;align-items:center;gap:var(--s6)}
.tgroup > .lab{display:inline-flex;align-items:center;font-size:13px;color:var(--ink-muted)}
.toggle{display:inline-flex;border:1px solid var(--divider);border-radius:var(--r-control);padding:2px;background:var(--surface)}
.toggle button{min-height:32px;padding:0 10px;border:none;border-radius:8px;background:transparent;color:var(--ink);font-size:14px;cursor:pointer;transition:background-color .12s var(--ease)}
.toggle button:hover{background:var(--soft)}
.toggle button[aria-pressed="true"]{background:var(--soft);color:var(--brand-strong);font-weight:700;box-shadow:inset 0 0 0 1px var(--brand-strong)}
.select.sm{min-height:36px;font-size:14px;width:auto;padding:0 36px 0 var(--s12)}
.switch{display:inline-flex;align-items:center;gap:var(--s6);min-height:36px;padding:0 var(--s6);border:none;background:transparent;cursor:pointer;font-size:14px;color:var(--ink)}
.switch .track{position:relative;width:36px;height:20px;border-radius:var(--r-pill);background:var(--divider);transition:background-color .12s var(--ease)}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;transition:transform .12s var(--ease)}
.switch[aria-checked="true"] .track{background:var(--brand-strong)}
.switch[aria-checked="true"] .track::after{transform:translateX(16px)}
.switch .state{color:var(--ink-muted);font-size:13px;min-width:4em}

.palette{position:relative;grid-row:2/4;grid-column:1;background:var(--surface);border-right:1px solid var(--divider);overflow:auto;padding:var(--s12) var(--s12) var(--s24)}
.palette h2,.insp h2{display:flex;align-items:center;gap:var(--s6);font-size:14px;font-weight:700;margin:var(--s24) var(--s6) var(--s6);color:var(--ink)}
.palette h2 .i,.insp h2 .i{color:var(--brand-strong);width:16px;height:16px}
.palette h2:first-child,.insp h2:first-child{margin-top:var(--s6)}
.part{display:grid;grid-template-columns:32px 1fr;gap:0 var(--s12);align-items:center;width:100%;min-height:52px;text-align:left;border:1px solid transparent;background:transparent;padding:var(--s6) var(--s6);border-radius:var(--r-control);cursor:pointer;color:var(--ink);transition:background-color .12s var(--ease)}
.part:hover{background:var(--soft)}
.part[aria-pressed="true"]{border-color:var(--brand-strong);background:var(--soft)}
.part .ico{grid-row:span 2;width:32px;height:32px;color:var(--ink-muted)}
.part b{font-size:14px;font-weight:600;line-height:1.35}
.part small{font-size:13px;color:var(--ink-muted);line-height:1.35}

.viewport{grid-column:2;grid-row:3;position:relative;min-width:0;min-height:0;background:var(--scene);overflow:hidden;touch-action:none}
.viewport canvas{display:block;width:100%;height:100%}
.status{position:absolute;left:var(--s12);bottom:var(--s12);right:var(--s12);display:flex;gap:var(--s6);flex-wrap:wrap;pointer-events:none}
.status span{background:var(--surface);border:1px solid var(--divider);padding:var(--s2) var(--s12);border-radius:var(--r-pill);font-size:13px;color:var(--ink-muted)}
.status span.warn{color:var(--warning);border-color:var(--warning)}
.status span.bad{color:var(--danger);border-color:var(--danger)}
.status kbd{font-family:inherit;font-size:12px;border:1px solid var(--divider);border-bottom-width:2px;border-radius:4px;padding:0 4px;margin:0 2px;color:var(--ink)}
.empty{position:absolute;top:var(--s12);left:var(--s12);max-width:320px;padding:var(--s12) var(--s24) var(--s12) var(--s12);pointer-events:none;display:flex;gap:var(--s12)}
.empty .i{color:var(--brand-strong);margin-top:3px}
.empty b{display:block;font-size:15px}
.empty span{font-size:14px;color:var(--ink-muted)}
.toast{position:absolute;top:var(--s12);left:50%;transform:translate(-50%,-6px);display:flex;align-items:center;gap:var(--s12);max-width:calc(100% - 24px);
  background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--r-control);padding:var(--s6) var(--s6) var(--s6) var(--s12);
  font-size:14px;opacity:0;pointer-events:none;box-shadow:0 4px 16px rgba(16,38,38,.12);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast .i{color:var(--brand-strong)}
.toast.warn .i{color:var(--warning)} .toast.bad .i{color:var(--danger)}
.toast #toastMsg{padding:var(--s4) 0}

.insp{position:relative;grid-column:3;grid-row:2/4;background:var(--surface);border-left:1px solid var(--divider);overflow:auto;padding:var(--s12) var(--s24) var(--s24)}
.insp section{padding-bottom:var(--s12)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s6) var(--s12);align-items:center;font-size:14px}
.kv label,.kv .k{color:var(--ink-muted);font-size:13px}
.kv .input,.kv .select{min-height:36px;font-size:14px;padding-block:var(--s2)}
.kv .select{padding-right:36px}
.row{display:flex;gap:var(--s6);flex-wrap:wrap;margin-top:var(--s12)}
.swatches{display:flex;gap:var(--s6);flex-wrap:wrap}
.sw{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);padding:0;cursor:pointer;display:grid;place-items:center}
.sw[aria-pressed="true"]{outline:2px solid var(--brand-strong);outline-offset:2px}
.muted{color:var(--ink-muted);font-size:13px;margin:var(--s6) 0 0}
table.bom{width:100%;border-collapse:collapse;font-size:13px}
table.bom th{font-weight:600;color:var(--ink-muted);text-align:left;padding:var(--s4) 0;border-bottom:1px solid var(--divider)}
table.bom th:last-child,table.bom td:last-child{text-align:right;white-space:nowrap}
table.bom td{padding:var(--s6) 0;border-bottom:1px solid var(--divider);vertical-align:top}
table.bom td:last-child{font-weight:700}
table.bom small{display:block;color:var(--ink-muted);font-size:12px}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid var(--border);margin-right:var(--s6);vertical-align:-1px}
.checks{list-style:none;margin:0;padding:0;font-size:13px}
.checks li{display:flex;gap:var(--s6);align-items:flex-start;padding:var(--s6) 0;border-bottom:1px solid var(--divider)}
.checks li .i{width:16px;height:16px;margin-top:2px;color:var(--brand-strong)}
.checks li.w .i{color:var(--warning)}
.note{display:flex;gap:var(--s6);font-size:13px;margin-top:var(--s12);padding:var(--s6) var(--s12);border-radius:var(--r-control);border:1px solid var(--warning);color:var(--warning);background:var(--surface)}
.note .i{width:16px;height:16px;margin-top:3px}

dialog{border:1px solid var(--divider);border-radius:var(--r-surface);padding:var(--s24);max-width:min(480px,calc(100% - 24px));background:var(--surface);color:var(--ink);box-shadow:0 12px 40px rgba(16,38,38,.18)}
dialog::backdrop{background:rgba(16,38,38,.35)}
dialog h2{font-size:18px;margin-bottom:var(--s12)}
dialog p{margin:0 0 var(--s24);color:var(--ink)}
dialog .actions{display:flex;justify-content:flex-end;gap:var(--s12);flex-wrap:wrap}

@media (max-width:1000px){
  #editor{grid-template-columns:1fr;grid-template-rows:auto auto minmax(360px,60vh) auto auto;height:auto;overflow:visible}
  .toolbar,.viewport,.palette,.insp{grid-column:1}
  .toolbar{grid-row:2}.viewport{grid-row:3}.palette{grid-row:4;border-right:none;border-top:1px solid var(--divider);display:flex;gap:var(--s6);overflow-x:auto;padding:var(--s12)}
  .palette h2{display:none}.part{min-width:180px;border-color:var(--divider)}
  .insp{grid-row:5;border-left:none;border-top:1px solid var(--divider)}
  #editor .appbar{flex-wrap:wrap}
  .filebar{justify-content:flex-start;width:100%;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.appbar .filebar,.toolbar,.palette,.status,.toast{display:none!important}body{background:#fff}}