/**
 * MADO POP Campaign Editor CSS — Provider管理画面の正本
 *
 * 対象: /mado-app/pop-campaign/ の編集・設定・プレビューUI。
 * 依存: public/css/mado-base.css の後に読み込む。
 * 非対象: 公開サイトのPOP。公開Runtime CSSは public/css/widget-runtime.css を使う。
 *
 * 保守ルール（2026-07-25）:
 * - 既存部品は、その部品の正本selectorをこのファイル内で直接修正する。
 * - 同じselectorをファイル末尾へ再定義しない。!importantで競合を押し切らない。
 * - PHP／JavaScriptへCSS文字列を追加せず、customer-pluginへ複製しない。
 * - 同名selectorの@media内再定義はレスポンシブ差分として扱う。
 * - 削除前に現行PHP・JavaScript・DOMと動的class生成を確認する。
 * - 修正後は構文、同一scope重複、実配信CSS、Minify cacheを確認する。
 *
 * CLEANUP NOTE（2026-07-25）:
 * - 2026-07-25時点の正本はこの1ファイル。旧版を末尾へ継ぎ足していない。
 * - 共通部品の基礎指定と状態差分（選択中・公開中）は別責任として定義する。
 * - 未使用変数と、公開ボタンへ汎用primary色を当ててから打ち消す経路を撤去済み。
 *
 * CONTENT BLOCK CSS CONTRACT / タイトル・テキスト・要素選択（2026-08-01）:
 * - 旧タイトル／テキスト背景editor、管理preview背景plate、文字ツールバー背景ミラーを撤去した。
 * - 新規の装飾背景は独立したSVG／図形レイヤーへ統合し、このCSSへ旧selectorを戻さない。
 * - タイトル／各テキスト／各画像／アイコン／POP背景は小型レイヤー一覧から選択する。
 * - 選択対象に応じて左側の正規設定だけを表示し、POP背景と画像設定を同時表示しない。
 * - 通常／分離プレビューは同じDOMと同じ選択状態を共有する。
 * - 背景画像は画像選択を主導線にし、image_url直接入力は詳細設定に残す。
 * - 背景画像の配置・回転・透明度は選択中image_layers要素へ同期する。
 * - 2026-08-02: 通常の左設定は1カラムを維持し、画像の配置を画像設定の最下部へ置く。
 *   左右2カラムは分離プレビューの小型パネルだけに適用し、通常設定へ共有しない。
 * - 管理previewの選択枠は公開Runtime CSSへ持ち込まない。
 * - 縦長POP選択時だけ編集プレビュー枠を通常より100px高くする。
 * - 上部カテゴリーボタンと一覧行は、多数のPOPを一度に確認できるよう約15%縦方向を圧縮する。
 * - 2026-08-16: kind=sns-iconの単体SNSリンクアイコンはブランド保護のためPOP背景編集をdisabled表示する。
 *   通常POP内へSNS素材を置くケースには適用せず、強い上書きや末尾への重複定義で押し切らない。
 * - 2026-08-16: SNSリンクアイコンのクリック動作ではアンケートをdisabled表示する。
 *   ページ内配置の概要ではsns-iconの実素材画像を安全余白込みで表示し、管理用カードへ置換しない。
 *
 * 色の正本:
 * - 共通色の実値はpublic/css/mado-base.cssの--mado-brand-accent系と
 *   --mado-selection-accent系を正本とする（2026-07-26）。
 * - このファイルの--mado-pop-primary系／--mado-pop-micro-accent系は
 *   POP用の別名として参照するだけで、同じ色値の別正本を作らない。
 * - テストのみ・未公開操作: 白背景＋グレー枠。公開前にオレンジを使わない。
 * - お客様が編集するPOP本体の配色へ、管理画面アクセントを流用しない。
 */

#mado-pop-campaign-page {
    --mado-pop-text: #111827;
    --mado-pop-primary: var(--mado-brand-accent, #06bfb5);
    --mado-pop-primary-dark: var(--mado-brand-accent, #06bfb5);
    --mado-pop-primary-soft: var(--mado-brand-accent-soft, #e6fbf9);
    --mado-pop-primary-ring: var(--mado-brand-accent-ring, rgba(6, 191, 181, 0.20));
    --mado-pop-micro-accent: var(--mado-selection-accent, #f47a14);
    --mado-pop-micro-accent-soft: var(--mado-selection-accent-soft, #fce7d9);
    --mado-pop-catalog-card-min-width: 152px;
    display: block;
    color: var(--mado-pop-text);
    --mado-pop-typo-section-size: 14px;
    --mado-pop-typo-section-weight: 600;
    --mado-pop-typo-help-size: 12px;
    --mado-pop-typo-help-weight: 400;
    --mado-pop-typo-muted: #475569;
    font-family: var(--ai-chat-font-family, "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.mado-portal-account-page .mado-portal-shell--action-pop-campaign .mado-portal-shell__content-frame.is-standard {
    width: 100%;
    max-width: var(--mado-portal-page-wide-max-width, 1240px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px));
    padding-right: var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px));
}

body.mado-portal-account-page .mado-portal-shell--action-pop-campaign .mado-portal-shell__content-frame.is-with-preview {
    margin-right: 0;
    padding-left: var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px));
    padding-right: var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px));
}

body.mado-portal-account-page .mado-portal-shell--action-pop-campaign .mado-portal-shell__content {
    overflow: visible;
}

body.mado-portal-account-page .mado-portal-shell--action-pop-campaign .mado-portal-shell__content-frame {
    overflow: visible;
}

#mado-pop-campaign-page .mado-pop-campaign-page__surface {
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    width: 100%;
    max-width: none;
    min-width: 0;
    gap: 14px;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#mado-pop-campaign-page .mado-pop-campaign-page__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

/* POP TOP MENU TOGGLE POSITION / 上部メニュー矢印（2026-08-17）
 * - 現行DOMの開閉入口はページ見出し行の .mado-pop-campaign-page__menu-toggle 1個だけを正本とする。
 * - チャット設定と同じく見出しと同じ行に置く。
 * - 開閉入口はこの1経路だけとし、第二toggle経路を追加しない。
 */
#mado-pop-campaign-page .mado-pop-campaign-page__hero-copy {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#mado-pop-campaign-page .mado-pop-campaign-page__title {
    position: relative;
    top: -6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin: 0;
}

#mado-pop-campaign-page .mado-pop-campaign-page__title-icon {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

#mado-pop-campaign-page .mado-pop-campaign-editor {
    display: block;
    /* 2026-08-17: チャット設定と同じ呼吸感に合わせ、左右カラムをまとめて4pxだけ下げる。 */
    margin-top: 4px;
}

#mado-pop-campaign-page .mado-pop-campaign-editor__layout {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(400px, min(48%, 560px)) minmax(430px, 1fr);
    gap: 18px;
    align-items: start;
    justify-content: stretch;
}

#mado-pop-campaign-page .mado-pop-campaign-editor__main,
#mado-pop-campaign-page .mado-pop-campaign-editor__preview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-campaign-editor__main {
    padding-bottom: 140px;
}

#mado-pop-campaign-page .mado-pop-campaign-editor__preview {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px);
    align-self: start;
    /* 2026-08-17: preview下の配置概要も通常ページ高さへ含める。stickyは維持し、高さだけ制限しない。 */
    max-height: none;
}

#mado-pop-campaign-page .mado-pop-section-shell {
    display: grid;
    gap: 14px;
    min-width: 0;
}


/* EASY CREATE ENTRY + WIZARD / かんたん作成（2026-09-04）
 * - mode=easyは同じProvider画面routeを使う新規作成wizard。第二REST/DB/Public Runtimeを持たない。
 * - Easy modeではPHPがNormal Editor DOM自体を出力しない。CSSでNormalを隠す旧経路へ戻さない。
 * - Easy固有DOMは.mado-pop-easy-*へ閉じ、保存成功時だけcanonical POPへ変換して通常編集へ渡す。
 */
#mado-pop-campaign-page .mado-pop-easy-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 52px;
    padding: 9px 16px;
    border: 1px solid color-mix(in srgb, var(--mado-pop-primary) 28%, #ffffff);
    border-radius: 14px;
    background: color-mix(in srgb, var(--mado-pop-primary-soft) 54%, #ffffff);
    color: #0f5f63;
    text-decoration: none;
    box-shadow: 0 7px 20px rgba(15, 118, 110, 0.05);
}
#mado-pop-campaign-page .mado-pop-easy-entry:hover,
#mado-pop-campaign-page .mado-pop-easy-entry:focus-visible {
    border-color: color-mix(in srgb, var(--mado-pop-primary) 48%, #ffffff);
    background: color-mix(in srgb, var(--mado-pop-primary-soft) 70%, #ffffff);
    color: #0f5f63;
}
#mado-pop-campaign-page .mado-pop-easy-entry__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--mado-pop-primary);
    font-size: 17px;
}
#mado-pop-campaign-page .mado-pop-easy-entry strong,
#mado-pop-campaign-page .mado-pop-easy-entry small { display: block; }
#mado-pop-campaign-page .mado-pop-easy-entry strong { font-size: 15px; font-weight: 900; }
#mado-pop-campaign-page .mado-pop-easy-entry small { margin-top: 1px; color: #527078; font-size: 12px; font-weight: 600; }
#mado-pop-campaign-page .mado-pop-easy-entry__arrow { font-size: 27px; line-height: 1; }

#mado-pop-campaign-page.is-easy-create-mode .mado-pop-campaign-page__surface { gap: 12px; }
#mado-pop-campaign-page .mado-pop-easy { display: grid; gap: 16px; min-width: 0; }
#mado-pop-campaign-page .mado-pop-easy [hidden] { display: none; }
#mado-pop-campaign-page .mado-pop-easy__head {
    display: flex;
    align-items: start;
    justify-content: flex-start;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid #d9e8ef;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fffe 0%, #f6fbff 100%);
}
#mado-pop-campaign-page .mado-pop-easy__head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
}
/* EASY STEP NAVIGATION SSOT / 2026-09-01:
 * 戻る／次へはSTEPカードとpreviewカードの共通上端中央に置く1組だけを正本とする。
 * headerや本文末尾へ第二navigationを戻さず、grid先頭行をPC/Tablet/Mobileで共用する。
 */
#mado-pop-campaign-page .mado-pop-easy__step-nav {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: -4px;
}
#mado-pop-campaign-page .mado-pop-easy__step-nav-back,
#mado-pop-campaign-page .mado-pop-easy__step-nav-next {
    min-width: 84px;
    min-height: 42px;
    padding: 9px 18px;
    font-size: 14px;
}
#mado-pop-campaign-page .mado-pop-easy__eyebrow { display: block; margin-bottom: 4px; color: #0f7776; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
#mado-pop-campaign-page .mado-pop-easy__heading { margin: 0; color: #0f172a; font-size: 20px; font-weight: 800; line-height: 1.4; }
#mado-pop-campaign-page .mado-pop-easy__lead { margin: 5px 0 0; color: #475569; font-size: 14px; line-height: 1.65; }
/* EASY TWO-COLUMN BALANCE / 2026-09-01:
 * STEP本文と作成中previewはPC幅で5:5。responsiveの1カラム化は既存980px境界を維持する。
 */
#mado-pop-campaign-page .mado-pop-easy__layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
#mado-pop-campaign-page .mado-pop-easy__steps,
#mado-pop-campaign-page .mado-pop-easy__preview {
    min-width: 0;
    border: 1px solid #d9e4ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}
#mado-pop-campaign-page .mado-pop-easy__steps { padding: 22px; }
#mado-pop-campaign-page .mado-pop-easy__step { display: grid; gap: 20px; min-height: 360px; align-content: start; }
#mado-pop-campaign-page .mado-pop-easy__step[hidden] { display: none; }
#mado-pop-campaign-page .mado-pop-easy__step-kicker { color: #0f7776; font-size: 12px; font-weight: 900; }
#mado-pop-campaign-page .mado-pop-easy__step h3 { margin: 0; color: #0f172a; font-size: 20px; font-weight: 600; line-height: 1.45; }
#mado-pop-campaign-page .mado-pop-easy__step p { margin: 0; color: #475569; font-size: 14px; line-height: 1.65; }
#mado-pop-campaign-page [data-mado-pop-easy-step="2"] > p,
#mado-pop-campaign-page [data-mado-pop-easy-step="3"] > p { font-size: 14px; }
#mado-pop-campaign-page .mado-pop-easy__field { display: grid; gap: 7px; color: #1e293b; font-size: 14px; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-easy__link-destination { display: grid; gap: 7px; padding-top: 2px; }
#mado-pop-campaign-page .mado-pop-easy__link-destination > p { font-size: 12px; }
#mado-pop-campaign-page .mado-pop-easy__field input,
#mado-pop-campaign-page .mado-pop-easy__field textarea,
#mado-pop-campaign-page .mado-pop-easy__field select,
#mado-pop-campaign-page .mado-pop-easy__period input,
#mado-pop-campaign-page .mado-pop-easy__size-fields input {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #8494a6;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
}
#mado-pop-campaign-page .mado-pop-easy__choice-grid { display: grid; gap: 10px; }
#mado-pop-campaign-page .mado-pop-easy__choice-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#mado-pop-campaign-page .mado-pop-easy__choice-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#mado-pop-campaign-page .mado-pop-easy__choice,
#mado-pop-campaign-page .mado-pop-easy__device {
    position: relative;
    display: block;
    cursor: pointer;
}
#mado-pop-campaign-page .mado-pop-easy__choice input,
#mado-pop-campaign-page .mado-pop-easy__device input { position: absolute; opacity: 0; pointer-events: none; }
#mado-pop-campaign-page .mado-pop-easy__choice > span,
#mado-pop-campaign-page .mado-pop-easy__device > span {
    display: grid;
    gap: 4px;
    min-height: 76px;
    place-content: center;
    padding: 12px;
    border: 1px solid #8494a6;
    border-radius: 13px;
    background: #ffffff;
    color: #334155;
    text-align: center;
}
#mado-pop-campaign-page .mado-pop-easy__choice small { color: #475569; font-size: 12px; font-weight: 600; }
#mado-pop-campaign-page .mado-pop-easy__choice input:checked + span,
#mado-pop-campaign-page .mado-pop-easy__device input:checked + span { border-color: var(--mado-pop-primary); background: var(--mado-pop-primary-soft); color: #0f6665; box-shadow: 0 0 0 2px var(--mado-pop-primary-ring); }
#mado-pop-campaign-page .mado-pop-easy__preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
#mado-pop-campaign-page .mado-pop-easy__preset-row button,
#mado-pop-campaign-page .mado-pop-easy__catalog-tabs button {
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid #8494a6;
    border-radius: 999px;
    background: #ffffff;
    color: #236477;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
#mado-pop-campaign-page .mado-pop-easy__preset-row button { font-size: 13px; }
#mado-pop-campaign-page .mado-pop-easy__catalog-tabs button.is-active { border-color: var(--mado-pop-primary); background: var(--mado-pop-primary-soft); color: #0f6665; }
#mado-pop-campaign-page .mado-pop-easy__size-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
#mado-pop-campaign-page .mado-pop-easy__size-fields label { display: grid; gap: 6px; color: #334155; font-size: 14px; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-easy__times { padding-bottom: 13px; color: #64748b; font-weight: 900; }
#mado-pop-campaign-page .mado-pop-easy__unit { display: flex; align-items: center; gap: 5px; color: #64748b; }

/* DEVICE SIZE DISCLOSURE / 2026-09-03
 * - Easyは共通サイズを初期値とし、必要な利用者だけ端末別サイズを展開する。
 * - 端末別サイズの編集カードはPC→タブレット→スマホを縦3段に並べ、狭い3列で入力欄とpx/×が重ならないようにする。
 * - Normal/Easyとも保存契約は既存device_layoutsのまま。レイアウト変更だけで第二保存経路を作らない。
 */
#mado-pop-campaign-page .mado-pop-size-guide,
#mado-pop-campaign-page .mado-pop-easy__device-size-details {
    border: 1px solid #dbe5ef;
    border-radius: 12px;
    background: #f8fbff;
}
#mado-pop-campaign-page .mado-pop-size-guide > summary,
#mado-pop-campaign-page .mado-pop-easy__device-size-details > summary {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin: 8px;
    padding: 6px 11px;
    border: 1px solid #cbd9e7;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
#mado-pop-campaign-page .mado-pop-size-guide > summary::-webkit-details-marker,
#mado-pop-campaign-page .mado-pop-easy__device-size-details > summary::-webkit-details-marker { display: none; }
#mado-pop-campaign-page .mado-pop-size-guide[open] > summary,
#mado-pop-campaign-page .mado-pop-easy__device-size-details[open] > summary {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    color: #0f6665;
}
#mado-pop-campaign-page .mado-pop-size-guide__body,
#mado-pop-campaign-page .mado-pop-easy__device-size-body {
    display: grid;
    gap: 12px;
    padding: 4px 14px 14px;
}
#mado-pop-campaign-page .mado-pop-size-guide__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#mado-pop-campaign-page .mado-pop-easy__device-size-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
#mado-pop-campaign-page .mado-pop-size-guide__grid > div,
#mado-pop-campaign-page .mado-pop-easy__device-size-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: #ffffff;
}
#mado-pop-campaign-page .mado-pop-size-guide__grid strong,
#mado-pop-campaign-page .mado-pop-size-guide__grid span,
#mado-pop-campaign-page .mado-pop-size-guide__grid small { display: block; }
#mado-pop-campaign-page .mado-pop-size-guide__grid strong { margin-bottom: 5px; color: #0f172a; font-size: 13px; font-weight: 900; }
#mado-pop-campaign-page .mado-pop-size-guide__grid span { color: #334155; font-size: 12px; font-weight: 800; line-height: 1.5; }
#mado-pop-campaign-page .mado-pop-size-guide__grid small { margin-top: 5px; color: #64748b; font-size: 11px; line-height: 1.55; }
#mado-pop-campaign-page .mado-pop-size-guide__note { color: #64748b; font-size: 11px; }
#mado-pop-campaign-page .mado-pop-easy__device-size-card[hidden] { display: none; }
#mado-pop-campaign-page .mado-pop-easy__device-size-card legend { padding: 0 4px; color: #0f172a; font-size: 13px; font-weight: 900; }
#mado-pop-campaign-page .mado-pop-easy__size-fields--device { gap: 7px; }
#mado-pop-campaign-page .mado-pop-size-guide--normal { margin-top: 10px; }
#mado-pop-campaign-page .mado-pop-easy__color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#mado-pop-campaign-page .mado-pop-easy__color-swatch { width: 44px; height: 44px; padding: 0; border: 1px solid #b8c8da; border-radius: 12px; background: var(--mado-pop-easy-swatch); cursor: pointer; }
#mado-pop-campaign-page .mado-pop-easy__color-swatch.is-selected { border-color: var(--mado-pop-primary); box-shadow: 0 0 0 3px var(--mado-pop-primary-ring); }
#mado-pop-campaign-page .mado-pop-easy__color-custom { display: flex; align-items: center; gap: 7px; color: #475569; font-size: 12px; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-easy__color-custom input { width: 52px; height: 42px; padding: 3px; border: 1px solid #b8c8da; border-radius: 10px; background: #fff; }

/* EASY BACKGROUND UI PARITY / 一般編集の背景部品へ見た目を統一（2026-09-04）
 * - Easy固有のbutton/color/angle/range CSSを持たず、mado-base + 一般編集のmado-ui部品を正本として再利用する。
 * - Easyの作成state/eventはdata-mado-pop-easy-*で独立し、Normalのdata-mado-pop-fieldへ接続しない。
 * - 画像tabはEasyの別STEPが正本のため追加しない。ここでは2列mode gridと幅だけをEasyの配置差分として持つ。
 */
#mado-pop-campaign-page .mado-pop-easy__background-ui {
    max-width: 520px;
}
#mado-pop-campaign-page .mado-pop-easy__background-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#mado-pop-campaign-page .mado-pop-easy__background-panel {
    width: 100%;
}
@media (max-width: 620px) {
    #mado-pop-campaign-page .mado-pop-easy__background-panel .mado-pop-campaign-field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* EASY OWN IMAGE UPLOAD / ログイン済みEasy手持ち画像（2026-09-01）
 * - MADO素材STEPの直前に独立STEPとして表示する。
 * - upload cardは既存.mado-pop-easy__materialの見た目を再利用し、第二カード部品を作らない。
 * - guestにはPHP側でDOM自体を出さない。公開Runtime CSSへ持ち込まない。
 */
#mado-pop-campaign-page .mado-pop-easy__own-images {
    display: grid;
    gap: 10px;
    margin: 4px 0 18px;
    padding: 14px;
    border: 1px solid #cbdbe4;
    border-radius: 14px;
    background: #f8fbfd;
}
#mado-pop-campaign-page .mado-pop-easy__own-images-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
#mado-pop-campaign-page .mado-pop-easy__own-images-head > span { flex: 0 0 auto; color: #526274; font-size: 11px; font-weight: 700; }
#mado-pop-campaign-page .mado-pop-easy__upload-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#mado-pop-campaign-page .mado-pop-easy__upload-grid:empty { display: none; }
#mado-pop-campaign-page .mado-pop-easy__upload-material { min-height: 112px; }
#mado-pop-campaign-page .mado-pop-easy__upload-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#mado-pop-campaign-page .mado-pop-easy__upload-status { margin: 0; color: #475569; font-size: 12px; font-weight: 700; }
#mado-pop-campaign-page .mado-pop-easy__upload-status[hidden] { display: none; }
#mado-pop-campaign-page .mado-pop-easy__upload-status[data-state="uploading"] { color: #0f6f75; }
#mado-pop-campaign-page .mado-pop-easy__upload-status[data-state="success"] { color: #166534; }
#mado-pop-campaign-page .mado-pop-easy__upload-status[data-state="warning"] { color: #9a6700; }
#mado-pop-campaign-page .mado-pop-easy__upload-status[data-state="error"] { color: #b42318; }
#mado-pop-campaign-page .mado-pop-easy__catalog-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
#mado-pop-campaign-page .mado-pop-easy__catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mado-pop-catalog-card-min-width), 1fr)); gap: 10px; max-height: 420px; overflow: auto; padding: 2px 4px 6px 2px; }
#mado-pop-campaign-page .mado-pop-easy__catalog-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
#mado-pop-campaign-page .mado-pop-easy__catalog-pagination > span { min-width: 120px; color: #475569; font-size: 12px; font-weight: 700; text-align: center; }
#mado-pop-campaign-page .mado-pop-easy__catalog-pagination .mado-ui-button { min-width: 72px; }
#mado-pop-campaign-page .mado-pop-easy__material { display: grid; gap: 6px; place-items: center; min-width: 0; min-height: 108px; padding: 9px 8px; border: 1px solid #8494a6; border-radius: 10px; background: #fff; color: #334155; font-size: 12px; line-height: 1.35; font-weight: 800; cursor: pointer; }
#mado-pop-campaign-page .mado-pop-easy__material[hidden] { display: none; }
#mado-pop-campaign-page .mado-pop-easy__material img { display: block; width: 64px; height: 64px; object-fit: contain; }
#mado-pop-campaign-page .mado-pop-easy__material > span { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
#mado-pop-campaign-page .mado-pop-easy__material.is-selected { border-color: var(--mado-pop-primary); background: var(--mado-pop-primary-soft); box-shadow: 0 0 0 2px var(--mado-pop-primary-ring); }
#mado-pop-campaign-page .mado-pop-easy__material.is-active-layer { outline: 1px solid rgba(15, 23, 42, .28); outline-offset: 2px; }
#mado-pop-campaign-page .mado-pop-easy__mini-editor,
#mado-pop-campaign-page .mado-pop-easy__text-editor { display: grid; gap: 20px; margin-top: 14px; padding: 14px; border: 1px solid #dbe5ec; border-radius: 14px; background: #fbfefe; }
#mado-pop-campaign-page .mado-pop-easy__mini-editor[hidden] { display: none; }
#mado-pop-campaign-page .mado-pop-easy__mini-editor-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 12px; color: #0f172a; font-size: 14px; }
#mado-pop-campaign-page .mado-pop-easy__mini-editor-head span { color: #475569; font-size: 13px; font-weight: 600; }
#mado-pop-campaign-page .mado-pop-easy__layer-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
#mado-pop-campaign-page .mado-pop-easy__layer-tabs[hidden] { display: none; }
#mado-pop-campaign-page .mado-pop-easy__layer-tab { min-height: 30px; padding: 5px 9px; border: 1px solid #8494a6; border-radius: 999px; background: #fff; color: #334155; font-size: 12px; font-weight: 800; cursor: pointer; }
#mado-pop-campaign-page .mado-pop-easy__layer-tab.is-active { border-color: var(--mado-pop-primary); background: var(--mado-pop-primary-soft); color: #0f6665; }
#mado-pop-campaign-page .mado-pop-easy__quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#mado-pop-campaign-page .mado-pop-easy__quick-control { display: grid; gap: 7px; color: #334155; font-size: 13px; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-easy__quick-control > span:first-child { display: flex; justify-content: space-between; gap: 8px; }
#mado-pop-campaign-page .mado-pop-easy__quick-control output { color: #0f7776; }
#mado-pop-campaign-page .mado-pop-easy__quick-control input[type="range"] { width: 100%; accent-color: var(--mado-pop-primary); }
#mado-pop-campaign-page .mado-pop-easy__quick-number { display: flex; align-items: center; gap: 5px; color: #64748b; font-weight: 700; }
#mado-pop-campaign-page .mado-pop-easy__svg-aspect-controls {
    display: grid;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #dbe5ec;
    border-radius: 11px;
    background: #ffffff;
}
#mado-pop-campaign-page .mado-pop-easy__svg-aspect-lock { display: inline-flex; align-items: center; gap: 8px; color: #334155; font-size: 13px; font-weight: 800; cursor: pointer; }
#mado-pop-campaign-page .mado-pop-easy__svg-aspect-lock input { width: 17px; height: 17px; margin: 0; accent-color: var(--mado-pop-primary); }
#mado-pop-campaign-page .mado-pop-easy__svg-axis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

#mado-pop-campaign-page .mado-pop-easy__quick-number input,
#mado-pop-campaign-page .mado-pop-easy__compact-field input[type="number"],
#mado-pop-campaign-page .mado-pop-easy__compact-field select { width: 100%; min-height: 36px; padding: 6px 9px; border: 1px solid #8494a6; border-radius: 9px; background: #fff; color: #0f172a; font: inherit; }
#mado-pop-campaign-page .mado-pop-easy__more { border-top: 1px solid #e4ebf1; padding-top: 10px; }
#mado-pop-campaign-page [data-mado-pop-easy-material-more] { margin-top: 20px; }
#mado-pop-campaign-page .mado-pop-easy__more summary { color: #0f6665; font-size: 14px; font-weight: 800; cursor: pointer; }
#mado-pop-campaign-page .mado-pop-easy__more-body { display: grid; gap: 10px; margin-top: 12px; }
#mado-pop-campaign-page .mado-pop-easy__more-body--text { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#mado-pop-campaign-page .mado-pop-easy__more-body--material { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#mado-pop-campaign-page .mado-pop-easy__more-body--material .mado-pop-easy__svg-colors { grid-column: 1 / -1; }
#mado-pop-campaign-page .mado-pop-easy__compact-field { display: grid; gap: 6px; color: #334155; font-size: 13px; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-easy__compact-field > span:last-child { display: flex; align-items: center; gap: 5px; color: #64748b; }
#mado-pop-campaign-page .mado-pop-easy__compact-field input[type="color"] { width: 100%; min-height: 36px; padding: 3px; border: 1px solid #8494a6; border-radius: 9px; background: #fff; }
#mado-pop-campaign-page .mado-pop-easy__more-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#mado-pop-campaign-page .mado-pop-easy__material-actions { margin-top: 30px; }
#mado-pop-campaign-page .mado-pop-easy__more-actions [data-mado-pop-easy-add-material].is-add-mode {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    color: #0f6665;
    box-shadow: 0 0 0 2px var(--mado-pop-primary-ring);
}
#mado-pop-campaign-page .mado-pop-easy__layer-guide { display: grid; gap: 10px; margin-top: 4px; width: 100%;
    max-width: 100%; padding: 14px; border: 1px solid #dbe5ec; border-radius: 14px; background: #fbfefe; }
#mado-pop-campaign-page .mado-pop-easy__layer-guide-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
#mado-pop-campaign-page .mado-pop-easy__layer-guide-head strong { color: #0f172a; font-size: 14px; }
#mado-pop-campaign-page .mado-pop-easy__layer-guide-head span { color: #475569; font-size: 12px; font-weight: 700; }
#mado-pop-campaign-page .mado-pop-easy__layer-guide-list { display: grid; gap: 7px; }
#mado-pop-campaign-page .mado-pop-easy__layer-guide-list .mado-pop-layer-menu__row { width: 100%; }
#mado-pop-campaign-page .mado-pop-easy__layer-guide-list .mado-pop-layer-menu__item { min-width: 0; }
/* LAYER ACTION CONTROL SSOT / 2026-09-03
 * - レイヤー行の ↑ / ↓ / 編集 / AI / 削除 は同じ28px角の操作部品を使う。
 * - 形状・寸法はこの1classだけを正本とし、各機能selectorへ同じwidth/height/radiusを複製しない。
 * - AIのグラデーションはmado-base.css .mado-ai-action、全layer actionの黒tooltipはmado-ui-icon-buttonを再利用する。native titleは使わない。
 */
#mado-pop-campaign-page .mado-pop-layer-menu__action {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 7px;
    line-height: 1;
    cursor: pointer;
}

/* LAYER VISIBILITY + IMAGE MODE / 2026-09-06
 * - 目玉は画像とPOP背景だけ。タイトル/テキストには出さない。
 * - 「枠/元」は画像レイヤー単位のfit/natural切替。naturalでも背景・他レイヤーを消さない。
 */
#mado-pop-campaign-page .mado-pop-layer-menu__visibility,
#mado-pop-campaign-page .mado-pop-layer-menu__display-mode {
    border: 1px solid #cbd9e7;
    background: #ffffff;
    color: #334155;
}
#mado-pop-campaign-page .mado-pop-layer-menu__visibility:hover,
#mado-pop-campaign-page .mado-pop-layer-menu__visibility:focus-visible,
#mado-pop-campaign-page .mado-pop-layer-menu__display-mode:hover,
#mado-pop-campaign-page .mado-pop-layer-menu__display-mode:focus-visible {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    color: #0f7776;
    outline: 0;
}
#mado-pop-campaign-page .mado-pop-layer-menu__visibility-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    pointer-events: none;
}
#mado-pop-campaign-page .mado-pop-layer-menu__visibility-slash {
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-45deg);
    opacity: 0;
    pointer-events: none;
}
#mado-pop-campaign-page .mado-pop-layer-menu__visibility.is-hidden .mado-pop-layer-menu__visibility-slash { opacity: 1; }
#mado-pop-campaign-page .mado-pop-layer-menu__display-mode {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}
#mado-pop-campaign-page .mado-pop-layer-menu__display-mode.is-natural {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    color: #0f7776;
}
#mado-pop-campaign-page .mado-pop-layer-menu__row.is-layer-hidden .mado-pop-layer-menu__item { opacity: 0.5; }

