/* MAWAN_R5R1_VISUAL_FINAL PUBLIC */

body.mw-public-r5 {

    font-family:
        Inter,
        "Noto Sans TC",
        "Microsoft JhengHei",
        system-ui,
        sans-serif !important;

    font-size:
        15px !important;

    font-weight:
        500 !important;

    line-height:
        1.65 !important;
}


body.mw-public-r5
:is(
    button,
    input,
    select,
    textarea
) {

    font-family:
        inherit !important;

    font-size:
        14px !important;

    font-weight:
        600 !important;
}


body.mw-public-r5
:is(
    .site-desktop-nav a,
    .site-mobile-nav a
) {

    font-size:
        14px !important;

    font-weight:
        700 !important;
}


body.mw-public-r5
:is(
    p,
    li
) {

    font-size:
        14.5px !important;

    font-weight:
        500 !important;

    line-height:
        1.7 !important;
}


body.mw-public-r5 small {

    font-size:
        12.5px !important;

    line-height:
        1.55 !important;
}


body.mw-public-r5
:is(
    .eyebrow,
    [class*="eyebrow"],
    [class*="kicker"],
    [class*="overline"]
) {

    font-size:
        11px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .12em !important;
}


body.mw-public-r5
:is(
    .site-footer,
    .site-footer a,
    .site-footer span,
    .site-footer p
) {

    font-size:
        13px !important;

    line-height:
        1.65 !important;
}


body.mw-public-r5
:is(
    .footer-title,
    .site-footer strong
) {

    font-size:
        14px !important;

    font-weight:
        800 !important;
}


body.mw-public-r5
:is(
    label,
    [class*="label"],
    [class*="hint"],
    [class*="meta"],
    [class*="badge"],
    [class*="tag"],
    [class*="chip"],
    [class*="pill"]
) {

    font-size:
        12.5px !important;
}


body.mw-public-r5
table th {

    font-size:
        13px !important;

    font-weight:
        700 !important;
}


body.mw-public-r5
table td {

    font-size:
        14px !important;
}


body.mw-public-r5
:is(
    .button,
    .btn,
    button
) {

    min-height:
        40px;

    font-size:
        14px !important;

    font-weight:
        700 !important;
}


@media (
    max-width: 760px
) {

    body.mw-public-r5 {

        font-size:
            14.5px !important;
    }


    body.mw-public-r5
    :is(
        p,
        li
    ) {

        font-size:
            14px !important;
    }

}

/* BEGIN MAWAN_R5R2_UI_CLEANUP_PUBLIC */

/* ==========================================================
   MAWAN_R5R2_UI_CLEANUP PUBLIC
   社群網址卡片跟首頁其他卡片統一
   ========================================================== */

body.mw-public-r5
:is(
    #social,
    #socials,
    #social-links,
    #community,
    .social-section,
    .social-links,
    .social-grid,
    .community-grid,
    .official-socials
) {

    --mw-social-gap:
        14px;
}


body.mw-public-r5
:is(
    #social,
    #socials,
    #social-links,
    #community,
    .social-section,
    .social-links,
    .social-grid,
    .community-grid,
    .official-socials
)
:is(
    .grid,
    .cards,
    .social-grid,
    .social-links,
    .community-grid
) {

    gap:
        var(--mw-social-gap) !important;
}


body.mw-public-r5
:is(
    #social,
    #socials,
    #social-links,
    #community,
    .social-section,
    .social-links,
    .social-grid,
    .community-grid,
    .official-socials
)
a {

    min-height:
        122px !important;

    padding:
        18px !important;

    border-radius:
        14px !important;
}


body.mw-public-r5
:is(
    #social,
    #socials,
    #social-links,
    #community,
    .social-section,
    .social-links,
    .social-grid,
    .community-grid,
    .official-socials
)
a
:is(
    h3,
    strong
) {

    font-size:
        16.5px !important;

    font-weight:
        800 !important;

    line-height:
        1.25 !important;
}


body.mw-public-r5
:is(
    #social,
    #socials,
    #social-links,
    #community,
    .social-section,
    .social-links,
    .social-grid,
    .community-grid,
    .official-socials
)
a
:is(
    p,
    span,
    small
) {

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.55 !important;
}


/* 即使實際 section class 不同，也抓首頁四個社群網址卡片 */

body.mw-public-r5
main
a[href*="discord.gg"],

body.mw-public-r5
main
a[href*="instagram.com"],

body.mw-public-r5
main
a[href*="threads.com"],

body.mw-public-r5
main
a[href*="tiktok.com"] {

    min-height:
        122px !important;

    padding:
        18px !important;

    border-radius:
        14px !important;

    font-family:
        Inter,
        "Noto Sans TC",
        "Microsoft JhengHei",
        system-ui,
        sans-serif !important;
}


body.mw-public-r5
main
a[href*="discord.gg"]
:is(
    h3,
    strong
),

body.mw-public-r5
main
a[href*="instagram.com"]
:is(
    h3,
    strong
),

