/* =========================================================
   Patonapost Entrance 共通レンダリング
   - 公開画面とadminプレビューで同じ文字・膜・靄の規則を使う
   - 文字の疑似複製を使わず、改行時も本文と影を同じglyphへ描画する
   ========================================================= */



.entrance-managed-main-panel {
    --entrance-main-overlay-rgba: rgba(255, 255, 255, 0.36);
    --entrance-main-overlay-blur-px: 12px;
    --entrance-main-haze-rgba: rgba(255, 255, 255, 0.62);
    --entrance-main-haze-width-pct: 2.5000;
    --entrance-main-haze-blur-px: 24px;
    --entrance-main-radius-px: 28px;
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    /*
     * 説明エリア全体には管理UI上の境界線設定が存在しない。
     * 旧デザイン由来のborder / outline / 固定drop-shadowを残さず、
     * 全体膜と管理UIで指定した周囲の靄だけを描画する。
     */
    border: 0 !important;
    outline: none !important;
    border-radius: var(--entrance-main-radius-px) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}



/* =========================================================
   説明エリア全体膜
   - panel本体のbackgroundへ混ぜず、独立した1枚のlayerとして描画する
   - 小見出し/見出し/説明/小項目の個別背景膜とはCSS変数も描画責務も共有しない
   ========================================================= */
.entrance-managed-main-panel::before {
    /*
     * login.php の旧きらめき用 .showcase-panel::before / .mobile-panel::before より
     * この管理対象レイヤーを必ず優先する。
     * 外部CSSは login.php 内の旧styleより先に読み込まれるため、ここは !important が必要。
     */
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border: 0 !important;
    outline: none !important;
    border-radius: inherit !important;
    background: var(--entrance-main-overlay-rgba) !important;

    /*
     * 周囲の靄はpanel本体の別shadowではなく、全体膜と同じ疑似要素から連続して描く。
     * これにより「膜の硬い端」と「外枠ぼかし」の間に別の境界線が見える状態を防ぐ。
     */
    box-shadow:
        0 0 var(--entrance-main-haze-blur-px)
            calc(var(--entrance-main-haze-width-pct) * 1cqw)
            var(--entrance-main-haze-rgba) !important;
    backdrop-filter: blur(var(--entrance-main-overlay-blur-px)) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(var(--entrance-main-overlay-blur-px)) saturate(1.08) !important;
    pointer-events: none !important;
}

.entrance-managed-main-panel .panel-kicker,
.entrance-managed-main-panel h1,
.entrance-managed-main-panel h2,
.entrance-managed-main-panel .panel-lead,
.entrance-managed-main-panel .mode-row,
.entrance-managed-main-panel .feature-grid,
.entrance-managed-main-panel .speaker-demo {
    position: relative;
    z-index: 1;
}



/* =========================================================
   旧キャッチ縁取り疑似文字を停止する
   - data-outline-textの別描画が改行・折返し時に本体文字とずれるため使用しない
   - 影・光は実文字そのものへ描画する
   ========================================================= */
.entrance-managed-main-panel h1::before,
.entrance-managed-main-panel h2::before {
    content: none !important;
    display: none !important;
}



.entrance-managed-main-panel .panel-kicker {
    font-size: clamp(9px, 1.55cqw, 13px) !important;
    line-height: 1.2;
}



.entrance-managed-main-panel h1,
.entrance-managed-main-panel h2 {
    color: #fff;
    font-size: clamp(22px, 7.1cqw, 56px) !important;
    line-height: 1.20 !important;
    /* 日本語見出しの標準字間。旧paltによる過度な詰まりを打ち消した上で、
       文字同士が接触しにくい程度だけ余白を持たせる。 */
    font-feature-settings: "palt" 0 !important;
    letter-spacing: 0.02em !important;
    text-shadow:
        0 2px 4px rgba(71, 55, 63, 0.34),
        0 7px 20px rgba(67, 48, 58, 0.24),
        0 0 24px rgba(255, 215, 231, 0.42) !important;
}



.entrance-managed-main-panel h2 {
    font-size: clamp(20px, 6.25cqw, 48px) !important;
}



.entrance-managed-main-panel .panel-lead {
    font-size: clamp(10px, 2.05cqw, 16px) !important;
    line-height: 1.72 !important;
}



/* =========================================================
   保存済み旧HTMLにp/divが残っていても余白差を出さない
   - 新規保存はsanitizerでbrへ正規化する
   ========================================================= */
