@charset "UTF-8";
/* mbti.css - event/mbti.html 인라인 <style> 분리본 (2026-06-17) */

/* ===== style block #1 ===== */
:root {
            /* 색은 baseline(basic.css :root)의 변수를 사용. 폴백은 기존 값 유지 */
            --bg: #fff;
            --card: #fff;
            --text: var(--gr900, #0f172a);
            --sub: var(--gr400, #6b7280);
            --line: var(--gr150, #e5e7eb);
            --orange: var(--pri700, #ff8a3d);
            --shadow: 0 18px 45px rgba(15,23,42,.08)
        }

        /* reset(*, a, button)·font-family·margin/padding은 baseline(reset.css / basic.css 'Pretendard' / layout.css)에서 정의 → 중복 제거 */
        body {
            background: var(--bg);
            color: var(--text)
        }

        .wrap {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px 16px 110px
        }

        .card,.panel {
            background: #fff;
            border-radius: 28px;
            box-shadow: none
        }

        .card {
            border: none
        }

        .panel {
            border: none;
            box-shadow: none
        }

        .hero,.section {
            padding: 28px
        }

        .badge {
            display: inline-flex;
            background: #fff3ea;
            color: #d96c1f;
            border: none;
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 600
        }

        h1 {
            margin: 16px 0 0;
            font-size: clamp(34px,7vw,60px);
            line-height: 1.1
        }

        h2 {
            margin: 0;
            font-size: clamp(26px,5vw,40px);
            line-height: 1.2
        }

        h3 {
            margin: 0;
            font-size: clamp(24px,4vw,34px);
            line-height: 1.2
        }

        h4 {
            margin: 0;
            font-size: 22px;
            line-height: 1.25
        }

        .subtle {
            color: var(--sub);
            line-height: 1.85
        }

        .info-note,.tip-box,.story-note {
            background: #f8fafc;
            border: none;
            color: #64748b
        }

        .info-note {
            margin-top: 18px;
            padding: 14px 16px;
            border-radius: 20px;
            font-size: 14px;
            line-height: 1.7
        }

        .info-note strong {
            color: #111827
        }

        .group-badge {
            display: inline-flex;
            border-radius: 999px;
            padding: 6px 12px;
            font-size: 14px;
            font-weight: 600;
            border: none
        }

        .group-infant {
            background: #fff3ea;
            color: #d96c1f;
            border-color: transparent
        }

        .group-preschool {
            background: #eef8ff;
            color: #2a7cc7;
            border-color: transparent
        }

        .group-elementary {
            background: #f4f0ff;
            color: #6d4de2;
            border-color: transparent
        }

        .age-grid {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat(4,minmax(0,1fr));
            margin-top: 16px
        }

        .age-btn {
            border: none;
            border-radius: 22px;
            padding: 20px;
            background: #fff;
            box-shadow: none;
            cursor: pointer;
            text-align: left;
            transition: .2s ease
        }

        .age-btn:hover {
            transform: translateY(-2px);
            border-color: transparent
        }

        .age-btn .label {
            font-size: 24px;
            font-weight: 600
        }

        .age-btn .cta {
            margin-top: 16px;
            color: #ff8a3d;
            font-weight: 600;
            display: inline-flex;
            gap: 8px;
            align-items: center;
            font-size: 14px
        }

        .quiz-wrap {
            max-width: 860px;
            margin: 0 auto
        }

        .top-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap
        }

        .pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px
        }

        .pill {
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 14px;
            font-weight: 600;
            border: none
        }

        .pill-orange {
            background: #fff3ea;
            color: #d96c1f;
            border-color: transparent
        }

        .pill-gray {
            background: #f8fafc;
            color: #667085;
            border-color: transparent
        }

        .progress {
            margin-top: 16px;
            height: 8px;
            background: #fff3ea;
            border-radius: 999px;
            overflow: hidden
        }

        .progress>span {
            display: block;
            height: 100%;
            background: var(--orange);
            border-radius: 999px;
            transition: width .25s ease
        }

        .quiz-card {
            margin-top: 20px;
            border-radius: 26px;
            background: #fff;
            border: none;
            padding: 24px
        }

        .option-list {
            display: grid;
            gap: 12px;
            margin-top: 24px
        }

        .option-btn {
            width: 100%;
            border: none;
            background: #fff;
            border-radius: 22px;
            padding: 20px;
            cursor: pointer;
            text-align: left;
            transition: .18s ease;
            display: flex;
            justify-content: space-between;
            gap: 16px;
            align-items: flex-start
        }

        .option-btn:hover {
            border-color: var(--gr150);
            background: #fff
        }

        .option-btn.selected {
            border-color: transparent;
            background: #fff0e4;
            box-shadow: none
        }

        .option-text {
            font-weight: 600;
            line-height: 1.7
        }

        .tip-box {
            margin-top: 18px;
            padding: 14px 16px;
            border-radius: 18px;
            font-size: 14px;
            line-height: 1.7
        }

        .tip-box strong {
            color: #ff8a3d
        }

        .footer-controls {
            position: sticky;
            bottom: 12px;
            z-index: 10;
            margin-top: 18px;
            border-radius: 22px;
            border: none;
            background: #fff;
            backdrop-filter: blur(8px);
            padding: 12px;
            box-shadow: none
        }

        .control-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px
        }

        .control-btn {
            border: none;
            border-radius: 18px;
            padding: 14px 16px;
            font-weight: 600;
            cursor: pointer
        }

        .control-secondary {
            background: #f3f4f6;
            color: #475467
        }

        .control-outline {
            background: #fff;
            color: #475467;
            border: none
        }

        .theme-warm {
            background: #fff3ea;
            border: none
        }

        .theme-coral {
            background: #fff1f3;
            border: none
        }

        .theme-yellow {
            background: #fff9e8;
            border: none
        }

        .theme-lime {
            background: #f5ffe9;
            border: none
        }

        .theme-pink {
            background: #fff1f7;
            border: none
        }

        .theme-indigo {
            background: #f3f4ff;
            border: none
        }

        .theme-sky {
            background: #f1f9ff;
            border: none
        }

        .theme-violet {
            background: #f7f3ff;
            border: none
        }

        .theme-fuchsia {
            background: #fff2fd;
            border: none
        }

        .theme-emerald {
            background: #effff8;
            border: none
        }

        .theme-slate {
            background: #f8fafc;
            border: none
        }

        .theme-stone {
            background: #fafaf9;
            border: none
        }

        .theme-cyan {
            background: #effdff;
            border: none
        }

        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 14px
        }

        .chip {
            display: inline-flex;
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 600;
            border: none
        }

        .chip-orange {
            background: #fff3ea;
            color: #d96c1f;
            border-color: transparent
        }

        .chip-rose {
            background: #fff1f3;
            color: #e11d48;
            border-color: transparent
        }

        .chip-yellow {
            background: #fff9e8;
            color: #b7791f;
            border-color: transparent
        }

        .chip-lime {
            background: #f7fee7;
            color: #65a30d;
            border-color: transparent
        }

        .chip-pink {
            background: #fdf2f8;
            color: #db2777;
            border-color: transparent
        }

        .chip-indigo {
            background: #eef2ff;
            color: #4f46e5;
            border-color: transparent
        }

        .chip-sky {
            background: #f0f9ff;
            color: #0284c7;
            border-color: transparent
        }

        .chip-violet {
            background: #f5f3ff;
            color: #7c3aed;
            border-color: transparent
        }

        .chip-fuchsia {
            background: #fdf4ff;
            color: #c026d3;
            border-color: transparent
        }

        .chip-emerald {
            background: #ecfdf5;
            color: #059669;
            border-color: transparent
        }

        .chip-slate {
            background: #f8fafc;
            color: #475569;
            border-color: transparent
        }

        .chip-stone {
            background: #fafaf9;
            color: #57534e;
            border-color: transparent
        }

        .chip-cyan {
            background: #ecfeff;
            color: #0891b2;
            border-color: transparent
        }

        .result-hero {
            padding: 28px;
            border-radius: 26px
        }

        .result-top {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            align-items: flex-start
        }

        .result-left {
            width: 100%;
            max-width: 900px
        }

        .result-code-wrap {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 18px;
            flex-wrap: wrap
        }

        .result-img-box {
            width: 128px;
            height: 128px;
            border-radius: 26px;
            background: #fff;
            border: none;
            box-shadow: none;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .result-img-box img {
            width: 100%;
            height: 100%;
            object-fit: contain
        }

        .result-code {
            font-size: clamp(34px,6vw,54px);
            font-weight: 600;
            letter-spacing: -.03em
        }

        .result-title {
            font-size: clamp(28px,5vw,42px);
            font-weight: 600;
            letter-spacing: -.03em
        }

        .result-poster {
            margin-top: 18px;
            overflow: hidden;
            border-radius: 28px;
            background: #fff;
            border: none;
            box-shadow: none;
            max-width: 900px
        }

        .result-poster img {
            display: block;
            width: 100%;
            height: auto;
            image-rendering: auto
        }

        .result-headline {
            margin-top: 20px;
            font-size: clamp(22px,3.5vw,30px);
            font-weight: 600;
            line-height: 1.45
        }

        .result-summary {
            margin-top: 12px
        }

        .story-title {
            margin-top: 16px;
            font-weight: 600
        }

        .info-copy {
            margin-top: 12px
        }

        .share-btn {
            border: none;
            background: #fff;
            color: #d96c1f;
            border-radius: 18px;
            padding: 14px 16px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: none
        }

        .story-card {
            margin-top: 20px;
            padding: 22px;
            border-radius: 24px;
            background: #fff;
            border: none;
            box-shadow: none
        }

        .story-note {
            padding: 12px 14px;
            border-radius: 18px;
            font-size: 12px;
            line-height: 1.6
        }

        .story-text {
            margin-top: 16px;
            line-height: 1.9;
            color: #344054;
            white-space: pre-line
        }

        .info-grid {
            margin-top: 20px;
            display: grid;
            grid-template-columns: repeat(3,minmax(0,1fr));
            gap: 16px
        }

        .info-card {
            padding: 20px;
            border-radius: 22px;
            background: #fff;
            border: none;
            box-shadow: none
        }

        .info-head {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 600
        }

        .info-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            background: #f8fafc
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(3,minmax(0,1fr));
            gap: 16px;
            margin-top: 24px
        }

        .product-card {
            overflow: hidden;
            border-radius: 26px;
            background: #fff;
            border: none;
            box-shadow: none
        }

        .product-img {
            aspect-ratio: 4/3;
            overflow: hidden;
            background: #f8fafc
        }

        .product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .product-img img.img-fallback {
            object-fit: contain;
            padding: 18px;
            background: #fff
        }

        .product-body {
            padding: 20px
        }

        .product-tag {
            display: inline-flex;
            padding: 8px 12px;
            border-radius: 999px;
            background: #fff3ea;
            color: #d96c1f;
            border: none;
            font-size: 12px;
            font-weight: 600
        }

        .product-actions,.result-actions {
            display: grid;
            gap: 12px;
            margin-top: 16px
        }

        .product-actions {
            grid-template-columns: 1fr 1fr
        }

        .result-actions {
            grid-template-columns: repeat(4,minmax(0,1fr))
        }

        .btn-dark,.btn-orange,.btn-soft,.btn-ghost {
            border: none;
            border-radius: 18px;
            padding: 14px 16px;
            font-weight: 600;
            cursor: pointer;
            text-align: center
        }

        .btn-dark {
            background: #0f172a;
            color: #fff
        }

        .btn-orange {
            background: #ff8a3d;
            color: #fff
        }

        .btn-soft {
            background: #fff3ea;
            color: #d96c1f;
            border: none
        }

        .btn-ghost {
            background: #fff;
            color: #475467;
            border: none
        }

        .loading-overlay {
            position: fixed;
            inset: 0;
            background: #fff;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 100;
            animation: loadingFadeIn .35s ease
        }

        @keyframes loadingFadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        .loading-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            text-align: center
        }

        .loading-dots {
            display: flex;
            gap: 10px
        }

        .loading-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #ffd7ba;
            animation: loadingDotPulse 1.5s ease-in-out infinite
        }

        .loading-dot:nth-child(1) {
            animation-delay: 0s
        }

        .loading-dot:nth-child(2) {
            animation-delay: .2s
        }

        .loading-dot:nth-child(3) {
            animation-delay: .4s
        }

        .loading-dot:nth-child(4) {
            animation-delay: .6s
        }

        @keyframes loadingDotPulse {
            0%,100% {
                background: #ffd7ba;
                transform: scale(1)
            }

            50% {
                background: #ff8a3d;
                transform: scale(1.5)
            }
        }

        .loading-text {
            font-size: 18px;
            font-weight: 500;
            color: #0f172a;
            letter-spacing: -.01em;
            line-height: 1.55
        }

        .loading-sub {
            margin-top: 7px;
            font-size: 13px;
            color: #94a3b8;
            font-weight: 400;
            line-height: 1.65
        }

        .mobile-sticky {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 14px 16px;
            background: #fff;
            backdrop-filter: blur(8px);
            border-top: none;
            box-shadow: none;
            z-index: 90
        }

        .mobile-sticky a {
            display: inline-flex;
            width: 100%;
            justify-content: center;
            gap: 10px;
            align-items: center
        }

        .hero-visual-card {
            margin-top: 20px
        }

        .hero-visual-image {
            position: relative;
            overflow: hidden;
            border-radius: 28px;
            background: transparent;
            box-shadow: none
        }

        .hero-visual-image picture,.hero-visual-image img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover
        }

        .hero-hotspot {
            position: absolute;
            display: block;
            border: none;
            border-radius: 22px;
            background: rgba(255,138,61,0);
            outline: none;
            box-shadow: none;
            transition: background .18s ease, box-shadow .18s ease
        }

        .hero-hotspot:hover,.hero-hotspot:focus-visible {
            background: rgba(255,138,61,.08);
            box-shadow: none
        }

        .hotspot-infant {
            left: 4.5%;
            top: 57.5%;
            width: 28.5%;
            height: 23.5%
        }

        .hotspot-preschool {
            left: 35.4%;
            top: 57.5%;
            width: 27.7%;
            height: 23.5%
        }

        .hotspot-elementary {
            left: 65.0%;
            top: 57.5%;
            width: 27.2%;
            height: 23.5%
        }

        .hotspot-start {
            left: 61.3%;
            top: 87.5%;
            width: 23.3%;
            height: 7.3%;
            border-radius: 999px
        }

        .intro-note {
            margin-top: 16px
        }

        .intro-shell {
            max-width: 560px;
            margin: 0 auto
        }

        .intro-hero-image {
            overflow: hidden;
            border-radius: 0;
            background: transparent;
            box-shadow: none
        }

        .intro-hero-image img {
            display: block;
            width: 100%;
            height: auto
        }

        .intro-age-panel {
            margin-top: 16px;
            background: #fff;
            border: none;
            border-radius: 28px;
            padding: 20px;
            box-shadow: none
        }

        .intro-age-title {
            font-size: 24px;
            font-weight: 600;
            line-height: 1.3
        }

        .intro-age-sub {
            margin-top: 6px;
            color: #667085;
            font-size: 14px;
            line-height: 1.7
        }

        .age-select-section {
            margin-top: 18px
        }

        .age-select-list {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 10px;
            margin-top: 10px
        }

        .age-select-btn {
            border: none;
            border-radius: 18px;
            background: #fff;
            padding: 14px 12px;
            text-align: center;
            font-weight: 600;
            font-size: 16px;
            color: #0f172a;
            cursor: pointer;
            box-shadow: none;
            transition: .18s ease
        }

        .age-select-btn:hover {
            border-color: transparent;
            background: #fff
        }

        .age-select-btn.selected {
            border-color: transparent;
            background: #fff3ea;
            color: #d96c1f;
            box-shadow: none
        }

        .start-test-btn {
            width: 100%;
            margin-top: 20px;
            border-radius: 22px;
            background: #ff7a1a;
            color: #fff;
            padding: 16px 18px;
            font-weight: 600;
            font-size: 18px;
            cursor: pointer;
            box-shadow: none
        }

        .start-test-btn:disabled {
            background: #e5e7eb;
            color: #98a2b3;
            box-shadow: none;
            cursor: not-allowed
        }

        .intro-safe-note {
            margin-top: 12px;
            text-align: center;
            color: #98a2b3;
            font-size: 12px;
            line-height: 1.6
        }

        @media (max-width: 640px) {
            .wrap {
                padding-top:0
            }

            .intro-shell {
                max-width: none;
                margin: 0 -14px
            }

            .intro-age-panel {
                margin: 0 14px 0;
                border-radius: 26px
            }

            .intro-safe-note {
                padding: 0 12px
            }

            .age-select-list {
                grid-template-columns: repeat(2,minmax(0,1fr))
            }

            .intro-hero-image {
                border-radius: 0
            }

            .intro-age-title {
                font-size: 22px
            }
        }

        @media (max-width: 820px) {
            .hero-hotspot {
                border-radius:18px
            }

            .hotspot-infant {
                left: 6.2%;
                top: 44.6%;
                width: 88.0%;
                height: 11.8%
            }

            .hotspot-preschool {
                left: 6.2%;
                top: 58.1%;
                width: 88.0%;
                height: 11.8%
            }

            .hotspot-elementary {
                left: 6.2%;
                top: 71.6%;
                width: 88.0%;
                height: 11.8%
            }

            .hotspot-start {
                left: 32.6%;
                top: 88.1%;
                width: 52.5%;
                height: 5.8%;
                border-radius: 999px
            }
        }

        @media (max-width: 980px) {
            .age-grid {
                grid-template-columns:repeat(2,minmax(0,1fr))
            }

            .info-grid,.products-grid,.result-actions {
                grid-template-columns: 1fr
            }
        }

        @media (max-width: 640px) {
            .wrap {
                padding:10px 10px 104px
            }

            .hero {
                padding: 0;
                background: transparent;
                border: none;
                box-shadow: none
            }

            .section {
                padding: 18px
            }

            .hero-visual-card {
                margin-top: 0
            }

            .hero-visual-image {
                border-radius: 22px
            }

            .intro-note {
                margin-top: 10px;
                padding: 0 2px;
                background: transparent;
                border: none;
                color: #98a2b3;
                font-size: 11px;
                line-height: 1.5;
                text-align: center
            }

            .result-hero {
                padding: 14px 14px 16px;
                border-radius: 24px
            }

            .result-top {
                gap: 12px
            }

            .result-poster {
                width: 100%;
                max-width: 100%;
                margin-top: 12px;
                margin-left: 0;
                margin-right: 0;
                border-radius: 20px;
                border-color: transparent;
                box-shadow: none;
                overflow: hidden
            }

            .result-poster img {
                display: block;
                width: 100%;
                height: auto
            }

            .result-headline {
                margin-top: 16px;
                font-size: clamp(21px,6vw,26px);
                line-height: 1.38
            }

            .result-summary {
                font-size: 14px;
                line-height: 1.7
            }

            .story-card {
                margin-top: 16px;
                padding: 18px;
                border-radius: 22px
            }

            .story-text {
                font-size: 14px;
                line-height: 1.8
            }

            .info-grid {
                gap: 12px
            }

            .info-card {
                padding: 16px;
                border-radius: 20px
            }

            .product-actions {
                grid-template-columns: 1fr
            }

        }

        /* v18 polished mobile-first intro UI */ html,body {
                                                                                       background: var(--bg)
                                                                                   }

        .wrap {
            max-width: 900px;
            padding-top: 18px
        }

        .intro-shell {
            max-width: 560px;
            margin: 0 auto 0;
            position: relative
        }

        .intro-shell::before {
            content: "";
            position: fixed;
            inset: auto -80px 0 -80px;
            height: 48%;
            background: transparent;
            pointer-events: none;
            z-index: -1
        }

        .intro-hero-card {
            position: relative;
            border-radius: 34px;
            background: #fff;
            padding: 10px;
            box-shadow: none;
            border: none;
            overflow: hidden
        }

        .intro-hero-card::after {
            content: "";
            position: absolute;
            right: -46px;
            top: 130px;
            width: 180px;
            height: 180px;
            background: transparent;
            pointer-events: none
        }

        .intro-hero-image {
            overflow: hidden;
            border-radius: 26px;
            background: #fff;
            box-shadow: none
        }

        .intro-hero-image img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover
        }

        .intro-floating-copy {
            margin-top: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            border-radius: 22px;
            background: #fff;
            border: none;
            padding: 14px 16px;
            box-shadow: none;
            backdrop-filter: blur(8px)
        }

        .intro-floating-copy .label {
            font-size: 13px;
            font-weight: 600;
            color: #d96c1f
        }

        .intro-floating-copy .desc {
            margin-top: 4px;
            font-size: 12px;
            line-height: 1.55;
            color: #667085
        }

        .intro-floating-copy .mark {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            background: #fff3ea;
            color: #ff8a3d;
            font-weight: 600;
            flex: 0 0 auto
        }

        .intro-age-panel {
            margin-top: 16px;
            background: #fff;
            border: none;
            border-radius: 32px;
            padding: 22px;
            box-shadow: none;
            backdrop-filter: blur(10px)
        }

        .intro-age-title {
            font-size: 25px;
            font-weight: 600;
            letter-spacing: -.04em;
            line-height: 1.25
        }

        .intro-age-sub {
            margin-top: 8px;
            color: #667085;
            font-size: 14px;
            line-height: 1.65
        }

        .intro-flow-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 14px
        }

        .intro-flow-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            background: #f8fafc;
            color: #475467;
            border: none;
            padding: 7px 10px;
            font-size: 12px;
            font-weight: 600
        }

        .intro-flow-chip strong {
            color: #ff8a3d
        }

        .age-select-section {
            margin-top: 20px
        }

        .age-select-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px
        }

        .age-select-guide {
            font-size: 12px;
            color: #98a2b3;
            font-weight: 600
        }

        .age-select-list {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 10px;
            margin-top: 10px
        }

        .age-select-btn {
            position: relative;
            border: none;
            border-radius: 20px;
            background: #fff;
            padding: 15px 12px;
            text-align: center;
            font-weight: 600;
            font-size: 16px;
            color: #0f172a;
            cursor: pointer;
            box-shadow: none;
            transition: transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease
        }

        .age-select-btn:hover {
            transform: translateY(-1px);
            border-color: transparent;
            background: #fff
        }

        .age-select-btn.selected {
            border-color: transparent;
            background: #fff;
            color: #d96c1f;
            box-shadow: none
        }

        .age-select-btn.selected::after {
            content: "✓";
            position: absolute;
            right: 10px;
            top: 8px;
            width: 20px;
            height: 20px;
            border-radius: 999px;
            background: #ff8a3d;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px
        }

        .start-test-btn {
            width: 100%;
            margin-top: 22px;
            border-radius: 24px;
            background: var(--orange);
            color: #fff;
            padding: 17px 18px;
            font-weight: 600;
            font-size: 18px;
            cursor: pointer;
            box-shadow: none;
            transition: transform .18s ease,box-shadow .18s ease
        }

        .start-test-btn:not(:disabled):hover {
            transform: translateY(-1px);
            box-shadow: none
        }

        .start-test-btn:disabled {
            background: #e5e7eb;
            color: #98a2b3;
            box-shadow: none;
            cursor: not-allowed
        }

        .intro-safe-note {
            margin-top: 12px;
            text-align: center;
            color: #98a2b3;
            font-size: 12px;
            line-height: 1.6
        }

        @media (max-width: 640px) {
            .wrap {
                padding:12px 12px 108px
            }

            .intro-shell {
                max-width: none;
                margin: 0
            }

            .intro-hero-card {
                border-radius: 28px;
                padding: 7px;
                box-shadow: none
            }

            .intro-hero-image {
                border-radius: 23px
            }

            .intro-floating-copy {
                margin: 10px 4px 0;
                padding: 12px 14px;
                border-radius: 20px
            }

            .intro-age-panel {
                margin-top: 12px;
                padding: 18px;
                border-radius: 28px
            }

            .intro-age-title {
                font-size: 22px
            }

            .intro-age-sub {
                font-size: 13px
            }

            .age-select-list {
                grid-template-columns: repeat(2,minmax(0,1fr));
                gap: 9px
            }

            .age-select-btn {
                font-size: 15px;
                padding: 14px 10px
            }

            .intro-flow-chips {
                gap: 6px
            }

            .intro-flow-chip {
                font-size: 11px;
                padding: 6px 9px
            }
        }

        /* v19 bright mobile-first main page */
        .bright-main {
            max-width: 900px;
            margin: 0 auto
        }

        .bright-hero {
            position: relative;
            overflow: hidden;
            border-radius: 34px;
            background: #fff;
            border: none;
            box-shadow: none;
            padding: 22px
        }

        .bright-hero::before {
            content: "";
            position: absolute;
            right: -70px;
            top: 80px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: transparent;
            pointer-events: none
        }

        .bright-hero::after {
            content: "";
            position: absolute;
            left: -60px;
            bottom: -80px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: transparent;
            pointer-events: none
        }

        .brand-line {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px
        }

        .brand-logo {
            width: 138px;
            height: auto;
            display: block
        }

        .brand-caption {
            font-size: 12px;
            font-weight: 600;
            color: #ff7a1a;
            background: #fff3ea;
            border: none;
            border-radius: 999px;
            padding: 8px 12px;
            white-space: nowrap
        }

        .bright-hero-layout {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.02fr .98fr;
            gap: 16px;
            align-items: end;
            margin-top: 18px
        }

        .bright-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            background: #fff6e9;
            border: none;
            color: #7c4a1d;
            padding: 8px 12px;
            font-size: 13px;
            font-weight: 600
        }

        .bright-title {
            margin: 18px 0 0;
            font-size: clamp(38px,8.3vw,64px);
            line-height: 1.08;
            letter-spacing: -.04em;
            font-weight: 600;
            color: #222
        }

        .bright-title .accent {
            color: #f36f21
        }

        .bright-copy {
            margin-top: 14px;
            color: #475467;
            font-size: 16px;
            line-height: 1.75;
            font-weight: 600
        }

        .bright-mini {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px
        }

        .bright-mini span {
            display: inline-flex;
            border-radius: 999px;
            background: #fff;
            border: none;
            padding: 8px 11px;
            font-size: 12px;
            font-weight: 600;
            color: #475467;
            box-shadow: none
        }

        .kids-visual {
            position: relative;
            min-height: 260px;
            display: flex;
            align-items: flex-end;
            justify-content: center
        }

        .kids-visual .question-bubble {
            position: absolute;
            top: 8px;
            right: 12px;
            width: 118px;
            height: 118px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffcf67;
            color: #fff;
            font-size: 72px;
            font-weight: 600;
            text-shadow: 0 3px 0 rgba(202,123,26,.18);
            box-shadow: none
        }

        .kids-visual .spark {
            position: absolute;
            color: #ffbc42;
            font-size: 20px;
            font-weight: 600
        }

        .kids-visual .spark.s1 {
            left: 20px;
            top: 52px
        }

        .kids-visual .spark.s2 {
            right: 4px;
            top: 150px
        }

        .kids-visual .spark.s3 {
            left: 50%;
            top: 8px
        }

        .hero-kids {
            position: relative;
            z-index: 2;
            width: min(100%,440px);
            filter: drop-shadow(0 18px 22px rgba(15,23,42,.10))
        }

        .bright-age-panel {
            margin-top: 18px;
            background: #fff;
            border: none;
            border-radius: 34px;
            padding: 22px;
            box-shadow: none
        }

        .bright-age-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap
        }

        .bright-age-title {
            font-size: 26px;
            font-weight: 600;
            line-height: 1.28;
            letter-spacing: -.03em
        }

        .bright-age-sub {
            margin-top: 7px;
            color: #667085;
            font-size: 14px;
            line-height: 1.72;
            font-weight: 600
        }

        .bright-start-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: #ff7a1a;
            color: #fff;
            padding: 11px 15px;
            font-size: 13px;
            font-weight: 600;
            box-shadow: none
        }

        .bright-flow {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px
        }

        .bright-flow span {
            display: inline-flex;
            border-radius: 999px;
            background: #f8fafc;
            border: none;
            padding: 7px 11px;
            font-size: 12px;
            font-weight: 600;
            color: #667085
        }

        .bright-age-group {
            margin-top: 20px
        }

        .bright-age-group-head {
            display: flex;
            align-items: center;
            gap: 9px;
            flex-wrap: wrap;
            margin-bottom: 10px
        }

        .bright-age-guide {
            font-size: 12px;
            color: #98a2b3;
            font-weight: 600
        }

        .age-select-list {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 10px;
            margin-top: 10px
        }

        .age-select-btn {
            border: none;
            border-radius: 20px;
            background: #fff;
            padding: 16px 12px;
            text-align: center;
            font-weight: 600;
            font-size: 16px;
            color: #111827;
            cursor: pointer;
            box-shadow: none;
            transition: transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease
        }

        .age-select-btn:hover {
            transform: translateY(-1px);
            border-color: transparent;
            background: #fff
        }

        .age-select-btn.selected {
            border-color: transparent;
            background: #fff3ea;
            color: #d96c1f;
            box-shadow: none
        }

        .start-test-btn {
            width: 100%;
            margin-top: 22px;
            border-radius: 24px;
            background: var(--orange);
            color: #fff;
            padding: 17px 18px;
            font-weight: 600;
            font-size: 18px;
            cursor: pointer;
            box-shadow: none
        }

        .start-test-btn:disabled {
            background: #e5e7eb;
            color: #98a2b3;
            box-shadow: none;
            cursor: not-allowed
        }

        .intro-safe-note {
            margin-top: 12px;
            text-align: center;
            color: #98a2b3;
            font-size: 12px;
            line-height: 1.6
        }

        @media (max-width: 820px) {
            .wrap {
                padding-top:12px
            }

            .bright-main {
                max-width: none
            }

            .bright-hero {
                border-radius: 30px;
                padding: 18px 18px 0
            }

            .brand-logo {
                width: 132px
            }

            .brand-caption {
                font-size: 11px;
                padding: 7px 10px
            }

            .bright-hero-layout {
                grid-template-columns: 1fr;
                gap: 2px;
                margin-top: 14px
            }

            .bright-title {
                font-size: clamp(42px,11vw,56px)
            }

            .bright-copy {
                font-size: 15px;
                line-height: 1.7
            }

            .kids-visual {
                min-height: 245px;
                margin-top: 4px
            }

            .kids-visual .question-bubble {
                width: 108px;
                height: 108px;
                font-size: 66px;
                right: 4px;
                top: 0
            }

            .hero-kids {
                width: min(100%,420px)
            }

            .bright-age-panel {
                border-radius: 30px;
                padding: 20px;
                margin-top: 14px
            }

            .bright-age-title {
                font-size: 24px
            }

            .bright-start-pill {
                display: none
            }
        }

        @media (max-width: 420px) {
            .brand-line {
                align-items:flex-start
            }

            .brand-logo {
                width: 126px
            }

            .brand-caption {
                max-width: 150px;
                text-align: center;
                white-space: normal;
                line-height: 1.35
            }

            .bright-hero {
                padding: 16px 16px 0;
                border-radius: 28px
            }

            .bright-title {
                font-size: 42px
            }

            .kids-visual {
                min-height: 220px
            }

            .kids-visual .question-bubble {
                width: 92px;
                height: 92px;
                font-size: 56px;
                right: -4px;
                top: 8px
            }

            .hero-kids {
                width: 112%;
                max-width: 430px;
                margin-left: -5%
            }

            .bright-mini span {
                font-size: 11px;
                padding: 7px 9px
            }

            .age-select-list {
                gap: 9px
            }

            .age-select-btn {
                font-size: 15px;
                padding: 15px 8px
            }
        }

        .gauge-block {
            margin-top: 20px;
            padding: 24px;
            background: #fff;
            border: none;
            border-radius: 24px;
            box-shadow: none
        }

        .gauge-title {
            font-size: 17px;
            font-weight: 600;
            color: #0f172a;
            letter-spacing: -.01em;
            line-height: 1.5
        }

        .gauge-list {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 18px
        }

        .gauge-row-top {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 600
        }

        .gauge-left {
            color: #94a3b8;
            text-align: left
        }

        .gauge-right {
            color: #94a3b8;
            text-align: right
        }

        .gauge-letter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 8px;
            background: #f1f5f9;
            color: #94a3b8;
            font-size: 12px;
            font-weight: 600;
            margin: 0 6px
        }

        .gauge-side-win {
            color: #d96c1f;
            font-weight: 600;
            font-size: 15px
        }

        .gauge-side-win .gauge-letter {
            background: #fff3ea;
            color: #d96c1f;
            border: none
        }

        .gauge-tie-pill {
            display: inline-flex;
            font-size: 10px;
            font-weight: 600;
            color: #d96c1f;
            background: #fff3ea;
            border: none;
            border-radius: 999px;
            padding: 3px 8px;
            letter-spacing: .02em
        }

        .gauge-bar-wrap {
            margin-top: 8px;
            height: 10px;
            border-radius: 999px;
            background: #f1f5f9;
            overflow: hidden;
            position: relative
        }

        .gauge-bar-fill {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background: var(--orange);
            border-radius: 999px;
            transition: width .5s ease
        }

        .gauge-bar-fill.is-right {
            left: auto;
            right: 0;
            background: var(--orange)
        }

        .gauge-bar-fill.is-tie {
            background: linear-gradient(90deg,#ffb088,#ff8a3d 50%,#cbd5e1 50%,#94a3b8)
        }

        .gauge-counts {
            margin-top: 6px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #cbd5e1;
            font-weight: 600
        }

        .gauge-count-win {
            color: #d96c1f;
            font-size: 14px;
            font-weight: 600
        }

        @media (max-width: 420px) {
            .gauge-block {
                padding:20px;
                border-radius: 20px
            }

            .gauge-title {
                font-size: 16px
            }

            .gauge-row-top {
                font-size: 13px
            }

            .gauge-side-win {
                font-size: 14px
            }

            .gauge-letter {
                width: 20px;
                height: 20px;
                font-size: 11px;
                margin: 0 4px
            }
        }

        .result-main-cta {
            margin-top: 22px;
            padding: 24px;
            border-radius: 24px;
            background: var(--orange);
            color: #fff;
            box-shadow: none
        }

        .result-main-cta-headline {
            font-size: 20px;
            font-weight: 600;
            line-height: 1.45;
            letter-spacing: -.01em
        }

        .result-main-cta-sub {
            margin-top: 8px;
            font-size: 14px;
            line-height: 1.7;
            opacity: .96
        }

        .result-main-cta-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 16px;
            background: #fff;
            color: #d96c1f;
            padding: 16px 22px;
            border-radius: 18px;
            font-weight: 600;
            font-size: 16px;
            box-shadow: none;
            transition: transform .2s ease;
            text-decoration: none
        }

        .result-main-cta-btn:hover {
            transform: translateY(-2px)
        }

        .result-closing-cta {
            margin-top: 24px;
            padding: 28px 24px;
            border-radius: 26px;
            background: #fff7f1;
            border: none;
            text-align: center
        }

        .result-closing-cta-headline {
            font-size: 18px;
            font-weight: 600;
            color: #0f172a;
            line-height: 1.5;
            letter-spacing: -.01em
        }

        .result-closing-cta-sub {
            margin-top: 10px;
            font-size: 14px;
            color: #6b7280;
            line-height: 1.7
        }

        .result-closing-cta-btn {
            display: inline-flex;
            margin-top: 18px;
            align-items: center;
            gap: 8px;
            background: #ff7a1a;
            color: #fff;
            padding: 16px 28px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 16px;
            box-shadow: none;
            transition: transform .2s ease;
            text-decoration: none
        }

        .result-closing-cta-btn:hover {
            transform: translateY(-2px)
        }

        .floating-cta {
            position: fixed;
            bottom: 28px;
            right: 28px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #ff7a1a;
            color: #fff;
            padding: 16px 24px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 15px;
            box-shadow: none;
            z-index: 90;
            transition: transform .2s ease;
            text-decoration: none
        }

        .floating-cta:hover {
            transform: translateY(-3px)
        }

        .floating-cta-arrow {
            font-size: 14px;
            margin-left: 2px
        }

        @media (max-width: 640px) {
            .floating-cta {
                display:none
            }
        }

        @media (max-width: 420px) {
            .result-main-cta {
                padding:20px;
                border-radius: 20px
            }

            .result-main-cta-headline {
                font-size: 18px
            }

            .result-main-cta-btn {
                padding: 14px 18px;
                font-size: 15px
            }

            .result-closing-cta {
                padding: 24px 18px;
                border-radius: 22px
            }

            .result-closing-cta-headline {
                font-size: 16px
            }

            .result-closing-cta-btn {
                padding: 14px 22px;
                font-size: 15px
            }
        }

