/* src/public/css/image-to-pdf.css … 「画像をPDFにする」の見た目
   💡 ボタン・メッセージ・詳細オプションは、共通の calc-common.css・money.css を使います。ダークモードは theme-dark.css の末尾 */

/* 画像を選ぶ枠（ドラッグ＆ドロップもできる） */
.i2p-drop {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    background: #f8fafc;
    transition: border-color 0.2s, background-color 0.2s;
}
.i2p-drop.is-dragover { border-color: #f39c12; background: #fdf6e2; }
#i2p-app.is-editing .i2p-drop { padding: 14px 12px; }
.i2p-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1e3c72;
    color: #fff;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: bold;
    cursor: pointer;
}
.i2p-upload-btn:hover { background: #2a5298; }
.i2p-drop:focus-within .i2p-upload-btn { outline: 3px solid #93c5fd; outline-offset: 2px; }
#i2p-app.is-busy .i2p-upload-btn { opacity: 0.6; cursor: wait; }
/* 選ぶ欄は見えなくする（Tab で選べるように、hidden にはしない） */
.i2p-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.i2p-drop { position: relative; }
.i2p-drop-tip { margin: 10px 0 0; font-size: 0.85rem; color: #475569; }

/* 並べた画像 */
.i2p-list-wrap { margin: 14px 0 6px; }
.i2p-list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 6px; font-weight: bold; color: #1e293b; }
.i2p-list-hint { font-weight: normal; font-size: 0.78rem; color: #475569; }
.i2p-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.i2p-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.i2p-item.is-dragging { border-color: #f39c12; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18); background: #fffbeb; cursor: grabbing; position: relative; z-index: 2; }
.i2p-list.is-sorting .i2p-item:not(.is-dragging) { opacity: 0.85; }
.i2p-grip { flex: 0 0 auto; color: #94a3b8; font-size: 0.9rem; }
.i2p-thumb {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: #f1f5f9;
}
.i2p-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; transition: transform 0.15s; }
.i2p-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.i2p-page { font-size: 0.75rem; font-weight: bold; color: #1e3c72; }
.i2p-name { font-size: 0.88rem; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i2p-meta { font-size: 0.75rem; color: #475569; font-variant-numeric: tabular-nums; }
.i2p-btns { flex: 0 0 auto; display: flex; gap: 4px; }
.i2p-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    padding: 0;
}
.i2p-btn:hover:not(:disabled) { background: #f1f5f9; }
.i2p-btn:disabled { opacity: 0.35; cursor: default; }
.i2p-btn-remove { color: #b91c1c; border-color: #fecaca; }
/* スマホでは、名前の行を短くして、ボタンを押しやすく */
@media (max-width: 420px) {
    .i2p-item { gap: 6px; padding: 6px; }
    .i2p-grip { display: none; }
    .i2p-thumb { flex-basis: 44px; width: 44px; height: 44px; }
    .i2p-btns { gap: 3px; }
    .i2p-btn { width: 34px; height: 34px; }
}

/* 詳細オプション */
.i2p-hint { display: block; margin: 4px 0 0; font-size: 0.8rem; color: #475569; font-weight: normal; }
.i2p-check { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 6px; cursor: pointer; }
.i2p-check input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; }
.i2p-check-name { font-weight: bold; }

/* 画像があるときは「クリア・PDF を作る」と進み具合・メッセージを、画面の下に貼り付ける（一覧が長くなるため。NEW_TOOL.md 0章） */
html:has(#i2p-app.is-editing) { scroll-padding-bottom: 96px; scroll-padding-top: 64px; } /* 下は JS が帯の高さに合わせて直す。上は固定のヘッダー（縮んだ形）の分 */
#i2p-app.is-editing .i2p-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 10px 0;
    background: #fff;
    box-shadow: 0 -6px 12px -10px rgba(15, 23, 42, 0.4);
}
.i2p-progress { display: block; width: 100%; height: 10px; margin: 6px 0 0; }
#i2p-app.is-editing .i2p-bar { margin-top: 16px; }
#i2p-app.is-editing .i2p-bar .btn-group { margin: 0; }
#i2p-app.is-editing .i2p-bar .mc-message:empty { display: none; }
#i2p-app.is-editing .i2p-bar .mc-message { margin: 6px 0 0; max-height: max(calc(8em + 8px), 40vh); overflow-y: auto; } /* + 8px：すすめのボタンの上下の余白の分。知らせが長い（言葉の長い言語・知らせが重なる）ときは、画面の高さの 40% まで広げる（スマホではスクロールバーが見えず、隠れた文に気づけないため） */
@media (max-height: 500px) { #i2p-app.is-editing .i2p-bar .mc-message { max-height: max(calc(4.8em + 8px), 34vh); } } /* 横向きのスマホでは、帯を低く（長い知らせのときだけ、画面の高さの 34% まで） */
.i2p-hint-note { color: #92400e; }
.i2p-hint-btn { margin: 2px 0; padding: 3px 12px; line-height: 1.3; border: 1px solid #d97706; border-radius: 999px; background: #fffbeb; color: #92400e; font-size: 0.85em; font-weight: bold; cursor: pointer; }
/* 読み込み中・作っている途中は、一覧のボタンが効かないことを見た目でも分かるように */
#i2p-app.is-busy .i2p-btn { opacity: 0.4; cursor: wait; }
#i2p-app.is-busy .i2p-item { cursor: wait; }
.mc-message.is-error { color: #b91c1c; }
#i2p-message { overflow-wrap: anywhere; } /* 長いファイル名（英数字）でも、横にはみ出さない */
#i2p-message:focus { outline: none; } /* 知らせへ操作の場所を移したとき（JS から）に、枠を出さない */

/* 作った PDF */
.i2p-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin: 12px 0;
}
.i2p-info > div { min-width: 0; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.i2p-info dt { font-size: 0.75rem; color: #475569; }
.i2p-info dd { margin: 2px 0 0; font-weight: bold; color: #1e293b; overflow-wrap: anywhere; }
.i2p-download { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }