/* ============================================================
   甲文堂デジタルブック 管理画面 固有スタイル
   ------------------------------------------------------------
   色・書体・余白・ボタン・フォーム・表・カードなどの共通部分は
   assets/ui.css（唯一の出所）にある。ここに置くのは
   「管理画面にしか出てこない部品」だけ。

   ここに新しい色や書体を書かないこと。足りないものは ui.css に足す。
   詳しくは DESIGN.md を参照。
   ============================================================ */
@import url('../../assets/ui.css');

/* ログイン画面：押す先が1つしかないので、ボタンを欄幅いっぱいに */
.login-submit { width: 100%; margin-top: var(--sp-4); }

/* ============================================================
   アンケート設定（設定モード＋選択肢の編集）
   ============================================================ */
.survey-q {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); background: var(--white); margin-bottom: var(--sp-3);
}
.survey-q .q-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.survey-q .q-name { font-weight: var(--fw-bold); font-size: 14px; min-width: 130px; }
.survey-q .q-mode { width: 150px; }
.survey-q .q-opts-wrap { margin-top: var(--sp-3); }
.survey-q .q-opts-wrap.off { display: none; }
.survey-q textarea.q-opts { min-height: 62px; font-size: var(--fs-sm); line-height: 1.7; }
.survey-q .q-opts-label { font-size: var(--fs-caption); color: var(--ink-soft); margin: 0 0 var(--sp-1); }
.survey-q .q-fixed { font-size: var(--fs-caption); color: var(--ink-soft); margin-top: var(--sp-2); }

.survey-grid { display: flex; gap: var(--sp-3); }
.survey-row { flex: 1; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.survey-row span { white-space: nowrap; color: var(--ink-soft); }

/* ============================================================
   ウィザードの項目内小見出し（密度の高いフォームを区切る）
   ============================================================ */
.wiz-sub {
  font-family: var(--font-serif); font-weight: var(--fw-mincho);
  font-size: 15px; color: var(--ink);
  border-bottom: 1px solid var(--line-strong); padding-bottom: var(--sp-1);
  margin: var(--sp-6) 0 var(--sp-3);
}
.wiz-sub:first-of-type { margin-top: var(--sp-2); }

/* ============================================================
   表紙PDFの考え方の説明ブロック
   （なぜ本文と表紙が2つに分かれているのかを伝える）
   ============================================================ */
.cover-help {
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4); margin: 0 0 var(--sp-4);
}
.cover-help .ch-title { font-size: 14px; font-weight: var(--fw-bold); color: var(--ink); margin-bottom: var(--sp-1); }
.cover-help .ch-lead { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.95; margin: 0 0 var(--sp-3); }
.cover-help .ch-cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.cover-help .ch-case { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); }
.cover-help .ch-case-h { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent-dark); margin-bottom: var(--sp-1); }
.cover-help .ch-case-h u { text-decoration-color: var(--accent); text-underline-offset: 2px; }
.cover-help .ch-case-b { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; }
.cover-help .ch-note { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; margin: var(--sp-3) 0 0; }
@media (max-width: 720px) { .cover-help .ch-cases { grid-template-columns: 1fr; } }

/* ============================================================
   紙の色の選択（プリセット＋カラーピッカー）
   ============================================================ */
