* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; /* dvh: モバイルのアドレスバー分を考慮 */
  background: #1b1d23; color: #e7e9ee;
}
.drawer-close, #listFab { display: none; } /* モバイルでのみ表示 */

/* ---- toolbar ---- */
#toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 14px; background: #23262f; border-bottom: 1px solid #333845;
}
#toolbar h1 { font-size: 16px; margin: 0 8px 0 0; white-space: nowrap; }
.tb-group { display: flex; align-items: center; gap: 6px; }
.tb-label { font-size: 12px; color: #9aa1ad; }
.btn {
  background: #353a47; color: #e7e9ee; border: 1px solid #444b5a; border-radius: 6px;
  padding: 6px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; line-height: 1;
}
.btn:hover { background: #404657; }
.btn.active { background: #2f6df0; border-color: #2f6df0; }
.btn.danger { background: #7a2f2f; border-color: #9a3a3a; }
.btn.danger:hover { background: #9a3a3a; }
.chk { font-size: 13px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
#fpsHeight { width: 54px; }
select { background: #353a47; color: #e7e9ee; border: 1px solid #444b5a; border-radius: 6px; padding: 5px; font-size: 13px; }

/* ---- main layout ---- */
#main { flex: 1; display: flex; min-height: 0; }
aside {
  width: 250px; background: #23262f; overflow-y: auto; padding: 12px;
  flex-shrink: 0;
}
#listPanel { border-right: 1px solid #333845; }
#propPanel { border-left: 1px solid #333845; }
aside h2 { font-size: 13px; color: #9aa1ad; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .04em; }
.empty-hint { font-size: 12px; color: #6b7280; line-height: 1.6; }

/* ---- layer list ---- */
#layerList { list-style: none; margin: 0; padding: 0; }
#layerList li {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px;
  border: 1px solid transparent; background: #2b2f3a; margin-bottom: 4px; font-size: 12px; cursor: pointer;
}
#layerList li:hover { background: #323744; }
#layerList li.active { border-color: #2f6df0; background: #2c3650; }
#layerList li.layer-hidden .nm { color: #6b7280; }
#layerList .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#layerList .eye { min-width: 28px; }
#layerList .del { background: #5a2e2e; border: 1px solid #7a3a3a; color: #ffd; border-radius: 4px; font-size: 11px; padding: 1px 6px; cursor: pointer; flex-shrink: 0; }

/* ---- cube list ---- */
#cubeList { list-style: none; margin: 0; padding: 0; }
#cubeList li {
  padding: 8px; border-radius: 6px; cursor: pointer; margin-bottom: 4px;
  border: 1px solid transparent; background: #2b2f3a;
}
#cubeList li:hover { background: #323744; }
#cubeList li.selected { border-color: #2f6df0; background: #2c3650; }
#cubeList li.layer-hidden { opacity: .45; }
#cubeList .li-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
#cubeList .swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
#cubeList .li-tags { font-size: 11px; color: #9aa1ad; margin-top: 3px; word-break: break-word; }

/* ---- viewport ---- */
#viewport { flex: 1; position: relative; min-width: 0; }
#scene { display: block; width: 100%; height: 100%; }
#hint {
  position: absolute; left: 10px; bottom: 10px; font-size: 11px; color: #aeb4c0;
  background: rgba(20,22,28,.7); padding: 5px 9px; border-radius: 6px; pointer-events: none;
  max-width: calc(100% - 20px);
}
#loadingMsg {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(20,22,28,.85); padding: 8px 16px; border-radius: 8px; font-size: 13px;
}
#minimap {
  position: absolute; top: 10px; right: 10px; pointer-events: none;
  border: 2px solid #4a567a; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
#multiBar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(20,22,28,.88); border: 1px solid #4a567a; border-radius: 8px;
  padding: 6px 10px; font-size: 12px; z-index: 10;
}
#multiBar[hidden] { display: none; } /* display:flex が hidden 属性に勝つのを防ぐ（#0008と同じ罠） */
#multiBar .mini { float: none; }

/* ---- properties ---- */
.field { display: block; font-size: 12px; color: #9aa1ad; margin-bottom: 10px; }
.field input[type=text] { width: 100%; margin-top: 4px; }
input[type=text], input[type=number] {
  background: #2b2f3a; color: #e7e9ee; border: 1px solid #444b5a; border-radius: 5px;
  padding: 6px; font-size: 13px;
}
input[type=color] { width: 100%; height: 32px; margin-top: 4px; background: #2b2f3a; border: 1px solid #444b5a; border-radius: 5px; cursor: pointer; }
.dims { border: 1px solid #333845; border-radius: 6px; padding: 8px; margin: 0 0 12px; }
.dims legend { font-size: 11px; color: #9aa1ad; padding: 0 4px; }
.dims label { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 6px; }
.dims label:last-child { margin-bottom: 0; }
.dims input { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 12px; }
.chips .chip { background: #2c3650; border: 1px solid #3a4a72; color: #cdd6ea; font-size: 11px; padding: 2px 7px; border-radius: 10px; }
.prop-actions { display: flex; gap: 6px; flex-wrap: wrap; }
#propPanel.disabled #propFields { display: none; }

/* ---- group / NxM array ---- */
#cubeList .li-group { font-size: 11px; color: #8fb3e8; margin-top: 3px; word-break: break-word; }
.chk.gm { margin: -4px 0 12px; font-size: 12px; color: #9aa1ad; }
.array-desc { font-size: 12px; color: #aab1bd; line-height: 1.6; margin: 6px 0 12px; }
#arrayModal .field input[type=number] { width: 100%; margin-top: 4px; }
#arrayModal .chk { margin: 10px 0; font-size: 12px; }
#arrayRun { width: 100%; margin-top: 4px; }

/* ---- interaction mode buttons ---- */
.btn.imode.active { background: #2f6df0; border-color: #2f6df0; }

/* ---- 3D overlay labels ---- */
#labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.olabel {
  position: absolute; transform: translate(-50%, -50%);
  background: rgba(20, 22, 28, .82); color: #fff; font-size: 11px; line-height: 1.3;
  padding: 1px 7px; border-radius: 8px; white-space: nowrap; border: 1px solid #4a567a;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.olabel.measure { border-color: #b9933a; color: #ffe9b3; }
.olabel.outlet { border-color: #c8722f; color: #ffd9b3; }
.olabel.note { border-color: #b5a23a; color: #fff3b0; background: rgba(58, 52, 20, .88); max-width: 240px; white-space: normal; line-height: 1.4; }
.olabel.cube .tg { color: #9fc0ff; font-size: 10px; margin-left: 5px; }

/* ---- preset list ---- */
#presetList { list-style: none; margin: 0; padding: 0; }
#presetList li {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px;
  background: #2b2f3a; margin-bottom: 4px; cursor: pointer;
}
#presetList li:hover { background: #323744; }
#presetList .swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
#presetList .pp-body { flex: 1; min-width: 0; }
#presetList .pp-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#presetList .pp-dim { font-size: 11px; color: #9aa1ad; margin-top: 2px; }
#presetList .badge { font-size: 9px; color: #7e8696; border: 1px solid #444b5a; border-radius: 8px; padding: 0 5px; flex-shrink: 0; }
#presetList .del { background: #5a2e2e; border: 1px solid #7a3a3a; color: #ffd; border-radius: 4px; font-size: 11px; padding: 1px 6px; cursor: pointer; flex-shrink: 0; }

/* ---- measure list ---- */
.mt { margin-top: 18px !important; }
.mini { font-size: 11px; background: #353a47; border: 1px solid #444b5a; color: #cdd6ea; border-radius: 5px; padding: 2px 7px; cursor: pointer; float: right; }
.mini:hover { background: #404657; }
#measureList { list-style: none; margin: 0; padding: 0; }
#measureList li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 6px; background: #2b2f3a; margin-bottom: 4px; font-size: 12px; cursor: pointer; }
#measureList li:hover { background: #323744; }
#measureList li.active { border: 1px solid #c8722f; }
#measureList .del { background: #5a2e2e; border: 1px solid #7a3a3a; color: #ffd; border-radius: 4px; font-size: 11px; padding: 1px 6px; cursor: pointer; flex-shrink: 0; }

/* ---- drive modal ---- */
.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  display: flex; align-items: flex-start; justify-content: center; z-index: 50;
  padding: 40px 16px; overflow-y: auto;
}
/* display:flex が hidden 属性(UAの display:none)に勝ってしまうため明示する */
.modal[hidden] { display: none; }
.modal-card {
  background: #23262f; border: 1px solid #333845; border-radius: 10px;
  width: 100%; max-width: 420px; padding: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.modal-head h2 { margin: 0; text-transform: none; letter-spacing: 0; font-size: 15px; color: #e7e9ee; }
.drive-status { font-size: 12px; color: #9aa1ad; min-height: 16px; margin-bottom: 8px; }
.drive-status.ok { color: #7bd88f; }
.drive-status.err { color: #ff9b9b; }
#driveSettings { border: 1px solid #333845; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
#driveSettings summary { cursor: pointer; font-size: 12px; color: #9aa1ad; }
#driveSettings .field { margin-top: 8px; }
.drive-help { border: 1px solid #333845; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.drive-help summary { cursor: pointer; font-size: 12px; color: #cdd6ea; font-weight: 600; }
.drive-help .help-body { font-size: 12px; color: #aab1bd; line-height: 1.7; margin-top: 8px; }
.drive-help .help-body p { margin: 6px 0; }
.drive-help .help-h { color: #e7e9ee; font-weight: 600; margin-top: 12px !important; }
.drive-help ol, .drive-help ul { margin: 4px 0; padding-left: 20px; }
.drive-help li { margin-bottom: 4px; }
.drive-help code { background: #2b2f3a; border: 1px solid #3a3f4b; border-radius: 3px; padding: 0 4px; font-size: 11px; color: #d6def0; }
.drive-help a { color: #6fa8ff; }
.drive-help b { color: #e7e9ee; }
.drive-help .ok-ex { color: #7bd88f; }
.drive-help .help-note { color: #c8b58a; margin-top: 12px !important; }
#driveLayoutList, #driveGlbList { list-style: none; margin: 0; padding: 0; }
#driveLayoutList li, #driveGlbList li {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px;
  background: #2b2f3a; margin-bottom: 4px; font-size: 13px;
}
#driveLayoutList li:hover, #driveGlbList li:hover { background: #323744; }
.drive-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.drive-sub { font-size: 11px; color: #7e8696; flex-shrink: 0; }
#driveLayoutList .del { background: #5a2e2e; border: 1px solid #7a3a3a; color: #ffd; border-radius: 4px; font-size: 11px; padding: 1px 6px; cursor: pointer; flex-shrink: 0; }

/* ---- responsive（スマホ: 3D全画面 + パネルはドロワー） ---- */
@media (max-width: 820px) {
  /* ツールバーは折り返さず横スクロール1行 */
  #toolbar {
    flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 6px 8px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  #toolbar h1 { display: none; } /* タイトルよりボタンを優先 */
  .tb-group { flex-shrink: 0; }
  .btn, .mini, select { padding: 9px 12px; font-size: 13px; } /* タップしやすい大きさに */

  /* 3Dビューポートが全面。パネルは下からのドロワー */
  #viewport { min-height: 0; }
  aside {
    position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 55vh; max-height: 55dvh; z-index: 30;
    border: none; border-top: 1px solid #4a567a; border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .55);
    transform: translateY(105%); transition: transform .22s ease;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  aside.open { transform: translateY(0); }

  .drawer-close { display: block; position: sticky; top: 0; float: right; z-index: 5; }
  #listFab {
    display: block; position: absolute; left: 10px; bottom: 48px; z-index: 20;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
  }
  #hint { font-size: 10px; }
  #cubeList li, #presetList li, #measureList li { padding: 10px; } /* タップ領域拡大 */
}