/* ============================================================
 * 下部フローティングバナー（#float-banner）
 * config/float-banners.json の paths に一致するページだけで読み込まれる。
 * 遷移直後は出さず、app.js が is-revealed を付けたら下からスライドアップ。
 * ============================================================ */
#float-banner {
    position: fixed;
    left: 50%;
    bottom: calc(var(--ds-space-stack-xs) + env(safe-area-inset-bottom, 0px));
    /* 初期は少し下へオフセット → is-revealed で 0 に戻してスライドアップ */
    transform: translate(-50%, 24px);
    z-index: 200; /* ヘッダー(110)・ドロワー(100)より前面 */
    width: min(480px, calc(100vw - 24px));
    border-radius: var(--ds-radius-card);
    overflow: hidden;
    box-shadow: var(--ds-shadow-popover);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}

#float-banner.is-revealed {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

#float-banner a,
#float-banner img {
    display: block;
    width: 100%;
    height: auto;
}

#float-banner-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--ds-radius-avatar);
    background: rgba(0, 0, 0, .55);
    color: var(--ds-color-text-inverse);
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}

#float-banner-close:hover,
#float-banner-close:focus-visible {
    background: rgba(0, 0, 0, .75);
}

/* PC はコンテンツの邪魔をしないよう右下に寄せ、少し小さく出す */
@media (min-width: 768px) {
    #float-banner {
        left: auto;
        right: var(--ds-space-inline-md);
        transform: translateY(24px);
        width: min(384px, calc(100vw - 24px));
    }
    #float-banner.is-revealed { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    #float-banner,
    #float-banner.is-revealed {
        transform: translate(-50%, 0);
        transition: opacity .2s ease, visibility .2s ease;
    }
    @media (min-width: 768px) {
        #float-banner,
        #float-banner.is-revealed { transform: translateY(0); }
    }
}

/* ------------------------------------------------------------
 * テキストCTA版（config の creative ではなく button を指定したとき）
 * 記事本文の [btn-cta] と同じ立体ボタンを、白いカードに載せて出す。
 * ------------------------------------------------------------ */
#float-banner.float-banner--button {
    /* 画像版の overflow:hidden だとボタンの立体影が切れるので解除する */
    overflow: visible;
    width: min(420px, calc(100vw - 24px));
    /* 地のカード（背景・枠線・影）は持たせず、ボタンとコピーだけを浮かせる */
    padding: 0 0 4px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}

#float-banner .float-banner__sub {
    /* 地のカードが無いぶん、コピーの後ろだけ白く敷いて可読性を確保する。
       色は本文のマーカー（.article-marker）と同じクリーム。
       inline-block なので背景は文字幅ぶんだけ付く（帯にはしない） */
    display: inline-block;
    margin: 0 0 var(--ds-space-stack-xs);
    padding: 2px var(--ds-space-inline-sm);
    background: var(--ds-color-badge-bg-cream);
    border-radius: var(--ds-radius-chip);
    font-size: var(--ds-text-body-size);
    font-weight: var(--ds-text-h3-weight);
    line-height: 1.5;
    color: var(--ds-color-text);
}

#float-banner .float-banner__btn {
    --btn-depth: var(--ds-color-cta-orange-depth);
    display: block;
    min-height: var(--ds-touch-target-min);
    padding: var(--ds-space-stack-sm) var(--ds-space-stack-lg);
    background-color: var(--ds-color-cta-bg);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%);
    color: var(--ds-color-text-inverse);
    font-weight: var(--ds-text-h3-weight);
    text-align: center;
    text-decoration: none;
    border-radius: var(--ds-radius-button);
    box-shadow: 0 4px 0 var(--btn-depth);
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}

#float-banner .float-banner__btn:hover,
#float-banner .float-banner__btn:focus-visible {
    /* style.css の a:hover { opacity: .65 } を打ち消す（地色ごと透けるのを防ぐ） */
    opacity: 1;
    background-color: var(--ds-color-cta-bg-hover);
    transform: translateY(1px);
    box-shadow: 0 3px 0 var(--btn-depth);
}

#float-banner .float-banner__btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--btn-depth);
}

@media (prefers-reduced-motion: reduce) {
    #float-banner .float-banner__btn { transition: background-color .15s ease; }
    #float-banner .float-banner__btn:hover,
    #float-banner .float-banner__btn:active { transform: none; }
}