/* ===== カード作り（取り込み） ===== */
.editor-screen { min-height: 100dvh; background: var(--page); } /* 地は TOP と同じ淡い青 */
.import-box { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 20px; text-align: center; } /* 真ん中に縦に並べる */
.pick-btn { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 335px; height: 56px; border-radius: 28px; background: var(--brand-blue-text); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; } /* 大きな青いボタン */
.import-hint, .import-count { margin: 0; font-size: 13px; line-height: 1.6; color: var(--sub); } /* 案内・「12 / 40 枚」 */
.import-progress { width: 100%; max-width: 335px; } /* 進み具合の帯の幅（SE で左右 20px の線にそろう 335px） */
body:has(dialog.place-sheet[open]) .import-progress { visibility: hidden; } /* 位置合わせの画面の間は隠す（後ろに「0 / 2 枚」が透けて、数え方が2つ並ぶため） */
.import-progress progress { width: 100%; height: 8px; accent-color: var(--brand-blue-text); } /* 帯の色はロゴの青 */
.import-result { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink); white-space: pre-line; } /* 結果の文。文の切れ目（\n）で改行する（続けると「ません。」だけが次の行に残る） */
.import-detail { width: 100%; max-width: 335px; font-size: 12px; color: var(--sub); text-align: left; overflow-wrap: anywhere; } /* 「くわしく」。長いファイル名でも枠からはみ出さない */
.import-detail summary { min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; } /* 押せる範囲 44px。文字は濃い色（薄いと押せる所に見えない） */
.import-detail summary::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); } /* 下向きの印（flex にすると元の三角が消えるため自分で描く） */
.import-detail[open] summary::after { margin-top: 3px; transform: rotate(-135deg); } /* 開いたら上向き */
.import-detail ul { margin: 8px 0 0; padding: 0; list-style: none; line-height: 1.7; max-height: 40dvh; overflow: auto; } /* 形式・失敗の一覧。長ければ中だけスクロール（「アルバムを見る」を下へ押し出さない） */
.import-detail li { padding-left: 1em; text-indent: -1em; } /* 2行目は「・」の後ろにそろえる */
.import-detail li::before { content: "・"; } /* 行の頭の印（ブラウザの黒丸は、中だけスクロールにすると欠けて三角に見えた） */
.done-btn { height: 44px; padding: 0 24px; border: 0; border-radius: 22px; background: var(--brand-blue-text); font: inherit; font-size: 14px; font-weight: 700; color: #fff; } /* アルバムへ戻る。この画面で押すのはこれだけなので、写真を選ぶボタンと同じ青（淡い青だと地に溶けた） */

/* ===== 位置合わせの画面（③ B。小窓 .sheet の形を使う） ===== */
.place-sheet { padding: 16px; touch-action: none; } /* 画像を大きく見せるため、小窓の余白を詰める。2本指の片方が枠の外に出てもページが拡大されないように */
.place-head { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; margin: -8px 0 6px; } /* 上の段: 左「やめる」・中央「3 / 30 枚目」・右は空き。上の余白は小窓の余白に食い込ませて詰める */
.place-stop { height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--brand-blue-text); text-align: left; } /* 文字だけの「やめる」（押せる高さ 44px） */
.place-count { margin: 0; font-size: 13px; color: var(--sub); text-align: center; outline: none; } /* 「3 / 30 枚目」。開いたときの選択をここに置くので、選択の枠は出さない */
.place-sheet .sheet-actions { gap: 8px; }          /* 2つのボタンの間を少し詰める */
.place-sheet .sheet-actions button { padding: 0 4px; font-size: 14px; white-space: nowrap; } /* 「残りは真ん中で保存」が幅 360 の画面でも1行に収まるように */
.place-sheet canvas {
  display: block; width: 100%; margin: 0 auto;      /* 小窓の幅いっぱい */
  max-width: calc((100dvh - 236px) * 63 / 88);      /* 背の低い画面（横向きなど）では高さに収まる幅に縮める。236px は上の段・案内（2行）・ボタンの分 */
  aspect-ratio: 63 / 88; border-radius: 4.5% / 3.2%; /* カードの形。角の丸みはアルバムの中のカードと同じ */
  box-shadow: 0 2px 6px rgba(160, 172, 192, .35);   /* アルバムの中のカードと同じ淡い影 */
  background: var(--tint-2);                        /* 透明な所の後ろ（読み込み前もこの色） */
  touch-action: none;                               /* 指の操作をスクロールや拡大に取られない */
}
.place-hint { margin: 10px 0 14px; font-size: 12px; line-height: 1.6; color: var(--sub); text-align: center; } /* 操作の案内（2行） */