.sbm-mount,
.sbm-mount * {
    box-sizing: border-box;
}

.sbm-mount {
    --sbm-pink: #ff72b6;
    --sbm-pink-light: #ffdce9;
    --sbm-yellow: #fff1a9;
    --sbm-blue: #cfeeff;
    --sbm-black: #242424;
    --sbm-gray: #707070;
    --sbm-paper: #fff8f7;

    width: 100%;
    max-width: 720px;
    margin: 0 auto;

    color: var(--sbm-black);

    font-family:
        Pretendard,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.sbm-app {
    width: 100%;
    min-height: 760px;

    padding: 28px 22px 42px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(255, 171, 206, 0.12),
            transparent 22%
        ),
        radial-gradient(
            circle at 88% 30%,
            rgba(126, 211, 255, 0.12),
            transparent 20%
        ),
        var(--sbm-paper);

    border-radius: 32px;
}

.sbm-logo {
    text-align: center;
    margin: 0 0 26px;
}

.sbm-logo-main {
    margin: 0;

    font-size: clamp(34px, 8vw, 58px);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.sbm-logo-main .pink {
    color: #ff5ba7;
}

.sbm-logo-main .yellow {
    color: #f3c845;
}

.sbm-logo-main .blue {
    color: #52bdec;
}

.sbm-logo-sub {
    display: inline-block;

    margin: 10px 0 0;
    padding: 7px 17px;

    border-radius: 999px;

    background: #eee6ff;

    color: #4f4f4f;

    font-size: 18px;
    font-weight: 600;
}

.sbm-card {
    background: #fff;

    border: 3px solid #333;
    border-radius: 28px;

    box-shadow:
        0 7px 0 rgba(0, 0, 0, 0.06);
}

.sbm-characters {
    display: grid;

    grid-template-columns: 1fr 1fr;
    gap: 18px;

    margin: 22px 0;
}

.sbm-character {
    padding: 20px 12px;

    text-align: center;

    border: 3px dashed #f0b9cf;
    border-radius: 28px;

    background: rgba(255, 255, 255, 0.72);
}

.sbm-character-emoji {
    margin-bottom: 10px;

    font-size: 68px;
    line-height: 1;
}

.sbm-character-bubble {
    display: inline-block;

    padding: 9px 14px;

    border: 2px solid #333;
    border-radius: 999px;

    background: #fff;

    font-size: 18px;
    font-weight: 700;
}

.sbm-main-title {
    margin: 24px 0 18px;
    padding: 18px;

    text-align: center;

    background: var(--sbm-yellow);

    border: 3px solid #444;
    border-radius: 999px;

    font-size: clamp(28px, 6vw, 42px);
    line-height: 1.2;
    font-weight: 900;
}

.sbm-main-title strong {
    color: #ff5ba7;
}

.sbm-input {
    display: block;

    width: 100%;

    padding: 20px 25px;

    border: 3px solid #e69ab9;
    border-radius: 999px;

    background: #fff;

    color: #222;

    font: inherit;
    font-size: 26px;
    font-weight: 700;

    outline: none;
}

.sbm-input:focus {
    border-color: #ff5ba7;

    box-shadow:
        0 0 0 5px rgba(255, 91, 167, 0.12);
}

.sbm-input::placeholder {
    color: #aaa;
}

.sbm-btn {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 18px 0 0;
    padding: 18px 20px;

    border: 3px solid #222;
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #ff9fd0,
            #ff70b6
        );

    color: #171717;

    font: inherit;
    font-size: 28px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 7px 0 rgba(0, 0, 0, 0.08);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.sbm-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 9px 0 rgba(0, 0, 0, 0.08);
}

.sbm-btn-secondary {
    background: #fff;
}

.sbm-guide {
    margin-top: 28px;
    padding: 18px;
}

.sbm-guide-title {
    text-align: center;

    margin: 0 0 16px;

    font-size: 22px;
    font-weight: 900;
}

.sbm-guide-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.sbm-guide-item {
    min-height: 150px;

    padding: 15px;

    text-align: center;

    border-radius: 22px;

    background: #fff;
}

.sbm-guide-item:nth-child(1) {
    background: #fff0f6;
}

.sbm-guide-item:nth-child(2) {
    background: #eff9ff;
}

.sbm-guide-item:nth-child(3) {
    background: #fff9d9;
}

.sbm-guide-number {
    width: 38px;
    height: 38px;

    margin: 0 auto 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #222;
    border-radius: 50%;

    background: #ffd7e9;

    font-size: 19px;
    font-weight: 900;
}

.sbm-guide-item strong {
    display: block;

    margin-bottom: 6px;

    font-size: 20px;
}

.sbm-guide-item p {
    margin: 0;

    color: #666;

    font-size: 15px;
    line-height: 1.5;
}

.sbm-top {
    padding: 18px;
    margin-bottom: 20px;
}

.sbm-names {
    display: grid;

    grid-template-columns: 1fr 1fr;
    gap: 12px;

    margin-bottom: 14px;
}

.sbm-name {
    padding: 12px 15px;

    border-radius: 18px;

    background: #fff8fb;

    font-size: 18px;
    font-weight: 700;
}

.sbm-name strong {
    display: inline-block;

    padding: 2px 8px;

    border-radius: 9px;

    background: var(--sbm-pink-light);
}

.sbm-progress-row {
    display: flex;

    align-items: center;

    gap: 12px;
}

.sbm-progress {
    flex: 1;

    height: 19px;

    overflow: hidden;

    border: 3px solid #d4d4d4;
    border-radius: 999px;

    background: #fff;
}

.sbm-progress-bar {
    height: 100%;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #ffc2dc,
            #ff6cb3
        );

    transition: width 0.25s ease;
}

.sbm-progress-label {
    min-width: 74px;

    text-align: right;

    font-size: 20px;
    font-weight: 900;
}

.sbm-question {
    padding: 18px;

    text-align: center;

    border: 3px solid #555;
    border-radius: 999px;

    background: var(--sbm-yellow);

    font-size: clamp(27px, 6vw, 40px);
    line-height: 1.2;
    font-weight: 900;
}

.sbm-question-help {
    margin: 12px 0 18px;

    text-align: center;

    color: #5d5d5d;

    font-size: 18px;
    font-weight: 700;
}

.sbm-choice-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sbm-choice {
    min-height: 295px;

    padding: 24px 15px;

    border: 3px solid #efabc7;
    border-radius: 30px;

    background: #fff6fa;

    text-align: center;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.sbm-choice:nth-child(2) {
    border-color: #a9d9f2;

    background: #f2fbff;
}

.sbm-choice:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 0 rgba(0, 0, 0, 0.06);
}

.sbm-choice-caption {
    min-height: 48px;

    color: #555;

    font-size: 19px;
    font-weight: 700;
}

.sbm-choice-icon {
    display: flex;

    min-height: 120px;

    align-items: center;
    justify-content: center;

    margin: 8px 0;

    font-size: 75px;
}

.sbm-choice-label {
    display: inline-block;

    padding: 7px 15px;

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.78);

    font-size: 27px;
    font-weight: 900;
}

.sbm-note {
    margin: 15px 0 0;

    text-align: center;

    color: #777;

    font-size: 15px;
    line-height: 1.55;
}

.sbm-share-steps {
    display: grid;

    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    margin: 20px 0;
}

.sbm-share-preview {
    display: flex;

    gap: 14px;

    align-items: center;

    margin-top: 18px;
    padding: 15px;
}

.sbm-share-thumb {
    display: flex;

    width: 100px;
    min-width: 100px;
    height: 100px;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: #ffe4f0;

    font-size: 48px;
}

.sbm-share-copy {
    word-break: break-all;

    color: #555;

    font-size: 16px;
    line-height: 1.5;
}

.sbm-result {
    padding: 30px 20px;

    text-align: center;
}

.sbm-result-title {
    margin: 0 0 16px;

    font-size: clamp(34px, 8vw, 52px);
    line-height: 1.15;
    font-weight: 900;
}

.sbm-score {
    display: inline-block;

    padding: 12px 24px;

    border: 3px solid #333;
    border-radius: 999px;

    background: var(--sbm-yellow);

    font-size: clamp(38px, 9vw, 60px);
    font-weight: 900;
}

.sbm-result-desc {
    margin-top: 15px;

    color: #555;

    font-size: 19px;
    line-height: 1.6;
}

.sbm-score-guide {
    margin-top: 20px;
    padding: 16px;
}

.sbm-score-guide h3 {
    margin: 0 0 15px;

    text-align: center;

    font-size: 24px;
}

.sbm-score-item {
    display: grid;

    grid-template-columns: 110px 1fr;
    gap: 10px;

    margin-bottom: 8px;
    padding: 11px 13px;

    border-radius: 17px;

    background: #f7f7f7;
}

.sbm-score-item:nth-child(2) {
    background: #eef9ff;
}

.sbm-score-item:nth-child(3) {
    background: #efffee;
}

.sbm-score-item:nth-child(4) {
    background: #fff8dd;
}

.sbm-score-item:nth-child(5) {
    background: #fff0f6;
}

.sbm-score-item:nth-child(6) {
    background: #ffd9ef;
}

.sbm-score-item.is-current {
    outline: 4px solid #ffd24e;
}

.sbm-score-range {
    font-weight: 900;
}

.sbm-score-name {
    font-weight: 800;
}

.sbm-result-buttons {
    display: grid;

    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 640px) {
    .sbm-app {
        min-height: auto;

        padding:
            22px
            14px
            34px;

        border-radius: 22px;
    }

    .sbm-characters,
    .sbm-names {
        grid-template-columns: 1fr 1fr;
    }

    .sbm-guide-grid,
    .sbm-share-steps {
        grid-template-columns: 1fr;
    }

    .sbm-choice {
        min-height: 245px;

        padding: 18px 10px;
    }

    .sbm-choice-icon {
        min-height: 100px;

        font-size: 60px;
    }

    .sbm-choice-label {
        font-size: 23px;
    }

    .sbm-result-buttons {
        grid-template-columns: 1fr;
    }

    .sbm-share-preview {
        align-items: flex-start;
    }
}

@media (max-width: 420px) {
    .sbm-choice-grid {
        gap: 10px;
    }

    .sbm-choice {
        min-height: 225px;

        padding:
            16px
            8px;
    }

    .sbm-choice-caption {
        font-size: 16px;
    }

    .sbm-choice-icon {
        font-size: 52px;
    }

    .sbm-choice-label {
        font-size: 21px;
    }

    .sbm-name {
        font-size: 15px;
    }
}


/* ========================================
   SOULHA BESTIE MATCH - OBJECT IMAGES
   ======================================== */

.sbm-choice-media {
    width: 100%;
    min-height: 170px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 6px 0 10px;
}

.sbm-choice-image {
    display: block;

    width: 160px;
    height: 160px;
    max-width: 100%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;

    transition:
        transform 0.18s ease;
}

.sbm-choice:hover .sbm-choice-image {
    transform:
        scale(1.045)
        rotate(-1deg);
}

.sbm-choice:active .sbm-choice-image {
    transform:
        scale(0.96);
}

@media (max-width: 640px) {
    .sbm-choice-media {
        min-height: 150px;
    }

    .sbm-choice-image {
        width: 145px;
        height: 145px;
    }
}

@media (max-width: 420px) {
    .sbm-choice-media {
        min-height: 135px;
    }

    .sbm-choice-image {
        width: 130px;
        height: 130px;
    }
}

/* ========================================
   /SOULHA BESTIE MATCH - OBJECT IMAGES
   ======================================== */


/* ========================================
   SOULHA BESTIE MATCH - QUIZ RESTART
   ======================================== */

.sbm-quiz-restart {
    display: block;

    margin: 13px 0 0 auto;
    padding: 7px 13px;

    border: 2px solid #d6a6bb;
    border-radius: 999px;

    background: #fff7fb;
    color: #765363;

    font: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}

.sbm-quiz-restart:hover {
    background: #ffe9f3;
}

.sbm-quiz-restart:active {
    transform: translateY(1px);
}

