/* =========================================================
   SMPS2 台紙レイアウト（修正安定版）
========================================================= */

/* =========================================================
   台紙全体（見開き2列レイアウト）
========================================================= */
.album-layout-preview {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1050px !important;
    margin: 20px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================================
   台紙wrapper（各面）
========================================================= */
.album-cell-wrapper {
    position: relative !important;
    flex: 1 1 0 !important;
    width: 45% !important;
    max-width: 480px !important;
    min-width: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   台紙本体（枠内に100%収める）
========================================================= */
.album-cell {
    position: relative !important;
    width: 100% !important;
    height: auto !important; /* height 100% を解除して aspect-ratio を優先 */
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* =========================================================
   中台紙（台紙本体に100%完全フィット）
========================================================= */
.nakadaishi-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    pointer-events: none !important;
    z-index: 1 !important;
    display: block !important;
}

/* =========================================================
   写真穴
========================================================= */
.photo-hole {
    position: absolute !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

/* =========================================================
   穴の中の画像
========================================================= */
.hole-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
}

/* =========================================================
   選択中の台紙（青い実線枠の外枠ハイライト）
========================================================= */
.album-cell.active,
.album-cell.is-selected {
    outline: 3px solid #2563eb !important;
    outline-offset: -3px !important;
}

/* PC overrides */

/* Mobile overrides */

/* =========================================================
   写真一覧
========================================================= */
#photo-list {
    position: relative;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
}

.layout-photo-wrapper {
    position: relative;
    display: inline-block;
    width: 100px;
    margin: 6px;
    text-align: center;
    z-index: 21;
    flex-shrink: 0;
    vertical-align: top;
}

.layout-photo-frame {
    width: 100px;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.layout-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: grab;
    position: relative;
    z-index: 22;
}

.layout-photo-caption {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   SMPS2 台紙レイアウト（完全安定・一括版）
========================================================= */

/* =========================================================
   台紙全体（見開き2列レイアウト・コンテナ）
========================================================= */
.album-layout-preview {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1050px !important;
    margin: 20px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================================
   台紙wrapper
========================================================= */
.album-cell-wrapper {
    position: relative !important;
    flex: 1 1 0 !important;
    width: 45% !important;
    max-width: 480px !important;
    min-width: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   台紙本体（親枠内に完全に収める）
========================================================= */
.album-cell {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important; /* height 100% を解除 */
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important; /* はみ出しカット */
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent;
    transition: background-color 0.3s;
}

/* =========================================================
   中台紙なし状態のスタイル
========================================================= */
.album-cell.nakadaishi-none-state,
.album-cell[data-nakadaishi="none"] {
    background-color: #f1f5f9 !important;
    border: 2px dashed #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

.album-cell.nakadaishi-none-state::before,
.album-cell[data-nakadaishi="none"]::before {
    content: "中台紙なし" !important;
    color: #64748b !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* =========================================================
   中台紙（台紙本体に100%完全フィット）
========================================================= */
.album-cell img.nakadaishi-bg,
.album-cell .nakadaishi-bg,
.nakadaishi-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* =========================================================
   写真穴＆回転ボタン
========================================================= */
.photo-hole {
    position: absolute !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    touch-action: manipulation;
}

.hole-img-wrapper {
    touch-action: none;
    pointer-events: auto;
}

.hole-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
}

.layout-rotate-btn {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 23;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

/* 選択中の台紙 */
.album-cell.active {
    outline: 3px solid #2563eb !important;
    outline-offset: -3px !important;
}

/* =========================================================
   写真一覧 & スマホのタッチ選択
========================================================= */
#photo-list {
    position: relative;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
}

.layout-photo-wrapper {
    position: relative;
    display: inline-block;
    width: 100px;
    margin: 6px;
    text-align: center;
    z-index: 21;
    flex-shrink: 0;
    vertical-align: top;
}

.layout-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    position: relative;
    z-index: 22;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.layout-photo.touch-selected {
    outline: 4px solid #007bff;
    outline-offset: 3px;
    border-radius: 6px;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
    transform: scale(0.96);
}

/* =========================================================
   中台紙選択ボタン
========================================================= */
#nakadaishi-select {
    width: 100%;
    margin: 20px 0;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
}

#open-nakadaishi {
    display: none !important;
}

/* =========================================================
   中台紙モーダル（画面中央フロート表示）
========================================================= */
#nakadaishi-modal {
    display: none;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90%;
    max-width: 650px;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    padding: 20px;
    border: 2px solid #333;
    border-radius: 10px;
    z-index: 99999 !important;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.nakadaishi-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.nakadaishi-list img,
.nakadaishi-list .nakadaishi-item {
    width: 150px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
    display: block;
    transition: border-color 0.2s, transform 0.15s;
}

.nakadaishi-list img:hover,
.nakadaishi-list .nakadaishi-item:hover {
    border-color: #f00;
}

/* 中台紙なしオプション（正方形 1:1 統一 & 中央揃え） */
.nakadaishi-none,
.middle-mat-option-none,
.mat-option-none,
.mat-item-none,
.no-mat-card {
    aspect-ratio: 1 / 1 !important;
    width: 150px;
    max-width: 100%;
    height: auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    border: 2px dashed #94a3b8;
    border-radius: 6px;
    background: #f8fafc;
    box-sizing: border-box !important;
    text-align: center;
    padding: 10px 6px;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    user-select: none;
}

.nakadaishi-none:hover,
.middle-mat-option-none:hover,
.mat-option-none:hover,
.mat-item-none:hover,
.no-mat-card:hover {
    border-color: #f00;
    background: #fff0f0;
}

.nakadaishi-none-icon {
    font-size: 26px;
    color: #64748b;
    line-height: 1;
    margin-bottom: 6px;
    font-weight: bold;
}

.nakadaishi-none:hover .nakadaishi-none-icon {
    color: #f00;
}

.nakadaishi-none-label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    line-height: 1.35;
}

.nakadaishi-none-label small {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: #64748b;
    margin-top: 2px;
}

/* =========================================================
   レスポンシブ設定 (PC・スマホ対応)
========================================================= */
@media screen and (min-width: 1025px) {
    .album-layout-preview {
        gap: 20px !important;
        max-width: 1200px !important;
        margin: 20px auto 0 !important;
    }
}

@media screen and (max-width: 1024px) {
    #album-layout-books-container,
    #album-layout-area-main,
    .smps2-layout-page {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .album-layout-preview {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px auto 0 !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .album-cell-wrapper {
        flex: 1 1 0 !important;
        width: calc(50% - 4px) !important;
        max-width: 480px !important;
        min-width: 0 !important;
        margin-bottom: 20px !important;
    }

    /* 3面以上ある場合の横スクロール対応（はみ出しても左端から快適にスクロール可能） */
    .album-layout-preview:has(.album-cell-wrapper:nth-child(3)) {
        justify-content: flex-start !important;
        padding: 0 10px 10px !important;
    }
    .album-layout-preview:has(.album-cell-wrapper:nth-child(3)) .album-cell-wrapper {
        flex: 0 0 160px !important;
        min-width: 160px !important;
    }

    #nakadaishi-modal {
        width: 94%;
        max-height: 90vh;
        padding: 15px;
    }

    .nakadaishi-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .nakadaishi-list img,
    .nakadaishi-list .nakadaishi-item,
    .nakadaishi-none {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    #open-nakadaishi {
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    .album-layout-preview {
        gap: 6px !important;
        padding: 0 2px !important;
    }

    .album-cell-wrapper {
        width: calc(50% - 3px) !important;
        margin-bottom: 15px !important;
    }

    /* ガイドオーバーレイの文字サイズ調整（スマホで潰れないよう調整） */
    .nakadaishi-guide-overlay {
        padding: 6px 4px !important;
        margin-bottom: 6px !important;
    }
    .nakadaishi-guide-overlay .guide-title {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }
    .nakadaishi-guide-overlay .guide-action {
        font-size: 10.5px !important;
        line-height: 1.2 !important;
    }
    .nakadaishi-guide-overlay .guide-icon {
        font-size: 14px !important;
    }
}

/* =========================================================
   【強制表示】アクティブ枠の描画設定
========================================================= */
.album-cell {
    position: relative !important;
}

/* active または is-selected クラスがついた時、一番手前に青い実線枠のみを描画する */
.album-cell.active::after,
.album-cell.is-selected::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 3px solid #2563eb !important; /* 青色実線枠 */
    box-shadow: none !important; /* インセット影による青い塗りつぶしを完全排除 */
    pointer-events: none !important; /* タップ操作をブロックしない */
    z-index: 9999 !important; /* 一番手前に外枠線のみ表示 */
    box-sizing: border-box !important;
}

/* =========================================================
   スマホでの画像ドラッグ・タップ移動を許可する設定
========================================================= */
/* 移動させる元画像（写真一覧など） */
.photo-item, 
.photo-list img, 
#photo-list img {
    touch-action: none !important; /* スマホでの画面スクロール割り込みを防止 */
    -webkit-user-drag: element !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* 受け取る台紙側のエリア */
.album-cell {
    pointer-events: auto !important;
}
.nakadaishi-bg {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

/* =========================================================
   六切りプリント枠（CDプラン用・コンパクト）
========================================================= */
#cd-print-area {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px auto 20px;
    max-width: 900px;
    box-sizing: border-box;
}

#cd-print-area .cd-print-title {
    font-size: 14px;
    font-weight: bold;
    color: #1e293b;
    margin: 0 0 4px 0;
}

#cd-print-area .cd-print-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

#cd-print-area .cd-print-slots-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cd-print-slot.photo-hole {
    position: relative !important;
    width: 100px;
    height: 100px;
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s, background-color 0.2s;
}

/* 七五三特典 六切プリント専用スロット (4:5 / 5:4) */
.bonus-photo-slot.photo-hole,
.bonus-photo-slot {
    position: relative !important;
    background: #ffffff !important;
    border: 2px dashed #94a3b8 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin: 0 auto 12px auto !important;
    transition: width 0.25s ease, height 0.25s ease, border-color 0.2s, background-color 0.2s !important;
}

.bonus-photo-slot.orientation-portrait,
.bonus-photo-slot:not(.orientation-landscape) {
    width: 160px !important;
    height: 200px !important;
    aspect-ratio: 4 / 5 !important;
}

.bonus-photo-slot.orientation-landscape {
    width: 210px !important;
    height: 168px !important;
    aspect-ratio: 5 / 4 !important;
}

.bonus-photo-slot:hover {
    border-color: #3b82f6 !important;
    background-color: #eff6ff !important;
}

.bonus-photo-slot.has-photo {
    border: 2px solid #3b82f6 !important;
    background-color: #ffffff !important;
}

.cd-print-slot:hover {
    border-color: #007bff;
    background-color: #f0f7ff;
}

.cd-print-slot.has-photo {
    border: 2px solid #007bff;
    background-color: #ffffff;
}

.cd-print-slot .slot-label {
    color: #888888;
    font-size: 12px;
    font-weight: 500;
    z-index: 1;
    pointer-events: none;
}


/* =========================================================
   写真クリアボタン (Clear Photo Button)
========================================================= */
.hole, .hole-box, .slot, .drop-area, .photo-frame, .cd-print-slot {
    position: relative;
}

.smps2-clear-photo-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
    font-size: 18px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    z-index: 100;
    display: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: background-color 0.2s, transform 0.1s;
}

