@charset "utf-8";
/* v2 mobile/m_contents.css
   요구사항: docs/requirements-260904.md / 설계: docs/v2-track-design-260904.md */

/* ============================================================================
   v2 자전거 리스트 (PLP) 모바일 — 종류별로 찾기 / 브랜드로 찾기
   설계 : docs/v2-bicycle-list-260922.md   시안 : docs/v2-mobile-figma-260922.md §1 (8037:1034)
   마크업 : view/kor/v2/bicycle/lists_m.php

   시안 440 기준. 좌우 여백 30 = 6.8182%, 콘텐츠 380 = 86.3636% (m_layout.css 와 같은 환산).
   v1 모바일 CSS 와 클래스가 겹치는 곳(.sub_conts / .prodt_area / .prodt_lst / .prodt_Info / .heshtag /
   .cost_order)은 전부 #container.v2_plp 로 가둔다. m_layout.css 의 v1 되받기는 :where() 명시도 0 이라 진다.
   ============================================================================ */

.v2_sub #container.v2_plp,
.v2_sub #container.v2_plp *,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst * {
    -webkit-box-sizing: border-box; box-sizing: border-box;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    vertical-align: baseline;
}

/* 상단 바(50) 아래에서 시작한다. 띠배너가 있으면 80.
   m_layout.css 의 `.v2_head + #container` 는 앞에 <script> 가 있어 걸리지 않는다 → 일반 형제(~).
   .v2_sub .v2_head.is-notice ~ #container { padding-top: 30px } 보다 명시도가 높아 이 값이 이긴다. */
.v2_sub .v2_head ~ #container.v2_plp { padding-top: 50px; }
.v2_sub .v2_head.is-notice ~ #container.v2_plp { padding-top: 80px; }

/* v1 은 .sub_container_wrap 을 top:52 로 내려 헤더 자리를 비운다. 위 padding 이 그 역할이라 되돌린다 */
.v2_sub #container.v2_plp .sub_container_wrap { top: 0; margin-bottom: 0; min-height: 0; }

/* ------------------------------------------------------------- 라벨 밴드 --- */
/* 시안 : h 26 / bg #F9FAFD / 12px Medium #676B72 중앙 / 하단 선
   대리점·대량구매도 같은 밴드를 쓴다. 페이지 클래스에 묶지 않는다 (PC 밴드와 같은 이유) */
.v2_sub #container .v2_plp_mband {
    height: 40px; line-height: 40px;
    background: var(--band-bg-color);
    border-bottom: 1px solid var(--chip-border-color);
    font-size: 14px; font-weight: 500; color: var(--text-sub2-color);
    text-align: center;
}

/* -------------------------------------------------------------- 1뎁스 탭 --- */
/* 시안 : 380 안 space-between / 14px SemiBold / 활성 #676B72 + 2px 밑줄 #E41F20 (Line 13) / 비활성 #B7C3CC
   항목이 늘어 380 을 넘으면 가로 스크롤 (스크롤바 숨김) */
.v2_sub #container.v2_plp .v2_plp_dep1 {
    position: relative;
    padding: 6px 6.8182% 0;
    border-bottom: 1px solid var(--chip-border-color);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.v2_sub #container.v2_plp .v2_plp_dep1::-webkit-scrollbar { display: none; }
.v2_sub #container.v2_plp .v2_plp_dep1 > ul {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    min-width: 100%; width: -webkit-max-content; width: max-content;
}
.v2_sub #container.v2_plp .v2_plp_dep1 > ul > li { -ms-flex-negative: 0; flex-shrink: 0; }
.v2_sub #container.v2_plp .v2_plp_dep1 > ul > li + li { margin-left: 16px; }
.v2_sub #container.v2_plp .v2_plp_dep1 > ul > li > a {
    display: block; padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    font-size: 14px; font-weight: 600; line-height: 17px;
    color: var(--tab-off-color); white-space: nowrap;
}
.v2_sub #container.v2_plp .v2_plp_dep1 > ul > li > a.on {
    color: var(--text-sub2-color); border-bottom-color: var(--primary-color);
}

/* -------------------------------------------------------- 2뎁스 탭 (+수량) --- */
/* 시안 : 12.5px / 활성 #ED2D2D SemiBold + 밑줄 / 비활성 #55585B / 항목 gap 16
   항목이 380 을 넘으면 가로 스크롤. 가운데 정렬은 첫·끝 항목 margin:auto 로 잡는다
   (justify-content:center 는 넘칠 때 앞쪽이 잘려 스크롤이 안 된다) */
.v2_sub #container.v2_plp .v2_plp_tab_wrap {
    position: relative;
    padding: 8px 6.8182% 12px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.v2_sub #container.v2_plp .v2_plp_tab_wrap::-webkit-scrollbar { display: none; }
.v2_sub #container.v2_plp .v2_plp_tab {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    width: -webkit-max-content; width: max-content; min-width: 100%;
    margin: 0; font-size: 0;
}
.v2_sub #container.v2_plp .v2_plp_tab > li { -ms-flex-negative: 0; flex-shrink: 0; margin: 0; }
.v2_sub #container.v2_plp .v2_plp_tab > li + li { margin-left: 16px; }
.v2_sub #container.v2_plp .v2_plp_tab > li:first-child { margin-left: auto; }
.v2_sub #container.v2_plp .v2_plp_tab > li:last-child { margin-right: auto; }
.v2_sub #container.v2_plp .v2_plp_tab > li > a {
    display: block;
    font-size: 12.5px; font-weight: 400; line-height: 15px;
    color: var(--text-sub3-color); white-space: nowrap;
}
/* 밑줄은 시안처럼 글자에서 3px 띄운다 (두께 9.5% ≈ 1px). 기본 offset 은 글자에 붙어 보인다 */
.v2_sub #container.v2_plp .v2_plp_tab > li > a.on {
    font-weight: 600; color: var(--sub-red-border-color);
    text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.v2_sub #container.v2_plp .v2_plp_tab em { font-style: normal; }

/* --------------------------------------------------------------- 본문 상단 --- */
/* 시안 : 타이틀 17px SemiBold / 설명 12px / 다음 블록까지 24 */
.v2_sub #container.v2_plp .v2_plp_head {
    width: 100%; margin: 0; padding: 0 6.8182% 24px; text-align: left;
}
.v2_sub #container.v2_plp .v2_plp_head h2 {
    font-size: 17px; font-weight: 600; line-height: 22px; color: var(--dark-color);
}
.v2_sub #container.v2_plp .v2_plp_head p {
    margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 15px; color: var(--dark-color);
    word-break: keep-all;
}

/* --------------------------------------------------------------- 그룹 헤더 --- */
.v2_sub #container.v2_plp .sub_conts { width: 100%; min-width: 0; margin: 0; }
.v2_sub #container.v2_plp .sub_conts + .sub_conts { margin-top: 25px; }
.v2_sub #container.v2_plp .prodt_area { width: 86.3636%; margin: 0 auto; }

/* 시안 : 시리즈명 18px Medium / 우측 브랜드 로고 h 10 / 아래 1px 선 #A1A5AE (Line 10) */
.v2_sub #container.v2_plp .v2_grp_head {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    width: 100%; padding-bottom: 5px;
    border-bottom: 1px solid var(--text-mute-color);
}
.v2_sub #container.v2_plp .v2_grp_head h3 {
    width: auto; margin: 0; font-size: 18px; font-weight: 500; line-height: 22px;
    text-align: left; color: var(--dark-color);
}
.v2_sub #container.v2_plp .v2_brand_logo { display: block; padding-bottom: 0; line-height: 0; }
.v2_sub #container.v2_plp .v2_brand_logo img { width: auto; max-width: 113px; max-height: 10px; }

/* 정렬바 — 선 아래 우측. 시안 10.1px → 10px, 활성 #F55B5C / 비활성 #A1A5AE
   v1 m_contents.css 가 .cost_order 를 display:none ↔ block 으로 두 번 선언한다. 여기서 확정한다 */
.v2_sub #container.v2_plp .cost_order {
    display: block; width: 100%; margin: 5px 0 0; padding: 0;
    border: 0; text-align: right; font-size: 0;
}
.v2_sub #container.v2_plp .cost_order > li { display: inline-block; vertical-align: middle; }
.v2_sub #container.v2_plp .cost_order > li + li::before {
    content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 8px;
    background: var(--text-mute-color); vertical-align: middle;
}
.v2_sub #container.v2_plp .cost_order > li > a {
    display: inline-block; font-size: 10px; line-height: 12px; color: var(--text-mute-color);
    vertical-align: middle;
}
.v2_sub #container.v2_plp .cost_order > li > a.on_down_link,
.v2_sub #container.v2_plp .cost_order > li > a.on_up_link { color: var(--sub-red-color); }

/* ------------------------------------------------------------------- 카드 --- */
/* 시안 : 1열 / 카드 간 10 / radius 15 / border #D1DBEA / pt 22 · pb 27 · px 15 / 이미지 350 (= 안쪽 폭 100%)
   지난 제품보기(customer/after_pro_lists)도 같은 카드 — PC 와 같이 .last_flm ~ ul.prodt_lst 로 잡는다. 전용 보정은 이 블록 끝 */
.v2_sub #container.v2_plp ul.prodt_lst,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst {
    width: 100%; margin: 16px 0 0; padding: 0; border: 0; clear: none;
}
.v2_sub #container.v2_plp ul.prodt_lst > li,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst > li {
    display: block; width: 100%; margin: 0 0 10px; padding: 22px 15px 27px;
    background: #fff;
    border: 1px solid var(--chip-border-color); border-radius: 15px;
    -webkit-box-shadow: none; box-shadow: none;
    overflow: hidden;
}
.v2_sub #container.v2_plp ul.prodt_lst > li:last-child,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst > li:last-child { margin-bottom: 0; }
/* 활성(터치) = 테두리 색 변경. 시안의 첫 카드 상태 */
.v2_sub #container.v2_plp ul.prodt_lst > li:active,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst > li:active { border-color: var(--sub-red-color); }

/* v1 은 a 를 -webkit-box 세로 + ordinal 로 이미지를 아래로 내린다. 시안은 이미지가 위 */
.v2_sub #container.v2_plp ul.prodt_lst > li > a,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst > li > a {
    display: block; width: 100%; height: auto; margin: 0;
}
.v2_sub #container.v2_plp .prodt_Img,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Img { display: block; width: 100%; padding: 0; line-height: 0; }
.v2_sub #container.v2_plp .prodt_Img img,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Img img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }

/* 시안 : 제품명 27px Medium 중앙 / 사이즈 뱃지 17px / 가격 17px (gap 3) */
.v2_sub #container.v2_plp .prodt_Info,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Info { width: 100%; margin: 8px 0 0; text-align: center; }
.v2_sub #container.v2_plp .prodt_Info strong,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Info strong {
    display: block; margin: 0; padding: 0;
    font-size: 27px; font-weight: 500; line-height: 32px; color: var(--dark-color);
    word-break: keep-all;
}
.v2_sub #container.v2_plp .prodt_Info strong span,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Info strong span {
    display: inline-block; width: auto; margin: 0; padding: 1px 5px;
    vertical-align: middle; position: relative; top: -2px;
    font-size: 17px; font-weight: 500; line-height: 20px; color: #fff;
    background: var(--primary-color); border-radius: 3px;
}
.v2_sub #container.v2_plp .prodt_Info em,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Info em {
    display: block; padding-top: 3px;
    font-size: 17px; font-weight: 400; line-height: 20px; color: var(--dark-color);
}

/* 태그칩 — 시안 3개, 실제 최대 7개. 줄바꿈으로 흘린다 (PC 와 같은 결정).
   v1 .heshtag 의 회색 배경·패딩을 걷어낸다 */
