/* ============================================================
   FRAME FINDER  /assets/css/pages/frame-finder.css
   prefix: ff-

   構造:
   common-header (sticky, common.jsが制御)
   ↓
   main#main-content
     └ #ff-finder  ← height: 100dvh - ヘッダー高さ をここで持つ
         ├ #ff-toolbar (固定高さ 48px)
         └ #ff-body   (残り高さ = ff-finder - toolbar)
             ├ #ff-sidebar
             └ #ff-main (overflow:auto でスクロール)
   ↓
   nav#breadcrumb  (自然に流れる)
   ↓
   common-footer   (自然に流れる)
   ============================================================ */

/* ── 変数 ── */
.ff-root {
  --c0: #09090c;
  --c1: #101014;
  --c2: #18181f;
  --bd: rgba(255,255,255,0.07);
  --tx: #f0ece4;
  --cy: #00f2ff;
  --cy-bg: rgba(0,242,255,0.07);
  --cy-bd: rgba(0,242,255,0.28);
  --gn: #00e676;
  --rd: #ff4757;
  --gd: #c8a96e;
  --mn: 'Roboto Mono','Courier New',monospace;
  --tb: 48px;   /* ツールバー高さ */
}
.ff-root *, .ff-root *::before, .ff-root *::after { box-sizing: border-box; }

body, html {
  margin: 0;
  padding: 0;
  background: #09090c;
}

/* ヘッダー分(78px)だけ下げて、その下にff-finderを配置 */
body.database-frame {
  padding-top: var(--header-height, 78px);
  height: 100dvh;      /* bodyをビューポートに収める */
  overflow: hidden;    /* bodyからはみ出す余白を殺す */
  box-sizing: border-box;
}

/* style.css の main flex:1 による余分な伸長を殺す */
body.database-frame main,
body.database-frame #main-content {
  flex: none !important;
  overflow: visible !important;
}

/* ── #ff-finder: コンテンツ全体 ── */
#ff-finder {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100dvh - var(--header-height, 78px));
  background: var(--c0);
  color: var(--tx);
  font-family: 'Montserrat','Noto Sans JP',sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* ── ツールバー ── */
#ff-toolbar {
  flex: 0 0 var(--tb);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  height: var(--tb);
  background: var(--c1);
  border-bottom: 1px solid var(--bd);
  width: 100%;
}

#ff-toolbar-title {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .4em;
  color: var(--cy);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

#ff-search {
  flex: 1;
  max-width: 320px;
  height: 30px;
  background: var(--c2);
  border: 1px solid var(--bd);
  color: var(--tx);
  padding: 0 12px;
  font-size: .82rem;
  font-family: var(--mn);
  outline: none;
  border-radius: 0;
  transition: border-color .2s;
}
#ff-search:focus { border-color: var(--cy-bd); }
#ff-search::placeholder { color: rgba(240,236,228,0.28); }

#ff-filter-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 30px;
  background: var(--c2);
  border: 1px solid var(--bd);
  color: rgba(240,236,228,0.6);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 0;
  transition: border-color .2s, color .2s;
}
#ff-filter-btn:hover,
#ff-filter-btn.is-open { border-color: var(--cy-bd); color: var(--cy); }

#ff-count {
  margin-left: auto;
  font-size: .7rem;
  font-family: var(--mn);
  color: rgba(240,236,228,0.4);
  white-space: nowrap;
  flex-shrink: 0;
}
#ff-count b { color: var(--cy); font-weight: 800; }

/* ── #ff-body: サイドバー＋メイン ── */
#ff-body {
  flex: 1;
  display: flex;
  min-height: 0;   /* overflow が効くよう必須 */
  overflow: hidden;
  width: 100%;
}

/* ── サイドバー ── */
#ff-sidebar {
  flex: 0 0 210px;
  background: var(--c1);
  border-right: 1px solid var(--bd);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#ff-sidebar::-webkit-scrollbar { width: 3px; }
#ff-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

.ff-sec {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bd);
}
.ff-sec:last-of-type { border-bottom: none; margin-bottom: 8px; }

.ff-label {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* キャラグリッド */
#ff-chara-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.ff-chara-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 3px 2px 4px;
  background: var(--c2);
  border: 1px solid var(--bd);
  cursor: pointer;
  color: rgba(240,236,228,0.6);
  font-size: .44rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  border-radius: 0;
  transition: border-color .15s, background .15s;
}
.ff-chara-btn img { width:38px; height:38px; object-fit:cover; object-position:top center; opacity:.68; transition:opacity .15s; display:block; }
.ff-chara-btn.is-on { background:var(--cy-bg); border-color:var(--cy-bd); color:var(--cy); }
.ff-chara-btn.is-on img, .ff-chara-btn:hover img { opacity:1; }
.ff-chara-btn:hover { border-color:var(--cy-bd); }

