/* ==========================================================================
   site-footer.css — 共通フッター（全ページ共通）
   マークアップは site-footer.js が差し込みます。

   カード（.container）の左右・下の余白ぶん帯をはみ出させて、
   カードの下端いっぱいに濃紫の帯を敷いています。
   余白の値（--sf-pl / --sf-pr / --sf-pb）は site-footer.js が実際の値を測って入れます。
   ========================================================================== */

.site-footer {
    --sf-pl: 24px;
    --sf-pr: 24px;
    --sf-pb: 60px;

    position: relative;
    margin: 56px calc(var(--sf-pr) * -1) calc(var(--sf-pb) * -1) calc(var(--sf-pl) * -1);
    padding: 36px calc(var(--sf-pl) + 8px) 48px;
    background: linear-gradient(135deg, #1e1b4b 0%, #311042 100%);
    color: #fff;
    text-align: left;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
    letter-spacing: 0.04em;
}

/* 旧フッターが残るページ（トップ・よくある質問）では、その下に少し詰めて置く */
footer:not(.site-footer) + .site-footer {
    margin-top: 48px;
}

/* ---------- ロゴ ---------- */
.site-footer-logo {
    display: inline-block;
    margin: 0 0 28px -8px;    /* SVG の左の余白ぶん寄せて、下のリンクと頭をそろえる */
    line-height: 0;
}

.site-footer-logo img {
    display: block;
    width: 190px;
    height: auto;
}

/* ---------- リンク ---------- */
.site-footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    word-break: keep-all;
    overflow-wrap: anywhere;
    transition: opacity 0.2s ease;
}

.site-footer-links a:hover {
    opacity: 0.7;
}

.site-footer-sparkle {
    flex: none;
    width: 10px;
    height: 10px;
    fill: #fff;
}

.site-footer-links a.is-line .site-footer-sparkle {
    fill: #06c755;
}

/* ---------- コピーライト ---------- */
.site-footer-copy {
    margin: 32px 0 0;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- スマホ：追従ボタン（発掘カウンター・上に戻る）に被らない余白 ---------- */
@media (max-width: 480px) {
    .site-footer {
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- 隠し発掘：コピーライトの「!」長押し（badges.js）を濃紫の上で見えるように ---------- */
.site-footer-copy.bdg-foot.is-pressing {
    color: #fff;
}

/* ---------- スマホ：一番下まで引っぱったときに帯の下にクリーム色が見えないように ----------
   ページの外側（body）の色をフッターの紫にそろえます。
   カード（.container）が画面幅いっぱいにクリームを敷いているので、ふだんの見た目は変わりません。 */
@media (max-width: 480px) {
    html:has(.site-footer),
    body:has(.site-footer) {
        background: #2a1543;
    }

    /* ヘッダーは少し透ける色なので、うしろの紫が透けて灰色っぽくならないよう、完全なクリームに
       （写真の上に重ねるバンドページの透明なヘッダーは、cms-pages.css のほうが優先される） */
    body:has(.site-footer) .site-header:not(.is-menu-open) {
        background-color: #f4f1eb;
    }
}