/* Tojiru（pdf-merge）固有の版面。共通の枠（.bar / .btn / .statusbar / .card / #dropzone の枠消し）は site.css が正。
   接頭辞 tj- で他ツールへ漏れないようにする（Viewer の教訓・2026-08-27）。 */

/* ---------- 開いたファイル ---------- */
.tj-files { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tj-files li { display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Mono', ui-monospace, monospace; font-size: 11px; color: var(--body); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; max-width: 100%; }
.tj-files li b { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.tj-files li .tj-fremove { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; border: none; background: none; color: var(--faint); cursor: pointer; border-radius: 999px; font-size: 14px; line-height: 1; }
.tj-files li .tj-fremove:hover, .tj-files li .tj-fremove:focus-visible { color: var(--accent-strong); background: var(--band); }

/* ---------- 空状態 ---------- */
.tj-empty { margin-top: 14px; min-height: 300px; display: grid; place-items: center; text-align: center; color: var(--faint); font-size: 12px; line-height: 2.1; padding: 32px 20px; }
.tj-empty .big { display: block; font-family: 'Space Mono', ui-monospace, monospace; font-size: 22px; letter-spacing: 0.1em; color: var(--line-strong); margin-bottom: 6px; }

/* ---------- 選択バー ---------- */
.tj-selbar { margin-top: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; position: sticky; top: 8px; z-index: 5; }
.tj-selcount { font-size: 12px; font-weight: 700; color: var(--ink); }
.tj-selops { display: flex; gap: 8px; flex-wrap: wrap; }
.tj-selops .btn { font-size: 11px; padding: 7px 14px; }
.tj-danger { border-color: var(--accent-strong); color: var(--accent-strong); }

/* ---------- ページの並び ---------- */
.tj-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 14px; }
.tj-page { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; position: relative; }
.tj-page.is-dragging { opacity: 0.4; }
.tj-page.is-over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.tj-thumb { display: block; width: 100%; aspect-ratio: 1 / 1.3; border: none; background: var(--band); border-radius: 8px; padding: 0; cursor: pointer; position: relative; overflow: hidden; }
.tj-thumb:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.tj-thumb[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--accent-strong); }
.tj-thumb canvas { display: block; max-width: 100%; max-height: 100%; margin: auto; position: absolute; inset: 0; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.tj-thumb .tj-ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Space Mono', ui-monospace, monospace; font-size: 11px; color: var(--faint); }
.tj-thumb .tj-check { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper); display: grid; place-items: center; font-size: 13px; color: var(--paper); }
.tj-thumb[aria-pressed="true"] .tj-check { background: var(--accent-strong); border-color: var(--accent-strong); }
.tj-meta { display: flex; align-items: baseline; gap: 6px; font-family: 'Space Mono', ui-monospace, monospace; font-size: 10px; color: var(--faint); min-width: 0; }
.tj-num { font-size: 12px; font-weight: 700; color: var(--ink); }
.tj-src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-ops { display: flex; gap: 4px; }
.tj-ops button { flex: 1; min-height: 32px; border: 1px solid var(--line); background: var(--paper); color: var(--body); border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1; font-family: inherit; }
.tj-ops button:hover, .tj-ops button:focus-visible { border-color: var(--accent); color: var(--accent-strong); }
.tj-ops button:disabled { opacity: 0.35; cursor: default; }
.tj-ops .tj-del:hover, .tj-ops .tj-del:focus-visible { border-color: var(--accent-strong); }

/* ---------- 分割・追加 ---------- */
.tj-more { margin-top: 14px; padding: 6px 16px; }
.tj-more-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 12px 0; }
.tj-more-row + .tj-more-row { border-top: 1px solid var(--line); }
.tj-more-t { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.tj-more-d { margin: 4px 0 0; font-size: 12px; color: var(--body); }
.tj-more .btn { font-size: 11.5px; padding: 8px 16px; }

/* ---------- ファイルを落とす覆い（ドラッグ中だけ・body.drop は tool.js が付け外し） ----------
   site.css は #dropzone を持たない（Viewer は自分の tool.css に持つ）。この 4 行が無く、ツールページの末尾と記事の埋め込み枠に
   「ドロップして開く .pdf（複数可）」が素の文字で出ていた（2026-10-12 本番の DOM 計測で display:block・position:static・第 13 ラウンドで発見） */
#dropzone { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: color-mix(in srgb, var(--paper) 86%, transparent); }
body.drop #dropzone { display: grid; }
#dropzone .box { border: 2px dashed var(--accent); border-radius: 18px; background: var(--card); padding: 40px 56px; text-align: center; pointer-events: none; }
#dropzone .l1 { font-size: 17px; font-weight: 700; color: var(--ink); }
#dropzone .l2 { font-family: 'Space Mono', ui-monospace, monospace; font-size: 12px; color: var(--faint); margin-top: 6px; }

/* ---------- 合図 ---------- */
.tj-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); background: var(--ink); color: var(--paper); font-size: 12px; padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 60; max-width: 90vw; display: flex; gap: 12px; align-items: center; }
.tj-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tj-toast button { font-family: inherit; font-size: 12px; font-weight: 700; color: var(--paper); background: none; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; padding: 6px 12px; min-height: 32px; cursor: pointer; }
.tj-notice { margin: 12px 0 0; font-size: 12px; color: var(--accent-strong); font-weight: 700; }

/* ---------- タッチ環境 ---------- */
@media (pointer: coarse) {
  .tj-ops button { min-height: 44px; }
  .tj-files li .tj-fremove { min-width: 44px; min-height: 44px; }
  .tj-selops .btn { min-height: 44px; }
}
@media (max-width: 640px) {
  .tj-pages { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .tj-selbar { top: 4px; }
}

/* 印刷 = 何も出さない（このツールは印刷用途ではない） */
@media print { .tj-pages, .tj-selbar, .tj-more, .tj-files, .tj-empty, #dropzone, .tj-toast { display: none !important; } }

/* 回転のプレビュー（class で付ける・style 属性は CSP で無効） */
.tj-thumb canvas.rot-90 { transform: rotate(90deg); }
.tj-thumb canvas.rot-180 { transform: rotate(180deg); }
.tj-thumb canvas.rot-270 { transform: rotate(270deg); }

/* hidden 属性を display 指定に負けさせない（.tj-empty の grid・.tj-selbar の flex が [hidden] に勝っていた・実測 2026-09-19） */
.tj-empty[hidden], .tj-selbar[hidden], .tj-more[hidden], .tj-files[hidden], .tj-pages[hidden], .tj-toast[hidden] { display: none; }