/**
* Custom Column - 子ブロック（カラム要素）専用
*/

/* ===========================
エディタ内の視覚的なガイド
=========================== */
.editor-styles-wrapper .refoma-col {
outline: 1px dashed #999;
padding: 8px;
}

/* プレーンモード時は枠線を薄く */
.editor-styles-wrapper .refoma-row[data-layout="plain"] .refoma-col {
outline-color: #f0f0f0;
}

/* 空のカラムに「+」ボタンを表示 */
.editor-styles-wrapper .refoma-col:empty {
display: flex;
align-items: center;
justify-content: center;
}

/* エディタ内でのみプレーン/カスタムモードの幅を広げる */
.editor-styles-wrapper .refoma-row[data-layout="plain"] .refoma-col,
.editor-styles-wrapper .refoma-row[data-layout="custom"] .refoma-col:not([data-pc-width-type]) {
    flex: 1;
}

/* ===========================
    基本スタイル
    =========================== */
.refoma-col {
min-width: 0;
flex: 1;
}

/* プレーンモード時はデフォルトで均等幅 */
.refoma-row[data-layout="plain"] .refoma-col {
    flex: 1;
}

.refoma-col figure {
    max-width: 100%;
}

.refoma-col img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* リサイズコンテナの幅を制限 */
.editor-styles-wrapper .refoma-col .components-resizable-box__container {
    max-width: 100% !important;
    width: 100% !important;
}

.editor-styles-wrapper .refoma-col .components-resizable-box__container img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* ===========================
    子ブロックの幅制御
    =========================== */
.refoma-col[data-pc-width-type="flex"] {
    flex: 1;
}

.refoma-col[data-pc-width-type="px"] {
    flex: 0 0 var(--pc-width);
}

.refoma-col[data-pc-width-type="percent"] {
    flex: 0 0 var(--pc-width);
}

/* ===========================
    レスポンシブ（SP）
    =========================== */
@media (max-width: 767px) {
    .refoma-col[data-sp-width-type="flex"] {
        flex: 1 !important;
    }

    .refoma-col[data-sp-width-type="px"] {
        flex: 0 0 var(--sp-width) !important;
    }

    .refoma-col[data-sp-width-type="percent"] {
        flex: 0 0 var(--sp-width) !important;
    }

    .refoma-col[data-sp-order="1"] { order: 1; }
    .refoma-col[data-sp-order="2"] { order: 2; }
    .refoma-col[data-sp-order="3"] { order: 3; }
    .refoma-col[data-sp-order="4"] { order: 4; }
    .refoma-col[data-sp-order="5"] { order: 5; }
    .refoma-col[data-sp-order="6"] { order: 6; }
}