.sc-image-dropdown { position: relative !important; display: inline-block; width: 100%; z-index: 1000; }
/* ===========================
   ショートコード専用ドロップダウン（完全独立）
   =========================== */
.sc-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.75rem;
    background-color: #101518;
    color: #CFD8DC;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
}
.sc-dropdown-toggle--input{ height:38px; padding:0 0.75rem; border-radius:0.375rem; display:flex; align-items:center; justify-content:space-between; }
.sc-dropdown-toggle--input:focus-visible{ outline:2px solid #86b7fe; outline-offset:2px; }
.sc-dropdown-toggle--input i{ margin-left:.5rem; font-size:.9rem; opacity:.8; }

.sc-dropdown-menu{ max-height:240px; }
.sc-dropdown-item{ padding:6px 8px; gap:8px; font-size:.9rem; }
.sc-option-thumbnail{ width:80px; height:60px; border-radius:4px; object-fit:cover; }
.sc-option-text{ font-size:.9rem; }

.sc-dropdown-toggle:hover {
    background-color: #1a1f24;
    border-color: #86b7fe;
}

.sc-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #101518;
    color: #CFD8DC;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 10001;
    display: none;
    margin-top: 0.25rem;
    min-width: 100%;
}

.sc-dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    cursor: pointer;
    border-bottom: 1px solid #2a2f34;
    transition: background-color 0.2s;
    color: #CFD8DC;
}

.sc-dropdown-item:hover {
    background-color: #1a1f24;
}

.sc-option-thumbnail {
    width: 40px;
    height: 30px;
    object-fit: cover;
    margin-right: 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid #dee2e6;
}

.sc-option-text {
    flex: 1;
    font-size: 0.9em;
    color: #CFD8DC;
}
/**
 * ショートコード用スタイル
 * ポップアップスライド内のショートコード装飾用
 */

/* ===========================
   テキストエディタショートコード
   =========================== */
.popup-text-content {
    font-size: inherit;
}

/* ===========================
   リンクボタンショートコード
   =========================== */
.popup-button-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 0.375rem;
    transition: all 0.3s;
}

/* ボタンカスタムスタイル（将来の拡張用） */
.popup-button-link.btn-custom-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

/* ===========================
   ボタン（Bootstrap風の見た目を前提ページなしでも再現）
   =========================== */
