/* =========================================
   1. 폰트 정의 (Paperozi)
   ========================================= */
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* =========================================
   2. 변수 및 기본 설정 (:root & Reset)
   ========================================= */
:root {
    /* [핵심] 컬러 팔레트 (#e60012) */
    --primary-color: #e60012; --light-color: #e6001230; --highlight-color: #e6001207;

    /* Grayscale */
    --black-900: #000000; --black-800: #111111; --black-700: #1a1a1a;
    --black-600: #222222; --black-500: #333333; --black-400: #444444;
    --black-300: #666666; --black-200: #888888; --black-100: #dddddd; --black-50: #f6f6f6;

    /* Base & Layout */
    --white: #fff; --border-color: #eee; --section-padding: 10vh 0;

    /* [핵심] 그림자 시스템 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.08);
    --shadow-primary: 0 8px 20px #e6001220;

    /* [핵심] 라운드 값 */
    --radius-card: 24px; --radius-btn: 50px;
}

/* 기본 리셋 & 공통 스타일 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Paperozi', 'Noto Sans KR', sans-serif; color: var(--black-800); line-height: 1.6; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: color 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
input, textarea, select, button { font-family: 'Paperozi', 'Noto Sans KR', sans-serif; }

/* 레이아웃 유틸리티 */
.container { max-width: 1240px; margin: 0 auto; padding: 0 15px; }

.carzin-color {color: var(--primary-color) !important;}


/* =========================================
   3. 공통 컴포넌트 (타이틀, 버튼)
   ========================================= */
.section-header { text-align: center; margin-bottom: 5vh; opacity: 0; transform: translateY(50px); transition: opacity 1s ease-out, transform 1s ease-out; }
.section-header.active { opacity: 1; transform: translateY(0); }

.section-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 16px; color: var(--black-800); position: relative; display: inline-block; }
.section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--primary-color); margin: 15px auto 0; border-radius: 2px; }

.section-desc { font-size: 1.1rem; color: var(--black-500); }
.section-desc .highlight { color: var(--primary-color); }

.btn { display: inline-block; padding: 14px 32px; background: var(--primary-color); color: var(--white); border-radius: var(--radius-btn); cursor: pointer; border: none; font-size: 1rem; font-weight: 700; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: var(--shadow-primary); }
.btn:hover { background: var(--black-500); transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }

.btn-accent { box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--black-900); box-shadow: var(--shadow-md); }


/* =========================================
   4. 헤더 & 푸터 & 플로팅 버튼
   ========================================= */
header { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 80px; }

.logo img { height: 55px; width: auto; display: block; }
.nav-info { font-size: 0.95rem; text-align: right; color: var(--black-500); }
.nav-info strong { color: var(--primary-color); font-size: 1.1rem; }
.nav-info img { height: 35px; vertical-align: -11px; display: inline-block; }

footer { background: var(--black-800); color: var(--black-200); padding: 60px 0; font-size: 0.9rem; }
.footer-logo { font-size: 1.5rem; font-weight: 800; color: var(--white); margin-bottom: 20px; display: inline-block; }
.footer-logo img { height: 80px; width: auto; display: block; filter: brightness(0) invert(1); }
.footer-info p { margin-bottom: 8px; line-height: 1.5; }
.copyright { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--black-800); font-size: 0.85rem; text-align: center; }

/* 플로팅 버튼 */
.floating-btns { position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; }
.floating-btns.show { opacity: 1; visibility: visible; transform: translateY(0); }

.float-btn { width: 50px; height: 50px; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow-md); transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); text-decoration: none; }
.float-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.phone-btn { background-color: var(--black-800); color: var(--white); }
.phone-btn:hover { background-color: var(--black-900); color: var(--primary-color); }
.top-btn { background-color: var(--primary-color); color: var(--white); }


/* =========================================
   5. 히어로 섹션
   ========================================= */
.scroll-container { height: 200vh; position: relative; }
.hero-section { position: sticky; top: 0; width: 100%; height: 120vh; padding-top: 10vh; overflow: hidden; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)), url('img/hero-img4.jpg') no-repeat center/cover; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }

@keyframes wordPop {
    0% { opacity: 0; transform: translateY(40px) scale(0.8); filter: blur(5px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.hero-title { position: relative; z-index: 10; text-align: center; font-size: 3.5rem; font-weight: 800; line-height: 1.2; transform-origin: center top; will-change: transform; margin-bottom: 0; color: var(--black-800); }
.hero-title .word { display: inline-block; opacity: 0; animation: wordPop 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; margin: 0 4px; }
.hero-title-red { color: var(--primary-color); margin-top: 10px; display: block; }

.image-container { position: absolute; top: 300px; width: 100%; display: flex; justify-content: center; transition: opacity 0.3s ease; }
.scene-1 { opacity: 1; z-index: 2; }
.scene-1 img { max-width: 450px; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.1)); }
.scene-2 { opacity: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; width: 100%; transform: translateY(100px); }


/* =========================================
   6. 리뷰 섹션
   ========================================= */
.review-section { width: 100%; padding: 20px 0 0px 0; background: transparent; display: flex; flex-direction: column; align-items: center; overflow: visible; }
.review-title { text-align: center; color: var(--black-800); font-size: 2.2rem; font-weight: 300; line-height: 1.3; margin-bottom: 10px; position: relative; z-index: 10; }
.review-title strong { font-weight: bold; color: var(--primary-color); }

.review-wrapper { position: relative; width: 100%; max-width: 1200px; height: 600px; display: flex; justify-content: center; margin-top: 10px; }
.review-inner { position: relative; width: 100%; max-width: 1000px; height: 100%; transform-origin: center top; transition: transform 0.3s ease; }

.review-section .phone-mockup { width: 280px; height: 540px; background: var(--white); border-radius: 40px; border: 8px solid var(--black-800); box-shadow: 0 30px 60px rgba(0,0,0,0.15); position: absolute; left: 50%; transform: translateX(-50%); top: 30px; z-index: 5; overflow: hidden; opacity: 0; margin-top: 100px; transition: all 0.8s ease-out; }
.review-section .phone-mockup.active { opacity: 1; margin-top: 0; }
.review-section .phone-screen { padding: 20px; text-align: center; color: var(--black-800); }
.review-section .app-header { font-weight: 900; font-style: italic; font-size: 18px; margin-bottom: 15px; color: var(--primary-color); }
.review-section .app-header img { height: 15px; margin: 0 auto; }
.review-section .car-img { width: 100%; border-radius: 12px; margin-bottom: 15px; }
.review-section .price-list { text-align: left; font-size: 13px; border-top: 1px solid var(--black-100); margin-top: 10px; padding-top: 10px; }
.review-section .app-price-row { display: flex; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px solid var(--black-100); padding-bottom: 5px; }
.review-section .price-val { color: var(--primary-color); font-weight: 700; }

.review-section .bubble { position: absolute; background: var(--white); padding: 18px; border-radius: 16px; width: 340px; box-shadow: var(--shadow-md); font-size: 15px; color: var(--black-500); line-height: 1.5;  font-family: 'Noto Sans KR', sans-serif; display: flex; gap: 10px; z-index: 10; opacity: 0; transform: scale(0); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(0,0,0,0.03); }
.review-section .bubble.active { opacity: 1; transform: scale(1); }
.review-section .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--black-100); flex-shrink: 0; display: none; }
.review-section .bubble-text { flex: 1; text-align: left; }
.review-section .client-name { display: block; text-align: right; font-size: 14px; color: var(--black-200); margin-top: 5px; font-family: 'Noto Sans KR', sans-serif; }
.review-section .bubble::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; }
.review-section .pos-left::after { right: -9px; top: 50%; transform: translateY(-50%); border-width: 9px 0 9px 10px; border-color: transparent transparent transparent var(--white); }
.review-section .pos-right { flex-direction: row-reverse; text-align: right; }
.review-section .pos-right .client-name { text-align: left; }
.review-section .pos-right::after { left: -9px; top: 50%; transform: translateY(-50%); border-width: 9px 10px 9px 0; border-color: transparent var(--white) transparent transparent; }

.review-section .bubble.b1 { top: 40px; left: 0%; }
.review-section .bubble.b2 { top: 200px; left: -8%; z-index: 10; }
.review-section .bubble.b3 { bottom: 100px; left: 0%; }
.review-section .bubble.b4 { top: 40px; right: 0%; }
.review-section .bubble.b5 { top: 200px; right: -8%; z-index: 10; }
.review-section .bubble.b6 { bottom: 100px; right: 0%; }


/* =========================================
   7. 차량 정보 슬라이더 (Bento Style)
   ========================================= */
.vehicles { position: relative; padding: var(--section-padding); border-top: 1px solid var(--black-100); overflow: hidden; }
.vehicles-wrapper { position: relative; width: 100%; max-width: 100%; margin: 0 auto; padding: 0; }
.vehicles::before,.vehicles::after { content: ""; position: absolute; top: 0; width: 100px; height: 100%; z-index: 2; pointer-events: none; }
.vehicles::before { left: 0; background: linear-gradient(to right, var(--black-50), transparent); }
.vehicles::after { right: 0; background: linear-gradient(to left, var(--black-50), transparent); }
.vehicles-track { display: flex; gap: 24px; overflow-x: auto; padding: 20px 10px 40px 10px; cursor: grab; scroll-behavior: auto; -ms-overflow-style: none; scrollbar-width: none; }
.vehicles-track::-webkit-scrollbar { display: none; }
.vehicles-track.active { cursor: grabbing; }

.vehicles-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: var(--black-900); border: none; border-radius: 50%; box-shadow: var(--shadow-sm); cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--white); transition: all 0.3s; }
.vehicles-nav-btn:hover { background: var(--primary-color); color: var(--white); box-shadow: var(--shadow-primary); }

.vehicles-item { min-width: 360px; background: var(--white);  border-radius: var(--radius-card); border: 1px solid var(--border-color); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s ease; flex-shrink: 0; user-select: none; }
.vehicles-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.vehicles-item:active { transform: scale(0.98); }

.vehicles-thumb { position: relative; height: 220px; overflow: hidden; background: var(--black-50); }
.vehicles-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; pointer-events: none; }
.vehicles-item:hover .vehicles-img { transform: scale(1.05); }
.vehicles-badge { position: absolute; top: 15px; left: 15px; padding: 6px 14px; border-radius: 30px; color: var(--white); font-size: 0.8rem; font-weight: 700; z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.vehicles-badge.rent { background: var(--primary-color); }
.vehicles-badge.lease { background: var(--black-800); }
.vehicles-body { padding: 25px; }
.vehicles-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 5px; color: var(--black-800); }
.vehicles-desc { font-size: 0.95rem; color: var(--black-500); margin-bottom: 10px; }
.vehicles-price-total { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--black-200);}
.vehicles-price-total span { text-decoration: line-through; color: var(--black-200); }
.vehicles-price-list { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; margin-top: 10px; border-top: 1px var(--black-100) solid; }
.vehicles-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; color: var(--black-500); }
.vehicles-row .condition { font-weight: 500; }
.vehicles-row .amount { font-weight: 700; color: var(--black-800); }
.vehicles-row.highlight { background: var(--highlight-color); margin: 5px -10px -5px -10px; padding: 12px; border-radius: 12px; border: 1px solid var(--light-color); }
.vehicles-row.highlight .amount.red { color: var(--primary-color); font-size: 1.3rem; font-weight: 800; }


/* =========================================
   8. [NEW] 비대칭 매거진 그리드 스타일 (Deal)
   ========================================= */
.deal { padding: var(--section-padding); overflow: hidden; background: var(--black-50); }
.deal .deal-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 20px; width: 100%; }

/* 공통 아이템 스타일 */
.deal .deal-item { background: var(--white); border-radius: var(--radius-card); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: all 0.3s ease; cursor: pointer; }
.deal .deal-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary-color); }

/* 메인 딜 (왼쪽 큰 영역) */
.deal .main-deal { grid-column: 1 / 2; grid-row: 1 / 3; display: flex; flex-direction: column; padding: 30px; background: var(--white); }
.deal .deal-badge { position: absolute; top: 0; left: 0; background: var(--primary-color); color: var(--white); padding: 8px 20px; border-bottom-right-radius: 20px; font-weight: 900; font-size: 0.9rem; box-shadow: 0 4px 10px rgba(230, 0, 18, 0.3); }

.deal .deal-header h3 { font-size: 2rem; font-weight: 900; margin-top: 20px; margin-bottom: 5px; color: var(--black-800); }
.deal .deal-header p { color: var(--black-500); font-size: 1rem; }

.deal .deal-img-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.deal .deal-img-wrap img { width: 100%; max-width: 380px; transition: transform 0.4s; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.15)); }
.deal .main-deal:hover .deal-img-wrap img { transform: scale(1.05) rotate(-2deg); }

.deal .deal-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0px; }
.deal .deal-price { display: flex; flex-direction: column; }
.deal .deal-price .label { font-size: 0.85rem; color: var(--black-200); }
.deal .deal-price .amount { font-size: 1.8rem; font-weight: 900; color: var(--primary-color); }

.deal .btn-deal { padding: 12px 24px; background: var(--black-800); color: var(--white); border-radius: 50px; font-weight: 700; font-size: 0.9rem; transition: 0.3s; }
.deal .btn-deal:hover { background: var(--primary-color); }

/* 서브 딜 (오른쪽 작은 영역들) */
.deal .sub-deal { display: flex; flex-direction: column; justify-content: flex-start; padding: 20px; position: relative; }
.deal .sub-deal img { position: absolute; bottom: -10px; right: -20px; width: 180px; transition: transform 0.3s; }
.deal .sub-deal:hover img { transform: translateX(-10px) scale(1.05); }

.deal .sub-info { z-index: 2; }
.deal .sub-info h4 { font-size: 1.2rem; font-weight: 800; margin-bottom: 5px; color: var(--black-800); }
.deal .sub-price { font-size: 1.3rem; font-weight: 800; color: var(--black-800); }

.deal .badge-sm { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; color: var(--white); margin-bottom: 10px; width: fit-content; }
.deal .badge-sm.rent { background: var(--primary-color); }
.deal .badge-sm.lease { background: var(--black-800); }


/* =========================================
   9. [NEW] 다크 프리미엄 슬라이더 (Limited)
   ========================================= */
.limited { padding: var(--section-padding); background-color: var(--black-800); color: var(--white); overflow: hidden; }
.limited .section-title, .limited .section-desc { color: var(--white); }

.limited-slider-wrapper { position: relative; width: 100%; }

/* 슬라이더 트랙 */
.limited-slider { display: flex; gap: 25px; overflow-x: auto; padding: 10px 10px 40px 10px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; cursor: grab; }
.limited-slider.active { cursor: grabbing; scroll-behavior: auto; }
.limited-slider::-webkit-scrollbar { display: none; }

/* 네비게이션 버튼 */
.limited-nav-btn { position: absolute; top: 45%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: var(--white); font-size: 1.2rem; cursor: pointer; z-index: 10; transition: all 0.3s; display: flex; align-items: center; justify-content: center; }
.limited-nav-btn:hover { background: var(--primary-color); border-color: var(--primary-color); box-shadow: 0 0 15px rgba(230, 0, 18, 0.5); }
.limited-nav-btn.prev { left: -25px; }
.limited-nav-btn.next { right: -25px; }

/* 카드 스타일 */
.limited-card { min-width: 281px; background: var(--black-800); border-radius: 20px; overflow: hidden; position: relative; border: 1px solid var(--black-500); transition: all 0.3s ease; display: flex; flex-direction: column; user-select: none; }
.limited-card:hover { transform: translateY(-10px); border-color: var(--primary-color); box-shadow: 0 15px 40px rgba(230, 0, 18, 0.15); }

/* 뱃지 & 이미지 */
.limited-badge { position: absolute; top: 15px; left: 15px; background: var(--white); color: var(--black-900); padding: 6px 12px; font-size: 0.8rem; font-weight: 800; border-radius: 4px; z-index: 2; }
.limited-badge.limit { background: var(--primary-color); color: var(--white); }

.limited-img-box { height: 200px; background: radial-gradient(circle, var(--black-500) 0%, var(--black-800) 70%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.limited-img-box img { width: 90%; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); pointer-events: none; }
.limited-card:hover .limited-img-box img { transform: scale(1.1) rotate(-2deg); }

/* 컨텐츠 & 텍스트 */
.limited-info { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.limited-name h4 { font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; color: var(--white); }
.limited-name span { display: block; font-size: 0.9rem; color: var(--black-200); margin-bottom: 20px; }

.limited-price { margin-bottom: 20px; border-top: 1px solid var(--black-500); padding-top: 15px; }
.limited-price .label { display: block; font-size: 0.8rem; color: var(--black-300); margin-bottom: 2px; }
.limited-price .price { font-size: 1.6rem; font-weight: 900; color: var(--primary-color); }
.limited-price .price small { font-size: 1rem; font-weight: 400; color: var(--white); }

.limited-tags { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.limited-tags span { font-size: 0.75rem; color: var(--black-100); border: 1px solid var(--black-400); padding: 4px 8px; border-radius: 4px; }

.limited-btn { margin-top: auto; display: block; width: 100%; text-align: center; padding: 14px 0; background: var(--black-500); color: var(--white); border-radius: 12px; font-weight: 700; transition: 0.3s; }
.limited-card:hover .limited-btn { background: var(--primary-color); color: var(--white); }


/* =========================================
   10. [NEW] 화이트 알림 센터 스타일 (Live Status)
   ========================================= */
.live-noti-section { padding: var(--section-padding); background-color: var(--white); border-bottom: 1px solid var(--black-100); }
.noti-wrapper { display: flex; gap: 40px; align-items: flex-start; }

/* 왼쪽: 통계 영역 */
.noti-stat { flex: 1; display: flex; gap: 20px; }
.stat-box { flex: 1; background: var(--black-50); padding: 30px; border-radius: var(--radius-card); text-align: center; border: 1px solid var(--black-100); transition: 0.3s; }
.stat-box:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--primary-color); }
.stat-icon { font-size: 2.5rem; color: var(--black-300); margin-bottom: 15px; }
.stat-box h4 { font-size: 1rem; color: var(--black-500); margin-bottom: 5px; }
.stat-box strong { font-size: 2rem; font-weight: 800; color: var(--black-800); }
.stat-box strong span.text { font-size: 1rem; font-weight: 500; color: var(--black-400); margin-left: 2px; }

/* 오른쪽: 알림 리스트 영역 */
.noti-list-container { flex: 1.2; height: 223px; background: #fff; border: 1px solid var(--black-100); border-radius: var(--radius-card); padding: 20px; overflow: hidden; position: relative; box-shadow: var(--shadow-sm); }
.noti-track { animation: scrollUpNoti 12s linear infinite; }
.noti-list-container:hover .noti-track { animation-play-state: paused; }
@keyframes scrollUpNoti { 0% { transform: translateY(0); } 100% { transform: translateY(-80%); } }

/* 알림 아이템 (카드) */
.noti-item { display: flex; align-items: center; gap: 15px; padding: 15px; background: #fff; border-bottom: 1px solid var(--black-50); transition: 0.2s; }
.noti-item:hover { background: var(--black-50); }

/* 아이콘 & 컨텐츠 */
.noti-icon { width: 45px; height: 45px; background: var(--light-color); color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.noti-icon.blue { background: #e3f2fd; color: #2196f3; }

.noti-content { flex: 1; }
.noti-head { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--black-300); margin-bottom: 4px; }
.noti-head .time { font-weight: 500; }

.noti-body { font-size: 1rem; color: var(--black-800); }
.noti-body strong { font-weight: 700; color: var(--black-900); }
.noti-body .highlight { color: var(--primary-color); font-weight: 700; }
.noti-body .highlight.blue { color: #2196f3; }

/* 그라데이션 커버 */
.noti-cover { position: absolute; left: 0; right: 0; height: 40px; z-index: 2; pointer-events: none; }
.noti-cover.top { top: 0; background: linear-gradient(to bottom, white, transparent); }
.noti-cover.bottom { bottom: 0; background: linear-gradient(to top, white, transparent); }


/* =========================================
   11. 비교견적 애니메이션 (Estimates)
   ========================================= */
.estimates { position: relative; padding: var(--section-padding); overflow: hidden; text-align: center; }
.estimates-headline { font-size: 2.5rem; font-weight: 900; color: var(--primary-color); margin-bottom: 15px; }
.estimates-sub-headline { font-size: 1.6rem; font-weight: 700; color: var(--black-800); margin-bottom: 50px; }

.estimate-wrapper { position: relative; height: 350px; width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 5vh; perspective: 1000px; }

.estimate-card { position: absolute; width: 300px; height: 304px; background: var(--white); border: 1px solid rgba(0,0,0,0.05); box-shadow: var(--shadow-lg); border-radius: 16px; padding: 0; display: flex; flex-direction: column; opacity: 0; transform-origin: center bottom; transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); top: 50px; left: 50%; margin-left: -130px; overflow: hidden; }
.estimate-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.estimates-bottom-text { font-size: 1.2rem; color: var(--black-500); line-height: 1.6; margin-bottom: 30px; word-break: keep-all; }
.estimates-bottom-text strong { color: var(--primary-color); font-weight: 700; }

/* 제휴사 리스트 스타일 */
.partners-wrap { margin-top: 40px; background: var(--black-50); padding: 20px 30px; border-radius: 12px; display: inline-block; max-width: 100%; border: 1px solid var(--black-100); }
.partners-badge { display: inline-block; font-size: 0.7rem; font-weight: 900; color: var(--primary-color); letter-spacing: 1px; margin-bottom: 8px; border-bottom: 2px solid var(--primary-color); padding-bottom: 2px; }

.partners-list { font-size: 0.9rem; color: var(--black-500); line-height: 1.8; word-break: keep-all; }
.partners-list strong { color: var(--black-800); font-weight: 700; margin-right: 4px; }

/* 모바일 줄바꿈 (.mo-br) */
.mo-br { display: none; }
@media (max-width: 768px) {
    .partners-wrap { padding: 15px; margin-top: 30px; width: 100%; }
    .partners-list { font-size: 0.8rem; line-height: 1.6; }
    .mo-br { display: block; content: ""; margin: 5px 0; }
}


/* =========================================
   12. 와이드 배너
   ========================================= */
.banner { padding: var(--section-padding); background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8)), url('img/banner-img.jpg') no-repeat center/cover; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white); }
.banner .banner-title { font-size: 3.5rem; font-weight: bold; margin-bottom: 24px; line-height: 1.3; }
.banner .banner-title span { color: var(--primary-color); }
.banner p { font-size: 1.35rem; margin-bottom: 40px; font-weight: 300; opacity: 0.9; }


/* =========================================
   13. [NEW] 원라인 프로세스 & 장점
   ========================================= */

/* --- (1) 원라인 프로세스 --- */
.process-flow { padding: var(--section-padding); background-color: var(--white); border-top: 1px solid var(--black-100); }
.flow-container { position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 60px; padding: 0 20px; }

/* 배경 라인 & 애니메이션 */
.flow-line { position: absolute; top: 50px; left: 50px; right: 50px; height: 4px; background: var(--black-100); z-index: 0; }
.flow-line-fill { height: 100%; width: 0; background: var(--primary-color); }
.process-flow.animate .flow-line-fill { animation: fillLine 2s ease-out forwards; }
@keyframes fillLine { to { width: 100%; } }

/* 라인 위 화살표 */
.line-arrow-icon { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background: var(--white); color: var(--black-200); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; z-index: 2; transition: color 0.3s; }
.line-arrow-icon.a1 { left: 21.5%; }
.line-arrow-icon.a2 { left: 50%; }
.line-arrow-icon.a3 { left: 79%; }

.process-flow.animate .line-arrow-icon.a1 { animation: arrowLightUp 0.1s forwards 0.5s; }
.process-flow.animate .line-arrow-icon.a2 { animation: arrowLightUp 0.1s forwards 1.0s; }
.process-flow.animate .line-arrow-icon.a3 { animation: arrowLightUp 0.1s forwards 1.5s; }
@keyframes arrowLightUp { to { color: var(--primary-color); transform: translate(-50%, -50%) scale(1.2); font-weight: 900; } }

/* 개별 스텝 카드 */
.flow-step { position: relative; z-index: 1; text-align: center; width: 220px; cursor: default; opacity: 0; transform: translateY(20px); }
.process-flow.animate .flow-step { animation: fadeUp 0.6s ease forwards; }
.process-flow.animate .flow-step:nth-child(2) { animation-delay: 0.2s; }
.process-flow.animate .flow-step:nth-child(3) { animation-delay: 0.4s; }
.process-flow.animate .flow-step:nth-child(4) { animation-delay: 0.6s; }
.process-flow.animate .flow-step:nth-child(5) { animation-delay: 0.8s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* 스텝 아이콘 원형 박스 */
.step-circle { width: 100px; height: 100px; background: var(--white); border: 4px solid var(--black-100); border-radius: 50%; margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--black-300); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; }

/* 번호 뱃지 */
.step-num-badge { position: absolute; top: -5px; right: -5px; width: 30px; height: 30px; background: var(--black-800); color: #fff; border-radius: 50%; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; }

/* 텍스트 컨텐츠 */
.step-content h4 { font-size: 1.2rem; font-weight: 800; margin-bottom: 15px; color: var(--black-900); transition: 0.3s; }
.step-content p { font-size: 0.95rem; color: var(--black-500); line-height: 1.6; word-break: keep-all; opacity: 0.8; }

/* 호버 인터랙션 */
.flow-step:hover .step-circle { border-color: var(--primary-color); background: var(--primary-color); color: #fff; transform: scale(1.1); box-shadow: 0 10px 20px rgba(230, 0, 18, 0.3); }
.flow-step:hover .step-num-badge { background: var(--black-900); color: var(--primary-color); }
.flow-step:hover .step-content h4 { color: var(--primary-color); }

/* 마지막 단계 하이라이트 */
.flow-step.highlight .step-circle { border-color: var(--black-800); }
.flow-step.highlight:hover .step-circle { border-color: var(--primary-color); }


/* --- (2) 장점 섹션 --- */
.advantages { padding: var(--section-padding); background: var(--black-50); }
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.adv-item { background: var(--white); padding: 48px 32px; text-align: center; border-radius: var(--radius-card); box-shadow: var(--shadow-sm); border: none; transition: all 0.3s; }
.adv-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.adv-icon { font-size: 3.5rem; color: var(--primary-color); margin-bottom: 24px; display: inline-block; }
.adv-item .adv-title { margin-bottom: 16px; font-size: 1.4rem; font-weight: 800; color: var(--black-800); }
.adv-item p { color: var(--black-500); font-size: 1rem; line-height: 1.6; white-space: pre-line; }


/* =========================================
   14. 문의 폼 (Contact)
   ========================================= */
.contact { padding: var(--section-padding); background: var(--black-800); color: var(--white); position: relative; }
.contact .section-title { color: var(--white); }
.contact .section-title::after { background: var(--primary-color); }
.contact .section-desc { color: rgba(255,255,255,0.7); }

.contact-form-wrap { max-width: 1000px; margin: 0 auto; background: var(--white); padding: 50px; border-radius: var(--radius-card); box-shadow: 0 30px 80px rgba(0,0,0,0.3); color: var(--black-800); }
.form-label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 0.95rem; color: var(--black-800); }
.form-row { display: flex; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.form-group { flex: 1; min-width: 220px; }
.form-control { width: 100%; padding: 14px 16px; border: 1px solid var(--border-color); background: var(--black-50); border-radius: 12px; font-size: 1rem; transition: border-color 0.3s; }
.form-control:focus { outline: none; border-color: var(--primary-color); background: var(--white); box-shadow: 0 0 0 3px rgba(82, 0, 255, 0.1); }
.radio-group { display: flex; gap: 10px; background: var(--black-50); padding: 6px; border-radius: 12px; }
.radio-label { flex: 1; text-align: center; cursor: pointer; position: relative; z-index: 1; }
.radio-label input { display: none; }
.radio-text { display: block; padding: 10px; border-radius: 8px; font-weight: 500; color: var(--black-500); transition: all 0.3s; }
.radio-label input:checked + .radio-text { background: var(--primary-color); color: var(--white); font-weight: 700; box-shadow: var(--shadow-primary); }
textarea.form-control { height: 120px; resize: none; }
.check-group label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.9rem; cursor: pointer; }
.check-group input[type="checkbox"] { accent-color: var(--primary-color); width: 18px; height: 18px; }
.submit-btn { width: 100%; padding: 18px; font-size: 1.3rem; margin-top: 20px; background: var(--primary-color); }
.submit-btn:hover { background: var(--black-500); }

.agree-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 5px; }
.agree-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }
.chk-text { font-size: 0.95rem; color: var(--black-800); }
.agree-btn { background: none; border: 1px solid var(--black-100); padding: 4px 10px; font-size: 12px; color: var(--black-500); border-radius: 4px; cursor: pointer; }
.agree-btn:hover { background: #f2f4f6; }


/* =========================================
   15. 모달 레이아웃 (Modal)
   ========================================= */
/* 텍스트 모달 */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 9999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-overlay.show { display: flex; animation: fadeIn 0.3s; }
.modal-content { background: var(--white); width: 90%; max-width: 500px; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); transform: translateY(20px); transition: transform 0.3s; }
.modal-overlay.show .modal-content { transform: translateY(0); }