.paper-picker, .lc-picker { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: stretch; margin-top: 2px; }
.paper-sw, .paper-custom, .lc-sw, .lc-custom {
  display: flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
.paper-sw:hover, .paper-custom:hover, .lc-sw:hover, .lc-custom:hover { border-color: var(--accent); }
.paper-sw.on, .lc-sw.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); } /* design-check:allow 選択中を示す縁取り */
.paper-sw .sw, .paper-custom .sw, .lc-sw .sw, .lc-custom .sw {
  width: 22px; height: 22px; border-radius: 2px;
  border: 1px solid var(--line-strong); flex: 0 0 auto;
}
.paper-custom input[type=color], .lc-custom input[type=color] {
  width: 30px; height: 26px; padding: 0; margin: 0; border: 1px solid var(--line);
  border-radius: 2px; background: none; cursor: pointer;
}
.paper-state, .lc-state { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-3); }
/* リンクマーカーの見本。塗りの色は edit.php のスクリプトが、閲覧画面で光ったときと同じ濃さで付ける */
.lc-sample { display: inline-block; margin-left: var(--sp-2); padding: 2px var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.paper-bar-outer {
  display: none; height: 6px; background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-top: var(--sp-3);
}
.paper-bar-outer.on { display: block; }
.paper-bar-inner { height: 100%; width: 0%; background: var(--accent); transition: width .2s; }

/* 操作マップ：対象ページを最大2ページに絞る設定 */
.operation-map-setting .feature-item { margin-bottom: var(--sp-3); }
.operation-map-pages { margin: var(--sp-3) 0; }
.operation-map-pages-title { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); }
.operation-map-page-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.operation-map-page-list label {
  padding: var(--sp-1) var(--sp-2); background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: var(--fs-sm); color: var(--ink);
}
.operation-map-page-list input { margin-right: var(--sp-1); }

/* ============================================================
   お客様に渡すURLの表示（依頼フォーム・ライブラリなど）
   ------------------------------------------------------------
   設置場所が変わっても（販売してドメイン・パスが変わっても）自動で正しい
   URLになるよう、常に http[s]://host + 実際の設置パスから組み立てている。
   単なる文字列ではなく、クリックで開ける・ボタンでコピーできる形にする。
   ============================================================ */
.url-box { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-top: var(--sp-2); }
.url-box .url-box-link { font-size: 13px; color: var(--ink); word-break: break-all; }
.url-box .url-box-actions { display: flex; gap: var(--sp-1); margin-left: auto; }

/* ============================================================
   ページサムネイルの並び替え
   ============================================================ */
.thumb-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* サムネイル生成中は触らせない。途中で並び替え・回転・分割をされると出来上がる順番が狂うため */
.thumb-grid.is-busy { pointer-events: none; opacity: .5; }
.thumb-busy { margin: 0 0 var(--sp-3); }
.thumb-busy-text { font-size: 12.5px; color: var(--ink-soft); margin-top: var(--sp-1); }
.thumb-ph {
  height: 140px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute); font-size: 11px;
}
/* 表紙の面（表1〜表4）と背幅。表紙ページのサムネイルにだけ出る */
.thumb .face-sel { width: 100%; font-size: 11px; padding: 2px 3px; margin-top: 3px; }
.thumb .spine-row { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.thumb .spine-row label { margin: 0; font-size: 10.5px; color: var(--ink-soft); white-space: nowrap; }
.thumb .spine-row input { width: 100%; font-size: 11px; padding: 2px 3px; }
.thumb .unsplit {
  width: 100%; margin-top: 3px; font-size: 10.5px; padding: 3px 4px; cursor: pointer;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft);
}
.thumb .unsplit:hover { border-color: var(--accent); color: var(--accent); }
.thumb {
  width: 110px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-1); text-align: center; cursor: grab; position: relative;
  user-select: none; overflow: visible;
}
.thumb img { width: 100%; display: block; border: 1px solid var(--line); background: var(--white); }
.thumb .no { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.thumb .src-cover {
  position: absolute; top: 2px; left: 2px; background: var(--accent); color: var(--white);
  font-size: 10px; padding: 1px var(--sp-1); border-radius: var(--radius);
}
.thumb .del {
  position: absolute; top: 2px; right: 2px; background: rgba(28, 28, 27, .65); color: var(--white);
  border: none; border-radius: var(--radius); width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
/* ============================================================
   更新履歴（修正ログの掲示）
   ============================================================ */
.cl-h1 {
  font-family: var(--font-serif); font-weight: var(--fw-mincho-bold);
  font-size: var(--fs-h2); margin: 0 0 var(--sp-2);
}
.cl-alert {
  background: var(--accent-tint); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5); font-size: var(--fs-sm); line-height: 1.9; color: var(--accent-dark);
}
.cl-alert strong { display: block; margin-bottom: var(--sp-2); }
.cl-alert code {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 var(--sp-1); font-size: var(--fs-caption);
}
.cl-rel { border-top: 1px solid var(--line); padding: var(--sp-5) 0 var(--sp-2); }
.cl-rel.is-current { border-top-color: var(--accent); }
.cl-ver {
  font-family: var(--font-serif); font-weight: var(--fw-mincho-bold);
  font-size: var(--fs-h3); margin: 0 0 var(--sp-3);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3);
}
.cl-ver .cl-date { font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--ink-mute); }
.cl-ver .cl-now {
  font-family: var(--font-sans); font-size: var(--fs-caption);
  background: var(--accent); color: var(--white);
  border-radius: var(--radius); padding: 0 var(--sp-2);
}
.cl-note { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0 0 var(--sp-3); }
.cl-items { list-style: none; margin: 0; padding: 0; }
.cl-items li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); line-height: 1.9;
}
.cl-items li:last-child { border-bottom: none; }
.cl-tag {
  flex: 0 0 auto; min-width: 3.4em; text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--fs-caption); color: var(--ink-soft); padding: 1px var(--sp-2);
}
.cl-tag.cl-fix { border-color: var(--accent); color: var(--accent-dark); }
.cl-tag.cl-add { border-color: var(--ok); color: var(--ok); }
.cl-text { flex: 1 1 auto; }