body.mw-public-r5
main
a[href*="threads.com"]
:is(
    h3,
    strong
),

body.mw-public-r5
main
a[href*="tiktok.com"]
:is(
    h3,
    strong
) {

    font-size:
        16.5px !important;

    font-weight:
        800 !important;
}


body.mw-public-r5
main
a[href*="discord.gg"]
:is(
    p,
    span,
    small
),

body.mw-public-r5
main
a[href*="instagram.com"]
:is(
    p,
    span,
    small
),

body.mw-public-r5
main
a[href*="threads.com"]
:is(
    p,
    span,
    small
),

body.mw-public-r5
main
a[href*="tiktok.com"]
:is(
    p,
    span,
    small
) {

    font-size:
        13px !important;

    font-weight:
        500 !important;
}

/* END MAWAN_R5R2_UI_CLEANUP_PUBLIC */

/* BEGIN MAWAN_R5R4_UI_POLISH_PUBLIC */
/* ==========================================================
   首頁社群網址
   跟其他首頁大型區塊同寬
   ========================================================== */

body.mw-public-r5
main
:is(
    section,
    div
):has(
    a[href*="discord.gg"]
):has(
    a[href*="instagram.com"]
):has(
    a[href*="threads.com"]
):has(
    a[href*="tiktok.com"]
) {
    width:
        100% !important;

    max-width:
        none !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;

    box-sizing:
        border-box !important;
}


body.mw-public-r5
main
section:has(
    a[href*="discord.gg"]
):has(
    a[href*="instagram.com"]
):has(
    a[href*="threads.com"]
):has(
    a[href*="tiktok.com"]
) {
    padding:
        36px !important;

    border-radius:
        24px !important;
}


body.mw-public-r5
main
section:has(
    a[href*="discord.gg"]
):has(
    a[href*="instagram.com"]
):has(
    a[href*="threads.com"]
):has(
    a[href*="tiktok.com"]
)
:is(
    .social-grid,
    .social-links,
    .community-grid,
    .grid,
    .cards
) {
    width:
        100% !important;

    max-width:
        none !important;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        14px !important;
}


body.mw-public-r5
main
section:has(
    a[href*="discord.gg"]
):has(
    a[href*="instagram.com"]
):has(
    a[href*="threads.com"]
):has(
    a[href*="tiktok.com"]
)
a {
    min-height:
        118px !important;

    padding:
        18px !important;

    border-radius:
        14px !important;
}


@media (
    max-width: 900px
) {

    body.mw-public-r5
    main
    section:has(
        a[href*="discord.gg"]
    ):has(
        a[href*="instagram.com"]
    ):has(
        a[href*="threads.com"]
    ):has(
        a[href*="tiktok.com"]
    )
    :is(
        .social-grid,
        .social-links,
        .community-grid,
        .grid,
        .cards
    ) {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }

}


@media (
    max-width: 560px
) {

    body.mw-public-r5
    main
    section:has(
        a[href*="discord.gg"]
    ):has(
        a[href*="instagram.com"]
    ):has(
        a[href*="threads.com"]
    ):has(
        a[href*="tiktok.com"]
    ) {
        padding:
            22px !important;
    }


    body.mw-public-r5
    main
    section:has(
        a[href*="discord.gg"]
    ):has(
        a[href*="instagram.com"]
    ):has(
        a[href*="threads.com"]
    ):has(
        a[href*="tiktok.com"]
    )
    :is(
        .social-grid,
        .social-links,
        .community-grid,
        .grid,
        .cards
    ) {
        grid-template-columns:
            1fr !important;
    }

}
/* END MAWAN_R5R4_UI_POLISH_PUBLIC */

/* BEGIN MAWAN_R5R6_TARGETED_FIX_V2_PUBLIC_CSS */
/* ==========================================================
   首頁角色頭像相簿
   ========================================================== */

.mw-role-mosaic-card {
    overflow:
        hidden !important;
}

.mw-role-mosaic {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            6,
            minmax(
                0,
                1fr
            )
        ) !important;

    grid-auto-rows:
        56px !important;

    gap:
        6px !important;

    width:
        100% !important;

    min-height:
        118px !important;

    margin:
        0 0 16px !important;

    padding:
        8px !important;

    border:
        1px solid
        rgba(
            223,
            183,
            92,
            .12
        ) !important;

    border-radius:
        14px !important;

    background:
        rgba(
            255,
            255,
            255,
            .018
        ) !important;
}

.mw-role-mosaic-avatar {
    min-width:
        0 !important;

    overflow:
        hidden !important;

    border-radius:
        10px !important;

    background:
        #11110f !important;
}

.mw-role-mosaic-avatar img {
    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        cover !important;
}

.mw-role-caption-removed {
    display:
        none !important;
}


/* ==========================================================
   首頁社群區
   ========================================================== */

