/* 並べ替えで「ここに入る」を示す線。PDF の全ページ(編集画面・結合・画像→PDF・並べ替え)で同じ見た目にする(2026-09-24 ユーザー指示)。
   形と色はここだけで決める: 太さ 4px・角丸・紫、項目より前後に 4px はみ出す。
   線は項目どうしのすき間の真ん中に出す。すき間の幅は各ページの CSS が一覧の枠に --drop-gap で書く。
   カード(.page-card)は ::before、行(.file-row)は番号に ::before を使っているので ::after に出す。 */
.page-card.drop-before::before,.page-card.drop-after::before,
.file-row.drop-before::after,.file-row.drop-after::after{content:"";position:absolute;z-index:3;border-radius:2px;background:#7e6bc0;pointer-events:none}

/* 横に並ぶ一覧(カード): 縦の線 */
.page-card.drop-before::before,.page-card.drop-after::before{top:-4px;bottom:-4px;width:4px}
.page-card.drop-before::before{left:calc(var(--drop-gap, 8px) / -2 - 2px)}
.page-card.drop-after::before{right:calc(var(--drop-gap, 8px) / -2 - 2px)}

/* 上下に積む一覧(行、1列のカード): 横の線。1列になるのが狭い画面だけの一覧は、枠に .drop-stack-narrow を付ける */
.file-row.drop-before::after,.file-row.drop-after::after{left:-4px;right:-4px;height:4px}
.file-row.drop-before::after{top:calc(var(--drop-gap, 8px) / -2 - 2px)}
.file-row.drop-after::after{bottom:calc(var(--drop-gap, 8px) / -2 - 2px)}
@media(max-width:760px){
 .drop-stack-narrow > .page-card.drop-before::before,.drop-stack-narrow > .page-card.drop-after::before{left:-4px;right:-4px;width:auto;height:4px}
 .drop-stack-narrow > .page-card.drop-before::before{top:calc(var(--drop-gap, 8px) / -2 - 2px);bottom:auto}
 .drop-stack-narrow > .page-card.drop-after::before{top:auto;bottom:calc(var(--drop-gap, 8px) / -2 - 2px)}
}