#mado-pop-campaign-page .mado-pop-layer-menu__edit {
    border: 1px solid #cbd9e4;
    background: #ffffff;
    color: #334155;
    font-size: 15px;
    font-weight: 800;
}
#mado-pop-campaign-page .mado-pop-layer-menu__edit-icon {
    display: block;
    pointer-events: none;
}
#mado-pop-campaign-page .mado-pop-layer-menu__edit:hover,
#mado-pop-campaign-page .mado-pop-layer-menu__edit:focus-visible { border-color: var(--mado-pop-primary); background: var(--mado-pop-primary-soft); color: #0f6665; }
#mado-pop-campaign-page .mado-pop-easy__svg-colors { display: grid; gap: 8px; padding: 10px; border: 1px solid #e0e7ee; border-radius: 10px; background: #fff; }
#mado-pop-campaign-page .mado-pop-easy__svg-colors[hidden] { display: none; }
#mado-pop-campaign-page .mado-pop-easy__svg-colors > strong { font-size: 13px; }
#mado-pop-campaign-page .mado-pop-easy__svg-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
#mado-pop-campaign-page .mado-pop-easy__svg-color { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 7px; border: 1px solid #e2e8f0; border-radius: 8px; color: #475569; font-size: 11px; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-easy__svg-color input { width: 34px; height: 30px; padding: 2px; border: 0; background: transparent; }
#mado-pop-campaign-page .mado-pop-easy__text-editor { margin-top: 0; gap: 14px; padding: 16px; background: #fff; }
#mado-pop-campaign-page .mado-pop-easy__text-editor textarea[data-mado-pop-easy-title] { min-height: 68px; resize: vertical; }
#mado-pop-campaign-page .mado-pop-campaign-field--text-content textarea.mado-pop-campaign-field__control { min-height: 76px; resize: vertical; line-height: 1.55; }
#mado-pop-campaign-page .mado-pop-easy__quick-grid--text { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#mado-pop-campaign-page .mado-pop-easy__period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#mado-pop-campaign-page .mado-pop-easy__period[hidden] { display: none; }
#mado-pop-campaign-page .mado-pop-easy__period label { display: grid; gap: 6px; color: #334155; font-size: 13px; font-weight: 800; }
#mado-pop-campaign-page input[type="date"],
#mado-pop-campaign-page input[type="datetime-local"] { cursor: pointer; }
#mado-pop-campaign-page .mado-pop-easy__summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; margin: 0; padding: 14px; border-radius: 12px; background: #f8fafc; font-size: 13px; }
#mado-pop-campaign-page .mado-pop-easy__summary dt { color: #64748b; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-easy__summary dd { margin: 0; color: #0f172a; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-easy__save { justify-self: center; min-width: 190px; min-height: 46px; }
#mado-pop-campaign-page .mado-pop-easy__status { min-height: 20px; font-weight: 700; }
/* 2026-09-04: motion再生案内は本文より目立ちすぎない1段軽い表示にする。 */
#mado-pop-campaign-page .mado-pop-easy__status--inline { font-size: 13px; font-weight: 600; line-height: 1.6; }
#mado-pop-campaign-page .mado-pop-easy__status[data-state="error"] { color: #b42318; }
#mado-pop-campaign-page .mado-pop-easy__status[data-state="success"] { color: #087f5b; }
#mado-pop-campaign-page .mado-pop-easy__status--inline[data-state="success"] { font-size: 15px; }
#mado-pop-campaign-page .mado-pop-easy__status[data-state="waiting"] { color: #8a5b00; }
#mado-pop-campaign-page .mado-pop-easy__preview { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px); padding: 16px; }
#mado-pop-campaign-page .mado-pop-easy__preview-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; color: #334155; font-size: 13px; }
#mado-pop-campaign-page .mado-pop-easy__preview-stage { display: grid; place-items: center; min-height: 430px; padding: 22px; overflow: auto; border: 1px solid #e1e8ef; border-radius: 14px; background-color: #f7fafc; background-image: linear-gradient(45deg, #edf2f7 25%, transparent 25%), linear-gradient(-45deg, #edf2f7 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #edf2f7 75%), linear-gradient(-45deg, transparent 75%, #edf2f7 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
#mado-pop-campaign-page .mado-pop-easy__preview-canvas { position: relative; display: grid; place-items: center; align-content: center; gap: 7px; min-width: 80px; min-height: 60px; overflow: hidden; border-radius: 8px; box-shadow: 0 7px 20px rgba(15, 23, 42, .14); transition: width .18s ease, height .18s ease, background .18s ease; }
#mado-pop-campaign-page .mado-pop-easy__preview-canvas.is-sns,
#mado-pop-campaign-page .mado-pop-easy__preview-canvas.is-background-hidden { box-shadow: none; }
#mado-pop-campaign-page .mado-pop-easy__preview-canvas.has-natural-image { overflow: visible; }
#mado-pop-campaign-page .mado-pop-easy__preview-images { position: absolute; inset: 0; z-index: auto; pointer-events: none; }
#mado-pop-campaign-page .mado-pop-easy__preview-image-layer { position: absolute; display: grid; place-items: center; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
#mado-pop-campaign-page .mado-pop-easy__preview-image-layer.is-dragging { cursor: grabbing; }
#mado-pop-campaign-page .mado-pop-easy__preview-image-layer img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
#mado-pop-campaign-page .mado-pop-easy__preview-canvas.is-sns .mado-pop-easy__preview-image-layer { width: min(70%, 100px); height: min(70%, 100px); }
#mado-pop-campaign-page .mado-pop-easy__preview-canvas > strong,
#mado-pop-campaign-page .mado-pop-easy__preview-canvas > span { position: relative; z-index: 20; max-width: 86%; color: #0f172a; text-align: center; white-space: pre-line; text-shadow: 0 1px 2px rgba(255,255,255,.75); cursor: grab; touch-action: none; user-select: none; }
#mado-pop-campaign-page .mado-pop-easy__preview-canvas > strong.is-dragging,
#mado-pop-campaign-page .mado-pop-easy__preview-canvas > span.is-dragging { cursor: grabbing; }
#mado-pop-campaign-page .mado-pop-easy__text-editor + .mado-pop-easy__text-editor { margin-top: 18px; }
#mado-pop-campaign-page .mado-pop-easy__text-editor .mado-pop-easy__field > span:first-child { font-size: 15px; }
#mado-pop-campaign-page .mado-pop-easy__placement-browser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px solid #dbe5ec; border-radius: 14px; background: #ffffff; }
#mado-pop-campaign-page .mado-pop-easy__placement-option { position: relative; display: block; cursor: pointer; }
#mado-pop-campaign-page .mado-pop-easy__placement-option input { position: absolute; opacity: 0; pointer-events: none; }
#mado-pop-campaign-page .mado-pop-easy__placement-option span { display: grid; place-content: center; min-height: 52px; padding: 10px; border: 1px solid #8494a6; border-radius: 12px; background: #ffffff; color: #334155; text-align: center; font-size: 14px; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-easy__placement-option input:checked + span { border-color: var(--mado-pop-primary); background: var(--mado-pop-primary-soft); color: #0f6665; box-shadow: 0 0 0 2px var(--mado-pop-primary-ring); }
#mado-pop-campaign-page .mado-pop-easy__placement-offsets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#mado-pop-campaign-page .mado-pop-easy__placement-note { margin-top: -4px; color: #475569; font-size: 13px; }
#mado-pop-campaign-page .mado-pop-easy__preview-stage.is-position-preview { place-items: stretch; }
#mado-pop-campaign-page .mado-pop-easy__preview-close { position: absolute; top: 8px; right: 8px; z-index: 30; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #d5dee7; border-radius: 999px; background: rgba(255,255,255,.92); color: #475569; font-size: 16px; font-weight: 900; line-height: 1; pointer-events: none; }
#mado-pop-campaign-page [data-mado-pop-easy-step="10"] { gap: 9px; }
#mado-pop-campaign-page [data-mado-pop-easy-step="10"] .mado-pop-easy__placement-browser { margin-top: 3px; }
#mado-pop-campaign-page .mado-pop-easy__secondary-text { margin-top: 30px; border: 1px solid #d6e1ea; border-radius: 14px; background: #fbfefe; }
#mado-pop-campaign-page .mado-pop-easy__secondary-text > summary { min-height: 48px; padding: 13px 15px; color: #0f6665; font-size: 15px; font-weight: 900; cursor: pointer; }
#mado-pop-campaign-page .mado-pop-easy__secondary-text > summary:focus-visible,
#mado-pop-campaign-page .mado-pop-easy__more > summary:focus-visible { outline: 3px solid #0f6665; outline-offset: 3px; border-radius: 8px; }
#mado-pop-campaign-page .mado-pop-easy__secondary-text-body { display: grid; gap: 16px; padding: 0 14px 14px; }
#mado-pop-campaign-page .mado-pop-easy__body-editors { display: grid; gap: 18px; }
#mado-pop-campaign-page .mado-pop-easy__text-editor--body { margin-top: 0; }
#mado-pop-campaign-page .mado-pop-easy__text-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#mado-pop-campaign-page .mado-pop-easy__text-editor-head strong { color: #0f172a; font-size: 15px; font-weight: 900; }
#mado-pop-campaign-page .mado-pop-easy__text-remove { min-height: 36px; padding: 6px 10px; border: 1px solid #c7d3df; border-radius: 9px; background: #ffffff; color: #b42318; font-size: 12px; font-weight: 900; cursor: pointer; }
#mado-pop-campaign-page .mado-pop-easy__body-add-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; color: #475569; font-size: 13px; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-easy__preview-bodies { display: contents; }
#mado-pop-campaign-page .mado-pop-easy__preview-body { position: relative; z-index: 20; max-width: 86%; color: #0f172a; text-align: center; white-space: pre-line; text-shadow: 0 1px 2px rgba(255,255,255,.75); cursor: grab; touch-action: none; user-select: none; }
#mado-pop-campaign-page .mado-pop-easy__preview-body.is-dragging { cursor: grabbing; }
#mado-pop-campaign-page .mado-pop-easy__choice input:focus-visible + span,
#mado-pop-campaign-page .mado-pop-easy__device input:focus-visible + span,
#mado-pop-campaign-page .mado-pop-easy__placement-option input:focus-visible + span { outline: 3px solid #0f6665; outline-offset: 3px; }
#mado-pop-campaign-page .mado-pop-easy__material:focus-visible,
#mado-pop-campaign-page .mado-pop-easy__color-swatch:focus-visible,
#mado-pop-campaign-page .mado-pop-easy__preset-row button:focus-visible,
#mado-pop-campaign-page .mado-pop-easy__catalog-tabs button:focus-visible,
#mado-pop-campaign-page .mado-pop-easy__text-remove:focus-visible { outline: 3px solid #0f6665; outline-offset: 3px; }
#mado-pop-campaign-page .mado-pop-easy .mado-ui-button--primary { color: #0f172a; }
@media (max-width: 980px) {
    #mado-pop-campaign-page .mado-pop-easy__layout { grid-template-columns: minmax(0, 1fr); }
    #mado-pop-campaign-page .mado-pop-easy__preview { position: static; }
    #mado-pop-campaign-page .mado-pop-easy__preview-stage { min-height: 320px; }
}
@media (max-width: 760px) {
    #mado-pop-campaign-page .mado-pop-easy__layer-guide { width: 100%; max-width: 100%; }
}
/* EASY MOBILE PLACEMENT GRID / かんたん作成のスマホ配置（2026-09-01）:
 * - 「左上／上中央／右上 … 左下／下中央／右下」の3×3の位置関係を端末幅で崩さない。
 * - スマホでも3列を維持し、見た目の列位置とposition_presetの意味を一致させる。
 */
@media (max-width: 620px) {
    #mado-pop-campaign-page .mado-pop-easy__head { display: grid; }
    #mado-pop-campaign-page .mado-pop-easy__head-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
    #mado-pop-campaign-page .mado-pop-easy__steps { padding: 16px; }
    #mado-pop-campaign-page .mado-pop-easy__choice-grid--two,
    #mado-pop-campaign-page .mado-pop-easy__choice-grid--three,
    #mado-pop-campaign-page .mado-pop-easy__period,
    #mado-pop-campaign-page .mado-pop-easy__placement-offsets { grid-template-columns: minmax(0, 1fr); }
    #mado-pop-campaign-page { --mado-pop-catalog-card-min-width: 104px; }
    #mado-pop-campaign-page .mado-pop-easy__catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #mado-pop-campaign-page .mado-pop-easy__upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #mado-pop-campaign-page .mado-pop-easy__own-images-head { align-items: stretch; flex-direction: column; gap: 5px; }
    #mado-pop-campaign-page .mado-pop-easy__placement-browser { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #mado-pop-campaign-page .mado-pop-size-guide__grid { grid-template-columns: minmax(0, 1fr); }
    #mado-pop-campaign-page .mado-pop-easy__size-fields,
    #mado-pop-campaign-page .mado-pop-easy__quick-grid,
    #mado-pop-campaign-page .mado-pop-easy__svg-axis-grid,
    #mado-pop-campaign-page .mado-pop-easy__quick-grid--text,
    #mado-pop-campaign-page .mado-pop-easy__more-body--material,
    #mado-pop-campaign-page .mado-pop-easy__more-body--text { grid-template-columns: minmax(0, 1fr); }
    #mado-pop-campaign-page .mado-pop-easy__svg-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #mado-pop-campaign-page .mado-pop-easy__times { display: none; }
}

#mado-pop-campaign-page .mado-pop-section-menu {
    position: relative;
    display: grid;
    gap: 0;
    min-width: 0;
}


#mado-pop-campaign-page .mado-pop-section-menu__toggle {
    appearance: none;
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 28px;
    min-height: 28px;
    padding: 3px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #334155;
    box-shadow: none;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-section-menu__toggle:hover {
    background: transparent;
    color: #0f172a;
}

#mado-pop-campaign-page .mado-pop-section-menu__toggle:focus-visible {
    background: transparent;
    color: #0f172a;
    outline: 0;
    box-shadow: none;
}

#mado-pop-campaign-page .mado-pop-section-menu__toggle-icon {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

#mado-pop-campaign-page .mado-pop-section-menu[data-menu-expanded="1"] .mado-pop-section-menu__toggle-icon {
    transform: rotate(225deg) translateY(-2px);
}

#mado-pop-campaign-page .mado-pop-section-menu__tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mado-editor-category-menu-gap, 7px);
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-section-menu__tab {
    width: 100%;
    min-width: 0;
}

/*
 * 上部カテゴリーボタンの見た目・高さ・ウェイト・hover・選択状態は
 * mado-base.css の3画面共通正本を使用する（2026-08-01）。
 * このファイルへページ別のborder / background / shadowを戻さない。
 */

#mado-pop-campaign-page .mado-pop-section-menu__tab-label {
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
}

#mado-pop-campaign-page .mado-pop-section-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
    margin-top: 20px;
}

/* SETTINGS PANEL STACK / 設定パネルの積み重ね（2026-07-26）:
 * - サイズと画面上の位置を同時に開いても、パネル自体は常に1カラムで上から積む。
 * - パネル内の入力欄だけを複数カラムにし、同時表示で幅が半減して崩れる旧経路を戻さない。
 */

#mado-pop-campaign-page .mado-pop-section-panel {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border: 1px solid #d9e4ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

#mado-pop-campaign-page .mado-pop-section-panel[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-section-panel__body {
    display: grid;
    gap: 16px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-section-panel__body[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-section-panel--samples > .mado-pop-section-panel__body {
    gap: 0;
}

#mado-pop-campaign-page .mado-pop-section-panel__heading-row {
    display: block;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-section-panel__title {
    width: 100%;
    min-width: 0;
    margin: 0;
}

#mado-pop-campaign-page .mado-pop-section-panel__heading-toggle {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-section-panel__heading-toggle:hover {
    color: #0f7776;
}

#mado-pop-campaign-page .mado-pop-section-panel__heading-toggle:focus-visible {
    border-radius: 8px;
    outline: 2px solid #129f9e;
    outline-offset: 4px;
}

#mado-pop-campaign-page .mado-pop-section-panel__heading-copy {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 10px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-section-panel__heading-label {
    flex: 0 0 auto;
}

#mado-pop-campaign-page .mado-pop-section-panel__heading-help {
    min-width: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

#mado-pop-campaign-page .mado-pop-section-panel__heading-action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
    color: #0f7776;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

#mado-pop-campaign-page .mado-pop-section-panel__heading-icon {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(225deg) translate(-1px, -1px);
}

#mado-pop-campaign-page .mado-pop-section-panel__heading-toggle[aria-expanded="false"] .mado-pop-section-panel__heading-icon {
    transform: rotate(45deg) translate(-1px, -1px);
}

/* IN-PLACE PANEL ACCORDION / 設定パネル内アコーディオン（2026-07-26）:
 * - 上部カテゴリーボタンはパネル全体の追加・除去を担当する。
 * - 見出しbuttonはパネルを残したまま本文だけを折りたたむ。
 * - 折りたたみ時の見出し本体は30px。POP一覧見出しの44pxより約32%短い。
 * - 旧selectSection()呼び出しでパネル全体を消す経路は使用しない。
 */
#mado-pop-campaign-page .mado-pop-section-panel.is-content-collapsed {
    gap: 0;
    padding: 9px 14px;
}

#mado-pop-campaign-page .mado-pop-section-panel.is-content-collapsed .mado-pop-section-panel__heading-toggle {
    min-height: 30px;
    padding: 0;
    border-bottom-color: transparent;
}

#mado-pop-campaign-page .mado-pop-section-panel.is-content-collapsed .mado-pop-section-panel__heading-label {
    font-size: 15px;
    line-height: 1.2;
}

#mado-pop-campaign-page .mado-pop-section-panel.is-content-collapsed .mado-pop-section-panel__heading-help {
    display: none;
}

#mado-pop-campaign-page .mado-pop-section-panel.is-content-collapsed .mado-pop-current-editing {
    gap: 4px;
    padding: 2px 7px;
    font-size: 10px;
    line-height: 1.2;
}

#mado-pop-campaign-page .mado-pop-section-menu:not([data-menu-expanded="1"]) .mado-pop-section-menu__tabs {
    display: none;
}

/* POP SIZE TWO-COLUMN CONTRACT / サイズ設定2カラム契約（2026-08-27）:
 * - PC幅でも4項目を詰め込まず、幅・高さ／角丸・影の2カラムを正本配置とする。
 * - 保存キー・入力値・公開Widgetのサイズ計算には触れない。
 */
#mado-pop-campaign-page .mado-pop-section-panel--pop-size .mado-pop-campaign-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#mado-pop-campaign-page .mado-pop-section-panel--color-image .mado-pop-style-mode-grid,
#mado-pop-campaign-page .mado-pop-section-panel--color-image .mado-pop-icon-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1180px) {
    #mado-pop-campaign-page .mado-pop-section-menu__tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    #mado-pop-campaign-page .mado-pop-create-panel__field--layouts {
        grid-column: 1 / -1;
    }

    #mado-pop-campaign-page .mado-pop-preview-device {
        width: 100%;
        justify-content: space-between;
    }

    #mado-pop-campaign-page .mado-pop-preview-device__tabs {
        flex: 1 1 auto;
    }

    #mado-pop-campaign-page .mado-pop-preview-device__tabs > button {
        flex: 1 1 auto;
    }

    #mado-pop-campaign-page .mado-pop-campaign-page__hero-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    #mado-pop-campaign-page .mado-pop-campaign-page__title {
        top: -6px;
    }

    #mado-pop-campaign-page .mado-pop-section-menu__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* POP MOBILE CATEGORY MENU / スマホ上部カテゴリーメニュー（2026-09-01）:
 * - スマホで設定ボタンが1列に長く並ばないよう、最小幅でも2列を維持する。
 * - DOM順・開閉経路は変えず、レスポンシブの列数だけを調整する。
 */
@media (max-width: 520px) {
    #mado-pop-campaign-page .mado-pop-section-menu__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#mado-pop-campaign-page .mado-pop-current-editing {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-self: start;
    max-width: 100%;
    padding: 4px 9px;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-current-editing__name {
    font-weight: 900;
}

#mado-pop-campaign-page .mado-pop-lazy-section {
    display: grid;
    gap: 12px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-lazy-section__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-lazy-section[data-has-summary="0"] .mado-pop-lazy-section__head {
    justify-content: flex-end;
}

#mado-pop-campaign-page .mado-pop-lazy-section__summary {
    min-width: 0;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
}

#mado-pop-campaign-page .mado-pop-lazy-section__status {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
}

#mado-pop-campaign-page .mado-pop-lazy-section[data-state="dirty"] .mado-pop-lazy-section__status {
    background: #fff7ed;
    color: #9a3412;
}

#mado-pop-campaign-page .mado-pop-lazy-section[data-state="error"] .mado-pop-lazy-section__status {
    background: #fee2e2;
    color: #991b1b;
}

#mado-pop-campaign-page .mado-pop-lazy-section__body:empty {
    display: none;
}

#mado-pop-campaign-page .mado-pop-lazy-section__message {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

#mado-pop-campaign-page .mado-pop-lazy-section__message[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-section-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

#mado-pop-campaign-page .mado-pop-help-chip__toggle::-webkit-details-marker {
    display: none;
}



#mado-pop-campaign-page .mado-pop-help-chip--inline {
    display: inline-flex;
}

#mado-pop-campaign-page .mado-pop-create-panel {
    overflow: hidden;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-create-panel__body {
    padding: 16px;
    border-top: 1px solid #e5edf5;
    background: #f8fafc;
}

#mado-pop-campaign-page .mado-pop-create-panel__body[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-create-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 12px;
    align-items: end;
}

#mado-pop-campaign-page .mado-pop-create-panel__field--sns{
    grid-column: 1 / -1;
}

#mado-pop-campaign-page .mado-pop-create-panel__submit {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 112px;
    min-height: 42px;
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary);
    color: #ffffff;
}


/* DEVICE CREATION / 新規作成の表示対象と端末設定（2026-08-04）:
 * - 「表示対象の端末」と端末別サイズを同じmado-pop-create-layouts外枠へまとめる。
 * - タブレット設定はselect 1つ。流用中の幅・高さは縦並びのまま非活性表示し、
 *   個別作成を選んだ場合だけ入力可能にする。
 * - 表示対象とレイアウト実体を分離する。PC・スマホは個別サイズ、タブレットは流用または個別作成。
 * - 新規作成画面だけのUI。作成後の既存「サイズ」設定へ同じDOMを複製しない。
 */
#mado-pop-campaign-page .mado-pop-create-panel__field--layouts {
    grid-column: 1 / -1;
}

#mado-pop-campaign-page .mado-pop-device-choice-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
}

#mado-pop-campaign-page .mado-pop-device-choice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin: 0;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-device-choice input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #06bfb5;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-device-choice span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

#mado-pop-campaign-page .mado-pop-device-choice input:focus-visible {
    outline: 2px solid rgba(6, 191, 181, 0.28);
    outline-offset: 2px;
}

#mado-pop-campaign-page .mado-pop-device-choice input:disabled,
#mado-pop-campaign-page .mado-pop-device-choice input:disabled + span {
    cursor: not-allowed;
    opacity: 0.42;
}

@media (max-width: 520px) {
    #mado-pop-campaign-page .mado-pop-device-choice-row {
        grid-template-columns: 1fr;
    }
}


#mado-pop-campaign-page .mado-pop-create-layouts {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #d8e4ef;
    border-radius: 11px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-create-layouts__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#mado-pop-campaign-page .mado-pop-create-layouts__title {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

#mado-pop-campaign-page .mado-pop-create-layouts__copy {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 12px;
    font-size: 12px;
}

#mado-pop-campaign-page .mado-pop-create-layouts__targets {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 72px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #f8fafc;
}

#mado-pop-campaign-page .mado-pop-create-layouts__targets > legend {
    padding: 0 5px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-create-layouts__targets .mado-pop-device-choice-row {
    min-height: 42px;
    align-items: center;
}

#mado-pop-campaign-page .mado-pop-create-layouts__targets .mado-pop-device-choice {
    align-self: center;
}

#mado-pop-campaign-page .mado-pop-create-layouts__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

#mado-pop-campaign-page .mado-pop-create-layout-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #f8fafc;
}

#mado-pop-campaign-page .mado-pop-create-layout-card[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-create-layout-card > legend {
    padding: 0 5px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-create-layout-card__select-field {
    min-width: 0;
    margin-bottom: 4px;
    padding-right: 4px;
}

#mado-pop-campaign-page select[data-mado-pop-create-tablet-layout] {
    min-height: 44px;
    padding-top: 9px;
    padding-right: 42px;
    padding-bottom: 9px;
    padding-left: 13px;
    background-position: right 15px center;
}

#mado-pop-campaign-page .mado-pop-create-layout-card__size {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#mado-pop-campaign-page .mado-pop-create-layout-card__size.is-disabled {
    opacity: 0.62;
}

#mado-pop-campaign-page .mado-pop-create-layout-card__size input:disabled {
    border-color: #d5dde7;
    background: #e9eef4;
    color: #64748b;
    cursor: not-allowed;
}

@media (max-width: 620px) {
    #mado-pop-campaign-page .mado-pop-create-layouts__head {
        display: grid;
    }

    #mado-pop-campaign-page .mado-pop-create-layouts__copy {
        justify-self: start;
    }
}


/* CREATE ASSET PICKER / 新規POPのMADO素材選択（2026-08-02）:
 * - 通常POPだけに表示し、既存の共通カタログmodalから最大12点を複数選択する。
 * - 選択結果は作成時に既存image_layersへ渡す。別アップロード・別保存経路は持たない。
 * - 選択順を背面→前面として見せ、作成後の調整は既存レイヤー・プレビューへ引き継ぐ。
 */
#mado-pop-campaign-page .mado-pop-create-panel__field--assets {
    grid-column: 1 / -1;
}

#mado-pop-campaign-page .mado-pop-create-assets {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 13px;
    border: 1px solid #d8e4ef;
    border-radius: 11px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-create-assets[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-create-assets__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

#mado-pop-campaign-page .mado-pop-create-assets__copy {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 9px;
    align-items: baseline;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-create-assets__status {
    margin: 0;
    color: #0f7776;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.55;
    text-align: right;
}

#mado-pop-campaign-page .mado-pop-create-assets__selection {
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-create-assets__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 8px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-create-assets__grid:empty {
    display: none;
}

#mado-pop-campaign-page .mado-pop-create-assets__item {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 26px;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 7px;
    border: 1px solid #d8e4ef;
    border-radius: 9px;
    background: #f8fafc;
}

#mado-pop-campaign-page .mado-pop-create-assets__image-wrap {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-create-assets__image {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

#mado-pop-campaign-page .mado-pop-create-assets__meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-create-assets__order {
    color: #0f7776;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
}

#mado-pop-campaign-page .mado-pop-create-assets__name {
    overflow: hidden;
    color: #0f172a;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-create-assets__remove {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #ffffff;
    color: #b42318;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-create-assets__remove:hover,
#mado-pop-campaign-page .mado-pop-create-assets__remove:focus-visible {
    border-color: #fca5a5;
    background: #fef2f2;
}

#mado-pop-campaign-page .mado-pop-catalog-selection-note,
#mado-pop-campaign-page .mado-pop-catalog-message {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #ecfeff;
    color: #0f7776;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

#mado-pop-campaign-page .mado-pop-catalog-selection-note[hidden],
#mado-pop-campaign-page .mado-pop-catalog-message[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-catalog-message[data-state="error"] {
    background: #fef2f2;
    color: #b42318;
}

@media (max-width: 520px) {
    #mado-pop-campaign-page .mado-pop-create-assets__head {
        align-items: stretch;
    }

    #mado-pop-campaign-page .mado-pop-create-assets__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

#mado-pop-campaign-page .mado-pop-create-sns {
    display: grid;
    gap: 9px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-create-sns[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-create-sns__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 124px);
    grid-auto-rows: 116px;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
}

#mado-pop-campaign-page .mado-pop-create-sns__option {
    appearance: none;
    display: grid;
    grid-template-rows: 56px minmax(34px, auto);
    gap: 8px;
    align-content: start;
    justify-items: center;
    box-sizing: border-box;
    width: 124px;
    height: 116px;
    padding: 10px;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    text-align: center;
}

#mado-pop-campaign-page .mado-pop-create-sns__option.is-selected {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.14);
}

#mado-pop-campaign-page .mado-pop-create-sns__image-wrap {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #e0f2fe;
}

#mado-pop-campaign-page .mado-pop-create-sns__image {
    display: block;
    width: 42px;
    height: 42px;
    max-width: 42px;
    max-height: 42px;
    object-fit: contain;
}

#mado-pop-campaign-page .mado-pop-create-sns__label {
    display: grid;
    place-items: center;
    min-width: 0;
    max-width: 100%;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: center;
}


#mado-pop-campaign-page .mado-pop-start-condition-settings {
    display: grid;
    min-width: 0;
}


#mado-pop-campaign-page .mado-pop-campaign-stack {
    display: grid;
}

#mado-pop-campaign-page .mado-pop-style-section {
    display: grid;
    gap: 12px;
}

#mado-pop-campaign-page .mado-pop-style-section + .mado-pop-style-section {
    margin-top: 18px;
}

/* SNS LINK ICON BACKGROUND LOCK / SNSリンクアイコン背景保護（2026-08-16）
 * - 通常プレビューの「色／見た目」は入口として残し、理由を見せた上で背景編集だけを停止する。
 * - fieldset.disabledが操作停止の正本。CSSは視覚上のグレーアウトだけを担当する。
 */
#mado-pop-campaign-page .mado-pop-sns-background-lock-note {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
}

#mado-pop-campaign-page .mado-pop-sns-background-lock-note[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-sns-background-lock-note__title {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

#mado-pop-campaign-page .mado-pop-sns-background-lock-note__text {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.65;
}

#mado-pop-campaign-page .mado-pop-sns-background-lock-controls {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

#mado-pop-campaign-page .mado-pop-sns-background-lock-controls.is-sns-icon-locked {
    opacity: 0.46;
    filter: grayscale(0.55);
}

#mado-pop-campaign-page .mado-pop-sns-background-lock-controls.is-sns-icon-locked,
#mado-pop-campaign-page .mado-pop-sns-background-lock-controls.is-sns-icon-locked * {
    cursor: not-allowed;
}

#mado-pop-campaign-page [data-mado-pop-element-detail][hidden],
#mado-pop-campaign-page [data-mado-pop-background-mode-grid][hidden],
#mado-pop-campaign-page [data-mado-pop-background-under-image][hidden] {
    display: none;
}


#mado-pop-campaign-page .mado-pop-body-blocks-editor {
    display: grid;
    gap: 16px;
}

#mado-pop-campaign-page .mado-pop-body-block-group {
    display: grid;
    gap: 12px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-body-block {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 18px 16px 14px;
    border: 1px solid #b7d8ca;
    border-radius: 12px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-body-block legend {
    padding: 0 7px;
    color: #0f172a;
    background: #ffffff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
}

#mado-pop-campaign-page .mado-pop-body-block-add {
    justify-self: center;
    margin-top: 12px;
}

#mado-pop-campaign-page .mado-pop-body-block-limit[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-body-block-limit {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

#mado-pop-campaign-page .mado-pop-style-section__title {
    margin: 0;
    color: #0f172a;
}

#mado-pop-campaign-page .mado-pop-style-section__help {
    display: none;
    margin: 0;
}

#mado-pop-campaign-page .mado-pop-icon-common-settings {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

#mado-pop-campaign-page .mado-pop-campaign-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#mado-pop-campaign-page .mado-pop-text-link-layout {
    display: grid;
    gap: 18px;
    min-width: 0;
    padding-top: 2px;
}

#mado-pop-campaign-page .mado-pop-text-group {
    min-width: 0;
    margin: 0;
    padding: 10px 14px 14px;
    border: 1px solid #d8e4ef;
    border-radius: 16px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-text-group__legend {
    max-width: calc(100% - 20px);
    margin-left: 2px;
    padding: 0 6px;
    color: #0f172a;
    background: #ffffff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
}

#mado-pop-campaign-page .mado-pop-text-group__legend--title {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 8px);
}

/* TEXT SETTINGS TWO-COLUMN CONTRACT / テキスト設定2カラム契約（2026-08-27）:
 * - PC幅から常時2カラムを正本配置とし、1080px前後で4項目が詰まる旧配置へ戻さない。
 * - タイトル／本文の入力欄は2カラム分を使う。
 * - タイトル文字色は2カラム幅を維持し、カラーコードを省略せず表示する。
 * - 画面全体のプレビュー配置や公開Widgetには影響させない。
 */
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field--text-content,
#mado-pop-campaign-page .mado-pop-text-group--title .mado-pop-campaign-field--text-color-wide {
    grid-column: span 2;
}

#mado-pop-campaign-page .mado-pop-text-group--body {
    display: grid;
    gap: 10px;
    margin-top: 2px;
    padding: 2px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#mado-pop-campaign-page .mado-pop-text-group--body .mado-pop-body-block-limit {
    text-align: center;
}

#mado-pop-campaign-page .mado-pop-text-group .mado-pop-font-weight-field,
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field--color:not(.mado-pop-campaign-field--text-color-wide) {
    grid-column: auto;
}

#mado-pop-campaign-page .mado-pop-placement-method {
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-placement-method__check {
    align-items: center;
    margin-left: 0;
    font-size: 13px;
    line-height: 1.45;
}

#mado-pop-campaign-page .mado-pop-placement-method__check input {
    margin-top: 0;
}


#mado-pop-campaign-page .mado-pop-placement-panel {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-placement-panel[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-browser__bar span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #cbd5e1;
}

#mado-pop-campaign-page .mado-pop-placement-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid #d7e2ef;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

#mado-pop-campaign-page .mado-pop-placement-option input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-placement-option:has(input:checked) {
    border-color: #06bfb5;
    background: #e6fbf9;
    color: #129f9e;
    box-shadow: 0 0 0 3px rgba(6, 191, 181, 0.14);
}

#mado-pop-campaign-page .mado-pop-placement-option:has(input:focus-visible) {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

#mado-pop-campaign-page .mado-pop-placement-offsets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

#mado-pop-campaign-page .mado-pop-placement-offsets [hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-offsets__note {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #eff6ff;
}

#mado-pop-campaign-page .mado-pop-campaign-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-campaign-field--wide {
    grid-column: 1 / -1;
}

#mado-pop-campaign-page .mado-pop-campaign-field__label {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

/* GENERIC FIELD UTILITIES / 数値単位・色入力（2026-08-01）:
 * - 旧テキスト背景editor専用classを他の文字設定へ流用しない。
 * - 本文の文字間・回転・位置・文字色で共有する純粋な入力レイアウト。
 */
#mado-pop-campaign-page .mado-pop-field-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-field-unit > b {
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-field-color {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

/*
 * POP MAIN COLOR PICKER COMPAT / POP旧専用picker互換（2026-08-27）
 * - POP main editorはまだmado-ui-color-controlへ完全移行していないため、
 *   shared comfortable tokenを参照してチャット設定と同寸法・同余白にする。
 * - 新しいpicker寸法をPOP側で別正本にしない。共通control移行完了時にこの互換selectorを削除する。
 */
#mado-pop-campaign-page .mado-pop-field-color > input[type="color"],
#mado-pop-campaign-page .mado-pop-campaign-color-control__picker,
#mado-pop-campaign-page .mado-pop-svg-color-panel__swatch-picker {
    width: var(--mado-ui-comfortable-color-picker-width, 42px);
    min-width: var(--mado-ui-comfortable-color-picker-width, 42px);
    height: var(--mado-ui-comfortable-color-picker-height, 38.4px);
    padding: var(--mado-ui-comfortable-color-picker-padding, 4px);
    border: 1px solid #cbd8e6;
    border-radius: var(--mado-portal-radius-sm, 8px);
    background: #ffffff;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-field-color > input[type="color"]::-webkit-color-swatch-wrapper,
#mado-pop-campaign-page .mado-pop-campaign-color-control__picker::-webkit-color-swatch-wrapper,
#mado-pop-campaign-page .mado-pop-svg-color-panel__swatch-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

#mado-pop-campaign-page .mado-pop-field-color > input[type="color"]::-webkit-color-swatch,
#mado-pop-campaign-page .mado-pop-campaign-color-control__picker::-webkit-color-swatch,
#mado-pop-campaign-page .mado-pop-svg-color-panel__swatch-picker::-webkit-color-swatch,
#mado-pop-campaign-page .mado-pop-field-color > input[type="color"]::-moz-color-swatch,
#mado-pop-campaign-page .mado-pop-campaign-color-control__picker::-moz-color-swatch,
#mado-pop-campaign-page .mado-pop-svg-color-panel__swatch-picker::-moz-color-swatch {
    border: 0;
    border-radius: 4px;
}

#mado-pop-campaign-page .mado-pop-campaign-field__control {
    width: 100%;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid #cbd8e6;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    line-height: 1.45;
}



#mado-pop-campaign-page .mado-pop-campaign-field__control:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    outline: none;
}

#mado-pop-campaign-page .mado-pop-campaign-field__control--textarea {
    min-height: 88px;
    resize: vertical;
}

#mado-pop-campaign-page .mado-pop-display-rules__textarea {
    min-height: 132px;
}

#mado-pop-campaign-page .mado-pop-click-action__panel {
    display: grid;
    gap: 14px;
}

#mado-pop-campaign-page .mado-pop-click-action__panel[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-survey-settings {
    gap: 16px;
}


#mado-pop-campaign-page .mado-pop-survey-repeat {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

#mado-pop-campaign-page .mado-pop-survey-repeat__legend {
    margin: 0 0 2px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
}

#mado-pop-campaign-page .mado-pop-survey-steps {
    display: grid;
    gap: 12px;
}

#mado-pop-campaign-page .mado-pop-survey-step {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-survey-step[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-survey-step__title {
    margin: 0;
    color: #0f172a;
}

#mado-pop-campaign-page .mado-pop-campaign-field__unit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

#mado-pop-campaign-page .mado-pop-campaign-field__unit {
    color: #334155;
}

#mado-pop-campaign-page .mado-pop-icon-size-field {
    grid-column: 1 / -1;
    padding: 12px 16px;
    border-radius: 999px;
    background: #f3fafb;
}

#mado-pop-campaign-page .mado-ui-range-control__slider {
    accent-color: var(--mado-ui-range-accent, #2dd4bf);
}

#mado-pop-campaign-page .mado-pop-campaign-color-control {
    display: grid;
    grid-template-columns: var(--mado-ui-comfortable-color-picker-width, 42px) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

#mado-pop-campaign-page .mado-pop-campaign-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    color: #0f172a;
    font-weight: 800;
    line-height: 1.6;
}

#mado-pop-campaign-page .mado-pop-campaign-check input {
    margin-top: 0;
}




/*
 * 下部のプレビュー／保存／公開配置はpublic/css/mado-base.cssの
 * .mado-editor-footer-*を唯一の視覚正本とする（2026-07-31）。
 */

#mado-pop-campaign-page .mado-pop-campaign-button:not(.mado-editor-footer-action) {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    max-width: 100%;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

#mado-pop-campaign-page .mado-pop-campaign-button--primary:not([data-mado-pop-publication-toggle]) {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary);
    color: #ffffff;
    box-shadow: 0 12px 24px var(--mado-pop-primary-ring);
}


#mado-pop-campaign-page .mado-pop-campaign-button--primary:not([data-mado-pop-publication-toggle]):hover,
#mado-pop-campaign-page .mado-pop-campaign-button--primary:not([data-mado-pop-publication-toggle]):focus-visible {
    border-color: var(--mado-pop-primary-dark);
    background: var(--mado-pop-primary-dark);
    color: #ffffff;
}

/*
 * 公開ボタンの未公開／公開中の色と右寄せは、mado-base.cssの
 * .mado-editor-footer-action--publishを正本とする（2026-07-31）。
 */

#mado-pop-campaign-page .mado-pop-campaign-button.is-disabled,
#mado-pop-campaign-page .mado-pop-campaign-button[aria-disabled="true"] {
    background: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
}

#mado-pop-campaign-page .mado-pop-campaign-button.is-disabled:hover,
#mado-pop-campaign-page .mado-pop-campaign-button.is-disabled:focus,
#mado-pop-campaign-page .mado-pop-campaign-button[aria-disabled="true"]:hover,
#mado-pop-campaign-page .mado-pop-campaign-button[aria-disabled="true"]:focus {
    background: #cbd5e1;
    color: #64748b;
}

#mado-pop-campaign-page .mado-pop-period-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 16px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-period-options__legend {
    flex: 1 0 100%;
    color: #0f172a;
}

#mado-pop-campaign-page .mado-pop-period-options__choice {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

#mado-pop-campaign-page .mado-pop-period-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}


#mado-pop-campaign-page .mado-pop-period-change-alert {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fff7ed;
    color: #9a3412;
}

#mado-pop-campaign-page .mado-pop-period-change-alert[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-period-change-alert__title,
#mado-pop-campaign-page .mado-pop-period-change-alert__body {
    margin: 0;
    line-height: 1.7;
}

#mado-pop-campaign-page .mado-pop-period-change-alert__title {
    font-size: 13px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-period-change-alert__body {
    font-size: 13px;
    font-weight: 500;
}

#mado-pop-campaign-page .mado-pop-option-card {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 0;
}

#mado-pop-campaign-page .mado-pop-option-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#mado-pop-campaign-page .mado-pop-option-card input:checked + .mado-pop-option-card__content {
    border-color: #38bdf8;
    background: #e0f2fe;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.14);
}

#mado-pop-campaign-page .mado-pop-option-card input:focus-visible + .mado-pop-option-card__content {
    outline: 2px solid rgba(56, 189, 248, 0.42);
    outline-offset: 2px;
}

#mado-pop-campaign-page .mado-pop-option-card input:disabled + .mado-pop-option-card__content {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.74;
}

#mado-pop-campaign-page .mado-pop-click-action__types .mado-pop-option-card input:disabled + .mado-pop-option-card__content .mado-pop-option-card__title {
    color: #94a3b8;
}

#mado-pop-campaign-page .mado-pop-option-card__title {
    color: #0f172a;
}




#mado-pop-campaign-page .mado-pop-schedule-panel {
    display: grid;
    gap: 13px;
    padding: 14px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-schedule-panel[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-start-condition-panel {
    display: grid;
    padding: 14px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-start-condition-panel[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-start-condition-panel--compact {
    gap: 10px;
}

#mado-pop-campaign-page .mado-pop-start-condition-panel__help,
#mado-pop-campaign-page .mado-pop-weekly-day-summary,
#mado-pop-campaign-page .mado-pop-monthly-day-summary{
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

#mado-pop-campaign-page .mado-pop-weekly-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
    gap: 8px;
}

#mado-pop-campaign-page .mado-pop-monthly-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 8px;
}

#mado-pop-campaign-page .mado-pop-weekly-day {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 38px;
    padding: 7px 8px;
    border: 1px solid #cbd8e6;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

#mado-pop-campaign-page .mado-pop-monthly-day {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 38px;
    padding: 7px 8px;
    border: 1px solid #cbd8e6;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}


#mado-pop-campaign-page .mado-pop-weekly-day:hover,
#mado-pop-campaign-page .mado-pop-weekly-day:focus,
#mado-pop-campaign-page .mado-pop-monthly-day:hover,
#mado-pop-campaign-page .mado-pop-monthly-day:focus {
    border-color: #38bdf8;
    background: #eff6ff;
    outline: none;
}

#mado-pop-campaign-page .mado-pop-weekly-day.is-selected,
#mado-pop-campaign-page .mado-pop-monthly-day.is-selected {
    border-color: #0ea5e9;
    background: #0ea5e9;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(56, 189, 248, 0.18);
}


#mado-pop-campaign-page .mado-pop-campaign-editor__save-status {
    min-height: 22px;
    color: #129f9e;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

#mado-pop-campaign-page .mado-pop-preview {
    position: static;
    top: auto;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 8px;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
}


/* ELEMENT LAYER MENU / POP要素の選択（2026-08-02）:
 * - 編集プレビュー右上の開閉メニューと、「色／見た目」先頭の常時表示一覧で同じ行部品を使う。
 * - title/body_blocks/image_layers/icon/backgroundの既存要素を選択する入口。
 * - 前後矢印はtitle/body/image共通のsettings_json.layer_orderだけを変更し、個別配列をレイヤー順として使わない。
 * - 左側一覧は案内と既存画像upload入口のミラーだけを持ち、別のレイヤー状態を作らない。
 */
#mado-pop-campaign-page .mado-pop-preview__stage-shell {
    position: relative;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-layer-menu {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-layer-workspace {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #d8e4ef;
    border-radius: 14px;
    background: #f8fbfd;
}

#mado-pop-campaign-page .mado-pop-layer-workspace__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-layer-workspace__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-layer-workspace__eyebrow {
    color: #0f7776;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}


#mado-pop-campaign-page .mado-pop-layer-workspace__list {
    max-height: 230px;
    padding-top: 2px;
}

#mado-pop-campaign-page .mado-pop-layer-menu__toggle {
    appearance: none;
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr) 8px;
    align-items: center;
    gap: 6px;
    min-width: 112px;
    max-width: 230px;
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid #cbd9e7;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-layer-menu__toggle:hover,
#mado-pop-campaign-page .mado-pop-layer-menu__toggle:focus-visible,
#mado-pop-campaign-page .mado-pop-layer-menu__toggle[aria-expanded="true"] {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    color: #0f7776;
    outline: 0;
    box-shadow: 0 0 0 2px var(--mado-pop-primary-ring);
}

#mado-pop-campaign-page .mado-pop-layer-menu__toggle-label {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

#mado-pop-campaign-page .mado-pop-layer-menu__toggle strong {
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-layer-menu__chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

#mado-pop-campaign-page .mado-pop-layer-menu__toggle[aria-expanded="true"] .mado-pop-layer-menu__chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

#mado-pop-campaign-page .mado-pop-layer-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: min(286px, calc(100vw - 32px));
    padding: 7px;
    border: 1px solid #cbd9e7;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
}

#mado-pop-campaign-page .mado-pop-layer-menu__panel[hidden] {
    display: none;
}


#mado-pop-campaign-page .mado-pop-layer-menu__list {
    display: grid;
    gap: 4px;
    max-height: 248px;
    overflow: auto;
}

#mado-pop-campaign-page .mado-pop-layer-menu__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    align-items: center;
    border-radius: 8px;
}

/* LAYER ROW SELECTION / 2026-09-03
 * - 選択色はラベルbuttonだけでなく操作群（↑/↓/編集/AI/削除）まで同じ1行へ適用する。
 * - selected stateはshared rendererがrowへ1回だけ付与し、Easy/Normalで第二判定を作らない。
 */
#mado-pop-campaign-page .mado-pop-layer-menu__row.is-selected {
    background: var(--mado-pop-primary-soft);
    box-shadow: inset 0 0 0 1px var(--mado-pop-primary);
}

#mado-pop-campaign-page .mado-pop-layer-menu__item {
    appearance: none;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-layer-menu__item:hover,
#mado-pop-campaign-page .mado-pop-layer-menu__item:focus-visible {
    border-color: #bfe8e5;
    background: #f0fdfa;
    outline: 0;
}

#mado-pop-campaign-page .mado-pop-layer-menu__item.is-selected {
    border-color: transparent;
    background: transparent;
    color: #0f7776;
}

#mado-pop-campaign-page .mado-pop-layer-menu__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #d8e4ef;
    border-radius: 7px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
}

#mado-pop-campaign-page .mado-pop-layer-menu__item-label {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-layer-menu__item-lock {
    font-size: 11px;
}
#mado-pop-campaign-page .mado-pop-layer-menu__item-lock--control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: #64748b;
}

#mado-pop-campaign-page .mado-pop-layer-menu__move-controls {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

#mado-pop-campaign-page .mado-pop-layer-menu__move {
    border: 1px solid #cbd9e7;
    background: #ffffff;
    color: #334155;
    font-size: 15px;
    font-weight: 900;
}

#mado-pop-campaign-page .mado-pop-layer-menu__move:hover,
#mado-pop-campaign-page .mado-pop-layer-menu__move:focus-visible {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    color: #0f7776;
    outline: 0;
}

#mado-pop-campaign-page .mado-pop-layer-menu__move:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

#mado-pop-campaign-page .mado-pop-layer-menu__motion {
    overflow: visible;
    border: 1px solid transparent;
    box-shadow: none;
}

#mado-pop-campaign-page .mado-pop-layer-menu__motion-icon {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    fill: currentColor;
    pointer-events: none;
}

/* SELECTED LAYER AI ATTENTION / 選択中レイヤーのAI入口案内
 * - CSS未設定の選択中レイヤーだけ、1秒周期の光で「ここからAI/CSS編集」と案内する。
 * - ボタン自体を拡大・移動させず、既存mado-ai-actionのgradient animationも上書きしない。
 * - CSS設定済みでは停止し、prefers-reduced-motionでは静的ringへ落とす。
 */
#mado-pop-campaign-page .mado-pop-layer-menu__motion-attention {
    position: absolute;
    inset: -4px;
    z-index: 0;
    border: 2px solid rgba(95, 187, 232, 0.72);
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
}

#mado-pop-campaign-page .mado-pop-layer-menu__motion.is-attention .mado-pop-layer-menu__motion-attention {
    animation: mado-pop-layer-motion-attention 1s ease-in-out infinite;
}

@keyframes mado-pop-layer-motion-attention {
    0%, 100% {
        opacity: 0.16;
        box-shadow: 0 0 0 0 rgba(95, 187, 232, 0.26);
        transform: scale(0.96);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 0 5px rgba(122, 101, 200, 0.16);
        transform: scale(1.06);
    }
}

#mado-pop-campaign-page .mado-pop-layer-menu__motion.has-motion {
    box-shadow: 0 0 0 2px rgba(89, 195, 232, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    #mado-pop-campaign-page .mado-pop-layer-menu__motion.is-attention .mado-pop-layer-menu__motion-attention {
        animation: none;
        opacity: 0.72;
        box-shadow: 0 0 0 3px rgba(95, 187, 232, 0.16);
        transform: none;
    }
}

/* PER-LAYER CSS UI / 2026-09-03
 * - AI gradient/keyframes are owned only by mado-base.css .mado-ai-action.
 * - The textarea is the actual per-layer CSS SSOT for both direct editing and AI generation.
 * - User-authored CSS is saved as settings_json.layer_css and is not converted to a second motion JSON.
 */
#mado-pop-campaign-page .mado-pop-motion-modal__dialog {
    /* 2026-09-04: CSS欄とAI結果を毎回大きくスクロールせず確認できるよう、motion modalだけ少し拡張する。 */
    width: min(760px, 100%);
    max-height: min(800px, calc(100vh - 32px));
}

#mado-pop-campaign-page .mado-pop-motion-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#mado-pop-campaign-page .mado-pop-motion-modal__target {
    margin: 5px 0 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

#mado-pop-campaign-page .mado-pop-motion-modal__x {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #ffffff;
    color: #475569;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-motion-modal__ai-section,
#mado-pop-campaign-page .mado-pop-motion-modal__code-section {
    display: grid;
    gap: 10px;
}

#mado-pop-campaign-page .mado-pop-motion-modal__code-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

#mado-pop-campaign-page .mado-pop-motion-modal__ai-row,
#mado-pop-campaign-page .mado-pop-motion-modal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#mado-pop-campaign-page .mado-pop-motion-modal__preview-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

#mado-pop-campaign-page .mado-pop-motion-modal__instruction::placeholder,
#mado-pop-campaign-page .mado-pop-motion-modal__css::placeholder {
    color: #94a3b8;
    opacity: 1;
}

#mado-pop-campaign-page .mado-pop-motion-modal__css {
    width: 100%;
    min-height: 240px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    tab-size: 2;
}

#mado-pop-campaign-page .mado-pop-motion-modal__code-help {
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

#mado-pop-campaign-page .mado-pop-motion-modal__code-help code {
    padding: 1px 4px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #334155;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#mado-pop-campaign-page .mado-pop-motion-modal__status {
    min-height: 20px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
}

#mado-pop-campaign-page .mado-pop-motion-modal__status[data-state="error"] {
    color: #b42318;
}

#mado-pop-campaign-page .mado-pop-motion-modal__status[data-state="ok"] {
    color: #0f766e;
}

#mado-pop-campaign-page .mado-pop-easy__motion-details {
    justify-self: start;
    margin: -4px 0 0;
}
#mado-pop-campaign-page .mado-pop-easy__motion-details > summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 11px;
    border: 1px solid #cbd9e7;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
#mado-pop-campaign-page .mado-pop-easy__motion-details > summary::-webkit-details-marker { display: none; }
#mado-pop-campaign-page .mado-pop-easy__motion-details[open] > summary {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    color: #0f6665;
}
#mado-pop-campaign-page .mado-pop-easy__motion-guide-note {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    line-height: 1.7;
}

/* EASY MOTION OUTSIDE-MODAL PREVIEW / 2026-09-03
 * - CSS編集modalを閉じた後も、選択中レイヤーの保存済みCSSを同じpreviewCss()で再生する入口。
 * - 第二preview rendererは作らず、ボタン基礎見た目はmado-ui-buttonを再利用する。
 */
#mado-pop-campaign-page .mado-pop-easy__motion-preview-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

#mado-pop-campaign-page .mado-pop-easy__motion-preview-row [hidden] {
    display: none;
}

/* NORMAL EDITOR CSS RESTORATION / 一般編集CSS復旧（2026-09-03）
 * - per-layer CSS編集UIへの移行時に、Normal Editorの既存preview/選択中POP/作成済み一覧等の
 *   視覚CSSが連続ブロックで欠落していたため、直前のProvider正本から同一selector群を復旧する。
 * - Easy専用CSSや公開Widget CSSへ複製しない。公開側正本はwidget-runtime.cssのまま。
 * - 新しい上書き経路ではなく、欠落した既存Normal Editor selector群を元の責任へ戻す修正。
 * - 削除条件: Normal Editor DOM自体を別正本へ正式移行し、caller/selector残存0を確認した場合のみ。
 */
#mado-pop-campaign-page .mado-pop-preview-zoom {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    width: auto;
    min-width: 0;
    color: #334155;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-preview-zoom__label {
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-preview-zoom__select {
    flex: 0 0 112px;
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    min-height: 32px;
    padding: 4px 28px 4px 10px;
    border: 1px solid #cbd8e6;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
}



#mado-pop-campaign-page .mado-pop-preview__split {
    display: grid;
    grid-template-rows: auto auto;
    gap: 10px;
    min-height: 0;
    overflow: visible;
}

#mado-pop-campaign-page .mado-pop-preview__panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 7px;
    min-height: 0;
    padding: 9px 10px 10px;
    border: 1px solid #d7e3ee;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

#mado-pop-campaign-page .mado-pop-preview__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-preview__panel-title {
    flex: 0 0 auto;
    margin: 0;
    /* 「プレビュー」「ページ内配置の概要」は共通compact見出しより1px小さくする。 */
    font-size: calc(var(--mado-portal-section-heading-compact-size, 16px) - 1px);
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-preview__panel-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}


/* RESPONSIVE PREVIEW SWITCH / 通常・分離共通の端末切替（2026-08-01）:
 * - 通常プレビューと分離プレビューは同じJS状態と同じpreview DOMを使う。
 * - 代表サイズは確認用で、サイズごとの別保存経路は作らない。
 */
#mado-pop-campaign-page .mado-pop-preview-device {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-preview-device__tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid #cbd9e7;
    border-radius: 999px;
    background: #f8fafc;
}

#mado-pop-campaign-page .mado-pop-preview-device__tabs > button {
    appearance: none;
    min-height: 28px;
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-preview-device__tabs > button.is-selected,
#mado-pop-campaign-page .mado-pop-preview-device__tabs > button[aria-selected="true"] {
    background: #06bfb5;
    color: #ffffff;
    box-shadow: 0 2px 7px rgba(6, 191, 181, 0.2);
}

#mado-pop-campaign-page .mado-pop-preview-device__tabs > button:focus-visible {
    outline: 2px solid rgba(6, 191, 181, 0.28);
    outline-offset: 1px;
}

#mado-pop-campaign-page .mado-pop-preview-device__size {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

#mado-pop-campaign-page .mado-pop-preview-device__size select {
    width: 108px;
    min-height: 32px;
    height: 32px;
    padding: 3px 24px 3px 8px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
}

#mado-pop-campaign-page .mado-pop-preview-device__empty {
    margin: 0 0 7px;
    padding: 10px 12px;
    border: 1px dashed #94a3b8;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

#mado-pop-campaign-page .mado-pop-preview-device__empty[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-site[data-preview-device="tablet"],
#mado-pop-campaign-page .mado-pop-preview-site[data-preview-device="mobile"] {
    overflow: hidden;
    border: 1px solid #cbd9e7;
    border-radius: 14px;
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.09);
}

/* EDITOR PREVIEW HEADER / 右プレビュー操作列（2026-08-28）:
 * - 通常プレビュー上部では「ドラッグ移動」と選択中POP名を表示しない。
 *   選択中POP名は他の正規表示箇所を使い、このheaderへ第二表示を戻さない。
 * - 端末切替・分離・表示倍率だけを正規操作として並べ、幅が足りない時だけ自然に2段へ折り返す。
 * - 同じpanel DOMを分離プレビューへ移動して使う既存契約と保存stateは変更しない。
 */
#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview__panel-tools {
    flex: 1 1 100%;
    flex-wrap: wrap;
    width: 100%;
    row-gap: 6px;
}

#mado-pop-campaign-page .mado-pop-preview__large-open {
    appearance: none;
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid #06bfb5;
    border-radius: 999px;
    background: #ffffff;
    color: #0f7776;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-preview__large-open:hover,
#mado-pop-campaign-page .mado-pop-preview__large-open:focus-visible {
    background: #e6fbf9;
    outline: 0;
}

#mado-pop-campaign-page .mado-pop-preview__large-open:focus-visible {
    box-shadow: 0 0 0 3px rgba(6, 191, 181, 0.16);
}

/* NORMAL MOTION REPLAY CONTROL / 一般編集プレビュー直下の再生入口（2026-09-04）:
 * - 右preview下は「再生」1入口。個別/全体の2操作は開いた時だけ表示する。
 * - 左レイヤーworkspaceは既存section DOMを使い、ここへ第二layer listを作らない。
 */
#mado-pop-campaign-page .mado-pop-preview__motion-control {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 100%;
    padding-top: 2px;
}

#mado-pop-campaign-page .mado-pop-preview__motion-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid #06bfb5;
    border-radius: 999px;
    background: #ffffff;
    color: #0f7776;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-preview__motion-toggle:hover,
#mado-pop-campaign-page .mado-pop-preview__motion-toggle:focus-visible,
#mado-pop-campaign-page .mado-pop-preview__motion-control.is-open .mado-pop-preview__motion-toggle {
    background: #e6fbf9;
    outline: 0;
}

#mado-pop-campaign-page .mado-pop-preview__motion-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(6, 191, 181, 0.16);
}

#mado-pop-campaign-page .mado-pop-preview__motion-toggle-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--mado-pop-primary-soft);
    color: var(--mado-pop-primary);
    font-size: 10px;
    line-height: 1;
}

#mado-pop-campaign-page .mado-pop-preview__motion-toggle-summary {
    padding-left: 8px;
    border-left: 1px solid #cbd5e1;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

#mado-pop-campaign-page .mado-pop-preview__motion-menu {
    display: grid;
    gap: 10px;
    width: min(100%, 500px);
    padding: 12px;
    border: 1px solid #cfe4e3;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.11);
}

#mado-pop-campaign-page .mado-pop-preview__motion-menu[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview__motion-menu-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

#mado-pop-campaign-page .mado-pop-preview__motion-menu-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #0f7776;
    font-size: 11px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-preview__motion-menu-current {
    display: block;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-preview__motion-menu-count {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-preview__motion-menu-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#mado-pop-campaign-page .mado-pop-preview__motion-replay {
    appearance: none;
    display: grid;
    gap: 3px;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid #9ededa;
    border-radius: 11px;
    background: #ffffff;
    color: #0f7776;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-preview__motion-replay > span {
    font-size: 12px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-preview__motion-replay > small {
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}

#mado-pop-campaign-page .mado-pop-preview__motion-replay:hover:not(:disabled),
#mado-pop-campaign-page .mado-pop-preview__motion-replay:focus-visible:not(:disabled) {
    background: #e6fbf9;
    outline: 0;
}

#mado-pop-campaign-page .mado-pop-preview__motion-replay:focus-visible:not(:disabled) {
    box-shadow: 0 0 0 3px rgba(6, 191, 181, 0.16);
}

#mado-pop-campaign-page .mado-pop-preview__motion-replay:disabled {
    border-color: #dbe5ef;
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

#mado-pop-campaign-page .mado-pop-preview__motion-status {
    min-height: 1.4em;
    margin: 0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

#mado-pop-campaign-page .mado-pop-layer-workspace.is-motion-revealed {
    animation: mado-pop-motion-workspace-reveal 1.05s ease-out;
}

@keyframes mado-pop-motion-workspace-reveal {
    0% { box-shadow: 0 0 0 0 rgba(6, 191, 181, 0); }
    35% { box-shadow: 0 0 0 4px rgba(6, 191, 181, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(6, 191, 181, 0); }
}

@media (max-width: 720px) {
    #mado-pop-campaign-page .mado-pop-preview__motion-control {
        justify-items: stretch;
    }

    #mado-pop-campaign-page .mado-pop-preview__motion-toggle {
        justify-content: center;
        width: 100%;
    }

    #mado-pop-campaign-page .mado-pop-preview__motion-menu {
        width: 100%;
    }

    #mado-pop-campaign-page .mado-pop-preview__motion-menu-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

#mado-pop-campaign-page .mado-pop-preview__panel-body {
    display: grid;
    min-height: 0;
}

#mado-pop-campaign-page .mado-pop-preview__panel-body--editor {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
}

/* SURVEY PREVIEW GUIDE / アンケート説明（2026-08-17）
 * - アンケート選択時も長い説明本文を常時展開しない。
 * - native details/summary 1経路で、見出し1行＋矢印から必要時だけ開く。
 * - 保存値・アンケートpreview・公開Runtimeには影響させない。
 */
#mado-pop-campaign-page .mado-pop-preview__survey-guide {
    margin: 0;
    border: 1px solid #cbdff2;
    border-radius: 10px;
    background: #f4f9ff;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    overflow: clip;
}

#mado-pop-campaign-page .mado-pop-preview__survey-guide[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview__survey-guide-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    padding: 7px 10px;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

#mado-pop-campaign-page .mado-pop-preview__survey-guide-toggle::-webkit-details-marker {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview__survey-guide-toggle:focus-visible {
    outline: 2px solid rgba(18, 159, 158, 0.35);
    outline-offset: -2px;
}

#mado-pop-campaign-page .mado-pop-preview__survey-guide-chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg) translateY(-2px);
    transform-origin: center;
    transition: transform 0.16s ease;
}

#mado-pop-campaign-page .mado-pop-preview__survey-guide[open] .mado-pop-preview__survey-guide-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

#mado-pop-campaign-page .mado-pop-preview__survey-guide-body {
    margin: 0;
    padding: 0 10px 9px;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}

#mado-pop-campaign-page .mado-pop-preview__stage {
    overflow: auto;
    min-height: clamp(240px, 32vh, 360px);
    height: 100%;
    border: 1px solid #d7e3ee;
    border-radius: 14px;
    background: #f1f5f9;
    /* 2026-09-01: 1本指のpanは維持し、ブラウザ自身のpinchではなくEditorの共通zoomへ2本指を渡す。 */
    touch-action: pan-x pan-y;
}

#mado-pop-campaign-page .mado-pop-preview__stage.is-pinching {
    cursor: zoom-in;
}

#mado-pop-campaign-page .mado-pop-preview__stage.is-pan-ready {
    cursor: grab;
}

#mado-pop-campaign-page .mado-pop-preview__stage.is-panning {
    cursor: grabbing;
}

#mado-pop-campaign-page .mado-pop-preview__stage.is-pan-ready .mado-pop-preview-item {
    cursor: grab;
}

#mado-pop-campaign-page .mado-pop-preview__stage.is-panning .mado-pop-preview-item {
    cursor: grabbing;
}

#mado-pop-campaign-page .mado-pop-preview__viewport {
    position: relative;
    min-width: 1px;
    min-height: 1px;
    margin: 0;
}

#mado-pop-campaign-page .mado-pop-preview-site {
    position: relative;
    width: 1440px;
    height: 900px;
    margin: 0;
    overflow: hidden;
    isolation: isolate;
    background:
        #d8d6df
        url("../images/pop-preview/Back.svg")
        center top / 100% 100%
        no-repeat;
    transform-origin: top left;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample {
    position: absolute;
    inset: 0;
    z-index: 1;
    color: #0f2346;
    pointer-events: none;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-hero {
    position: absolute;
    top: 184px;
    left: 72px;
    display: grid;
    gap: 14px;
    width: min(610px, calc(100% - 144px));
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-kicker {
    color: #0b6f83;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-title {
    margin: 0;
    color: #09234f;
    font-size: 56px;
    font-weight: 900;
    line-height: 1.14;
    letter-spacing: -0.035em;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-lead {
    width: min(530px, 100%);
    margin: 0;
    color: #334b6b;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.85;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 138px;
    min-height: 46px;
    padding: 9px 20px;
    border: 1px solid rgba(9, 35, 79, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #09234f;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    box-shadow: 0 10px 24px rgba(15, 35, 70, 0.08);
    backdrop-filter: blur(8px);
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-button--primary {
    border-color: #09234f;
    background: #09234f;
    color: #ffffff;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-updates {
    position: absolute;
    right: 64px;
    bottom: 38px;
    left: 64px;
    display: grid;
    gap: 16px;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-updates-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-updates-head span {
    color: #8a176f;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-updates-head strong {
    color: #3e205a;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.35;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 126px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 14px 32px rgba(74, 33, 83, 0.10);
    backdrop-filter: blur(10px);
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-card-label {
    color: #a41b7b;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.1em;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-card strong {
    color: #301b48;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.4;
}

#mado-pop-campaign-page .mado-pop-preview-site__sample-card p {
    margin: 0;
    color: #695474;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
}

#mado-pop-campaign-page .mado-pop-placement-map {
    display: grid;
    gap: 10px;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    /* 2026-08-17: 拡大は専用ボタンのみ。背景へzoom-inカーソルを出さない。 */
    cursor: default;
}

#mado-pop-campaign-page .mado-pop-placement-map__panel-tools {
    display: inline-flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-placement-device {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-placement-device__tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid #cbd9e7;
    border-radius: 999px;
    background: #f8fafc;
}

#mado-pop-campaign-page .mado-pop-placement-device__tabs > button {
    appearance: none;
    min-height: 28px;
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-placement-device__tabs > button.is-selected,
#mado-pop-campaign-page .mado-pop-placement-device__tabs > button[aria-selected="true"] {
    background: #06bfb5;
    color: #ffffff;
    box-shadow: 0 2px 7px rgba(6, 191, 181, 0.2);
}

#mado-pop-campaign-page .mado-pop-placement-device__tabs > button:focus-visible {
    outline: 2px solid rgba(6, 191, 181, 0.28);
    outline-offset: 1px;
}

/* EXPANDED PLACEMENT DEVICE TABS / 拡大配置の端末タブ（2026-08-02）:
 * - 通常の概要タブは維持し、拡大画面だけ約1.3倍へ広げる。
 * - 文字はボタン内で2px上げるが、クリック領域と選択状態は同じDOMを使う。
 */
#mado-pop-campaign-page .mado-pop-placement-device--modal .mado-pop-placement-device__tabs {
    gap: 3px;
    padding: 3px;
}

#mado-pop-campaign-page .mado-pop-placement-device--modal .mado-pop-placement-device__tabs > button {
    position: relative;
    top: -2px;
    min-height: 36px;
    padding: 5px 12px;
    font-size: 14px;
}

#mado-pop-campaign-page .mado-pop-placement-device__size {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

#mado-pop-campaign-page .mado-pop-placement-device__size select {
    width: 114px;
    min-height: 32px;
    height: 32px;
    padding: 3px 24px 3px 8px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
}

#mado-pop-campaign-page .mado-pop-placement-map__open {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #129f9e;
    border-radius: 999px;
    background: #e6fbf9;
    color: #129f9e;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-placement-map__open:hover,
#mado-pop-campaign-page .mado-pop-placement-map__open:focus-visible {
    border-color: #06bfb5;
    background: #e6fbf9;
    outline: 0;
}

/*
 * PLACEMENT MAP GRID / ページ内配置・縮尺補正格子（2026-08-02）:
 * - 背景はCSSの淡いグラデーション＋格子を正本とし、端末別WebPを作らない。
 * - 格子の画面上サイズはcanonical source [10 NORMAL EDITOR]（生成物pop-campaign-editor.js）の1経路で補正し、
 *   PC／タブレット／スマホのfit倍率が違っても正方形と見た目の密度を維持する。
 * - 通常概要は16px角、拡大配置画面は32px角を画面上の目安とする。
 * - 旧pop-placement-map-background.webpは新しい呼び出し元へ戻さない。
 */
#mado-pop-campaign-page .mado-pop-placement-map__site {
    --mado-pop-placement-grid-step: 32px;
    --mado-pop-placement-grid-line: 1px;
    position: relative;
    display: block;
    align-self: start;
    justify-self: center;
    width: 100%;
    margin-inline: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background-color: #f8fbff;
    background-image:
        linear-gradient(
            to right,
            rgba(100, 116, 139, 0.055) 0,
            rgba(100, 116, 139, 0.055) var(--mado-pop-placement-grid-line),
            transparent var(--mado-pop-placement-grid-line),
            transparent var(--mado-pop-placement-grid-step)
        ),
        linear-gradient(
            to bottom,
            rgba(100, 116, 139, 0.055) 0,
            rgba(100, 116, 139, 0.055) var(--mado-pop-placement-grid-line),
            transparent var(--mado-pop-placement-grid-line),
            transparent var(--mado-pop-placement-grid-step)
        ),
        linear-gradient(135deg, #e7f8fb 0%, #f7fafc 48%, #f2eef5 100%);
    background-position: 0 0, 0 0, center;
    background-repeat: repeat, repeat, no-repeat;
    background-size:
        var(--mado-pop-placement-grid-step) var(--mado-pop-placement-grid-step),
        var(--mado-pop-placement-grid-step) var(--mado-pop-placement-grid-step),
        cover;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12), 0 12px 28px rgba(148, 163, 184, 0.08);
    overflow: hidden;
}

#mado-pop-campaign-page .mado-pop-placement-map__header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

#mado-pop-campaign-page .mado-pop-placement-map__header-aside {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-placement-map__logo {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid #0f172a;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

#mado-pop-campaign-page .mado-pop-placement-map__menu {
    display: flex;
    gap: 8px;
    align-items: center;
}

#mado-pop-campaign-page .mado-pop-placement-map__scale {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid #d9e4ef;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-placement-map__menu span {
    display: block;
    width: 42px;
    height: 8px;
    border-radius: 999px;
    background: #dbe7f3;
}

#mado-pop-campaign-page .mado-pop-placement-map__layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
}

#mado-pop-campaign-page .mado-pop-placement-map__item {
    --mado-pop-placement-accent: #06bfb5;
    position: absolute;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "status status"
        "icon label"
        "icon type";
    gap: 4px 6px;
    align-content: start;
    min-width: 24px;
    min-height: 24px;
    padding: 6px 8px;
    border: 1px solid var(--mado-pop-placement-accent);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    color: #0f172a;
    overflow: visible;
    cursor: grab;
    pointer-events: auto;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    touch-action: none;
    user-select: none;
}

#mado-pop-campaign-page .mado-pop-placement-map[data-drag-disabled="1"] .mado-pop-placement-map__item {
    cursor: pointer;
}

/*
 * PLACEMENT SUMMARY VISUAL SHELL / 配置概要の実物寄せ（2026-08-17）:
 * - 通常概要は保存済みの背景・角丸・影をそのまま縮小表示する。
 * - 旧管理用の左端4pxアクセント帯は、角丸POPの外周からはみ出して見えるため撤去する。
 * - 選択状態は既存のborder / box-shadowで示し、公開POP・保存値・拡大配置表示には影響させない。
 */
#mado-pop-campaign-page .mado-pop-placement-map__item::before {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-selected {
    border-color: var(--mado-pop-primary);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(230, 251, 249, 0.96) 100%);
    box-shadow: 0 0 0 2px rgba(6, 191, 181, 0.24), 0 18px 30px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px) scale(1.02);
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-selected .mado-pop-placement-map__item-label {
    color: #0f7776;
}

#mado-pop-campaign-page .mado-pop-placement-map__item:not(.is-dragging):hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.16);
}

#mado-pop-campaign-page .mado-pop-placement-map__item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2), 0 16px 28px rgba(15, 23, 42, 0.16);
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-dragging {
    z-index: 40;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.22);
    cursor: grabbing;
    transition: none;
}

#mado-pop-campaign-page .mado-pop-placement-map__item::after {
    content: attr(data-mado-placement-hint);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 4;
    min-width: 96px;
    max-width: 180px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.94);
    color: #f8fafc;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

#mado-pop-campaign-page .mado-pop-placement-map__item:not(.is-dragging):hover::after,
#mado-pop-campaign-page .mado-pop-placement-map__item:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-sns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "status"
        "icon"
        "label";
    justify-items: center;
    padding: 6px;
    border-radius: 18px;
}

#mado-pop-campaign-page .mado-pop-placement-map__item:not(.has-icon) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "status"
        "label"
        "type";
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-icon-only {
    grid-template-areas: "icon";
    padding: 4px;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-icon-only .mado-pop-placement-map__item-status,
#mado-pop-campaign-page .mado-pop-placement-map__item.is-icon-only .mado-pop-placement-map__item-label,
#mado-pop-campaign-page .mado-pop-placement-map__item.is-icon-only .mado-pop-placement-map__item-type {
    display: none;
}

/*
 * SNS LINK ICON IN PLACEMENT MAP / ページ内配置のSNSリンクアイコン（2026-08-16）
 * 実素材画像に含まれる白い安全余白をそのまま見せる。別の白カード・左帯・管理ラベルを重ねない。
 */
#mado-pop-campaign-page .mado-pop-placement-map__item.is-sns-icon-visual {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-sns-icon-visual .mado-pop-placement-map__item-status,
#mado-pop-campaign-page .mado-pop-placement-map__item.is-sns-icon-visual .mado-pop-placement-map__item-label,
#mado-pop-campaign-page .mado-pop-placement-map__item.is-sns-icon-visual .mado-pop-placement-map__item-body,
#mado-pop-campaign-page .mado-pop-placement-map__item.is-sns-icon-visual .mado-pop-placement-map__item-type {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-sns-icon-visual .mado-pop-placement-map__item-icon {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-sns-icon-visual .mado-pop-placement-map__item-icon-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-sns-icon-visual.is-selected {
    background: transparent;
    box-shadow: none;
    outline: 2px solid var(--mado-pop-primary);
    outline-offset: 2px;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-sns-icon-visual:not(.is-dragging):hover {
    box-shadow: none;
}

#mado-pop-campaign-page .mado-pop-placement-map__item-status {
    grid-area: status;
    justify-self: end;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

#mado-pop-campaign-page .mado-pop-placement-map__item[data-status="active"] .mado-pop-placement-map__item-status {
    background: #e6fbf9;
    color: #129f9e;
}

#mado-pop-campaign-page .mado-pop-placement-map__item[data-status="test"] .mado-pop-placement-map__item-status {
    background: #e0f2fe;
    color: #0c4a6e;
}

#mado-pop-campaign-page .mado-pop-placement-map__item-icon {
    grid-area: icon;
    display: grid;
    align-self: start;
    place-items: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
}

#mado-pop-campaign-page .mado-pop-placement-map__item-icon[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-map__item-icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#mado-pop-campaign-page .mado-pop-placement-map__item-label {
    grid-area: label;
    min-width: 0;
    color: #0f172a;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mado-pop-campaign-page .mado-pop-placement-map__item-type {
    grid-area: type;
    min-width: 0;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mado-pop-campaign-page .mado-pop-placement-map__item-body {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 14px 16px;
    border-color: rgba(15, 23, 42, 0.18);
    background-clip: padding-box;
    overflow: hidden;
    cursor: grab;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic::before,
#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic::after {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic .mado-pop-placement-map__item-status {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic .mado-pop-placement-map__item-label {
    display: block;
    max-width: 100%;
    text-shadow: 0 1px 8px rgba(15, 23, 42, 0.12);
    white-space: normal;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic .mado-pop-placement-map__item-body:not([hidden]) {
    display: block;
    max-width: 100%;
    line-height: 1.45;
    text-shadow: 0 1px 8px rgba(15, 23, 42, 0.1);
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic .mado-pop-placement-map__item-type {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic.is-sns {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic.is-sns .mado-pop-placement-map__item-status,
#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic.is-sns .mado-pop-placement-map__item-label,
#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic.is-sns .mado-pop-placement-map__item-body,
#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic.is-sns .mado-pop-placement-map__item-type {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-realistic.is-sns .mado-pop-placement-map__item-icon {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-compact {
    gap: 3px 5px;
    padding: 5px 6px;
    border-radius: 12px;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-compact .mado-pop-placement-map__item-status {
    padding: 2px 5px;
    font-size: 8px;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-compact .mado-pop-placement-map__item-label {
    font-size: 10px;
}

#mado-pop-campaign-page .mado-pop-placement-map__item.is-compact .mado-pop-placement-map__item-type {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: clamp(18px, 3vw, 32px);
}

#mado-pop-campaign-page .mado-pop-placement-modal[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(6px);
}

#mado-pop-campaign-page .mado-pop-placement-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(95vw, 1600px);
    height: min(94vh, 1040px);
    min-height: 520px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 24px;
    background: #f8fbff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.32);
    overflow: hidden;
}

#mado-pop-campaign-page .mado-pop-placement-modal__header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #dbe7f3;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

#mado-pop-campaign-page .mado-pop-placement-modal__heading {
    display: grid;
    gap: 4px;
    min-width: 240px;
}

#mado-pop-campaign-page .mado-pop-placement-modal__eyebrow {
    position: relative;
    top: -2px;
    color: #129f9e;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#mado-pop-campaign-page .mado-pop-placement-modal__heading h3 {
    position: relative;
    top: 2px;
    margin: 0;
    color: #0f172a;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.3;
}

#mado-pop-campaign-page .mado-pop-placement-modal__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

#mado-pop-campaign-page .mado-pop-placement-modal__zoom {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

#mado-pop-campaign-page .mado-pop-placement-modal__zoom button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-placement-modal__zoom button.is-selected {
    border-color: #129f9e;
    background: #e6fbf9;
    color: #129f9e;
}

#mado-pop-campaign-page .mado-pop-placement-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-placement-modal__viewport {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 0;
    padding: 18px;
    background:
        linear-gradient(90deg, rgba(148, 163, 184, 0.14) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.14) 1px, transparent 1px),
        #eaf2fb;
    background-size: 32px 32px;
    overflow: auto;
}

#mado-pop-campaign-page .mado-pop-placement-modal__canvas {
    position: relative;
    flex: 0 0 auto;
    margin: auto;
}

#mado-pop-campaign-page .mado-pop-placement-map__site--modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 900px;
    min-height: 900px;
    aspect-ratio: auto;
    gap: 22px;
    padding: 28px;
    border-radius: 24px;
    transform-origin: top left;
}

#mado-pop-campaign-page .mado-pop-placement-map__site--modal .mado-pop-placement-map__header {
    gap: 18px;
}

#mado-pop-campaign-page .mado-pop-placement-map__site--modal .mado-pop-placement-map__logo {
    min-height: 42px;
    padding: 0 22px;
    font-size: 16px;
}

#mado-pop-campaign-page .mado-pop-placement-map__site--modal .mado-pop-placement-map__menu span {
    width: 84px;
    height: 12px;
}

#mado-pop-campaign-page .mado-pop-preview-item {
    --mado-pop-item-bg: #13b98f;
    --mado-pop-item-text: #ffffff;
    --mado-pop-bg-image: none;
    --mado-pop-bg-image-opacity: 0;
    --mado-pop-bg-image-scale: 1;
    position: absolute;
    left: 24px;
    top: 24px;
    z-index: 10;
    display: grid;
    align-content: center;
    gap: 5px;
    width: 220px;
    min-height: 64px;
    padding: 12px 14px;
    border: 0;
    border-radius: 18px;
    background: var(--mado-pop-item-bg);
    color: var(--mado-pop-item-text);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
    cursor: grab;
    outline: 0 solid transparent;
    outline-offset: 0;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    word-break: break-word;
    transition: opacity 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease, outline-color 0.16s ease, outline-offset 0.16s ease;
}

#mado-pop-campaign-page .mado-pop-preview-item[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--mado-pop-bg-image) center / cover no-repeat;
    opacity: var(--mado-pop-bg-image-opacity);
    pointer-events: none;
}

#mado-pop-campaign-page .mado-pop-preview-item__bg-image {
    position: absolute;
    z-index: 1;
    display: block;
    opacity: var(--mado-pop-bg-image-opacity);
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}

#mado-pop-campaign-page .mado-pop-preview-item__bg-image.is-content-dragging {
    cursor: grabbing;
}

/* PREVIEW ELEMENT SELECTION / キャンバス内要素選択（2026-08-29）:
 * - お客様のデザイン色と管理UIのブランド色を混ぜないため、画像/SVG選択にMADO緑を使わない。
 * - 選択状態は保存値や公開Runtimeへ持ち込まず、Editor上だけのごく薄いニュートラル表示に統一する。
 * - 旧ターコイズのdrop-shadow / focus outlineへfallbackしない。
 */
#mado-pop-campaign-page .mado-pop-preview-item__bg-image.is-selected-image-layer {
    filter: drop-shadow(0 0 1px rgba(15, 23, 42, 0.16));
}

/* 背景画像そのものを通常preview／分離preview共通の編集入口にする（2026-07-31 / 2026-08-29）。 */
#mado-pop-campaign-page .mado-pop-preview-item__bg-image:focus-visible {
    outline: 1px solid rgba(15, 23, 42, 0.18);
    outline-offset: 1px;
}

#mado-pop-campaign-page .mado-pop-preview-item__bg-image[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-item__bg-image[data-image-display-mode="fit"] {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/*
 * NATURAL IMAGE SHELL / 元画像の形を活かす（2026-09-06）:
 * - naturalは画像レイヤー単位。透過輪郭が基準枠を越えられるようoverflowだけを開く。
 * - POP背景・角丸・影はnaturalと結合しない。背景非表示はdata-background-visibleだけが担当する。
 */
#mado-pop-campaign-page .mado-pop-preview-item[data-has-natural-bg-image="1"] {
    overflow: visible;
}

#mado-pop-campaign-page .mado-pop-preview-item[data-background-visible="0"]::before {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-item__bg-image[data-image-display-mode="natural"] {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: none;
}

/*
 * CONTENT LAYER STACK / title・body・image前後関係（2026-08-28）:
 * - POP背景は固定最背面。title / 各body / 各imageの最終順序はsettings_json.layer_orderが正本。
 * - body-list自体にz-indexを持たせると各bodyが画像を跨げないため、body-listは非stacking containerにする。
 * - 通常previewと分離previewは同じDOMを使うため、別selectorや別z-index経路を追加しない。
 * - MADO引継ぎ 2026-08-28。layer_order撤去時はEditor JS/Storage/Public Runtimeも同時に削除する。
 */
#mado-pop-campaign-page .mado-pop-preview-item > :not(.mado-pop-preview-item__bg-image):not(.mado-pop-preview-body-list) {
    position: relative;
    z-index: 2;
}

#mado-pop-campaign-page .mado-pop-preview-body-list {
    display: grid;
    gap: 5px;
    min-width: 0;
    width: 100%;
}

#mado-pop-campaign-page .mado-pop-preview-item.is-dragging {
    cursor: grabbing;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.24);
}


#mado-pop-campaign-page .mado-pop-preview-item.is-selected {
    outline: 0 solid transparent;
    outline-offset: 0;
    opacity: 1;
    filter: none;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.2);
}

#mado-pop-campaign-page .mado-pop-preview-item.is-muted {
    opacity: 1;
    filter: none;
}

#mado-pop-campaign-page .mado-pop-preview-item.is-muted:hover {
    opacity: 1;
}

#mado-pop-campaign-page .mado-pop-preview-item.is-small-pop {
    gap: 2px;
    padding: 6px 8px;
    font-size: 10px;
    line-height: 1.2;
}

#mado-pop-campaign-page .mado-pop-preview-item.is-small-pop .mado-pop-preview-item__body {
    line-height: 1.25;
}

#mado-pop-campaign-page .mado-pop-preview-item.is-small-pop .mado-pop-preview-item__title {
    line-height: 1.25;
}

#mado-pop-campaign-page .mado-pop-preview-text-line {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    cursor: default;
}

#mado-pop-campaign-page .mado-pop-preview-text-line > * {
    position: relative;
    z-index: 1;
}

#mado-pop-campaign-page .mado-pop-preview-text-line--title {
    justify-self: var(--mado-pop-title-justify, start);
    text-align: var(--mado-pop-title-align, left);
}

#mado-pop-campaign-page .mado-pop-preview-text-line--title:is(
    .is-title-vertical-top,
    .is-title-vertical-center,
    .is-title-vertical-bottom
) {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    justify-self: stretch;
    width: auto;
    max-width: 100%;
}

#mado-pop-campaign-page .mado-pop-preview-text-line--title.is-title-vertical-top {
    top: var(--mado-pop-title-anchor-offset-y, 0px);
}

#mado-pop-campaign-page .mado-pop-preview-text-line--title.is-title-vertical-center {
    top: calc(50% + var(--mado-pop-title-anchor-offset-y, 0px));
    transform: translateY(-50%);
}

#mado-pop-campaign-page .mado-pop-preview-text-line--title.is-title-vertical-bottom {
    bottom: var(--mado-pop-title-anchor-offset-y, 0px);
}

#mado-pop-campaign-page .mado-pop-preview-text-line--body {
    justify-self: var(--mado-pop-body-justify, start);
    text-align: var(--mado-pop-body-align, left);
}

/*
 * PREVIEW INLINE TEXT EDIT / プレビュー文字直接編集（2026-07-30）:
 * - 鉛筆ボタンは使用せず、タイトル・本文の文字自体をクリックする。
 * - 通常表示と分離表示は同じpreview DOMなので、同じ属性と同じイベントを使う。
 * - 編集中も独自の太い枠を足さず、文字カーソルと薄い背景だけで示す。
 */
/*
 * LEGACY PENCIL DOM COMPAT / 旧鉛筆DOM互換（2026-07-30）:
 * - ページキャッシュや旧PHP初期HTMLに残った鉛筆buttonを表示しない。
 * - 現在の正規経路は文字自体の直接クリック編集であり、新規利用は禁止する。
 * - 旧HTMLが生成され得ないことを確認後、JSの除去処理と同時に削除する。
 */
#mado-pop-campaign-page .mado-pop-preview-text-edit {
    display: none;
}

#mado-pop-campaign-page [data-mado-pop-preview-inline-editable] {
    position: relative;
    z-index: 4;
    min-width: 0;
    border-radius: 3px;
    cursor: grab;
    outline: 0;
    pointer-events: auto;
    touch-action: none;
    user-select: text;
}

#mado-pop-campaign-page [data-mado-pop-preview-inline-editable]:hover,
#mado-pop-campaign-page [data-mado-pop-preview-inline-editable]:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    outline: 0;
}

#mado-pop-campaign-page [data-mado-pop-preview-inline-editable].is-inline-editing {
    background: transparent;
    caret-color: currentColor;
    outline: 1px solid rgba(15, 23, 42, 0.18);
    outline-offset: 1px;
    box-shadow: none;
    cursor: text;
    touch-action: auto;
    user-select: text;
}

#mado-pop-campaign-page [data-mado-pop-preview-inline-editable].is-content-dragging {
    background: transparent;
    cursor: grabbing;
    outline: 1px solid rgba(15, 23, 42, 0.18);
    outline-offset: 1px;
    user-select: none;
}

#mado-pop-campaign-page .mado-pop-preview-item.is-content-dragging {
    cursor: default;
}

#mado-pop-campaign-page .mado-pop-text-group--title.is-preview-text-selected,
#mado-pop-campaign-page .mado-pop-body-block.is-preview-text-selected {
    border-color: rgba(15, 23, 42, 0.16);
    background: transparent;
    box-shadow: none;
}

/* SELECTED TEXT RELATION / 選択文字だけを表示（2026-08-01 / 2026-08-29）:
 * - タイトル選択時はタイトル設定、本文選択時は該当テキスト設定だけを表示する。
 * - 選択中は面を塗らず、ごく薄いニュートラル枠だけで関係を示す。MADO緑は使わない。
 */
#mado-pop-campaign-page .mado-pop-text-group--title[hidden],
#mado-pop-campaign-page .mado-pop-body-block-group[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-item--status-hidden,
#mado-pop-campaign-page .mado-pop-preview-item--status-archived {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-item--status-ended {
    background: #e5e7eb;
    color: #475569;
    border-color: #cbd5e1;
}

#mado-pop-campaign-page .mado-pop-preview-item__title {
    justify-self: var(--mado-pop-title-justify, start);
    white-space: pre-line;
    max-width: calc(100% - 2px);
    color: var(--mado-pop-title-text, var(--mado-pop-item-text, currentColor));
    font-family: var(--mado-pop-title-font-family, "Noto Sans JP", "Noto Sans", sans-serif);
    writing-mode: var(--mado-pop-title-writing-mode, horizontal-tb);
    text-orientation: mixed;
    font-size: var(--mado-pop-title-font-size, 15px);
    letter-spacing: var(--mado-pop-title-letter-spacing, 0px);
    line-height: 1.35;
    font-weight: var(--mado-pop-title-font-weight, 900);
    text-align: var(--mado-pop-title-align, left);
    transform: translate(var(--mado-pop-title-offset-x-effective, var(--mado-pop-title-offset-x, 0px)), var(--mado-pop-title-offset-y, 0px)) rotate(var(--mado-pop-title-rotation, 0deg));
    transform-origin: left top;
}

#mado-pop-campaign-page .mado-pop-preview-text-line--title.is-title-align-center .mado-pop-preview-item__title {
    transform-origin: center top;
}

#mado-pop-campaign-page .mado-pop-preview-text-line--title.is-title-align-right .mado-pop-preview-item__title {
    transform-origin: right top;
}

#mado-pop-campaign-page .mado-pop-preview-item__image {
    display: block;
    width: 100%;
    max-height: 82px;
    border-radius: 12px;
    object-fit: cover;
}

#mado-pop-campaign-page .mado-pop-preview-item__image[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-item__body {
    justify-self: var(--mado-pop-body-justify, start);
    max-width: calc(100% - 2px);
    color: var(--mado-pop-body-text, var(--mado-pop-item-text, currentColor));
    font-family: var(--mado-pop-body-font-family, "Noto Sans JP", "Noto Sans", sans-serif);
    writing-mode: var(--mado-pop-body-writing-mode, horizontal-tb);
    text-orientation: mixed;
    font-size: var(--mado-pop-body-font-size, 12px);
    letter-spacing: var(--mado-pop-body-letter-spacing, 0px);
    line-height: 1.45;
    font-weight: var(--mado-pop-body-font-weight, 500);
    text-align: var(--mado-pop-body-align, left);
    white-space: pre-line;
    transform: translate(var(--mado-pop-body-offset-x, 0px), var(--mado-pop-body-offset-y, 0px)) rotate(var(--mado-pop-body-rotation, 0deg));
    transform-origin: left top;
}


/*
 * POP WRITING MODE / POP文字方向（2026-07-30）:
 * - 横書き(horizontal-tb)と日本語標準の縦書き(vertical-rl)だけを正規値とする。
 * - 通常・分離プレビューは同じDOMへ同じCSS変数を適用する。
 * - 公開Widget側はpublic/css/widget-runtime.cssへ同じ契約を接続後に本番反映を完了する。
 */
#mado-pop-campaign-page [data-mado-pop-writing-mode="vertical-rl"].mado-pop-preview-text-line {
    width: max-content;
    max-width: 100%;
}

#mado-pop-campaign-page [data-mado-pop-writing-mode="vertical-rl"] .mado-pop-preview-item__title,
#mado-pop-campaign-page [data-mado-pop-writing-mode="vertical-rl"] .mado-pop-preview-item__body {
    width: max-content;
    max-width: none;
    white-space: pre-line;
    line-break: strict;
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    position: absolute;
    z-index: 2;
    max-width: 100%;
    margin: 0;
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon__image {
    display: block;
    width: var(--mado-pop-icon-size, 28px);
    height: var(--mado-pop-icon-size, 28px);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
    object-fit: contain;
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon.mado-pop-brand-protected {
    align-items: center;
    justify-content: center;
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon.mado-pop-brand-protected .mado-pop-preview-catalog-icon__image {
    aspect-ratio: 1 / 1;
    flex: 0 0 var(--mado-pop-icon-size, 28px);
    min-width: var(--mado-pop-icon-size, 28px);
    border-radius: 0;
    background: transparent;
    object-fit: contain;
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon__title {
    color: currentColor;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 900;
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon.is-align-left-top {
    left: var(--mado-pop-icon-offset, 8px);
    top: var(--mado-pop-icon-offset, 8px);
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon.is-align-left {
    left: var(--mado-pop-icon-offset, 8px);
    top: 50%;
    transform: translateY(-50%);
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon.is-align-left-bottom {
    left: var(--mado-pop-icon-offset, 8px);
    bottom: var(--mado-pop-icon-offset, 8px);
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon.is-align-right-top {
    top: var(--mado-pop-icon-offset, 8px);
    right: var(--mado-pop-icon-offset, 8px);
    flex-direction: row-reverse;
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon.is-align-right {
    top: 50%;
    right: var(--mado-pop-icon-offset, 8px);
    flex-direction: row-reverse;
    transform: translateY(-50%);
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon.is-align-right-bottom {
    right: var(--mado-pop-icon-offset, 8px);
    bottom: var(--mado-pop-icon-offset, 8px);
    flex-direction: row-reverse;
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon.is-align-center-top {
    top: var(--mado-pop-icon-offset, 8px);
    left: 50%;
    transform: translateX(-50%);
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon.is-align-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#mado-pop-campaign-page .mado-pop-preview-catalog-icon.is-align-center-bottom {
    bottom: var(--mado-pop-icon-offset, 8px);
    left: 50%;
    transform: translateX(-50%);
}

#mado-pop-campaign-page .mado-pop-preview-item--survey {
    align-content: start;
    justify-items: stretch;
}

#mado-pop-campaign-page .mado-pop-preview-item--survey .mado-pop-preview-item__title,
#mado-pop-campaign-page .mado-pop-preview-item--survey .mado-pop-preview-item__body,
#mado-pop-campaign-page .mado-pop-preview-item--survey .mado-pop-preview-text-line,
#mado-pop-campaign-page .mado-pop-preview-item--survey .mado-pop-preview-item__image,
#mado-pop-campaign-page .mado-pop-preview-item--survey .mado-pop-preview-catalog-icon {
    display: none;
}

/*
 * SURVEY PREVIEW FLOW CONTRACT / アンケート編集プレビュー契約（2026-07-24）
 * 回答後のお礼文は次の設問ブロックの先頭へ表示する。途中の確認カード、
 * 「次へ」「閉じる」疑似ボタンは廃止し、公開Runtimeと同じ心理導線にする。
 */
#mado-pop-campaign-page .mado-pop-preview-survey {
    display: grid;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    color: currentColor;
}

#mado-pop-campaign-page .mado-pop-preview-survey[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-survey__step {
    display: grid;
    gap: 5px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-preview-survey__step-label {
    color: currentColor;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    opacity: 0.74;
}

#mado-pop-campaign-page .mado-pop-preview-survey__question {
    color: currentColor;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

#mado-pop-campaign-page .mado-pop-preview-survey__options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-preview-survey__option {
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #0f172a;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
}

#mado-pop-campaign-page .mado-pop-preview-survey__acknowledgement,
#mado-pop-campaign-page .mado-pop-preview-survey__final {
    color: currentColor;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    white-space: pre-line;
}

#mado-pop-campaign-page .mado-pop-preview-survey__acknowledgement {
    padding: 5px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.48);
}

#mado-pop-campaign-page .mado-pop-preview-survey__final {
    padding: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.56);
}

#mado-pop-campaign-page .mado-pop-preview-item__ended {
    display: none;
    justify-self: start;
    padding: 3px 8px;
    border-radius: 999px;
    background: #64748b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

#mado-pop-campaign-page .mado-pop-preview-item--status-ended .mado-pop-preview-item__ended {
    display: inline-flex;
}

#mado-pop-campaign-page .mado-pop-preview-item--sns-icon,
#mado-pop-campaign-page .mado-pop-preview-item--sns-button {
    justify-items: center;
    align-content: center;
}

#mado-pop-campaign-page .mado-pop-preview-item--sns-icon {
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

#mado-pop-campaign-page .mado-pop-preview-item--sns-icon .mado-pop-preview-item__title,
#mado-pop-campaign-page .mado-pop-preview-item--sns-icon .mado-pop-preview-item__body,
#mado-pop-campaign-page .mado-pop-preview-item--sns-icon .mado-pop-preview-text-line,
#mado-pop-campaign-page .mado-pop-preview-item--sns-button .mado-pop-preview-item__title,
#mado-pop-campaign-page .mado-pop-preview-item--sns-button .mado-pop-preview-item__body,
#mado-pop-campaign-page .mado-pop-preview-item--sns-button .mado-pop-preview-text-line {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-item--sns-button {
    padding: 10px 14px;
    border-color: #d8e4ef;
    background: #ffffff;
    color: #111827;
}

#mado-pop-campaign-page .mado-pop-preview-item--sns-icon .mado-pop-preview-catalog-icon,
#mado-pop-campaign-page .mado-pop-preview-item--sns-button .mado-pop-preview-catalog-icon {
    position: static;
    transform: none;
    max-width: 100%;
}

#mado-pop-campaign-page .mado-pop-preview-item--sns-button .mado-pop-preview-catalog-icon__title {
    color: currentColor;
    font-size: 14px;
}

#mado-pop-campaign-page .mado-pop-preview-item--coupon {
    justify-items: center;
    text-align: center;
    border-style: dashed;
}

#mado-pop-campaign-page .mado-pop-preview-item--coupon .mado-pop-preview-item__title {
    font-size: var(--mado-pop-title-font-size, 18px);
    font-weight: var(--mado-pop-title-font-weight, 900);
}

#mado-pop-campaign-page .mado-pop-preview-item--coupon .mado-pop-preview-item__body {
    font-size: var(--mado-pop-body-font-size, 15px);
    font-weight: var(--mado-pop-body-font-weight, 900);
}

#mado-pop-campaign-page .mado-pop-preview-item--theme-green {
    --mado-pop-item-bg: #13b98f;
    --mado-pop-item-text: #ffffff;
}

#mado-pop-campaign-page .mado-pop-preview-item--theme-blue {
    --mado-pop-item-bg: #2563eb;
    --mado-pop-item-text: #ffffff;
}

#mado-pop-campaign-page .mado-pop-preview-item--theme-amber {
    --mado-pop-item-bg: #f59e0b;
    --mado-pop-item-text: #1f2937;
}

#mado-pop-campaign-page .mado-pop-preview-item--theme-lime {
    --mado-pop-item-bg: #06c755;
    --mado-pop-item-text: #ffffff;
}

#mado-pop-campaign-page .mado-pop-preview-item--theme-ink {
    --mado-pop-item-bg: #111827;
    --mado-pop-item-text: #ffffff;
}

#mado-pop-campaign-page .mado-pop-preview-item--theme-rose {
    --mado-pop-item-bg: #fff1f2;
    --mado-pop-item-text: #881337;
}

/* MADO ASSET CATALOG VIEWPORT / 素材モーダル高さ・下部ページ送り（2026-08-31）:
 * - 152px基準の素材カードでも一覧を十分に見渡せるよう、デスクトップ上限を860px→960pxへ広げる。
 * - viewportが低い端末では画面内へ収め、header / footerを固定領域、bodyだけをスクロール領域とする。
 * - 通常編集と分離プレビューは同じcatalog modal DOMを移動して使うため、この1定義を共用する。
 * - ページ送りはPHP側footerの既存1組だけを使い、第二paginationや第二modalを追加しない。
 */
#mado-pop-campaign-page .mado-ui-catalog-modal__dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: min(960px, calc(100vh - 24px));
    max-height: calc(100vh - 24px);
}

#mado-pop-campaign-page .mado-ui-catalog-modal__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#mado-pop-campaign-page .mado-ui-catalog-modal__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

#mado-pop-campaign-page .mado-ui-catalog-modal__actions .mado-ui-catalog-modal__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-catalog-modal__action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    #mado-pop-campaign-page .mado-ui-catalog-modal__dialog {
        height: calc(100vh - 8px);
        max-height: calc(100vh - 8px);
    }

    #mado-pop-campaign-page .mado-ui-catalog-modal__actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    #mado-pop-campaign-page .mado-ui-catalog-modal__actions .mado-ui-catalog-modal__pagination,
    #mado-pop-campaign-page .mado-pop-catalog-modal__action-buttons {
        justify-content: center;
    }
}

/* MADO ASSET CATALOG CLOSE BUTTON / MADO素材モーダルの閉じる操作（2026-08-27）:
 * - mado-base.cssの共通catalog modal構造は維持し、POP素材モーダルだけをこのscopeで小型化する。
 * - WordPress風の濃色48px角ボタンへ戻さず、MADO共通accent tokenだけを使う。
 * - 第二close DOMや別click handlerは作らず、既存 data-mado-pop-catalog-close 1経路を維持する。
 */
#mado-pop-campaign-page .mado-ui-catalog-modal__close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid var(--mado-brand-accent-border);
    border-radius: 9px;
    background: var(--mado-brand-accent-soft);
    color: var(--mado-brand-accent-hover);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

#mado-pop-campaign-page .mado-ui-catalog-modal__close:hover,
#mado-pop-campaign-page .mado-ui-catalog-modal__close:focus-visible {
    border-color: var(--mado-brand-accent);
    background: var(--mado-brand-accent-border);
    color: var(--mado-brand-accent-hover);
    outline: none;
}

/* POP CATALOG CARD SIZE SSOT / Easy・通常・分離プレビュー共通（2026-08-31）
 * - 素材名はcatalog-labels.json→PHP catalog icon配列が正本。
 * - 通常編集と分離プレビューは同じcatalog modal DOMを移動して使うため、このPOP scope 1定義だけを使う。
 * - mado-base.cssの汎用catalog寸法は変更せず、他画面へ波及させない。
 */
#mado-pop-campaign-page .mado-ui-catalog-modal__grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--mado-pop-catalog-card-min-width), 1fr));
    gap: 12px;
}
#mado-pop-campaign-page .mado-ui-catalog-modal__option {
    min-height: 122px;
    padding: 10px 9px;
}
#mado-pop-campaign-page .mado-ui-catalog-modal__option-image-wrap {
    width: 82px;
    height: 72px;
}
#mado-pop-campaign-page .mado-ui-catalog-modal__option-image {
    max-width: 82px;
    max-height: 72px;
}
#mado-pop-campaign-page .mado-ui-catalog-modal__option-label {
    display: block;
    width: 100%;
    min-width: 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 900;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-catalog-option--sns .mado-ui-catalog-modal__option-image-wrap {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 8px;
    background: #e0f2fe;
}

#mado-pop-campaign-page .mado-pop-catalog-option--sns .mado-ui-catalog-modal__option-image {
    display: block;
    width: 68px;
    height: 68px;
    max-width: 68px;
    max-height: 68px;
    object-fit: contain;
}

#mado-pop-campaign-page .mado-pop-catalog-option--brand-protected {
    border-color: rgba(56, 189, 248, 0.34);
}

#mado-pop-campaign-page .mado-pop-catalog-option--preview-dark .mado-pop-create-sns__image-wrap,
#mado-pop-campaign-page .mado-pop-catalog-current--preview-dark {
    background: #e0f2fe;
}

#mado-pop-campaign-page .mado-pop-catalog-current--preview-dark {
    border-color: #d8e4ef;
}

#mado-pop-campaign-page .mado-pop-catalog-current--preview-dark .mado-ui-media-current__meta {
    color: #334155;
}


#mado-pop-campaign-page [data-mado-pop-catalog-current][hidden] {
    display: none;
}

/*
 * MADO POP SELECTED ITEM PREVIEW / 選択中POP編集プレビュー（2026-08-01）:
 * - 右側で画像・文字を直接ドラッグしやすくするため、現行値から縦方向へ100px拡張する。
 * - 通常POPは最大440px、縦長POPは最大540px。公開Runtimeや保存値には影響しない。
 * - スクロールバーはこの編集プレビューだけを対象にし、分離プレビューの非表示スクロールバーは変更しない。
 */
#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview__stage {
    min-height: clamp(360px, calc(30vh + 100px), 440px);
    height: clamp(360px, calc(30vh + 100px), 440px);
    max-height: 440px;
    background: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #8fd8d3 #f2f8f8;
}

#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview__stage.is-portrait-selected {
    min-height: clamp(460px, calc(30vh + 200px), 540px);
    height: clamp(460px, calc(30vh + 200px), 540px);
    max-height: 540px;
}

/* Chrome / Edge / Safari: 細く丸い縦横スクロールバー。 */
#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview__stage::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview__stage::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #f2f8f8;
}

#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview__stage::-webkit-scrollbar-thumb {
    min-height: 32px;
    border: 2px solid #f2f8f8;
    border-radius: 999px;
    background: #8fd8d3;
    background-clip: padding-box;
}

#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview__stage::-webkit-scrollbar-thumb:hover {
    background: #52c4bd;
    background-clip: padding-box;
}

#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview__stage::-webkit-scrollbar-corner {
    background: transparent;
}

#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview-site {
    background: transparent;
}

#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview-site__sample {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview__stage .mado-pop-preview-item.is-muted {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview__panel--editor .mado-pop-preview__stage .mado-pop-preview-item.is-selected {
    outline: 0 solid transparent;
    outline-offset: 0;
}

/*
 * POP INLINE TOOLBAR / POP文字簡易ツールバー（2026-07-30）:
 * - document.body直下へ1つだけ生成し、通常・分離プレビューで共用する。
 * - 編集文字ではなく、通常時は選択中POP、分離時は操作バーの外側へ固定する。
 * - 縦書き・回転・位置変更で文字がPOP外へ出てもツールバーを追従させない。
 * - 文字背景操作は置かず、文字色・書体・間隔・位置だけを既存文字データへ同期する。
 * - 分離ホスト(z-index:2147482000)より前面へ出す。保存経路や公開CSSには関与しない。
 */
.mado-pop-preview-inline-toolbar {
    position: fixed;
    z-index: 2147482400;
    display: grid;
    gap: 6px;
    width: min(548px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.985);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    box-sizing: border-box;
    will-change: left, top;
}

.mado-pop-preview-inline-toolbar[hidden] {
    display: none;
}

/* DETACHED TEXT PANEL SELECTED TONE / 分離文字パネルの選択中表示（2026-08-28）:
 * - 「選択中」と選択文字は従来どおりブランド緑を使う。
 * - 項目名の色・サイズ・ウェイトは下のDETACHED PANEL FIELD LABEL SSOTへ集約する。
 */
.mado-pop-preview-inline-toolbar__selected-text {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin: -6px -6px 2px;
    padding: 7px 10px;
    border: 1px solid var(--mado-brand-accent-border, #b9eeea);
    border-radius: 10px;
    background: var(--mado-brand-accent-soft, #e6fbf9);
    color: #0f766e;
}

.mado-pop-preview-inline-toolbar__selected-text span {
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.mado-pop-preview-inline-toolbar__selected-text strong {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mado-pop-preview-inline-toolbar__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
}

.mado-pop-preview-inline-toolbar__control {
    display: grid;
    grid-template-rows: auto 34px;
    align-items: stretch;
    flex: 0 0 62px;
    gap: 3px;
    min-width: 0;
}


.mado-pop-preview-inline-toolbar__control input,
.mado-pop-preview-inline-toolbar__control select {
    width: 100%;
    height: 34px;
    min-height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #0f172a;
    font-family: var(--mado-font-family-base, "Noto Sans JP", sans-serif);
    font-size: 13px;
    line-height: 1.2;
    box-sizing: border-box;
}

.mado-pop-preview-inline-toolbar__control input {
    padding: 5px 7px;
    text-align: center;
}

.mado-pop-preview-inline-toolbar__control--color {
    flex: 0 0 112px;
    min-width: 112px;
}

/* 文字色のピッカーとカラーコードは同じ34px行を正本とする（2026-07-31）。 */
.mado-pop-preview-inline-toolbar__color-pair {
    display: grid;
    grid-template-columns: 34px minmax(0, 73px);
    gap: 5px;
    width: 112px;
    min-width: 0;
}

/* DETACHED TEXT COLOR CHIP / 分離文字色チップ（2026-08-28）:
 * - 34pxの外寸は維持し、色面積だけを広げて他のカラーチップと余白感を揃える。
 */
.mado-pop-preview-inline-toolbar__control--color .mado-pop-preview-inline-toolbar__color-pair > input[type="color"] {
    width: 34px;
    min-width: 34px;
    padding: 2px;
}

.mado-pop-preview-inline-toolbar__control--color .mado-pop-preview-inline-toolbar__color-pair > input[type="text"] {
    width: 100%;
    min-width: 0;
    padding-right: 5px;
    padding-left: 5px;
    text-align: left;
}

.mado-pop-preview-inline-toolbar__control--font {
    flex: 0 0 174px;
    min-width: 174px;
}

.mado-pop-preview-inline-toolbar__control--font select {
    min-width: 0;
    padding: 5px 30px 5px 9px;
}

.mado-pop-preview-inline-toolbar__control--writing {
    flex: 0 0 94px;
}

.mado-pop-preview-inline-toolbar__control--writing select {
    min-width: 0;
    padding: 5px 28px 5px 8px;
}

/* TITLE PLACEMENT MIRROR / 小型文字ツールバーのタイトル配置（2026-07-31）
 * - タイトル選択時だけ最下段へ表示する。
 * - 保存先は大きいパネルと同じtitle_align/title_vertical_alignのみ。
 */
.mado-pop-preview-inline-toolbar__title-placement {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding-top: 1px;
}

.mado-pop-preview-inline-toolbar__title-placement[hidden],
.mado-pop-preview-inline-toolbar__title-placement-positions[hidden] {
    display: none;
}


.mado-pop-preview-inline-toolbar__title-placement-modes,
.mado-pop-preview-inline-toolbar__title-placement-positions {
    display: grid;
    gap: 5px;
}

.mado-pop-preview-inline-toolbar__title-placement-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mado-pop-preview-inline-toolbar__title-placement-positions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mado-pop-preview-inline-toolbar__title-placement button {
    appearance: none;
    min-width: 0;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
}

.mado-pop-preview-inline-toolbar__title-placement button:hover,
.mado-pop-preview-inline-toolbar__title-placement button:focus-visible {
    border-color: #129f9e;
    background: #f0fdfa;
    color: #0f766e;
    outline: 0;
}

.mado-pop-preview-inline-toolbar__title-placement button.is-selected {
    border-color: #06bfb5;
    background: #e6fbf9;
    color: #0f766e;
    box-shadow: 0 0 0 1px rgba(6, 191, 181, 0.18);
}


.mado-pop-preview-inline-toolbar__action.is-selected {
    border-color: #06bfb5;
    background: #e6fbf9;
    color: #0f766e;
    box-shadow: 0 0 0 1px rgba(6, 191, 181, 0.18);
}

.mado-pop-preview-inline-toolbar__actions {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: 6px;
    margin-left: auto;
}

.mado-pop-preview-inline-toolbar__action {
    min-width: 56px;
    height: 34px;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

.mado-pop-preview-inline-toolbar__action:hover,
.mado-pop-preview-inline-toolbar__action:focus-visible {
    border-color: #129f9e;
    background: #e6fbf9;
    color: #0f7776;
    outline: 0;
}

.mado-pop-preview-inline-toolbar__control input:focus,
.mado-pop-preview-inline-toolbar__control select:focus {
    border-color: #129f9e;
    outline: 2px solid rgba(18, 159, 158, 0.14);
    outline-offset: 0;
}

@media (max-width: 620px) {
    .mado-pop-preview-inline-toolbar {
        width: calc(100vw - 16px);
    }
    .mado-pop-preview-inline-toolbar__row {
        flex-wrap: wrap;
    }
    .mado-pop-preview-inline-toolbar__control--font {
        flex-basis: 158px;
        min-width: 158px;
    }
}

/*
 * POP PREVIEW QUICK TOOLS / POPプレビュー簡易設定（2026-07-30）:
 * - POP本体へ重ねず、通常時は選択中POPの外側、分離時は操作バーの外側へ置く。
 * - document.body直下の固定UIを通常・分離プレビューで共用し、別rendererや別保存経路を作らない。
 * - 分離プレビューの移動中もJavaScript側で毎フレーム位置を同期する。
 * - 色・サイズは既存itemフィールドだけを更新し、左設定と即時同期する。
 */
.mado-pop-preview-quick-tools {
    position: fixed;
    z-index: 2147482450;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
    will-change: left, top;
}

.mado-pop-preview-quick-tools[hidden],
.mado-pop-preview-quick-panel[hidden] {
    display: none;
}

/* TEXT-SELECTION APPEARANCE GUIDE / テキスト選択中の色・見た目導線（2026-08-27） */
#mado-pop-campaign-page .mado-pop-text-appearance-guide {
    display: grid;
    gap: 12px;
}

#mado-pop-campaign-page .mado-pop-text-appearance-guide__text {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.7;
}

#mado-pop-campaign-page .mado-pop-text-appearance-guide__text > strong {
    color: #334155;
    font-weight: 700;
}

#mado-pop-campaign-page .mado-pop-image-add-actions--text-appearance {
    margin-top: 2px;
}

.mado-pop-preview-quick-tools__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: 1px solid var(--mado-brand-accent-border, #b9eeea);
    border-radius: 9px;
    background: var(--mado-brand-accent-soft, #e6fbf9);
    color: var(--mado-brand-accent-text, #129f9e);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    cursor: pointer;
}

.mado-pop-preview-quick-tools__button:hover,
.mado-pop-preview-quick-tools__button:focus,
.mado-pop-preview-quick-tools__button.is-active {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: #d9f8f5;
    color: #087f79;
    outline: 0;
}

.mado-pop-preview-quick-tools__button:focus-visible {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: #d9f8f5;
    color: #087f79;
    outline: 2px solid rgba(20, 184, 166, 0.28);
    outline-offset: 2px;
}

.mado-pop-preview-quick-tools__button svg {
    display: block;
    width: 17px;
    height: 17px;
    pointer-events: none;
}

.mado-pop-preview-quick-tools__button[data-mado-inline-tip],
.mado-pop-preview-inline-toolbar__control[data-mado-inline-tip],
.mado-pop-preview-inline-toolbar__action[data-mado-inline-tip] {
    position: relative;
}

.mado-pop-preview-quick-tools__button[data-mado-inline-tip]::after,
.mado-pop-preview-inline-toolbar__action[data-mado-inline-tip]::after {
    content: attr(data-mado-inline-tip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 7px);
    z-index: 2147482600;
    display: block;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.94);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.mado-pop-preview-inline-toolbar__control[data-mado-inline-tip]::after {
    content: attr(data-mado-inline-tip);
    position: absolute;
    left: 0;
    right: auto;
    bottom: calc(100% + 7px);
    z-index: 2147482600;
    display: block;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.94);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}


.mado-pop-preview-quick-tools__button[data-mado-inline-tip]:hover::after,
.mado-pop-preview-quick-tools__button[data-mado-inline-tip]:focus-visible::after,
.mado-pop-preview-inline-toolbar__control[data-mado-inline-tip]:hover::after,
.mado-pop-preview-inline-toolbar__control[data-mado-inline-tip]:focus-within::after,
.mado-pop-preview-inline-toolbar__action[data-mado-inline-tip]:hover::after,
.mado-pop-preview-inline-toolbar__action[data-mado-inline-tip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.mado-pop-preview-quick-panel {
    position: fixed;
    z-index: 2147482460;
    width: min(420px, calc(100vw - 16px));
    max-height: min(620px, calc(100vh - 16px));
    overflow: auto;
    border: 1px solid #d6e0ec;
    border-radius: 14px;
    background: #ffffff;
    color: #142238;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
    box-sizing: border-box;
}

/* QUICK PANEL WIDTH / 分離プレビュー小型パネル幅（2026-08-02）:
 * - サイズは従来の小型幅を維持する。
 * - 色／見た目は画像設定の左右2カラムが重ならない幅を確保する。
 * - 位置はJSでviewport中央を初期位置とし、以後は見出しドラッグを正規操作とする。
 */
.mado-pop-preview-quick-panel--size {
    width: min(420px, calc(100vw - 16px));
}

.mado-pop-preview-quick-panel--colors {
    width: min(760px, calc(100vw - 16px));
}

.mado-pop-preview-quick-panel__header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.98);
}

.mado-pop-preview-quick-panel__header > strong,
.mado-pop-preview-quick-panel__drag-copy > strong {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 900;
}

.mado-pop-preview-quick-panel__drag-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}

.mado-pop-preview-quick-panel__drag-copy small {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.mado-pop-preview-quick-panel .mado-pop-preview-quick-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--mado-brand-accent-border, #b9eeea);
    border-radius: 8px;
    background: var(--mado-brand-accent-soft, #e6fbf9);
    color: var(--mado-brand-accent-text, #129f9e);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.mado-pop-preview-quick-panel .mado-pop-preview-quick-panel__close:hover,
.mado-pop-preview-quick-panel .mado-pop-preview-quick-panel__close:focus,
.mado-pop-preview-quick-panel .mado-pop-preview-quick-panel__close:active {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: #d9f8f5;
    color: #087f79;
    outline: 0;
}

.mado-pop-preview-quick-panel .mado-pop-preview-quick-panel__close:focus-visible {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: #d9f8f5;
    color: #087f79;
    outline: 2px solid var(--mado-brand-accent-ring, rgba(6, 191, 181, 0.20));
    outline-offset: 2px;
}

.mado-pop-preview-quick-panel__body {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.mado-pop-preview-quick-panel__group {
    display: grid;
    gap: 10px;
    padding: 11px;
    border: 1px solid #dbe4ee;
    border-radius: 11px;
    background: #f8fafc;
}



.mado-pop-preview-quick-panel__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mado-pop-preview-quick-panel__group-head > strong,
.mado-pop-preview-quick-panel__group > strong {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 900;
}

.mado-pop-preview-quick-panel__modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.mado-pop-preview-quick-panel__modes--appearance {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mado-pop-preview-quick-panel__material-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 10px;
}

.mado-pop-preview-quick-panel__modes button {
    appearance: none;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;
    cursor: pointer;
    outline: 0;
    box-shadow: none;
}

/* DETACHED APPEARANCE MODE WEIGHT / 分離「色・見た目」の6ボタン（2026-08-27）
 * - 単色/グラデーション/画像 + 追加しない/MADO素材/手持ち画像だけを100ウェイト上げる。
 * - quick panelの別操作へfont-weightを波及させない。
 */
.mado-pop-preview-quick-panel__modes--appearance button,
.mado-pop-preview-quick-panel__material-actions button {
    font-weight: 900;
}

/* DETACHED MODE FOCUS SSOT / 浮遊DOMの黒いfocus枠防止（2026-08-27）
 * - quick panelはPortal container外へ出るため、共通mado-ui-mode-cardのfocus resetが届かない。
 * - このbutton自身で通常/focus/active/selectedを完結させ、WordPress/UAの黒outlineを混ぜない。
 */
.mado-pop-preview-quick-panel__modes button:focus,
.mado-pop-preview-quick-panel__modes button:active {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #334155;
    outline: 0;
    box-shadow: none;
}

.mado-pop-preview-quick-panel__modes button:focus-visible {
    border-color: var(--mado-brand-accent, #06bfb5);
    outline: 0;
    box-shadow: 0 0 0 2px var(--mado-brand-accent-ring, rgba(6, 191, 181, 0.20));
}

.mado-pop-preview-quick-panel .mado-pop-preview-quick-panel__modes button.is-selected,
.mado-pop-preview-quick-panel .mado-pop-preview-quick-panel__modes button.is-selected:hover,
.mado-pop-preview-quick-panel .mado-pop-preview-quick-panel__modes button.is-selected:focus,
.mado-pop-preview-quick-panel .mado-pop-preview-quick-panel__modes button.is-selected:focus-visible,
.mado-pop-preview-quick-panel .mado-pop-preview-quick-panel__modes button.is-selected:active {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: var(--mado-brand-accent-soft, #e6fbf9);
    color: #087f79;
    outline: 0;
    box-shadow: 0 0 0 2px var(--mado-brand-accent-ring, rgba(6, 191, 181, 0.20));
}

.mado-pop-preview-quick-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}


.mado-pop-preview-quick-panel__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* DETACHED PANEL FIELD LABEL SSOT / 分離パネル項目名の共通正本（2026-08-28）:
 * - 文字選択パネル、サイズ、色／見た目の項目名はこの1定義を共有する。
 * - inline toolbar側へ別のcolor/font-size/font-weight定義を戻さない。
 */
.mado-pop-preview-inline-toolbar__label,
.mado-pop-preview-inline-toolbar__title-placement-label,
.mado-pop-preview-quick-panel__field,
.mado-pop-preview-quick-panel__grid > label {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin: 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 600;
}

.mado-pop-preview-quick-panel__field--full {
    grid-column: 1 / -1;
}

.mado-pop-preview-quick-panel__field input,
.mado-pop-preview-quick-panel__field select,
.mado-pop-preview-quick-panel__grid > label input,
.mado-pop-preview-quick-panel__grid > label select {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 6px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-weight: 600;
    box-sizing: border-box;
}

.mado-pop-preview-quick-panel__field input[type="color"],
.mado-pop-preview-quick-panel__grid > label input[type="color"] {
    padding: 4px;
}


@media (max-width: 620px) {
    .mado-pop-preview-quick-panel {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    .mado-pop-preview-quick-panel__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mado-pop-preview-quick-panel__modes--appearance,
    .mado-pop-preview-quick-panel__image-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .mado-pop-preview-quick-panel__group-head {
        align-items: stretch;
        flex-direction: column;
    }

    .mado-pop-preview-quick-panel__field--full {
        grid-column: auto;
    }
}

/* DETACHED PREVIEW / 分離プレビュー（2026-08-02）:
 * - 通常のeditor panel DOMを固定ホストへ移動して使い、描画DOMを複製しない。
 * - 固定表示中はpanel枠、stage背景、余白を見せず、選択中POPだけを切り抜く。
 * - POP本体は100%開始。大きいPOPだけ内部パンと倍率変更で確認する。
 * - 操作バーの中央とPOP本体の中央を一致させ、右端基準へ戻さない。
 * - 分離中は背景を暗くぼかして操作不能にし、「戻す」で通常編集へ復帰する。
 */
body.mado-pop-floating-editor-open {
    overflow: hidden;
}

.mado-pop-preview-float-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147481900;
    display: block;
    background: rgba(15, 23, 42, 0.48);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: default;
}

.mado-pop-preview-float-backdrop[hidden] {
    display: none;
}

/* DETACHED AUTH MODAL STACK / 分離プレビュー中の既存認証モーダル（2026-08-27）
 * JSが同じmodalを分離hostの兄弟へ一時移動する。quick panelより前面へ出す。
 */
body.mado-pop-floating-editor-open .mado-public-editor-auth-modal[data-mado-pop-auth-floating="1"] {
    position: fixed;
    inset: 0;
    z-index: 2147483200;
}

#mado-pop-campaign-page .mado-pop-preview-float-placeholder {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-float {
    position: fixed;
    z-index: 2147482000;
    display: block;
    width: var(--mado-pop-preview-float-stage-width, 220px);
    height: var(--mado-pop-preview-float-stage-height, 64px);
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#mado-pop-campaign-page .mado-pop-preview-float[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-float[data-dock="free"] {
    transform: none;
}

#mado-pop-campaign-page .mado-pop-preview-float__header {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: max-content;
    min-width: 190px;
    max-width: calc(100vw - 16px);
    min-height: 42px;
    padding: 5px 6px 5px 10px;
    border: 1px solid #b8d8d5;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
    cursor: move;
    touch-action: none;
}

#mado-pop-campaign-page .mado-pop-preview-float.is-dragging .mado-pop-preview-float__header {
    cursor: grabbing;
    user-select: none;
}

#mado-pop-campaign-page .mado-pop-preview-float__drag-label {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 7px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-preview-device--float {
    flex: 0 1 auto;
}

#mado-pop-campaign-page .mado-pop-preview-device--float .mado-pop-preview-device__tabs > button {
    min-height: 28px;
    padding-inline: 8px;
}

#mado-pop-campaign-page .mado-pop-preview-device--float .mado-pop-preview-device__size select {
    width: 98px;
    min-height: 30px;
    height: 30px;
}

/* 2026-07-30: 「全体／倍率」はホイール拡大縮小と同じ表示倍率の正本UI。 */
#mado-pop-campaign-page .mado-pop-preview-float__zoom {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

#mado-pop-campaign-page .mado-pop-preview-float__zoom-select {
    width: 72px;
    min-height: 32px;
    height: 32px;
    padding: 3px 22px 3px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-preview-float__close {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    order: 99;
    flex: 0 0 auto;
    width: auto;
    min-width: 68px;
    height: 32px;
    min-height: 32px;
    margin: 0 0 0 2px;
    padding: 4px 10px;
    border: 1px solid var(--mado-pop-primary);
    border-radius: 8px;
    background: var(--mado-pop-primary-soft);
    color: #0f766e;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(6, 191, 181, 0.06);
}

#mado-pop-campaign-page .mado-pop-preview-float__close-icon {
    display: block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: currentColor;
}

#mado-pop-campaign-page .mado-pop-preview-float__close:hover,
#mado-pop-campaign-page .mado-pop-preview-float__close:focus-visible {
    border-color: #0f9f97;
    background: #d9f8f5;
    color: #0b6662;
    outline: 0;
    box-shadow: 0 0 0 2px var(--mado-pop-primary-ring);
}

#mado-pop-campaign-page .mado-pop-preview-float__body {
    width: var(--mado-pop-preview-float-stage-width, 220px);
    height: var(--mado-pop-preview-float-stage-height, 64px);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    background: transparent;
    /* 管理画面だけの視認用。公開POPのshadow設定や保存値には接続しない。 */
    filter: drop-shadow(0 16px 30px rgba(15, 23, 42, 0.32));
}

#mado-pop-campaign-page .mado-pop-preview-float__body > .mado-pop-preview__panel--editor {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#mado-pop-campaign-page .mado-pop-preview-float .mado-pop-preview__panel-head,
#mado-pop-campaign-page .mado-pop-preview-float .mado-pop-preview__large-open,
#mado-pop-campaign-page .mado-pop-preview-float .mado-pop-preview__survey-guide {
    display: none;
}

#mado-pop-campaign-page .mado-pop-preview-float .mado-pop-preview__panel-body--editor {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
}

#mado-pop-campaign-page .mado-pop-preview-float .mado-pop-preview__stage,
#mado-pop-campaign-page .mado-pop-preview-float .mado-pop-preview__stage.is-portrait-selected {
    width: var(--mado-pop-preview-float-stage-width, 220px);
    height: var(--mado-pop-preview-float-stage-height, 64px);
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#mado-pop-campaign-page .mado-pop-preview-float .mado-pop-preview__stage.is-panning {
    cursor: grabbing;
}