.modal-header { padding: 20px; border-bottom: 1px solid var(--black-100); display: flex; justify-content: space-between; align-items: center; background: var(--white); }
.modal-header .modal-title { font-size: 1.1rem; font-weight: 800; color: var(--black-800); margin: 0; }
.close-btn { font-size: 1.5rem; cursor: pointer; color: var(--black-100); line-height: 1; }
.close-btn:hover { color: var(--black-800); }

.modal-body { padding: 25px 20px; font-size: 0.9rem; color: var(--black-500); line-height: 1.6; max-height: 60vh; overflow-y: auto; white-space: pre-line; }
.modal-footer { padding: 15px; border-top: 1px solid var(--black-100); text-align: center; }
.btn-confirm { background: var(--primary-color); color: var(--white); border: none; padding: 12px 30px; border-radius: 12px; cursor: pointer; font-weight: 700; width: 100%; }
.btn-confirm:hover { background: var(--black-500); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =========================================
   [이미지 모달] Image Modal
   ========================================= */
.img-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: 10000; display: none; justify-content: center; align-items: center; flex-direction: column; opacity: 0; transition: opacity 0.3s ease; }
.img-modal-overlay.show { display: flex; opacity: 1; }

.img-modal-container { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1000px; height: 80vh; }

.img-modal-content { max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); animation: zoomIn 0.3s ease; cursor: grab; touch-action: none; user-select: none; transition: transform 0.1s; }
.img-modal-content.grabbing { cursor: grabbing; transform: scale(1.02); }

