@charset "utf-8";
/* ============================================================================
   v2 mobile / layout — GNB · 전체메뉴 오버레이 · 푸터
   요구사항 : docs/requirements-260904.md  (G-7 / IX-1 / IX-2 / I-4)
   시안     : MO 440 기준. 좌우 여백 30 (=6.8182%), 컨텐츠 380 (=86.3636%)
              반응형 미디어쿼리를 새로 쓰지 않는다. 440 기준 값을 % 로 환산한다.
   ============================================================================ */

/* --------------------------------------------------- 최상단 띠배너 --- */
/* 한줄공지. PC 와 같은 구조·높이 30 으로 맞춰 둔 최소 정합이다.
   ⏸ MO 시안 대기 — 가로가 좁아 긴 공지는 좌측에서 흘러가며 보여야 한다(마퀴).
      지금은 PC 와 같이 가운데 정렬 + 말줄임이다.
   배경색·글자색은 관리자 지정값이라 header.php 가 인라인으로 넣는다. */
.v2_notice {
    position: fixed; top: 0; left: 0; z-index: 101;
    width: 100%; height: 30px;
}
.v2_hanju_notice { height: 30px; overflow: hidden; }
.v2_hanju_notice .swiper-slide {
    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;
    height: 30px; padding: 0 3.6364%;
    overflow: hidden;
}
.v2_hanju_notice .swiper-slide a {
    display: block; max-width: 100%;
    font-size: 13px; font-weight: 300; line-height: 30px; color: inherit;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* 제목 700 / 본문 300 — PC 와 같은 굵기 차이다 */
.v2_hanju_notice .swiper-slide a > span:first-child,
.v2_hanju_flow > span:first-child { display: inline-block; padding-right: 8px; font-weight: 700; }

/* 넘치는 공지만 가로로 흘린다 (main_v2.js 가 is-flow 를 붙인다).
   흐르는 동안엔 가운데 정렬·말줄임을 풀어 글자 전체를 지나가게 둔다. */
.v2_hanju_flow { display: inline-block; white-space: nowrap; }
.v2_hanju_notice .swiper-slide.is-flow {
    -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
}
.v2_hanju_notice .swiper-slide.is-flow a {
    max-width: none; width: 100%;
    overflow: visible; text-overflow: clip;
}

/* ------------------------------------------------------------- 상단 바 --- */
/* 본문에서 전역 CSS 를 따로 부르는 페이지(팬텀)가 뒤에 로드돼도 헤더 글꼴·줄높이·로고 h1 크기를 지킨다 (PC layout.css 와 같음) */
.v2_head { font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif; line-height: normal; color: var(--dark-color); }
.v2_head button,
.v2_head input { font-family: inherit; line-height: normal; }
/* 440 × 50 */
.v2_gnb_bar {
    position: fixed; top: 0; left: 0; z-index: 100;
    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;
    width: 100%; height: 50px; padding: 0 6.8182%;
    background: #fff;
    -webkit-transition: -webkit-transform .3s ease; transition: transform .3s ease;
}
/* 띠배너가 있는 페이지에서만 30 아래로 내려간다 */
.v2_head.is-notice .v2_gnb_bar { top: 30px; }
/* G2 : 아래로 스크롤하면 숨기고 위로 올리면 표시 */
.v2_gnb_bar.is-hide { -webkit-transform: translateY(-100%); transform: translateY(-100%); }

.v2_logo { font-size: 0; line-height: 0; }
.v2_logo a { display: block; }
.v2_logo img { width: 52px; height: 20px; }

.v2_gnb_util {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.v2_gnb_util > * + * { margin-left: 14px; }

/* 대리점 찾기 : PC 와 같은 버튼형. 핀 아이콘에서 텍스트 버튼으로 바꿨다 */
.v2_btn_dealer {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -ms-flex-negative: 0; flex-shrink: 0;
    height: 28px; padding: 0 12px;
    border-radius: 5px; background-color: #F55B5C;
    font-size: 13px; font-weight: 400; color: #ffffff;
    white-space: nowrap;
}

/* 아이콘은 시안 에셋(SVG 파일)을 고유 크기로 가운데 배치한다 */
.v2_btn_menu,
.v2_btn_close {
    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;
    width: 25px; height: 25px;
}
.v2_btn_close { width: 26px; height: 26px; }
.v2_btn_menu img,
.v2_btn_close img { display: block; }

/* 상단 바가 fixed 이므로 본문을 밀어준다.
   띠배너 규칙에도 #header 를 붙인다 — 위 `#header + #container`(id 2개)가 명시도에서 이겨
   띠배너가 있어도 50 에 머물렀고, 바가 30 내려간 만큼 롤링 상단을 덮었다. */
#header + #container,
.v2_head + #container { padding-top: 50px; }
#header.v2_head.is-notice + #container,
.v2_head.is-notice + #container { padding-top: 80px; }

/* ---- 서브페이지 프리뷰 전용 (docs/v2-subpage-preview-260917.md §4-1) ----
   v1 m_layout.css 의 id 규칙을 되받는다. v1 CSS 는 고치지 않는다.
     #header  { position: fixed; z-index: 101; }        → v2 는 .v2_gnb_bar 가 fixed 다
     #footer  { padding-bottom: 25%; background: #a7a7a7; }
     #container { padding-bottom: 45%; }                → v1 은 하단 고정 배너 자리를 비워둔다
   .v2_sub 안에 가둔다 — 메인까지 걸리면 .v2_main 의 padding-bottom 이 져서 깨진다. */
.v2_sub #header.v2_head { position: relative; z-index: 100; }
.v2_sub #footer.v2_footer { padding-bottom: 0; background: var(--card-alt-bg-color); }
.v2_sub #container { padding-bottom: 0; }
/* 상단 바 보정 (2026-09-22, 두 번 고침).
   위 `.v2_head + #container` 는 서브 프리뷰에서 걸리지 않는다 — v1 뷰가 #container 앞에
   <script> 를 출력해 인접이 아니다 → 일반 형제(~).
   처음엔 v1 의 .sub_container_wrap{position:relative; top:52px} 를 살려 두고 띠배너 30 만 더했는데,
   relative top 은 자리를 차지하지 않아 본문 끝 52px 가 푸터 아래로 들어갔다
   (v1 은 #container padding-bottom 45% 가 가려 주던 것을 .v2_sub 가 0 으로 만든다 — 고객지원 등록/취소 버튼이 묻힘).
   → top 을 0 으로 되돌리고 #container padding-top 으로 바(50) / 띠배너(80) 를 실제 자리로 잡는다.
   v2 전용 뷰(.v2_plp 등)도 같은 값을 자기 규칙에서 한 번 더 쓴다 (충돌 없음). */
.v2_sub .v2_head ~ #container { padding-top: 50px; }
.v2_sub .v2_head.is-notice ~ #container { padding-top: 80px; }
.v2_sub #container .sub_container_wrap { top: 0; }
/* 본문 끝과 푸터 사이 40 (v2 뷰와 같은 값). v2 뷰의 .sub_container_wrap margin-bottom 은 0 으로 맞췄다 */
.v2_sub #container { padding-bottom: 40px; }

/* v1 base.css:57 의 `button span { display: none; }` 되받기 (PC 와 같은 이유).
   .hiddens 는 제외한다 — 스크린리더 전용이다. */
.v2_sub .v2_head button span:not(.hiddens),
.v2_sub .v2_footer button span:not(.hiddens) { display: inline-block; }

/* v1 base.css:106 의 `a:link { color: #000 }` 되받기 (2026-09-22).
   의사클래스가 붙어 명시도 0,1,1 이라 .v2_btn_dealer(0,1,0) 의 흰 글자를 덮는다.
   메인(V2)은 v1 CSS 를 안 깔아 문제가 없고, 서브 프리뷰에서만 검게 나왔다. */
.v2_sub .v2_btn_dealer:link,
.v2_sub .v2_btn_dealer:visited { color: #ffffff; }

/* v1 m_layout.css:165 의 `.swiper-container { padding: 0 0 60px }` 되받기 (2026-09-22).
   띠배너 스와이퍼(#v2_hanju_notice)에 걸려 박스가 60px 가 되고, z-index 101 이라 바(50) 상단을
   덮는다 → 햄버거·대리점 찾기 버튼 위쪽 절반이 눌리지 않았다. 띠배너는 30 고정이다. */
.v2_sub .v2_hanju_notice.swiper-container { padding: 0; }

/* Ver3 서브 시안(GNB_MO 8037:1238)은 바 하단에 0.5px #A1A5AE 선이 있다 → 1px.
   메인 시안(Ver2)에는 없어 서브 범위에만 둔다. 자전거 리스트는 라벨 밴드가 바로 아래 붙어
   이 선이 밴드 선처럼 보이고, 용품 리스트처럼 밴드가 없는 페이지에서 그대로 드러난다. */
.v2_sub .v2_gnb_bar { border-bottom: 1px solid var(--text-mute-color); }

/* v2 base.css:54 의 전역 `* { box-sizing: border-box }` 되받기.
   v1 본문은 content-box 전제라 padding 만큼 좁아진다. #container 안에서만 되돌린다.
   :where() 로 명시도를 0 으로 낮춰 v1 이 개별 지정한 border-box 는 그대로 이기게 둔다. */
:where(.v2_sub) :where(#container),
:where(.v2_sub) :where(#container) * {
    -webkit-box-sizing: content-box; box-sizing: content-box;
}
/* ★ 폼 컨트롤 제외 — 브라우저 기본값이 border-box 다 (PC 와 같은 이유).
   content-box 를 강제하면 테두리·안쪽여백만큼 커진다. revert 로 기본값까지 되돌린다. */
:where(.v2_sub) :where(#container) input,
:where(.v2_sub) :where(#container) select,
:where(.v2_sub) :where(#container) textarea,
:where(.v2_sub) :where(#container) button {
    -webkit-box-sizing: revert; box-sizing: revert;
}

/* v2 base.css:51 의 폼 리셋 되받기 (PC 와 같은 이유·같은 값).
   v1 base.css 66~90 행의 값을 그대로 옮긴 것이다. GNB 검색창은 #container 밖이라 영향 없다.
   ⚠ v1 base.css 를 고치면 이 블록도 같이 맞춰야 한다. */
:where(.v2_sub) :where(#container) input,
:where(.v2_sub) :where(#container) textarea {
    color: #000; vertical-align: middle; resize: none;
    font-family: 'ng', Malgun, '맑은 고딕', Dotum, '돋움', sans-serif; font-weight: 400;
}
:where(.v2_sub) :where(#container) input {
    padding: 4px 5px 1px; border: none; background: #fff;
}
:where(.v2_sub) :where(#container) select {
    color: #000; background: #fff; vertical-align: middle;
    font-family: 'ng', Malgun, '맑은 고딕', Dotum, '돋움', sans-serif; font-weight: 400;
    border: 0; border-radius: 0;
}
:where(.v2_sub) :where(#container) button {
    font-family: 'ng', Malgun, '맑은 고딕', Dotum, '돋움', sans-serif;
}

/* v2 base.css:51 의 전역 타이포 리셋 되받기 (PC 와 같은 이유·같은 값).
   vertical-align 이 top → baseline 으로 바뀌면 inline-block 아래에 빈 칸이 생겨 배치가 무너진다. */
:where(.v2_sub) :where(#container) {
    font-family: "Noto Sans KR", sans-serif; font-size: 16px;
    color: #000; letter-spacing: 0; line-height: 1.2;
}
/* ★ `*`(0,0,0) 로는 v2 base.css:51 의 요소 목록(0,0,1)을 못 이긴다.
   같은 요소 목록으로 되받아야 뒤에 오는 이 파일이 이긴다 (PC 와 같은 이유). */
:where(.v2_sub) :where(#container) div,
:where(.v2_sub) :where(#container) span,
:where(.v2_sub) :where(#container) h1,
:where(.v2_sub) :where(#container) h2,
:where(.v2_sub) :where(#container) h3,
:where(.v2_sub) :where(#container) h4,
:where(.v2_sub) :where(#container) h5,
:where(.v2_sub) :where(#container) h6,
:where(.v2_sub) :where(#container) p,
:where(.v2_sub) :where(#container) a,
:where(.v2_sub) :where(#container) em,
:where(.v2_sub) :where(#container) i,
:where(.v2_sub) :where(#container) strong,
:where(.v2_sub) :where(#container) img,
:where(.v2_sub) :where(#container) ul,
:where(.v2_sub) :where(#container) ol,
:where(.v2_sub) :where(#container) li,
:where(.v2_sub) :where(#container) dl,
:where(.v2_sub) :where(#container) dt,
:where(.v2_sub) :where(#container) dd,
:where(.v2_sub) :where(#container) form,
:where(.v2_sub) :where(#container) label,
:where(.v2_sub) :where(#container) table,
:where(.v2_sub) :where(#container) tr,
:where(.v2_sub) :where(#container) th,
:where(.v2_sub) :where(#container) td,
:where(.v2_sub) :where(#container) figure,
:where(.v2_sub) :where(#container) button {
    font-family: "Noto Sans KR", sans-serif;
    vertical-align: top; letter-spacing: 0; line-height: 1.2;
}
:where(.v2_sub) :where(#container) input,
:where(.v2_sub) :where(#container) img,
:where(.v2_sub) :where(#container) select,
:where(.v2_sub) :where(#container) button,
:where(.v2_sub) :where(#container) textarea { vertical-align: middle; }

/* ★ input · select · textarea 는 v1 전역 리셋 목록에 없어 브라우저 기본 글자크기·줄높이가 남는다.
   v2 리셋은 이 셋까지 font:inherit 로 올려 폭·세로 기준선이 달라진다 (PC 와 같은 이유).
   revert 로 브라우저 기본값까지 되돌린다. */
:where(.v2_sub) :where(#container) input,
:where(.v2_sub) :where(#container) select,
:where(.v2_sub) :where(#container) textarea {
    font-size: revert; line-height: revert;
}

/* ------------------------------------------------- 전체메뉴 오버레이 --- */
/* A1 우 → 좌 슬라이드 / A2 300ms / A6 화면 전체 흰 배경, 딤 없음 */
.v2_gnb_overlay {
    position: fixed; top: 0; left: 0; z-index: 200;
    width: 100%; height: 100%;
    background: #fff;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    -webkit-transform: translateX(100%); transform: translateX(100%);
    -webkit-transition: -webkit-transform .3s ease; transition: transform .3s ease;
    visibility: hidden;
}
.v2_gnb_overlay.is-open {
    -webkit-transform: translateX(0); transform: translateX(0);
    visibility: visible;
}

/* 오버레이 상단 바 : 440 × 52 */
.v2_gnb_overlay_top {
    position: -webkit-sticky; position: sticky; top: 0; z-index: 2;
    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;
    height: 52px; padding: 0 6.8182%;
    background: #fff;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .06); box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* 오버레이 본문 : 좌우 여백 30 */
.v2_gnb_overlay_body { padding: 17px 6.8182% 60px; }

/* ---------------------------------------------------------- 검색창 --- */
/* 380 × 36 / radius 5 / border --gray-3 (시안 #d5d5d5 스냅) */
.v2_gnb_search {
    height: 36px; margin-bottom: 18px;
    border: 1px solid var(--input-border-color); border-radius: 5px;
    background: #fff;
}
.v2_search_form {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    height: 100%; padding: 0 8px 0 7px;
}
/* .v2_head 를 붙여 base_26y.css input[type~="text"]보다 우선 */
.v2_head .v2_search_form input {
    -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
    min-width: 0; height: 28px;
    font-size: 14px; color: var(--dark-color); background: none; border: 0; outline: none;
}
.v2_btn_search {
    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;
    width: 25px; height: 25px;
}
.v2_btn_search img { display: block; }

/* ------------------------------------------------------- 아코디언 --- */
/* B1 단일 오픈 / B2 자전거만 초기 펼침 / B3 높이 슬라이드 250ms */
.v2_gnb_acc_item + .v2_gnb_acc_item { margin-top: 20px; }

.v2_gnb_acc_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;
    width: 100%; height: 34px;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--gray-2-color);
    font-size: 20px; font-weight: 500; text-align: left; color: var(--dark-color);
    -webkit-transition: color .2s; transition: color .2s;
}
/* PC 1depth 활성(D-31)과 같은 기준 — 펼친 항목의 제목을 빨강으로.
   언더바는 PC 전용이라 MO 는 색만 바꾼다. */
.v2_gnb_acc_item.is-open > .v2_gnb_acc_head { color: var(--primary-color); }
/* all ways 행 온탭 : 글자 + 화살표 빨강 (PC hover 와 같다).
   <img> 는 CSS 로 색을 못 바꿔 _on 파일을 배경으로 깔고 앞의 img 를 감춘다. */
.v2_gnb_acc_item.is-link > .v2_gnb_acc_head.is-on { color: var(--primary-color); }
.v2_gnb_acc_item.is-link > .v2_gnb_acc_head.is-on .v2_ico_arrow {
    background: url('../../images/ico/arrow_up_right_on.svg') no-repeat center;
}
.v2_gnb_acc_item.is-link > .v2_gnb_acc_head.is-on .v2_ico_arrow img { visibility: hidden; }
/* D-33 : chevron 은 펼침/접힘에 따라 회전하지 않는다 */
.v2_ico_chev,
.v2_ico_arrow {
    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;
    -ms-flex-negative: 0; flex-shrink: 0;
    width: 24px; height: 24px;
}
.v2_ico_chev img,
.v2_ico_arrow img { display: block; }

.v2_gnb_acc_panel { padding-top: 15px; }

/* all ways : 아코디언이 아니라 외부링크 행 */
.v2_gnb_acc_item.is-link .v2_gnb_acc_head { height: 36px; }

/* ------------------------------------------------- 패널 내부 공통 --- */
/* 섹션 : 종류별로 찾기 / 브랜드로 찾기 / 키워드로 찾기 */
.v2_sec + .v2_sec { margin-top: 25px; }

.v2_sec_head {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    margin-bottom: 5px;
}
.v2_sec_head strong { font-size: 16px; font-weight: 500; color: var(--primary-color); }
.v2_sec_head span { margin-left: 10px; font-size: 11px; color: var(--text-sub-color); }

/* 그룹 : DB 3depth (스마트 모빌리티 / 스포츠 / 라이프스타일 / 주니어,키즈 …) */
.v2_grp + .v2_grp { margin-top: 15px; }
.v2_grp_tit {
    display: block; margin-bottom: 8px;
    font-size: 13px; font-weight: 600; font-style: normal; color: var(--text-sub2-color);
}
.v2_grp_tit a { display: inline-block; }

/* 용품 패널은 그룹(안전·편의 / 자전거 장착 …)이 곧 섹션이라 자전거 패널의
   "종류별로 찾기" 와 같은 레벨이다. 시안 2076:1468 기준 빨강 16px. */
.v2_grp_tit.is-main {
    font-size: 16px; font-weight: 500; color: var(--primary-color);
}

/* 칩 : 3열. 가로 간격 10 / 세로 간격 8 */
.v2_chips {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: -4px -5px;
}
.v2_chips > li { width: 33.3333%; padding: 4px 5px; }
.v2_chips > li > a {
    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;
    height: auto; padding: 6px 5px;
    font-size: 12px; font-weight: 500; text-align: center; word-break: keep-all;
    background: var(--chip-bg-color);
    border: 1px solid var(--chip-border-color); border-radius: 5px;
    -webkit-transition: color .2s, background-color .2s, border-color .2s;
    transition: color .2s, background-color .2s, border-color .2s;
}
/* 온탭 : 시안 칩 컴포넌트 68:50 Variant2 = 배경 #F55B5C 채움 + 흰 글씨 (PC hover 와 같다) */
.v2_chips > li > a.is-on {
    color: #fff;
    background: var(--sub-red-color);
    border-color: var(--sub-red-color);
}

/* 키워드 칩 : 폭 가변 */
.v2_chips_key { margin: -3.5px -5px; }
.v2_chips_key > li { width: auto; padding: 3.5px 5px; }
.v2_chips_key > li > a { height: auto; padding: 6px 14px 6px 12px; }

/* 브랜드 카드 : CMS 미관리. 배경·로고 이미지 하드코딩 */
.v2_brand_list > li + li { margin-top: 11px; }
.v2_brand_list > li > a {
    display: block; position: relative;
    min-height: 78px; padding: 14px 23px 14px 20px;
    background-color: var(--card-bg-color);
    background-repeat: no-repeat; background-position: center; background-size: cover;
    border-radius: 10px;
}
.v2_brand_list strong { display: block; font-size: 16px; font-weight: 600; }
.v2_brand_logo { display: block; margin: 5px 0 6px; line-height: 0; }
.v2_brand_logo img { height: auto; }
.v2_brand_desc { display: block; font-size: 11px; font-weight: 500; }

/* 추천 콘텐츠 : 좌측 이미지 + 우측 텍스트 */
.v2_rec_list > li + li { margin-top: 10px; }
.v2_rec_list > li > a {
    display: block; min-height: 114px;
    padding: 30px 30px 30px 140px;
    color: #fff;
    background-repeat: no-repeat; background-position: center; background-size: cover;
    border: 1px solid var(--line-soft-color); border-radius: 10px;
}
/* PC(pc/layout.css .v2_rec_list)와 같은 값. 피그마 12:627 확정값이다 — 임의로 줄이지 말 것.
   MO 는 min-height:114px 라 글자가 넘쳐도 카드가 늘어나 잘리지 않는다. */
.v2_rec_list strong { display: block; margin-bottom: 6px; font-size: 14.5px; font-weight: 600; }
.v2_rec_list span { display: block; font-size: 12px; line-height: 15px; }

/* BEST 카드 : 텍스트는 검정.
   시안(2076:777)에서 텍스트 블록이 안쪽 박스(163) 밖으로 넘쳐 약 209 폭을 쓴다.
   그래서 오른쪽 여백을 196 이 아니라 150 으로 잡아야 줄바꿈이 시안과 같아진다.
   MO 순서 : 추천 콘텐츠 → BEST → SNS */
.v2_sec_rec + .v2_sec_best { margin-top: 10px; }
.v2_sec_best + .v2_sec_sns { margin-top: 18px; }
.v2_sec_sns .v2_sns { margin-top: 0; }

.v2_best_card {
    display: block; position: relative;
    min-height: 320px;
    padding: 19px 150px 20px 21px;
    color: var(--dark-color);
    background-repeat: no-repeat;
    border-radius: 15px;
}
.v2_badge {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    width: 54px; height: 22px; margin-bottom: 16px;
    font-size: 12px; font-weight: 500; font-style: normal; color: #fff;
    background: rgba(245, 91, 92, .8); border-radius: 5px;
    -webkit-transition: background-color .2s; transition: background-color .2s;
}
/* 온탭 : 뱃지가 반투명 → 불투명 빨강 (시안 73:118 Variant2, PC hover 와 같다) */
.v2_best_card.is-on .v2_badge { background: var(--primary-color); }
.v2_best_card strong { display: block; margin-bottom: 8px; font-size: 27px; font-weight: 600; line-height: 28.5px; }
.v2_best_card span { display: block; font-size: 14px; line-height: 18px; }

/* 용품 BEST : 자전거 BEST 와 같은 카드, 높이만 230. 제목 위 20 / 아래 5 (0929 피드백) */
.v2_sec_unit + .v2_sec_unit_best { margin-top: 20px; }
/* 관리자 등록 이미지가 380×230 이다. 높이를 230 으로 고정하면 폭이 380 보다 좁은 기기에서 cover 가 사진 오른쪽을 잘라
   글자와 인물이 겹친다 → 380:230 비율로 폭을 따라가게 하고, 오른쪽 여백도 같은 비율(150/380)로.
   줄바꿈은 관리자가 넣은 <br> 에서만 (기기 폭과 무관하게 같은 줄 수). 글자가 넘치면 min-height:auto 로 카드가 늘어난다.
   aspect-ratio 미지원 브라우저는 기존 230 고정 */
.v2_best_card_unit {
    min-height: 230px;
    padding-right: 39.4737%;
    background-size: cover; background-position: center;
}
.v2_best_card_unit strong,
.v2_best_card_unit span { white-space: nowrap; }
@supports (aspect-ratio: 1) {
    .v2_best_card_unit { min-height: auto; aspect-ratio: 380 / 230; }
}

/* SNS
   시안 그룹(117 × 30)의 아이콘 고유 폭은 인스타 26.35 / 유튜브 32 / 블로그 25.3 이고
   시각 간격이 약 17 이다. 높이를 억지로 맞추지 않고 고유 크기 + 가운데 정렬로 둔다. */
.v2_sns {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
    margin-top: 18px;
}
.v2_sns > li + li { margin-left: 17px; }
/* 온탭 : 시안 177:581 Variant2 = 빨강. PC hover 와 같은 방식으로,
   빨강 아이콘(icon_on)을 배경으로 깔고 앞의 <img> 를 감춰 드러낸다. */
.v2_sns a {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    height: 26px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
}
.v2_sns img { display: block; }
.v2_sns a.is-on img { visibility: hidden; }

/* ------------------------------------------ 구매하기 · 고객지원 카드 --- */
.v2_panel_tit { margin-bottom: 12px; font-size: 18px; font-weight: 500; }

/* 시안 실측(2076:1877) : 카드 높이 120 / 패딩 20 / 제목-설명 간격 7 /
   설명 박스 높이 54 고정.
   설명을 텍스트 흐름에만 맡기면 아래에 여백이 남아 "위가 좁아" 보인다. */
.v2_cards > li + li { margin-top: 12px; }
.v2_cards > li > a {
    display: block; position: relative; overflow: hidden;
    min-height: 120px; padding: 20px 150px 20px 20px;
    background: #fff;
    border: 1px solid var(--chip-border-color); border-radius: 10px;
    -webkit-transition: border-color .2s; transition: border-color .2s;
}
/* D-46 : 온탭 시 테두리 빨강. CTA 버튼도 같이 강조된다 (PC hover 와 같다) */
.v2_cards > li > a.is-on { border-color: var(--primary-color); }
.v2_cards > li > a.is-on .v2_card_cta {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.v2_cards strong {
    display: block; margin-bottom: 7px;
    font-size: 18px; font-weight: 600; color: var(--primary-color);
}
.v2_card_desc { display: block; height: 54px; font-size: 14px; line-height: 18px; }
/* 이미지 크기·위치는 카드마다 달라 마크업에서 인라인으로 준다 ($v2_card 의 img_w / img_r / img_b) */
.v2_card_img { position: absolute; height: auto; }

/* 구매하기 : 카드 182 / 제목 21px / 설명 12px lh16
   시안(2076:1710)은 텍스트 박스를 패딩 박스보다 넓게 잡는다.
     제목 min-w-full + w-min-content  → 줄바꿈하지 않고 넘친다
     설명 w-[262px] 고정             → 컨텐츠 폭(155)을 넘어간다
   그래서 오른쪽 패딩으로 가두지 않고, 텍스트를 이미지 위(z-index)로 올린다. */
[data-menu="dealer"] .v2_cards > li > a { min-height: 182px; padding: 23px 24px; }
[data-menu="dealer"] .v2_cards strong { font-size: 21px; white-space: nowrap; }
[data-menu="dealer"] .v2_card_desc { width: 262px; font-size: 12px; line-height: 16px; }
[data-menu="dealer"] .v2_cards strong,
[data-menu="dealer"] .v2_card_desc,
[data-menu="dealer"] .v2_card_cta { position: relative; z-index: 1; }

.v2_card_cta {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    height: 32px; margin-top: 16px; padding: 0 13px 0 15px; gap: 5px;
    font-size: 13px; font-weight: 600; font-style: normal; color: #fff;
    background: var(--btn-gray-color);
    border: 1px solid var(--text-mute-color); border-radius: 144px;
    -webkit-transition: color .2s, background-color .2s, border-color .2s;
    transition: color .2s, background-color .2s, border-color .2s;
}
/* 글자-화살표 간격은 gap 5 가 갖는다 (PC 의 화살표 margin 5 와 같은 값) */
.v2_card_cta:after { content: " \2192"; }

/* 대량 구매 */
.v2_bulk { padding: 13px 2px 0; }
.v2_bulk strong { display: block; font-size: 15px; font-weight: 500; }
.v2_bulk > span { display: block; margin-top: 6px; font-size: 12px; color: var(--text-sub-color); }
.v2_bulk .v2_card_cta {
    height: auto; margin-top: 13px; padding: 0;
    font-size: 14px; font-weight: 400; color: var(--text-dark2-color);
    background: none; border: 0; border-radius: 0;
}
.v2_bulk .v2_card_cta.is-on { color: var(--primary-color); background: none; }

/* 지도에 없는 DB 항목 (자전거 정보 / 지난 제품보기 등) */
.v2_rows { margin-top: 12px; }
.v2_rows > li + li { margin-top: 8px; }
.v2_rows a {
    display: block; font-size: 14px; color: var(--text-sub2-color);
    -webkit-transition: color .2s; transition: color .2s;
}
.v2_rows a.is-on { color: var(--primary-color); }

/* 전체보기 텍스트 링크 */
.v2_sec_more { margin-top: 12px; }
.v2_sec_more a {
    font-size: 14px; color: var(--text-sub2-color);
    -webkit-transition: color .2s; transition: color .2s;
}
.v2_sec_more a:after { content: " \2192"; }
.v2_sec_more a.is-on { color: var(--primary-color); }

/* ============================================================================
   푸터 (F-1 ~ F-4)  — MO 실측 : get_design_context(2005:746) 의 2045:3378
   440 기준. 컨테이너 377 (=85.6818%)
   ============================================================================ */
.v2_footer { background: var(--card-alt-bg-color); border-top: 1px solid var(--gray-2-color); }
.v2_footer_inner { width: 85.6818%; margin: 0 auto; }

.v2_footer_top { padding: 20px 0 23px; }

/* 로고 89×20 + 사이트맵 3열, 간격 27 */
.v2_f_brand {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
.v2_f_logo { width: 89px; height: 20px; margin-right: 27px; -ms-flex-negative: 0; flex-shrink: 0; }
.v2_f_logo img { width: 100%; height: 100%; object-fit: contain; }

.v2_sitemap { display: -webkit-box; display: -ms-flexbox; display: flex; }
.v2_sitemap_col { width: 77px; }
.v2_sitemap_col + .v2_sitemap_col { margin-left: 7px; }
.v2_sitemap_col > strong {
    display: block; height: 21px;
    font-size: 11px; font-weight: 500; line-height: 21px;
}
.v2_sitemap_col a {
    display: block; height: 21px; font-size: 10px; line-height: 21px;
    -webkit-transition: color .2s; transition: color .2s;
}
.v2_sitemap_col a.is-on { color: var(--primary-color); }

/* 고객센터 */
.v2_f_center { margin-top: 23px; }
.v2_f_center > strong { display: block; font-size: 15px; font-weight: 500; line-height: 21px; }
.v2_f_center > strong a { color: inherit; }
.v2_f_time { display: block; font-size: 13px; line-height: 21px; }
.v2_f_center > p { margin-top: 4px; font-size: 11px; line-height: 16px; }


/* ------------------------------------------------------------ 하단 --- */
.v2_footer_bottom { padding: 18px 0 20px; border-top: 1px solid var(--gray-2-color); }

.v2_f_biz_row { font-size: 0; }
.v2_f_biz_row + .v2_f_biz_row { margin-top: 5px; }
.v2_f_biz_row > span {
    display: inline-block; position: relative;
    padding-right: 8px; margin-right: 7px;
    font-size: 11px; line-height: 17px; color: var(--text-sub2-color);
}
.v2_f_biz_row > span:last-child { padding-right: 0; margin-right: 0; }
.v2_f_biz_row > span:not(:last-child):after {
    content: ''; position: absolute; top: 50%; right: 0;
    width: 1px; height: 9px; margin-top: -4.5px;
    background: var(--gray-3-color);
}
.v2_f_biz_row em { font-style: normal; font-weight: 500; }

/* MO 시안은 패밀리 사이트가 사업자 정보와 정책 링크 사이에 온다 */
.v2_f_family { margin-top: 15px; }
.v2_f_family_btn {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    font-size: 10px; font-weight: 600; color: var(--text-sub2-color);
}
.v2_ico_plus { display: block; width: 11px; height: 11px; margin-right: 4px; line-height: 0; }
.v2_ico_plus img { display: block; width: 100%; height: 100%; }
.v2_f_family_list { margin-top: 8px; }
.v2_f_family_list li + li { margin-top: 8px; }
.v2_f_family_list a {
    margin-left: 13px;
    font-size: 11px; color: var(--text-sub2-color);
    -webkit-transition: color .2s; transition: color .2s;
}
.v2_f_family_list a.is-on { color: var(--primary-color); }

.v2_f_policy { margin-top: 15px; font-size: 0; }
.v2_f_policy li { display: inline-block; position: relative; padding-right: 8px; margin-right: 7px; }
.v2_f_policy li:last-child { padding-right: 0; margin-right: 0; }
.v2_f_policy li:not(:last-child):after {
    content: ''; position: absolute; top: 50%; right: 0;
    width: 1px; height: 9px; margin-top: -4.5px;
    background: var(--gray-3-color);
}
.v2_f_policy a {
    font-size: 10px; color: var(--text-sub2-color);
    -webkit-transition: color .2s; transition: color .2s;
}
.v2_f_policy a.is-on { color: var(--primary-color); }
.v2_f_copy { margin-top: 5px; font-size: 10px; font-weight: 200; color: var(--text-sub2-color); }

/* 언어 선택 157×24 */
.v2_f_lang { position: relative; width: 157px; margin-top: 15px; }
.v2_f_lang_btn {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    width: 100%; height: 24px; padding: 0 16px 0 7px;
    font-size: 12px; font-weight: 600; color: var(--btn-gray-color);
    border: 1px solid var(--btn-gray-color); border-radius: 3px;
}
.v2_f_lang_btn > span { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: left; }
.v2_ico_globe { display: block; width: 14px; height: 14px; margin-right: 4px; line-height: 0; }
.v2_ico_globe img { display: block; width: 100%; height: 100%; }
.v2_ico_caret { display: block; width: 12px; height: 8px; line-height: 0; }
.v2_ico_caret img { display: block; width: 100%; height: 100%; }

.v2_f_lang_list {
    position: absolute; left: 0; bottom: 100%; z-index: 5;
    width: 100%; margin-bottom: 4px;
    background: #fff;
    border: 1px solid var(--btn-gray-color); border-radius: 3px;
}
.v2_f_lang_list a {
    display: block; padding: 7px; font-size: 12px; color: var(--text-sub2-color);
    -webkit-transition: color .2s, background-color .2s; transition: color .2s, background-color .2s;
}
.v2_f_lang_list a.is-on { color: var(--primary-color); background: var(--gray-1-color); }

/* 상단 이동 버튼 (G4) */
.v2_btn_top {
    display: none;
    position: fixed; right: 4%; bottom: 20px; z-index: 80;
    width: 42px; height: 42px;
    font-size: 10px; font-weight: 600; line-height: 42px; text-align: center;
    color: #ffffff;
    background: var(--sub-red-color);
    border-radius: 50%;   /* PC 와 같이 테두리 없음 */
}
.v2_btn_top.is-show { display: block; }
/* 상단 이동 버튼은 페이지 이동이 아니라 스크롤이라 온탭 표시를 :active 로 준다.
   배경형이 되면서 글자색 대신 배경을 바꾼다 */
.v2_btn_top:active { background: var(--primary-color); }
/* 서브페이지 v1 a:link/a:active 되받기 — 대리점 찾기와 같은 문제. 기본·온탭 모두 흰 글자 */
.v2_sub .v2_btn_top:link,
.v2_sub .v2_btn_top:visited,
.v2_sub .v2_btn_top:active { color: #ffffff; }