/* =========================================
    [0. COMMON] 관리왕 브랜드 컬러 & 공통 설정
   ========================================= */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&display=swap');

:root {
    --b-bg: #f8fafc;
    --b-surface: #ffffff;
    --b-dark: #1e293b;
    --b-text: #0f172a;
    --b-subtext: #64748b;
    --b-accent: #2563eb;
    --b-radius: 24px;
    --border: #e2e8f0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Pretendard Variable', sans-serif; color: var(--b-text); line-height: 1.5; background-color: var(--b-bg); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; transition: 0.2s; }
.container { max-width: 1200px; width: 100%; padding: 0 24px; margin: 0 auto; }

/* 💡 헤더 & 푸터 */
.bento-header { background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border); }
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 80px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.main-logo { height: 45px; width: auto; min-width: 120px; display: block; object-fit: contain; }
.gnb { display: flex; gap: 40px; }
.gnb a { font-size: 16px; font-weight: 600; color: var(--b-dark); }
.btn-contact { background-color: var(--b-dark); color: white; padding: 10px 24px; border-radius: 12px; font-weight: 700; }
.btn-contact:hover { background-color: var(--b-accent); color: var(--b-dark); }

.bento-footer { padding: 60px 0; text-align: center; color: var(--b-subtext); font-size: 14px; border-top: 1px solid var(--border); background-color: #f1f5f9; }

/* =========================================
    [1. INDEX] 메인 벤토 그리드
   ========================================= */
.bento-section { padding: 80px 0; }
.bento-grid-main { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 20px; }
.bento-box-main { background-color: var(--b-surface); border-radius: var(--b-radius); padding: 30px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease; }
.bento-box-main:hover { border-color: var(--b-accent); transform: translateY(-5px); }

.box-large { grid-column: span 2; grid-row: span 2; padding: 45px; }
.box-square { grid-column: span 1; }
.box-wide { grid-column: span 2; }
.dark-theme { background-color: var(--b-dark); color: white; border: none; }
.blue-theme { background-color: #0052cc; color: white; border: none; }
.tag { font-size: 12px; font-weight: 800; color: var(--b-accent); text-transform: uppercase; margin-bottom: 10px; display: block; }
.bento-box-main h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.bento-box-main p { font-size: 15px; color: var(--b-subtext); }
.dark-theme p { color: rgba(255,255,255,0.7); }
.box-icon { font-size: 40px; margin-bottom: 20px; }

.bento-header-text { text-align: center; margin-bottom: 60px; }
.bento-header-text h1 { font-size: 56px; font-weight: 800; color: var(--b-dark); margin-bottom: 15px; }
.bento-header-text p { font-size: 20px; color: var(--b-subtext); }

.bento-bg-icon { position: absolute; bottom: -30px; right: -20px; font-size: 180px; opacity: 0.05; pointer-events: none; }
.dark-theme .bento-bg-icon, .bento-bg-icon { position: absolute; bottom: -40px; right: -20px; font-size: 230px !important; opacity: 0.15 !important; pointer-events: none; }
.box-icon-right { position: absolute; right: 30px; bottom: 30px; font-size: 80px; opacity: 0.15; pointer-events: none; }
.box-icon-large { font-size: 120px; opacity: 0.1; margin-left: auto; pointer-events: none; color: var(--b-accent); transition: transform 0.4s ease, opacity 0.3s; }

.box-large h2 { font-size: 50px !important; line-height: 1.3; margin-bottom: 20px; letter-spacing: -1.5px; }
.box-large p { font-size: 18px !important; opacity: 0.9; }

.call-box { background-color: #eff6ff; flex-direction: row; align-items: center; justify-content: space-between; padding: 50px; border: 1px solid #bfdbfe; cursor: pointer; }
.call-box h3 { color: #1e3a8a; }
.call-box p { color: #3b82f6; opacity: 0.8; }
.call-box .phone-number { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 60px; font-weight: 800; color: var(--b-accent); }
.call-box:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(37, 99, 235, 0.1); }
.call-box:hover .box-icon-large { transform: scale(1.1) rotate(-5deg); opacity: 0.2; }

/* =========================================
    [2. SUB 공통] 서브 상단/하단 & 갤러리
   ========================================= */
.sub-hero-minimal { padding: 100px 0 60px; background-color: var(--b-surface); color: var(--b-dark); border-bottom: 1px solid var(--border); }
.sub-hero-minimal .category-tag { color: var(--b-accent); font-weight: 800; margin-bottom: 15px; display: block; }
.sub-title { font-size: 48px; font-weight: 800; letter-spacing: -2px; }

.immersive-gallery { padding: 100px 0; background-color: var(--b-surface); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 24px; padding-top: 40px; }
.gallery-item { position: relative; border-radius: 24px; overflow: hidden; background-color: #f1f5f9; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.gallery-item.hero { grid-column: span 2; grid-row: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 1; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-overlay { position: relative; z-index: 2; height: 100%; width: 100%; padding: 40px; background: linear-gradient(to top, rgba(15, 23, 42, 0.8) 0%, transparent 70%); color: white; display: flex; flex-direction: column; justify-content: flex-end; }
.gallery-overlay h4 { font-size: 26px; font-weight: 800; margin-bottom: 12px; }
.gallery-overlay p { font-size: 16px; opacity: 0.9; line-height: 1.6; }

.service-summary-box { background-color: white; border: 1px solid var(--border); border-radius: 24px; padding: 50px; margin-top: 60px; }
.summary-list li { display: flex; padding: 25px 0; border-bottom: 1px solid var(--border); }
.summary-list li:last-child { border-bottom: none; padding-bottom: 0; }
.s-title { width: 180px; font-weight: 800; color: var(--b-dark); font-size: 19px; flex-shrink: 0; }

.call-action { text-align: center; padding: 100px 0; background-color: white; border-top: 1px solid var(--border); }
.call-action h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 72px; font-weight: 800; color: var(--b-dark); margin: 20px 0; }

/* =========================================
    [3. SUB 본문] 서브페이지 특징(벤토) 그리드
   ========================================= */
.detail-points { padding: 120px 0; background-color: #f8fafc; border-top: 1px solid rgba(0, 0, 0, 0.04); border-bottom: 1px solid rgba(0, 0, 0, 0.04); }
.point-grid-minimal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.point-grid-minimal.grid-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }

.p-card { padding: 0; border: none; background: transparent; display: flex; flex-direction: column; }
.p-card.bento-style { background-color: var(--b-surface); border-radius: var(--b-radius); padding: 40px 30px; border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.p-card.bento-style:hover { transform: translateY(-8px); border-color: var(--b-accent); box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08); }

.card-icon-wrapper { width: 48px; height: 48px; background-color: #eff6ff; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.p-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.card-icon-wrapper .p-num { font-size: 18px; color: var(--b-accent); margin: 0; }

.p-card h3 { font-size: 22px; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.5px; color: #0f172a; }
.p-card p { font-size: 15px; color: #64748b; line-height: 1.6; word-break: keep-all; }

.point-grid-minimal.grid-4 .p-card.bento-style { padding: 35px 24px; }
.point-grid-minimal.grid-4 .p-card.bento-style h3 { font-size: 20px; }

/* =========================================
    [4. VIBE ABOUT] 브랜드 스토리 (sub_00_about)
   ========================================= */
.vibe-header { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
.gnb-dark a { color: rgba(255,255,255,0.7) !important; }
.gnb-dark a:hover { color: white !important; }
.vibe-btn { background: white; color: black; }
.vibe-btn:hover { background: var(--b-accent); color: white; }

.vibe-hero { padding: 180px 0 120px; background-color: #0f172a; color: white; }
.vibe-eyebrow { font-size: 14px; font-weight: 800; letter-spacing: 3px; color: #3b82f6; margin-bottom: 30px; display: inline-block; border: 1px solid rgba(59, 130, 246, 0.4); padding: 6px 16px; border-radius: 30px; }
.vibe-mega-title { font-size: 80px; font-weight: 800; line-height: 1.1; letter-spacing: -3px; margin-bottom: 40px; }
.text-gradient { background: linear-gradient(to right, #60a5fa, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.vibe-hero-desc { font-size: 24px; line-height: 1.6; color: #94a3b8; max-width: 600px; letter-spacing: -0.5px; }

.vibe-bento-section { padding: 60px 0 150px; background-color: #0f172a; }
.vibe-bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(300px, auto); gap: 20px; }
.vibe-card { border-radius: 32px; padding: 50px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vibe-card:hover { transform: translateY(-10px); }
.vibe-bg-num { position: absolute; top: -20px; right: -20px; font-size: 240px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: rgba(255,255,255,0.03); line-height: 1; pointer-events: none; }
.vibe-content { position: relative; z-index: 2; }
.vibe-content h3 { font-size: 32px; font-weight: 800; margin-bottom: 16px; letter-spacing: -1px; line-height: 1.3; }
.vibe-content p { font-size: 18px; line-height: 1.6; opacity: 0.8; word-break: keep-all; }

.vibe-huge { grid-column: span 2; grid-row: span 2; background: #1e293b; color: white; border: 1px solid rgba(255,255,255,0.05); }
.vibe-huge h3 { font-size: 48px; }
.vibe-huge p { font-size: 20px; max-width: 80%; }
.vibe-accent { grid-column: span 1; grid-row: span 2; background: var(--b-accent); color: white; }
.vibe-light { background: #f8fafc; color: var(--b-dark); }
.vibe-small-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight: 800; color: var(--b-accent); margin-bottom: 20px; display: block; }
.vibe-purple-border { border: 1px solid rgba(168, 85, 247, 0.2); }
.vibe-purple-border:hover { border-color: #a855f7; box-shadow: 0 12px 24px rgba(168, 85, 247, 0.1); }

.vibe-story-narrative { padding: 150px 0; background-color: #0f172a; color: white; }
.narrative-wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: flex-start; }
.reveal-text { font-size: 56px; font-weight: 800; line-height: 1.2; letter-spacing: -2px; background: linear-gradient(to bottom, #fff 30%, rgba(255,255,255,0.2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.narrative-desc { font-size: 20px; line-height: 1.8; color: #94a3b8; }
.narrative-desc p { margin-bottom: 30px; }
.narrative-desc strong { color: #60a5fa; font-weight: 800; }

.vibe-cta-section { background: white; padding: 120px 0; border-radius: 60px 60px 0 0; }
.vibe-cta-box { max-width: 1000px; margin: 0 auto; text-align: center; }
.vibe-cta-box h2 { font-size: 56px; font-weight: 800; letter-spacing: -2px; margin-bottom: 50px; color: var(--b-dark); line-height: 1.2; }
.vibe-cta-bottom { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.vibe-phone { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 80px; font-weight: 800; color: #cbd5e1; letter-spacing: -2px; }
.vibe-btn-massive { background: var(--b-dark); color: white; padding: 24px 60px; border-radius: 100px; font-size: 24px; font-weight: 800; transition: all 0.3s; }
.vibe-btn-massive:hover { background: var(--b-accent); transform: scale(1.05); }

/* =========================================
    [5. MIXED SERVICE] 서비스 소개 (sub_00_service)
   ========================================= */
.vibe-service-body { background-color: #ffffff; }
.service-vibe-hero { padding: 160px 0 80px; background-color: #ffffff; text-align: center; }
.service-eyebrow { font-size: 14px; font-weight: 800; letter-spacing: 2px; color: var(--b-accent); margin-bottom: 24px; display: inline-block; }
.service-mega-title { font-size: 64px; font-weight: 800; line-height: 1.2; letter-spacing: -2.5px; color: var(--b-dark); margin-bottom: 30px; }
.text-highlight { color: var(--b-accent); position: relative; display: inline-block; }
.service-hero-desc { font-size: 20px; color: var(--b-subtext); max-width: 700px; margin: 0 auto; line-height: 1.6; }

.service-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.hub-card { background-color: #f8fafc; border-radius: var(--b-radius); padding: 50px; border: 1px solid var(--border); display: flex; flex-direction: column; transition: all 0.3s ease; }
.hub-card:hover { transform: translateY(-8px); background-color: #ffffff; border-color: var(--b-accent); box-shadow: 0 20px 40px rgba(37, 99, 235, 0.08); }
.hub-icon-wrap { width: 80px; height: 80px; background-color: #eff6ff; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: 30px; }
.hub-tag { font-size: 13px; font-weight: 800; color: var(--b-accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; display: block; }
.hub-content h3 { font-size: 28px; font-weight: 800; color: var(--b-dark); margin-bottom: 16px; letter-spacing: -1px; }
.hub-content p { font-size: 16px; color: var(--b-subtext); line-height: 1.6; margin-bottom: 30px; word-break: keep-all; flex-grow: 1; }
.btn-more { font-weight: 700; color: var(--b-dark); display: inline-flex; align-items: center; transition: color 0.2s; }
.hub-card:hover .btn-more { color: var(--b-accent); }

/* =========================================
    [6. PREMIUM RENTAL] 09. 사고 렌트카 전용
   ======================================== */
.rent-body { background-color: #09090b; color: white; }
.rent-hero { padding: 180px 0 120px; text-align: center; position: relative; overflow: hidden; }
.rent-hero::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); opacity: 0.5; }
.rent-eyebrow { font-size: 14px; font-weight: 800; color: #60a5fa; letter-spacing: 4px; display: block; margin-bottom: 20px; }
.rent-title { font-size: 72px; font-weight: 800; letter-spacing: -2px; margin-bottom: 30px; line-height: 1.1; }
.rent-desc { font-size: 22px; color: #a1a1aa; font-weight: 300; }
.rent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 100px 0; }
.rent-card { background: #18181b; border: 1px solid #27272a; padding: 50px; border-radius: 24px; transition: 0.3s; }
.rent-card:hover { border-color: #3b82f6; transform: translateY(-10px); box-shadow: 0 20px 40px rgba(59, 130, 246, 0.1); }
.rent-card h3 { font-size: 28px; font-weight: 800; margin-bottom: 15px; color: white; }
.rent-card p { font-size: 16px; color: #a1a1aa; line-height: 1.6; }
.rent-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 60px; font-weight: 800; color: #27272a; margin-bottom: 20px; display: block; line-height: 1; }

/* =========================================
    [7. PHOTO-CENTRIC LIVE] 10. 현장 각인 전용
   ========================================= */
.live-immersive-body { background-color: #050505; color: white; }
.live-badge { display: inline-block; padding: 8px 20px; background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); border-radius: 30px; font-weight: 800; margin-bottom: 30px; letter-spacing: 1px; }
.live-title { font-size: 64px; font-weight: 800; line-height: 1.2; margin-bottom: 30px; color: white; letter-spacing: -1.5px; }
.live-title span { color: #f59e0b; }
.live-desc { font-size: 20px; color: #c0c0c0; line-height: 1.6; }

.live-photo-hero { height: 90vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4); }
.hero-content-overlay { position: relative; z-index: 10; text-align: center; max-width: 900px; }

.visual-story-section { padding: 150px 0; }
.story-row { display: flex; align-items: center; gap: 80px; margin-bottom: 120px; }
.story-row.reverse { flex-direction: row-reverse; }
.story-img-wrap { flex: 1.5; position: relative; border-radius: 40px; overflow: hidden; }
.story-img-wrap img { width: 100%; display: block; transition: 0.5s; }
.story-img-wrap:hover img { transform: scale(1.05); }
.story-text-wrap { flex: 1; }
.story-num { font-size: 14px; font-weight: 800; color: #f59e0b; margin-bottom: 20px; display: block; }
.story-text-wrap h2 { font-size: 48px; font-weight: 800; margin-bottom: 30px; line-height: 1.2; letter-spacing: -2px; }
.story-text-wrap p { font-size: 18px; color: #9ca3af; line-height: 1.8; }

.full-width-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 400px; gap: 10px; padding: 10px; }
.gallery-box { position: relative; overflow: hidden; }
.gallery-box img { width: 100%; height: 100%; object-fit: cover; }
.gallery-box .overlay-tag { position: absolute; top: 20px; left: 20px; background: rgba(0,0,0,0.5); padding: 5px 12px; border-radius: 20px; font-size: 12px; backdrop-filter: blur(5px); }

/* =========================================
    [공통 마무리] 박스 정렬·시머·FAQ·모바일 메뉴 일반 규칙
   ========================================= */
/* 큰 네이비 카드 텍스트 정렬 */
.bento-box-main.box-large { justify-content: flex-start; }

/* 시머(빛 반사) 슬라이드 효과 */
.shimmer-card { position: relative; overflow: hidden; }
.card-shimmer { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.03) 35%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.03) 65%, transparent 100%); z-index: 10; pointer-events: none; }
.shimmer-card:hover .card-shimmer { animation: shimmerSlide 0.8s ease forwards; }

@keyframes shimmerSlide { 0% { left: -100%; } 100% { left: 150%; } }

/* FAQ 아코디언 */
.faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faq-item { background-color: var(--b-surface); border: 1px solid var(--border); border-radius: var(--b-radius); overflow: hidden; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.02); }
.faq-item[open] { border-color: var(--b-accent); box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08); }
.faq-q { display: flex; align-items: center; padding: 24px 30px; cursor: pointer; font-size: 18px; font-weight: 700; color: var(--b-dark); list-style: none; position: relative; user-select: none; }
.faq-q::-webkit-details-marker { display: none; }
.q-mark { color: var(--b-accent); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight: 800; margin-right: 16px; }
.q-text { flex-grow: 1; padding-right: 20px; letter-spacing: -0.5px; }
.q-icon { color: #cbd5e1; font-size: 14px; transition: transform 0.3s ease; }
.faq-item[open] .q-icon { transform: rotate(180deg); color: var(--b-accent); }
.faq-a { padding: 0 30px 30px 64px; color: var(--b-subtext); font-size: 16px; line-height: 1.6; word-break: keep-all; animation: faqFadeIn 0.4s ease forwards; }
.faq-item[open] .faq-q { padding-bottom: 16px; }

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

/* 모바일 메뉴 — 데스크탑에서는 숨김 */
.mobile-menu-btn, .mobile-overlay, .mobile-sidebar { display: none; }

/* =========================================
    [8. MEDIA QUERIES] 반응형 (1024px / 768px)
   ========================================= */
@media (max-width: 1024px) {
    /* 본문 메인 */
    .vibe-mega-title { font-size: 60px; }
    .vibe-bento-grid { grid-template-columns: 1fr 1fr; }
    .vibe-huge { grid-column: span 2; }
    .vibe-accent { grid-column: span 2; grid-row: span 1; }
    .narrative-wrap { grid-template-columns: 1fr; gap: 40px; }
    .reveal-text { font-size: 40px; }
    .service-mega-title { font-size: 48px; }
    .point-grid-minimal.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .story-row, .story-row.reverse { flex-direction: column; gap: 40px; text-align: center; }
    .full-width-gallery { grid-template-columns: repeat(2, 1fr); }
    .story-text-wrap h2 { font-size: 36px; }

    /* About */
    .about-bento-staggered { grid-auto-rows: auto; }
    .card-tall { grid-row: span 1; justify-content: flex-start; }

    /* 렌트카 / 현장각인 */
    .rent-title { font-size: 56px; }
    .live-title { font-size: 50px; }
}

@media (max-width: 768px) {
    /* 본문 메인 */
    .bento-grid-main { grid-template-columns: 1fr; }
    .box-large, .box-wide { grid-column: span 1; }
    .sub-title { font-size: 32px; }
    .call-action h2 { font-size: 40px; }
    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; }
    .gallery-item.hero { grid-column: span 1; grid-row: span 1; }
    .point-grid-minimal, .point-grid-minimal.grid-4 { grid-template-columns: 1fr; gap: 30px; }
    .vibe-hero { padding: 120px 0 80px; }
    .vibe-mega-title { font-size: 44px; }
    .vibe-bento-grid { grid-template-columns: 1fr; }
    .vibe-huge, .vibe-accent { grid-column: span 1; }
    .vibe-huge h3 { font-size: 32px; }
    .vibe-cta-box h2 { font-size: 36px; }
    .vibe-phone { font-size: 50px; }
    .service-mega-title { font-size: 36px; }
    .service-hub-grid { grid-template-columns: 1fr; }
    .hub-card { padding: 40px 30px; }

    /* FAQ */
    .faq-q { padding: 20px; font-size: 16px; }
    .faq-a { padding: 0 20px 24px 20px; }
    .q-mark { font-size: 20px; margin-right: 12px; }

    /* About */
    .about-title { font-size: 32px; }
    .about-bento-staggered { grid-template-columns: 1fr; }
    .card-tall, .card-wide, .card-square { grid-column: span 1; }
    .about-services-grid { grid-template-columns: 1fr; }
    .as-card { flex-direction: column; text-align: center; padding: 30px; }
    .as-icon { margin-right: 0; margin-bottom: 20px; }

    /* 모바일 메뉴 (헤더) */
    .gnb { display: none; }
    .btn-contact { display: none; }
    .mobile-menu-btn { display: flex; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: transparent; border: none; cursor: pointer; z-index: 101; }
    .mobile-menu-btn span { width: 100%; height: 2px; background-color: var(--b-dark); border-radius: 2px; transition: 0.3s; }
    .vibe-header .mobile-menu-btn span { background-color: white; }
    .mobile-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 999; opacity: 0; visibility: hidden; transition: 0.3s ease; }
    .mobile-overlay.active { opacity: 1; visibility: visible; }
    .mobile-sidebar { display: flex; flex-direction: column; position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: white; z-index: 1000; transition: right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); padding: 24px; box-shadow: -5px 0 20px rgba(0,0,0,0.1); }
    .mobile-sidebar.active { right: 0; }
    .mobile-sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
    .mobile-sidebar-header .main-logo { height: 35px; }
    .mobile-close-btn { background: transparent; border: none; font-size: 36px; color: var(--b-dark); cursor: pointer; line-height: 1; }
    .mobile-gnb { display: flex; flex-direction: column; gap: 24px; }
    .mobile-gnb a { font-size: 20px; font-weight: 800; color: var(--b-dark); transition: color 0.2s; }
    .mobile-gnb a:hover { color: var(--b-accent); }

    /* 렌트카 / 현장각인 */
    .rent-grid { grid-template-columns: 1fr; padding: 60px 0; gap: 20px; }
    .rent-card { padding: 40px 30px; }
    .rent-num { font-size: 48px; margin-bottom: 15px; }
    .service-summary-box { padding: 30px 20px; margin-top: 40px; }
    .summary-list li { flex-direction: column; gap: 8px; }
    .s-title { width: 100%; font-size: 18px; color: var(--b-accent); }
    .rent-hero { padding: 120px 0 80px; }
    .rent-title { font-size: 36px; margin-bottom: 20px; letter-spacing: -1px; }
    .rent-desc { font-size: 16px; }
    .live-title { font-size: 36px; margin-bottom: 20px; letter-spacing: -1px; }
    .live-desc { font-size: 16px; }
    .story-text-wrap h2 { font-size: 32px; }
    .story-num { margin-bottom: 12px; }
}