@charset "utf-8";
/* ============================================================================
   v2 pc / layout — GNB 바 · 전폭 메가메뉴 · 푸터
   요구사항 : docs/requirements-260904.md (G-6 / H1~H5 / D-9 / D-31)

   ※ 치수 출처 — PC 실측 완료
     - GNB 바        : get_design_context(105:1937) + 렌더 픽셀 측정(105:1929)
     - 자전거 패널    : get_design_context(105:1275)
     - 구매하기·고객지원 패널 : 아직 PC 실측 전 (MO 값 기반). 확인 후 조정 필요.
   ============================================================================ */

/* --------------------------------------------------- 최상단 띠배너 --- */
/* 한줄공지. 전폭 30 / 글자 13 / 가운데 정렬 / 제목만 굵게.
   배경색·글자색은 관리자 지정값이라 header.php 가 인라인으로 넣는다. 여기엔 두지 않는다.
   GNB 바보다 위에 깔린다 — 바가 is-hide 로 올라오면 이 배너 뒤로 숨는다. */
.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 20px;
}
.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 — 굵기 차이는 기존 규칙 그대로다 */
.v2_hanju_notice .swiper-slide a span { display: inline-block; padding-right: 10px; font-weight: 700; }

/* ------------------------------------------------------------- GNB 바 --- */
.v2_head { position: relative; z-index: 100; }
/* 본문에서 전역 CSS 를 따로 부르는 페이지(팬텀 : base_26y · 부트스트랩 · 템플릿 main.css)가 뒤에 로드돼도
   헤더 글꼴·줄높이·로고 h1 크기가 바뀌지 않게 헤더 안에서 명시한다 */
.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; }

.v2_gnb_bar {
    position: fixed; top: 0; left: 0; z-index: 100;
    width: 100%;
    background: #fff;
    /* 테두리 없음. 바 높이가 정확히 60 이라 본문 보정(padding-top 60)과 맞는다 */
    -webkit-transition: -webkit-transform .3s ease; transition: transform .3s ease;
}
/* 띠배너가 있는 페이지에서만 30 아래로 내려간다 */
.v2_head.is-notice .v2_gnb_bar { top: 30px; }
.v2_gnb_bar.is-hide { -webkit-transform: translateY(-100%); transform: translateY(-100%); }

.v2_gnb_inner {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    width: 1135px; height: 60px; margin: 0 auto;
}

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

/* 1depth : 항목 105 × 5 = 525. 로고와의 간격 60. */
.v2_gnb_nav {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    margin-left: 60px;
}
.v2_gnb_nav_item { position: relative; }
.v2_gnb_nav_link {
    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: 105px; height: 60px;
    font-size: 17px; font-weight: 600; color: var(--dark-color);
    -webkit-transition: color .2s; transition: color .2s;
}
/* 활성 : 텍스트 빨강 + 하단 언더바 (D-31).
   시안 실측 105:1915 — 높이 4.788, 폭 122(항목 전체), 항목 맨 아래에 붙는다. */
.v2_gnb_nav_item.is-active .v2_gnb_nav_link,
.v2_gnb_nav_link:hover { color: var(--primary-color); }
.v2_gnb_nav_item:after {
    content: ''; display: block; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 5px;
    background: var(--primary-color);
    opacity: 0; -webkit-transition: opacity .2s; transition: opacity .2s;
}
/* all ways 는 패널이 없어 is-active 가 붙지 않는다.
   hover 만으로도 언더바가 나오게 해서 다른 메뉴와 동작을 맞춘다. */
.v2_gnb_nav_item.is-active:after,
.v2_gnb_nav_item:hover:after { opacity: 1; }

/* 우측 유틸 : 검색 200×28 + 대리점 찾기 버튼 (내부 간격 15)
   margin-left 는 auto 다. 지정값 175 를 그대로 넣으면
     로고 70 + 60 + 메뉴 525 + 175 + 검색 200 + 15 + 버튼 ≈92 ≈ 1137 로 컨테이너(1135)를 넘긴다.
   auto 는 같은 자리(실측 ≈172.5)에 붙이면서 버튼 글자 길이가 바뀌어도 넘치지 않는다. */
.v2_gnb_util {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    margin-left: auto;
}
.v2_gnb_search {
    width: 200px; height: 28px;
    border: 1px solid var(--input-border-color); border-radius: 5px;
    background: rgba(255, 255, 255, .2);
}
/* 좌측 여백 7 은 input 이 갖는다. 폼 왼쪽 패딩을 0 으로 내려야 합산되지 않는다.
   오른쪽 4 는 돋보기 버튼과의 간격 */
.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 4px 0 0;
}
/* .v2_head 를 붙여 base_26y.css input[type~="text"](패딩 20 · 테두리)보다 우선 */
.v2_head .v2_search_form input {
    -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
    min-width: 0; height: 100%; padding-left: 7px;
    font-size: 13px; color: var(--dark-color); background: none; border: 0; outline: none;
}
/* 아이콘 박스는 21×21 이지만 실제 돋보기 글리프는 15×15 다 (시안 105:1929 실측) */
.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: 21px; height: 21px;
}
.v2_btn_search img { display: block; width: 15px; height: 15px; }