.v2_sub #container.v2_plp .heshtag,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    width: 100%; margin: 15px 0 0; padding: 0;
    background: none; text-align: center;
}
.v2_sub #container.v2_plp .heshtag > li,
.v2_sub #container.v2_plp .heshtag li:hover,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag > li,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag li:hover {
    display: block; position: static; margin: 0 5px 10px;
    padding: 5px 9px 5px 6px;
    font-size: 14px; font-weight: 500; line-height: 17px;
    background: var(--chip-bg-color);
    border: 1px solid var(--chip-border-color); border-radius: 5px;
}
.v2_sub #container.v2_plp .heshtag li a,
.v2_sub #container.v2_plp .heshtag li:hover a,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag li a,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag li:hover a {
    display: inline; height: auto; font-size: 14px; color: var(--dark-color);
}
.v2_sub #container.v2_plp .heshtag li::after,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag li::after { display: none; }
/* 지난 제품보기 전용 — .prodt_area 가 100% 라 ul 폭을 위 연도·검색 줄(v1 90%)에 맞춘다. v1 JS 가 카드 2개씩 ul 을 끊어
   그리므로 ul 사이는 카드 간격(10). 머리(로고·시리즈명)·빈 타이틀 span·제품특징 <p> 는 검색 카드처럼 뺀다 */
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst { width: 90%; margin: 16px auto 0; }
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst + ul.prodt_lst { margin-top: 10px; }
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_lst_head,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Info > span,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Info > p { display: none; }
/* 태그 간격 — v1 JS 가 li 사이에 넣는 &nbsp; 폭(글자 크기만큼)을 없애 다른 페이지와 같게 */
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag { font-size: 0; }
/* 카테고리 비노출 : 하운드(B003) · 블랙캣(B004) */
.v2_sub.v2_pg_customer #container .prodts_menu > li[data-value="B003"],
.v2_sub.v2_pg_customer #container .prodts_menu > li[data-value="B004"] { display: none; }
/* 마지막 카드 margin-bottom 0 이라 더보기가 붙는다 */
.v2_sub.v2_pg_customer #container .prodt_area:has(> .last_flm) + button.btn_add { margin-top: 20px; }
/* 검색 + 연도 한 줄 — PC 와 같이 왼쪽 검색 입력, 오른쪽 연도(select). 하단 1px --text-mute.
   입력은 v1 처럼 흰 배경 + 테두리(--input-border-color), 바깥 모서리 10, 높이 44 → 36. 연도 select 도 같은 높이·모서리 10 */
.v2_sub.v2_pg_customer #container .last_flm {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 10px; border-bottom: 1px solid var(--text-mute-color);
}
.v2_sub.v2_pg_customer #container .last_flm .line_search_inner { order: 0; width: 62%; margin: 0; }
.v2_sub.v2_pg_customer #container .last_flm .line_search_inner p.inptxt { display: flex; }
.v2_sub.v2_pg_customer #container .last_flm .line_search_inner p.inptxt input {
    flex: 1 1 auto; width: auto; min-width: 0; height: 36px; padding: 0 15px; border: 1px solid var(--input-border-color); border-right: 0; border-radius: 10px 0 0 10px;
    font-size: 14px; color: var(--dark-color); background: #fff;
}
.v2_sub.v2_pg_customer #container .last_flm .line_search_inner .btn_serch {
    flex: 0 0 44px; width: 44px; height: 36px;
    border: 1px solid var(--input-border-color); border-left: 0; border-radius: 0 10px 10px 0;
    background: #fff url("../../../images/contents/icon_store_search.png") no-repeat center / 16px auto;
}
.v2_sub.v2_pg_customer #container .last_flm select.last_select { order: 1; float: none; width: 33%; height: 36px; padding: 0 10px; font-size: 13px; border-radius: 10px; }
/* 온탭 : 배경 채움 (PC hover 와 같다). is-on 은 main_v2.js tapMove 가 a 에 붙인다 */
.v2_sub #container.v2_plp .heshtag li:has(> a.is-on),
.v2_sub #container.v2_pdp .heshtag li:has(> a.is-on) { background: var(--sub-red-color); border-color: var(--sub-red-color); }
.v2_sub #container.v2_plp .heshtag li > a.is-on,
.v2_sub #container.v2_pdp .heshtag li > a.is-on { color: #fff; }

/* ------------------------------------------------------------- 용품 리스트 --- */
/* 자전거 모바일과 같은 구조라 .v2_plp 규칙을 그대로 쓴다.
   시안(8037:1237) 기준 차이만 여기서 처리한다. 마크업 view/kor/v2/unit/lists_m.php */

/* 1뎁스 탭이 340 폭 중앙이다 (자전거는 380). 좌우 50 = 11.3636% */
.v2_sub #container.v2_plp_unit .v2_plp_dep1 { padding-left: 11.3636%; padding-right: 11.3636%; }

/* 2뎁스 탭 아래에서 그룹 헤더까지 19 (시안 99 → 118) */
.v2_sub #container.v2_plp_unit .v2_plp_tab_wrap { padding-bottom: 19px; }

/* 페이지 타이틀이 없어 헤더 높이만 맞춘다 */
.v2_sub #container.v2_plp_unit .v2_grp_head { min-height: 27px; }

/* ============================================================================
   v2 자전거 상세 (PDP) 모바일
   설계 : docs/v2-bicycle-detail-260922.md   시안 : docs/v2-mobile-figma-260922.md §3 (8037:1386)
   마크업 : view/kor/v2/bicycle/view_m.php (용품 상세 view/kor/v2/unit/view_m.php 도 같이 쓴다)

   v1 모바일과 겹치는 클래스(.sub_conts / .sub_swiper / .heshtag / .prodt_draw / .prodt_lst_full)는
   전부 #container.v2_pdp 로 가둔다.
   ============================================================================ */

.v2_sub #container.v2_pdp,
.v2_sub #container.v2_pdp * {
    -webkit-box-sizing: border-box; box-sizing: border-box;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    vertical-align: baseline;
}
/* 상단 바(50) 아래에서 시작. 띠배너가 있으면 80 (PLP 와 같은 이유) */
.v2_sub .v2_head ~ #container.v2_pdp { padding-top: 50px; }
.v2_sub .v2_head.is-notice ~ #container.v2_pdp { padding-top: 80px; }
.v2_sub #container.v2_pdp .sub_container_wrap { top: 0; margin-bottom: 0; min-height: 0; }
.v2_sub #container.v2_pdp .sub_conts { width: 86.3636%; min-width: 0; margin: 0 auto; }

/* --------------------------------------------------------------- 상단 --- */
/* 좌 카테고리 14px #55585B / 우 브랜드 로고 h 7 / 아래 1px #A1A5AE (시안 top 91.5). 바에서 18 */
.v2_sub #container.v2_pdp .v2_pdp_head {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    padding: 18px 0 6px; text-align: left;
    border-bottom: 1px solid var(--text-mute-color);
}
.v2_sub #container.v2_pdp .v2_pdp_cate,
.v2_sub #container.v2_pdp .v2_pdp_cate2 {
    position: static; font-size: 14px; font-weight: 500; line-height: 17px; color: var(--text-sub3-color);
}
.v2_sub #container.v2_pdp .v2_pdp_brand { position: static; line-height: 0; padding-bottom: 5px; }
.v2_sub #container.v2_pdp .v2_pdp_brand img { width: auto; max-width: 104px; max-height: 8px; }

/* 제품명 : 선에서 15, 중앙, 23px SemiBold. 뱃지 15px */
.v2_sub #container.v2_pdp .v2_pdp_title {
    display: block; margin-top: 15px; text-align: center;
    font-size: 23px; font-weight: 600; line-height: 27px; color: var(--dark-color);
    word-break: keep-all;
}
.v2_sub #container.v2_pdp .v2_pdp_title > span {
    display: inline-block; margin-right: 5px; padding: 1px 5px;
    vertical-align: middle; position: relative; top: -2px;
    font-size: 15px; font-weight: 500; line-height: 18px; color: #fff;
    background: var(--primary-color); border-radius: 3px;
}

/* ------------------------------------------------------------- 슬라이더 --- */
/* 제품명에서 13. v1 m_layout.css:165 의 .swiper-container 하단 60 패딩 되받음.
   폭은 본문(380)의 110% — v1 보다 작아 보인다는 요청. 좌우로 5% 씩 본문 밖으로 넓힌다 (이미지는 자르지 않는다) */
.v2_sub #container.v2_pdp .sub_swiper { width: 110%; margin: 13px -5% 0; padding: 0; }
.v2_sub #container.v2_pdp .sub_swiper .swiper-slide { line-height: 0; }
.v2_sub #container.v2_pdp .sub_swiper .swiper-slide img { width: 100%; max-width: 100%; }
/* 화살표 22×22, 이미지 안쪽 9. common.js 설정이 좌우 뒤집혀 있어 화면 위치 기준으로 잡는다 (PC 와 같다)
   v1 m_main.css:4~5 의 메인 화살표 이미지·m_layout.css:179 의 margin-top -70 되받음 */
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-prev,
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-next {
    width: 22px; height: 22px; margin-top: -11px !important;
    background: url("../../images/ico/pdp_arrow.svg") no-repeat center;
    background-size: 22px 22px;
}
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-next { left: 9px; right: auto; }
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-prev {
    right: 9px; left: auto;
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
/* 온탭 : 원 배경 --primary(#E41F20) 불투명 뒤 원복. is-on 은 bicycle_view_v2.js 가 잠깐 붙인다 */
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-prev:active,
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-next:active,
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-prev.is-on,
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-next.is-on {
    background-image: url("../../images/ico/pdp_arrow_on.svg");
}
/* 색상 라벨 — v1 m_contents.css:74 는 absolute(bottom 40). 슬라이드 아래 흐름에 두고 활성 span 만 보인다(v1 규칙) */
/* 높이 17 고정 — 색상명이 비어 있거나(활성 span 높이 0) 슬라이드마다 글자가 바뀌어도 아래 요소가 움직이지 않게.
   긴 이름은 한 줄 말줄임 */
.v2_sub #container.v2_pdp .swiper-text {
    position: static; width: 100%; height: 17px; margin-top: 10px; line-height: 17px; text-align: center;
    overflow: hidden;
}
.v2_sub #container.v2_pdp .swiper-text span {
    font-size: 14px; font-weight: 400; line-height: 17px; color: var(--dark-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 도트 7px, gap 5. 색상명과의 간격을 PC 와 맞춘다 (지시값 20) */
.v2_sub #container.v2_pdp .sub_swiper .swiper-pagination { bottom: 20px; }
.v2_sub #container.v2_pdp .sub_swiper .swiper-pagination-bullet {
    width: 7px; height: 7px; margin: 0 2.5px;
    border-radius: 50%;
    -webkit-transform: skew(0); transform: skew(0);
    background: var(--gray-3-color); opacity: 1;
}
.v2_sub #container.v2_pdp .sub_swiper .swiper-pagination-bullet-active { background: var(--primary-color); }

/* 이미지 확대 팝업 (.mob_imgsize 탭 → common.js 가 .prodt_lst_full 을 display:block).
   v1 은 뷰 상단에 두고 인라인 top:110 absolute 였다. v2 뷰는 #container 밖(푸터 앞)에 있어 위치 지정 없이 푸터 위에 떴다
   → 화면 전체를 덮는 fixed 로. GNB 바(101)·메뉴(200) 위. 확대 이미지는 v1 과 같이 200% + 가로 스크롤인데
   v2 base.css 의 img{max-width:100%} 가 막아 커지지 않았다 → max-width 해제 */
.v2_sub .prodt_lst_full {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 300;
    width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff;
}
.v2_sub .prodt_lst_full .prodt_full { padding-bottom: 20px; }
.v2_sub .prodt_lst_full .prodt_full::after { content: ""; display: block; clear: both; }
.v2_sub .prodt_lst_full .prodt_img_full { clear: both; padding-top: 20px; }
.v2_sub .prodt_lst_full .prodt_img_full img { width: 200%; max-width: none; }

/* ----------------------------------------------------------------- 가격 --- */
/* 이미지에서 12. 라벨 16px 500 #55585B / 금액 18.5px 600 / 원 17.5px, gap 7.5 */
.v2_sub #container.v2_pdp .v2_pdp_price { margin-top: 12px; text-align: center; }
.v2_sub #container.v2_pdp .v2_pdp_price > span {
    margin-right: 7px; font-size: 16px; font-weight: 500; color: var(--text-sub3-color);
}
.v2_sub #container.v2_pdp .v2_pdp_price > strong { font-size: 18.5px; font-weight: 600; color: var(--dark-color); }
.v2_sub #container.v2_pdp .v2_pdp_price em { margin-left: 1px; font-size: 17.5px; font-weight: 600; }