/* 向き・大きさの自動調整の結果を伝える欄 */
.orient-note {
  background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9;
}

/* 複数選択の操作バー（選んでいる間だけ出す） */
.sel-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  background: var(--accent-tint); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-3);
  position: sticky; top: 0; z-index: 5;
}
.sel-bar .sel-count { font-weight: var(--fw-bold); color: var(--accent-dark); }
.sel-bar .sel-hint { font-size: var(--fs-caption); color: var(--ink-soft); }
.sel-bar .sel-hide { margin-left: auto; }
/* バーを隠している間、選択中であることを示す小さなボタン（クリックでバーを戻す） */
.sel-tab { position: sticky; top: 0; z-index: 5; margin: 0 0 var(--sp-3); }
/* 選ばれているページ */
.thumb.selected { outline: 3px solid var(--accent); outline-offset: 1px; }

/* ページごとの90度回転（縦位置・横位置が混ざったPDFの向きを揃える） */
.thumb .rot {
  position: absolute; top: 2px; right: 25px; background: rgba(28, 28, 27, .65); color: var(--white);
  border: none; border-radius: var(--radius); width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.thumb .rot:hover { background: var(--accent); }
.thumb.dragging { opacity: .4; }
/* 見開きのまま取り込まれたページの目印（分割の候補） */
.thumb.wide-mark { outline: 2px solid var(--accent); }
/* 向きを揃えるために回したページの目印 */
.thumb.rot-mark { outline: 2px dashed var(--accent); }
.thumb .split-cover {
  display: block; width: 100%; margin-top: var(--sp-1); background: var(--accent); color: var(--white);
  border: none; border-radius: var(--radius); font-size: 10.5px; padding: 3px 2px; cursor: pointer; line-height: 1.4;
}
.thumb .split-cover:hover { background: var(--accent-dark); }

/* 見開き表紙の分割フォーム（サムネイルの上にポップオーバー表示） */
.split-form {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: var(--sp-1);
  width: 180px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3); box-shadow: var(--shadow-pop); z-index: 30; text-align: left; cursor: default;
}
.split-form .split-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); margin-bottom: var(--sp-1); }
.split-form .split-row label { margin: 0; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.split-form select, .split-form input { font-size: 11.5px; padding: 3px 4px; width: 108px; }
.split-form .split-actions { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); }
.split-form .split-actions button {
  flex: 1; border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink);
  border-radius: var(--radius); padding: 5px 4px; font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.split-form .split-go { background: var(--accent); border-color: var(--accent); color: var(--white); }