/* 대리점 찾기 : 배경 있는 버튼형. 높이 28 은 옆 검색창과 맞춘 값이다.
   MO 는 핀 아이콘을 쓴다 (m_layout.css) */
.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; margin-left: 15px;
    border-radius: 5px; background-color: #F55B5C;
    font-size: 13px; font-weight: 400; color: #ffffff;
    white-space: nowrap;
    -webkit-transition: background-color .2s; transition: background-color .2s;
}
/* 배경형이라 hover 는 글자색이 아니라 배경을 바꾼다 */
.v2_btn_dealer:hover { background-color: var(--primary-color); color: #ffffff; }
/* 서브페이지는 v1 base.css 의 a:link/a:hover(0,1,1) 가 .v2_btn_dealer(0,1,0) 의 흰 글자를 덮는다 → 되받기 */
.v2_sub .v2_btn_dealer:link,
.v2_sub .v2_btn_dealer:visited,
.v2_sub .v2_btn_dealer:hover { color: #ffffff; }

/* all ways ↗ : hover 에서만 보인다.
   1depth 가 width 122 + 가운데정렬이라 display 로 지우면 글자가 흔들린다. opacity 로 숨긴다.
   hover 에서 텍스트가 빨강이 되므로 _on 자산만 쓴다 (검정은 MO 아코디언용).
   <img> 는 CSS 로 색을 못 바꿔 배경으로 깐다 — 마스크·필터는 IE 에서 아이콘이 사라진다. */
.v2_ico_arrow {
    display: block; width: 13px; height: 13px; margin-left: 5px;
    background: url('../../images/ico/arrow_up_right_on.svg') no-repeat center;
    background-size: 11px 11px;
    opacity: 0;
    -webkit-transition: opacity .2s; transition: opacity .2s;
}
.v2_ico_arrow img { display: none; }
.v2_gnb_nav_link:hover .v2_ico_arrow { opacity: 1; }

/* 바가 fixed 이므로 본문을 밀어준다. 띠배너가 있으면 30 을 더 민다 */
.v2_head + #container { padding-top: 60px; }
.v2_head.is-notice + #container { padding-top: 90px; }

/* ---- 서브페이지 프리뷰 전용 (docs/v2-subpage-preview-260917.md §4-1) ----
   서브는 v1 CSS 를 먼저 깔고 그 위에 이 파일이 온다.
   v1 layout.css 의 id 규칙(#header / #footer / #container.fix)은 명시도 1,0,0 이라
   v2 의 클래스 규칙(0,1,0)을 이긴다. id+class 조합으로만 되받을 수 있다.
   v1 CSS 는 한 줄도 고치지 않는다 — 운영 페이지가 같은 파일을 쓴다.

   전부 .v2_sub 안에 가둔다. 이 클래스는 서브 프리뷰에서만 #wrap 에 붙는다.
   메인까지 걸리면 .v2_main 같은 클래스 규칙(0,1,0)이 져서 메인이 깨진다. */
.v2_sub #header.v2_head { min-height: 0; }
.v2_sub #footer.v2_footer { background: var(--card-alt-bg-color); }
/* 본문을 GNB 바 높이만큼 내린다. v2 바는 60, 띠배너가 있으면 90 이다.
   위 min-height:0 으로 헤더가 자리를 차지하지 않고 .v2_gnb_bar 는 position:fixed 라,
   이 보정이 없으면 본문 상단 60~90px 이 바 아래로 들어간다.

   2026-09-22 수정 — 아래 규칙이 한 번도 걸리지 않고 있었다 (자전거 리스트에서 발견).
     (구) .v2_sub .v2_head + #container.fix
     1) 인접 선택자 `+` : 뷰가 #container 앞에 <script> 를 출력한다. 스크립트도 형제 요소라
        #header 와 #container 가 인접이 아니다. v1 뷰 대부분이 스크립트를 먼저 쓴다.
     2) .fix 클래스 : #container.fix 를 요구하는데 .fix 를 붙이는 뷰도 JS 도 없다.
        (v1 은 #container.fix 에 padding-top:100px 를 주지만 그 역시 쓰이지 않는다)
   일반 형제(~)로 바꾸고 .fix 요구를 뺐다. 서브 프리뷰 전 페이지에 적용된다.

   ※ 모바일(m_layout.css)에는 같은 규칙을 넣지 않는다.
     v1 이 .sub_container_wrap{position:relative; top:52px} 으로 이미 헤더만큼 내려 놓았다.
     여기서 #container 에 padding-top 을 더하면 두 번 내려간다.
   ※ 이 파일은 v2 프리뷰에서만 로드된다. 운영(v1) 페이지에는 영향이 없다. */
.v2_sub .v2_head ~ #container { padding-top: 60px; }
.v2_sub .v2_head.is-notice ~ #container { padding-top: 90px; }
/* 서브페이지 GNB 바 하단 선 (메인 제외). 바가 61 이 되어 본문 상단 1px 를 덮지만 서브 본문은 위 여백이 있어 드러나지 않는다 */
.v2_sub .v2_gnb_bar { border-bottom: 1px solid var(--chip-border-color); }

/* v1 base.css:57 의 `button span { display: none; }` 되받기.
   v1 은 버튼 안 span 을 a11y 숨김용으로만 써서 전역으로 감춘다.
   v2 푸터의 "패밀리 사이트" · "한국어" 는 실제로 보여야 하는 글자다.
   .hiddens 는 제외한다 — 스크린리더 전용이라 계속 숨겨야 한다. */
.v2_sub .v2_head button span:not(.hiddens),
.v2_sub .v2_footer button span:not(.hiddens) { display: inline-block; }

/* v2 base.css:54 의 전역 `* { box-sizing: border-box }` 되받기.
   v1 본문은 content-box 전제로 만들어졌다. border-box 가 씌워지면
   width 와 padding 을 같이 가진 요소가 padding 만큼 좁아진다
   (introduction/page?load=buy 의 .purch_prodts, customer/faq_list 의 .qa_accor 등 줄바꿈).
   #container 안에서만 되돌린다. GNB·푸터는 밖이라 border-box 를 유지한다.
   :where() 로 명시도를 0 으로 낮춘다. v1 이 개별로 지정한 box-sizing:border-box
   (contents.css 의 .prodt_tip 등)는 그대로 이겨야 하기 때문이다.
   ※ :where() 미지원 브라우저(IE)에서는 규칙이 무시되고 현 증상이 남는다.
     프리뷰 확인용이고 운영에는 로드되지 않는다. */
:where(.v2_sub) :where(#container),
:where(.v2_sub) :where(#container) * {
    -webkit-box-sizing: content-box; box-sizing: content-box;
}
/* ★ 폼 컨트롤은 제외한다.
   브라우저 기본 스타일시트가 select · button · input 에 border-box 를 준다.
   v1 은 box-sizing 을 선언하지 않아 그 기본값을 그대로 쓰는데,
   위 규칙이 content-box 를 강제하면 테두리·안쪽여백만큼 커져 버린다.
     select : height 44 + padding 24 + border 2 = 70  (v1 은 44)
     button : .btn_calend 40 + border 1 = 41 → 입력칸 490 과 합쳐 531 > 530
   revert 로 브라우저 기본값까지 되돌려 v1 과 같게 만든다.
   v1 이 따로 border-box 를 준 곳(.qa_formTxt li input[type="text"] 등)은 명시도로 이긴다. */
: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 의 폼 리셋 되받기.
     ul, ol, li, form, … button, input, textarea, select, figure {
         margin:0; padding:0; border:0; font-size:100%; font:inherit; … }
   v1 은 input 에 padding 4px 5px 1px 과 폰트를 직접 준다. v2 가 나중에 로드되며
   이 값을 0 으로 밀어 인풋 간격·select 크기가 틀어진다
   (customer/as_center · refined_write 인풋, product_lists 의 select).

   아래는 v1 base.css 66~90 행의 값을 그대로 옮긴 것이다. 새 값이 아니다.
   :where() 로 명시도를 요소 선택자 수준(0,0,1)에 맞춰 두었으므로
   v1 의 input[type~="text"] 같은 더 구체적인 규칙은 그대로 이긴다.
   GNB 검색창은 #container 밖이라 v2 리셋을 유지한다.
   ⚠ 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;
}
/* v1 은 button 에 font 를 강제하지 않는다. v2 의 font:inherit 만 걷어낸다 */
:where(.v2_sub) :where(#container) button {
    font-family: 'ng', Malgun, '맑은 고딕', Dotum, '돋움', sans-serif;
}

/* v2 base.css:51 의 전역 타이포 리셋 되받기 — 여기가 레이아웃에 제일 크게 영향을 준다.
     v1 base.css:29 : vertical-align: top  / line-height: 1.2 / "Noto Sans KR" / letter-spacing: 0
     v2 base.css:51 : vertical-align: baseline / font: inherit / 'Pretendard' 우선

   vertical-align 이 top → baseline 으로 바뀌면 inline-block 요소 아래에 글꼴 디센더 만큼
   빈 칸이 생기고 세로 위치가 밀린다. 폭이 딱 맞게 짜인 2단 배치가 그대로 무너진다
   (as_center · refined_write 의 .qa_formTxt li.half_lst + .flotR).
   글꼴이 바뀌면 inline-block 사이 공백 문자 폭도 달라져 같은 증상이 난다.

   #container 안에서만 v1 값으로 되돌린다. 값은 v1 base.css 29~53 행 그대로다.
   ⚠ v1 base.css 를 고치면 이 블록도 같이 맞춘다. */
: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)에 진다.
   즉 li · div · span · label 처럼 정작 배치에 관여하는 요소들이 계속 baseline 으로 남는다.
   (구매일자 칸이 옆 칸보다 내려가 보이던 원인 — inline-block 두 개가 baseline 정렬되면
    안쪽 내용에 따라 서로 다른 높이에서 맞춰진다.)
   v2 가 건드리는 것과 같은 요소 목록으로 되받아야 뒤에 오는 이 파일이 이긴다.
   input · select · textarea 는 여기 넣지 않는다 — 아래에서 revert 로 따로 처리한다. */
: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;
}
/* v1 이 개별로 다르게 잡아둔 정렬은 그대로 둔다 (base.css 55~57 행) */
: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 전역 리셋 목록에 들어있지 않다.
   v1 base.css:29 의 목록은 div · span · ul · li · button … 까지만이고 이 셋은 빠져 있어서,
   글자 크기와 줄높이가 브라우저 기본값(대개 13.33px / normal)으로 남는다.
   반면 v2 base.css:51 은 이 셋을 목록에 넣고 font:inherit 를 걸어 16px / 1.2 로 올려버린다.
   그 결과 폭이 auto 인 요소가 v1 보다 넓어지고 줄높이가 달라진다 :
     - 이메일 칸의 select 가 넓어져 다음 줄로 밀린다
     - 달력 버튼과 입력칸의 세로 기준선이 어긋나 버튼이 칸 밖으로 나온 것처럼 보인다
   revert 로 브라우저 기본값까지 되돌려 v1 과 같은 상태로 맞춘다.
   v1 이 따로 지정한 값(.qa_formTxt li input[type="text"]{font-size:14px} 등)은
   명시도가 높아 그대로 이긴다. */