/* ----------------------------------------------------------------- 태그 --- */
/* 시안 칩이 축소 인스턴스라 PLP 칩을 줄여 쓴다 (기록 §3-5). h 21, gap 6, 행 gap 6 */
.v2_sub #container.v2_pdp .heshtag {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    width: 100%; margin: 15px 0 0; padding: 0;
    background: none; text-align: center;
}
.v2_sub #container.v2_pdp .heshtag > li,
.v2_sub #container.v2_pdp .heshtag li:hover {
    display: block; position: static; margin: 0 3px 6px;
    padding: 3px 7px 3px 6px;   /* 오른쪽 9 → 7 : '#' 가 왼쪽에 있어 좌우가 시각적으로 맞게 (지시값) */
    font-size: 11px; font-weight: 500; line-height: 13px;
    background: var(--chip-bg-color);
    border: 1px solid var(--chip-border-color); border-radius: 5px;
}
.v2_sub #container.v2_pdp .heshtag li a,
.v2_sub #container.v2_pdp .heshtag li:hover a {
    display: inline; height: auto; font-size: 11px; color: var(--dark-color);
}
.v2_sub #container.v2_pdp .heshtag li::after { display: none; }
/* 온탭 글자 흰색 — 위 li:hover a(검정)와 명시도가 같아 뒤에 둔다 (모바일은 탭하면 :hover 도 걸린다) */
.v2_sub #container.v2_pdp .heshtag li > a.is-on { color: #fff; }

/* ------------------------------------------------------------------ CTA --- */
/* 태그에서 14. 13px 600 흰색 / bg #F55B5C / border #E41F20 / radius 5 / padding 4·12 / gap 11 */
.v2_sub #container.v2_pdp .v2_pdp_cta {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    margin-top: 15px; font-size: 0;
}
.v2_sub #container.v2_pdp .v2_btn_cta {
    display: inline-block; margin: 0 5.5px; padding: 4px 12px;
    font-size: 13px; font-weight: 600; line-height: 16px; color: #fff;
    background: var(--sub-red-color);
    border: 1px solid var(--primary-color); border-radius: 5px;
}

/* ----------------------------------------------------------- 연관 콘텐츠 --- */
/* CTA 에서 24. bg #F8F8F8 / border #CDD1D5 / radius 10 / p 15 */
.v2_sub #container.v2_pdp .v2_pdp_relat {
    margin-top: 26px; padding: 15px;
    background: #f8f8f8; border: 1px solid var(--card-border-color); border-radius: 10px;
}
.v2_sub #container.v2_pdp .v2_pdp_relat > h3 {
    width: auto; margin: 0 0 15px; font-size: 16px; font-weight: 500; line-height: 19px;
    text-align: left; color: var(--dark-color);
}
.v2_sub #container.v2_pdp .v2_pdp_relat li + li { border-top: 1px solid var(--chip-border-color); }
.v2_sub #container.v2_pdp .v2_pdp_relat li > a {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    width: 100%; height: auto; padding: 6px 0; background: none;
}
.v2_sub #container.v2_pdp .v2_relat_thumb { -ms-flex: 0 0 70px; flex: 0 0 70px; width: 70px; height: 70px; line-height: 0; }
.v2_sub #container.v2_pdp .v2_relat_thumb img { width: 70px; height: 70px; object-fit: cover; border-radius: 5px; }
.v2_sub #container.v2_pdp .v2_relat_body {
    -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; padding: 0 13px 0 8px; text-align: left;
}
.v2_sub #container.v2_pdp .v2_relat_body strong {
    display: block; font-size: 12.5px; font-weight: 500; line-height: 15px; color: var(--dark-color);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.v2_sub #container.v2_pdp .v2_relat_body em {
    display: -webkit-box; margin-top: 2px; height: 25px;
    font-size: 10px; font-weight: 400; line-height: 12.5px; color: var(--dark-color);
    overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.v2_sub #container.v2_pdp .v2_relat_body i { display: block; margin-top: 2px; font-size: 9px; font-weight: 400; line-height: 11px; color: var(--text-sub-color); }
/* 출처 아이콘 — 시안 Frame 360 : youtube 27×19 / instagram 26×25 / 자사 배지 25×25 bg #f55b5c radius 3 + 3000 로고 18.5×7.4
   블로그는 시안에 없어 인스타와 같은 크기. 온탭은 _on(#E41F20) 으로 교체 — is-on 은 main_v2.js tapMove, :active 는 보조 */
.v2_sub #container.v2_pdp .v2_relat_sns {
    -ms-flex: 0 0 27px; flex: 0 0 27px;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    line-height: 0;
}
.v2_sub #container.v2_pdp .v2_relat_sns::before {
    content: ""; display: block; width: 26px; height: 25px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
}
.v2_sub #container.v2_pdp .v2_relat_sns.is-youtube::before   { width: 27px; height: 19px; background-image: url("../../images/sns/youtube.svg"); }
.v2_sub #container.v2_pdp .v2_relat_sns.is-instagram::before { background-image: url("../../images/sns/instagram.svg"); }
.v2_sub #container.v2_pdp .v2_relat_sns.is-blog::before      { background-image: url("../../images/sns/blog.svg"); }
.v2_sub #container.v2_pdp .v2_relat_sns.is-own::before {
    width: 25px; height: 25px;
    /* youtube·instagram·blog svg 가 fill-opacity 0.7 이라 같은 색으로 보이게 배경도 70% (로고 흰색은 그대로) */
    background-color: rgba(245, 91, 92, .7); border-radius: 3px;
    background-image: url("../../images/ico/logo_3000_w.svg"); background-size: 18.5px 7.4px;
}
.v2_sub #container.v2_pdp .v2_pdp_relat li > a:active .v2_relat_sns.is-youtube::before,
.v2_sub #container.v2_pdp .v2_pdp_relat li > a.is-on .v2_relat_sns.is-youtube::before   { background-image: url("../../images/sns/youtube_on.svg"); }
.v2_sub #container.v2_pdp .v2_pdp_relat li > a:active .v2_relat_sns.is-instagram::before,
.v2_sub #container.v2_pdp .v2_pdp_relat li > a.is-on .v2_relat_sns.is-instagram::before { background-image: url("../../images/sns/instagram_on.svg"); }
.v2_sub #container.v2_pdp .v2_pdp_relat li > a:active .v2_relat_sns.is-blog::before,
.v2_sub #container.v2_pdp .v2_pdp_relat li > a.is-on .v2_relat_sns.is-blog::before      { background-image: url("../../images/sns/blog_on.svg"); }
.v2_sub #container.v2_pdp .v2_pdp_relat li > a:active .v2_relat_sns.is-own::before,
.v2_sub #container.v2_pdp .v2_pdp_relat li > a.is-on .v2_relat_sns.is-own::before       { background-color: var(--primary-color); }

/* ------------------------------------------------------------------ 탭 --- */
/* 4등분(95×25), 13px 500, 하단 바 2px. 앞 블록에서 20. 용품 상세도 같이 쓴다 */
.v2_sub #container .v2_pdp_tab {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    width: 100%; margin: 30px 0 0;
}
.v2_sub #container .v2_pdp_tab > li { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; text-align: center; }
.v2_sub #container .v2_pdp_tab > li > a {
    display: block; height: 25px; line-height: 23px;
    font-size: 13px; font-weight: 500; color: var(--text-sub-color);
    border-bottom: 2px solid var(--chip-bg-color); white-space: nowrap;
}
.v2_sub #container .v2_pdp_tab > li.on > a { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.v2_sub #container .v2_ico_out {
    width: 16px; height: 16px; margin-left: 0;
    display: inline-block; vertical-align: middle; position: relative; top: -1px;
    background: url("../../images/ico/arrow_up_right_gray.svg") no-repeat center;
    background-size: 16px 16px;
}

/* ------------------------------------------------------------ 제품 소개 --- */
/* 탭에서 10. 폭 380 = 콘텐츠 100%. 에디터 본문의 고정폭 이미지는 폭에 맞춘다 */
.v2_sub #container.v2_pdp .v2_pdp_intro {
    position: relative; width: 100%; margin: 10px auto 0; text-align: center; overflow: hidden;
}
.v2_sub #container.v2_pdp .v2_pdp_intro img { max-width: 100%; height: auto; }
.v2_sub #container.v2_pdp .v2_pdp_intro .coverImg {
    display: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 70px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0), #fff);
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
/* 상품설명 더보기 149×38 : 15px 600 / pl 20 pr 15 py 10 / gap 2 / radius 5. 소개 하단에서 52 (시안 53) */
.v2_sub #container.v2_pdp .v2_pdp_more { margin-top: 15px; text-align: center; }
/* v1 m_contents.css:1047 a.btn_more{margin:60px auto} 되받음 — margin 0 */
.v2_sub #container.v2_pdp .v2_pdp_more .btn_more {
    display: none; width: auto; height: 38px; margin: 0; padding: 0 15px 0 20px;
    font-size: 15px; font-weight: 600; line-height: 1.2; color: #fff;
    background: var(--primary-color); border-radius: 5px;
}
.v2_sub #container.v2_pdp .v2_pdp_more .btn_more.is-show {
    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;
    gap: 5px;
}
.v2_sub #container.v2_pdp .v2_pdp_more .btn_more::after {
    content: ""; width: 14px; height: 8px; -ms-flex: 0 0 auto; flex: 0 0 auto;   /* 간격은 gap 5 */
    display: block;
    background: url("../../images/ico/chevron_down_w.svg") no-repeat center;
    background-size: 14px 8px;
}
.v2_sub #container.v2_pdp .v2_pdp_more .btn_more.on::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

/* ------------------------------------------------------------ 제품 사양 --- */
/* 탭에서 7. 행 : 라벨 위 13.5px 500 / 값 아래 12.5px, px 5 py 9, 하단 1px #A1A5AE */
.v2_sub #container.v2_pdp .v2_pdp_spec { margin-top: 4px; }
.v2_sub #container.v2_pdp .v2_spec_tbl > div {
    display: block; padding: 9px 5px;
    border-bottom: 1px solid var(--text-mute-color);
}
.v2_sub #container.v2_pdp .v2_spec_tbl dt {
    display: block; width: auto; font-size: 13.5px; font-weight: 500; line-height: 16px; color: var(--dark-color);
}
.v2_sub #container.v2_pdp .v2_spec_tbl dd {
    display: block; margin: 2px 0 0; font-size: 12.5px; font-weight: 400; line-height: 15px; color: var(--dark-color);
    word-break: keep-all;
}
/* 제품 사양 상세보기 138×33 : 13px 600 / pl 10 pr 12 py 8 / radius 8. 표에서 20 */
.v2_sub #container.v2_pdp .v2_spec_more { margin-top: 15px; text-align: left; }
.v2_sub #container.v2_pdp .v2_spec_more a {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    height: auto; padding: 8px 12px 8px 10px; line-height: normal;
    font-size: 13px; font-weight: 600; color: #fff;
    background: var(--sub-red-color);
    border: 1px solid var(--primary-color); border-radius: 8px;
}
.v2_sub #container.v2_pdp .v2_spec_more a::before {
    content: ""; width: 16px; height: 16px; margin-right: 4px; -ms-flex: 0 0 auto; flex: 0 0 auto;
    display: block;
    background: url("../../images/ico/plus_circle_w.svg") no-repeat center;
    background-size: 16px 16px;
}
/* 주의문 : 버튼에서 20. bg #F8F8F8 / border #D1DBEA / radius 15 / pt 21 pb 26 pl 15 pr 40 / 15px lh 27 #55585B
   ※ 15px·lh 27 은 시안값. 주변보다 커서 확인 요청 중 (기록 §3-12) */
.v2_sub #container.v2_pdp .v2_pdp_tip {
    width: 100%; margin: 30px 0 0; padding: 20px 20px 12px 17px;
    background: #f8f8f8; border: 1px solid var(--chip-border-color); border-radius: 15px;
    font-size: 13px;
}
.v2_sub #container.v2_pdp .v2_pdp_tip li {
    position: relative; padding: 0 0 8px 12px; text-indent: 0;
    font-size: 13px; font-weight: 400; line-height: 18px; color: var(--text-sub3-color);
    word-break: keep-all;
}
.v2_sub #container.v2_pdp .v2_pdp_tip li + li { padding-top: 0; }
/* 불릿 3px 를 행간 18 의 세로 중앙에 : (18 - 3) / 2 ≈ 7 */
.v2_sub #container.v2_pdp .v2_pdp_tip li::before {
    content: ""; position: absolute; left: 2px; top: 7px;
    width: 3px; height: 3px; border-radius: 50%; background: var(--text-sub3-color);
}