/* ===== style block #2 ===== */
/*스마트올 리뉴얼*/
.myBannerVerticalSwiper {
	width: 130px;
    height: 60px;
    margin-right: 0;
    margin-bottom: 0px;
}
.myBannerVerticalSwiper .swiper-slide{
	display:flex;
    margin-bottom: 0;
    align-items: flex-end;
}
.myBannerVerticalSwiper .swiper-slide{
background:#fff;
}
.campainTxt{
	height:60px;
	width:auto;
	margin-left:auto;
	margin-right:auto;
}
.think_better{
	width:150px;
	margin-bottom:5px;
}


@media only screen and (max-width: 1024px) {
	.myBannerVerticalSwiper{
		display:none;	
	}
	
	/*상단버튼 - 모바일에서만 처리*/
	#floatGotoUp {
	  opacity: 0;
	  visibility: hidden;
	  transition:0.1s;
	}
	
	#floatGotoUp.show {
	  opacity: 1;
	  visibility: visible;
	}

}

/* ============================================================
   [추가] 연령 선택 칩 = searchAll .chip-base 차용 + 전체배경/900 구분
   ============================================================ */
/* 전체 배경(그레이) vs 가운데 900 컨테이너(화이트) 구분 */

.wrap { background:var(--gr100) }

/* 연령 칩 (searchAll .chip-base 스타일) */
.age-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--gr150);
  border-radius: 999px;
  background: #fff;
  color: var(--gr700);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.age-select-btn.selected {
  border-color: var(--pri700);
  background: #FFFBF4;
  color: var(--pri700);
  font-weight: 600;
}
.age-select-btn.selected::after { content: none; }

