/* ============================================================
   独自フッター（全ページ共通・和紙/墨/ネオンの正本世界観）
   正本トークン: homepage.css / header-theme.css の :root と同値。
   このファイル単体で成立するようトークンは .cg-footer スコープで自己定義。
   - SWELL 既定フッター (.l-footer) は非表示にし、.cg-footer を描画。
   - includes/cardgame-footer.php (Cardgame_Footer) が wp_footer で出力。
   ============================================================ */

/* ===== SWELL 既定フッターを非表示（テーマ非改変・CSSのみ） ===== */
#footer.l-footer,
.l-footer {
    display: none !important;
}

/* ===== 独自フッター ===== */
.cg-footer {
    --cgf-sumi:    #15151c;
    --cgf-sumi-2:  #1d1d26;
    --cgf-paper:   #f7f5ef;
    --cgf-paper70: rgba(247,245,239,.72);
    --cgf-paper45: rgba(247,245,239,.46);
    --cgf-neon:    #ff2d6f;
    --cgf-rule:    rgba(247,245,239,.14);
    --cgf-disp:    "Zen Antique", "Yu Mincho", "YuMincho", serif;
    --cgf-ui:      "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
    --cgf-num:     "Oswald", "Zen Kaku Gothic New", sans-serif;

    background-color: var(--cgf-sumi);
    /* 墨地に淡いドット（正本の紙テクスチャの反転） */
    background-image: radial-gradient(rgba(247,245,239,.045) 1px, transparent 1px);
    background-size: 22px 22px;
    color: var(--cgf-paper70);
    font-family: var(--cgf-ui);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    margin-top: 64px;
    border-top: 3px solid var(--cgf-neon);
    /* トップページ (.cg-home) の position:fixed 紙テクスチャ層 (::before z-index:-1) に
       覆われないよう、独自のスタッキングコンテキストを上位に確立する。 */
    position: relative;
    z-index: 1;
}

.cg-footer * { box-sizing: border-box; }

.cg-footer-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 24px 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px 56px;
    align-items: flex-start;
    justify-content: space-between;
}

/* ---- ブランド ---- */
.cg-footer-brand {
    flex: 1 1 300px;
    min-width: 260px;
    max-width: 420px;
}
.cg-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.cg-footer-logo-txt {
    font-family: var(--cgf-disp);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: .04em;
    color: var(--cgf-paper);
}
.cg-footer-badge {
    font-family: var(--cgf-num);
    font-size: 10px;
    letter-spacing: .16em;
    font-weight: 600;
    color: var(--cgf-paper);
    border: 1.5px solid var(--cgf-paper);
    border-radius: 2px;
    padding: 2px 6px;
    white-space: nowrap;
    transform: translateY(-1px);
}
.cg-footer-tagline {
    margin: 16px 0 0;
    font-size: 13.5px;
    color: var(--cgf-paper45);
    line-height: 1.8;
}

/* ---- リンク集（複数カラム） ---- */
.cg-footer-cols {
    flex: 2 1 460px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px 48px;
    justify-content: flex-start;
}
.cg-footer-col {
    flex: 0 1 auto;
    min-width: 140px;
}
.cg-footer-col-h {
    margin: 0 0 14px;
    padding: 0 0 8px;
    font-family: var(--cgf-disp);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--cgf-paper);
    border-bottom: 1px solid var(--cgf-rule);
}
.cg-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cg-footer-col li { margin: 0 0 9px; }
.cg-footer-col a {
    display: inline-block;
    font-size: 13.5px;
    color: var(--cgf-paper70);
    text-decoration: none;
    position: relative;
    transition: color .15s ease;
}
.cg-footer-col a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--cgf-neon);
    transition: width .18s ease;
}
.cg-footer-col a:hover {
    color: var(--cgf-paper);
}
.cg-footer-col a:hover::after { width: 100%; }

/* ---- ベース帯（注記 + コピーライト） ---- */
.cg-footer-base {
    border-top: 1px solid var(--cgf-rule);
    background: var(--cgf-sumi-2);
}
.cg-footer-base-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 24px 28px;
}
.cg-footer-note {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--cgf-paper45);
    line-height: 1.85;
}
.cg-footer-copy {
    margin: 0;
    font-family: var(--cgf-num);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--cgf-paper45);
}

/* ---- レスポンシブ（スマホで縦積み） ---- */
@media (max-width: 900px) {
    .cg-footer-in {
        flex-direction: column;
        gap: 32px;
        padding: 44px 20px 32px;
    }
    /* 列方向では flex-basis が「高さ」になり無駄な余白が出るため、内容高に戻す */
    .cg-footer-brand {
        flex: 0 0 auto;
        max-width: none;
    }
    .cg-footer-cols {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (max-width: 560px) {
    .cg-footer { margin-top: 40px; }
    .cg-footer-cols {
        gap: 28px;
    }
    .cg-footer-col {
        flex: 1 1 42%;
        min-width: 120px;
    }
    .cg-footer-base-in { padding: 20px 20px 26px; }
}