/* ========================================
   /SOULHA BESTIE MATCH - QUIZ RESTART
   ======================================== */

/* ========================================
   INTRO TITLE TUNING
   ======================================== */

.sbm-intro-title--plain {
    margin: 18px 0 10px;
    padding: 0;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    text-align: center;
    color: #2b2b2b;
    font-size: clamp(24px, 5vw, 34px);
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.sbm-intro-title--plain::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: 10px auto 0;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid #ff72b6;
}

.sbm-intro-input-wrap {
    margin-top: 10px;
}

.sbm-intro-input {
    margin-top: 0;
}

.sbm-intro-start {
    margin-top: 16px;
}

/* ========================================
   SHARE BUTTON
   ======================================== */

.sbm-share-button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ========================================
   /INTRO TITLE TUNING
   ======================================== */

/* ========================================
   SOULHA BESTIE INTRO ASSET UI V1
   인트로 화면 전용 이미지 UI
   ======================================== */

.sbm-intro-hero {
    width: 100%;

    margin:
        0
        auto
        18px;

    text-align: center;
}

.sbm-intro-title-image {
    display: block;

    width: 100%;
    max-width: 720px;
    height: auto;

    margin: 0 auto;

    object-fit: contain;
}

.sbm-intro-subtitle {
    margin-top: 10px;
}


/*
 * 캐릭터와 닉네임 타이틀을
 * 한 장의 일러스트 이미지로 구성한다.
 */
.sbm-intro-nickname-visual {
    display: flex;

    width: 100%;

    justify-content: center;
    align-items: center;

    margin:
        6px
        auto
        18px;
}

.sbm-intro-nickname-image {
    display: block;

    width: 100%;
    max-width: 720px;
    height: auto;

    margin: 0 auto;

    object-fit: contain;
}


/*
 * 기존 모바일 CSS에서 .sbm-guide-grid를
 * 1열로 변경하더라도 이번 이미지 영역은
 * 항상 3열을 유지한다.
 */
.sbm-guide-grid.sbm-guide-grid--images {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;

    align-items: stretch;
}

.sbm-guide-image-item {
    min-width: 0;

    overflow: hidden;

    border-radius: 22px;
}

.sbm-guide-step-image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    object-fit: contain;
}


/* 작은 모바일 화면에서도 3개를 한 줄에 유지 */
@media (max-width: 520px) {
    .sbm-intro-hero {
        margin-bottom: 14px;
    }

    .sbm-intro-subtitle {
        margin-top: 6px;
    }

    .sbm-intro-nickname-visual {
        margin-top: 2px;
        margin-bottom: 14px;
    }

    .sbm-guide-grid.sbm-guide-grid--images {
        gap: 7px;
    }

    .sbm-guide-image-item {
        border-radius: 14px;
    }
}

/* ========================================
   /SOULHA BESTIE INTRO ASSET UI V1
   ======================================== */


/* ========================================
   SOULHA BESTIE MOBILE SHARE COMPACT V1
   공유 단계 설명은 모바일에서 높이를 최소화한다.
   ======================================== */

@media (max-width: 640px) {

    .sbm-share-steps {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 12px;
        margin-bottom: 14px;
    }


    /*
     * 기존 세로형 설명 카드를
     * 번호 + 텍스트의 가로형 카드로 압축한다.
     */
    .sbm-share-steps .sbm-guide-item {
        display: grid;

        grid-template-columns:
            44px
            minmax(0, 1fr);

        grid-template-rows:
            auto
            auto;

        column-gap: 11px;
        row-gap: 2px;

        align-items: center;

        min-height: 0;

        padding:
            10px
            13px;

        border-radius: 17px;

        text-align: left;
    }


    .sbm-share-steps .sbm-guide-number {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 38px;
        height: 38px;

        margin: 0;

        font-size: 18px;
    }


    .sbm-share-steps .sbm-guide-item strong {
        grid-column: 2;
        grid-row: 1;

        margin: 0;

        font-size: 18px;
        line-height: 1.25;
    }


    .sbm-share-steps .sbm-guide-item p {
        grid-column: 2;
        grid-row: 2;

        margin: 0;

        font-size: 14px;
        line-height: 1.3;
    }


    /*
     * 설명 다음 공유 버튼이 너무 멀어지지 않게 한다.
     */
    .sbm-share-steps + .sbm-btn {
        margin-top: 4px;
    }
}