:where(.v2_sub) :where(#container) input,
:where(.v2_sub) :where(#container) select,
:where(.v2_sub) :where(#container) textarea {
    font-size: revert; line-height: revert;
}

/* -------------------------------------------------------- 메가메뉴 --- */
/* 시안 105:1277 : 전폭 바가 아니라 1351.4 × 533.3 라운드 카드다.
   radius 25 / 테두리 0.3px #e41f20 / 흰 배경.
   H1 hover 100ms 후 열림 / H2 이탈 200ms 후 닫힘 / H3 슬라이드 250ms */
/* 패널은 GNB 바에 붙인다. 하단 20 은 그림자 자리다 (overflow:hidden 이 걸려 있다) */
.v2_mega {
    display: none; overflow: hidden;
    position: absolute; top: 100%; left: 0;
    width: 100%; padding: 0 0 20px;
}
/* 폭 1356 : 시안 값은 1352 였으나 산수가 4px 안 맞는다.
     자전거 패널 = 좌우 padding 50 + 카드 322×3 + 카드간격 20×2 + BEST열 300(260+40) = 1356
     1352 로 두면 flex-shrink 가 걸려 카드가 322 → 320.67 로 눌리고,
     글자 폭이 152 → 150.67 이 되어 부제 줄바꿈 위치가 시안과 달라진다.
     다른 패널(용품·구매하기·고객지원)은 % / auto 폭이라 4px 증가에 영향받지 않는다. */
.v2_mega_inner {
    position: relative;
    width: 1356px; margin: 0 auto; padding: 24px 25px 28px;
    background: #fff;
    border: 1px solid var(--primary-color); border-radius: 25px;
    /* 시안 4184:811 실측 : drop shadow x0 y4 blur2 rgba(64,64,67,.15).
       그림자 색은 팔레트 값이 아니라 시안 지정값 그대로다. */
    -webkit-box-shadow: 0 4px 2px rgba(64, 64, 67, .15); box-shadow: 0 4px 2px rgba(64, 64, 67, .15);
}

/* H4 : 패널이 열리면 깔리는 투명 레이어. 회색 딤은 뺐지만 요소는 남긴다 —
   main_v2.js 가 여기 click 으로 "바깥 클릭 닫기"를 건다. */
.v2_gnb_dim {
    display: none;
    position: fixed; top: 60px; left: 0; z-index: 90;
    width: 100%; height: 100%;
    background: transparent;
}
.v2_head.is-notice .v2_gnb_dim { top: 90px; }
.v2_gnb_dim.is-show { display: block; }

/* ---- 자전거 패널 : 322 × 3열(gap 20) + 우측 BEST 260 + 하단 추천 콘텐츠 ---- */
.v2_mega_bicycle {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    padding-right: 300px; /* BEST 260 + 간격 40 */
}
/* 3열은 같은 높이로 늘어난다. 키워드 열은 내용이 짧지만 SNS 를 바닥에 붙여
   세 열의 하단이 같은 선에서 끝난다 (시안 105:1715). */
.v2_mega_bicycle .v2_sec_style,
.v2_mega_bicycle .v2_sec_brand,
.v2_mega_bicycle .v2_sec_keyword {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    /* 327×3 + 간격 20×2 = 1021. 안쪽 폭 1356 − 2(테두리) − 25 − 300 = 1029 로 8 여유.
       더 키우면 flex-wrap 때문에 키워드 열이 다음 줄로 떨어진다. */
    width: 327px; margin-right: 20px;
}
.v2_mega_bicycle .v2_sec_keyword { margin-right: 0; }

/* 헤더와 본문 사이 간격이 섹션마다 다르다 (종류별 5 / 브랜드·키워드 28) */
.v2_mega_bicycle .v2_sec_style .v2_sec_head { margin-bottom: 5px; }
.v2_mega_bicycle .v2_sec_brand .v2_sec_head,
.v2_mega_bicycle .v2_sec_keyword .v2_sec_head { margin-bottom: 28px; }

/* 찾기 영역과 추천 콘텐츠 사이 구분선 (시안 105:1412) */
.v2_mega_bicycle .v2_sec_rec {
    width: 100%; margin-top: 24px; padding-top: 15px;
    border-top: 1px solid var(--gray-2-color);
}
/* BEST 260 × 483 고정. 찾기 영역과 같은 높이에서 시작한다. */
.v2_mega_bicycle .v2_sec_best {
    position: absolute; top: 24px; right: 25px;
    width: 260px;
}

/* ---- 용품 패널 : 그룹 폭 가변 + 우측 BEST 카드(353×200) ---- */
.v2_mega_unit { padding-right: 393px; }
.v2_mega_unit .v2_sec_unit_best {
    position: absolute; top: 24px; right: 25px;
    width: 353px;
}
/* 오버레이 없이 원본 이미지 위에 검은 텍스트를 올린다. */
.v2_unit_best_card {
    display: block; position: relative; overflow: hidden;
    height: 200px; padding: 22px 20px 20px 24px;
    color: var(--dark-color);
    background-repeat: no-repeat;
    background-size: cover; background-position: center;
    border-radius: 10px;
}
/* 마우스 오버 시 배경 이미지를 살짝 확대한다. (이미지 :after 0 → 텍스트 2) */
.v2_unit_best_card:after {
    content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: inherit; background-position: inherit;
    -webkit-transition: -webkit-transform .4s ease; transition: transform .4s ease;
}
.v2_unit_best_card:hover:after {
    -webkit-transform: scale(1.06); transform: scale(1.06);
}
.v2_unit_best_card > * { position: relative; z-index: 2; }
.v2_unit_best_card strong { display: block; margin-bottom: 12px; font-size: 22px; font-weight: 600; line-height: 1.3; }
.v2_unit_best_card span { display: block; font-size: 13px; line-height: 18px; }
.v2_unit_best_card:hover .v2_badge { background: var(--primary-color); }

/* 시안 147:149 : 그룹은 4등분이 아니라 내용만큼만 차지한다.
   칩은 폭 160 고정에 세로로 쌓이고, 5개를 넘으면 다음 열로 넘어간다. */
.v2_mega_unit .v2_sec_unit {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
.v2_mega_unit .v2_grp { width: auto; margin-right: 30px; }
.v2_mega_unit .v2_grp:last-child { margin-right: 0; }
.v2_mega_unit .v2_grp + .v2_grp { margin-top: 0; }
/* 용품 칩 배치는 기본 칩 규칙 아래(파일 하단)에 모아 뒀다 */

/* ---- 구매하기 : 2카드 가로 + 대량구매 ---- */
.v2_mega_dealer .v2_cards {
    display: -webkit-box; display: -ms-flexbox; display: flex;
}
.v2_mega_dealer .v2_cards > li { width: 50%; }
.v2_mega_dealer .v2_cards > li + li { margin: 0 0 0 20px; }

/* ---- 고객지원 : 4카드 가로 ---- */
.v2_mega_customer .v2_cards {
    display: -webkit-box; display: -ms-flexbox; display: flex;
}
.v2_mega_customer .v2_cards > li { width: 25%; }
.v2_mega_customer .v2_cards > li + li { margin: 0 0 0 16px; }

/* ---------------------------------------------------- 패널 내부 공통 --- */
/* 섹션 헤더 : 제목 SemiBold 18 #e41f20 + 부제 Regular 13 #71797f, 간격 12 */
.v2_sec_head {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    margin-bottom: 14px;
}
.v2_sec_head strong { font-size: 18px; font-weight: 600; color: var(--primary-color); white-space: nowrap; }
.v2_sec_head span { margin-left: 12px; font-size: 13px; color: var(--text-sub-color); }

/* 그룹 : 제목 SemiBold 13 #676b72, 제목-칩 간격 8, 그룹 간격 18 */
.v2_grp + .v2_grp { margin-top: 18px; }
.v2_grp_tit {
    display: block; margin-top: 3px; margin-bottom: 8px;
    font-size: 13px; font-weight: 600; font-style: normal; color: var(--text-sub2-color);
}
.v2_grp_tit.is-main { font-size: 16px; font-weight: 500; color: var(--primary-color); }
.v2_grp_tit a { display: inline-block; }

/* 칩 : 100 × 28 고정, 간격 10 (시안 컴포넌트 68:49 는 높이 25 / 글자 12) */
.v2_chips {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: -5px;
}
.v2_chips > li { padding: 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;
    width: 100px; height: 28px; padding: 5px;
    font-size: 13px; font-weight: 500; text-align: center; white-space: nowrap;
    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;
}
/* hover : 시안 칩 컴포넌트 68:50 Variant2 = 배경 #F55B5C 채움 + 흰 글씨 */
.v2_chips > li > a:hover {
    color: #fff;
    background: var(--sub-red-color);
    border-color: var(--sub-red-color);
}

/* 용품 패널 칩 : 세로로 쌓다가 5개를 넘으면 다음 열로 넘어간다 (시안 147:149).
   폭도 공통 100px 이 아니라 열 폭 160 을 채운다. 기본 규칙 뒤에 둬야 읽기 쉽다. */
.v2_mega_unit .v2_chips {
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    /* li = 칩 28 + 상하 padding 10 = 38. 5개 = 190 이라 여유를 둬 195.
       칩 높이를 바꾸면 이 값도 같이 고친다. 모자라면 4개에서 열이 넘어간다. */
    max-height: 195px;
}
.v2_mega_unit .v2_chips > li { width: 170px; }
.v2_mega_unit .v2_chips > li > a { width: 100%; }

/* 키워드 칩 : 폭 가변, 간격 8~10 */
.v2_chips_key { margin: -4px; }
.v2_chips_key > li { width: auto; padding: 4px; }
.v2_chips_key > li > a { width: auto; height: auto; padding: 6px 9px 6px 7px; }

/* 키워드 전체보기 : Regular 14 #3b4145 */
.v2_sec_more { margin-top: 14px; }
.v2_sec_more a { font-size: 14px; color: var(--text-dark2-color); }
.v2_sec_more a:after { content: " \2192"; }
.v2_sec_more a:hover { color: var(--primary-color); }

/* 브랜드 카드 322 × 78 / 간격 11 */
.v2_brand_list > li + li { margin-top: 11px; }
.v2_brand_list > li > a {
    display: block; position: relative; overflow: hidden;
    height: 78px; padding: 14px 23px 23px 20px;
    background-color: var(--card-bg-color);
    background-repeat: no-repeat; background-position: center; background-size: cover;
    border-radius: 5px;
}
/* 마우스 오버 시 배경 이미지를 살짝 확대한다.
   배경 URL 은 마크업 인라인 스타일로 들어오므로 background-image:inherit 로 물려받아
   가상요소를 transform 한다. background-size 는 cover 에서 보간되지 않아 쓸 수 없다. */
.v2_brand_list > li > a:before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
    background-image: inherit;
    background-repeat: no-repeat; background-position: center; background-size: cover;
    -webkit-transition: -webkit-transform .4s ease; transition: transform .4s ease;
}
.v2_brand_list > li > a:hover:before {
    -webkit-transform: scale(1.06); transform: scale(1.06);
}
.v2_brand_list strong,
.v2_brand_logo,
.v2_brand_desc { position: relative; z-index: 1; }
.v2_brand_list strong { display: block; font-size: 16px; font-weight: 600; line-height: 19px; }
.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: 13px; font-weight: 500; }

/* SNS : PC 는 키워드 열 안, 오른쪽 하단 (시안 105:1400) */
.v2_mega_bicycle .v2_sec_keyword {
    -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
}
.v2_mega_bicycle .v2_sec_keyword .v2_sns { margin-top: auto; padding-top: 18px; }
.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: 13px; }
/* hover : 시안 177:581 Variant2 = #E41F20 불투명.
   빨강 아이콘을 배경으로 깔고 마우스를 올리면 앞의 <img> 를 감춰 드러낸다. */
