/* PDF編集アプリ 見た目 */
:root {
  --accent: #2b5797;
  --accent-dark: #1f4176;
  --accent-soft: #eaf1fb;
  --border: #d6dce6;
  --border-strong: #b9c4d6;
  --text: #222;
  --text-muted: #5a6472;
  --danger: #c0392b;
  --danger-bg: #fdecea;
  --success: #2e7d32;
  --success-bg: #eaf6ec;
  --panel-bg: #fff;
  --page-bg: #f4f5f7;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--text);
  background: var(--page-bg);
}

.ヘッダー {
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.ヘッダー h1 { margin: 0; font-size: 18px; }

/* ボタン・入力欄の共通見た目（各パネル・ツールバー共通） */
button {
  font: inherit;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
button:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
button:active:not(:disabled) { background: #dce8fa; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

input[type="text"],
input[type="number"],
select {
  font: inherit;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
input[type="checkbox"] { cursor: pointer; }

/* 特に大事な操作（開く・保存・フォームに入力）を目立たせる */
.強調 {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: bold;
}
.強調:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }

.ツールバー {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.ツールバー button { padding: 6px 12px; font-size: 14px; }
#ページ表示 { min-width: 70px; text-align: center; color: var(--text-muted); }
.区切り { width: 1px; height: 24px; background: var(--border-strong); margin: 0 4px; }
.抽出範囲 { width: 90px; padding: 5px 6px; font-size: 13px; }
.倍率表示 {
  min-width: 96px;
  text-align: center;
  font-size: 13px;
  color: var(--accent);
  font-weight: bold;
}

.サムネ枠[draggable="true"] { cursor: grab; }
.サムネ枠.ドラッグ中 { opacity: 0.4; }
.サムネ枠.ドロップ先 { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }

.貼り付けオーバーレイ { position: absolute; z-index: 20; }
.貼り付けオーバーレイ img {
  display: block;
  width: 100%;
  height: auto;
  outline: 2px dashed var(--accent);
  cursor: move;
  -webkit-user-select: none;
  user-select: none;
}
.貼り付けオーバーレイ.選択中 img { outline: 2px solid #e67e22; }
.貼り付けオーバーレイ:not(.選択中) .リサイズハンドル,
.貼り付けオーバーレイ:not(.選択中) .貼り付けバー { display: none; }

.編集レイヤー文字プレビュー {
  display: block;
  outline: 2px dashed var(--accent);
  cursor: move;
  white-space: nowrap;
  line-height: 1.3;
  -webkit-user-select: none;
  user-select: none;
}
.貼り付けオーバーレイ.選択中 .編集レイヤー文字プレビュー { outline: 2px solid #e67e22; }
.リサイズハンドル {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: nwse-resize;
}
.貼り付けバー {
  position: absolute;
  left: 0;
  top: -30px;
  display: flex;
  gap: 4px;
  white-space: nowrap;
}
.貼り付けバー button { font-size: 12px; padding: 3px 10px; }
.貼り付け設定 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 11px;
}
.貼り付け設定 input:not([type="checkbox"]) {
  width: 48px;
  padding: 2px 3px;
  font-size: 11px;
}
.貼り付け設定 input[type="text"] { width: 74px; }
.貼り付け設定.チェック設定 input[type="checkbox"] { width: auto; margin: 0; }
.図形編集バー {
  top: auto;
  bottom: calc(100% + 8px);
  flex-wrap: wrap;
  row-gap: 4px;
  max-width: min(360px, 90vw);
}

.本体 { display: flex; height: calc(100vh - 150px); }
.サムネイル一覧 {
  width: 160px;
  overflow-y: auto;
  padding: 8px;
  background: #eceef1;
  border-right: 1px solid var(--border);
}
.表示エリア {
  position: relative;
  flex: 1;
  overflow: auto;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.表示エリア.ドラッグ受付中 {
  background: var(--accent-soft);
  outline: 3px dashed var(--accent);
  outline-offset: -10px;
}
.案内 { color: var(--text-muted); }

.ページ画像 {
  background: #fff;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  max-width: none;
  flex: 0 0 auto;
}

.サムネ枠 {
  margin-bottom: 10px;
  padding: 4px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}
.サムネ枠:hover { border-color: #9bb8e0; }
.サムネ枠.選択中 { border-color: var(--accent); background: var(--accent-soft); }
.サムネ枠 canvas { max-width: 100%; display: block; margin: 0 auto; }
.サムネ番号 { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.サムネ操作 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 5px;
}
.サムネ操作 button {
  padding: 3px 4px;
  font-size: 11px;
  line-height: 1.2;
}
.サムネ選択チェック {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.サムネ枠 { position: relative; }

/* サムネイル一覧の一番上：複数選択してまとめて操作するバー */
.サムネ一括操作 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.サムネ選択件数 { font-size: 11px; color: var(--text-muted); width: 100%; }
.サムネ一括操作 button { font-size: 11px; padding: 4px 6px; }

/* 図形レイヤー（四角形・直線） */
.図形レイヤー { position: absolute; z-index: 20; box-sizing: content-box; cursor: move; }
.図形レイヤー svg { pointer-events: none; }
.図形レイヤー:not(.選択中) .図形削除ボタン { display: none; }
.図形削除ボタン {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: #fff;
  font-size: 12px;
  line-height: 1;
}
.図形レイヤー.選択中 { outline: 1px dashed #e67e22; outline-offset: 2px; }

/* 図形を描いている途中のドラッグ枠 */
.図形描画プレビュー {
  position: absolute;
  z-index: 25;
  border: 2px dashed var(--accent);
  background: rgba(43, 87, 151, 0.1);
  pointer-events: none;
}

/* 検索で見つかった文字にかぶせるハイライト */
.検索ハイライト {
  position: absolute;
  z-index: 15;
  background: rgba(255, 235, 59, 0.5);
  pointer-events: none;
}

.手書きオーバーレイ {
  position: absolute;
  z-index: 25;
  pointer-events: none;
}
.手書きオーバーレイ.描画中 {
  pointer-events: auto;
  cursor: crosshair;
}

.状態メッセージ {
  min-height: 24px;
  padding: 6px 16px;
  font-size: 13px;
  background: #fff;
  border-top: 1px solid var(--border);
}
.状態メッセージ.エラー { color: var(--danger); background: var(--danger-bg); }
.状態メッセージ.成功 { color: var(--success); background: var(--success-bg); }

.検索キーワード { width: 140px; padding: 5px 6px; font-size: 13px; }
.検索結果表示 { font-size: 13px; color: var(--text-muted); min-width: 60px; }

.パネル {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 50;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 14px 16px;
  width: 260px;
  font-size: 13px;
}
.パネル h3 { margin: 0 0 10px; font-size: 14px; color: var(--accent); }
.パネル label { display: block; margin-bottom: 8px; }
.パネル label span { display: block; margin-bottom: 3px; color: var(--text-muted); }
.パネル input[type="text"],
.パネル input[type="number"],
.パネル select {
  width: 100%;
  padding: 5px 6px;
  font-size: 13px;
}
.パネルボタン列 {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}
.パネルボタン列 button { padding: 5px 12px; font-size: 13px; }

/* 色選択パレット（見本色ボタン+カスタム）。図形・文字入れ・透かし・ページ番号パネル、
   配置後編集バー、手書きパネルで共通して使う見た目。 */
.色パレット {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.色見本ボタン {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--border-strong);
  border-radius: 5px;
  cursor: pointer;
  flex: none;
}
.色見本ボタン.選択中 {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.色パレット input[type="color"] {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--border-strong);
  border-radius: 5px;
  cursor: pointer;
  background: none;
  flex: none;
}
.色パレット.無効 {
  opacity: .5;
  pointer-events: none;
}

.パネル大きめ { width: 320px; }
.パネルスクロール { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.パネル label.チェック行 { display: flex; align-items: center; gap: 6px; }
.パネル label.チェック行 span { margin: 0; }
.パネル補足 {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: var(--accent-soft);
  border-radius: 4px;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 12px;
}
.手書き説明 {
  margin: 0 0 10px;
  color: var(--text-muted);
  line-height: 1.5;
}
.手書きボタン列 {
  justify-content: space-between;
}
.手書きボタン列 button {
  flex: 1;
}

.しおり行一覧 { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.しおり行 { display: flex; align-items: center; gap: 4px; }
.しおり行 .しおりタイトル { flex: 1; min-width: 0; padding: 5px 6px; font-size: 13px; }
.しおり行 .しおりページ { width: 46px; padding: 5px 4px; font-size: 13px; }
.しおり行 .しおり階層 { width: 40px; padding: 5px 4px; font-size: 13px; }
.しおり行 button { padding: 4px 6px; font-size: 12px; }

/* 「画像からPDFを作る」パネルの選択画像一覧 */
.画像PDF一覧 {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.画像PDF一覧行 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.画像PDF一覧行:last-child { border-bottom: none; }
.画像PDF一覧名 {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.画像PDF一覧操作 { display: flex; gap: 4px; flex: none; }
.画像PDF一覧操作 button { padding: 3px 6px; font-size: 11px; }

.保存前プレビューパネル {
  position: fixed;
  inset: 20px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
.保存前プレビュー見出し {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--accent);
  color: #fff;
  border-radius: 6px 6px 0 0;
}
.保存前プレビュー見出し h3 {
  margin: 0;
  font-size: 15px;
}
.保存前プレビュー見出し button {
  padding: 5px 12px;
  font-size: 13px;
  background: #fff;
}
.保存前プレビュー表示 {
  flex: 1;
  width: 100%;
  border: 0;
  background: #e5e7eb;
}

/* ここから、スマホなど狭い画面（幅600px以下）向けの調整。
   PC表示（600px超）にはいっさい影響しない。 */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }

  .ツールバー {
    padding: 8px;
    gap: 6px;
  }
  .ツールバー button {
    min-height: 40px;
    padding: 8px 10px;
  }
  input[type="text"],
  input[type="number"],
  select {
    min-height: 40px;
  }
  .区切り { display: none; }

  .本体 { height: calc(100vh - 120px); }
  .サムネイル一覧 {
    width: 96px;
    padding: 6px;
  }
  .サムネ操作 button {
    min-height: 32px;
  }
  .表示エリア { padding: 8px; }

  .パネル,
  .パネル大きめ {
    left: 12px;
    right: 12px;
    top: 60px;
    width: auto;
    max-width: none;
  }

  .色見本ボタン,
  .色パレット input[type="color"] {
    width: 32px;
    height: 32px;
  }

  .保存前プレビューパネル { inset: 8px; }
}