/* 닫기 버튼 */
.img-close-btn { position: absolute; top: 30px; right: 40px; color: var(--white); font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10001; transition: 0.3s; line-height: 1; }
.img-close-btn:hover { color: var(--primary-color); transform: rotate(90deg); }

/* 네비게이션 버튼 (좌우) */
.img-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; color: var(--white); font-size: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; padding: 0; }
.img-nav-btn:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-50%) scale(1.1); }
.img-nav-btn.prev { left: 20px; }
.img-nav-btn.next { right: 20px; }

/* 카운터 & 애니메이션 */
.img-counter { color: var(--white); margin-top: 15px; font-size: 1.1rem; font-weight: 500; }
@keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }


/* =========================================
   16. 반응형 (Media Queries)
   ========================================= */
@media (max-width: 1339px) {
    .vehicles-nav-btn.prev { left: 10px; margin-left: 0; }
    .vehicles-nav-btn.next { left: auto; right: 10px; margin-left: 0; }
}
@media (min-width: 1340px) {
    .vehicles-nav-btn.prev { left: 50%; margin-left: -645px; right: auto; }
    .vehicles-nav-btn.next { left: 50%; margin-left: 595px; right: auto; }
}

@media (max-width: 1024px) {
    .banner .banner-title { font-size: 2.8rem; }
    .adv-grid { grid-template-columns: repeat(2, 1fr); }
    .review-section { flex-direction: column; text-align: center; }
    .review-wrapper { width: 100%; }
    .review-section .phone-mockup { order: -1; margin-bottom: 40px; }
}