.v2_sns a {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    height: 23px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
}
.v2_sns img { display: block; height: 100%; width: auto; }
.v2_sns a:hover img { visibility: hidden; }
/* 유튜브(2번째)만 2px 낮춘다. SVG 비율이 달라(32.00×22.22) 같은 높이 23 에서 혼자 커 보인다.
   목록 순서는 header.php 의 v2_sns_list() 가 고정한다 — 인스타 / 유튜브 / 블로그 */
.v2_sns > li:nth-child(2) a { height: 21px; }

/* 추천 콘텐츠 : 제목 Bold 17 #e41f20, 배너 322 × 114 가로 3열(gap 20) */
.v2_sec_rec .v2_sec_head { margin-bottom: 8px; }
.v2_sec_rec .v2_sec_head strong { font-size: 17px; font-weight: 700; }
/* 328×3 + 간격 20×2 = 1024. 안쪽 폭 1029 로 5 여유.
   남는 5 가 카드 사이로 흩어지지 않게 flex-start 를 명시한다. */
.v2_rec_list {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
}
.v2_rec_list > li { width: 328px; }
.v2_rec_list > li + li { margin-left: 20px; }
/* 이미지는 카드를 꽉 채우고 넘치는 축만 잘라낸다 (시안 105:1853) */
.v2_rec_list > li > a {
    display: block; position: relative; overflow: hidden;
    height: 114px;
    /* 오른쪽 6px : 시안의 텍스트 노드 폭이 177.58px 다 (피그마 12:627 의 부제 노드).
         138 + 177.58 = 315.58 → 카드 322 기준 오른쪽에 6.4px 밖에 안 남는다.
         즉 시안은 오른쪽 여백 30px 을 지키지 않고 글자가 그 위로 넘어간다.
         (실제로 KBO 배너는 부제가 카드 왼쪽에서 170px 까지 나가 여백이 12px 뿐이다)
       처음엔 글자가 짧은 팬텀 배너만 보고 오른쪽도 30px 이라고 읽었는데, 그러면
       글자칸이 152px 이 되어 KBO 배너 부제(170px)가 줄바꿈된다. 텍스트 노드 폭에 맞춘다.
       → 글자칸 = 328 - 2(border) - 130 - 6 = 190px */
    padding: 30px 6px 30px 130px;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover; background-position: center center;
    border: 1px solid var(--line-soft-color); border-radius: 10px;
}
/* 마우스 오버 시 배경 이미지를 살짝 확대한다 (BEST·브랜드 카드와 같은 방식) */
.v2_rec_list > li > a:before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: inherit; background-position: inherit;
    -webkit-transition: -webkit-transform .4s ease; transition: transform .4s ease;
}
.v2_rec_list > li > a:hover:before {
    -webkit-transform: scale(1.06); transform: scale(1.06);
}
.v2_rec_list > li > a > * { position: relative; z-index: 1; }
/* 피그마 12:627 (2026-09-05 조회) 확정값 — 아래가 시안 그대로다. 임의로 줄이지 말 것.
     제목 Pretendard SemiBold 14.5px / line-height normal / 아래 간격 6px
     부제 Pretendard Regular   12px  / line-height 15px
     카드 padding 30 30 30 138 · radius 10 · border #E6ECF0 도 전부 일치 확인.
   한때 제목이 2줄로 넘쳐 12/10 으로 낮췄었는데, 시안 값이 맞고 원인은 폰트였다.
   글자칸이 152px 뿐이라 Pretendard 로 렌더돼야 제목이 137px 로 한 줄에 들어간다.
   Pretendard 가 로드되지 않아 Noto Sans KR 로 대체되면 같은 문구가 넓어져 2줄이 된다.
   → 줄바꿈이 이상하면 폰트 크기가 아니라 base.css 의 font-family 적용 여부를 먼저 볼 것. */
