/* 表の外枠はそのまま。スクロールは一切持たせない */
.faces-table-box{
  overflow: visible;          /* ← auto/hidden をやめる */
  width: max-content;         /* 中身の幅に広がる */
  min-width: 100%;            /* 画面より狭い時は100% */
  border: 1px solid var(--pink-border);
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

/* ▼ここを“素直に狭く”。テキストは消さない */
.faces-table col.col-role{ width: 56px; }             /* 好みで 48–60px に調整OK */
.faces-table thead th.col-role{
  padding: 4px 2px;
  text-align: center;
  font-size: inherit;                                  /* ← 重要：文字を消さない */
  white-space: nowrap;
}
th.col-role.sortable::after{
  margin-left: .25em;                                  /* 矢印の余白だけ */
  font-size: inherit;
}
.faces-table td.col-role{ padding: 0 4px; text-align: center; }

/* 初期は全見出し ▼、操作後だけ ▲/▼ を切替（既存のまま） */
th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable::after{ content:"▼"; margin-left:.25em; }
body.sorted th.sortable.asc::after{  content:"▲"; }
body.sorted th.sortable.desc::after{ content:"▼"; }

/* 画像＋名前の一体セル */
td.face .face-cell{
  display:grid;
  grid-template-columns: 44px 1fr; /* ← サムネ幅（必要なら調整：36/40/48等） */
  align-items:center;
  gap:8px;
  min-width: 160px; /* 文字が潰れにくい下限。お好みで */
}
td.face .thumb{
  width:44px; height:44px;       /* サムネの“器”のサイズ */
  display:grid; place-items:center; /* 完全センタリング */
}
td.face .thumb img{
  width:40px; height:40px;       /* 実画像サイズ（器より少し小さく） */
  object-fit:cover; border-radius:6px;
}
td.face .face-name{ line-height:1.2; }

/* “画像列をサムネ幅に”の要件は、この grid の 1列目が担います */

/* =========================================================
   FF11 フェイス管理 — trust.css（再構築版 / シンプル統一）
   ・横スクロール：テーブル側のみネイティブ（下側）
   ・thead は sticky（横スク直下）
   ・「使い方」アクセントやドットは“もぴんく”で統一
   ・読み込み/保存ボタン＝細身・中央揃え・ピンク統一
   ========================================================= */

/* -------------------- 基本変数 -------------------- */
:root {
  /* HowTo アクセント（もぴんく） */
  --howto-accent: #b03060;    /* 使い方トグルやh3先頭「■」の色 */
  --howto-dot-fill:   #FFDCE7;/* 箇条書きドット塗り */
  --howto-dot-border: #F3BDD0;/* 箇条書きドット縁 */

  /* コントロール高さ（入力欄と合わせる） */
  --ctrl-h: 24px;             /* 28〜30で調整 */

  /* レイアウト系 */
  --banner-h: 56px;
  --header-offset: calc(var(--banner-h) + 20px);
  --thumb: 48px;
  --cell-py: 8px;
  --lh: 20px;

  /* ピンク系（表の見出しなど） */
  --pink-head:   #ffe9ef;
  --pink-border: #efc7d2;
  --pink-strong: #e8c9d1;
}

/* -------------------- ヘッダー -------------------- */
.header-area {
  background: #ffe4e1;
  border-bottom: 2px solid #ffb6c1;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.title-row {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 10px 8px;
}
.header-title-img, .header-gif { height: var(--banner-h); display: block; }

/* -------------------- 使い方（details） -------------------- */
details.howto > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: .35em;
  -webkit-user-select: none; user-select: none;
  color: var(--howto-accent);
}
details.howto > summary::-webkit-details-marker { display: none; }
details.howto > summary::marker { content: ""; }
details.howto > summary .label-open { display: inline; }
details.howto[open] > summary .label-open { display: none; }
details.howto > summary .label-close { display: none; }
details.howto[open] > summary .label-close { display: inline; }
details.howto > summary:hover { opacity:.95; }
details.howto > summary:focus-visible{
  outline: 2px solid var(--howto-accent); outline-offset: 2px;
}

