/* [Local Font: Pretendard Optimized] */

/* 1. Regular (본문용 - 400, 500은 얘로 처리) */
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/landingpage/fonts/Pretendard-Regular.woff2') format('woff2');
}
/* 500(Medium) 요청이 오면 400 파일 갖다 씀 (브라우저가 알아서 살짝 굵게 처리하거나 그대로 씀) */
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('/landingpage/fonts/Pretendard-Regular.woff2') format('woff2'); 
}

/* 2. Bold (강조용 - 600, 700, 800은 얘로 처리) */
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/landingpage/fonts/Pretendard-Bold.woff2') format('woff2');
}
/* 600, 800 요청이 와도 Bold 파일 하나로 퉁침 (용량 1.5MB 절약) */
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('/landingpage/fonts/Pretendard-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url('/landingpage/fonts/Pretendard-Bold.woff2') format('woff2');
}

/* 3. Black (초강력 강조 - 900) */
/* 제목 임팩트를 위해 900은 살려둠 */
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    font-display: swap;
     src: url('/landingpage/fonts/Pretendard-Bold.woff2') format('woff2');
}

/* [전역 폰트 적용] */
body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;
}


/* 기존 코드 시작... */
html {
    scroll-behavior: smooth;
}
/* ... */



/* [전체 스크롤 최적화] */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

/* [공통 변수] */
:root {
    --toss-blue: #3182F6;
    --toss-blue-dark: #2563EB;
    --toss-black: #191F28;
    --toss-grey-700: #4E5968;
    --toss-grey-300: #E5E8EB;
    --white: #FFFFFF;
    --bg-overlay: rgba(255, 255, 255, 0.98);
    --primary: #3182F6;
    --primary-dark: #2563EB;
    --primary-light: #60A5FA;
}

/* [Reset] */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* [Font] - 전체가 아니라 body에서만 선언 (렌더링 속도 개선) */


/* ★★★ 여기까지 ★★★ */
body {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--white);
    color: var(--toss-black);
    line-height: 1.5;
}
.btn-text { display: none !important; } 

/* [Common Elements] */
a { 
    text-decoration: none; 
    color: inherit; 
    transition: color 0.2s; 
}

ul { list-style: none; }

button { 
    cursor: pointer; 
    border: none; 
    background: none; 
    font-family: inherit; 
}
/* 폼 요소 폰트 상속 강제 */
input, textarea, select, button {
    font-family: inherit;
}



/* [네비게이션 바] */
.navbar {
    position: sticky; top: 0; width: 100%; height: 90px;
    background-color: var(--white);
    border-bottom: 1px solid var(--toss-grey-300);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}

.nav-container {
    width: 100%; max-width: 1100px; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
    height: 100%;
}

.nav-logo { font-size: 20px; font-weight: 800; color: var(--toss-black); letter-spacing: -0.5px; }

/* PC 메뉴 */
.nav-menu { display: flex; gap: 32px; align-items: center; }
.nav-link { font-size: 15px; font-weight: 500; color: var(--toss-grey-700); padding: 8px 0; }
.nav-link:hover { color: var(--toss-blue); }

/* PC CTA 버튼 */
.nav-cta { display: flex; align-items: center; }
.btn-nav-cta {
    background-color: var(--toss-blue); color: var(--white);
    font-size: 17px; font-weight: 600; padding: 12px 22px;
    border-radius: 999px; transition: background-color 0.2s;
}
.btn-nav-cta:hover { background-color: var(--toss-blue-dark); }

/* 카카오톡 버튼 스타일 (네비게이션) */
.kakao-nav-btn {
    background-color: #FEE500 !important;
    color: #191919 !important;
}
.kakao-nav-btn:hover {
    background-color: #E6CF00 !important;
}

/* 모바일 햄버거 버튼 */
.mobile-menu-btn { display: none; font-size: 24px; color: var(--toss-black); }

/* [모바일 메뉴 오버레이] */
.mobile-menu-overlay {
    display: none; /* 기본 숨김 */
    position: fixed; top: 60px; left: 0; width: 100%; height: calc(100vh - 60px);
    background-color: var(--bg-overlay);
    z-index: 990;
    flex-direction: column; padding: 20px;
}
.mobile-menu-overlay.active { display: flex; } /* 활성화 시 보임 */

.mobile-nav-link {
    display: block; font-size: 18px; font-weight: 600; 
    color: var(--toss-black); padding: 16px 0;
    border-bottom: 1px solid var(--toss-grey-300);
}

/* [모바일 하단 고정 알약 버튼 + 빛나는 효과] */

/* 1. 컨테이너: 위치만 잡고 배경은 투명하게 */
.mobile-fixed-cta {
    display: none; /* PC에서는 숨김 */
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%;
    z-index: 999;
    
    /* 배경, 테두리, 그림자 모두 제거 (투명) */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* 버튼 주변 빈 공간은 터치가 통과되도록 설정 (중요) */
    pointer-events: none;
    
    /* 버튼 위치 및 여백 조정 */
    padding: 0 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* 바닥에서 20px 띄움 */
    
    /* 버튼을 화면 중앙에 정렬 */
    justify-content: center; 
    align-items: center;
}

/* 모바일 화면(900px 이하)에서만 Flex로 보이게 설정 */
@media (max-width: 900px) {
    .mobile-fixed-cta { display: flex !important; }
}

/* 2. 버튼 스타일: 글래스모피즘 알약 */
.btn-fixed-cta {
    pointer-events: auto; /* 버튼 영역은 클릭 가능 */
    
    /* 크기 설정: 내용에 맞게 늘어나되 최소/최대 크기 제한 */
    width: auto !important; 
    min-width: 220px; 
    max-width: 320px; 
    
    /* 반투명 퍼플 글래스 배경 */
    background: rgba(49, 130, 246, 0.9) !important; 
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%); /* 사파리 호환 */
    
    /* 텍스트 스타일 */
    color: var(--white);
    font-size: 16px; 
    font-weight: 700; 
    
    /* 형태: 완전 둥근 알약 모양 */
    padding: 16px 32px; 
    border-radius: 100px !important; 
    
    /* 테두리와 그림자로 입체감 주기 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(49, 130, 246, 0.3) !important;
    
    /* 내부 정렬 */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px;
    
    /* 애니메이션을 위한 필수 설정 */
    position: relative !important;
    overflow: hidden !important; 
    transition: transform 0.2s ease;
}

/* 3. 빛나는(Shine) 효과 애니메이션 */
.btn-fixed-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    
    /* 빛의 색상: 투명 -> 반투명 흰색 -> 투명 */
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
    
    /* 각도 기울기 */
    transform: skewX(-20deg);
    
    /* 3초마다 반복 실행 */
    animation: shine 2s infinite;
    pointer-events: none; /* 빛은 클릭 방해 안 함 */
}

/* 눌렀을 때 살짝 작아지는 효과 */
.btn-fixed-cta:active {
    transform: scale(0.96);
    background: rgba(109, 40, 217, 0.95);
}

/* 카카오톡 버튼 스타일 (모바일 하단 고정) */
.kakao-fixed-btn {
    background: #FEE500 !important;
    color: #191919 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 32px rgba(254, 229, 0, 0.4) !important;
}
.kakao-fixed-btn:active {
    background: #E6CF00 !important;
}

/* 애니메이션 키프레임 (이미 파일에 있다면 생략 가능) */
@keyframes shine {
    0% { left: -100%; }
    20% { left: 200%; } /* 쓱 지나감 */
    100% { left: 200%; } /* 대기 */
}


/* ============================================== */
/* [반응형] 네비게이션 바 (900px 이하 + 모바일) */
/* ============================================== */
@media (max-width: 900px) {
    
    /* 1. PC 메뉴 숨기고 모바일 버튼 보이기 */
    .nav-menu, .nav-cta { display: none; }
    .mobile-menu-btn, .mobile-fixed-cta { display: block; }
    
    /* 2. 하단 바 공간 확보 */
    body { padding-bottom: 80px; } 
}

/* ★ [모바일 전용] 높이 & 로고 최적화 (768px 이하) ★ */
@media (max-width: 768px) {
    
    /* 1. 네비게이션 바 높이 줄이기 (90px -> 60px) */
    .navbar {
        height: 60px !important; 
    }

    /* 2. 로고 이미지 크기 줄이기 */
    /* (만약 텍스트 로고라면 font-size를 줄이세요) */
    .nav-logo img {
        width: auto !important; /* 적당한 크기로 축소 */
        height: 100% !important;
    }
    
    /* 3. 햄버거 버튼 위치 보정 (수직 중앙) */
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        height: 100%; /* 높이 꽉 채워서 터치 영역 확보 */
    }

    /* 4. 오버레이 시작 위치 맞추기 (60px) */
    .mobile-menu-overlay {
        top: 60px !important; /* 네비바 높이와 일치 */
        height: calc(100vh - 60px) !important;
    }
}


/* ======================== */
/* [2] Hero 섹션 스타일      */
/* ======================== */

/* 레이아웃 */
.hero {
    width: 100%;
    padding-top: 80px; padding-bottom: 60px;
    display: flex; justify-content: center;
    overflow: hidden; /* 목업 튀어나옴 방지 */
}

.hero-container {
    width: 100%; max-width: 1100px; padding: 0 24px;
}

.hero-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* 텍스트 영역을 조금 더 넓게 */
    gap: 60px; align-items: center;
}

/* 왼쪽: 텍스트 영역 */
.hero-left {
    display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start;
}

.hero-badge {
    display: inline-block; font-size: 14px; font-weight: 600;
    color: #6B7684; 
    background-color: #F2F4F6; /* 수정됨: 중간톤 */
    padding: 6px 10px; border-radius: 8px;
    margin-bottom: 16px; letter-spacing: -0.01em;
}

.hero-title {
    font-size: 48px; font-weight: 900; line-height: 1.35;
    color: var(--toss-black); letter-spacing: -0.02em;
    margin-bottom: 20px; word-break: keep-all;
}

.hero-accent { color: var(--toss-blue); }

.hero-sub {
    font-size: 20px; line-height: 1.6; font-weight: 500;
    margin-bottom: 32px; word-break: keep-all;
}

/* 불릿 포인트 */
.hero-bullets {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-left: -10px !important; 
    margin-bottom: 40px;
}

.hero-bullet {
    font-size: 13px; font-weight: 500;
    color: var(--toss-grey-700);
    background-color: var(--white);
    border: 1px solid var(--toss-grey-300);
    padding: 6px 12px; border-radius: 999px;
    display: flex; align-items: center;
}

/* 버튼 그룹 */
.hero-actions {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 17px; flex-wrap: wrap;
}

.btn-primary {
    background-color: var(--toss-blue); color: var(--white);
    font-size: 18px; font-weight: 600;
    padding: 0 36px; height: 56px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.2s;
    box-shadow: 0 2px 8px rgba(49, 130, 246, 0.15);
}
.btn-primary:hover { background-color: var(--toss-blue-dark); }