/* 아래는 시안값(14.5 / 12)에서 키운 값이다. 카드 폭·패딩이 넓어져 글자칸이 190 이 됐다. */
.v2_rec_list strong { display: block; margin-bottom: 6px; font-size: 15.5px; font-weight: 600; }
.v2_rec_list span { display: block; font-size: 13px; line-height: 15px; }

/* BEST 배너 260 × 515 (시안 73:117 은 483).
   .v2_sec_best 가 absolute 라 이 높이는 패널을 밀지 않는다. 패널보다 길면 잘린다. */
.v2_best_card {
    display: block; position: relative; overflow: hidden;
    height: 515px;
    padding: 14px 139px 331px 16px;
    color: var(--dark-color);
    background-repeat: no-repeat;
    background-size: cover; background-position: center;
    border-radius: 10px;
}
/* 마우스 오버 시 배경 이미지를 살짝 확대한다 (브랜드 카드와 같은 방식).
   배경 URL·확대율·오프셋이 인라인 스타일로 들어오므로 가상요소가 물려받아 transform 한다. */
.v2_best_card:before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: inherit; background-position: inherit;
    -webkit-transition: -webkit-transform .4s ease; transition: transform .4s ease;
}
.v2_best_card:hover:before {
    -webkit-transform: scale(1.06); transform: scale(1.06);
}
.v2_best_card > * { position: relative; z-index: 1; }
.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: 23px;
    font-size: 13px; 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;
}
/* 텍스트 블록은 안쪽 박스(134)를 넘쳐 약 180 폭을 쓴다 (right:-45.47) */
.v2_best_card strong {
    display: block; width: 180px; margin-bottom: 8px;
    font-size: 27px; font-weight: 600; line-height: 30px;
}
.v2_best_card span { display: block; width: 180px; font-size: 14px; line-height: 18px; }
/* hover : 뱃지가 반투명 → 불투명 빨강 (시안 73:118 Variant2) */
.v2_best_card:hover .v2_badge { background: var(--primary-color); }