body.mw-public-r5
.mw-social-shell-r56 {
    width:
        min(
            calc(
                100vw - 32px
            ),
            var(
                --mw-social-reference-width,
                1180px
            )
        ) !important;

    max-width:
        var(
            --mw-social-reference-width,
            1180px
        ) !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    padding:
        28px !important;

    border-radius:
        22px !important;
}

body.mw-public-r5
.mw-social-shell-r56
a[href*="discord.gg"],

body.mw-public-r5
.mw-social-shell-r56
a[href*="instagram.com"],

body.mw-public-r5
.mw-social-shell-r56
a[href*="threads.com"],

body.mw-public-r5
.mw-social-shell-r56
a[href*="tiktok.com"] {
    min-height:
        108px !important;

    padding:
        16px !important;

    border-radius:
        13px !important;
}


/* ==========================================================
   下單分類
   ========================================================== */

.mw-catalog-filter-card[hidden] {
    display:
        none !important;
}


@media (
    max-width: 760px
) {
    .mw-role-mosaic {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            ) !important;

        grid-auto-rows:
            52px !important;
    }

    body.mw-public-r5
    .mw-social-shell-r56 {
        padding:
            20px !important;
    }
}
/* END MAWAN_R5R6_TARGETED_FIX_V2_PUBLIC_CSS */

/* BEGIN MAWAN_R72_PUBLIC_CSS */
body.mw-public-r5 .crew-type-card .crew-figure.mw-r72-crew-figure-ready{display:block!important;overflow:hidden!important;padding:6px!important;box-sizing:border-box!important}
body.mw-public-r5 .crew-type-card .crew-figure.mw-r72-crew-figure-ready::before,
body.mw-public-r5 .crew-type-card .crew-figure.mw-r72-crew-figure-ready::after{display:none!important;content:none!important}
body.mw-public-r5 .crew-type-card .crew-figure .mw-r72-crew-avatars{width:100%!important;height:100%!important;min-height:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:5px!important}
body.mw-public-r5 .crew-type-card .crew-figure .mw-r72-crew-avatar{min-width:0!important;min-height:0!important;overflow:hidden!important;border-radius:10px!important;background:#11110f!important}
body.mw-public-r5 .crew-type-card .crew-figure .mw-r72-crew-avatar img{display:block!important;width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important;object-position:center!important}
body.mw-public-r5 #social.mw-social-hub{width:min(1080px,calc(100% - 48px))!important;max-width:1080px!important;margin:48px auto!important;padding:24px!important;border-radius:20px!important;box-sizing:border-box!important}
body.mw-public-r5 #social.mw-social-hub .mw-social-grid{width:100%!important;max-width:none!important;gap:12px!important}
body.mw-public-r5 #social.mw-social-hub .mw-social-card,
body.mw-public-r5 #social.mw-social-hub a.mw-social-card{min-height:82px!important;padding:14px 16px!important;border-radius:12px!important}
@media(max-width:760px){body.mw-public-r5 #social.mw-social-hub{width:calc(100% - 28px)!important;margin:36px auto!important;padding:18px!important}}
/* END MAWAN_R72_PUBLIC_CSS */

/* BEGIN MAWAN_R9_SOCIAL_EXACT_ALIGN */
body.mw-public-r5 #social.mw-social-hub {
    width: min(var(--site-max), calc(100% - 40px)) !important;
    max-width: var(--site-max) !important;
    margin: 60px auto 0 !important;
    padding: 60px !important;
    border: 1px solid rgba(229, 194, 116, .18) !important;
    border-radius: 38px !important;
    box-sizing: border-box !important;
}

body.mw-public-r5 #social.mw-social-hub .mw-social-kicker {
    color: var(--site-gold) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .27em !important;
}

body.mw-public-r5 #social.mw-social-hub .mw-social-title {
    margin: 14px 0 18px !important;
    color: var(--site-text) !important;
    font-family: Georgia, "Noto Serif TC", serif !important;
    font-size: clamp(38px, 4vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    letter-spacing: -.03em !important;
}

body.mw-public-r5 #social.mw-social-hub .mw-social-copy {
    max-width: 560px !important;
    margin: 0 !important;
    color: var(--site-muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.85 !important;
}

body.mw-public-r5 #social.mw-social-hub .mw-social-grid {
    width: 100% !important;
    max-width: none !important;
    margin-top: 30px !important;
    gap: 12px !important;
}

body.mw-public-r5 #social.mw-social-hub .mw-social-card {
    min-height: 112px !important;
    padding: 18px 20px !important;
    border-radius: 16px !important;
}

body.mw-public-r5 #social.mw-social-hub .mw-social-card strong {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

body.mw-public-r5 #social.mw-social-hub .mw-social-card span {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

@media (max-width: 760px) {
    body.mw-public-r5 #social.mw-social-hub {
        width: calc(100% - 28px) !important;
        margin: 42px auto 0 !important;
        padding: 38px 27px !important;
        border-radius: 38px !important;
    }
}
/* END MAWAN_R9_SOCIAL_EXACT_ALIGN */