/* スライダー */
.ff-ranges { display:flex; flex-direction:column; gap:5px; }
.ff-range-row { display:flex; align-items:center; gap:6px; }
.ff-range-row label { font-size:.6rem; font-weight:700; color:rgba(240,236,228,0.6); width:22px; flex-shrink:0; }
.ff-range-row input[type="range"] { flex:1; accent-color:var(--cy); cursor:pointer; height:2px; min-width:0; }
.ff-rval { font-size:.66rem; font-weight:800; font-family:var(--mn); color:var(--cy); width:34px; text-align:right; flex-shrink:0; }

/* チェックボタン */
.ff-checks { display:flex; flex-wrap:wrap; gap:3px; }
.ff-chk {
  padding:5px 10px;
  font-size:.62rem; font-weight:800; letter-spacing:.1em;
  background:var(--c2); border:1px solid var(--bd);
  color:rgba(240,236,228,0.75); cursor:pointer;
  text-transform:uppercase; border-radius:0;
  transition:background .15s, border-color .15s, color .15s; line-height:1;
}
.ff-chk.is-on { background:var(--cy-bg); border-color:var(--cy-bd); color:var(--cy); }

/* 投げ確注意書き */
.ff-note { font-size:.56rem; color:rgba(240,236,228,0.5); line-height:1.55; margin-top:6px; padding:5px 7px; border-left:2px solid var(--cy-bd); background:var(--cy-bg); }

/* リセット */
#ff-reset-btn { margin-top:auto; padding:8px; font-size:.6rem; font-weight:800; letter-spacing:.2em; background:none; border:1px solid var(--bd); color:rgba(240,236,228,0.5); cursor:pointer; text-transform:uppercase; border-radius:0; transition:border-color .15s, color .15s; }
#ff-reset-btn:hover { border-color:var(--rd); color:var(--rd); }

/* ── #ff-main: テーブルエリア ── */
#ff-main {
  flex: 1;
  min-width: 0;
  overflow: auto;   /* 縦横ともff-main内でスクロール */
  background: var(--c0);
}
#ff-main::-webkit-scrollbar { width:6px; height:6px; }
#ff-main::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); }

#ff-loading, #ff-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:40vh; gap:10px; color:rgba(240,236,228,0.35); font-size:.78rem; letter-spacing:.1em;
}
#ff-empty { display:none; }

/* ── テーブル ── */
/* テーブルは #ff-main の直接の子 → overflow:auto の唯一の祖先 → sticky thead が正しく top:0 に固定 */
#ff-tbl {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: .78rem;
  background: var(--c0);
}

#ff-tbl thead th {
  position: sticky;
  top: 0;   /* #ff-main の overflow:auto 内で固定 */
  z-index: 10;
  background: var(--c1);
  padding: 9px 10px;
  font-size: .54rem; font-weight: 800;
  font-family: var(--mn);
  letter-spacing: .25em;
  color: rgba(240,236,228,0.85);
  text-transform: uppercase;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: color .15s;
}
#ff-tbl thead th:hover { color: var(--cy); }
.ff-sarr { margin-left:3px; opacity:.2; }
th.ff-sasc  .ff-sarr::after { content:'↑'; opacity:1; color:var(--cy); }
th.ff-sdesc .ff-sarr::after { content:'↓'; opacity:1; color:var(--cy); }

#ff-tbl tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); cursor:pointer; transition:background .1s; }
#ff-tbl td { padding:7px 10px; white-space:nowrap; vertical-align:middle; }
#ff-tbl tbody tr:hover { background:rgba(255,255,255,.04); }
#ff-tbl tbody tr.ff-row-open { background:rgba(0,242,255,.04); }
#ff-tbl td { padding:7px 10px; white-space:nowrap; vertical-align:middle; }

.ff-td-chara { display:flex; align-items:center; gap:5px; }
.ff-td-chara img { width:22px; height:22px; object-fit:cover; object-position:top center; border:1px solid var(--bd); flex-shrink:0; }
.ff-cname { font-size:.58rem; font-weight:700; font-family:var(--mn); color:rgba(240,236,228,0.75); letter-spacing:.04em; text-transform:uppercase; }
.ff-stance { display:inline-block; font-size:.45rem; font-weight:800; padding:1px 4px; color:var(--gd); border:1px solid rgba(200,169,110,.3); background:rgba(200,169,110,.06); margin-left:3px; }