/* ============================================================
   [최종] 외곽 배경(gr100) + 시작 버튼 영역(.cta-wrap, wrap 최하단)
   ============================================================ */
/* sticky 살리기: layout.css의 body>div{overflow-x:hidden}이 #app을 스크롤컨테이너로
   만들어 sticky가 죽음 → clip 으로 회피(가로는 자르되 컨테이너 생성 X) */
#app { overflow-x: clip; overflow-y: visible; }
/* 모바일 '당겨서 새로고침'으로 결과 페이지가 reload되며 카드가 다시 도는 것 방지 */
html, body { overscroll-behavior-y: contain; }

/* 최초 진입 로딩: 흰 배경 + 캐릭터 얼굴 순차 전환 + 원형 링 채움 */
.kv-loading {
  position: fixed; inset: 0; z-index: 99999; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity .45s ease;
}
.kv-loading.is-done { opacity: 0; pointer-events: none; }
.kv-load-ring { position: relative; width: 150px; height: 150px; }
.kv-load-ring svg { width: 150px; height: 150px; transform: rotate(-90deg); display: block; }
.kv-load-track { fill: none; stroke: #eef2f7; stroke-width: 7; }
.kv-load-bar {
  fill: none; stroke: url(#kvLoadGrad); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 339.292; stroke-dashoffset: 339.292;
  animation: kvLoadFill 2.2s ease-in-out forwards;
}
@keyframes kvLoadFill { to { stroke-dashoffset: 0; } }
.kv-load-face { position: absolute; top: 50%; left: 50%; width: 98px; height: 98px; transform: translate(-50%, -50%); object-fit: contain; }
.kv-load-text { font-size: 15px; font-weight: 500; color: var(--gr500); }

/* ============================================================
   Section_MBTI — 퍼블 전용 색상/그라데이션 변수
   ※ 중립색은 디자인 토큰(gr*/white)을 코드에서 직접 사용.
     여기엔 토큰으로 없는 커스텀(KV/글래스)과 타입별 결과 테마만 정의.
   ※ --c, --c-soft, --c-100, --c-050, --c-bg, --c-strong 은 mbti.html
     THEME_COLORS(Figma color_XXX)에서 JS로 :root 에 주입됨.
   ============================================================ */
:root {
  /* ── 인트로 KV (커스텀, 토큰 없음) ───────────── */
  --mbti-kv-bg:        linear-gradient(0deg, #F2EFFF 9.33%, #ACF2FF 89.38%);  /* KV 배경 */
  --mbti-kv-badge-ink: #06176d;                                          /* KV 배지 글자 */

  /* 글래스(배지/칩): 사선 줄무늬 채움 + 흰 그라데이션 보더 */
  --mbti-glass-fill:   repeating-linear-gradient(135deg, rgba(255,255,255,0.28) 6px, rgba(255,255,255,0.08) 24px, rgba(255,255,255,0.28) 42px);
  --mbti-glass-border: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.25));

  /* ── 결과 테마(타입별 --c 계열 기반 파생) ────── */
  --mbti-result-bg:  linear-gradient(180deg, var(--c-100) 0, var(--c-100) 110px, var(--c-050) 300px, var(--c-bg) 580px); /* 결과 배경 */
  --mbti-card-front: linear-gradient(180deg, var(--c-soft) 24.76%, var(--c) 76.67%);   /* 결과카드 앞면 */
  --mbti-card-back:  color-mix(in srgb, var(--c) 70%, var(--c-soft) 30%);              /* 결과카드 뒷면 */
  --mbti-card-edge:  color-mix(in srgb, var(--c) 60%, #000 40%);                       /* 카드 측면 음영 */
  --mbti-badge:      var(--c-strong);                                                  /* 결과 타입 배지 */
}

/* .wrap 을 한 번 더 감싼 외곽 래퍼 — 풀폭 배경 gr100 */
.mbti-bg { background: var(--gr100); }

/* 시작 버튼 영역: wrap 최하단(footer 위). 스크롤 중 떠 있다 끝에서 풀림 */
.cta-wrap {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-top: 8px;
  padding: 24px 0 16px;
  background: linear-gradient(to top, #fff 0%, #fff 66%, rgba(255,255,255,0) 100%);
}
.cta-wrap .start-test-btn {
  position: static;
  width: 100%;
  margin: 0;
  font-weight: 600;
  box-shadow: none;
}

.bright-age-panel { padding-bottom: 40px; }

/* 모든 액션 버튼 radius 999px (정답카드/칩 제외) */
.start-test-btn,
.control-btn,
.share-btn,
.btn-orange,
.mobile-sticky .btn-orange,
.floating-cta,
.result-actions button,
.result-actions a { border-radius: 999px !important; }

/* ============================================================
   [추가] cta-wrap z-index 조정 + 연령 칩 hug/wrap + group-badge 소제목화
   ============================================================ */
/* 플로팅(맨위로/AI챗봇, z-index:9)보다 위로 */
.cta-wrap { z-index: 20; }

/* 연령 칩: 내용 너비만큼(hug) + 넘치면 줄바꿈 (기존 grid 해제) */
.age-select-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.age-select-btn { width: auto; }

/* group-badge: 알약 칩버튼 → 칩 그룹의 작은 소제목 */
.group-badge {
  display: inline-flex;
  padding: 0;
  border: none;
  background: transparent !important;
  border-radius: 0;
  font-size: 17px;
  font-weight: 600;
}
.group-infant     { background: transparent !important; color: var(--gr800) !important; }
.group-preschool  { background: transparent !important; color: var(--gr800) !important; }
.group-elementary { background: transparent !important; color: var(--gr800) !important; }

/* ============================================================
   [추가] 퀴즈 — footer-controls 화살표 네비 + option-btn 배경 gr100
   ============================================================ */
/* 컨트롤: 떠있는 바/Z-index 제거 → 단순 화살표 네비 */
.footer-controls {
  position: static;
  z-index: auto;
  margin-top: 20px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}
.control-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.control-btn {
  background: transparent !important;
  border: none;
  border-radius: 0;
  padding: 8px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gr500);
}
.control-btn:hover { color: var(--gr800); }

/* 정답 선택지: 칩과 달리 gr100 배경으로 구분 */
.option-btn { background: #fff; border: 1px solid var(--gr150); }

.option-btn.selected { border-color: var(--pri700); background: #fff; }
.option-btn.selected:hover { border-color: var(--pri700); }

/* 질문 제목 */
.quiz-card h2 { font-size: 20px; font-weight: 600; }

/* 결과 공유 버튼: 시작 버튼과 동일 형태 + 아웃라인(흰 배경 / gr900 글자 / gr150 보더) */
.cta-outline {
  background: #fff !important;
  color: var(--gr900) !important;
  border: 1px solid var(--gr150) !important;
}

/* 퀴즈 진행바: 화면 최상단 고정 (헤더보다 위) */
.progress {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--gr150);
  z-index: 99999;
  overflow: hidden;
}
.progress > span { border-radius: 0 !important; }

/* 진행바는 position:fixed 라 레이아웃 공간을 차지하지 않음 → body 패딩 불필요(헤더 밀림/gap 방지) */

/* top-row: 순수 인디케이터 — gr400 텍스트, 장식 없음 */
.top-row { margin: 0; align-items: center; }
.top-row .quiz-meta,
.top-row .quiz-count {
  color: var(--gr400);
  font-size: 13px;
  font-weight: 500;
}

/* ============================================================
   미디어쿼리 — 데스크탑(≥1025)/모바일(≤1024) 각 1회. 모든 모바일 오버라이드는 이 블록 한 곳에만.
   (해상도 정의는 여기서 단 한 번)
   ============================================================ */
@media (min-width: 1025px) {
    .option-btn:not(.selected):hover { border-color: var(--gr300); }
    .res-prod:hover { border-color: var(--gr300); }
    .res-option:not(.selected):hover { border-color: var(--gr300, #adb5bd); }
    .age-select-btn:not(.selected):hover { border-color: var(--gr300); background: #fff; transform: none; }
    .quiz-nav-btn:hover { color: var(--gr800, #343a40); }
}
   @media (max-width: 1024px) {

  /* 모바일 하단 네비 완전 제거 */
  .fixedBottomnavi.onlyMO.fixed_st_2025.st2 { display: none !important; }

  /* 맨위로/AI챗봇 플로팅이 하단 CTA와 겹치지 않게 위로 올림 */
  .fixedFloatingBtnGroup { bottom: 96px !important; }

  /* 모바일은 회색 없이 풀폭 흰색으로 쭉 */
  .mbti-bg,
  .wrap { background: #fff; }
  .wrap { padding: 0; max-width: 100%; }

  /* 카드형 섹션 라운드 제거 → 풀폭 끊김없이 진행 */
  .bright-hero,
  .bright-age-panel,
  .panel,
  .quiz-card,
  .result-hero,
  .story-card,
  .product-card,
  .card { border-radius: 0; }

  /* 모바일: 퀴즈 카드 패딩 제거 */
  .quiz-card { padding: 0; }
  .option-btn { padding: 14px 16px; }

  /* 하단 CTA: 풀폭 + 흰색 배경 */
  .cta-wrap {
    margin: 0;
    padding: 56px 16px 16px;
    background: linear-gradient(to top, #fff 0%, #fff 85%, rgba(255,255,255,0) 100%);
  }
  .cta-wrap .start-test-btn {
    width: 100%;
    padding: 15px;
    font-size: 16px;
  }

}

/* ============================================================
   결과 페이지 리디자인 — Figma "결과_INTJ" 핑크 리포트
   (node cbpzEXglRzhYMacIhXcOtN / 347:61)
   ============================================================ */
/* 결과 단계: 페이지 전체 너비로 상단 그라데이션 + 그 아래 테마 배경색
   (--c* 변수는 JS applyResultTheme()가 :root에 주입, 폴백은 INTJ 핑크) */
/* 공통 레이아웃 (인트로/퀴즈/결과 모두 .res 사용) */
.wrap:has(.res) { background: transparent; max-width: none; padding: 0; }
/* 결과의 하단 중복 CTA(공유) 숨김 — 설문의 cta-wrap은 .res 내부(직속 아님)라 영향 없음 */
.wrap:has(.res) > .cta-wrap { display: none; }

/* 설문(인트로/퀴즈) 기본 배경 */
.mbti-bg:has(.res) { background: #f4f7fa; }

/* 결과 단계: 유형 테마 그라데이션 (첫 색을 카드 상단까지 끌고온 뒤 페이드, viewport 고정) */
.mbti-bg:has(.res.is-result) {
  background: linear-gradient(180deg, var(--c-100) 0, var(--c-100) 110px, var(--c-050) 300px, var(--c-bg) 580px);
  
  background-repeat: no-repeat;
}

.res {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 30px 0;
  overflow: visible;
  word-break: keep-all;
}


/* 히어로 */
.res-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  perspective: 1000px;
}
/* 콘페티 */
.res-confetti {
  position: absolute;
  inset: -10% 0 -10% 0;   /* 히어로(카드) 영역 덮음 */
  pointer-events: none;
  overflow: hidden;       /* 영역 밖으로 안 새게 */
  z-index: -1;            /* 카드/텍스트 뒤(배경)에 깔림 */
}
.confetti-piece {
  position: absolute;
  top: 0;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
  animation: confettiFlow var(--dur, 4s) linear var(--delay, 0s) infinite;
}
@keyframes confettiFlow {
  0%   { opacity: 0; transform: translate(0, -30px) rotate(0deg); }
  12%  { opacity: var(--op, .8); }
  88%  { opacity: var(--op, .8); }
  100% { opacity: 0; transform: translate(var(--drift, 0px), var(--fall, 360px)) rotate(var(--r, 360deg)); }
}
.res-lead {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--gr600);
  line-height: 1.4;
  text-align: center;
}
/* 카드 플립: 처음 로드 시 뒷면(?) → 휘릭 → 앞면, 이후 은은한 플로팅 */
.res-flip {
  width: 300px;
  perspective: 1200px;
  animation: cardFloat 3.6s ease-in-out 1.2s infinite;
}
.res-flip-inner {
  --depth: 16px;
  position: relative;
  transform-style: preserve-3d;
  animation: cardFlip 1.1s linear .15s both;
}
@keyframes cardFlip {
  0%   { transform: rotateY(180deg) scale(.9);  animation-timing-function: cubic-bezier(.5,0,1,.55); }
  30%  { transform: rotateY(90deg)  scale(.85); animation-timing-function: cubic-bezier(.1,.7,.25,1); }
  100% { transform: rotateY(0deg)   scale(1); }
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(-3deg); }
  50%      { transform: translateY(-8px) rotateX(3deg) rotateY(3deg); }
}
/* 앞면 */
.res-card {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 8px;
  border-radius: 36px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: linear-gradient(180deg, var(--c-soft) 24.76%, var(--c) 76.67%);
  box-shadow: 0 30px 38px -14px color-mix(in srgb, var(--c) 48%, transparent);
}
/* 뒷면(?) — 뒤로(-depth) 밀어 두께 확보(회전축 겹침선 제거) */
.res-flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg) translateZ(var(--depth));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 36px;
  background: color-mix(in srgb, var(--c) 70%, var(--c-soft) 30%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.res-flip-back span { color: #fff; font-size: 130px; font-weight: 800; line-height: 1; }
/* 옆면(두께) — 앞면(z=0)과 뒷면(z=-depth)을 잇는 4개 벽: 테마 진한색 */
.res-edge {
  position: absolute;
  background: color-mix(in srgb, var(--c) 60%, #000 40%);
  border-radius: 10px;
}
.res-edge-l, .res-edge-r { top: 8px; bottom: 8px; width: var(--depth); }
.res-edge-l { left: 0;  transform-origin: left center;  transform: rotateY(90deg); }
.res-edge-r { right: 0; transform-origin: right center; transform: rotateY(-90deg); }
.res-edge-t, .res-edge-b { left: 8px; right: 8px; height: var(--depth); }
.res-edge-t { top: 0;    transform-origin: center top;    transform: rotateX(-90deg); }
.res-edge-b { bottom: 0; transform-origin: center bottom; transform: rotateX(90deg); }
.res-badge {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 20px;
  border-radius: 32px;
  background: var(--c-strong);
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
.res-img { position: relative; width: 260px; height: 260px; }
.res-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
/* 캐릭터 뒤에 같은 크기 그림자 이미지 + 포토샵 darken 효과 */
.res-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--shadow-img) center / contain no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.res-name {
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.res-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 32px;
  background: var(--gr700);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.res-save-ic { width: 24px; height: 24px; }

/* 본문 */
.res-body {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0 20px;
}
.res-box {
  background: #fff;
  border-radius: 36px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.res-box-head { display: flex; flex-direction: column; gap: 12px; }
.res-h {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--gr900);
  line-height: 1.3;
  word-break: keep-all;
}
.res-sub {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--gr500);
  line-height: 1.7;
}
.res-story { white-space: pre-line; }

/* 카드1 — 핵심 성향 칩 */
.res-chips { display: flex; flex-direction: column; gap: 12px; }
.res-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #f4f7fa;
  font-size: 15px;
  font-weight: 600;
  color: var(--gr900);
  line-height: 1.4;
}
.res-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

/* 카드2 — 성향 게이지 */
.res-gauges { display: flex; flex-direction: column; gap: 12px; }
.res-gauge-row { display: flex; align-items: center; gap: 8px; }
.res-gauge-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 47px;
}
.res-gauge-side.is-right { justify-content: flex-end; }
.res-gauge-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--gr100);
  color: var(--gr400);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  transition: background .3s ease var(--ld, .25s), color .3s ease var(--ld, .25s);
}
.res-gauge-label { font-size: 12px; color: var(--gr300); line-height: 1.5; white-space: nowrap; }
/* 점등(play) 시에만 이긴 글자칩 색 적용 → 회색에서 켜지듯 전환 */
.res-gauges.play .res-gauge-side.is-win .res-gauge-letter { background: var(--c); color: #fff; }
/* 단색 칸칸이(세그먼트) 게이지 — 10칸, 양끝만 둥글게 */
.res-gauge-bar {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
  height: 12px;
}
.res-gauge-cell {
  flex: 1;
  height: 100%;
  border-radius: 0;
  background: #e7edf4;
}
.res-gauge-cell:first-child {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}
.res-gauge-cell:last-child {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}
/* 채움색: 카드 그라데이션의 어두운 쪽(--c). 점등(play) 시 회색→색상으로 순차 전환(크기 변화 없음) */
@keyframes gaugeFill {
  from { background: #e7edf4; }
  to   { background: var(--c); }
}
.res-gauges.play .res-gauge-cell.is-on {
  animation: gaugeFill .3s ease both;
  animation-delay: var(--d, 0ms);
}

/* 스크롤 등장 효과(아래 → 위로 페이드업). JS가 reveal-ready 부여 시에만 숨김 */
.reveal { transition: opacity .55s ease, transform .55s ease; }
.reveal-ready .reveal { opacity: 0; transform: translateY(20px); }
.reveal-ready .reveal.in { opacity: 1; transform: none; }

/* 카드3 — 이야기/노트 */
.res-notes { display: flex; flex-direction: column; gap: 12px; }
.res-note {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #f4f7fa;
}
.res-note-head { display: flex; align-items: center; gap: 10px; }
.res-note-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-size: 15px;
}
.res-note-head b { font-size: 16px; font-weight: 600; color: var(--gr900); line-height: 1.4; }
.res-note p { margin: 0; font-size: 16px; font-weight: 400; color: var(--gr500); line-height: 1.7; }
.res-disclaimer { margin-top: 4px; font-size: 13px; color: var(--gr400); line-height: 1.6; text-align: center; }
.res-disclaimer .mo-br { display: none; }
@media (max-width: 1024px) { .res-disclaimer .mo-br { display: inline; } }

/* 카드4 — 추천 과목 */
/* 토스식: 카드 전체가 탭 영역. 테두리 대신 옅은 채움 + 우측 화살표 */
.res-prod {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #e7edf4;
  text-decoration: none;
  transition: background .15s ease;
}

.res-prod-img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--gr100);
  overflow: hidden;
}
.res-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.res-prod-img img.img-fallback { object-fit: contain; padding: 8px; background: #fff; }
.res-prod-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.res-prod-name { font-size: 16px; font-weight: 600; color: var(--gr900); line-height: 1.4; }
.res-prod-desc { margin: 0; font-size: 13px; font-weight: 400; color: var(--gr500); line-height: 1.45; }
.res-prod-more {
  display: inline-block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gr400);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 하단 액션 (다시하기/다른 연령) */
.res-actions { display: flex; flex-direction: row-reverse; gap: 10px; padding-bottom: 8px; }
.res-act-btn {
  flex: 1;
  min-width: 0;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--gr700);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.res-act-btn.is-ghost { background: #fff; color: var(--gr600); }

/* ============================================================
   설문(인트로/퀴즈) — 결과와 동일한 .res / .res-box 레이아웃 재사용
   ============================================================ */
.res > .cta-wrap { width: 100%; }

/* KV 영역: 다른 배경(하늘색 그라데이션) + 내부 100%(res-box 폭과 동일) */
.res.is-survey { padding-top: 30px; }
/* KV: 배경은 화면 풀폭, 내부 콘텐츠만 420 컬럼에 맞춤 */
.res-kv {
  width: 100%;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, #a8f2ff 0%, #f5ffca 100%);
  position: relative;
  overflow: hidden;
}
/* KV 데코 — 개별 요소(고정 크기, 중앙 기준 → 가로 줄면 clip).
   DOM 뒤→앞: 떠있는 구름 → 하단구름 → 언덕(맨 앞). 떠있는 구름만 두둥실. */
.kv-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.kv-deco span { position: absolute; display: block; background-repeat: no-repeat; background-size: contain; background-position: center; }
.kv-deco-ground { background-image: url('https://cache.wjthinkbig.com/WEB_RESOURCE/WJBOOKCLUB/images/OPENPAGE/202606/MBTI/kv/bg_bottom.webp'); width: 1200px; height: 240px; left: 50%; transform: translateX(-50%); bottom: 0;  }
.kv-deco-ground { background-size: auto; background-position: center bottom; }
.kv-deco-cloudbottom { background-image: url('https://cache.wjthinkbig.com/WEB_RESOURCE/WJBOOKCLUB/images/OPENPAGE/202606/MBTI/kv/cloud_bottom.webp'); width: 1400px; height: 240px; left: 50%; transform: translateX(-50%); bottom: -60px; }
.kv-cloud { animation: kvFloat 5s ease-in-out infinite; }
.kv-cloud1 { background-image: url('https://cache.wjthinkbig.com/WEB_RESOURCE/WJBOOKCLUB/images/OPENPAGE/202606/MBTI/kv/cloud-1.webp'); width: 300px; height: 150px; left: calc(50% - 363px); transform: translateX(-50%); top: 230px; }
.kv-cloud2 { 
        background-image: url(https://cache.wjthinkbig.com/WEB_RESOURCE/WJBOOKCLUB/images/OPENPAGE/202606/MBTI/kv/cloud-2.webp);
    width: 473px;
    height: 180px;
    left: calc(50% + 440px);
    transform: translateX(-50%);
    top: 337px;
    animation-duration: 6s;
    animation-delay: -2s;
}
.kv-dot1 {
    background-image: url(https://cache.wjthinkbig.com/WEB_RESOURCE/WJBOOKCLUB/images/OPENPAGE/202606/MBTI/kv/cloud-dot1.webp);
    width: 100px;
    height: 100px;
    left: calc(50% + 298px);
    transform: translateX(-50%);
    top: 220px;
    animation-duration: 4.5s;
    animation-delay: -1s;
}
@keyframes kvFloat { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-7px); } }
@media (max-width: 640px) {
  .kv-deco span.kv-deco-ground{ 
        width: 100%;
        height: 100%;
        background-position: center bottom;
        background-size: 100%;
        background-image: url(https://cache.wjthinkbig.com/WEB_RESOURCE/WJBOOKCLUB/images/OPENPAGE/202606/MBTI/kv/bg_bottom_mo.webp);
  }
  .kv-deco span.kv-deco-cloudbottom { 
        width: 100%;
        height: 100%;
        background-position: center bottom;
        background-size: 100%;
        background-image: url(https://cache.wjthinkbig.com/WEB_RESOURCE/WJBOOKCLUB/images/OPENPAGE/202606/MBTI/kv/cloud_bottom_MO.webp);
  }
  .kv-cloud1 {
            width: 120px;
        height: 60px;
        left: calc(50% - 152px);
        top: 84px;
  }
  .kv-cloud2 { 
            width: 280px;
        height: 100px;
        left: calc(50% + 165px);
        top: 271px;
  }
  .kv-dot1 { 
    width: 48px;
        height: 48px;
        left: calc(50% + 140px);
        top: 88px;
  }
}
.res-kv-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 48px 20px 52px;
}

/* ===== KV 새 디자인 (뱃지 + 타이틀 + 부제 + M·B·T·I 순차 플립 카드) ===== */
@font-face {
  font-family: 'NanumSquare';
  src: url('/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'NanumSquare';
  src: url('/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2') format('woff2');
  font-weight: 800; font-display: swap;
}
.kv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 32px;
  border: 1px solid #ffffff;
  background: linear-gradient(111.24deg, rgba(255,255,255,0.4) 1.653%, rgba(255,255,255,0.7) 34.978%, rgba(255,255,255,0.6) 97.298%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #0093d1;
  font-size: 16px;
  font-weight: 500;
}
.kv-title {
  margin: 0;
  font-family: 'NanumSquare', 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--gr900);
}
.kv-sub {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gr500);
}
.kv-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: min(90%, 360px);
  margin-top: 4px;
}
.kv-card { aspect-ratio: 1; perspective: 800px; }
.kv-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
/* 회전 중 90°에서 살짝 축소 → 가운데 축선 안 보이게 (결과카드와 동일 처리) */
@keyframes kvFlipOpen {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}
@keyframes kvFlipClose {
  0%   { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}
.kv-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20%;            /* 카드 흰 모서리 클립(둥근 카드 모양으로) */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.kv-back { transform: translateZ(1px); }                  /* 면 분리(z-fighting 방지) */
.kv-front { transform: rotateY(180deg) translateZ(1px); }
/* KV 아래 안내 칩 (인트로_PC) */
.kv-chips {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.kv-chips-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.kv-chip {
  border: 1px solid #ffffff;
  background: linear-gradient(111.24deg, rgba(255,255,255,0.4) 1.653%, rgba(255,255,255,0.7) 34.978%, rgba(255,255,255,0.6) 97.298%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--gr600);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.kv-chip-dup { display: none; }   /* PC에선 중복 칩 숨김 */

/* 모바일: 한 줄 100% + 위아래 롤링 티커 */
@media (max-width: 640px) {
  .kv-chips {
    display: block; width: 100%; max-width: 360px; height: 42px; overflow: hidden;
    border: 1px solid #ffffff; border-radius: 999px;
    background: linear-gradient(111.24deg, rgba(255,255,255,0.4) 1.653%, rgba(255,255,255,0.81) 34.978%, rgba(255,255,255,0.6) 97.298%);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .kv-chips-track {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    animation: chipRoll 6s cubic-bezier(.7, 0, .3, 1) infinite;
  }
  .kv-chip {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .kv-chip-dup { display: flex; }
}
@keyframes chipRoll {
  0%, 28%  { transform: translateY(0); }
  36%, 61% { transform: translateY(-42px); }
  69%, 94% { transform: translateY(-84px); }
  100%     { transform: translateY(-126px); }
}
.kv-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.kv-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
/* PC: 폰트/카드 살짝 키움 (세로 배치 유지) */
@media (min-width: 1025px) {
  .kv-title { font-size: 36px; }
  .kv-sub { font-size: 20px; }
  .kv-cards { max-width: 412px; }   /* 200px×2 + gap 12px */
}
.res.is-survey{ gap:0; padding-top: 60px; padding-bottom: 24px; }
.res.is-survey .cta-wrap{
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 16px 20px;
  background: none;
}
.res.is-survey .cta-wrap .start-test-btn { max-width: 480px; }
.start-test-btn.is-off { background: #e5e7eb; color: #98a2b3; cursor: not-allowed; }
.start-test-btn.is-off:hover { transform: none; box-shadow: none; }
/* ON + 고정(sticky stuck) 상태일 때만: 카드형 그림자 + 둥둥 모션 (제자리 복귀 시 자동 제거) */
.res.is-survey .cta-wrap.is-stuck .start-test-btn:not(.is-off) {
  box-shadow: 0 10px 24px -6px rgba(255, 122, 0, 0.45);
  animation: ctaFloat 2.2s ease-in-out infinite;
}
@keyframes ctaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* 인트로 히어로 텍스트 */
.res-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  border-radius: 999px;
  background: #fff3ea;
  color: #d96c1f;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
}
.res-title {
  margin: 0;
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--gr900);
}
.res-title-accent { color: var(--pri700, #ff8a3d); }
.res-mini { display: flex; flex-wrap: wrap; gap: 8px; }
.res-mini span {
  display: inline-flex;
  border-radius: 999px;
  background: #f4f7fa;
  color: var(--gr500);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
}

/* 연령 그룹 */
.res-age-group { display: flex; flex-direction: column; gap: 10px; }
.res-age-group-head { display: flex; align-items: baseline; gap: 8px; }
.res-age-label { font-size: 16px; font-weight: 700; color: var(--gr900); }
.res-age-guide { font-size: 13px; color: var(--gr400); font-weight: 400; }

/* 퀴즈 */
.quiz-meta-row { display: flex; justify-content: space-between; align-items: center; }
.quiz-meta, .quiz-count { font-size: 13px; font-weight: 500; color: var(--gr400); }
/* 진행바: 카드 상단 캡(유아·나이 / N·12) 아래 인라인 배치 */
.quiz-head { margin-bottom: 18px; }
.quiz-head .quiz-meta-row { margin-bottom: 10px; }
.quiz-head .progress {
  position: static !important;
  top: auto; left: auto;
  width: 100%;
  height: 8px;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #e3e9f0;
  z-index: auto;
  overflow: hidden;
}
.quiz-head .progress > span { border-radius: 999px !important; background: linear-gradient(90deg, #ff7a00 0%, #ffc24b 100%); }
.res-options { display: flex; flex-direction: column; gap: 10px; }
.res-option {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 16px 50px 16px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--gr150, #dee2e6);
  font-size: 15px;
  font-weight: 500;
  color: var(--gr900);
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s ease;
}
.res-option.selected { background: #fff; border-color: var(--pri700, #ff8a3d); }
.res-option-check {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pri700, #ff8a3d);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}
.res-tip {
  padding: 0;
  background: transparent;
  color: var(--gr400);
  font-size: 13px;
  line-height: 1.6;
}
.res-tip strong { color: var(--pri700, #ff8a3d); margin-right: 8px; }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; }
.quiz-nav-btn {
  border: none;
  background: transparent;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gr500);
  cursor: pointer;
}

/* 모바일(≤640): 카드 안쪽 여백 24px 유지 */
@media (max-width: 640px) {
  .res-box { padding: 24px; }
  .res-actions { flex-direction: column; }
  .res.is-survey{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .res-box{
        padding: 28px 20px;
        border-radius: 28px;
  }
}

/* 모바일: 결과 카드 살짝 축소 (비율 유지, ~280) */
@media (max-width: 640px) {
  .res-lead { font-size: 16px; }
  .res-flip { width: 280px; }
  .res-img { width: 240px; height: 240px; }
  .res-badge { font-size: 20px; height: 32px; line-height: 32px; padding: 0 16px; }
  .res-name { font-size: 24px; }
  .res-flip-back span { font-size: 110px; }
  .res-card{ width: 280px;}
}

/* 초소형 화면(≤320): 카드를 화면 폭의 80%로 */
@media (max-width: 320px) {
  .res-flip { width: 80%; }
  .res-card { width: 100%; }
}

/* MBTI 페이지: 플로팅 버튼 그룹 완전 숨김 (PC/MO) */
.fixedFloatingBtnGroup,
.fixedFloatingBtnGroup.flxBox { display: none !important; }