html,
body,
#map {
    height: 100%;
    margin: 0;
}

#map {
    position: fixed;
    inset: 0;
}

/* 左：レイヤーパネル */
.panel {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 10;
    width: 340px;
    max-width: calc(100% - 24px);
    background: rgba(255, 255, 255, .97);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}

.panel h2 {
    font-size: 14px;
    margin: 0 0 6px;
}

/* レイヤーパネル開閉 */
#layerPanel { transition: width .25s ease, transform .25s ease, opacity .25s ease; position:fixed; }
#layerPanel.collapsed { width:34px !important; padding:8px 6px; overflow:hidden; }
#layerPanel.collapsed h2, #layerPanel.collapsed #layerRows, #layerPanel.collapsed #trafficUi { display:none; }
#layerPanel .panel-toggle { position:absolute; top:6px; right:6px; width:28px; height:28px; border:1px solid #d4d4d8; background:#f3f4f6; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; }
#layerPanel .panel-toggle:hover { background:#e5e7eb; }
#layerPanel.collapsed .panel-toggle { right:3px; }

/* 汎用パネルトグル */
.toolpanel { position:fixed; }
.toolpanel .panel-toggle { position:absolute; top:6px; right:6px; width:28px; height:28px; border:1px solid #d4d4d8; background:#f3f4f6; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; }
.toolpanel .panel-toggle:hover { background:#e5e7eb; }
.toolpanel.collapsed { width:40px !important; padding:8px 6px; overflow:hidden; }
.toolpanel.collapsed h2, .toolpanel.collapsed .stack, .toolpanel.collapsed .sel-toolbar, .toolpanel.collapsed .sel-wrap { display:none; }
.toolpanel.collapsed .panel-toggle { right:4px; }

/* スタイルパネル（位置はJSで layerPanel の直下に再配置） */
#stylePanel { top: 300px; left: 12px; width:340px; }
#stylePanel.collapsed { width:34px !important; }
#stylePanel.collapsed h2, #stylePanel.collapsed .style-rows, #stylePanel.collapsed .small { display:none; }
#stylePanel .panel-toggle { position:absolute; top:6px; right:6px; width:28px; height:28px; border:1px solid #d4d4d8; background:#f3f4f6; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; }
#stylePanel .panel-toggle:hover { background:#e5e7eb; }
.style-rows { display:grid; gap:8px; margin-top:4px; height:200px; overflow:auto; padding-right:4px; }
.style-row { border:1px solid #e5e5e5; border-radius:8px; padding:6px 8px; background:#fff; display:grid; gap:4px; }
.style-row header { font-weight:600; font-size:12px; display:flex; align-items:center; gap:6px; }
.style-row select, .style-row input[type=number] { width:100%; font-size:12px; padding:2px 4px; }
.style-row .inline { display:flex; gap:6px; }
.style-row button { font-size:11px; padding:4px 8px; border:1px solid #bbb; background:#f5f5f5; border-radius:6px; cursor:pointer; }
.style-row button:hover { background:#e9ecef; }
.legend-cats { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; margin-top:4px; }
.legend-grad { display:flex; height:14px; background:linear-gradient(90deg,#33a02c,#b2df8a,#ffffbf,#fdae61,#d73027); border:1px solid #ccc; border-radius:4px; margin:4px 0; }

.row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 10px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.row:first-of-type {
    border-top: 0;
}

.small {
    font-size: 12px;
    color: #555;
}

.range {
    width: 100%;
}

.order {
    margin-top: 8px;
    border-top: 1px dashed #ddd;
    padding-top: 8px;
}

.order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.order-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
}

.btns button {
    margin-left: 6px;
}

/* 並び替えアイコンボタン */
.icon-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    background: #f3f4f6;
    border: 1px solid #d4d4d8;
    border-radius: 6px;
    cursor: pointer;
}

    .layer-row { display:grid; grid-template-columns: auto 1fr 80px auto; gap:6px 8px; align-items:center; padding:6px 8px; border:1px solid #e5e5e5; border-radius:8px; background:#fff; margin-bottom:6px; }
    .layer-row.dragging { opacity:.4; }
    .layer-row .handle { cursor:grab; user-select:none; font-size:14px; line-height:1; padding:2px 4px; }
    .layer-row .handle:active { cursor:grabbing; }
    .layer-row label { display:flex; align-items:center; gap:4px; font-size:12px; }
    .layer-row input[type=range] { width:100%; }
    .btns button { margin-left: 4px; }

.icon-btn:active {
    background: #d1d5db;
}

.icon-btn:disabled {
    opacity: .35;
    cursor: default;
}

/* 右：抽出ツールパネル（高さを左に揃える） */
.toolpanel {
    position: fixed;
    right: 12px;
    left: auto;
    top: 100px;
    z-index: 11;
    width: 360px;
    max-width: calc(100% - 24px);
    background: rgba(255, 255, 255, .98);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}

.toolpanel h2 {
    font-size: 14px;
    margin: 0 0 8px;
}

.hr {
    margin: 8px 0;
    height: 1px;
    background: #eee;
}

.stack {
    display: grid;
    gap: 6px;
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.muted {
    color: #666;
}

.progress {
    height: 6px;
    background: #eee;
    border-radius: 999px;
    overflow: hidden;
}

.bar {
    height: 100%;
    width: 0%;
    background: #3b82f6;
    transition: width .2s ease;
}

.pill {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
}

.coord {
    position: fixed;
    left: 12px;
    bottom: 12px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    font: 12px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    z-index: 9;
}

/* 抽出パネル位置固定（ナビゲーションと重ならないよう下げる） */
#extractPanel { top:100px !important; }

/* 選択パネル（右下配置） */
#selectionPanel {
    top: auto;
    bottom: 62px;
    right: 12px;
    width: 420px;
    max-height: 45vh;
    display: flex;
    flex-direction: column;
}
#selectionPanel .sel-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:4px; }
.small-btn { font-size:11px; padding:4px 8px; border:1px solid #ccc; background:#f8f9fa; border-radius:6px; cursor:pointer; }
.small-btn:hover { background:#eef2f7; }
.sel-wrap { flex:1; overflow:auto; border:1px solid #e2e8f0; border-radius:8px; background:#fff; padding:4px; }
.sel-table { border-collapse: collapse; width:100%; font-size:11px; line-height:1.3; }
.sel-table th, .sel-table td { border:1px solid #e5e7eb; padding:2px 4px; text-align:left; }
.sel-table th { position:sticky; top:0; background:#f1f5f9; z-index:1; }
.sel-table tbody tr:hover { background:#fef9c3; }
.sel-table tbody tr.selected-row { background:#fde68a !important; }
@media (max-width: 900px){
    #selectionPanel { width: calc(100% - 24px); left:12px; right:12px; bottom: calc(12px + 0px); }
}