@media (max-width: 768px) {
    /* 1. 헤더 & 기본 레이아웃 */
    .header-inner { flex-direction: column; height: auto; padding: 15px 0; gap: 10px; }
    .logo img { height: 55px; }
    .nav-info { text-align: center; }
    .floating-btns { bottom: 20px; right: 20px; }
    .float-btn { width: 45px; height: 45px; font-size: 1rem; }

    /* 2. 타이틀 및 폰트 크기 조정 */
    .banner .banner-title { font-size: 1.8rem; }
    .banner p { font-size: 1.1rem; }
    .hero-title { font-size: 2.8rem; }
    .section-title { font-size: 2rem; }
    .section-desc { font-size: 1rem; }
    .review-title { font-size: 1.8rem; }

    /* 3. 히어로 & 공통 섹션 */
    .hero-section { height: 130vh; }
    .scene-1 img { max-width: 380px; }
    .adv-grid { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 30px 20px; }
    .form-row { flex-direction: column; gap: 16px; }
    .vehicles::before, .vehicles::after { width: 50px; }

    /* 4. 리뷰 애니메이션 (모바일 위치) */
    .image-container { top: 200px; }
    .review-section .phone-mockup { top: 10px; z-index: 1; }
    .review-section .bubble { width: 260px; padding: 15px; font-size: 12px; z-index: 10; }
    .review-section .client-name { font-size: 12px; }
    .review-section .bubble.b1 { top: -20px; left: 5%; }
    .review-section .bubble.b2 { top: 150px; left: -2%; }
    .review-section .bubble.b3 { bottom: 160px; left: 5%; }
    .review-section .bubble.b4 { top: 65px; right: 5%; }
    .review-section .bubble.b5 { top: 230px; right: -2%; }
    .review-section .bubble.b6 { bottom: 80px; right: 5%; }

    /* 5. 비교견적 (카드 애니메이션) */
    .estimates-headline { font-size: 1.8rem; }
    .estimates-sub-headline { font-size: 1.3rem; margin-bottom: 30px; }
    .estimate-card { width: 140px; height: 140px; margin-left: -70px; }
    .estimate-wrapper { height: 210px; }
	
    .partners-wrap { padding: 15px; margin-top: 30px; width: 100%; }
    .partners-list { font-size: 0.8rem; line-height: 1.6; }

    /* 6. 컨트롤 버튼 & 모달 */
    .vehicles-nav-btn { display: none; }
    .img-close-btn { top: 20px; right: 20px; font-size: 30px; }
    .img-nav-btn { display: none; padding: 10px; font-size: 20px; }
    .img-nav-btn.prev { left: 10px; }
    .img-nav-btn.next { right: 10px; }

    /* 7. 핫딜 (Deal Section) */
    .deal .deal-grid { display: flex; flex-direction: column; gap: 15px; }
    
    .deal .main-deal { height: auto; padding: 30px 20px; }
    .deal .deal-img-wrap { margin: 20px 0; }
    .deal .deal-footer { margin-top: 10px; }

    .deal .sub-deal { 
        display: flex; flex-direction: row; align-items: center; 
        justify-content: space-between; height: 120px; padding: 20px; overflow: hidden; 
    }

    .deal .sub-info { position: relative; z-index: 2; max-width: 60%; margin-top: 30px; }
    .deal .sub-info h4 { font-size: 1.1rem; margin-bottom: 0; }
    .deal .sub-price { font-size: 1.1rem; }

    .deal .badge-sm { position: absolute; top: 15px; left: 20px; margin: 0; }
    .deal .sub-deal img { position: absolute; bottom: -10px; right: -20px; width: 150px; top: auto; }

    /* 8. 한정수량 슬라이더 (Limited) */
    .limited { padding: 60px 0; }
    .limited-slider { gap: 15px; padding: 0 5px 40px 5px; }
    .limited-nav-btn { display: none; }
    .limited-card { min-width: 280px; }

    /* 9. 실시간 현황 (Notification) */
    .noti-wrapper { flex-direction: column; gap: 20px; }
    .noti-stat { width: 100%; gap: 10px; }
    .stat-box { padding: 20px; }
    .stat-box strong { font-size: 1.5rem; }
    .noti-list-container { width: 100%; height: 300px; flex: unset; }

    /* 10. 프로세스 (세로형 타임라인) */
    .flow-container { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 30px; padding-left: 20px; }
    
    .flow-line { top: 20px; bottom: 20px; left: 49px; right: auto; width: 2px; height: auto; }
    .flow-line-fill { width: 100%; height: 0; }
    
    .process-flow.animate .flow-line-fill { animation: fillLineVertical 2s ease-out forwards; }
    @keyframes fillLineVertical { to { height: 100%; } }

    .flow-step { width: 100%; display: flex; text-align: left; margin-bottom: 40px; align-items: flex-start; }
    .step-circle { margin: 0 20px 0 0; flex-shrink: 0; width: 60px; height: 60px; font-size: 1.2rem; }
    .step-num-badge { width: 24px; height: 24px; font-size: 0.7rem; }
    .step-content { padding-top: 5px; }
    .step-content h4 { font-size: 1.1rem; margin-bottom: 8px; }
    .step-content p { font-size: 0.9rem; }

    .line-arrow-icon { left: 50% !important; transform: translate(-50%, -50%) rotate(90deg); }
    .line-arrow-icon.a1 { top: 15%; }
    .line-arrow-icon.a2 { top: 42%; }
    .line-arrow-icon.a3 { top: 68%; }

    @keyframes arrowLightUp {
        to { color: var(--primary-color); transform: translate(-50%, -50%) rotate(90deg) scale(1.2); font-weight: 900; }
    }
}

.mo-br { display: none; }
.pc_br {display: block;}
@media (max-width: 768px) {
	.pc_br {display: none;}
	.mo-br {display: block; margin: 5px 0;}
}

/* =========================================
   11. 프로세스 & 장점 6개
   ========================================= */
/*.process { padding: var(--section-padding); background: var(--white); border-top: 1px solid var(--black-100); }
.process-steps { display: flex; justify-content: space-between; margin-top: 60px; position: relative; }
.process-steps::before { content: ''; position: absolute; top: 50px; left: 50px; right: 50px; height: 2px; background: var(--black-50); z-index: 0; }
.step-item { flex: 1; text-align: center; position: relative; z-index: 1; padding: 0 15px; }

.step-icon-box { width: 100px; height: 100px; background: var(--white); border: 2px solid var(--black-50); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 2.5rem; color: var(--black-800); box-shadow: var(--shadow-sm); transition: all 0.3s ease; }
.step-item:hover .step-icon-box { border-color: var(--primary-color); color: var(--white); background: var(--primary-color); transform: translateY(-5px); box-shadow: var(--shadow-primary); }
.step-title { font-weight: 800; margin-bottom: 12px; font-size: 1.1rem; color: var(--black-800); }
.step-desc { font-size: 0.95rem; color: var(--black-500); word-break: keep-all; }

.advantages { padding: var(--section-padding); background: var(--black-50); }
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.adv-item { background: var(--white); padding: 48px 32px; text-align: center; border-radius: var(--radius-card); box-shadow: var(--shadow-sm); border: none; transition: all 0.3s; }
.adv-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.adv-icon { font-size: 3.5rem; color: var(--primary-color); margin-bottom: 24px; display: inline-block; }
.adv-item .adv-title { margin-bottom: 16px; font-size: 1.4rem; font-weight: 800; color: var(--black-800); }
.adv-item p { color: var(--black-500); font-size: 1rem; line-height: 1.6; white-space: pre-line; }

@media (max-width: 1024px) {
	.process-steps::before { display: none; }
}
@media (max-width: 768px) {
	.process-steps { flex-direction: column; gap: 40px; }
}*/


