/* ============================================================
   subscribe.css
   subscribe.php 의 <style> 블록을 추출/통합한 파일.
   ???�즌 ?�적 ?��???subscribe_season_css, PHP)?� php??<style>??그�?�???
   ============================================================ */

/* === [1] S01/S02 ?�어�??�로모션 (orig <style> 113-296) === */
    /* ============================================================
       S01 ?�어�?+ S02 ???�름 ?�로모션 2026
       ============================================================ */

    /* layout.css: body#wrap { width:1220px; overflow-x:hidden } ???�리???�인.
       html ?� ?�크롤바 방�?�??��?, body#wrap + subscribe-page �?visible ?�제 */
:root { --brand: #2097FF; --brand-dark: #002F6C; --brand-shadow: rgba(32,151,255,0.3); --text-main: #0e0f13; --text-sub: #475569; --text-muted: #64748b; --text-light: #94a3b8; --line: #CFE5FF; --surface-blue: #F0F7FF; --surface-soft: #F6FAFF; }

    html { overflow-x: hidden; }
    body#wrap, .subscribe-page { overflow-x: visible !important; }
    /* 봄 시즌 테마(subscribe_season.php)가 .subscribe-page에 깔던 크림색 배경 제거 — 썸머 페이지 톤 유지 */
    .subscribe-page { background: #fff; }

    /* === S01 Hero === */
    .s01-hero {
        background: var(--brand) url('/resources/img/subscribe_summer.webp') center bottom / cover no-repeat;
        padding: 80px 0 64px;
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        box-sizing: border-box;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .s01-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 90% 70% at 50% 50%, rgba(0,47,108,0.18) 0%, transparent 70%),
            linear-gradient(180deg, rgba(0,47,108,0.08) 0%, transparent 30%, transparent 70%, rgba(0,47,108,0.12) 100%);
        pointer-events: none;
    }
    .s01-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
        background-size: 44px 44px;
        pointer-events: none;
    }
    .s01-inner { position: relative; z-index: 1; }
    .s01-top-label {
        font-size: 14px;
        font-weight: 700;
        color: rgba(255,255,255,0.65);
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 72px;
    }
    .s01-h-wrap { margin-bottom: 72px; }
    .s01-line1 {
        position: relative;
        display: inline-block;
        max-width: 100%;
        font-family: 'Outfit', sans-serif;
        font-size: 64px;
        font-weight: 800;
        color: #FFE678;
        line-height: 1.1;
        letter-spacing: -2.5px;
        margin-bottom: 4px;
    }
    .s01-twice-badge {
        position: absolute;
        top: -24px;
        right: 0;
        margin-left: 0;
        background: var(--brand-dark);
        color: #fff;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 800;
        font-style: italic;
        padding: 7px 14px;
        border-radius: 8px;
        transform: rotate(-6deg);
        white-space: nowrap;
        letter-spacing: 0.5px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.30);
    }
    .s01-line2 {
        font-family: 'Outfit', sans-serif;
        font-size: 80px;
        font-weight: 800;
        color: #fff;
        line-height: 1.05;
        letter-spacing: -3px;
        text-shadow: 0 4px 28px rgba(255,230,100,0.22);
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .s01-upto {
        font-family: 'Outfit', sans-serif;
        font-size: 42px;
        font-weight: 800;
        color: rgba(255,255,255,0.92);
        letter-spacing: -1.5px;
        margin-bottom: 48px;
    }

    /* === S02 === */
    .s02-promo {
        background: var(--brand-dark) url('/resources/img/subscribe_summer02.webp') center center / cover no-repeat;
        padding: 80px 0 88px;
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        box-sizing: border-box;
    }
    .s02-promo::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,30,80,0.10) 0%, transparent 65%),
            linear-gradient(180deg, rgba(0,30,80,0.08) 0%, transparent 30%, transparent 70%, rgba(0,30,80,0.12) 100%);
        pointer-events: none;
    }
    .s02-promo-inner { position: relative; z-index: 1; }
    .s02-promo-h2 {
        font-family: 'Outfit', sans-serif;
        font-size: 40px;
        font-weight: 800;
        color: #fff;
        line-height: 1.35;
        letter-spacing: -1.5px;
        margin-bottom: 16px;
        word-break: keep-all;
    }
    .s02-promo-h2 .s02-accent { color: #FFE678; }
    .s02-promo-tail { display: block; }
    .s02-promo-tail::before { content: ''; }
    .s02-sub-tail { display: block; }
    .s02-promo-sub {
        font-size: 16px;
        color: rgba(255,255,255,0.85);
        line-height: 1.75;
        margin-bottom: 48px;
        word-break: keep-all;
    }
    .s02-promo-btn {
        background: #fff;
        color: var(--brand-dark);
        border: none;
        border-radius: 16px;
        padding: 18px 52px;
        font-size: 18px;
        font-weight: 800;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 14px 40px rgba(0,30,80,0.30);
        transition: all 0.25s ease;
        letter-spacing: -0.3px;
    }
    .s02-promo-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 50px rgba(0,30,80,0.40);
    }
    .s02-promo-btn-icon {
        width: 32px; height: 32px;
        background: rgba(0,47,108,0.10);
        color: var(--brand-dark);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
    }

    /* Responsive */
    @media (min-width: 769px) {
        .s02-promo-tail { display: inline; }
        .s02-promo-tail::before { content: ' — '; }
        .s02-sub-tail { display: inline; }
    }

    @media (max-width: 768px) {
        .s01-hero { padding: 60px 0 48px; min-height: 80vh; }
        .s01-top-label { margin-bottom: 48px; }
        .s01-h-wrap { margin-bottom: 48px; }
        .s01-line1 { font-size: 38px; letter-spacing: -1.5px; }
        .s01-twice-badge { font-size: 12px; padding: 4px 9px; top: -18px; right: 0; margin-left: 0; }
        .s01-line2 { font-size: 46px; letter-spacing: -2px; }
        .s01-upto { font-size: 28px; margin-bottom: 36px; }
        .s02-promo { padding: 64px 0 72px; }
        .s02-promo-h2 { font-size: 26px; letter-spacing: -0.5px; }
        .s02-promo-h2 .s02-promo-tail { display: block; }
        .s02-promo-h2 .s02-promo-tail::before { content: ''; }
        .s02-promo-sub .s02-sub-tail { display: block; }
        .s02-promo-sub .s02-sub-tail + br { display: none; }
        .s02-promo-sub { font-size: 16px; }
        .s02-promo-btn { padding: 16px 36px; font-size: 16px; }
    }