.entrance-managed-main-panel .panel-kicker p,
.entrance-managed-main-panel .panel-kicker div,
.entrance-managed-main-panel h1 p,
.entrance-managed-main-panel h1 div,
.entrance-managed-main-panel h2 p,
.entrance-managed-main-panel h2 div,
.entrance-managed-main-panel .panel-lead p,
.entrance-managed-main-panel .panel-lead div,
.entrance-detail-textbox p,
.entrance-detail-textbox div {
    margin: 0;
    padding: 0;
}



.entrance-managed-main-panel .panel-kicker span,
.entrance-managed-main-panel h1 span,
.entrance-managed-main-panel h2 span,
.entrance-managed-main-panel .panel-lead span,
.entrance-detail-textbox span {
    line-height: inherit;
}


/* =========================================================
   rich文字色を最終表示へそのまま反映する
   - 見出しの旧白縁取りはcolor指定spanへ継承させない
   - inline color自体は親の既定色より優先されるため、その契約を壊さない
   ========================================================= */
.entrance-managed-main-panel h1 span[style*="color:"],
.entrance-managed-main-panel h2 span[style*="color:"] {
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
}



/* =========================================================
   adminメインプレビュー
   - 公開画面と同じshowcase系classを使い、プレビュー専用の寸法だけ上書きする
   ========================================================= */
.ep-main-preview .entrance-managed-main-panel {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 7%;
    width: auto !important;
    max-width: none !important;
    max-height: 86%;
    padding: clamp(10px, 3cqw, 24px);
    overflow: hidden;
}



.ep-main-preview-phone .entrance-managed-main-panel {
    left: 6%;
    right: 6%;
    bottom: 8%;
}


/* =========================================================
   メイン説明内の共通部品
   - login.phpとadmin previewで同じglass/文字組みを使う
   ========================================================= */
.entrance-managed-main-panel .panel-kicker {
    display: inline-block;
    margin: 0 0 8px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #704c5e;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-weight: 900;
    letter-spacing: 0.16em;
}



.entrance-managed-main-panel .panel-lead {
    display: inline-block;
    margin: 13px 0 0;
    max-width: 46em;
    padding: 10px 14px;
    border: 0 solid transparent;
    border-radius: 0;
    color: #4d3b45;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}



.entrance-managed-main-panel .mode-row,
.entrance-managed-main-panel .feature-grid,
.entrance-managed-main-panel .speaker-demo {
    margin-top: 1.9cqw;
}



.entrance-managed-main-panel .mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9cqw;
}



.entrance-managed-main-panel .mode-chip {
    display: inline-flex;
    align-items: center;
    min-height: 3.6cqw;
    padding: 0.8cqw 1.4cqw;
    border: 0 solid transparent;
    border-radius: 0;
    color: #614654;
    background: transparent;
    font-size: clamp(8px, 1.7cqw, 12px);
    font-weight: 800;
    white-space: nowrap;
}



.entrance-managed-main-panel .feature-grid,
.entrance-managed-main-panel .speaker-demo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1cqw;
}



.entrance-managed-main-panel .feature-card,
.entrance-managed-main-panel .speaker-demo-card {
    min-width: 0;
    padding: 0;
    border: 0 solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}



.entrance-managed-main-panel .feature-card strong,
.entrance-managed-main-panel .speaker-demo-card strong {
    display: block;
    color: #493945;
    font-size: clamp(8px, 1.8cqw, 13px);
    line-height: 1.35;
}



.entrance-managed-main-panel .feature-card span,
.entrance-managed-main-panel .speaker-demo-card span {
    display: block;
    margin-top: 0.55cqw;
    color: #65545d;
    font-size: clamp(7px, 1.45cqw, 11px);
    line-height: 1.5;
}



/* =========================================================
   Entrance文字背景帯 共通描画
   - DB値をCSS変数へ変換し、公開画面とadmin previewで同じ見た目にする
   ========================================================= */
.entrance-managed-main-panel .panel-kicker,
.entrance-managed-main-panel h1,
.entrance-managed-main-panel h2,
.entrance-managed-main-panel .panel-lead {
    box-sizing: border-box;
    background: var(--entrance-band-bg, transparent) !important;
    border: var(--entrance-band-border-width, 0px) solid var(--entrance-band-border, transparent) !important;
    border-radius: var(--entrance-band-radius, 0px) !important;
    padding:
        var(--entrance-band-padding-y, 0px)
        var(--entrance-band-padding-x, 0px) !important;
    /*
     * login.php の旧 .panel-kicker / .panel-lead 側の固定blurに戻されないよう、
     * 管理UIの個別背景膜blurを最終値として固定する。
     */
    backdrop-filter: var(--entrance-band-filter, none) !important;
    -webkit-backdrop-filter: var(--entrance-band-filter, none) !important;
    box-shadow: none !important;
}