/* =========================================
   [NEW] 고객 후기 섹션 스타일
   ========================================= */
.reviews { padding: var(--section-padding); background: var(--black-50); }

/* 그리드 레이아웃 (PC: 4열, 모바일: 1열) */
.review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .review-grid { grid-template-columns: 1fr; } }

/* 카드 스타일 */
.review-card { background: var(--white); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); transition: 0.3s; position: relative; border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--primary-color); }

/* BEST 뱃지 */
.review-badge { position: absolute; top: 0; left: 0; background: var(--primary-color); color: var(--white); font-size: 0.8rem; font-weight: 800; padding: 6px 14px; z-index: 2; }

/* 이미지 영역 */
.review-img-box { width: 100%; height: 180px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.review-img-box img { width: 90%; transition: transform 0.4s; }
.review-card:hover .review-img-box img { transform: scale(1.05); }

/* 내용 영역 */
.review-body { padding: 25px 20px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.review-quote { color: var(--black-200); font-size: 1.2rem; margin-bottom: 15px; }
.review-text { font-size: 0.95rem; color: var(--black-600); line-height: 1.6; margin-bottom: 20px; word-break: keep-all; flex: 1; }
.review-text strong { color: var(--black-800); font-weight: 700; background: linear-gradient(to top, var(--light-color) 50%, transparent 50%); }

/* 메타 정보 (이름 | 차종) */
.review-meta { font-size: 0.85rem; color: var(--black-400); font-weight: 500; margin-bottom: 10px; border-top: 1px solid var(--black-50); padding-top: 15px; }
.review-meta .divider { color: var(--black-200); margin: 0 6px; font-size: 0.7rem; }

/* 별점 */
.review-stars { color: var(--primary-color); font-size: 0.9rem; letter-spacing: 2px; }

/* =========================================
   Floating Quick Consult (DEV) - 사이트 톤 반영
   ========================================= */
body {
    padding-bottom: 250px;
}

.floating-consult {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
}

.floating-consult__inner {
    padding: 14px 15px calc(14px + env(safe-area-inset-bottom));
}

.floating-consult__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 12px;
    gap: 12px;
}

.floating-consult__eyebrow {
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 2px;
}

.floating-consult__title {
    margin: 0;
    color: var(--black-800);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 800;
    line-height: 1.2;
}

.floating-consult__toggle {
    border: 1px solid var(--black-100);
    background: #fff;
    color: var(--black-500);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.82rem;
    cursor: pointer;
}

.floating-consult__fields {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.floating-consult__label {
    display: block;
    margin-bottom: 5px;
    color: var(--black-500);
    font-size: 0.82rem;
    font-weight: 600;
}

.floating-consult__input {
    width: 100%;
    height: 46px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    background: #fff;
    padding: 0 12px;
    font-size: 0.95rem;
}

.floating-consult__input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.12);
}

.floating-consult__footer {
    display: flex;
    gap: 14px;
    align-items: center;
}

.floating-consult__agreements {
    flex: 1;
    display: grid;
    gap: 5px;
}

.floating-consult__agree-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.floating-consult__agree-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    color: var(--black-500);
}

.floating-consult__agree-label strong {
    color: var(--black-800);
}

.floating-consult__view {
    border: 0;
    background: transparent;
    color: var(--black-300);
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.floating-consult__submit {
    border: 0;
    min-width: 250px;
    height: 52px;
    border-radius: 999px;
    padding: 0 26px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-primary);
}

.floating-consult__submit i {
    margin-left: 6px;
}

.floating-consult--collapsed .floating-consult__form {
    display: none;
}

.floating-consult--collapsed .floating-consult__inner {
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.floating-consult + .floating-btns {
    bottom: 260px;
}

@media (max-width: 1023px) {
    body { padding-bottom: 320px; }

    .floating-consult__fields {
        grid-template-columns: 1fr 1fr;
    }

    .floating-consult__field--wide {
        grid-column: 1 / -1;
    }

    .floating-consult__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .floating-consult__submit {
        width: 100%;
    }

    .floating-consult + .floating-btns {
        bottom: 330px;
    }
}

@media (max-width: 767px) {
    body { padding-bottom: 88px; }

    .floating-consult {
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }

    .floating-consult__inner {
        padding-top: 10px;
    }

    .floating-consult__head {
        margin-bottom: 4px;
        align-items: center;
    }

    .floating-consult__title {
        font-size: 1.05rem;
    }

    .floating-consult__toggle {
        min-height: 36px;
        padding: 4px 10px;
        font-size: 0.75rem;
    }

    .floating-consult__fields,
    .floating-consult__agreements {
        display: grid;
        grid-template-columns: 1fr;
    }

    .floating-consult__fields {
        margin-top: 8px;
    }

    .floating-consult__input {
        height: 44px;
        font-size: 16px;
    }

    .floating-consult__agree-row {
        align-items: flex-start;
    }

    .floating-consult__agree-label {
        font-size: 0.78rem;
    }

    .floating-consult__submit {
        height: 46px;
        font-size: 0.9rem;
        padding: 0 18px;
    }

    .floating-consult + .floating-btns {
        bottom: 96px;
    }
}