#mado-pop-campaign-page .mado-pop-preview-float .mado-pop-preview__stage::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

@media (max-width: 760px) {
    #mado-pop-campaign-page .mado-pop-preview__panel-head {
        flex-wrap: wrap;
    }

    #mado-pop-campaign-page .mado-pop-preview__panel-tools {
        width: 100%;
        justify-content: space-between;
    }

    #mado-pop-campaign-page .mado-pop-layer-menu__toggle {
        max-width: 150px;
    }

    #mado-pop-campaign-page .mado-pop-preview-float__header {
        max-width: calc(100vw - 12px);
    }

    #mado-pop-campaign-page .mado-pop-preview-float__drag-label {
        display: none;
    }
}

@media (max-width: 1040px) {
    #mado-pop-campaign-page .mado-pop-section-menu {
        gap: 0;
    }
}

#mado-pop-campaign-page .mado-pop-preview__mobile-swipe {
    display: none;
}

/* RESPONSIVE EDITOR PREVIEW ORDER / 狭幅時の編集プレビュー順序（2026-09-01）:
 * - 901px以上はノートPCでも左右2カラムを維持する。
 * - 900〜621pxは既存DOMをCSS Gridで縦並びにする。620px以下の通常Editorだけは、
 *   大きいinline previewをcompactなswipe入口へ畳み、同じpreview DOMを分離表示して編集する。
 * - 順序は「設定メニュー → POP一覧 → 編集プレビュー → 設定 → 保存操作 →
 *   ページ内配置の概要 → 選択中POP概要」。公開Runtimeや保存経路は変更しない。
 * - 編集プレビューとページ内配置プレビューを複製しない。新しい表示経路を追加せず、
 *   この既存パネルだけを正本として使う。
 * - 削除条件: POP編集画面のDOM正本をレスポンシブ専用構造へ正式変更し、同じ順序を
 *   PHP側だけで保証できるようになった時。このコメントと下記display: contents/orderを同時に削除する。
 */
@media (max-width: 900px) {
    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-campaign-editor__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-campaign-editor__main,
    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-section-shell,
    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-section-panels,
    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-campaign-editor__preview,
    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-preview,
    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-preview__split {
        display: contents;
    }

    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-section-menu {
        order: 10;
        width: 100%;
        min-width: 0;
    }

    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-section-panel {
        order: 40;
        width: 100%;
        min-width: 0;
    }

    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-section-panel--samples {
        order: 20;
    }

    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-preview__panel--editor,
    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-preview-float-placeholder {
        order: 30;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-campaign-editor__actions {
        order: 50;
        width: 100%;
        min-width: 0;
    }

    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-preview__panel--placement {
        order: 60;
        width: 100%;
        min-width: 0;
    }

    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-selected-summary {
        order: 70;
        width: 100%;
        min-width: 0;
    }

    #mado-pop-campaign-page:not(.is-mado-preview-mode):not(.has-floating-preview) .mado-pop-preview__panel--editor .mado-pop-preview__stage {
        min-height: clamp(340px, calc(38vh + 100px), 420px);
        height: clamp(340px, calc(38vh + 100px), 420px);
        max-height: 420px;
    }

    #mado-pop-campaign-page:not(.is-mado-preview-mode):not(.has-floating-preview) .mado-pop-preview__panel--editor .mado-pop-preview__stage.is-portrait-selected {
        min-height: clamp(440px, calc(38vh + 200px), 520px);
        height: clamp(440px, calc(38vh + 200px), 520px);
        max-height: 520px;
    }
}

/* MOBILE PREVIEW SWIPE TRAY / スマホ通常編集プレビュー（2026-09-01）
 * - 通常Editorの大きいpreview bodyは620px以下では閉じ、ページ縦スクロールを妨げない。
 * - 左swipe/tapで既存の分離previewを開き、分離headerの右swipeまたは「戻す」で閉じる。
 * - 同じeditor preview DOMを移動して使い、第二preview renderer / 保存値 / Runtimeを作らない。
 */
@media (max-width: 620px) {
    #mado-pop-campaign-page[data-mado-pop-easy-mode="0"]:not(.is-mado-preview-mode):not(.has-floating-preview) .mado-pop-preview__panel--editor > .mado-pop-preview__panel-head,
    #mado-pop-campaign-page[data-mado-pop-easy-mode="0"]:not(.is-mado-preview-mode):not(.has-floating-preview) .mado-pop-preview__panel--editor > .mado-pop-preview__panel-body--editor {
        display: none;
    }

    #mado-pop-campaign-page[data-mado-pop-easy-mode="0"]:not(.is-mado-preview-mode):not(.has-floating-preview) .mado-pop-preview__panel--editor {
        min-height: 0;
        overflow: visible;
    }

    #mado-pop-campaign-page[data-mado-pop-easy-mode="0"]:not(.is-mado-preview-mode):not(.has-floating-preview) .mado-pop-preview__mobile-swipe {
        appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 52px;
        margin: 0;
        padding: 10px 14px;
        border: 1px solid var(--mado-pop-primary);
        border-radius: 14px;
        background: var(--mado-pop-primary-soft);
        color: #0f766e;
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.3;
        cursor: pointer;
        touch-action: pan-y;
    }

    #mado-pop-campaign-page .mado-pop-preview__mobile-swipe-arrow {
        flex: 0 0 auto;
        font-size: 20px;
        line-height: 1;
    }

    #mado-pop-campaign-page.has-floating-preview .mado-pop-preview__mobile-swipe {
        display: none;
    }

    #mado-pop-campaign-page.has-floating-preview .mado-pop-preview-float__header {
        touch-action: pan-y;
    }
}

@media (max-width: 760px) {

    body.mado-portal-account-page .mado-portal-shell--action-pop-campaign .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-account-page .mado-portal-shell--action-pop-campaign .mado-portal-shell__content-frame.is-with-preview {
        padding-left: var(--mado-portal-page-gutter-x-mobile, 16px);
        padding-right: var(--mado-portal-page-gutter-x-mobile, 16px);
    }

    #mado-pop-campaign-page .mado-pop-campaign-page__hero,
    #mado-pop-campaign-page .mado-pop-campaign-field-grid,
    #mado-pop-campaign-page .mado-pop-create-panel__grid,
    #mado-pop-campaign-page .mado-pop-style-mode-grid,
    #mado-pop-campaign-page .mado-pop-icon-mode-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #mado-pop-campaign-page .mado-pop-section-panel--pop-size .mado-pop-campaign-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #mado-pop-campaign-page .mado-pop-section-panel--color-image .mado-pop-style-mode-grid,
    #mado-pop-campaign-page .mado-pop-section-panel--color-image .mado-pop-icon-mode-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    #mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #mado-pop-campaign-page .mado-pop-campaign-page__surface {
        border-radius: 0;
    }

    #mado-pop-campaign-page .mado-pop-campaign-page__hero-copy,
    #mado-pop-campaign-page .mado-pop-preview {
        border-radius: 12px;
    }

    #mado-pop-campaign-page .mado-pop-section-panels {
        margin-top: 18px;
    }

    #mado-pop-campaign-page .mado-pop-section-panel {
        padding: 18px 16px;
        border-radius: 14px;
    }

    #mado-pop-campaign-page .mado-pop-preview__split {
        gap: 10px;
    }

    #mado-pop-campaign-page .mado-pop-preview__panel {
        padding: 9px 10px 10px;
        border-radius: 12px;
    }

    #mado-pop-campaign-page .mado-pop-preview__stage,
    #mado-pop-campaign-page .mado-pop-placement-map {
        min-height: 220px;
    }

    #mado-pop-campaign-page .mado-pop-placement-map__site {
        min-height: 360px;
        padding: 14px;
        gap: 12px;
    }

    #mado-pop-campaign-page .mado-pop-placement-map__layer {
        inset: 14px;
    }

    #mado-pop-campaign-page .mado-pop-placement-map__item {
        padding: 5px 6px;
        border-radius: 12px;
    }

    #mado-pop-campaign-page .mado-pop-preview-site {
        width: 620px;
    }
}

/* POP publication controls */

#mado-pop-campaign-page .mado-pop-inline-help-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #475569;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-style-section__title,
#mado-pop-campaign-page .mado-pop-period-options__legend,
#mado-pop-campaign-page .mado-pop-survey-step__title,
#mado-pop-campaign-page .mado-pop-option-card__title{
    font-size: var(--mado-pop-typo-section-size);
    font-weight: var(--mado-pop-typo-section-weight);
    line-height: 1.5;
    letter-spacing: 0;
}

#mado-pop-campaign-page .mado-pop-style-section__help,
#mado-pop-campaign-page .mado-pop-placement-offsets__note{
    font-size: var(--mado-pop-typo-help-size);
    font-weight: var(--mado-pop-typo-help-weight);
    line-height: 1.65;
    letter-spacing: 0;
    color: var(--mado-pop-typo-muted);
}

#mado-pop-campaign-page .mado-pop-preview-zoom,
#mado-pop-campaign-page .mado-pop-preview-zoom__select,
#mado-pop-campaign-page .mado-pop-campaign-field__unit,
#mado-pop-campaign-page .mado-pop-inline-help-chip {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

#mado-pop-campaign-page .mado-pop-help-chip {
    margin: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

#mado-pop-campaign-page .mado-pop-help-chip__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border: 1px solid rgba(6, 191, 181, 0.35);
    border-radius: 999px;
    background: #e6fbf9;
    color: #129f9e;
    box-shadow: 0 8px 18px rgba(6, 191, 181, 0.16);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    list-style: none;
}

#mado-pop-campaign-page .mado-pop-help-chip[open] .mado-pop-help-chip__toggle,
#mado-pop-campaign-page .mado-pop-help-chip__toggle:hover,
#mado-pop-campaign-page .mado-pop-help-chip__toggle:focus-visible {
    border-color: rgba(6, 191, 181, 0.35);
    background: #e6fbf9;
    color: #129f9e;
    outline: none;
}

#mado-pop-campaign-page .mado-pop-help-chip__panel {
    margin-top: 8px;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 60;
    width: min(340px, calc(100vw - 72px));
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(6, 191, 181, 0.35);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
    color: #334155;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
    text-align: left;
}

#mado-pop-campaign-page .mado-pop-display-rules__label-row {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-display-rules__label-row .mado-pop-campaign-field__label {
    min-width: 0;
}


#mado-pop-campaign-page .mado-pop-period-notice__main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}


#mado-pop-campaign-page .mado-pop-section-toolbar .mado-pop-help-chip {
    margin-left: auto;
}

@media (max-width: 720px) {
    #mado-pop-campaign-page .mado-pop-help-chip__panel {
    right: auto;
    left: 50%;
    width: min(300px, calc(100vw - 40px));
    transform: translateX(-50%);
}

    #mado-pop-campaign-page .mado-pop-display-rules__label-row {
        align-items: center;
    }
}

#mado-pop-campaign-page .mado-pop-display-rules__paths {
    overflow: visible;
}

#mado-pop-campaign-page .mado-pop-display-rules__paths .mado-pop-display-rules__label-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    max-width: 100%;
}

#mado-pop-campaign-page .mado-pop-display-rules__paths .mado-pop-help-chip--path .mado-pop-help-chip__panel {
    top: 0;
    left: calc(100% + 10px);
    right: auto;
    transform: none;
    width: min(340px, calc(100vw - 72px));
}

@media (max-width: 720px) {
    #mado-pop-campaign-page .mado-pop-display-rules__paths .mado-pop-help-chip--path .mado-pop-help-chip__panel {
        top: calc(100% + 8px);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(300px, calc(100vw - 40px));
    }
}

#mado-pop-campaign-page .mado-pop-preview-item.is-test-only {
    opacity: 1;
}


#mado-pop-campaign-page .mado-ui-select,
#mado-pop-campaign-page select.mado-pop-campaign-field__control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
}

#mado-pop-campaign-page .mado-pop-start-condition-section {
    display: grid;
    gap: 12px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-start-audience-group {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #d8e4ef;
    border-radius: 16px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-start-condition-section--visitor {
    margin: 0;
    padding: 0;
    border: 0;
}

#mado-pop-campaign-page .mado-pop-start-condition-section__title {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
}

#mado-pop-campaign-page .mado-pop-start-condition-panel--entry {
    border-color: #b7e4fb;
    background: #eefaff;
}

#mado-pop-campaign-page .mado-pop-entry-animation-mode {
    margin: 0;
}


#mado-pop-campaign-page .mado-pop-display-rules__test-help {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}

#mado-pop-campaign-page .mado-pop-click-action .mado-ui-mode-panel,
#mado-pop-campaign-page .mado-pop-start-condition-panel,
#mado-pop-campaign-page .mado-pop-display-rules__paths {
    gap: 10px;
}

#mado-pop-campaign-page .mado-pop-start-condition-panel__help{
    display: none;
}

#mado-pop-campaign-page .mado-pop-start-condition-settings .mado-pop-option-card__content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 42px;
    padding: 8px 14px;
}

#mado-pop-campaign-page .mado-pop-start-condition-settings .mado-pop-option-card__title {
    display: block;
    line-height: 1.35;
}

#mado-pop-campaign-page .mado-pop-click-action__types .mado-pop-option-card__title,
#mado-pop-campaign-page .mado-pop-dismiss-options .mado-pop-option-card__title,
#mado-pop-campaign-page .mado-pop-display-rules__modes .mado-pop-option-card__title,
#mado-pop-campaign-page .mado-pop-schedule-mode .mado-pop-option-card__title {
    display: block;
}

#mado-pop-campaign-page .mado-pop-placement-browser {
    display: grid;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#mado-pop-campaign-page .mado-pop-placement-browser__bar {
    align-items: center;
    gap: 5px;
    min-height: 12px;
    padding: 0 2px;
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-browser__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    background: #ffffff;
    min-height: 0;
}

#mado-pop-campaign-page .mado-pop-option-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    gap: 10px;
}


#mado-pop-campaign-page .mado-pop-click-action__types .mado-pop-option-card,
#mado-pop-campaign-page .mado-pop-start-trigger-mode .mado-pop-option-card,
#mado-pop-campaign-page .mado-pop-entry-animation-mode .mado-pop-option-card,
#mado-pop-campaign-page .mado-pop-start-visitor-mode .mado-pop-option-card,
#mado-pop-campaign-page .mado-pop-dismiss-options .mado-pop-option-card {
    align-items: stretch;
}

#mado-pop-campaign-page .mado-pop-option-card__content {
    display: grid;
    height: 100%;
    min-height: 92px;
    padding: 13px 14px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    justify-content: center;
    gap: 0;
}

#mado-pop-campaign-page .mado-pop-campaign-stack,
#mado-pop-campaign-page .mado-pop-start-condition-settings {
    gap: 12px;
}

#mado-pop-campaign-page .mado-pop-style-section .mado-ui-mode-card {
    min-height: 48px;
    padding: 11px 14px;
    align-content: center;
}

/* 単色／グラデーションはチャット設定のmode titleと同じ600を使う。 */
#mado-pop-campaign-page .mado-pop-style-section .mado-ui-mode-card__title {
    font-weight: var(--mado-pop-typo-section-weight);
}

#mado-pop-campaign-page .mado-ui-mode-card.is-active,
#mado-pop-campaign-page .mado-ui-mode-card.is-selected {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    color: var(--mado-pop-text);
    box-shadow: 0 0 0 2px rgba(6, 191, 181, 0.16);
}

#mado-pop-campaign-page .mado-pop-click-action__types,
#mado-pop-campaign-page .mado-pop-start-trigger-mode,
#mado-pop-campaign-page .mado-pop-entry-animation-mode,
#mado-pop-campaign-page .mado-pop-start-visitor-mode,
#mado-pop-campaign-page .mado-pop-dismiss-options,
#mado-pop-campaign-page .mado-pop-schedule-mode,
#mado-pop-campaign-page .mado-pop-display-rules__modes,
#mado-pop-campaign-page .mado-pop-survey-question-count {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    align-items: stretch;
    justify-items: stretch;
}

#mado-pop-campaign-page .mado-pop-click-action__types .mado-pop-option-card,
#mado-pop-campaign-page .mado-pop-start-trigger-mode .mado-pop-option-card,
#mado-pop-campaign-page .mado-pop-entry-animation-mode .mado-pop-option-card,
#mado-pop-campaign-page .mado-pop-start-visitor-mode .mado-pop-option-card,
#mado-pop-campaign-page .mado-pop-dismiss-options .mado-pop-option-card,
#mado-pop-campaign-page .mado-pop-schedule-mode .mado-pop-option-card,
#mado-pop-campaign-page .mado-pop-display-rules__modes .mado-pop-option-card,
#mado-pop-campaign-page .mado-pop-survey-question-count .mado-pop-option-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
}

#mado-pop-campaign-page .mado-pop-click-action__types .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-start-trigger-mode .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-entry-animation-mode .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-start-visitor-mode .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-dismiss-options .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-schedule-mode .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-display-rules__modes .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-survey-question-count .mado-pop-option-card__content {
    min-height: 42px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    border-color: #d8e4ef;
    background: #ffffff;
    box-shadow: none;
}

#mado-pop-campaign-page .mado-pop-click-action__types .mado-pop-option-card__title,
#mado-pop-campaign-page .mado-pop-start-trigger-mode .mado-pop-option-card__title,
#mado-pop-campaign-page .mado-pop-entry-animation-mode .mado-pop-option-card__title,
#mado-pop-campaign-page .mado-pop-start-visitor-mode .mado-pop-option-card__title,
#mado-pop-campaign-page .mado-pop-dismiss-options .mado-pop-option-card__title,
#mado-pop-campaign-page .mado-pop-schedule-mode .mado-pop-option-card__title,
#mado-pop-campaign-page .mado-pop-display-rules__modes .mado-pop-option-card__title,
#mado-pop-campaign-page .mado-pop-survey-question-count .mado-pop-option-card__title {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
}

#mado-pop-campaign-page .mado-pop-click-action__types input:checked + .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-start-trigger-mode input:checked + .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-entry-animation-mode input:checked + .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-start-visitor-mode input:checked + .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-dismiss-options input:checked + .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-schedule-mode input:checked + .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-display-rules__modes input:checked + .mado-pop-option-card__content,
#mado-pop-campaign-page .mado-pop-survey-question-count input:checked + .mado-pop-option-card__content {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    box-shadow: 0 0 0 2px var(--mado-pop-primary-ring);
}

/* POP list accordion: always starts expanded; the whole heading row is one button. */
#mado-pop-campaign-page .mado-pop-section-panel--samples {
    gap: 0;
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__heading {
    width: 100%;
    min-width: 0;
    margin: 0;
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__toggle {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    background: transparent;
    color: #0f172a;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__toggle:hover {
    color: #0f7776;
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__toggle:focus-visible {
    border-radius: 8px;
    outline: 2px solid #129f9e;
    outline-offset: 4px;
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__copy {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__title {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.4;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__current {
    min-width: 0;
    overflow: hidden;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__current-prefix {
    color: #129f9e;
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
    color: #0f7776;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__toggle-icon {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(225deg) translate(-1px, -1px);
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__toggle[aria-expanded="false"] .mado-pop-sample-list-accordion__toggle-icon {
    transform: rotate(45deg) translate(-1px, -1px);
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__body {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding-top: 14px;
}

#mado-pop-campaign-page .mado-pop-sample-list-accordion__body[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-section-panel--samples.is-list-collapsed .mado-pop-sample-list-accordion__toggle {
    padding-bottom: 0;
    border-bottom-color: transparent;
}

@media (max-width: 560px) {
    #mado-pop-campaign-page .mado-pop-sample-list-accordion__toggle {
        align-items: flex-start;
    }

    #mado-pop-campaign-page .mado-pop-sample-list-accordion__copy {
        display: grid;
        gap: 3px;
    }
}

/* ORANGE MICRO-ACCENT CONTRACT / 小型操作アクセント（2026-07-24）:
 * - 一覧の「選択中」チップ、配置確認参加の目玉、公開状態の選択肢だけを
 *   濃色 #f47a14 / 淡色 #fce7d9 で示す。
 * - POP行全体、右側概要パネル、設定カテゴリのターコイズ色は変更しない。
 * - このブロックを正本とし、同じ状態色を別の末尾ブロックへ再定義しない。
 */
/* MADO POP compact list and selected summary */
#mado-pop-campaign-page .mado-pop-sample-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

#mado-pop-campaign-page .mado-pop-sample-card {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

#mado-pop-campaign-page .mado-pop-sample-card:hover {
    border-color: rgba(6, 191, 181, 0.35);
    background: #fbfffe;
}

#mado-pop-campaign-page .mado-pop-sample-card:focus-visible {
    outline: 2px solid rgba(6, 191, 181, 0.28);
    outline-offset: 2px;
}

#mado-pop-campaign-page .mado-pop-sample-card.is-selected,
#mado-pop-campaign-page .mado-pop-sample-card[data-selected="1"] {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    box-shadow: 0 0 0 2px rgba(6, 191, 181, 0.12);
}

#mado-pop-campaign-page .mado-pop-sample-card.is-disabled {
    background: #f8fafc;
    color: #64748b;
}

#mado-pop-campaign-page .mado-pop-sample-card__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#mado-pop-campaign-page .mado-pop-sample-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    min-height: 41px;
    padding: 4px 8px 4px 10px;
}

#mado-pop-campaign-page .mado-pop-sample-card__main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}


#mado-pop-campaign-page .mado-pop-sample-card__badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/*
 * POP LIST CHIP TYPOGRAPHY / 作成済み一覧チップ文字（2026-08-01）:
 * - 「選択中」と公開状態チップは同じ寸法正本を使う。
 * - 文字を1px大きくし、ウェイトを100下げて小さい面積でも読みやすくする。
 */
#mado-pop-campaign-page .mado-pop-sample-card__selected-badge {
    display: none;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid var(--mado-pop-micro-accent);
    border-radius: 999px;
    background: var(--mado-pop-micro-accent-soft);
    color: var(--mado-pop-micro-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

#mado-pop-campaign-page .mado-pop-sample-card__status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid rgba(6, 191, 181, 0.35);
    border-radius: 999px;
    background: rgba(6, 191, 181, 0.08);
    color: #129f9e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}


#mado-pop-campaign-page .mado-pop-sample-card.is-selected .mado-pop-sample-card__selected-badge {
    display: inline-flex;
}


#mado-pop-campaign-page .mado-pop-sample-card.is-status-active .mado-pop-sample-card__status {
    background: #e6fbf9;
    color: #129f9e;
}

#mado-pop-campaign-page .mado-pop-sample-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#mado-pop-campaign-page .mado-pop-sample-card__preview-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    box-shadow: none;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-sample-card__preview-toggle:hover,
#mado-pop-campaign-page .mado-pop-sample-card__preview-toggle:focus-visible {
    background: #e6fbf9;
    color: #129f9e;
    outline: 0;
}

#mado-pop-campaign-page .mado-pop-sample-card__preview-toggle.is-active,
#mado-pop-campaign-page .mado-pop-sample-card__preview-toggle[aria-pressed="true"] {
    border: 1px solid var(--mado-pop-micro-accent);
    background: var(--mado-pop-micro-accent-soft);
    color: var(--mado-pop-micro-accent);
}

#mado-pop-campaign-page .mado-pop-sample-card__preview-toggle-icon {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

#mado-pop-campaign-page .mado-pop-sample-card__preview-toggle[data-mado-tooltip]::after {
    content: attr(data-mado-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 7px);
    z-index: 30;
    display: block;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.94);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

#mado-pop-campaign-page .mado-pop-sample-card__preview-toggle[data-mado-tooltip]:hover::after,
#mado-pop-campaign-page .mado-pop-sample-card__preview-toggle[data-mado-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

#mado-pop-campaign-page .mado-pop-sample-card__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ce2c24;
    box-shadow: none;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-sample-card__delete:hover,
#mado-pop-campaign-page .mado-pop-sample-card__delete:focus-visible {
    background: #fee2e2;
    color: #991b1b;
    outline: 0;
}

#mado-pop-campaign-page .mado-pop-sample-card__delete:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}

#mado-pop-campaign-page .mado-pop-sample-card__delete-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}


#mado-pop-campaign-page .mado-pop-management-editor {
    display: grid;
    gap: 4px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-management-editor__display {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-management-editor__name {
    min-width: 0;
    color: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-management-editor__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    box-shadow: none;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-management-editor__edit:hover,
#mado-pop-campaign-page .mado-pop-management-editor__edit:focus-visible {
    background: #e6fbf9;
    color: #129f9e;
    outline: 0;
}

#mado-pop-campaign-page .mado-pop-management-editor__edit svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

#mado-pop-campaign-page .mado-pop-management-editor__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-management-editor__form[hidden],
#mado-pop-campaign-page .mado-pop-management-editor.is-editing .mado-pop-management-editor__display {
    display: none;
}

#mado-pop-campaign-page .mado-pop-management-editor__input {
    min-width: 0;
    height: 34px;
    padding: 6px 9px;
    border: 1px solid #b8c8da;
    border-radius: 7px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 12px;
}

#mado-pop-campaign-page .mado-pop-management-editor__save {
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid #06bfb5;
    border-radius: 7px;
    background: #06bfb5;
    color: #ffffff;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-management-editor__cancel {
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}


#mado-pop-campaign-page .mado-pop-management-editor__error {
    color: #b42318;
    font-size: 11px;
    font-weight: 700;
}

#mado-pop-campaign-page .mado-pop-management-editor__error[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-selected-summary {
    position: relative;
    display: grid;
    gap: 10px;
    margin-bottom: 0;
    padding: 11px 12px;
    border: 1px solid rgba(6, 191, 181, 0.22);
    border-radius: 12px;
    background: #e6fbf9;
}

#mado-pop-campaign-page .mado-pop-selected-summary.is-collapsed {
    gap: 0;
}

#mado-pop-campaign-page .mado-pop-selected-summary__head {
    display: block;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-selected-summary__head-main {
    display: block;
    min-width: 0;
}

/* SELECTED POP COMPACT HEADER / 選択中POP概要の1行見出し（2026-08-01）:
 * - 見出しを左、管理用POP名を右、開閉矢印を最右へ置く。
 * - 管理用POP名の編集DOMは既存の1経路をそのまま移動し、別入力や保存処理を作らない。
 */
#mado-pop-campaign-page .mado-pop-selected-summary__label-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-selected-summary__label-row > .mado-pop-management-editor {
    grid-column: 2;
    justify-self: end;
    width: auto;
    max-width: 100%;
}

#mado-pop-campaign-page .mado-pop-selected-summary__label-row .mado-pop-management-editor__display {
    justify-content: flex-end;
    max-width: 100%;
}

#mado-pop-campaign-page .mado-pop-selected-summary__label-row .mado-pop-selected-summary__toggle {
    grid-column: 3;
    justify-self: center;
    align-self: center;
}

#mado-pop-campaign-page .mado-pop-selected-summary__toggle {
    appearance: none;
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #129f9e;
    cursor: pointer;
    transform: none;
}

#mado-pop-campaign-page .mado-pop-selected-summary__toggle:hover {
    background: transparent;
    color: #129f9e;
}

#mado-pop-campaign-page .mado-pop-selected-summary__toggle:focus-visible {
    background: transparent;
    color: #129f9e;
    outline: 0;
    box-shadow: none;
}

#mado-pop-campaign-page .mado-pop-selected-summary__toggle-icon {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform-origin: 50% 50%;
    transform: rotate(225deg);
}

#mado-pop-campaign-page .mado-pop-selected-summary__toggle[aria-expanded="false"] .mado-pop-selected-summary__toggle-icon {
    transform: rotate(45deg);
}

#mado-pop-campaign-page .mado-pop-selected-summary__body {
    display: grid;
    gap: 10px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-selected-summary__body[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-selected-summary__eyebrow {
    grid-column: 1;
    justify-self: start;
    margin: 0;
    color: #129f9e;
    font-weight: 700;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-selected-summary__head .mado-pop-management-editor__name {
    font-size: 14px;
    font-weight: 700;
}

#mado-pop-campaign-page .mado-pop-selected-summary__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

#mado-pop-campaign-page .mado-pop-selected-summary__nav-button {
    display: grid;
    gap: 2px;
    min-width: 0;
    min-height: 48px;
    padding: 7px 9px;
    border: 1px solid #d7e4e3;
    border-radius: 9px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-selected-summary__nav-button:hover,
#mado-pop-campaign-page .mado-pop-selected-summary__nav-button:focus-visible {
    border-color: #06bfb5;
    background: #e6fbf9;
    outline: 0;
}

#mado-pop-campaign-page .mado-pop-selected-summary__nav-label {
    color: #129f9e;
    font-size: 11px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-selected-summary__nav-value {
    min-width: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-pop-selected-summary__publication {
    display: grid;
    gap: 7px;
}

#mado-pop-campaign-page .mado-pop-selected-summary__publication-title {
    color: #475569;
    font-size: 11px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-selected-summary__publication-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

#mado-pop-campaign-page .mado-pop-selected-summary__publication-choice {
    display: grid;
    gap: 1px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid #d7e0ea;
    border-radius: 9px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-pop-selected-summary__publication-choice span {
    font-size: 13px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-selected-summary__publication-choice small {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

/* PUBLICATION CHOICE STATE CONTRACT / 右側の公開状態（2026-07-25）:
 * - テストのみを選択中: 白〜薄いグレー背景＋グレー枠。
 * - 公開中を選択中: 淡いオレンジ背景＋オレンジ枠・文字。
 * - 2状態を汎用is-selectedだけで同色にしない。
 */
#mado-pop-campaign-page .mado-pop-selected-summary__publication-choice[data-public-value="test"].is-selected,
#mado-pop-campaign-page .mado-pop-selected-summary__publication-choice[data-public-value="test"][aria-pressed="true"] {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #334155;
}

#mado-pop-campaign-page .mado-pop-selected-summary__publication-choice[data-public-value="publish"].is-selected,
#mado-pop-campaign-page .mado-pop-selected-summary__publication-choice[data-public-value="publish"][aria-pressed="true"] {
    border-color: var(--mado-pop-micro-accent);
    background: var(--mado-pop-micro-accent-soft);
    color: var(--mado-pop-micro-accent);
}

@media (max-width: 760px) {
    #mado-pop-campaign-page .mado-pop-sample-card__body {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #mado-pop-campaign-page .mado-pop-sample-card__badges {
        grid-column: 1;
        justify-self: start;
    }

    #mado-pop-campaign-page .mado-pop-sample-card__actions {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    #mado-pop-campaign-page .mado-pop-selected-summary__nav,
    #mado-pop-campaign-page .mado-pop-selected-summary__publication-choices {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* POP delete confirmation modal */
#mado-pop-campaign-page .mado-pop-delete-modal__dialog {
    width: min(440px, 100%);
    padding: 28px;
    border-color: #f1d4d2;
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

#mado-pop-campaign-page .mado-pop-delete-modal__icon {
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    background: #feeceb;
    color: #c62828;
    box-shadow: inset 0 0 0 1px rgba(198, 40, 40, 0.12);
}

#mado-pop-campaign-page .mado-pop-delete-modal__icon .mado-ui-confirm-modal__icon-svg {
    width: 25px;
    height: 25px;
}

#mado-pop-campaign-page .mado-pop-delete-modal .mado-ui-confirm-modal__title {
    font-size: 19px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-delete-modal .mado-ui-confirm-modal__message strong {
    color: #991b1b;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-delete-modal .mado-ui-confirm-modal__button--confirm:hover,
#mado-pop-campaign-page .mado-pop-delete-modal .mado-ui-confirm-modal__button--confirm:focus-visible {
    border-color: #b42318;
    background: #b42318;
    color: #ffffff;
}

/* MADO-side preview mode.
 * This is not an image preview. It reuses the exact same HTML/CSS/JS placement
 * editor used by "ページ内配置の概要" on the POP creation page.
 * Do not add Back.svg or a second preview renderer to this mode.
 */
