/* ==== デザインの決まり（docs/design/README.md）。値は編集画面（Editor）から取った。今の画面も React の画面（web/src/index.css が同じ変数を読む）もここを使う ====
   部品（クラス）：ボタン .btn（主）・.btn.sub・.btn.line・.btn.ghost・.btn.danger・.btn.sm／小さなボタン .chip（選んでいる .on）・切り替え .viewsw・タブ .tabs・.settabs／
   入力 input[type=text] などと .field／パネル .panel・浮かぶ窓 .pop・.setbox・.drawer／表 table.zebra・小さな表 .bomtab／木 .tr／ダイアログ dialog／印 .state・.tag・.chip */
:root {
  /* 色（明るい）。基本設定の「画面の色」でダークにすると、下で入れ替える */
  --bg: #f6f7f9; --panel: #ffffff; --text: #1d2330; --muted: #5d6675; --line: #dfe3ea;
  --accent: #1f5fbf; --ok: #1f8a4c; --warn: #b26b00; --err: #b3261e;
  --view: #eef1f6; --hover: #eef1f6; --sel: #dbe8ff; --subtle: #e8edf5; --zebra: #f8fafd; --float: rgba(255,255,255,.96);
  --note: #fff6dd; --orange-soft: #fff1e0; --ok-soft: #e2f4ea; --err-soft: #fbe7e6; --shadow: rgba(0,0,0,.12);
  /* 色（明るい・暗いで同じ）：見出しの帯・下の帯の紺、編集画面の「いま使っている道具・編集中」の橙（ほかの画面では使わない）、選ぶ・入れている欄の青 */
  --band: #13233f; --band-hover: #29405e; --active: #ff8a00; --blue: #1f6feb; --backdrop: rgba(0,0,0,.3);
  /* 文字 */
  --font: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs: 15px; --fs-ui: 13px; --fs-sm: 12px; --fs-xs: 11.5px;  /* 本文・部品（ボタン・メニュー・欄）・小さな部品（.chip・表の小さい欄）・注記 */
  /* 余白・角丸・影・動き */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --r-sm: 4px; --r: 6px; --r-lg: 8px; --r-pill: 12px;  /* 小さな欄・ボタンと欄とメニュー・パネルと窓とダイアログ・チップとタブ */
  --sh-bar: 0 2px 8px rgba(0,0,0,.12); --sh-pop: 0 4px 16px rgba(0,0,0,.12); --sh-win: 0 6px 22px rgba(0,0,0,.18);  /* 道具の帯・浮かぶ欄・別ウィンドウ */
  --dur: .12s;
  color-scheme: light;
}
:root[data-theme=dark] {
  --bg: #0f141b; --panel: #171d26; --text: #e3e8ef; --muted: #95a1b3; --line: #2c3542;
  --accent: #6aa1ff; --ok: #4cc488; --warn: #f0a640; --err: #ff7a70;
  --view: #1c232d; --hover: #232c39; --sel: #1f3554; --subtle: #232c39; --zebra: #1a212b; --float: rgba(23,29,38,.92);
  --note: #3a3220; --orange-soft: #3d2b15; --ok-soft: #183626; --err-soft: #3d1d1b; --shadow: rgba(0,0,0,.5);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs)/1.6 var(--font); }
header { position: relative; z-index: 3000000; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--band); color: #fff; }
header a { color: #fff; text-decoration: none; }
header .title .logo { width: 26px; height: 26px; vertical-align: -7px; margin-right: 8px; background: #fff; border-radius: 5px; padding: 2px; }
header .title { font-weight: 700; font-size: 17px; letter-spacing: .02em; }
header .sp { flex: 1; }
header .user { font-size: 13px; opacity: .85; }
header select.scope, header select.devuser { font-size: 13px; padding: 2px 4px; max-width: 220px; width: auto; margin: 0; }
.pickrow select { width: auto; display: inline-block; margin: 4px 8px 4px 0; }
main { max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { font-size: 20px; margin: 4px 0 16px; }
h2 { font-size: 16px; margin: 0 0 10px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > .panel { flex: 1 1 360px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
.btn { display: inline-block; border: 0; border-radius: var(--r); padding: var(--sp-2) 14px; background: var(--accent); color: #fff; font: inherit; cursor: pointer; text-decoration: none; }
.btn.sub { background: var(--subtle); color: var(--text); }
.btn:disabled { opacity: .5; cursor: default; }
/* ボタンの仲間（React の Button の variant・size。編集画面の .chip と道具の帯のボタンの形） */
.btn.line { background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost { background: none; color: var(--text); }
.btn.line:hover:not(:disabled), .btn.ghost:hover:not(:disabled) { background: var(--hover); }
.btn.danger { background: var(--err); }
.btn.sm { padding: 3px 10px; font-size: var(--fs-ui); }
.btn.icon { display: inline-flex; align-items: center; justify-content: center; padding: 6px; }
.btn svg { width: 16px; height: 16px; vertical-align: -3px; }
.btn:not(.icon) svg { margin-right: 6px; }
label { display: block; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=password], select, textarea { width: 100%; padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r); font: inherit; background: var(--panel); }
.field { padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r); font: inherit; background: var(--panel); color: var(--text); }  /* 型の無い・メールの欄など（幅は使う所で。React の Input） */
textarea { font-family: var(--mono); font-size: 13px; }
.hint { color: var(--muted); font-size: 13px; }
.hint.warn { color: var(--warn); }
.state { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: var(--subtle); }
.state.run { background: var(--sel); color: var(--accent); }
.state.done { background: var(--ok-soft); color: var(--ok); }
.state.bad { background: var(--err-soft); color: var(--err); }
.big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpis { display: flex; gap: 24px; flex-wrap: wrap; }
.kpi .lab { color: var(--muted); font-size: 13px; }
.log { height: 360px; overflow: auto; background: #0f1724; color: #d6dde8; font: 12.5px/1.5 var(--mono); padding: 10px; border-radius: 6px; }
.log .t { color: #7d8aa0; margin-right: 8px; }
.log .say { color: #e8eef7; }
.log .tool { color: #9fc3ff; }
.log .studio { color: #8fe3b0; }
.log .error { color: #ff9c94; }
.log .stage { color: #ffd479; font-weight: 700; }
/* タブ（実行の画面の回・表示の切り替え）：編集画面のチップと 3D/図面 の切り替え（.viewsw）の形と色。選んでいるものは accent で塗る。大きさ（並び）は今のまま */
.tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: var(--r-pill); padding: 4px 10px; cursor: pointer; font: inherit; font-size: var(--fs-ui); }
.tabs button:hover:not(.on) { background: var(--hover); }
.tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ifcbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.ifcbar .tabs { margin-bottom: 0; }
.ifcset { position: relative; font-size: 13px; }
.ifcset summary { cursor: pointer; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; background: var(--panel); list-style: none; }
.ifcset summary::before { content: '⚙ '; }
.ifcset[open] summary { background: var(--subtle); }
.ifcset .setbox { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; width: max-content; max-width: 90vw; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; box-shadow: var(--sh-pop); display: grid; gap: 6px; }
.ifcset .sethead { font-weight: 700; font-size: 12px; color: var(--muted); margin-top: 4px; }
label.chk { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; margin: 0; font-size: 13px; cursor: pointer; }
#ifc-props .carry { background: var(--note); border: 1px solid #f0d58a; border-radius: 4px; padding: 4px 6px; margin-bottom: 8px; font-size: 12px; }
/* IFC ビューワ：左にツリー、真ん中に 3D、右に属性 */
.ifcv { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 8px; height: 640px; }
.ifc-left { display: grid; grid-template-rows: 3fr 2fr; gap: 8px; min-height: 0; }
/* IFC の欄の上（編集画面）：レイヤと、構造の操作 */
.ifc-left:has(> .ifchead) { grid-template-rows: auto 3fr 2fr; }
.ifchead { display: grid; gap: 4px; font-size: 12px; }
.ifchead:empty { display: none; }
.ifchead .vlrow, .ifchead .strow { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.ifchead button { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 1px 6px; font: inherit; font-size: 11.5px; cursor: pointer; color: var(--text); white-space: nowrap; }
.ifchead button:hover { background: var(--hover); }
.ifchead button.on { background: #1f5fbf; border-color: #1f5fbf; color: #fff; }
.ifchead .lysel { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.ifchead .lysel select { font: inherit; border: 1px solid var(--line); border-radius: 12px; padding: 1px 4px; background: var(--panel); color: var(--text); max-width: 7.5em; font-size: 11.5px; }
.ifchead .lyact { display: inline-flex; gap: 2px; }
.ifchead .lyact button { padding: 1px 4px; border-radius: 6px; }
.ifchead .hint { color: var(--muted); }
.ifchead .sthome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b45309; }
/* ツリーの所属の行：いまの所属は ★、マウスを乗せると ⇢・＋・× */
.ifc-side .tr.sp.home { background: var(--orange-soft); }
.ifc-side .tr.sp.home .tl::before { content: '★ '; color: var(--active); }
.ifc-side .tr .tact { display: none; margin-left: auto; gap: 2px; }
.ifc-side .tr:hover .tact { display: inline-flex; }
.ifc-side .tr .tact button { border: 1px solid var(--line); background: var(--panel); border-radius: 4px; padding: 0 5px; font-size: 11px; cursor: pointer; color: var(--text); line-height: 16px; }
.ifc-side .tr .tact button:hover { background: var(--hover); }
#viewer .stpanel.matonly .sthead, #viewer .stpanel.matonly .strow0, #viewer .stpanel.matonly .sttree { display: none; }
#viewer .stpanel.matonly { left: 8px; right: auto; top: 52px; }  /* IFC の欄の「材料」から開く：IFC の欄のすぐ横に */
#viewer .stpanel:not(.matonly) .mclose { display: none; }
#viewer .stpanel.matonly .matead { margin-top: 0 !important; }
.ifcv #viewer { height: 100%; }
.ifc-side { overflow: auto; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; background: var(--panel); }
#ifc-props { padding: 8px 10px; }
#ifc-props h3 { font-size: 14px; margin: 0 0 6px; word-break: break-all; }
#ifc-props h4 { font-size: 12.5px; margin: 12px 0 4px; color: var(--accent); }
#ifc-props table { font-size: 12px; }
#ifc-props th, #ifc-props td { padding: 3px 4px; word-break: break-all; }
#ifc-props th { width: 40%; white-space: normal; }
.tr { display: flex; align-items: center; gap: 4px; padding: 2px 6px; cursor: pointer; white-space: nowrap; }
.tr:hover { background: var(--hover); }
.tr.sel { background: var(--sel); }
.tr .tw { width: 12px; flex: none; color: var(--muted); }
.tr input.vis { margin: 0 2px 0 0; flex: none; width: 13px; height: 13px; cursor: pointer; }
.tr .tl { overflow: hidden; text-overflow: ellipsis; }
.tr .tc { color: var(--muted); font-size: 11px; }
.tr .cnt { margin-left: auto; color: var(--muted); font-size: 11px; padding-left: 6px; }
@media (max-width: 900px) {
  .ifcv { grid-template-columns: 1fr; height: auto; }
  .ifcv #viewer { height: 420px; }
  .ifc-left { grid-template-rows: auto auto; }
  .ifc-side { max-height: 260px; }
}
.cullrow input[type=range] { width: 120px; }
.cullrow b { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 44px; }
.statsbox { position: absolute; left: 8px; bottom: 40px; z-index: 20; display: grid; gap: 1px; padding: 6px 8px; border-radius: 6px; background: #0f1a2ecc; color: #e8edf5; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; pointer-events: auto; }  /* 表示設定の「統計」 */
.statsbox div { display: flex; justify-content: space-between; gap: 12px; }
.statsbox span { color: #9fb0c8; }
#viewer { width: 100%; height: 520px; border-radius: 6px; background: var(--view); position: relative; isolation: isolate; }  /* 3D の中の帯・印（z-index 8〜30）が、ページの基本設定・表示などの浮かぶ欄の上に出ないよう、3D の中だけで重ねる */
#viewer .vnote { position: absolute; left: 8px; top: 8px; right: 120px; background: var(--note); border: 1px solid #f0d58a; border-radius: 4px; padding: 4px 8px; font-size: 12px; white-space: pre-line; pointer-events: none; }
#viewer .msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.err { color: var(--err); }
/* 『デバイスのスペックが足りません』（static/conv/client.js の specError）と、軽量表示を作っている間の知らせ */
.specerr { border: 1px solid var(--err); border-radius: 4px; padding: 6px 10px; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.specerr > div { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
#viewer .convnote { position: absolute; right: 8px; bottom: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px; font-size: 12px; color: var(--muted); }
.report { max-height: 420px; overflow: auto; white-space: pre-wrap; font-size: 13.5px; }
[hidden] { display: none !important; }
.num-in { width: 70px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.stath { font-size: 14px; margin: 14px 0 4px; }
table.stats td.big2 { font-size: 18px; font-weight: 700; }

.pickrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.picked { margin-top: 6px; background: var(--hover); border: 1px solid var(--sel); border-radius: var(--r); padding: 6px 10px; font-size: 14px; }
.linkbtn { border: 0; background: none; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
dialog#hist { width: min(900px, 94vw); border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; }
dialog#hist::backdrop { background: var(--backdrop); }
.histbox { max-height: 60vh; overflow: auto; }
#histrows td.files { max-width: 360px; font-size: 13px; }

/* ---- 一覧（トップ）・表の見やすさ ---- */
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pagehead h1, .pagehead h2 { margin: 0; }
.headtools { display: flex; gap: 8px; align-items: center; }
.headtools .search { width: 260px; }
.headtools .btn { white-space: nowrap; }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.zebra thead th { background: var(--subtle); border-bottom: 2px solid var(--line); }
table.zebra tbody tr:nth-child(even) { background: var(--zebra); }
table.zebra tbody tr:hover { background: var(--hover); }
.nowrap { white-space: nowrap; }
.tag { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--fs-sm); white-space: nowrap; }
.tag.on { background: var(--sel); color: var(--accent); }
.tag.off { background: var(--orange-soft); color: var(--warn); }
.ver { display: inline-block; font-family: var(--mono); font-size: 12px; background: var(--band); color: #fff; border-radius: 4px; padding: 1px 6px; }
.ver:empty { display: none; }
.ver-line { margin-top: 6px; }
input.search { width: min(320px, 100%); padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; }
.recent { font-weight: 400; margin: 0; font-size: 14px; color: var(--muted); }
.num-in { width: 64px; text-align: right; }

.statgrid { display: grid; gap: 12px; }
.statcard { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.statcard .band { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 12px; font-weight: 700; color: #fff; }
.statcard .band span { font-weight: 400; font-size: 13px; opacity: .9; }
.statcard.on .band { background: #1f5fbf; }
.statcard.off .band { background: #c77700; }
.statcard .tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.statcard .tile.rep { grid-column: span 2; }
.statcard .tile .subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.statcard .tile .lab2 { font-size: 11px; color: var(--muted); }
.statcard .tile .subs .v { font-size: 22px; }
.statcard .tile { padding: 10px 12px; border-right: 1px solid var(--line); }
.statcard .tile:last-child { border-right: 0; }
.statcard .tile .lab { font-size: 12px; color: var(--muted); }
.statcard .tile .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.statcard .tile .rv { font-size: 12px; color: var(--muted); }
.statcard .tile .rv b { font-size: 14px; color: var(--text); }
.good { color: var(--ok) !important; }
.mid { color: var(--warn) !important; }
.low { color: var(--err) !important; }

/* ---- スマホ ---- */
@media (max-width: 700px) {
  body { font-size: 14px; }
  main { padding: 12px; }
  header { flex-wrap: wrap; gap: 10px; padding: 8px 12px; }
  header .user { display: none; }
  .panel { padding: 12px; }
  h1 { font-size: 18px; }
  th, td { padding: 5px 6px; }
  /* 再現性・正解率は 2 つ並べ、回数・コストは 3 つ並べる */
  .statcard .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .statcard .tile { grid-column: span 3; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 10px; }
  .statcard .tile.rep { grid-column: span 6; }
  .statcard .tile:nth-child(n+3) .v { font-size: 17px; }
  .statcard .tile .subs .v { font-size: 20px; }
  /* 表は折り返さずに横へスクロールする */
  .tscroll table th, .tscroll table td { white-space: nowrap; }
  .tscroll { margin: 0 -12px; padding: 0 12px; }
  .statcard .tile .v { font-size: 22px; }
  .kpis { gap: 14px; }
  .big { font-size: 22px; }
  #viewer, .ifcv #viewer { height: 340px; }
  .pickrow { flex-direction: column; align-items: stretch; }
  .headtools { width: 100%; }
  .headtools .search { flex: 1; width: auto; min-width: 0; }
}

/* 修正（試し） */
.corrsw { border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; background: var(--panel); }
.corrsw:has(input:checked) { background: var(--orange-soft); border-color: var(--active); }
.corr { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.corrhead { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.edits { margin: 6px 0 0; padding-left: 1.6em; font-size: 13px; }
.edits li { margin: 3px 0; }
/* 履歴（編集画面の右の欄）：種類ごとの色の帯・番号の横に選ぶチェック */
.drawer .edits { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; }
.drawer .edits li { --hc: #64748b; margin: 0; padding: 5px 8px 6px 9px; border: 1px solid var(--line); border-left: 4px solid var(--hc); border-radius: 6px;
  background: color-mix(in srgb, var(--hc) 6%, var(--panel)); }
.drawer .edits li.sel { background: color-mix(in srgb, var(--active) 14%, var(--panel)); border-color: var(--active); border-left-color: var(--hc); }
.drawer .edits li.h-mk { --hc: #16a34a; } .drawer .edits li.h-geo { --hc: #2563eb; } .drawer .edits li.h-del { --hc: #dc2626; }
.drawer .edits li.h-at { --hc: #9333ea; } .drawer .edits li.h-ann { --hc: #d97706; }
.drawer .edits .hrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.drawer .edits .hno { display: inline-flex; align-items: center; gap: 4px; min-width: 3.4em; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.drawer .edits .hno input { width: auto; margin: 0; accent-color: var(--active); }
.drawer .edits .hop { color: var(--hc); font-weight: 700; }
.drawer .edits .hlab { font-weight: 500; }
.drawer .edits .hwhy { display: flex; gap: 4px; margin-top: 4px; padding-left: 3.4em; }
.drawer .edits .hwhy input { flex: 1; min-width: 0; width: auto; }
.drawer .histbar { position: sticky; top: 30px; z-index: 1; display: flex; align-items: center; gap: 8px; background: var(--panel); padding: 4px 0 6px; border-bottom: 1px solid var(--line); }
.drawer .histbar .hint { flex: 1; font-size: 11.5px; }
.drawer .histgo { border: 1px solid var(--active); background: var(--active); color: #fff; border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.drawer .histgo:disabled { background: none; color: var(--muted); border-color: var(--line); cursor: default; }
.edits .pars { color: var(--muted); font-size: 12px; }
.edits .par { width: 5.5em; font-size: 12px; padding: 0 3px; }
.edits select, .edits input { width: auto; padding: 2px 6px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; }
.edits input { width: 16em; max-width: 60vw; }
#viewer .edbar { position: absolute; left: 8px; top: 8px; z-index: 8; display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  background: var(--float); border: 1px solid var(--line); border-radius: 8px; padding: 3px; box-shadow: var(--sh-bar); font-size: 13px; }
#viewer .edbar button { border: 0; background: none; padding: 5px 7px; display: inline-flex; border-radius: 6px; cursor: pointer; font: inherit; color: var(--text); }
#viewer .edbar button:hover { background: var(--hover); }
#viewer .edbar button.on { background: var(--active); color: #fff; }
#viewer .edbar .sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
#viewer .edbar .st { min-width: 20px; height: 20px; padding: 0 6px; margin: 0 4px; border-radius: 10px; background: var(--active); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
#viewer .edbar .st[hidden] { display: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px; font-size: 12px; background: var(--panel); color: inherit; text-decoration: none; cursor: pointer; font-family: inherit; }
span.chip { cursor: default; background: var(--subtle); }
#viewer .edlabel { position: absolute; z-index: 4; pointer-events: none; background: #1d2330; color: #fff; font-size: 13px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#viewer.editing .vnote { top: 52px; }
.ifc-side td.ed { cursor: text; }
.ifc-side td.ed:hover { background: var(--orange-soft); }
.ifc-side .cellin { width: 100%; padding: 2px 4px; font: inherit; border: 1px solid var(--active); border-radius: 3px; }
#viewer .edbar[hidden], #viewer .edlabel[hidden] { display: none; }
header .nav.on { border-bottom: 2px solid var(--active); padding-bottom: 2px; }

/* 編集画面 */
body.editpage main { max-width: none; padding: 8px 12px; }
.edtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.edtop .chip.on { background: var(--active); border-color: var(--active); color: #fff; }
.edwrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 8px; height: calc(100vh - 96px); min-height: 420px; }
.edwrap .ifc-left { grid-template-rows: 3fr 2fr; }
.edwrap .ifc-left:has(> .ifchead) { grid-template-rows: auto 3fr 2fr; }
.edwrap #viewer { height: 100%; }
.drawer { position: absolute; right: 8px; top: 150px; bottom: 8px; width: min(420px, 80%); overflow: auto; z-index: 9; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; box-shadow: var(--sh-pop); font-size: 12.5px; }
.pop { position: absolute; z-index: 6; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px; box-shadow: var(--sh-pop); display: grid; gap: 4px; max-height: 60vh; overflow: auto; }
.pop a, .pop button { display: block; text-align: left; border: 0; background: none; padding: 5px 8px; border-radius: 4px; font: inherit; font-size: 13px; color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.pop a:hover, .pop button:hover { background: var(--hover); }
.pop .cur { font-weight: 700; }  /* 保存：作業場所の IFC の版 */
#viewer .edbar select { font: inherit; font-size: 12px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 6px; width: auto; }
@media (max-width: 760px) { .edwrap { grid-template-columns: 1fr; height: auto; } .edwrap #viewer { height: 70vh; } }
.chip.editbtn { padding: 3px 8px; }
.chip.editbtn.on { background: var(--active); border-color: var(--active); color: #fff; }
#viewer .edlabel.err { background: #b42318; }
#viewer .edlabel.dim { pointer-events: none; transform: translate(-50%, -130%); background: #1d2330; }
#viewer .edinfo { position: absolute; left: 8px; bottom: 8px; z-index: 3; max-width: calc(100% - 16px); background: rgba(29,35,48,.92); color: #fff;
  font-size: 12.5px; padding: 5px 10px; border-radius: 14px; font-variant-numeric: tabular-nums; pointer-events: none; }
#viewer .edinfo[hidden] { display: none; }
#viewer .edbar.edsub { top: calc(var(--edbar-h, 40px) + 12px); }  /* 道具の並びが 2 段になっても、その下に出す */
#viewer.editing .vnote { top: 96px; }
/* ViewCube */
#viewer .vcube { position: absolute; right: 8px; top: 8px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#viewer .vcube canvas { display: block; }
#viewer .vbtn { border: 1px solid var(--line); background: var(--float); border-radius: 10px; font: inherit; font-size: 11.5px; padding: 1px 9px; cursor: pointer; color: var(--text); }
#viewer .vbtn:hover { background: var(--hover); }
#viewer .vbtn.home { align-self: flex-start; padding: 0 6px; }
.projsel { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
/* 図面投影：図ごとのチップ（青＝図面の線、赤＝モデルと合わない所） */
.chip.editbtn#projbtn.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.projbar { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 8px; }
.projbar .chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.projbar .chip b { font-weight: 600; color: var(--blue); }
.projbar .chip b.bad { color: #e0262f; }
.projbar .chip.on b { color: #fff; }
/* ホーム：新規作成・プロジェクト一覧・生成のカード */
.homecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 24px; }
.homecard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 44px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--text); text-decoration: none; font-size: 18px; font-weight: 700; transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur); }
.homecard:hover { transform: translateY(-2px); box-shadow: var(--sh-pop); border-color: var(--accent); color: var(--accent); }
/* 窓選択：左から右は実線（全部入る部材）、右から左は破線（かかる部材） */
.selbox { position: absolute; border: 1px solid var(--blue); background: rgba(31, 111, 235, .08); pointer-events: none; z-index: 5; }
.selbox.cross { border-style: dashed; background: rgba(22, 163, 74, .08); border-color: #16a34a; }
#viewer .edcoord { position: absolute; right: 8px; bottom: 8px; z-index: 3; background: var(--float); border: 1px solid var(--line); border-radius: 10px; padding: 2px 10px; font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; }
#viewer .edcoord[hidden] { display: none; }
/* 断面：右上（ViewCube の左）の小さなアイコン */
#viewer .secbar { position: absolute; top: calc(var(--edbar-h, 0px) + 12px); right: 120px; z-index: 9;  /* 編集の道具の帯（2 段になっても）の下に出す */ display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
#viewer .secbar button { border: 0; background: none; padding: 4px 6px; border-radius: 7px; cursor: pointer; color: var(--text); display: flex; }
#viewer .secbar button:hover { background: var(--hover); }
#viewer .secbar button.secreg { gap: 4px; align-items: center; font-size: 12px; font-weight: 600; color: #b42318; }
#viewer .edlabel.secmark { background: transparent; color: #6b7280; border: 0; font-weight: 700; font-size: 14px; text-shadow: 0 0 3px var(--panel), 0 0 3px var(--panel); }
.drwsecs .drwsec { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.drwsecs .drwsec button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 4px; }
.chip.editbtn#secbtn.on { background: #f59e0b; border-color: #f59e0b; color: #fff; }
/* マス目の大きさ（ViewCube の下） */
#viewer .gridlabel { position: absolute; right: 8px; top: 158px; width: 96px; text-align: center; z-index: 4; font-size: 12px; color: var(--muted); background: var(--float); border: 1px solid var(--line); border-radius: 10px; padding: 1px 0; pointer-events: none; font-variant-numeric: tabular-nums; }
/* 図面の下敷き（編集画面） */
/* 作業場所の名前（編集画面。書き換えられる） */
.chip.nameinput { width: 16em; cursor: text; font-size: 13px; padding: 3px 10px; }
.chip.nameinput:focus { outline: 2px solid var(--blue); outline-offset: 0; }
.ifc-side .tname { border-radius: 3px; }
.editpage .ifc-side .tname:hover { background: var(--hover); cursor: text; }
table th.c, table td.c { text-align: center; }
/* 基本設定（マウスの割り当て） */
.setbox .mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0; font-size: 13px; }
.setbox .mrow select { font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; max-width: 220px; }
.setbox .mreset { margin-top: 6px; }
/* 配置（図面の下敷き）のサブウィンドウ */
#viewer .ulpanel { position: absolute; right: 140px; top: 52px; z-index: 5; width: 300px; max-height: calc(100% - 64px); overflow: auto; display: grid; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px 8px; box-shadow: 0 4px 16px rgba(0,0,0,.14); font-size: 12.5px; }
#viewer .ulpanel[hidden], #viewer .ulpanel [hidden] { display: none; }
#viewer .ulpanel { user-select: none; }
#viewer .ulpanel input { user-select: text; }
#viewer .ulpanel .ulhead { display: flex; align-items: baseline; gap: 8px; cursor: move; user-select: none; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
#viewer .ulpanel .ulhead button { margin-left: auto; border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--muted); }
#viewer .ulpanel .hint { color: var(--muted); font-size: 11.5px; }
#viewer .ulpanel .ulrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#viewer .ulpanel button { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 2px 7px; font: inherit; font-size: 12px; cursor: pointer; color: var(--text); }
#viewer .ulpanel button:hover { background: var(--hover); }
#viewer .ulpanel button.on { background: var(--active); border-color: var(--active); color: #fff; }
#viewer .ulpanel button:disabled { opacity: .45; cursor: default; }
#viewer .ulpanel select { font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; width: 100%; }
#viewer .ulpanel input[type=number] { width: 72px; font: inherit; font-size: 12px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; }
#viewer .ulpanel input[type=range] { width: 70px; vertical-align: middle; }
#viewer .ulpanel .ullist { display: grid; gap: 2px; max-height: 160px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 3px; }
#viewer .ulpanel .ulitem { display: flex; align-items: center; gap: 4px; border-radius: 4px; }
#viewer .ulpanel .ulitem button { flex: 1; text-align: left; border: 0; background: none; display: flex; justify-content: space-between; gap: 6px; overflow: hidden; white-space: nowrap; }
#viewer .ulpanel .ulitem.on { background: var(--sel); }
#viewer .lypanel .ulitem button { flex: 0 0 auto; padding: 0 4px; }
#viewer .lypanel .lyname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
#viewer .ulpanel .ulprops { display: grid; gap: 5px; border-top: 1px solid var(--line); padding-top: 6px; }
/* 下敷きの図の右クリックのメニュー・図面のドロップ */
#viewer .ulmenu { position: absolute; z-index: 7; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.16); display: grid; gap: 1px; min-width: 170px; font-size: 12.5px; }
#viewer .ulmenu button { border: 0; background: none; text-align: left; padding: 4px 8px; border-radius: 4px; font: inherit; cursor: pointer; color: var(--text); }
#viewer .ulmenu button:hover { background: var(--hover); }
#viewer .ulmenu hr { border: 0; border-top: 1px solid var(--line); margin: 3px 0; }
#viewer .ulmenu .hint { color: var(--muted); font-size: 11.5px; padding: 2px 8px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewer.dropping { outline: 3px dashed var(--active); outline-offset: -6px; }
/* プロジェクト一覧：1 ページの件数とページ送り */
.perpage { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.perpage select { width: auto; padding: 3px 6px; font-size: 13px; }
.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.pager .hint { margin-right: 8px; }
.pager button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: var(--r-pill); padding: 3px 9px; font: inherit; font-size: var(--fs-ui); cursor: pointer; min-width: 32px; }  /* 形と色は .tabs と同じ、大きさは今のまま */
.pager button:hover:not(:disabled) { background: var(--hover); }
.pager button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager button:disabled { opacity: .4; cursor: default; }
/* ペンキのバケツの色 */
#viewer .paintbar .sw { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); }
#viewer .paintbar button.on { background: var(--orange-soft); }
#viewer .paintbar input[type=color] { width: 28px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; }

/* 図面化のダイアログ */
dialog.drwdlg { width: min(1180px, 96vw); max-height: 94vh; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
dialog.drwdlg::backdrop { background: var(--backdrop); }
.drwhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.drwhead .hint { flex: 1; }
.drwhead button { border: 0; background: none; font-size: 18px; cursor: pointer; }
.drwcols { display: flex; gap: 14px; align-items: flex-start; }
.drwopts { width: 300px; flex: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.drwopts fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.drwopts input[type=number] { width: 7em; }
.drwopts label:not(.chk) { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.drwopts select { flex: 1; min-width: 0; }
.drwopts label:not(.chk) input:not([type=number]) { flex: 1; min-width: 0; }
.drwbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.drwprev { position: relative; flex: 1; min-width: 0; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.drwpage { position: relative; display: inline-block; line-height: 0; }
.drwprev img { max-width: 100%; max-height: 78vh; display: block; user-select: none; -webkit-user-drag: none; }
.drwbox { position: absolute; cursor: move; border: 1px dashed transparent; border-radius: 2px; touch-action: none; }
.drwbox:hover { border-color: #2563eb; background-color: rgba(37, 99, 235, .06); }
.drwbox.drag { border-color: #2563eb; box-shadow: 0 2px 10px rgba(0,0,0,.25); background-repeat: no-repeat; background-color: #fff; z-index: 2; }
.drwhole { position: absolute; background: #fff; }
@media (max-width: 760px) { .drwcols { flex-direction: column; } .drwopts { width: 100%; } }

.drawer .drawerhead { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 8px; background: var(--panel); padding: 2px 0 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.drawer .drawerhead .hint { flex: 1; font-size: 11.5px; }
.drawer .drawerhead button { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted); }

/* ダークモード：変数にしていない所の手直し */
:root[data-theme=dark] .chip, :root[data-theme=dark] button, :root[data-theme=dark] input, :root[data-theme=dark] select, :root[data-theme=dark] textarea { color: var(--text); }
:root[data-theme=dark] input, :root[data-theme=dark] select, :root[data-theme=dark] textarea { background-color: var(--panel); border-color: var(--line); }
:root[data-theme=dark] #viewer .edlabel { background: #e3e8ef; color: #111820; }
:root[data-theme=dark] #viewer .edinfo { background: rgba(227,232,239,.92); color: #111820; }
:root[data-theme=dark] dialog { background: var(--panel); color: var(--text); }
/* 基本設定：項目ごとの見出し */
.setbox .setsec { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px; display: grid; gap: 4px; }
.setbox .setsec { border-top: 0; padding-top: 0; margin-top: 0; }
.setbox .setsec[hidden] { display: none; }
.setbox .setsec h4 { display: none; }  /* 見出しはタブに出す */
/* 基本設定のタブ */
.ifcset .setbox:has(> .settabs) { width: 400px; }  /* タブを替えても幅が変わらないように */
.setbox:has(> .settabs) .mrow > span { white-space: nowrap; }
.setbox:has(> .settabs) .hint { white-space: normal; }
.setbox .settabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: -2px -4px 4px; padding: 0 2px; }
.setbox .settabs button { border: 0; border-bottom: 2px solid transparent; background: none; padding: 4px 7px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.setbox .settabs button:hover { color: var(--text); background: var(--hover); border-radius: 4px 4px 0 0; }
.setbox .settabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.setbox .setsec h4 { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
/* クラスと種類（PredefinedType）の選択欄は細めに（道具の並びが 1 行に入るよう） */
#viewer .edbar select.cls { max-width: 128px; }
#viewer .edbar select.ptype { max-width: 92px; }

/* 3D と図面の切り替え */
.viewsw { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.viewsw button { border: 0; background: none; padding: 2px 10px; font: inherit; font-size: 12px; cursor: pointer; color: var(--text); }
.viewsw button.on { background: var(--accent); color: #fff; }
.sheetpane { position: absolute; z-index: 8; display: flex; flex-direction: column; background: var(--view); border-radius: 6px; overflow: hidden; }
.sheetpane[hidden] { display: none; }
.sheetbar { display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: var(--float); border-bottom: 1px solid var(--line); }
.sheetbar .hint { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheetview { position: relative; flex: 1; overflow: hidden; cursor: default; touch-action: none; }
.sheetstage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sheetstage svg.sheetsvg { display: block; background: #fff; box-shadow: 0 2px 12px var(--shadow); }
.sheetstage svg.sheetov { position: absolute; left: 0; top: 0; pointer-events: none; }
.sheetstage .sheetsel { fill: none; stroke: var(--active); stroke-width: 1.6; stroke-linecap: round; }

/* 干渉チェック */
.clpanel .clrow { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.clpanel .clrow.on, .clpanel .clrow:hover { background: var(--hover); }
.clpanel .clk { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.clpanel .clk.overlap { color: var(--err); }
.clpanel .clk.near { color: var(--warn); }

/* 注記（計測の注記。記録に残る） */
#viewer .edlabel.note { background: #fff7d6; color: #3b2f00; border: 1px solid #e0c35a; white-space: pre-wrap; max-width: 240px; }

/* 線形の測点 */
#viewer .edlabel.alsta { background: #fff1e6; color: #9a3412; border: 1px solid #fdba74; font-size: 11px; padding: 0 4px; }
/* 道具の並び・小さい欄は、右上の ViewCube に重ならない幅まで（入りきらなければ折り返す） */
#viewer .edbar { max-width: calc(100% - 116px); box-sizing: border-box; }

/* 寸法の文字の大きさ（基本設定の寸法スタイル） */
#viewer .edlabel.dim { font-size: var(--dimfs, 13px); }

/* 基準（通り芯の丸い名前・レベル） */
#viewer .edlabel.gridbub { border-radius: 50%; min-width: 22px; text-align: center; background: var(--panel); color: #7e22ce; border: 1.5px solid #9333ea; font-weight: 700; }
#viewer .edlabel.lvl { background: #f3e8ff; color: #6b21a8; border: 1px solid #c084fc; }

/* タイプの欄 */
#viewer .tppanel .tpitem { border-bottom: 1px solid var(--line); padding: 4px 0; }
#viewer .tppanel .tpitem.on { background: var(--sel); }
#viewer .tppanel .tpparams { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
#viewer .tppanel .tphelp { font-size: 12px; margin: 4px 0; }
#viewer .utpanel .utbar button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; }
#viewer .utpanel .utbar button svg { width: 18px; height: 18px; }
#viewer .utpanel .utbar button:disabled { opacity: 0.4; }
#viewer .utpanel .utlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
#viewer .utpanel .utcard { border: 1px solid var(--line); border-radius: 6px; padding: 4px; display: grid; gap: 3px; cursor: pointer; background: #fff; }
#viewer .utpanel .utcard.on { border-color: var(--active); box-shadow: 0 0 0 2px #ffd8a8; }
#viewer .utpanel .utcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f1f5f9; border-radius: 4px; }
#viewer .utpanel .utcard input { width: 100%; box-sizing: border-box; font-size: 12px; }
#viewer .tppanel .tphelp ol { margin: 4px 0 4px 1.2em; padding: 0; }
#viewer .tppanel .tphelp li { margin: 2px 0; }
/* プロジェクト一覧の行を消す */
#arc .rowdel { border: 0; background: none; cursor: pointer; padding: 2px 6px; border-radius: 6px; opacity: .55; }
#arc .rowdel:hover { opacity: 1; background: var(--err-soft); }

/* メニューの構成：EASY では ADVANCE だけの道具を隠す */
#viewer.easy .edbar .adv:not(.front), #viewer.easy .edbar .grpadv { display: none !important; }  /* まとめの表に出した道具は EASY でも出す（全部 ADVANCE だけのまとめは出さない） */
body.easy .advset { display: none !important; }

/* 図面の画面：図をつかんで動かす */
#sheetstage .sheethover { position: absolute; border: 1.5px dashed var(--accent); background: rgba(31, 111, 235, .05); pointer-events: none; box-sizing: border-box; }
#sheetstage .sheetcover { position: absolute; background: #fff; pointer-events: none; }
#sheetstage .sheetghost { position: absolute; overflow: hidden; outline: 1.5px dashed var(--accent); background: rgba(255, 255, 255, .85); pointer-events: none; }
/* プログレスバー（common.js の progressBar）：IFC を開くとき・図面化のとき */
.pbox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 80%); padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); z-index: 20; pointer-events: none; font-size: 13px; }
.dimhint { position: absolute; z-index: 30; padding: 2px 6px; font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; white-space: nowrap; pointer-events: none; }  /* 図面の寸法を打ち直すときの案内 */
.pbox .ptext { margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbox .pnum { margin-top: 4px; font-size: 12px; color: var(--muted); text-align: right; }
.pbar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pbar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.pbar.busy > i { width: 30%; animation: pbusy 1.2s ease-in-out infinite; }
@keyframes pbusy { from { margin-left: -30%; } to { margin-left: 100%; } }
.pbar.wait > i { animation: pwait 1.2s ease-in-out infinite; }  /* 進みの分からない段：前の値のまま、動いている印 */
@keyframes pwait { 50% { opacity: .45; } }

/* カスタムプロパティ：消すボタン・足す欄 */
#ifc-props .pdel { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 3px; margin-left: 4px; visibility: hidden; }
#ifc-props h4:hover .pdel, #ifc-props tr:hover .pdel { visibility: visible; }
#ifc-props .pdel:hover { color: var(--err); }
#ifc-props .padd { border-top: 1px solid var(--line); margin-top: 12px; display: grid; gap: 4px; }
#ifc-props .padd .parow { display: flex; gap: 4px; }
#ifc-props .padd input, #ifc-props .padd select { font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
#ifc-props .padd .parow > input, #ifc-props .padd .pa-valbox, #ifc-props .padd .pa-tpl { flex: 1 1 0; width: 0; }
#ifc-props .padd .pa-valbox > * { width: 100%; box-sizing: border-box; }
#ifc-props .padd .chip { font-size: 12px; padding: 2px 10px; }
/* 基本設定：プロパティのテンプレート */
#proptpl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
#proptpl .tpl { border: 1px solid var(--line); border-radius: 6px; padding: 6px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.tplbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.tplbar > * { width: auto; margin: 0; flex: 0 0 auto; }
.tplbar #tpl, .tplbar #kind { flex: 1 1 240px; min-width: 0; }
#proptpl .tplhead, #proptpl .tplrow { display: flex; gap: 4px; align-items: center; }
#proptpl input, #proptpl select { font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
#proptpl .tp { flex: 1 1 0; width: 0; font-weight: 600; }
#proptpl .tn, #proptpl .tv { flex: 1 1 0; width: 0; }
#proptpl .tt { width: 60px; }
#proptpl .tx, #proptpl .tdel { border: 0; background: none; color: var(--muted); cursor: pointer; }
#proptpl .tx:hover, #proptpl .tdel:hover { color: var(--err); }
#proptpl .chip { justify-self: start; font-size: 12px; }
#ifc-props .padd .pa-type { flex: none; width: 72px; }
/* 吸い付いた点の名前（中点・端点など）。点のすぐ右上に、その種類の色で */
#viewer .edlabel.snapchip { background: #fff; border: 1.5px solid; font-size: 11.5px; font-weight: 600; padding: 1px 6px; pointer-events: none; z-index: 6; }
:root[data-theme=dark] #viewer .edlabel.snapchip { background: #111820; }

/* ---- スマホ（幅 760 px まで、横向きなら高さ 500 px まで）：上の帯は ☰ にまとめ、編集画面は画面の高さに収めてスクロールさせない ---- */
header .navbtn { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; }
header .navlinks { display: contents; }  /* PC：中の項目は header にそのまま横に並ぶ */
.mobonly, #viewer .edbar .edfold { display: none; }  /* スマホだけで出す */
@media (max-width: 760px), (max-height: 500px) {
  header { flex-wrap: nowrap; position: relative; gap: 8px; padding: 6px 12px; }
  header .title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  header .navbtn { display: block; }
  header .navlinks { display: none; position: absolute; right: 8px; top: 100%; z-index: 80; flex-direction: column; min-width: 190px;
    background: var(--band); border-radius: 0 0 8px 8px; padding: 6px 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
  header.open .navlinks { display: flex; }
  header .navlinks > * { padding: 10px 18px; }
  header .navlinks .sp { display: none; }
  header .navlinks .user { display: block; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 4px; }
  header .nav.on { border-bottom: 0; padding-bottom: 10px; color: #ffb35c; }

  body.editpage { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  body.editpage main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 8px; width: 100%; margin: 0; box-sizing: border-box; }
  body.editpage { overflow-x: hidden; }
  .edtop { flex-wrap: nowrap; gap: 4px; margin-bottom: 6px; }
  .edtop .chip, .edtop .viewsw button { padding-left: 8px; padding-right: 8px; }
  .edtop.open { flex-wrap: wrap; }
  .edtop.open .nameinput, .edtop.open #name { flex: 1 1 100%; order: -1; }  /* 開いたときは、名前を 1 行目いっぱいに */
  .edtop:not(.open) .mobmore { display: none !important; }
  .edtop .mobonly { display: inline-flex; flex: none; }
  .edtop .nameinput, .edtop #name { flex: 1; min-width: 0; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .edtop .viewsw { flex: none; }
  .edwrap { display: block; position: relative; flex: 1; min-height: 0; height: auto; }
  .edwrap #viewer { height: 100%; }
  /* ツリーと属性：左から出る引き出し（「ツリー」で出し入れ） */
  .edwrap .ifc-left { display: none; position: absolute; left: 0; top: 0; bottom: 0; width: min(86vw, 340px); z-index: 25;
    background: var(--panel); padding: 6px; border-radius: 0 8px 8px 0; box-shadow: 4px 0 16px rgba(0, 0, 0, .2); grid-template-rows: 3fr 2fr; }
  .edwrap.side .ifc-left { display: grid; }
  .edwrap .ifc-side { max-height: none; }
  /* 3D の中の道具の帯：畳むと、開く印といまの道具だけ */
  #viewer .edbar .edfold { display: inline-flex; font-weight: 700; }
  #viewer .edbar.folded > :not(.edfold):not(button.on) { display: none !important; }
  #viewer .vcube canvas { width: 72px !important; height: 72px !important; }
}

/* ---- 指で描く（スマホ）：長押しの照準と、描いている間のボタン（editor.js の aimDot・touchBar） ---- */
#viewer .aimdot { position: absolute; z-index: 6; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid var(--active); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
#viewer .aimdot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--active); }
#viewer .aimdot[hidden] { display: none; }
#viewer .edtouch { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 7; display: flex; gap: 6px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); width: max-content; white-space: nowrap; }
#viewer .edtouch[hidden] { display: none; }
#viewer .edtouch button { font: inherit; font-size: 15px; padding: 8px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
#viewer .edtouch button[data-k=Enter] { background: var(--blue); border-color: var(--blue); color: #fff; }
#viewer .edtouch .tlen { width: 96px; font-size: 16px; padding: 7px 10px; border-radius: 16px; border: 1px solid var(--line); }

/* ---- 下の帯（編集画面の 3D の下。紺）：道具の案内・打っている数値・選んだものの属性・カーソルの座標（editor.js の band） ---- */
#viewer .edband { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 30px; display: flex; align-items: center; gap: 14px; padding: 0 12px;
  background: var(--band); color: #fff; font-size: 12.5px; border-radius: 0 0 6px 6px; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
#viewer .edband .bprompt { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; opacity: .9; }
#viewer .edband .btyped { flex: none; background: var(--active); color: #fff; border-radius: 10px; padding: 1px 9px; font-weight: 700; }
#viewer .edband .btyped[hidden] { display: none; }
#viewer .edband .bright { margin-left: auto; display: flex; gap: 14px; align-items: center; min-width: 0; overflow: hidden; }
#viewer .edband .edinfo, #viewer .edband .edcoord { position: static; background: none; border: 0; color: inherit; padding: 0; max-width: none; border-radius: 0; font-size: inherit; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme=dark] #viewer .edband .edinfo { background: none; color: inherit; }
#viewer.hasband .edtouch { bottom: 40px; }

/* ---- 似た道具のまとめ（長押し・右クリックで開く。editor.js の toolGroups）---- */
#viewer .edbar button.grp.front { position: relative; }
#viewer .edbar button.grp.front::after { content: ''; position: absolute; right: 2px; bottom: 2px; border: 3px solid transparent; border-right-color: var(--muted); border-bottom-color: var(--muted); }  /* まとめがある印 */
#viewer .edfly { position: absolute; z-index: 9; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--float); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
#viewer .edfly[hidden] { display: none; }
#viewer .zoomwin { position: absolute; z-index: 8; pointer-events: none; border: 1.5px dashed var(--active); background: rgba(255, 138, 0, .08); }
#viewer .zoomwin[hidden] { display: none; }
#viewer .edfly button { border: 0; background: none; padding: 6px 8px; display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text); white-space: nowrap; }
#viewer .edfly button:hover { background: var(--hover); }
#viewer .edfly button.on { background: var(--active); color: #fff; }
#viewer .edfly button::after { content: attr(data-name); }
#viewer .edband .bopts { display: flex; gap: 12px; flex: none; }
#viewer .edband .bopts label { display: inline-flex; align-items: center; gap: 4px; opacity: .9; }
#viewer .edband .bopts label[hidden] { display: none; }
#viewer .edband .bopts label.on { color: #ffb35c; opacity: 1; }
#viewer .edband .bopts input { width: 64px; font: inherit; padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; text-align: right; }
#viewer .edlabel.dim.text { background: var(--float); color: var(--text); border: 1px solid var(--line); }  /* 文字・引出線付き文字（注記の赤ではなく、ふつうの文字） */

/* 引出線付き文字：文字の下にアンダーライン。引出線は、指す点の側のアンダーラインの端から（lright：指す点が右なら、文字は左へ） */
#viewer .edlabel.dim.text.leader { transform: translate(0, -100%); border: none; border-bottom: 1.5px solid currentColor; border-radius: 0; padding: 0 4px 1px; background: transparent; text-shadow: 0 0 3px var(--panel), 0 0 3px var(--panel); }
#viewer .edlabel.dim.text.leader.lright { transform: translate(-100%, -100%); }
#viewer .edlabel.dim.text { white-space: pre-wrap; }
#viewer .edlabel.dim.text.ai { color: #6d28d9; }  /* AIメモ（生成 AI への指摘）：紫 */
:root[data-theme=dark] #viewer .edlabel.dim.text.ai { color: #c4b5fd; }
/* 文字の長押し（離すと直す）・その場で直している文字 */
#viewer .edlabel.dim.lp { outline: 2px solid #f59e0b; }
#viewer .edlabel.dim.editing { pointer-events: auto; outline: 2px solid var(--blue); cursor: text; user-select: text; -webkit-user-select: text; z-index: 6; }

/* 帯の見た目の欄（色・線種・尺度・塗り・ハッチ） */
#viewer .edband .bstyle { display: inline-flex; gap: 10px; align-items: center; }
#viewer .edband .bstyle[hidden] { display: none; }
#viewer .edband .bstyle select { font: inherit; font-size: 12px; padding: 0 2px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .35); background: #1d3157; color: #fff; max-width: 92px; }
#viewer .edband .bstyle input[data-s=lts] { width: 44px; }
#viewer .edband .bstyle .bs-pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
/* 選んだ文字 */
#viewer .edlabel.dim.sel { outline: 2px solid var(--active); }
#viewer .edband .bo-scale { display: inline-flex; gap: 6px; align-items: center; }
#viewer .edband .bo-scale[hidden] { display: none; }
#viewer .edband .bo-scale input[data-k] { width: 42px; }
#viewer .edband .bo-scale input[type=checkbox] { width: auto; }
#viewer .edband .bo-scale button { font: inherit; font-size: 12px; padding: 1px 8px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .45); background: var(--active); color: #fff; cursor: pointer; }

/* 構造の欄（施設・部位・階・まとまり・材料）と、施設を選ぶ画面 */
#viewer .edbar select.home, #viewer .edbar select.mat { max-width: 9.5em; }
#viewer .stpanel { width: 340px; }
#viewer .stpanel .stnode { gap: 4px; }
#viewer .stpanel .stnode.on, #viewer .stpanel .stmats .ulitem.on { background: var(--sel); }
#viewer .stpanel .stname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
#viewer .stpanel button.on { color: var(--active); }
#viewer .stpanel .stsw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); flex: none; }
#viewer .stmenu { max-height: 60vh; overflow: auto; }
#viewer .facpick { position: absolute; inset: 0; z-index: 30; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
#viewer .facpick .facbox { background: var(--panel); color: var(--text); border-radius: 10px; padding: 16px 18px; width: min(560px, 100%); max-height: calc(100% - 32px); overflow: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); display: flex; flex-direction: column; gap: 10px; }
#viewer .facpick .faclist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
#viewer .facpick .faclist button { padding: 10px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--float); color: var(--text); font: inherit; cursor: pointer; }
#viewer .facpick .faclist button.on { border-color: var(--active); box-shadow: 0 0 0 2px var(--active) inset; }
#viewer .facpick .facopt { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
#viewer .facpick .facopt[hidden] { display: none; }
#viewer .facpick .facopt input, #viewer .facpick .facopt select { font: inherit; }
#viewer .facpick .facopt button[data-f=ok] { background: var(--active); color: #fff; border: 0; border-radius: 6px; padding: 6px 16px; font: inherit; cursor: pointer; }
#viewer .facpick .facfoot { display: flex; justify-content: flex-end; }
#viewer .stpanel .ulitem button { flex: 0 0 auto; padding: 0 4px; }
#viewer .stpanel .ulitem .hint { flex: none; white-space: nowrap; }
#viewer .edlabel.griddim { background: var(--panel); color: #7e22ce; border: 1px solid #c084fc; font-size: 11px; padding: 0 4px; }
#viewer .datumbar .dtn[hidden] { display: none; }
#viewer .datumbar input.dtnx, #viewer .datumbar input.dtny { width: 9em; }
/* 通り芯の欄は、3D の上に重ねず、下の帯のすぐ上に 1 行で置く（上の道具の帯と 2 重にならない） */
#viewer .edbar.edsub.datumbar { top: auto; bottom: 30px; left: 0; right: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; background: var(--panel); }
#viewer .datumbar .dtn, #viewer .datumbar .dtal, #viewer .datumbar .dtal label { display: inline-flex; align-items: center; gap: 4px; }
#viewer .datumbar .dtal { gap: 8px; }
#viewer .datumbar .dtal[hidden] { display: none; }
#viewer .datumbar .dtlc { font-weight: 700; color: #7e22ce; }
#viewer .datumbar .dtlx, #viewer .datumbar .dtly { font-weight: 700; color: #7e22ce; }
/* 通り芯の間の寸法：クリックで打ち直す */
#viewer.dtedit .edlabel.griddim, #viewer.dtedit .edlabel.gridbub, .dtedit .edlabel.griddim, .dtedit .edlabel.gridbub { pointer-events: auto; cursor: text; }
.dtedit .edlabel.griddim:hover, .dtedit .edlabel.gridbub:hover { border-color: #7e22ce; background: #f3e8ff; }
#viewer .edlabel.gridbub input.spanin { width: 4em; }
#viewer .edlabel input.spanin { width: 5.5em; font: inherit; font-size: 12px; border: 0; outline: 0; padding: 1px 2px; background: transparent; color: inherit; text-align: center; }
#viewer .edband .bo-plane select { font: inherit; font-size: 12px; padding: 0 2px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .35); background: #1d3157; color: #fff; }
#viewer .edband .bo-eq { display: inline-flex; gap: 4px; align-items: center; }
#viewer .edband .bo-eq[hidden] { display: none; }
#viewer .edband .bo-eq button { font: inherit; font-size: 12px; padding: 0 7px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .45); background: #1d3157; color: #fff; cursor: pointer; }
/* 自由な断面のタイプ */
#viewer .tppanel .tpsketch { display: flex; gap: 10px; align-items: flex-start; }
#viewer .tppanel .tpcol { display: flex; flex-direction: column; gap: 3px; }
#viewer .tppanel .tprow { display: flex; gap: 4px; align-items: center; }
#viewer .tppanel .tprow button { flex: none; padding: 0 4px; }
#viewer .tppanel .tpsvg polygon { fill: rgba(31, 111, 235, .18); stroke: var(--blue); stroke-width: 1.2; }
#viewer .tppanel .tpsvg text { font-size: 8px; fill: var(--muted, #666); }
#viewer .tppanel { max-height: calc(100% - 80px); overflow: auto; }
#viewer .tppanel { width: 430px; max-width: calc(100% - 24px); }
#viewer .tppanel .tprow input { flex: none; min-width: 0; padding: 1px 4px; }
#viewer .tppanel .tpsketch .tpcol:first-child { flex: 1; min-width: 0; }

/* IR の欄（編集を IR に戻す） */
.irdrawer .irgrp { margin: 4px 0; } .irdrawer .irgrp summary { cursor: pointer; font-weight: 600; font-size: 12.5px; padding: 2px 0; }
.irdrawer .irrow { display: grid; grid-template-columns: minmax(0, 1fr) 9em auto; gap: 4px; align-items: center; padding: 2px 0 2px 10px; font-size: 12px; }
.irdrawer .irrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.irdrawer .irrow input { width: 100%; padding: 2px 5px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; }
.irdrawer .irrow.ch input { border-color: var(--active); background: color-mix(in srgb, var(--active) 10%, var(--panel)); }
.irdrawer .irrow button { border: 0; background: none; cursor: pointer; color: var(--muted); }
.drawer .edits .hskip { font-size: 11px; color: #b45309; border: 1px solid #f59e0b; border-radius: 4px; padding: 0 4px; }
.sheetpages { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; } .sheetpages[hidden] { display: none; }

/* 部材表（別ウィンドウ） */
.bomwin { position: absolute; right: 12px; top: 150px; width: min(640px, 92%); max-height: 70%; z-index: 10; display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-win); }
.bomwin[hidden] { display: none; }
.bomhead { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: move; user-select: none; }
.bomhead .hint { flex: 1; font-size: 11.5px; } .bomhead a { font-size: 12px; cursor: pointer; color: #2563eb; } .bomhead button { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.bombody { overflow: auto; padding: 4px 8px 8px; }
.bomtab { width: 100%; border-collapse: collapse; font-size: 12px; }
.bomtab th, .bomtab td { border-bottom: 1px solid var(--line); padding: 3px 6px; text-align: left; white-space: nowrap; }
.bomtab th { position: sticky; top: 0; background: var(--panel); font-weight: 600; }
.bomtab td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bomtab tbody tr { cursor: pointer; } .bomtab tbody tr:hover { background: var(--hover); }
.bomtab tbody tr.on { background: color-mix(in srgb, #2563eb 16%, var(--panel)); }
.bomtab tfoot td { font-weight: 600; }
.bomtab tr.miss td { color: #dc2626; }
.bomtruth { margin-top: 8px; } .bomtruth summary { cursor: pointer; font-size: 12.5px; font-weight: 600; }

/* 3D の上の文字（寸法・注記・通り芯とレベルの名前・測点）は、道具の帯・下の欄・パネルより下に（隠さない） */
#viewer .edlabel.dim { z-index: 2; }
#viewer .edlabel.dim.editing { z-index: 6; }

/* ツリーの南京錠（部材のロック） */
.tr .lk { border: 0; background: none; padding: 0 2px; margin-right: 2px; cursor: pointer; color: var(--muted); opacity: .35; line-height: 1; vertical-align: middle; }
.tr .lk:hover { opacity: .8; } .tr .lk.on { opacity: 1; color: #dc2626; } .tr .lk.some { opacity: .8; color: #f59e0b; }

/* 詳細ウィンドウ（タイプ・配置・干渉チェック・材料・公共座標を 1 枚に。見出しをつかんで動かす） */
#viewer .dockwin { position: absolute; z-index: 6; right: 140px; top: 52px; width: 320px; max-height: calc(100% - 64px); display: flex; }
#viewer .dockwin[hidden] { display: none; }
#viewer .dockwin > .ulpanel { position: static; width: 100%; max-height: 100%; left: auto; right: auto; top: auto; }
#viewer .dockwin > .ulpanel[hidden] { display: none; }
#viewer .dockwin .ulhead { cursor: move; }

/* 図面化のプレビューのページ */
.drwpnav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; font-size: 12px; white-space: nowrap; flex: none; width: 100%; }
.drwprev:has(> .drwpnav:not([hidden])) { flex-direction: column; }
.drwpnav[hidden] { display: none; }
.drwpnav button { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 0 8px; cursor: pointer; color: var(--text); }

/* IFC の欄の上：アイコンのボタン（中身はツールチップ） */
.ifchead .icrow { gap: 2px; flex-wrap: wrap; }
.ifchead .icrow > button { display: inline-flex; align-items: center; justify-content: center; padding: 3px 5px; border-radius: 6px; }
.ifchead .icrow .sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 3px; }
.ifchead .icrow .lysel svg { flex: none; }


/* 共通の機能別メニュー。details/summary はキーボードでも開閉できる。 */
header .appmenu { position: relative; font-size: 13px; }
header .appmenu > summary { cursor: pointer; list-style: none; padding: 7px 10px; border-radius: 5px; white-space: nowrap; }
header .appmenu > summary::-webkit-details-marker, header .appsubmenu > summary::-webkit-details-marker { display: none; }
header .appmenu > summary::after { content: ' ▾'; font-size: 10px; }
header .appmenu[open] > summary, header .appmenu > summary:hover { background: var(--band-hover); }
header .appmenu-items { position: absolute; z-index: 100; left: 0; top: calc(100% + 4px); min-width: 210px; max-width: calc(100vw - 24px); background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 5px; box-shadow: 0 5px 20px #0003; }
header .account-menu .appmenu-items { left: auto; right: 0; }
header .appmenu-items a, header .appmenu-items button, header .appsubmenu > summary, header .menu-version { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; box-sizing: border-box; padding: 9px 12px; border: 0; border-radius: 4px; background: none; color: var(--text); font: inherit; text-align: left; white-space: nowrap; }
header .appmenu-items a:hover, header .appmenu-items button:not(:disabled):hover, header .appsubmenu > summary:hover { background: var(--hover); }
header .appmenu-items button:not(:disabled), header .appsubmenu > summary { cursor: pointer; }
header .appmenu-items button:disabled { color: var(--muted); cursor: not-allowed; }
header .appsubmenu > summary { list-style: none; }
header .appsubmenu > summary::after { content: '▾'; }
header .appsubmenu > div { padding-left: 12px; border-left: 2px solid var(--line); margin: 0 8px 4px; }
header .menu-version { border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); font-size: 12px; }
header .appmenu summary:focus-visible, header .appmenu-items a:focus-visible, header .appmenu-items button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
dialog.appsettings { position: fixed; inset: 0; margin: auto; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); box-sizing: border-box; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); overflow: auto; }
dialog.appsettings::backdrop { background: #0006; }
dialog.appsettings .settings-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
dialog.appsettings .settings-head button { border: 0; background: none; color: inherit; font-size: 22px; cursor: pointer; }
dialog.appsettings .setbox, dialog.appsettings .setbox:has(> .settabs) { position: static; width: auto; max-width: none; border: 0; box-shadow: none; padding: 0; }
#dlpop { max-width: calc(100vw - 24px); max-height: 70dvh; overflow: auto; }
@media (max-width: 760px), (max-height: 500px) {
  header .navlinks { max-height: calc(100dvh - 60px); overflow-y: auto; max-width: calc(100vw - 16px); }
  header .navlinks > .appmenu { padding: 2px 8px; }
  header .appmenu > summary { padding: 10px; }
  header .appmenu-items, header .account-menu .appmenu-items { position: static; min-width: 230px; max-width: 100%; box-shadow: none; margin-top: 2px; }
}
/* AI評価のダイアログ（生成結果の画面・編集画面） */
dialog.reviewdlg { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: var(--panel); color: var(--text); width: min(480px, calc(100vw - 32px)); }
dialog.reviewdlg h3 { margin: 0 0 12px; font-size: 16px; }
dialog.reviewdlg .rvrow { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 8px 0; }
dialog.reviewdlg .rvrow > b { min-width: 6em; }
dialog.reviewdlg textarea { width: 100%; box-sizing: border-box; font: inherit; }
dialog.reviewdlg .rvbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* 共有 → URL発行（編集画面） */
#share-dlg .setrow { display: flex; gap: 8px; align-items: center; margin: 6px 0; white-space: nowrap; }
#share-dlg .setrow > :is(input, select) { flex: 1; min-width: 0; }
/* サブウィンドウ（common.js の openSub）：モデルを出している画面の上に、メニューのページを重ねて開く */
.subwin { position: fixed; z-index: 1000; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px #0004; resize: both; overflow: hidden; min-width: 320px; min-height: 200px; }
.subwin.max { left: 8px !important; top: 60px !important; width: calc(100vw - 16px) !important; height: calc(100dvh - 68px) !important; resize: none; }
.subwin-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; background: var(--subtle); border-bottom: 1px solid var(--line); cursor: move; user-select: none; touch-action: none; }
.subwin-head .sp { flex: 1; }
.subwin-head button { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; padding: 2px 8px; border-radius: 4px; }
.subwin-head button:hover { background: var(--hover); }
.subwin iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
body.subwin-drag iframe { pointer-events: none; }
@media (max-width: 760px) { .subwin { left: 0 !important; top: 56px !important; width: 100vw !important; height: calc(100dvh - 56px) !important; border-radius: 0; resize: none; } }
/* サブウィンドウの中のページ：上のメニューが無い分、上の余白を詰める */
body.embed main { padding-top: 12px; }
body.embed main.hist { height: calc(100dvh - 24px); }
/* 実行の画面：修正版・生成結果の切り替え（ひとまとまりのチップ） */
.chipgroup { display: inline-flex; gap: 0; }
.chipgroup .chip { border-radius: 0; margin: 0; }
.chipgroup .chip:first-child { border-radius: 12px 0 0 12px; }
.chipgroup .chip:last-child { border-radius: 0 12px 12px 0; }
.chipgroup .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 通知（🔔）：未読の数の赤い印・一覧 */
header .notemenu > summary { position: relative; display: flex; align-items: center; padding: 6px 9px; }
header .notemenu > summary::after { content: none; }
header .nbadge { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e03131; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--band); }
header .notemenu .appmenu-items { left: auto; right: 0; width: min(360px, calc(100vw - 24px)); padding: 0; }
header .notes .nhead { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); }
header .notes .nhead .nall { width: auto; padding: 4px 8px; font-size: 12px; color: var(--accent, #1f5fbf); }
header .notes .nhead .nbtns { display: flex; gap: 2px; }
header .notes .nlist { max-height: min(70vh, 520px); overflow: auto; padding: 4px; }
header .notes .nitem { display: grid; gap: 2px; justify-content: stretch; white-space: normal; padding: 8px 10px 8px 14px; position: relative; }
header .notes .nitem.unread { background: #eef4ff; }
header .notes .nitem.unread::before { content: ''; position: absolute; left: 4px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
header .notes .ntop { display: flex; align-items: center; gap: 6px; font-size: 12px; }
header .notes .nwho { font-weight: 700; }
header .notes .nat { margin-left: auto; color: var(--muted); font-size: 11px; }
header .notes .ntext { font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
header .notes .nwhere { font-size: 11px; color: var(--muted); }
header .notes .nnone { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
header .notes .ntag { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 10px; background: var(--subtle, #e9edf2); color: var(--text); }
header .notes .ntag.fix { background: #f8d7da; color: #842029; } header .notes .ntag.req { background: #fff3cd; color: #664d03; } header .notes .ntag.ok { background: #d1e7dd; color: #0f5132; }
header .notes .ntag.rel { background: #dbe7ff; color: #1f4fa0; }
/* お知らせの一覧 /releases */
.release .relhead { display: flex; align-items: center; gap: 8px; }
.release p { margin: 6px 0; }
.release.unread { border-left: 3px solid var(--accent); }
:root[data-theme="dark"] header .notes .nitem.unread { background: #1d2a3d; }
header .navbtn { position: relative; }
header.unread .navbtn::after { content: ''; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #e03131; box-shadow: 0 0 0 2px var(--band); }
header .notemenu .nlabel { display: none; }
@media (max-width: 760px), (max-height: 500px) { header .notemenu .nlabel { display: inline; margin-left: 6px; } header .notemenu .nbadge { position: static; margin-left: 8px; box-shadow: none; } }
/* ビューポイント（編集画面の上の帯） */
.vpwrap { position: relative; display: inline-flex; }
.vppop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 220px; max-height: 60vh; overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px #0003; padding: 6px; }
.vppop .vphead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 13px; }
.vppop button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: 5px; }
.vppop .vphead button { color: var(--accent); font-size: 12px; padding: 3px 8px; }
.vppop .vprow { display: flex; align-items: center; }
.vppop .vprow button[data-go] { flex: 1; text-align: left; padding: 6px 8px; font-size: 13px; }
.vppop .vprow button:hover { background: var(--hover); }
.vppop .vprow small { margin-left: 6px; color: var(--muted); font-size: 11px; }
.vppop .vpdel { padding: 4px 8px; color: var(--muted); }
.vppop .vpnone { padding: 8px; }
/* プロフィール */
.avatar { display: inline-block; border-radius: 50%; overflow: hidden; flex: none; vertical-align: middle; line-height: 0; }
.avatar img, .avatar svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar .ini { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-weight: 700; line-height: 1; }
header .account-menu > summary { display: flex; align-items: center; gap: 6px; }
header .myav:empty { display: none; }
.profdlg { width: min(460px, calc(100vw - 24px)); }
.profdlg .profbody { display: grid; gap: 10px; padding: 4px 2px; }
.profdlg .profprev { display: flex; justify-content: center; }
.profdlg label { display: grid; gap: 4px; font-size: 13px; }
.profdlg .proflab { font-size: 13px; }
.profdlg .profgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.profdlg .profgrid button { border: 2px solid transparent; border-radius: 50%; padding: 0; background: var(--subtle); cursor: pointer; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; font: inherit; font-size: 11px; color: var(--muted); }
.profdlg .profgrid button.on { border-color: var(--accent); }
.profdlg .profgrid button img { width: 100%; height: 100%; object-fit: cover; }
.profdlg .profgrid button .avillust { width: 100% !important; height: 100% !important; }  /* イラストはボタンいっぱいに */
.profdlg .profgrid button .avillust svg { width: 100%; height: 100%; }
.profdlg .profbtns { display: flex; align-items: center; justify-content: space-between; }
.profdlg input, .profdlg textarea { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--panel); color: var(--text); width: 100%; box-sizing: border-box; }
/* ライブラリエクスプローラ（編集画面） */
.libpanel { position: fixed; top: 112px; right: 16px; z-index: 900; width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 140px); display: flex; flex-direction: column; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px #0003; }
.libpanel .libhead { display: flex; align-items: center; gap: 2px; padding: 8px 8px 6px 12px; border-bottom: 1px solid var(--line); }
.libpanel .libhead b { font-size: 14px; }
.libpanel button { border: 0; background: none; color: inherit; cursor: pointer; border-radius: 6px; font: inherit; }
.libpanel .libhead button { padding: 4px 6px; display: grid; place-items: center; }
.libpanel .libhead button:hover { background: var(--hover); }
.libpanel .libx { font-size: 16px; margin-left: 4px; }
.libpanel .libtree { overflow: auto; flex: 1; min-height: 120px; padding: 4px 0; font-size: 13px; }
.libpanel .lrow { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; white-space: nowrap; }
.libpanel .lrow:hover { background: var(--hover); }
.libpanel .lrow.on { background: var(--sel); }
.libpanel .lrow.drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.libpanel .lrow.root { font-weight: 700; }
.libpanel .lrow.locked { color: var(--muted); cursor: default; }
.libpanel .lrow .tw { width: 12px; text-align: center; color: var(--muted); flex: none; }
.libpanel .lrow .ln { overflow: hidden; text-overflow: ellipsis; }
.libpanel .lrow.folder svg { color: #d9a400; flex: none; }
.libpanel .lrow.locked svg { color: var(--muted); }
.libpanel .kind { flex: none; font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 4px; }
.libpanel .kind.k3d { background: #dbe8ff; color: #1f5fbf; } .libpanel .kind.k2d { background: #e6f4d7; color: #3b6d0c; }
.libpanel .lempty, .libpanel .lload { padding: 3px 8px; font-size: 12px; }
/* 取り込み先のウインドウ（importdest.js） */
dialog.impdest { width: min(520px, calc(100vw - 32px)); }
.impdest .idfiles { font-size: 12px; color: var(--muted, #667); margin: -6px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impdest .idtree { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px 0; }
.impdest .idrow { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 5px 8px; cursor: pointer; }
.impdest .idrow:hover { background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent); }
.impdest .idrow.on { background: color-mix(in srgb, var(--accent, #2563eb) 18%, transparent); font-weight: 600; }
.impdest .idcls { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--line); color: inherit; opacity: .8; min-width: 4em; text-align: center; font-weight: 400; }
.impdest .idrowset { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.impdest .idseg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.impdest .idseg button { border: 0; border-left: 1px solid var(--line); background: none; color: inherit; font: inherit; padding: 4px 10px; cursor: pointer; }
.impdest .idseg button:first-child { border-left: 0; }
.impdest .idseg button.on { background: var(--accent, #2563eb); color: #fff; }
.impdest .idpath { margin-top: 8px; font-size: 12px; word-break: break-all; }
.impdest .idbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.impdest [hidden] { display: none !important; }
.impdest .idrowset > b { white-space: nowrap; }
.impdest select[data-u] { width: auto; flex: none; font: inherit; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: inherit; }
/* テクスチャ・点景（editor.js） */
.texwin .texthumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.bbwin .bbpick { position: relative; display: inline-block; width: 40px; height: 40px; cursor: crosshair; border: 1px solid var(--line); border-radius: 4px; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.bbwin .bbpick img { width: 100%; height: 100%; object-fit: fill; display: block; }
.bbwin .bbpick i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--active); border: 1px solid #fff; pointer-events: none; }
.texgrip { position: absolute; z-index: 30; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 3px; background: #fff; border: 2px solid var(--active); cursor: pointer; touch-action: none; }
.texgrip.mid { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--active); cursor: move; }
.texgrip.corner { cursor: nwse-resize; }
.texgrip.edge { border-radius: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; cursor: ew-resize; }
/* 太陽光（sun.js） */
.sunpop { width: 220px; }
.sunpop .sunsvg { display: block; margin: 4px auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.sunpop .ring { fill: none; stroke: var(--line); stroke-width: 1; }
.sunpop .ring:first-of-type { fill: color-mix(in srgb, var(--accent) 5%, transparent); stroke: var(--muted); }
.sunpop .ax { stroke: var(--line); stroke-dasharray: 2 3; }
.sunpop .nsew { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.sunpop .path { fill: none; stroke: #f59f00; stroke-width: 1.5; stroke-dasharray: 3 2; }
.sunpop .sun { fill: #ffb300; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 3px #f59f00); }
.sunpop .sun.down { fill: #868e96; filter: none; }
.sunpop .sun.drag { cursor: grab; }
.sunpop .sunval { text-align: center; font-size: 12px; margin-bottom: 6px; }
.sunpop .sunrow { display: flex; align-items: center; gap: 6px; margin: 4px 2px; }
.sunpop .sungeo { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 2px; }
.sunpop .sungeo label { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; }
.sunpop .sungeo input[type=number], .sunpop .sungeo input[type=date], .sunpop .sungeo input[type=time] { width: 9em; font: inherit; }
.sunpop .sungeo input[type=range] { width: 100%; }
.sunpop .sungeo[hidden] { display: none; }
/* ボックス切断の確認（editor.js） */
dialog.bcdlg { width: min(420px, calc(100vw - 32px)); }
.bcdlg .bcrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0; }
.bcdlg .bcrow input[type=number] { width: 7em; font: inherit; }
.bcdlg .bccount { font-weight: 600; }
.bcdlg .bcok { background: var(--err); }
.libpanel .lthumb { width: 22px; height: 22px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); flex: none; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 6px 6px; }
.libpanel .lsize { margin-left: auto; font-size: 11px; color: var(--muted); padding-left: 6px; white-space: nowrap; }
.vecdlg .veclayers { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; display: grid; gap: 2px; }
.vecdlg .veclayers label { display: flex; align-items: center; gap: 6px; }
.vecdlg .veclayers small { margin-left: auto; opacity: .6; }
.vecdlg .vecsw { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--line); flex: none; }
.vecdlg select { font: inherit; }
/* 設定などのウインドウ：画面をふさがず、見出しをドラッグで動かす */
dialog.floatwin { position: fixed; margin: 0; inset: auto; max-height: calc(100vh - 16px); overflow: auto; box-shadow: 0 8px 28px rgba(0, 0, 0, .28); }
dialog.floatwin .settings-head, dialog.floatwin .drwhead { cursor: move; user-select: none; }
/* 左の欄のレイヤ（IFC・点群・地形・地図） */
.edwrap .ifc-left:has(> .scenelayers) { row-gap: 0; grid-template-rows: auto auto minmax(60px, var(--tf, 3fr)) 10px minmax(60px, var(--pf, 2fr)); }  /* レイヤ・操作・ツリー・境・属性 */
.edwrap .ifc-left > .scenelayers, .edwrap .ifc-left > .ifchead { margin-bottom: 8px; }
.ifcsplit { cursor: row-resize; display: flex; align-items: center; justify-content: center; touch-action: none; }
.ifcsplit::after { content: ''; width: 36px; height: 3px; border-radius: 2px; background: var(--line); }
.ifcsplit:hover::after, .ifcsplit.drag::after { background: var(--accent); }
/* IFC を外したとき：IFC の欄（操作・ツリー・境・属性）を隠し、レイヤの欄を下まで */
.edwrap .ifc-left.noifc { grid-template-rows: minmax(0, 1fr); }
.edwrap .ifc-left.noifc > :not(.scenelayers) { display: none; }
.edwrap .ifc-left.noifc > .scenelayers { margin-bottom: 0; align-content: start; overflow: auto; }
.edwrap.noleft { grid-template-columns: minmax(0, 1fr); }
.edwrap.noleft .ifc-left { display: none; }
.scenelayers { display: grid; gap: 1px; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; background: var(--panel); }
.scenelayers:empty { display: none; }
.scenelayers .slhead { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.scenelayers .slhead b { margin-right: auto; }
.scenelayers button { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 0 6px; font: inherit; font-size: 11.5px; cursor: pointer; color: var(--text); }
.scenelayers button:hover { background: var(--hover); }
.scenelayers .slrow { display: flex; align-items: center; gap: 4px; min-height: 24px; margin: 0; font-weight: 400; font-size: 13px; line-height: 1.3; }  /* ふつうの label の余白・太字を打ち消す（IFC のツリーと同じ行の高さ） */
.scenelayers .slrow > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenelayers .slitem { padding-left: 18px; }
.scenelayers .slitem button { padding: 0 4px; border: none; background: none; color: var(--muted); }
.assetdlg label { white-space: nowrap; }
.assetdlg input[type=number] { width: 6em; }
.edtop #layerbtn.on, .edtop #libbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.vppop.floatpop { position: fixed; top: 120px; left: auto; right: 80px; z-index: 900; width: max-content; max-width: min(380px, calc(100vw - 16px)); }
.vppop.floatpop .vphead { cursor: move; user-select: none; }
.vppop.floatpop [data-close] { padding: 0 6px; font-size: 14px; }
.scenelayers .slgrp { font-weight: 600; }
.bbwin .bbplan { width: 22px; height: 22px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 4px; }

/* サブウィンドウ（subwin.js）：重ねて連結・折りたたみ */
#viewer .dstack { position: absolute; z-index: 7; width: 320px; max-height: calc(100% - 64px); display: flex; flex-direction: column; overflow: auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.16); }
#viewer .dstack[hidden] { display: none; }
#viewer .dstack > .swin { position: static; inset: auto; width: auto; max-height: none; flex: none; box-shadow: none; z-index: auto; }
#viewer .dstack > .libpanel { max-height: 70vh; }
#viewer .dstack > .swin[hidden] { display: none; }
#viewer .dstack.multi > .swin:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; }
#viewer .dstack.multi > .swin:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#viewer .dstack.dragging { opacity: .85; }
#viewer .dstack.dockhint { outline: 2px dashed var(--accent); outline-offset: 2px; }
#viewer .swin .swhead { cursor: move; }
#viewer .swin.swfold > :not(.swhead) { display: none !important; }
#viewer .swin.swfold > .swhead { border-bottom: 0; padding-bottom: 0; }
#viewer .swin .swhead .swmin { margin-left: auto; border: 0; background: none; font-size: 14px; cursor: pointer; color: var(--muted); padding: 0 4px; }
#viewer .swin .swhead .swmin ~ button { margin-left: 0; }
#viewer .bbwin .bbplanbtn { display: inline-flex; align-items: center; gap: 4px; }
#viewer .swin.swfold { height: auto !important; min-height: 0 !important; resize: none; }
/* 上の帯（PC）：下の帯と同じくらいの太さに */
@media (min-width: 761px) and (min-height: 501px) {
  header { padding: 1px var(--sp-4); min-height: 32px; box-sizing: border-box; }
  header .title { font-size: 15px; }
  header .title .logo { width: 20px; height: 20px; vertical-align: -5px; padding: 1px; margin-right: 6px; border-radius: var(--r-sm); }
  header .appmenu > summary { padding: 3px 10px; }
  header .appmenu > summary .avatar { width: 20px !important; height: 20px !important; }
}
.pcdisp { display: grid; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.pcdisp label { display: flex; align-items: center; gap: 6px; }
.pcdisp input[type=color] { width: 32px; height: 22px; padding: 0; border: 1px solid var(--line); }
.pcdisp label { white-space: nowrap; }
.pcdisp label > select, .pcdisp label > input[type=number] { width: auto; flex: none; }
#viewer .ulpanel .ulsub { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; }
#viewer .pcedit .pcbody { display: grid; gap: 6px; }
/* 基本設定：円・ポリゴン */
.fctab, .pdtab { display: grid; gap: 4px; margin-bottom: 10px; }
.fchead { display: flex; align-items: center; gap: 6px; }
.fchead .sp { flex: 1; }
.fcrow input[type=number] { text-align: right; }
.pdcount { font-size: 14px; }
.pdcount b { font-variant-numeric: tabular-nums; }
.pdtab .pdafter { color: var(--accent); }
.orbitpivot { position: absolute; z-index: 20; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--active); border: 2px solid #fff; box-shadow: 0 0 0 1px #0004; pointer-events: none; }
/* 右下のビューポイントのタグ（Studio・Viewer） */
#viewer .vpchips { position: absolute; right: 10px; bottom: 44px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-height: 50%; overflow: auto; pointer-events: none; }
#viewer .vpchips[hidden] { display: none; }
#viewer .vpchips button { pointer-events: auto; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 4px 14px; font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 1px 4px #0002; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
#viewer .vpchips button:hover { background: var(--hover); }
#viewer .vpchips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.aoset { display: grid; gap: 2px; margin: 0 0 6px 24px; font-size: 13px; }
.aoset .mrow { display: flex; align-items: center; gap: 8px; }
.aoset input[type=range] { flex: 1; }
.aoset b { min-width: 3.5em; text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; }

/* ==== DADS（デジタル庁デザインシステム。https://design.digital.go.jp/dads/ 、MIT）：管理系の画面（<main class="dads">）だけ。docs/design/dads.md ====
   色・文字・余白・角丸は @digital-go-jp/design-tokens 2.1.0 の値。上の変数をこの中だけ DADS の値に置き換えるので、.btn・.panel・表・.state などの部品は
   同じクラスのまま DADS の形と色になる。Editor・Viewer・見出しの帯は対象外（この節は main.dads の中だけに効く）。暗いは色を上の暗い変数のまま、形と文字だけ DADS */
.dads {
  --fs: 16px; --fs-ui: 16px; --fs-sm: 14px; --fs-xs: 14px;
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-pill: 8px;
  --d-focus: #ffd43d; --d-key-hover: #00118f; --d-key-active: #000060; --d-key-soft: #c5d7fb;
  --d-c1: #0031d8; --d-c2: #fb5b01; --d-c3: #00a3bf; --d-c4: #8843e1; --d-c5: #d2a400; --d-c6: #db00db;  /* グラフの系列（青・橙・シアン・紫・黄・マゼンタ。色覚の型で隣が区別できる順） */
  max-width: 1280px; padding: 24px 32px 64px; font-size: 16px; line-height: 1.7;
}
:root:not([data-theme=dark]) .dads {
  --text: #1a1a1a; --muted: #4d4d4d; --line: #cccccc; --panel: #ffffff;
  --accent: #0017c1; --ok: #197a4b; --warn: #806300; --err: #ce0000;
  --hover: #e8f1fe; --sel: #d9e6ff; --subtle: #f2f2f2; --zebra: #f8f8f8;
  --ok-soft: #e6f5ec; --err-soft: #fdeeee; --note: #fbf5e0; --orange-soft: #ffeee2;
}
:root[data-theme=dark] .dads { --d-key-hover: #9db7f9; --d-key-active: #c5d7fb; --d-key-soft: #1f3554; --d-c1: #7096f8; --d-c2: #ff8d44; --d-c3: #2bc8e4; --d-c4: #bb87ff; --d-c5: #ffc700; --d-c6: #f661f6; }
@media (max-width: 760px) { .dads { padding: 16px 16px 48px; } }
/* 見出し（std-28B-150・20B-150・17B-160）と本文 */
.dads h1 { font-size: 28px; line-height: 1.5; font-weight: 700; margin: 0 0 24px; letter-spacing: .02em; }
.dads h2 { font-size: 20px; line-height: 1.5; font-weight: 700; margin: 0 0 16px; }
.dads h3 { font-size: 17px; line-height: 1.6; font-weight: 700; margin: 24px 0 8px; }
.dads p { margin: 0 0 12px; }
.dads .hint { font-size: 14px; color: var(--muted); }
.dads code { font-family: var(--mono); font-size: 14px; background: var(--subtle); padding: 1px 6px; border-radius: 4px; }
.dads .panel { border-radius: var(--r-lg); padding: 24px; margin-bottom: 24px; }
.dads .pagehead { margin-bottom: 24px; }
/* リンクとフォーカス（黒 4px の外枠＋黄の内側の線） */
.dads a:not(.btn):not(.d-tab) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.dads a:not(.btn):not(.d-tab):hover { color: var(--d-key-hover); text-decoration-thickness: 3px; }
.dads :focus-visible { outline: 4px solid #000; outline-offset: 2px; box-shadow: 0 0 0 2px var(--d-focus); }
:root[data-theme=dark] .dads :focus-visible { outline-color: #fff; }
/* ボタン（md：高さ 48・角丸 8・太字 16。表の中と .sm は sm：高さ 36・角丸 6） */
.dads .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; min-width: 96px; padding: 8px 16px; border: 4px double transparent; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; text-underline-offset: 3px; white-space: nowrap; }
.dads .btn:hover:not(:disabled) { background: var(--d-key-hover); text-decoration: underline; }
.dads .btn:active:not(:disabled) { background: var(--d-key-active); }
.dads .btn.sub, .dads .btn.line { background: var(--panel); color: var(--accent); border: 1px solid currentColor; box-shadow: none; }
.dads .btn.sub:hover:not(:disabled), .dads .btn.line:hover:not(:disabled) { background: var(--d-key-soft); color: var(--d-key-hover); }
.dads .btn.ghost { background: none; color: var(--accent); text-decoration: underline; min-width: 0; }
.dads .btn.ghost:hover:not(:disabled) { background: var(--hover); text-decoration-thickness: 3px; }
.dads .btn.danger { background: var(--err); color: #fff; }
.dads .btn.danger:hover:not(:disabled) { background: var(--err); filter: brightness(.85); }
:root[data-theme=dark] .dads .btn:not(.sub):not(.line):not(.ghost):not(:disabled) { color: #0f141b; }  /* 暗いの主の色（淡い青・赤）の上は白い文字が読めない */
.dads .btn:disabled { opacity: 1; background: #b3b3b3; color: #f2f2f2; border-color: transparent; cursor: not-allowed; }
.dads .btn.sub:disabled, .dads .btn.line:disabled { background: var(--panel); color: #b3b3b3; border-color: #b3b3b3; }
.dads .btn.sm, .dads td .btn { min-height: 36px; min-width: 64px; padding: 2px 12px; border-radius: 6px; font-size: 16px; }
.dads .btn.xs { min-height: 28px; min-width: 0; padding: 2px 8px; border-radius: 4px; font-size: 14px; }
.dads .linkbtn { color: var(--accent); text-underline-offset: 3px; }
/* 入力（sm：高さ 40・角丸 8・枠 #767676）とラベル（太字 16、欄の上） */
.dads input[type=text], .dads input[type=password], .dads input[type=email], .dads input[type=number], .dads input[type=date], .dads input[type=search], .dads input[type=url],
.dads select, .dads textarea, .dads .field { min-height: 40px; padding: 6px 12px; border: 1px solid #767676; border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 16px; }
:root[data-theme=dark] .dads :is(input, select, textarea, .field) { border-color: #7f7f7f; }
.dads :is(input, select, textarea, .field):hover:not(:disabled) { border-color: var(--text); }
.dads :is(input, select, textarea, .field):disabled { background: var(--subtle); color: var(--muted); border-color: #b3b3b3; }
.dads textarea { font-family: inherit; min-height: 96px; }
.dads label { font-size: 16px; font-weight: 700; margin: 16px 0 8px; }
.dads label.chk { font-size: 16px; font-weight: 400; gap: 8px; margin: 4px 0; }
.dads input[type=checkbox], .dads input[type=radio] { width: 20px; height: 20px; accent-color: var(--accent); }
.dads .pickrow { gap: 12px; }
.dads .pickrow select, .dads .pickrow input { margin: 0; width: auto; }
.d-field { display: grid; gap: 4px; margin: 0 0 16px; }
.d-field > span:first-child { font-weight: 700; }
.d-field .hint { margin: 0; }
.d-form { display: grid; gap: 0; max-width: 560px; }
/* 表（データテーブル：見出しの地・下の黒い線・数字は右寄せ・単位は列の見出しに） */
.dads table { font-size: 16px; line-height: 1.5; }
.dads th, .dads td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dads th { color: var(--text); font-weight: 700; }
.dads thead th, .dads table.zebra thead th { background: var(--subtle); border-bottom: 1px solid var(--text); }
.dads tbody th { background: none; text-align: left; }
.dads table.zebra tbody tr:nth-child(even) { background: var(--zebra); }
.dads table.zebra tbody tr:hover { background: var(--hover); }
.dads table.compact { font-size: 14px; }
.dads table.compact th, .dads table.compact td { padding: 8px 12px; }
.dads td.num, .dads th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dads .unit { color: var(--muted); font-size: 14px; font-weight: 400; margin-left: 2px; }
.dads table.kv th { width: 12em; white-space: nowrap; }
/* 状態の印（チップラベル filled-1：枠と淡い地と濃い文字） */
.dads .state, .dads .tag, .d-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid #4d4d4d; border-radius: 6px; background: var(--subtle); color: var(--text); font-size: 14px; font-weight: 400; line-height: 1.6; white-space: nowrap; }
.dads .state.done, .d-chip.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.dads .state.bad, .d-chip.bad { border-color: var(--err); background: var(--err-soft); color: var(--err); }
.dads .state.run, .dads .tag.on, .d-chip.info { border-color: var(--accent); background: var(--sel); color: var(--accent); }
.dads .tag.off, .d-chip.warn { border-color: var(--warn); background: var(--note); color: var(--warn); }
/* お知らせのバナー（standard：3px の枠・角丸 12・アイコン・見出し） */
.d-banner { display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; align-items: start; border: 3px solid var(--accent); border-radius: 12px; padding: 16px 20px; margin: 0 0 24px; background: var(--panel); color: var(--text); }
.d-banner > svg { width: 24px; height: 24px; color: var(--accent); margin-top: 2px; }
.d-banner .d-banner-title { font-weight: 700; color: var(--accent); }
.d-banner .d-banner-body { grid-column: 2; }
.d-banner .d-banner-body > :last-child { margin-bottom: 0; }
.d-banner[data-type=success] { border-color: var(--ok); } .d-banner[data-type=success] > svg, .d-banner[data-type=success] .d-banner-title { color: var(--ok); }
.d-banner[data-type=warning] { border-color: var(--warn); } .d-banner[data-type=warning] > svg, .d-banner[data-type=warning] .d-banner-title { color: var(--warn); }
.d-banner[data-type=error] { border-color: var(--err); } .d-banner[data-type=error] > svg, .d-banner[data-type=error] .d-banner-title { color: var(--err); }
/* パンくず・画面の中のナビ（下線のタブ） */
.d-crumbs { font-size: 14px; margin: 0 0 8px; }
.d-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
.d-crumbs li + li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 6px; border-right: 1.5px solid var(--muted); border-top: 1.5px solid var(--muted); transform: rotate(45deg); }
.d-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.d-tabs .d-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; color: var(--text); text-decoration: none; border-bottom: 4px solid transparent; margin-bottom: -1px; }
.d-tabs .d-tab:hover { background: var(--hover); text-decoration: underline; text-underline-offset: 3px; }
.d-tabs .d-tab[aria-current=page] { font-weight: 700; color: var(--accent); border-bottom-color: var(--accent); }
/* 数字のカード（ダッシュボード）・格子 */
.d-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.d-grid.wide { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
@media (max-width: 760px) { .d-grid.wide { grid-template-columns: 1fr; } }
.d-card { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; min-width: 0; }
.d-card > h2, .d-card > h3 { font-size: 17px; margin: 0; }
.d-card .d-big { font-size: 32px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.d-card .d-big .unit { font-size: 16px; }
.d-card .d-more { margin-top: auto; font-size: 14px; }
.d-card > .d-chip { align-self: flex-start; }
.d-card table { font-size: 14px; } .d-card th, .d-card td { padding: 6px 8px; }
/* 量の棒（使用量 / 上限・％、内訳の積み上げと凡例） */
.d-meter { display: grid; gap: 6px; }
.d-meter-bar { position: relative; display: flex; height: 16px; border-radius: 4px; background: var(--subtle); box-shadow: inset 0 0 0 1px #949494; overflow: hidden; }
.d-meter-bar > i { display: block; height: 100%; }
.d-meter-bar > b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); }
.d-meter-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-variant-numeric: tabular-nums; }
.d-meter-text .d-pct { font-weight: 700; }
.d-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.d-legend li { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.d-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
/* 棒グラフ（SVG。値のラベル・軸・上限の線） */
.d-chart { width: 100%; height: auto; display: block; overflow: visible; font-size: 12px; font-variant-numeric: tabular-nums; }
.d-chart .axis { stroke: var(--muted); stroke-width: 1; }
.d-chart .grid { stroke: var(--line); stroke-width: 1; }
.d-chart text { fill: var(--muted); }
.d-chart text.val { fill: var(--text); font-weight: 700; }
.d-chart .limit { stroke: var(--err); stroke-width: 2; stroke-dasharray: 6 4; }
.d-chart text.limit-label { fill: var(--err); font-weight: 700; }
/* Admin の印（システム管理者がログインしている間だけ、どの画面も右下に。押すと /admin のダッシュボード。Editor には出さない） */
.adminbadge { position: fixed; right: 16px; bottom: 16px; z-index: 2999999; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 12px; border-radius: 8px;
  background: #000060; color: #fff; font: 700 14px/1 var(--font); letter-spacing: .04em; text-decoration: none; box-shadow: 0 0 0 2px #fff, var(--sh-pop); }
header a.adminbadge { color: #fff; }
.adminbadge::before { content: ''; width: 12px; height: 14px; background: #ffd43d; clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); }
.adminbadge:hover { background: #00118f; text-decoration: underline; }
.adminbadge:focus-visible { outline: 4px solid #000; outline-offset: 2px; box-shadow: 0 0 0 2px #ffd43d; }
@media print { .adminbadge { display: none; } }
/* DADS：見出しの帯の無い画面（/login・/welcome・/invite）と /worker・/devices/pair の狭い中央の枠、番号付きの手順、OS ごとの大きな入手ボタン */
.dads.d-narrow { max-width: 720px; margin-inline: auto; }
.d-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.dads .d-steps > li { counter-increment: step; position: relative; padding-left: 80px; }
.d-steps > li::before { content: counter(step); position: absolute; left: 24px; top: 24px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; }
.d-steps > li.done::before { content: '✓'; background: var(--ok); }
.d-steps > li > h2 { line-height: 36px; margin-bottom: 8px; }
.dads .btn.d-osbtn { min-height: 64px; min-width: 200px; padding: 12px 24px; font-size: 18px; }
.dads td select { width: auto; }
.dads .team form.invite { margin-top: 16px; }
.dads label.d-field { font-weight: 400; margin: 0 0 16px; }  /* .dads label（太字・上の余白）に負けていた。欄の中の文字・注記は太字にしない */
/* DADS：絞り込み・横に並べた欄（ラベルを上に。/admin/*）と、画面の中で切り替えるタブ（ボタンの .d-tab。選んでいるものは aria-selected） */
.d-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin: 0 0 16px; }
.dads .d-filters .d-field, .dads .d-filters > p { margin: 0; }
.d-tabs button.d-tab { background: none; border: 0; border-bottom: 4px solid transparent; font: inherit; cursor: pointer; }
.d-tabs .d-tab[aria-selected=true] { font-weight: 700; color: var(--accent); border-bottom-color: var(--accent); }
/* DADS：選ぶカード（/org のプラン。中の radio を選んだカードは枠を太く） */
.d-card.d-pick { cursor: pointer; }
.d-card.d-pick:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.d-card.d-pick input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
/* Admin の「この人として見る」の表示中の帯（画面の一番上。黄の地・黒い文字。web/src/lib/impbar.ts） */
.impbar { position: sticky; top: 0; z-index: 3000001; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px;
  background: #ffd43d; color: #1a1a1a; border-bottom: 3px solid #1a1a1a; font: 700 15px/1.4 var(--font); }
.impbar-end { min-height: 32px; padding: 2px 14px; border: 0; border-radius: 6px; background: #1a1a1a; color: #fff; font: 700 14px/1 var(--font); cursor: pointer; }
.impbar-end:hover { text-decoration: underline; }
.impbar-end:focus-visible { outline: 4px solid #000; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
@media print { .impbar { display: none; } }