/* 任意形状ジオデシックドーム型建築の生成プログラム — 画面の見た目（配色・フォントは T-ARK に合わせる） */
:root {
    --primary: #005a9c; --primary-2: #004080; --primary-l: #e8f1f9; --bg: #f4f5f7; --line: #d9dee5; --panel: #fff;
    --text: #263238; --muted: #6b7785; --ok: #1e8449; --ng: #c0392b; --warn: #b9770e; --dim: #1a4f8b;
    --radius: 8px; --appbar: 52px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: 'Meiryo', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; margin: 0; background: var(--bg); color: var(--text); font-size: 13px; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
button { padding: 5px 11px; border: 1px solid #b8c3d0; background: #fff; border-radius: 6px; cursor: pointer; }
button:hover { background: var(--primary-l); border-color: #8fb0cf; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--primary); color: #fff; border-color: var(--primary-2); }
button.primary:hover { background: var(--primary-2); }
button.x { padding: 0 7px; line-height: 20px; border-color: transparent; color: var(--muted); background: transparent; font-size: 15px; }
button.x:hover { color: var(--ng); background: #fdecea; }
input[type=number], input[type=text], select { padding: 4px 6px; border: 1px solid #c3ccd6; border-radius: 5px; background: #fff; min-width: 0; }
input:focus, select:focus, button:focus-visible { outline: 2px solid #7fb3e0; outline-offset: 0; }

/* ---------------- ヘッダー ---------------- */
.appbar { height: var(--appbar); display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); position: relative; z-index: 5; }
.appbar .logo { flex: none; }
.appbar h1 { font-size: 1.08em; color: var(--primary); margin: 0; white-space: nowrap; line-height: 1.15; display: flex; flex-direction: column; }
.appbar h1 small { font-size: 0.62em; font-weight: normal; color: var(--muted); letter-spacing: 0.02em; }
.proj-name { width: 170px; font-weight: bold; }
.filebtns { display: flex; gap: 5px; align-items: center; flex: none; }
.filebtns button { white-space: nowrap; }
button.ai { background: #4527a0; color: #fff; border-color: #4527a0; white-space: nowrap; flex: none; }
button.ai:hover { background: #311b92; }
button.ai.busy { background: #6a1b9a; animation: aipulse 1.4s ease-in-out infinite; }
button.ai.want { outline: 3px solid #ffb300; }
@keyframes aipulse { 50% { opacity: 0.7; } }
/* ウォークスルー（中から見る）の説明 */
.walkhud { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 3; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 0.86em; line-height: 1.5; pointer-events: none; max-width: calc(100% - 120px); }
body.walking .legend, body.walking .vhint { display: none; }   /* 中から見ているときは凡例・通常の説明を隠す（ウォークスルーの説明を出す） */
/* T-ARK のモデル画面との同期（js/tark_sync.js） */
button.tarksync { white-space: nowrap; flex: none; position: relative; padding-left: 22px; }
button.tarksync::before { content: ''; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #b0bac5; }
button.tarksync.on::before { background: var(--ok); }
button.tarksync.wait::before { background: #f0a500; animation: aipulse 1.4s ease-in-out infinite; }
button.tarksync.ng::before { background: var(--ng); }
#tark-sync-panel { position: fixed; z-index: 60; width: 400px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
#tark-sync-panel[hidden] { display: none; }
#tark-sync-panel .ts-h { font-weight: bold; color: var(--primary); display: flex; justify-content: space-between; align-items: center; }
#tark-sync-panel .ts-st { padding: 6px 8px; border-radius: 6px; background: #f1f3f5; }
#tark-sync-panel .ts-st.on { background: #e8f5ec; color: var(--ok); }
#tark-sync-panel .ts-st.wait { background: #fff6e0; color: var(--warn); }
#tark-sync-panel .ts-st.ng { background: #fdecea; color: var(--ng); }
#tark-sync-panel .ts-url { display: flex; flex-direction: column; gap: 3px; color: var(--muted); }
#tark-sync-panel .ts-url input { width: 100%; color: var(--text); }
#tark-sync-panel .ts-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#sample-sel { max-width: 200px; }
.badges { display: flex; gap: 5px; flex-wrap: nowrap; overflow: hidden; margin-left: auto; min-width: 0; }
.badge { padding: 2px 9px; border-radius: 11px; background: #eef4f9; border: 1px solid #cfdceb; font-size: 0.84em; white-space: nowrap; }
.badge.dim { background: #fff; border-color: #d5dde7; color: var(--muted); }
.badge.ok { background: #e8f8ef; border-color: #9fd8b4; color: #1e7b45; }
.badge.ng { background: #fdecea; border-color: #f2a59d; color: #b03a2e; }
.badge.warn { background: #fef5e7; border-color: #f5cba7; color: #9c640c; }

/* ---------------- レイアウト ---------------- */
.layout { display: grid; grid-template-columns: var(--side-w, 350px) 6px 1fr; height: calc(100% - var(--appbar)); }
.side { background: var(--panel); overflow-y: auto; min-height: 0; padding-bottom: 40px; }
/* サイドパネルの幅を変えるつまみ（ドラッグ・←→ キー・ダブルクリックで元の幅） */
.splitter { cursor: col-resize; background: var(--panel); border-left: 1px solid var(--line); touch-action: none; position: relative; }
.splitter::after { content: ''; position: absolute; left: 1px; top: 50%; width: 2px; height: 36px; margin-top: -18px; border-radius: 1px; background: #c3ccd6; }
.splitter:hover, .splitter:focus-visible, body.resizing .splitter { background: var(--primary-l); outline: none; }
.splitter:hover::after, body.resizing .splitter::after { background: var(--primary); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .viewport { pointer-events: none; }
/* 下の情報の欄の高さを変えるつまみ（横向き。ドラッグ・↑↓ キー・ダブルクリックで元の高さ＝中身に合わせて 200px まで） */
.splitter.hsplit { cursor: row-resize; border-left: 0; border-top: 1px solid var(--line); height: 6px; }
.splitter.hsplit::after { left: 50%; top: 1px; width: 36px; height: 2px; margin: 0 0 0 -18px; }
body.resizing.rows { cursor: row-resize; }
.main { display: grid; grid-template-rows: 1fr auto auto; min-height: 0; min-width: 0; }
.main.info-sized .info { height: var(--info-h); max-height: none; }
body.noinfo .info, body.noinfo .hsplit { display: none; }

/* ---------------- 設定の欄（アコーディオン） ---------------- */
.acc { border-bottom: 1px solid var(--line); }
.acc-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; border: 0; border-radius: 0; background: #fff; text-align: left; }
.acc-h:hover { background: #f6f9fc; }
.acc-ic { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--primary-l); color: var(--primary); font-size: 14px; }
.acc-t { font-weight: bold; font-size: 1.02em; white-space: nowrap; }
.acc-sum { color: var(--muted); font-size: 0.86em; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.acc-chev { color: #9aa7b4; transition: transform 0.15s; flex: none; }
.acc.open .acc-chev { transform: rotate(90deg); }
.acc.open .acc-h { background: #f6f9fc; }
.acc-b { display: none; padding: 6px 14px 14px; }
.acc.open .acc-b { display: block; }
.acc-b h3, .more-b h3 { font-size: 0.92em; color: var(--primary); margin: 12px 0 4px; padding-bottom: 2px; border-bottom: 1px solid #e6ebf1; }

.row { display: grid; grid-template-columns: 1fr minmax(120px, 52%); align-items: center; gap: 8px; margin: 7px 0; }
.row > * { min-width: 0; }
.row > label { color: #37474f; line-height: 1.3; }
select { max-width: 100%; text-overflow: ellipsis; }
.side, .acc-b, .more-b { min-width: 0; }
.row.dis > label, .row.dis .lab { color: #a0a9b3; }
.row select, .row .num { width: 100%; }
.row .num { display: flex; align-items: center; gap: 4px; }
.row .num input { flex: 1; width: 100%; text-align: right; }
.unit { color: var(--muted); font-size: 0.86em; white-space: nowrap; min-width: 18px; }
.row .pair { display: flex; align-items: center; gap: 8px; }
.row .pair input[type=range] { flex: 1; width: 100%; accent-color: var(--primary); }
.row .pair output { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--primary); font-weight: bold; }
.row.chk { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.row.chk .lab { line-height: 1.35; }
.hint { color: var(--muted); font-size: 0.85em; margin: -2px 0 6px; line-height: 1.5; }
.note { background: #fef9e7; border: 1px solid #f6e3a1; border-radius: 6px; padding: 7px 9px; font-size: 0.86em; line-height: 1.55; margin: 8px 0; }
.kvline { color: var(--muted); font-size: 0.86em; margin: 2px 0 4px; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sub { margin: 4px 0 8px 14px; padding: 2px 0 4px 10px; border-left: 3px solid #d6e4f2; }

/* スイッチ（チェックボックス） */
.sw { position: relative; width: 34px; height: 20px; flex: none; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw i { position: absolute; inset: 0; border-radius: 10px; background: #c9d2dc; transition: background 0.15s; pointer-events: none; }
.sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.sw input:checked + i { background: var(--primary); }
.sw input:checked + i::after { transform: translateX(14px); }
.sw input:focus-visible + i { outline: 2px solid #7fb3e0; }
.sw input:disabled + i { opacity: 0.4; }

/* セグメント（選択ボタン） */
.seg { display: inline-flex; border: 1px solid #b8c3d0; border-radius: 7px; overflow: hidden; background: #fff; }
.seg button { border: 0; border-radius: 0; padding: 5px 11px; background: transparent; border-right: 1px solid #dfe5ec; white-space: nowrap; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--primary); color: #fff; }
.row .seg { justify-self: start; }

/* 詳細設定（折りたたみ） */
details.more { margin-top: 10px; border: 1px solid #e3e8ef; border-radius: var(--radius); background: #fafbfd; }
details.more > summary { cursor: pointer; padding: 7px 10px; color: var(--primary); font-weight: bold; font-size: 0.9em; list-style: none; user-select: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform 0.15s; }
details.more[open] > summary::before { transform: rotate(90deg); }
.more-b { padding: 0 10px 8px; }

/* 表（開口・断面・法規） */
table.t { width: 100%; border-collapse: collapse; font-size: 0.88em; margin: 4px 0 8px; }
table.t th { background: #eef4f9; padding: 3px 5px; border: 1px solid #d3deea; white-space: nowrap; font-weight: normal; color: #37474f; }
table.t td { padding: 2px 4px; border: 1px solid #e1e6ec; text-align: center; }
table.t td.l { text-align: left; }
table.t input, table.t select { font-size: 0.95em; padding: 2px 3px; }
table.t select { max-width: 120px; }
input.w3 { width: 44px; } input.w4 { width: 62px; } input.w5 { width: 72px; }
.ok { color: var(--ok); font-weight: bold; }
.ng { color: var(--ng); font-weight: bold; }
.warn { color: var(--warn); font-weight: bold; }

/* 床の一覧 */
.flcard { border: 1px solid #e3e8ef; border-radius: var(--radius); padding: 7px 9px; margin: 6px 0; background: #fff; }
.flrow { display: flex; align-items: center; gap: 8px; }
.flrow label { display: flex; align-items: center; gap: 4px; }
.flrow .x { margin-left: auto; }
.flcard .hint { margin: 4px 0 0; }
.flcard details.more { margin-top: 6px; }
.fl-more { display: grid; gap: 6px; padding-top: 2px; }
.fl-more label { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* 付属室・間仕切り壁のカード */
.flcard .flrow + .flrow { margin-top: 5px; }
.flrow { flex-wrap: wrap; }
input.w8 { width: 120px; font-weight: bold; }
.seg.mini button { padding: 2px 8px; font-size: 0.88em; }
.flcard .ops { margin-top: 6px; padding-top: 5px; border-top: 1px dashed #e3e8ef; display: grid; gap: 4px; }
.flcard .ops select { max-width: 150px; }
button.mini { justify-self: start; padding: 2px 9px; font-size: 0.88em; }

/* 出力の大きなボタン */
.outmain { display: grid; gap: 8px; margin: 6px 0; }
button.big { display: flex; flex-direction: column; align-items: flex-start; padding: 9px 12px; text-align: left; }
button.big small { font-size: 0.82em; opacity: 0.85; }

/* ---------------- 3D 表示 ---------------- */
.viewport { position: relative; min-height: 0; background: #f4f6f9; overflow: hidden; }
.viewport canvas { display: block; }
.vbar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; z-index: 3; pointer-events: none; }
.vbar > * { pointer-events: auto; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.vbar > button, .vbar .tg, .vbar details.menu > summary { background: rgba(255, 255, 255, 0.96); }
.vbar .tg { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #b8c3d0; border-radius: 7px; cursor: pointer; }
.vbar #pick-seg { margin-left: auto; }
details.menu { position: relative; border-radius: 7px; }
details.menu > summary { list-style: none; cursor: pointer; padding: 5px 11px; border: 1px solid #b8c3d0; border-radius: 7px; user-select: none; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-b { position: absolute; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid #c8d1db; border-radius: var(--radius); padding: 8px 12px; display: grid; gap: 6px; min-width: 180px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); z-index: 4; }
.menu-b label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.vhint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(38, 50, 56, 0.78); color: #fff; padding: 5px 12px; border-radius: 14px; font-size: 0.84em; white-space: nowrap; pointer-events: none; z-index: 2; max-width: calc(100% - 200px); overflow: hidden; text-overflow: ellipsis; }
.legend { position: absolute; bottom: 44px; left: 10px; background: rgba(255, 255, 255, 0.92); border: 1px solid #d3dbe4; border-radius: 6px; padding: 5px 9px; font-size: 0.8em; line-height: 1.6; max-height: 40%; overflow-y: auto; z-index: 2; }
.legend .swc { display: inline-block; width: 16px; height: 4px; vertical-align: middle; margin-right: 5px; border-radius: 2px; }
.pickinfo { position: absolute; top: 54px; right: 10px; background: rgba(255, 255, 255, 0.97); border: 1px solid #c8d1db; border-radius: var(--radius); padding: 8px 10px; font-size: 0.86em; max-width: 280px; display: none; z-index: 3; line-height: 1.55; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.pickinfo .x { float: right; margin: -4px -6px 0 6px; }
.infotg { position: absolute; right: 10px; bottom: 10px; z-index: 3; background: rgba(255, 255, 255, 0.96); }

/* 寸法の数字・ドラッグ中の値 */
.dimlayer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.dimlab { position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 7px; background: rgba(255, 255, 255, 0.94); border: 1px solid #9fb8d3; border-radius: 10px; color: var(--dim); font-size: 12px; white-space: nowrap; cursor: text; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); user-select: none; }
.dimlab:hover { border-color: var(--dim); background: #fff; }
.dimlab .dn { font-size: 0.88em; color: #4f6f91; }
.dimlab .dv { font-weight: bold; font-variant-numeric: tabular-nums; }
.dimlab .dv::after { content: ' m'; font-weight: normal; font-size: 0.85em; color: #4f6f91; }
.dimlab.ro { cursor: default; border-style: dashed; }
.dimlab.editing { border-color: var(--dim); box-shadow: 0 0 0 3px rgba(26, 79, 139, 0.18); }
.diminp { width: 72px; padding: 0 3px; border: 1px solid var(--dim); border-radius: 4px; font-size: 12px; text-align: right; }
.dragtip { position: absolute; left: 0; top: 0; display: none; background: #263238; color: #fff; padding: 3px 9px; border-radius: 6px; font-size: 12px; white-space: nowrap; pointer-events: none; }

/* ---------------- 情報の欄 ---------------- */
.info { background: #fff; overflow-y: auto; max-height: 200px; min-height: 0; padding: 8px 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.info .card { border: 1px solid #e3e8ef; border-radius: var(--radius); padding: 7px 10px; }
.info .card h4 { margin: 0 0 4px; font-size: 0.9em; color: var(--primary); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 0.86em; }
.kv b { font-weight: normal; color: var(--muted); }
.msgs { font-size: 0.85em; line-height: 1.55; }
.msgs div { padding: 1px 0; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #263238; color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 0.9em; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 50; max-width: 90vw; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- 狭い画面（タブレット縦・スマートフォン） ---------------- */
@media (max-width: 1100px) {
    .appbar h1 { display: none; }
    .badges .badge.dim { display: none; }
}
@media (max-width: 860px) {
    :root { --appbar: auto; }
    .appbar { flex-wrap: wrap; padding: 6px 10px; gap: 6px; }
    .proj-name { width: 130px; }
    .badges { order: 9; width: 100%; margin-left: 0; flex-wrap: wrap; }
    .layout { display: flex; flex-direction: column; height: auto; }
    html, body { overflow-x: hidden; }
    .main { display: contents; }
    .splitter { display: none; }
    .side { width: 100%; }
    .viewport { order: 1; height: 62vh; flex: none; }
    .side { order: 2; border-right: 0; overflow: visible; padding-bottom: 8px; }
    .info { order: 3; max-height: none; }
    .main.info-sized .info { height: auto; }
    .vhint, .legend { display: none; }
    .vbar #pick-seg { margin-left: 0; }
    .row { grid-template-columns: 1fr minmax(120px, 55%); }
}
@media print {
    .appbar, .side, .splitter, .vbar, .vhint, .infotg { display: none; }
    .layout { grid-template-columns: 1fr; }
}