:root{
  --bg:#0f1420;
  --sidebar:#141b2d;
  --sidebar-hover:#1e2740;
  --sidebar-active:#28345a;
  --panel:#182238;
  --panel-2:#1d2942;
  --border:#2a3550;
  --text:#e8ecf5;
  --text-dim:#8b96b3;
  --accent:#4fd1c5;
  --accent-2:#f2c14e;
  --danger:#ef6f6f;
  --rar1:#dcdde0;
  --rar2:#9fd13a;
  --rar3:#6fb8ef;
  --rar4:#c69bef;
  --rar5:#f2c14e;
  --rar6:#c1590f;
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  background:var(--bg);color:var(--text);
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

.app{display:flex;min-height:100vh;}

/* ---------- Sidebar ---------- */
.sidebar{
  width:230px;flex-shrink:0;
  background:var(--sidebar);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.sidebar-brand{padding:20px 18px 14px;border-bottom:1px solid var(--border);}
.sidebar-brand .logo{font-size:14px;font-weight:700;letter-spacing:.5px;color:var(--accent);}
.sidebar-brand .sub{font-size:11px;color:var(--text-dim);margin-top:2px;}
.sidebar-nav{flex:1;padding:10px 0;overflow-y:auto;}
.nav-group-label{
  font-size:10px;color:var(--text-dim);text-transform:uppercase;
  letter-spacing:1px;padding:14px 18px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;margin:1px 8px;border-radius:8px;
  font-size:13px;color:var(--text-dim);cursor:pointer;
  border:1px solid transparent;
}
.nav-item:hover{background:var(--sidebar-hover);color:var(--text);}
.nav-item.active{background:var(--sidebar-active);color:var(--text);border-color:#3a4a7a;}
.nav-icon{
  width:20px;height:20px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  background:var(--panel-2);color:var(--text-dim);flex-shrink:0;
}
.nav-item.active .nav-icon{background:var(--accent);color:#0f1420;}
.nav-item-label{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
.nav-item-soon{opacity:.7;}
.nav-item-soon:hover{opacity:1;}
.soon-badge{
  font-size:9px;font-weight:700;color:var(--text-dim);
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:10px;padding:1px 6px;flex-shrink:0;
}
.sidebar-footer{
  padding:14px 18px;border-top:1px solid var(--border);
  font-size:11px;color:var(--text-dim);
  display:flex;align-items:center;gap:8px;
}
.avatar-mini{
  width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#0f1420;font-weight:700;font-size:11px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
#auth-status-text{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sidebar-footer .link-btn{
  display:inline;background:none;border:none;padding:0;margin-left:auto;
  flex-shrink:0;color:var(--accent);font-size:11px;text-decoration:underline;
  white-space:nowrap;cursor:pointer;
}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;}
.topbar{
  height:56px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:var(--bg);position:sticky;top:0;z-index:5;
}
.topbar-title{font-size:15px;font-weight:700;}
.topbar-crumb{font-size:11px;color:var(--text-dim);margin-top:2px;}
.topbar-right{display:flex;gap:10px;align-items:center;}
.content{padding:22px 26px 60px;}

/* スマホ幅のみで表示するハンバーガー（PC/タブレットではdisplay:noneのまま非表示） */
.topbar-hamburger{
  display:none;flex-shrink:0;
  width:34px;height:34px;margin-right:12px;
  align-items:center;justify-content:center;
  background:var(--panel-2);color:var(--text);
  border:1px solid var(--border);border-radius:8px;
  font-size:16px;cursor:pointer;
}
.topbar-hamburger:hover{border-color:var(--accent);}

/* スマホ幅でサイドバー展開時にメイン領域を覆うオーバーレイ（PC/タブレットでは非表示のまま） */
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(5,7,14,.6);z-index:90;}

.view{display:none;}
.view.active{display:block;}

/* ---------- Common widgets ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;}
.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px;}
.stat-card .label{font-size:11px;color:var(--text-dim);}
.stat-card .value{font-size:22px;font-weight:700;margin-top:6px;}
.stat-card .delta{font-size:11px;color:var(--accent);margin-top:4px;}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:18px;margin-bottom:18px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.panel-head h2{font-size:14px;margin:0;}
.panel-head .hint{font-size:11px;color:var(--text-dim);}
.panel-head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}

.btn{
  background:var(--accent);color:#0b1220;border:none;border-radius:7px;
  padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer;
}
.btn:hover{opacity:.9;}
.btn.secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--border);}
.btn.small{padding:5px 10px;font-size:11px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}

.edit-mode-badge{
  font-size:10px;font-weight:700;color:#0b1220;background:var(--accent-2);
  border-radius:12px;padding:3px 10px;letter-spacing:.3px;margin-left:8px;
}
.dirty-indicator{font-size:11px;color:var(--accent-2);margin-left:10px;}
.readonly-badge{
  font-size:10px;font-weight:700;color:var(--text-dim);background:var(--panel-2);
  border:1px solid var(--border);border-radius:12px;padding:2px 8px;
}

/* ---------- Tool hub cards (home) ---------- */
.tool-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.tool-hub-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:18px;cursor:pointer;position:relative;}
.tool-hub-card:hover{border-color:var(--accent);}
.tool-hub-card.disabled{opacity:.6;}
.tool-hub-card .hub-icon{
  width:34px;height:34px;border-radius:8px;background:var(--panel-2);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--accent);margin-bottom:10px;font-size:13px;
}
.tool-hub-card .hub-title{font-size:13px;font-weight:700;}
.tool-hub-card .hub-desc{font-size:11px;color:var(--text-dim);margin-top:4px;line-height:1.5;}
.hub-badge{
  position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;
  background:var(--panel-2);color:var(--text-dim);
  padding:3px 9px;border-radius:12px;border:1px solid var(--border);
}
.hub-badge.active-badge{background:var(--accent);color:#0b1220;border-color:var(--accent);}

/* ---------- Roster list ---------- */
/* cmd_070 段階1①: フィルタ部分(タイトル/ボタン・サマリー・検索/絞り込み)をピン留めし、
   一覧をスクロールしても常に操作できるようにする。cmd_065の抽出結果プレビュー
   (.import-confirm-sticky-header)と同じ「negative margin+paddingで.panelの内側パディングへ
   食い込ませてからposition:stickyでtopbar直下に貼り付ける」手法を踏襲。 */
.roster-sticky-head{
  position:sticky;top:56px;z-index:4;background:var(--panel);
  margin:-18px -18px 0;padding:18px 18px 14px;
}
.col-settings{position:relative;}
.col-settings-popover{
  position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:170px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:8px;
  padding:8px 12px;box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.col-settings-popover label{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text);
  padding:5px 0;cursor:pointer;white-space:nowrap;
}
.chip{
  background:var(--panel-2);border:1px solid var(--border);border-radius:20px;
  padding:5px 12px;font-size:11px;color:var(--text-dim);cursor:pointer;
}
.chip.active{background:var(--accent);color:#0b1220;border-color:var(--accent);}
.chip.fav-filter.active{background:var(--accent-2);color:#0b1220;border-color:var(--accent-2);}

.server-toggle{display:flex;border:1px solid var(--border);border-radius:20px;overflow:hidden;}
.server-toggle button{
  background:var(--panel-2);color:var(--text-dim);border:none;padding:5px 14px;
  font-size:11px;font-weight:700;cursor:pointer;
}
.server-toggle button.active{background:var(--accent);color:#0b1220;}

table{width:100%;border-collapse:collapse;font-size:12px;}
th{
  text-align:left;color:var(--text-dim);font-weight:600;
  padding:8px 10px;border-bottom:1px solid var(--border);font-size:11px;white-space:nowrap;
}
th.sortable{cursor:pointer;user-select:none;}
th.sortable:hover{color:var(--text);}
.sort-icon{font-size:9px;color:var(--text-dim);margin-left:3px;}
.sort-icon.active{color:var(--accent);}
td{padding:9px 10px;border-bottom:1px solid #202b45;}
tr.op-row{cursor:pointer;}
tr.op-row:hover{background:var(--panel-2);}
tr.op-row.locked{cursor:default;}
tr.op-row.locked:hover{background:none;}
tr.op-row.view-only{opacity:.7;}

.op-avatar{
  width:32px;height:32px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:#0b1220;flex-shrink:0;
}
.op-name-cell{display:flex;align-items:center;gap:10px;}
.op-name{font-weight:600;}
.lock-icon{font-size:9px;color:var(--text-dim);margin-left:6px;}
.jp-unavailable-cell{position:relative;}
.jp-unavailable-cell::after{content:"※";position:absolute;top:1px;right:2px;font-size:9px;color:var(--text-dim);}

.rarity-star{font-size:11px;letter-spacing:1px;}
/* cmd_070 段階2: 見出し行固定(Excel風列ヘッダー絞り込み)。subtask_070k/070nで実機検証済みの
   「.table-scroll自体を上限高さ+overflow:auto(縦横とも)の内部スクロール箱にし、
   theadのposition:stickyをその内部スクロール基準にする」方式(bounded方式)を採用する
   ——.table-scrollがoverflow-x:autoのままだとthead th{position:sticky}は効かない(naive方式失敗、
   実機screenshot確認済み・poc/cmd070_excel_style参照)。 */
.table-scroll{overflow:auto;max-height:66vh;max-height:66dvh;}
thead th{position:sticky;top:0;z-index:5;background:var(--panel-2);}
#roster-table{min-width:1360px;}
/* cmd_070 段階1③④: 「人材発掘」「公開求人」「他入手法」「大陸実装日」はデフォルト非表示、
   #btn-col-settingsの設定で殿が個別に再表示できる（min-widthはroster.jsのJSで動的調整）。 */
#roster-table.hide-col-recruit .col-recruit,
#roster-table.hide-col-headhunt .col-headhunt,
#roster-table.hide-col-otherAcq .col-otherAcq,
#roster-table.hide-col-releaseCN .col-releaseCN{display:none;}

/* ---------- Excel風 列ヘッダー絞り込み(cmd_070 段階2、subtask_070k/070n実証済みモック踏襲) ---------- */
.hf-th{position:relative;}
.hf-th-row{display:flex;align-items:center;gap:4px;white-space:nowrap;}
.hf-filter-btn{
  appearance:none;background:transparent;border:none;color:var(--text-dim);cursor:pointer;
  font-size:10px;padding:2px 3px;border-radius:4px;line-height:1;
}
.hf-filter-btn:hover{background:var(--panel);color:var(--text);}
.hf-filter-btn.has-value{color:var(--accent);}
/* subtask_070s: position:absoluteだと.table-scroll(overflow:auto)の外側へ出た分がスマホ幅の右端列
   (β列・大陸実装日列等)で見切れる(実機確認済み)。position:fixedへ変え、開時にJS側で
   getBoundingClientRect()を基にビューポート座標で配置することで.table-scrollの外へ完全に逃がす。 */
.hf-popover{
  display:none;position:fixed;z-index:30;
  background:var(--panel-2);border:1px solid var(--border);border-radius:8px;
  padding:10px 12px;box-shadow:0 10px 28px rgba(0,0,0,.45);
  min-width:180px;font-weight:400;
}
.hf-popover.open{display:block;}
.hf-popover-title{font-size:10px;color:var(--text-dim);margin-bottom:6px;font-weight:700;}
/* subtask_070i踏襲: ポップオーバー内チップは.filter-row系クラスを一切継承しない専用クラスを使う
   (768px以下での縦積みメディアクエリの罠を再発させないため)。 */
.hf-popover-chips{display:flex;gap:5px;flex-wrap:wrap;max-width:230px;}
.hf-popover-chips.scrollable{max-height:150px;overflow-y:auto;padding-right:2px;}
.hf-popover .chip{font-size:10px;padding:4px 9px;}
.hf-search-input{
  background:var(--panel);border:1px solid var(--border);border-radius:6px;
  padding:5px 8px;font-size:11px;color:var(--text);width:160px;
}
.hf-range-row{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);}
.hf-range-row input[type="date"],.hf-range-row input[type="number"]{
  background:var(--panel);border:1px solid var(--border);border-radius:6px;color:var(--text);
  font-size:11px;padding:3px 6px;width:92px;
}
.hf-range-row input[type="number"]{width:56px;}
.hf-jp-only{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-dim);margin-top:6px;cursor:pointer;}
.hf-stage-select{
  background:var(--panel);border:1px solid var(--border);border-radius:6px;color:var(--text);
  font-size:11px;padding:4px 6px;
}
/* 編集モード中は列ヘッダー絞り込みを無効化する(旧#filter-panel.disabledの後継) */
#roster-table.editing .hf-filter-btn{opacity:.4;pointer-events:none;}

.lvl-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;border-radius:5px;font-size:10px;font-weight:700;padding:0 4px;
}
.lvl-dash{color:var(--text-dim);font-size:11px;}
.inline-edit-input{
  width:44px;background:var(--panel-2);border:1px solid var(--accent);border-radius:5px;
  color:var(--text);font-size:11px;padding:3px 4px;text-align:center;
}
.inline-edit-input:focus{outline:none;}

.owned-toggle{
  width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text-dim);
}
.owned-toggle.owned{background:var(--accent);color:#0b1220;border-color:var(--accent);}
.owned-toggle.locked{cursor:not-allowed;opacity:.5;}
.fav-toggle{font-size:15px;cursor:pointer;color:var(--text-dim);user-select:none;}
.fav-toggle.active{color:var(--accent-2);}
.fav-toggle.locked{cursor:not-allowed;opacity:.5;}

.summary-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.summary-chip{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:11px;color:var(--text-dim);}
.summary-chip b{color:var(--text);font-size:12px;margin-left:2px;}
.summary-chip-group{font-size:10px;color:var(--accent);font-weight:700;margin-right:6px;}
.summary-chip.count-chip{border-color:var(--accent);}
.summary-chip.count-chip b{color:var(--accent);}

/* ---------- 個別編集画面（モーダル） ---------- */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(8,11,20,.65);
  align-items:center;justify-content:center;z-index:50;
}
.modal-overlay.active{display:flex;}
.modal-box{
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:22px;width:440px;max-width:90vw;max-height:86vh;overflow-y:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.modal-box h2{font-size:14px;margin:0 0 4px;}
.modal-box .modal-sub{font-size:11px;color:var(--text-dim);margin-bottom:16px;}
.modal-banner{
  background:rgba(242,193,78,.12);border:1px solid rgba(242,193,78,.4);
  color:var(--accent-2);font-size:11px;border-radius:8px;padding:8px 12px;margin-bottom:14px;
}
.detail-field-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:7px 0;border-bottom:1px solid #202b45;gap:10px;}
.detail-field-row .k{color:var(--text-dim);flex-shrink:0;}
.detail-field-row input[type=number]{
  width:70px;background:var(--panel-2);border:1px solid var(--border);border-radius:6px;
  padding:5px 8px;color:var(--text);font-size:12px;text-align:right;
}
.detail-field-row input[type=number]:disabled{opacity:.5;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}

/* ---------- cmd_053 Option A: セグメントボタン(スキル特化/モジュールStage/潜在) ---------- */
/* 既存の.value直接読み取り経路を壊さないため、置換対象のinputはvisually-hiddenでDOMに残す
   (display:noneは避ける — 非表示inputへの値設定+イベント発火がブラウザによっては
   正しく動作しない実装があるため、視覚的に隠すだけでレイアウトから外す)。 */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0;pointer-events:none;}
.seg-control{display:inline-flex;flex-wrap:wrap;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.seg-btn{
  background:var(--panel-2);color:var(--text-dim);border:none;
  border-right:1px solid var(--border);padding:6px 12px;font-size:12px;
  font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.seg-btn:last-child{border-right:none;}
.seg-btn:hover{color:var(--text);}
.seg-btn.active{background:var(--accent);color:#0b1220;}
.seg-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}

/* ---------- 画像取込：入口 ---------- */
.import-dropzone{
  border:1px dashed var(--border);border-radius:8px;padding:22px;text-align:center;
  color:var(--text-dim);font-size:12px;margin-bottom:16px;background:var(--panel-2);
  transition:border-color .15s,background .15s;
}
.import-dropzone.dragover{
  border-color:var(--accent);background:rgba(110,168,254,.12);color:var(--text);
}
.import-dropzone-hint{margin-top:8px;font-size:11px;color:var(--text-dim);}
.modal-desc{font-size:12px;color:var(--text-dim);line-height:1.7;margin-bottom:16px;}
.import-tip{
  font-size:11px;color:var(--text);line-height:1.6;margin-bottom:16px;
  padding:8px 10px;border:1px solid var(--accent-2);border-radius:6px;
  background:rgba(242,193,78,.1);
}
.import-dropzone-disabled{opacity:.5;pointer-events:none;}
/* subtask_042a: 枠を使わず、既存のlink-btnと同じ見た目のボタンを一行だけ置く(戒め1)。 */
.import-roster-export-row{margin-bottom:10px;}
.import-roster-export-row .link-btn{
  display:inline;background:none;border:none;padding:0;margin-right:16px;
  color:var(--accent);font-size:11px;text-decoration:underline;cursor:pointer;
}
/* subtask_043d: 複数世代からの選択復元行。selectとボタンを横並びにするだけの単純な形
   (戒め1・枠を使わない)。 */
.import-roster-restore-undo-row{display:inline-flex;align-items:center;gap:6px;}
.import-roster-restore-undo-row .link-btn{
  display:inline;background:none;border:none;padding:0;margin-right:16px;
  color:var(--accent);font-size:11px;text-decoration:underline;cursor:pointer;
}
/* subtask_043d: 世代数上限の告知(将軍裁可の条件2)。装飾せず、既存の控えめな案内文と同じ
   トーン(text-dim・小さめ)で足す(戒め2・目を引かせない)。 */
.import-backup-note{font-size:11px;color:var(--text-dim);margin:-4px 0 10px;}
/* subtask_041a: 枠で囲わず、単純な直線区切り+余白のみで済ませる(戒め1)。控えめな案内であって警告ではない。 */
.import-export-reminder{
  font-size:11px;color:var(--text-dim);line-height:1.7;
  padding-top:10px;margin-bottom:16px;border-top:1px solid var(--border);
}
.import-export-reminder code{
  background:var(--panel-2);color:var(--text);padding:1px 5px;border-radius:4px;font-size:10px;
}
.import-export-reminder .link-btn{
  display:inline;background:none;border:none;padding:0;margin-left:4px;
  color:var(--accent);font-size:11px;text-decoration:underline;cursor:pointer;
}
.import-progress-bar{
  width:100%;height:8px;border-radius:4px;background:var(--panel-2);
  border:1px solid var(--border);overflow:hidden;margin-bottom:8px;
}
.import-progress-bar-fill{
  height:100%;width:0%;background:var(--accent);transition:width .2s ease-out;
}
.import-progress-text{font-size:11px;color:var(--text-dim);margin-bottom:4px;text-align:center;}
.import-stats-text{font-size:11px;color:var(--text-dim);margin-bottom:16px;text-align:center;}

/* ---------- 画像取込：確認画面（subtask_030b） ---------- */
.import-modal-box{width:560px;}
.import-legend{display:flex;gap:16px;margin-bottom:12px;font-size:11px;color:var(--text-dim);}
.import-legend-item{display:flex;align-items:center;gap:5px;}
.import-legend-dot{width:9px;height:9px;border-radius:3px;display:inline-block;}
.import-legend-dot.ok{background:var(--accent);}
.import-legend-dot.warn{background:var(--accent-2);}
.import-legend-dot.occlusion{background:var(--danger);}

.import-card{
  background:var(--panel-2);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;margin-bottom:10px;
}
.import-card.needs-review{border-color:var(--accent-2);background:rgba(242,193,78,.07);}
/* subtask_041f: occlusion_suspectedは「遮蔽で原理的に読み取り不能」という、単なる低確信度
   (OCR再読で解決しうる)より深刻な要確認理由のため、warnより優先して目立つdangerカラーで
   上書きする(同じカードがneeds-reviewとocclusion-suspectedを両方持つ場合はこちらを優先)。 */
.import-card.occlusion-suspected{border-color:var(--danger);background:rgba(239,111,111,.09);}
.import-card.skipped{opacity:.5;}
.import-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
/* subtask_065a: プレビュー画面のカード画像（殿裁可の権利物例外、取込元画像の切り出しのみ）。
   縮小サムネイル(縦横比維持・幅上限)としてカード先頭に表示し、抽出値との目視突合を助ける。
   subtask_068a: 旧実装は56x56の正方形枠にcontain指定していたが、実カード比率は縦長
   (実測218x470px前後)のため正方形枠内では横幅26px相当まで潰れ、モジュール/潜在バッジが
   判読不能だった。実カード比率に合わせたaspect-ratioの縦長枠へ変更し、幅も80pxへ拡大する
   （一覧性とのバランス、常時これ以上の拡大はカードリストが過度に縦長化するため見送り——
   さらなる拡大確認はクリックでのライトボックス拡大(.import-thumb-zoom-*)で担保する）。 */
.import-card-thumb{
  flex-shrink:0;width:80px;aspect-ratio:218/470;object-fit:contain;border-radius:6px;
  background:var(--panel);border:1px solid var(--border);
}
.import-card-thumb-loading{opacity:.35;}
.import-card-thumb:not(.import-card-thumb-loading){cursor:pointer;}
.import-card-thumb:not(.import-card-thumb-loading):hover{outline:2px solid var(--accent);outline-offset:1px;}

/* ---------- カード画像クリック時のライトボックス拡大（subtask_068a） ---------- */
.import-thumb-zoom-overlay{
  display:none;position:fixed;inset:0;z-index:110;
  align-items:center;justify-content:center;
  background:rgba(5,7,14,.82);padding:24px;
}
.import-thumb-zoom-overlay.active{display:flex;}
.import-thumb-zoom-box{
  position:relative;max-width:92vw;max-height:92vh;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:18px;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.import-thumb-zoom-img{max-width:min(78vw,420px);max-height:74vh;object-fit:contain;border-radius:6px;}
.import-thumb-zoom-label{font-size:13px;font-weight:700;color:var(--text);}
.import-thumb-zoom-close{
  position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:999px;
  border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
}
.import-thumb-zoom-close:hover{opacity:.85;}
.import-card-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;flex:1;min-width:0;}
.import-card-title .stars{color:var(--rar5);font-size:11px;letter-spacing:1px;font-weight:400;}
.import-card-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.import-tag{
  font-size:10px;font-weight:700;border-radius:999px;padding:1px 8px;white-space:nowrap;
}
.import-tag.ok{color:var(--accent);background:rgba(79,209,197,.14);border:1px solid var(--accent);}
.import-tag.warn{color:var(--accent-2);background:rgba(242,193,78,.14);border:1px solid var(--accent-2);}
.import-tag.occlusion{color:var(--danger);background:rgba(239,111,111,.14);border:1px solid var(--danger);}
.import-tag.jp-unavailable{color:var(--text-dim);background:rgba(148,148,148,.14);border:1px solid var(--text-dim);}
.import-occlusion-note{font-size:11px;color:var(--danger);margin-top:4px;}
.import-card-fields{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;font-size:12px;margin-bottom:8px;}
.import-card-field{display:flex;justify-content:space-between;gap:6px;color:var(--text-dim);}
.import-card-field b{color:var(--text);font-weight:600;}
.import-card-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid #202b45;font-size:12px;}
.import-card-row .k{color:var(--text-dim);flex-shrink:0;}
.import-alt-select{
  background:var(--panel);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-size:11px;padding:4px 6px;max-width:220px;
}
.import-potential-input{
  width:60px;background:var(--panel);border:1px solid var(--border);border-radius:6px;
  padding:4px 6px;color:var(--text);font-size:12px;text-align:right;
}
.import-search-input{
  background:var(--panel);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-size:11px;padding:4px 6px;max-width:220px;width:100%;
}
.import-module-stage-inputs{display:flex;gap:10px;flex-wrap:wrap;}
.import-module-stage-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);}
.import-module-stage-input{
  width:44px;background:var(--panel);border:1px solid var(--border);border-radius:6px;
  padding:4px 6px;color:var(--text);font-size:12px;text-align:right;
}
.import-skip-row label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);cursor:pointer;}
.import-unresolved-note{font-size:11px;color:var(--danger);margin-top:4px;}