.ff-cmd { font-family:var(--mn); font-weight:800; font-size:.88rem; color:var(--tx); }

.ff-type { display:inline-block; font-size:.55rem; font-weight:900; letter-spacing:.18em; padding:3px 7px; text-transform:uppercase; border-radius:1px; line-height:1; white-space:nowrap; }
.ff-t-high    { color:#fff; background:#c62828; border:1px solid #c62828; }
.ff-t-mid     { color:#000; background:#00f2ff; border:1px solid #00f2ff; }
.ff-t-low     { color:#fff; background:#a07000; border:1px solid #a07000; }
.ff-t-fs, .ff-t-bh { color:rgba(240,236,228,0.55); background:rgba(255,255,255,.06); border:1px solid var(--bd); }
.ff-t-special { color:#fff; background:#6a1b9a; border:1px solid #6a1b9a; }
.ff-t-null    { color:rgba(240,236,228,0.3); font-size:.7rem; }

.ff-frame { font-family:var(--mn); font-size:.76rem; color:rgba(240,236,228,0.8); }
.ff-gs    { font-family:var(--mn); font-size:.78rem; color:rgba(240,236,228,0.75); text-align:right; }
.ff-state { font-size:.6rem; font-weight:800; font-family:var(--mn); letter-spacing:.1em; color:rgba(240,236,228,0.75); text-transform:uppercase; }

.ff-ob { font-family:var(--mn); font-weight:800; font-size:.86rem; text-align:right; position:relative; display:inline-block; padding:0 5px; }
.ff-ob-pos    { color:var(--gn); }
.ff-ob-zero   { color:rgba(240,236,228,0.35); }
.ff-ob-neg    { color:var(--rd); }
.ff-ob-warn   { color:var(--rd); background:rgba(255,71,87,.12); }
.ff-ob-danger { color:var(--rd); background:rgba(255,71,87,.20); padding-left:8px; }
.ff-ob-danger::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rd); }
.ff-ob-consec { font-size:.62rem; font-weight:700; color:var(--gd); }

.ff-tp     { font-size:.65rem; font-weight:800; color:rgba(240,236,228,0.3); text-align:center; font-family:var(--mn); }
.ff-tp-yes { color:var(--gn); }

.ff-expand-row td { background:var(--c2) !important; padding:12px 14px 14px 42px !important; border-bottom:1px solid var(--bd) !important; cursor:default; }
.ff-expand-row:hover { background:var(--c2) !important; }
.ff-expand-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px 18px; margin-bottom:8px; }
.ff-expand-item label { font-size:.48rem; font-weight:800; letter-spacing:.36em; color:rgba(240,236,228,0.38); text-transform:uppercase; display:block; margin-bottom:2px; }
.ff-expand-item span  { font-size:.8rem; font-weight:700; font-family:var(--mn); color:var(--tx); }
.ff-expand-notes { font-size:.73rem; color:rgba(240,236,228,0.55); line-height:1.6; padding-top:6px; border-top:1px solid var(--bd); }
.ff-expand-notes::before { content:'📝  '; }
.ff-overflow-msg td { text-align:center; padding:10px; color:rgba(240,236,228,0.3); font-size:.7rem; font-family:var(--mn); }

/* ============================================================
   MOBILE
   ============================================================ */
/* カードリストはモバイルのみ表示 */
#ff-card-list { display: none; }

@media (max-width: 768px) {
  #ff-filter-btn { display:flex; }
  #ff-toolbar-title { display:none; }
  #ff-search { max-width:none; }

  #ff-sidebar {
    position:fixed; top:0; left:0;
    width:82vw; max-width:320px; height:100dvh;
    z-index:1000;
    transform:translateX(-110%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    border-right:1px solid var(--cy-bd);
    padding-top:50px;
    box-shadow:6px 0 28px rgba(0,0,0,.65);
  }
  #ff-sidebar.is-open { transform:translateX(0); }

  #ff-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:999; }
  #ff-overlay.is-open { display:block; }

  #ff-chara-grid { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:4px; padding-bottom:4px; }
  #ff-chara-grid::-webkit-scrollbar { height:3px; }
  .ff-chara-btn { flex-shrink:0; }

  #ff-finder { height:auto; }
  #ff-body   { height:auto; overflow:visible; display:block; }
  #ff-main   { overflow-x:hidden; overflow-y:visible; height:auto; }
  #ff-sidebar { position:fixed; max-height:none; }

  #ff-tbl { display:none !important; }
  #ff-card-list { display:flex !important; flex-direction:column; gap:1px; background:var(--bd); }

  .ff-mcard { background:var(--c1); padding:11px 14px; cursor:pointer; transition:background .1s; }
  .ff-mcard:hover, .ff-mcard.is-open { background:var(--c2); }
  .ff-mcard-top { display:flex; align-items:center; gap:8px; }
  .ff-mcard-chara { display:flex; align-items:center; gap:4px; flex-shrink:0; }
  .ff-mcard-chara img { width:24px; height:24px; object-fit:cover; object-position:top center; }
  .ff-mcard-cname { font-size:.55rem; font-weight:700; font-family:var(--mn); color:rgba(240,236,228,0.6); text-transform:uppercase; }
  .ff-mcard-cmd { font-family:var(--mn); font-weight:900; font-size:.92rem; color:var(--tx); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .ff-mcard-right { display:flex; align-items:center; gap:7px; flex-shrink:0; margin-left:auto; }
  .ff-mcard-su { font-family:var(--mn); font-size:.75rem; color:rgba(240,236,228,0.5); }
  .ff-mcard-arrow { font-size:.65rem; color:rgba(240,236,228,0.28); transition:transform .2s; margin-left:2px; }
  .ff-mcard.is-open .ff-mcard-arrow { transform:rotate(180deg); }
  .ff-mcard-detail { display:none; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:10px; padding-top:10px; border-top:1px solid var(--bd); }
  .ff-mcard.is-open .ff-mcard-detail { display:grid; }
  .ff-mcard-di label { font-size:.47rem; font-weight:800; letter-spacing:.3em; color:rgba(240,236,228,0.35); text-transform:uppercase; display:block; margin-bottom:2px; }
  .ff-mcard-di span  { font-size:.8rem; font-family:var(--mn); font-weight:700; color:var(--tx); }
  .ff-mcard-notes { grid-column:1/-1; font-size:.72rem; color:rgba(240,236,228,0.5); line-height:1.55; border-top:1px solid var(--bd); padding-top:5px; margin-top:2px; }
  .ff-mcard-notes::before { content:'📝  '; }
}

/* ============================================================
   このページ専用の style.css 上書き
   ============================================================ */

/* パンくずの margin-top:50px を打ち消す */
body.database-frame .breadcrumb-container {
  margin-top: 0 !important;
}

/* SP: ツールバーを画面上部に固定 */
@media (max-width: 768px) {
  #ff-toolbar {
    position: sticky;
    top: var(--header-height, 78px);  /* SP: ヘッダー直下に sticky */
    z-index: 200;
  }
}

/* 背後打撃技タグ */
.ff-cmd-tag {
  font-size: .75rem;
  font-weight: 700;
  font-family: var(--mn);
  color: rgba(200,169,110,0.8);
  margin-left: 4px;
}
/* ============================================================
   FRAME FINDER 追記 — 新カラム・コマンドアイコン対応
   ============================================================ */

/* ── テーブル横幅を新カラム数に合わせて拡張 ── */
#ff-tbl { min-width: 1020px; }

/* ── コマンドアイコン ── */
.ff-cmd {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1px;
}
.ff-cmd-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}
/* モバイルカードのコマンド欄は少し大きめに */
.ff-mcard-cmd.ff-cmd .ff-cmd-icon { width: 18px; height: 18px; }

