:root {
  --bg: #efeee9;
  --panel: #fbfaf7;
  --line: #dedbd2;
  --text: #23221f;
  --muted: #6d6a63;
  --accent: #2f6b4f;
  --accent-soft: #e2eee7;
  --sel: #f5a524;
  --danger: #b3412e;
  --radius: 8px;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }

/* 上のバー */
.top {
  height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: #1f2a24; color: #f1efe8;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.logo { width: 22px; height: 22px; border-radius: 5px; background:
  linear-gradient(135deg, #7fb07a 0 45%, transparent 45%), linear-gradient(315deg, #c9b58f 0 45%, transparent 45%), #3d5a48; }
.proj-name {
  width: 220px; min-width: 120px; background: #2c3a32; border: 1px solid #3c4d43; color: #f1efe8;
  border-radius: 6px; padding: 6px 10px;
}
.top .btns { display: flex; gap: 4px; align-items: center; }
.top .btns button, .seg button {
  background: transparent; border: 1px solid #3c4d43; border-radius: 6px; padding: 5px 10px; color: #e6e3da;
}
.top .btns button:hover, .seg button:hover { background: #2c3a32; }
.sep { width: 1px; height: 22px; background: #3c4d43; margin: 0 4px; }
.seg { display: flex; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; }
.seg button.on { background: #e8e4d8; color: #1f2a24; border-color: #e8e4d8; }
.primary {
  margin-left: auto; background: #d9a441; color: #1f1a10; border: 0; border-radius: 8px;
  padding: 8px 16px; font-weight: 700; white-space: nowrap;
}
.primary:hover { background: #e7b556; }

.app { display: flex; height: calc(100% - 52px); }

/* 左：道具 */
.tools { width: 190px; flex: none; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: 8px 8px 24px; }
.tools h3 { font-size: 11px; color: var(--muted); margin: 14px 4px 6px; font-weight: 600; letter-spacing: .08em; }
.tool {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; font-size: 13px;
}
.tool:hover { background: #f0eee7; }
.tool.on { background: var(--accent-soft); border-color: #b7d3c2; color: #1d4a35; font-weight: 600; }
.tool .sw { width: 16px; height: 16px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.15); }
.tool .kbd { margin-left: auto; font-size: 11px; color: var(--muted); }

/* 中央 */
.stage { position: relative; flex: 1; min-width: 0; background: #cfd6d8; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pane { position: absolute; overflow: hidden; }
.plan-pane { cursor: crosshair; touch-action: none; }
.plan-pane.select { cursor: default; }
.plan-pane.panning { cursor: grabbing; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.view-pane { touch-action: none; }
.split-line .plan-pane { border-right: 2px solid #1f2a24; }
.pane-tag {
  position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(31, 42, 36, .72); padding: 3px 8px; border-radius: 4px; pointer-events: none;
}
.cam-btns { position: absolute; right: 10px; top: 10px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.cam-btns button {
  background: rgba(255, 255, 255, .9); border: 1px solid rgba(0,0,0,.12); border-radius: 6px; padding: 4px 9px; font-size: 12px;
}
.cam-btns button:hover { background: #fff; }
.view-hint {
  position: absolute; left: 10px; bottom: 10px; font-size: 11px; color: #fff; background: rgba(31,42,36,.55);
  padding: 3px 8px; border-radius: 4px; pointer-events: none;
}
.status {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 12px; color: #f3f1ea; background: rgba(31, 42, 36, .78);
  padding: 5px 10px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toast {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: #1f2a24; color: #fff;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 5;
}
.toast.show { opacity: 1; }

/* 右：設定 */
.panel { width: 290px; flex: none; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; background: transparent; border: 0; padding: 10px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 700; }
.panel-body { flex: 1; overflow-y: auto; padding: 12px 14px 28px; font-size: 13px; }
.panel-body h2 { font-size: 15px; margin: 2px 0 2px; }
.panel-body .sub { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.field { margin: 10px 0; }
.field > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input[type=number], .field input[type=text], .field select {
  width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: #fff;
}
.field .unit { display: flex; align-items: center; gap: 6px; }
.field .unit span { color: var(--muted); font-size: 12px; }
.field input[type=range] { width: 100%; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.mat {
  border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 4px; font-size: 11px; text-align: center; line-height: 1.25;
}
.mat .chip { height: 26px; border-radius: 4px; margin-bottom: 3px; background-size: cover; border: 1px solid rgba(0,0,0,.08); }
.mat.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); font-weight: 700; }
.rowbtns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.rowbtns button, .btn {
  border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 6px 10px; font-size: 12px;
}
.rowbtns button:hover, .btn:hover { background: #f3f1ea; }
.rowbtns .danger { color: var(--danger); border-color: #e7c3bb; }
.info { background: #f1efe8; border-radius: 6px; padding: 8px 10px; margin: 10px 0; line-height: 1.6; }
.help { color: var(--muted); line-height: 1.7; font-size: 12px; }
.help b { color: var(--text); }
.kbd-list { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; color: var(--muted); }
.kbd-list kbd { font-family: inherit; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--text); }
table.qty { width: 100%; border-collapse: collapse; font-size: 12px; }
table.qty th, table.qty td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; }
table.qty td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.qty th { color: var(--muted); font-weight: 600; }

/* ダイアログ */
.modal { position: fixed; inset: 0; background: rgba(20, 24, 22, .55); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.modal[hidden] { display: none; }
.dlg { background: var(--panel); border-radius: 12px; max-width: 100%; max-height: 100%; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.dlg.small { width: 420px; padding: 20px; }
.dlg.small p { line-height: 1.7; margin: 0 0 16px; }
.dlg .acts { display: flex; justify-content: flex-end; gap: 8px; }
.dlg .acts button { border-radius: 6px; padding: 7px 14px; border: 1px solid var(--line); background: #fff; }
.dlg .acts .go { background: var(--accent); color: #fff; border-color: var(--accent); }
.dlg .acts .go.danger { background: var(--danger); border-color: var(--danger); }

.finish { width: 1180px; display: grid; grid-template-columns: 1fr 380px; }
.finish .left { padding: 18px; background: #1f2a24; display: flex; flex-direction: column; gap: 10px; }
.finish .left img { width: 100%; border-radius: 6px; background: #333; display: block; }
.finish .left .opts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: #e8e4d8; font-size: 12px; }
.finish .left select { border-radius: 6px; padding: 5px 8px; border: 0; background: #fff; color: #23221f; }
.finish .right { padding: 20px; font-size: 13px; line-height: 1.6; }
.finish h2 { margin: 0 0 4px; font-size: 18px; }
.finish .lead { color: var(--muted); margin: 0 0 14px; }
.step { display: grid; grid-template-columns: 26px 1fr; gap: 8px; margin: 12px 0; }
.step .no { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 12px; }
.step b { display: block; margin-bottom: 4px; }
.finish textarea { width: 100%; height: 170px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; font: 12px/1.55 inherit; resize: vertical; }
.finish .btn.big { background: var(--accent); color: #fff; border-color: var(--accent); padding: 8px 14px; font-size: 13px; font-weight: 700; }
.finish a.btn { display: inline-block; text-decoration: none; color: inherit; }
.note { font-size: 11.5px; color: var(--muted); background: #f1efe8; border-radius: 6px; padding: 8px 10px; line-height: 1.6; }
.close-x { float: right; border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--muted); }

@media (max-width: 1100px) {
  .tools { width: 150px; }
  .panel { width: 250px; }
  .brand span:last-child { display: none; }
  .finish { grid-template-columns: 1fr; }
}

.finish .opts.hq { background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px 10px; }
.finish .btn.big.stop { background: #b3412e; border-color: #b3412e; }
.hq-msg { color: #e8e4d8; font-size: 12px; flex: 1; min-width: 180px; }
.bar { width: 100%; height: 6px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
.bar[hidden] { display: none; }
.bar i { display: block; height: 100%; width: 0; background: #d9a441; transition: width .3s; }

.gl-error { position: fixed; left: 50%; top: 80px; transform: translateX(-50%); z-index: 50; max-width: 560px;
  background: #b3412e; color: #fff; padding: 14px 18px; border-radius: 10px; line-height: 1.7; box-shadow: 0 10px 30px rgba(0,0,0,.3); }

/* ---- 共通：読み込み画面・メニュー・描画バー ---- */
.splash { position: fixed; inset: 0; z-index: 100; background: #1f2a24; color: #f1efe8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 700; letter-spacing: .05em; }
.splash .sub { font-weight: 400; font-size: 13px; color: #b9c2bc; margin: 0; }
.splash p { margin: 0; }
.splash.hide { opacity: 0; pointer-events: none; transition: opacity .3s; }
.logo.big { width: 54px; height: 54px; border-radius: 12px; margin-bottom: 8px; }
.primary .sp { display: none; }
.menu-btn { display: none; font-size: 18px !important; line-height: 1; }
.menu { position: fixed; right: 8px; top: 56px; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.2); padding: 6px; display: flex; flex-direction: column; min-width: 200px; }
.menu[hidden] { display: none; }
.menu button { text-align: left; background: transparent; border: 0; padding: 12px 12px; border-radius: 6px; font-size: 15px; }
.menu button:hover { background: #f0eee7; }
.menu-time { display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 13px; color: var(--muted); }
.menu-time button { flex: 1; white-space: nowrap; text-align: center !important; border: 1px solid var(--line) !important; padding: 8px 4px !important; font-size: 14px !important; color: var(--text); }
.menu-time button.on { background: var(--accent-soft); border-color: #b7d3c2 !important; font-weight: 700; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.sheet-close { display: none; }
.draw-bar { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 6; width: max-content; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  background: rgba(31, 42, 36, .92); color: #fff; padding: 8px; border-radius: 12px; max-width: calc(100% - 16px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.draw-bar[hidden], .draw-bar [hidden] { display: none !important; }
.draw-bar button { background: #fff; color: #1f2a24; border: 0; border-radius: 8px; padding: 8px 10px; font-size: 14px; min-height: 40px; }
.draw-bar button.go { background: #d9a441; font-weight: 700; }
.draw-bar button.on { background: #9fd3b4; }
.db-msg { font-size: 12px; width: 100%; text-align: center; color: #dfe6e1; }
.db-msg:empty { display: none; }
.db-len { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.db-len input { width: 72px; border: 0; border-radius: 8px; padding: 8px; font-size: 16px; }

/* ---- 携帯（幅760px以下） ---- */
@media (max-width: 760px) {
  .top { gap: 6px; padding: 0 6px; height: 52px; padding-top: env(safe-area-inset-top); }
  #timeSeg, .brand span:last-child, .proj-name, .top .btns [data-act=new], .top .btns [data-act=open], .top .btns [data-act=save], .top .btns [data-act=sample], .sep, #modeSeg [data-mode=split] { display: none; }
  .menu-btn { display: inline-block; }
  .top .btns button, .seg button { padding: 7px 9px; font-size: 13px; }
  .primary { padding: 8px 10px; font-size: 13px; }
  .primary .pc { display: none; }
  .primary .sp { display: inline; }
  .app { flex-direction: column; }
  .stage { order: 1; flex: 1; min-height: 0; }
  .tools { order: 2; width: auto; height: 72px; flex: none; display: flex; align-items: stretch; gap: 4px; overflow-x: auto; overflow-y: hidden;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tools::-webkit-scrollbar { display: none; }
  .tools h3 { flex: none; align-self: center; margin: 0 2px 0 8px; font-size: 10px; writing-mode: vertical-rl; letter-spacing: .1em; }
  .tool { flex: none; width: auto; min-width: 66px; flex-direction: column; justify-content: center; gap: 4px; padding: 4px 6px; font-size: 11px; line-height: 1.2; text-align: center; white-space: nowrap; }
  .tool .sw { width: 24px; height: 24px; }
  .tool .kbd { display: none; }
  .panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 58vh; z-index: 20; border: 1px solid var(--line); border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 30px rgba(0,0,0,.25); transform: translateY(105%); transition: transform .25s ease; padding-bottom: env(safe-area-inset-bottom); }
  .panel.open { transform: none; }
  .sheet-close { display: block; border: 0; background: transparent; padding: 10px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
  .panel-body { font-size: 15px; }
  .field input[type=number], .field input[type=text], .field select { font-size: 16px; padding: 9px 10px; }
  .mats { grid-template-columns: repeat(3, 1fr); }
  .rowbtns button { padding: 10px 12px; font-size: 14px; }
  .status, .view-hint { display: none; }
  .cam-btns { left: 60px; }
  .cam-btns button { padding: 6px 8px; font-size: 12px; }
  .pane-tag { font-size: 11px; }
  .toast { top: 8px; max-width: 90%; text-align: center; }
  .draw-bar { bottom: 10px; }
  .modal { padding: 0; }
  .dlg.finish { width: 100%; height: 100%; border-radius: 0; display: block; overflow-y: auto; }
  .finish .left { padding: 12px; }
  .finish .right { padding: 16px; }
  .finish textarea { height: 130px; font-size: 14px; }
  .finish .opts.hq.light { display: none; }
  .dlg.small { width: calc(100% - 24px); }
}

.img-note { color: #e8e4d8; font-size: 13px; padding: 40px 0; text-align: center; }
.img-note[hidden] { display: none; }

.guide-btn { background: transparent; border: 1px solid #3c4d43; border-radius: 6px; padding: 5px 10px; color: #e6e3da; text-decoration: none; font-size: 14px; white-space: nowrap; }
.guide-btn:hover { background: #2c3a32; }
@media (max-width: 760px) { .guide-btn { display: none; } .menu a { display: block; text-decoration: none; color: inherit; padding: 12px; border-radius: 6px; font-size: 15px; } }
@media (min-width: 761px) { .menu a { display: none; } }

.pdf-night { color: #e8e4d8; font-size: 13px; display: flex; align-items: center; gap: 4px; }