.smps2-clear-photo-btn:hover {
    background-color: rgba(220, 53, 69, 0.9);
    transform: scale(1.1);
}

.smps2-clear-photo-btn:active {
    transform: scale(0.95);
}

/* 画像がある（.has-photoクラスが付与されている）場合のみホバーで表示 */
.hole.has-photo:hover .smps2-clear-photo-btn,
.photo-hole.has-photo:hover .smps2-clear-photo-btn,
.hole-box.has-photo:hover .smps2-clear-photo-btn,
.slot.has-photo:hover .smps2-clear-photo-btn,
.photo-slot.has-photo:hover .smps2-clear-photo-btn,
.drop-area.has-photo:hover .smps2-clear-photo-btn,
.photo-frame.has-photo:hover .smps2-clear-photo-btn,
.cd-print-slot.has-photo:hover .smps2-clear-photo-btn {
    display: block;
}

/* =========================================================
   未選択（初期状態）の中台紙エリア表示
========================================================= */
.album-cell:not([data-nakadaishi]),
.album-cell[data-nakadaishi=""] {
    border: 2px dashed #ccc !important;
    background-color: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.album-cell:not([data-nakadaishi])::before,
.album-cell[data-nakadaishi=""]::before {
    content: "中台紙をお選びください";
    color: #888;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    word-break: break-word;
    /* position: absolute; を削除し、flexの子要素として自然に中央配置・改行させる */
    z-index: 1;
    pointer-events: none;
}

/* 枠の下側にマージンを確保し、他の要素と被らないように調整 */
.album-cell-wrapper {
    margin-bottom: 30px !important;
}

/* srcが空の時のalt文字（ブラウザデフォルトのアイコン等）を完全に非表示にしてスペースを空ける */
.album-cell:not([data-nakadaishi]) img.nakadaishi-bg[src=""],
.album-cell[data-nakadaishi="none"] img.nakadaishi-bg[src=""],
.album-cell[data-nakadaishi=""] img.nakadaishi-bg[src=""] {
    display: none !important;
}

/* =========================================================
   初心者向け案内カード（不要化・非表示）
========================================================= */
.nakadaishi-guide-overlay {
    display: none !important;
    pointer-events: none !important;
}

/* =========================================================
   初心者向け全体手順ガイダンス
========================================================= */
.layout-step-guide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
    background: #f0f7ff !important;
    border: 1px solid #cce5ff !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    margin: 15px auto 25px !important;
    max-width: 900px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.layout-step-guide .step-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.layout-step-guide .step-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #007bff !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 12px !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.layout-step-guide .step-txt {
    display: inline !important;
    color: #2b2b2b !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.layout-step-guide .step-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #007bff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    user-select: none !important;
    margin: 0 4px !important;
}

