/* ========== 디자인 토큰 ========== */
        :root {
            --space-xs: 4px;
            --space-sm: 8px;
            --space-md: 12px;
            --space-lg: 16px;
            --space-xl: 20px;

            --c-primary: #F57C00;
            --c-primary-dark: #E65100;
            --c-accent: #4ade80;
            --c-danger: #e74c3c;
            --c-text: #333;
            --c-text-secondary: #555;
            --c-text-muted: #888;
            --c-border: #e2e8f0;
            --c-bg: #f8f9fa;

            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-pill: 100px;

            --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
            --shadow-hover: 0 4px 12px rgba(107,159,231,0.15);

            --container-width: 520px;
            --container-height: 90vh;

            /* ===== 글자 크기 = 역할 값 표 한 곳(2026-10-11 대표 「글자 크기 플랜 추천대로 진행해」 · 기준표 v2) — 여기 값 = PC · 태블릿·휴대폰 값은 이 블록 바로 뒤 @media 두 줄에서만 · 부품은 숫자 대신 이 이름만 ===== */
            --fs-body: 15px; --fs-sub: 14px; --fs-small: 12.5px; --fs-tiny: 10px;   /* 본문(말풍선·카드 본문·표) · 보조 · 작은 글 · 아주 작은 글 */
            --fs-subtitle: 16px; --fs-title: 18px; --fs-num: 22px; --fs-num-xl: 32px; --fs-input: 16px;   /* 소제목 · 제목 · 큰 숫자 · 아주 큰 숫자 · 입력 칸(아이폰 확대 막기) */
            /* 옛 이름(--font-*)은 10-12 글자 크기 P5-1에서 쓰는 곳 28곳을 역할 이름으로 옮기고 지움 · 입력 칸 16 = 모든 폭(아이폰 확대 막기 · 옛 휴대폰 16px 줄을 여기로) */

            /* ===== 높이 토큰 ===== */
            --height-input: 44px;
            --height-input-mobile: 44px;
            --height-send-btn: 44px;
            --height-send-btn-mobile: 36px;
            --height-touch-target: 44px;

            /* ===== line-height 토큰 ===== */
            --lh-tight:   1.2;
            --lh-snug:    1.3;
            --lh-normal:  1.4;
            --lh-relaxed: 1.5;
            --lh-loose:   1.6;

            /* ===== 패딩 토큰 ===== */
            --pad-bubble: 12px 16px;
            --pad-bubble-mobile: 10px 14px;
            --pad-input: 10px 16px;
            --pad-input-mobile: 8px 14px;
            --pad-chip: 8px 14px;
            --pad-chip-mobile: 8px 12px;
            --pad-btn: 8px 16px;
            --pad-cta: 10px 20px;
        }
        @media (max-width: 1024px) { :root { --fs-sub: 13px; --fs-small: 12px; } }   /* 글자 크기 역할 값 표 = 태블릿(481~1024) */
        @media (max-width: 480px) { :root { --fs-body: 14px; --fs-tiny: 11px; --fs-title: 16px; --fs-num: 20px; --fs-num-xl: 28px; } }   /* 〃 = 휴대폰(≤480 · 본문 14 = 기준표) */

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

        body {
            font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #ffffff;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: var(--space-xl);
        }

        /* ========== 컨테이너 (3단계 반응형) ========== */
        .chat-container {
            position: relative;
            background: white;
            border-radius: var(--space-xl);
            box-shadow:
                0 4px 6px rgba(0, 0, 0, 0.04),
                0 10px 24px rgba(0, 0, 0, 0.08),
                0 20px 48px rgba(0, 0, 0, 0.06);
            width: 100%;
            max-width: var(--container-width);
            height: var(--container-height);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* ========== 헤더 (컴팩트) ========== */
        .chat-header {
            position: relative;
            background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
            color: white;
            padding: var(--space-lg);
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 30px;
            gap: 18px;
        }

        .header-info h3 {
            font-size: var(--fs-title);
            margin-bottom: 3px;
        }

        .header-info p {
            display: inline-block;
            font-size: var(--fs-small);
            background: #fff;
            color: #333;
            padding: 3px 12px;
            border-radius: 14px;
            margin-top: 4px;
            opacity: 1;
        }

        .status-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: var(--c-accent);
            border-radius: 50%;
            margin-left: 5px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .trust-badges {
            display: flex;
            gap: var(--space-sm);
            margin-top: var(--space-sm);
        }

        .badge {
            background: rgba(255,255,255,0.2);
            padding: 3px 7px;
            border-radius: var(--radius-md);
            font-size: var(--fs-tiny);
            display: flex;
            align-items: center;
            gap: 3px;
        }

        /* ========== 메시지 영역 (커스텀 스크롤바) ========== */
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: var(--space-lg);
            background: var(--c-bg);
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            position: relative; /* offsetTop이 chatMessages 기준으로 계산되도록 */
            word-break: keep-all; /* 🆕10-21 낱말 중간 줄바꿈 막기를 대화 창 전체에 한 번(말풍선·카드에 따로 넣던 것 · 빠졌던 요약·한마디 상자 PC 「50만/원」) · 대표 「모두 추천대로 진행해」 */
            overflow-wrap: break-word; /* 줄 폭보다 긴 낱말(긴 주소 등)만 예외로 끊음 */
        }
        .chat-messages::before {
            content: '';
            position: absolute;
            top: 45%; left: 50%;
            transform: translate(-50%, -50%);
            width: 200px; height: 200px;
            background: url('/images/kkulbot-honey2.webp') no-repeat center/contain;
            opacity: 0.08;
            pointer-events: none;
            z-index: 0;
        }
        .chat-messages > * {
            position: relative;
            z-index: 1;
        }

        .chat-messages::-webkit-scrollbar {
            width: 4px;
        }
        .chat-messages::-webkit-scrollbar-track {
            background: transparent;
        }
        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.25);
            border-radius: 4px;
        }
        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.4);
        }

        .message {
            margin-bottom: var(--space-md);
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 카드 순차 등장 애니메이션 */
        @keyframes cardEntrance {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .message.user {
            text-align: right;
        }

        .message.bot {
            text-align: left;
        }

        .message-bubble {
            display: inline-block;
            max-width: 80%;
            padding: var(--pad-bubble);
            border-radius: 18px;
            word-wrap: break-word;
            word-break: keep-all; /* 낱말 중간 줄바꿈 막기(「인/터넷」) · 카드(.acv5 · .moabi-ec)와 같게 — 09-25 대표 관문 2 */
            white-space: pre-wrap;
            font-size: var(--fs-body);
            line-height: var(--lh-loose);
        }

        .message.user .message-bubble {
            background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
            color: white;
            border-bottom-right-radius: 4px;
        }

        .message.bot .message-bubble {
            background: white;
            color: var(--c-text);
            box-shadow: var(--shadow-card);
            border-bottom-left-radius: 4px;
            display: block;
            max-width: 100%;
            width: 100%;
            white-space: normal;
        }

        /* 가이드 컨테이너 (block 레이아웃 — inline-block 탈피) */
        /* ========== FC 직접 렌더링 카드 (환각 방지) ========== */
        .direct-card {
            background: white;
            border-radius: var(--radius-md);
            padding: 14px;
            border: 1.5px solid var(--c-border);
            overflow: hidden;
        }
        .direct-card-header {
            font-size: 15px;
            font-weight: 700;
            color: var(--c-text);
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--c-border);
        }
        .direct-card-section { margin-bottom: 14px; position: relative; }
        .direct-card-carrier {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 6px;
            padding: 5px 10px;
            border-radius: 4px;
            border-left: 3px solid var(--c-primary);
            background: #f0f4ff;
            color: var(--c-primary);
        }
        .direct-card-carrier.carrier-kt { border-left-color: #2563eb; background: #eff6ff; color: #2563eb; }
        .direct-card-carrier.carrier-lg { border-left-color: #7c3aed; background: #f5f3ff; color: #7c3aed; }
        .direct-card-carrier.carrier-sk { border-left-color: #dc2626; background: #fef2f2; color: #dc2626; }
        /* 가로 스크롤 표 — 공통 (PC·모바일). 동작 = js/chat-table-scroll.js */
        .table-scroll-wrapper {
            position: relative;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            max-width: 100%;
        }
        .table-scroll-btn {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 28px; height: 28px; padding: 0; border: none;
            background: rgba(0,0,0,0.4); color: #fff;
            border-radius: 50%; display: none; align-items: center; justify-content: center;
            font-size: var(--fs-title); font-weight: bold; line-height: 1; cursor: pointer; z-index: 3;
        }
        .table-scroll-btn:hover { background: rgba(0,0,0,0.6); }
        .has-scroll-right > .table-scroll-btn-right { display: flex; right: 4px; }
        .has-scroll-left > .table-scroll-btn-left { display: flex; left: 4px; }
        .direct-card-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        .installation-card .direct-card-table {
            min-width: 420px;
        }
        .direct-card-table th,
        .direct-card-table td { white-space: nowrap; }
        /* 설치비 모든 열 nowrap — 가로 스크롤로 통일 */
        .direct-card-table th {
            background: #f8fafc;
            padding: 6px 8px;
            text-align: center;
            font-weight: 600;
            color: #475569;
            border-bottom: 1.5px solid var(--c-border);
        }
        .direct-card-table td {
            padding: 6px 8px;
            text-align: center;
            border-bottom: 1px solid #f1f5f9;
        }
        .direct-card-table td:first-child { text-align: left; font-weight: 500; }
        .product-label { display: inline-block; font-size: 11px; padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle; font-weight: 600; }
        .label-popular { background: #fff3e0; color: #e65100; }
        .label-recommended { background: #e8f5e9; color: #2e7d32; }
        .label-best_price { background: #e3f2fd; color: #1565c0; }
        .label-best_benefit { background: #fce4ec; color: #c62828; }
        .direct-card-comment {
            margin: 0 0 10px;   /* 카드 앞에 옴 (2026-09-26 대표 「설명글을 항상 먼저」 · chat-answer-card.js cardTextFirst) */
            padding: 8px 10px;
            background: #f0f4ff;
            border-radius: var(--radius-sm);
            font-size: 13px;
            color: #555;
        }
        .direct-card-context {
            margin-top: 6px;
            font-size: 12px;
            color: #94a3b8;
            text-align: center;
        }

        .guide-container {
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 0;
        }
        /* 환영 화면: 액션 카드+힌트를 나머지 공간 수직 가운데 */

        .guide-container .guide-text-box,
        .direct-card-lead {   /* 카드 앞 답(사은품 지급 시기 등)도 가이드 말풍선과 같은 모양 · 2026-09-22 */
            background: white;
            border-radius: 18px 18px 18px 4px;
            padding: 12px 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            margin-bottom: 8px;
            font-size: var(--fs-body);
            line-height: var(--lh-loose);
            color: #333;
        }
        .guide-text-box p, .direct-card-lead p { margin: 0 0 8px 0; }
        .guide-text-box p:last-child, .direct-card-lead p:last-child,
        .guide-text-box p:last-of-type { margin-bottom: 0; }
        .guide-text-box strong, .direct-card-lead strong { font-weight: 600; }
        .guide-text-box ul, .guide-text-box ol { margin: 6px 0; padding-left: 20px; }
        .guide-text-box li { margin-bottom: 4px; }
        .guide-text-box code { background: #f0f0f0; padding: 1px 5px; border-radius: 4px; font-size: var(--fs-sub); }
        .guide-text-box a { color: var(--c-primary); text-decoration: underline; }

        /* 봇 응답 대기 - 2단계 로딩 */
        .typing-indicator {
            display: none;
            padding: 0 var(--space-lg);
            text-align: left;
        }
        .typing-indicator.active { display: block; }
        .typing-bubble {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: white;
            border-radius: 18px 18px 18px 4px;
            padding: 14px 18px;
            box-shadow: var(--shadow-card);
            min-height: 48px;
        }
        /* Phase 1: 바운스 점 3개 */
        .typing-dots {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .typing-dots span {
            width: 9px;
            height: 9px;
            background: var(--c-primary);
            border-radius: 50%;
            animation: dot-bounce 1.4s ease-in-out infinite;
            opacity: 0.6;
        }
        .typing-dots span:nth-child(1) { animation-delay: 0s; }
        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes dot-bounce {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-8px); opacity: 1; }
        }
        /* Phase 2: 상태 텍스트 + 타이핑 효과 */
        .typing-status {
            display: none;
            font-size: var(--fs-sub);
            color: var(--c-text-secondary);
            font-weight: 500;
            letter-spacing: -0.2px;
        }
        .typing-status .typing-cursor {
            display: inline-block;
            width: 2px;
            height: 14px;
            background: var(--c-primary);
            margin-left: 1px;
            vertical-align: text-bottom;
            animation: blink 0.6s infinite;
        }
        .typing-indicator.with-status .typing-status { display: inline; }
        .typing-indicator.with-status .typing-dots span {
            animation: dot-pulse 1s ease-in-out infinite;
            width: 6px;
            height: 6px;
        }
        @keyframes dot-pulse {
            0%, 100% { opacity: 0.3; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1); }
        }

        /* 스트리밍 커서 */
        .streaming-cursor {
            display: inline-block;
            width: 8px;
            height: 16px;
            background: var(--c-primary);
            margin-left: 2px;
            animation: blink 0.7s infinite;
            vertical-align: middle;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        .message.streaming .message-content {
            min-height: 20px;
        }

        /* ── 퀵 액션 바 ── */
        .quick-action-bar {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 6px var(--space-lg);
            background: white;
            border-top: 1px solid var(--c-border);
        }
        .quick-action-bar.collapsed .quick-action-items { display: none; }
        .quick-action-bar.expanded .quick-action-toggle { display: none; }
        .quick-action-bar.expanded .quick-action-items {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap; /* 버튼 5개+ 폭 초과 시 줄바꿈 — 왼쪽 잘림 방지 (2026-07-10 가입 입구) */
            justify-content: flex-end;
            max-width: 100%;
            animation: qaSlideIn 0.25s ease-out;
        }
        .quick-action-toggle {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 14px;
            background: white;
            border: 1px solid var(--c-border);
            border-radius: 18px;
            font-size: var(--fs-small);
            color: #64748b;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .quick-action-toggle:hover {
            border-color: var(--c-primary);
            color: var(--c-primary);
        }
        .toggle-icons { font-size: var(--fs-tiny); letter-spacing: 1px; }
        .toggle-arrow { font-size: var(--fs-tiny); transition: transform 0.2s; }
        .quick-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            background: white;
            border: 1px solid var(--c-primary);
            color: var(--c-primary);
            border-radius: 18px;
            font-size: var(--fs-small);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s ease;
        }
        .quick-action-btn:hover {
            background: var(--c-primary);
            color: white;
        }
        .qa-icon { font-size: var(--fs-small); }
        .quick-action-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: none;
            border: 1px solid var(--c-border);
            border-radius: 50%;
            font-size: var(--fs-subtitle);
            color: #94a3b8;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }
        .quick-action-close:hover {
            border-color: #ef4444;
            color: #ef4444;
        }
        @keyframes qaSlideIn {
            from { opacity: 0; transform: translateX(20px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        /* 럭키 찬스 게임 버튼 */
        .qa-game-btn { border-color: #f59e0b !important; color: #f59e0b !important; }
        .qa-game-btn:hover { background: #f59e0b !important; color: white !important; }
        .qa-game-btn.qa-game-upgrade { border-color: #10b981 !important; color: #10b981 !important; animation: qa-pulse 1.5s infinite; }
        .qa-game-btn.qa-game-final { border-color: #f59e0b !important; color: #f59e0b !important; animation: qa-pulse 1s infinite; font-weight: 700; }
        .qa-game-btn.qa-game-done { border-color: var(--c-border) !important; color: var(--text-tertiary) !important; opacity: 0.7; cursor: default; animation: none; }
        @keyframes qa-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
        @media (max-width: 600px) {
            .quick-action-bar { padding: 5px var(--space-sm); justify-content: flex-end; position: relative; }
            .quick-action-bar.expanded .quick-action-items {
                position: absolute;
                bottom: 100%;
                right: 8px;
                flex-direction: column;
                gap: 6px;
                padding: 10px;
                padding-top: 36px;
                background: #fff3e0;
                border-radius: 14px;
                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
                border: 1px solid var(--c-border);
                min-width: 170px;
                width: auto;
                z-index: 10;
                animation: qaSlideUp 0.2s ease-out;
            }
            @keyframes qaSlideUp {
                from { opacity: 0; transform: translateY(10px); }
                to   { opacity: 1; transform: translateY(0); }
            }
            .quick-action-bar.expanded .quick-action-items .quick-action-btn {
                width: 100%;
                justify-content: flex-start;
                white-space: nowrap;
            }
            .quick-action-btn { padding: 6px 10px; gap: 3px; position: relative; }
            .qa-game-label { display: inline; }
            .qa-game-btn { padding: 6px 10px; }
            .quick-action-close { width: 28px; height: 28px; position: absolute; top: 4px; right: 4px; z-index: 11; background: white; border: 1px solid var(--c-border); }
            .quick-action-toggle { position: relative; }
            .quick-action-bar.expanded .quick-action-toggle { display: inline-flex; }
            .quick-action-toggle::before,
            .quick-action-btn::before,
            .quick-action-close::before {
                content: '';
                position: absolute;
                top: -8px;
                bottom: -8px;
                left: -2px;
                right: -2px;
            }
        }

        .suggestions {
            padding: var(--space-sm) var(--space-lg);
            display: flex;
            gap: var(--space-sm);
            flex-wrap: wrap;   /* 넘치면 다음 줄로 — 옆으로 밀리지 않게 (2026-09-26 대표 「처음 로딩 시 좌우 스크롤이 생겨」 · 단추는 줄지 않음 = 글자 안 잘림) */
            background: white;
            border-top: 1px solid var(--c-border);
        }

        .suggestion-btn {
            padding: var(--pad-chip);
            background: white;
            border: 1px solid var(--c-primary);
            color: var(--c-primary);
            border-radius: var(--radius-pill);
            font-size: var(--fs-sub);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;   /* 줄어들지 않고 줄이 옆으로 밀리게 (2026-09-22 대표 「버튼 글자 잘림도 고쳐」) — 넘친 글자 숨기기 때문에 폭이 모자라면 버튼이 줄어 「좋0」처럼 잘렸다(아이폰 13 세 개 다) */
        }

        .suggestion-btn:hover {
            background: var(--c-primary);
            color: white;
        }

        /* 이탈 대응 문구를 본답 말풍선에 합칠 때 사이 구분선 (2026-09-07 · 02 플랜 v1.2) */
        .retention-divider {
            border: 0;
            border-top: 1px dashed #e2e8f0;
            margin: 10px 0 8px;
        }
        /* 전환 액션 버튼 */
        .action-buttons-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed #e2e8f0;
        }
        .action-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: var(--pad-btn);
            background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
            color: white;
            border: none;
            border-radius: var(--radius-pill);
            font-size: var(--fs-sub);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(107,159,231,0.35);
        }
        .action-btn:active {
            transform: translateY(0);
        }
        .action-btn .action-icon {
            font-size: var(--fs-sub);
        }
        .action-btn.negative {
            background: linear-gradient(135deg, #e91e63, #c2185b);
        }
        .action-btn.negative:hover {
            box-shadow: 0 3px 8px rgba(233,30,99,0.35);
        }
        .action-btn.positive {
            background: linear-gradient(135deg, #4caf50, #388e3c);
        }
        .action-btn.positive:hover {
            box-shadow: 0 3px 8px rgba(76,175,80,0.35);
        }
        .action-btn.urgent {
            background: linear-gradient(135deg, #f44336, #d32f2f);
            animation: urgentPulse 1.5s ease-in-out infinite;
        }
        .action-btn.urgent:hover {
            box-shadow: 0 3px 8px rgba(244,67,54,0.35);
        }
        @keyframes urgentPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(244,67,54,0.4); }
            50% { box-shadow: 0 0 0 8px rgba(244,67,54,0); }
        }
        /* 룰렛 CTA 전용 스타일 */
        .action-btn.game-cta {
            background: linear-gradient(135deg, #ff6f00, #ff9800);
            box-shadow: 0 3px 12px rgba(255, 111, 0, 0.4);
            font-size: var(--fs-sub);
            padding: var(--pad-btn);
            animation: gameCTAPulse 2s ease-in-out infinite;
            margin: 0 auto;
        }
        .action-btn.game-cta:hover {
            box-shadow: 0 4px 16px rgba(255, 111, 0, 0.5);
            transform: translateY(-2px);
        }
        .action-btn.game-cta .action-icon { font-size: var(--fs-subtitle); }
        @keyframes gameCTAPulse {
            0%, 100% { box-shadow: 0 3px 12px rgba(255, 111, 0, 0.4); }
            50% { box-shadow: 0 3px 20px rgba(255, 111, 0, 0.6); transform: translateY(-1px); }
        }
        /* 룰렛 CTA 골드 하이라이트 */
        .message.bot.roulette-highlight .message-bubble {
            border: 1.5px solid #ffd54f;
            box-shadow: 0 0 12px rgba(255, 193, 7, 0.3);
            animation: highlightGlow 2s ease-in-out;
            max-width: 100%;
            width: 100%;
        }
        @keyframes highlightGlow {
            0% { box-shadow: 0 0 0 rgba(255, 193, 7, 0); }
            30% { box-shadow: 0 0 16px rgba(255, 193, 7, 0.5); }
            100% { box-shadow: 0 0 12px rgba(255, 193, 7, 0.3); }
        }
        /* 룰렛 CTA 축하 파티클 */
        .roulette-celeb-particle {
            position: absolute;
            bottom: 80px;
            width: 8px; height: 8px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 20;
            animation: rouletteCelebRise 2s ease-out forwards;
        }
        @keyframes rouletteCelebRise {
            0% { opacity: 1; transform: translateY(0) scale(1); }
            50% { opacity: 0.8; transform: translateY(-60px) scale(1.2); }
            100% { opacity: 0; transform: translateY(-120px) scale(0.3); }
        }
        .product-card {
            background: white;
            border-radius: var(--radius-md);
            padding: var(--space-md);
            margin: var(--space-sm) 0;
            box-shadow: var(--shadow-card);
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .product-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }

        .product-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: var(--space-sm);
        }

        .product-name {
            font-weight: bold;
            color: var(--c-text);
        }

        .product-badge {
            background: #ff6b6b;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: var(--fs-tiny);
        }

        .product-details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: var(--space-sm);
        }

        .product-speed {
            color: #666;
            font-size: var(--fs-sub);
        }

        .product-price {
            font-size: var(--fs-subtitle);
            font-weight: bold;
            color: var(--c-primary);
        }

        .product-discount {
            color: var(--c-accent);
            font-size: var(--fs-small);
            margin-top: 4px;
        }

        /* ========== 입력 영역 ========== */
        .chat-input-container {
            padding: var(--space-md) var(--space-lg);
            background: white;
            border-top: 1px solid var(--c-border);
            display: flex;
            align-items: flex-end;
            gap: var(--space-sm);
            flex-shrink: 0;   /* 🆕11-02 [긴급] 질문 칸은 안 줄고 안 밀림 · 자리가 모자라면 머리·혜택 띠가 줄어듦(아래 has-app-h 구획) */
        }

        .chat-input {
            flex: 1;
            padding: var(--pad-input);
            border: 1.5px solid #ddd;
            border-radius: 24px;
            font-size: var(--fs-input);
            line-height: var(--lh-relaxed);
            outline: none;
            transition: all 0.2s ease;
            min-height: var(--height-input);
        }

        .chat-input:focus {
            border-color: var(--c-primary);
            box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
        }

        .send-button {
            width: var(--height-send-btn);
            height: var(--height-send-btn);
            border-radius: 50%;
            background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
            border: none;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease;
        }

        .send-button:hover {
            transform: scale(1.1);
        }

        .send-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* ========== 플로팅 버튼 (WordPress 임베드용) ========== */
        .floating-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            transition: transform 0.3s ease;
        }

        .floating-button:hover {
            transform: scale(1.1);
        }

        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ff6b6b;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--fs-small);
            font-weight: bold;
        }

        /* ========== 콜백 폼 ========== */
        .callback-form-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .callback-form-overlay.active {
            display: flex;
        }

        .callback-form {
            background: white;
            border-radius: var(--radius-lg);
            padding: 28px 24px 20px;
            width: 90%;
            max-width: 380px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .callback-form-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .callback-form-header .icon-circle {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #e8edff 0%, #d6e0ff 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-size: 26px;
        }

        .callback-form-header h3 {
            color: var(--c-text);
            margin: 0 0 4px;
            font-size: 18px;
        }

        .callback-form-header .subtitle {
            color: var(--c-text-secondary);
            font-size: 13px;
        }

        .callback-form .form-group {
            margin-bottom: 14px;
        }

        .callback-form label {
            display: block;
            color: var(--c-text-secondary);
            font-size: 13px;
            margin-bottom: 6px;
            font-weight: 500;
        }

        .callback-form .input-wrapper {
            position: relative;
        }

        .callback-form .input-wrapper .input-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 16px;
            pointer-events: none;
            opacity: 0.5;
        }

        .callback-form .input-wrapper input,
        .callback-form .input-wrapper select {
            width: 100%;
            padding: 11px 12px 11px 38px;
            border: 1.5px solid #e2e8f0;
            border-radius: var(--radius-sm);
            font-size: 15px;
            transition: border-color 0.2s, box-shadow 0.2s;
            background: #fafbfc;
        }
        .callback-form .input-wrapper input::placeholder {
            color: #c0c8d4;
        }

        .callback-form .input-wrapper input:focus,
        .callback-form .input-wrapper select:focus {
            outline: none;
            border-color: var(--c-primary);
            box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
            background: #fff;
        }

        .callback-form .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 18px;
        }

        .callback-form button {
            flex: 1;
            padding: 13px 16px;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .callback-form .btn-submit {
            background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .callback-form .btn-submit:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102,126,234,0.4);
        }

        .callback-form .btn-submit:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        .callback-form .btn-submit .btn-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .callback-form .btn-cancel {
            background: #f0f2f5;
            color: #666;
        }

        .callback-form .btn-cancel:hover {
            background: #e4e6ea;
        }

        /* 인라인 에러 */
        .callback-form .form-error {
            font-size: 12px;
            color: #e53e3e;
            margin-top: 4px;
            padding-left: 4px;
            display: none;
            animation: errorShake 0.3s ease;
        }
        .callback-form .form-error.visible { display: block; }
        .callback-form .form-error::before { content: '⚠ '; }
        @keyframes errorShake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-4px); }
            75% { transform: translateX(4px); }
        }
        .callback-form .input-wrapper.has-error input,
        .callback-form .input-wrapper.has-error select {
            border-color: #e53e3e;
        }

        .callback-form .privacy-notice {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid #f0f2f5;
            font-size: 11px;
            color: #94a3b8;
            line-height: 1.4;
        }
        .privacy-checkbox-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            font-size: 12px;
            color: #555;
            line-height: 1;
            vertical-align: middle;
        }
        .privacy-checkbox {
            width: 14px; height: 14px;
            accent-color: var(--c-primary);
            cursor: pointer;
            flex-shrink: 0;
            margin: 0;
            vertical-align: middle;
        }
        .privacy-view-btn {
            display: inline-block;
            margin-left: 4px;
            padding: 2px 8px;
            background: #f0f2f5;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-size: 10px;
            color: #666;
            cursor: pointer;
            white-space: nowrap;
        }
        .privacy-view-btn:hover { background: #e4e6ea; }
        .privacy-detail-content {
            display: none;
            margin-top: 8px;
            padding: 10px 12px;
            background: #f8f9fa;
            border-radius: 8px;
            font-size: 11px;
            color: #555;
            line-height: 1.6;
        }
        .privacy-detail-content.visible { display: block; }


        /* ========== 가이드 플로우 스타일 ========== */

        /* 환영 액션 카드 (2x2 그리드) */
        .welcome-actions {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--space-sm);
            margin-top: 150px;
        }
        .welcome-actions-cards {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            gap: var(--space-sm);
        }
        .welcome-actions-cards .action-card {
            width: 170px;
            justify-content: center;
        }

        .action-card {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            min-height: 44px;
            background: white;
            border: 1.5px solid var(--c-border);
            border-radius: var(--radius-md);
            font-size: var(--fs-sub);
            font-weight: 600;
            color: var(--c-text);
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            animation: cardEntrance 0.3s ease backwards;
        }

        .action-card:nth-child(1) { animation-delay: 0ms; }
        .action-card:nth-child(2) { animation-delay: 80ms; }
        .action-card:nth-child(3) { animation-delay: 160ms; }
        .action-card:nth-child(4) { animation-delay: 240ms; }

        .action-card:hover {
            border-color: var(--c-primary);
            background: #fff3e0;
            box-shadow: var(--shadow-hover);
        }

        .action-card:active {
            transform: scale(0.97);
        }
        .action-card.clicked {
            border-color: var(--c-primary);
            background: linear-gradient(135deg, rgba(245,124,0,0.12) 0%, rgba(245,124,0,0.06) 100%);
            color: var(--c-primary);
            box-shadow: 0 0 0 2px rgba(245,124,0,0.2);
        }

        .action-card .card-icon {
            font-size: var(--fs-num);
            flex-shrink: 0;
        }

        /* 가이드 버튼 그룹 (flex-wrap 줄바꿈) */
        .guide-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-sm);
            padding-top: 6px;
        }

        .guide-btn {
            padding: 10px 14px;
            min-height: 40px;
            background: white;
            border: 1.5px solid var(--c-primary);
            color: var(--c-primary);
            border-radius: 22px;
            font-size: var(--fs-sub);
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            position: relative;
            overflow: visible;
            animation: cardEntrance 0.3s ease backwards;
        }

        .guide-btn:nth-child(1) { animation-delay: 0ms; }
        .guide-btn:nth-child(2) { animation-delay: 80ms; }
        .guide-btn:nth-child(3) { animation-delay: 160ms; }
        .guide-btn:nth-child(4) { animation-delay: 240ms; }
        .guide-btn:nth-child(5) { animation-delay: 320ms; }
        .guide-btn:nth-child(6) { animation-delay: 400ms; }

        .guide-btn:hover {
            background: var(--c-primary);
            color: white;
        }

        .guide-btn:active {
            transform: scale(0.97);
            opacity: 0.8;
        }

        .guide-btn .btn-icon {
            margin-right: 4px;
        }

        .btn-badge {
            position: absolute; top: -6px; right: -4px;
            background: var(--c-primary); color: white;
            font-size: var(--fs-tiny); font-weight: 700;
            padding: 1px 6px; border-radius: 8px;
            line-height: 1.4;
        }
        .btn-badge-region { background: #ff9800; }
        .btn-badge-recommend { background: #e53935; }

        /* 상품 비교 카드 → 세로 스택 */
        .comparison-cards {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
        }

        .comparison-card {
            position: relative;
            background: white;
            border-radius: var(--radius-md);
            padding: 0;
            box-shadow: var(--shadow-card);
            border: 1.5px solid var(--c-border);
            transition: all 0.25s ease;
            animation: cardEntrance 0.3s ease backwards;
            cursor: pointer;
            overflow: hidden;
        }

        .comparison-card:nth-child(1) { animation-delay: 0ms; }
        .comparison-card:nth-child(2) { animation-delay: 80ms; }
        .comparison-card:nth-child(3) { animation-delay: 160ms; }
        .comparison-card:nth-child(4) { animation-delay: 240ms; }

        .comparison-card:hover {
            border-color: var(--c-primary);
            box-shadow: var(--shadow-hover);
        }

        /* 통신사 브랜드 컬러 상단 바 */
        .comparison-card .card-brand-bar {
            height: 3px;
            background: var(--c-border);
        }
        .comparison-card[data-carrier="KT"] .card-brand-bar { background: #007AFF; }
        .comparison-card[data-carrier="LG"] .card-brand-bar { background: #E6007E; }
        .comparison-card[data-carrier="SK"] .card-brand-bar { background: #E4002B; }
        .comparison-card[data-carrier="SKT"] .card-brand-bar, .comparison-card[data-carrier="SKB"] .card-brand-bar { background: #E4002B; }   /* SKB = SK브로드밴드 통신사 코드(10-04 · 회색이던 것) */
        .comparison-card[data-carrier="SKPOP"] .card-brand-bar { background: #FF6B35; }

        .comparison-card .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px 8px;
        }

        .comparison-card .carrier-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .comparison-card .carrier-icon {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--fs-tiny);
            font-weight: 700;
            color: white;
            flex-shrink: 0;
            background: #999;
        }
        .comparison-card[data-carrier="KT"] .carrier-icon { background: #007AFF; }
        .comparison-card[data-carrier="LG"] .carrier-icon { background: #E6007E; }
        .comparison-card[data-carrier="SK"] .carrier-icon { background: #E4002B; }
        .comparison-card[data-carrier="SKT"] .carrier-icon, .comparison-card[data-carrier="SKB"] .carrier-icon { background: #E4002B; }
        .comparison-card[data-carrier="SKPOP"] .carrier-icon { background: #FF6B35; }

        .comparison-card .carrier-name {
            font-weight: 700;
            font-size: var(--fs-body);
            color: var(--c-text);
            line-height: 1.2;
        }

        .comparison-card .product-name-sub {
            font-size: var(--fs-small);
            color: var(--c-text-muted);
            font-weight: 400;
        }

        .comparison-card .speed-badge {
            background: var(--c-primary);
            color: white;
            padding: 2px 8px;
            border-radius: var(--radius-md);
            font-size: var(--fs-tiny);
            font-weight: 600;
            flex-shrink: 0;
        }

        .comparison-card .card-divider {
            height: 1px;
            background: #f0f0f0;
            margin: 0 12px;
        }

        .comparison-card .card-body {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px 10px;
        }

        .comparison-card .price-info .monthly {
            font-size: var(--fs-subtitle);
            font-weight: 700;
            color: var(--c-text);
        }

        .comparison-card .price-info .monthly small {
            font-size: var(--fs-tiny);
            font-weight: 400;
            color: var(--c-text-muted);
        }

        .comparison-card .benefit-info {
            text-align: right;
        }

        .comparison-card .benefit-info .benefit-label {
            font-size: var(--fs-tiny);
            color: var(--c-text-muted);
        }

        .comparison-card .benefit-info .benefit-amount {
            font-size: var(--fs-body);
            font-weight: 700;
            color: var(--c-accent);
        }

        /* CTA 바 (카드 하단) */
        .comparison-card .card-cta {
            padding: 9px 12px;
            text-align: center;
            font-size: var(--fs-sub);
            font-weight: 600;
            color: var(--c-primary);
            background: rgba(102, 126, 234, 0.06);
            transition: all 0.25s ease;
        }

        .comparison-card:hover .card-cta {
            background: rgba(102, 126, 234, 0.12);
        }

        /* 선택 상태 */
        .comparison-card.selected {
            border-color: var(--c-primary);
            border-width: 2px;
            background: rgba(102, 126, 234, 0.04);
        }

        .comparison-card.selected::after {
            content: '\2713';
            position: absolute;
            top: 8px;
            right: 8px;
            width: 22px;
            height: 22px;
            background: var(--c-primary);
            color: white;
            border-radius: 50%;
            font-size: var(--fs-small);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

        .comparison-card.selected .card-cta {
            background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
            color: white;
        }

        .comparison-card.dimmed {
            opacity: 0.45;
            pointer-events: none;
            transform: scale(0.98);
        }

        /* 추가 통신사 토글 */
        .extra-carriers-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px;
            margin-top: 4px;
            border: 1.5px dashed var(--c-border);
            border-radius: var(--radius-md);
            font-size: var(--fs-sub);
            color: var(--c-text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
            background: transparent;
            width: 100%;
        }

        .extra-carriers-toggle:hover {
            border-color: var(--c-primary);
            color: var(--c-primary);
            background: rgba(102, 126, 234, 0.04);
        }

        .extra-carriers-toggle .toggle-arrow {
            transition: transform 0.3s ease;
            font-size: var(--fs-tiny);
        }

        .extra-carriers-toggle.open .toggle-arrow {
            transform: rotate(180deg);
        }

        .extra-carriers-section {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease;
        }

        .extra-carriers-section.open {
            max-height: 600px;
        }

        .extra-carriers-section .comparison-card {
            margin-top: var(--space-sm);
        }

        /* 견적 카드 (컴팩트) */
        .quote-card {
            background: white;
            border-radius: var(--radius-md);
            padding: var(--space-lg);
            box-shadow: var(--shadow-card);
            border: 2px solid var(--c-primary);
            margin-top: var(--space-sm);
        }

        .quote-card .quote-title {
            font-size: var(--fs-subtitle);
            font-weight: 700;
            color: var(--c-text);
            margin-bottom: var(--space-md);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .quote-card .quote-items {
            border-top: 1px solid #eee;
            border-bottom: 2px solid var(--c-text);
            padding: var(--space-sm) 0;
        }

        .quote-card .quote-item {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            font-size: var(--fs-body);
            color: var(--c-text-secondary);
        }

        .quote-card .quote-item.discount {
            color: var(--c-danger);
        }

        .quote-card .quote-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-sm) var(--space-lg);
            margin: var(--space-sm) calc(-1 * var(--space-lg)) 0;
            font-size: var(--fs-subtitle);
            font-weight: 700;
            color: var(--c-primary);
            background: linear-gradient(135deg, rgba(102,126,234,0.06) 0%, rgba(118,75,162,0.06) 100%);
        }

        .quote-card .quote-benefit {
            background: #f0fdf4;
            border-radius: var(--radius-sm);
            padding: var(--space-sm) var(--space-md);
            margin-top: var(--space-sm);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .quote-card .quote-benefit .label {
            font-size: var(--fs-sub);
            color: #16a34a;
            font-weight: 600;
        }

        .quote-card .quote-benefit .amount {
            font-size: var(--fs-body);
            font-weight: 700;
            color: #16a34a;
        }

        .quote-card .quote-actions {
            display: flex;
            flex-wrap: wrap;              /* 좁은 화면에서 [📞 상담 예약]이 69px 잘려 안 보이던 것 — 위험 대장 ㄹ10 (2026-09-01 · 480px 이상은 종전대로 한 줄) */
            gap: var(--space-sm);
            margin-top: var(--space-md);
        }

        .quote-card .quote-actions button {
            flex: 1;
            padding: 10px 16px;
            border-radius: var(--radius-sm);
            font-size: var(--fs-body);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            overflow: visible;
            white-space: nowrap;          /* 가입 버튼 줄바꿈 차단 (2026-05-31) */
        }

        .quote-card .btn-callback {
            background: #fff3e0;
            color: var(--c-primary);
            border: 1px solid #ffe0b2;
        }

        .quote-card .btn-callback:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(245,124,0,0.2);
        }

        .quote-card .btn-callback:active {
            transform: scale(0.97);
        }

        .quote-card .btn-application {
            flex: 2;                      /* 가장 중요한 버튼 — 가장 넓게 (2026-05-31) */
            background: #16a34a;          /* 가입 강조: 진한 초록 채움 */
            color: #fff;
            border: 1px solid #16a34a;
        }

        .quote-card .btn-application:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(22,163,74,0.2);
        }

        .quote-card .btn-application:active {
            transform: scale(0.97);
        }

        .quote-card .btn-restart {
            background: #f0f0f0;
            color: #666;
        }

        .quote-card .btn-restart:hover {
            background: #e0e0e0;
        }

        .quote-card .btn-restart:active {
            transform: scale(0.97);
        }

        /* 보조 버튼(처음부터·상담)은 좁게 — 가입 버튼 강조 (2026-05-31) */
        .quote-card .btn-restart,
        .quote-card .btn-callback {
            padding-left: 8px;
            padding-right: 8px;
        }
        /* 🆕10-12 글자 크기 P5-2 ⓐ = 처음부터·상담 예약은 보조(한 단계 작게) — 위 규칙은 .quote-actions button(0,2,1)에 밀려 13이 안 먹고 14로 보였음 · 여백(8px)은 그대로 두고 글자 크기만 좁힌 선택자로 */
        .quote-card .quote-actions .btn-restart,
        .quote-card .quote-actions .btn-callback { font-size: var(--fs-sub); }

        /* 가입 전용 추가 혜택 노란 박스 — 사은품과 별도 강조 (2026-05-31) */
        .quote-card .quote-signup-bonus {
            margin: 10px 0 2px;
            padding: 10px 12px;
            background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
            border: 2px solid #ffc107;
            border-radius: 10px;
            box-shadow: 0 2px 6px rgba(255, 193, 7, 0.15);
        }
        .quote-card .quote-signup-bonus .qsb-title {
            font-size: var(--fs-sub);
            font-weight: 700;
            color: #b45309;
        }
        .quote-card .quote-signup-bonus .qsb-desc {
            margin-top: 3px;
            font-size: var(--fs-small);
            color: #92651a;
            line-height: 1.45;
        }

        /* ========== 자유 대화 견적 카드 컨테이너 ========== */
        .quote-card-container {
            padding: 8px 16px;
            animation: promoSlideIn 0.4s ease-out;
        }
        .quote-card-container.quote-card-fadeout {
            animation: promoFadeOut 0.3s ease-in forwards;
        }
        .quote-card-container .quote-card {
            position: relative;
        }
        .quote-card-container .quote-card-dismiss {
            position: absolute;
            top: 8px;
            right: 8px;
            background: none;
            border: none;
            font-size: var(--fs-num);
            color: #999;
            cursor: pointer;
            padding: 4px 8px;
            line-height: 1;
            z-index: 1;
        }
        .quote-card-container .quote-card-dismiss:hover {
            color: #333;
        }

        /* ========== 다른 통신사로 옮기기 카드 (switch_card) ========== */
        .switch-card-container {
            padding: 8px 16px;
            animation: promoSlideIn 0.4s ease-out;
            overflow: hidden;
        }
        .switch-card-container.switch-card-fadeout {
            animation: promoFadeOut 0.3s ease-in forwards;
        }
        .switch-card {
            background: #fff8f0;
            border-radius: var(--radius-md);
            padding: var(--space-lg);
            box-shadow: var(--shadow-card);
            border: 2px solid #e65100;
            position: relative;
        }
        .switch-card .switch-title {
            font-size: 16px;
            font-weight: 700;
            color: #bf360c;
            margin-bottom: var(--space-md);
        }
        .switch-toggle {
            display: flex; gap: 4px; margin-bottom: 12px;
            background: #fce4cc; border-radius: 8px; padding: 3px;
        }
        .switch-toggle-btn {
            flex: 1; padding: 6px 12px; border: none; border-radius: 6px;
            font-size: 13px; font-weight: 600; cursor: pointer;
            background: transparent; color: #999; transition: all 0.2s;
        }
        .switch-toggle-btn.active {
            background: white; color: #e65100;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }
        .switch-card .switch-dismiss {
            position: absolute;
            top: 8px;
            right: 8px;
            background: none;
            border: none;
            font-size: 20px;
            color: #999;
            cursor: pointer;
            padding: 4px 8px;
            line-height: 1;
        }
        .switch-card .switch-dismiss:hover {
            color: #333;
        }
        .switch-comparisons {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: var(--space-md);
        }
        .switch-row {
            display: flex;
            align-items: center;
            background: white;
            border-radius: var(--radius-sm);
            padding: 10px 12px;
            border: 1px solid #ffe0b2;
            gap: 8px;
        }
        .switch-row.is-current {
            opacity: 0.5;
            border-style: dashed;
        }
        .switch-row.is-best {
            border-color: #e65100;
            border-width: 2px;
            background: #fff3e0;
        }
        .switch-row .carrier-name {
            font-weight: 700;
            font-size: 14px;
            color: var(--c-text);
            min-width: 80px;
        }
        .switch-row .carrier-detail {
            flex: 1;
            font-size: 13px;
            color: var(--c-text-secondary);
        }
        .switch-row .carrier-benefit {
            font-weight: 700;
            font-size: 14px;
            color: #e65100;
            white-space: nowrap;
        }
        .switch-row .extra-alpha {
            color: #d32f2f;
            font-size: 13px;
            font-weight: 800;
            margin-left: 2px;
        }
        .switch-row .best-badge {
            font-size: 12px;
            margin-right: 2px;
        }
        .switch-row .current-badge {
            font-size: 11px;
            color: #999;
            font-weight: 400;
        }
        .switch-highlight {
            background: #fff3e0;
            border-radius: var(--radius-sm);
            padding: var(--space-sm) var(--space-md);
            margin-bottom: var(--space-md);
            font-size: 13px;
            color: #bf360c;
            line-height: 1.5;
        }
        .switch-highlight strong {
            font-weight: 700;
        }
        .switch-actions {
            display: flex;
            gap: var(--space-sm);
        }
        .switch-actions button {
            flex: 1;
            padding: 10px 16px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
        }
        .switch-actions .btn-switch-callback {
            background: linear-gradient(135deg, #e65100 0%, #bf360c 100%);
            color: white;
        }
        .switch-actions .btn-switch-callback:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(230,81,0,0.4);
        }
        .switch-actions .btn-switch-callback:active {
            transform: scale(0.97);
        }
        .switch-actions .btn-switch-compare {
            background: #f0f0f0;
            color: #666;
        }
        .switch-actions .btn-switch-compare:hover {
            background: #e0e0e0;
        }
        .switch-actions .btn-switch-compare:active {
            transform: scale(0.97);
        }

        /* ========== 시뮬레이터 카드 (simulator_card) ========== */
        .simulator-card-container {
            padding: 8px 16px;
            animation: promoSlideIn 0.4s ease-out;
            overflow: hidden;
        }
        .simulator-card-container.simulator-card-fadeout {
            animation: promoFadeOut 0.3s ease-in forwards;
        }
        .simulator-card {
            background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
            border-radius: var(--radius-md);
            padding: var(--space-lg);
            box-shadow: var(--shadow-card);
            border: 2px solid #2e7d32;
            position: relative;
        }
        .simulator-card .sim-title {
            font-size: 16px;
            font-weight: 700;
            color: #1b5e20;
            margin-bottom: 4px;
        }
        .simulator-card .sim-subtitle {
            font-size: 12px;
            color: #558b2f;
            margin-bottom: var(--space-md);
        }
        .simulator-card .sim-dismiss {
            position: absolute; top: 8px; right: 8px;
            background: none; border: none; font-size: 20px;
            color: #999; cursor: pointer; padding: 4px 8px; line-height: 1;
        }
        .simulator-card .sim-dismiss:hover { color: #333; }
        .sim-current-info {
            background: rgba(255,255,255,0.7);
            border-radius: var(--radius-sm);
            padding: 8px 12px;
            margin-bottom: var(--space-md);
            font-size: 13px;
            color: #555;
            display: flex; align-items: center; gap: 8px;
        }
        .sim-current-info .sim-current-label { font-weight: 600; color: #333; }
        .sim-comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: var(--space-md);
            font-size: 13px;
        }
        .sim-comparison-table th {
            background: #c8e6c9;
            color: #1b5e20;
            padding: 8px 10px;
            text-align: left;
            font-weight: 600;
            font-size: 12px;
        }
        .sim-comparison-table td {
            padding: 8px 10px;
            background: white;
            border-bottom: 1px solid #e8f5e9;
        }
        .sim-comparison-table tr.sim-recommended td {
            background: #f1f8e9;
            font-weight: 600;
        }
        .sim-comparison-table .sim-badge {
            display: inline-block;
            background: #2e7d32;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 4px;
            font-weight: 700;
        }
        .sim-benefit-amount {
            color: #e65100;
            font-weight: 700;
        }
        .sim-saving-positive {
            color: #2e7d32;
            font-weight: 600;
        }
        .sim-penalty-info {
            background: #fff8e1;
            border: 1px solid #ffecb3;
            border-radius: var(--radius-sm);
            padding: 10px 12px;
            margin-bottom: var(--space-md);
            font-size: 12px;
            color: #795548;
            line-height: 1.5;
        }
        .sim-penalty-info strong { color: #e65100; }
        .sim-highlight {
            background: #e8f5e9;
            border-radius: var(--radius-sm);
            padding: var(--space-sm) var(--space-md);
            margin-bottom: var(--space-md);
            font-size: 13px;
            color: #1b5e20;
            line-height: 1.5;
            text-align: center;
        }
        .sim-highlight strong { font-weight: 700; }
        .sim-actions {
            display: flex;
            gap: var(--space-sm);
            margin-top: 4px;
            padding-top: var(--space-sm);
            border-top: 1px dashed #c8e6c9;
        }
        .sim-actions button {
            flex: 1;
            padding: 12px 16px;
            border-radius: 24px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            letter-spacing: 0.3px;
        }
        .sim-actions .btn-sim-callback {
            background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(46,125,50,0.3);
        }
        .sim-actions .btn-sim-callback:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(46,125,50,0.4);
        }
        .sim-actions .btn-sim-callback:active { transform: scale(0.97); }
        .sim-actions .btn-sim-compare {
            background: white; color: #2e7d32;
            border: 1.5px solid #2e7d32;
        }
        .sim-actions .btn-sim-compare:hover { background: #e8f5e9; }
        .sim-actions .btn-sim-compare:active { transform: scale(0.97); }

        /* 드롭다운 선택기 */
        .dropdown-selector-container {
            padding: 8px 16px;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .dropdown-unknown-btn {
            padding: 10px 16px;
            background: white;
            color: var(--c-primary);
            border: 1.5px solid var(--c-primary);
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s ease;
        }
        .dropdown-unknown-btn:hover:not(:disabled) {
            background: var(--c-primary);
            color: white;
        }
        .dropdown-unknown-btn:disabled {
            background: #f0f0f0;
            color: #999;
            border-color: #ccc;
            cursor: not-allowed;
        }
        .dropdown-selector {
            flex: 1;
            padding: 10px 12px;
            border: 1.5px solid var(--c-primary);
            border-radius: var(--radius-sm);
            font-size: 13px;
            color: #333;
            background: white;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%236b9fe7'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 32px;
        }
        .dropdown-selector:focus {
            outline: none;
            border-color: var(--c-primary-dark);
            box-shadow: 0 0 0 3px rgba(107,159,231,0.15);
        }

        /* ========== 리텐션 카드 (retention_card) ========== */
        .retention-card-container { padding: 8px 16px; animation: promoSlideIn 0.4s ease-out; overflow: hidden; }
        .retention-card-container.retention-card-fadeout { animation: promoFadeOut 0.3s ease-in forwards; }
        .retention-card {
            background: linear-gradient(135deg, #fff3e0, #fce4ec);
            border-radius: 12px; padding: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            border: 2px solid #ff7043; position: relative;
        }
        .retention-card .retention-title { font-size: 16px; font-weight: 700; color: #d84315; margin-bottom: 4px; }
        .retention-card .retention-subtitle { font-size: 13px; color: #666; margin-bottom: 12px; }
        .retention-offer {
            display: flex; align-items: center; background: white;
            border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
            border: 1px solid #ffccbc; cursor: pointer; transition: all 0.2s;
        }
        .retention-offer:hover { border-color: #ff7043; box-shadow: 0 2px 8px rgba(255,112,67,0.15); }
        .retention-offer-icon { font-size: 24px; margin-right: 10px; flex-shrink: 0; }
        .retention-offer-content { flex: 1; }
        .retention-offer-title { font-weight: 600; font-size: 14px; color: #333; }
        .retention-offer-desc { font-size: 12px; color: #777; margin-top: 2px; }
        .retention-offer-btn {
            background: #ff7043; color: white; border: none; border-radius: 6px;
            padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
        }
        .retention-offer-btn:hover { background: #f4511e; }
        .retention-dismiss {
            position: absolute; top: 8px; right: 8px;
            background: none; border: none; font-size: 20px;
            color: #999; cursor: pointer; padding: 4px 8px; line-height: 1;
        }
        .retention-dismiss:hover { color: #333; }

        /* ========== 처음으로 링크 ========== */
        .guide-restart-link { text-align: center; margin-top: 8px; }
        .guide-restart-btn {
            background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.1);
            border-radius: 16px; color: #888; font-size: var(--fs-small);
            padding: 6px 14px; cursor: pointer; transition: all 0.15s;
        }
        .guide-restart-btn:hover {
            background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.2); color: #555;
        }

        /* ========== 비교 결과 = 통신사 줄카드 (2026-08-26 대표 확정 시안 ③ · 옛 3열 격자에서 바꿈) ========== */

        /* 한 줄 = 한 통신사 (통신사가 2곳이든 5곳이든 줄만 늘어 빈 칸이 안 생김) */
        .compare-grid {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        /* 🔴 비교 결과를 답변 카드처럼 통째로 감싼다 (2026-09-01 · 대표님 지적)
           대표님 말씀 그대로 = 「'KT 요금은?' 의 답변 카드처럼 테두리가 내용을 감싸지 못해」
           · 값은 그 답변 카드(.answer-card 5510줄)와 같게 맞춤 — 화면 안에서 두 카드가 같은 결로 보이게
           · 감싸는 자리가 통신사 줄(.compare-grid)이 아니라 이 감싸개여야 안내 글·필터 칩·정렬 칩·
             요약·가입 단추까지 한 카드에 들어온다
           · .guide-container 는 안내 화면 여섯 곳이 함께 쓰므로 compare-result 가 붙은 것만 고름 */
        .guide-container.compare-result {
            background: #fff;
            border: 1px solid #e4e6ea;
            border-radius: 16px;
            padding: 14px 12px;
            margin: 4px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,.06);
        }

        /* 비교 컬럼 (각 통신사) = 가로 한 줄 */
        .compare-column {
            position: relative;
            background: white;
            border-radius: var(--radius-md);
            border: 1.5px solid var(--c-border);
            overflow: hidden;
            cursor: pointer;
            transition: all 0.25s ease;
            animation: cardEntrance 0.3s ease backwards;
            display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 0;
            flex-wrap: wrap; /* 아랫줄 「이 상품으로 가입 신청 →」·카드 안 단추 묶음이 한 줄을 통째로 쓰게 (2026-09-06 안 B) */
        }
        .compare-column.sel { border: 2px solid #1db954; background: #f7fdf9; }
        .compare-column .col-divider { display: none; }
        /* 🔴카드 아랫줄 글자 = 안 고른 카드에만 「이 상품으로 가입 신청 →」 · 고른 카드는 그 자리에 단추 묶음(.compare-inb) (2026-09-06 대표 결정 안 B) */
        .compare-column .col-cta { flex: 1 1 100%; margin-left: 12px; border-radius: 8px; }
        .compare-column.sel .col-cta, .rec-card.sel .rec-cta { display: none; }
        .compare-column .compare-inb { flex: 1 1 100%; margin-left: 12px; }

        .compare-column:nth-child(1) { animation-delay: 0ms; }
        .compare-column:nth-child(2) { animation-delay: 80ms; }
        .compare-column:nth-child(3) { animation-delay: 160ms; }

        .compare-column:hover {
            border-color: var(--c-primary);
            box-shadow: var(--shadow-hover);
        }

        /* 통신사 색 띠 = 줄 왼쪽 세로로 */
        .compare-column .col-brand-bar { width: 4px; align-self: stretch; background: var(--c-border); flex: 0 0 auto; }
        .compare-column[data-carrier="KT"] .col-brand-bar { background: #007AFF; }
        .compare-column[data-carrier="LG"] .col-brand-bar { background: #E6007E; }
        .compare-column[data-carrier="SK"] .col-brand-bar,
        .compare-column[data-carrier="SKT"] .col-brand-bar, .compare-column[data-carrier="SKB"] .col-brand-bar { background: #E4002B; }   /* SKB = SK브로드밴드 통신사 코드(10-04 · 회색이던 것) */
        .compare-column[data-carrier="SKPOP"] .col-brand-bar { background: #FF6B35; }

        .compare-column .col-header { padding: 0; text-align: left; display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
        .compare-column .col-header > div:last-child { min-width: 0; flex: 1 1 auto; }

        .compare-column .col-carrier-icon {
            width: 28px; height: 28px; border-radius: 8px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: var(--fs-tiny); font-weight: 700; color: white; background: #999; flex: 0 0 auto;
        }
        .compare-column[data-carrier="KT"] .col-carrier-icon { background: #007AFF; }
        .compare-column[data-carrier="LG"] .col-carrier-icon { background: #E6007E; }
        .compare-column[data-carrier="SK"] .col-carrier-icon,
        .compare-column[data-carrier="SKT"] .col-carrier-icon, .compare-column[data-carrier="SKB"] .col-carrier-icon { background: #E4002B; }
        .compare-column[data-carrier="SKPOP"] .col-carrier-icon { background: #FF6B35; }

        .compare-column .col-carrier-name { font-size: var(--fs-sub); font-weight: 800; color: var(--c-text); }
        .compare-column .col-product-name { font-size: var(--fs-small); font-weight: 500; color: var(--c-text-muted); margin-top: 1px; }
        .compare-column .col-tv-info { font-size: var(--fs-small); color: #888; margin-top: 1px; }
        .compare-column .col-mobile-discount { display: none; }
        .compare-column .col-price-before { font-size: var(--fs-tiny); color: #999; text-decoration: line-through; }
        .compare-column .col-phone-badge {
            display: inline-block; font-size: var(--fs-tiny); font-weight: 700;
            color: #e74c3c; background: rgba(231,76,60,0.08);
            padding: 1px 6px; border-radius: 5px; margin-left: 4px;
            vertical-align: middle;
        }
        .compare-column .col-benefit-sub {
            font-size: var(--fs-tiny); color: #aaa; margin-top: 2px; min-height: 13px;
        }

        /* 딥링크 뒤로가기 버튼 */
        .back-btn {
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: var(--fs-title);
            width: 36px;
            height: 36px;
            flex-shrink: 0;
            cursor: pointer;
            padding: 0;
            margin-right: 2px;
        }
        .back-btn.visible { display: flex; }
        .back-btn:hover { background: rgba(255,255,255,0.35); }

        /* 딥링크 PREFILL 컨텍스트 배너 */
        .prefill-context-banner {
            background: #f0f7ff;
            border-left: 3px solid #4a9af5;
            color: #2563a8;
            font-size: var(--fs-small);
            padding: 6px 12px;
            margin: 8px 12px 4px;
            border-radius: 4px;
        }

        .compare-column .col-divider {
            height: 1px;
            background: #f0f0f0;
            margin: 0 8px;
        }

        /* 줄 오른쪽 = 요금 칸 | 사은품 칸 (2열 · 각 칸은 위아래 두 줄) */
        .compare-column .col-body {
            padding: 0; flex: 0 0 auto; text-align: right;
            display: grid; grid-template-columns: auto auto; gap: 1px 10px; align-items: center;
        }
        .compare-column .col-price-before { grid-column: 1; grid-row: 1; }
        .compare-column .col-price { grid-column: 1; grid-row: 2; font-size: var(--fs-subtitle); font-weight: 800; color: var(--c-text); white-space: nowrap; }
        .compare-column.sel .col-price { color: #158f40; font-size: var(--fs-subtitle); }
        .compare-column .col-price small { font-size: var(--fs-tiny); font-weight: 400; color: var(--c-text-muted); }
        .compare-column .col-phone-badge { display: block; margin: 0 !important; }
        .compare-column .col-benefit-btn { grid-column: 2; grid-row: 1; margin-top: 0 !important; white-space: nowrap; }
        .compare-column .col-benefit-sub { grid-column: 2; grid-row: 2; white-space: nowrap; font-size: var(--fs-tiny); }
        .compare-column .col-benefit { font-size: var(--fs-small); font-weight: 600; color: var(--c-accent); }
        /* 왼쪽 = 통신사·상품명이 세로로 쪼개지지 않게 */
        .compare-column .col-carrier-name { white-space: nowrap; }
        .compare-column .col-product-name { white-space: normal; word-break: keep-all; }   /* 🔴 ㅅ10 = 한 줄로 묶으면 「기가슬…」로 잘려 손님이 어느 상품인지 못 읽음 (2026-09-01) */
        .compare-column > .col-badge { white-space: nowrap; }                              /* 🔴 ㅅ10 = 배지 묶음 밖에 붙는 배지가 「최대 사은 / 품」으로 접혔음 (같은 건) */
        .compare-column .col-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
        .compare-column .col-badges .col-badge { margin: 0; white-space: nowrap; }
        .compare-column .col-tv-info { display: inline; }

        .compare-column .col-cta {
            padding: 8px;
            text-align: center;
            font-size: var(--fs-body);
            font-weight: 600;
            color: var(--c-primary);
            background: rgba(102, 126, 234, 0.06);
            transition: all 0.25s ease;
        }

        .compare-column:hover .col-cta {
            background: rgba(102, 126, 234, 0.12);
        }

        /* 선택/dimmed 상태 */
        .compare-column.selected {
            border-color: var(--c-primary);
            border-width: 2px;
            background: rgba(102, 126, 234, 0.04);
        }

        .compare-column.selected .col-cta {
            background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
            color: white;
        }

        .compare-column.dimmed {
            opacity: 0.45;
            pointer-events: none;
            transform: scale(0.98);
        }

        /* 크로스 네비게이션 */
        .guide-cross-nav {
            text-align: center;
            font-size: var(--fs-small);
            color: #999;
            margin-top: 10px;
            padding: 8px 0;
        }

        .guide-cross-nav a {
            color: var(--c-primary);
            text-decoration: none;
            font-weight: 600;
        }

        /* 통신사 상세 안내 배너 */
        .compare-detail-nav {
            background: linear-gradient(135deg, #f8f9ff, #f0f4ff);
            border: 1.5px solid #dce3f5;
            border-radius: var(--radius-md);
            padding: 14px 12px;
            margin-top: 10px;
            text-align: center;
        }
        .compare-detail-nav .detail-nav-text {
            font-size: var(--fs-sub);
            font-weight: 700;
            color: var(--c-text);
            margin-bottom: 3px;
        }
        .compare-detail-nav .detail-nav-sub {
            font-size: var(--fs-small);
            color: var(--c-text-muted);
            margin-bottom: 10px;
            line-height: 1.5;
        }
        .detail-nav-buttons {
            display: flex;
            gap: 6px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .detail-carrier-btn {
            padding: 8px 14px;
            border: 1.5px solid var(--c-primary);
            border-radius: var(--radius-pill);
            background: white;
            color: var(--c-primary);
            font-size: var(--fs-small);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .detail-carrier-btn:hover {
            background: var(--c-primary);
            color: white;
        }

        /* 배지 */
        .col-badge, .card-badge {
            display: inline-block; font-size: var(--fs-tiny); font-weight: 700;
            padding: 2px 8px; border-radius: 4px; margin: 4px 8px 0;
        }
        .col-badge-cheapest, .card-badge-cheapest { background: #fff3e0; color: #e65100; }
        .col-badge-benefit, .card-badge-benefit { background: #e8f5e9; color: #2e7d32; }

        /* 사은품 버튼 배지 */
        .col-benefit-btn, .card-benefit-btn {
            display: inline-block;
            background: linear-gradient(135deg, #fff3e0, #ffe0b2);
            color: #e65100;
            font-size: var(--fs-small);
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
            margin-top: 6px;
            border: 1px solid #ffcc80;
        }

        /* 필터 버튼 바 */
        .compare-filter-bar {
            display: flex;
            gap: 6px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .compare-filter {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            border: 1.5px solid var(--c-border);
            border-radius: var(--radius-pill);
            background: white;
            font-size: var(--fs-small);
            font-weight: 600;
            color: var(--c-text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .compare-filter:hover {
            border-color: var(--c-primary);
            color: var(--c-primary);
        }

        .compare-filter.active {
            background: var(--c-primary);
            border-color: var(--c-primary);
            color: white;
        }

        /* 비교 안내 (guide-text-box 안) */
        .compare-hint-line {
            margin-top: 6px; padding-top: 6px;
            border-top: 1px dashed #e2e8f0;
            font-size: var(--fs-small); color: var(--c-primary); line-height: 1.4;
        }

        /* 줄카드 아래 = 정렬 칩 · 차이 블록 · 상담사 연결 (2026-08-26 시안 ③) · 🔴가입 신청·견적 단추는 고른 카드 안 .compare-inb (2026-09-06 대표 결정 안 B · 선택 요약 상자·「지금 가입 신청하기」 없앰) */
        .compare-sort-bar { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: #666; margin: 8px 0; }
        .compare-sort { border: 1px solid #c3cbd4; background: #fff; color: #667; border-radius: 14px; padding: 4px 10px; font-size: var(--fs-small); cursor: pointer; }
        .compare-sort.active { background: #eef1f5; font-weight: 800; }
        .compare-pick { font-size: var(--fs-small); color: #555; background: #f2fbf4; border: 1px solid #cfe9d6; border-radius: 8px; padding: 7px 9px; margin-top: 10px; line-height: 1.5; }
        .compare-pick b { color: #158f40; }
        .compare-pb { text-align: center; border: 1.5px solid #f0c060; background: linear-gradient(#fff8e8, #fffdf7); border-radius: 12px; padding: 10px 8px 9px; margin-top: 10px; }
        .compare-pb:empty { display: none; }
        .compare-pb .pb-l1 { font-size: var(--fs-small); color: #775; }
        .compare-pb .pb-l2 { font-size: var(--fs-num-xl); font-weight: 900; color: #c8531a; line-height: 1.25; }
        .compare-pb .pb-l3 { font-size: var(--fs-small); font-weight: 800; }
        .compare-pb .pb-l4 { font-size: var(--fs-tiny); color: #997; margin-top: 3px; line-height: 1.5; }
        .compare-why { display: flex; gap: 8px; margin-top: 8px; }
        .compare-why span { flex: 1; font-size: var(--fs-tiny); color: #555; background: #f7f8fa; border-radius: 8px; padding: 5px 7px; line-height: 1.45; text-align: center; }
        .compare-apply { display: block; width: 100%; background: #1db954; color: #fff; border: none; border-radius: 10px; padding: 12px 0; font-size: var(--fs-body); font-weight: 800; margin-top: 8px; cursor: pointer; }
        .compare-subs { display: flex; gap: 8px; margin-top: 8px; }
        .compare-sub { flex: 1; background: #fff; border: 1px solid #ccc; border-radius: 10px; padding: 8px 0; font-size: var(--fs-small); color: #666; cursor: pointer; }
        .compare-sub.sm { flex: 0 0 auto; padding: 8px 12px; }
        .compare-subs .compare-sub.sm:only-child { flex: 1; }
        /* 고른 카드 안 단추 묶음 = [✓ 이 상품으로 가입 신청] + [💰 견적 보기] + 안심 한 줄 (2026-09-06 안 B) */
        .compare-inb { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #cfe9d6; }
        .compare-inb .compare-apply { margin-top: 0; }
        .compare-inb .compare-sub { display: block; width: 100%; margin-top: 6px; }
        .compare-inb-note { font-size: var(--fs-tiny); color: #777; text-align: center; margin-top: 6px; line-height: 1.45; }
        .rec-card .compare-inb { grid-column: 1 / -1; grid-row: 8; margin-left: 0; } /* 추천 카드는 자기 안쪽 여백이 있어 줄카드용 왼쪽 여백을 뺀다 */
        /* 첫 카드 위 말풍선 = 늘 보임 · ✕로만 닫힘 (2026-09-06 대표 결정) */
        .compare-tip { position: relative; background: #1f2937; color: #fff; border-radius: 12px; padding: 9px 36px 9px 12px; font-size: var(--fs-small); line-height: 1.5; margin: 8px 0 10px; }
        .compare-tip::after { content: ''; position: absolute; left: 26px; bottom: -7px; border: 7px solid transparent; border-top-color: #1f2937; border-bottom: 0; }
        .compare-tip-x { position: absolute; right: 8px; top: 7px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; border: none; font-size: var(--fs-sub); line-height: 24px; padding: 0; cursor: pointer; }

        /* 휴대폰 폭: 줄카드를 두 줄로 (첫 줄 통신사·상품명·배지 / 둘째 줄 요금 | 사은품 — 2026-08-26 대표 확정) */
        @media (max-width: 480px) {
            /* 추천 순위 카드도 두 줄로 — 이유 칩은 접어 1위 줄에만 */
            .rec-card { grid-template-columns: 28px 1fr; padding: 12px 10px; }
            .rec-card .rec-price { grid-column: 1 / 3; grid-row: 4; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; padding-top: 6px; border-top: 1px dashed #eef0f3; }
            .rec-card .rec-benefit-detail { grid-row: 5; font-size: 10px; }
            .rec-card .rec-price-original { grid-row: 6; font-size: 10px; }
            .rec-card .rec-reasons { display: none; }
            .rec-card.rec-card-premium .rec-reasons, .rec-card.rec-card-top .rec-reasons { display: flex; }
            .compare-column { flex-wrap: wrap; row-gap: 8px; padding-bottom: 12px; }
            .compare-column .col-header { flex: 1 1 60%; }
            .compare-column .col-body {
                flex: 1 1 100%; justify-content: space-between; align-items: center;
                padding-top: 8px; margin-left: 12px; border-top: 1px dashed #eef0f3; text-align: left;
            }
            .compare-column .col-body > div:nth-child(-n+2) { text-align: left; }
            .compare-column .col-cta {
                padding: 12px 8px; min-height: 44px;
                display: flex; align-items: center; justify-content: center;
            }
            .comparison-card .card-cta {
                padding: 12px; min-height: 44px;
                display: flex; align-items: center; justify-content: center;
            }
        }

        /* 환영 힌트 (자유 질문 안내) */
        .guide-hint {
            margin-top: var(--space-sm);
            padding: 8px 12px;
            background: #fff3e0;
            border-radius: var(--radius-sm);
            font-size: var(--fs-small);
            color: var(--c-primary);
            text-align: center;
            line-height: 1.5;
        }

        /* ========== 2단계 도움말 (L1 요약 + L2 상세) ========== */
        .guide-text-box { position: relative; overflow: visible; }
        .guide-help {
            margin-top: 10px;
            padding: 8px 10px;
            background: rgba(37, 99, 235, 0.04);
            border-left: 3px solid rgba(37, 99, 235, 0.25);
            border-radius: 0 6px 6px 0;
        }
        .guide-help-summary {
            font-size: var(--fs-small); color: var(--c-primary); line-height: 1.4;
        }
        .guide-help-toggle {
            display: inline; color: #2563eb; font-size: var(--fs-small);
            cursor: pointer; margin-left: 4px;
            text-decoration: underline;
            border: none; background: none; padding: 0;
            font-family: inherit;
        }
        .guide-help-toggle:hover { color: #1d4ed8; }
        .guide-help-detail {
            margin-top: 4px; padding: 6px 10px;
            background: #f8f9ff; border-radius: 6px;
            font-size: var(--fs-small); color: #555; line-height: 1.5;
            display: none;
            animation: helpDetailIn 0.25s ease;
        }
        .guide-help-detail.visible { display: block; }
        .guide-help-detail b { color: #2563eb; font-weight: 600; }
        @keyframes helpDetailIn { from { opacity: 0; } to { opacity: 1; } }
        @media (max-width: 480px) {
            .guide-help { margin-top: 8px; padding: 7px 9px; }
            .guide-help-detail { padding: 5px 8px; }
        }

        /* 가이드 텍스트 (guide-text-box 내부에서 사용) */
        .guide-text {
            font-size: var(--fs-body);
            color: var(--c-text-secondary);
            line-height: 1.6;
            white-space: pre-wrap;
        }

        /* ========== Ripple 효과 ========== */
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(231, 76, 60, 0.4);
            transform: scale(0);
            animation: ripple-anim 0.5s ease-out;
            pointer-events: none;
        }
        @keyframes ripple-anim {
            to { transform: scale(3); opacity: 0; }
        }


        /* ========== 하단 스크롤 버튼 ========== */
        .scroll-bottom-btn {
            position: absolute;
            bottom: 150px; /* JS updateScrollBtnPosition()에서 동적 갱신 */
            right: 16px;
            background: var(--c-primary);
            color: white;
            border: 1.5px solid var(--c-primary);
            border-radius: 20px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(107,159,231,0.4);
            display: none;
            z-index: 10;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 8px 12px;
            font-size: var(--fs-sub);
            font-weight: 500;
            transition: all 0.2s;
            animation: fadeIn 0.3s ease;
        }
        .scroll-bottom-btn .arrow {
            font-size: var(--fs-subtitle);
            line-height: 1;
        }
        .scroll-bottom-btn .label {
            display: none;
        }
        .scroll-bottom-btn.has-new .label {
            display: inline;
        }
        .scroll-bottom-btn:hover {
            background: white;
            color: var(--c-primary);
            border-color: var(--c-primary);
            box-shadow: 0 2px 8px rgba(107,159,231,0.3);
        }

        /* ========== iframe 임베드 시 여백 최소화 (카드 외관 유지) ========== */
        body.in-iframe {
            padding: 0;
            background: transparent;
            align-items: stretch;
        }
        body.in-iframe .chat-container {
            max-width: 100%;
            height: 100vh;
            height: 100dvh;
        }

        /* 🆕11-02 [긴급] 질문 칸 늘 보이게(T2 · 대표 「모두 추천대로 진행해」 14:11 · 정본 = 문서/[챗봇]작업_질문칸늘보이게_20261102/02_플랜.md)
           ① 틀 높이 = 브라우저가 실제로 보여 주는 높이(js/chat-viewport-height.js 가 --app-h 와 html.has-app-h 를 넣음 · 표시가 없으면 종전 100dvh)
              종전 = 문자로 연 휴대폰 브라우저가 처음 100dvh 를 보이는 화면보다 크게 잡아 빠른 메뉴 아래(질문 칸)가 잘림 · 재접속 안내 뒤에야 정상
           ② 자리가 모자라면 머리·혜택 띠가 줄어듦(넘친 글은 잘림) = 질문 칸(flex-shrink 0)이 화면 밖으로 안 밀림 */
        html.has-app-h body.in-iframe .chat-container { height: var(--app-h); }
        @media (max-width: 480px) {
            html.has-app-h body { min-height: var(--app-h); }
            html.has-app-h .chat-container { height: var(--app-h); }
        }
        .chat-header, .promo-strip { min-height: 0; overflow: hidden; }

        /* ========== 반응형: 태블릿 L (769~1024px) ========== */
        @media (min-width: 769px) and (max-width: 1024px) {
            :root { --container-width: 520px; }
            body { padding: 16px; }
            .chat-container { height: 92vh; }
            .badge { padding: 4px 8px; }
            .message-bubble { padding: 14px 18px; }
            .message.user .message-bubble { max-width: 75%; }
            .message.bot .message-bubble { max-width: 100%; width: 100%; }
            .quick-action-btn { padding: 8px 14px; }
            .floating-reward-badge { right: 16px; }
        }

        /* ========== 반응형: 태블릿 S (481~768px) ========== */
        @media (max-width: 768px) {
            .chat-container {
                max-width: 95%;
                height: 92vh;
            }
            body {
                padding: var(--space-md);
            }
            .message.bot .message-bubble { max-width: 100%; width: 100%; }
            .message.user .message-bubble { max-width: 80%; }
        }

        /* ========== 반응형: 모바일 (≤480px) ========== */
        @media (max-width: 480px) {
            body {
                padding: 0;
                min-height: 100dvh;
                align-items: stretch;
            }
            .chat-container {
                height: 100vh;
                height: 100dvh;
                max-width: 100%;
                border-radius: 0;
            }
            .chat-header {
                padding: var(--space-md);
                padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
                padding-left: calc(var(--space-md) + env(safe-area-inset-left, 0px));
                padding-right: calc(var(--space-md) + env(safe-area-inset-right, 0px));
            }
            .chat-messages {
                padding: var(--space-md);
            }
            .chat-input-container {
                padding: 6px 10px;
                padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
                padding-left: calc(10px + env(safe-area-inset-left, 0px));
                padding-right: calc(10px + env(safe-area-inset-right, 0px));
            }
            .chat-input {
                min-height: var(--height-input-mobile);
                padding: var(--pad-input-mobile);
            }
            .send-button {
                width: var(--height-send-btn-mobile);
                height: var(--height-send-btn-mobile);
                position: relative;
            }
            .send-button::before {
                content: '';
                position: absolute;
                top: 50%; left: 50%;
                transform: translate(-50%, -50%);
                width: var(--height-touch-target);
                height: var(--height-touch-target);
            }
            .send-button svg {
                width: 18px;
                height: 18px;
            }
            .chat-input::placeholder {
                font-size: var(--fs-body);
            }
            .guide-hint {
                padding: 4px 8px;
            }
            /* comparison-card 모바일 조정 */
            .quote-card {
                padding: var(--space-md);
            }
            .quote-card .quote-total {
                margin-left: calc(-1 * var(--space-md));
                margin-right: calc(-1 * var(--space-md));
                padding-left: var(--space-md);
                padding-right: var(--space-md);
            }
            .switch-card { padding: var(--space-md); }
            .switch-row {
                flex-wrap: wrap;
                padding: 8px 10px;
                gap: 4px;
            }
            .switch-row .carrier-name { min-width: 60px; font-size: 13px; }
            .switch-row .carrier-detail { flex-basis: 100%; font-size: 12px; padding-left: 0; }
            .switch-row .carrier-benefit { font-size: 13px; }
            .switch-toggle-btn { padding: 6px 8px; font-size: 12px; }
            /* 모바일 헤더·폰트 보정 */
            /* 머리 둘째 줄(「ChatGPT + Claude + 20년 노하우 AI 맞춤 상담」) 한 줄 (2026-09-23 대표 「한줄로 보이게」 · T6 요청 · 추천안 D)
               ← 돌아가기 단추가 켜지면 글 칸이 210~262px로 좁아져 360~412px 폰에서 꺾였다(09-23 실측)
               → 좁은 폰만 글자를 조금 줄이고(412·430px은 지금과 같은 12px), 그래도 넘치면 끝을 「…」로 */
            .chat-header { gap: 10px; }
            .header-info { flex: 1; min-width: 0; }
            .header-info p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; font-size: min(var(--fs-small), 3.05vw); letter-spacing: -0.2px; vertical-align: top; }   /* vertical-align = overflow:hidden 이 글 기준선을 바꿔 머리가 5px 커지던 것 막음(78→83px · 09-23 실측) */
            /* ← 돌아가기 단추가 있으면 글 칸이 약 11px 더 좁다 → 그때만 조금 더 줄여 글 끝까지 보이게(3.05vw 그대로면 360~390px에서 끝이 「…」로 잘림 · 09-23 실측) */
            .back-btn.visible ~ .header-info p { font-size: min(var(--fs-small), 2.8vw); }
            .event-card .ev-title { font-size: 13px; }
            .event-card .ev-desc { font-size: 13px; }
            .speed-badge { font-size: 13px; }
            .ai-logo { font-size: 12px; }
            /* 스크롤 버튼 터치 타겟 확대 */
            .scroll-bottom-btn {
                padding: 10px 16px;
                min-height: 44px;
                min-width: 44px;
            }
            /* 진행률 바 모바일 */
            .progress-bar-container { padding: 6px 12px 4px; }
            .progress-bar-track { height: 5px; }
            .progress-bar-label { padding: 4px 0 1px; }
            /* 10px → 11px 최소 가독성 보정 */
            .badge,
            .benefit-label,
            .col-badge, .card-badge,
            .sim-badge,
            .benefit-opt-tag,
            .btn-badge { font-size: 11px; }
            /* 11px → 12px 보조 텍스트 보정 */
            .col-product-name,
            .col-price small,
            .rec-benefit-detail,
            .rec-bundle-detail,
            .rec-reason { font-size: 12px; }
            /* 모바일 말풍선 최적화 */
            .message-bubble {
                max-width: 85%;
                line-height: var(--lh-relaxed);
                padding: var(--pad-bubble-mobile);
            }
            .message.user .message-bubble { max-width: 85%; }
            .message.bot .message-bubble { max-width: 100%; width: 100%; }
            .message.bot .message-content {
                max-width: 100%;
                width: 100%;
                line-height: var(--lh-relaxed);
            }
            /* 가이드 텍스트 박스 모바일 */
            .guide-text-box {
                padding: var(--pad-bubble-mobile);
            }
            /* 액션 버튼 모바일 */
            .action-btn { padding: var(--pad-chip-mobile); }
            .action-btn.game-cta { padding: 6px 14px; }
            /* 룰렛 CTA 폭 통일 */
            .message.bot.roulette-highlight .message-bubble { max-width: 100%; width: 100%; }
            /* 가이드 버튼 모바일 */
            .guide-btn {
                padding: 8px 10px;
                min-height: 44px;
            }
            .guide-btn .btn-icon {
                margin-right: 2px;
            }
            /* 추천 카드 모바일 최적화 */
            .rec-price {
                flex-wrap: wrap;
                gap: 4px 8px;
            }
            .rec-benefit-badge {
                font-size: 11px;
                padding: 2px 8px;
            }
            .rec-benefit-badge .benefit-plus {
                font-size: 9px;
            }
            .rec-monthly {
                font-size: 16px;
            }
            .rec-bundle-label {
                font-size: 10px;
            }
            .rec-badge {
                font-size: 11px;
                padding: 2px 8px;
            }
            .rec-discount {
                font-size: 11px;
            }
            .rec-phone-badge {
                font-size: 10px;
                padding: 2px 5px;
            }
            .rec-price-original {
                font-size: 11px;
            }
            /* 테이블 가로 스크롤 */
            .sim-comparison-table,
            .benefit-table {
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .sim-comparison-table th,
            .sim-comparison-table td,
            .benefit-table th,
            .benefit-table td {
                min-width: 60px;
                white-space: nowrap;
            }
            /* .table-scroll-wrapper overflow·화살표 = 공통 정의(위)로 이동. 모바일 여백만 */
            .table-scroll-wrapper { margin: 8px 0; }
            .message.bot .message-bubble table,
            .message.bot .message-content table {
                min-width: 100%;
            }
            .message.bot .message-bubble table th,
            .message.bot .message-bubble table td,
            .message.bot .message-content table th,
            .message.bot .message-content table td {
                min-width: 60px;
                white-space: nowrap;
            }
        }

        /* ========== 터치 디바이스 hover 비활성화 ========== */
        @media (hover: none) {
            .send-button:hover,
            .floating-button:hover,
            .action-card:hover,
            .guide-btn:hover,
            .comparison-card:hover,
            .product-card:hover,
            .suggestion-btn:hover,
            .scroll-bottom-btn:hover,
            .event-card:hover,
            .event-close-btn:hover,
            .retry-button:hover,
            .extra-carriers-toggle:hover,
            .callback-form .btn-submit:hover,
            .callback-form .btn-cancel:hover,
            .quote-card .btn-callback:hover,
            .quote-card .btn-restart:hover,
            .switch-actions .btn-switch-callback:hover,
            .switch-actions .btn-switch-compare:hover,
            .compare-column:hover {
                transform: none !important;
                box-shadow: inherit !important;
            }
            .quick-action-toggle:hover {
                border-color: var(--c-border) !important;
                color: #64748b !important;
            }
            .quick-action-btn:hover {
                background: white !important;
                color: var(--c-primary) !important;
            }
            .quick-action-close:hover {
                border-color: var(--c-border) !important;
                color: #94a3b8 !important;
            }
        }

        /* ========== 프로모 스트립 ========== */
        .promo-strip {
            background: rgba(255, 255, 255, 0.85);
            color: #e74c3c;
            text-align: center;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: -0.3px;
            animation: promo-glow 2s ease-in-out infinite;
            display: none; /* JS에서 표시 */
        }
        .promo-strip-highlight {
            background: #F57C00;
            color: #fff;
            padding: 1px 6px;
            border-radius: 4px;
            font-weight: 900;
            margin: 0 2px;
        }
        @keyframes promo-glow {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.85; }
        }

        /* ========== 환영 카드: 통계 + 체크리스트 ========== */
        .welcome-stats-row {
            display: flex;
            gap: 12px;
            padding: 12px 16px;
            align-items: stretch;
        }
        .welcome-stats {
            flex: 1;
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        .stat-box {
            position: relative;
            border: 1.5px solid rgba(37, 99, 235, 0.25);
            border-radius: 10px;
            padding: 12px 24px;
            min-width: 140px;
            max-width: 200px;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--c-bg);
        }
        .stat-box-title {
            position: absolute;
            top: -9px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--c-bg);
            padding: 1px 10px;
            font-size: 11px;
            font-weight: 600;
            color: #2563eb;
            white-space: nowrap;
            border-radius: 9999px;
        }
        /* 현재 이용중 — 숨쉬는 초록 점 (2026-07-29) */
        .stat-live-dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4ade80;
            margin-right: 4px;
            vertical-align: middle;
            animation: stat-live-pulse 1.8s infinite;
        }
        @keyframes stat-live-pulse {
            0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
            70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
            100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
        }
        /* 숫자를 세는 동안 — 커졌다 돌아오며 눈길을 끔 (2026-07-29 주목 강화) */
        .stat-number.stat-counting {
            display: inline-block;
            animation: stat-count-zoom 0.75s ease-in-out infinite;
        }
        @keyframes stat-count-zoom {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }
        /* 다 세고 나면 — 초록 점이 세 번 크게 퍼짐 (마무리 주목) */
        .stat-live-dot.stat-dot-burst {
            animation: stat-dot-burst 0.8s ease-out 3;
        }
        @keyframes stat-dot-burst {
            0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.9); transform: scale(1); }
            50% { transform: scale(1.6); }
            100% { box-shadow: 0 0 0 12px rgba(74, 222, 128, 0); transform: scale(1); }
        }
        .stat-number {
            font-size: 28px;
            font-weight: 800;
            color: #2563eb;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            transition: color 0.8s ease;
        }
        .stat-number.stat-flash {
            color: #e53e3e;
            animation: stat-bump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* ===== 숫자 변경 시: 스케일 펄스 ===== */
        @keyframes stat-bump {
            0% { transform: scale(1); }
            35% { transform: scale(1.28); }
            65% { transform: scale(0.95); }
            100% { transform: scale(1); }
        }

        /* ===== 입장: 60px 아래에서 바운스 ===== */
        @keyframes stat-entrance {
            0% { opacity: 0; transform: translateY(60px) scale(0.8); }
            55% { opacity: 1; transform: translateY(-8px) scale(1.04); }
            75% { transform: translateY(3px) scale(0.99); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ===== 파란→기본 박스 페이드 ===== */
        @keyframes stat-fade-box {
            0% { background: #2563eb; border-color: rgba(37,99,235,0.5); box-shadow: 0 2px 12px rgba(37,99,235,0.25); }
            100% { background: var(--c-bg, #fff); border-color: rgba(37,99,235,0.25); box-shadow: none; }
        }

        /* ===== 숫자: 흰색→파란색 ===== */
        @keyframes stat-num-fade {
            0% { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.12); }
            100% { color: #2563eb; text-shadow: none; }
        }

        /* 타이틀: 애니메이션 없음 (항상 최종 상태 유지) */

        /* ===== 빨간 섬광 글로우 ===== */
        @keyframes stat-red-glow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(229,62,62,0); }
            50% { box-shadow: 0 0 24px 8px rgba(229,62,62,0.45), inset 0 0 8px 0 rgba(229,62,62,0.08); }
        }

        /* 초기 상태: 숨김 */
        .stat-box.stat-ready {
            opacity: 0;
            transform: translateY(60px) scale(0.8);
        }

        /* 입장: 파란 강조 배경 */
        .stat-box.stat-enter {
            animation: stat-entrance 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            background: #2563eb;
            border-color: rgba(37,99,235,0.5);
            box-shadow: 0 2px 12px rgba(37,99,235,0.25);
        }
        .stat-box.stat-enter .stat-number {
            color: #fff;
            text-shadow: 0 1px 4px rgba(0,0,0,0.12);
            transition: none;
        }
        .stat-box.stat-enter .stat-box-title {
            color: #2563eb;
        }

        /* 스태거 딜레이 */
        .stat-box.stat-enter.stat-delay {
            animation-delay: 0.25s;
        }

        /* 페이드 전환: 황금→기본 */
        .stat-box.stat-fade {
            animation: stat-fade-box 1s ease-out forwards;
        }
        .stat-box.stat-fade .stat-number {
            animation: stat-num-fade 1s ease-out forwards;
            transition: none;
        }
        /* 타이틀은 항상 파란색 유지 — 애니메이션 없음 */

        /* 빨간 섬광 글로우 */
        .stat-box.stat-glow-pulse {
            animation: stat-red-glow 0.7s ease-in-out 2;
        }

        /* 접근성: 모션 줄이기 설정 존중 */
        @media (prefers-reduced-motion: reduce) {
            .stat-number.stat-flash { animation: none; }
            .stat-live-dot, .stat-live-dot.stat-dot-burst { animation: none; }
            .stat-number.stat-counting { animation: none; transform: none; }
            .stat-box.stat-ready { opacity: 1; transform: none; }
            .stat-box.stat-enter { animation: none; opacity: 1; transform: none; background: var(--c-bg, #fff); border-color: rgba(37,99,235,0.25); box-shadow: none !important; }
            .stat-box.stat-enter .stat-number { color: #2563eb; text-shadow: none; }
            .stat-box.stat-enter .stat-box-title { color: #2563eb; }
            .stat-box.stat-fade { animation: none; }
            .stat-box.stat-fade .stat-number { animation: none; color: #2563eb; }
            .stat-box.stat-fade .stat-box-title { animation: none; color: #2563eb; }
            .stat-box.stat-glow-pulse { animation: none; }
        }

        /* 체크리스트는 프로모 스트립 로테이션으로 이동 */
        @media (max-width: 420px) {
            .welcome-stats-row {
                flex-direction: column;
                gap: 8px;
                padding: 10px 12px;
            }
            .welcome-stats {
                justify-content: center;
                width: 100%;
                gap: 8px;
            }
            .stat-box {
                flex: 1;
                min-width: unset;
                padding: 16px 12px 12px;
            }
            .stat-number { font-size: 24px; }
            .welcome-actions-cards {
                width: 100%;
                padding: 0 8px;
            }
            .welcome-actions-cards .action-card {
                width: calc(50% - 4px);
                white-space: nowrap;
            }
        }

        /* ========== 프로모 스트립 소셜 프루프 전환 ========== */
        .promo-strip .promo-stat {
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            color: inherit;
        }
        .promo-strip {
            transition: opacity 0.4s ease;
        }
        .promo-strip.promo-fade {
            opacity: 0;
        }

        /* ========== Phase 4: 프로모 스트립 D-day 타이머 통합 ========== */
        .promo-strip .promo-timer {
            display: inline; font-weight: 800; font-variant-numeric: tabular-nums;
        }
        .promo-strip .promo-dday {
            display: inline-block; background: #e74c3c; color: #fff;
            padding: 1px 6px; border-radius: 8px; font-size: 11px; font-weight: 700;
            margin-left: 4px; vertical-align: middle;
        }
        /* D-3 이내: 긴급 */
        .promo-strip.promo-urgent {
            background: rgba(255, 235, 238, 0.95); color: #c62828;
            animation: promoUrgentPulse 2s ease-in-out infinite;
        }
        @keyframes promoUrgentPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.88; }
        }
        /* D-day: 최고 긴급 */
        .promo-strip.promo-critical {
            background: linear-gradient(90deg, #c62828, #e53935); color: #fff;
            animation: promoCriticalGlow 2s ease-in-out infinite;
        }
        @keyframes promoCriticalGlow {
            0%, 100% { box-shadow: 0 0 4px rgba(198,40,40,0.3); }
            50% { box-shadow: 0 0 10px rgba(198,40,40,0.5); }
        }

        /* (stats-banner 삭제됨 — 환영 카드 내 .welcome-stats로 이동) */

        /* ========== Phase 4: 인라인 소셜 프루프 ========== */
        .inline-social-proof {
            padding: 8px 12px;
            margin: 6px 0;
            background: rgba(37, 99, 235, 0.04);
            border-left: 3px solid #2563eb;
            border-radius: 0 8px 8px 0;
            font-size: 12px;
            color: #555;
            display: flex;
            align-items: center;
            gap: 6px;
            animation: ispFadeIn 0.5s ease;
        }
        .inline-social-proof b { color: #2563eb; font-weight: 700; }
        @keyframes ispFadeIn {
            from { opacity: 0; transform: translateX(-8px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        .callback-social-proof {
            background: rgba(37, 99, 235, 0.06);
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 12px;
            color: #555;
            text-align: center;
            margin-top: 8px;
        }
        .callback-social-proof b { color: #2563eb; font-weight: 700; }
        @media (max-width: 600px) {
            .stats-banner { font-size: 11px; padding: 5px 10px; }
            .inline-social-proof { font-size: 11px; padding: 6px 10px; }
            .callback-social-proof { font-size: 11px; }
        }

        /* ========== 진행률 바 (Phase 3-A) ========== */
        .progress-bar-container {
            padding: 8px 16px 6px;
            background: linear-gradient(135deg, #fff8f3 0%, #fff5ed 100%);
            border-bottom: none;
            position: relative;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }
        .progress-bar-track {
            height: 6px;
            background: #f0e0d0;
            border-radius: 3px;
            overflow: hidden;
        }
        .progress-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #ff8c42, #ff6b35);
            border-radius: 3px;
            transition: width 300ms ease-out;
        }
        .progress-bar-fill.complete {
            background: linear-gradient(90deg, #56b870, #66bb6a);
        }
        .progress-bar-label {
            font-size: var(--fs-small);
            color: #d4611a;
            font-weight: 500;
            padding: 5px 0 2px;
            line-height: 1;
            min-height: 18px;
        }
        /* 등장 애니메이션 */
        .progress-bar-container.entering {
            animation: progressBarEnter 0.4s ease;
        }
        @keyframes progressBarEnter {
            from { opacity: 0; max-height: 0; padding: 0 16px 0; }
            to   { opacity: 1; max-height: 44px; }
        }
        /* 마일스톤 #1: 펄스 */
        @keyframes progressPulse {
            0%   { box-shadow: 0 0 0 0 rgba(255, 140, 66, 0.4); }
            70%  { box-shadow: 0 0 0 8px rgba(255, 140, 66, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 140, 66, 0); }
        }
        .progress-bar-fill.pulse {
            animation: progressPulse 0.6s ease;
        }
        /* 마일스톤 #2: 반짝 파티클 */
        .milestone-sparkle {
            position: absolute;
            bottom: -2px;
            font-size: var(--fs-num);
            pointer-events: none;
            animation: sparkleDown 1.5s ease forwards;
        }
        @keyframes sparkleDown {
            0%   { opacity: 1; transform: translateY(0) scale(0.6); }
            50%  { opacity: 1; transform: translateY(15px) scale(1.4); }
            100% { opacity: 0; transform: translateY(30px) scale(0.9); }
        }
        /* 마일스톤 #3: 컨페티 */
        .confetti-piece {
            position: absolute;
            bottom: -2px;
            width: 8px;
            height: 12px;
            border-radius: 2px;
            pointer-events: none;
            animation: confettiFall 2s ease forwards;
        }
        @keyframes confettiFall {
            0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
            40%  { opacity: 1; transform: translateY(20px) rotate(280deg); }
            100% { opacity: 0; transform: translateY(70px) rotate(720deg); }
        }

        /* ========== 콜백 완료 축하 ========== */
        .callback-celebration {
            position: absolute;
            inset: 0;
            z-index: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.85);
            animation: celebFadeIn 0.3s ease;
            pointer-events: none;
        }
        .callback-celebration.dismissing {
            animation: celebFadeOut 0.4s ease forwards;
        }
        @keyframes celebFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes celebFadeOut { from { opacity: 1; } to { opacity: 0; } }
        .celeb-content {
            text-align: center;
            animation: celebBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes celebBounce {
            from { transform: scale(0.5); opacity: 0; }
            to   { transform: scale(1); opacity: 1; }
        }
        .celeb-icon { font-size: 64px; margin-bottom: 12px; }
        .celeb-title { font-size: 22px; font-weight: 700; color: #333; margin-bottom: 6px; }
        .celeb-sub { font-size: 14px; color: #666; }
        .celeb-confetti {
            position: absolute;
            width: 8px; height: 12px;
            border-radius: 2px;
            pointer-events: none;
            animation: celebConfettiFall 2s ease forwards;
        }
        @keyframes celebConfettiFall {
            0%   { opacity: 1; transform: translateY(-20px) rotate(0deg); }
            100% { opacity: 0; transform: translateY(60vh) rotate(720deg); }
        }

        /* ========== Phase 3-B: 스크래치 카드 + 럭키 룰렛 ========== */

        /* 스크래치 카드 */
        .scratch-card-wrapper {
            position: relative;
            margin: 8px 0;
            border-radius: 12px;
            overflow: hidden;
            background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
            border: 2px solid #ffd54f;
            box-shadow: 0 2px 8px rgba(255, 213, 79, 0.3);
        }
        .scratch-card-header {
            padding: 10px 14px 6px;
            font-size: 14px;
            font-weight: 600;
            color: #e65100;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .scratch-card-area {
            position: relative;
            margin: 0 14px;
            height: 120px;
            border-radius: 8px;
            overflow: hidden;
        }
        .scratch-card-area::after {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.08) 60%, transparent 100%);
            animation: shimmer 3s ease-in-out infinite;
            pointer-events: none;
            z-index: 10;
        }
        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 200%; }
        }
        .scratch-result {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
        }
        .scratch-reward-icon { font-size: 32px; margin-bottom: 4px; }
        .scratch-reward-text { font-size: 24px; font-weight: 700; color: #e65100; }
        .scratch-reward-sub { font-size: 13px; color: #f57c00; margin-top: 2px; }
        .scratch-canvas {
            position: absolute;
            inset: 0;
            width: 100%; height: 100%;
            cursor: pointer;
            touch-action: none;
        }
        .scratch-card-footer {
            padding: 8px 14px 10px;
            font-size: 12px; color: #888;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .scratch-card-footer .hint { color: #666; font-weight: 500; }
        .scratch-card-footer .social { color: #4a90d9; font-size: 11px; }
        .scratch-cta { padding: 8px 14px 12px; text-align: center; }
        .scratch-cta-text { font-size: 13px; color: #2e7d32; font-weight: 500; margin-bottom: 6px; }

        /* 룰렛 오버레이 */
        .roulette-overlay {
            position: absolute;
            inset: 0; z-index: 520;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.6);
            animation: celebFadeIn 0.3s ease;
        }
        .roulette-overlay.dismissing { animation: celebFadeOut 0.4s ease forwards; }
        .roulette-container {
            position: relative;
            background: #fff;
            border-radius: 20px;
            padding: 20px;
            width: 90%; max-width: 340px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            animation: celebBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .roulette-title { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 16px; }
        .roulette-wheel-wrapper {
            position: relative;
            display: inline-block;
            margin-bottom: 16px;
            max-width: 260px; width: 100%;
        }
        .roulette-wheel {
            display: block;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
            transform: translateZ(0);
            backface-visibility: hidden;
        }
        .roulette-wheel-wrapper.spinning {
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5));
            transition: filter 0.5s ease;
        }
        .roulette-wheel-wrapper.stopped {
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
        }
        .roulette-pointer {
            position: absolute;
            top: -8px; left: 50%;
            transform: translateX(-50%);
            width: 0; height: 0;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-top: 20px solid #e53935;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
            z-index: 10;
        }
        @keyframes pointer-bounce {
            0%, 100% { transform: translateX(-50%) rotate(0deg); }
            20% { transform: translateX(-50%) rotate(-12deg); }
            40% { transform: translateX(-50%) rotate(8deg); }
            60% { transform: translateX(-50%) rotate(-5deg); }
            80% { transform: translateX(-50%) rotate(2deg); }
        }
        .roulette-pointer.bouncing {
            transform-origin: center bottom;
            animation: pointer-bounce 0.6s ease-out;
        }
        .roulette-spin-btn {
            display: inline-block;
            padding: 12px 36px;
            background: linear-gradient(135deg, #ff6f00 0%, #ff8f00 100%);
            color: #fff; font-size: 16px; font-weight: 700;
            border: none; border-radius: 30px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(255, 111, 0, 0.4);
            transition: transform 0.2s, box-shadow 0.2s;
            min-width: 44px; min-height: 44px;
        }
        .roulette-spin-btn:active { transform: scale(0.95); }
        .roulette-spin-btn:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; }
        .roulette-trust { font-size: 12px; color: #888; margin-top: 10px; }
        .roulette-close {
            position: absolute;
            top: 10px; right: 14px;
            font-size: 20px; color: #999;
            cursor: pointer; background: none; border: none;
            line-height: 1;
            min-width: 44px; min-height: 44px;
        }
        .roulette-result { text-align: center; padding: 20px 0; }
        .roulette-result-amount { font-size: 28px; font-weight: 700; color: #e65100; margin: 8px 0; }
        .roulette-result-sub { font-size: 14px; color: #666; margin-bottom: 16px; }
        .roulette-result-cta {
            display: inline-block;
            padding: 12px 28px;
            background: linear-gradient(135deg, #4a90d9 0%, #5ba3ec 100%);
            color: #fff; font-size: 15px; font-weight: 600;
            border: none; border-radius: 25px;
            cursor: pointer;
            min-width: 44px; min-height: 44px;
        }
        .roulette-result-social { font-size: 11px; color: #888; margin-top: 12px; }
        .sr-only {
            position: absolute; width: 1px; height: 1px;
            padding: 0; margin: -1px; overflow: hidden;
            clip: rect(0, 0, 0, 0); border: 0;
        }

        @media (max-width: 480px) {
            .scratch-card-area { height: 100px; margin: 0 10px; }
            .scratch-reward-text { font-size: 20px; }
            .scratch-card-header { font-size: 13px; padding: 8px 10px 4px; }
            .scratch-card-footer { padding: 6px 10px 8px; font-size: 11px; }
            .roulette-container { padding: 16px; width: 95%; }
            .roulette-title { font-size: 18px; margin-bottom: 12px; }
            .roulette-spin-btn { padding: 10px 28px; font-size: 15px; }
            .roulette-result-amount { font-size: 24px; }
            .roulette-wheel-wrapper { max-width: 220px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .scratch-card-area::after { animation: none; }
            .roulette-wheel { transition: none !important; }
            .roulette-pointer.bouncing { animation: none; }
            .roulette-wheel-wrapper.spinning { filter: none; }
        }

        /* 스크래치 오버레이 */
        .scratch-overlay {
            position: absolute;
            inset: 0; z-index: 520;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.6);
            animation: celebFadeIn 0.3s ease;
        }
        .scratch-overlay.dismissing { animation: celebFadeOut 0.4s ease forwards; }
        .scratch-container {
            position: relative;
            background: #fff;
            border-radius: 20px;
            padding: 20px;
            width: 90%; max-width: 340px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            animation: celebBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .scratch-close {
            position: absolute;
            top: 10px; right: 14px;
            font-size: 20px; color: #999;
            cursor: pointer; background: none; border: none;
            line-height: 1;
            min-width: 44px; min-height: 44px;
        }

        /* 콜백 보상 배지 */
        .callback-reward-badge {
            margin: 8px 0;
            padding: 10px 14px;
            background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
            border: 1px solid #ffd54f;
            border-radius: 10px;
            text-align: center;
            font-size: 14px;
            color: #e65100;
            line-height: 1.5;
        }

        .callback-recent-notice {
            margin: 12px 0 4px;
            padding: 10px 14px;
            background: #fffde7;
            border: 1px solid #fdd835;
            border-left: 4px solid #fbc02d;
            border-radius: 8px;
            font-size: 13px;
            color: #5d4037;
            line-height: 1.5;
        }
        @media (max-width: 480px) {
            .callback-recent-notice { font-size: 12px; padding: 8px 12px; }
        }

        @media (max-width: 480px) {
            .scratch-container { padding: 16px; width: 95%; }
        }

        /* 보상 가이드/카드 중앙 정렬 (카드 위치만 중앙, 내부는 왼쪽) */
        .message.bot.benefit-center { text-align: center; }
        .message.bot.benefit-center .message-bubble { display: inline-block; text-align: left; }
        .message.bot.benefit-center .benefit-summary-card { text-align: left; }

        /* ========== 보상 현황 통합 카드 ========== */
        .benefit-summary-card {
            background: #fff; border-radius: 16px; padding: 16px;
            margin: 4px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            border: 1px solid #e8e8e8;
        }
        .benefit-summary-header {
            display: flex; align-items: center; gap: 8px;
            margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;
        }
        .benefit-summary-icon { font-size: 20px; }
        .benefit-summary-title { font-size: 14px; font-weight: 700; color: #333; }
        .benefit-section {
            background: #f8f9fa; border-radius: 12px; padding: 12px; margin-bottom: 8px;
        }
        .benefit-section-label {
            display: flex; align-items: center; gap: 6px;
            font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px;
        }
        .benefit-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
        .benefit-dot-signup { background: #4CAF50; }
        .benefit-dot-event { background: #FF9800; }
        .benefit-section-amount {
            font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px;
        }
        .benefit-section-amount strong { color: #e65100; }
        .benefit-section-desc { font-size: 11px; color: #999; }
        .benefit-event-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
        .benefit-event-item {
            display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0;
        }
        .benefit-event-item.done { color: #333; }
        .benefit-event-item.pending { color: #999; }
        .benefit-event-amount { font-weight: 600; color: #e65100; }
        .benefit-event-status { font-size: 11px; color: #e65100; font-weight: 600; }
        .benefit-total {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 0; margin-top: 4px; border-top: 2px solid #e8e8e8;
            font-size: 13px; font-weight: 600;
        }
        .benefit-total-amount { font-size: 15px; color: #e65100; }
        .benefit-total-amount strong { font-size: 17px; }
        .benefit-cta-btn {
            width: 100%; padding: 11px;
            background: linear-gradient(135deg, #ff6d00, #ff9100);
            color: #fff; border: none; border-radius: 12px;
            font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 8px;
        }
        .benefit-cta-btn:active { transform: scale(0.97); }
        @media (max-width: 480px) {
            .benefit-summary-card { padding: 14px; border-radius: 14px; }
            .benefit-section-amount { font-size: 16px; }
            .benefit-cta-btn { padding: 10px; font-size: 13px; }
        }

        /* ========== 플로팅 보상 배지 ========== */
        .floating-reward-badge {
            position: absolute;
            right: 12px;
            top: 70px;
            z-index: 15;
            background: linear-gradient(135deg, #fff8e1, #fff3cd);
            border: 1.5px solid #ffd54f;
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(255, 193, 7, 0.35);
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .floating-reward-badge.collapsed {
            padding: 6px 16px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 600;
            color: #e65100;
            white-space: nowrap;
        }
        .floating-reward-badge .frb-icon { font-size: 18px; }
        .floating-reward-badge .frb-amount { font-size: 15px; font-weight: 800; }
        .floating-reward-badge .frb-timer { font-size: 12px; color: #bf360c; margin-left: 4px; }
        .floating-reward-badge.expanded {
            padding: 14px 16px;
            min-width: 200px;
            max-width: 260px;
        }
        .floating-reward-badge .frb-header {
            display: flex; align-items: center; gap: 6px;
            font-size: 14px; font-weight: 700; color: #e65100; margin-bottom: 8px;
        }
        .floating-reward-badge .frb-breakdown { font-size: 12px; color: #666; line-height: 1.6; margin-bottom: 10px; }
        .floating-reward-badge .frb-item { display: flex; justify-content: space-between; }
        .floating-reward-badge .frb-timer-line { font-size: 11px; color: #bf360c; margin-bottom: 10px; text-align: center; }
        .floating-reward-badge .frb-cta {
            display: block; width: 100%; padding: 8px;
            background: linear-gradient(135deg, #ff6f00, #f57c00);
            color: white; border: none; border-radius: 10px;
            font-size: 13px; font-weight: 600; cursor: pointer; text-align: center;
        }
        .floating-reward-badge .frb-cta:active { transform: scale(0.97); }
        .floating-reward-badge .frb-close {
            position: absolute; top: 6px; right: 8px;
            width: 24px; height: 24px;
            background: rgba(0,0,0,0.08); border: none; border-radius: 50%;
            font-size: 12px; color: #999; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s;
        }
        .floating-reward-badge .frb-close:hover { background: rgba(0,0,0,0.15); }
        /* 만료 5분 이내 긴급 펄스 */
        .floating-reward-badge.urgent {
            animation: urgentPulse 1.5s ease-in-out infinite;
            border-color: #ff5722;
        }
        @keyframes urgentPulse {
            0%, 100% { box-shadow: 0 4px 16px rgba(255, 87, 34, 0.35); }
            50% { box-shadow: 0 4px 24px rgba(255, 87, 34, 0.6); transform: scale(1.03); }
        }
        /* ========== 게임 초대 배지 (플로팅 — 보상 배지와 디자인 통일) ========== */
        .game-invite-badge {
            position: absolute;
            top: 70px;
            right: 12px;
            z-index: 50;
            background: linear-gradient(135deg, #fff8e1, #fff3cd);
            border: 1.5px solid #ffd54f;
            border-radius: 16px;
            padding: 6px 16px;
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(255, 193, 7, 0.35);
            animation: gibSlideIn 0.4s ease, gibPulse 3s ease-in-out 1s infinite;
            transition: all 0.2s ease;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .game-invite-badge:active { transform: scale(0.95); }
        .game-invite-badge .gib-icon { font-size: 18px; }
        .game-invite-badge .gib-text { font-size: 14px; font-weight: 600; color: #e65100; white-space: nowrap; }
        .game-invite-badge .gib-close {
            width: 22px; height: 22px;
            background: rgba(0,0,0,0.08); border: none; border-radius: 50%;
            font-size: 11px; color: #999; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s; margin-left: 2px;
        }
        .game-invite-badge .gib-close:hover { background: rgba(0,0,0,0.15); }
        @keyframes gibSlideIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes gibPulse {
            0%, 100% { box-shadow: 0 2px 12px rgba(255, 193, 7, 0.3); }
            50% { box-shadow: 0 2px 20px rgba(255, 193, 7, 0.5); }
        }
        @keyframes gibSlideOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

        /* 등장/퇴장 */
        @keyframes frbSlideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes frbSlideOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }
        .floating-reward-badge.entering { animation: frbSlideIn 0.4s ease; }
        .floating-reward-badge.exiting { animation: frbSlideOut 0.3s ease forwards; }
        @media (max-width: 768px) {
            .game-invite-badge { top: 70px; }
            .floating-reward-badge { top: 70px; }
        }
        @media (max-width: 480px) {
            .game-invite-badge { right: 8px; top: 62px; padding: 4px 10px; }
            .game-invite-badge .gib-icon { font-size: 14px; }
            .game-invite-badge .gib-text { font-size: 11px; }
            .game-invite-badge .gib-close { width: 20px; height: 20px; font-size: 10px; }
            .floating-reward-badge { right: 8px; top: 62px; }
            .floating-reward-badge.collapsed { padding: 4px 8px; font-size: 11px; gap: 4px; }
            .floating-reward-badge .frb-icon { font-size: 14px; }
            .floating-reward-badge .frb-amount { font-size: 12px; }
            .floating-reward-badge .frb-timer { font-size: 10px; }
            .floating-reward-badge.expanded { min-width: 160px; max-width: 180px; padding: 8px 10px; }
            .floating-reward-badge .frb-header { font-size: 12px; margin-bottom: 6px; }
            .floating-reward-badge .frb-breakdown { font-size: 11px; margin-bottom: 8px; }
            .floating-reward-badge .frb-timer-line { font-size: 10px; margin-bottom: 8px; }
            .floating-reward-badge .frb-cta { font-size: 12px; padding: 6px; }
            .floating-reward-badge .frb-close { font-size: 14px; min-width: 26px; min-height: 26px; top: 4px; right: 6px; }
        }
        /* 뱃지 중앙 셀레브레이션 */
        .badge-entrance-overlay {
            position: absolute; inset: 0; z-index: 100;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0, 0, 0, 0.15);
            animation: badgeEntranceFadeIn 0.3s ease;
            pointer-events: none;
        }
        .badge-entrance-content {
            text-align: center;
            animation: badgeEntranceBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .badge-entrance-icon { font-size: 64px; margin-bottom: 8px; }
        .badge-entrance-amount {
            font-size: 32px; font-weight: 800; color: #e65100;
            text-shadow: 0 2px 8px rgba(255, 111, 0, 0.3);
        }
        .badge-entrance-sub { font-size: 16px; color: #666; margin-top: 4px; }
        .badge-entrance-total { font-size: 13px; color: #999; margin-top: 6px; }
        .badge-entrance-confetti {
            position: absolute; width: 8px; height: 8px; border-radius: 50%;
            animation: badgeConfettiFall 1.5s ease forwards;
        }
        .badge-entrance-overlay.shrinking .badge-entrance-content {
            animation: badgeShrinkToCorner 0.6s ease forwards;
        }
        .badge-entrance-overlay.shrinking { animation: badgeEntranceFadeOut 0.6s ease forwards; }
        @keyframes badgeEntranceFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes badgeEntranceFadeOut { from { opacity: 1; } to { opacity: 0; } }
        @keyframes badgeEntranceBounce {
            0% { transform: scale(0.3); opacity: 0; }
            60% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); }
        }
        @keyframes badgeShrinkToCorner {
            0% { transform: scale(1) translate(0, 0); }
            100% { transform: scale(0.2) translate(120px, -180px); opacity: 0; }
        }
        @keyframes badgeConfettiFall {
            0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
            100% { opacity: 0; transform: translateY(80px) scale(0.3) rotate(360deg); }
        }

        /* ========== Phase 3-B 끝 ========== */

        /* 콜백 취소 안심 메시지 */
        .callback-dismiss {
            position: absolute;
            inset: 0;
            z-index: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.8);
            animation: celebFadeIn 0.2s ease;
            pointer-events: none;
        }
        .callback-dismiss.dismissing {
            animation: celebFadeOut 0.3s ease forwards;
        }
        .dismiss-content {
            text-align: center;
            animation: dismissBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes dismissBounce {
            from { transform: scale(0.7); opacity: 0; }
            to   { transform: scale(1); opacity: 1; }
        }
        .dismiss-icon { font-size: 40px; margin-bottom: 8px; }
        .dismiss-msg { font-size: 15px; font-weight: 600; color: #555; }
        .dismiss-sub { font-size: 13px; color: #888; margin-top: 4px; }

        /* ========== 이벤트 카드 오버레이 ========== */
        /* ===== 이탈 방지 팝업 (exit-intent, 2026-06-26) ===== */
        .exit-intent-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            z-index: 1010;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            animation: exitIntentFadeIn 0.2s ease;
        }
        .exit-intent-overlay.hidden { display: none; }
        @keyframes exitIntentFadeIn { from { opacity: 0; } to { opacity: 1; } }

        .exit-intent-wrap {
            position: relative;
            width: 100%;
            max-width: 340px;
            background: white;
            border-radius: 22px;
            padding: 30px 22px 22px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.28);
            border: 3px solid var(--c-primary);
            text-align: center;
            animation: exitIntentPop 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }
        @keyframes exitIntentPop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

        .exit-intent-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 40px;
            height: 40px;
            border: none;
            background: transparent;
            font-size: 22px;
            color: #999;
            cursor: pointer;
            line-height: 1;
            border-radius: 50%;
            transition: background 0.15s, color 0.15s;
        }
        .exit-intent-close:hover { background: rgba(0,0,0,0.05); color: #555; }

        .exit-intent-emoji { font-size: 38px; line-height: 1; margin-bottom: 6px; }
        .exit-intent-title {
            font-size: 22px;
            font-weight: 800;
            color: var(--c-text);
            margin-bottom: 10px;
            letter-spacing: -0.5px;
        }
        .exit-intent-msg {
            font-size: 15px;
            color: var(--c-text-secondary);
            line-height: 1.5;
            margin-bottom: 18px;
        }
        .exit-intent-msg b { color: var(--c-primary-dark); font-weight: 800; }

        .exit-intent-progress {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }
        .exit-intent-progress-track {
            flex: 1;
            height: 10px;
            background: #eef0f3;
            border-radius: 6px;
            overflow: hidden;
        }
        .exit-intent-progress-fill {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
            border-radius: 6px;
            transition: width 0.5s ease;
        }
        .exit-intent-progress-pct {
            font-size: 13px;
            font-weight: 800;
            color: var(--c-primary-dark);
            min-width: 36px;
            text-align: right;
        }

        .exit-intent-dday {
            font-size: 13px;
            font-weight: 700;
            color: #c0392b;
            background: #fdeaea;
            border-radius: 8px;
            padding: 8px 10px;
            margin-bottom: 18px;
        }

        .exit-intent-actions {
            display: flex;
            gap: 10px;
        }
        .exit-intent-btn {
            flex: 1;
            padding: 13px 10px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .exit-intent-btn.primary {
            background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
            color: white;
            box-shadow: 0 4px 14px rgba(245,124,0,0.32);
        }
        .exit-intent-btn.secondary {
            background: white;
            color: var(--c-text-secondary);
            border: 1.5px solid var(--c-border);
        }
        .exit-intent-btn:active { transform: scale(0.97); }

        @media (max-width: 480px) {
            .exit-intent-wrap { max-width: 320px; padding: 26px 18px 18px; }
            .exit-intent-title { font-size: 20px; }
            .exit-intent-msg { font-size: 14px; }
            .exit-intent-actions { flex-direction: column; }
            .exit-intent-close { width: 44px; height: 44px; font-size: 24px; }
        }

        .event-overlay {
            position: fixed;
            inset: 0;
            background: rgba(253, 224, 71, 0.015);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        .event-overlay.hidden { display: none; }

        .event-wrap {
            width: 100%;
            max-width: 420px;
            max-height: 90vh;
            overflow-y: auto;
            background: white;
            border-radius: 22px;
            padding: 30px 22px 22px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.20);
            border: 3px solid #ffd54f;
        }
        .event-wrap-title {
            text-align: center;
            font-size: 22px;
            font-weight: 800;
            color: #222;
            margin-bottom: 6px;
            letter-spacing: -0.5px;
        }
        .event-wrap-title span {
            color: #E6AC00;
        }
        .event-wrap-sub {
            text-align: center;
            font-size: 14px;
            color: #777;
            margin-bottom: 22px;
        }
        .event-row {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
        }
        .event-row:last-of-type {
            margin-bottom: 0;
        }

        /* 공통 카드 */
        .event-card {
            flex: 1;
            background: var(--card-bg);
            border-radius: 16px;
            padding: 22px 14px 18px;
            text-align: center;
            border: 1.5px solid rgba(0,0,0,0.04);
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
        }
        .event-card:hover {
            border-color: var(--card-accent);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.08);
        }
        .no-hover .event-card:hover {
            border-color: rgba(0,0,0,0.04);
            transform: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .no-hover .event-close-btn:hover {
            transform: none;
            box-shadow: 0 4px 14px rgba(107,159,231,0.3);
        }
        .event-card .ev-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 12px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        }
        .event-card .ev-title {
            font-size: 12px;
            font-weight: 600;
            color: #888;
            margin-bottom: 6px;
        }
        .event-card .ev-highlight {
            font-size: 22px;
            font-weight: 900;
            color: var(--card-accent);
            margin-bottom: 8px;
            letter-spacing: -0.5px;
        }
        .event-card .ev-desc {
            font-size: 12px;
            color: #999;
            line-height: 1.5;
            word-break: keep-all;
        }

        /* AI 카드 전용 (아랫줄) */
        .event-card.ai-card {
            background: linear-gradient(135deg, #F8F5FF 0%, #EEF0FF 100%);
            padding: 22px 16px 18px;
        }
        .event-card.ai-card .ev-icon {
            width: auto;
            height: auto;
            border-radius: 0;
            background: none;
            box-shadow: none;
            gap: 8px;
            margin-bottom: 12px;
        }
        .ai-logo {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 700;
            color: white;
        }
        .ai-logo.gpt { background: #10A37F; }
        .ai-logo.claude { background: #D97706; }
        .ai-logo svg { width: 14px; height: 14px; fill: white; }

        .event-card.ai-card .ev-highlight {
            font-size: 18px;
        }
        .event-card.ai-card .ev-highlight em {
            font-style: normal;
            color: #FF6B2B;
            position: relative;
        }
        .event-card.ai-card .ev-highlight em::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 6px;
            background: rgba(255,107,43,0.15);
            border-radius: 2px;
        }
        .event-card.ai-card .ev-desc {
            font-size: 12px;
            color: #666;
            line-height: 1.6;
        }
        .event-card.ai-card .ev-desc strong {
            color: #333;
            font-weight: 700;
        }
        .ai-name-gpt {
            color: #10A37F;
            font-weight: 800;
        }
        .ai-name-claude {
            color: #D97706;
            font-weight: 800;
        }

        /* 하단 버튼 */
        .event-close-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            margin-top: 18px;
            padding: 15px;
            background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
            color: white;
            font-size: 15px;
            font-weight: 700;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(107,159,231,0.3);
            transition: transform 0.15s, box-shadow 0.15s;
            letter-spacing: -0.3px;
        }
        .event-close-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(107,159,231,0.4);
        }
        .event-close-btn:active {
            transform: scale(0.98);
        }

        /* 모바일 반응형 */
        @media (max-width: 480px) {
            .event-overlay {
                padding: 16px;
                align-items: center;
                background: rgba(0,0,0,0.35);
            }
            .event-wrap { padding: 14px 12px 10px; border-radius: 14px; max-height: 80vh; overflow-y: auto; }
            .event-wrap-title { font-size: 16px; margin-bottom: 2px; }
            .event-wrap-sub { font-size: 11px; margin-bottom: 8px; }
            .event-row { gap: 6px; margin-bottom: 6px; }
            .event-card { padding: 8px 8px 6px; border-radius: 10px; }
            .event-card .ev-icon { width: 28px; height: 28px; font-size: 14px; margin-bottom: 2px; }
            .event-card .ev-title { font-size: 10px; margin-bottom: 1px; }
            .event-card .ev-highlight { font-size: 14px; }
            .event-card .ev-desc { font-size: 10px; }
            .event-card.ai-card { padding: 8px 10px 6px; }
            .event-card.ai-card .ev-icon { margin-bottom: 2px; }
            .event-card.ai-card .ev-highlight { font-size: 13px; }
            .event-card.ai-card .ev-desc { font-size: 10px; line-height: 1.3; }
            .ai-logo { font-size: 9px; padding: 2px 6px; }
            .event-close-btn { font-size: 13px; padding: 10px; margin-top: 6px; }

            /* 모바일: 축하 효과 */
            .celeb-icon { font-size: 48px; margin-bottom: 8px; }
            .celeb-title { font-size: 18px; }
            .celeb-sub { font-size: 12px; }
            .celeb-confetti { width: 6px; height: 9px; }
            @keyframes celebConfettiFall {
                0%   { opacity: 1; transform: translateY(-10px) rotate(0deg); }
                100% { opacity: 0; transform: translateY(45vh) rotate(720deg); }
            }

            /* 모바일: 취소 안심 메시지 */
            .dismiss-icon { font-size: 32px; margin-bottom: 6px; }
            .dismiss-msg { font-size: 13px; }
            .dismiss-sub { font-size: 11px; }

            /* 모바일: 스파클/컨페티 */
            .milestone-sparkle { font-size: 16px; }
            .confetti-piece { width: 6px; height: 9px; }
        }

        /* 모바일 인라인 이벤트 카드 */
        .event-inline-card {
            background: linear-gradient(135deg, #f8f5ff 0%, #eef4ff 100%);
            border-radius: 14px;
            padding: 12px 14px 10px;
            box-shadow: 0 2px 12px rgba(102,126,234,0.12);
            border: 1px solid rgba(102,126,234,0.15);
        }
        .event-inline-title {
            text-align: center;
            font-size: 15px;
            margin-bottom: 8px;
            letter-spacing: -0.3px;
        }
        .event-inline-row {
            display: flex;
            gap: 6px;
            margin-bottom: 6px;
        }
        .event-inline-item {
            flex: 1;
            border-radius: 10px;
            padding: 8px 6px;
            text-align: center;
            font-size: 12px;
            line-height: 1.4;
        }
        .ei-icon { display: block; font-size: 18px; margin-bottom: 2px; }
        .ei-text { display: block; font-size: 12px; }
        .event-inline-ai {
            text-align: center;
            font-size: 11px;
            color: #666;
            padding: 4px 0 0;
        }

        /* ========== 마크다운 렌더링 스타일 ========== */
        .message.bot .message-bubble {
            white-space: normal;
        }
        .message.bot .message-bubble p {
            margin: 0 0 8px 0;
            line-height: 1.6;
        }
        .message.bot .message-bubble p:last-child {
            margin-bottom: 0;
        }
        .message.bot .message-bubble h1,
        .message.bot .message-bubble h2,
        .message.bot .message-bubble h3 {
            margin: 20px 0 8px 0;
            padding-bottom: 6px;
            border-bottom: 1px solid #e5e7eb;
            line-height: 1.4;
            color: #0F172A;
        }
        .message.bot .message-bubble h4 {
            margin: 16px 0 6px 0;
            line-height: 1.4;
            font-size: var(--fs-body);
            color: #334155;
        }
        .message.bot .message-bubble h1 { font-size: var(--fs-subtitle); }
        .message.bot .message-bubble h2 { font-size: var(--fs-subtitle); }
        .message.bot .message-bubble h3 { font-size: var(--fs-subtitle); }
        .message.bot .message-bubble h2:first-child,
        .message.bot .message-bubble h3:first-child {
            margin-top: 4px;
        }
        .message.bot .message-bubble code {
            background: #f0f0f0;
            padding: 1px 5px;
            border-radius: 4px;
            font-size: var(--fs-sub);
            font-family: 'Courier New', monospace;
        }
        .message.bot .message-bubble pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 10px 14px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 8px 0;
            font-size: var(--fs-sub);
            line-height: 1.5;
        }
        .message.bot .message-bubble pre code {
            background: none;
            padding: 0;
            color: inherit;
        }
        .message.bot .message-bubble ul,
        .message.bot .message-bubble ol {
            margin: 6px 0;
            padding-left: 20px;
        }
        .message.bot .message-bubble li {
            margin-bottom: 4px;
            line-height: 1.5;
        }
        .message.bot .message-bubble blockquote {
            border-left: 3px solid var(--c-primary);
            margin: 8px 0;
            padding: 4px 12px;
            color: #555;
            background: #f8f9fa;
            border-radius: 0 6px 6px 0;
        }
        .message.bot .message-bubble table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin: 14px 0;
            font-size: var(--fs-sub);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
        }
        .message.bot .message-bubble th {
            background: linear-gradient(135deg, #f0f4ff, #eef1fb);
            font-weight: 600;
            padding: 10px 12px;
            border-bottom: 2px solid #dde3f0;
            color: #374151;
            font-size: var(--fs-small);
        }
        .message.bot .message-bubble td {
            padding: 9px 12px;
            border-bottom: 1px solid #f1f5f9;
            color: #475569;
        }
        .message.bot .message-bubble tr:nth-child(even) {
            background: #f8fafc;
        }
        .message.bot .message-bubble tr:last-child td {
            border-bottom: none;
        }
        .message.bot .message-bubble a {
            color: var(--c-primary);
            text-decoration: underline;
        }
        .message.bot .message-bubble strong {
            font-weight: 600;
            color: #1E293B;
        }
        .message.bot .message-bubble td strong {
            color: inherit;
        }
        /* 인라인 통신사 선택 버튼 */
        .inline-carrier-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #e5e7eb;
        }
        .carrier-select-btn {
            padding: 8px 16px;
            border: 1px solid #d1d5db;
            border-radius: 20px;
            background: #f9fafb;
            font-size: var(--fs-sub);
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .carrier-select-btn:hover {
            background: #e5e7eb;
            border-color: #9ca3af;
        }
        .carrier-select-btn:active {
            background: #d1d5db;
        }
        /* quickReplies 인라인 버튼 (메시지 버블 안) */
        .inline-quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #e5e7eb;
        }
        .quick-reply-btn {
            padding: 8px 16px;
            border: 1px solid var(--c-primary);
            border-radius: 20px;
            background: white;
            color: var(--c-primary);
            font-size: var(--fs-sub);
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .quick-reply-btn:hover {
            background: var(--c-primary);
            color: white;
        }
        .quick-reply-btn:active {
            transform: scale(0.96);
        }
        .quick-reply-btn:disabled {
            opacity: 0.5;
            cursor: default;
            pointer-events: none;
        }
        @media (max-width: 480px) {
            .quick-reply-btn {
                padding: 7px 14px;
            }
        }
        /* 메시지 등장 애니메이션 */
        .message.bot {
            animation: msgFadeIn 0.3s ease-out;
        }
        @keyframes msgFadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        /* 아코디언 (details/summary) */
        .message.bot .message-bubble details {
            margin: 12px 0;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
        }
        .message.bot .message-bubble summary {
            padding: 10px 14px;
            background: #f9fafb;
            cursor: pointer;
            font-weight: 600;
            color: #374151;
            font-size: var(--fs-sub);
            user-select: none;
            list-style: none;
        }
        .message.bot .message-bubble summary::before {
            content: '▶ ';
            font-size: var(--fs-tiny);
            color: #667eea;
        }
        .message.bot .message-bubble details[open] summary::before {
            content: '▼ ';
        }
        .message.bot .message-bubble details > *:not(summary) {
            padding: 0 14px 10px;
        }

        /* 스트리밍 메시지: message-content에도 동일 마크다운 스타일 적용 */
        .message.bot .message-content {
            display: block;
            max-width: 90%;
            padding: var(--space-md) var(--space-lg);
            border-radius: 18px;
            word-wrap: break-word;
            background: white;
            color: var(--c-text);
            box-shadow: var(--shadow-card);
            border-bottom-left-radius: 4px;
            white-space: normal;
        }
        .message.bot.streaming .message-content {
            white-space: pre-wrap;
        }
        .message.bot .message-content p {
            margin: 0 0 8px 0;
            line-height: 1.6;
        }
        .message.bot .message-content p:last-child {
            margin-bottom: 0;
        }
        .message.bot .message-content h1,
        .message.bot .message-content h2,
        .message.bot .message-content h3 {
            margin: 12px 0 6px 0;
            line-height: 1.3;
        }
        .message.bot .message-content h1 { font-size: var(--fs-subtitle); }
        .message.bot .message-content h2 { font-size: var(--fs-subtitle); }
        .message.bot .message-content h3 { font-size: var(--fs-subtitle); }
        .message.bot .message-content code {
            background: #f0f0f0;
            padding: 1px 5px;
            border-radius: 4px;
            font-size: var(--fs-sub);
            font-family: 'Courier New', monospace;
        }
        .message.bot .message-content pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 10px 14px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 8px 0;
            font-size: var(--fs-sub);
            line-height: 1.5;
        }
        .message.bot .message-content pre code {
            background: none;
            padding: 0;
            color: inherit;
        }
        .message.bot .message-content ul,
        .message.bot .message-content ol {
            margin: 6px 0;
            padding-left: 20px;
        }
        .message.bot .message-content li {
            margin-bottom: 4px;
            line-height: 1.5;
        }
        .message.bot .message-content blockquote {
            border-left: 3px solid var(--c-primary);
            margin: 8px 0;
            padding: 4px 12px;
            color: #555;
            background: #f8f9fa;
            border-radius: 0 6px 6px 0;
        }
        .message.bot .message-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 8px 0;
            font-size: var(--fs-sub);
        }
        .message.bot .message-content th,
        .message.bot .message-content td {
            border: 1px solid #e2e8f0;
            padding: 6px 10px;
            text-align: left;
        }
        .message.bot .message-content th {
            background: #f0f4f8;
            font-weight: 600;
        }
        .message.bot .message-content a {
            color: var(--c-primary);
            text-decoration: underline;
        }
        .message.bot .message-content strong {
            font-weight: 600;
        }

        /* ========== textarea 입력 스타일 ========== */
        .chat-input {
            resize: none;
            overflow-y: auto;
            line-height: var(--lh-normal);
            max-height: 120px;
            font-family: inherit;
        }
        .char-counter {
            text-align: right;
            font-size: var(--fs-tiny);
            color: var(--c-text-muted);
            padding: 0 var(--space-lg) 4px;
            background: white;
        }
        .char-counter.warning {
            color: var(--c-danger);
        }
        @media (max-width: 480px) {
            .char-counter { padding: 0 10px 2px; }
        }

        /* ========== 연결 상태 배너 ========== */
        .connection-banner {
            display: none;
            padding: 8px 16px;
            text-align: center;
            font-size: var(--fs-sub);
            font-weight: 500;
            z-index: 10;
            animation: slideDown 0.3s ease;
        }
        @keyframes slideDown {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .connection-banner.disconnected {
            display: block;
            background: #fee2e2;
            color: #dc2626;
            border-bottom: 2px solid #fca5a5;
        }
        .connection-banner.reconnecting {
            display: block;
            background: #fef3c7;
            color: #d97706;
            border-bottom: 2px solid #fcd34d;
        }
        .connection-banner.reconnected {
            display: block;
            background: #d1fae5;
            color: #059669;
            border-bottom: 2px solid #6ee7b7;
        }

        /* ========== 시스템 메시지 ========== */
        .system-message {
            text-align: center;
            margin: 8px 0;
            animation: fadeIn 0.3s ease;
        }
        .system-message-content {
            display: inline-block;
            padding: 6px 14px;
            border-radius: 12px;
            font-size: var(--fs-small);
            font-weight: 500;
        }
        .system-message.error .system-message-content {
            background: #fee2e2;
            color: #dc2626;
        }
        .system-message.info .system-message-content {
            background: #e0e7ff;
            color: #4338ca;
        }
        .system-message.success .system-message-content {
            background: #d1fae5;
            color: #059669;
        }

        /* ========== 실패 메시지 + 재시도 ========== */
        .message.failed .message-bubble {
            background: #fee2e2;
            border: 1px solid #fca5a5;
        }
        .retry-button {
            display: inline-block;
            margin-top: 6px;
            padding: 4px 12px;
            background: white;
            border: 1px solid var(--c-danger);
            color: var(--c-danger);
            border-radius: var(--radius-pill);
            font-size: var(--fs-small);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .retry-button:hover {
            background: var(--c-danger);
            color: white;
        }
        .bot-retry-wrap {
            text-align: left;
            padding-left: 44px;
            margin: 4px 0 8px;
        }

        /* ========== 맞춤 추천 카드 ========== */
        .rec-cards-container { display: flex; flex-direction: column; gap: 12px; }

        /* 추천 순위 카드도 같은 줄카드로 (2026-08-26 대표 확정 시안 ③ ③번) */
        .rec-card {
            position: relative;
            background: #fff; border: 1px solid #e0e0e0; border-radius: 12px;
            padding: 14px 12px; cursor: pointer; transition: all 0.2s;
            display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 10px; align-items: center;
            animation: cardEntrance 0.3s ease backwards; margin-top: 8px;
        }
        .rec-card .rec-rank { grid-column: 1; grid-row: 1 / 4; white-space: nowrap; font-size: 20px; }
        /* 순위 라벨(🏆 최고 혜택 등) = 카드 위에 걸쳐 잘리던 것을 줄 안으로 */
        .rec-card .rec-tier-label, .rec-card .rec-label-best { position: static; grid-column: 2; grid-row: 1; justify-self: start; margin-bottom: 3px; }
        .rec-card .rec-header { grid-column: 2; grid-row: 2; }
        .rec-card .rec-reasons { grid-column: 2; grid-row: 3; }
        .rec-card .rec-price { grid-column: 3; grid-row: 1 / 4; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
        .rec-card .rec-benefit-detail { grid-column: 2 / 4; grid-row: 4; justify-content: flex-end; }
        .rec-card .rec-price-original { grid-column: 2 / 4; grid-row: 5; text-align: right; }
        /* 아랫줄 「이 상품으로 가입 신청 →」 = 안 고른 카드에 보임 (2026-09-06 안 B · 전에는 숨김) · 고른 카드는 위 .rec-card.sel .rec-cta 가 숨김 */
        .rec-card .rec-cta { grid-column: 1 / -1; grid-row: 7; margin-top: 6px; padding: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--c-primary); background: rgba(245, 124, 0, 0.07); border-radius: 8px; }
        .rec-card:nth-child(2) { animation-delay: 80ms; }
        .rec-card:nth-child(3) { animation-delay: 160ms; }
        .rec-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-hover); }

        .rec-card-top, .rec-card-premium {
            border: 2px solid var(--c-primary); background: linear-gradient(135deg, #f8f9ff, #fff);
        }
        .rec-card-popular {
            border-left: 3px solid #2196f3;
        }
        .rec-card-basic {
            border-left: 3px solid #66bb6a;
        }

        .rec-rank { font-size: 24px; grid-row: 1 / 3; align-self: center; text-align: center; }

        .rec-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .rec-badge {
            display: inline-block; padding: 3px 10px; border-radius: 12px;
            font-size: 12px; font-weight: 700;
        }
        .rec-badge-carrier {
            background: var(--c-primary); color: white;
        }
        .rec-badge-speed {
            background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9;
        }
        .rec-badge-product {
            background: #f5f5f5; color: #555; border: 1px solid #e0e0e0;
        }
        .rec-badge-tv {
            background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb;
        }

        .rec-benefit-detail {
            grid-column: 2;
            padding: 4px 0; font-size: 11px; color: #666;
            display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
        }
        .rec-benefit-detail .benefit-base { color: #e65100; }
        .rec-benefit-detail .benefit-extra { color: #e74c3c; }
        .rec-benefit-detail .benefit-opt-tag {
            display: inline-block;
            padding: 1px 7px; border-radius: 8px;
            font-size: 10px; font-weight: 500;
            background: #fff3e0; color: #e65100; border: 1px solid #ffe0b2;
        }

        .rec-label-best, .rec-tier-label {
            position: absolute; top: -8px; left: 16px;
            color: white; padding: 2px 10px; border-radius: 10px;
            font-size: 11px; font-weight: 700;
            z-index: 1;
        }
        .rec-label-best { background: linear-gradient(135deg, #ff6b35, #e74c3c); box-shadow: 0 2px 4px rgba(231,76,60,0.3); }
        .rec-tier-premium { background: linear-gradient(135deg, #ff6b35, #e74c3c); box-shadow: 0 2px 4px rgba(231,76,60,0.3); }
        .rec-tier-popular { background: linear-gradient(135deg, #2196f3, #1976d2); box-shadow: 0 2px 4px rgba(33,150,243,0.3); }
        .rec-tier-basic { background: linear-gradient(135deg, #66bb6a, #43a047); box-shadow: 0 2px 4px rgba(76,175,80,0.3); }

        .rec-price { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; grid-column: 2; }
        .rec-monthly { font-size: 18px; font-weight: 700; }
        .rec-monthly small { font-size: 12px; font-weight: 400; }
        .rec-benefit-badge {
            display: inline-flex; align-items: center; gap: 4px;
            background: linear-gradient(135deg, #fff8e1, #fff3cd);
            border: 1px solid #f5c542;
            padding: 3px 10px; border-radius: 12px;
            font-size: 13px; font-weight: 700; color: #e67e22;
        }
        .rec-benefit-badge .gift-icon { font-size: 14px; }
        .rec-benefit-badge .benefit-plus {
            font-size: 10px; font-weight: 700; color: #e74c3c; margin-left: 1px;
            vertical-align: super; line-height: 1;
        }

        .rec-bundle { font-size: 12px; color: #888; grid-column: 2; margin-top: 2px; }
        .rec-bundle-label { font-size: 11px; color: #5A8BD4; margin-left: 4px; font-weight: 500; }
        .rec-bundle-detail {
            font-size: 11px; color: #888; grid-column: 2; margin-top: 3px;
            padding: 4px 0;
            line-height: 1.5;
        }
        .rec-discount {
            font-size: 12px; color: #e74c3c; grid-column: 2; margin-top: 6px;
            font-weight: 600; background: rgba(0,0,0,0.04); padding: 6px 10px;
            border-radius: 8px; line-height: 1.5;
        }
        .rec-discount small { font-weight: 400; color: #999; }
        .rec-phone-badge {
            display: inline-block; font-size: 11px; color: #e74c3c; font-weight: 600;
            background: rgba(231,76,60,0.08); padding: 2px 7px; border-radius: 6px;
            margin-left: 6px; vertical-align: middle;
        }
        .rec-price-original {
            font-size: 12px; color: #999; text-decoration: line-through;
            grid-column: 2; margin-top: 2px;
        }

        .rec-reasons { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2; margin-top: 8px; }
        .rec-reason { font-size: 11px; color: #555; background: #f5f5f5; padding: 3px 8px; border-radius: 8px; }

        .rec-cta {
            grid-column: 1 / -1; text-align: center; margin: 12px 0 0; padding: 10px;
            color: var(--c-primary); font-size: 13px; font-weight: 600;
            background: rgba(107,159,231,0.08); border: 1px solid rgba(107,159,231,0.2);
            border-radius: 8px; transition: all 0.15s;
        }
        .rec-cta:hover {
            background: rgba(107,159,231,0.15); border-color: rgba(107,159,231,0.4);
        }

        .rec-card.selected,
        .rec-card-upgrade.selected {
            background: #f0f5ff; border-color: var(--c-primary); border-width: 2px;
            box-shadow: 0 0 0 3px rgba(107,159,231,0.12);
        }
        .rec-card-alt.selected {
            background: #eef7ee; border-color: #388e3c; border-width: 2px;
            box-shadow: 0 0 0 3px rgba(76,175,80,0.12);
        }
        .rec-card.selected .rec-cta,
        .rec-card-upgrade.selected .rec-cta {
            background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
            color: white; border: none; border-radius: 0 0 10px 10px; margin: 12px -16px -16px;
            padding: 10px 16px;
        }
        .rec-card.dimmed { opacity: 0.45; pointer-events: none; transform: scale(0.98); }

        .rec-hint-line {
            margin-top: 6px; padding-top: 6px;
            border-top: 1px dashed #e2e8f0;
            font-size: 12px; color: var(--c-primary); line-height: 1.4;
        }

        /* 안내 배너 (Tier B/C) */
        .rec-info-banner {
            background: #f0f4ff; border: 1px solid #c5cae9; border-radius: 8px;
            padding: 10px 14px; margin-bottom: 12px; font-size: 13px; color: #37474f;
            line-height: 1.5;
        }
        .rec-info-banner::before { content: 'ℹ️ '; }

        .callback-time-banner {
            background: #fff8e1; border: 1.5px solid #ffc107; border-radius: 8px;
            padding: 10px 14px; margin-bottom: 10px; font-size: 13px; color: #e65100;
            line-height: 1.5; font-weight: 500;
        }

        /* 업그레이드 카드 섹션 (Tier B) */
        .rec-upgrade-section { margin-top: 14px; padding-top: 12px; border-top: 2px dashed #e0e0e0; }
        .rec-upgrade-label { font-size: 12px; color: #666; margin-bottom: 8px; font-weight: 600; }
        .rec-card-upgrade {
            border: 1.5px dashed #5A8BD4; background: #f8f9ff;
            border-radius: 12px; padding: 14px; cursor: pointer; transition: all 0.2s;
            animation: cardEntrance 0.3s ease backwards; animation-delay: 240ms;
        }
        .rec-card-upgrade:hover { border-color: var(--c-primary); box-shadow: var(--shadow-hover); }
        .rec-card-upgrade .rec-upgrade-info { font-size: 13px; color: #37474f; margin-bottom: 8px; }
        .rec-card-upgrade .rec-upgrade-price { font-size: 16px; font-weight: 700; color: #333; }
        .rec-card-upgrade .rec-upgrade-diff { font-size: 12px; color: #888; margin-left: 8px; }
        .rec-card-upgrade .rec-cta { text-align: center; margin: 12px 0 0; padding: 10px; color: var(--c-primary); font-size: 13px; font-weight: 600; background: rgba(107,159,231,0.08); border: 1px solid rgba(107,159,231,0.2); border-radius: 8px; }
        .rec-card-upgrade.selected .rec-cta { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)); color: white; border: none; border-radius: 0 0 10px 10px; margin: 12px -14px -14px; padding: 10px 14px; }
        .rec-card-upgrade.dimmed { opacity: 0.45; pointer-events: none; }

        /* 대안 카드 섹션 (Tier C) */
        .rec-alt-section { margin-top: 14px; padding-top: 12px; border-top: 2px dashed #e0e0e0; }
        .rec-alt-label { font-size: 12px; color: #666; margin-bottom: 8px; font-weight: 600; }
        .rec-card-alt {
            border: 1.5px dashed #4caf50; background: #f1f8e9;
            border-radius: 12px; padding: 14px; cursor: pointer; transition: all 0.2s;
            animation: cardEntrance 0.3s ease backwards; animation-delay: 240ms;
        }
        .rec-card-alt:hover { border-color: #388e3c; box-shadow: var(--shadow-hover); }
        .rec-card-alt .rec-alt-info { font-size: 13px; color: #37474f; margin-bottom: 4px; }
        .rec-card-alt .rec-alt-price { font-size: 16px; font-weight: 700; color: #333; }
        .rec-card-alt .rec-alt-desc { font-size: 12px; color: #555; margin-top: 4px; }
        .rec-card-alt .rec-cta { text-align: center; margin: 12px 0 0; padding: 10px; color: #388e3c; font-size: 13px; font-weight: 600; background: rgba(76,175,80,0.08); border: 1px solid rgba(76,175,80,0.2); border-radius: 8px; }
        .rec-card-alt .rec-cta:hover { background: rgba(76,175,80,0.15); border-color: rgba(76,175,80,0.4); }
        .rec-card-alt.selected .rec-cta { background: linear-gradient(135deg, #4caf50, #388e3c); color: white; border: none; border-radius: 0 0 10px 10px; margin: 12px -14px -14px; padding: 10px 14px; }
        .rec-card-alt.dimmed { opacity: 0.45; pointer-events: none; }

        /* ========== 신뢰 카드 (회사 메타 질문 KB 직답) ========== */
        .trust-card-container {
            padding: 8px 16px;
            animation: promoSlideIn 0.4s ease-out;
        }
        .trust-card {
            background: linear-gradient(135deg, #fff8e1 0%, #ffffff 60%, #fff3e0 100%);
            border: 1px solid #ffd180;
            border-radius: 16px;
            box-shadow: 0 4px 14px rgba(245, 124, 0, 0.12);
            padding: 18px 16px;
            max-width: 100%;
        }
        .trust-card-slogan {
            font-size: 20px;
            font-weight: 900;
            text-align: center;
            background: linear-gradient(90deg, #F57C00, #FFB300);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: #F57C00;
            margin-bottom: 6px;
        }
        .trust-card-subtitle {
            font-size: 13px;
            text-align: center;
            color: #555;
            margin-bottom: 12px;
        }
        .trust-card-logos {
            display: flex;
            justify-content: center;
            gap: 14px;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }
        .trust-card-logo {
            height: 36px;
            object-fit: contain;
            filter: grayscale(0.1);
            transition: filter 0.2s;
        }
        .trust-card-logo:hover { filter: grayscale(0); }
        .trust-ai-box {
            background: #fff;
            border: 2px solid transparent;
            background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #7b1fa2, #F57C00);
            background-origin: border-box;
            background-clip: padding-box, border-box;
            border-radius: 12px;
            padding: 12px 14px;
            margin: 8px 0 14px;
            text-align: center;
        }
        .trust-ai-title {
            font-size: 14px;
            font-weight: 800;
            color: #333;
            margin-bottom: 8px;
        }
        .trust-ai-stack {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            margin: 8px 0;
        }
        .trust-ai-badge {
            display: inline-block;
            background: #F57C00;
            color: #fff;
            padding: 4px 10px;
            border-radius: 16px;
            font-size: 13px;
            font-weight: 700;
        }
        .trust-ai-plus {
            color: #F57C00;
            font-weight: 900;
            font-size: 14px;
        }
        .trust-ai-tagline {
            font-size: 12px;
            color: #555;
            font-style: italic;
            margin-top: 6px;
        }
        .trust-points-list {
            list-style: none;
            padding: 0;
            margin: 12px 0;
        }
        .trust-point-item {
            font-size: 13px;
            color: #333;
            padding: 4px 0;
            line-height: 1.5;
        }
        .trust-section-summary {
            cursor: pointer;
            font-size: 14px;
            font-weight: 700;
            color: #F57C00;
            padding: 10px 12px;
            background: #fff3e0;
            border-radius: 8px;
            margin-top: 10px;
            list-style: none;
            user-select: none;
        }
        .trust-section-summary::-webkit-details-marker { display: none; }
        .trust-section-summary::after {
            content: ' ▼';
            font-size: 11px;
            opacity: 0.7;
        }
        details[open] > .trust-section-summary::after { content: ' ▲'; }
        .trust-comparison-details, .trust-ai-features-details {
            margin-top: 10px;
        }
        .trust-table-wrap {
            margin-top: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .trust-comparison-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }
        .trust-comparison-table th,
        .trust-comparison-table td {
            padding: 8px 6px;
            border-bottom: 1px solid #f0e0c0;
            text-align: center;
        }
        .trust-comparison-table th {
            background: #fff8e1;
            font-weight: 700;
            color: #6d4c41;
        }
        .trust-comparison-table td:first-child {
            text-align: left;
            font-weight: 600;
            color: #555;
            white-space: nowrap;
        }
        .trust-col-highlight {
            background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
            color: #E65100 !important;
            font-weight: 700;
        }
        .trust-feature-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 10px;
        }
        .trust-feature-box {
            background: #fff;
            border: 1px solid #ffd180;
            border-radius: 10px;
            padding: 10px;
        }
        .trust-feature-icon {
            font-size: 22px;
            text-align: center;
            margin-bottom: 4px;
        }
        .trust-feature-title {
            font-size: 12px;
            font-weight: 700;
            color: #E65100;
            text-align: center;
            margin-bottom: 4px;
            line-height: 1.3;
        }
        .trust-feature-desc {
            font-size: 11px;
            color: #666;
            text-align: center;
            line-height: 1.4;
        }
        /* contact_info — 꿀봇 고객센터 (라 하이브리드 ③) */
        .trust-contact-box {
            background: #fffdf6;
            border: 1px solid #ffd180;
            border-radius: 10px;
            padding: 14px 16px;
            margin-top: 14px;
            text-align: center;
        }
        .trust-contact-label {
            font-size: 12px;
            font-weight: 700;
            color: #6b4f2a;
            letter-spacing: 0.3px;
            margin-bottom: 6px;
        }
        .trust-contact-phone {
            font-size: 22px;
            font-weight: 900;
            color: #E65100;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
            font-variant-numeric: tabular-nums;
        }
        .trust-contact-phone a {
            color: inherit;
            text-decoration: none;
        }
        .trust-contact-hours {
            font-size: 11.5px;
            color: #707070;
            line-height: 1.4;
        }
        .trust-contact-tagline {
            font-size: 11px;
            color: #888;
            margin-top: 6px;
            font-style: italic;
        }
        .trust-verification-hint {
            font-size: 12px;
            color: #555;
            background: #f5f5f5;
            padding: 10px 12px;
            border-radius: 8px;
            margin-top: 12px;
            border-left: 3px solid #F57C00;
        }
        .trust-footer-slogan {
            text-align: center;
            font-size: 14px;
            font-weight: 800;
            color: #F57C00;
            margin: 14px 0 10px;
            padding: 10px;
            background: linear-gradient(90deg, transparent, #fff8e1, transparent);
            border-radius: 8px;
        }
        .trust-cta-wrap {
            display: flex;
            gap: 8px;
            margin-top: 8px;
            flex-wrap: wrap;
        }
        .trust-cta-btn {
            flex: 1;
            min-width: 130px;
            padding: 12px 10px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.1s, box-shadow 0.2s;
            border: none;
        }
        .trust-cta-btn:active { transform: scale(0.97); }
        .trust-cta-primary {
            background: linear-gradient(135deg, #F57C00 0%, #FF9800 100%);
            color: #fff;
            box-shadow: 0 2px 6px rgba(245, 124, 0, 0.3);
        }
        .trust-cta-primary:hover { box-shadow: 0 4px 10px rgba(245, 124, 0, 0.5); }
        .trust-cta-secondary {
            background: #fff;
            color: #F57C00;
            border: 1.5px solid #F57C00;
        }
        .trust-cta-secondary:hover { background: #fff8e1; }

        @media (max-width: 480px) {
            .trust-card { padding: 14px 12px; }
            .trust-card-slogan { font-size: 17px; }
            .trust-card-subtitle { font-size: 12px; }
            .trust-card-logo { height: 28px; }
            .trust-ai-title { font-size: 13px; }
            .trust-ai-badge { font-size: 12px; padding: 3px 8px; }
            .trust-feature-grid { grid-template-columns: 1fr; }
            .trust-contact-phone { font-size: 20px; }
            .trust-contact-label { font-size: 11.5px; }
            .trust-comparison-table { font-size: 11px; }
            .trust-comparison-table th, .trust-comparison-table td { padding: 6px 4px; }
            .trust-cta-btn { font-size: 12px; min-width: 100%; }
        }

        /* ========== 사은품 비교 테이블 카드 ========== */
        .benefit-card-container {
            padding: 8px 16px;
            animation: promoSlideIn 0.4s ease-out;
        }
        .benefit-card-container.benefit-card-fadeout {
            animation: promoFadeOut 0.3s ease-in forwards;
        }
        .benefit-card {
            background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
            border: 1px solid #c8ddf5;
            border-radius: 12px;
            padding: 16px;
            position: relative;
            box-shadow: 0 2px 8px rgba(107, 159, 231, 0.1);
        }
        .benefit-card-header {
            display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
        }
        .benefit-card-title {
            font-size: 15px; font-weight: 700; color: #333;
        }
        .benefit-card-dismiss {
            position: absolute; top: 8px; right: 8px;
            width: 24px; height: 24px; border-radius: 50%;
            background: rgba(0,0,0,0.05); border: none;
            font-size: 16px; color: #999; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .benefit-toggle {
            display: flex; gap: 4px; margin-bottom: 12px;
            background: #e8edf5; border-radius: 8px; padding: 3px;
        }
        .benefit-toggle-btn {
            flex: 1; padding: 6px 12px; border: none; border-radius: 6px;
            font-size: 13px; font-weight: 600; cursor: pointer;
            background: transparent; color: #666; transition: all 0.2s;
        }
        .benefit-toggle-btn.active {
            background: white; color: var(--c-primary);
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }
        .benefit-table {
            width: 100%; border-collapse: collapse; font-size: 13px;
        }
        .benefit-table th {
            background: #f5f8fc; padding: 8px 6px;
            font-weight: 600; color: #555; text-align: center;
            border-bottom: 2px solid #dce5f0;
        }
        .benefit-table td {
            padding: 8px 6px; text-align: center;
            border-bottom: 1px solid #eef2f8; color: #333;
        }
        .benefit-table td:first-child {
            font-weight: 600; color: #555; text-align: left;
        }
        .benefit-amount-highlight {
            background: linear-gradient(135deg, #fff3cd, #fff8e1);
            border-radius: 4px; padding: 2px 6px;
            font-weight: 700; color: #e67e22;
        }
        .benefit-extra-note {
            margin-top: 10px; padding: 8px 10px;
            background: #f8f9fa; border-radius: 8px;
            font-size: 12px; color: #666; text-align: center;
        }
        .benefit-card-cta {
            display: block; width: 100%; margin-top: 12px;
            padding: 10px 20px; border: none; border-radius: 20px;
            background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
            color: white; font-size: 14px; font-weight: 600;
            cursor: pointer; text-align: center;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .benefit-card-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(107, 159, 231, 0.3);
        }

        /* ========== 업셀 카드 (TV 결합 제안) ========== */
        .upsell-card-container {
            padding: 8px 16px;
            animation: promoSlideIn 0.4s ease-out;
        }
        .upsell-card-container.upsell-card-fadeout {
            animation: promoFadeOut 0.3s ease-in forwards;
        }
        .upsell-card {
            background: linear-gradient(135deg, #f5fff0 0%, #ffffff 100%);
            border: 1px solid #c2e6b8;
            border-radius: 12px;
            padding: 16px;
            position: relative;
            box-shadow: 0 2px 8px rgba(74, 222, 128, 0.1);
        }
        .upsell-card-header {
            display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
        }
        .upsell-card-title {
            font-size: 15px; font-weight: 700; color: #333;
        }
        .upsell-card-dismiss {
            position: absolute; top: 8px; right: 8px;
            width: 24px; height: 24px; border-radius: 50%;
            background: rgba(0,0,0,0.05); border: none;
            font-size: 16px; color: #999; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .upsell-comparison {
            background: white; border: 1px solid #e8f0e4;
            border-radius: 10px; padding: 12px; margin-bottom: 8px;
        }
        .upsell-comparison:last-of-type { margin-bottom: 0; }
        .upsell-carrier-name {
            font-size: 13px; font-weight: 700; color: #333; margin-bottom: 8px;
            padding-bottom: 6px; border-bottom: 1px solid #f0f0f0;
        }
        .upsell-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 4px 0; font-size: 12px; color: #555;
        }
        .upsell-row-label { font-weight: 500; }
        .upsell-row-values { display: flex; align-items: center; gap: 6px; }
        .upsell-old-value { color: #999; text-decoration: line-through; }
        .upsell-arrow { color: #999; font-size: 10px; }
        .upsell-new-value { font-weight: 700; color: #2e7d32; }
        .upsell-row-block { display: flex; flex-direction: column; align-items: flex-end; }
        .upsell-sub { font-size: 11px; color: #888; margin-top: 2px; }
        .upsell-savings {
            margin-top: 8px; padding: 6px 10px;
            background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
            border-radius: 8px; text-align: center;
            font-size: 13px; font-weight: 700; color: #2e7d32;
        }
        .upsell-card-cta {
            display: block; width: 100%; margin-top: 12px;
            padding: 10px 20px; border: none; border-radius: 20px;
            background: linear-gradient(135deg, #4ade80, #22c55e);
            color: white; font-size: 14px; font-weight: 600;
            cursor: pointer; text-align: center;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .upsell-card-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
        }
        .moabi-flow-progress {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 8px 0;
            font-size: var(--fs-small);
            color: #888;
        }
        .moabi-flow-progress .label {
            margin-right: 6px;
            font-variant-numeric: tabular-nums;
        }
        .moabi-flow-progress .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ddd;
            transition: background 0.2s;
        }
        .moabi-flow-progress .dot.filled {
            background: #ffc107;
        }
        /* Day 2 — CONSENT / COLLECTING 카드 */
        .moabi-flow-card {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 14px;
            margin: 4px 0;
        }
        .message.bot .moabi-flow-card h4:not(.mef-title) { font-size: var(--fs-subtitle); }   /* 🆕10-12 공용 말풍선 소제목(h4 0.95em)이 더 센 규칙이라 아래 값이 안 먹던 것 → 크기만 덮음(글자 크기 P4-2 · 마지막 확인 제목은 chat-enroll.css) */
        .moabi-flow-card h4 {
            margin: 0 0 10px;
            font-size: var(--fs-subtitle);
            font-weight: 600;
            color: #1a202c;
        }
        .moabi-flow-consent-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 6px;
            cursor: pointer;
            min-height: 44px;
            border-radius: 8px;
            transition: background 0.1s;
        }
        .moabi-flow-consent-item:hover { background: #edf2f7; }
        .moabi-flow-consent-item input[type="checkbox"] {
            width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0;
            cursor: pointer;
        }
        .moabi-flow-consent-item .req {
            color: #e53e3e; font-weight: 600; margin-right: 4px; font-size: var(--fs-tiny);
        }
        .moabi-flow-consent-item .opt {
            color: #718096; font-weight: 500; margin-right: 4px; font-size: var(--fs-tiny);
        }
        .moabi-flow-consent-item .label {
            flex: 1; font-size: var(--fs-body); color: #2d3748; line-height: 1.5;
        }
        .moabi-flow-actions {
            display: flex; gap: 8px; margin-top: 12px;
        }
        .moabi-flow-done-card .moabi-flow-actions { flex-direction: column; } .moabi-flow-done-card .moabi-flow-actions .moabi-flow-btn { width: 100%; }   /* 🆕10-12 접수 완료 단추 둘 = PC에서도 위아래로(휴대폰과 같게 · PC 「💬 챗봇에서 다른 정보 확…」 잘림 = 원래 흠 · 대표 「두 가지 모두 추천대로 진행해」) */
        .moabi-flow-btn {
            flex: 1; min-height: 44px; padding: 10px 12px;
            border: none; border-radius: 10px;
            font-size: var(--fs-body); font-weight: 600;
            cursor: pointer;
            transition: transform 0.1s, box-shadow 0.1s, opacity 0.15s;
            white-space: nowrap;   /* 버튼 라벨 줄바꿈 방지 (2026-05-25 결함 ④ 정정) */
            overflow: hidden; text-overflow: ellipsis;
        }
        .moabi-flow-btn:active { transform: scale(0.98); }
        .moabi-flow-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .moabi-flow-btn-primary {
            background: linear-gradient(135deg, #ffc107, #f59e0b);
            color: #1a202c;
        }
        .moabi-flow-btn-secondary {
            background: #edf2f7; color: #4a5568;
        }
        .moabi-flow-field-prompt {
            font-size: var(--fs-body); color: #2d3748; line-height: 1.5;
            margin-bottom: 10px; white-space: pre-wrap;
        }
        /* 가입 신청 진입 카드 — 답변 카드와 시각 구분 (2026-05-25 결함 ① 정정) */
        .moabi-flow-entry-card {
            background: #ffffff !important;
            border: 2px solid #ffc107 !important;
            box-shadow: 0 4px 16px rgba(255, 193, 7, 0.18) !important;
        }
        /* 신청 카드 말풍선 투명화 — 카드 자체가 답변 박스(견적 카드처럼 테두리 1겹, 2026-06-09) */
        .moabi-flow-entry-bubble {
            background: transparent !important;
            box-shadow: none !important;
            padding: 0 !important;
        }
        /* 가입 신청 진입 카드 강조 박스 — 상품 정보 시각 강조 (2026-05-24 사용자 가르침) */
        .moabi-flow-product-highlight {
            display: block;
            margin: 10px 0 14px 0;
            padding: 14px 16px;
            background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
            border: 2px solid #ffc107;
            border-radius: 12px;
            font-size: var(--fs-subtitle); font-weight: 700;
            color: #5d4037; line-height: 1.5;
            box-shadow: 0 2px 6px rgba(255, 193, 7, 0.18);
            text-align: center;
            word-break: keep-all;
        }
        .moabi-flow-entry-body {
            background: #ffffff;
            border: 1px solid #f0e9d2;
            border-radius: 10px;
            padding: 14px 16px;
            font-size: var(--fs-body);
            line-height: 1.7;
            color: #3d3d3d;
        }
        /* 정렬 미세 조정 — 구분선·박스 제목 가운데 + 체크 항목 들여쓰기 (2026-05-25 결함 ③ 정정) */
        .moabi-flow-entry-body {
            text-align: left;
        }
        .moabi-flow-entry-body strong,
        .moabi-flow-entry-body .center {
            display: block; text-align: center;
        }
        /* 정보보호 안내 — 가운데 정렬 (2026-05-25 사용자 가르침: 이모티콘 폭 차이로 시작점 어긋남 정합) */
        .moabi-flow-entry-security {
            margin-top: 12px;
            padding: 10px 12px;
            font-size: var(--fs-small);
            color: #6b7280;
            line-height: 1.7;
            text-align: center;
            background: #fafafa;
            border-radius: 8px;
            border: 1px dashed #e5e7eb;
        }
        /* 요금·사은품·현금 혜택 요약 박스 (2026-05-30 1단계 재설계 — 확정 직전 재확인) */
        .moabi-flow-entry-summary {
            margin: 4px 0 12px;
            padding: 10px 14px;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            border-radius: 10px;
        }
        /* 상품 정보 — 녹색 요약 박스 맨 위 한 줄 (옛 노란 박스 합류, 2026-06-08) */
        .entry-summary-product {
            font-size: var(--fs-body);
            font-weight: 400;
            color: #166534;
            line-height: 1.6;
            padding: 2px 0 8px;
            margin-bottom: 6px;
            border-bottom: 1px dashed #bbf7d0;
            text-align: left;
            white-space: pre-line;
            word-break: keep-all;
        }
        .entry-summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: var(--fs-body);
            padding: 4px 0;
        }
        .entry-summary-label { color: #4b5563; font-weight: 600; }
        .entry-summary-value { color: #166534; font-weight: 700; }
        .entry-summary-sub {
            text-align: right;
            font-size: var(--fs-small);
            color: #6b7280;
            margin-top: -2px;
            padding-bottom: 2px;
        }
        .entry-summary-cash {
            margin-top: 4px;
            padding-top: 8px;
            border-top: 1px dashed #bbf7d0;
        }
        .entry-summary-cash .entry-summary-label { color: #b45309; }
        .entry-summary-cash .entry-summary-value { color: #d97706; }
        .moabi-flow-field-input,
        .moabi-flow-field-select {
            width: 100%; box-sizing: border-box;
            min-height: 44px; padding: 10px 12px;
            border: 1.5px solid #cbd5e0; border-radius: 10px;
            font-size: var(--fs-input); /* iOS 줌 방지 */
            color: #1a202c;
            background: #fff;
            transition: border-color 0.15s;
            font-family: inherit;
        }
        .moabi-flow-field-input:focus,
        .moabi-flow-field-select:focus {
            outline: none; border-color: #ffc107;
        }
        .moabi-flow-field-hint {
            font-size: var(--fs-sub); color: #e53e3e; margin-top: 6px;
            min-height: 18px;
        }
        .moabi-flow-retry-badge {
            display: inline-block; padding: 2px 8px;
            background: #fef3c7; color: #92400e;
            border-radius: 6px; font-size: var(--fs-small); font-weight: 600;
            margin-left: 8px;
        }
        .moabi-flow-final-summary {
            background: #f7fafc; border: 1px solid #e2e8f0;
            border-radius: 10px; padding: 12px 14px;
            margin: 10px 0 12px;
        }
        .moabi-flow-final-row {
            display: flex; align-items: flex-start; gap: 8px;
            padding: 6px 0; font-size: var(--fs-body); color: #2d3748; line-height: 1.5;
        }
        .moabi-flow-final-row + .moabi-flow-final-row {
            border-top: 1px dashed #e2e8f0;
        }
        .moabi-flow-final-row .icon {
            flex: 0 0 22px; font-size: var(--fs-subtitle);
        }
        .moabi-flow-final-row .label {
            flex: 0 0 96px; color: #718096; font-weight: 500; font-size: var(--fs-sub);
        }
        .moabi-flow-final-row .value {
            flex: 1 1 auto; font-weight: 500; color: #1a202c; word-break: break-word;
        }
        .moabi-flow-done-tracking {
            font-size: var(--fs-num); font-weight: 700; color: #1a202c;
            letter-spacing: 0.5px; margin: 8px 0 4px;
        }
        .moabi-flow-done-contact {
            font-size: var(--fs-body); color: #2d3748; line-height: 1.6; margin: 4px 0;
        }
        .moabi-flow-done-hint {
            font-size: var(--fs-sub); color: #718096; margin-top: 10px; line-height: 1.5;
        }
        .moabi-flow-modify-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
        }
        .moabi-flow-modify-grid .moabi-flow-btn { flex: initial; min-height: 44px; }
        /* ===== 묶음 입력(본인 확인 등) — 여러 칸 한 화면 (2026-06-06 가입 입력 재설계 묶음1 시범) ===== */
        .moabi-flow-group-card {
            background: linear-gradient(180deg, #fffbef 0%, #ffffff 70%) !important;
            border: 2px solid #ffc107 !important;
            box-shadow: 0 4px 16px rgba(255, 193, 7, 0.14) !important;
        }
        .moabi-flow-group-field { margin: 0 0 14px; }
        .moabi-flow-group-field:last-of-type { margin-bottom: 4px; }
        .moabi-flow-group-label {
            display: block; font-size: var(--fs-sub); font-weight: 600;
            color: #374151; margin-bottom: 6px;
        }
        /* 자유 입력 안내 — 채팅창으로 한 줄 적기 */
        .moabi-flow-freeinput-hint {
            font-size: var(--fs-small); color: #6b7280; line-height: 1.6;
            background: #f3f4f6; border-radius: 8px;
            padding: 8px 10px; margin: 0 0 12px;
        }
        .moabi-flow-freeinput-hint b { color: #166534; }
        /* 안전 입력 배지 (신뢰 — 초록) */
        .moabi-flow-safe-badge {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 2px 8px; margin-left: 6px;
            background: #dcfce7; color: #166534;
            border-radius: 999px; font-size: var(--fs-tiny); font-weight: 700;
            vertical-align: middle;
        }
        .moabi-flow-safe-note {
            font-size: var(--fs-small); color: #16a34a; line-height: 1.5;
            margin: 4px 0 0;
        }
        /* 주민번호 한 줄: 앞6 - 뒤7 + 눈 */
        .moabi-flow-id-row { display: flex; align-items: center; gap: 6px; }
        .moabi-flow-id-row .sep { color: #9ca3af; font-weight: 700; }
        .moabi-flow-id-input { flex: 1 1 0; text-align: center; letter-spacing: 1px; min-width: 0; }
        .moabi-flow-id-input.masked { -webkit-text-security: disc; }
        .moabi-flow-eye-btn {
            flex: 0 0 auto; min-width: 44px; min-height: 44px;
            border: 1.5px solid #cbd5e0; border-radius: 10px;
            background: #fff; cursor: pointer; font-size: var(--fs-subtitle);
            display: flex; align-items: center; justify-content: center;
            transition: background 0.12s;
        }
        .moabi-flow-eye-btn:active { background: #f1f5f9; }
        .moabi-flow-eye-btn.on { background: #fef9c3; border-color: #facc15; }
        @media (max-width: 480px) {   /* 🆕10-12 글자 크기 줄 여섯은 지움 = 값 표가 휴대폰 값을 줌(글자 크기 P4-2) */
            .moabi-flow-card { padding: 12px; }
            .moabi-flow-consent-item { padding: 12px 4px; }
            .moabi-flow-actions { flex-direction: column; }
            .moabi-flow-actions .moabi-flow-btn { width: 100%; }
            .moabi-flow-final-row .label { flex: 0 0 84px; }
            .moabi-flow-modify-grid { grid-template-columns: 1fr; }
        }

        /* ═══════════ 답변 카드 v4 — 숫자 세운 배치 (02_플랜 §2 · 2026-08-02 대표 확정 · 🆕10-11 글자 크기 = 값 표 역할 이름 · 글자 크기 통일 P3) ═══════════
           시안 정본 = 문서/[챗봇]작업_방문자가입플로우개편_20260723/시안_답변카드_v4_숫자세운배치.html
           ⚠️ .benefit-card 이름 금지(기존 프로모션 카드가 덮어씀) — .answer-* 접두 통일 */
        .answer-card { background: #fff; border: 1px solid #e4e6ea; border-radius: 16px; padding: 14px 12px; margin: 4px 0; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
        .answer-headline { font-size: var(--fs-subtitle); font-weight: 800; line-height: 1.4; margin-bottom: 2px; }
        .answer-axis { font-size: var(--fs-tiny); color: #888; margin-bottom: 8px; }
        .answer-selector-row { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
        .answer-speed-chip { border: 1.5px solid #ddd; background: #fff; border-radius: 14px; padding: 4px 12px; font-size: var(--fs-small); font-weight: 700; cursor: pointer; color: #666; }
        .answer-speed-chip.on { border-color: #f5a623; background: #fff7e8; color: #b06d00; }
        .answer-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 700; color: #333; cursor: pointer; margin-bottom: 8px; user-select: none; }
        .answer-toggle-pill { width: 36px; height: 20px; border-radius: 10px; background: #ccc; position: relative; transition: .15s; flex: 0 0 auto; }
        .answer-toggle-pill::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; }
        .answer-toggle.on .answer-toggle-pill { background: #f5a623; }
        .answer-toggle.on .answer-toggle-pill::after { left: 18px; }
        table.answer-cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); }
        table.answer-cmp th { font-size: var(--fs-small); color: #888; font-weight: 600; text-align: right; padding: 4px 6px; border-bottom: 1px solid #eee; }
        table.answer-cmp th:first-child { text-align: left; }
        table.answer-cmp td { padding: 7px 6px; text-align: right; border-bottom: 1px solid #f2f2f2; white-space: nowrap; }
        table.answer-cmp td:first-child { text-align: left; white-space: normal; }
        .answer-tel-name { font-weight: 700; font-size: var(--fs-sub); }
        .answer-tel-sub { font-size: var(--fs-tiny); color: #999; display: block; }
        .answer-price { font-weight: 800; font-size: var(--fs-sub); }
        .answer-price small { font-weight: 400; font-size: var(--fs-tiny); color: #999; display: block; }
        .answer-best { color: #1e7b34; }
        tr.answer-row-best { background: #f2fbf4; }
        .answer-sumline { background: #fff7e8; border-radius: 8px; padding: 7px 9px; font-size: var(--fs-sub); margin-top: 8px; line-height: 1.5; }
        /* 세운 유도 블록 — 기본(주황/사은품)·blue(요금)·green(설치비) */
        .pb { margin-top: 10px; background: linear-gradient(180deg,#fff8e8,#fffdf7); border: 1.5px solid #f0c060; border-radius: 12px; padding: 12px 10px 11px; text-align: center; }
        .pb-lead { font-size: var(--fs-small); color: #7a6230; font-weight: 600; letter-spacing: -0.2px; }
        .pb-num { font-size: var(--fs-num-xl); font-weight: 900; color: #c8531a; line-height: 1.15; margin: 3px 0 1px; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
        .pb-num .u { font-size: var(--fs-num); font-weight: 800; margin-left: 1px; }
        .pb-num.small { font-size: var(--fs-num); letter-spacing: -0.5px; }
        .pb-tail { font-size: var(--fs-body); font-weight: 800; color: #33383f; letter-spacing: -0.3px; }
        .pb-note { font-size: var(--fs-small); color: #8a9099; margin-top: 6px; line-height: 1.5; }
        .pb-note b { color: #5a6069; }
        .pb.blue { background: linear-gradient(180deg,#eef5ff,#fafcff); border-color: #8fb4e8; }
        .pb.blue .pb-lead { color: #3a5a8a; }
        .pb.blue .pb-num { color: #1f5fbf; }
        .pb.green { background: linear-gradient(180deg,#eefaf1,#fbfefc); border-color: #8fd0a4; }
        .pb.green .pb-lead { color: #2f6b45; }
        .pb.green .pb-num { color: #1e7b34; }
        .answer-btn-main { display: block; width: 100%; background: #1db954; color: #fff; text-align: center; border: none; border-radius: 12px; padding: 12px 0; font-size: var(--fs-body); font-weight: 800; margin-top: 10px; cursor: pointer; font-family: inherit; }
        .answer-btn-main:active { transform: translateY(1px); }
        .answer-btn-sub-row { display: flex; gap: 6px; margin-top: 6px; }
        .answer-btn-sub { flex: 1; background: #fff; border: 1.5px solid #ddd; border-radius: 10px; padding: 9px 0; font-size: var(--fs-sub); font-weight: 700; cursor: pointer; color: #444; font-family: inherit; }
        .answer-next-q { margin-top: 10px; }
        .answer-next-q .answer-nq-label { font-size: var(--fs-tiny); color: #999; margin-bottom: 4px; }
        .answer-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
        .answer-chip { background: #fff; border: 1.5px solid #f5a623; color: #b06d00; border-radius: 16px; padding: 5px 11px; font-size: var(--fs-small); font-weight: 600; cursor: pointer; font-family: inherit; }
        .answer-more { margin-top: 8px; border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
        .answer-more summary { list-style: none; cursor: pointer; padding: 9px 11px; font-size: var(--fs-sub); font-weight: 700; color: #444; background: #fafafa; }
        .answer-more summary::before { content: '▸ '; color: #f5a623; }
        .answer-more[open] summary::before { content: '▾ '; }
        .answer-more .answer-more-inner { padding: 8px 11px; font-size: var(--fs-small); color: #555; line-height: 1.7; border-top: 1px solid #eee; }
        .answer-price-sub { display: block; font-size: var(--fs-tiny); color: #a8adb5; font-weight: 400; margin-top: 1px; letter-spacing: -0.2px; }

        /* ── 가격 이탈 대안 카드 (2026-09-07 · 시안 ⑳ v1.1 대표 확정 · 부품 chat-card-alternatives.js) ── */
        .moabi-alt-bubble { padding: 0 !important; background: transparent !important; box-shadow: none !important; max-width: 100%; }
        .moabi-alt-card { border: 2px solid #10b981; border-radius: 14px; overflow: hidden; background: #fff; font-size: 13px; }
        .moabi-alt-card .hd { background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-weight: 800; padding: 10px 14px; font-size: 13.5px; }
        .moabi-alt-card .why { font-size: 11.5px; color: #555; padding: 8px 12px; line-height: 1.5; background: #fafbfc; }
        .moabi-alt-row { padding: 9px 12px 8px; border-bottom: 1px solid #f1f3f5; }
        .moabi-alt-row.now { background: #f7fdf9; }
        .moabi-alt-row .l { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
        .moabi-alt-row .l + .l { margin-top: 2px; }
        .moabi-alt-row .nm { font-size: 13.5px; font-weight: 800; min-width: 0; }
        .moabi-alt-row .fee { font-size: 15px; font-weight: 800; white-space: nowrap; }
        .moabi-alt-row .sub { font-size: 11px; color: #777; min-width: 0; }
        .moabi-alt-row .pre { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; }
        .moabi-alt-row .l3 { margin-top: 6px; align-items: center; }
        .moabi-alt-row .ben { font-size: 12.5px; font-weight: 700; color: #059669; white-space: nowrap; }
        .moabi-alt-row .ben em { font-style: normal; font-weight: 700; font-size: 11px; color: #b3261e; }
        .moabi-alt-row .ben em.up { color: #059669; }
        .moabi-alt-row .cheap { font-size: 11px; font-weight: 800; color: #d84315; background: #fff3ee; border-radius: 8px; padding: 2px 7px; white-space: nowrap; }
        .moabi-alt-row .tag { font-size: 10.5px; font-weight: 800; color: #1a7f43; background: #e6f7ec; border-radius: 8px; padding: 2px 7px; white-space: nowrap; }
        .moabi-alt-row .pick { background: #fff; border: 1.5px solid #10b981; color: #059669; border-radius: 8px; padding: 5px 9px; font-size: 11.5px; font-weight: 800; cursor: pointer; margin-left: 6px; }
        .moabi-alt-card .fn { font-size: 10.5px; color: #8a8f96; padding: 6px 12px 0; line-height: 1.5; }
        .moabi-alt-card .ft { padding: 10px 12px 12px; }
        .moabi-alt-card .ft .moabi-flow-btn { width: 100%; }
        .moabi-alt-card .ft .moabi-flow-btn + .moabi-flow-btn { margin-top: 6px; }