/* -------------------------------------------------------------- 사이즈 --- */
/* 탭에서 11. 이미지 폭 100%. 표는 행·열 전치 (v1 모바일 구조) */
.v2_sub #container.v2_pdp .v2_pdp_size { margin-top: 11px; text-align: center; }
.v2_sub #container.v2_pdp .v2_pdp_size .prodt_draw { width: 100%; margin: 0; }
.v2_sub #container.v2_pdp .v2_pdp_size .prodt_draw + .prodt_draw,
.v2_sub #container.v2_pdp .v2_pdp_size .v2_size_tbl + .prodt_draw { margin-top: 20px; }
.v2_sub #container.v2_pdp .v2_pdp_size .prodt_draw img { max-width: 100%; }
.v2_sub #container.v2_pdp .v2_size_tbl { width: 100%; margin: 20px 0; border-collapse: collapse; }
.v2_sub #container.v2_pdp .v2_size_tbl th,
.v2_sub #container.v2_pdp .v2_size_tbl td {
    padding: 8px 4px; font-size: 12px; line-height: 15px; text-align: center;
    border: 1px solid var(--chip-border-color);
}
.v2_sub #container.v2_pdp .v2_size_tbl th { width: 30%; background: var(--chip-bg-color); font-weight: 500; }
.v2_sub #container.v2_pdp .v2_size_tbl th span,
.v2_sub #container.v2_pdp .v2_size_tbl th em { display: block; font-size: 10px; font-weight: 400; color: var(--text-sub-color); }

/* ------------------------------------------------------------- 하단 CTA --- */
/* 제품 목록 보기 137×38 : 15px 600 / pl 20 pr 15 py 10 / gap 4 / radius 5. 앞 블록에서 20 */
.v2_sub #container.v2_pdp .v2_pdp_foot { margin-top: 20px; text-align: center; }
.v2_sub #container.v2_pdp .v2_btn_list {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    width: auto; height: 38px; padding: 0 15px 0 20px; line-height: normal; gap: 3px;
    font-size: 15px; font-weight: 600; color: #fff;
    background: var(--primary-color); border-radius: 5px;
}
.v2_sub #container.v2_pdp .v2_btn_list::after {
    content: ""; width: 16px; height: 12px; -ms-flex: 0 0 auto; flex: 0 0 auto;   /* 간격은 gap 3 */
    display: block;
    background: url("../../images/ico/list_w.svg") no-repeat center;
    background-size: 16px 12px;
}

/* ------------------------------------------------------------- 용품 상세 --- */
/* 자전거 상세와 같은 구조. 시안(8037:1634) 차이만 */
/* 탭이 "제품 소개" 하나뿐이라 전체 폭 */
.v2_sub #container.v2_pdp_unit .v2_pdp_tab > li { -ms-flex: 1 1 100%; flex: 1 1 100%; }

/* ============================================================================
   v2 대리점 찾기 모바일
   설계 : docs/v2-dealer-260922.md   시안 : docs/v2-mobile-figma-260922.md §5 (8037:1760)
   마크업 : view/kor/v2/dealer/lists_m.php
   목록 항목 마크업은 resource/user/naverAPI.js 가 만든다 (PC 와 같다). CSS 로만 손댄다.
   v1 모바일 m_contents.css 390~440 이 같은 클래스(.store_*)를 쓴다. 전부 #container.v2_dealer 로 가둔다.
   ============================================================================ */

/* 위치정보 동의 팝업 — #container 밖(.pop_content). v1 m_contents.css:970~976 위에 얹는다 */
.v2_sub .pop_content .popup_Sml { border-radius: 15px; }
.v2_sub .pop_content .pop_btns > button { width: 43%; margin: 0 3px; border-radius: 5px; }

.v2_sub #container.v2_dealer,
.v2_sub #container.v2_dealer * {
    -webkit-box-sizing: border-box; box-sizing: border-box;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    vertical-align: baseline;
}
.v2_sub .v2_head ~ #container.v2_dealer { padding-top: 50px; }
.v2_sub .v2_head.is-notice ~ #container.v2_dealer { padding-top: 80px; }
.v2_sub #container.v2_dealer .sub_container_wrap { top: 0; margin-bottom: 0; min-height: 0; }
.v2_sub #container.v2_dealer .sub_conts { width: 86.3636%; min-width: 0; margin: 0 auto; }
.v2_sub #container.v2_dealer fieldset { border: 0; padding: 0; margin: 0; }
.v2_sub #container.v2_dealer .hiddens {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------- 서비스 필터 --- */
/* 밴드에서 22. 세로 나열 gap 11. 체크박스 18 / 아이콘 / 라벨 15px 500 */
.v2_sub #container.v2_dealer .v2_dl_filter { margin-top: 22px; }
.v2_sub #container.v2_dealer .v2_dl_filter > p { position: relative; margin: 0; }
.v2_sub #container.v2_dealer .v2_dl_filter > p + p { margin-top: 11px; }
.v2_sub #container.v2_dealer .v2_dl_filter input[type="checkbox"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0;
}
.v2_sub #container.v2_dealer .v2_dl_filter label {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    height: 19px; cursor: pointer; white-space: nowrap;
    font-size: 15px; font-weight: 500; line-height: 18px; color: var(--text-sub2-color);
}
/* 체크박스 18×18 / radius 4 / 체크 표시는 CSS (PC 와 같은 계산, 18 기준으로 축소) */
.v2_sub #container.v2_dealer .v2_chk {
    position: relative; -ms-flex: 0 0 18px; flex: 0 0 18px; width: 18px; height: 18px; margin-right: 5px;
    background: #fff; border: 1px solid var(--text-sub2-color); border-radius: 4px;
}
.v2_sub #container.v2_dealer .v2_chk::after {
    content: ""; position: absolute; left: 6px; top: 2px;
    width: 4px; height: 8px;
    border: solid var(--text-sub2-color); border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
/* 체크 상태 — 활성 #E41F20 (시안 red 는 스냅) */
.v2_sub #container.v2_dealer .v2_dl_filter input:checked + label { color: var(--primary-color); }
.v2_sub #container.v2_dealer .v2_dl_filter input:checked + label .v2_chk { border-color: var(--primary-color); }
.v2_sub #container.v2_dealer .v2_dl_filter input:checked + label .v2_chk::after { border-color: var(--primary-color); }

/* 서비스 아이콘 — 시안 크기. 체크 상태로 off → on */
.v2_sub #container.v2_dealer .v2_dico {
    -ms-flex: 0 0 auto; flex: 0 0 auto; display: block; margin-right: 3px;
    background-repeat: no-repeat; background-position: center;
}
.v2_sub #container.v2_dealer .v2_dico_premium  { width: 19px; height: 19px; background-image: url("../../images/ico/dealer/premium_store_off.svg"); background-size: 19px 19px; }
.v2_sub #container.v2_dealer .v2_dico_service  { width: 18px; height: 18px; background-image: url("../../images/ico/dealer/service_point_off.svg"); background-size: 18px 18px; }
.v2_sub #container.v2_dealer .v2_dico_emaster  { width: 17px; height: 14px; background-image: url("../../images/ico/dealer/e_service_master_off.svg"); background-size: 17px 14px; }
.v2_sub #container.v2_dealer .v2_dico_eservice { width: 20px; height: 18px; background-image: url("../../images/ico/dealer/e_service_point_off.svg"); background-size: 20px 18px; }
.v2_sub #container.v2_dealer .v2_dico_edealer  { width: 12px; height: 19px; background-image: url("../../images/ico/dealer/e_dealer_off.svg"); background-size: 12px 19px; }
.v2_sub #container.v2_dealer input:checked + label .v2_dico_premium  { background-image: url("../../images/ico/dealer/premium_store_on.svg"); }
.v2_sub #container.v2_dealer input:checked + label .v2_dico_service  { background-image: url("../../images/ico/dealer/service_point_on.svg"); }
.v2_sub #container.v2_dealer input:checked + label .v2_dico_emaster  { background-image: url("../../images/ico/dealer/e_service_master_on.svg"); }
.v2_sub #container.v2_dealer input:checked + label .v2_dico_eservice { background-image: url("../../images/ico/dealer/e_service_point_on.svg"); }
.v2_sub #container.v2_dealer input:checked + label .v2_dico_edealer  { background-image: url("../../images/ico/dealer/e_dealer_on.svg"); }

/* 안내문 : 필터에서 12. Info 아이콘 15 + gap 6 + 12px #71797F. 행 gap 9 */
.v2_sub #container.v2_dealer .v2_dl_info { margin-top: 12px; }
.v2_sub #container.v2_dealer .v2_dl_info li {
    position: relative; padding-left: 21px;
    font-size: 12px; font-weight: 400; line-height: 15px; color: var(--text-sub-color);
    word-break: keep-all;
}
.v2_sub #container.v2_dealer .v2_dl_info li + li { margin-top: 9px; }
.v2_sub #container.v2_dealer .v2_dl_info li::before {
    content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px;
    background: url("../../images/ico/info.svg") no-repeat center; background-size: 15px 15px;
}

/* ------------------------------------------------------------- 검색 입력 --- */
/* 안내문에서 22. 행 gap 12. 셀렉트·입력 h 40 / 16px 500 / border #BBBFC7 / radius 5 */
.v2_sub #container.v2_dealer .v2_dl_input { margin-top: 22px; }
.v2_sub #container.v2_dealer .v2_dl_row {
    display: -webkit-box; display: -ms-flexbox; display: flex;
}
.v2_sub #container.v2_dealer .v2_dl_row .v2_dl_sel { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; }
.v2_sub #container.v2_dealer .v2_dl_row .v2_dl_sel + .v2_dl_sel { margin-left: 15px; }
.v2_sub #container.v2_dealer .v2_dl_sel { position: relative; display: block; }
.v2_sub #container.v2_dealer .v2_dl_sel select {
    width: 100%; height: 40px; padding: 8px 34px 8px 12px;
    font-size: 16px; font-weight: 500; line-height: 24px; color: var(--text-sub-color);
    background: #fff; border: 1px solid var(--btn-gray-color); border-radius: 5px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.v2_sub #container.v2_dealer .v2_dl_sel select::-ms-expand { display: none; }
.v2_sub #container.v2_dealer .v2_dl_sel::after {
    content: ""; position: absolute; right: 12px; top: 50%; margin-top: -4.5px;
    width: 14.4px; height: 9px; pointer-events: none;
    background: url("../../images/ico/select_arrow.svg") no-repeat center;
    background-size: 12.5px 6.75px;
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.v2_sub #container.v2_dealer .v2_dl_key { position: relative; display: block; margin-top: 12px; }
.v2_sub #container.v2_dealer .v2_dl_key input[type="text"] {
    width: 100%; height: 40px; padding: 8px 44px 8px 12px;
    font-size: 16px; font-weight: 500; line-height: 24px; color: var(--dark-color);
    background: #fff; border: 1px solid var(--btn-gray-color); border-radius: 5px;
}
.v2_sub #container.v2_dealer .v2_dl_key input::-webkit-input-placeholder { color: var(--text-sub-color); }
.v2_sub #container.v2_dealer .v2_dl_key input::placeholder { color: var(--text-sub-color); }
.v2_sub #container.v2_dealer .v2_dl_btn_search {
    position: absolute; right: 10px; top: 50%; margin-top: -11px;
    width: 22px; height: 22px; padding: 0; border: 0;
    background: url("../../images/ico/search.svg") no-repeat center;
    background-size: 20px 20px; cursor: pointer;
}
.v2_sub #container.v2_dealer .v2_dl_btn_my {
    display: block; width: 100%; height: 40px; margin-top: 12px; padding: 8px 12px;
    font-size: 16px; font-weight: 500; line-height: 24px; color: #fff; text-align: center;
    background: var(--sub-red-color);
    border: 1px solid var(--primary-color); border-radius: 5px; cursor: pointer;
}

/* --------------------------------------------------------------- 결과 --- */
/* 시안 순서 : 지도 → 카운트 → 목록 → 페이징. DOM 은 .store_find 뒤에 #map (naverAPI.js 계약)
   → column-reverse 로 지도를 위로 올린다 (v1 모바일과 같은 수법). 검색에서 22 */