/* =========================================================
   枠内写真の操作ツールバー (slot-controls)
========================================================= */
.slot-controls {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 40 !important;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 6px;
    padding: 3px 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    pointer-events: none !important; /* コンテナ自体の余白はドロップイベントを遮断しない */
}

.slot-controls .control-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none !important;
}

.slot-controls .btn-ctrl {
    background: #ffffff;
    color: #1e293b;
    border: none;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
    user-select: none;
    pointer-events: auto !important; /* 操作ボタン本体のみクリック可能 */
}

.slot-controls .btn-ctrl:hover {
    background: #e2e8f0;
    transform: scale(1.05);
}

.slot-controls .btn-ctrl:active {
    transform: scale(0.95);
}

.slot-controls .btn-zoom-in,
.slot-controls .btn-zoom-out {
    font-size: 14px;
}

.slot-controls .btn-rotate {
    font-size: 14px;
}

.slot-controls .btn-remove {
    background: #ff4d4f;
    color: #ffffff;
    font-size: 12px;
}

.slot-controls .btn-remove:hover {
    background: #d9363e;
}

/* ドラッグ中は操作ツールバーを完全非表示・透過にしてドロップを100%通す */
body.is-dragging .slot-controls,
.is-dragging .slot-controls {
    display: none !important;
    pointer-events: none !important;
}