@media (max-width: 420px) {

    .sbm-share-steps {
        gap: 7px;
    }

    .sbm-share-steps .sbm-guide-item {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        column-gap: 9px;

        padding:
            9px
            11px;
    }

    .sbm-share-steps .sbm-guide-number {
        width: 34px;
        height: 34px;

        font-size: 16px;
    }

    .sbm-share-steps .sbm-guide-item strong {
        font-size: 17px;
    }

    .sbm-share-steps .sbm-guide-item p {
        font-size: 13px;
    }
}

/* ========================================
   /SOULHA BESTIE MOBILE SHARE COMPACT V1
   ======================================== */

/* ========================================
   SOULHA BESTIE MOBILE QUIZ TOP V1
   모바일 질문 상단 진행영역 압축
   ======================================== */

@media (max-width: 640px) {

    /*
     * 1행: 친구 A / 내 이름
     * 2행: Q번호 + 진행바 / 다시 하기
     */
    .sbm-top.sbm-card {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        column-gap: 10px;
        row-gap: 10px;

        padding:
            14px
            14px
            12px;

        margin-bottom: 16px;
    }


    /* 이름 두 개는 첫 줄 전체 사용 */
    .sbm-top .sbm-names {
        grid-column:
            1 / -1;

        margin-bottom: 0;

        gap: 8px;
    }


    .sbm-top .sbm-name {
        padding:
            9px
            10px;

        font-size: 16px;
        line-height: 1.25;
    }


    /*
     * 두 번째 줄 왼쪽:
     * Q1 / 10 + 진행바
     */
    .sbm-top .sbm-progress-row {
        grid-column: 1;
        grid-row: 2;

        display: flex;

        align-items: center;

        gap: 8px;

        min-width: 0;
    }


    /*
     * 기존 DOM에서는 진행바 다음에 Q 라벨이 있으므로
     * CSS order로 Q1 / 10을 왼쪽으로 이동한다.
     */
    .sbm-top .sbm-progress-label {
        order: -1;

        flex: 0 0 auto;

        min-width: auto;

        margin: 0;

        white-space: nowrap;

        text-align: left;

        font-size: 17px;
        line-height: 1;
        font-weight: 900;
    }


    .sbm-top .sbm-progress {
        order: 0;

        flex: 1 1 auto;

        min-width: 60px;

        height: 14px;

        border-width: 2px;
    }


    /*
     * 두 번째 줄 오른쪽:
     * 다시 하기 버튼을 작고 짧게 배치
     */
    .sbm-top .sbm-quiz-restart {
        grid-column: 2;
        grid-row: 2;

        align-self: center;
        justify-self: end;

        width: auto;
        min-width: 0;

        margin: 0;

        padding:
            7px
            10px;

        white-space: nowrap;

        font-size: 14px;
        line-height: 1.1;
    }
}


@media (max-width: 420px) {

    .sbm-top.sbm-card {
        column-gap: 7px;

        padding:
            12px
            11px
            11px;
    }

    .sbm-top .sbm-name {
        padding:
            8px
            8px;

        font-size: 15px;
    }

    .sbm-top .sbm-progress-row {
        gap: 6px;
    }

    .sbm-top .sbm-progress-label {
        font-size: 15px;
    }

    .sbm-top .sbm-progress {
        height: 12px;
    }

    .sbm-top .sbm-quiz-restart {
        padding:
            6px
            8px;

        font-size: 13px;
    }
}

/* ========================================
   /SOULHA BESTIE MOBILE QUIZ TOP V1
   ======================================== */

/* ========================================
   SOULHA BESTIE RESULT LAYOUT V2
   결과 + 점수가이드를 하나의 카드로 구성
   ======================================== */

.sbm-result-summary {
    padding: 24px 22px 22px;

    text-align: center;
}