.v2_sub #container.v2_dealer .store_inner {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse; flex-direction: column-reverse;
    margin-top: 22px; padding: 0;
}
/* 지도 380×397 / radius 10 / border #CDD1D5. v1 : height 200 / inline-block */
.v2_sub #container.v2_dealer .store_map {
    display: block; width: 100%; height: 397px; margin: 0;
    border: 1px solid var(--card-border-color); border-radius: 10px; overflow: hidden;
}
/* 목록 블록. v1 : margin-top 60 / border-top 2px #bbb / float */
.v2_sub #container.v2_dealer .store_find {
    display: block; float: none; width: 100%; margin: 23px 0 0; border: 0;
}
/* 카운트 : 16px 500, 숫자 빨강. 목록까지 13. v1 : margin -60 / padding 20 */
.v2_sub #container.v2_dealer .v2_dl_count {
    position: static; width: 100%; margin: 0; padding: 0;
    font-size: 16px; font-weight: 500; line-height: 19px; text-align: left; color: var(--dark-color);
}
.v2_sub #container.v2_dealer .v2_dl_count #count { color: var(--primary-color); }

.v2_sub #container.v2_dealer .store_find > ul { margin: 13px 0 0; }
.v2_sub #container.v2_dealer .store_find > ul > li {
    display: block; width: 100%; min-height: 0; margin: 0; padding: 18px;
    font-size: 13px; text-align: left;
    border-top: 1px solid var(--text-mute-color); border-bottom: 0;
    background: none; cursor: pointer;
}
.v2_sub #container.v2_dealer .store_find > ul > li:last-child { border-bottom: 1px solid var(--text-mute-color); }
.v2_sub #container.v2_dealer .store_find > ul > li:hover,
.v2_sub #container.v2_dealer .store_find > ul > li.store_select { background: var(--band-bg-color); background-image: none; color: inherit; }

/* 점포명 20px 500. 활성 #E41F20 */
.v2_sub #container.v2_dealer .store_find > ul > li strong {
    display: block; font-size: 20px; font-weight: 500; line-height: 24px; color: var(--text-sub2-color);
}
.v2_sub #container.v2_dealer .store_find > ul > li.store_select strong { color: var(--primary-color); }

/* 우측 서비스 아이콘 : 점포명과 같은 줄 우측. v1 : float right + png 20px */
.v2_sub #container.v2_dealer .store_find .icon_store {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    float: none; width: auto; height: 21px; margin: -23px 0 0; padding: 0;
}
.v2_sub #container.v2_dealer .store_find .icon_store > span {
    display: block; margin: 0 0 0 12px; background-repeat: no-repeat; background-position: center;
}
.v2_sub #container.v2_dealer .store_find .icon_store06 { width: 19px; height: 16px; background-image: url("../../images/ico/dealer/e_service_master_off.svg"); background-size: 19px 16px; }
.v2_sub #container.v2_dealer .store_find .icon_store05 { width: 23px; height: 20px; background-image: url("../../images/ico/dealer/e_service_point_off.svg"); background-size: 23px 20px; }
.v2_sub #container.v2_dealer .store_find .icon_store02 { width: 20px; height: 20px; background-image: url("../../images/ico/dealer/service_point_off.svg"); background-size: 20px 20px; }
.v2_sub #container.v2_dealer .store_find .icon_store01 { width: 14px; height: 21px; background-image: url("../../images/ico/dealer/e_dealer_off.svg"); background-size: 14px 21px; }
.v2_sub #container.v2_dealer .store_find .icon_store04 { width: 21px; height: 21px; background-image: url("../../images/ico/dealer/premium_store_off.svg"); background-size: 21px 21px; }
.v2_sub #container.v2_dealer .store_find .store_select .icon_store06 { background-image: url("../../images/ico/dealer/e_service_master_on.svg"); }
.v2_sub #container.v2_dealer .store_find .store_select .icon_store05 { background-image: url("../../images/ico/dealer/e_service_point_on.svg"); }
.v2_sub #container.v2_dealer .store_find .store_select .icon_store02 { background-image: url("../../images/ico/dealer/service_point_on.svg"); }
.v2_sub #container.v2_dealer .store_find .store_select .icon_store01 { background-image: url("../../images/ico/dealer/e_dealer_on.svg"); }
.v2_sub #container.v2_dealer .store_find .store_select .icon_store04 { background-image: url("../../images/ico/dealer/premium_store_on.svg"); }

/* 주소 2줄 · 전화 13px. 활성은 검정, 비활성 #676B72. v1 : p{margin-top 10; color #666} */
.v2_sub #container.v2_dealer .store_find .icon_map {
    width: auto; margin: 12px 0 0; padding: 0;
    font-size: 13px; font-weight: 400; line-height: 16px; color: var(--text-sub2-color);
    word-break: keep-all;
}
.v2_sub #container.v2_dealer .store_find .icon_map > span { display: block; }
.v2_sub #container.v2_dealer .store_find .icon_tel { display: none; }
.v2_sub #container.v2_dealer .store_find .mob_tel {
    display: block; min-height: 0; margin: 12px 0 0; padding: 0;
    font-size: 13px; font-weight: 400; line-height: 16px; color: var(--text-sub2-color);
}
.v2_sub #container.v2_dealer .store_find .store_select .icon_map,
.v2_sub #container.v2_dealer .store_find .store_select .mob_tel { color: var(--dark-color); }

/* 페이지네이션 : 목록에서 14. 화살표 21 / 숫자 36×35 18px / gap 5, 화살표와 26 (PC 와 같은 구조) */
.v2_sub #container.v2_dealer .store_paging {
    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: 100%; margin: 14px 0 0; padding: 0; font-size: 0;
}
.v2_sub #container.v2_dealer .store_paging span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
.v2_sub #container.v2_dealer .store_paging > span + span,
.v2_sub #container.v2_dealer .store_paging > strong + span,
.v2_sub #container.v2_dealer .store_paging > span + strong { margin-left: 5px; }
.v2_sub #container.v2_dealer .store_paging a,
.v2_sub #container.v2_dealer .store_paging strong {
    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: auto; min-width: 36px; height: 35px; line-height: normal;
    font-size: 18px; font-weight: 500; color: var(--dark-color);
    border: 0; background: none;
}
.v2_sub #container.v2_dealer .store_paging strong { font-weight: 700; color: var(--sub-red-color); }
.v2_sub #container.v2_dealer .store_paging a.direction {
    min-width: 21px; width: 21px; height: 21px; padding: 0;
    background: url("../../images/ico/dealer/paging_arrow.svg") no-repeat center;
    background-size: 21px 21px;
}
.v2_sub #container.v2_dealer .store_paging a.direction img { display: none; }
.v2_sub #container.v2_dealer .store_paging a.direction:first-child { margin-right: 21px; }
.v2_sub #container.v2_dealer .store_paging a.direction:last-child {
    margin-left: 21px;
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

/* ============================================================================
   v2 대량 구매 모바일
   설계 : docs/v2-bulk-260922.md   시안 : docs/v2-mobile-figma-260922.md §6 (8037:2008)
   마크업 : view/kor/v2/introduction/buy_m.php (정적)
   ============================================================================ */

.v2_sub #container.v2_buy,
.v2_sub #container.v2_buy * {
    -webkit-box-sizing: border-box; box-sizing: border-box;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    vertical-align: baseline;
}
.v2_sub .v2_head ~ #container.v2_buy { padding-top: 50px; }
.v2_sub .v2_head.is-notice ~ #container.v2_buy { padding-top: 80px; }
.v2_sub #container.v2_buy .sub_container_wrap { top: 0; margin-bottom: 0; min-height: 0; }
.v2_sub #container.v2_buy .sub_conts { width: 86.3636%; min-width: 0; margin: 0 auto; }

/* ------------------------------------------------------------ 상단 배너 --- */
/* 시안 : 380×145 / radius 10 / border #D1DBEA. 밴드에서 31
   배경은 PC 가로 배너가 아니라 모바일 전용 크롭(Rectangle 42, 504×272 → bulk_visual_m.jpg).
   시안 배치 : 이미지 w 108.95% / h 144.65% / top -39.12% / left 0
   → background-size 108.95% 144.65%, y 위치는 (145-210)×p = -57 → p 87.7%
   텍스트 안쪽 14·16, w 230. 제목 17px 500 2줄 / 본문 12px lh 16 (gap 6) */
.v2_sub #container.v2_buy .v2_buy_visual {
    position: relative; width: 100%; height: 145px; margin-top: 31px;
    background: url("../../images/contents/bulk/bulk_visual_m.jpg") no-repeat 0 87.7% / 108.95% 144.65%;
    border: 1px solid var(--chip-border-color); border-radius: 10px; overflow: hidden;
}
.v2_sub #container.v2_buy .v2_buy_visual_txt {
    position: absolute; left: 14px; top: 16px; width: 230px;
}
.v2_sub #container.v2_buy .v2_buy_visual_txt strong {
    display: block; font-size: 17px; font-weight: 500; line-height: 21px; color: var(--dark-color);
}
.v2_sub #container.v2_buy .v2_buy_visual_txt p {
    margin-top: 6px; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--dark-color);
    word-break: keep-all;
}

/* ------------------------------------------------------------ 카드 2×2 --- */
/* 제목 20px 500. 배너에서 17, 카드까지 20 */
.v2_sub #container.v2_buy .v2_buy_tit {
    width: auto; margin: 17px 0 0; font-size: 20px; font-weight: 500; line-height: 24px;
    text-align: left; color: var(--dark-color);
}
/* 시안 : 카드 182×203 / 열 gap 16 / 행 gap 13 / bg #F9FAFD / border #D1DBEA / radius 10 / pt 22 */
.v2_sub #container.v2_buy .v2_buy_cards {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    margin-top: 20px;
}
.v2_sub #container.v2_buy .v2_buy_cards > li {
    position: relative; width: 47.8947%; height: 203px; margin: 0 0 13px; padding: 22px 8px 0;
    text-align: center; overflow: hidden;
    background: var(--band-bg-color);
    border: 1px solid var(--chip-border-color); border-radius: 10px;
}
.v2_sub #container.v2_buy .v2_buy_cards > li:nth-child(n+3) { margin-bottom: 0; }
.v2_sub #container.v2_buy .v2_buy_cards strong {
    display: block; font-size: 15px; font-weight: 500; line-height: 18px; color: var(--dark-color);
    word-break: keep-all;
}
.v2_sub #container.v2_buy .v2_buy_cards p {
    width: auto; margin: 6px 0 0; font-size: 11px; font-weight: 400; line-height: 13px; color: var(--text-sub2-color);
}
/* 일러스트 — 카드 기준 % 는 PC 와 같은 시안 값 */
.v2_sub #container.v2_buy .v2_buy_cards img {
    position: absolute; max-width: none; object-fit: contain;
}
.v2_sub #container.v2_buy .v2_buy_card01 img { left: 3.41%; top: 31.21%; width: 93.17%; height: 57.45%; }
.v2_sub #container.v2_buy .v2_buy_card02 img { left: 8.08%; top: 38.30%; width: 84.53%; height: 51.98%; }
.v2_sub #container.v2_buy .v2_buy_card03 img { left: 5.93%; top: 31.76%; width: 88.14%; height: 65.88%; }
.v2_sub #container.v2_buy .v2_buy_card04 img { left: 0.06%; top: 27.93%; width: 91.97%; height: 64.81%; }

/* ------------------------------------------------------------- 연락처 --- */
/* 시안 : h 64 / bg #F9FAFD / border #D1DBEA / radius 5. 카드에서 16
   시안 렌더 실측(2026-09-22) : 팀명 x 68~168 / 연락처 블록 185~311 → 두 블록 사이 17,
   그룹이 박스 가운데. 폭이 달라져도 같은 모양이 되게 가운데 정렬 + gap 16 으로 잡는다
   (space-between 은 폭에 따라 간격이 벌어진다) */
