/* Account settings mobile layout. Mirrors the approved desktop Federation page. */
@media (max-width: 767px) {
    html:has(.w_myinfo) body.gundam-skin #ajax-content.contents { padding-inline: 0 !important; }

    html:has(.w_myinfo) body.gundam-skin #ajax-content.contents > .page.w_myinfo {
        --myinfo-mobile-navy: #0a294e;
        --myinfo-mobile-blue: #176397;
        --myinfo-mobile-cyan: #22b9df;
        --myinfo-mobile-line: #9db1c2;
        box-sizing: border-box !important;
        display: flex !important;
        gap: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: -12px 0 0 !important;
        padding: 0 0 24px !important;
        overflow: visible !important;
        background:
            linear-gradient(90deg, rgb(91 119 143 / 10%) 1px, transparent 1px) 0 0 / 48px 100%,
            #edf2f6 !important;
        color: #173653 !important;
        flex-direction: column !important;
    }

    html:has(.w_myinfo) body.gundam-skin #ajax-content.contents > .page.w_myinfo *,
    html:has(.w_myinfo) body.gundam-skin #ajax-content.contents > .page.w_myinfo *::before,
    html:has(.w_myinfo) body.gundam-skin #ajax-content.contents > .page.w_myinfo *::after { box-sizing: border-box; }

    html:has(.w_myinfo) body.gundam-skin #ajax-content.contents > .page.w_myinfo > .page_ttl > span {
        position: relative !important;
        z-index: 1 !important;
        display: inline !important;
        color: #fff !important;
        font-family: "Malgun Gothic", sans-serif !important;
        font-size: 25px !important;
        font-weight: 900 !important;
        letter-spacing: -.04em !important;
        line-height: 1 !important;
        text-shadow: 0 2px 6px #00101f !important;
        transform: translateY(-5px) !important;
        -webkit-text-fill-color: #fff !important;
    }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page > .myinfo-shell {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        flex-direction: column !important;
    }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page :is(.myinfo-overview, .myinfo-profile, .myinfo-work-panel) {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--myinfo-mobile-line) !important;
        border-radius: 0 !important;
        background: #f8fafc !important;
        box-shadow: inset 0 0 0 4px #e5ebf0, 0 5px 12px rgb(20 48 73 / 9%) !important;
        color: #173653 !important;
        clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px) !important;
    }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-overview {
        display: grid !important;
        grid-template-rows: auto auto !important;
        background:
            linear-gradient(135deg, transparent 0 96%, #dbe4eb 96% 97%, transparent 97%),
            #f8fafc !important;
    }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-overview-main {
        display: grid !important;
        grid-template-columns: 90px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-width: 0 !important;
        padding: 18px 16px 14px !important;
        border-bottom: 1px solid #c5d2dc !important;
        align-items: center !important;
        transform: none !important;
    }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-medallion {
        width: 82px !important;
        height: 82px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent url('/skin/gundam_main/images/myinfo/gundam-myinfo-efsf-medallion-v1.png?v=1') center / contain no-repeat !important;
        filter: none !important;
        transform: none !important;
    }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-overview-copy { min-width: 0 !important; transform: none !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-title {
        margin: 0 0 8px !important;
        color: var(--myinfo-mobile-navy) !important;
        font-family: "Malgun Gothic", sans-serif !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        letter-spacing: -.04em !important;
        line-height: 1.25 !important;
        text-shadow: none !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-description {
        margin: 0 !important;
        color: #657d94 !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 1.55 !important;
        text-align: left !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-copy-break { display: none !important; }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-assets {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        min-height: 116px !important;
        padding: 0 !important;
        background: transparent !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-asset {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 54px !important;
        grid-template-rows: auto auto !important;
        gap: 4px 6px !important;
        min-width: 0 !important;
        padding: 18px 12px !important;
        border: 0 !important;
        align-items: center !important;
        transform: none !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-asset:first-child { border-right: 1px solid #c5d2dc !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-asset-label {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        color: #315c82 !important;
        font-size: 10px !important;
        font-weight: 800 !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-asset-value,
    html:has(.w_myinfo) body.gundam-skin #myinfo_page #myinfo_mb_emoney {
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: var(--myinfo-mobile-navy) !important;
        font-family: ChosunGu, "Malgun Gothic", sans-serif !important;
        font-size: clamp(17px, 5.2vw, 22px) !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        letter-spacing: -.04em !important;
        text-overflow: ellipsis !important;
        text-shadow: none !important;
        white-space: nowrap !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-asset-art {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
        display: block !important;
        margin: 0 !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        transform: none !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-asset-art--money {
        width: 54px !important;
        height: 42px !important;
        background-image: url('/skin/gundam_main/images/myinfo/gundam-myinfo-money-tokens-v2.png?v=2') !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-asset-art--point {
        width: 42px !important;
        height: 42px !important;
        background-image: url('/skin/gundam_main/images/myinfo/gundam-myinfo-point-coin-v1.png?v=1') !important;
    }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile {
        display: block !important;
        padding: 16px 14px !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-heading {
        display: flex !important;
        gap: 8px !important;
        margin: 0 0 12px !important;
        padding: 0 0 10px !important;
        border: 0 !important;
        border-bottom: 2px solid #6f8da5 !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-heading .myinfo-section-icon {
        display: inline !important;
        color: #176397 !important;
        font-size: 20px !important;
        transform: none !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-heading h3 {
        display: block !important;
        margin: 0 !important;
        color: var(--myinfo-mobile-navy) !important;
        font-size: 18px !important;
        font-weight: 900 !important;
    }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        border: 1px solid #b9c8d4 !important;
        background: #fff !important;
        transform: none !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-field {
        display: flex !important;
        min-width: 0 !important;
        min-height: 64px !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-right: 1px solid #d0dbe4 !important;
        border-bottom: 1px solid #d0dbe4 !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-field:nth-child(2) { border-right: 0 !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-field:nth-child(3) { border-bottom: 0 !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-field > span,
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-security-copy > span {
        margin: 0 0 4px !important;
        color: #315c82 !important;
        font-size: 10px !important;
        font-weight: 800 !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-field strong {
        overflow: hidden !important;
        color: var(--myinfo-mobile-navy) !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-field--security {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        min-height: 62px !important;
        padding-inline: 12px !important;
        border: 0 !important;
        align-items: center !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-field--security strong { font-size: 11px !important; white-space: normal !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-profile-security-icon,
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-section-icon--shield {
        border-color: #176397 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-security-grid {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: column !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-work-panel {
        padding: 16px 14px 18px !important;
        background: #f8fafc !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-work-panel[hidden] { display: none !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-panel-heading {
        display: flex !important;
        gap: 6px 10px !important;
        margin: 0 0 12px !important;
        padding: 0 0 10px !important;
        border-bottom: 2px solid #6f8da5 !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-panel-title {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-panel-title h3 {
        margin: 0 !important;
        color: var(--myinfo-mobile-navy) !important;
        font-size: 18px !important;
        font-weight: 900 !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-panel-heading p {
        margin: 0 !important;
        color: #718598 !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-section-icon,
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-guide-icon,
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-guide-arrow { color: #176397 !important; }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-form {
        display: grid !important;
        gap: 8px !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-field {
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr) !important;
        min-height: 42px !important;
        align-items: center !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-field-label {
        padding-left: 10px !important;
        color: #315c82 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-form input {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 10px !important;
        border: 1px solid #9db1c2 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: inset 0 1px 3px rgb(24 52 80 / 7%) !important;
        color: var(--myinfo-mobile-navy) !important;
        font-size: 11px !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-form input::placeholder { color: #8a9bab !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-form-actions { margin-top: 4px !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-primary-button {
        display: flex !important;
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 12px !important;
        border: 1px solid #a40c14 !important;
        border-radius: 0 !important;
        background: linear-gradient(#e42b33, #b50710) !important;
        box-shadow: inset 0 1px rgb(255 255 255 / 38%), 0 3px 7px rgb(91 0 8 / 20%) !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        align-items: center !important;
        justify-content: center !important;
        flex: none !important;
    }

    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-guide-list {
        display: grid !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #b9c8d4 !important;
        background: #fff !important;
        list-style: none !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-guide-list li {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) 12px !important;
        gap: 8px !important;
        min-height: 58px !important;
        padding: 9px 10px !important;
        border: 0 !important;
        border-bottom: 1px solid #d0dbe4 !important;
        background: transparent !important;
        color: #29465f !important;
        align-items: center !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-guide-list li:last-child { border-bottom: 0 !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-guide-icon {
        display: flex !important;
        font-size: 18px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-guide-list strong {
        display: block !important;
        color: var(--myinfo-mobile-navy) !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-guide-list small {
        display: block !important;
        margin-top: 3px !important;
        color: #718598 !important;
        font-size: 9px !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 340px) {
    html:has(.w_myinfo) body.gundam-skin #ajax-content.contents > .page.w_myinfo { margin-top: -10px !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-overview-main { grid-template-columns: 72px minmax(0, 1fr) !important; padding-inline: 12px !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-medallion { width: 68px !important; height: 68px !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-asset { grid-template-columns: minmax(0, 1fr) 38px !important; padding-inline: 9px !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-asset-art--money { width: 42px !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-asset-art--point { width: 36px !important; height: 36px !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-field { grid-template-columns: 98px minmax(0, 1fr) !important; }
    html:has(.w_myinfo) body.gundam-skin #myinfo_page .myinfo-field-label { padding-left: 8px !important; }
}

/* Beat legacy ID-level dark account rules and fixed desktop-derived tracks. */
@media (max-width: 767px) {
    html:has(.w_myinfo) body.gundam-skin.gundam-skin #ajax-content.contents > #myinfo_page.page.w_myinfo > .page_ttl > span {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: auto !important;
        margin: 0 !important;
        text-indent: 0 !important;
        transform: translate(-50%, -70%) !important;
    }

    html:has(.w_myinfo) body.gundam-skin.gundam-skin #ajax-content.contents > #myinfo_page.page.w_myinfo > .myinfo-shell > .myinfo-overview {
        display: grid !important;
        grid-template-rows: auto auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        background:
            linear-gradient(135deg, transparent 0 96%, #dbe4eb 96% 97%, transparent 97%),
            #f8fafc !important;
    }

    html:has(.w_myinfo) body.gundam-skin.gundam-skin #ajax-content.contents > #myinfo_page .myinfo-overview-main {
        display: grid !important;
        grid-template-columns: 90px minmax(0, 1fr) !important;
        width: 100% !important;
    }

    html:has(.w_myinfo) body.gundam-skin.gundam-skin #ajax-content.contents > #myinfo_page .myinfo-assets {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    html:has(.w_myinfo) body.gundam-skin.gundam-skin #ajax-content.contents > #myinfo_page .myinfo-asset {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 54px !important;
        grid-template-rows: auto auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html:has(.w_myinfo) body.gundam-skin.gundam-skin #ajax-content.contents > #myinfo_page .myinfo-primary-button {
        border: 1px solid #a40c14 !important;
        background: linear-gradient(#e42b33, #b50710) !important;
        box-shadow: inset 0 1px rgb(255 255 255 / 38%), 0 3px 7px rgb(91 0 8 / 20%) !important;
        color: #fff !important;
    }

    html:has(.w_myinfo) body.gundam-skin.gundam-skin #ajax-content.contents > #myinfo_page .myinfo-profile-field:nth-child(3) {
        grid-column: 1 / -1 !important;
        border-right: 0 !important;
    }

    html:has(.w_myinfo) body.gundam-skin.gundam-skin #ajax-content.contents > #myinfo_page .myinfo-field {
        border: 1px solid #9db1c2 !important;
        background: #fff !important;
    }

    html:has(.w_myinfo) body.gundam-skin.gundam-skin #ajax-content.contents > #myinfo_page .myinfo-form input {
        border: 0 !important;
        border-left: 1px solid #b6c5d1 !important;
    }
}

@media (max-width: 340px) {
    html:has(.w_myinfo) body.gundam-skin.gundam-skin #ajax-content.contents > #myinfo_page .myinfo-overview-main {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }

    html:has(.w_myinfo) body.gundam-skin.gundam-skin #ajax-content.contents > #myinfo_page .myinfo-asset {
        grid-template-columns: minmax(0, 1fr) 38px !important;
    }
}