.sbm-result-summary .sbm-result {
    padding: 0 !important;

    width: 100%;
    min-height: 0 !important;
}

.sbm-result-head {
    display: flex;

    justify-content: center;
    align-items: baseline;

    gap: 14px;

    margin-bottom: 14px;
}

.sbm-result-summary .sbm-result-title {
    margin: 0 !important;

    line-height: 1.15;
}

.sbm-result-match {
    flex: 0 0 auto;

    color: #777;

    font-size: 18px;
    font-weight: 500;

    white-space: nowrap;
}

.sbm-result-summary .sbm-score {
    margin: 0 auto;

    line-height: 1.05;
}

.sbm-result-summary .sbm-result-desc {
    margin-top: 12px !important;

    color: #555;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}


/*
 * 통합 카드 내부의 점수가이드
 */
.sbm-result-summary .sbm-score-guide {
    width: 100%;

    margin-top: 30px !important;
    padding: 0 !important;
}

.sbm-result-summary .sbm-score-guide h3 {
    margin:
        0
        0
        16px !important;

    font-size: 24px;
    line-height: 1.25;
}


/*
 * 결과 카드와 버튼 그룹은 시각적으로 분리
 */
.sbm-result-summary + .sbm-result-buttons {
    margin-top: 20px;
}


/* ========================================
   모바일
   ======================================== */

@media (max-width: 640px) {

    .sbm-result-summary {
        padding:
            18px
            16px
            18px !important;
    }

    .sbm-result-head {
        gap: 9px;

        margin-bottom: 12px;
    }

    .sbm-result-summary .sbm-result-title {
        font-size:
            clamp(
                26px,
                6.5vw,
                34px
            );
    }

    .sbm-result-match {
        font-size: 15px;
    }

    .sbm-result-summary .sbm-score {
        padding:
            9px
            22px;

        font-size:
            clamp(
                38px,
                9vw,
                50px
            );
    }

    .sbm-result-summary .sbm-result-desc {
        margin-top:
            10px !important;

        font-size: 18px;
    }

    .sbm-result-summary .sbm-score-guide {
        margin-top:
            27px !important;
    }

    .sbm-result-summary .sbm-score-guide h3 {
        margin-bottom:
            13px !important;

        font-size: 21px;
    }


    /*
     * 점수표 한 줄 유지
     */
    .sbm-result-summary .sbm-score-item {
        grid-template-columns:
            96px
            minmax(0, 1fr);

        gap: 5px;

        min-height: 0;

        padding:
            9px
            12px;

        margin-bottom: 6px;
    }

    .sbm-result-summary .sbm-score-range,
    .sbm-result-summary .sbm-score-name {
        white-space: nowrap;

        font-size: 15px;
        line-height: 1.2;
    }

    .sbm-result-summary .sbm-score-name {
        text-align: left;
    }


    /*
     * 카드 → 버튼은 떨어뜨리고
     * 버튼끼리는 비교적 가깝게.
     */
    .sbm-result-summary + .sbm-result-buttons {
        margin-top: 18px;
    }

    .sbm-result-buttons {
        gap: 7px;
    }
}


@media (max-width: 420px) {

    .sbm-result-summary {
        padding:
            16px
            13px
            16px !important;
    }

    .sbm-result-head {
        gap: 7px;
    }

    .sbm-result-match {
        font-size: 14px;
    }

    .sbm-result-summary .sbm-score-guide {
        margin-top:
            24px !important;
    }

    .sbm-result-summary .sbm-score-item {
        grid-template-columns:
            90px
            minmax(0, 1fr);

        gap: 4px;

        padding:
            8px
            9px;
    }

    .sbm-result-summary .sbm-score-range,
    .sbm-result-summary .sbm-score-name {
        font-size: 14px;
    }
}

/* ========================================
   /SOULHA BESTIE RESULT LAYOUT V2
   ======================================== */

/* ========================================
   SOULHA BESTIE MOBILE SHARE FIT V1
   완료 화면에서 핵심 공유 버튼까지 한 화면에 노출
   ======================================== */

@media (max-width: 640px) {

    /*
     * .sbm-share-steps가 존재하는 화면에만 적용.
     * 질문/인트로/결과 화면에는 영향을 주지 않는다.
     */
    .sbm-app:has(.sbm-share-steps) {
        padding-top: 10px;
    }


    /* ------------------------------
       상단 "답변 완료" 카드
       ------------------------------ */

    .sbm-app:has(.sbm-share-steps)
    .sbm-top.sbm-card {
        padding:
            10px
            12px
            10px !important;

        margin-bottom:
            10px !important;

        row-gap: 7px;
    }


    .sbm-app:has(.sbm-share-steps)
    .sbm-name {
        padding:
            7px
            9px;

        font-size: 15px;
    }


    .sbm-app:has(.sbm-share-steps)
    .sbm-progress-row {
        gap: 7px;
    }


    .sbm-app:has(.sbm-share-steps)
    .sbm-progress-label {
        font-size: 16px;
    }


    /* ------------------------------
       노란 공유 제목
       ------------------------------ */

    .sbm-app:has(.sbm-share-steps)
    .sbm-main-title {
        margin:
            0
            0
            10px !important;

        padding:
            14px
            14px !important;

        min-height: 0 !important;

        font-size:
            clamp(
                26px,
                6.5vw,
                34px
            ) !important;

        line-height: 1.12;
    }


    /* ------------------------------
       1 / 2 / 3 설명
       ------------------------------ */

    .sbm-app:has(.sbm-share-steps)
    .sbm-share-steps {
        gap: 6px !important;

        margin:
            0
            0
            10px !important;
    }


    .sbm-app:has(.sbm-share-steps)
    .sbm-share-steps
    .sbm-guide-item {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        min-height: 0 !important;

        column-gap: 9px;
        row-gap: 1px;

        padding:
            7px
            11px !important;

        border-radius: 16px;
    }


    .sbm-app:has(.sbm-share-steps)
    .sbm-share-steps
    .sbm-guide-number {
        width: 32px;
        height: 32px;

        margin: 0;

        font-size: 15px;
    }


    .sbm-app:has(.sbm-share-steps)
    .sbm-share-steps
    .sbm-guide-item strong {
        margin: 0;

        font-size: 17px;
        line-height: 1.2;
    }


    .sbm-app:has(.sbm-share-steps)
    .sbm-share-steps
    .sbm-guide-item p {
        margin: 1px 0 0;

        font-size: 13px;
        line-height: 1.25;
    }


    /* ------------------------------
       핵심: 친구에게 공유하기
       ------------------------------ */

    .sbm-app:has(.sbm-share-steps)
    [data-action="share"] {
        display: block !important;

        margin-top: 6px !important;
        margin-bottom: 7px !important;

        padding:
            13px
            16px !important;

        min-height: 0 !important;

        font-size: 22px !important;
        line-height: 1.15;
    }


    /*
     * 링크 복사는 보조 버튼.
     * 공유 버튼 아래에 붙이되 높이는 조금 줄인다.
     */
    .sbm-app:has(.sbm-share-steps)
    [data-action="copy"] {
        margin-top: 0 !important;

        padding:
            11px
            16px !important;

        min-height: 0 !important;

        font-size: 20px !important;
        line-height: 1.15;
    }
}


/*
 * 화면 높이가 특히 작은 모바일에서는
 * 핵심 공유 버튼을 살리기 위해 한 단계 더 압축한다.
 */
@media (max-width: 640px) and (max-height: 760px) {

    .sbm-app:has(.sbm-share-steps)
    .sbm-main-title {
        padding:
            11px
            12px !important;

        font-size:
            25px !important;
    }


    .sbm-app:has(.sbm-share-steps)
    .sbm-share-steps {
        gap: 4px !important;
    }


    .sbm-app:has(.sbm-share-steps)
    .sbm-share-steps
    .sbm-guide-item {
        padding:
            6px
            9px !important;
    }


    .sbm-app:has(.sbm-share-steps)
    [data-action="share"] {
        padding:
            11px
            14px !important;

        font-size: 20px !important;
    }
}

/* ========================================
   /SOULHA BESTIE MOBILE SHARE FIT V1
   ======================================== */