.v2_sub #container.v2_buy .v2_buy_contact {
    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;
    min-height: 64px; margin-top: 16px; padding: 14px 20px;
    background: var(--band-bg-color);
    border: 1px solid var(--chip-border-color); border-radius: 5px;
}
.v2_sub #container.v2_buy .v2_buy_contact > strong {
    font-size: 12px; font-weight: 500; line-height: 15px; color: var(--dark-color); white-space: nowrap;
}
.v2_sub #container.v2_buy .v2_buy_contact > div { width: auto; margin-left: 16px; }
.v2_sub #container.v2_buy .v2_buy_contact em {
    display: block; font-size: 15px; font-weight: 500; font-style: normal; line-height: 18px; color: var(--dark-color);
}
.v2_sub #container.v2_buy .v2_buy_contact a {
    display: block; margin-top: 1px; font-size: 10px; font-weight: 400; line-height: 13px; color: var(--dark-color);
}

/* ============================================================================
   v2 고객지원 모바일 — 온라인 A/S(as_center · as_search) 부터. 정품등록 2종도 같은 클래스라 같이 걸린다
   설계 : docs/v2-customer-260922.md §9   지시 : 2026-09-22 (시안 없음, 코멘트)
     1) h3.mob_title → 대량구매 모바일과 같은 라벨 밴드 모양
     2) .qa_acctab  → PC 처럼 텍스트 + 밑줄 (모바일 .v2_pdp_tab 값)
     3) 버튼 → 5px radius
   뷰는 그대로(v1), CSS 만 얹는다. 스코프 .v2_pg_customer 는 PC 와 같이 헤더가 #wrap 에 붙인다.
   ============================================================================ */

/* 1) 타이틀 → 라벨 밴드. v1 m_layout.css:169 h3.mob_title{padding 18 / 1.5rem / 하단 #b5b5b5} */
.v2_sub.v2_pg_customer #container h3.mob_title {
    height: 40px; margin: 0; padding: 0;
    background: var(--band-bg-color);
    border-bottom: 1px solid var(--chip-border-color);
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 14px; font-weight: 500; line-height: 40px; color: var(--text-sub2-color);
    text-align: center;
}

/* 2) 탭. v1 m_contents.css:463~467 — li 50% float / 1px #ddd 박스 / 활성·첫 항목 빨강 배경 + 삼각형
   → 텍스트만, 2px 바 (비활성 #ECF0F6 / 활성 #E41F20).
   크기는 모바일 PDP 탭(h 25 / 13px)보다 약간 크게 h 34 / 15px (2026-09-22 "약간만 크게" 지시) */
.v2_sub.v2_pg_customer #container .qa_acctab {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    width: 90%; margin: 0 auto;
}
.v2_sub.v2_pg_customer #container .qa_acctab li,
.v2_sub.v2_pg_customer #container .qa_acctab > li:first-child {
    -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0;
    display: block; float: none; position: static; width: auto; height: 34px; padding: 0;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 15px; font-weight: 500; line-height: 32px; text-align: center;
    color: var(--text-sub-color); background: none;
    border: 0; border-bottom: 2px solid var(--chip-bg-color); cursor: pointer;
}
.v2_sub.v2_pg_customer #container .qa_acctab li.qa_select {
    color: var(--primary-color); background: none; border-bottom-color: var(--primary-color);
}
.v2_sub.v2_pg_customer #container .qa_acctab li.qa_select::after { content: none; display: none; }

/* 3) 버튼 — 색·크기·배치는 v1 그대로, 모서리만 5px */
.v2_sub.v2_pg_customer #container .btn_clorR,
.v2_sub.v2_pg_customer #container .btn_clorB,
.v2_sub.v2_pg_customer #container .btn_check,
.v2_sub.v2_pg_customer #container .btn_addr,
.v2_sub.v2_pg_customer #container .btn_qa,
.v2_sub.v2_pg_customer #container .btn_del,
.v2_sub.v2_pg_customer #container .btn_area > button,
.v2_sub.v2_pg_customer #container .btn_area02 > button {
    border-radius: 5px;
}
/* 달력 버튼은 입력칸 오른쪽에 붙어 있어(border-left:0) 바깥쪽 모서리만 */
.v2_sub.v2_pg_customer #container .btn_calend { border-radius: 0 5px 5px 0; }
/* 첨부파일 "파일찾기" 는 label 이 버튼 모양이다 (.filebox1~4 / .multiFilebox, for="ex_…"). 같이 5px.
   as_center 는 .filebox_wrap 안, refined_write 는 .qa_formTxt li 안이라 for 속성으로 잡는다 */
.v2_sub.v2_pg_customer #container label[for^="ex_"] { border-radius: 5px; }
/* 제품설명서 검색 : 입력칸(border-right 0) + 검색 버튼(border-left 0) 이 붙어 있다. 달력과 같이 바깥쪽만 */
.v2_sub.v2_pg_customer #container .line_search_inner p.inptxt input { border-radius: 5px 0 0 5px; }
.v2_sub.v2_pg_customer #container .line_search_inner .btn_serch { border-radius: 0 5px 5px 0; }
/* 제품설명서 연도 select — 옆 검색 입력(5)과 같은 모서리 */
.v2_sub.v2_pg_customer #container .search_direc .select-box-wrap .qa_select { border-radius: 5px; }

/* 4) 체크박스 라운딩 (2026-09-22 지시). v1 m_layout.css:247~252 — label::before 18×18 PNG(m_checkbox_off/on).
   이미지에는 radius 를 줄 수 없어 PC(.v2_pg_customer, 24px)와 같이 CSS 로 그린다. 크기 18 · 오른쪽 간격 8 은 v1 그대로.
   테두리 #D6D6D6 / V #BBBFC7 / 체크 시 #E41F20 (PC 와 같은 스냅). V 위치는 대리점 .v2_chk(18px) 와 같은 계산 */
.v2_sub.v2_pg_customer #container .checks input[type="checkbox"] + label {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    position: relative;
}
.v2_sub.v2_pg_customer #container .checks input[type="checkbox"] + label::before {
    content: ""; -ms-flex: 0 0 18px; flex: 0 0 18px; width: 18px; height: 18px; margin: 0 8px 0 0;
    -webkit-box-sizing: border-box; box-sizing: border-box;
    background: #fff; border: 1px solid var(--input-border-color); border-radius: 5px;
}
.v2_sub.v2_pg_customer #container .checks input[type="checkbox"] + label::after {
    content: ""; display: block; position: absolute; left: 6px; top: 50%; margin-top: -6px;
    width: 4px; height: 8px; padding: 0;
    border: solid var(--btn-gray-color); border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.v2_sub.v2_pg_customer #container .checks input[type="checkbox"]:checked + label { color: var(--primary-color); }
.v2_sub.v2_pg_customer #container .checks input[type="checkbox"]:checked + label::before { border-color: var(--primary-color); background: #fff; }
.v2_sub.v2_pg_customer #container .checks input[type="checkbox"]:checked + label::after { border-color: var(--primary-color); }

/* 5) FAQ 탭 .qa_tabs — v1 m_contents.css:444~448 : 인라인 nowrap + "|" 구분 + 활성 span 밑줄(#d20004).
   밑줄 탭으로. 크기는 .qa_acctab 와 같은 h 34 / 15px.
   2026-09-22 지시 : 가로 스크롤 대신 **한 줄에 균등 간격(space-between)**. 5개 합산 약 287px 라 380 기준(342) 안에 든다.
   faq.js 가 클릭한 a 에 select_tabs + active_nor 를 붙인다 (v1 layout .active_nor{display:block !important} — a 는 원래 block 이라 무해) */
.v2_sub.v2_pg_customer #container .qa_tabs {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    width: 90%; margin: 0 auto; padding: 0;
    border-bottom: 1px solid var(--chip-border-color); text-align: left;
    overflow: visible; white-space: nowrap;
}
/* 탭이 남는 폭을 나눠 가져 밑줄(a 의 border-bottom)이 탭 사이에서 끊기지 않게. 글자는 탭 가운데 */
.v2_sub.v2_pg_customer #container .qa_tabs > li { -ms-flex: 1 1 auto; flex: 1 1 auto; display: block; margin: 0; text-align: center; }
.v2_sub.v2_pg_customer #container .qa_tabs > li > a,
.v2_sub.v2_pg_customer #container .qa_tabs > li > a:hover,
.v2_sub.v2_pg_customer #container .qa_tabs > li > a:active {
    display: block; height: 34px; padding: 0; position: static;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 15px; font-weight: 500; line-height: 32px; color: var(--text-sub-color);
    background: none; border-bottom: 2px solid var(--chip-bg-color);
}
.v2_sub.v2_pg_customer #container .qa_tabs > li > a::after { content: none; padding: 0; }
.v2_sub.v2_pg_customer #container .qa_tabs > li > a span,
.v2_sub.v2_pg_customer #container .qa_tabs > li > a span.sub_1dep_select {
    padding: 0; border: 0; color: inherit;
}
.v2_sub.v2_pg_customer #container .qa_tabs > li > a.select_tabs {
    color: var(--primary-color); border-bottom-color: var(--primary-color);
}

/* ============================================================================
   v2 all ways 모바일 — 공통 페이징 작업 모바일 (docs/v2-customer-260922.md §9-1) 적용
   설계 : docs/v2-allways-260922.md   지시 : 2026-09-22
   뷰는 v1 story.php 그대로. 스코프 .v2_pg_intro_story 는 Introduction::_remap 이 v2_page 로 넘긴다.
   ============================================================================ */

/* 1) 타이틀 → 라벨 밴드. v1 은 span 이 로고 이미지(m_allways_logo.png, text-indent). 밴드 타이틀은 텍스트 "all ways"
   (확정 D 표 — 시안의 "온라인 A/S" 는 오류). 뷰를 안 고치므로 span 을 감추고 ::before 로 글자를 넣는다 */
.v2_sub.v2_pg_intro_story #container h3.mob_title {
    height: 40px; margin: 0; padding: 0;
    background: var(--band-bg-color);
    border-bottom: 1px solid var(--chip-border-color);
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 14px; font-weight: 500; line-height: 40px; color: var(--text-sub2-color);
    text-align: center;
}
.v2_sub.v2_pg_intro_story #container h3.mob_title span { display: none; }
.v2_sub.v2_pg_intro_story #container h3.mob_title::before { content: "all ways"; }

/* 2) 탭 .social_acctab — v1 m_contents.css:711~714 : li 50% float / 1px #ddd 박스 / 이미지 탭(samch01·02.png, 활성 _on).
   PC(.v2_story_tab)처럼 Pretendard 텍스트 + 밑줄로. 이미지는 감추고 ::before 로 글자를 넣는다 (뷰는 v1 그대로).
   규격은 모바일 .v2_pdp_tab(13px 500 / h25 / 바 2) — 고객지원 탭과 같다. 활성 li.on 은 common_v2.js 가 붙인다 */
.v2_sub.v2_pg_intro_story #container .social_acctab {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    width: 90%; margin: 0 auto; border: 0;
}
.v2_sub.v2_pg_intro_story #container .social_acctab li,
.v2_sub.v2_pg_intro_story #container .social_acctab li:first-child {
    -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0;
    display: block; float: none; width: auto; height: auto; padding: 0; line-height: normal;
    text-align: center; border: 0; cursor: pointer;
}
.v2_sub.v2_pg_intro_story #container .social_acctab li a {
    display: block; height: 25px; line-height: 23px;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 13px; font-weight: 500; color: var(--text-sub-color);
    border-bottom: 2px solid var(--chip-bg-color); white-space: nowrap;
}
.v2_sub.v2_pg_intro_story #container .social_acctab li.on a { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.v2_sub.v2_pg_intro_story #container .social_acctab li a img { display: none; }
.v2_sub.v2_pg_intro_story #container .social_acctab li:first-child a::before { content: "all ways"; }
.v2_sub.v2_pg_intro_story #container .social_acctab li:nth-child(2) a::before { content: "moments"; }

/* moments 타일 — 흰 글상자(.hover_txt) + 이미지를 한 카드로 묶어 li 에 radius 20.
   v1 은 글상자가 absolute 말풍선(::after 꼬리)이고 이미지가 margin-top 95 로 그 아래 깔린다.
   글상자를 흐름에 두고 이미지를 바로 붙인다. 꼬리(사선)는 없앤다. 각 요소의 개별 radius 는 0 — 카드 모서리는 li 가 자른다 */