/* 枠内画像のはみ出し防止と変形アニメーション */
.photo-hole,
.photo-slot,
.album-slot {
    position: absolute !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* 写真未配置時の穴の形状・枠プレビュー表示（透明・薄い白/グレーを維持し青く塗りつぶさない） */
.photo-hole:not(.has-photo),
.photo-slot:not(.has-photo),
.album-slot:not(.has-photo) {
    border: 2px dashed #94a3b8 !important;
    background: rgba(255, 255, 255, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.photo-hole:not(.has-photo):hover,
.photo-slot:not(.has-photo):hover,
.album-slot:not(.has-photo):hover {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: #64748b !important;
    transform: none !important;
}

.photo-hole:not(.has-photo)::after,
.photo-slot:not(.has-photo)::after,
.album-slot:not(.has-photo)::after {
    content: "写真を配置" !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-align: center !important;
    pointer-events: none !important;
    padding: 4px 8px !important;
    max-width: 85% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.photo-hole.has-photo,
.photo-slot.has-photo,
.album-slot.has-photo {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.photo-hole img.inserted-photo-hole,
.photo-hole .slotted-image {
    transition: transform 0.15s ease-out;
    transform-origin: center center;
    max-width: none;
    max-height: none;
    pointer-events: none !important;
}

/* =========================================================
   透明ドロップオーバーレイ方式（最前面で確実にドロップを捕捉）
========================================================= */
/* 親コンテナ（台紙セル）のみ relative */
.album-cell,
.layout-slot,
.cd-print-slot,
.bonus-photo-slot {
    position: relative !important;
}

/* ★ 中台紙のスロット枠（.photo-hole / .photo-slot）は必ず absolute で配置 */
.photo-hole,
.album-slot,
.photo-slot,
.album-cell .photo-hole,
.album-cell .photo-slot,
.album-cell .album-slot {
    position: absolute !important;
}

/* ドロップ受け付け用透明オーバーレイ（ボタンや画像より必ず前面） */
.drop-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 50 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    pointer-events: none; /* 通常時は操作ボタンを押せるよう none */
}

/* セル全体用オーバーレイ (z-index: 5) とスロット用オーバーレイ (z-index: 60) の優先度 */
.cell-drop-overlay {
    z-index: 5 !important;
}

.slot-drop-overlay {
    z-index: 60 !important;
}

/* ドラッグ中のみ pointer-events: auto で最前面オーバーレイが100%イベント捕捉 */
body.is-dragging .drop-overlay,
.is-dragging .drop-overlay {
    pointer-events: auto !important;
}

/* ドラッグオーバー時の視覚フィードバック（オーバーレイおよびスロット枠自身） */
.drop-overlay.dragover-target,
.drop-overlay.drop-target,
.photo-hole.dragover-target,
.album-slot.dragover-target,
.photo-slot.dragover-target {
    border: 3px solid #2563eb !important;
    background-color: rgba(37, 99, 235, 0.25) !important;
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.45) !important;
}

/* 中台紙モーダル用バックドロップ */
#nakadaishi-modal-backdrop {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(3px) !important;
    z-index: 99998 !important;
}

/* =========================================================
   【最終優先】モバイル・スマートフォン実機表示の完全フィット設定
========================================================= */
@media screen and (max-width: 768px) {
    /* ページ全体コンテナのはみ出し防止 */
    #album-layout-area,
    #album-layout-area-main,
    #album-layout-books-container,
    .smps2-layout-page {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
    }

    /* プレビュー領域：2面見開きが画面幅内に自動縮小して完全フィット */
    .album-layout-preview {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px auto 0 !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 各面ラッパー：固定幅(260px等)を撤廃し、画面幅に合わせて左右均等に収める */
    .album-cell-wrapper {
        flex: 1 1 0 !important;
        width: calc(50% - 3px) !important;
        max-width: 50% !important;
        min-width: 0 !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 台紙本体：aspect-ratio 1/1 を維持して正方形でレスポンシブ縮小 */
    .album-cell {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
    }

    /* 3面以上ある場合は1面の幅を確保しつつ横スクロールで快適操作 */
    .album-layout-preview:has(.album-cell-wrapper:nth-child(3)) {
        justify-content: flex-start !important;
        padding: 0 8px 10px !important;
    }
    .album-layout-preview:has(.album-cell-wrapper:nth-child(3)) .album-cell-wrapper {
        flex: 0 0 160px !important;
        max-width: 160px !important;
        min-width: 160px !important;
    }
}

/* =========================================================
   ボトム固定バー & 「確認へ進む」ボタン
========================================================= */
#smps2-total-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    color: #ffffff;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    z-index: 1000;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

#smps2-total {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

#smps2-go-confirm {
    padding: 12px 28px;
    background: #ff9900;
    color: #ffffff !important;
    border: none;
    font-size: 16px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.35);
    transition: all 0.2s ease;
    white-space: nowrap;
}

#smps2-go-confirm:hover:not(:disabled) {
    background: #e68a00;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 153, 0, 0.45);
}

#smps2-go-confirm:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.25);
}

#smps2-go-confirm:disabled {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.75;
    transform: none !important;
}