@charset "utf-8";

/* ===================================================================
   egg06 main.css: 프리미엄 전기자전거 랜딩 (다크 오버레이)
   common.css 뒤에 로드. 랜딩(index)에서만 html.idx 스코프로 다크 적용,
   게시판/서브 페이지는 골든 라이트 디자인 유지.
   =================================================================== */

/* ----- 랜딩 전용 변수/베이스 ----- */
html.idx{
    --color: #2e5bff;
    /* --color-txt: 다크 배경 위 "텍스트"로 쓰는 브랜드 파랑.
       면(버튼 배경)에 쓰는 --color 를 그대로 글자에 쓰면 #0b0d12 배경 대비 3.59:1 로
       WCAG AA(본문 4.5:1)에 미달한다. 밝기만 올려 5.48:1 을 확보한 값. */
    --color-txt: #5b7fff;
    --bar: 1px solid rgba(255, 255, 255, 0.12);
    --bg: #0b0d12;
    --bg2: #10131b;
    --txt: #eaecf2;
    --txt2: #9aa1b0;
    scroll-behavior: smooth;
}
/* padding-bottom 은 fixed 플로팅 바에 마지막 콘텐츠가 가리지 않도록 두는 보정.
   PC 바 실측 69px(버튼 44 + 안쪽 여백 24 + 위 테두리 1)이라 70px 로 맞춘다. */
html.idx body{font-family: 'Pretendard'; color: var(--txt); line-height: 150%; background: var(--bg); padding-bottom: 70px;}
html.idx .common{padding: 160px 0;}
html.idx .quick_menu{display: none;}

/* ----- 헤더: 랜딩에서 오버레이(투명 → 스크롤시 다크) ----- */
html.idx #header{background: transparent; border-bottom: 0; transition: background 0.4s, box-shadow 0.4s;}
html.idx #gnb{background: transparent;}   /* default.css 의 #gnb 흰 배경 제거 */
html.idx #header .logo img{content: url("../img/logo_w.png");}   /* 다크용 화이트 로고 스왑 */
/* 모바일 헤더도 랜딩에선 다크 배경이므로 동일하게 화이트 로고로 스왑.
   html.idx 스코프 필수: 게시판 등 밝은 배경 페이지에서는 원본 logo.png 가 유지돼야 한다. */