/* ---------- 画像取込：確認画面のヘッダー/フッター固定（subtask_065a・殿要望） ----------
   .modal-box自体がスクロールコンテナ(overflow-y:auto)のため、その内側でposition:stickyを
   使う。.modal-boxのpadding(22px、cmd_051の@media内訳は下記2箇所で追従)を負のmarginで
   相殺しつつ同じ値をpaddingで戻すことで、スクロール時にヘッダー/フッターがスクロール
   コンテナの縁まで隙間なく張り付く（下記の定番パターン）。他の.modal-box利用箇所
   （個別編集モーダル等）には影響しないよう、import-step-confirm配下のみに限定するクラス名とした。 */
.import-confirm-sticky-header{
  position:sticky;top:-22px;z-index:5;background:var(--panel);
  margin:-22px -22px 0;padding:22px 22px 10px;
  box-shadow:0 4px 8px -6px rgba(0,0,0,.4);
}
.import-confirm-sticky-header h2{margin-bottom:4px;}
.import-confirm-sticky-header .modal-sub{margin-bottom:10px;}
.import-confirm-sticky-header .import-legend{margin-bottom:0;}
.import-confirm-sticky-footer{
  position:sticky;bottom:-22px;z-index:5;background:var(--panel);
  margin:0 -22px -22px;padding:10px 22px 22px;
  box-shadow:0 -4px 8px -6px rgba(0,0,0,.4);
}
.import-confirm-sticky-footer .modal-desc{margin-bottom:10px;}
.import-confirm-sticky-footer .modal-actions{margin-top:0;}