.v2_sub.v2_pg_intro_story #container .samch_year li { border-radius: 20px; overflow: hidden; background: #fff; }
.v2_sub.v2_pg_intro_story #container .samch_year li .hover_txt { display: block; position: static; }
.v2_sub.v2_pg_intro_story #container .samch_year li .hover_txt::after { display: none; }
.v2_sub.v2_pg_intro_story #container .samch_year li img { margin-top: 0; border-radius: 0; }
/* moments 회색 배경을 푸터까지 채운다. v1 .samch_year 의 margin-bottom 72 가 배경 밖으로 빠지고
   공통 본문 끝 여백(#container padding-bottom 40)이 더해져 흰 띠 112 가 생겼다.
   → 여백을 배경 안(padding 40)으로 넣고 이 페이지만 본문 끝 여백을 없앤다. 마지막 카드~푸터 132 → 60 */
.v2_sub.v2_pg_intro_story #container { padding-bottom: 0; }
.v2_sub.v2_pg_intro_story #container .samch_year { margin-bottom: 0; }
.v2_sub.v2_pg_intro_story #container .inbg_color.moments_mp { padding-bottom: 40px; }

/* all ways 본문 이미지(.prodt_area.disInblk .ssam_img01~03, 배경 이미지 div, h 30vh) — PC 시안(1080×600 radius 20)과 같이 20px 라운드
   (2026-09-22 지시). 텍스트·구분선 등 나머지는 v1 그대로 */
.v2_sub.v2_pg_intro_story #container .ssam_img01,
.v2_sub.v2_pg_intro_story #container .ssam_img02,
.v2_sub.v2_pg_intro_story #container .ssam_img03 {
    border-radius: 20px; overflow: hidden;
    /* v1 은 h 30vh 에 background-size 100% 라 이미지가 잘리거나 모자란다 → 이미지 비율 그대로 전체 노출 (2026-09-22 지시)
       이미지는 PC 와 같은 v2 자산(1080×600)으로 교체. 비율 600 ÷ 1080 = 55.556% */
    height: 0; padding-top: 55.556%; background-size: 100% auto;
}
.v2_sub.v2_pg_intro_story #container .ssam_img01 { background-image: url('/resource/ko/v2/images/contents/allways/allways_01.jpg'); }
.v2_sub.v2_pg_intro_story #container .ssam_img02 { background-image: url('/resource/ko/v2/images/contents/allways/allways_02.jpg'); }
.v2_sub.v2_pg_intro_story #container .ssam_img03 { background-image: url('/resource/ko/v2/images/contents/allways/allways_03.jpg'); }
/* 본문 행간 24 → 23 (지시 : 1px 축소) */
.v2_sub.v2_pg_intro_story #container .ssam_txt p { line-height: 23px; }

/* ============================================================================
   v2 선수 후원 모바일 (introduction/page?load=rider) — 공통 페이징 작업 모바일 (docs/v2-customer-260922.md §9-1)
   지시 : 2026-09-22. 뷰는 v1 rider.php 그대로. 스코프 .v2_pg_intro_rider (Introduction::_remap 의 v2_page).
   버튼·체크박스는 이 페이지에 없다.
   ============================================================================ */

/* 1) 타이틀 → 라벨 밴드 */
.v2_sub.v2_pg_intro_rider #container h3.mob_title {
    height: 40px; margin: 0; padding: 0;
    background: var(--band-bg-color);
    border-bottom: 1px solid var(--chip-border-color);
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 14px; font-weight: 500; line-height: 40px; color: var(--text-sub2-color);
    text-align: center;
}

/* 2) 탭 .rider_acctab — v1 m_contents.css:728~733 : li 1/3 float / 1px #ddd 박스 / 이미지 탭(samch03·04·05, 활성 _on).
   v2 뷰(view/kor/v2/introduction/rider_m.php)에서 텍스트 탭. 글자·밑줄은 윤리경영·투자정보 모바일 탭과 같은 값. 활성 a.on */
.v2_sub.v2_pg_intro_rider #container .rider_acctab {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    width: 90%; margin: 0 auto; border: 0; overflow: visible;
}
.v2_sub.v2_pg_intro_rider #container .rider_acctab li,
.v2_sub.v2_pg_intro_rider #container .rider_acctab li:first-child {
    -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0;
    display: block; float: none; width: auto; height: auto; padding: 0; line-height: normal;
    text-align: center; border: 0;
}
.v2_sub.v2_pg_intro_rider #container .rider_acctab li a {
    display: block; height: 34px; line-height: 32px;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 15px; font-weight: 500; color: var(--text-sub-color);
    border-bottom: 2px solid var(--chip-bg-color);
}
.v2_sub.v2_pg_intro_rider #container .rider_acctab li a.on { color: var(--primary-color); border-bottom-color: var(--primary-color); }

/* 선수 후원 본문 (2026-09-22 지시 3건)
   - intro·history 이미지(rider_intro_m 364×325 / rider_history_m 364×130)가 원본 폭 그대로 나와 컨테이너(약 396)의 92% → 가로 100%
   - cont3 장비 이미지(img.m_img, v1 border 1px #e7e7e7) 20px 라운드 (all ways 와 같은 값)
   - cont3 "제품보기"(.text_wrap a, 30px 빨간 바) 5px 라운드 — 공통 페이징 작업의 버튼 규칙 */
.v2_sub.v2_pg_intro_rider #container .ride_cont .m_img img,
.v2_sub.v2_pg_intro_rider #container .ride_cont img.m_img { width: 100%; height: auto; vertical-align: top; }
.v2_sub.v2_pg_intro_rider #container .ride_cont.cont3 .m_img { border-radius: 20px; }
.v2_sub.v2_pg_intro_rider #container .ride_cont.cont3 .text_wrap a { border-radius: 5px; }

/* ============================================================================
   v2 윤리경영 · 투자정보 모바일 — 공통 페이징 작업 모바일 (docs/v2-customer-260922.md §9-1)
   지시 : 2026-09-22. 뷰는 v1 그대로. 투자정보(재무 finance / 주가 stock / IR irList)는 외부(gsifn) iframe 이라
   타이틀과 탭만 적용한다. 스코프 .v2_pg_intro_<load|method> (Introduction::_remap).
   ============================================================================ */

/* 1) 타이틀 → 라벨 밴드. 페이지 타이틀(.sub_container_wrap 직계)만. 윤리경영 본문 안 h3.mob_title(절 제목)은 v1 그대로 */
.v2_sub.v2_pg_intro_ethics #container .sub_container_wrap > h3.mob_title,
.v2_sub.v2_pg_intro_finance #container .sub_container_wrap > h3.mob_title,
.v2_sub.v2_pg_intro_stock #container .sub_container_wrap > h3.mob_title,
.v2_sub.v2_pg_intro_irList #container .sub_container_wrap > h3.mob_title,
.v2_sub.v2_pg_news_list #container .sub_container_wrap > h3.mob_title,
.v2_sub.v2_pg_news_view #container .sub_container_wrap > h3.mob_title {
    height: 40px; margin: 0; padding: 0;
    background: var(--band-bg-color);
    border-bottom: 1px solid var(--chip-border-color);
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 14px; font-weight: 500; line-height: 40px; color: var(--text-sub2-color);
    text-align: center;
}

/* 2) 탭 — 윤리경영 .ethics_tab(2개, common.js 가 a.on 토글) / 투자정보 .inves_tabs(3개, 페이지 이동, a.select_tabs)
   v1 : li 50%·33% float / 1px #ddd 박스 / 활성·hover 빨강 배경 + 삼각형 → 텍스트 + 2px 밑줄 h 34 / 15px */
.v2_sub.v2_pg_intro_ethics #container .ethics_tab,
.v2_sub.v2_pg_intro_finance #container .inves_tabs,
.v2_sub.v2_pg_intro_stock #container .inves_tabs,
.v2_sub.v2_pg_intro_irList #container .inves_tabs {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    width: 90%; margin: 0 auto; border: 0; overflow: visible;
}
.v2_sub.v2_pg_intro_ethics #container .ethics_tab li,
.v2_sub.v2_pg_intro_finance #container .inves_tabs > li,
.v2_sub.v2_pg_intro_stock #container .inves_tabs > li,
.v2_sub.v2_pg_intro_irList #container .inves_tabs > li,
.v2_sub.v2_pg_intro_finance #container .inves_tabs > li:first-child,
.v2_sub.v2_pg_intro_stock #container .inves_tabs > li:first-child,
.v2_sub.v2_pg_intro_irList #container .inves_tabs > li:first-child {
    -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0;
    display: block; float: none; width: auto; padding: 0; border: 0; text-align: center;
}
.v2_sub.v2_pg_intro_ethics #container .ethics_tab li a,
.v2_sub.v2_pg_intro_ethics #container .ethics_tab li a:hover,
.v2_sub.v2_pg_intro_ethics #container .ethics_tab li a:focus,
.v2_sub.v2_pg_intro_ethics #container .ethics_tab li a:active,
.v2_sub.v2_pg_intro_finance #container .inves_tabs > li > a,
.v2_sub.v2_pg_intro_finance #container .inves_tabs > li > a:hover,
.v2_sub.v2_pg_intro_finance #container .inves_tabs > li > a:focus,
.v2_sub.v2_pg_intro_finance #container .inves_tabs > li > a:active,
.v2_sub.v2_pg_intro_stock #container .inves_tabs > li > a,
.v2_sub.v2_pg_intro_stock #container .inves_tabs > li > a:hover,
.v2_sub.v2_pg_intro_stock #container .inves_tabs > li > a:focus,
.v2_sub.v2_pg_intro_stock #container .inves_tabs > li > a:active,
.v2_sub.v2_pg_intro_irList #container .inves_tabs > li > a,
.v2_sub.v2_pg_intro_irList #container .inves_tabs > li > a:hover,
.v2_sub.v2_pg_intro_irList #container .inves_tabs > li > a:focus,
.v2_sub.v2_pg_intro_irList #container .inves_tabs > li > a:active {
    display: block; width: 100%; height: 34px; padding: 0; position: static;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 15px; font-weight: 500; line-height: 32px; color: var(--text-sub-color);
    background: none; border: 0; border-bottom: 2px solid var(--chip-bg-color);
}
.v2_sub.v2_pg_intro_ethics #container .ethics_tab li a.on,
.v2_sub.v2_pg_intro_finance #container .inves_tabs > li > a.select_tabs,
.v2_sub.v2_pg_intro_stock #container .inves_tabs > li > a.select_tabs,
.v2_sub.v2_pg_intro_irList #container .inves_tabs > li > a.select_tabs {
    color: var(--primary-color); background: none; border-bottom-color: var(--primary-color);
}
.v2_sub.v2_pg_intro_ethics #container .ethics_tab li a.on::after,
.v2_sub.v2_pg_intro_finance #container .inves_tabs > li > a.select_tabs::after,
.v2_sub.v2_pg_intro_stock #container .inves_tabs > li > a.select_tabs::after,
.v2_sub.v2_pg_intro_irList #container .inves_tabs > li > a.select_tabs::after { content: none; display: none; }

/* 3) 버튼 — 윤리경영 "윤리강령 다운로드"(.policy_down) 5px. 투자정보는 버튼 없음 (iframe) */
.v2_sub.v2_pg_intro_ethics #container .policy_down { border-radius: 5px; }

/* IR정보(irList) 버튼 5px (2026-09-22 지시) — 목록의 "PDF Download"(.btn_down, JS 렌더) · 더보기(.btn_add.btn_clorR) */
.v2_sub.v2_pg_intro_irList #container .btn_down,
.v2_sub.v2_pg_intro_irList #container .btn_add { border-radius: 5px; }

/* 선수 후원 intro·history 이미지(.cont1/.cont2 .m_img img) 20px 라운드 (2026-09-22 지시) */
.v2_sub.v2_pg_intro_rider #container .ride_cont.cont1 .m_img img,
.v2_sub.v2_pg_intro_rider #container .ride_cont.cont2 .m_img img { border-radius: 20px; }


/* ============================================================================
   v2 뉴스 목록 · 상세 모바일 — 설계 : docs/v2-news-260930.md
   뷰·JS 는 v1 그대로. 스코프 .v2_pg_news_list / .v2_pg_news_view (News::_remap). 라벨 밴드는 위 윤리경영·투자정보 규칙에 셀렉터를 같이 걸었다.
   ============================================================================ */