body.mado-pop-mado-preview-mode {
    overflow: hidden;
}

body.mado-pop-mado-preview-mode #ai-chat-widget-container {
    display: none;
}

#mado-pop-campaign-page.is-mado-preview-mode {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-campaign-page__hero,
#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-mado-preview-bar,
#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-campaign-editor__main,
#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-selected-summary,
#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-preview__panel--editor {
    display: none;
}

#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-campaign-page__surface,
#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-campaign-editor,
#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-campaign-editor__layout,
#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-campaign-editor__preview,
#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-preview,
#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-preview__split {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-campaign-editor__preview {
    position: static;
    top: auto;
    max-height: none;
}

#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-preview__panel--placement,
#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-preview__panel--placement > .mado-pop-preview__panel-body {
    display: contents;
}

#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-preview__panel--placement > .mado-pop-preview__panel-head,
#mado-pop-campaign-page.is-mado-preview-mode .mado-pop-preview__panel--placement > .mado-pop-preview__panel-body > .mado-pop-placement-map {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: stretch;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    background: #f8fbff;
}

#mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview[hidden] {
    display: grid;
}

#mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview .mado-pop-placement-modal__backdrop {
    display: none;
}

#mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview .mado-pop-placement-modal__dialog {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#mado-pop-campaign-page .mado-pop-placement-modal__close--back {
    text-decoration: none;
}

#mado-pop-campaign-page .mado-pop-placement-modal__close--back:hover,
#mado-pop-campaign-page .mado-pop-placement-modal__close--back:focus-visible {
    border-color: #129f9e;
    background: #e6fbf9;
    color: #129f9e;
    outline: none;
}

@media (max-width: 760px) {

    #mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview .mado-pop-placement-modal__tools {
        justify-content: flex-start;
    }
}

/* MADO standalone preview: use the viewport width and keep preset positions exact. */
#mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview .mado-pop-placement-modal__header {
    position: relative;
    z-index: 2;
    padding: 8px 12px;
    gap: 10px;
}

#mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview .mado-pop-placement-modal__heading {
    gap: 1px;
}

#mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview .mado-pop-placement-modal__heading h3 {
    font-size: 18px;
}

#mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview .mado-pop-placement-modal__viewport {
    min-width: 0;
    min-height: 0;
    overscroll-behavior: contain;
    align-items: flex-start;
    padding: 2px;
    overflow: auto;
}

#mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview .mado-pop-placement-modal__canvas {
    margin: 0 auto;
}

#mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview .mado-pop-placement-map__site--modal {
    border-radius: 10px;
}

#mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview [data-mado-pop-placement-modal-layer] .mado-pop-preview-item {
    cursor: default;
    pointer-events: none;
}

@media (max-width: 760px) {
    #mado-pop-campaign-page .mado-pop-placement-modal.is-standalone-preview .mado-pop-placement-modal__header {
    align-items: stretch;
    padding: 7px 9px;
}
}

/* POP section switcher layout
 * 2026-08-17: 通常画面の上端はmado-base.cssのSHARED EDITOR VERTICAL ENTRYが正本。
 * surface独自のoffsetやshell row補正を持たず、チャット・問い合わせと同じEditor root基準で揃える。
 */
#mado-pop-campaign-page:not(.is-mado-preview-mode) {
    --mado-pop-preview-top-offset: 0px;
}

#mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-campaign-page__surface {
    gap: 6px;
}

#mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-campaign-page__hero {
    gap: 0;
}

#mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-campaign-page__title {
    top: 0;
}

#mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-section-panels {
    margin-top: 6px;
}

@media (min-width: 1041px) {
    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-campaign-editor__preview {
        margin-top: var(--mado-pop-preview-top-offset);
    }
}

@media (max-width: 1040px) {
    #mado-pop-campaign-page:not(.is-mado-preview-mode) .mado-pop-campaign-editor__preview {
        margin-top: 0;
    }
}


/* TEXT SETTINGS CURRENT LAYOUT / テキスト設定の現行レイアウト（2026-07-25）
 * - 上の基本定義へ寸法を統合済み。ここには追加の構造指定だけを置く。
 * - 同一selectorを末尾へ再定義して上書きしない。
 */
#mado-pop-campaign-page .mado-pop-section-panel__heading-toggle .mado-pop-current-editing {
    display: inline-flex;
    margin: 0;
    color: #129f9e;
    background: #edfdfb;
    border-color: #a7f3ef;
}
#mado-pop-campaign-page .mado-pop-current-editing__name,
#mado-pop-campaign-page .mado-pop-current-editing__label,
#mado-pop-campaign-page .mado-pop-lazy-section__summary .is-active{
    color: #129f9e;
}
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field-grid--text-settings {
    gap: 10px 14px;
    align-items: start;
}
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field-grid--text-settings > .mado-pop-campaign-field--text-content {
    grid-column: span 2;
}
/* タイトル文字色のwide指定は2カラムを維持する。通常の色項目だけ1カラム。 */
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field-grid--text-settings > .mado-pop-campaign-field--color:not(.mado-pop-campaign-field--text-color-wide) {
    grid-column: span 1;
}
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field-grid--text-settings textarea.mado-pop-campaign-field__control {
    min-height: 72px;
}
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field__label {
    margin-bottom: 4px;
}
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-color-control__text,
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field__control,
#mado-pop-campaign-page .mado-pop-text-group .mado-ui-select {
    min-height: 42px;
}
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-color-control {
    align-items: stretch;
}
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field__unit-row {
    align-items: center;
}
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field__unit-row > .mado-pop-campaign-field__control {
    flex: 1 1 auto;
}
#mado-pop-campaign-page .mado-pop-text-group .mado-pop-campaign-field--font-family {
    min-width: 0;
}
/* BACKGROUND IMAGE PICKER / 背景画像添付（2026-07-25）
 * - 保存先能力はProvider共通bridgeで判定し、MADO公式・接続済みWordPressだけ添付UIを表示する。
 * - Wix・静的HTML・カラーミー・ペライチ等はURL入力UIを表示し、MADO保存へフォールバックしない。
 * - 保存値は既存のimage_urlだけ。添付とURL入力で別の保存キーを作らない。
 */
#mado-pop-campaign-page .mado-pop-image-panel {
    display: grid;
    gap: 16px;
}

#mado-pop-campaign-page .mado-pop-image-panel[hidden] {
    display: none;
}

/* SELECTED IMAGE SOURCE UI / MADO素材と手持ち画像の表示分離（2026-08-27）
 * - asset_origin=templateでは顧客upload/URL UIを出さない。
 * - hidden属性だけを正本にし、第二の表示条件をCSSへ作らない。
 */
#mado-pop-campaign-page [data-mado-pop-image-source-ui][hidden] {
    display: none;
}

/* IMAGE ADD FOOTER / 色・見た目の画像追加入口（2026-08-02）:
 * - テキスト設定の「テキスト追加」と同じく、選択中要素の設定後へ中央配置する。
 * - レイヤー見出し／画像カード見出しには重複ボタンを置かない。
 * - 既存file input・upload route・image_layers追加処理を再利用する。
 */
#mado-pop-campaign-page .mado-pop-image-add-footer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: auto;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin-top: 0;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 14px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-image-add-footer:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

#mado-pop-campaign-page .mado-pop-image-picker {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #d8e4ef;
    border-radius: 12px;
    background: #f8fbfd;
}

#mado-pop-campaign-page .mado-pop-image-picker__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    align-items: stretch;
}



#mado-pop-campaign-page .mado-pop-image-picker__choose {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    color: #0f766e;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-image-picker__choose:hover,
#mado-pop-campaign-page .mado-pop-image-picker__choose:focus-visible {
    border-color: var(--mado-pop-primary);
    background: #d8f8f5;
    color: #0f766e;
}

#mado-pop-campaign-page .mado-pop-image-picker__remove {
    color: #b42318;
}

#mado-pop-campaign-page .mado-pop-image-picker__help {
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid #d8e4ef;
    border-radius: 999px;
    background: #ffffff;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

#mado-pop-campaign-page .mado-pop-image-picker__layers {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    padding: 2px 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

#mado-pop-campaign-page .mado-pop-image-picker__layers[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-image-picker__layer {
    appearance: none;
    display: grid;
    grid-template-rows: 54px auto;
    gap: 4px;
    flex: 0 0 76px;
    width: 76px;
    margin: 0;
    padding: 5px;
    border: 1px solid #cfe0ec;
    border-radius: 9px;
    background: #ffffff;
    color: #475569;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
}

#mado-pop-campaign-page .mado-pop-image-picker__layer img {
    display: block;
    width: 100%;
    height: 54px;
    border-radius: 6px;
    background: #eef3f7;
    object-fit: contain;
}

#mado-pop-campaign-page .mado-pop-image-picker__layer.is-selected,
#mado-pop-campaign-page .mado-pop-image-picker__layer:hover,
#mado-pop-campaign-page .mado-pop-image-picker__layer:focus-visible {
    border-color: #06bfb5;
    background: #e6fbf9;
    color: #0f766e;
    outline: none;
}

#mado-pop-campaign-page .mado-pop-image-picker__current {
    display: grid;
    grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid #cfe0ec;
    border-radius: 10px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-image-picker__current[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-image-picker__thumb-wrap {
    position: relative;
    min-width: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
    background: #eef3f7;
}

#mado-pop-campaign-page .mado-pop-image-picker__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#mado-pop-campaign-page .mado-pop-image-picker__thumb.is-error {
    opacity: 0;
}

#mado-pop-campaign-page .mado-pop-image-picker__meta {
    display: grid;
    gap: 4px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-image-picker__meta strong,
#mado-pop-campaign-page .mado-pop-image-picker__meta span {
    min-width: 0;
    overflow-wrap: anywhere;
}

#mado-pop-campaign-page .mado-pop-image-picker__meta strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

#mado-pop-campaign-page .mado-pop-image-picker__meta span {
    color: #64748b;
    font-size: 11px;
    line-height: 1.6;
}

#mado-pop-campaign-page .mado-pop-image-picker__status {
    min-height: 18px;
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

#mado-pop-campaign-page .mado-pop-image-picker__status[data-state="uploading"] {
    color: #0f766e;
}

#mado-pop-campaign-page .mado-pop-image-picker__status[data-state="success"],
#mado-pop-campaign-page .mado-pop-image-picker__status[data-state="selected"] {
    color: #047857;
}

#mado-pop-campaign-page .mado-pop-image-picker__status[data-state="error"] {
    color: #b42318;
}

#mado-pop-campaign-page .mado-pop-image-picker.is-uploading .mado-pop-image-picker__choose {
    cursor: wait;
    opacity: 0.72;
}

#mado-pop-campaign-page .mado-pop-image-panel__settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 0;
}


/* SVG ASPECT RATIO UI / SVGだけ縦横別倍率（2026-09-05）
 * - 通常の画像サイズは既存scale_percentのまま。SVGで固定OFF時だけX/Y入力を表示する。
 * - PNG/JPEG/WebPへこのUIを表示しない。Easy/Normalは同じ保存契約を使う。
 */
#mado-pop-campaign-page .mado-pop-svg-aspect-controls[hidden],
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__axis[hidden],
.mado-pop-preview-quick-panel__svg-aspect[hidden],
.mado-pop-preview-quick-panel__svg-axis[hidden],
#mado-pop-campaign-page .mado-pop-campaign-field[hidden] { display: none; }

#mado-pop-campaign-page .mado-pop-svg-aspect-controls {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #dbe5ec;
    border-radius: 10px;
    background: #fbfefe;
}
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__lock { display: inline-flex; align-items: center; gap: 8px; color: #334155; font-size: 13px; font-weight: 800; cursor: pointer; }
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__lock input { width: 17px; height: 17px; margin: 0; accent-color: var(--mado-pop-primary); }
/* 2026-09-05: Normal左設定は横幅が狭いため、横幅/縦幅を縦積みにしてslider・数値入力の重なりを防ぐ。 */
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__axis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__field { display: grid; gap: 7px; color: #334155; font-size: 13px; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__field > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__field output { color: #0f7776; font-variant-numeric: tabular-nums; }
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__field > span:last-child { display: flex; align-items: center; gap: 7px; }
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__field input[type="range"] { flex: 1 1 auto; min-width: 80px; accent-color: var(--mado-ui-range-accent, #2dd4bf); }
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__field input[type="number"] { width: 86px; min-height: 36px; padding: 6px 8px; border: 1px solid #8494a6; border-radius: 9px; background: #fff; color: #0f172a; font: inherit; }
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__field b { color: #64748b; font-weight: 800; }
#mado-pop-campaign-page .mado-pop-svg-aspect-controls__help { margin: 0; color: #64748b; font-size: 12px; line-height: 1.5; }

#mado-pop-campaign-page .mado-pop-image-panel__display-mode {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

#mado-pop-campaign-page .mado-pop-image-panel__display-mode-label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

#mado-pop-campaign-page .mado-pop-image-display-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#mado-pop-campaign-page .mado-pop-image-url-only {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 15px;
    border: 1px solid #cfdde8;
    border-radius: 12px;
    background: #f8fbfd;
}

#mado-pop-campaign-page .mado-pop-image-url-only__heading {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-image-url-only__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #b9d6e8;
    border-radius: 10px;
    background: #ffffff;
    color: #0f6f8f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

#mado-pop-campaign-page .mado-pop-image-url-only__heading h5 {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

#mado-pop-campaign-page .mado-pop-image-url-only__heading p {
    margin: 5px 0 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.75;
}

#mado-pop-campaign-page .mado-pop-image-url-only__steps {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 12px 14px 12px 34px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    line-height: 1.65;
}

#mado-pop-campaign-page .mado-pop-image-url-only > .mado-pop-campaign-field {
    margin: 0;
}

#mado-pop-campaign-page .mado-pop-image-url-only__note {
    margin: -2px 0 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.65;
}

@media (max-width: 760px) {
    #mado-pop-campaign-page .mado-pop-image-picker__actions {
        align-items: stretch;
    }

    #mado-pop-campaign-page .mado-pop-image-picker__choose,
    #mado-pop-campaign-page .mado-pop-image-picker__remove {
        flex: 1 1 100%;
        width: 100%;
    }

    #mado-pop-campaign-page .mado-pop-image-picker__help {
        justify-content: center;
        width: 100%;
    }

    #mado-pop-campaign-page .mado-pop-image-picker__current {
        grid-template-columns: minmax(0, 1fr);
    }

    #mado-pop-campaign-page .mado-pop-image-picker__thumb-wrap {
        width: min(100%, 240px);
    }

    #mado-pop-campaign-page .mado-pop-image-url-only__heading {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* TITLE PLACEMENT / タイトル配置（2026-07-25）
 * - 保存値はtitle_align/title_vertical_alignの既存2キーだけ。
 * - 背景の基本形と同じ考え方で視覚的に選べるが、背景ロジックとは共有しない。
 */
#mado-pop-campaign-page .mado-pop-title-placement {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    min-width: 0;
    margin: 8px 0 0;
    padding: 10px 14px 14px;
    border: 1px solid #d8e4ef;
    border-radius: 16px;
    background: #ffffff;
}

/* NATURAL FREE-DRAG VISIBILITY / 元画像モードの配置UI表示契約（2026-08-01）:
 * - naturalでは画像・タイトル・追加テキストの9位置配置fieldsetを非表示にする。
 * - 共通classのdisplay:gridがhidden属性へ勝たないよう、この正本規則を配置定義の直後に置く。
 * - ドラッグ・offset数値・文字揃えは残し、fitへ戻すための保存値は削除しない。
 */
#mado-pop-campaign-page .mado-pop-title-placement[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-body-placement {
    margin-top: 4px;
}

#mado-pop-campaign-page .mado-pop-title-placement__legend {
    margin-left: 2px;
    padding: 0 6px;
    color: #0f172a;
    background: #ffffff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
}
#mado-pop-campaign-page .mado-pop-title-placement__modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
#mado-pop-campaign-page .mado-pop-title-placement__mode,
#mado-pop-campaign-page .mado-pop-title-placement__position {
    appearance: none;
    border: 1px solid #d3dfeb;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
}
#mado-pop-campaign-page .mado-pop-title-placement__mode {
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}
#mado-pop-campaign-page .mado-pop-title-placement__mode:hover,
#mado-pop-campaign-page .mado-pop-title-placement__position:hover {
    border-color: #9fdedb;
    background: #f2fcfb;
}
#mado-pop-campaign-page .mado-pop-title-placement__mode.is-selected,
#mado-pop-campaign-page .mado-pop-title-placement__position.is-selected {
    border-color: var(--mado-pop-primary);
    background: var(--mado-pop-primary-soft);
    color: #0f766e;
    box-shadow: 0 0 0 2px var(--mado-pop-primary-ring);
}
#mado-pop-campaign-page .mado-pop-title-placement__mode:focus-visible,
#mado-pop-campaign-page .mado-pop-title-placement__position:focus-visible {
    outline: 2px solid var(--mado-pop-primary);
    outline-offset: 2px;
}
#mado-pop-campaign-page .mado-pop-title-placement__position-wrap {
    display: grid;
    gap: 7px;
}
#mado-pop-campaign-page .mado-pop-title-placement__position-wrap[hidden] {
    display: none;
}
#mado-pop-campaign-page .mado-pop-title-placement__position-label {
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}
#mado-pop-campaign-page .mado-pop-title-placement__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
#mado-pop-campaign-page .mado-pop-title-placement__position {
    display: grid;
    gap: 5px;
    min-width: 0;
    min-height: 74px;
    padding: 7px;
    border-radius: 10px;
    align-content: center;
    justify-items: stretch;
}
#mado-pop-campaign-page .mado-pop-title-placement__preview {
    position: relative;
    display: block;
    width: 100%;
    height: 38px;
    overflow: hidden;
    border: 1px solid #cbd9e6;
    border-radius: 7px;
    background: #f8fafc;
}
#mado-pop-campaign-page .mado-pop-title-placement__preview i {
    position: absolute;
    display: block;
    width: 34px;
    height: 6px;
    border: 1px solid #7dd3fc;
    border-radius: 999px;
    background: #bae6fd;
}
#mado-pop-campaign-page .mado-pop-title-placement__position[data-title-vertical-align="top"] i,
#mado-pop-campaign-page .mado-pop-image-placement__position[data-image-vertical-align="top"] i {
    top: 6px;
}
#mado-pop-campaign-page .mado-pop-title-placement__position[data-title-vertical-align="center"] i,
#mado-pop-campaign-page .mado-pop-image-placement__position[data-image-vertical-align="center"] i {
    top: 50%;
    transform: translateY(-50%);
}
#mado-pop-campaign-page .mado-pop-title-placement__position[data-title-vertical-align="bottom"] i,
#mado-pop-campaign-page .mado-pop-image-placement__position[data-image-vertical-align="bottom"] i {
    bottom: 6px;
}
#mado-pop-campaign-page .mado-pop-title-placement__position[data-title-align="left"] i,
#mado-pop-campaign-page .mado-pop-image-placement__position[data-image-align="left"] i {
    left: 6px;
}
#mado-pop-campaign-page .mado-pop-title-placement__position[data-title-align="center"] i,
#mado-pop-campaign-page .mado-pop-image-placement__position[data-image-align="center"] i {
    left: 50%;
    transform: translateX(-50%);
}
#mado-pop-campaign-page .mado-pop-title-placement__position[data-title-align="right"] i,
#mado-pop-campaign-page .mado-pop-image-placement__position[data-image-align="right"] i {
    right: 6px;
}
#mado-pop-campaign-page .mado-pop-title-placement__position[data-title-align="center"][data-title-vertical-align="center"] i,
#mado-pop-campaign-page .mado-pop-image-placement__position[data-image-align="center"][data-image-vertical-align="center"] i {
    transform: translate(-50%, -50%);
}

#mado-pop-campaign-page .mado-pop-image-placement {
    margin-top: 12px;
}

#mado-pop-campaign-page .mado-pop-image-placement__preview i {
    width: 18px;
    height: 14px;
    border-radius: 3px;
}

#mado-pop-campaign-page .mado-pop-image-placement__offsets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
#mado-pop-campaign-page .mado-pop-title-placement__position-name {
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}
#mado-pop-campaign-page .mado-pop-title-placement__position.is-selected .mado-pop-title-placement__position-name {
    color: #0f766e;
}
@media (max-width: 1180px) {
    #mado-pop-campaign-page .mado-pop-title-placement__modes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #mado-pop-campaign-page .mado-pop-title-placement__position {
        min-height: 70px;
    }
}

@media (max-width: 480px) {
    #mado-pop-campaign-page .mado-pop-section-panel {
        padding: 16px;
    }

    #mado-pop-campaign-page .mado-pop-section-panel--color-image .mado-pop-style-mode-grid,
    #mado-pop-campaign-page .mado-pop-section-panel--color-image .mado-pop-icon-mode-grid {
        gap: 5px;
    }

    #mado-pop-campaign-page .mado-pop-section-panel--color-image .mado-ui-mode-card {
        min-width: 0;
        padding-right: 6px;
        padding-left: 6px;
        font-size: 11px;
    }
}

/* QUICK BACKGROUND OPACITY / 色見た目の透明度はバー1本を正本UIにする（2026-07-31） */
.mado-pop-preview-quick-panel__opacity {
    grid-column: 1 / -1;
}
.mado-pop-preview-quick-panel__opacity > span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.mado-pop-preview-quick-panel__opacity output {
    color: #475569;
    font-variant-numeric: tabular-nums;
}
.mado-pop-preview-quick-panel__opacity input[type="range"] {
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--mado-ui-range-accent, #2dd4bf);
}

/* FLOATING PREVIEW TEXT EDIT / 分離中も文字要素を確実にクリック対象にする（2026-07-31） */
#mado-pop-campaign-page .mado-pop-preview-float [data-mado-pop-preview-inline-editable] {
    position: relative;
    z-index: 4;
    pointer-events: auto;
    cursor: text;
}


/* QUICK COLOR/APPEARANCE TABS + ICON MIRROR / 小型「色／見た目」パネル（2026-07-31）
 * - 単色／グラデーションは選択中の設定だけを表示する。
 * - アイコン操作は既存の背景設定・カタログ・SNS選択のミラーで、別保存経路を持たない。
 */
.mado-pop-preview-quick-panel [hidden] {
    display: none;
}

.mado-pop-preview-quick-panel__appearance-view {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.mado-pop-preview-quick-panel__image-current {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid #dbe4ee;
    border-radius: 9px;
    background: #ffffff;
}

.mado-pop-preview-quick-panel__image-current img {
    width: 64px;
    height: 48px;
    border-radius: 7px;
    object-fit: cover;
    background: #f1f5f9;
}

.mado-pop-preview-quick-panel__image-current span {
    min-width: 0;
    overflow: hidden;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mado-pop-preview-quick-panel__image-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.mado-pop-preview-quick-panel__image-placement {
    display: grid;
    gap: 8px;
}

.mado-pop-preview-quick-panel__image-placement > strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
}

.mado-pop-preview-quick-panel__image-placement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.mado-pop-preview-quick-panel__image-placement-grid button {
    appearance: none;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 5px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    font: inherit;
}

.mado-pop-preview-quick-panel__image-placement-grid button > span {
    position: relative;
    display: block;
    height: 24px;
    overflow: hidden;
    border: 1px solid #d8e4ef;
    border-radius: 5px;
    background: #f8fafc;
}

.mado-pop-preview-quick-panel__image-placement-grid button i {
    position: absolute;
    display: block;
    width: 14px;
    height: 10px;
    border: 1px solid #7dd3fc;
    border-radius: 3px;
    background: #bae6fd;
}

.mado-pop-preview-quick-panel__image-placement-grid button[data-image-vertical-align="top"] i { top: 4px; }
.mado-pop-preview-quick-panel__image-placement-grid button[data-image-vertical-align="center"] i { top: 50%; transform: translateY(-50%); }
.mado-pop-preview-quick-panel__image-placement-grid button[data-image-vertical-align="bottom"] i { bottom: 4px; }
.mado-pop-preview-quick-panel__image-placement-grid button[data-image-align="left"] i { left: 4px; }
.mado-pop-preview-quick-panel__image-placement-grid button[data-image-align="center"] i { left: 50%; transform: translateX(-50%); }
.mado-pop-preview-quick-panel__image-placement-grid button[data-image-align="right"] i { right: 4px; }
.mado-pop-preview-quick-panel__image-placement-grid button[data-image-align="center"][data-image-vertical-align="center"] i { transform: translate(-50%, -50%); }

.mado-pop-preview-quick-panel__image-placement-grid button b {
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
}

.mado-pop-preview-quick-panel__image-placement-grid button:hover,
.mado-pop-preview-quick-panel__image-placement-grid button:focus-visible {
    border-color: #9fdedb;
    background: #f2fcfb;
    outline: none;
}

.mado-pop-preview-quick-panel__image-placement-grid button.is-selected {
    border-color: var(--mado-pop-primary, #06bfb5);
    background: var(--mado-pop-primary-soft, #e6fbf9);
    color: #0f766e;
}

.mado-pop-preview-quick-panel__image-offsets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mado-pop-preview-quick-panel__image-offsets label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.mado-pop-preview-quick-panel__image-offsets label > span:first-child {
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

.mado-pop-preview-quick-panel__image-offsets label > span:last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
}

.mado-pop-preview-quick-panel__image-offsets input {
    width: 100%;
    min-width: 0;
}

.mado-pop-preview-quick-panel__image-offsets b {
    color: #475569;
    font-size: 11px;
}


.mado-pop-preview-quick-panel__image-display-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mado-pop-preview-quick-panel__image-display-modes button {
    appearance: none;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    padding: 8px 10px;
    cursor: pointer;
}

.mado-pop-preview-quick-panel__image-display-modes button.is-selected {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: var(--mado-brand-accent-soft, #e6fbf9);
    color: #087f79;
}

.mado-pop-preview-quick-panel__choose-button {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.mado-pop-preview-quick-panel__choose-button--primary {
    border-color: #06bfb5;
    background: #e6fbf9;
    color: #0f766e;
}

.mado-pop-preview-quick-panel__choose-button--danger {
    border-color: #0ea5e9;
    background: #ffffff;
    color: #b42318;
}

.mado-pop-preview-quick-panel__choose-button:hover,
.mado-pop-preview-quick-panel__choose-button:focus-visible {
    border-color: #06bfb5;
    background: #d8f8f5;
    color: #0f766e;
    outline: 0;
}

.mado-pop-preview-quick-panel__choose-button:disabled {
    border-color: #dbe4ee;
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.78;
}

/* QUICK PANEL DRAG + ICON SCALE / 小型パネル移動と既存アイコン倍率（2026-08-27）
 * - 開いた直後は内容量にかかわらずviewport中央へ置き、見出し全体をドラッグして自由移動する。
 * - パネル位置は一時UI状態で保存せず、単色/画像の切替で操作バーの上・下へ飛ばさない。
 * - MADO素材／SNS素材の倍率は既存icon_size_percentへ同期し、別保存キーを作らない。
 */
.mado-pop-preview-quick-panel__header[data-mado-pop-preview-quick-panel-drag] {
    cursor: move;
    touch-action: none;
    user-select: none;
}

.mado-pop-preview-quick-panel__header[data-mado-pop-preview-quick-panel-drag] button,
.mado-pop-preview-quick-panel__header[data-mado-pop-preview-quick-panel-drag] input,
.mado-pop-preview-quick-panel__header[data-mado-pop-preview-quick-panel-drag] select {
    cursor: pointer;
}

.mado-pop-preview-quick-panel.is-dragging {
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.30);
}

.mado-pop-preview-quick-panel__icon-size,
.mado-pop-preview-quick-panel__image-size,
.mado-pop-preview-quick-panel__image-rotation {
    display: grid;
    gap: 7px;
    margin: 2px 0 0;
    padding: 10px;
    border: 1px solid #dbe4ee;
    border-radius: 9px;
    background: #ffffff;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.mado-pop-preview-quick-panel__icon-size > span:first-child,
.mado-pop-preview-quick-panel__icon-size > span:last-child,
.mado-pop-preview-quick-panel__image-size > span:first-child,
.mado-pop-preview-quick-panel__image-size > span:last-child,
.mado-pop-preview-quick-panel__image-rotation > span:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mado-pop-preview-quick-panel__icon-size > span:first-child,
.mado-pop-preview-quick-panel__image-size > span:first-child {
    justify-content: space-between;
}

.mado-pop-preview-quick-panel__icon-size output,
.mado-pop-preview-quick-panel__image-size output {
    color: #475569;
    font-variant-numeric: tabular-nums;
}

.mado-pop-preview-quick-panel__icon-size input[type="range"],
.mado-pop-preview-quick-panel__image-size input[type="range"] {
    flex: 1 1 auto;
    min-width: 110px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--mado-ui-range-accent, #2dd4bf);
}

.mado-pop-preview-quick-panel__icon-size input[type="number"],
.mado-pop-preview-quick-panel__image-size input[type="number"],
.mado-pop-preview-quick-panel__image-rotation input[type="number"] {
    width: 76px;
    min-width: 76px;
    height: 36px;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

.mado-pop-preview-quick-panel__icon-size b,
.mado-pop-preview-quick-panel__image-size b,
.mado-pop-preview-quick-panel__image-rotation b {
    font-weight: 800;
}

.mado-pop-preview-quick-panel__svg-aspect {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #dbe4ee;
    border-radius: 9px;
    background: #ffffff;
}
.mado-pop-preview-quick-panel__svg-aspect > label { display: inline-flex; align-items: center; gap: 7px; color: #334155; font-size: 11px; font-weight: 800; cursor: pointer; }
.mado-pop-preview-quick-panel__svg-aspect > label input { margin: 0; accent-color: var(--mado-pop-primary); }
.mado-pop-preview-quick-panel__svg-axis { display: grid; gap: 8px; }
.mado-pop-preview-quick-panel__svg-axis > label { display: grid; gap: 6px; color: #334155; font-size: 11px; font-weight: 800; }
.mado-pop-preview-quick-panel__svg-axis > label > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mado-pop-preview-quick-panel__svg-axis output { color: #475569; font-variant-numeric: tabular-nums; }
.mado-pop-preview-quick-panel__svg-axis > label > span:last-child { display: flex; align-items: center; gap: 8px; }
.mado-pop-preview-quick-panel__svg-axis input[type="range"] { flex: 1 1 auto; min-width: 90px; accent-color: var(--mado-ui-range-accent, #2dd4bf); }
.mado-pop-preview-quick-panel__svg-axis input[type="number"] { width: 76px; min-width: 76px; height: 36px; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #0f172a; font: inherit; }

@media (max-width: 720px) {
    #mado-pop-campaign-page .mado-pop-image-placement__offsets,
    .mado-pop-preview-quick-panel__image-offsets {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* SVG COLOR EDITOR / SVG色抽出と直接変更（2026-08-02 / 2026-08-29）
 * - 抽出色カード内のcolor input / HEX inputが唯一の編集入口。
 * - 旧二段階編集UIとカード選択時の緑背景は撤去済み。
 * - 管理UIのブランド選択色を素材そのものの色編集カードへ重ねず、ニュートラルな枠を維持する。
 */
#mado-pop-campaign-page .mado-pop-svg-color-panel {
    margin-top: 14px;
}

#mado-pop-campaign-page .mado-pop-svg-color-panel__header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}

#mado-pop-campaign-page .mado-pop-svg-color-panel__reset {
    min-width: 158px;
    padding-inline: 18px;
    white-space: nowrap;
    justify-content: center;
}

#mado-pop-campaign-page .mado-pop-svg-color-panel__lead,
#mado-pop-campaign-page .mado-pop-svg-color-panel__help {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

#mado-pop-campaign-page .mado-pop-svg-color-panel__help {
    margin-top: 10px;
}

#mado-pop-campaign-page .mado-pop-svg-color-panel__palette {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

#mado-pop-campaign-page .mado-pop-svg-color-panel__swatch {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #cbd9e7;
    border-radius: 12px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-pop-svg-color-panel__swatch:focus-within {
    border-color: #94a3b8;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

#mado-pop-campaign-page .mado-pop-svg-color-panel__swatch-label {
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
}

#mado-pop-campaign-page .mado-pop-svg-color-panel__swatch-controls {
    display: grid;
    grid-template-columns: var(--mado-ui-comfortable-color-picker-width, 42px) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-svg-color-panel__swatch-hex {
    min-width: 0;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid #cbd9e7;
    border-radius: 9px;
    background: #ffffff;
    color: #0f172a;
    font-size: 11px;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#mado-pop-campaign-page .mado-pop-svg-color-panel__swatch-picker:focus-visible,
#mado-pop-campaign-page .mado-pop-svg-color-panel__swatch-hex:focus-visible {
    outline: 0;
    border-color: #64748b;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

@media (max-width: 720px) {
    #mado-pop-campaign-page .mado-pop-layer-workspace__header {
        align-items: stretch;
        flex-direction: column;
    }

    #mado-pop-campaign-page .mado-pop-svg-color-panel__header {
        flex-direction: column;
    }

    #mado-pop-campaign-page .mado-pop-svg-color-panel__palette {
        grid-template-columns: 1fr;
    }
}


/* TEXT SETTINGS LAYER GUIDE / テキスト設定内の小型レイヤー（2026-08-02） */
#mado-pop-campaign-page .mado-pop-layer-workspace--compact {
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fbfdff;
}


#mado-pop-campaign-page .mado-pop-layer-workspace--compact .mado-pop-layer-workspace__list {
    max-height: 170px;
}


/* CREATE / EDIT ASSET ENTRY 2-COLUMN LAYOUT (2026-08-02) */
#mado-pop-campaign-page .mado-pop-create-assets__actions,
#mado-pop-campaign-page .mado-pop-image-add-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    margin-top: 12px;
    margin-bottom: 12px;
}

#mado-pop-campaign-page .mado-pop-create-assets__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 14px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-create-assets__source {
    color: #0f7776;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
}

#mado-pop-campaign-page .mado-pop-create-assets__upload-status {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
}

#mado-pop-campaign-page .mado-pop-create-assets__upload-status[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-pop-create-assets__upload-status[data-state="uploading"] {
    color: #0f172a;
}

#mado-pop-campaign-page .mado-pop-create-assets__upload-status[data-state="success"] {
    color: #0f7776;
}

#mado-pop-campaign-page .mado-pop-create-assets__upload-status[data-state="error"] {
    color: #b42318;
}

@media (max-width: 720px) {
    #mado-pop-campaign-page .mado-pop-create-assets__actions,
    #mado-pop-campaign-page .mado-pop-image-add-actions {
        grid-template-columns: 1fr;
    }
}