.split-form .split-go:hover { background: var(--accent-dark); }

/* サムネイルのダブルクリックで開く拡大表示（トリミング量の確認用） */
.thumb img { cursor: zoom-in; }
.thumb-zoom {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90;
  background: rgba(28, 28, 27, .55);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-6);
}
.thumb-zoom.u-hide { display: none; }
.thumb-zoom-inner {
  position: relative; max-width: 90vw; max-height: 90vh;
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-drawer);
  padding: var(--sp-5); display: flex; align-items: center; justify-content: center;
}
.thumb-zoom-body img { display: block; max-width: 82vw; max-height: 82vh; }
.thumb-zoom-loading { padding: var(--sp-6); color: var(--ink-soft); font-size: var(--fs-sm); }
.thumb-zoom-close {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: 32px; height: 32px; border: none; background: var(--paper-raised); color: var(--ink);
  border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.thumb-zoom-close:hover { background: var(--accent-tint); color: var(--accent); }

/* ============================================================
   オプション機能の選択グリッド
   ============================================================ */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-1); }
.feature-item {
  display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3);
  background: var(--white); margin: 0; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-body);
}
.feature-item:hover { border-color: var(--accent); background: var(--accent-tint); }
.feature-item input { margin-top: 4px; }
.feature-item small { color: var(--ink-soft); line-height: 1.6; display: inline-block; }
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }

/* ============================================================
   リンク集エディタ・目次エディタ
   ============================================================ */
.link-edit-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); align-items: center; }
.link-edit-row input.lk-label { width: 170px; }
.link-edit-row input.lk-url { flex: 1; }
.link-edit-row input.lk-tag { width: 150px; }
.link-edit-row input.cq-label { flex: 1; }
.link-edit-row select.cq-mode { width: 150px; }

.toc-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); align-items: center; }
.toc-row input.toc-title { flex: 1; }
.toc-row input.toc-page { width: 90px; }
.toc-row.is-bad input { border-color: var(--warn); }
.toc-result { font-size: 13px; margin-left: var(--sp-2); white-space: pre-line; }

@media (max-width: 640px) { .survey-grid { flex-direction: column; } }

/* ============================================================
   書き出しの動作ログ
   端末の画面を思わせる暗色は、機能を伝える意味があるので維持する
   （DESIGN.md で認めている数少ない例外のひとつ）。
   ============================================================ */
.export-log {
  margin-top: var(--sp-3); height: 160px; overflow-y: auto;
  background: var(--ink-dark); color: #C9D9CC; border-radius: var(--radius); /* design-check:allow 端末画面らしい緑の文字 */
  font-family: var(--font-mono); font-size: var(--fs-caption); line-height: 1.8;
  padding: var(--sp-3) var(--sp-4); white-space: pre-wrap;
}
.export-log .err { color: var(--accent-on-dark); }

/* ============================================================
   ブック一覧：フォルダのツリー・一括操作・ダイアログ（V137）
   ============================================================ */
