/* ══════════════ TOKENS ══════════════ */
        :root {
            --black: #0a0a0a;
            --ink: #1a1a1a;
            --white: #ffffff;
            --green: #009457;
            --green-d: #006e3f;
            --green-l: #e6f7ef;
            --green-m: #b3e8cd;
            --yellow: #FFD200;
            --yellow-d: #e6b800;
            --gray: #f4f4f2;
            --gray-m: #e0e0de;
            --ink-50: #888886;
            --ink-20: #d4d4d2;
            --accent: #ff4d1c;
            --r-sm: 8px;
            --r-md: 16px;
            --r-lg: 24px;
            --r-xl: 36px;
            --max: 480px;
            /* 모바일 중심 max-width */
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: 'Noto Sans KR', sans-serif;
            background: var(--black);
            color: var(--white);
            overflow-x: hidden;
            padding-bottom: 72px;
        }

        /* ══════════════ SCROLL REVEAL ══════════════ */
        .reveal {
            opacity: 0;
            transform: translateY(36px);
            transition: opacity 0.65s cubic-bezier(.22, .68, 0, 1.2), transform 0.65s cubic-bezier(.22, .68, 0, 1.2);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-d1 {
            transition-delay: 0.1s;
        }

        .reveal-d2 {
            transition-delay: 0.2s;
        }

        .reveal-d3 {
            transition-delay: 0.3s;
        }

        .reveal-d4 {
            transition-delay: 0.45s;
        }

        /* ══════════════ SECTIONS ══════════════ */
        section {
            width: 100%;
            max-width: var(--max);
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        /* ══════════════ §0 HERO ══════════════ */
        .hero {
            background: var(--black);
            min-height: 100svh;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;
            overflow: hidden;
        }

        .hero-img-wrap {
            position: absolute;
            inset: 0;
        }

        .hero-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
        }

        /* Dual overlay: person visible right, text readable left */
        .hero-img-wrap::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(to right, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.42) 52%, rgba(0, 0, 0, 0.04) 100%),
                linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.38) 68%, rgba(0, 0, 0, 0.88) 100%);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            padding: 0 24px 36px;
        }

        /* Pill badge */
        .pill-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--yellow);
            color: var(--ink);
            font-size: 12px;
            font-weight: 900;
            padding: 5px 13px;
            border-radius: 20px;
            margin-bottom: 14px;
            letter-spacing: 0.04em;
        }

        .hero h1 {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 34px;
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: -0.03em;
            margin-bottom: 16px;
        }

        .hero h1 em {
            font-style: normal;
            color: var(--yellow);
            position: relative;
            display: inline-block;
        }

        /* Brush underline on em */
        .hero h1 em::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;
            right: 0;
            height: 4px;
            background: var(--yellow);
            border-radius: 2px;
            opacity: 0.5;
            transform: scaleX(0);
            transform-origin: left;
            animation: brushIn 0.6s 0.9s cubic-bezier(.22, .68, 0, 1) forwards;
        }

        @keyframes brushIn {
            to {
                transform: scaleX(1);
            }
        }

        /* Big number display */
        .hero-nums {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 20px;
        }

        .num-row {
            display: flex;
            align-items: baseline;
            gap: 4px;
        }

        .num-main {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 68px;
            font-weight: 900;
            line-height: 1;
            letter-spacing: -0.04em;
            color: var(--white);
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        }

        .num-main.yellow {
            color: var(--yellow);
        }

        .num-unit {
            font-size: 22px;
            font-weight: 700;
            color: var(--white);
            opacity: 0.9;
            margin-left: 2px;
        }

        .num-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.75);
            margin-bottom: 6px;
        }

        .hero-cta {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }

        .btn-primary {
            flex: 1;
            background: var(--yellow);
            color: var(--ink);
            border: none;
            border-radius: var(--r-md);
            padding: 16px 20px;
            font-size: 16px;
            font-weight: 900;
            font-family: 'Noto Sans KR', sans-serif;
            cursor: pointer;
            text-align: center;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.12s, background 0.12s;
        }

        .btn-primary:active {
            transform: scale(0.97);
            background: var(--yellow-d);
        }

        .btn-kakao {
            width: 52px;
            height: 52px;
            background: #FEE500;
            border: none;
            border-radius: var(--r-md);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        /* scroll indicator */
        .scroll-hint {
            position: absolute;
            bottom: 6px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.4);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateX(-50%) translateY(0)
            }

            50% {
                transform: translateX(-50%) translateY(-6px)
            }
        }

        /* ══════════════ §1 BEFORE/AFTER ══════════════ */
        .ba-section {
            background: var(--white);
            color: var(--ink);
            padding: 48px 24px;
        }

        .section-eyebrow {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--green);
            margin-bottom: 8px;
        }

        .section-title {
            font-family: 'Noto Serif KR', serif;
            font-size: 26px;
            font-weight: 700;
            color: var(--ink);
            line-height: 1.3;
            letter-spacing: -0.02em;
            margin-bottom: 28px;
        }

        .ba-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .ba-card {
            border-radius: var(--r-lg);
            overflow: hidden;
            position: relative;
            aspect-ratio: 3/4;
        }

        .ba-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .ba-tag {
            position: absolute;
            top: 12px;
            left: 12px;
            font-size: 11px;
            font-weight: 900;
            padding: 4px 10px;
            border-radius: 6px;
            letter-spacing: 0.05em;
        }

        .ba-tag.before {
            background: #333;
            color: #fff;
        }

        .ba-tag.after {
            background: var(--yellow);
            color: var(--ink);
        }

        .ba-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 14px 12px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
            color: #fff;
        }

        .ba-overlay strong {
            display: block;
            font-size: 14px;
            font-weight: 900;
            line-height: 1.3;
        }

        .ba-overlay span {
            font-size: 11px;
            opacity: 0.75;
        }

        /* ══════════════ §2 NUMBERS ══════════════ */
        .numbers-section {
            background: transparent;
            padding: 0;
            text-align: center;
            position: relative;
        }

        .numbers-section .section-eyebrow {
            color: var(--yellow);
        }

        .numbers-section .section-title {
            color: var(--white);
        }

        .big-nums {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2px;
            margin-bottom: 24px;
            border-radius: var(--r-lg);
            overflow: hidden;
            background: rgba(255, 255, 255, 0.06);
        }

        .big-num-card {
            background: rgba(255, 255, 255, 0.04);
            padding: 24px 16px;
            text-align: center;
        }

        .bnum {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 52px;
            font-weight: 900;
            line-height: 1;
            letter-spacing: -0.04em;
            display: block;
        }

        .bnum.blue {
            color: #4da6ff;
        }

        .bnum.green {
            color: #4dff9e;
        }

        .bnum-sub {
            font-size: 14px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.6);
            margin-top: 6px;
            display: block;
        }

        .bnum-desc {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.5);
            margin-top: 4px;
        }

        /* Free list */
        .free-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .free-item {
            background: rgba(255, 255, 255, 0.06);
            border: 0.5px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--r-md);
            padding: 16px 8px;
            text-align: center;
        }

        .free-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            margin: 0 auto 8px;
        }

        .free-icon.blue {
            background: rgba(77, 166, 255, 0.15);
        }

        .free-icon.green {
            background: rgba(77, 255, 158, 0.15);
        }

        .free-icon.purple {
            background: rgba(180, 100, 255, 0.15);
        }

        .free-title {
            font-size: 11px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.9);
        }

        .free-sub {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.4);
            margin-top: 2px;
        }

        /* ══════════════ §3 BENEFITS ══════════════ */
        .benefits-section {
            background: transparent;
            color: var(--ink);
            padding: 0;
            position: relative;
            overflow: hidden;
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .benefit-card {
            background: var(--white);
            border-radius: var(--r-lg);
            padding: 20px 16px;
            border: 0.5px solid var(--gray-m);
            transition: transform 0.15s;
        }

        .benefit-card:active {
            transform: scale(0.97);
        }

        .benefit-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--r-sm);
            background: var(--green-l);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-bottom: 12px;
        }

        .benefit-name {
            font-size: 13px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 4px;
        }

        .benefit-desc {
            font-size: 11px;
            color: var(--ink-50);
            line-height: 1.55;
        }

        /* ══════════════ §4 PROCESS ══════════════ */
        .process-section {
            background: transparent;
            color: var(--ink);
            padding: 0;
            position: relative;
        }

        .steps {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-top: 4px;
        }

        .step {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            padding-bottom: 28px;
            position: relative;
        }

        .step:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 17px;
            top: 38px;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, var(--green-m), transparent);
        }

        .step-circle {
            width: 36px;
            height: 36px;
            background: var(--green);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .step-body {
            padding-top: 7px;
        }

        .step-body strong {
            display: block;
            font-size: 14px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 3px;
        }

        .step-body p {
            font-size: 12px;
            color: var(--ink-50);
            line-height: 1.6;
        }

        /* ══════════════ §5 CTA BANNER ══════════════ */
        .cta-banner {
            background: transparent;
            padding: 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }



        .cta-banner .pill-badge {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            margin: 0 auto 16px;
            display: table;
        }

        .cta-banner h2 {
            font-family: 'Noto Serif KR', serif;
            font-size: 26px;
            font-weight: 700;
            color: var(--white);
            line-height: 1.3;
            margin-bottom: 6px;
        }

        .cta-banner p {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.75);
            line-height: 1.65;
            margin-bottom: 24px;
        }

        .btn-white {
            width: 100%;
            background: var(--white);
            color: var(--green-d);
            border: none;
            border-radius: var(--r-md);
            padding: 16px;
            font-size: 16px;
            font-weight: 900;
            font-family: 'Noto Sans KR', sans-serif;
            cursor: pointer;
            margin-bottom: 10px;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.12s;
        }

        .btn-white:active {
            transform: scale(0.97);
        }

        /* ══════════════ §6 REVIEWS ══════════════ */
        .reviews-section {
            background: var(--black);
            padding: 52px 0;
        }

        .reviews-inner {
            padding: 0 24px;
        }

        .reviews-section .section-title {
            color: var(--white);
        }

        .reviews-scroll {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding: 4px 24px 16px;
            margin: 0 -24px;
        }

        .reviews-scroll::-webkit-scrollbar {
            display: none;
        }

        .review-card {
            min-width: 260px;
            background: rgba(255, 255, 255, 0.06);
            border: 0.5px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--r-lg);
            padding: 20px;
            scroll-snap-align: start;
            flex-shrink: 0;
        }

        .review-stars {
            color: var(--yellow);
            font-size: 13px;
            letter-spacing: 2px;
            margin-bottom: 10px;
        }

        .review-quote {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.7;
            margin-bottom: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .review-author {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .review-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--green-d);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            color: var(--white);
        }

        .review-name {
            font-size: 12px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.9);
        }

        .review-meta {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.4);
        }

        /* ══════════════ §7 FAQ ══════════════ */
        .faq-section {
            background: var(--white);
            color: var(--ink);
            padding: 52px 24px;
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .faq-item {
            background: var(--gray);
            border-radius: var(--r-md);
            overflow: hidden;
        }

        .faq-q {
            padding: 15px 16px;
            font-size: 13px;
            font-weight: 700;
            color: var(--ink);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        .faq-icon {
            font-size: 18px;
            color: var(--green);
            transition: transform 0.2s;
            flex-shrink: 0;
        }

        .faq-item.open .faq-icon {
            transform: rotate(45deg);
        }

        .faq-a {
            display: none;
            padding: 0 16px 14px;
            font-size: 12px;
            color: var(--ink-50);
            line-height: 1.75;
            border-top: 0.5px solid var(--gray-m);
            padding-top: 10px;
        }

        .faq-item.open .faq-a {
            display: block;
        }

        /* ══════════════ §8 INLINE FORM ══════════════ */
        .form-section {
            display: none !important;
        }

        .form-section .section-eyebrow {
            color: #7a5c00;
        }

        .form-section .section-title {
            color: #1a1a0a;
        }

        .form-card {
            background: #ffffff;
            border: 1.5px solid #e2d9c0;
            border-radius: var(--r-xl);
            padding: 24px 20px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
        }

        .field-group {
            margin-bottom: 16px;
        }

        .field-label {
            font-size: 12px;
            font-weight: 700;
            color: #2a2a1a;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .field-req {
            font-size: 10px;
            background: rgba(220, 50, 30, 0.12);
            color: #c03010;
            padding: 2px 6px;
            border-radius: 4px;
        }

        .prog-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 5px;
        }

        .prog-opt {
            border: 1.5px solid #e0d8c8;
            border-radius: var(--r-sm);
            padding: 9px 10px;
            cursor: pointer;
            background: #faf7f0;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            transition: all 0.12s;
        }

        .prog-opt:hover {
            border-color: #c8a000;
            background: #fff9e0;
        }

        .prog-opt.active {
            border-color: #c8a000;
            background: linear-gradient(135deg, #fff8d0 0%, #fffbe8 100%);
            box-shadow: 0 0 0 2px rgba(200, 160, 0, 0.2);
        }

        .prog-opt-name {
            font-size: 11px;
            font-weight: 700;
            display: block;
            color: #1a1a0a;
        }

        /* Expand / etc panel */
        .prog-opt-full {
            grid-column: 1/-1;
        }

        .prog-opt-expand {
            display: flex;
            flex-direction: column;
        }

        .prog-etc-name {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .etc-label {
            font-size: 11px;
            font-weight: 700;
            color: #1a1a0a;
        }

        .etc-arrow {
            font-size: 11px;
            color: #a07800;
            transition: transform 0.2s;
        }

        .etc-arrow.open {
            transform: rotate(180deg);
        }

        .etc-selected {
            font-size: 10px;
            color: #a07800;
            margin-top: 3px;
            display: block;
        }

        .etc-panel {
            display: none;
            grid-template-columns: 1fr 1fr;
            gap: 5px;
            margin-top: 6px;
            background: #fffbe8;
            border: 1px solid #e8d080;
            border-radius: var(--r-sm);
            padding: 8px;
            animation: fadeDown 0.18s ease;
        }

        .etc-panel.open {
            display: grid;
        }

        .etc-panel .prog-opt {
            background: #fff;
        }

        @keyframes fadeDown {
            from {
                opacity: 0;
                transform: translateY(-4px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .etc-panel .prog-opt {
            background: rgba(255, 255, 255, 0.04);
        }

        .region-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }

        select,
        input[type=text],
        input[type=tel],
        textarea {
            width: 100%;
            border: 1.5px solid #ddd4b8;
            border-radius: var(--r-sm);
            padding: 12px 14px;
            font-size: 16px;
            font-family: 'Noto Sans KR', sans-serif;
            color: #1a1a0a;
            background: #fdfaf3;
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        select:focus,
        input:focus,
        textarea:focus {
            border-color: #c8a000;
            box-shadow: 0 0 0 3px rgba(200, 160, 0, 0.15);
            background: #fff;
        }

        select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a7000' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-color: #fdfaf3;
            padding-right: 32px;
        }

        select option {
            background: #fff;
            color: #1a1a0a;
        }

        textarea {
            resize: none;
            min-height: 80px;
            line-height: 1.6;
            font-size: 14px;
        }

        textarea::placeholder {
            color: #b0a888;
            font-size: 11px;
            line-height: 1.6;
        }

        input::placeholder {
            color: #b0a888;
        }

        .privacy-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 12px;
            background: #f5f0e0;
            border: 1px solid #e2d8b0;
            border-radius: var(--r-sm);
            margin-bottom: 14px;
        }

        .privacy-row input[type=checkbox] {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            margin-top: 1px;
            accent-color: #c8a000;
            cursor: pointer;
        }

        .privacy-row label {
            font-size: 11px;
            color: #4a4030;
            line-height: 1.55;
            cursor: pointer;
        }

        .privacy-row a {
            color: #9a7000;
            font-weight: 700;
            text-decoration: none;
        }

        .submit-btn {
            width: 100%;
            background: linear-gradient(135deg, #f0c000 0%, #d4a000 100%);
            color: #1a0a00;
            border: none;
            border-radius: var(--r-md);
            padding: 16px;
            font-size: 16px;
            font-weight: 900;
            font-family: 'Noto Sans KR', sans-serif;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.12s;
            box-shadow: 0 4px 14px rgba(180, 140, 0, 0.4);
            letter-spacing: -0.01em;
        }

        .submit-btn:hover {
            background: linear-gradient(135deg, #f8d000 0%, #e0b000 100%);
        }

        .submit-btn:active {
            transform: scale(0.97);
        }

        .form-or {
            text-align: center;
            font-size: 11px;
            color: #b0a060;
            margin: 10px 0;
            position: relative;
        }

        .form-or::before,
        .form-or::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 44%;
            height: 0.5px;
            background: #ddd0a0;
        }

        .form-or::before {
            left: 0;
        }

        .form-or::after {
            right: 0;
        }

        .kakao-btn-full {
            width: 100%;
            background: #FEE500;
            color: #191919;
            border: none;
            border-radius: var(--r-md);
            padding: 14px;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Noto Sans KR', sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            -webkit-tap-highlight-color: transparent;
        }

        .form-note {
            text-align: center;
            font-size: 11px;
            color: #8a7a50;
            margin-top: 10px;
            line-height: 1.6;
        }

        /* SUCCESS */
        .success-box {
            display: none;
            background: #e8f5ee;
            border: 1.5px solid #7fcc9f;
            border-radius: var(--r-lg);
            padding: 24px 20px;
            text-align: center;
            margin-top: 12px;
        }

        .success-box.show {
            display: block;
            animation: fadeUp 0.35s ease;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(8px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .success-icon {
            width: 52px;
            height: 52px;
            background: var(--green);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            color: #fff;
            font-size: 22px;
        }

        .success-title {
            font-size: 15px;
            font-weight: 700;
            color: #1a7040;
            margin-bottom: 10px;
        }

        .success-list {
            list-style: none;
            text-align: left;
        }

        .success-list li {
            font-size: 12px;
            color: #2a5030;
            padding: 4px 0;
            display: flex;
            align-items: flex-start;
            gap: 7px;
            line-height: 1.55;
        }

        .success-list li::before {
            content: "";
            width: 5px;
            height: 5px;
            background: var(--green);
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 6px;
        }

        /* ══════════════ FOOTER ══════════════ */
        footer {
            background: #111;
            color: rgba(255, 255, 255, 0.25);
            text-align: center;
            padding: 28px 20px;
            font-size: 10px;
            line-height: 2;
        }

        footer strong {
            color: rgba(255, 255, 255, 0.5);
        }

        /* ══════════════ MOBILE STICKY BAR ══════════════ */
        .sticky-bar {
		 position: fixed; bottom: 0; left: 50%; z-index: 300;
		  width: 100%; max-width: var(--max);
		  transform: translateX(-50%) translateY(100%);
		  background: linear-gradient(120deg, #0a2818 0%, #0d3520 40%, #122b1a 100%);
		  border-top: 1px solid rgba(0,200,100,0.2);
		  padding: 11px 16px;
		  padding-bottom: calc(11px + env(safe-area-inset-bottom));
		  box-shadow: 0 -6px 32px rgba(0,0,0,0.45), 0 -1px 0 rgba(0,180,80,0.15);
		  transition: transform 0.3s cubic-bezier(.22,.68,0,1);
		}
		.sticky-bar.show { transform: translateX(-50%) translateY(0); }

        .sticky-inner {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .sticky-text {
            flex: 1;
            min-width: 0;
        }

        .sticky-title {
            font-size: 11px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.55);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 3px;
        }

        .sticky-sub {
            display: none;
        }

        .sticky-amount {
            display: flex;
            align-items: baseline;
            gap: 0;
            flex-wrap: nowrap;
        }

        .sticky-amount-main {
            font-family: 'Noto Serif KR', serif;
            font-size: 22px;
            font-weight: 700;
            color: #FFD200;
            letter-spacing: -0.04em;
            line-height: 1;
        }

        .sticky-amount-unit-sm {
            font-size: 12px;
            font-weight: 600;
            color: rgba(255, 210, 0, 0.8);
            margin-left: 1px;
            margin-right: 6px;
            line-height: 1.2;
            align-self: flex-end;
            margin-bottom: 2px;
        }

        .sticky-amount-sep {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.3);
            margin: 0 7px 2px;
            align-self: flex-end;
        }

        .sticky-amount-sub {
            font-family: 'Noto Serif KR', serif;
            font-size: 15px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.75);
            letter-spacing: -0.02em;
            line-height: 1;
            align-self: flex-end;
            margin-bottom: 1px;
        }

        .sticky-amount-sub span {
            font-size: 20px;
            font-weight: 700;
            color: #7fffc4;
        }

        .sticky-btn {
            background: linear-gradient(135deg, #FFD200 0%, #f0b800 100%);
            color: #0a1a10;
            border: none;
            border-radius: 10px;
            padding: 12px 18px;
            font-size: 14px;
            font-weight: 900;
            font-family: 'Noto Sans KR', sans-serif;
            white-space: nowrap;
            cursor: pointer;
            flex-shrink: 0;
            -webkit-tap-highlight-color: transparent;
            box-shadow: 0 3px 12px rgba(255, 210, 0, 0.35);
            letter-spacing: -0.01em;
        }

        /* ══════════════ SHEET ══════════════ */
        .sheet-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 400;
            align-items: flex-end;
        }

        .sheet-overlay.show {
            display: flex;
            animation: fadeOverlay 0.22s ease;
        }

        @keyframes fadeOverlay {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        .sheet {
            width: 100%;
            max-width: var(--max);
            margin: 0 auto;
            max-height: 92vh;
            background: linear-gradient(180deg, #f5f0e8 0%, #fdf8f0 100%);
            border-radius: var(--r-xl) var(--r-xl) 0 0;
            display: flex;
            flex-direction: column;
            animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        }

        @keyframes slideUp {
            from {
                transform: translateY(100%)
            }

            to {
                transform: translateY(0)
            }
        }

        .sheet-handle {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 20px 0;
            gap: 12px;
        }

        .sheet-bar {
            width: 36px;
            height: 4px;
            background: #d4c090;
            border-radius: 2px;
        }

        .sheet-header {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sheet-title {
            font-size: 16px;
            font-weight: 700;
            color: #1a1a0a;
        }

        .sheet-close {
            width: 30px;
            height: 30px;
            background: #e8d8a8;
            border: none;
            border-radius: 50%;
            font-size: 16px;
            color: #4a3800;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sheet-body {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 16px 20px;
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
        }

        /* desktop-right: 모바일 기본 숨김, 데스크탑에서만 표시 */
        .desktop-right {
            display: none;
        }

        /* ══════════════ DESKTOP LAYOUT ══════════════ */
        @media (min-width: 900px) {
            :root {
                --max: 100%;
            }

            body {
                padding-bottom: 0;
            }

            .sticky-bar {
                display: none !important;
            }

            .sheet-overlay {
                display: none !important;
            }

            .page-desktop {
                max-width: 1200px;
                margin: 0 auto;
                display: grid;
                grid-template-columns: 1fr 420px;
                align-items: start;
            }

            .desktop-left {
                min-width: 0;
            }

            .desktop-right {
                display: block;
                position: sticky;
                top: 0;
                height: 100vh;
                overflow-y: auto;
                background: linear-gradient(160deg, #f5f0e8 0%, #fdf8f0 60%, #f0f5ef 100%);
                border-left: 2px solid #e8c84a;
                scrollbar-width: thin;
            }

            .desktop-right::-webkit-scrollbar {
                width: 4px;
            }

            .desktop-right::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 2px;
            }

            .desktop-form-inner {
                padding: 32px 28px 40px;
            }

            section {
                max-width: 100%;
            }

            .hero {
                min-height: 80vh;
            }

            .hero h1 {
                font-size: 42px;
            }

            .num-main {
                font-size: 80px;
            }

            .ba-section,
            .numbers-section,
            .benefits-section,
            .process-section,
            .cta-banner,
            .faq-section,
            .form-section {
                padding: 56px 48px;
            }

            .reviews-section {
                padding: 56px 0;
            }

            .reviews-inner {
                padding: 0 48px;
            }

            .reviews-scroll {
                padding: 4px 48px 16px;
                margin: 0 -48px;
            }

            /* hide mobile inline form */
            .form-section {
                display: none;
            }
        }

        /* ════════════════════════════════════
   RESPONSIVE CENTERED LAYOUT
   모바일 / 태블릿 / 데스크탑 가운데 정렬
════════════════════════════════════ */
        :root {
            --page-w: 520px;
        }

        body {
            flex-direction: column;
            align-items: center;
        }

        .page-desktop {
            width: 100%;
        }

        section {
            width: 100%;
            max-width: var(--page-w);
            margin-left: auto;
            margin-right: auto;
            overflow: visible;
        }

        /* sticky bar & sheet 가운데 고정 */
        .sticky-bar {
            left: 50% !important;
            transform: translateX(-50%) translateY(100%) !important;
            max-width: var(--page-w) !important;
            width: 100% !important;
        }

        .sticky-bar.show {
            transform: translateX(-50%) translateY(0) !important;
        }

        .sheet {
            max-width: var(--page-w);
        }

        /* ── 태블릿 (≥ 600px) ── */
        @media (min-width: 600px) and (max-width: 899px) {
            :root {
                --page-w: 560px;
            }

            .hero h1 {
                font-size: 36px;
            }

            .num-main {
                font-size: 72px;
            }
        }

        /* ════════════════════════════════════
   DESKTOP (≥ 900px): 2컬럼 레이아웃
════════════════════════════════════ */
        @media (min-width: 900px) {
            :root {
                --page-w: 1200px;
            }

            body {
                padding-bottom: 0;
            }

            .sticky-bar {
                display: none !important;
            }

            .sheet-overlay {
                display: none !important;
            }

            .page-desktop {
                display: grid;
                grid-template-columns: 1fr 400px;
                align-items: start;
                max-width: 1200px;
            }

            .desktop-left {
                min-width: 0;
            }

            section {
                max-width: 100%;
            }

            .desktop-right {
                position: sticky;
                top: 0;
                height: 100vh;
                overflow-y: auto;
                background: #111;
                border-left: 0.5px solid rgba(255, 255, 255, 0.08);
                scrollbar-width: thin;
            }

            .desktop-right::-webkit-scrollbar {
                width: 4px;
            }

            .desktop-right::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.12);
                border-radius: 2px;
            }

            .desktop-form-inner {
                padding: 32px 28px 40px;
            }

            .hero {
                min-height: 80vh;
            }

            .hero h1 {
                font-size: 40px;
            }

            .num-main {
                font-size: 76px;
            }

            .ba-section,
            .numbers-section>div,
            .benefits-section>div,
            .process-section,
            .faq-section {
                padding-left: 48px;
                padding-right: 48px;
            }

            .cta-banner>div {
                padding-left: 48px;
                padding-right: 48px;
            }

            .reviews-section {
                padding: 56px 0;
            }

            .reviews-inner {
                padding: 0 48px;
            }

            .rv-wrap {
                max-width: 540px;
                margin: 0 auto;
            }

            .form-section {
                display: none;
            }
        }

        /* ════════════════════════════════════
   SECTION SPECIFIC
════════════════════════════════════ */
        /* Numbers section text glow */
        .numbers-section .section-eyebrow {
            color: var(--yellow) !important;
        }

        .numbers-section .section-title {
            color: #fff !important;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
        }

        .bnum {
            text-shadow: 0 0 28px rgba(77, 200, 255, 0.45), 0 4px 14px rgba(0, 0, 0, 0.6);
        }

        .bnum.green {
            text-shadow: 0 0 28px rgba(77, 255, 158, 0.45), 0 4px 14px rgba(0, 0, 0, 0.6);
        }

        .free-item {
            backdrop-filter: blur(8px);
            background: rgba(255, 255, 255, 0.08) !important;
        }

        /* CTA banner */
        .cta-banner h2 {
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
        }

        .cta-banner .pill-badge {
            background: rgba(255, 255, 255, 0.18);
            color: #fff;
        }

        /* BA card */
        .ba-card {
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
        }

        .ba-overlay {
            padding: 18px 14px;
        }

        .ba-overlay strong {
            font-size: 13px;
            font-weight: 900;
        }

        /* Benefit cards */
        .benefit-card {
            background: rgba(255, 255, 255, 0.96) !important;
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
        }

        /* ════════════════════════════════════
   ROLLING REVIEWS
════════════════════════════════════ */
        .rv-wrap {
            overflow: hidden;
            padding-bottom: 28px;
            width: 100%;
        }

        .rv-track {
            display: flex;
            transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: transform;
        }

        .rv-card {
            min-width: 100%;
            padding: 8px 28px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .rv-stars {
            color: var(--yellow);
            font-size: 18px;
            letter-spacing: 3px;
            margin-bottom: 16px;
        }

        .rv-quote {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.88);
            line-height: 1.8;
            margin-bottom: 22px;
            max-width: 340px;
        }

        .rv-author {
            display: flex;
            align-items: center;
            gap: 12px;
            justify-content: center;
        }

        .rv-face {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            object-fit: cover;
            object-position: center center;
            flex-shrink: 0;
            border: 2.5px solid var(--yellow);
            box-shadow: 0 4px 16px rgba(255, 210, 0, 0.28);
            background: #d8d0c8;
            display: block;
            overflow: hidden;
        }

        .rv-name {
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 3px;
            text-align: left;
        }

        .rv-meta {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.45);
            text-align: left;
        }

        .rv-badge {
            display: inline-flex;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            margin-left: 4px;
            vertical-align: middle;
        }

        .rv-green {
            background: rgba(0, 148, 87, 0.22);
            color: #5dffa8;
        }

        .rv-blue {
            background: rgba(41, 128, 185, 0.22);
            color: #7ab8ff;
        }

        .rv-purple {
            background: rgba(165, 105, 189, 0.22);
            color: #d2a8ff;
        }

        .rv-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 16px 0 4px;
        }

        .rv-dot {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.25);
            cursor: pointer;
            transition: all 0.3s;
            -webkit-tap-highlight-color: transparent;
        }

        .rv-dot.active {
            width: 22px;
            background: var(--yellow);
        }

        /* Slide up animation on card enter */
        @keyframes rvSlideUp {
            from {
                opacity: 0;
                transform: translateY(24px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .rv-card.entering {
            animation: rvSlideUp 0.52s cubic-bezier(0.22, 0.68, 0, 1.1);
        }


        /* ══ REVIEW STACK (레퍼런스 스타일) ══ */
        .rv-stack {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 0 20px 28px;
        }

        .rv-row {
            display: flex;
            align-items: center;
            gap: 16px;
            background: rgba(255, 255, 255, 0.06);
            border: 0.5px solid rgba(255, 255, 255, 0.1);
            border-radius: 18px;
            padding: 18px 16px;
            backdrop-filter: blur(8px);
            transition: background 0.2s;
        }

        .rv-row:hover {
            background: rgba(255, 255, 255, 0.09);
        }

        .rv-photo-wrap {
            flex-shrink: 0;
            width: 72px;
            height: 72px;
            border-radius: 50%;
            overflow: hidden;
            border: 2.5px solid var(--yellow);
            box-shadow: 0 4px 16px rgba(255, 210, 0, 0.3);
            background: #2a2820;
        }

        .rv-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block;
        }

        .rv-content {
            flex: 1;
            min-width: 0;
        }

        .rv-stars-sm {
            color: var(--yellow);
            font-size: 13px;
            letter-spacing: 2px;
            margin-bottom: 6px;
        }

        .rv-text {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.65;
            margin-bottom: 10px;
        }

        .rv-info {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 3px;
        }

        .rv-nm {
            font-size: 13px;
            font-weight: 700;
            color: var(--white);
        }

        .rv-branch {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.4);
        }

        @media (min-width: 900px) {
            .rv-stack {
                padding: 0 48px 28px;
            }

            .rv-row {
                padding: 20px 22px;
            }

            .rv-photo-wrap {
                width: 80px;
                height: 80px;
            }

            .rv-text {
                font-size: 14px;
            }
        }


        /* ══════════════ TOP BRAND LOGO ══════════════ */
        .top-brand-logo {
            width: 100%;
            max-width: var(--page-w, 520px);
            margin: 0 auto;
            padding: 18px 24px 14px;
            background: #0a0a0a;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .top-brand-logo img {
            display: block;
            width: min(330px, 82vw);
            height: auto;
            object-fit: contain;
        }

        @media (min-width: 900px) {
            .top-brand-logo {
                max-width: 1200px;
                padding: 22px 30px 18px;
            }

            .top-brand-logo img {
                width: 360px;
            }
        }


        /* Refined top-left brand logo */
        .top-brand-logo {
            position: absolute;
            top: calc(18px + env(safe-area-inset-top));
            left: 24px;
            z-index: 5;
            width: auto;
            max-width: none;
            margin: 0;
            padding: 0;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            pointer-events: none;
        }

        .top-brand-logo img {
            display: block;
            width: 156px;
            max-width: 42vw;
            height: auto;
            object-fit: contain;
        }

        @media (min-width: 900px) {
            .top-brand-logo {
                top: 24px;
                left: 30px;
                max-width: none;
                padding: 0;
            }

            .top-brand-logo img {
                width: 176px;
            }
        }

        /* ══ ENHANCED AUTO-ROLLING REVIEWS + BRIGHT MOBILE NAV ══ */
        .reviews-section .rv-wrap {
            overflow: hidden;
            position: relative;
        }

        .reviews-section .rv-stack {
            display: flex;
            flex-direction: row;
            gap: 0;
            padding: 0;
            width: 100%;
            transition: transform .65s cubic-bezier(.22, .68, 0, 1);
            will-change: transform;
        }

        .reviews-section .rv-row {
            min-width: 100%;
            width: 100%;
            flex: 0 0 100%;
            margin: 0;
            padding: 0 20px 14px;
            box-sizing: border-box;
        }

        .reviews-section .rv-row.entering {
            animation: rvSlideUp .55s cubic-bezier(.22, .68, 0, 1.1);
        }

        .reviews-section .rv-dots {
            padding-top: 10px;
        }

        .reviews-section .rv-dot {
            border: 0;
            padding: 0;
        }

        .sticky-bar {
            border: 2px solid #ffe34f !important;
            border-bottom: 0 !important;
            border-radius: 18px 18px 0 0;
            box-shadow:
                0 -6px 28px rgba(255, 226, 67, .34),
                0 0 0 1px rgba(255, 255, 255, .12) inset,
                0 -10px 40px rgba(0, 255, 135, .18) !important;
        }

        .sticky-bar::before {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            top: -2px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, #00ff87, #fff58a, #ffd200, #00ff87);
            filter: drop-shadow(0 0 7px rgba(255, 226, 67, .9));
        }