@charset "utf-8";
/* ============================================================================
   v2 mobile / m_main — 메인 본문 (M-1 ~ M-10)
   요구사항 : docs/requirements-260904.md
   설계     : docs/v2-track-design-260904.md  §9-7 (MO 실측값)
   시안     : MO 440 기준. 섹션 컨텐츠 384 (=87.2727%), 좌우 여백 28 (=6.3636%)
              메인 비주얼만 컨텐츠 380 (=86.3636%), 여백 30
              반응형 미디어쿼리를 새로 쓰지 않는다. 440 기준 값을 % 로 환산한다.
   ============================================================================ */

.v2_main { padding-bottom: 50px; }

/* ------------------------------------------------------- 공통 섹션 --- */
/* 섹션 제목 : SemiBold 16 / h 23 / 가운데. 섹션 간격 35~40 */
.v2_msec { margin-top: 40px; padding: 0 6.3636%; }
.v2_msec_tit {
    font-size: 16px; font-weight: 600; line-height: 23px;
    text-align: center; color: var(--dark-color);
}

/* ------------------------------------------------- M-1 메인 비주얼 --- */
/* 중앙 380×515 radius 20 / 좌우 peek 350×475 opacity .7 / 간격 15
   peek 은 별도 슬라이드 크기가 아니라 축소다. 350/380 = .921, 475/515 = .922 로 같다.
   380 × (1 - .921) ÷ 2 = 15 → spaceBetween 을 0 으로 둬도 시안의 간격 15 가 나온다. */
.v2_visual { position: relative; padding-top: 0; }

.v2_visual_swiper { width: 100%; overflow: hidden; }
/* slidesPerView:'auto' 는 슬라이드 폭을 CSS 에서 읽어 wrapper 폭을 계산한다.
   % 로 주면 wrapper 폭에 물려 순환 참조가 되므로 뷰포트 기준 vw 로 준다. (380 ÷ 440) */
.v2_visual_swiper .swiper-slide {
    -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
    width: 86.3636vw;
    -webkit-transform: scale(.921); transform: scale(.921);
    opacity: .7;
    -webkit-transition: -webkit-transform .4s ease, opacity .4s ease;
    transition: transform .4s ease, opacity .4s ease;
}
.v2_visual_swiper .swiper-slide-active {
    -webkit-transform: scale(1); transform: scale(1);
    opacity: 1;
}

/* 515 ÷ 380 = 135.526% */
.v2_visual_item {
    position: relative; display: block; width: 100%; height: 0;
    padding-bottom: 135.526%;
    border-radius: 20px; overflow: hidden;
    background: var(--gray-1-color);
}
.v2_visual_item img,
.v2_visual_item video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    -o-object-fit: cover; object-fit: cover;
}

/* 화살표 23×23. 좌우로 더 벌려 슬라이드 가장자리에 붙인다 */
.v2_visual_nav {
    position: absolute; top: 47%; z-index: 2;
    width: 23px; height: 23px; margin-top: 6px;
    border-radius: 50%;
    background: var(--sub-red-color);
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.v2_visual_prev { left: 13.34%; }
.v2_visual_next { left: 86.66%; }
/* 흰 chevron. 별도 아이콘 자산 없이 테두리로 그린다 */
.v2_visual_nav:before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 7px; height: 7px;
    border-top: 1.5px solid #fff; border-right: 1.5px solid #fff;
}
.v2_visual_prev:before {
    -webkit-transform: translate(-30%, -50%) rotate(-135deg);
    transform: translate(-30%, -50%) rotate(-135deg);
}
.v2_visual_next:before {
    -webkit-transform: translate(-70%, -50%) rotate(45deg);
    transform: translate(-70%, -50%) rotate(45deg);
}

/* dot 48×10 (10 × 3, 간격 9). D-37 : 표시만 하고 탭 이동은 없다
   PC 와 같이 슬라이드 위에 겹친다. 슬라이드 하단에서 20 — PC 기준과 같은 값이다.
   10px 3개 + 간격 9 = 48. 좌우 바깥 여백까지 57 이라 48 로 두면 줄바꿈된다. */