/* 구매하기 · 고객지원 카드 — PC 실측 전. MO 값 기반이라 확인 후 조정 필요 */
.v2_panel_tit { margin-bottom: 16px; font-size: 18px; font-weight: 500; }

.v2_cards > li > a {
    display: block; position: relative; overflow: hidden;
    min-height: 174px; padding: 24px;
    background: #fff;
    border: 1px solid var(--chip-border-color); border-radius: 10px;
    -webkit-transition: border-color .2s; transition: border-color .2s;
}
/* D-46 : hover 시 테두리 빨강. CTA 버튼도 같이 강조된다. */
.v2_cards > li > a:hover { border-color: var(--primary-color); }
.v2_cards > li > a:hover .v2_card_cta {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.v2_cards strong {
    display: block; margin-bottom: 8px;
    font-size: 18px; font-weight: 600; color: var(--primary-color);
}
.v2_card_desc { display: block; position: relative; z-index: 1; height: 54px; font-size: 14px; line-height: 18px; }
/* 이미지는 오른쪽·아래 기준으로 붙어 있다(인라인 right/bottom).
   마우스 오버 시 살짝 확대하되 그 기준점이 흔들리지 않게 origin 을 오른쪽 아래로 둔다. */
.v2_card_img {
    position: absolute; height: auto;
    -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%;
    -webkit-transition: -webkit-transform .4s ease; transition: transform .4s ease;
}
.v2_cards > li > a:hover .v2_card_img {
    -webkit-transform: scale(1.06); transform: scale(1.06);
}

.v2_mega_dealer .v2_cards > li > a { min-height: 205px; }
.v2_mega_dealer .v2_cards strong { font-size: 21px; white-space: nowrap; }
.v2_mega_dealer .v2_card_desc { font-size: 13px; line-height: 18px; }

.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;
    position: relative; z-index: 1;
    height: 32px; margin-top: 16px; padding: 0 15px;
    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;
}
.v2_card_cta:after { content: " \2192"; margin-left: 5px; }