.toast{
  display:none;position:fixed;bottom:24px;right:24px;
  background:var(--accent);color:#0b1220;padding:10px 18px;border-radius:8px;
  font-size:12px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.4);max-width:320px;
}

/* =====================================================================
   レスポンシブ対応（cmd_051・subtask_051a）
   PC向けスタイルは上記のまま維持し、以下のメディアクエリのみでスマホ／
   タブレット幅の崩れ（カード縦折り返し・横あふれ・過剰な文字折り返し）
   を是正する。デスクトップ幅（769px以上）では一切適用されない。
   ===================================================================== */

/* ---------- タブレット幅（〜768px）：サイドバーをオフキャンバス化 ---------- */
@media (max-width: 768px) {
  .topbar-hamburger{display:inline-flex;}

  .sidebar{
    position:fixed;top:0;left:0;height:100vh;z-index:100;
    width:min(230px,82vw);
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:4px 0 16px rgba(0,0,0,.45);
  }
  .app.nav-open .sidebar{transform:translateX(0);}
  .app.nav-open .nav-overlay{display:block;}

  .main{width:100%;min-width:0;}
  .content{padding:16px 16px 48px;}

  /* 固定3カラムだとカード幅が1/3に潰れ縦折り返しを起こすため、
     スマホ・タブレット幅ではカードを縦積みにする */
  .stat-grid{grid-template-columns:1fr;}
  .tool-hub-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}

  .server-toggle{width:100%;}
  .server-toggle button{flex:1;}

  .modal-box{width:94vw;padding:18px;}
  .import-modal-box{width:94vw;}

  /* subtask_065a: .modal-boxのpadding変更(22px→18px)に追従し、隙間/重なりを防ぐ */
  .import-confirm-sticky-header{top:-18px;margin:-18px -18px 0;padding:18px 18px 10px;}
  .import-confirm-sticky-footer{bottom:-18px;margin:0 -18px -18px;padding:10px 18px 18px;}
}