/* --- つかいかた（超ミニ版）--- */
.howto-min h3 { margin:.4em 0 .2em; font-size:1rem; color:#333; }
.howto-min h3::first-letter { color: var(--howto-accent); } /* 先頭の「■」だけ色付け */
.bul { list-style:none; margin:.2em 0 .6em; padding-left:0; }
.bul li { position:relative; padding-left:1.15em; margin:.12em 0; }
/* ピンクの小丸（ドット） */
.bul li::before{
  content:""; position:absolute; left:.2em; top:.9em; transform:translateY(-50%);
  width:.46em; height:.46em; border-radius:999px;
  background: var(--howto-dot-fill);
  border:1px solid var(--howto-dot-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
}


/* -------------------- 読み込み/保存ボタン -------------------- */

#loadBtn, #saveBtn{
  box-sizing: border-box;
  height: var(--ctrl-h);
  padding: 0 8px;              /* さらにスリム */
  margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; vertical-align: middle;
  border-radius: 999px;
  border: 1px solid var(--pink-border);
  font-size: 12.5px; font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #ff9ec3 0%, #ff7fb0 100%); /* ← 読込/保存どちらも同色 */
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
}
#loadBtn:hover, #saveBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,.15);
}
#loadBtn:active, #saveBtn:active{
  transform: translateY(0);
  filter: brightness(.98);
}
#loadBtn:focus-visible, #saveBtn:focus-visible{
  outline: 2px solid rgba(176,48,96,.35);
  outline-offset: 2px;
}
#loadBtn:disabled, #saveBtn:disabled{
  opacity: .6; cursor: not-allowed; filter: grayscale(.1);
}

/* -------------------- テーブル本体 -------------------- */
/* テーブルは中身の実幅で OK（既存のままでも可） */
.faces-table{
  border-collapse: collapse;
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}
/* ヘッダ */
.faces-table thead th{
  position: sticky; top: 0; z-index: 3;
  background: var(--pink-head); color:#7a3b4b; font-weight:600;
  padding: 6px 8px; border-bottom: 1px solid var(--pink-strong);
  white-space: nowrap; text-align: left; box-shadow: 0 1px 0 #e8c9d1;
}
.faces-table thead th.col-check,
.faces-table thead th.col-thumb,
.faces-table thead th.col-role,
.faces-table thead th.col-badge { text-align:center; }
/* セル */
.faces-table th, .faces-table td{
  line-height: var(--lh); padding-block: var(--cell-py);
  white-space: nowrap; vertical-align: middle;
}
.faces-table td{
  padding: 6px 8px; border-bottom: 1px solid var(--pink-strong); background:#fff;
}
.faces-table tbody tr:hover td { background:#fff4f8; }
/* 列の区切り線 */
.faces-table th + th, .faces-table td + td { border-left: 1px solid var(--pink-border); }
/* 行高（サムネ最小高） */
.faces-table tbody tr { height: max(calc(var(--lh) + var(--cell-py)*2), var(--thumb)); }
/* タイプ列は“素直に”少し狭める（テキストは消さない） */
.faces-table thead th.col-role{
  padding: 4px 2px;
  text-align: center;
  font-size: inherit;         /* ← 重要：font-size:0 を使わない */
  white-space: nowrap;
}
.faces-table td.col-role{ padding: 0 4px; text-align: center; }
/* 入手方法列（<br> 済みで折返しなし） */
.faces-table td.col-method{
  white-space: pre; word-break: normal; overflow-wrap: normal;
}
.faces-table td.col-method a { text-decoration: underline; }
.faces-table td.col-method a:hover { text-decoration: none; }
/* チェックボックス */
.faces-table td.col-check input[type="checkbox"],
.faces-table th.col-check input[type="checkbox"]{ min-width: max-content; display:inline-block; vertical-align:middle; margin:0; }
/* サムネ */
.thumbbox{
  width: var(--thumb); height: var(--thumb); border-radius: 8px; overflow: hidden;
  background:#f2f2f2; display:inline-block;
}
.thumbbox > img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:8px;
}
/* 役割アイコン（icons.css の .i-* を利用） */
.col-role .i{ display:inline-block; vertical-align:middle; transform: scale(.9); }