/* 대량구매 문의하기 : 카드가 아니라 단독 텍스트 링크라 카드 hover 규칙이 닿지 않는다 */
.v2_bulk { margin-top: 24px; }
.v2_bulk strong { display: block; font-size: 16px; font-weight: 500; }
.v2_bulk > span { display: block; margin-top: 6px; font-size: 13px; color: var(--text-sub-color); }
.v2_bulk .v2_card_cta {
    height: auto; margin-top: 12px; 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:hover { color: var(--primary-color); }

/* 지도에 없는 DB 항목 (자전거 정보 등) */
.v2_rows { margin-top: 16px; }
.v2_rows > li { display: inline-block; }
.v2_rows > li + li { margin-left: 16px; }
.v2_rows a { font-size: 14px; color: var(--text-sub2-color); }
.v2_rows a:hover { color: var(--primary-color); }

/* ============================================================================
   푸터 (F-1 ~ F-4)  — PC 실측 : get_design_context(210:780)
   ============================================================================ */
.v2_footer { background: var(--card-alt-bg-color); border-top: 1px solid var(--gray-2-color); }
.v2_footer_inner { width: 1132px; margin: 0 auto; }

.v2_footer_top { padding: 40px 0; }
.v2_footer_top .v2_footer_inner {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}

/* 로고 172×39 + 사이트맵, 간격 102 */
.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: 172px; height: 39px; margin-right: 102px; }
.v2_f_logo img { width: 100%; height: 100%; object-fit: contain; }