/* POP ADD-ASSET BUTTON ICON / 背景・画像・新規作成の追加ボタンに + アイコンを適用（2026-08-02） */
#mado-pop-campaign-page .mado-inquiry-form-accordion-card__icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#mado-pop-campaign-page .mado-inquiry-form-accordion-card__icon::before,
#mado-pop-campaign-page .mado-inquiry-form-accordion-card__icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 999px;
}

#mado-pop-campaign-page .mado-inquiry-form-accordion-card__icon::before {
    width: 12px;
    height: 2px;
}

#mado-pop-campaign-page .mado-inquiry-form-accordion-card__icon::after {
    width: 2px;
    height: 12px;
}

#mado-pop-campaign-page .mado-pop-image-add-actions--image {
    margin-top: 0;
    margin-bottom: 14px;
}

#mado-pop-campaign-page .mado-pop-image-add-actions--background {
    margin-top: 14px;
}

/* 2026-09-01: レイヤーメニューは分離プレビュー専用。通常右プレビューの重複表示とmove/restore経路は撤去済み。 */
#mado-pop-campaign-page .mado-pop-preview-float__layer-slot {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

#mado-pop-campaign-page .mado-pop-preview-float__layer-slot .mado-pop-layer-menu,
#mado-pop-campaign-page .mado-pop-layer-menu--float {
    position: relative;
    top: auto;
    right: auto;
    z-index: 1;
}

/*
 * DETACHED PREVIEW LAYER CONTROL / 分離プレビューのレイヤー表示（2026-08-16）:
 * - 移動・端末・倍率と同じ操作バー上で、レイヤー名を補助表示ではなく主要操作として読める大きさにする。
 * - 通常右プレビューにはレイヤーメニューを出さない。左側レイヤー一覧を通常編集の正規入口とする。
 */
#mado-pop-campaign-page .mado-pop-preview-float__layer-slot .mado-pop-layer-menu__toggle,
#mado-pop-campaign-page .mado-pop-layer-menu--float .mado-pop-layer-menu__toggle {
    min-width: 132px;
    max-width: 190px;
    min-height: 32px;
    padding: 4px 10px;
}

/* DETACHED LAYER MENU POSITION / 分離プレビューのレイヤー一覧（2026-08-27）
 * - 別windowは作らず同じpanelを使う。
 * - 「戻す／色・見た目／サイズ」の操作群をJS側アンカーとして、その右下へ表示する。
 * - top/rightはJSが同じ操作群とviewportから同じ2変数だけ更新する。
 */
#mado-pop-campaign-page .mado-pop-preview-float__layer-slot .mado-pop-layer-menu__panel,
#mado-pop-campaign-page .mado-pop-layer-menu--float .mado-pop-layer-menu__panel {
    position: fixed;
    top: var(--mado-pop-layer-menu-float-top, 78px);
    right: var(--mado-pop-layer-menu-float-right, 16px);
    bottom: auto;
    left: auto;
    z-index: 2147482700;
}

#mado-pop-campaign-page .mado-pop-preview-float__layer-slot .mado-pop-layer-menu__toggle-label,
#mado-pop-campaign-page .mado-pop-layer-menu--float .mado-pop-layer-menu__toggle-label {
    font-size: 12px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-pop-preview-float__layer-slot .mado-pop-layer-menu__toggle strong,
#mado-pop-campaign-page .mado-pop-layer-menu--float .mado-pop-layer-menu__toggle strong {
    font-size: 12px;
    font-weight: 900;
}

#mado-pop-campaign-page .mado-pop-image-picker__template,
#mado-pop-campaign-page .mado-pop-image-picker__choose,
#mado-pop-campaign-page .mado-pop-image-picker__remove {
    width: 100%;
    min-width: 0;
    min-height: 42px;
}

/* NORMAL IMAGE SETTINGS / 通常の左設定（2026-08-02）:
 * - 分離プレビュー用の横2カラムを共有しない。
 * - editor-mainの後へeditor-side（画像の配置）を置き、従来どおり最下部で編集する。
 */
#mado-pop-campaign-page .mado-pop-image-panel__editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

#mado-pop-campaign-page .mado-pop-image-panel__editor-main,
#mado-pop-campaign-page .mado-pop-image-panel__editor-side {
    display: grid;
    gap: 12px;
}

#mado-pop-campaign-page .mado-pop-image-panel__settings > :nth-child(2) {
    order: 1;
    grid-column: 1 / -1;
}

#mado-pop-campaign-page .mado-pop-image-panel__settings > :nth-child(1) {
    order: 2;
    grid-column: 1 / -1;
}

#mado-pop-campaign-page .mado-pop-image-panel__settings > :nth-child(3) {
    order: 3;
    grid-column: 1 / 2;
}

#mado-pop-campaign-page .mado-pop-image-panel__editor-side .mado-pop-image-placement {
    margin-top: 0;
}

.mado-pop-preview-quick-panel__image-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.92fr);
    gap: 10px;
    align-items: start;
}

.mado-pop-preview-quick-panel__image-editor-main,
.mado-pop-preview-quick-panel__image-editor-side,
.mado-pop-preview-quick-panel__image-controls-stack {
    display: grid;
    gap: 8px;
}

.mado-pop-preview-quick-panel__image-opacity,
.mado-pop-preview-quick-panel__image-rotation-wrap {
    display: grid;
    gap: 7px;
    margin: 2px 0 0;
    padding: 10px;
    border: 1px solid #dbe4ee;
    border-radius: 9px;
    background: #ffffff;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.mado-pop-preview-quick-panel__image-opacity > span:first-child,
.mado-pop-preview-quick-panel__image-rotation > span:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mado-pop-preview-quick-panel__image-opacity output {
    color: #475569;
    font-variant-numeric: tabular-nums;
}

.mado-pop-preview-quick-panel__image-opacity input[type="range"] {
    width: 100%;
    min-width: 110px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--mado-ui-range-accent, #2dd4bf);
}

.mado-pop-preview-quick-panel__angle-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.mado-pop-preview-quick-panel__angle-control .mado-ui-angle-control__number {
    width: 76px;
    min-width: 76px;
}

.mado-pop-preview-quick-panel__angle-control b {
    font-weight: 800;
}

@media (max-width: 900px) {
    #mado-pop-campaign-page .mado-pop-image-picker__actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .mado-pop-preview-quick-panel__image-actions,
    .mado-pop-preview-quick-panel__image-editor-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}


/*
 * EASY WIZARD VERTICAL RHYTHM / かんたん作成の見出し間隔（2026-08-30）
 * - 小見出し → 大見出し → 補足文は同じ説明グループとして8px。
 * - 説明グループから次の設定UIまでは20px。
 * - タイトル2追加と素材の「色などを変える」は別操作の入口なので上を30px空ける。
 * - STEPごとの個別marginを増やさず、この縦リズムをEasy共通の正本とする。
 */
#mado-pop-campaign-page .mado-pop-easy__step > .mado-pop-easy__step-kicker + h3,
#mado-pop-campaign-page .mado-pop-easy__step > h3 + p {
    margin-top: -12px;
}
/* 素材STEPだけh3/pが表示種別wrapper内にあるため、同じ8px/20px契約へ揃える。 */
#mado-pop-campaign-page .mado-pop-easy__step > .mado-pop-easy__step-kicker + [data-mado-pop-easy-normal-material],
#mado-pop-campaign-page .mado-pop-easy__step > .mado-pop-easy__step-kicker + [data-mado-pop-easy-sns-material] {
    margin-top: -12px;
}
#mado-pop-campaign-page [data-mado-pop-easy-normal-material],
#mado-pop-campaign-page [data-mado-pop-easy-sns-material] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#mado-pop-campaign-page [data-mado-pop-easy-normal-material] > h3 + p,
#mado-pop-campaign-page [data-mado-pop-easy-sns-material] > h3 + p {
    margin-top: -12px;
}
#mado-pop-campaign-page [data-mado-pop-easy-normal-material] > .mado-pop-easy__catalog-tabs,
#mado-pop-campaign-page [data-mado-pop-easy-sns-material] > .mado-pop-easy__catalog-tabs,
#mado-pop-campaign-page [data-mado-pop-easy-normal-material] > .mado-pop-easy__mini-editor,
#mado-pop-campaign-page [data-mado-pop-easy-sns-material] > .mado-pop-easy__mini-editor {
    margin-top: 0;
    margin-bottom: 0;
}

/* ========================================================================== 
 * BANNER AREA WIZARD / ページ内バナー配置UI（2026-09-06）
 * - mode=banner-area は既存POP itemをitem_idで選び、配置の見え方を確認する専用UI。
 * - バナー本体のEditor CSS・公開Widget CSSを複製しない。固定UIはこの管理画面CSSだけで描画する。
 * - 現段階はbrowser draft。保存・公開Runtime・分析へこのselector群を流用しない。
 * ========================================================================== */
#mado-pop-campaign-page.is-banner-area-mode .mado-pop-campaign-page__surface {
    gap: 12px;
}

#mado-pop-campaign-page .mado-pop-management-editor__id {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid var(--mado-brand-accent-border, #b9eeea);
    border-radius: 999px;
    background: var(--mado-brand-accent-soft, #e6fbf9);
    color: #0f7776;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
}

#mado-pop-campaign-page .mado-banner-area {
    display: grid;
    gap: 16px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-banner-area [hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-banner-area__head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid #d9e8ef;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fffe 0%, #f6fbff 100%);
}

#mado-pop-campaign-page .mado-banner-area__head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
}

#mado-pop-campaign-page .mado-banner-area__eyebrow,
#mado-pop-campaign-page .mado-banner-area-preview__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #0f7776;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
}

#mado-pop-campaign-page .mado-banner-area__heading {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
}

#mado-pop-campaign-page .mado-banner-area__lead {
    max-width: 760px;
    margin: 5px 0 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.65;
}

#mado-pop-campaign-page .mado-banner-area__step-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: -4px;
}

#mado-pop-campaign-page .mado-banner-area__step-nav .mado-ui-button {
    min-width: 84px;
    min-height: 42px;
    padding: 9px 18px;
    font-size: 14px;
}

#mado-pop-campaign-page .mado-banner-area__layout {
    display: grid;
    grid-template-columns: minmax(400px, 48%) minmax(430px, 1fr);
    gap: 18px;
    align-items: start;
    min-width: 0;
}

#mado-pop-campaign-page .mado-banner-area__steps,
#mado-pop-campaign-page .mado-banner-area-preview {
    min-width: 0;
    border: 1px solid #d9e4ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}

#mado-pop-campaign-page .mado-banner-area__steps {
    padding: 22px;
}

#mado-pop-campaign-page .mado-banner-area__step {
    display: grid;
    gap: 20px;
    min-height: 420px;
    align-content: start;
}

#mado-pop-campaign-page .mado-banner-area__step[hidden] {
    display: none;
}

#mado-pop-campaign-page .mado-banner-area__step-kicker {
    color: #0f7776;
    font-size: 12px;
    font-weight: 900;
}

#mado-pop-campaign-page .mado-banner-area__step h3 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
}

#mado-pop-campaign-page .mado-banner-area__step p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.65;
}

#mado-pop-campaign-page .mado-banner-area__field {
    display: grid;
    gap: 7px;
    color: #1e293b;
    font-size: 14px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-banner-area__field input,
#mado-pop-campaign-page .mado-banner-area__field textarea,
#mado-pop-campaign-page .mado-banner-area__field select,
#mado-pop-campaign-page .mado-banner-area__size-fields input,
#mado-pop-campaign-page .mado-banner-area__device-counts select,
#mado-pop-campaign-page .mado-banner-area__motion-options select {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #8494a6;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
}

#mado-pop-campaign-page .mado-banner-area__field input:focus,
#mado-pop-campaign-page .mado-banner-area__field textarea:focus,
#mado-pop-campaign-page .mado-banner-area__field select:focus,
#mado-pop-campaign-page .mado-banner-area__size-fields input:focus,
#mado-pop-campaign-page .mado-banner-area__device-counts select:focus,
#mado-pop-campaign-page .mado-banner-area__motion-options select:focus {
    border-color: var(--mado-brand-accent, #06bfb5);
    outline: 3px solid var(--mado-brand-accent-ring, rgba(6, 191, 181, .20));
    outline-offset: 1px;
}

#mado-pop-campaign-page .mado-banner-area__unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-banner-area__preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#mado-pop-campaign-page .mado-banner-area__preset-row button {
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid #c7d3df;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-banner-area__preset-row button:hover {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: var(--mado-brand-accent-soft, #e6fbf9);
}

#mado-pop-campaign-page .mado-banner-area__size-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

#mado-pop-campaign-page .mado-banner-area__times {
    align-self: end;
    padding-bottom: 13px;
    color: #64748b;
    font-size: 18px;
    font-weight: 700;
}

#mado-pop-campaign-page .mado-banner-area__device-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#mado-pop-campaign-page .mado-banner-area__choice-grid {
    display: grid;
    gap: 10px;
}

#mado-pop-campaign-page .mado-banner-area__choice {
    position: relative;
    display: block;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-banner-area__choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#mado-pop-campaign-page .mado-banner-area__choice > span {
    display: grid;
    gap: 3px;
    min-height: 68px;
    padding: 13px 14px;
    border: 1px solid #cbd8e4;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
}

#mado-pop-campaign-page .mado-banner-area__choice > span strong {
    font-size: 14px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-banner-area__choice > span small {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

#mado-pop-campaign-page .mado-banner-area__choice input:checked + span {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: var(--mado-brand-accent-soft, #e6fbf9);
    box-shadow: 0 0 0 2px var(--mado-brand-accent-ring, rgba(6, 191, 181, .20));
}

#mado-pop-campaign-page .mado-banner-area__choice input:focus-visible + span {
    outline: 3px solid #0f6665;
    outline-offset: 3px;
}

#mado-pop-campaign-page .mado-banner-area__motion-options {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 14px;
    align-items: end;
    padding: 14px;
    border: 1px solid #d9e4ef;
    border-radius: 12px;
    background: #f8fbff;
}

#mado-pop-campaign-page .mado-banner-area__check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

#mado-pop-campaign-page .mado-banner-area__check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mado-brand-accent, #06bfb5);
}

#mado-pop-campaign-page .mado-banner-area__item-picker {
    display: grid;
    gap: 8px;
    max-height: 310px;
    overflow: auto;
    padding-right: 4px;
}

#mado-pop-campaign-page .mado-banner-area__item-option {
    display: grid;
    grid-template-columns: auto 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #d5e0ea;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-banner-area__item-option:hover {
    border-color: #9bcfc9;
    background: #f8fffe;
}

#mado-pop-campaign-page .mado-banner-area__item-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mado-brand-accent, #06bfb5);
}

#mado-pop-campaign-page .mado-banner-area__item-swatch {
    display: grid;
    place-items: center;
    width: 58px;
    height: 42px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 8px;
    background: var(--mado-banner-item-bg, #e6fbf9);
    color: var(--mado-banner-item-text, #0f172a);
}

#mado-pop-campaign-page .mado-banner-area__item-swatch span {
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    font-size: 9px;
    font-weight: 900;
}

#mado-pop-campaign-page .mado-banner-area__item-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-banner-area__item-copy strong,
#mado-pop-campaign-page .mado-banner-area__item-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-banner-area__item-copy strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-banner-area__item-copy small {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

#mado-pop-campaign-page .mado-banner-area__selected-order {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #dce6ef;
    border-radius: 12px;
    background: #f8fbff;
}

#mado-pop-campaign-page .mado-banner-area__selected-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #334155;
    font-size: 12px;
}

#mado-pop-campaign-page [data-mado-banner-area-selected-list] {
    display: grid;
    gap: 6px;
}

#mado-pop-campaign-page .mado-banner-area__selected-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #d4dee8;
    border-radius: 9px;
    background: #ffffff;
}

#mado-pop-campaign-page .mado-banner-area__selected-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

#mado-pop-campaign-page .mado-banner-area__selected-copy strong,
#mado-pop-campaign-page .mado-banner-area__selected-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mado-pop-campaign-page .mado-banner-area__selected-copy strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-banner-area__selected-copy small {
    color: #64748b;
    font-size: 10px;
}

#mado-pop-campaign-page .mado-banner-area__selected-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

#mado-pop-campaign-page .mado-banner-area__selected-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-banner-area__selected-actions button:disabled {
    opacity: .35;
    cursor: default;
}

#mado-pop-campaign-page .mado-banner-area__selected-empty {
    color: #64748b;
    font-size: 12px;
}

#mado-pop-campaign-page .mado-banner-area__empty {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid #d9e4ef;
    border-radius: 12px;
    background: #f8fbff;
}

#mado-pop-campaign-page .mado-banner-area__empty strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-banner-area__empty p {
    font-size: 12px;
}

#mado-pop-campaign-page .mado-banner-area__summary {
    display: grid;
    gap: 8px;
}

#mado-pop-campaign-page .mado-banner-area__summary > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 9px 10px;
    border-bottom: 1px solid #e3eaf1;
}

#mado-pop-campaign-page .mado-banner-area__summary strong {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-banner-area__summary span {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

#mado-pop-campaign-page .mado-banner-area__status {
    min-height: 20px;
    color: #0f7776;
    font-size: 12px;
    font-weight: 700;
}

#mado-pop-campaign-page .mado-banner-area__preview {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px);
}

#mado-pop-campaign-page .mado-banner-area-preview {
    display: grid;
    gap: 12px;
    padding: 16px;
}

#mado-pop-campaign-page .mado-banner-area-preview__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#mado-pop-campaign-page .mado-banner-area-preview__head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

#mado-pop-campaign-page .mado-banner-area-preview__tabs {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid #cbd8e4;
    border-radius: 999px;
    background: #f8fafc;
}

#mado-pop-campaign-page .mado-banner-area-preview__tabs button {
    min-height: 30px;
    padding: 5px 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-banner-area-preview__tabs button.is-selected {
    background: var(--mado-brand-accent, #06bfb5);
    color: #ffffff;
}

#mado-pop-campaign-page .mado-banner-area-preview__meta {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

#mado-pop-campaign-page .mado-banner-area-preview__viewport {
    width: 100%;
    max-width: 720px;
    min-height: 430px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #cbd8e4;
    border-radius: 16px;
    background: #ffffff;
    transition: width .2s ease;
}

#mado-pop-campaign-page .mado-banner-area-preview__viewport[data-device="tablet"] {
    width: 74%;
}

#mado-pop-campaign-page .mado-banner-area-preview__viewport[data-device="mobile"] {
    width: 42%;
    min-width: 250px;
}

#mado-pop-campaign-page .mado-banner-area-preview__browser-top {
    display: flex;
    gap: 5px;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-bottom: 1px solid #e1e8ef;
    background: #f4f7fa;
}

#mado-pop-campaign-page .mado-banner-area-preview__browser-top span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #b8c5d2;
}

#mado-pop-campaign-page .mado-banner-area-preview__page {
    display: grid;
    gap: 16px;
    min-height: 404px;
    align-content: start;
    padding: 22px 18px 28px;
    background-color: #fbfdff;
    background-image:
        linear-gradient(rgba(148, 163, 184, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .10) 1px, transparent 1px);
    background-size: 18px 18px;
}

#mado-pop-campaign-page .mado-banner-area-preview__content {
    display: grid;
    gap: 7px;
    width: min(82%, 500px);
    margin: 0 auto;
}

#mado-pop-campaign-page .mado-banner-area-preview__content span {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .28);
}

#mado-pop-campaign-page .mado-banner-area-preview__content span:nth-child(2) {
    width: 76%;
}

#mado-pop-campaign-page .mado-banner-area-preview__content span:nth-child(3) {
    width: 58%;
}

#mado-pop-campaign-page .mado-banner-area-preview__inline-area {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--mado-banner-area-ratio, 4.09);
    min-height: 92px;
    max-height: 250px;
    overflow: hidden;
    margin: 6px auto;
    border: 1px dashed rgba(6, 191, 181, .35);
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
}

#mado-pop-campaign-page .mado-banner-area-preview__track {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 0;
    transform: translateX(0);
    transition: transform .28s ease;
}

#mado-pop-campaign-page .mado-banner-area-preview__banner {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 4px;
    flex: 0 0 var(--mado-banner-card-basis, calc(33.333% - 7px));
    min-width: 0;
    height: 100%;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: var(--mado-banner-preview-bg, #e6fbf9);
    color: var(--mado-banner-preview-text, #0f172a);
    box-shadow: none;
    overflow: hidden;
}

#mado-pop-campaign-page .mado-banner-area-preview__banner.is-placeholder {
    place-items: center;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

#mado-pop-campaign-page .mado-banner-area-preview__banner-id {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #0f7776;
    font-size: 9px;
    font-weight: 900;
}

#mado-pop-campaign-page .mado-banner-area-preview__banner-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
}

#mado-pop-campaign-page .mado-banner-area-preview__banner-title {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#mado-pop-campaign-page .mado-banner-area-preview__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid #d0d9e2;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #334155;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

#mado-pop-campaign-page .mado-banner-area-preview__arrow.is-prev {
    left: 7px;
}

#mado-pop-campaign-page .mado-banner-area-preview__arrow.is-next {
    right: 7px;
}

#mado-pop-campaign-page .mado-banner-area-preview__arrow:disabled {
    opacity: .35;
    cursor: default;
}

#mado-pop-campaign-page .mado-banner-area-preview__help {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.6;
}

@media (max-width: 1080px) {
    #mado-pop-campaign-page .mado-banner-area__layout {
        grid-template-columns: minmax(0, 1fr);
    }
    #mado-pop-campaign-page .mado-banner-area__preview {
        position: static;
    }
    #mado-pop-campaign-page .mado-banner-area-preview__viewport {
        max-width: 680px;
    }
}

@media (max-width: 720px) {
    #mado-pop-campaign-page .mado-banner-area__head {
        display: grid;
    }
    #mado-pop-campaign-page .mado-banner-area__head-actions {
        justify-content: flex-start;
        margin-left: 0;
    }
    #mado-pop-campaign-page .mado-banner-area__steps,
    #mado-pop-campaign-page .mado-banner-area-preview {
        padding: 15px;
    }
    #mado-pop-campaign-page .mado-banner-area__size-fields,
    #mado-pop-campaign-page .mado-banner-area__device-counts,
    #mado-pop-campaign-page .mado-banner-area__motion-options {
        grid-template-columns: minmax(0, 1fr);
    }
    #mado-pop-campaign-page .mado-banner-area__times {
        display: none;
    }
    #mado-pop-campaign-page .mado-banner-area-preview__head {
        display: grid;
    }
    #mado-pop-campaign-page .mado-banner-area-preview__tabs {
        justify-self: start;
    }
}

@media (max-width: 520px) {
    #mado-pop-campaign-page .mado-banner-area__head-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    #mado-pop-campaign-page .mado-banner-area__head-actions .mado-ui-button {
        width: 100%;
    }
    #mado-pop-campaign-page .mado-banner-area__item-option {
        grid-template-columns: auto 48px minmax(0, 1fr);
    }
    #mado-pop-campaign-page .mado-banner-area__item-swatch {
        width: 48px;
        height: 38px;
    }
    #mado-pop-campaign-page .mado-banner-area__summary > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
    #mado-pop-campaign-page .mado-banner-area-preview__viewport[data-device="mobile"] {
        width: 100%;
        min-width: 0;
    }
}

/* BANNER AREA SAVE / PREVIEW / PUBLISH UI — 2026-09-06
 * 配置状態UIだけ。公開サイトCSSはwidget-runtime.cssを正本とする。
 */
#mado-pop-campaign-page .mado-banner-area__gate{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--mado-brand-accent-border,#b9eeea);border-radius:12px;background:var(--mado-brand-accent-soft,#e6fbf9);color:#0f5f5d}
#mado-pop-campaign-page .mado-banner-area__gate.is-error{border-color:#fecaca;background:#fff1f2;color:#991b1b}
#mado-pop-campaign-page .mado-banner-area__gate strong{font-size:14px}.mado-banner-area__gate span{font-size:12px;line-height:1.6}
#mado-pop-campaign-page .mado-banner-area__publication-state{display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#475569;font-size:12px}
#mado-pop-campaign-page .mado-banner-area__publication-state strong{flex:0 0 auto;color:#0f172a;font-size:12px}
#mado-pop-campaign-page .mado-banner-area__publication-state[data-state="published"]{border-color:var(--mado-brand-accent-border,#b9eeea);background:var(--mado-brand-accent-soft,#e6fbf9)}
#mado-pop-campaign-page .mado-banner-area__publish-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
#mado-pop-campaign-page .mado-banner-area__publish-flow>div{display:grid;gap:3px;padding:10px 12px;border:1px solid #dbe5ef;border-radius:10px;background:#fff}
#mado-pop-campaign-page .mado-banner-area__publish-flow strong{font-size:12px;color:#0f172a}
#mado-pop-campaign-page .mado-banner-area__publish-flow span{font-size:11px;line-height:1.5;color:#64748b}
#mado-pop-campaign-page .mado-banner-area__mount-code{display:grid;gap:10px;margin-top:14px;padding:12px;border:1px solid #dbe5ef;border-radius:10px;background:#f8fbff}
#mado-pop-campaign-page .mado-banner-area__mount-code[hidden]{display:none}
#mado-pop-campaign-page .mado-banner-area__mount-code label{display:grid;gap:5px}
#mado-pop-campaign-page .mado-banner-area__mount-code label>span{font-size:11px;font-weight:700;color:#475569}
#mado-pop-campaign-page .mado-banner-area__mount-code textarea,#mado-pop-campaign-page .mado-banner-area__mount-code input{width:100%;min-height:38px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}
#mado-pop-campaign-page .mado-banner-area__final-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
#mado-pop-campaign-page .mado-banner-area__status[data-state="success"]{color:#087f5b}
#mado-pop-campaign-page .mado-banner-area__status[data-state="error"]{color:#b42318}
#mado-pop-campaign-page [data-mado-banner-area-disabled="1"]{opacity:.72}
@media(max-width:720px){#mado-pop-campaign-page .mado-banner-area__publish-flow{grid-template-columns:1fr}}

/* BANNER AREA SAVED-PLACEMENT SWITCHER / 2026-09-06
 * - 配置は複数作成できる。既存areaの選択はarea_id、新規入口はnew=1だけを使う。
 * - creative選択・保存・公開の責任は変えず、管理画面のnavigation UIだけを担当する。
 */
#mado-pop-campaign-page .mado-banner-area__area-switcher {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: #f8fbff;
}
#mado-pop-campaign-page .mado-banner-area__area-switcher-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#mado-pop-campaign-page .mado-banner-area__area-switcher-head > strong {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}
#mado-pop-campaign-page .mado-banner-area__area-switcher-head .mado-ui-button {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 11px;
}
#mado-pop-campaign-page .mado-banner-area__area-switcher-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#mado-pop-campaign-page .mado-banner-area__area-switcher-item {
    display: inline-grid;
    gap: 2px;
    min-width: 138px;
    padding: 7px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    text-decoration: none;
}
#mado-pop-campaign-page .mado-banner-area__area-switcher-item:hover,
#mado-pop-campaign-page .mado-banner-area__area-switcher-item:focus-visible {
    border-color: var(--mado-brand-accent, #06bfb5);
    outline: none;
}
#mado-pop-campaign-page .mado-banner-area__area-switcher-item.is-active {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: var(--mado-brand-accent-soft, #e6fbf9);
}
#mado-pop-campaign-page .mado-banner-area__area-switcher-item strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#mado-pop-campaign-page .mado-banner-area__area-switcher-item span,
#mado-pop-campaign-page .mado-banner-area__area-switcher-empty {
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.4;
}
@media (max-width: 720px) {
    #mado-pop-campaign-page .mado-banner-area__area-switcher-head {
        align-items: stretch;
        flex-direction: column;
    }
    #mado-pop-campaign-page .mado-banner-area__area-switcher-list {
        display: grid;
        grid-template-columns: 1fr;
    }
    #mado-pop-campaign-page .mado-banner-area__area-switcher-item {
        min-width: 0;
    }
}

/* STATIC HTML INSTALLATION ENTRY / バナーから静的HTML設置へ（2026-09-06）
 * - 左ナビには追加せず、バナー公開フローの文脈内だけに案内する。
 * - destination側が一行コード設置を担当し、ここへHTML編集ロジックを複製しない。
 */
#mado-pop-campaign-page .mado-banner-area__static-html-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--mado-brand-accent-border, #b9eeea);
    border-radius: 12px;
    background: var(--mado-brand-accent-soft, #e6fbf9);
}

#mado-pop-campaign-page .mado-banner-area__static-html-help > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

#mado-pop-campaign-page .mado-banner-area__static-html-help strong {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

#mado-pop-campaign-page .mado-banner-area__static-html-help span {
    font-size: 12px;
    line-height: 1.6;
    color: #475569;
}

#mado-pop-campaign-page .mado-banner-area__static-html-help .mado-ui-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 720px) {
    #mado-pop-campaign-page .mado-banner-area__static-html-help {
        align-items: stretch;
        flex-direction: column;
    }

    #mado-pop-campaign-page .mado-banner-area__static-html-help .mado-ui-button {
        width: 100%;
        justify-content: center;
    }
}