/* 타이틀 문구 "뉴스·이벤트" (all ways 모바일과 같은 방식) */
.v2_sub.v2_pg_news_list #container .sub_container_wrap > h3.mob_title,
.v2_sub.v2_pg_news_view #container .sub_container_wrap > h3.mob_title { font-size: 0; }
.v2_sub.v2_pg_news_list #container .sub_container_wrap > h3.mob_title::before,
.v2_sub.v2_pg_news_view #container .sub_container_wrap > h3.mob_title::before { content: "뉴스·이벤트"; font-size: 14px; }

/* 태그 — 메인 모바일 뉴스·이벤트 태그(m_main.css .v2_news_tags em) 색·모양 : 배경 --sub-red / 테두리 --sub-red-border / radius 3 / 흰 글자.
   크기는 메인 5.5px(행 옆 초소형 칩) 대신 PC 와 같은 12px · 패딩 2/9.
   상단 필터 .heshtag2 는 선택 구분이 있어야 해서 기본 회색, 선택(li.on)만 빨강 (PC 와 같음)
   상세 하단 .view_txt .heshtag 은 목록 태그와 같이 빨강 */
.v2_sub.v2_pg_news_list #container .prodt_area .heshtag2,
.v2_sub.v2_pg_news_list #container .news_info .heshtag3,
.v2_sub.v2_pg_news_list #container .newsTXT_info .heshtag4,
.v2_sub.v2_pg_news_view #container .view_txt .heshtag { font-size: 0; line-height: 0; }
.v2_sub.v2_pg_news_list #container .prodt_area .heshtag2 li,
.v2_sub.v2_pg_news_list #container .prodt_area .heshtag2 li.on,
.v2_sub.v2_pg_news_list #container .news_info .heshtag3 li,
.v2_sub.v2_pg_news_list #container .news_info .heshtag3 li:hover,
.v2_sub.v2_pg_news_list #container .newsTXT_info .heshtag4 li,
.v2_sub.v2_pg_news_list #container .newsTXT_info .heshtag4 li:hover,
.v2_sub.v2_pg_news_view #container .view_txt .heshtag li,
.v2_sub.v2_pg_news_view #container .view_txt .heshtag li:hover {
    display: inline-flex; align-items: center; padding: 2px 9px; margin: 0 6px 6px 0;
    font-size: 12px; font-weight: 500; line-height: normal; text-align: center;
    background: var(--sub-red-color);
    border: .5px solid var(--sub-red-border-color); border-radius: 3px;
}
.v2_sub.v2_pg_news_list #container .prodt_area .heshtag2 li {
    background: var(--btn-gray-color);
    border-color: var(--text-mute-color);
}
.v2_sub.v2_pg_news_list #container .prodt_area .heshtag2 li.on {
    background: var(--sub-red-color);
    border-color: var(--sub-red-border-color);
}
.v2_sub.v2_pg_news_list #container .prodt_area .heshtag2 li a,
.v2_sub.v2_pg_news_list #container .news_info .heshtag3 li span,
/* 안쪽 글자는 v1 의 줄높이 14.4 · vertical-align top 때문에 칸 위로 붙는다 → 글자 높이 그대로 가운데 */
.v2_sub.v2_pg_news_list #container .newsTXT_info .heshtag4 li span,
.v2_sub.v2_pg_news_view #container .view_txt .heshtag li { font-size: 12px; line-height: normal; vertical-align: baseline; color: #fff; }
.v2_sub.v2_pg_news_view #container .view_txt .heshtag li::after { display: none; }

/* 목록 사진 15 라운드 */
.v2_sub.v2_pg_news_list #container .news_lst li img { border-radius: 15px; }

/* 검색 입력 + 버튼 : 바깥 모서리 10 (PC 와 같음) */
.v2_sub.v2_pg_news_list #container .news_search p.inptxt input { border-radius: 10px 0 0 10px; }
.v2_sub.v2_pg_news_list #container .news_search .btn_serch { border-radius: 0 10px 10px 0; }

/* 더보기(목록) · 목록(상세) 5px */
.v2_sub.v2_pg_news_list #container .btn_add,
.v2_sub.v2_pg_news_view #container .btn_add { border-radius: 5px; }

/* 검은 선 #333 → --text-mute-color(#A1A5AE). 목록 : 목록 상단 · 마지막 글 하단 / 상세 : 머리 하단 · 본문 하단 */
.v2_sub.v2_pg_news_list #container .news_lst { border-top-color: var(--text-mute-color); }
.v2_sub.v2_pg_news_list #container .news_lst > li:last-child { border-bottom-color: var(--text-mute-color); }
.v2_sub.v2_pg_news_view #container .news_view,
.v2_sub.v2_pg_news_view #container .news_view_head { border-bottom-color: var(--text-mute-color); }

/* 상세 SNS(페이스북·트위터) 삭제 */
.v2_sub.v2_pg_news_view #container .news_sns { display: none; }


/* ============================================================================
   v2 키워드로 찾기 모바일 — 설계 : docs/v2-keyword-260923.md §6
   마크업 : view/kor/v2/bicycle/keyword_m.php. 컨테이너에 .v2_plp 를 같이 붙여
   밴드·카드·태그칩·정렬바는 위 PLP 모바일 규칙을 그대로 받는다. 여기는 키워드 전용만.
   v1 m_contents.css:214~252(검색·칩·버튼) / 991~1015(슬라이더) 위에 얹는다. PC 와 같은 지시값.
   ============================================================================ */

/* 검색 입력 + 버튼 : 바깥 모서리 15, 배경 --primary. v1 은 input 80% + 버튼 20% 한 줄 */
.v2_sub #container.v2_keyword .search_keywod { width: 86.3636%; margin: 20px auto 0; font-size: 0; }
.v2_sub #container.v2_keyword input.inpu_keywod {
    border-radius: 15px 0 0 15px; background-color: var(--primary-color); vertical-align: top;
}
.v2_sub #container.v2_keyword .btn_corW {
    border-radius: 0 15px 15px 0; background-color: var(--primary-color); vertical-align: top;
}

/* 추천 키워드 칩 : radius 10, 선택 = 흰 글자 + --sub-red. 온탭(:active)도 같은 색 */
.v2_sub #container.v2_keyword .recomm_keywod > ul > li > a { border-radius: 10px; }
.v2_sub #container.v2_keyword .recomm_keywod > ul > li > a:active,
.v2_sub #container.v2_keyword .recomm_keywod > ul > li > a.key_select {
    color: #fff; background: var(--sub-red-color); border-color: var(--sub-red-color);
}

/* 가격 슬라이더 바 */
.v2_sub #container.v2_keyword .silder_box div.bar { background: var(--primary-color); }

/* 검색 / 초기화 버튼 : radius 10, 검색 배경 --primary. v1 의 버튼 줄 하단 선은 뺀다 */
.v2_sub #container.v2_keyword .btn_area { border-bottom: 0; padding-bottom: 0; }
.v2_sub #container.v2_keyword .btn_area > button { border-radius: 10px; }
.v2_sub #container.v2_keyword .btn_clorR { background-color: var(--primary-color); }

/* 결과 줄 : "총 n건" 좌 / 정렬 우 한 줄, 하단 1px --text-mute. 카드는 같은 폭(콘텐츠 380) */
.v2_sub #container.v2_keyword .keylst_result { width: 100%; margin: 25px auto 0; }   /* .prodt_area(380) 안이라 100% */
.v2_sub #container.v2_keyword .result_txt {
    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%; margin: 0; padding-bottom: 8px;
    border-bottom: 1px solid var(--text-mute-color);
}
.v2_sub #container.v2_keyword .result_txt > p { font-size: 13px; line-height: 16px; color: var(--dark-color); }
.v2_sub #container.v2_keyword .result_txt > p > span { color: var(--primary-color); }
.v2_sub #container.v2_keyword .cost_order { width: auto; margin: 0; }
.v2_sub #container.v2_keyword ul.prodt_lst { margin-top: 12px; }


/* ============================================================================
   v2 통합검색 결과 모바일 — 설계 : docs/v2-search-260923.md
   마크업 : view/kor/v2/introduction/searchList_m.php. 컨테이너에 .v2_plp 를 같이 붙여
   밴드·카드·태그칩은 PLP 모바일 규칙을 받는다. 여기는 검색 전용만.
   v1 m_contents.css:255~273(검색·건수·구분·결과없음) 위에 얹는다. PC 와 같은 지시값.
   ============================================================================ */

/* 검색 입력 + 버튼 : v1 회색 배경 제거, 바깥 모서리 15, 배경 --primary */
.v2_sub #container.v2_search .line_search_inner02 { width: 100%; padding-top: 20px; background: none; font-size: 0; }
.v2_sub #container.v2_search .line_search_inner02 p.inptxt { width: 100%; }
.v2_sub #container.v2_search .line_search_inner02 p.inptxt input {
    border-radius: 15px 0 0 15px; background-color: var(--primary-color); vertical-align: top;
}
.v2_sub #container.v2_search .line_search_inner02 .btn_serch {
    border-radius: 0 15px 15px 0; background-color: var(--primary-color); vertical-align: top;
}

/* 건수 + 연도 탭 한 줄. v1 회색 배경·안쪽 여백 제거, 하단 1px --text-mute */
.v2_sub #container.v2_search .search_year {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    width: 100%; margin: 25px 0 0; padding: 0 0 8px;
    background: none; border-bottom: 1px solid var(--text-mute-color);
}
.v2_sub #container.v2_search .search_year p { float: none; margin: 0; padding: 0; font-size: 13px; line-height: 16px; color: var(--dark-color); }
.v2_sub #container.v2_search .search_year p span { color: var(--primary-color); }
.v2_sub #container.v2_search .last_year { display: block; margin: 0; font-size: 0; white-space: nowrap; }
.v2_sub #container.v2_search .last_year li { display: inline-block; vertical-align: middle; }
.v2_sub #container.v2_search .last_year li + li::before {
    content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 8px;
    background: var(--text-mute-color); vertical-align: middle;
}
.v2_sub #container.v2_search .last_year li a { display: inline-block; font-size: 10px; line-height: 12px; color: var(--text-mute-color); vertical-align: middle; }
.v2_sub #container.v2_search .last_year li a.last_select { color: var(--sub-red-color); }

/* 구분 제목 — 세로바 삭제(지시). 용품 앞 상단선은 --text-mute */
.v2_sub #container.v2_search p.prodtdep { width: 100%; margin: 0; padding: 20px 0 0; font-size: 16px; font-weight: 500; color: var(--dark-color); }
.v2_sub #container.v2_search p.prodtdep::before { content: none; display: none; }
.v2_sub #container.v2_search p.prodtdep + ul.prodt_lst { margin-top: 10px; }
.v2_sub #container.v2_search ul.prodt_lst + p.prodtdep { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--text-mute-color); }

/* 결과 없음 — 카드 규칙이 걸리지 않게. v1 배경 이미지는 뺀다 */
.v2_sub #container.v2_search ul.prodt_lst > li.norl_list,
.v2_sub #container.v2_search ul.prodt_lst > li.norl_list:hover {
    width: 100%; padding: 60px 0; font-size: 14px; text-align: center; color: var(--text-sub-color);
    background: none; border: 0; border-radius: 0;
}


/* ============================================================================
   v2 윤리 경영 모바일 — 설계 : docs/v2-ethics-260923.md
   마크업 : view/kor/v2/introduction/ethics.php (PC 와 공용, ethics_m.php 가 부른다). 탭·버튼 규칙은 위 .v2_pg_intro_ethics 블록 그대로.
   밴드는 공용 .v2_plp_mband. 제목(.pol_title / h3.mob_title)과 상단선이 빠져 첫 블록 위 20.
   ============================================================================ */
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .ethics_cont > .policy:first-child { margin-top: 20px; padding-top: 0; border-top: 0; }
/* 윤리 위반 신고 탭 메일 줄(p.ethics_mail) — 안내문 p 와 같은 v1 규칙(7% 들여쓰기, m_contents.css:932)을 받는다.
   라벨 + 메일이 블록 폭을 넘어 두 줄로 꺾이던 것은 14px 한 줄로. 링크는 inline-block(행간 19)이라
   글줄(32)과 세로가 어긋났다 → inline 으로 글줄에 태운다 */
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .inside_txt p.ethics_mail {
    font-size: 14px; line-height: 24px; color: var(--dark-color); white-space: nowrap;
}
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .inside_txt p.ethics_mail a {
    display: inline; font-size: 14px; line-height: inherit; vertical-align: baseline;
}