.btn-text {
    font-size: 14px; color: #6B7684; /* toss-grey-600 */
    text-decoration: underline; text-underline-offset: 4px;
    text-decoration-color: var(--toss-grey-300);
}
.btn-text:hover { color: var(--toss-black); text-decoration-color: #8B95A1; }

.hero-note {
    font-size: 14px; color: #8B95A1; /* toss-grey-500 */
    line-height: 1.5;
}

/* 오른쪽: 비주얼 영역 */
.hero-right {
    display: flex; flex-direction: column;
    align-items: center; position: relative;
}

.hero-image-slot {
    width: 100%; max-width: 320px; margin-bottom: 24px;
    position: relative; z-index: 1;
}

/* [알림 카드 - 폰 화면 위 둥둥] */
.noti-card {
    position: absolute; /* 부모(폰) 기준으로 뜸 */
    top: 25%;           /* 위에서 25% 위치 */
    left: 50%;          /* 좌우 가운데 */
    transform: translate(-50%, 0); /* 정중앙 정렬 */
    width: 80%;         /* 폰 너비의 80% */
    max-width: 260px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    gap: 14px;
    align-items: flex-start;
    z-index: 10;
    will-change: transform;
    animation: float-center 3s ease-in-out infinite; 
}

/* 가운데 정렬 유지하며 둥둥 */
@keyframes float-center {
    0% { transform: translate(-50%, 0); }   /* 시작: 정중앙 */
    50% { transform: translate(-50%, -10px); } /* 중간: 위로 둥둥 */
    100% { transform: translate(-50%, 0); } /* 끝: 다시 제자리 */
}

.noti-icon {
    width: 40px; height: 40px; background: var(--toss-blue);
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: white; font-size: 20px;
}
.noti-content { flex: 1; }
.noti-header {
    display: flex; justify-content: space-between; margin-bottom: 4px;
    font-size: 13px; color: #6B7684;
}
.noti-title { font-weight: 600; color: var(--toss-black); }
.noti-amount { font-size: 18px; font-weight: 700; color: var(--toss-blue); margin-top: 2px; }
.noti-desc { font-size: 12px; color: #8B95A1; margin-top: 4px; }

/* 하단 스탯 박스 */
.hero-stats {
    width: 100%; max-width: 320px;
    background-color: var(--white);
    border: 1px solid var(--toss-grey-300);
    border-radius: 16px; padding: 16px 20px;
    display: flex; flex-direction: column; gap: 12px;
    margin: 20px auto 0; /* 중앙 정렬 */
}
.hero-stat { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.hero-stat:not(:last-child) { border-bottom: 1px solid #F2F4F6; padding-bottom: 12px; }
.stat-label { color: #6B7684; font-size: 15px; }
.stat-value { font-weight: 600; color: var(--toss-black); font-size: 16px; }
.stat-ok { color: #15803D; } /* toss-green */

/* ======================== */
/* [최종 수정] 반응형 처리   */
/* ======================== */

@media (max-width: 900px) {
    .hero-title { font-size: 33px; }
    .hero-sub { font-size: 16px; }
}

@media (max-width: 768px) {
   
    /* [모바일 뱃지 스타일] */
    .hero-badge {
        background-color: #F2F4F6 !important;
        color: #6B7684 !important;
        font-size: 13px !important; 
        padding: 5px 10px !important;
        border-radius: 8px !important;
    }
   
    /* 1. 전체 레이아웃 */
    .hero { padding-top: 40px; padding-bottom: 40px; }
    .hero-layout { grid-template-columns: 1fr; gap: 48px; }
    .hero-left { text-align: left; align-items: flex-start; }
    
    /* 2. 오른쪽 영역 (중앙 정렬) */
    .hero-right { 
        padding: 0 20px; 
        display: flex; 
        justify-content: center; 
        align-items: center;
        width: 100%; 
    }
    
    /* 3. 이미지 슬롯 (완벽 중앙 정렬) */
    .hero-image-slot {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto 24px auto !important;
    }
    .hero-image-slot img {
        width: 85% !important;      /* 크기 85% */
        max-width: 260px !important;
        display: block !important;
    }

        /* ★ [통합 수정] 알림 카드 (위치/크기/애니메이션 완벽 해결) ★ */
    .noti-card {
        /* ▼ 이 숫자를 조절해서 위/아래 위치를 잡으세요 (30%, 40%, 50%...) */
        top: 40% !important;
        
        left: 50% !important;
        
        /* 크기 및 디자인 */
        width: 85% !important;
        max-width: 220px !important;
        padding: 12px !important;
        border-radius: 12px !important;
        
        /* ★ 핵심: 둥둥 떠다니는 모바일 전용 애니메이션 ★ */
        animation: float-mobile 3s ease-in-out infinite !important;
    }

    /* [필수] 모바일 전용 애니메이션 키프레임 (지우지 마세요) */
    @keyframes float-mobile {
        0% { transform: translate(-50%, 0); }        /* 정중앙 */
        50% { transform: translate(-50%, -10px); }   /* 위로 둥둥 */
        100% { transform: translate(-50%, 0); }      /* 제자리 */
    }

    /* 내부 텍스트/아이콘 크기 축소 (밸런스용) */
    .noti-icon { 
        width: 32px !important; height: 32px !important; 
        font-size: 16px !important; border-radius: 10px !important; 
    }
    .noti-header { font-size: 11px !important; margin-bottom: 2px !important; }
    .noti-title { font-size: 12px !important; }
    .noti-amount { font-size: 15px !important; margin-top: 0 !important; }
    .noti-desc { font-size: 11px !important; }

    /* 내부 요소 크기 축소 */
    .noti-icon { 
        width: 32px !important; height: 32px !important; 
        font-size: 16px !important; 
        border-radius: 10px !important;
    }
    .noti-header { font-size: 11px !important; margin-bottom: 2px !important; }
    .noti-title { font-size: 12px !important; }
    .noti-amount { font-size: 15px !important; margin-top: 0 !important; } /* 금액 폰트 줄임 */
    .noti-desc { font-size: 11px !important; }

    /* 4. 통계 박스 */
    .hero-stats { 
        width: 90%; max-width: 280px; 
        margin: 0 auto; /* 중앙 정렬 */
    }

    /* 5. 버튼 영역 (완벽 중앙 정렬) */
    .hero-actions {
        display: flex !important;
        flex-direction: column !important; /* 세로 배치 */
        align-items: center !important;    /* 가로 중앙 */
        width: 100% !important;
        padding: 0 !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .btn-primary {
        /* 기존 위치 이동값 제거 -> 순수 중앙 정렬 */
        position: static !important; 
        transform: none !important;
        left: auto !important;
        
        display: inline-flex !important;
        width: auto !important; 
        min-width: 220px !important; /* 최소 너비 통일 */
        height: 54px !important;
        font-size: 16px !important;
        padding: 0 28px !important;
        margin: 0 !important; /* gap으로 간격 조정 */
    }

    .btn-text {
        position: static !important; 
        transform: none !important;
        left: auto !important;

        display: inline-flex !important;
        align-items: center; justify-content: center; gap: 8px;
        
        width: auto !important;
        min-width: 220px !important; /* 위 버튼과 너비 맞춤 */
        height: 50px !important;
        font-size: 16px !important;
        padding: 0 28px !important;
        
        background-color: #E5E8EB; color: #333D4B; 
        border-radius: 14px; font-weight: 700; text-decoration: none;
        margin: 0 !important;
    }
    .btn-text::before { content: "📞"; font-size: 18px; }

    /* 7. 설명글 */
    .hero-note {
        display: block !important;
        text-align: center !important;
        width: 100%; margin-top: 16px;
        position: static !important;
        left: auto !important;

        /* ▼ 여기를 수정하세요 (현재: 14px) */
        font-size: 13px !important;  
    }

} /* [끝] */


/* ============================================================ */
/* [Rates Section] 독립 스타일 (충돌 방지) */
/* ============================================================ */

/* 섹션 래퍼 */
#rates-section-wrapper {
    padding: 100px 24px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
#rates-section-wrapper * {
    box-sizing: border-box;
    font-family: "Pretendard", -apple-system, sans-serif;
}

.rs-container {
    width: 100%;
    max-width: 900px;
    position: relative;
}

/* 헤더 영역 */
.rs-header {
    text-align: center;
    margin-bottom: 50px;
}

/* 라이브 뱃지 (오늘의 시세) */
.rs-live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #191F28; /* toss-black */
    padding: 6px 12px;
    border-radius: 99px;
    margin-bottom: 16px;
}
.rs-pulse-dot {
    width: 6px; height: 6px;
    background: #00FF00;
    border-radius: 50%;
    box-shadow: 0 0 8px #00FF00;
    animation: rsBlinkLive 2s infinite;
}
.rs-badge-text {
    font-size: 13px; font-weight: 700; color: #FFFFFF;
}

/* 타이틀 */
.rs-title {
    font-size: 40px; font-weight: 800;
    color: #191F28;
    margin: 0 0 12px;
    line-height: 1.3;
}
.rs-sub {
    font-size: 20px; font-weight: 500;
    color: #6B7684;
    line-height: 1.6; margin: 0;
}

/* 카드 리스트 */
.rs-list {
    display: flex; flex-direction: column; gap: 16px;
}

/* 개별 아이템 카드 (흔들림 방지 적용됨) */
.rs-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 28px 32px;
    border-radius: 24px;
    border: 1px solid transparent;
    background: #FAFAFB;
    transition: all 0.3s ease;
}
/* 메인 아이템 (휴대폰) 강조 */
.rs-item.rs-main {
    background: #F0F9FF; border-color: #DBEAFE;
}
.rs-item.rs-main:hover {
    background: #EFF6FF; border-color: #BFDBFE;
}
/* 일반 아이템 호버 - [수정] 흔들림 방지를 위해 transform 제거 */
.rs-item:not(.rs-main):hover {
    background: #F2F4F6; border-color: #E5E8EB;
    transform: none; /* 확대 효과 제거 (흔들림 방지) */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
/* 모든 아이템 호버 시 공통 (흔들림 방지 강제) */
.rs-item:hover {
    transform: none !important; 
}

/* 아이템 왼쪽 (아이콘+텍스트) */
.rs-left {
    display: flex; align-items: flex-start; gap: 24px; flex: 1;
}

/* 숨쉬는 오라(Aura) 아이콘 */
.rs-aura {
    width: 10px; height: 10px; border-radius: 50%;
    margin-top: 8px; position: relative; flex-shrink: 0; z-index: 0;
}
.rs-aura::after {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 24px; height: 24px; border-radius: 50%;
    opacity: 0.4; filter: blur(6px); z-index: -1;
    animation: rsBreathe 3s ease-in-out infinite;
}
/* 색상 변형 */
.rs-blue { background: #3182F6; } .rs-blue::after { background: #3182F6; }
.rs-purple { background: #3B82F6; } .rs-purple::after { background: #3B82F6; }
.rs-green { background: #FF8A65; } .rs-green::after { background: #FF8A65; }

/* 텍스트 그룹 */
.rs-text-group { display: flex; flex-direction: column; gap: 6px; }
.rs-card-title {
    font-size: 22px; font-weight: 700; color: #191F28; margin: 0;
}
.rs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-tag {
    font-size: 13px; padding: 4px 8px; border-radius: 6px;
    background: #F2F4F6; color: #4E5968; font-weight: 600;
}
/* 메인 아이템 태그 색상 변경 */
.rs-item.rs-main .rs-tag { background: #E8F3FF; color: #4E5968; }


/* 아이템 오른쪽 (수치 정보) */
.rs-right { text-align: right; flex-shrink: 0; }
.rs-info-group { 
    display: flex; align-items: center; gap: 24px; 
    /* [수정] 오른쪽 정렬 고정 */
    justify-content: flex-end; 
    width: 100%;
}

/* 레이블 (한도, 최대) */
.rs-meta-label {
    font-size: 13px; font-weight: 600; color: #4E5968;
    margin-bottom: 2px; display: block; opacity: 0.8;
}
.rs-txt-blue { color: #3182F6; }
.rs-txt-purple { color: #3B82F6; }
.rs-txt-green { color: #FF8A65; }

/* 한도 정보 */
.rs-limit-wrap {
    text-align: right; display: flex; flex-direction: column; align-items: flex-end;
}
.rs-limit-val {
    font-size: 30px; font-weight: 900; color: #191F28;
    letter-spacing: -0.5px; white-space: nowrap;
}

/* 세로 구분선 */
.rs-divider { width: 1px; height: 42px; background: #E5E8EB; }

/* 퍼센트 정보 */
.rs-percent-wrap {
    text-align: right; display: flex; flex-direction: column; align-items: flex-end;
    /* [수정] 너비 고정 (숫자 커질 때 밀림 방지) */
    width: 90px; 
    flex-shrink: 0;
}
.rs-val-group { display: flex; align-items: baseline; line-height: 1; }
.rs-num-huge {
    font-size: 40px; font-weight: 900;
    letter-spacing: -1.5px; font-variant-numeric: tabular-nums;
}
.rs-unit { font-size: 24px; font-weight: 700; margin-left: 2px; }


/* 애니메이션 키프레임 */
@keyframes rsBlinkLive { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes rsBreathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.2; }
}

/* ========================================= */
/* [Mobile] Rates 섹션 반응형 (최적화 완료) */
/* ========================================= */
@media (max-width: 768px) {
    
    /* 1. 전체 여백 */
    #rates-section-wrapper { padding: 60px 0 80px; }
    .rs-container { padding: 0 20px; } /* 좌우 여백 추가 */

    /* 2. 타이틀 & 서브 (규격 통일) */
    .rs-title { 
        font-size: 28px !important; /* 25px -> 28px (다른 섹션과 밸런스 맞춤) */
        line-height: 1.35 !important;
        word-break: keep-all;
    }
    .rs-sub { 
        font-size: 15px !important; /* 16px -> 15px */
        line-height: 1.6 !important;
        word-break: keep-all;
    }
    .rs-live-badge { margin-bottom: 12px !important; }

    /* 3. 카드 아이템 레이아웃 (세로 배치) */
    .rs-item { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        padding: 20px !important; /* 패딩 살짝 줄임 */
        gap: 20px !important; 
    }
    
    /* 4. 아이템 왼쪽 (제목 + 태그) */
    .rs-left { 
        width: 100% !important; 
        gap: 16px !important;
    }
    .rs-aura { margin-top: 4px !important; } /* 아이콘 위치 미세조정 */
    
    /* 제목 줄이기 */
    .rs-card-title { 
        font-size: 18px !important; 
        word-break: keep-all;
    }
    /* 태그 줄이기 */
    .rs-tag {
        font-size: 12px !important;
        padding: 3px 6px !important;
        margin-top: 4px !important;
    }

    /* 5. 아이템 오른쪽 (수치 정보) */
    .rs-right { 
        width: 100% !important; 
        border-top: 1px solid #F2F4F6; 
        padding-top: 16px !important; 
    }
    
    .rs-info-group { 
        width: 100% !important; 
        justify-content: space-between !important; /* 양끝 정렬 */
        gap: 0 !important; 
    }
    .rs-divider { display: none !important; } /* 세로선 숨김 */

    /* 6. 수치값 최적화 */
    .rs-meta-label { 
        font-size: 12px !important; 
        margin-bottom: 4px !important;
    }
    
    /* 한도 (왼쪽 정렬) */
    .rs-limit-wrap { 
        align-items: flex-start !important; 
        flex: 1 !important; 
    }
    .rs-limit-val { font-size: 20px !important; }

    /* 퍼센트 (오른쪽 정렬) */
    .rs-percent-wrap { 
        align-items: flex-end !important; 
        width: auto !important; 
    }
    .rs-num-huge { font-size: 32px !important; }
    .rs-unit { font-size: 18px !important; }
}







/* 2.5진행절차 섹션 */
#original-process-wrapper {
    width: 100%;
    padding: 100px 0;
    background-color: #FFFFFF;
    display: block;
    position: relative;
    overflow: visible !important; 
    box-sizing: border-box;
}
#original-process-wrapper * { box-sizing: border-box; font-family: "Pretendard", sans-serif; }

.qt-container {
    width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px;
    position: relative; z-index: 5;
}

/* [PC] 헤더 영역 */
.qt-process-header {
    text-align: center; margin-bottom: 80px;
    position: relative; z-index: 2;
}

/* 배경 빛 효과 */
.hero-glow-restored {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; max-width: 600px; height: 400px;
    background: radial-gradient(closest-side, rgba(49, 130, 246, 0.15), transparent);
    filter: blur(60px);
    z-index: -1; 
    animation: glowBreath 4s infinite alternate;
}

/* 라벨 */
.qt-process-eyebrow {
    display: inline-block;
    font-size: 15px; font-weight: 700;
    color: #5B6676 !important;
    background-color: #F2F4F6 !important;
    padding: 8px 14px; border-radius: 8px;
    margin-bottom: 20px; border: none !important;
}

/* 타이틀 */
.qt-process-title {
    font-size: 40px; font-weight: 800;
    color: #191F28; line-height: 1.25; margin: 0 0 16px;
}

.highlight-text-clean {
    color: #3182F6 !important; background: transparent !important;
    border: none !important; box-shadow: none !important; padding: 0 !important;
    display: inline !important;
}

.qt-process-subtitle {
    font-size: 20px; color: #4E5968; margin: 0; opacity: 0.8;
}

/* [PC] 타임라인 & 카드 */
.qt-process-timeline { position: relative; max-width: 940px; margin: 0 auto; }
.qt-process-line {
    position: absolute; top: 31px; left: 0; right: 0; height: 2px;
    background: #F2F4F6; z-index: 0;
}
.qt-process-steps {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; position: relative; z-index: 1;
}
.qt-process-step {
    display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* 애니메이션 래퍼 */
.floater-wrapper {
    position: relative; margin-bottom: 32px;
    animation: floatingIdle 3s ease-in-out infinite;
    background: #FFFFFF; padding: 0 10px;
}
/* 뱃지 (원) */
.qt-process-badge {
    width: 64px; height: 64px; border-radius: 50%; background: #FFFFFF;
    border: 2px solid #D1D6DB; color: #B0B8C1; font-weight: 800; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    animation: sharpBounce 3s infinite ease-in-out;
}
/* 카드 */
.qt-process-card {
    background: #FFFFFF; width: 100%; padding: 32px 24px; border-radius: 24px;
    border: 1px solid #E5E8EB; background-color: #F9FAFB;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    position: relative; overflow: hidden;
    animation: cardPulse 3s infinite ease-in-out;
}
/* 텍스트 */
.qt-process-step-title { font-size: 20px; font-weight: 700; color: #191F28; margin-bottom: 12px; }
.qt-process-step-desc { font-size: 15px; color: #4E5968; line-height: 1.6; word-break: keep-all; }
.qt-process-step-desc b { color: #3182F6; font-weight: 600; }


/* 호버 */
.qt-process-step:hover .qt-process-card {
    transform: translateY(-5px) !important; background-color: #FFFFFF !important;
    border-color: #C3E3FF !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}
.qt-process-step:hover .qt-process-badge {
    background: #3182F6; border-color: #3182F6; color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(49,130,246,0.3);
}

/* 애니메이션 키프레임 (생략 없이 유지) */
@keyframes glowBreath { 0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } }
@keyframes floatingIdle { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
@keyframes sharpBounce {
    0% { transform: scale(1); background: #FFF; border-color: #D1D6DB; color: #B0B8C1; }
    5% { transform: scale(1.2); background: #3182F6; border-color: #3182F6; color: #FFF; box-shadow: 0 8px 20px rgba(49,130,246,0.3); }
    15% { transform: scale(0.95); }
    25% { transform: scale(1); background: #3182F6; border-color: #3182F6; color: #FFF; }
    30% { transform: scale(1); background: #FFF; border-color: #D1D6DB; color: #B0B8C1; }
    100% { transform: scale(1); background: #FFF; border-color: #D1D6DB; color: #B0B8C1; }
}
@keyframes cardPulse {
    0% { transform: scale(1); background-color: #F9FAFB; border-color: #E5E8EB; }
    5% { transform: scale(1.03); background-color: #FFFFFF; border-color: #C3E3FF; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); }
    25% { transform: scale(1.03); background-color: #FFFFFF; border-color: #C3E3FF; }
    35% { transform: scale(1); background-color: #F9FAFB; border-color: #E5E8EB; }
    100% { transform: scale(1); }
}

.qt-process-step:nth-child(1) .floater-wrapper, .qt-process-step:nth-child(1) .qt-process-badge, .qt-process-step:nth-child(1) .qt-process-card { animation-delay: 0s; }
.qt-process-step:nth-child(2) .floater-wrapper { animation-delay: -0.5s; }
.qt-process-step:nth-child(2) .qt-process-badge, .qt-process-step:nth-child(2) .qt-process-card { animation-delay: 1s; }
.qt-process-step:nth-child(3) .floater-wrapper { animation-delay: -1.0s; }
.qt-process-step:nth-child(3) .qt-process-badge, .qt-process-step:nth-child(3) .qt-process-card { animation-delay: 2s; }


/* ========================================= */
/* [Mobile] Process 섹션 반응형 (최적화 완료) */
/* ========================================= */
@media (max-width: 768px) {
    
    /* [NEW] 뱃지 스타일 강제 지정 (여기 추가됨!) */
    .qt-process-eyebrow {
        background-color: #F2F4F6 !important;
        color: #6B7684 !important;
        font-size: 13px !important; 
        padding: 5px 10px !important;
        border-radius: 8px !important;
    }

    /* 섹션 패딩 및 레이아웃 */
    #process-section-wrapper { padding: 60px 0; overflow: hidden !important; }
    .qt-process-header { margin-bottom: 50px; }
    .qt-process-steps { grid-template-columns: 1fr; gap: 16px; }
    
    /* 타이틀 크기 축소 */
    .qt-process-title { font-size: 28px !important; }
    
    /* 서브 텍스트 축소 */
    .qt-process-subtitle { 
        font-size: 16px !important; padding: 0 20px; word-break: keep-all;
    }

    /* 리스트형 배치 (가로) */
    .qt-process-step { 
        display: flex; flex-direction: row; align-items: flex-start; text-align: left; 
    }
    .qt-process-line { display: none; }

    /* 뱃지(원) 크기 축소 */
    .floater-wrapper { 
        margin-right: 16px; flex-shrink: 0; padding: 0; background: transparent; margin-bottom: 0;
    }
    .qt-process-badge { 
        width: 48px !important; height: 48px !important; font-size: 13px !important; border-width: 1.5px !important;
    }

    /* 카드 및 내부 텍스트 축소 */
    .qt-process-card { 
        padding: 16px 20px !important; background-color: #FAFAFB; box-shadow: none;
    }
    .qt-process-step-title { font-size: 17px !important; margin-bottom: 6px !important; }
    .qt-process-step-desc { font-size: 14px !important; }
}



/* [3] Lineup(현금화 수단) 섹션 - 높이 최적화 버전 */
/* ======================== */

.lineup {
    padding: 80px 0 100px;
    background: var(--white);
}

.lineup-container {
    max-width: 1100px; margin: 0 auto; padding: 0 24px;
}

/* 헤더 (제목 부분) */
.lineup-header { text-align: center !important; }
.lineup-label {
    font-size: 13px; font-weight: 600; color: #6B7684;
    margin-bottom: 8px; background-color: #F2F4F6; 
    padding: 6px 12px; border-radius: 8px; display: inline-block;
}
.lineup-title {
    font-size: 40px; font-weight: 900; color: var(--toss-black);
    line-height: 1.4; margin-bottom: 12px; word-break: keep-all;
}
.lineup-sub {
    font-size: 20px; color: #6B7684;
    line-height: 1.6; word-break: keep-all;
}

/* ------------------------------------------------------- */
/* [핵심] 카드 그리드 & 높이 줄이기 */
/* ------------------------------------------------------- */

.lineup-grid {
    margin-top: 90px !important;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 80px 24px !important;
}

/* 1. 카드 박스 (높이 줄이기) */
.lineup-card {
    overflow: visible !important;
    position: relative !important;
    background: var(--white); 
    border: 1px solid var(--toss-grey-300);
    border-radius: 24px !important;
    
    /* ★ [수정됨] 160px -> 130px (박스 높이 줄임) */
    padding: 130px 24px 30px 24px !important; 
    
    display: flex; flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.lineup-card:hover {
    transform: translateY(-4px); 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #D1D6DB;
}

/* 2. 아이콘 위치 (더 위로 올림) */
.lineup-icon-slot {
    position: absolute !important;
    /* ★ [수정됨] -60px -> -80px (이미지를 더 위로 뺌) */
    top: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    width: auto !important;
    height: auto !important;
    background: none !important;
    margin: 0 !important; padding: 0 !important;
    z-index: 10;
}

/* 3. 아이콘 이미지 (3D 효과 적용됨) */
.lineup-icon-slot img {
    width: 200px !important;
    height: auto !important;
    display: block !important;
    
    /* 아까 요청하신 3D 입체감 효과 */
    animation: float-3d-depth 4s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform, filter;
}

@keyframes float-3d-depth {
    0% {
        transform: translateY(0px) perspective(1000px) rotateX(0deg);
        filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
    }
    50% {
        transform: translateY(-14px) perspective(1000px) rotateX(5deg);
        filter: drop-shadow(0 30px 20px rgba(0,0,0,0.15));
    }
    100% {
        transform: translateY(0px) perspective(1000px) rotateX(0deg);
        filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
    }
}

/* 텍스트 스타일 */
.lineup-card-title {
    font-size: 24px; font-weight: 700; color: var(--toss-black); 
    margin-bottom: 8px; text-align: center;
}
.lineup-card-sub {
    font-size: 16px; color: #4E5968; 
    font-weight: 600; margin-bottom: 16px; text-align: center;
}
.lineup-card-desc {
    font-size: 15px; color: #6B7684; 
    line-height: 1.6; margin-bottom: 24px; 
    word-break: keep-all; flex-grow: 1; text-align: center;
}

/* 태그 */
.lineup-tags { 
    display: flex; flex-wrap: wrap; gap: 8px; 
    margin-top: auto; justify-content: center;
}
.tag {
    font-size: 13px; padding: 6px 12px; border-radius: 8px;
    background: #F2F4F6; border: none;
    color: #4E5968; font-weight: 600;
}

/* 푸터 등 나머지 그대로 유지 */
.lineup-footer {
    margin-top: 60px; text-align: center; padding: 30px;
    background-color: #F9FAFB; border-radius: 20px;
    border: 1px solid var(--toss-grey-300);
}
.lineup-foot-text {
    font-size: 16px; color: #6B7684; 
    margin-bottom: 16px; font-weight: 500;
}
.lineup-cta {
    border-radius: 15px; 
    background-color: var(--white);
    border: 1px solid var(--toss-blue); 
    color: var(--toss-blue);
    font-size: 18px; 
    font-weight: 700; 
    
    /* [수정됨] 높이 56px로 고정 & 패딩 조정 */
    height: 56px;
    padding: 0 36px; 
    
    /* [필수 추가] 글자 정중앙 정렬 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    transition: all 0.2s;
}

.lineup-cta:hover { background-color: #fbe8ff; }

/* ========================================= */
/* [Mobile] Lineup 섹션 반응형 (폰트/레이아웃 최적화) */
/* ========================================= */
@media (max-width: 768px) {

    /* [NEW] 뱃지 스타일 강제 지정 (여기 추가됨!) */
    .lineup-label {
        background-color: #F2F4F6 !important;
        color: #6B7684 !important;
        font-size: 13px !important; 
        padding: 5px 10px !important;
        border-radius: 8px !important;
    }

    /* 1. 전체 여백 및 레이아웃 */
    .lineup { padding: 60px 0 80px; }
    
    /* 2. 타이틀 & 서브 설명 (크기 축소) */
    .lineup-title { 
        font-size: 26px !important; /* PC 40px -> 28px */
        white-space: nowrap !important; 
        line-height: 1.35 !important;
    }
    .lineup-sub { 
        font-size: 15px !important; /* PC 20px -> 15px (본문급) */
        padding: 0 20px !important;
        word-break: keep-all; 
        line-height: 1.6 !important;
    }
    .lineup-sub br { display: none !important; } /* 강제 줄바꿈 해제 */

    /* 3. 그리드 & 카드 여백 */
    .lineup-grid { 
        grid-template-columns: 1fr; /* 1열 배치 */
        gap: 60px !important; /* 간격 너무 멀지 않게 80->60px */
        margin-top: 60px !important; 
    }
    .lineup-card { 
        padding: 100px 20px 24px 20px !important; /* 상단 패딩 최적화 */
    }
    
    /* 4. 아이콘 (너무 크지 않게) */
    .lineup-icon-slot { top: 10px !important; } /* 위치 살짝 내림 */
    .lineup-icon-slot img { width: 140px !important; } /* 160px -> 140px */

    /* 5. 카드 내부 텍스트 (전체 축소) */
    .lineup-card-title { 
        font-size: 20px !important; /* 24px -> 20px */
    }
    .lineup-card-sub { 
        font-size: 14px !important; /* 16px -> 14px */
        color: #6B7684 !important;
        margin-bottom: 12px !important;
    }
    .lineup-card-desc { 
        font-size: 14px !important; /* 15px -> 14px */
        line-height: 1.55 !important;
    }

    /* 6. 태그 (작고 귀엽게) */
    .tag { 
        font-size: 12px !important; /* 13px -> 12px */
        padding: 4px 8px !important;
    }

    /* 7. 푸터 및 버튼 */
    .lineup-footer { 
        margin-top: 40px; 
        padding: 24px 20px; 
    }
    .lineup-foot-text { 
        font-size: 15px !important; /* 16px -> 15px */
        line-height: 1.6 !important;
        word-break: keep-all;
    }
    
    /* 버튼 최적화 (54px 높이 유지) */
    .lineup-cta {
        width: auto !important;
        min-width: 200px;
        height: 54px !important;
        font-size: 16px !important;
        padding: 0 28px !important;
    }
}


/* ======================== */
/* [4] Solution(정책) 섹션   */
/* ======================== */

/* 애니메이션 정의 */
@keyframes toss-pulse {
    0% { box-shadow: 0 4px 12px rgba(49, 130, 246, 0.05); }
    50% { box-shadow: 0 4px 18px rgba(49, 130, 246, 0.2); }
    100% { box-shadow: 0 4px 12px rgba(49, 130, 246, 0.05); }
}
@keyframes laser-scan {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; box-shadow: 0 0 10px #3182F6, 0 0 20px #60A5FA; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* 중앙선 트랙 설정 (기존 flow-map에 추가됨) */
.flow-map {
    position: relative; 
    /* overflow: hidden; <-- 만약 빛이 잘리면 이 줄을 지우거나 주석처리 하세요 */
}

/* [NEW] 레이저 빛줄기 (가상요소로 생성) */
.flow-map::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    
    /* 레이저 크기 */
    width: 4px; 
    height: 80px; /* 빛줄기 길이 */
    
    /* 색상: 퍼플 -> 투명 그라데이션 */
    background: linear-gradient(to bottom, rgba(49, 130, 246, 0), #3182F6 50%, #60A5FA);

    border-radius: 4px;
    z-index: 5; /* 점보다 위에 오도록 */
    opacity: 0; /* 평소엔 안 보임 */

    /* 네온 효과 */
    box-shadow: 0 0 15px rgba(49, 130, 246, 0.8);
    will-change: top, opacity;
}

/* [동작] active 클래스가 붙으면 애니메이션 시작 */
.flow-map.active::after {
    animation: laser-scan 2.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

.solution {
    padding: 80px 0 100px; background: var(--white);
}
.solution-container {
    max-width: 600px; margin: 0 auto; padding: 0 24px;
}

/* 헤더 스타일 */
.solution-header { text-align: center; margin-bottom: 40px; }
.solution-label {
    font-size: 14px; /* 수정됨: 17px -> 15px */
    font-weight: 600; color: #6B7684;
    margin-bottom: 8px;
    /* 아래 3줄 추가 */
    background-color: #F2F4F6; 
    padding: 6px 12px; 
    border-radius: 8px; display: inline-block;
}
.solution-title {
    font-size: 40px; font-weight: 900; color: var(--toss-black);
    line-height: 1.3; margin-bottom: 12px; word-break: keep-all;
}
.solution-title span { color: var(--toss-blue); }
.solution-sub {
    font-size: 20px; color: #6B7684; /* toss-grey-600 */
    line-height: 1.6; word-break: keep-all; margin-bottom: 20px;
}
.solution-pills {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
}
.pill {
    font-size: 14px; padding: 7px 14px; border-radius: 999px;
    background: #F9FAFB; /* toss-bg-light */
    border: 1px solid var(--toss-grey-300);
    color: #4E5968; font-weight: 500;
}

/* [플로우 맵 스타일] */
.flow-map {
    position: relative; padding-top: 20px; margin-bottom: 40px;
}
/* 세로선 */
.flow-map::before {
    content: ''; position: absolute; top: 0; left: 50%;
    width: 2px; height: 100%; background: var(--toss-grey-300);
    transform: translateX(-50%);
}
.flow-item {
    position: relative; margin-bottom: 35px; 
    display: flex; align-items: center;
}
.flow-item:last-of-type { margin-bottom: 0; }

/* 플로우 노드 (점) */
.flow-node {
    width: 22px; height: 22px; border-radius: 50%;
    position: absolute; left: 50%; transform: translateX(-50%);
    z-index: 10; 
}
/* 노드 색상 분기 */
.flow-item:not(.is-solution) .flow-node {
    background: #8B95A1; border: 4px solid var(--white); 
    
}
.flow-item.is-solution .flow-node {
    background: var(--toss-blue); border: 4px solid var(--white);
    
}

/* 플로우 콘텐츠 카드 */
.flow-content {
    flex-grow: 1; padding: 20px; 
    border-radius: 16px; 
    border: 1px solid var(--toss-grey-300);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    background: var(--white);
    max-width: calc(50% - 25px); 
    position: relative; transition: all 0.3s ease;
}
/* 솔루션 카드 효과 */
.flow-item.is-solution .flow-content {
    border-color: var(--toss-blue); 
    animation: toss-pulse 2s infinite ease-in-out;
}
/* 좌우 배치 */
.flow-item:nth-child(even) .flow-content { margin-left: auto; }
.flow-item:nth-child(odd) .flow-content { margin-right: auto; }

/* 말풍선 꼬리 */
.flow-content::after {
    content: ''; position: absolute; top: 50%;
    width: 0; height: 0; border-style: solid;
    transform: translateY(-50%);
}
/* 왼쪽 카드 꼬리 */
.flow-item:nth-child(odd) .flow-content::after {
    right: -10px; border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--toss-grey-300);
}
.flow-item:nth-child(odd).is-solution .flow-content::after {
    border-color: transparent transparent transparent var(--toss-blue);
}
/* 오른쪽 카드 꼬리 */
.flow-item:nth-child(even) .flow-content::after {
    left: -10px; border-width: 10px 10px 10px 0;
    border-color: transparent var(--toss-grey-300) transparent transparent;
}
.flow-item:nth-child(even).is-solution .flow-content::after {
    border-color: transparent var(--toss-blue) transparent transparent;
}

/* 카드 내용 */
.flow-label {
    font-size: 14px; font-weight: 700; padding: 4px 10px;
    border-radius: 8px; margin-bottom: 8px; display: inline-block;
}
.label-red { background: #FEF2F2; color: #B91C1C; }
.label-blue { background: var(--toss-blue); color: var(--white); }

.flow-text { font-size: 16px; color: var(--toss-black); font-weight: 800; }
.flow-text strong { color: var(--toss-blue); font-weight: 900; }

/* 하단 CTA */
.solution-footer { margin-top: 48px; text-align: center; }
.solution-foot-text {
    font-size: 16px; color: #6B7684; margin-bottom: 16px;
}
.solution-cta {
    border-radius: 14px; 
    background: var(--toss-blue);
    color: var(--white); 
    font-size: 18px; 
    font-weight: 700; 
    
    /* [수정됨] 패딩은 좌우만, 높이는 56px 고정 */
    padding: 0 36px; 
    height: 56px; 
    
    /* [추가됨] 글자 정중앙 정렬 (필수) */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(49, 130, 246, 0.4);
}
.solution-cta:hover { background-color: var(--toss-blue-dark); }


/* ========================================= */
/* [Mobile] Solution 섹션 반응형 (레이저 위치 수정됨) */
/* ========================================= */
@media (max-width: 768px) {

    /* [NEW] 뱃지 스타일 강제 지정 (여기 추가됨!) */
    .solution-label { 
        font-size: 13px !important; 
        padding: 4px 8px !important;
        background-color: #F2F4F6 !important;
        color: #6B7684 !important;
        border-radius: 8px !important;
    }

    /* 1. 전체 여백 */
    .solution { padding: 60px 0 80px; }
    
    /* 2. 타이틀 & 서브 */
    .solution-title { 
        font-size: 28px !important; 
        line-height: 1.35 !important;
    }
    .solution-sub { 
        font-size: 15px !important; 
        word-break: keep-all;
        padding: 0 10px;
    }
    
    /* 3. 뱃지 */
    .pill { 
        font-size: 13px !important; 
        padding: 6px 12px !important;
    }

    /* 4. [수정] 플로우 맵 레이아웃 (왼쪽 정렬) */
    .flow-map { margin-bottom: 30px; }

    /* ★★★ [핵심 수정] 선과 레이저 위치 칼같이 맞춤 (34px) ★★★ */
    .flow-map::before { 
        left: 34px !important; 
        width: 2px !important;
        transform: none !important; /* 기존 중앙정렬 해제 */
    }
    
    .flow-map::after { 
        left: 34px !important; 
        transform: translateX(-50%) !important; /* 레이저 중심 잡기 */
        width: 4px !important;
    }
    
    .flow-node { 
        left: 23px !important; /* 34px - 11px(반지름) = 23px */
        transform: none !important;
    }

    /* 5. 플로우 아이템 */
    .flow-item { margin-bottom: 24px; }
    
    /* 6. 말풍선 카드 (오른쪽 밀기) */
    .flow-content {
        max-width: calc(100% - 70px) !important; /* 공간 확보 */
        margin-left: 70px !important; /* 점보다 더 오른쪽으로 */
        margin-right: 0 !important;
        padding: 16px 20px !important;
    }
    
    /* 말풍선 꼬리 (왼쪽) */
    .flow-content::after {
        left: -10px !important; 
        right: auto !important;
        border-width: 10px 10px 10px 0 !important;
    }
    .flow-item:not(.is-solution) .flow-content::after { 
        border-color: transparent var(--toss-grey-300) transparent transparent !important; 
    }
    .flow-item.is-solution .flow-content::after { 
        border-color: transparent var(--toss-blue) transparent transparent !important; 
    }

    /* 7. 내부 텍스트 */
    .flow-label { font-size: 12px !important; padding: 3px 8px !important; margin-bottom: 6px !important; }
    .flow-text { 
        font-size: 15px !important; 
        line-height: 1.5 !important;
    }

    /* 8. 푸터 & 버튼 */
    .solution-footer { margin-top: 40px !important; }
    .solution-foot-text { 
        font-size: 15px !important; 
        word-break: keep-all;
        padding: 0 20px;
    }
    
    .solution-cta {
        display: inline-flex !important;
        width: auto !important;
        min-width: 220px;
        height: 54px !important;
        padding: 0 28px !important;
        font-size: 16px !important;
        margin: 0 auto !important;
    }
}

/* ======================== */
/* [5] Compare(비교) 섹션 - Final Clean Ver */
/* ======================== */
.compare {
    padding: 100px 0 120px;
    background: #F9FAFB;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    overflow: hidden; /* 가로 스크롤 방지 (필수 추가) */
}

.compare-container { max-width: 1000px; margin: 0 auto; padding: 0 24px; }

/* 헤더 */
.compare-header { text-align: center; margin-bottom: 60px; }
.compare-label {
    font-size: 14px; font-weight: 600; color: #6B7684;
    margin-bottom: 12px; background-color: #F2F4F6;
    padding: 6px 12px; border-radius: 8px; display: inline-block;
}
.compare-title {
    font-size: 40px; font-weight: 900;
    color: #191F28; line-height: 1.35; margin-bottom: 20px;
    word-break: keep-all; letter-spacing: -1px;
}
.compare-title span { color: #3182F6; }
.compare-sub {
    font-size: 20px; color: #6B7684;
    line-height: 1.6; word-break: keep-all;
}

/* 그리드 레이아웃 */
.compare-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 40px; margin-bottom: 60px; justify-items: center;
    align-items: center; /* [추가됨] 수직 중앙 정렬 */
}

/* --------------------------------------------------------- */
/* [수정됨] 아이폰 목업 프레임 (디자인 변경점 적용) */
/* --------------------------------------------------------- */
.iphone-mockup {
    width: 320px; height: 650px;
    /* [추가됨] 크기 고정 (깨짐 방지) */
    min-width: 320px; min-height: 650px;
    
    /* 원본 속성 유지 */
    background: #FFFFFF; border-radius: 48px;
    overflow: hidden; display: flex; flex-direction: column;
    position: relative;
    
    /* [수정됨] 테두리 색상은 아래 .bad/.good 에서 개별 적용하므로 기본값은 뺌 */
    border: 10px solid #2C2C2E; 
    transition: all 0.3s ease; /* 부드러운 전환 추가 */
}

/* 노치 (Dynamic Island) */
.iphone-mockup::before {
    content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    width: 96px; height: 28px; background: #000; border-radius: 20px; z-index: 30;
}

/* 앱 상단바 */
.app-bar {
    padding: 60px 20px 16px; display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.95);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    z-index: 10; position: relative;
}
.app-back { font-size: 18px; color: #191F28; margin-right: 4px; cursor: pointer; }

/* 프로필 정보 */
.app-info { display: flex; flex-direction: column; }
.app-name { font-size: 17px; font-weight: 800; color: #191F28; letter-spacing: -0.5px; }
.app-status { font-size: 12px; color: #8B95A1; margin-top: 2px; }

/* CSS 로고 (티켓+번개) */
.css-logo-frame {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative;
}
.ticket-shape {
    width: 40px; height: 26px; background: #3182F6; border-radius: 4px; position: relative;
    mask-image: radial-gradient(circle at 0 50%, transparent 5px, black 5.5px), radial-gradient(circle at 100% 50%, transparent 5px, black 5.5px);
    -webkit-mask-image: radial-gradient(circle at 0 50%, transparent 5px, black 5.5px), radial-gradient(circle at 100% 50%, transparent 5px, black 5.5px);
}
.lightning-icon {
    font-size: 24px; color: #FFD600; z-index: 2; font-weight: 900; font-family: sans-serif;
    filter: drop-shadow(1px 1px 0px #fff) drop-shadow(-1px -1px 0px #fff);
}
/* 타업체 프사 */
.bad-profile {
    width: 44px; height: 44px; border-radius: 16px;
    background: #D1D1D6; color: #636366;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}

/* 채팅창 공통 */
.chat-screen {
    flex: 1; padding: 16px; padding-bottom: 30px;
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.chat-screen::-webkit-scrollbar { display: none; }

/* 말풍선 공통 */
.msg {
    max-width: 85%; padding: 11px 15px;
    font-size: 13px; line-height: 1.5; position: relative; word-break: keep-all;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}


/* ----------------------------------------------------------- */
/* [테마 1] 타업체 (Bad) - [수정됨] 가독성 & 미드 그레이 */
/* ----------------------------------------------------------- */
.iphone-mockup.bad {
    transform: scale(0.95); /* 약간 작게 */
    opacity: 0.95;          /* 흐릿함 제거 (가독성 확보) */
    
    /* [변경] 미드 그레이 테두리 */
    border: 10px solid #8E8E93; 
    background: #8E8E93; /* 프레임 배경색 */
    
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 1;
}

/* 내부 테마 */
.iphone-mockup.bad .chat-screen { background: #E5E5EA; } /* 칙칙한 그레이 */
.msg-left.bad {
    align-self: flex-start; background: #F2F2F7; color: #3A3A3C;
    border-radius: 4px 18px 18px 18px; border: 1px solid #D1D1D6;
}
.msg-right.bad {
    align-self: flex-end; background: #8E8E93; color: #fff;
    border-radius: 18px 4px 18px 18px; 
    opacity: 1; /* 투명도 제거 (가독성) */
}
.txt-warn { color: #FF3B30; font-weight: 800; }
.txt-read { font-size: 10px; color: #8E8E93; margin-top: 4px; text-align: right; display: block; }


/* ----------------------------------------------------------- */
/* [테마 2] 퀵티켓 (Good) - [수정됨] 리얼 쉐도우 & 블랙 테두리 */
/* ----------------------------------------------------------- */
.iphone-mockup.good {
    transform: scale(1.03); /* 살짝 크게 */
    opacity: 1;
    z-index: 10;
    
    /* [변경] 고급스러운 다크 그레이 (메탈릭 그라데이션) */
    border: 10px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(145deg, #505050, #1a1a1a);
    background-origin: border-box;
    background-clip: content-box, border-box;
    
    /* [변경] 리얼 쉐도우 (파란 빛 제거) */
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.25), 0 10px 20px -5px rgba(0, 0, 0, 0.2);
}

.iphone-mockup.good:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 40px 80px -12px rgba(0, 0, 0, 0.3), 0 16px 30px -8px rgba(0, 0, 0, 0.25);
}

/* 내부 테마 */
.iphone-mockup.good .chat-screen { background: #F2F4F6; } /* 밝은 그레이 */
.msg-left.good {
    align-self: flex-start; background: #FFFFFF; color: #191F28;
    border-radius: 4px 18px 18px 18px; border: 1px solid #E5E8EB;
}
.msg-right.good {
    align-self: flex-end; background: #3182F6; color: #fff;
    border-radius: 18px 4px 18px 18px; box-shadow: 0 4px 12px rgba(49, 130, 246, 0.3);
}
.txt-blue { color: #3182F6; font-weight: 800; }


/* 입금 카드 */
.toss-card {
    background: #fff; padding: 14px; border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.03); margin-top: 6px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.toss-icon {
    width: 32px; height: 32px; background: #3182F6; border-radius: 50%;
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold;
}
.toss-text div:first-child { font-size: 11px; color: #8B95A1; margin-bottom: 2px; }
.toss-text div:last-child { font-size: 14px; font-weight: 700; color: #333D4B; }

/* 홈 인디케이터 */
.home-indicator {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    width: 110px; height: 4px; background: #191F28; border-radius: 10px; opacity: 0.2; z-index: 30;
}

/* 푸터 & 반응형 */
.compare-footer { text-align: center; margin-top: 60px; }
.compare-foot-text {
    font-size: 16px; color: #6B7684; margin-bottom: 24px; font-weight: 500;
}
.compare-cta {
    background-color: #3182F6; color: #fff; font-size: 18px; font-weight: 700;
    height: 56px; padding: 0 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; box-shadow: 0 8px 24px rgba(49, 130, 246, 0.3);
    border: none; cursor: pointer; transition: all 0.2s;
}
.compare-cta:hover { background-color: #2563EB; transform: translateY(-2px); }


/* ========================================= */
/* [Mobile] Compare 섹션 반응형 (원본 유지) */
/* ========================================= */
@media (max-width: 768px) {
    .compare-label {
        background-color: #F2F4F6 !important; color: #6B7684 !important;
        font-size: 13px !important; padding: 5px 10px !important; border-radius: 8px !important;
    }
    .compare { padding: 60px 0 80px; overflow: hidden; }
    
    .compare-title { font-size: 28px !important; line-height: 1.35; word-break: keep-all; }
    .compare-sub { font-size: 15px !important; word-break: keep-all; padding: 0 10px; }
    .compare-sub br.pc-only { display: none; }

    .compare-grid {
        display: flex !important; flex-direction: column !important;
        gap: 50px !important; margin-top: 40px !important; align-items: center;
    }

    /* 모바일 목업 크기 및 스타일 (원본 유지 + 수정값 반영) */
    .iphone-mockup {
        width: 280px !important; 
        /* [추가됨] 모바일 고정 크기 (깨짐 방지) */
        min-width: 280px !important;
        height: 580px !important; 
        min-height: 580px !important;
        
        border-width: 8px !important; 
        border-radius: 36px !important; 
        margin: 0 auto;
    }

    .iphone-mockup.bad { transform: scale(0.9); margin-bottom: -20px; }
    .iphone-mockup.good { transform: scale(1); }

    .chat-screen { padding: 12px !important; }
    .app-bar { padding: 45px 16px 12px !important; }
    .app-name { font-size: 15px !important; }
    .app-status { font-size: 11px !important; }
    .css-logo-frame { transform: scale(0.9); }
    .msg { font-size: 13px !important; padding: 10px 12px !important; max-width: 90% !important; }
    .toss-card { padding: 12px !important; }
    .toss-text div:first-child { font-size: 10px !important; }
    .toss-text div:last-child { font-size: 13px !important; }

    .compare-footer { margin-top: 40px !important; padding: 0 20px; }
    .compare-foot-text { font-size: 15px !important; margin-bottom: 20px !important; }
    .compare-cta {
        width: auto !important; min-width: 220px; height: 54px !important;
        padding: 0 28px !important; font-size: 16px !important;
    }
}


/* ======================== */
/* [6]  섹션    */
/* ======================== */

.closing {
    padding: 100px 0 120px;
    background: linear-gradient(to bottom, #FFFFFF, #F9FAFB);
    overflow: hidden; /* 티커 넘침 방지 */
}

.closing-container {
    max-width: 800px; margin: 0 auto; padding: 0 24px;
    text-align: center;
}

/* 헤더 */
.closing-header { margin-bottom: 40px; }
.closing-label {
    display: inline-block;
    font-size: 14px; /* 수정됨: 14px -> 15px */
    font-weight: 600; color: #6B7684;
    background: #F2F4F6;  
    padding: 6px 12px; border-radius: 8px;
    margin-bottom: 16px;
}
.closing-title {
    font-size: 40px; font-weight: 900; color: var(--toss-black);
    line-height: 1.3; margin-bottom: 20px; word-break: keep-all;
}
.closing-title span { color: var(--toss-blue); }
.closing-sub {
    font-size: 20px; color: #6B7684; /* toss-grey-600 */
    line-height: 1.6; word-break: keep-all;
}
.closing-sub strong { color: var(--toss-blue); font-weight: 700; }

/* [실시간 티커] */
.closing-ticker {
    width: 100%; max-width: 1000px; margin: 0 auto 50px;
    position: relative; height: 40px; overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.ticker-track {
    display: flex; gap: 16px; position: absolute; left: 0;
    animation: ticker-slide 20s linear infinite; 
    white-space: nowrap;
}
@keyframes ticker-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-item {
    background: var(--white);
    border: 1px solid var(--toss-grey-300);
    border-radius: 999px; padding: 8px 16px;
    font-size: 13px; color: #4E5968; /* toss-grey-700 */
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.ticker-money { font-weight: 700; color: var(--toss-blue); }
.ticker-time { color: #8B95A1; font-size: 12px; }

/* [신뢰 박스] */
.closing-trust {
    display: flex; justify-content: center; gap: 12px;
    margin-bottom: 50px; flex-wrap: wrap;
}
.trust-item {
    background: var(--white);
    border: 1px solid var(--toss-grey-300);
    border-radius: 16px; padding: 16px 20px;
    text-align: left; display: flex; align-items: flex-start; gap: 12px;
    min-width: 240px; flex: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.trust-icon { font-size: 24px; line-height: 1; }
.trust-text-wrap { display: flex; flex-direction: column; }
.trust-title {
    font-size: 20px; font-weight: 700; color: var(--toss-black); margin-bottom: 4px;
}
.trust-desc { font-size: 13px; color: #6B7684; line-height: 1.4; }

/* [ CTA] */
.closing-actions {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* 주 버튼 */
.closing-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--toss-blue); color: var(--white);
    font-size: 18px; font-weight: 700;
    width: 100%; max-width: 480px; height: 56px;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(49, 130, 246, 0.3);
    transition: transform 0.2s, background-color 0.2s;
    position: relative; overflow: hidden;
}
/* 버튼 빤짝이 효과 */
.closing-btn-primary::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg); animation: shine 3s infinite;
}
@keyframes shine {
    0%, 50% { left: -100%; }
    100% { left: 200%; }
}
.closing-btn-primary:hover {
    background-color: var(--toss-blue-dark); transform: translateY(-2px);
}

/* 보조 버튼 */
.closing-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; max-width: 480px; height: 56px;
    background-color: var(--white);
    border: 2px solid var(--toss-blue); color: var(--toss-blue);
    font-size: 18px; font-weight: 700; border-radius: 20px;
    transition: background-color 0.2s, transform 0.2s;
}
.closing-btn-secondary:hover {
    background-color: #E8F3FF; transform: translateY(-1px);
}

/* ========================================= */
/* [Mobile] Closing 섹션 반응형 (최적화 완료) */
/* ========================================= */
@media (max-width: 768px) {
    
    /* [NEW] 뱃지 스타일 강제 지정 (여기 추가됨!) */
    .closing-label {
        display: inline-block;
        font-size: 14px !important; /* 14px로 살짝 줄임 */
        font-weight: 600; color: #6B7684 !important;
        background: #F2F4F6 !important;
        padding: 6px 12px !important; border-radius: 8px !important;
        margin-bottom: 16px !important;
    }

    /* 1. 전체 여백 */
    .closing { padding: 60px 0 80px; }
    
    /* 2. 타이틀 & 서브 설명 (폰트 최적화) */
    .closing-title { 
        font-size: 30px !important; /* 30px: 마지막 강조를 위해 28px보다 큼 */
        line-height: 1.35 !important;
        word-break: keep-all;
    }
    .closing-sub { 
        font-size: 16px !important; /* 20px -> 16px */
        line-height: 1.6 !important;
        padding: 0 10px;
        word-break: keep-all;
    }
    .closing-sub br { display: none; } /* 불필요한 줄바꿈 제거 */

    /* 3. 신뢰 박스 (세로 배치) */
    .closing-trust { 
        flex-direction: column !important; /* 세로로 쌓기 */
        align-items: stretch !important; 
        gap: 12px !important;
        margin-bottom: 40px !important;
    }
    .trust-item { 
        width: 100% !important; 
        min-width: auto !important;
        padding: 16px !important; /* 패딩 살짝 줄임 */
        align-items: center !important; /* 아이콘/텍스트 수직 중앙 */
    }
    .trust-title { font-size: 16px !important; } /* 20px -> 16px */
    .trust-desc { font-size: 13px !important; }
    .trust-icon { font-size: 22px !important; }

    /* 4. 실시간 티커 (모바일 최적화) */
    .closing-ticker {
        height: 36px !important; /* 40px -> 36px */
        margin-bottom: 40px !important;
    }
    .ticker-item {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* 5. 하단 버튼 (공통 규격 54px 적용) */
    .closing-btn-primary, 
    .closing-btn-secondary {
        /* 공통 규격 적용 */
        width: auto !important;
        min-width: 220px;        /* 최소 너비 확보 */
        height: 54px !important; /* 높이 통일 */
        font-size: 16px !important;
        padding: 0 28px !important;
        
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        border-radius: 16px !important;
        margin: 0 auto !important;
    }

    /* 버튼 간격 */
    .closing-actions { gap: 12px !important; }
}

/* ======================== */
/* [7] Reviews(후기) 섹션    */
/* ======================== */

/* 애니메이션 정의 */
@keyframes highlight-pulse {
    0%, 100% { background-color: #EFF6FF; box-shadow: 0 0 0px rgba(49, 130, 246, 0); }
    50% { background-color: var(--white); box-shadow: 0 0 12px rgba(49, 130, 246, 0.7); }
}
@keyframes fill-bar-fast { 0% { width: 0; } 100% { width: 98%; } }
@keyframes fill-bar-fee { 0% { width: 0; } 100% { width: 96%; } }
@keyframes fill-bar-kind { 0% { width: 0; } 100% { width: 100%; } }

.reviews { padding: 100px 0; background: var(--white); }
.reviews-container { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* 헤더 */
.reviews-header { text-align: center; margin-bottom: 50px; }
.reviews-label {
    font-size: 14px; font-weight: 600; color: #6B7684;
    margin-bottom: 8px;
    /* 아래 3줄 추가 */
    background-color: #F2F4F6; 
    padding: 6px 12px; 
    border-radius: 8px; display: inline-block;
}
.reviews-title {
    font-size: 40px; font-weight: 800; color: var(--toss-black);
    line-height: 1.35; word-break: keep-all;
}

/* 평점 요약 박스 */
.reviews-summary {
    display: flex; background: #F9FAFB; /* toss-bg-light */
    border: 1px solid var(--toss-grey-300);
    border-radius: 20px; padding: 30px;
    margin-bottom: 60px; gap: 40px; align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.summary-left {
    flex-shrink: 0; text-align: center;
    border-right: 1px solid var(--toss-grey-300); padding-right: 40px;
}
.summary-score { font-size: 16px; color: #6B7684; margin-bottom: 4px; }
.score-value {
    font-size: 48px; font-weight: 800; color: var(--toss-black);
    line-height: 1; margin-right: 4px;
}
.summary-stars { font-size: 24px; color: var(--toss-blue); margin-bottom: 12px; }
.summary-text {
    font-size: 14px; color: #6B7684; line-height: 1.5;
}
.summary-text strong { color: var(--toss-blue); font-weight: 700; }

.summary-right { flex-grow: 1; }

/* 바 그래프 */
.summary-bars { list-style: none; padding: 0; margin: 0; }
.summary-bars li { margin-bottom: 14px; display: flex; align-items: center; }
.summary-bars li:last-child { margin-bottom: 0; }

.bar-label {
    font-size: 14px; color: #4E5968; font-weight: 600; 
    width: 140px; flex-shrink: 0;
}
.bar-wrap {
    flex-grow: 1; display: flex; align-items: center; margin-left: 10px;
}
.bar-fill {
    height: 8px; border-radius: 999px; background: var(--toss-grey-300);
    position: relative; display: inline-block; width: 100%; margin-right: 8px;
}
/* 바 차오름 효과 */
.bar-fill::before {
    content: ''; position: absolute; top: 0; left: 0; height: 100%;
    background: var(--toss-blue); border-radius: 999px; width: 0; 
}
/* [JS] is-active 클래스 트리거 */
.reviews-summary.is-active .bar-fast::before { animation: fill-bar-fast 1.2s ease-out forwards; }
.reviews-summary.is-active .bar-fee::before { animation: fill-bar-fee 1.2s ease-out forwards; }
.reviews-summary.is-active .bar-kind::before { animation: fill-bar-kind 1.2s ease-out forwards; }

.bar-value { font-size: 14px; font-weight: 700; color: var(--toss-black); }

/* 후기 리스트 */
.reviews-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.review-card:nth-child(3) { grid-column: span 2; }

/* 말풍선 스타일 */
.review-card {
    background: var(--white); border: 1px solid var(--toss-grey-300);
    border-radius: 18px; padding: 20px; display: flex; flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02); position: relative;
}
.review-meta {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}
.review-name { font-size: 15px; font-weight: 700; color: var(--toss-black); }
.review-tag {
    font-size: 13px; padding: 4px 8px; border-radius: 8px;
    background: #F0F4FF; color: var(--toss-blue); font-weight: 600;
}

.review-bubble {
    background: #F9FAFB; border: 1px solid #E5E8EB;
    border-radius: 18px; padding: 20px; position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
/* 말풍선 꼬리 */
.review-bubble::before {
    content: ''; position: absolute; top: -11px; right: 20px; 
    width: 0; height: 0; border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #F9FAFB transparent; z-index: 2;
}
.review-bubble::after {
    content: ''; position: absolute; top: -12px; right: 20px;
    width: 0; height: 0; border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent var(--toss-grey-300) transparent; z-index: 1;
}

/* 미니 입금 카드 */
.mini-deposit-card {
    position: absolute; top: 20px; right: 20px; width: 130px; 
    background: var(--white); border: 1px solid var(--toss-grey-300);
    border-radius: 10px; padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); z-index: 10;
}
.deposit-label { font-size: 10px; color: #8B95A1; font-weight: 600; margin-bottom: 4px; }
.deposit-amount { font-size: 14px; color: var(--toss-blue); font-weight: 800; margin-bottom: 4px; }
.deposit-meta { font-size: 9px; color: #6B7684; }

.review-bubble-text {
    font-size: 16px; color: var(--toss-black); line-height: 1.7;
    word-break: keep-all; padding-top: 90px; 
}
.highlight-text {
    display: block; background: #EFF6FF; padding: 8px 10px;
    border-radius: 8px; margin-top: 15px; font-weight: 800;
    animation: highlight-pulse 1s infinite ease-in-out; 
    transition: box-shadow 0.5s ease; 
}

/* 푸터 */
.reviews-footer { margin-top: 50px; text-align: center; }
.reviews-more {
    background: #F9FAFB; border: 1px solid var(--toss-grey-300);
    color: var(--toss-black); font-size: 16px; font-weight: 600;
    padding: 14px 28px; border-radius: 999px;
    transition: background 0.2s; margin-bottom: 20px;
}
.reviews-more:hover { background: #E8EBEF; }
.reviews-foot-text { font-size: 16px; color: #6B7684; }

/* ========================================= */
/* [Mobile] Reviews 섹션 반응형 (최적화 완료) */
/* ========================================= */
@media (max-width: 768px) {

    /* [NEW] 뱃지 스타일 강제 지정 (여기 추가됨!) */
    .reviews-label {
        background-color: #F2F4F6 !important;
        color: #6B7684 !important;
        font-size: 13px !important; 
        padding: 5px 10px !important;
        border-radius: 8px !important;
    }

    /* 1. 전체 여백 및 배경 */
    .reviews { padding: 60px 0 80px; }
    
    /* 2. 타이틀 & 라벨 최적화 */
    .reviews-title { 
        font-size: 28px !important; /* 40px -> 28px */
        line-height: 1.35 !important;
        word-break: keep-all;
    }

    /* 3. 평점 요약 박스 (세로 배치) */
    .reviews-summary { 
        flex-direction: column !important; 
        gap: 20px !important; 
        padding: 24px 20px !important; 
    }
    
    /* 왼쪽: 점수 부분 */
    .summary-left { 
        width: 100% !important;
        border-right: none !important; 
        border-bottom: 1px solid var(--toss-grey-300); 
        padding-right: 0 !important; 
        padding-bottom: 20px !important;
        text-align: center;
    }
    .score-value { font-size: 40px !important; } /* 48px -> 40px */
    .summary-text { font-size: 13px !important; }

    /* 오른쪽: 그래프 부분 */
    .summary-right { width: 100% !important; }
    .summary-bars li { 
        margin-bottom: 12px !important;
        /* 모바일에서는 라벨과 바를 위아래로 배치 */
        flex-direction: column !important; 
        align-items: flex-start !important; 
    }
    .bar-label { 
        width: 100% !important; 
        margin-bottom: 6px !important;
        font-size: 13px !important;
    }
    .bar-wrap { 
        margin-left: 0 !important; 
        width: 100% !important; 
    }

    /* 4. 후기 리스트 (1열 배치) */
    .reviews-list { 
        grid-template-columns: 1fr !important; 
        gap: 24px !important; 
    }
    /* 3번째 카드도 1칸 차지하게 */
    .review-card:nth-child(3) { grid-column: span 1 !important; }

    /* 5. 후기 카드 내부 */
    .review-card { padding: 16px !important; }
    .review-name { font-size: 14px !important; }
    .review-tag { font-size: 11px !important; padding: 3px 6px !important; }
    
    /* 말풍선 본문 */
    .review-bubble { padding: 16px !important; }
    .review-bubble-text { 
        /* 미니 카드 때문에 상단 여백 필요 */
        padding-top: 80px !important; 
        font-size: 15px !important; /* 16px -> 15px */
        line-height: 1.6 !important;
    }
    
    /* 6. 미니 입금 카드 (위치 조정) */
    .mini-deposit-card {
        top: 16px !important; 
        right: 16px !important; 
        width: 110px !important; /* 130px -> 110px */
        padding: 8px !important;
    }
    .deposit-amount { font-size: 13px !important; } /* 14px -> 13px */

    /* 7. 푸터 및 버튼 */
    .reviews-footer { margin-top: 40px !important; }
    
    .reviews-more {
        display: inline-flex !important;
        width: auto !important;
        min-width: 200px;
        height: 50px !important; /* 공통 높이 54px */
        align-items: center;
        justify-content: center;
        font-size: 16px !important;
        padding: 0 28px !important;
    }
    .reviews-foot-text { 
        font-size: 14px !important; 
        word-break: keep-all;
    }
}

/* ======================== */
/* [8] FAQ 섹션              */
/* ======================== */

/* 변수 추가 (필요 시) */
:root {
    --toss-blue-light: #EFF6FF;
    --toss-grey-100: #F2F4F6;
}

.faq { padding: 100px 0; background: var(--white); }
.faq-container { max-width: 800px; margin: 0 auto; padding: 0 24px; }

/* 헤더 */
.faq-header { text-align: center; margin-bottom: 50px; }
.faq-label {
    font-size: 14px; font-weight: 600; color: #6B7684;
    margin-bottom: 12px; display: inline-block;
    /* 아래 3줄 추가 */
    background-color: #F2F4F6; 
    padding: 6px 12px; 
    border-radius: 8px;
}
.faq-title {
    font-size: 40px; font-weight: 800; color: var(--toss-black);
    line-height: 1.4; word-break: keep-all;
}

/* 아코디언 리스트 */
.faq-list { display: flex; flex-direction: column; gap: 12px; }

/* 아코디언 아이템 (<details>) */
.faq-item {
    background: var(--white);
    border: 1px solid var(--toss-grey-300);
    border-radius: 16px; overflow: hidden;
    transition: all 0.3s ease;
}
/* 열렸을 때 스타일 */
.faq-item[open] {
    border-color: #D1D6DB; box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.faq-item[open] summary {
    background-color: #EFF6FF; /* 연한 퍼플 */
    color: var(--toss-blue); font-weight: 700;
}
.faq-item[open] summary::after {
    transform: rotate(180deg); /* 화살표 회전 */
    /* SVG 색상을 CSS 필터로 바꾸긴 복잡하므로 회전만 적용 */
}

/* 질문 영역 (<summary>) */
summary {
    padding: 20px 24px; font-size: 16px; font-weight: 600; color: var(--toss-black);
    list-style: none; cursor: pointer; position: relative;
    display: flex; justify-content: space-between; align-items: center;
    transition: background-color 0.2s, color 0.2s;
}
/* 크롬 기본 화살표 숨김 */
summary::-webkit-details-marker { display: none; }

/* 커스텀 화살표 */
summary::after {
    content: ''; width: 24px; height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0B8C1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
    transition: transform 0.2s;
}

/* 답변 영역 */
.faq-answer {
    padding: 24px; padding-top: 10px;
    font-size: 16px; color: #4E5968; /* toss-grey-700 */
    line-height: 1.6; word-break: keep-all;
    background-color: var(--white);
    border-top: 1px solid transparent;
}
/* 열렸을 때 답변 상단 보더 */
.faq-item[open] .faq-answer { border-top: 1px solid #EFF6FF; }

/* ========================================= */
/* [Mobile] FAQ 섹션 반응형 (최적화 완료) */
/* ========================================= */
@media (max-width: 768px) {

    /* [NEW] 뱃지 스타일 강제 지정 (여기 추가됨!) */
    .faq-label {
        background-color: #F2F4F6 !important;
        color: #6B7684 !important;
        font-size: 13px !important; 
        padding: 5px 10px !important;
        border-radius: 8px !important;
    }
    
    /* 1. 전체 여백 */
    .faq { padding: 60px 0 80px; }
    
    /* 2. 타이틀 & 라벨 최적화 */
    .faq-title { 
        font-size: 28px !important; /* 24px -> 28px (타이틀 밸런스 맞춤) */
        line-height: 1.35 !important;
        word-break: keep-all;
    }

    /* 3. 아코디언 아이템 스타일 */
    .faq-item { border-radius: 14px !important; }
    
    /* 4. 질문 (summary) */
    summary { 
        padding: 18px 20px !important; 
        font-size: 16px !important; /* 15px -> 16px (질문은 잘 보여야 함) */
        padding-right: 40px !important; /* 화살표 공간 확보 */
        line-height: 1.4 !important;
    }
    
    /* 화살표 위치 */
    summary::after { 
        position: absolute !important; 
        right: 20px !important; 
        top: 50%;
        transform: translateY(-50%); /* 수직 중앙 정렬 */
        transition: transform 0.2s;
    }
    
    /* 열렸을 때 화살표 회전 (transform 덮어쓰기 주의) */
    .faq-item[open] summary::after {
        transform: translateY(-50%) rotate(180deg) !important;
    }

    /* 5. 답변 (answer) */
    .faq-answer { 
        padding: 0 20px 24px 20px !important; /* 상단 패딩 0, 하단 24px */
        font-size: 15px !important; /* 14px -> 15px (가독성 확보) */
        line-height: 1.6 !important;
    }
}


/* ======================== */
/* [9] Footer(푸터)          */
/* ======================== */

/* 변수 추가 (필요 시) */
:root {
    --toss-grey-800: #333D4B;
    --toss-grey-100: #F2F4F6;
}

.footer {
    background-color: #F9FAFB; /* toss-bg-light */
    padding: 80px 0 60px;
    border-top: 1px solid var(--toss-grey-300);
    font-size: 15px;
}
.footer-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* 상단 영역 */
.footer-top {
    display: flex; justify-content: space-between; flex-wrap: wrap;
    gap: 40px; margin-bottom: 60px;
}
/* 브랜드 정보 */
.footer-brand { flex: 1; min-width: 280px; max-width: 400px; }
.footer-logo {
    font-size: 24px; font-weight: 800; color: var(--toss-black);
    margin-bottom: 16px; display: inline-block;
}
.footer-desc {
    font-size: 15px; color: #6B7684; /* toss-grey-600 */
    line-height: 1.6; word-break: keep-all;
}

/* 링크 컬럼들 */
.footer-links { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-column { min-width: 120px; }
.column-title {
    font-size: 15px; font-weight: 700; color: var(--toss-black); margin-bottom: 20px;
}
.column-list li { margin-bottom: 12px; }
.column-list a { font-size: 14px; color: #6B7684; /* toss-grey-600 */ }
.column-list a:hover {
    color: var(--toss-blue); text-decoration: underline;
}

/* 하단 영역 */
.footer-bottom {
    border-top: 1px solid var(--toss-grey-300); padding-top: 40px;
}
.biz-info { margin-bottom: 24px; }
.biz-title {
    font-size: 16px; font-weight: 700; color: #4E5968; /* toss-grey-700 */
    margin-bottom: 8px;
}
.biz-detail {
    font-size: 14px; color: #8B95A1; /* toss-grey-500 */
    line-height: 1.7;
}
.biz-detail span { margin-right: 10px; display: inline-block; }
/* 모바일용 줄바꿈 */
.biz-row { display: block; margin-bottom: 4px; }

.copyright {
    font-size: 13px; color: #D1D6DB; /* toss-grey-400 */
    margin-top: 20px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}


/* [PC에서는 숨기고, 모바일에서만 줄바꿈 작동] */
.mobile-only {
    display: none;
}
/* ========================================= */
/* [Mobile] Footer 섹션 반응형 (깔끔 정리) */
/* ========================================= */
@media (max-width: 768px) {
    
    /* 1. 전체 여백 */
    .footer { padding: 60px 0 80px; } /* 하단 여백 넉넉히 (하단바 고려) */
    
    /* 2. 상단 레이아웃 (세로 배치) */
    .footer-top { 
        flex-direction: column !important; 
        gap: 40px !important; 
        margin-bottom: 40px !important;
    }
    .footer-brand { max-width: 100% !important; }
    .footer-desc { font-size: 14px !important; line-height: 1.6 !important; }

    /* 3. 링크 컬럼 (2열 그리드) */
    .footer-links { 
        display: grid !important;
        grid-template-columns: 1fr 1fr; /* 반반 나누기 */
        gap: 30px 20px !important; /* 세로30, 가로20 */
    }
    .footer-column { min-width: auto !important; }
    .column-title { font-size: 14px !important; margin-bottom: 16px !important; }
    .column-list a { font-size: 13px !important; color: #8B95A1 !important; }

    /* 4. 하단 사업자 정보 (가독성 개선) */
    .footer-bottom { padding-top: 30px !important; }
    .biz-title { font-size: 15px !important; margin-bottom: 12px !important; }
    
    .biz-detail { 
        font-size: 13px !important; 
        line-height: 1.8 !important; /* 줄간격 넓혀서 읽기 편하게 */
    }
    /* 정보 항목마다 줄바꿈 */
    .biz-detail span { 
        display: block !important; 
        margin-right: 0 !important; 
        margin-bottom: 4px !important;
        color: #8B95A1;
    }
    
    .copyright { 
        margin-top: 30px !important; 
        font-size: 12px !important;
    }
}

/* ========================================= */
/* [유틸리티] 반응형 줄바꿈 (강제 적용)       */
/* ========================================= */

/* 1. 모바일 전용 줄바꿈 (.mobile-only) */
/* - 768px 이하에서만 작동 */
@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
        width: 100% !important;
        content: " " !important;
    }
    br.mobile-only { display: block !important; }
}
/* - PC에서는 숨김 */
@media (min-width: 769px) {
    .mobile-only { display: none !important; }
}


/* 2. PC 전용 줄바꿈 (.pc-only) */
/* - 769px 이상에서만 작동 */
@media (min-width: 769px) {
    .pc-only {
        display: block !important;
        width: 100% !important;
        content: " " !important;
    }
    br.pc-only { display: block !important; }
}
/* - 모바일에서는 숨김 */
@media (max-width: 768px) {
    .pc-only { display: none !important; }
}

/* [팝업 스타일 - 퀵티켓 블루 테마] */
.qt-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}
.qt-popup-overlay.show { opacity: 1; visibility: visible; }
.qt-popup-overlay.hidden { display: none; } /* 로직용 */

.qt-popup-wrap {
    position: relative; width: 100%; max-width: 420px;
    transform: scale(0.95); transition: transform 0.3s ease;
}
.qt-popup-overlay.show .qt-popup-wrap { transform: scale(1); }

/* 닫기 버튼 */
.qt-close-btn {
    position: absolute; top: -15px; right: -15px;
    width: 36px; height: 36px; border-radius: 50%;
    background: white; color: #333; font-size: 24px;
    border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center;
}

/* 카드 본체 */
.qt-lead-card {
    background: #fff; border-radius: 24px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    font-family: 'Pretendard', sans-serif;
}

/* 헤더 (퍼플 배경) */
.qt-lead-header {
    background: #EFF6FF; /* 아주 연한 퍼플 */
    padding: 24px 24px 20px; border-bottom: 1px solid #E5E8EB;
}
.qt-badge-wrap { text-align: center; margin-bottom: 12px; }
.qt-badge {
    background: #3182F6;
    color: white; font-size: 12px; font-weight: 700;
    padding: 4px 12px; border-radius: 99px;
}
.qt-header-inner { display: flex; gap: 16px; align-items: center; }
.qt-icon {
    width: 48px; height: 48px; background: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(49, 130, 246, 0.15); flex-shrink: 0;
}
.qt-popup-title { font-size: 18px; font-weight: 700; color: #191F28; margin-bottom: 4px; line-height: 1.3; }
.qt-popup-desc { font-size: 13px; color: #6B7684; word-break: keep-all; }

/* 폼 영역 */
.qt-form { padding: 24px; }
.qt-field { margin-bottom: 16px; }
.qt-field label { display: block; font-size: 13px; font-weight: 700; color: #333; margin-bottom: 6px; }
.qt-field input {
    width: 100%; padding: 14px; border: 1px solid #E5E8EB;
    border-radius: 12px; background: #FAFAFB; font-size: 15px; outline: none;
    transition: all 0.2s;
}
.qt-field input:focus { background: #fff; border-color: #3182F6; box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.1); }
.qt-hint { font-size: 12px; color: #8B95A1; margin-bottom: 20px; letter-spacing: -0.5px; }

/* 제출 버튼 (블루) */
.qt-submit-btn {
    width: 100%; padding: 16px; border-radius: 14px; border: none;
    background: #3182F6; color: white; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: background 0.2s;
    box-shadow: 0 4px 12px rgba(49, 130, 246, 0.3);
}
.qt-submit-btn:hover { background: #236AD6; }
.qt-submit-btn:disabled { background: #E5E8EB; color: #B0B8C1; cursor: not-allowed; box-shadow: none; }

/* QR 뷰 (PC용) */
.qt-qr-wrap { padding: 40px 24px; text-align: center; }
.qt-qr-img-box { margin-bottom: 24px; }
.qt-qr-img { 
    width: 100%;             /* 부모 박스에 꽉 차게 */
    max-width: 400px;        /* 너무 커지지 않게 제한 (원하는 크기로 조절 가능) */
    height: auto;            /* 비율 유지하며 자동 조절 */
    margin: 0 auto; 
    display: block; 
    border: 1px solid #eee; 
}
.qt-qr-info { background: #191F28; padding: 20px; border-radius: 16px; color: white; }
.qt-qr-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; line-height: 1.4; }
.qt-highlight { color: #3182F6; }
.qt-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 16px 0; }
.qt-qr-sub { font-size: 14px; color: #B0B8C1; }
.qt-phone-num { font-size: 24px; color: #3182F6; display: block; margin-top: 4px; }

/* 유틸리티 클래스 */
.hidden { display: none !important; }

/* 모바일 최적화 */
@media (max-width: 768px) {
    .qt-lead-header { padding: 18px; }
    .qt-popup-title { font-size: 16px; }
    .qt-lead-card { border-radius: 16px; }
    .qt-close-btn { top: -10px; right: -10px; width: 32px; height: 32px; font-size: 20px; }
    .qt-field input { padding: 12px; font-size: 14px; }
    .qt-submit-btn { padding: 14px; font-size: 15px; border-radius: 12px; }
    .qt-qr-wrap { padding: 30px 20px; }
    .qt-qr-img { width: 160px; height: 160px; }
}

/* ========================================= */
/* [Hero] 은행앱 스타일 휴대폰 목업 - iphone-mockup 스타일 */
/* ========================================= */
.bank-phone-mockup {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-frame {
    width: 300px;
    height: 620px;
    background: #FFFFFF;
    border-radius: 48px;
    border: 10px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(145deg, #505050, #1a1a1a);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow:
        0 30px 60px -12px rgba(0, 0, 0, 0.25),
        0 12px 24px -8px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 노치 (Dynamic Island) */
.phone-frame::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 28px;
    background: #000;
    border-radius: 20px;
    z-index: 30;
}

.phone-notch {
    display: none; /* 노치는 ::before로 처리 */
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #F8F6FF 0%, #F2EEFF 100%);
    overflow: hidden;
    position: relative;
}

.bank-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 20px 8px;
    color: #191F28;
    font-size: 14px;
    font-weight: 600;
}

.bank-status-bar svg {
    fill: #191F28 !important;
}

.status-icons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.bank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px 16px;
}

.bank-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #191F28;
    font-weight: 700;
    font-size: 18px;
}

.bank-logo-icon {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3182F6;
    font-weight: 800;
    font-size: 18px;
}

.bank-balance-card {
    background: #FFFFFF;
    margin: 0 16px;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #E5E8EB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.balance-label {
    color: #6B7684;
    font-size: 13px;
    margin-bottom: 8px;
}

.balance-amount {
    color: #3182F6;
    font-size: 32px;
    font-weight: 800;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.balance-amount .currency {
    font-size: 22px;
    font-weight: 600;
}

.balance-sub {
    color: #8B95A1;
    font-size: 12px;
    margin-top: 8px;
}

.bank-quick-menu {
    display: flex;
    justify-content: space-around;
    padding: 20px 16px;
}

.quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-item span {
    color: #191F28;
    font-size: 11px;
    font-weight: 500;
}

.bank-transactions {
    background: white;
    margin: 0 16px;
    border-radius: 20px;
    padding: 16px;
    flex: 1;
    border: 1px solid #E5E8EB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.trans-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #191F28;
}

.trans-more {
    color: #3182F6;
    font-size: 12px;
    font-weight: 600;
}

.trans-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F2F4F6;
}

.trans-item:last-child {
    border-bottom: none;
}

.trans-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trans-icon.success {
    background: linear-gradient(135deg, #3182F6, #60A5FA);
}

.trans-info {
    flex: 1;
}

.trans-title {
    font-size: 14px;
    font-weight: 600;
    color: #191F28;
}

.trans-time {
    font-size: 12px;
    color: #8B95A1;
}

.trans-amount {
    font-size: 15px;
    font-weight: 700;
    color: #3182F6;
}

.phone-home-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

/* 모바일 반응형 */
@media (max-width: 900px) {
    .phone-frame {
        width: 240px;
        height: 500px;
        border-radius: 36px;
    }

    .phone-screen {
        border-radius: 28px;
    }

    .balance-amount {
        font-size: 28px;
    }

    .bank-balance-card {
        padding: 16px;
        margin: 0 12px;
    }

    .bank-transactions {
        margin: 0 12px;
        padding: 12px;
    }

    .quick-icon {
        width: 38px;
        height: 38px;
    }
}

/* ========================================= */
/* [Lineup] 아이콘 슬롯 스타일 개선          */
/* ========================================= */
.lineup-icon-slot {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lineup-icon-slot svg {
    width: 80px;
    height: 80px;
}