/* === [2] N-공통 + N03 ?�르?�나 (orig <style> 331-585) === */
    /* === 공통 ?�큰 === */
    .n-section { padding: 100px 0; position: relative; overflow: hidden; width: 100vw; margin-left: calc(-50vw + 50%); box-sizing: border-box; }
    /* N ?�션 ?��? sub-container ??�� 1040px�?(?��? default 960px ?�버?�이?? */
    .n-section .sub-container { max-width: 1040px; }
    .n-chip { display: inline-block; background: var(--surface-blue); color: var(--brand); font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: 999px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px; }
    .n-h2 { font-family: 'Outfit', 'Pretendard', sans-serif; font-size: 36px; font-weight: 700; color: var(--text-main); line-height: 1.3; letter-spacing: -1px; margin: 0 0 14px; word-break: keep-all; }
    .n-sub { font-size: 16px; color: var(--text-muted); line-height: 1.7; letter-spacing: -0.3px; word-break: keep-all; }
    .n-section-head { text-align: center; margin-bottom: 60px; }

    /* === N03. ?�르?�나 (좌측 ?�증 + ?�측 ?�루???�어, ?�프�??�트 바인?? === */
    .n03-personas { background: #fff; }
    .n03-pairs { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
    .n03-pair {
        display: grid; grid-template-columns: 1fr 1fr;
        align-items: stretch;
        background: #fff;
        border: none;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,47,108,0.06);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        position: relative;
    }
    .n03-pair:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,47,108,0.06); }

    /* 좌측: ?�증 */
    .n03-pain {
        background: #FDFBF5;
        padding: 34px 32px;
        display: flex; flex-direction: column; justify-content: flex-start;
        word-break: keep-all;
        box-shadow: inset -4px 0 10px -8px rgba(0,47,108,0.10);
    }
    .n03-eyebrow { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--brand); text-transform: uppercase; display: flex; align-items: center; min-height: 26px; margin-bottom: 16px; }
    .n03-pain-h { font-size: 30px; font-weight: 600; color: var(--text-main); margin: 0 0 18px; line-height: 1.32; letter-spacing: -0.8px; }
    .n03-hl { background: linear-gradient(transparent 52%, #FFE57F 52%); padding: 0 3px; font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
    .n03-pain-desc { font-size: 16px; color: var(--text-sub); line-height: 1.8; margin: 0; }
    .n03-eyebrow, .n03-pain-h, .n03-pain-desc, .n03-sol-chip, .n03-sol-h, .n03-sol-desc, .n03-outcome { word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }

    /* 가?�데 connector ???�즐 ?�터로킹 seam (?�쪽 카드 ?�이 ?�른쪽으�?볼록 ?�?�나?? */
    .n03-connector {
        position: absolute;
        top: 0; bottom: 0;
        left: 50%;
        width: 56px;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 2;
        background-color: transparent;
        background-image:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'><defs><filter id='pz' filterUnits='userSpaceOnUse' x='0' y='0' width='56' height='48'><feDropShadow dx='2' dy='2' stdDeviation='2.2' flood-color='%23000000' flood-opacity='0.12'/></filter></defs><path d='M 28 8 C 40 6 48 14 48 24 C 48 34 40 42 28 40 Z' fill='%23FDFBF5' filter='url(%23pz)'/></svg>");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 56px 48px;
    }

    /* ?�측: ?�루??*/
    .n03-solution {
        background: #fff;
        padding: 34px 32px;
        display: flex; flex-direction: column; justify-content: flex-start;
        word-break: keep-all;
        box-shadow: none;
    }
    .n03-sol-chip { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--brand); text-transform: uppercase; display: flex; align-items: center; min-height: 26px; margin-bottom: 16px; }
    .n03-sol-h { font-size: 28px; font-weight: 600; color: var(--text-main); margin: 0 0 16px; line-height: 1.32; letter-spacing: -0.6px; }
    .n03-sol-desc { font-size: 16px; color: var(--text-sub); line-height: 1.8; margin: 0; }
    .n03-sol-desc b { color: var(--brand); font-weight: 700; }
    .n03-outcome {
        margin-top: 14px;
        padding: 8px 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--brand-dark);
        line-height: 1.55;
        letter-spacing: -0.2px;
    }

    /* === N04. 가�?=== */
    .n04-pricing { background: #fff; }
    .n04-wrap { max-width: 720px; margin: 0 auto; }
    .n04-breakdown {
        background: var(--surface-soft); border-radius: 20px;
        padding: 28px 32px; margin-bottom: 32px;
    }
    .n04-row { display: flex; justify-content: space-between; align-items: center; font-size: 16px; padding: 10px 0; color: var(--text-sub); }
    .n04-row + .n04-row { border-top: 1px dashed var(--line); }
    .n04-row.discount { color: var(--brand); font-weight: 700; }
    .n04-row.final {
        background: var(--brand); color: #fff;
        margin: 14px -32px -28px;
        padding: 18px 32px;
        border-radius: 0 0 20px 20px;
        font-size: 18px; font-weight: 700;
        border-top: none;
        align-items: baseline;
    }
    .n04-final-price { font-family: 'Outfit', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
    .n04-final-wrap { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
    .n04-final-monthly {
        display: inline-block;
        font-family: 'Pretendard','Inter',sans-serif;
        font-size: 12px; font-weight: 600;
        color: rgba(255,255,255,0.78);
        letter-spacing: -0.2px;
    }
    .n04-final-monthly.hide { display: none; }
    .n04-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
    .n04-plan {
        background: #fff; border: 2px solid var(--line); border-radius: 20px;
        padding: 28px 24px;
        position: relative;
        transition: all 0.2s ease;
        cursor: pointer;
    }
    /* .best??BEST 배�?�??�시 (강조 ?�과??.selected?�서�? */
    .n04-plan.best { /* border/bg ?�음 */ }
    .n04-plan.selected {
        border-color: var(--brand) !important;
    }
    .n04-plan.selected::after { display: none; }
    /* best / best-pro 뱃�? 공통 ?��?????content�??�래?�서 개별 지??*/
    .n04-plan.best::before,
    .n04-plan.best-pro::before {
        position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
        background: var(--brand-dark); color: #fff;
        font-size: 12px; font-weight: 500; letter-spacing: 1px;
        padding: 5px 14px; border-radius: 999px;
    }
    .n04-plan.best::before { content: '\CD5C\C800\AC00'; }
    .n04-plan.best-pro::before { content: 'BEST'; background: var(--brand) url('/resources/img/subscribe_summer.webp') center bottom / cover no-repeat; color: #fff; }
    .n04-plan-name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--text-main); margin: 0 0 12px; }
    .n04-plan-discount { font-size: 12px; font-weight: 600; color: var(--brand); margin-bottom: 14px; }
    .n04-plan-old { font-size: 14px; color: var(--text-light); text-decoration: line-through; margin-bottom: 2px; }
    .n04-plan-new { font-family: 'Outfit', sans-serif; font-size: 28px; font-weight: 600; color: var(--text-main); letter-spacing: -1px; margin-bottom: 10px; }
    .n04-plan-new .unit { font-family: 'Inter', 'Pretendard', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-muted); margin-left: 4px; }
    .n04-plan-memo { font-size: 14px; color: var(--text-muted); line-height: 1.5; padding-top: 12px; border-top: 1px dashed var(--line); word-break: keep-all; }
    /* 플랜 이름 아래 컨텐츠를 박스로 묶어 통째로 1px 안쪽 정렬 (flex 이름 요소와의 미세 어긋남 보정) */
    .n04-plan-body { margin-left: 2px; }

    /* === Pro 카드 (별도 row) === */
    .n04-plans-pro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 20px;
        margin-bottom: 28px;
    }
    .n04-plan-pro .n04-plan-name { font-weight: 600; }
    .n04-pro-label {
        display: inline-block;
        background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 6px;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 10px rgba(0,47,108,0.25);
    }
    .n04-plan-memo-fire {
        display: inline-block;
        background: var(--surface-blue);
        color: var(--brand-dark);
        border: none;
        border-radius: 10px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 700;
        margin-top: 4px;
        margin-bottom: 12px;
        width: fit-content;
    }
    .n04-plan-memo-fire b {
        color: var(--brand-dark);
        font-weight: 700;
    }
    .n04-plan-features {
        list-style: none;
        padding: 14px 0 0;
        margin: 0;
        border-top: 1px dashed var(--line);
    }
    .n04-plan-features li {
        font-size: 14px;
        color: var(--text-sub);
        line-height: 1.7;
        padding: 4px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .n04-plan-features i {
        color: var(--brand);
        font-size: 14px;
        flex-shrink: 0;
    }
    .n04-plan-features b { color: var(--brand-dark); font-weight: 500; }
    .n04-cta {
        display: block; width: 100%;
        background: linear-gradient(180deg, #2EA3FF 0%, var(--brand) 62%, #1687E8 100%); color: #fff;
        border: none; border-radius: 16px;
        padding: 20px 0;
        font-size: 18px; font-weight: 700;
        cursor: pointer;
        letter-spacing: -0.3px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -2px 0 rgba(0,47,108,0.10), 0 5px 10px rgba(32,151,255,0.14);
        transition: all 0.25s ease;
    }
    .n04-cta:hover { background: linear-gradient(180deg, #239CFA 0%, #1B8FE9 62%, #157DCC 100%); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -2px 0 rgba(0,47,108,0.12), 0 7px 12px rgba(32,151,255,0.16); }
    .n04-cta-mou {
        margin-top: 14px;
        background: linear-gradient(180deg, #063F82 0%, var(--brand-dark) 68%, #00265A 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -2px 0 rgba(0,20,48,0.18), 0 5px 10px rgba(0,47,108,0.13);
    }
    .n04-cta-mou:hover { background: linear-gradient(180deg, #073A76 0%, #0A356D 68%, #00224F 100%); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -2px 0 rgba(0,20,48,0.20), 0 7px 12px rgba(0,47,108,0.15); }
    .n04-mou-note {
        margin-top: 12px;
        text-align: center;
        font-size: 14px;
        color: var(--text-muted);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .n-section { padding: 64px 0; }
        .n-h2 { font-size: 28px; letter-spacing: -0.5px; }
        .n-sub { font-size: 16px; }
        .n-section-head { margin-bottom: 40px; }
        /* 모바?? ?�어 ?�로 split + ?�프�??�?�어 가�??�전 */
        .n03-pairs { gap: 16px; }
        .n03-pair { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
        .n03-pain, .n03-solution { padding: 24px 22px; }
        .n03-pain-h { font-size: 24px; }
        .n03-sol-h { font-size: 22px; }
        /* 위/아래 카드 사이 가로 seam 라인 (카드 외곽선과 동일 색으로 연결) */
        .n03-pain { position: relative; z-index: 1; box-shadow: none; }
        .n03-pain::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 10px; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.11) 0%, rgba(0,0,0,0.055) 38%, rgba(0,0,0,0) 100%); transform: translateY(100%); z-index: 3; }
        .n03-solution { border-top: none; box-shadow: none; }
        .n03-connector {
            top: 50%; left: 0; right: 0; bottom: auto;
            width: auto; height: 0;
            transform: translateY(-50%);
            background: none;
            z-index: 4;
        }
        /* 아래로 볼록한 크림색 퍼즐 탭 — 위 카드가 아래 카드로 끼워지는 모양 + 그림자로 입체감 */
        .n03-connector::after {
            content: "";
            position: absolute;
            left: 50%; top: 0;
            width: 46px; height: 23px;
            transform: translateX(-50%);
            background: #FDFBF5;
            border: none;
            border-top: none;
            border-radius: 0 0 46px 46px;
            box-shadow: 0 8px 12px -5px rgba(0,0,0,0.20);
        }
        .n04-breakdown { padding: 22px 22px; }
        .n04-row { font-size: 14px; }
        .n04-row.final { margin: 10px -22px -22px; padding: 16px 22px; font-size: 16px; }
        .n04-final-price { font-size: 20px; }
        .n04-plans, .n04-plans-pro { grid-template-columns: 1fr; gap: 16px; }
        .n04-plan { padding: 22px 20px; }
        .n04-plan-new { font-size: 24px; }
        .n04-cta { font-size: 16px; padding: 18px 0; }
    }

/* === [3] N04 가�?+ 가�?카드 (orig <style> 823-1042) === */
    /* === wrapper: N-section ?�턴(100vw + sub-container 1040px) === */
    .pricing-wrap.pricing-wrap-full {
        display: none !important;
        background: #fff !important;
        padding: 100px 0 !important;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        box-sizing: border-box;
        position: relative;
        overflow: visible !important;
    }
    .pricing-wrap.pricing-wrap-full .sub-container,
    .pricing-wrap.pricing-wrap-full > .sub-container {
        max-width: 1040px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }
    /* ?�더 ?�큰 ???�른 N-section�??�일 */
    .pricing-wrap.pricing-wrap-full .section-head {
        text-align: center !important;
        margin-bottom: 60px !important;
    }
    .pricing-wrap.pricing-wrap-full .section-tag {
        display: inline-block !important;
        background: var(--surface-blue) !important;
        color: var(--brand) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        padding: 6px 16px !important;
        border-radius: 999px !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        margin: 0 0 18px !important;
    }
    .pricing-wrap.pricing-wrap-full .section-h2 {
        font-family: 'Outfit','Pretendard',sans-serif !important;
        font-size: 36px !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
        letter-spacing: -1px !important;
        line-height: 1.3 !important;
        margin: 0 0 14px !important;
    }

    /* === 카드 ?�형 (grid 구조???��? ??건드�? === */
    .pricing-wrap-full .pricing-cards .p-card {
        border: 1.5px solid var(--line) !important;
        background: #fff !important;
        border-radius: 20px !important;
        box-shadow: 0 14px 36px rgba(0,47,108,0.06) !important;
        transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
    }
    .pricing-wrap-full .pricing-cards .p-card:hover {
        border-color: var(--brand) !important;
        transform: translateY(-4px) !important;
        box-shadow: 0 22px 50px rgba(0,47,108,0.12) !important;
    }
    .pricing-wrap-full .pricing-cards .p-card.selected {
        border-color: var(--brand) !important;
        background: var(--surface-blue) !important;
        box-shadow: 0 22px 50px rgba(32,151,255,0.20) !important;
    }

    /* BEST 배�? ???�로???�센??*/
    .pricing-wrap-full .pricing-cards .p-card .p-tag {
        background: var(--surface-blue) !important;
        color: var(--brand-dark) !important;
        border-radius: 999px !important;
        padding: 4px 12px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        box-shadow: 0 4px 10px rgba(255,193,7,0.30) !important;
    }
    /* ?�인% ??브랜??블루 그라?�이??*/
    .pricing-wrap-full .pricing-cards .p-card .p-stock {
        background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
        color: #fff !important;
        border-radius: 999px !important;
        padding: 4px 12px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: -0.2px !important;
        box-shadow: 0 4px 10px rgba(32,151,255,0.30) !important;
    }

    /* 카드 ?�름 */
    .pricing-wrap-full .pricing-cards .p-card .p-name {
        color: var(--brand-dark) !important;
        font-weight: 600 !important;
        letter-spacing: -0.3px !important;
    }
    /* PRO ?�벨 */
    .pricing-wrap-full .pricing-cards .pro-card .p-name::before {
        background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%) !important;
        color: #fff !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        box-shadow: 0 4px 10px rgba(0,47,108,0.25) !important;
    }

    /* 가�???Outfit 브랜??블루 */
    .pricing-wrap-full .pricing-cards .p-card .p-new {
        font-family: 'Outfit', sans-serif !important;
        font-weight: 700 !important;
        color: var(--brand) !important;
        letter-spacing: -1.5px !important;
    }
    .pricing-wrap-full .pricing-cards .p-card .p-unit {
        color: var(--text-light) !important;
        font-weight: 600 !important;
    }
    .pricing-wrap-full .pricing-cards .p-card .p-old {
        color: var(--text-light) !important;
        text-decoration: line-through !important;
    }

    /* 메모 ???�로???�림 ?�센??박스 */
    .pricing-wrap-full .pricing-cards .p-card .p-memo {
        background: var(--surface-blue) !important;
        color: var(--brand-dark) !important;
        border-radius: 10px !important;
        font-weight: 700 !important;
        text-align: center !important;
        letter-spacing: -0.2px !important;
    }
    .pricing-wrap-full .pricing-cards .p-card .p-memo b {
        color: var(--brand-dark) !important;
        font-weight: 700 !important;
    }

    /* Pro 카드 features ???�일 ??*/
    .pricing-wrap-full .pricing-cards .pro-card .p-features li {
        color: var(--text-sub) !important;
    }
    .pricing-wrap-full .pricing-cards .pro-card .p-features i {
        color: var(--brand) !important;
    }
    .pricing-wrap-full .pricing-cards .pro-card .p-features b {
        color: var(--brand-dark) !important;
        font-weight: 600 !important;
    }

    /* === ?�더 sub-desc === */
    .pricing-wrap.pricing-wrap-full .section-sub-desc {
        font-size: 16px !important;
        color: var(--text-muted) !important;
        line-height: 1.7 !important;
        margin: 0 !important;
        letter-spacing: -0.2px !important;
    }

    /* === 가�?분해??(sub-container ??�� 맞춤 ??카드 grid?� ?�일 ?�렬) === */
    .pricing-wrap.pricing-wrap-full .n04-breakdown {
        max-width: 100%;
        margin: 0 auto 40px;
        background: var(--surface-soft);
        border-radius: 20px;
        padding: 28px 36px;
    }
    .pricing-wrap.pricing-wrap-full .n04-row {
        display: flex; justify-content: space-between; align-items: center;
        font-size: 16px; padding: 10px 0;
        color: var(--text-sub);
    }
    .pricing-wrap.pricing-wrap-full .n04-row + .n04-row { border-top: 1px dashed var(--line); }
    .pricing-wrap.pricing-wrap-full .n04-row.discount { color: var(--brand); font-weight: 700; }
    .pricing-wrap.pricing-wrap-full .n04-row.final {
        background: var(--brand); color: #fff;
        margin: 14px -32px -28px;
        padding: 18px 32px;
        border-radius: 0 0 20px 20px;
        font-size: 18px; font-weight: 700;
        border-top: none;
    }
    .pricing-wrap.pricing-wrap-full .n04-final-price {
        font-family: 'Outfit', sans-serif;
        font-size: 24px; font-weight: 700;
        letter-spacing: -0.5px;
    }

    /* === CTA ??카드 grid?� ?�일 ??=== */
    .pricing-wrap.pricing-wrap-full .n04-cta-wrap {
        max-width: 100%;
        margin: 40px auto 0;
        text-align: center;
    }
    .pricing-wrap.pricing-wrap-full .n04-cta {
        display: block; width: 100%;
        background: var(--brand); color: #fff;
        border: none; border-radius: 16px;
        padding: 20px 0;
        font-size: 18px; font-weight: 700;
        cursor: pointer;
        letter-spacing: -0.3px;
        box-shadow: 0 14px 36px rgba(32,151,255,0.30);
        transition: all 0.25s ease;
    }
    .pricing-wrap.pricing-wrap-full .n04-cta:hover {
        background: #1B80D9;
        transform: translateY(-2px);
    }

    @media (max-width: 800px) {
        .pricing-wrap.pricing-wrap-full { padding: 60px 0 !important; }
        .pricing-wrap.pricing-wrap-full .section-h2 { font-size: 26px !important; }
        .pricing-wrap.pricing-wrap-full .section-sub-desc { font-size: 16px !important; }
        .pricing-wrap.pricing-wrap-full .n04-breakdown { padding: 22px 22px; margin-bottom: 28px; }
        .pricing-wrap.pricing-wrap-full .n04-row { font-size: 14px; }
        .pricing-wrap.pricing-wrap-full .n04-row.final { margin: 10px -22px -22px; padding: 16px 22px; font-size: 16px; }
        .pricing-wrap.pricing-wrap-full .n04-final-price { font-size: 20px; }
        .pricing-wrap.pricing-wrap-full .n04-cta-wrap { margin-top: 28px; }
        .pricing-wrap.pricing-wrap-full .n04-cta { font-size: 16px; padding: 18px 0; }
    }

/* === [4] pricing-wrap + N05/N06 ?�역 (orig <style> 1089-1378) === */
                /* 4-카드 ?�합 비교 (Basic ????+ Pro ???? ??subscribe.php�??�용 */
                .pricing-wrap-full .pricing-cards {
                    grid-template-columns: repeat(4, 1fr);
                    gap: 14px;
                    align-items: stretch;
                }
                @media (max-width: 800px) {
                    .pricing-wrap-full .pricing-cards {
                        grid-template-columns: repeat(2, 1fr) !important;
                        gap: 8px;
                    }
                    /* 카드 컨테?�너 ??좁�? ?�면 ?�축 (grid row 명시) */
                    .pricing-wrap-full .pricing-cards .p-card {
                        padding: 12px 10px !important;
                        grid-template-rows: 22px 22px auto 28px minmax(110px, 1fr) !important;
                        row-gap: 6px !important;
                        min-height: 360px !important;
                        border-width: 1.5px !important;
                    }
                    /* Slot 0: ?�그 ?�역 ??모바?�에?�도 ?�역 ?��? */
                    .pricing-wrap-full .pricing-cards .p-card .p-tag-row {
                        margin: 0 !important;
                    }
                    .pricing-wrap-full .pricing-cards .p-card .p-tag,
                    .pricing-wrap-full .pricing-cards .p-card .p-stock {
                        font-size: 12px !important;
                        padding: 2px 6px !important;
                    }
                    /* Slot 1: 카드 ?�목 */
                    .pricing-wrap-full .pricing-cards .p-card .p-name {
                        font-size: 12px !important;
                        margin: 0 !important;
                        line-height: 1.25 !important;
                        word-break: keep-all !important;
                        min-height: 22px !important;
                    }
                    /* PRO ?�벨 ???�라???��? (?�목 ???�렬) */
                    .pricing-wrap-full .pricing-cards .pro-card .p-name::before {
                        font-size: 12px !important;
                        padding: 2px 5px !important;
                    }
                    /* Slot 2: 가�?그룹 */
                    .pricing-wrap-full .pricing-cards .p-card .p-price-group {
                        margin: 0 !important;
                    }
                    .pricing-wrap-full .pricing-cards .p-card .p-new {
                        font-size: 22px !important;
                    }
                    .pricing-wrap-full .pricing-cards .p-card .p-unit {
                        font-size: 12px !important;
                        display: inline-block;
                        margin-left: 2px;
                    }
                    .pricing-wrap-full .pricing-cards .p-card .p-old {
                        font-size: 12px !important;
                        text-decoration-thickness: 1.5px !important;
                    }
                    /* Slot 3: 메모 */
                    .pricing-wrap-full .pricing-cards .p-card .p-memo {
                        font-size: 12px !important;
                        line-height: 1.3 !important;
                        padding: 3px 6px !important;
                        margin: 0 !important;
                    }
                    /* Slot 4: features ??모바?�에?�도 4�?그�?�??�출 (wrap ?�용 + ?�역 강제) */
                    .pricing-wrap-full .pricing-cards .p-card .p-features {
                        display: block !important;
                        visibility: visible;
                        font-size: 12px !important;
                        line-height: 1.45 !important;
                        padding: 8px 0 0 !important;
                        margin: 0 !important;
                        list-style: none !important;
                        border-top: 1px dashed var(--line) !important;
                        align-self: stretch !important;
                        min-height: 100px !important;
                        overflow: visible !important;
                    }
                    .pricing-wrap-full .pricing-cards .p-card .p-features.p-empty {
                        visibility: hidden;
                    }
                    .pricing-wrap-full .pricing-cards .p-card .p-features li {
                        margin: 0 0 3px !important;
                        white-space: normal !important;
                        word-break: keep-all !important;
                        overflow: visible !important;
                    }
                    .pricing-wrap-full .pricing-cards .p-card .p-features i {
                        margin-right: 3px !important;
                        font-size: 12px !important;
                    }
                    .pricing-wrap-full .pricing-cards .p-card .p-features b {
                        font-weight: 600;
                    }
                }

                /* ?�?� 카드 컨테?�너 ??5?�롯 grid 구조 (모든 카드 ?�일??row ?�이 강제) ?�?� */
                .pricing-wrap-full .pricing-cards .p-card {
                    padding: 20px 18px;
                    display: grid;
                    grid-template-rows: 30px 28px auto 36px 1fr;
                    /* row1: tag-row / row2: name / row3: price-group / row4: memo / row5: features */
                    row-gap: 10px;
                    min-height: 440px;
                    box-sizing: border-box;
                    position: relative;
                    border: 2px solid var(--line);
                    border-radius: 12px;
                    background: #fff;
                    transition: all 0.2s ease;
                }

                /* ?�?� Slot 0: ?�그 ?�역 (BEST/PRO 좌측 + ?�인% ?�측) ?�?� */
                .pricing-wrap-full .pricing-cards .p-card .p-tag-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 0;
                    align-self: stretch;
                }
                .pricing-wrap-full .pricing-cards .p-card .p-tag-row > * {
                    visibility: visible;
                }
                .pricing-wrap-full .pricing-cards .p-card .p-tag {
                    background: var(--surface-blue);
                    color: var(--brand-dark);
                    font-size: 12px;
                    padding: 4px 10px;
                    border-radius: 12px;
                    font-weight: 700;
                    letter-spacing: 0.4px;
                }
                .pricing-wrap-full .pricing-cards .p-card .p-stock {
                    background: var(--brand);
                    color: #fff;
                    font-weight: 700;
                    font-size: 12px;
                    padding: 4px 10px;
                    border-radius: 12px;
                    box-shadow: 0 2px 6px rgba(255,71,87,0.3);
                }
                /* �??�롯 ???�역 차�??�되 ?�각???��? */
                .pricing-wrap-full .pricing-cards .p-card .p-empty {
                    visibility: hidden;
                    pointer-events: none;
                }

                /* ?�?� Slot 1: 카드 ?�목 ?�?� */
                .pricing-wrap-full .pricing-cards .p-card .p-name {
                    font-size: 16px;
                    font-weight: 600;
                    margin: 0;
                    min-height: 24px;
                    line-height: 1.3;
                    display: flex;
                    align-items: center;
                    gap: 6px;
                }

                /* ?�?� Slot 2: 가�?그룹 (?�재가 + ?��? 묶음) ?�?� */
                .pricing-wrap-full .pricing-cards .p-card .p-price-group {
                    display: flex;
                    flex-direction: column;
                    gap: 2px;
                    margin: 0;
                    align-self: stretch;
                }
                .pricing-wrap-full .pricing-cards .p-card .p-price {
                    margin: 0;
                    line-height: 1.1;
                    display: flex;
                    align-items: baseline;
                    gap: 6px;
                }
                .pricing-wrap-full .pricing-cards .p-card .p-old {
                    font-size: 14px;
                    color: var(--text-light);
                    font-weight: 600;
                    text-decoration: line-through;
                    text-decoration-color: var(--text-light);
                    text-decoration-thickness: 2px;
                    display: block;
                    margin: 0;
                    min-height: 18px;
                }

                /* ?�?� Slot 3: 메모 (???�산 가�??? ??grid row 36px ?�에 ?�렬 ?�?� */
                .pricing-wrap-full .pricing-cards .p-card .p-memo {
                    margin: 0;
                    padding: 6px 10px;
                    font-size: 12px;
                    box-sizing: border-box;
                    background: var(--surface-blue);
                    color: var(--brand-dark);
                    border-radius: 6px;
                    justify-self: start;
                    align-self: center;
                    display: inline-flex;
                    align-items: center;
                    line-height: 1.4;
                }
                .pricing-wrap-full .pricing-cards .p-card .p-memo.p-empty {
                    background: transparent;
                }

                /* ?�?� Slot 4: features (grid row 1fr ??카드 ?�단 채�?) ?�?� */
                .pricing-wrap-full .pricing-cards .p-card .p-features {
                    margin: 0;
                    padding: 14px 0 0;
                    padding-left: 0;
                    list-style: none;
                    font-size: 12px;
                    line-height: 1.6;
                    border-top: 1px solid var(--line);
                    align-self: stretch;
                }
                .pricing-wrap-full .pricing-cards .p-card .p-features.p-empty {
                    border-top-color: transparent;
                }
                .pricing-wrap-full .pricing-cards .p-card .p-features li {
                    margin-bottom: 4px;
                }
                .pricing-wrap-full .pricing-cards .p-card .p-features i {
                    color: var(--brand);
                    margin-right: 4px;
                }

                /* ?�?� Pro 카드 ???�목 ??PRO 뱃�? ?�?� */
                .pricing-wrap-full .pricing-cards .pro-card .p-name::before {
                    content: 'PRO';
                    display: inline-block;
                    background: var(--brand);
                    color: #fff;
                    padding: 2px 6px;
                    border-radius: 4px;
                    font-size: 12px;
                    font-weight: 700;
                    letter-spacing: 0.5px;
                }

                /* ?�버 ??모든 카드 ?�일 */
                .pricing-wrap-full .pricing-cards .p-card:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
                    cursor: pointer;
                }
                /* ?�릭 ?�과 ??Basic(.best) + Pro(.selected) ?�일 ?�용 */
                .pricing-wrap-full .pricing-cards .p-card.best,
                .pricing-wrap-full .pricing-cards .p-card.selected {
                    border-color: var(--brand) !important;
                    box-shadow: 0 8px 24px rgba(32,151,255,0.22) !important;
                    transform: translateY(-4px) !important;
                }
                /* Pro 카드????체크 ?�거 (Basic�??��??? */
                .pricing-wrap-full .pricing-cards .p-card.selected::after {
                    display: none !important;
                }

                /* MOU ?�인 ?�용 �???카드 강조 + ?�단 뱃�? */
                .pricing-wrap-full .pricing-cards .p-card.mou-applied {
                    border-color: var(--brand) !important;
                    box-shadow: 0 6px 20px rgba(32,151,255,0.18) !important;
                    background: linear-gradient(to bottom, rgba(32,151,255,0.04) 0%, #fff 30%);
                }
                .pricing-wrap-full .pricing-cards .p-card.mou-applied::before {
                    content: '?�� ?�회 30% ?�인 ?�용 �?;
                    position: absolute;
                    top: -10px;
                    left: 50%;
                    transform: translateX(-50%);
                    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
                    color: #fff;
                    padding: 4px 14px;
                    border-radius: 14px;
                    font-size: 12px;
                    font-weight: 700;
                    white-space: nowrap;
                    box-shadow: 0 2px 8px rgba(32,151,255,0.35);
                    z-index: 5;
                    letter-spacing: 0.3px;
                }
                @media (max-width: 800px) {
                    .pricing-wrap-full .pricing-cards .p-card.mou-applied::before {
                        font-size: 12px !important;
                        padding: 3px 8px !important;
                        top: -8px !important;
                    }
                }

/* === [5] MOU/비교???�역 (orig <style> 1537-1636) === */
    /* === N06. 비용 ?�율 === */
    .n06-compare { background: var(--surface-blue); }
    .n06-chart { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 24px; padding: 48px 36px; box-shadow: 0 18px 50px rgba(0,47,108,0.06); border: 1px solid var(--line); text-align: center; }
    .n06-plot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: end; min-height: 250px; border-bottom: 2px solid var(--line); }
    .n06-bar-col { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
    .n06-price { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; color: var(--text-light); margin-bottom: 14px; letter-spacing: -0.5px; }
    .n06-price.highlight { color: var(--brand); font-size: 26px; }
    .n06-bar { width: 100%; max-width: 120px; border-radius: 12px 12px 0 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; color: #fff; font-size: 14px; font-weight: 700; }
    .n06-bar.gray1 { background: var(--text-light); height: 145px; color: #fff; }
    .n06-bar.gray2 { background: var(--text-muted); height: 210px; }
    .n06-bar.brand { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%); height: 56px; box-shadow: none; }
    .n06-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 14px; }
    .n06-label { min-width: 0; font-size: 14px; font-weight: 500; color: var(--text-muted); text-align: center; word-break: keep-all; line-height: 1.4; }
    .n06-label.highlight { color: var(--brand-dark); }
    .n06-bubble { display: inline-flex; align-items: center; margin-top: 32px; padding: 12px 22px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; border-radius: 999px; font-size: 16px; font-weight: 700; }

    /* === N07. ?�습 ?�스??=== */
    .n07-system { background: #fff; }
    .n07b-system { background: #fff; }
    /* ⚠️ 컨벤션: 섹션 안 콘텐츠 블록의 max-width는 1040px로 통일 (n07-cycle, n07-features, n10-grid 등) */
    /* framer-g67zc3 구조: 흰 카드 컨테이너 + 소제목 + 6카드 그리드 (전체 너비 유지, 1줄 2개) */
    .n07-cycle { background: linear-gradient(180deg, #F7FBFF 0%, #F3F8FE 100%); border: 1px solid rgba(32,151,255,0.10); border-radius: 20px; padding: 24px 30px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 1040px; margin: 0 auto; box-shadow: 0 16px 36px rgba(0,47,108,0.06); }
    .n07-pkg-label { font-size: 14px; font-weight: 600; color: #474B5B; line-height: 1.2; letter-spacing: -0.28px; margin: 0; }
    .n07-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; }
    .n07-pkg-card { position: relative; border-radius: 12px; overflow: hidden; }
    .n07-pkg-thumb { position: relative; width: 100%; aspect-ratio: 128 / 99; border-radius: 12px; background: var(--surface-soft); overflow: hidden; }
    .n07-pkg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* 제목을 이미지 안 하단(끝)에 겹쳐 배치 */
    .n07-pkg-title { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 18px 14px 12px; font-size: 16px; font-weight: 500; color: var(--text-main); line-height: 1.4; white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
    .n07-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1040px; margin: 0 auto; }
    .n07-feat { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; box-shadow: 0 12px 30px rgba(0,47,108,0.05); }
    .n07-feat-icon { width: 54px; height: 54px; background: var(--surface-blue); color: var(--brand); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; }
    .n07-feat-title { font-size: 16px; font-weight: 600; color: var(--brand-dark); margin: 0 0 8px; letter-spacing: -0.3px; }
    .n07-feat-desc { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin: 0; word-break: keep-all; }

    /* N07b: RealClass VideoSteps 스타일 - 좌측 제목+탭+STEP / 우측 폰 이미지 */
    .n07b-steps { display: flex; align-items: flex-start; gap: 56px; width: 100%; }
    .n07b-left { flex: 1 1 0; min-width: 0; }
    .n07b-left .n-chip { margin-bottom: 18px; }
    .n07b-h2 { font-family: 'Outfit', 'Pretendard', sans-serif; font-size: 32px; font-weight: 700; color: var(--text-main); line-height: 1.35; letter-spacing: -1px; margin: 0 0 30px; word-break: keep-all; }
    .n07b-h2 .n07b-accent { color: var(--brand); }
    .n07b-tabs { display: flex; flex-wrap: nowrap; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .n07b-tabs::-webkit-scrollbar { display: none; }
    .n07b-tab { flex: 0 0 auto; appearance: none; background: none; border: none; padding: 0 0 13px; font-size: 16px; font-weight: 600; color: var(--text-light); cursor: pointer; position: relative; letter-spacing: -0.3px; white-space: nowrap; transition: color 0.2s ease; }
    .n07b-tab:hover { color: var(--text-sub); }
    .n07b-tab.is-active { color: var(--brand); }
    .n07b-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px; }
    .n07b-body { display: none; }
    .n07b-body.is-active { display: block; }
    .n07b-step-label { font-size: 20px; font-weight: 700; color: var(--text-main); letter-spacing: -0.4px; margin-bottom: 12px; }
    .n07b-step-desc { font-size: 16px; color: var(--text-muted); line-height: 1.75; margin: 0; word-break: keep-all; }
    /* 폰은 길게 두고(600px), 우측 컬럼 높이를 고정(500px)+overflow:hidden 으로 아래쪽을 잘라 비율을 맞춤 */
    .n07b-right { flex: 1 1 0; display: flex; align-items: flex-start; justify-content: center; align-self: flex-start; height: 500px; overflow: hidden; }
    .n07b-phone { flex: 0 0 auto; width: 300px; max-width: 100%; height: 600px; background: #0f172a; border-radius: 38px; padding: 10px; }
    .n07b-phone-screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--surface-soft); }
    .n07b-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; border: 0; }
    .n07b-shot.is-active { display: block; }
    /* iframe 목업: 각 목업의 설계 캔버스 크기로 고정 후 CSS transform으로 폰 화면(280px)에 맞춤 — 내부 fit() JS 의존 제거 */
    iframe.n07b-shot { transform-origin: top left; }
    iframe.n07b-shot[data-idx="0"] { width: 430px; height: 768px; transform: scale(0.651); }
    iframe.n07b-shot[data-idx="1"] { width: 430px; height: 768px; transform: scale(0.651); }
    iframe.n07b-shot[data-idx="2"] { width: 560px; height: 1160px; transform: scale(0.5); }
    iframe.n07b-shot[data-idx="3"] { width: 430px; height: 768px; transform: scale(0.651); }
    iframe.n07b-shot[data-idx="4"] { width: 430px; height: 768px; transform: scale(0.651); }
    iframe.n07b-shot[data-idx="5"] { width: 430px; height: 768px; transform: scale(0.651); }

    @media (max-width: 960px) {
        .n07b-steps { flex-direction: column; align-items: stretch; gap: 30px; max-width: 560px; margin: 0 auto; }
        .n07b-left { width: 100%; }
        .n07b-right { order: 2; flex: 0 0 auto; display: flex !important; width: 100%; height: 500px; margin-top: 0; overflow: hidden; align-self: center; align-items: flex-start; justify-content: center; }
        .n07b-phone { display: block !important; flex: 0 0 auto; width: 300px; max-width: calc(100vw - 72px); height: 600px; margin: 0 auto; }
    }

    /* === N08. 콘텐�?=== */
    .n08-content { background: var(--surface-soft); }
    .n08-groups { max-width: 980px; margin: 0 auto 36px; display: grid; gap: 16px; }
    .n08-group { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 32px; box-shadow: 0 12px 30px rgba(0,47,108,0.05); }
    .n08-group-h { font-size: 16px; font-weight: 600; color: var(--brand-dark); margin: 0 0 16px; letter-spacing: -0.3px; }
    .n08-items { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .n08-items li { background: var(--surface-blue); padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--brand-dark); display: flex; align-items: center; gap: 8px; word-break: keep-all; line-height: 1.4; }
    .n08-items li::before { content: ''; width: 5px; height: 5px; background: var(--brand); border-radius: 50%; flex-shrink: 0; }
    .n08-value-box { max-width: 980px; margin: 48px auto 0; background: var(--brand-dark) url('/resources/img/subscribe_summer02.webp') center center / cover no-repeat; color: #fff; border-radius: 20px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 18px 50px rgba(0,47,108,0.06); flex-wrap: wrap; }
    .n08-value-text { font-size: 16px; font-weight: 400; letter-spacing: -0.3px; }
    .n08-value-text b { font-family: 'Outfit', sans-serif; color: #FFE678; font-size: 22px; font-weight: 700; }
    .n08-value-chip { background: rgba(255,255,255,0.18); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 400; }
    .n08-value-chip b { color: #FFE678; }
    .n08-pro-head { max-width: 980px; margin: 48px auto 24px; text-align: center; }
    .n08-pro-badge { display: inline-block; background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; letter-spacing: 0.5px; margin-bottom: 12px; }
    .n08-pro-title { font-size: 22px; font-weight: 800; color: var(--brand-dark); margin: 0 0 8px; letter-spacing: -0.5px; }
    .n08-pro-sub { font-size: 14px; font-weight: 500; color: var(--text-sub); margin: 0; word-break: keep-all; line-height: 1.5; }
    .n08-more-btn { display: none; }
    .n08-content .voucher-more-hint i { color: var(--brand); }
    /* 수강권 카드 hover/active 라인 — 시즌(녹색) 대신 페이지 톤(블루)으로 */
    .n08-content .voucher-card:hover { border-color: var(--brand); }
    /* 수강권 가격 — 시즌(녹색) 공통 클래스 대신 페이지 톤(블루) */
    .n08-voucher-price { font-size: 18px; font-weight: 800; color: var(--brand); }
    /* BASIC / PRO 탭 */
    .n08-tab-bar { text-align: center; margin: 0 auto 28px; }
    .n08-tabs { display: inline-flex; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px; box-shadow: 0 8px 24px rgba(0,47,108,0.05); }
    .n08-tab { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 10px 24px; border-radius: 999px; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: 0.3px; color: var(--text-sub); cursor: pointer; transition: 0.25s; }
    .n08-tab.active { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(0,47,108,0.18); }
    .n08-tab-pane { display: none; }
    .n08-tab-pane.active { display: block; }
    @media (max-width: 800px) {
        .n08-tabs { display: flex; width: 100%; }
        .n08-tab { flex: 1; justify-content: center; padding: 12px 0; }
        .n08-more-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; background: #fff; border: 2px solid var(--brand); border-radius: 12px; font-weight: 700; color: var(--brand); cursor: pointer; margin: 20px auto 0; transition: 0.3s; width: 100%; }
        .n08-more-btn:hover { border-color: var(--brand-dark); color: var(--brand-dark); }
        .n08-more-btn i { transition: 0.3s; }
        .n08-more-btn.active i { transform: rotate(180deg); }
        .n08-more-btn.active span { font-size: 12px; visibility: hidden; }
        .n08-more-btn.active span::after { content: ' 접기'; font-size: 16px; visibility: visible; }
    }

    /* === N09. ?�뢰지??(?�크) === */
    /* 섹션 톤: 마이메르시 브랜드 네이비 그라데이션 (윗부분에 은은한 블루 광) */
    .n09-stats { background: radial-gradient(120% 90% at 50% 0%, #0E4485 0%, #002F6C 46%, #00152e 100%); }
    .n09-stats .n-chip { background: rgba(32,151,255,0.20); color: #7cc0ff; }
    .n09-stats .n-h2 { color: #fff; }
    .n09-stats .n-sub { color: rgba(255,255,255,0.72); }
    /* 3열 × 2행, 중앙 정렬 — 다크 섹션용 솔리드 카드 (페이지 카드 시스템의 다크 버전) */
    .n09-grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .n09-card {
        background: #0E3A6E;
        border: 1px solid rgba(77,168,255,0.20);
        border-radius: 20px;
        padding: 38px 26px;
        text-align: center;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        min-height: 168px;
        box-shadow: 0 12px 30px rgba(0,8,26,0.30);
    }
    .n09-num { font-family: 'Outfit', sans-serif; font-size: 36px; font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1; margin-bottom: 14px; }
    .n09-plus { color: #4da8ff; margin-left: 1px; }
    .n09-label { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.78); word-break: keep-all; line-height: 1.6; }
    /* 카드 하단 작은 기준 캡션 */
    .n09-cap { font-size: 12px; color: rgba(255,255,255,0.42); margin-top: 10px; word-break: keep-all; }

    /* === N10. ?�기 === */
    .n10-stories { background: #fff; }
    /* === Ringle Ticker 스타일: 2행 무한 가로 마퀴 === */
    /* 1040px 윈도우 안에서 카드가 흐르고 좌우 끝은 페이드(mask)로 클립 */
    .n10-marquee { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
    .n10-track { display: flex; align-items: stretch; width: max-content; will-change: transform; }
    .n10-track--left  { animation: n10-marquee-left  56s linear infinite; }
    .n10-track--right { animation: n10-marquee-right 64s linear infinite; }
    /* 카드 두 세트를 이어붙여 -50% 지점이 정확히 한 주기가 되도록 gap 대신 margin-right 사용 */
    .n10-marquee .n10-card { flex: 0 0 330px; width: 330px; margin-right: 20px; }
    /* 화면 밖일 때(JS 토글) 일시정지 → Framer Ticker의 오프스크린 정지 재현 */
    .n10-marquee.is-offscreen .n10-track { animation-play-state: paused; }
    @keyframes n10-marquee-left  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
    @keyframes n10-marquee-right { from { transform: translateX(-50%); }   to { transform: translateX(0); } }
    /* 모션 최소화 설정 시 정지하고 일반 가로 스크롤로 폴백 */
    @media (prefers-reduced-motion: reduce) {
        .n10-track { animation: none; }
        .n10-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
    }
    /* 리뷰 내용 중심 카드 (링글 스타일): 큰 따옴표 + 본문 강조 + 가운데 정렬 */
    .n10-card { background: #EAF3FF; border-radius: 20px; padding: 30px 26px; box-shadow: 0 12px 30px rgba(0,47,108,0.05); transition: all 0.25s ease; display: flex; flex-direction: column; align-items: center; text-align: center; }
    /* 호버 시 카드는 확대하지 않음 */
    /* 옆 카드끼리 브랜드 블루 2색을 번갈아 (둘 다 밝게, 글자는 네이비 유지) */
    .n10-card:nth-child(even) { background: #D3E6FF; }
    /* 따옴표+본문을 묶어 카드 안에서 세로 가운데 정렬 (본문 자체는 block이라 <b> 강조가 인라인 유지) */
    .n10-top { flex: 1; display: flex; flex-direction: column; justify-content: center; }
    .n10-quote { font-family: Georgia, 'Times New Roman', serif; font-size: 46px; line-height: 0.7; color: rgba(32,151,255,0.32); margin-bottom: 12px; }
    .n10-body { font-size: 16px; color: var(--text-main); line-height: 1.75; margin: 0; word-break: keep-all; }
    .n10-body b { color: var(--brand-dark); font-weight: 700; }
    .n10-person { margin-top: 18px; }
    .n10-name { font-size: 16px; font-weight: 700; color: var(--brand-dark); letter-spacing: -0.3px; }
    .n10-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

    /* Responsive */
    @media (max-width: 768px) {
        .n06-chart { padding: 32px 20px; }
        .n06-plot { gap: 12px; min-height: 190px; }
        .n06-labels { gap: 12px; margin-top: 12px; }
        .n06-label { font-size: 14px; line-height: 1.35; }
        .n06-price { font-size: 16px; }
        .n06-price.highlight { font-size: 20px; }
        .n06-bar.gray1 { height: 105px; }
        .n06-bar.gray2 { height: 150px; }
        .n06-bar.brand { height: 44px; }
        .n06-bubble { font-size: 14px; padding: 10px 18px; }
        .n07-cycle { max-width: 100%; padding: 20px; }
        .n07-pkg-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .n07-pkg-title { font-size: 14px; }
        .n07-features { grid-template-columns: 1fr; gap: 14px; }
        /* N07b 스텝퍼: 모바일 세로 스택 */
        .n07b-steps { flex-direction: column; align-items: stretch; gap: 32px; }
        .n07b-h2 { font-size: 24px; margin-bottom: 24px; }
        .n07b-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 18px; -webkit-overflow-scrolling: touch; }
        .n07b-step-label { font-size: 18px; }
        .n07b-step-desc { font-size: 16px; }
        .n07b-right { order: 2; flex: 0 0 auto; display: flex !important; align-self: center; align-items: flex-start; justify-content: center; width: 100%; height: 430px; margin-top: 0; overflow: hidden; }
        .n07b-phone { display: block !important; flex: 0 0 auto; width: 260px; max-width: calc(100vw - 72px); height: 520px; margin: 0 auto; }
        iframe.n07b-shot[data-idx="0"] { transform: scale(0.5581); }
        iframe.n07b-shot[data-idx="1"] { transform: scale(0.5581); }
        iframe.n07b-shot[data-idx="2"] { transform: scale(0.4286); }
        iframe.n07b-shot[data-idx="3"] { transform: scale(0.5581); }
        iframe.n07b-shot[data-idx="4"] { transform: scale(0.5581); }
        iframe.n07b-shot[data-idx="5"] { transform: scale(0.5581); }
        .n08-group { padding: 22px 22px; }
        .n08-items { grid-template-columns: 1fr; gap: 6px; }
        .n08-value-box { padding: 22px 22px; flex-direction: column; align-items: flex-start; gap: 14px; }
        .n09-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
        .n09-card { padding: 30px 16px; min-height: 140px; }
        .n09-num { font-size: 24px; font-weight: 500; margin-bottom: 10px; }
        .n09-fn { font-size: 12px; }
        .n09-label { font-size: 14px; }
        .n09-foot { font-size: 12px; }
        .n10-marquee { gap: 14px; }
        .n10-marquee .n10-card { flex-basis: 260px; width: 260px; margin-right: 14px; padding: 22px 20px; }
        .n10-track--left  { animation-duration: 42s; }
        .n10-track--right { animation-duration: 48s; }
    }
    @media (max-width: 375px) {
        .n07-pkg-title { font-size: 13px; }
    }

/* === [6] N06~N10 ?�역 (orig <style> 1866-1935) === */
    /* === N11. ?�격 보장 ?�속 === */
    .n11-promise { background: #fff; }
    .n11-grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .n11-card { background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.7); border-radius: 24px; padding: 40px 28px; text-align: center; box-shadow: var(--shadow-sm); transition: all 0.25s ease; }
    .n11-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
    .n11-icon { width: 72px; height: 72px; background: var(--surface-blue); color: var(--brand); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 22px; box-shadow: 0 8px 20px rgba(32,151,255,0.18); }
    .n11-title { font-size: 18px; font-weight: 600; color: var(--brand-dark); margin: 0 0 10px; letter-spacing: -0.4px; }
    .n11-amount { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; color: var(--brand); margin: 8px 0 14px; letter-spacing: -0.5px; }
    .n11-desc { font-size: 14px; color: var(--text-sub); line-height: 1.7; margin: 0; word-break: keep-all; }
    .n11-logo-marquee { max-width: 1040px; margin: 54px auto 0; overflow: hidden; position: relative; padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
    .n11-logo-track { display: flex; width: max-content; animation: n11-logo-scroll 28s linear infinite; }
    .n11-logo-group { display: flex; align-items: center; gap: 58px; padding: 0 34px; flex-shrink: 0; }
    .n11-logo-group img { height: 54px; width: auto; max-width: none; object-fit: contain; opacity: 0.5; filter: grayscale(100%); }
    @keyframes n11-logo-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

    /* === N12. ?�로�?CTA === */
    .n12-closing { background: var(--brand) url('/resources/img/subscribe_summer.webp') center bottom / cover no-repeat; position: relative; }
    .n12-closing::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(255,230,120,0.10) 0%, transparent 60%), radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0); background-size: auto, 24px 24px; pointer-events: none; }
    .n12-closing .sub-container { position: relative; z-index: 1; text-align: center; }
    .n12-chip { display: inline-block; background: #FFE678; color: var(--brand-dark); font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: 999px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 22px; }
    .n12-h2 { font-family: 'Outfit','Pretendard',sans-serif; font-size: 44px; font-weight: 700; color: #fff; line-height: 1.25; letter-spacing: -1.5px; margin: 0 0 18px; word-break: keep-all; }
    .n12-h2-hl { background: linear-gradient(transparent 55%, rgba(255,230,120,0.50) 55%); padding: 0 6px; }
    .n12-sub { font-size: 16px; color: rgba(255,255,255,0.88); line-height: 1.7; margin: 0 0 40px; word-break: keep-all; }
    .n12-cta { background: #fff; color: var(--brand-dark); border: none; border-radius: 999px; padding: 22px 56px; font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 20px 50px rgba(0,0,0,0.20); transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 14px; letter-spacing: -0.3px; }
    .n12-cta:hover { transform: translateY(-4px); box-shadow: 0 28px 64px rgba(0,0,0,0.30); }
    .n12-cta-arrow { font-size: 18px; color: var(--brand); }

    /* === N13. FAQ === */
    .n13-faq { background: var(--surface-soft); }
    .n13-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
    .n13-item { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: box-shadow 0.25s ease; }
    .n13-item.open { box-shadow: 0 18px 44px rgba(0,47,108,0.10); }
    .n13-q { width: 100%; background: transparent; border: none; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--text-main); text-align: left; letter-spacing: -0.3px; transition: all 0.25s ease; }
    .n13-item.open .n13-q { color: var(--brand); }
    .n13-q-icon { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--brand); transition: transform 0.3s ease; }
    .n13-item.open .n13-q-icon { transform: rotate(45deg); }
    .n13-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
    .n13-item.open .n13-a { max-height: 360px; }
    .n13-a-inner { padding: 0 32px 26px; font-size: 16px; color: var(--text-sub); line-height: 1.75; word-break: keep-all; }

    /* === N14. NOTICE + ?�터 === */
    .n14-notice { background: var(--surface-soft); padding: 80px 0 40px; width: 100vw; margin-left: calc(-50vw + 50%); }
    .n14-notice .sub-container { max-width: 1040px; }
    .n14-head { text-align: center; margin-bottom: 48px; }
    .n14-h3 { font-size: 22px; font-weight: 700; color: var(--text-main); margin: 0 0 8px; letter-spacing: -0.4px; }
    .n14-sub { font-size: 14px; color: var(--text-muted); margin: 0; }
    .n14-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 40px; }
    .n14-block-title { font-size: 14px; font-weight: 700; color: var(--brand-dark); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--brand); letter-spacing: -0.2px; }
    .n14-block-list { list-style: none; padding: 0; margin: 0; }
    .n14-block-list li { font-size: 14px; color: var(--text-muted); line-height: 1.75; padding-left: 12px; position: relative; margin-bottom: 6px; word-break: keep-all; }
    .n14-block-list li::before { content: '·'; position: absolute; left: 0; color: var(--text-light); font-weight: 700; }
    .n14-footer { background: var(--surface-soft); padding: 32px 0; width: 100vw; margin-left: calc(-50vw + 50%); }
    .n14-footer .sub-container { max-width: 1040px; text-align: center; }
    .n14-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 16px; font-size: 14px; }
    .n14-foot-links a { color: var(--text-sub); text-decoration: none; transition: color 0.2s ease; font-weight: 600; }
    .n14-foot-links a:hover { color: var(--brand); }
    .n14-foot-links .restore { color: var(--brand); font-weight: 700; }
    .n14-foot-divider { color: var(--text-light); }
    .n14-foot-notice { font-size: 12px; color: var(--text-light); line-height: 1.7; max-width: 760px; margin: 0 auto; word-break: keep-all; }

    @media (max-width: 768px) {
        .n11-grid { grid-template-columns: 1fr; gap: 16px; }
        .n11-card { padding: 32px 24px; }
        .n11-icon { width: 60px; height: 60px; font-size: 24px; margin-bottom: 18px; }
        .n11-logo-marquee { margin-top: 36px; padding: 12px 0; }
        .n11-logo-group { gap: 30px; padding: 0 16px; }
        .n11-logo-group img { height: 40px; }
        .n12-h2 { font-size: 30px; letter-spacing: -1px; }
        .n12-sub { font-size: 16px; margin-bottom: 32px; }
        .n12-cta { padding: 18px 36px; font-size: 16px; }
        .n13-q { padding: 20px 22px; font-size: 16px; }
        .n13-a-inner { padding: 0 22px 22px; font-size: 14px; }
        .n14-notice { padding: 60px 0 32px; }
        .n14-blocks { grid-template-columns: 1fr; gap: 24px; }
        .n14-foot-links { gap: 12px; font-size: 12px; }
    }

/* === Bottom promo ticker CTA === */
.subscribe-page { padding-bottom: 116px; }
.n-bottom-ticker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000; display: flex; justify-content: center; padding: 0 18px max(18px, env(safe-area-inset-bottom)); pointer-events: none; }
.n-bottom-ticker-btn { position: relative; width: min(680px, 100%); min-height: 84px; border: none; border-radius: 16px; background: var(--brand) url('/resources/img/subscribe_summer.webp') center 72% / cover no-repeat; color: #111827; padding: 26px 34px 22px; font-size: 18px; font-weight: 800; letter-spacing: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 36px rgba(0,47,108,0.18), 0 8px 18px rgba(32,151,255,0.26); transition: transform 0.22s ease, box-shadow 0.22s ease; pointer-events: auto; overflow: visible; }
.n-bottom-ticker-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(0,47,108,0.22), 0 10px 22px rgba(32,151,255,0.32); }
.n-bottom-ticker-label { display: block; color: #fff; line-height: 1.25; text-shadow: 0 2px 12px rgba(0,47,108,0.22); }
.n-bottom-timer { position: absolute; right: 28px; top: -22px; z-index: 2; background: #fff; color: var(--brand-dark); border-radius: 999px; padding: 9px 16px; font-size: 16px; font-weight: 800; line-height: 1; box-shadow: 0 10px 24px rgba(0,30,80,0.16); white-space: nowrap; }
.n-bottom-timer::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.n-bottom-timer b { color: var(--brand); font-family: 'Outfit','Pretendard',sans-serif; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
@media (max-width: 768px) { .subscribe-page { padding-bottom: 108px; } .n-bottom-ticker { bottom: 0; padding: 0 14px clamp(10px, env(safe-area-inset-bottom, 0px), 18px); } .n-bottom-ticker-btn { min-height: 74px; border-radius: 15px; padding: 24px 18px 18px; font-size: 16px; } .n-bottom-timer { right: 14px; top: -20px; max-width: calc(100% - 28px); padding: 8px 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; } .n-bottom-timer b { font-size: 14px; } }