/*
 * My Numbers Hero - Generator Layout Match
 */

html body.lm-v3-inner.page-my-numbers {
    background: #edf3f9 !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 680px) 320px !important;
    justify-content: space-between !important;
    align-items: center !important;

    width: 100vw !important;
    max-width: none !important;
    min-height: 340px !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding:
        38px
        calc((100vw - min(1180px, calc(100vw - 40px))) / 2)
        !important;

    gap: 80px !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    background:
        radial-gradient(
            circle at 68% 38%,
            rgba(73, 151, 235, .18),
            transparent 30%
        ),
        linear-gradient(
            110deg,
            #0c3d6d 0%,
            #15568f 58%,
            #164f83 100%
        ) !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-hero::before,
html body.lm-v3-inner.page-my-numbers .my-numbers-hero::after {
    display: none !important;
    content: none !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 680px !important;

    text-align: left !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-hero .label {
    align-self: flex-start !important;

    color: #f5ca69 !important;
    background: rgba(221,164,47,.12) !important;
    border-color: rgba(245,202,105,.35) !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-hero h1 {
    margin: 17px 0 13px !important;

    color: #fff !important;
    font-size: 51px !important;
    line-height: 1.09 !important;
    letter-spacing: -.055em !important;

    text-align: left !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-hero p {
    margin: 0 !important;

    color: #c8d9e9 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;

    text-align: left !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-hero-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    margin-top: 23px !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-hero-actions .btn {
    min-width: 150px !important;
    min-height: 44px !important;

    border-radius: 11px !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-summary-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    justify-self: end !important;

    width: 320px !important;
    height: 190px !important;

    padding: 24px !important;

    border: 1px solid rgba(255,255,255,.21) !important;
    border-radius: 19px !important;

    text-align: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(70,145,221,.92),
            rgba(23,78,133,.94)
        ) !important;

    box-shadow:
        0 18px 38px rgba(0,28,62,.22),
        inset 0 1px 0 rgba(255,255,255,.13) !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-summary-card > span {
    color: #d8e7f4 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-summary-card > strong {
    display: block !important;

    margin-top: 6px !important;

    color: #ffd365 !important;
    font-size: 31px !important;
    line-height: 1.2 !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-summary-card > div {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    margin-top: 12px !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-summary-card small {
    color: #cbdbea !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-summary-card em {
    color: #fff !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

html body.lm-v3-inner.page-my-numbers .my-numbers-summary-card > a {
    display: flex !important;
    min-width: 150px !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;

    margin-top: 15px !important;

    border-radius: 10px !important;

    color: #30240c !important;
    background:
        linear-gradient(135deg, #f7d476, #dda42f) !important;

    font-size: 13px !important;
    font-weight: 950 !important;
}

/* 히어로 바로 아래 카드 간격 */
html body.lm-v3-inner.page-my-numbers .numbers-card {
    margin-top: 34px !important;
}

@media (max-width: 980px) {
    html body.lm-v3-inner.page-my-numbers .my-numbers-hero {
        grid-template-columns: 1fr !important;
        gap: 25px !important;

        text-align: center !important;
    }

    html body.lm-v3-inner.page-my-numbers .my-numbers-hero-copy {
        align-items: center !important;
        max-width: none !important;
        text-align: center !important;
    }

    html body.lm-v3-inner.page-my-numbers .my-numbers-hero .label {
        align-self: center !important;
    }

    html body.lm-v3-inner.page-my-numbers .my-numbers-hero h1,
    html body.lm-v3-inner.page-my-numbers .my-numbers-hero p {
        text-align: center !important;
    }

    html body.lm-v3-inner.page-my-numbers .my-numbers-summary-card {
        justify-self: center !important;

        width: min(100%, 430px) !important;
    }
}

@media (max-width: 600px) {
    html body.lm-v3-inner.page-my-numbers .my-numbers-hero {
        min-height: auto !important;

        padding:
            27px
            14px !important;
    }

    html body.lm-v3-inner.page-my-numbers .my-numbers-hero h1 {
        font-size: 37px !important;
    }

    html body.lm-v3-inner.page-my-numbers .my-numbers-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
    }

    html body.lm-v3-inner.page-my-numbers .my-numbers-hero-actions .btn {
        width: 100% !important;
    }

    html body.lm-v3-inner.page-my-numbers .my-numbers-summary-card {
        width: 100% !important;
        height: auto !important;
        min-height: 180px !important;
    }
}