/* 사이트맵 : 3열 각 118, 열 간격 30 */
.v2_sitemap { display: -webkit-box; display: -ms-flexbox; display: flex; }
.v2_sitemap_col { width: 118px; }
.v2_sitemap_col + .v2_sitemap_col { margin-left: 30px; }
.v2_sitemap_col > strong {
    display: block; height: 21px; margin-bottom: 10px;
    font-size: 19px; font-weight: 500; line-height: 21px;
}
.v2_sitemap_col li + li { margin-top: 4px; }
.v2_sitemap_col a { display: block; height: 23px; font-size: 15px; line-height: 23px; }
.v2_sitemap_col a:hover { color: var(--primary-color); }

/* 고객센터 : 좌측 블록과 간격 198, 폭 241 */
.v2_f_center { width: 241px; margin-left: 198px; }
.v2_f_center > strong { display: block; font-size: 21px; font-weight: 500; line-height: 21px; }
.v2_f_center > strong a { color: inherit; }
.v2_f_time { display: block; margin-top: 4px; font-size: 17px; line-height: 21px; }
.v2_f_center > p { margin-top: 7px; font-size: 14px; line-height: 19px; }


/* ------------------------------------------------------------ 하단 행 --- */
.v2_footer_bottom { padding: 30px 0 99px; border-top: 1px solid var(--gray-2-color); }
.v2_footer_bottom .v2_footer_inner {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}

/* 사업자 정보 469 / 패밀리 213 / 언어 157, 간격 103 */
.v2_f_biz { width: 469px; }
.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: 13px; line-height: 18px; color: var(--text-sub2-color); white-space: nowrap;
}
.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; }

.v2_f_policy { margin-top: 18px; 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: 12px; color: var(--text-sub2-color); }
.v2_f_policy a:hover { color: var(--primary-color); }
.v2_f_copy { margin-top: 5px; font-size: 13px; font-weight: 200; color: var(--text-sub2-color); }

/* 패밀리 사이트 */
.v2_f_family { width: 213px; margin-left: 103px; }
.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: 14px; font-weight: 600; color: var(--text-sub2-color);
}
/* 아이콘이 앞이라 글자와의 간격 3 은 아이콘 오른쪽에 준다 */
.v2_ico_plus { display: block; width: 11px; height: 11px; margin-right: 3px; 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: 14px; font-size: 13px; color: var(--text-sub2-color); }
.v2_f_family_list a:hover { color: var(--primary-color); }

/* 언어 선택 157×24 */
.v2_f_lang { position: relative; width: 157px; margin-left: 103px; }
.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: 6px 7px;
    font-size: 12px; color: var(--text-sub2-color);
}
.v2_f_lang_list a:hover { color: var(--primary-color); background: var(--gray-1-color); }

/* 상단 이동 버튼 (G4) */
.v2_btn_top {
    display: none;
    position: fixed; right: 30px; bottom: 40px; z-index: 80;
    width: 48px; height: 48px;
    font-size: 11px; font-weight: 600; line-height: 50px; text-align: center;
    color: #fff;
    background: var(--sub-red-color);
    border-radius: 50%;
    -webkit-transition: background-color .2s ease; transition: background-color .2s ease;
}
.v2_btn_top.is-show { display: block; }
.v2_btn_top:hover { background: var(--primary-color); }
/* 서브페이지 v1 a:link/a:hover 되받기 — 기본·hover 모두 흰 글자 */
.v2_sub .v2_btn_top:link,
.v2_sub .v2_btn_top:visited,
.v2_sub .v2_btn_top:hover,
.v2_sub .v2_btn_top:active { color: #fff; }