.booklist-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.booklist-layout.no-tree { grid-template-columns: minmax(0, 1fr); }
.booklist-main { min-width: 0; }
.folder-pane { position: sticky; top: var(--sp-3); max-height: calc(100vh - 24px); overflow-y: auto; }
@media (max-width: 860px) {
  .booklist-layout { grid-template-columns: minmax(0, 1fr); }
  .folder-pane { position: static; max-height: 240px; }
}
.folder-tree { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); }
.ft-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.ft-head h2 { margin: 0; font-size: var(--fs-body); }
.ft-list { list-style: none; margin: 0; padding: 0; }
.ft-list .ft-list { margin-left: var(--sp-3); }
.ft-item { margin: 0; }
.ft-item > details > summary { list-style: none; display: flex; align-items: center; cursor: pointer; }
.ft-item > details > summary::-webkit-details-marker { display: none; }
.ft-leaf { display: flex; align-items: center; }
.ft-caret { width: 16px; flex: 0 0 16px; display: inline-flex; justify-content: center; color: var(--ink-soft); }
.ft-caret .ui-icon { transition: transform .12s; }
.ft-item > details[open] > summary .ft-caret .ui-icon { transform: rotate(90deg); }
.ft-link {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; font-size: var(--fs-sm);
}
.ft-link:hover { background: var(--white); }
.ft-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-count { flex: 0 0 auto; font-size: var(--fs-caption); color: var(--ink-soft); }
.ft-item.is-current > .ft-leaf > .ft-link,
.ft-item.is-current > details > summary > .ft-link { background: var(--accent-tint); color: var(--accent-dark); font-weight: var(--fw-bold); }
.ft-link.is-drop { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--white); }
.ft-item.is-dragging { opacity: .5; }
.ft-actions { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.ft-actions-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
.ft-sub { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-body); cursor: pointer; }
.ft-sub input { width: auto; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); margin: 0 0 var(--sp-3); }
.crumbs a { color: var(--accent-dark); }

/* 選んだブックへの操作バー（ページ内の選択バー .sel-bar と同じ見た目） */
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  background: var(--accent-tint); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-3);
  position: sticky; top: 0; z-index: 6;
}
.bulk-bar[hidden], .bulk-bar [hidden] { display: none; }
.bulk-bar .sel-count { font-weight: var(--fw-bold); color: var(--accent-dark); }

.booklist-main #book-table th[data-col="sel"], .booklist-main #book-table td[data-col="sel"] {
  position: sticky; left: 0; z-index: 3; background: var(--paper-raised);
  width: 36px; min-width: 36px; padding-left: var(--sp-2); padding-right: var(--sp-2); text-align: center;
}
.booklist-main #book-table th[data-col="sel"] input, .booklist-main #book-table td[data-col="sel"] input { width: auto; margin: 0; cursor: pointer; }
#book-table tr.is-selected td { background: var(--accent-tint); }
#book-table tr.is-dragging td { opacity: .5; }
#book-table tr[draggable="true"] td[data-col="title"] { cursor: grab; }

.dlg {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--paper); color: var(--ink);
  padding: 0; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  box-shadow: var(--shadow-pop);
}
.dlg::backdrop { background: rgba(28, 28, 27, .45); }
.dlg-form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); margin: 0; }
.dlg-head { padding: var(--sp-4) var(--sp-5) var(--sp-2); }
.dlg-head h2 { margin: 0; font-size: var(--fs-h3); }
.dlg-head p { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.dlg-body { padding: var(--sp-2) var(--sp-5) var(--sp-3); overflow-y: auto; }
.dlg-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); background: var(--paper-raised); }
.dlg-foot-set { display: contents; }
.dlg-foot-set[hidden] { display: none; }
.dlg-foot .dlg-note { margin-right: auto; align-self: center; font-size: var(--fs-caption); color: var(--ink-soft); }