/* ── NH / CH / HCH 列 ── */
.ff-hit {
  font-family: var(--mn);
  font-size: .78rem;
  font-weight: 700;
  color: rgba(240,236,228,0.8);
}

/* ── 追尾（対SS）列 ── */
.ff-yes {
  color: var(--cy);
  font-weight: 800;
  font-family: var(--mn);
}
.ff-dim {
  color: rgba(240,236,228,0.25);
}

/* ── 硬直差: GB（ガードブレイク） ── */
.ff-ob-gb {
  font-family: var(--mn);
  font-weight: 800;
  font-size: .82rem;
  color: var(--gd);
}

/* ── ステータス列（立ち/しゃがみ等） ── */
#ff-tbl td:nth-child(4) {
  font-size: .62rem;
  font-weight: 700;
  color: rgba(240,236,228,0.55);
  letter-spacing: .05em;
}

/* ── 展開行: 新フィールド対応（colspan 12に拡張） ── */
.ff-expand-row td { padding-left: 24px !important; }

/* ── テーブルヘッダー: NH CH HCH は小さめ表示 ── */
#ff-tbl thead th:nth-child(8),
#ff-tbl thead th:nth-child(9),
#ff-tbl thead th:nth-child(10) {
  color: rgba(0,242,255,0.6);
}

/* ── モバイル: 新詳細項目 ── */
@media (max-width: 768px) {
  .ff-mcard-detail { grid-template-columns: 1fr 1fr 1fr; }
}