/* ---------- スマホ幅（〜430px） ---------- */
@media (max-width: 430px) {
  .topbar{padding:0 14px;}
  .content{padding:14px 12px 40px;}
  .panel{padding:14px;}

  .tool-hub-grid{grid-template-columns:1fr;}
  .panel-head-actions{width:100%;}
  .panel-head-actions .btn{flex:1;}

  /* subtask_070a: .panelのpadding変更(18px→14px)に追従し、.roster-sticky-headの隙間/重なりを防ぐ */
  .roster-sticky-head{margin:-14px -14px 0;padding:14px 14px 10px;}

  .import-card-fields{grid-template-columns:1fr;}
  .modal-box{padding:14px;}

  /* subtask_065a: .modal-boxのpadding変更(22px→14px)に追従し、隙間/重なりを防ぐ */
  .import-confirm-sticky-header{top:-14px;margin:-14px -14px 0;padding:14px 14px 8px;}
  .import-confirm-sticky-footer{bottom:-14px;margin:0 -14px -14px;padding:8px 14px 14px;}
  .import-card-thumb{width:58px;} /* 狭幅では縮小しカード本文の圧迫を避ける（比率はaspect-ratioで維持） */
  .import-thumb-zoom-img{max-width:88vw;}

  /* cmd_053・subtask_053b: 潜在(1-6)等の狭所セグメントボタンは横あふれさせず折り返す
     (.seg-controlのflex-wrap:wrapで基本担保済み、スマホ幅ではさらにボタン自体を縮小)。 */
  .seg-btn{padding:6px 9px;font-size:11px;}
}