/* -------------------- バッジ（赤／盟） -------------------- */
.badge{
  display:inline-block; padding:0 6px; line-height:1.6;
  border-radius:999px; font-size:.8rem; border:1px solid #e6cad3;
}
.badge.red    { background:#ffebef; color:#b03a5b; border-color:#f3c2d0; }
.badge.cipher { background:#eef7ff; color:#2b6aa8; border-color:#c8def6; }

/* -------------------- 並べ替えボタン（↑↓） -------------------- */

/* === mofu モーダル === */
.mofu-modal{position:fixed;inset:0;display:none;place-items:center;z-index:9999;}
.mofu-modal.is-open{display:grid;animation:mofuFade .12s ease-out;}
.mofu-modal .overlay{position:absolute;inset:0;background:rgba(0,0,0,.25);backdrop-filter:blur(2px);}
.mofu-modal .box{position:relative;min-width:260px;max-width:min(92vw,420px);
  background:#fff;border-radius:20px;padding:18px 16px 14px;box-shadow:0 10px 28px rgba(0,0,0,.25);
  border:3px solid #ff9cc9;transform:scale(.98);animation:mofuPop .12s ease-out;}
.mofu-modal .box.ok{background:linear-gradient(#ffeaf3,#fff);border-color:#ff9cc9;}
.mofu-modal .box.err{background:linear-gradient(#fff0f2,#fff);border-color:#ff6b7a;}
.mofu-modal .title{font-weight:700;color:#d94f8a;display:flex;align-items:center;gap:8px;font-size:18px;}
.mofu-modal .box.err .title{color:#c62828;}
.mofu-modal .msg{margin:8px 0 12px;line-height:1.7;color:#444;white-space:pre-wrap;}
.mofu-modal .actions{display:flex;justify-content:center;gap:12px;}
.mofu-btn{min-width:120px;border:0;padding:10px 16px;border-radius:999px;background:#ff9cc9;color:#fff;
  font-weight:700;cursor:pointer;box-shadow:0 4px 0 #e672a8;transition:transform .02s;}
.mofu-btn:active{transform:translateY(1px);box-shadow:0 3px 0 #e672a8;}
.mofu-close{position:absolute;top:6px;right:10px;font-size:18px;border:0;background:transparent;cursor:pointer;color:#888;}
@keyframes mofuFade{from{opacity:0}to{opacity:1}}
@keyframes mofuPop{from{transform:scale(.96)}to{transform:scale(1)}}

/* 保存ボタンの処理中表示（任意） */
#saveBtn[disabled]{opacity:.75;cursor:progress;}

.controls-row .btn-return{
  display:inline-block;
  margin-left:6px;
  padding:6px 12px;
  border-radius:6px;
  text-decoration:none;
  background:#f6f6f6;
  color:#333;
  border:1px solid #ddd;
}
.controls-row .btn-return::before{ content:"🏠"; margin-right:.4em; }
.controls-row .btn-return:hover{ filter:brightness(0.98); }

.link-return{
  margin-left:8px;
  padding:0;
  background:none;
  border:0;
  text-decoration:none;
  font: inherit;
  color:#d94f8a; /* 仮。下のJSで実際の色に差し替えるのでここはfallback */
}
.link-return:hover{ opacity:.85; } /* いらなければ消してOK */

/* --- フェイス名：左詰めのまま上下中央 --- */
.faces-table td.col-face { vertical-align: middle; }
.faces-table td.col-face .face-cell{
  display: grid;
  grid-template-columns: 44px 1fr; /* サムネ / テキスト */
  align-items: center;             /* ← 縦中央 */
  gap: 8px;
}
.faces-table td.col-face .face-name{
  display: flex;
  align-items: center;             /* ← テキスト上下中央 */
  text-align: left;                /* ← 左寄せ維持 */
  line-height: 1.2;
}

/* --- チケット列：赤・盟バッジを中央寄せ --- */
.faces-table td.col-badge{
  text-align: center;              /* ← 中央寄せ */
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;             /* 折り返し防止（任意） */
}
.faces-table td.col-badge .badge{
  display: inline-block;
  margin: 0 2px;                   /* バッジ間の余白だけ */
  vertical-align: middle;
}