.v2_visual_dots {
    position: absolute; left: 50%; bottom: 20px; z-index: 3;
    margin-left: -28.5px;
    width: 57px; font-size: 0; text-align: center; white-space: nowrap;
}
/* v1 swiper.css 의 .swiper-pagination-bullet 에 transform: skew(-25deg) 가 걸려 있어
   (구버전 사선 도트) 되돌리지 않으면 원이 기울어진다 */
.v2_visual_dots .swiper-pagination-bullet {
    width: 10px; height: 10px; margin: 0 4.5px;
    background: var(--gray-3-color); opacity: 1; border-radius: 50%;
    -webkit-transform: none; transform: none;
    cursor: default;
}
.v2_visual_dots .swiper-pagination-bullet-active { background: var(--sub-red-color); }

/* ------------------------------------------- D-39 한줄 공지 --- */
/* 최상단 띠배너로 올라갔다. 스타일은 mobile/m_layout.css 가 갖는다. */

/* ------------------------------------------------ M-3 all ways 모션 --- */
/* 컨테이너 341×43 / 로고 89×27.228 / 안내문 Medium 11 #6b6b6b (→ --gray-4 스냅) + arrow 12
   ⏸ MO 세로 Lottie(D-51) 수령 전까지 정적 로고가 그대로 노출된다 */
/* Lottie 캔버스가 컨텐츠 폭(384)보다 넓어 가로 스크롤이 생기지 않게 잘라낸다 */
.v2_allways { margin-top: 10px; padding: 0 6.3636%; overflow: hidden; }
.v2_allways_link { display: block; text-align: center; }
.v2_allways_motion { position: relative; display: block; height: 27.228px; }
.v2_allways_motion img { width: 89px; height: 27.228px; }
/* 온탭 모션. MO 세로 JSON(D-51)이 오기 전까지는 PC JSON 으로 대체 재생한다 (main_v2.js).
   PC 와 같은 계산이다 — 캔버스 안 로고(viewBox) 폭 271.5 / 중앙 x 667.2 / 상단 y 7.45.
     시안 로고 폭 89 → 배율 89 ÷ 271.5 = 0.3278
     캔버스 1350×100 → 442.5×32.8 / 로고 중앙 = 667.2 × 0.3278 = 218.7
   ※ allways_mo.json 을 받으면 그 JSON 기준으로 다시 재야 한다. */
.v2_allways_canvas {
    position: absolute; top: 0; left: 50%;
    width: 442.5px; height: 32.8px; margin-left: -218.7px;
    pointer-events: none;
}
.v2_allways_more {
    display: inline-block; margin-top: 4px;
    font-size: 11px; font-weight: 500; font-style: normal;
    color: var(--gray-4-color);
}
.v2_allways_more:after { content: " \2192"; margin-left: 2px; }

/* ------------------------------------------------ M-5 카드 그리드 --- */
/* 컨테이너 384 / 카드 185×214 radius 15 / 열 간격 10 · 행 간격 11
   D-24 · D-38 : 개수 제한 없이 2열로 흘리고, 마지막 홀수 카드는 좌측 정렬(기본 흐름) */
.v2_bike_list {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin-top: 20px;
}
.v2_bike_list > li {
    width: -webkit-calc((100% - 10px) / 2);
    width: calc((100% - 10px) / 2);
    margin-top: 11px;
}
.v2_bike_list > li:nth-child(2n) { margin-left: 10px; }
.v2_bike_list > li:nth-child(-n+2) { margin-top: 0; }
/* 카드가 홀수면 마지막 한 장이 왼쪽에 붙어 빈칸이 생긴다. 그 장만 가운데로 둔다.
   좌우 auto 는 짝수번째(nth-child(2n))에는 걸리지 않아 2열 간격 10 과 충돌하지 않는다. */
.v2_bike_list > li:last-child:nth-child(odd) { margin-left: auto; margin-right: auto; }

.v2_bike_card {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    height: 214px; padding: 28px 18px 15px; overflow: hidden;
    text-align: center;
    background: var(--card-bg-color);
    border: .5px solid var(--card-border-color); border-radius: 15px;
    -webkit-transition: background-color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, border-color .2s ease;
}