/* =========================================================
   メイン小項目の個別背景膜
   - 小項目ごとにPC/スマホ別の色・透明度・ぼかし・縁・余白を持つ
   - mode_chip / feature_card / speaker_demoを同一の背景膜契約で描画する
   ========================================================= */
.entrance-managed-main-panel .mode-chip,
.entrance-managed-main-panel .feature-card,
.entrance-managed-main-panel .speaker-demo-card {
    box-sizing: border-box;
    background: var(--entrance-band-bg, rgba(255, 255, 255, 0.24)) !important;
    border: var(--entrance-band-border-width, 1px) solid var(--entrance-band-border, rgba(255, 255, 255, 0.72)) !important;
    border-radius: var(--entrance-band-radius, 18px) !important;
    padding:
        var(--entrance-band-padding-y, 12px)
        var(--entrance-band-padding-x, 15px) !important;
    /*
     * login.php の旧 .mode-chip / .feature-card / .speaker-demo-card の固定blur・影より、
     * 管理UIの小項目個別背景膜設定を優先する。
     */
    backdrop-filter: var(--entrance-band-filter, none) !important;
    -webkit-backdrop-filter: var(--entrance-band-filter, none) !important;
    box-shadow: none !important;
}


.entrance-managed-main-panel .mode-chip {
    border-radius: var(--entrance-band-radius, 999px) !important;
}


.entrance-managed-main-panel .mode-chip .mode-chip-title,
.entrance-managed-main-panel .mode-chip .mode-chip-body {
    display: block;
    min-width: 0;
}

.entrance-managed-main-panel .mode-chip .mode-chip-body {
    margin-top: 0.25em;
    font-size: 0.88em;
    font-weight: 600;
    white-space: normal;
}


/* =========================================================
   adminプレビュー用 layer inspection
   - 保存値は変更せず「合成 / 全体膜のみ / 個別膜のみ」を見比べる
   ========================================================= */
.ep-main-preview-layer-global .entrance-managed-main-panel .panel-kicker,
.ep-main-preview-layer-global .entrance-managed-main-panel h1,
.ep-main-preview-layer-global .entrance-managed-main-panel h2,
.ep-main-preview-layer-global .entrance-managed-main-panel .panel-lead,
.ep-main-preview-layer-global .entrance-managed-main-panel .mode-chip,
.ep-main-preview-layer-global .entrance-managed-main-panel .feature-card,
.ep-main-preview-layer-global .entrance-managed-main-panel .speaker-demo-card {
    background: transparent !important;
    border-color: transparent !important;
    border-width: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ep-main-preview-layer-individual .entrance-managed-main-panel::before {
    opacity: 0 !important;
}


/* =========================================================
   admin実rendererプレビュー専用のレイヤー確認
   - 通常の下書きURL/公開画面には適用しない
   - 全体膜と個別膜を実DOMのまま単独確認できる
   ========================================================= */
html.entrance-embedded-preview.entrance-preview-layer-global-only .entrance-managed-main-panel .panel-kicker,
html.entrance-embedded-preview.entrance-preview-layer-global-only .entrance-managed-main-panel h1,
html.entrance-embedded-preview.entrance-preview-layer-global-only .entrance-managed-main-panel h2,
html.entrance-embedded-preview.entrance-preview-layer-global-only .entrance-managed-main-panel .panel-lead,
html.entrance-embedded-preview.entrance-preview-layer-global-only .entrance-managed-main-panel .mode-chip,
html.entrance-embedded-preview.entrance-preview-layer-global-only .entrance-managed-main-panel .feature-card,
html.entrance-embedded-preview.entrance-preview-layer-global-only .entrance-managed-main-panel .speaker-demo-card {
    --entrance-band-bg: transparent !important;
    --entrance-band-border: transparent !important;
    --entrance-band-border-width: 0px !important;
    --entrance-band-blur: 0px !important;
    background: transparent !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}



html.entrance-embedded-preview.entrance-preview-layer-individual-only .entrance-managed-main-panel::before {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}



html.entrance-embedded-preview .entrance-preview-badge {
    display: none !important;
}