/* [2026-09-18] 目的：完整編輯器與簡易編輯器共用同一套點選局部去背視窗樣式。 */
.ds-white-removal-dialog {
    position: fixed;
    inset: 0;
    z-index: 10030;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(3px);
}
.ds-white-removal-dialog.is-visible { display: flex; }
.ds-white-removal-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(1080px, 94vw);
    height: min(860px, 92vh);
    overflow: hidden;
    border: 1px solid #d8e0ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
}
.ds-white-removal-head,
.ds-white-removal-toolbar,
.ds-white-removal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5eaf1;
}
.ds-white-removal-head > div { display: grid; gap: 3px; }
.ds-white-removal-head strong { color: #0f172a; font-size: 17px; }
.ds-white-removal-head span,
.ds-white-removal-foot > span { color: #64748b; font-size: 12px; }
.ds-white-removal-head button {
    width: 34px;
    height: 34px;
    color: #475569;
    border: 1px solid #d8e0ec;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 22px;
}
.ds-white-removal-toolbar { justify-content: flex-start; background: #f8fafc; }
.ds-white-removal-toolbar label { display: flex; align-items: center; gap: 9px; color: #334155; font-size: 12px; }
.ds-white-removal-toolbar input { width: 180px; accent-color: #0f9da5; }
.ds-white-removal-color { display: inline-flex; align-items: center; gap: 6px; color: #64748b; font-size: 12px; }
.ds-white-removal-color i { display: inline-block; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #94a3b8; }
.ds-white-removal-color button.is-active { color: #fff; border-color: #d97706; background: #d97706; }
.ds-white-removal-zoom { display: inline-grid; grid-template-columns: 34px 58px 34px; align-items: center; }
.ds-white-removal-zoom strong { color: #334155; text-align: center; font-size: 12px; }
.ds-white-removal-backgrounds { display: inline-flex; align-items: center; gap: 4px; }
.ds-white-removal-backgrounds > span { margin-right: 3px; color: #64748b; font-size: 12px; }
.ds-white-removal-backgrounds button { min-width: 38px; padding: 0 8px; }
.ds-white-removal-backgrounds button.is-active { color: #fff; border-color: #0f929a; background: #0f929a; }
.ds-white-removal-toolbar button,
.ds-white-removal-foot button {
    min-height: 34px;
    padding: 0 14px;
    color: #334155;
    border: 1px solid #cfd8e5;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}
.ds-white-removal-toolbar button:disabled { cursor: default; opacity: .45; }
.ds-white-removal-stage {
    min-height: 0;
    padding: 20px;
    overflow: auto;
    background-color: #dfe5ed;
    background-image: linear-gradient(45deg, #cbd3df 25%, transparent 25%), linear-gradient(-45deg, #cbd3df 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cbd3df 75%), linear-gradient(-45deg, transparent 75%, #cbd3df 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    text-align: center;
    /* [2026-09-18] 目的：手機局部去背由共用程式接管單指拖曳與雙指縮放，避免瀏覽器改為縮放整個頁面。 */
    touch-action: none;
}
.ds-white-removal-stage[data-preview-background="black"] { background: #111827; }
.ds-white-removal-stage[data-preview-background="white"] { background: #fff; }
.ds-white-removal-canvas-space {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    min-height: 100%;
}
.ds-white-removal-stage canvas {
    display: block;
    flex: 0 0 auto;
    cursor: crosshair;
    box-shadow: 0 4px 24px rgba(15, 23, 42, .18);
}
.ds-white-removal-foot { border-top: 1px solid #e5eaf1; border-bottom: 0; }
.ds-white-removal-foot > div { display: flex; gap: 8px; }
.ds-white-removal-foot button.is-primary { color: #fff; border-color: #0f929a; background: #0f929a; }
.ds-white-removal-foot button:disabled { cursor: default; opacity: .45; }

@media (max-width: 720px) {
    .ds-white-removal-dialog { padding: 8px; }
    .ds-white-removal-panel { width: 100%; height: 96vh; border-radius: 12px; }
    .ds-white-removal-toolbar { flex-wrap: wrap; padding: 10px 12px; }
    .ds-white-removal-toolbar input { width: 130px; }
    .ds-white-removal-color { flex: 1 0 100%; }
    .ds-white-removal-stage { padding: 10px; }
    .ds-white-removal-foot { align-items: flex-start; flex-direction: column; }
    .ds-white-removal-foot > div { width: 100%; }
    .ds-white-removal-foot button { flex: 1; }
}