/* 제목 SemiBold 14. 정적은 어두운 색이고 온탭에서 빨강으로 바뀐다 (D-2, PC 기본 상태와 동일).
   시안(2027:1546)은 정적에서도 빨강이지만 담당자 지시로 PC 기준에 맞췄다.
   아이콘도 PC 와 같이 정적 상태에는 없고 온탭에서 등장한다.
   ※ D-32 / Q-5 는 "MO 는 아이콘 상시 노출"이었으나 담당자 지시로 PC 기준에 맞췄다. */
.v2_bike_tit {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    font-size: 14px; font-weight: 600; line-height: 1.2;
    color: var(--dark-color);
    word-break: keep-all;
    white-space: nowrap;
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
/* 한 줄 고정. 넘치지 않게 제목 문구를 관리자에서 조정한다 */
.v2_bike_tit > span { white-space: nowrap; }
/* 정적 상태에는 없다. 온탭 시 폭이 열리며 등장한다 (PC hover 와 같은 방식) */
/* PC(pc/main.css .v2_bike_ico)와 같은 사유로 width 가 아니라 max-width 를 전이시킨다.
   아이콘 비율이 제각각이라 폭을 14px 로 고정하면 넓은 아이콘이 잘린다.
   높이 14 기준 가장 넓은 로드가 29.3px 이라 상한을 34px 로 둔다. */
.v2_bike_ico {
    display: block; width: auto; max-width: 0; margin-right: 0; overflow: hidden;
    -webkit-transition: max-width .2s ease, margin-right .2s ease;
    transition: max-width .2s ease, margin-right .2s ease;
}
.v2_bike_ico img { display: block; width: auto; height: 14px; max-width: none; }

/* 부제 Regular 9.5 / lh 12.628. 관리자 입력 개행을 그대로 살린다 (D-23) */
.v2_bike_desc {
    display: block; margin-top: 8px;
    font-size: 9.5px; font-weight: 400; line-height: 12.628px;
    color: var(--dark-color);
}

/* 카드 높이가 214 로 고정이라 이미지는 남는 높이를 채우고 비율만 지킨다.
   등록 이미지가 시안(배경 없는 자전거 컷)과 달라도 카드가 늘어나지 않게 한다. */
.v2_bike_thumb {
    display: block; width: 100%; margin-top: 10px;
    -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
    min-height: 0;
}
.v2_bike_thumb img {
    display: block; width: 100%; height: 100%;
    -o-object-fit: contain; object-fit: contain;
}

/* 제품 보기 Medium 8.5 #71797f + arrow */
.v2_bike_more {
    display: block; margin-top: 10px;
    font-size: 8.5px; font-weight: 500; font-style: normal;
    color: var(--text-sub-color);
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_bike_more:after {
    content: " \2192"; margin-left: 0;
    position: relative; left: 0;
    -webkit-transition: left .25s ease; transition: left .25s ease;
}

/* 온탭 : 배경 흰색 + 테두리 빨강 + 제품보기 빨강 (D-19 / Q-32 / D-50) */
.v2_bike_card.is-on {
    background: #fff;
    border-color: var(--primary-color);
}
.v2_bike_card.is-on .v2_bike_tit,
.v2_bike_card.is-on .v2_bike_more { color: var(--primary-color); }
.v2_bike_card.is-on .v2_bike_more:after { left: 9px; }
.v2_bike_card.is-on .v2_bike_ico { max-width: 34px; margin-right: 4px; }

/* ----------------------------------------------- M-6 키워드 안내 --- */
/* "아직 잘 모르겠어요." Medium 12 #a1a5ae / h 25
   "키워드로 자전거 찾기 →" SemiBold 14 #55585b (→ --gray-4 스냅) + arrow 18 */
.v2_bike_help { margin-top: 24px; text-align: center; }
.v2_bike_help_txt {
    display: block; height: 25px;
    font-size: 12px; font-weight: 500; line-height: 25px;
    color: var(--text-mute-color);
}
/* 화살표·이동 모두 PC 와 같다 (pc/main.css). hover 자리를 온탭(.is-on)이 대신한다 */
.v2_bike_keyword {
    display: inline-block;
    font-size: 14px; font-weight: 600;
    color: var(--gray-4-color);
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_bike_keyword:after {
    content: " \2192"; margin-left: 0;
    position: relative; left: 0;
    -webkit-transition: left .25s ease; transition: left .25s ease;
}
/* 온탭 : 글자 빨강 + 화살표 오른쪽으로 이동 */
.v2_bike_keyword.is-on { color: var(--primary-color); }
.v2_bike_keyword.is-on:after { left: 9px; }

/* -------------------------------------------- M-7 대리점 지도 카드 --- */
/* 시안 2035:2213 실측 : 384×248.21 / radius 11.838 / border .5px #c7daf4 / padding 18/18/21
   지도는 오른쪽에 얹는 그림이 아니라 카드 전체를 덮는 배경이다.
   0929 교체 이미지(dealer_map_2x.jpg 2280×870)는 PC 카드 비율이라 카드 높이에 맞춘다(371×244 기준 이미지 폭 약 640).
   지도(이미지 가로 53~95%)가 글자 오른쪽(카드 x 약 150)에서 시작하도록 가로 71% — 이전 이미지 배치와 같은 느낌으로 동해안 쪽 일부가 잘린다 */
.v2_dealer_card {
    position: relative; overflow: hidden;
    margin-top: 20px; padding: 18px 18px 21px;
    background: var(--card-bg-color) url('../../images/main/dealer_map_2x.jpg') no-repeat 71% 50%;
    background-size: auto 100%;
    border: .5px solid var(--map-border-color); border-radius: 11.838px;
}
.v2_dealer_info { position: relative; z-index: 1; }

.v2_dealer_eyebrow { display: block; font-size: 14px; font-weight: 600; line-height: 20.717px; }
.v2_dealer_count {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
.v2_dealer_count strong {
    font-size: 45px; font-weight: 700; line-height: 50.903px;
    letter-spacing: -1.35px;
    color: var(--primary-color);
}
.v2_dealer_count span { margin-left: 2px; font-size: 18px; font-weight: 600; line-height: 34.922px; }

.v2_dealer_desc { font-size: 14px; font-weight: 500; line-height: 18.5px; }

.v2_dealer_sub { margin-top: 3px; }
.v2_dealer_sub > li {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    line-height: 20.717px;
}
/* 수치 칸 고정폭 37 (750+ 실폭 약 30 + 간격 7) — 라벨(span) 시작점을 두 줄 같게 (PC 와 같은 방식) */
.v2_dealer_sub strong {
    -webkit-box-flex: 0; -ms-flex: 0 0 37px; flex: 0 0 37px; width: 37px;
    font-size: 12px; font-weight: 700; color: var(--primary-color);
}
.v2_dealer_sub span { font-size: 11.5px; font-weight: 500; }

/* CTA : 134×30 / bg #F55B5C / border .592px 빨강 / radius 85.234 (D-53)
   시안 padding 은 16/30/12 지만 안쪽 행 높이가 5.595 라 실제 높이는 30 이다.
   PC 는 회색 버튼이다 (pc/main.css) — 시안이 뷰포트별로 다르다 */
.v2_dealer_cta {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    width: 134px; height: 30px; margin-top: 20px; padding: 0 0 0 16px;
    font-size: 11px; font-weight: 600; color: #fff;
    background: var(--sub-red-color);
    border: .592px solid var(--primary-color); border-radius: 85.234px;
    -webkit-transition: background-color .2s ease; transition: background-color .2s ease;
}
.v2_dealer_cta:after { content: " \2192"; margin-left: 4px; }
.v2_dealer_cta.is-on { background: var(--primary-color); }

/* --------------------------------------------- M-8 뉴스·이벤트 --- */
/* 박스 bg #f6f6f6 / border .174px #cdd1d5 / radius 8.706 / padding 12 / 블록 간격 12 */
.v2_news,
.v2_sns_box {
    padding: 12px;
    background: var(--card-bg-color);
    border: .174px solid var(--card-border-color); border-radius: 8.706px;
}
.v2_news { margin-top: 20px; }
.v2_sns_box { margin-top: 12px; }

.v2_news_head {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.v2_news_head strong { font-size: 13px; font-weight: 600; }
.v2_news_more {
    font-size: 10.5px; font-weight: 500; color: var(--text-sub-color);
    text-decoration: underline;
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_news_more.is-on { color: var(--primary-color); }

.v2_news_list { margin-top: 6px; }
/* 구분선 : 시안 #B7C3CC 0.5px → 팔레트 밖이라 같은 계열 --card-border-color 로 스냅 */
.v2_news_list > li + li { border-top: .5px solid var(--card-border-color); }
.v2_news_list > li > a {
    position: relative;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    min-height: 20px; padding: 8px 17px 8px 0;
}
/* 마지막 행은 아래 여백을 카드 padding(12)에 맡긴다.
   구분선이 없어 8 이 더 붙으면 하단만 넓어 보인다 */
.v2_news_list > li:last-child > a { padding-bottom: 0; }
/* 행 화살표 9.679×10 */
.v2_news_list > li > a:after {
    content: "\2192";
    position: absolute; top: 50%; right: 0;
    font-size: 12px; line-height: 1; color: var(--text-sub-color);
    -webkit-transform: translateY(-50%); transform: translateY(-50%);
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_news_tit {
    -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: 10.5px; font-weight: 400; line-height: 14px;
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_news_tags { -ms-flex-negative: 0; flex-shrink: 0; margin-left: 8px; font-size: 0; }
/* 태그 : 배경 #F55B5C / 테두리 #ED2D2D / radius 1.306 / 텍스트 5.5 흰색 (D-53) */
.v2_news_tags em {
    display: inline-block; min-width: 32px; padding: 1px 3px; margin-left: 3px;
    font-size: 5.5px; font-style: normal; line-height: 1.6; text-align: center; color: #fff;
    background: var(--sub-red-color);
    border: .5px solid var(--sub-red-border-color); border-radius: 3px;
    -webkit-transition: background-color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, border-color .2s ease;
}
.v2_news_list > li > a.is-on .v2_news_tit,
.v2_news_list > li > a.is-on:after { color: var(--primary-color); }
/* 행을 탭하면 태그도 같이 색이 바뀐다 (정적 #F55B5C → 강조 빨강) */
.v2_news_list > li > a.is-on .v2_news_tags em {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* --------------------------------------------------- M-8 SNS --- */
.v2_sns_tit { display: block; font-size: 13px; font-weight: 600; }
/* MO 는 3개를 가운데 정렬한다 (PC 는 세로 목록이라 왼쪽 정렬) */
.v2_sns_main {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    margin-top: 10px;
}
.v2_sns_main > li + li { margin-left: 24px; }
.v2_sns_main > li > a {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
/* 아이콘 2장을 겹쳐 두고 opacity 로 바꾼다.
   PC 와 같은 기준 — 정적은 회색(#A1A5AE = icon_off), 온탭에서 빨강(#E41F20 = icon_on). */
.v2_sns_main > li > a i {
    position: relative;
    display: block; width: 18px; height: 18px; margin-right: 5px;
}
/* 유튜브 SVG 는 32×22.22 라 18×18 박스에 100% 로 늘리면 가로로 찌그러진다.
   contain 으로 비율을 지켜 박스 안에 맞춘다 (인스타·블로그는 정사각에 가까워 변화가 거의 없다) */
.v2_sns_main > li > a i img {
    position: absolute; top: 0; left: 0;
    display: block; width: 100%; height: 100%;
    -o-object-fit: contain; object-fit: contain;
    -webkit-transition: opacity .2s ease; transition: opacity .2s ease;
}
/* 유튜브(2번째)는 18 칸에서 18×12.5 로 작아진다. PC(main.css nth-child(2) 37.258×28.844)와 같은 비율로 칸만 넓힌다 → 약 23×16 */
.v2_sns_main > li:nth-child(2) > a i { width: 23px; }
.v2_sns_main > li > a .v2_sns_ico_on { opacity: 0; }
.v2_sns_main > li > a span {
    font-size: 9px; font-weight: 500;
    -webkit-transition: color .2s ease; transition: color .2s ease;
}
.v2_sns_main > li > a.is-on .v2_sns_ico_off { opacity: 0; }
.v2_sns_main > li > a.is-on .v2_sns_ico_on { opacity: 1; }
.v2_sns_main > li > a.is-on span { color: var(--primary-color); }