.bf-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.bf-row:first-child { border-top: 0; }
.bf-use { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: var(--fw-bold); cursor: pointer; }
.bf-use input { width: auto; }
.bf-ctl.is-off { opacity: .45; pointer-events: none; }
.bf-ctl select, .bf-ctl input[type=text], .bf-ctl input[type=password], .bf-ctl input[type=date] { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.bf-opts, .bf-ctl .bf-opts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.bf-opts label, .bf-ctl .bf-opts label { display: flex; align-items: center; gap: var(--sp-1); margin: 0; font-weight: var(--fw-body); }
.bf-opts input, .bf-ctl .bf-opts input { width: auto; }
.bf-feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
.bf-feat label { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: center; gap: var(--sp-2); margin: 0; font-weight: var(--fw-body); font-size: var(--fs-sm); }
.bf-feat select { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
@media (max-width: 640px) { .bf-row { grid-template-columns: minmax(0, 1fr); } .bf-feat { grid-template-columns: minmax(0, 1fr); } }

.bp-sum { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-3); }
.bp-sum th, .bp-sum td { text-align: left; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); }
.bp-sum td.num { text-align: right; white-space: nowrap; }
.bp-sample { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.bp-sample li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.bp-sample .bp-title { font-weight: var(--fw-bold); }
.bp-sample .bp-diff { color: var(--ink-soft); }
.bp-sample .bp-skip { color: var(--warn); }
.bp-arrow { color: var(--accent-dark); }
.dlg-radio { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.dlg-radio label { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: var(--fw-body); }
.dlg-radio input { width: auto; }

/* まとめて登録（bulk.php） */
.btn[hidden] { display: none; }
.bk-table-scroll { overflow-x: auto; margin-top: var(--sp-3); }
.bk-table { min-width: 1280px; }
.bk-table td, .bk-table th { vertical-align: top; }
.bk-table td input[type=text], .bk-table td input[type=date], .bk-table td select { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); min-width: 96px; }
.bk-table td.title input { min-width: 220px; }
.bk-table td.num { width: 32px; color: var(--ink-soft); }
.bk-table td.file { min-width: 160px; max-width: 240px; }
.bk-table td.msg { min-width: 200px; font-size: var(--fs-caption); }
.bk-table tr.is-excluded td { opacity: .45; }
.bk-fname { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.bk-fmeta { font-size: var(--fs-caption); color: var(--ink-soft); overflow-wrap: anywhere; }
.bk-err { color: var(--warn); }
.bk-warn { color: var(--accent-dark); }
.bk-check { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; font-weight: var(--fw-body); cursor: pointer; }
.bk-check input { width: auto; }
.bk-ptext { font-size: var(--fs-sm); overflow-wrap: anywhere; }
tr.is-active td { background: var(--accent-tint); }
tr.is-done td .bk-ptext { color: var(--ok); }
tr.is-failed td .bk-ptext { color: var(--warn); }

/* ライブラリの共有設定（shelves.php） */
.shelf-share-box { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.shelf-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.qr-body { display: flex; justify-content: center; padding: var(--sp-4) var(--sp-5); }

/* 紹介ページの画像の差し替え（lp-images.php） */
.lp-slot-body { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-5); align-items: start; }
.lp-slot-prev { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); min-height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lp-slot-prev img { width: 100%; display: block; }
@media (max-width: 720px) { .lp-slot-body { grid-template-columns: 1fr; } }

/* ライブラリの閲覧記録（shelf-dashboard.php） */
.shelf-dash-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
.shelf-dash-head select { width: auto; max-width: 22em; }
.period-form { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
h3.sec-sub { font-size: var(--fs-sm); margin: var(--sp-4) 0 var(--sp-2); color: var(--ink-soft); }
table.list th.num, table.list td.num { text-align: right; white-space: nowrap; }

/* 閲覧データについての注意書き・リセット（分析画面） */
.an-notes { margin: 0 0 var(--sp-4); }
.an-notes > summary { cursor: pointer; }
.an-notes ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); font-size: var(--fs-sm); }
.an-notes li { margin-bottom: var(--sp-2); line-height: 1.8; }
.stats-reset { margin-top: var(--sp-6); border-color: var(--warn-line); }
.stats-reset-opts { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.stats-reset-opt { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); }
.stats-reset-opt input[type=date] { width: auto; }
.stats-reset-preview { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); margin: var(--sp-3) 0; }
.stats-reset-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.stats-reset-confirm input[type=text] { width: 9em; }
.stats-reset-result { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); min-height: 1.4em; }