html.idx .mobile_head .mobile_logo img{content: url("../img/logo_w.png");}
html.idx #header.scrolled{background: rgba(11, 13, 18, 0.88); backdrop-filter: blur(12px); box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08);}
html.idx .main_menu > .dept1 > a{color: #fff;}
html.idx .menu_bar i{color: #fff;}
/* backdrop-filter 를 하단 플로팅 바와 맞춘다. 같은 알파(0.92)인데 블러가 없어
   헤더만 8% 가 투과돼 아래 섹션 제목이 로고 뒤로 비쳐 보였다. */
html.idx .mobile_head{background: rgba(11, 13, 18, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.08);}

/* 메뉴 없는 서브페이지(관리자용 게시판 등): sub_visual 이 없으면 fixed 헤더가 본문을 가림 → 여백 폴백 */
html:not(.idx) body:not(:has(.sub_visual)) .all_wrap{padding-top: 120px;}

/* 섹션 공통 타이틀 */
/* 한국어 줄바꿈: default.css 의 p{word-break:break-all} 이 어절을 중간에서 쪼개
   "없습니 / 다." 처럼 끊고 마지막 줄이 한 글자만 남는 고아줄을 만든다.
   랜딩 스코프에서만 어절 보존으로 바꾼다(긴 URL 등은 overflow-wrap 이 처리). */
html.idx p, html.idx .m5_quote{word-break: keep-all; overflow-wrap: break-word;}

/* 푸터 보조 텍스트 대비: common.css 원본은 라벨 0.3(2.63:1), 저작권 0.25(2.17:1) 로
   AA 에 한참 못 미친다. 바로 옆 값 텍스트(0.5)는 5.34:1 이라 라벨만 유독 흐렸다.
   위계는 색이 아니라 굵기로 준다. */
html.idx #ft .ft_contact_row em{color: rgba(255, 255, 255, 0.5); font-weight: 400;}
html.idx #ft .ft_contact_row span{font-weight: 500;}
html.idx #ft .ft_copy{color: rgba(255, 255, 255, 0.45);}

/* 포커스 링: 테마 전체에 :focus-visible 규칙이 하나도 없어 UA 기본값에만 의존했다.
   다크 배경에서 브라우저·OS 조합에 따라 대비가 떨어질 수 있어 명시해 둔다. */
html.idx :is(a, button, input, textarea, select, [tabindex]):focus-visible{outline: 2px solid #fff; outline-offset: 2px;}

/* 섹션 라벨(GALLERY, SPEC & GUIDE ...) 은 common.css 정의라 여기서 색만 덮는다.
   html.idx 스코프 필수: 게시판 등 밝은 배경 페이지의 .label 은 원래 색을 써야 한다. */
html.idx .label{color: var(--color-txt);}

/* 섹션 타이틀 공통: letter-spacing 을 명시해 두는 이유:
   common.css 의 .m4_top h2(삭제된 섹션 잔재)에 -1.5px 가 있어 m4 만 자간이 좁아졌었다.
   여기서 normal 을 못 박아 네 섹션 + CTA 제목의 자간을 한 곳에서 통제한다. */
.m2_detail .m2_top h2, .m3_gallery .m3_top h2, .m4_spec .m4_top h2, .m5_review .m5_top h2, .m6_wrap h2{font-size: var(--fs42); font-weight: 600; color: var(--txt); line-height: 130%; letter-spacing: normal;}
.m2_detail .m2_top, .m3_gallery .m3_top, .m4_spec .m4_top, .m5_review .m5_top{margin-bottom: 70px;}


/* ===================================================================
   메인 비주얼: 풀스크린 시네마틱 히어로 (.visual 은 height 허용 예외)
   =================================================================== */
.visual{position: relative; height: 100vh; margin-top: 0; background: var(--bg); overflow: hidden;}
.visual .swiper{height: 100%;}
.visual .swiper-slide{position: relative; height: 100%;}
.mv_bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.mv_bg::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(11, 13, 18, 0.35) 0%, rgba(11, 13, 18, 0.15) 45%, rgba(11, 13, 18, 0.75) 100%);}
.mv_bg img{width: 100%; height: 100%; object-fit: cover;}
.mv_bg video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
/* 켄번스: 활성 슬라이드 배경 서서히 줌아웃 */
.visual .swiper-slide-active .mv_bg img{animation: hero_zoom 7s ease-out forwards;}
@keyframes hero_zoom{
    from{transform: scale(1.12);}
    to{transform: scale(1);}
}
.mv_text{position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-bottom: 160px;}
.mv_label{display: inline-block; font-family: 'Outfit', sans-serif; font-size: var(--fs18); font-weight: 300; color: rgba(255, 255, 255, 0.75); letter-spacing: 5px; line-height: 100%; margin-bottom: 24px;}
/* 히어로 타이틀: 퍼포먼스 모빌리티 톤(무게감 + 좁은 자간).
   Space Grotesk 는 한글이 없으므로 Pretendard 로 폴백(구매자가 국문으로 바꿔도 안전). */
/* clamp: 기존에는 42 / 60 / 88 / 108px 네 계단이라 경계에서 +42%, +46% 씩 튀었다.
   768px(아이패드 세로)이 42px 로 폰 취급을 받아 707px 컬럼의 39% 만 채우던 것도
   같은 원인. 최소 36px 는 320px 기기에서 좌우 여백을 확보하려는 값(기존 42px 는
   채움률 93% 로 카피가 한 글자만 늘어도 두 줄이 됐다). 상한 108px 는 기존 최대값. */
.mv_text h2{font-family: 'Space Grotesk', 'Pretendard', sans-serif; font-size: clamp(36px, 7.6vw, 108px); font-weight: 600; color: #fff; letter-spacing: normal; line-height: 104%; margin-bottom: 28px;}
.mv_text p{font-size: var(--fs20); font-weight: 300; color: rgba(255, 255, 255, 0.85); line-height: 150%; margin-bottom: 44px;}
.mv_btn{display: inline-block; padding: 18px 48px; background: var(--color); font-size: var(--fs18); font-weight: 500; color: #fff; letter-spacing: 1px; line-height: 100%; transition: filter 0.3s;}
.mv_btn:hover{filter: brightness(1.15);}

/* 슬라이드 텍스트 등장(골든 공통 .fade_up 위에 랜딩 타이밍 재정의) */
.visual .fade_up{opacity: 0; transform: translateY(30px); transition: opacity 0.9s, transform 0.9s;}
.visual .swiper-slide-active .fade_up{opacity: 1; transform: translateY(0);}
.visual .swiper-slide-active .fade_up:nth-child(2){transition-delay: 0.15s;}
.visual .swiper-slide-active .fade_up:nth-child(3){transition-delay: 0.3s;}
.visual .swiper-slide-active .fade_up:nth-child(4){transition-delay: 0.45s;}

/* 우하단 화살표 */
/* bottom 90px: 플로팅 바(버튼 44 + 안쪽 여백 24 + 테두리 1 = 69px)에 화살표 하단이
   상시 9px 잘려 있었다. 바 높이에 여유 21px 를 더한 값.
   right: .width 와 같은 계산식. 4% 고정이면 1630px 를 넘는 순간 화살표가
   섹션 기준선(max-width 1500 중앙정렬)에서 떨어져 나가 1920px 에서 126px 어긋난다. */
.mv_nav{position: absolute; right: max(4%, calc((100% - 1500px) / 2)); bottom: 90px; z-index: 20; display: flex; gap: 12px;}
.mv_prev, .mv_next{width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, 0.35); display: flex; align-items: center; justify-content: center; transition: background 0.3s, border-color 0.3s;}
.mv_prev:hover, .mv_next:hover{background: var(--color); border-color: var(--color);}
.mv_prev span, .mv_next span{font-family: 'SUIT', sans-serif; font-size: var(--fs20); font-weight: 200; color: #fff; line-height: 100%;}

/* 자동 재생 정지 토글: 화살표와 같은 52px 사각 버튼.
   아이콘은 CSS 로만 그린다(일시정지 = 세로 막대 두 개, 재생 = 삼각형). */
.mv_toggle{width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, 0.35); display: flex; align-items: center; justify-content: center; transition: background 0.3s, border-color 0.3s;}
.mv_toggle:hover{background: var(--color); border-color: var(--color);}
.mv_toggle_ico{position: relative; display: block; width: 14px; height: 14px;}
.mv_toggle_ico::before, .mv_toggle_ico::after{content: ''; position: absolute; top: 0; width: 4px; height: 14px; background: #fff; transition: all 0.2s;}
.mv_toggle_ico::before{left: 1px;}
.mv_toggle_ico::after{right: 1px;}
/* 멈춘 상태: 두 막대를 삼각형(재생)으로 바꾼다 */
.mv_toggle.paused .mv_toggle_ico::before{left: 2px; width: 0; height: 0; background: transparent; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #fff;}
.mv_toggle.paused .mv_toggle_ico::after{display: none;}

/* 스크롤 큐 */
.mv_scroll{position: absolute; left: 50%; bottom: 90px; z-index: 20; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px;}
.mv_scroll span{font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 300; color: rgba(255, 255, 255, 0.6); letter-spacing: 3px; line-height: 100%;}
.mv_scroll em{display: block; width: 1px; height: 56px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); animation: scroll_cue 1.8s ease-in-out infinite;}
@keyframes scroll_cue{
    0%{transform: scaleY(0); transform-origin: top;}
    45%{transform: scaleY(1); transform-origin: top;}
    55%{transform: scaleY(1); transform-origin: bottom;}
    100%{transform: scaleY(0); transform-origin: bottom;}
}


/* ===================================================================
   m1: 성능 수치 (대형 카운트업)
   =================================================================== */
.m1_stat{border-bottom: var(--bar);}
/* gap 을 0 으로 두고 박스를 맞붙인다. 이전에는 gap 2% 안에서 border-left 가
   다음 박스 왼쪽 끝에 붙어 0:30 으로 배분돼, 가운데 정렬된 수치가 구분선 기준으로
   15px 씩 왼쪽으로 밀려 보였다. */
.m1_stat .box_wrap{display: flex; flex-wrap: wrap; gap: 40px 0;}
.m1_stat .box{width: 25%; text-align: center; padding: 20px 0;}
.m1_stat .box + .box{border-left: var(--bar);}
.m1_stat .box strong{display: block; font-family: 'Outfit', sans-serif; font-size: 64px; font-weight: 300; color: #fff; line-height: 100%; margin-bottom: 18px;}
.m1_stat .box p{font-size: var(--fs18); color: var(--txt2); line-height: 100%;}


/* ===================================================================
   m2: 제품 디테일 (지그재그)
   =================================================================== */
.m2_detail{background: var(--bg2);}
.m2_detail .box_wrap{display: flex; flex-direction: column; gap: 120px;}
.m2_detail .box{display: flex; align-items: center; justify-content: space-between;}
.m2_detail .box:nth-child(even){flex-direction: row-reverse;}
.m2_detail .img{width: 54%; overflow: hidden;}
.m2_detail .img img{width: 100%; margin: -7% 0;}   /* 패럴랙스 이동 여유(상하 크롭, GSAP 가 transform 담당) */
.m2_detail .text{width: 40%;}
.m2_num{display: inline-block; font-family: 'Outfit', sans-serif; font-size: var(--fs18); font-weight: 400; color: var(--color-txt); letter-spacing: 2px; line-height: 100%; margin-bottom: 20px;}
.m2_detail .text h3{font-size: var(--fs32); font-weight: 600; color: var(--txt); line-height: 130%; margin-bottom: 20px;}
.m2_detail .text p{font-size: var(--fs18); color: var(--txt2); line-height: 150%;}


/* ===================================================================
   m3: 갤러리 (가로 스크롤 쇼케이스)
   =================================================================== */
/* 타이틀 블록: 라벨 위, 제목 아래로 쌓기(m2·m4·m5 와 동일 리듬).
   common.css 의 .m3_top 은 삭제된 WHY US 섹션 잔재라 flex 좌우분할이 걸려 있어
   랜딩 갤러리에서만 제목이 우측으로 밀리는 이름 충돌이 있었다. 랜딩 스코프로 무력화. */
.m3_gallery .m3_top{display: block; gap: 0;}

/* 우측 페이드: Swiper 모드(1024 이하)에서는 다음 슬라이드가 화면 밖으로 걸쳐 있어
   이미지뿐 아니라 캡션 글자까지 중간에 끊긴다(375px 기준 제목이 226px 초과).
   가장자리를 흐리게 처리해 "잘림"을 "이어짐"으로 보이게 한다.
   1025 이상 스크럽 모드는 스크롤로 전부 드러나므로 적용하지 않는다. */
.m3_slider{position: relative;}
@media screen and (max-width: 1024px){
    .m3_slider{
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 80%, rgba(0, 0, 0, 0.25) 94%, transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 80%, rgba(0, 0, 0, 0.25) 94%, transparent 100%);
    }
}
/* padding-left 도 .width 와 같은 계산식으로. 4% 고정이면 1920px 에서 슬라이드가
   섹션 제목보다 126px 왼쪽으로 튀어나와 의도된 오프셋이 아니라 버그로 읽힌다. */
.m3_slider .swiper{padding-left: max(4%, calc((100% - 1500px) / 2));}
.m3_slide{width: 38%;}
.m3_slide .img{overflow: hidden; margin-bottom: 20px;}
.m3_slide .img img{width: 100%; transition: transform 0.6s;}
.m3_slide:hover .img img{transform: scale(1.05);}
.m3_tag{display: inline-block; font-family: 'Outfit', sans-serif; font-size: var(--fs14); font-weight: 500; color: var(--color-txt); letter-spacing: 2px; line-height: 100%; margin-bottom: 10px;}
.m3_slide strong{display: block; font-size: var(--fs20); font-weight: 500; color: var(--txt); line-height: 130%;}
.m3_nav{display: flex; justify-content: flex-end; gap: 12px; margin-top: 40px;}
/* PC 스크럽 모드: 섹션 pin + 스크롤 가로 이동(JS 가 .m3_scrub 부여) */
html.idx .m3_scrub{padding: 80px 0;}
.m3_scrub .m3_top{margin-bottom: 40px;}
.m3_scrub .m3_nav{display: none;}
.m3_scrub .gallerySwiper .swiper-wrapper{gap: 24px;}
.m3_scrub .m3_slide{width: 44vw;}
/* 핀 쇼케이스는 뷰포트에 맞춰 와이드 크롭(.visual 과 같은 height 예외) */
/* clamp: 높이가 뷰포트에 선형 종속이라 실사용 높이 660~720px 에서 이미지가
   190~250px 짜리 가로 띠로 납작해졌다(원본 900x1125 세로 사진의 66% 손실).
   object-position 도 위쪽으로 올려 주피사체가 남게 한다. */
.m3_scrub .m3_slide .img{height: clamp(380px, calc(100vh - 470px), 640px); overflow: hidden; margin-bottom: 20px;}
.m3_scrub .m3_slide .img img{width: 100%; height: 100%; object-fit: cover; object-position: center 40%;}
.m3_prev, .m3_next{width: 52px; height: 52px; border: var(--bar); display: flex; align-items: center; justify-content: center; transition: background 0.3s, border-color 0.3s;}
.m3_prev:hover, .m3_next:hover{background: var(--color); border-color: var(--color);}
/* swiper.min.css 의 흐림 규칙은 .swiper-button-prev/next 클래스를 함께 요구하는데
   테마는 커스텀 클래스만 쓴다. 그대로 두면 첫 슬라이드에서 이전 버튼이 활성 버튼과
   픽셀 단위로 똑같이 보여 눌러도 반응이 없는 고장으로 오인된다. */
.m3_prev.swiper-button-disabled, .m3_next.swiper-button-disabled{opacity: 0.35; cursor: default;}
.m3_prev.swiper-button-disabled:hover, .m3_next.swiper-button-disabled:hover{background: none; border-color: rgba(255, 255, 255, 0.12);}
.m3_prev span, .m3_next span{font-family: 'SUIT', sans-serif; font-size: var(--fs20); font-weight: 200; color: #fff; line-height: 100%;}


/* ===================================================================
   m4: 스펙·구매 안내 (번호 아코디언)
   =================================================================== */
.m4_spec{background: var(--bg2);}
.m4_spec .box_wrap{display: flex; flex-direction: column;}
.m4_spec .box{border-top: var(--bar);}
.m4_spec .box:last-child{border-bottom: var(--bar);}
/* padding 좌우를 0 으로. 10px 이 있으면 번호·아이콘만 섹션 제목과 구분선 기준선에서
   10px 안쪽으로 들어가 같은 섹션 안에 기준선이 두 개 생긴다.
   hover 배경 폭은 음수 마진으로 유지한다. */
.m4_q{display: flex; align-items: center; width: 100%; padding: 32px 10px; margin: 0 -10px; text-align: left; transition: background 0.3s;}
.m4_q:hover{background: rgba(255, 255, 255, 0.03);}
.m4_q em{font-family: 'Outfit', sans-serif; font-size: var(--fs18); font-weight: 400; font-style: normal; color: var(--color-txt); letter-spacing: 1px; line-height: 100%; width: 8%;}
.m4_q strong{flex: 1; font-size: var(--fs24); font-weight: 500; color: var(--txt); line-height: 130%;}
.m4_q span{font-family: 'SUIT', sans-serif; font-size: var(--fs28); font-weight: 200; color: var(--txt2); line-height: 100%; transition: transform 0.4s, color 0.3s;}
.m4_spec .box.on .m4_q span{transform: rotate(45deg); color: var(--color);}
.m4_a{max-height: 0; overflow: hidden; transition: max-height 0.5s ease;}
/* max-width 800px: 1920px 에서 18px 국문이 1008px 를 한 줄로 가로질렀다.
   국문 권장 행장(40~50자)의 두 배라 눈이 좌우로 크게 스윕해야 한다. */
.m4_a p{padding: 26px 10px 40px; margin-left: 8%; max-width: 800px; font-size: var(--fs18); color: var(--txt2); line-height: 150%;}


/* ===================================================================
   m5: 라이더 후기
   =================================================================== */
.m5_review .box_wrap{display: flex; flex-wrap: wrap; gap: 40px 4%;}
.m5_review .box{width: 48%; padding: 50px 40px; border: var(--bar);}
.m5_quote{font-size: var(--fs22); font-weight: 400; color: var(--txt); line-height: 150%; margin-bottom: 32px;}
.m5_by strong{display: block; font-size: var(--fs18); font-weight: 600; color: var(--txt); line-height: 100%; margin-bottom: 8px;}
.m5_by span{font-size: var(--fs14); color: var(--txt2); line-height: 100%;}


/* ===================================================================
   m6: 시승 신청 CTA
   =================================================================== */
.m6_cta{background: radial-gradient(60% 100% at 50% 100%, rgba(46, 91, 255, 0.22) 0%, rgba(11, 13, 18, 0) 100%), var(--bg);}
.m6_wrap{text-align: center;}
.m6_wrap h2{margin-bottom: 20px;}   /* 서체 속성은 위 섹션 타이틀 공통 규칙이 담당 */
.m6_wrap p{font-size: var(--fs18); color: var(--txt2); line-height: 150%; margin-bottom: 44px;}
.m6_btn{display: inline-block; padding: 20px 64px; background: var(--color); font-size: var(--fs18); font-weight: 500; color: #fff; letter-spacing: 1px; line-height: 100%; transition: filter 0.3s; animation: cta_glow 2.6s ease-in-out infinite;}
.m6_btn:hover{filter: brightness(1.15);}
@keyframes cta_glow{
    0%, 100%{box-shadow: 0 0 0 0 rgba(46, 91, 255, 0.4);}
    50%{box-shadow: 0 0 44px 8px rgba(46, 91, 255, 0.28);}
}
@media (prefers-reduced-motion: reduce){
    .visual .swiper-slide-active .mv_bg img, .m6_btn, .mv_scroll em{animation: none;}
    /* animation 만 끄면 transition 과 부드러운 스크롤은 그대로 남는다.
       자동 전환·배경 영상은 main.js 의 EGG06_NOANIM 경로에서 멈춘다. */
    html.idx{scroll-behavior: auto;}
    .visual .fade_up, .m4_a, .cm_box, .m3_slide .img img{transition: none;}
    .m3_slide:hover .img img{transform: none;}
}
.m6_note{display: block; font-size: var(--fs14); color: var(--txt2); line-height: 100%; margin-top: 20px;}


/* ===================================================================
   플로팅 바: 상시 단일 CTA (랜딩 전용)
   =================================================================== */
.floating_bar{position: fixed; left: 0; bottom: 0; width: 100%; z-index: 9500; background: rgba(11, 13, 18, 0.92); backdrop-filter: blur(12px); border-top: var(--bar);}
.fb_inner{display: flex; align-items: center; width: 92%; max-width: 1500px; margin: 0 auto; padding: 12px 0; gap: 24px;}
/* white-space:nowrap: 좁은 폭에서 "EGG RIDE R1", "전화 문의", "시승 신청"이
   두 줄로 접히면서 바 높이가 61px -> 71px 로 늘어나 body 하단 보정(62px)을 넘어섰다. */
.fb_brand{font-family: 'Outfit', sans-serif; font-size: var(--fs18); font-weight: 500; color: #fff; letter-spacing: 3px; line-height: 100%; white-space: nowrap;}
.fb_msg{font-size: var(--fs14); color: var(--txt2); line-height: 100%;}
.fb_btns{display: flex; align-items: center; gap: 12px; margin-left: auto;}
.fb_tel{display: flex; align-items: center; gap: 8px; padding: 12px 20px; border: var(--bar); font-size: var(--fs14); font-weight: 500; color: var(--txt); line-height: 100%; white-space: nowrap; transition: border-color 0.3s;}
.fb_tel:hover{border-color: var(--color);}
.fb_tel i{font-size: var(--fs18); color: var(--color);}
.fb_cta{display: inline-block; padding: 12px 32px; background: var(--color); font-size: var(--fs14); font-weight: 600; color: #fff; line-height: 100%; white-space: nowrap; transition: filter 0.3s;}
.fb_cta:hover{filter: brightness(1.15);}


/* ===================================================================
   시승 신청 모달 (cm_): CTA/메뉴 클릭 시 랜딩 이탈 없이 접수
   =================================================================== */
.cm_modal{position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9900; display: none; align-items: center; justify-content: center;}
.cm_modal.on{display: flex;}
.cm_bg{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(4, 5, 8, 0.7); backdrop-filter: blur(6px);}
.cm_box{position: relative; z-index: 10; width: 92%; max-width: 480px; max-height: 90vh; overflow-y: auto; background: var(--bg2); border: var(--bar); padding: 48px 40px; opacity: 0; transform: translateY(24px); transition: opacity 0.35s, transform 0.35s;}
.cm_modal.on .cm_box{opacity: 1; transform: translateY(0);}
.cm_box .label{display: inline-block; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 500; color: var(--color-txt); letter-spacing: 3px; line-height: 100%; margin-bottom: 16px;}
/* 44x44 히트 영역: 아이콘만 있으면 실제 터치 대상이 15x18px 밖에 되지 않는다.
   좌표를 8px 로 당겨 아이콘 중심은 기존 위치와 거의 같게 유지한다. */
.cm_close{position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: var(--fs18); color: var(--txt2); line-height: 100%; transition: color 0.3s;}
.cm_close:hover{color: #fff;}
.cm_box h3{font-size: var(--fs28); font-weight: 600; color: var(--txt); line-height: 130%; margin-bottom: 12px;}
.cm_desc{font-size: var(--fs14); color: var(--txt2); line-height: 150%; margin-bottom: 32px;}
.cm_form{display: flex; flex-direction: column; gap: 12px 0;}
.cm_form input[type="text"], .cm_form input[type="tel"], .cm_form textarea{width: 100%; padding: 14px 16px; background: rgba(255, 255, 255, 0.04); border: var(--bar); border-radius: 0; font-family: inherit; font-size: var(--fs14); color: var(--txt); line-height: 140%; transition: border-color 0.3s;}
/* outline 을 없애지 않는다. 테두리 색 변화 1px 만으로는 포커스 위치를 알기 어렵다. */
.cm_form input:focus-visible, .cm_form textarea:focus-visible{outline: 2px solid #fff; outline-offset: 2px; border-color: var(--color);}
.cm_form input:focus, .cm_form textarea:focus{border-color: var(--color);}
.cm_form textarea{resize: none;}
/* 0.6 알파는 입력 배경과 합성되면 3.22:1 로 AA 미달이었다. 입력 예시가
   플레이스홀더에만 있어 정보 손실 위험도 있다. */
.cm_form ::placeholder{color: rgba(154, 161, 176, 0.85);}
.cm_hp{position: absolute; top: -9999px; left: -9999px;}   /* 허니팟: 사람에게 숨김 */
.cm_agree{display: flex; align-items: center; gap: 0 8px; font-size: var(--fs14); color: var(--txt2); line-height: 140%; margin-top: 4px; padding: 6px 0; cursor: pointer;}
.cm_agree input{width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color);}
.cm_submit{margin-top: 16px; padding: 18px 0; background: var(--color); font-size: var(--fs18); font-weight: 500; color: #fff; letter-spacing: 1px; line-height: 100%; transition: filter 0.3s;}
.cm_submit:hover{filter: brightness(1.15);}
.cm_submit:disabled{opacity: 0.6; cursor: default;}
.cm_done{display: none; text-align: center; padding: 24px 0 8px;}
.cm_done i{font-size: 52px; color: var(--color);}
.cm_done strong{display: block; font-size: var(--fs22); font-weight: 600; color: var(--txt); line-height: 130%; margin: 16px 0 10px;}
.cm_done p{font-size: var(--fs14); color: var(--txt2); line-height: 150%; margin-bottom: 28px;}
.cm_ok{display: inline-block; padding: 14px 48px; background: var(--color); font-size: var(--fs14); font-weight: 500; color: #fff; line-height: 100%; transition: filter 0.3s;}
.cm_ok:hover{filter: brightness(1.15);}
.cm_modal.done .cm_form, .cm_modal.done .cm_desc{display: none;}
.cm_modal.done .cm_done{display: block;}
/* default.css 의 html{overflow-y:scroll} 때문에 스크롤 컨테이너가 <html> 이다.
   body 의 overflow 는 html 의 computed overflow 가 visible 일 때만 뷰포트로 전파되므로
   body 에만 걸어둔 잠금은 아무 효과가 없었다(모달을 연 채 휠을 굴리면 배경이 스크롤됨).
   html 에도 함께 건다. */
html.cm_lock, body.cm_lock{overflow: hidden;}


/* ===================================================================
   반응형: 1400 / 1024 / 768 (맨 아래 통합)
   =================================================================== */
@media screen and (max-width: 1400px){
    /* 섹션 여백 사다리 160 / 110 / 80 / 60: 이전에는 1024/1025 경계에서
       60 -> 160px 로 한 번에 2.67배 뛰어, 1px 차이로 문서 전체가 약 1,200px
       길어졌다 짧아졌다 했다(섹션 6개 x 200px). */
    html.idx .common{padding: 110px 0;}
    .m1_stat .box strong{font-size: 52px;}
}

@media screen and (max-width: 1024px){
    html.idx .common{padding: 80px 0;}
    .m2_detail .m2_top, .m3_gallery .m3_top, .m4_spec .m4_top, .m5_review .m5_top{margin-bottom: 40px;}
    .m2_detail .m2_top h2, .m3_gallery .m3_top h2, .m4_spec .m4_top h2, .m5_review .m5_top h2, .m6_wrap h2{font-size: 32px;}

    .mv_text{padding-bottom: 120px;}
    /* .mv_nav bottom 은 기본값 90px 를 그대로 쓴다(바 69px 를 피하려면 40px 로는 부족). */

    .m1_stat .box_wrap{gap: 30px 4%;}
    .m1_stat .box{width: 48%;}
    .m1_stat .box + .box{border-left: 0;}
    .m1_stat .box strong{font-size: 44px;}

    .m2_detail .box_wrap{gap: 60px;}
    .m2_detail .text h3{font-size: 26px;}

    .m3_slide{width: 55%;}

    .m4_q{padding: 22px 10px;}   /* 기본의 margin:0 -10px 와 짝을 맞춰야 기준선이 유지된다 */
    .m4_q em{width: 12%;}
    .m4_q strong{font-size: 20px;}
    .m4_a p{margin-left: 12%; padding: 20px 4px 30px;}

    .m5_review .box_wrap{gap: 20px 0;}
    .m5_review .box{width: 100%; padding: 36px 24px;}
    .m5_quote{font-size: 19px;}

    .fb_brand{letter-spacing: 1px;}
}

@media screen and (max-width: 768px){
    html.idx body{padding-bottom: 66px;}   /* 모바일 바 실측 65px */

    /* 히어로: 모바일은 좌측 정렬 대신 중앙 정렬(좁은 폭에서 문구가 한쪽으로 쏠려 보임) */
    /* padding-bottom 170px: 중앙 정렬이 되면서 CTA 가 화면 중앙으로 내려와
       .mv_scroll(bottom 80px + 높이 62px = 142px 지점)과 겹쳐 버튼 터치를 가로챘다.
       스크롤 큐 상단(142px)에 여백 28px 를 더한 값으로 잡아 둘이 공존하게 한다. */
    .mv_text{padding-bottom: 170px;}

    /* 제품 소개 세로 쌓기는 768px 아래에서만. 769~1024 에서 세로로 쌓으면
       이미지가 942px 풀블리드로 3장 쌓여 섹션 하나가 2,337px 이 됐다(테마 최장).
       좌우 배치를 유지하면 1,584px 수준으로 내려가고 1025 와의 단차도 사라진다. */
    .m2_detail .box{flex-direction: column; align-items: flex-start; gap: 28px 0;}
    .m2_detail .box:nth-child(even){flex-direction: column;}
    .m2_detail .img{width: 100%;}
    .m2_detail .text{width: 100%;}
    .mv_text p br{display: none;}
    .mv_btn{padding: 15px 36px; font-size: 16px;}

    /* 본문/설명 축소: --fs18·--fs20 은 :root 에서만 정의돼 반응형으로 줄지 않는다.
       375px 에서 18~20px 는 모바일 본문으로 과해 랜딩 스코프에서만 단계 조정.
       기준: 히어로 설명 16px / 일반 설명 15px / 라벨·보조 14px (제목은 유지) */
    .mv_label{font-size: var(--fs14);}
    .mv_text p{font-size: 16px;}
    .m1_stat .box p{font-size: var(--fs14);}
    .m2_detail .text p{font-size: 15px;}
    .m3_slide strong{font-size: 17px;}
    .m4_a p{font-size: 15px;}
    .m5_quote{font-size: 16px;}
    .m5_by strong{font-size: 16px;}
    .m6_wrap p{font-size: 15px;}
    /* 화살표는 숨기되 자동 재생 정지 토글은 남긴다.
       모바일에서 nav 를 통째로 숨기면 자동 전환을 멈출 수단이 0 이 된다(WCAG 2.2.2). */
    .mv_prev, .mv_next{display: none;}
    .mv_toggle{width: 44px; height: 44px;}
    .mv_scroll{bottom: 80px;}   /* 모바일 바는 65px. CTA 와의 간격 28px 를 유지하려고 기본값보다 낮게 */
    .mv_scroll em{height: 40px;}

    /* 2열 유지: 1열로 떨어뜨리면 네 항목이 세로 595px 로 늘어나 섹션 하나가
       화면을 통째로 차지하고, 706px 박스에 126px 숫자만 놓여 가로의 82%가 빈다.
       좁은 폭에서 두 칸에 들어가도록 수치 글자만 한 단계 줄인다. */
    .m1_stat .box{padding: 10px 0;}
    .m1_stat .box strong{font-size: 38px; margin-bottom: 12px;}

    .m3_slide{width: 78%;}
    .m3_nav{margin-top: 24px;}

    .m4_q strong{font-size: 16px;}

    .m6_btn{padding: 16px 44px;}

    .cm_box{padding: 36px 24px;}
    /* 16px: iOS Safari 는 이보다 작은 입력 필드에 포커스하면 페이지를 자동 확대하고,
       확대된 상태가 그대로 남아 이후 화면이 가로로 밀린다. */
    .cm_form input[type="text"], .cm_form input[type="tel"], .cm_form textarea{font-size: 16px;}

    .fb_inner{gap: 12px; padding: 10px 0;}
    .fb_brand{font-size: var(--fs14);}
    /* 세로 여백은 두 버튼 모두 44px 높이(권장 최소 터치 크기)가 되도록 잡은 값.
       fb_tel 은 아이콘 18px + 여백 24px + 테두리 2px, fb_cta 는 글자 14px + 여백 30px. */
    .fb_tel{padding: 12px 14px;}
    .fb_cta{padding: 15px 20px;}
}


@media screen and (max-width: 600px){
    /* 중앙정렬은 컬럼이 좁아 문구가 한쪽으로 쏠려 보이는 구간에서만.
       768px 까지 중앙정렬하면 아이패드 세로에서 폰 레이아웃처럼 보인다. */
    .mv_text{align-items: center; text-align: center;}
}


@media screen and (max-width: 374px){
    /* 플로팅 바: 320px 기준 fb_inner 는 294px 뿐이라 브랜드 + 버튼 2개(약 300px)가 들어가지 않는다.
       전화는 아이콘 전용 버튼으로 줄이고(텍스트는 aria-label 로 남김) 자간·여백을 조인다.
       경계가 359px 일 때 360px 쪽 여유가 16.5px(5%) 뿐이라, 구매자가 브랜드명을
       조금만 길게 바꿔도 바로 넘쳤다. 374px 로 올려 360 기기까지 컴팩트 바를 쓴다. */
    .fb_inner{gap: 8px;}
    .fb_brand{letter-spacing: 0;}
    .fb_tel{padding: 12px 12px; gap: 0;}
    .fb_tel span{display: none;}
    .fb_cta{padding: 15px 16px;}
}