.popup-button-link.btn-primary { background-color:#0d6efd; border:1px solid #0d6efd; color:#fff; }
.popup-button-link.btn-primary:hover { background-color:#0b5ed7; border-color:#0a58ca; color:#fff; }

.popup-button-link.btn-secondary { background-color:#6c757d; border:1px solid #6c757d; color:#fff; }
.popup-button-link.btn-secondary:hover { background-color:#5c636a; border-color:#565e64; color:#fff; }

.popup-button-link.btn-success { background-color:#198754; border:1px solid #198754; color:#fff; }
.popup-button-link.btn-success:hover { background-color:#157347; border-color:#146c43; color:#fff; }

.popup-button-link.btn-danger { background-color:#dc3545; border:1px solid #dc3545; color:#fff; }
.popup-button-link.btn-danger:hover { background-color:#bb2d3b; border-color:#b02a37; color:#fff; }

.popup-button-link.btn-warning { background-color:#ffc107; border:1px solid #ffc107; color:#212529; }
.popup-button-link.btn-warning:hover { background-color:#ffca2c; border-color:#ffc720; color:#212529; }

.popup-button-link.btn-info { background-color:#0dcaf0; border:1px solid #0dcaf0; color:#000; }
.popup-button-link.btn-info:hover { background-color:#31d2f2; border-color:#25cff2; color:#000; }

.popup-button-link.btn-outline-primary { background-color:transparent; border:1px solid #0d6efd; color:#0d6efd; }
.popup-button-link.btn-outline-primary:hover { background-color:#0d6efd; color:#fff; }

/* ===========================
   情報ボックスショートコード
   =========================== */
.popup-info-box {
    padding: 15px;
    border-radius: 5px;
    margin: 10px 0;
    border-left: 4px solid rgba(0, 0, 0, 0.2);
}

/* 情報ボックスのプリセット（将来の拡張用） */
.popup-info-box.box-info {
    background-color: #d1ecf1;
    border-left-color: #0c5460;
}

.popup-info-box.box-success {
    background-color: #d4edda;
    border-left-color: #155724;
}

.popup-info-box.box-warning {
    background-color: #fff3cd;
    border-left-color: #856404;
}

.popup-info-box.box-danger {
    background-color: #f8d7da;
    border-left-color: #721c24;
}

/* ===========================
   区切り線ショートコード
   =========================== */
.popup-hr {
    border: 0;
    margin: 20px 0;
}

/* 区切り線カスタムスタイル（将来の拡張用） */
.popup-hr.hr-gradient {
    height: 2px;
    background: linear-gradient(to right, transparent, #667eea, transparent);
}

.popup-hr.hr-thick {
    border-top: 3px solid #dee2e6;
}

.popup-hr.hr-shadow {
    height: 1px;
    background: #dee2e6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ===========================
   ダイアログ用スタイル
   =========================== */
dialog {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 90%;
    z-index: 10000;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog h4 {
    margin-top: 0;
    margin-bottom: 1rem;
}

dialog .form-group {
    margin-bottom: 1rem;
}

dialog .btn-group {
    margin-top: 1rem;
}

/* ===========================
   カスタムドロップダウン
   =========================== */
.custom-dropdown {
    position: relative !important;
    display: inline-block;
    width: 100%;
    z-index: 1000;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.75rem;
    background-color: #101518 !important; /* 他のinputと同じ背景色 */
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
    color: #CFD8DC !important;
}

.dropdown-toggle:hover {
    border-color: #86b7fe;
    background-color: #101518 !important; /* ホバー時の背景色 */
}

/* カスタムドロップダウンの強制統一（Bootstrap上書き用） */
.custom-dropdown .dropdown-toggle {
    background-color: #101518 !important;
    color: #CFD8DC !important;
}
.custom-dropdown .dropdown-menu {
    background-color: #101518 !important;
    color: #CFD8DC !important;
}
.custom-dropdown .dropdown-item {
    color: #212529 !important;
}
.custom-dropdown .dropdown-item:hover {
    background-color: #101518 !important;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 10001 !important;
    display: none;
    margin-top: 0.25rem;
    min-width: 100%;
}

/* ===========================
   ボタンスタイルドロップダウン
   =========================== */
.dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}

.dropdown-item .style-preview {
    flex: 0 0 150px;
    margin-right: 15px;
}

.dropdown-item span {
    flex: 1;
    font-size: 0.9em;
    color: #495057;
}

/* ===========================
   カラープリセットグリッド
   =========================== */
.color-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.color-preset-item {
    height: 60px;
    border: 2px solid #dee2e6;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    position: relative;
}

.color-preset-item:hover {
    border-color: #007bff;
    transform: scale(1.05);
}

.color-preset-item.custom {
    background-color: #fff;
    flex-direction: column;
}

.color-preset-item.selected {
    border-color: #007bff;
    background-color: #e7f3ff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
    transform: scale(1.05);
}

.color-preset-item.selected::after {
    /* Font Awesome がない場合でも表示されるようにフォールバック文字を指定 */
    content: '\f00c';
    font-family: 'FontAwesome', Arial, sans-serif;
    position: absolute;
    top: 5px;
    right: 5px;
    color: #007bff;
    font-size: 14px;
    font-weight: bold;
}

.preset-label {
    position: absolute;
    bottom: 5px;
    font-size: 0.75em;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.7);
}

/* ===========================
   区切り線スタイルリスト
   =========================== */
.hr-style-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hr-style-item {
    border: 2px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative; /* チェックアイコン配置用 */
}

.hr-style-item:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.hr-style-item.selected {
    border-color: #4da3ff !important;
    background-color: #0f1720 !important;
    box-shadow: 0 0 0 2px rgba(77,163,255,0.35) !important;
    position: relative;
}

.hr-style-item.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #4da3ff; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.hr-style-item.selected::after { content: '✔'; font-family: Arial, sans-serif; position: absolute; top: 6px; right: 10px; color: #4da3ff; font-size: 18px; font-weight: 700; line-height: 1; }

/* 選択中のプレビュー線も強調する */
.hr-style-item.selected .hr-preview .popup-hr,
.hr-style-item.selected .hr-preview hr { border-top-color: #4da3ff !important; border-top-width: 2px !important; border-top-style: solid !important; }

.hr-style-item .hr-preview {
    margin-bottom: 5px;
}

.hr-style-item span {
    display: block;
    text-align: center;
    font-size: 0.9em;
    color: #495057;
}

/* ===========================
   レスポンシブ対応
   =========================== */
@media (max-width: 768px) {
    .popup-text-content {
        font-size: 0.9em !important;
    }
    
    .popup-button-link {
        width: 100%;
        text-align: center;
        padding: 0.6rem 1rem;
    }
    
    .popup-info-box {
        padding: 10px;
        font-size: 0.9em;
    }
    
    .color-preset-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dropdown-item .style-preview {
        flex: 0 0 120px;
    }
}

@media (max-width: 480px) {
    .popup-text-content {
        font-size: 0.85em !important;
    }
    
    .popup-button-link {
        font-size: 0.9em;
    }
    
    .popup-info-box {
        padding: 8px;
        font-size: 0.85em;
    }
    
    .color-preset-grid {
        grid-template-columns: 1fr;
    }
    
    .dropdown-item .style-preview {
        flex: 0 0 100px;
    }
}

/* =============================
   ショートコード フレックスレイアウト
   ============================= */

/* フレックスレイアウトがある場合の高さ調整 */
.white-popup .popup-content:has(.popup-flex-container) {
  max-height: none !important; /* フレックスレイアウトの場合は高さ制限を完全に解除 */
  overflow: visible !important;
}

/* フレックスレイアウト専用のポップアップ調整 */
.white-popup:has(.popup-flex-container) {
  max-height: none !important;
  overflow: visible !important;
}

/* Magnific Popupの親要素の高さ制限も解除 */
.mfp-content:has(.popup-flex-container) {
  max-height: none !important;
  overflow: visible !important;
}

.mfp-container:has(.popup-flex-container) {
  max-height: none !important;
  overflow: visible !important;
}

/* フレックスレイアウトの高さ制御 */
.popup-flex-container {
  align-items: flex-start;
  min-height: auto;
  max-height: none;
  flex-wrap: wrap;
}

.popup-flex-item {
  flex: 0 1 calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols)) !important;
  min-width: 0 !important;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  overflow: visible;
  box-sizing: border-box;
}

/* ポップアップ内のフレックスレイアウト専用の調整 */
.white-popup .popup-flex-container {
  margin-bottom: 1em;
  width: 100%;
}

.white-popup .popup-flex-item {
  padding: 0.5em;
  /*border: 1px solid transparent;
  transition: border-color 0.2s ease;
  box-sizing: border-box;*/
}

.white-popup .popup-flex-item:hover {
  border-color: rgba(0, 0, 0, 0.1);
}

/* フレックスレイアウトのレスポンシブ対応を強化 */
@media (max-width: 768px) {
  .white-popup .popup-content:has(.popup-flex-container) {
    max-height: min(90vh, 800px);
  }
  
  .popup-flex-container {
    flex-wrap: wrap !important;
    --cols: 2 !important; /* タブレットでは2列 */
  }
}

@media (max-width: 480px) {
  .white-popup .popup-content:has(.popup-flex-container) {
    max-height: min(95vh, 600px);
  }
  
  .popup-flex-container {
    --cols: 1 !important; /* モバイルでは1列 */
  }
}

/* =============================
   ショートコード 従来のflexユーティリティ
   ============================= */

/* mfp-content と white-popup 両方でユーティリティが効くようにスコープを拡張 */
.mfp-content, .white-popup {
  /* base flex */
  .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0; /* dp_testは余白をクラスで制御 */
  }

  /* 簡易グリッド（flex_1〜flex_10 × bw_0〜bw_25）: ページ内専用・dp_test移植ではなく現行仕様に最適化 */
  .flex.flex_1 > * {
    width: calc((100% - (1 - 1) * var(--bw-percent, 0%)) / 1);
    flex: 0 0 calc((100% - (1 - 1) * var(--bw-percent, 0%)) / 1);
    box-sizing: border-box;
    min-width: 0;
    margin-bottom: 1em;
  }
  .flex.flex_1 > *:not(:nth-child(1n)) { margin-right: var(--bw-percent, 0%); }
  .flex.flex_1 > *:nth-child(1n) { margin-right: 0; }

  .flex.flex_2 > * {
    width: calc((100% - (2 - 1) * var(--bw-percent, 0%)) / 2);
    flex: 0 0 calc((100% - (2 - 1) * var(--bw-percent, 0%)) / 2);
    box-sizing: border-box;
    min-width: 0;
    margin-bottom: 1em;
  }
  .flex.flex_2 > *:not(:nth-child(2n)) { margin-right: var(--bw-percent, 0%); }
  .flex.flex_2 > *:nth-child(2n) { margin-right: 0; }

  .flex.flex_3 > * {
    width: calc((100% - (3 - 1) * var(--bw-percent, 0%)) / 3);
    flex: 0 0 calc((100% - (3 - 1) * var(--bw-percent, 0%)) / 3);
    box-sizing: border-box;
    min-width: 0;
    margin-bottom: 1em;
  }
  .flex.flex_3 > *:not(:nth-child(3n)) { margin-right: var(--bw-percent, 0%); }
  .flex.flex_3 > *:nth-child(3n) { margin-right: 0; }

  .flex.flex_4 > * {
    width: calc((100% - (4 - 1) * var(--bw-percent, 0%)) / 4);
    flex: 0 0 calc((100% - (4 - 1) * var(--bw-percent, 0%)) / 4);
    box-sizing: border-box;
    min-width: 0;
    margin-bottom: 1em;
  }
  .flex.flex_4 > *:not(:nth-child(4n)) { margin-right: var(--bw-percent, 0%); }
  .flex.flex_4 > *:nth-child(4n) { margin-right: 0; }

  .flex.flex_5 > * {
    width: calc((100% - (5 - 1) * var(--bw-percent, 0%)) / 5);
    flex: 0 0 calc((100% - (5 - 1) * var(--bw-percent, 0%)) / 5);
    box-sizing: border-box;
    min-width: 0;
    margin-bottom: 1em;
  }
  .flex.flex_5 > *:not(:nth-child(5n)) { margin-right: var(--bw-percent, 0%); }
  .flex.flex_5 > *:nth-child(5n) { margin-right: 0; }

  .flex.flex_6 > * {
    width: calc((100% - (6 - 1) * var(--bw-percent, 0%)) / 6);
    flex: 0 0 calc((100% - (6 - 1) * var(--bw-percent, 0%)) / 6);
    box-sizing: border-box;
    min-width: 0;
    margin-bottom: 1em;
  }
  .flex.flex_6 > *:not(:nth-child(6n)) { margin-right: var(--bw-percent, 0%); }
  .flex.flex_6 > *:nth-child(6n) { margin-right: 0; }

  .flex.flex_7 > * {
    width: calc((100% - (7 - 1) * var(--bw-percent, 0%)) / 7);
    flex: 0 0 calc((100% - (7 - 1) * var(--bw-percent, 0%)) / 7);
    box-sizing: border-box;
    min-width: 0;
    margin-bottom: 1em;
  }
  .flex.flex_7 > *:not(:nth-child(7n)) { margin-right: var(--bw-percent, 0%); }
  .flex.flex_7 > *:nth-child(7n) { margin-right: 0; }

  .flex.flex_8 > * {
    width: calc((100% - (8 - 1) * var(--bw-percent, 0%)) / 8);
    flex: 0 0 calc((100% - (8 - 1) * var(--bw-percent, 0%)) / 8);
    box-sizing: border-box;
    min-width: 0;
    margin-bottom: 1em;
  }
  .flex.flex_8 > *:not(:nth-child(8n)) { margin-right: var(--bw-percent, 0%); }
  .flex.flex_8 > *:nth-child(8n) { margin-right: 0; }

  .flex.flex_9 > * {
    width: calc((100% - (9 - 1) * var(--bw-percent, 0%)) / 9);
    flex: 0 0 calc((100% - (9 - 1) * var(--bw-percent, 0%)) / 9);
    box-sizing: border-box;
    min-width: 0;
    margin-bottom: 1em;
  }
  .flex.flex_9 > *:not(:nth-child(9n)) { margin-right: var(--bw-percent, 0%); }
  .flex.flex_9 > *:nth-child(9n) { margin-right: 0; }

  .flex.flex_10 > * {
    width: calc((100% - (10 - 1) * var(--bw-percent, 0%)) / 10);
    flex: 0 0 calc((100% - (10 - 1) * var(--bw-percent, 0%)) / 10);
    box-sizing: border-box;
    min-width: 0;
    margin-bottom: 1em;
  }
  .flex.flex_10 > *:not(:nth-child(10n)) { margin-right: var(--bw-percent, 0%); }
  .flex.flex_10 > *:nth-child(10n) { margin-right: 0; }

  /* 余白クラス（bw_0〜bw_25） */
  .bw_0 { --bw-percent: 0%; }
  .bw_1 { --bw-percent: 1%; }
  .bw_2 { --bw-percent: 2%; }
  .bw_3 { --bw-percent: 3%; }
  .bw_4 { --bw-percent: 4%; }
  .bw_5 { --bw-percent: 5%; }
  .bw_6 { --bw-percent: 6%; }
  .bw_7 { --bw-percent: 7%; }
  .bw_8 { --bw-percent: 8%; }
  .bw_9 { --bw-percent: 9%; }
  .bw_10 { --bw-percent: 10%; }
  .bw_11 { --bw-percent: 11%; }
  .bw_12 { --bw-percent: 12%; }
  .bw_13 { --bw-percent: 13%; }
  .bw_14 { --bw-percent: 14%; }
  .bw_15 { --bw-percent: 15%; }
  .bw_16 { --bw-percent: 16%; }
  .bw_17 { --bw-percent: 17%; }
  .bw_18 { --bw-percent: 18%; }
  .bw_19 { --bw-percent: 19%; }
  .bw_20 { --bw-percent: 20%; }
  .bw_21 { --bw-percent: 21%; }
  .bw_22 { --bw-percent: 22%; }
  .bw_23 { --bw-percent: 23%; }
  .bw_24 { --bw-percent: 24%; }
  .bw_25 { --bw-percent: 25%; }
}

/* =============================
   フレックスショートコード レスポンシブ対応
   ============================= */

/* PC表示の確実な維持（769px以上） - CSS変数による動的計算 */
@media (min-width: 769px) {
  .popup-flex-container {
    flex-wrap: nowrap !important;
  }
}

/* タブレット対応 (768px以下) - CSS変数による動的計算 */
@media (max-width: 768px) {
  .popup-flex-container {
    flex-wrap: wrap !important;
    --cols: 2 !important; /* タブレットでは2列 */
  }
}

/* モバイル対応 (480px以下) - CSS変数による動的計算 */
@media (max-width: 480px) {
  .popup-flex-container {
    --cols: 1 !important; /* モバイルでは1列 */
  }
}