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

   서브페이지 본문 조정은 원칙적으로 여기에 .v2_sub 스코프로 넣는다
   (현행 사이트에 영향을 주지 않고 v2 오픈 시 함께 적용된다).
   현행에도 즉시 반영해야 하는 건은 v1 파일(resource/ko/css/)을 직접 고치고
   여기에는 남기지 않는다 — 같은 값이 두 곳에 있으면 나중에 어긋난다.

   ※ 폼·select 크기 문제로 넣었던 개별 보정(.qa_select 폭 고정, .btn_calend border-box,
     .select-box-wrap select border-box, .borL_nor 정렬)은 전부 제거했다.
     원인이 pc/layout.css 의 box-sizing 되돌리기가 폼 컨트롤까지 덮은 것이었고,
     그쪽을 고쳐서 v1 과 같은 상태가 됐다. 증상별 보정을 남겨두면 오히려 v1 과 달라진다. */

/* ============================================================================
   v2 자전거 리스트 (PLP) — 종류별로 찾기 / 브랜드로 찾기
   설계 : docs/v2-bicycle-list-260922.md   시안 : docs/v2-gnb-figma-260922.md §1

   마크업은 view/kor/v2/bicycle/lists.php 다. v1 뷰와 클래스가 겹치는 곳이 있어
   (.sub_conts / .cost_order / .prodt_lst / .heshtag) 전부 #container.v2_plp 로 가둔다.
   pc/layout.css 의 v1 호환 되돌리기는 :where() 명시도 0 이라 아래 규칙이 이긴다.
   ============================================================================ */

/* 상단 GNB 바 보정은 pc/layout.css 가 서브 프리뷰 전체에 적용한다.
   여기에 같은 값을 다시 두지 않는다 — 두 곳에 있으면 나중에 어긋난다. */

.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;
}

/* ------------------------------------------------------------- 카테고리 밴드 --- */
/* 시안 : bg #F9FAFD / h 117 / 1뎁스명 중앙 24 / 2뎁스 탭 중앙 18
   밴드 클래스는 v1 과 겹치지 않는 신규라 페이지 클래스(.v2_plp / .v2_dealer …)에 묶지 않는다.
   묶어 두면 다른 페이지에서 밴드가 통째로 안 먹는다 (대리점 찾기에서 실제로 났던 문제). */
.v2_sub #container .v2_plp_band {
    width: 100%; min-width: 1080px; height: 117px;
    padding-top: 30px;
    background: var(--band-bg-color);
    border-top: 1px solid var(--chip-border-color);
    border-bottom: 1px solid var(--chip-border-color);
    text-align: center;
}
.v2_sub #container .v2_plp_band_tit {
    display: block; font-size: 24px; font-weight: 600; line-height: 1.2;
    color: var(--text-sub2-color);
}
.v2_sub #container .v2_plp_tab {
    margin-top: 10px; font-size: 0;
}
.v2_sub #container .v2_plp_tab > li {
    display: inline-block; margin: 0 8.5px;   /* 시안 gap 17 */
}
.v2_sub #container .v2_plp_tab > li > a {
    font-size: 18px; font-weight: 400; line-height: 1.2;
    color: var(--text-sub3-color);
}
.v2_sub #container .v2_plp_tab > li > a.on {
    font-weight: 600; color: var(--sub-red-border-color);
    text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}
/* 카테고리 수량. 상품이 없는 카테고리는 (0) 으로 나온다 (컨트롤러에서 0 으로 채움) */
.v2_sub #container .v2_plp_tab em { font-style: normal; }

/* --------------------------------------------------------------- 본문 상단 --- */
.v2_sub #container.v2_plp .sub_container_wrap {
    margin: 15px auto 80px; min-height: 0;
}
/* 브레드크럼 — 시안 12px / 일반 #A1A5AE / 현재 강조색 */
.v2_sub #container.v2_plp .loction_nav li { font-size: 12px; font-weight: 500; color: var(--text-mute-color); }
.v2_sub #container.v2_plp .loction_nav li a { color: var(--text-mute-color); }
.v2_sub #container.v2_plp .loction_nav li::after { padding: 0 7px; color: var(--chip-border-color); }
.v2_sub #container.v2_plp .loction_nav li:last-child { color: var(--primary-color); }

/* 배너에서 내려온 페이지 타이틀 / 설명 */
.v2_sub #container.v2_plp .v2_plp_head {
    width: 1080px; margin: 0 auto; padding: 38px 0 30px; text-align: left;
}
.v2_sub #container.v2_plp .v2_plp_head h2 {
    font-size: 33px; font-weight: 600; line-height: 1.2; color: var(--dark-color);
}
.v2_sub #container.v2_plp .v2_plp_head p {
    margin-top: 12px; font-size: 20px; font-weight: 400; color: var(--dark-color);
}

/* --------------------------------------------------------------- 그룹 헤더 --- */
.v2_sub #container.v2_plp .sub_conts + .sub_conts { margin-top: 60px; }
.v2_sub #container.v2_plp .prodt_area { width: 1080px; margin: 0 auto; }

.v2_sub #container.v2_plp .v2_grp_head {
    display: flex; align-items: flex-end; justify-content: space-between; width: 100%;
}
.v2_sub #container.v2_plp .v2_grp_head h3 {
    width: auto; margin: 0; font-size: 30px; font-weight: 500; line-height: 1.2;
    text-align: left; color: var(--dark-color);
}
.v2_sub #container.v2_plp .v2_brand_logo { display: block; line-height: 0; }
.v2_sub #container.v2_plp .v2_brand_logo img { width: auto; max-width: 195px; max-height: 17px; }

/* 정렬바 — 시안은 구분선 아래 우측 정렬 */
.v2_sub #container.v2_plp .cost_order {
    width: 100%; margin-top: 11px; padding: 11px 0 0;
    border-top: 1px solid var(--text-mute-color); border-bottom: 0;
    text-align: right;
}
.v2_sub #container.v2_plp .cost_order > li > a { font-size: 13px; color: var(--text-mute-color); }
.v2_sub #container.v2_plp .cost_order > li > a.on_down_link,
.v2_sub #container.v2_plp .cost_order > li > a.on_up_link,
.v2_sub #container.v2_plp .cost_order > li > a:hover { font-size: 13px; color: var(--sub-red-color); }
.v2_sub #container.v2_plp .cost_order > li::after { color: var(--gray-3-color); }

/* ------------------------------------------------------------------- 카드 --- */
/* 시안 : w 525 / 가로 30 · 세로 25 / radius 20 / border #D1DBEA / padding 15·40
   지난 제품보기(customer/after_pro_lists)도 같은 카드. v1 after_list.js 가 그리는 마크업이라
   .last_flm ~ ul.prodt_lst 로 잡는다 (고객지원에서 이 조합은 그 페이지뿐). 전용 보정은 이 블록 끝 */
.v2_sub #container.v2_plp ul.prodt_lst,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst {
    display: flex; flex-wrap: wrap; gap: 25px 30px;
    margin-top: 15px; padding-bottom: 0; border-bottom: 0;
}
.v2_sub #container.v2_plp ul.prodt_lst > li,
.v2_sub #container.v2_plp ul.prodt_lst > li:hover,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst > li,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst > li:hover {
    width: 525px; margin: 0; padding: 40px 15px;
    display: block; background: #fff;
    border: 1px solid var(--chip-border-color); border-radius: 20px;
    -webkit-box-shadow: none; box-shadow: none;
    -webkit-transition: border-color .2s ease; transition: border-color .2s ease;
}
/* 마우스 오버 = 테두리 색 변경 (시안 활성 카드와 같은 상태) */
.v2_sub #container.v2_plp ul.prodt_lst > li:hover,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst > li:hover { border-color: var(--sub-red-color); }
.v2_sub #container.v2_plp ul.prodt_lst > li:hover strong,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst > li:hover strong { color: var(--dark-color); }

.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: 496px; margin: 0 auto; }

.v2_sub #container.v2_plp .prodt_Img,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Img { padding: 0; }
.v2_sub #container.v2_plp .prodt_Img img,
.v2_sub #container.v2_plp ul.prodt_lst > li:hover .prodt_Img img,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Img img,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst > li:hover .prodt_Img img { width: 496px; }

.v2_sub #container.v2_plp .prodt_Info,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Info { margin-top: 10px; 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; font-size: 34px; font-weight: 500; line-height: 1.2;
    color: var(--dark-color);
}
/* 휠 사이즈 뱃지 */
.v2_sub #container.v2_plp .prodt_Info strong span,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .prodt_Info strong span {
    width: auto; margin: -5px 0 0 0; padding: 1px 9px;
    display: inline-block; vertical-align: middle;
    font-size: 20px; font-weight: 500; color: #fff;
    background: var(--primary-color); border-radius: 5px;
}
.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: 7px; font-size: 24px; font-weight: 400;
    color: var(--dark-color);
}

/* 태그칩 — 시안은 3개지만 실제는 최대 7개다. 개수를 줄이지 않고 줄바꿈으로 흘린다 */
.v2_sub #container.v2_plp .heshtag,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    width: 496px; margin: 15px auto 0; text-align: center;
}
.v2_sub #container.v2_plp .heshtag li,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag li {
    margin: 0; padding: 6px 12px 6px 9px;
    font-size: 16px; font-weight: 500;
    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.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag li a { font-size: 16px; color: var(--dark-color); }
/* hover : 배경 채움 (GNB 칩과 같은 --sub-red) */
.v2_sub #container.v2_plp .heshtag li:hover,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag li:hover { padding: 6px 12px 6px 9px; background: var(--sub-red-color); border-color: var(--sub-red-color); }
.v2_sub #container.v2_plp .heshtag li:hover a,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag li:hover a { color: #fff; }

/* 지난 제품보기 전용 — v1 JS 가 카드 2개씩 ul 을 끊어 그린다. ul 사이를 카드 세로 간격(25)으로.
   v1 카드의 머리(브랜드 로고·시리즈명)·빈 타이틀 span·제품특징 <p> 는 검색 카드처럼 뺀다.
   첫 ul 의 .bord_top(#333 선)은 검색 .search_year 하단선과 같은 --text-mute 로 */
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst + ul.prodt_lst { margin-top: 25px; }
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst.bord_top { margin-top: 30px; padding-top: 0; border-top: 0; }
.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; 를 넣어 flex 항목이 하나 더 생기고 gap 이 두 번 걸린다.
   글자 크기 0 으로 그 항목 폭을 없애고 가로 간격은 li margin(5+5)으로 준다 → 다른 페이지와 같은 10 */
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag { gap: 10px 0; font-size: 0; }
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst .heshtag li { margin: 0 5px; }
/* v1 은 ul 의 padding-bottom 40 이 더보기 위 간격이었다. 카드 규칙이 0 으로 지우므로 버튼에 준다 */
.v2_sub.v2_pg_customer #container .prodt_area:has(> .last_flm) + button.btn_add { margin-top: 40px; }

/* 카테고리 박스 라운딩 */
.v2_sub.v2_pg_customer #container .sub_nav .prodts_menu { border-radius: 15px; }
/* 카테고리 비노출 : 하운드(B003) · 블랙캣(B004). v1 layout.css 의 li display:inline-block !important 를 이기려면 같이 !important */
.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 !important; }
/* 검색 + 연도 한 줄 — 검색 .search_year 와 같은 배치(하단 1px --text-mute). 왼쪽 검색 입력, 오른쪽 연도.
   입력은 v1 처럼 흰 배경 + 테두리(#ddd → --input-border-color), 바깥 모서리 10, 크기는 줄였다 (44 → 36).
   카드 첫 ul 의 .bord_top 선은 이 줄의 하단선과 겹쳐 뺀다 */
.v2_sub.v2_pg_customer #container .last_flm {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 40px; padding-bottom: 10px; border-bottom: 1px solid var(--text-mute-color);
}
.v2_sub.v2_pg_customer #container .last_flm .line_search_inner { order: 0; margin: 0; }
.v2_sub.v2_pg_customer #container .last_flm .line_search_inner p.inptxt { display: flex; float: none; }
.v2_sub.v2_pg_customer #container .last_flm .line_search_inner p.inptxt input {
    width: 240px; height: 36px; padding: 0 18px;
    border: 1px solid var(--input-border-color); border-right: 0; border-radius: 10px 0 0 10px;
    font-size: 13px; color: var(--dark-color); background: #fff;
}
.v2_sub.v2_pg_customer #container .last_flm .line_search_inner .btn_serch {
    width: 50px; 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 / 18px auto;
}
/* 연도 — 검색 연도 탭과 같은 규칙. v1 의 체크 아이콘은 뺀다 */
.v2_sub.v2_pg_customer #container .last_flm .last_year { order: 1; float: none; margin: 0; font-size: 0; }
.v2_sub.v2_pg_customer #container .last_flm .last_year li { font-size: 13px; }
.v2_sub.v2_pg_customer #container .last_flm .last_year li::after { padding: 0 10px; color: var(--chip-border-color); }
.v2_sub.v2_pg_customer #container .last_flm .last_year li:last-child::after { padding: 0; }
.v2_sub.v2_pg_customer #container .last_flm .last_year li a { font-size: 13px; color: var(--text-mute-color); }
.v2_sub.v2_pg_customer #container .last_flm .last_year li a:hover,
.v2_sub.v2_pg_customer #container .last_flm .last_year li a.last_select { color: var(--sub-red-color); }
.v2_sub.v2_pg_customer #container .last_flm .last_year li a.last_select::before { content: none; display: none; }

/* ------------------------------------------------------------- 용품 리스트 --- */
/* 자전거 리스트와 같은 구조라 .v2_plp 규칙을 그대로 쓴다.
   시안(6031:561) 기준 차이만 여기서 처리한다. */

/* 용품은 브랜드 로고가 없다. 시안도 우측을 빈 자리로 둔다 (그룹명 높이 유지용) */
.v2_sub #container.v2_plp_unit .v2_brand_logo { width: 195px; height: 30px; }

/* 사이즈 뱃지가 없어 제품명이 한 줄로 길어진다. 카드 폭 안에서 줄바꿈시킨다 */
.v2_sub #container.v2_plp_unit .prodt_Info strong { word-break: keep-all; }

/* ============================================================================
   v2 자전거 상세 (PDP)
   설계 : docs/v2-bicycle-detail-260922.md   시안 : docs/v2-gnb-figma-260922.md §3
   마크업 : view/kor/v2/bicycle/view.php
   ============================================================================ */

.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;
}
.v2_sub #container.v2_pdp .sub_container_wrap { margin: 15px auto 80px; min-height: 0; }
.v2_sub #container.v2_pdp .sub_conts { width: 1080px; margin: 0 auto; }

/* 브레드크럼 — 리스트와 같은 값 */
.v2_sub #container.v2_pdp .loction_nav li { font-size: 12px; font-weight: 500; color: var(--text-mute-color); }
.v2_sub #container.v2_pdp .loction_nav li a { color: var(--text-mute-color); }
.v2_sub #container.v2_pdp .loction_nav li::after { padding: 0 7px; color: var(--chip-border-color); }
.v2_sub #container.v2_pdp .loction_nav li:last-child { color: var(--primary-color); }

/* --------------------------------------------------------------- 히어로 --- */
/* 좌 카테고리 / 중앙 제품명 / 우 브랜드 로고. 아래 1px 라인은 시안 top 198 */
.v2_sub #container.v2_pdp .v2_pdp_head {
    position: relative; padding: 50px 0 22px; text-align: center;
    border-bottom: 1px solid var(--text-mute-color);   /* 지시 0.5px #A1A5AE → 1px 스냅 */
}
.v2_sub #container.v2_pdp .v2_pdp_cate {
    position: absolute; left: 0; bottom: 22px;
    font-size: 21px; font-weight: 500; color: var(--text-sub3-color);
}
.v2_sub #container.v2_pdp .v2_pdp_brand { position: absolute; right: 0; bottom: 26px; line-height: 0; }
.v2_sub #container.v2_pdp .v2_pdp_brand img { width: auto; max-width: 192px; max-height: 14px; }
.v2_sub #container.v2_pdp .v2_pdp_title {
    display: block; font-size: 45px; font-weight: 600; line-height: 1.2; color: var(--dark-color);
}
/* 휠 사이즈 뱃지 */
.v2_sub #container.v2_pdp .v2_pdp_title > span {
    margin: 0 11px 4px 0; padding: 2px 12px;
    display: inline-block; vertical-align: middle;
    font-size: 28px; font-weight: 500; color: #fff;
    background: var(--primary-color); border-radius: 5px;
}

/* ------------------------------------------------------------- 슬라이더 --- */
.v2_sub #container.v2_pdp .sub_swiper { width: 1080px; margin: 0 auto; }
.v2_sub #container.v2_pdp .sub_swiper .swiper-slide img { width: 1080px; }
/* 색상 라벨 (컬러칩은 데이터 부재로 미적용 — docs/v2-gnb-figma-260922.md §A-6) */
.v2_sub #container.v2_pdp .swiper-text { margin-top: 20px; text-align: center; }
.v2_sub #container.v2_pdp .swiper-text span { font-size: 22px; font-weight: 400; color: var(--dark-color); }

/* ----------------------------------------------------------------- 가격 --- */
.v2_sub #container.v2_pdp .v2_pdp_price { margin-top: 10px; text-align: center; }
.v2_sub #container.v2_pdp .v2_pdp_price > span {
    margin-right: 10px; font-size: 29px; font-weight: 500; color: var(--text-sub3-color);
}
.v2_sub #container.v2_pdp .v2_pdp_price > strong { font-size: 33px; font-weight: 600; color: var(--dark-color); }
.v2_sub #container.v2_pdp .v2_pdp_price em { margin-left: 3px; font-size: 31px; font-weight: 600; }

/* ----------------------------------------------------------------- 태그 --- */
.v2_sub #container.v2_pdp .heshtag {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
    width: 689px; margin: 30px auto 0;
}
.v2_sub #container.v2_pdp .heshtag li {
    margin: 0; padding: 5px 15px 5px 11px;
    font-size: 20px; font-weight: 500;
    background: var(--chip-bg-color);
    border: 1px solid var(--chip-border-color); border-radius: 5px;
}
.v2_sub #container.v2_pdp .heshtag li a { font-size: 20px; color: var(--dark-color); }
.v2_sub #container.v2_pdp .heshtag li:hover { padding: 5px 15px 5px 11px; background: var(--sub-red-color); border-color: var(--sub-red-color); }
.v2_sub #container.v2_pdp .heshtag li:hover a { color: #fff; }

/* ------------------------------------------------------------------ CTA --- */
.v2_sub #container.v2_pdp .v2_pdp_cta { margin-top: 35px; text-align: center; font-size: 0; }
.v2_sub #container.v2_pdp .v2_btn_cta {
    display: inline-block; margin: 0 10px; padding: 8px 21px;
    font-size: 21px; font-weight: 600; color: #fff;
    background: var(--sub-red-color);
    border: 1px solid var(--primary-color); border-radius: 10px;
}
.v2_sub #container.v2_pdp .v2_btn_cta:hover { background: var(--primary-color); }

/* ----------------------------------------------------------- 연관 콘텐츠 --- */
.v2_sub #container.v2_pdp .v2_pdp_relat {
    margin-top: 55px; padding: 31px 40px 30px;
    background: #f8f8f8; border: 1px solid var(--card-border-color); border-radius: 25px;
}
.v2_sub #container.v2_pdp .v2_pdp_relat > h3 {
    margin: 0 0 24px; font-size: 29px; font-weight: 500; 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: flex; align-items: center; gap: 39px; padding: 20px 0; background: none;
}
.v2_sub #container.v2_pdp .v2_relat_thumb { flex: 0 0 105px; width: 105px; height: 105px; line-height: 0; }
.v2_sub #container.v2_pdp .v2_relat_thumb img { width: 105px; height: 105px; object-fit: cover; border-radius: 15px; }
.v2_sub #container.v2_pdp .v2_relat_body { flex: 1 1 auto; text-align: left; }
.v2_sub #container.v2_pdp .v2_relat_body strong { display: block; font-size: 22px; font-weight: 500; color: var(--dark-color); }
.v2_sub #container.v2_pdp .v2_relat_body em { display: block; margin-top: 10px; font-size: 19px; font-weight: 400; color: var(--dark-color); }
.v2_sub #container.v2_pdp .v2_relat_body i { display: block; margin-top: 17px; font-size: 15px; font-weight: 400; color: var(--text-sub-color); }
/* 출처 아이콘 — 시안 6033:766 : youtube 55×43 / instagram 45×44 / 자사 배지 43.82(→44) bg #f55b5c radius 7 + 3000 로고 32.46×12.98
   블로그는 시안에 없어 인스타와 같은 45×44. 아이콘은 GNB SNS 와 같은 images/sns 자산, hover 는 _on(#E41F20) 으로 교체 */
.v2_sub #container.v2_pdp .v2_relat_sns {
    flex: 0 0 55px; display: flex; justify-content: flex-end; align-items: center; line-height: 0;
}
.v2_sub #container.v2_pdp .v2_relat_sns::before {
    content: ""; display: block; width: 45px; height: 44px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
}
.v2_sub #container.v2_pdp .v2_relat_sns.is-youtube::before   { width: 55px; height: 43px; 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: 44px; height: 44px;
    /* youtube·instagram·blog svg 가 fill-opacity 0.7 이라 같은 색으로 보이게 배경도 70% (로고 흰색은 그대로) */
    background-color: rgba(245, 91, 92, .7); border-radius: 7px;
    background-image: url("../../images/ico/logo_3000_w.svg"); background-size: 32.46px 12.98px;
    transition: background-color .2s;
}
.v2_sub #container.v2_pdp .v2_pdp_relat li > a:hover .v2_relat_sns.is-youtube::before   { background-image: url("../../images/sns/youtube_on.svg"); }
.v2_sub #container.v2_pdp .v2_pdp_relat li > a:hover .v2_relat_sns.is-instagram::before { background-image: url("../../images/sns/instagram_on.svg"); }
.v2_sub #container.v2_pdp .v2_pdp_relat li > a:hover .v2_relat_sns.is-blog::before      { background-image: url("../../images/sns/blog_on.svg"); }
.v2_sub #container.v2_pdp .v2_pdp_relat li > a:hover .v2_relat_sns.is-own::before       { background-color: var(--primary-color); }

/* ------------------------------------------------------------------ 탭 --- */
/* PDP·용품상세·all ways 가 같이 쓴다. 페이지 클래스에 묶지 않는다 (밴드와 같은 이유) */
.v2_sub #container .v2_pdp_tab { display: flex; width: 1080px; margin: 60px auto 0; }
.v2_sub #container .v2_pdp_tab > li { flex: 1 1 0; text-align: center; }
.v2_sub #container .v2_pdp_tab > li > a {
    display: block; height: 53px; line-height: 53px;
    font-size: 20px; font-weight: 500; color: var(--text-sub-color);
    border-bottom: 3px solid var(--chip-bg-color);
}
.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: 23px; height: 23px; margin-left: 1px; margin-bottom: 3px;
    display: inline-block; vertical-align: middle;
    background: url("../../images/ico/arrow_up_right_gray.svg") no-repeat center;
    background-size: 23px 23px;
}

/* ------------------------------------------------------------ 제품 소개 --- */
/* 상세 이미지 폭 825 는 현행 업로드 규격과 같다 (운영 실측 확인) */
.v2_sub #container.v2_pdp .v2_pdp_intro {
    position: relative; width: 825px; margin: 20px auto 0; text-align: center;
}
.v2_sub #container.v2_pdp .v2_pdp_intro img { max-width: 825px; }
.v2_sub #container.v2_pdp .v2_pdp_intro .coverImg {
    display: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 174px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0), #fff);
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.v2_sub #container.v2_pdp .v2_pdp_more { margin-top: 20px; text-align: center; }
/* 시안(6033:776)은 w 252 에 pl 62 / pr 48 을 같이 준다. 합이 110 이라 25px 한글 7자(≈175)+
   아이콘이 들어갈 자리가 없어 프레임에서 잘려 있다(overflow-clip). 시안 수치 오류로 본다.
   폭 252 는 지키고 좌우 패딩은 대칭으로 돌려 가운데 정렬한다. */
/* 시안 실측 252 × 60 (노드 6033:776).
   높이 60 = py 15×2 + 25px×1.2 다. leading-normal 이 정확히 1.2 로 잡혀 있다.
   CSS 의 line-height:normal 은 폰트 메트릭에 따라 달라져 Pretendard 에서 60 을 넘는다.
   시안 값이 명확하므로 1.2 로 고정한다. */
.v2_sub #container.v2_pdp .v2_pdp_more .btn_more {
    display: none; width: 210px; height: 50px; padding: 0 0 0 3px;
    font-size: 22px; font-weight: 600; line-height: 1.2; color: #fff;
    background: var(--primary-color); border-radius: 10px;
}
/* JS 가 .is-show 를 붙인다.
   inline-block + vertical-align:middle 조합은 글자 기준선과 아이콘이 어긋나
   박스 안에서 텍스트가 아래로 내려앉는다. flex 로 가운데 정렬한다. */
.v2_sub #container.v2_pdp .v2_pdp_more .btn_more.is-show {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

/* ------------------------------------------------------------ 제품 사양 --- */
.v2_sub #container.v2_pdp .v2_pdp_spec { margin-top: 40px; }
.v2_sub #container.v2_pdp .v2_spec_tbl > div {
    display: flex; align-items: center; gap: 5px;
    min-height: 55px; padding: 6px 0;
    border-bottom: 1px solid var(--chip-border-color);
}
.v2_sub #container.v2_pdp .v2_spec_tbl dt {
    flex: 0 0 122px; width: 122px;
    font-size: 18px; font-weight: 500; color: var(--dark-color);
}
.v2_sub #container.v2_pdp .v2_spec_tbl dd {
    flex: 1 1 auto; margin: 0;
    font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--dark-color);
}
.v2_sub #container.v2_pdp .v2_spec_more { margin-top: 25px; }
.v2_sub #container.v2_pdp .v2_spec_more a {
    display: inline-flex; align-items: center; gap: 4px; line-height: normal;
    padding: 9px 15px 9px 13px;
    font-size: 17px; 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_pdp_tip {
    margin-top: 25px; padding: 21px 40px 26px 15px;
    background: #f8f8f8; border: 1px solid var(--chip-border-color); border-radius: 15px;
}
.v2_sub #container.v2_pdp .v2_pdp_tip li {
    position: relative; padding-left: 12px;
    font-size: 15px; font-weight: 400; line-height: 27px; color: var(--text-sub3-color);
}
.v2_sub #container.v2_pdp .v2_pdp_tip li::before {
    content: ""; position: absolute; left: 2px; top: 12px;
    width: 3px; height: 3px; border-radius: 50%; background: var(--text-sub3-color);
}

/* -------------------------------------------------------------- 사이즈 --- */
.v2_sub #container.v2_pdp .v2_pdp_size { margin-top: 40px; text-align: center; }
.v2_sub #container.v2_pdp .v2_pdp_size .prodt_draw img { max-width: 825px; }
.v2_sub #container.v2_pdp .v2_size_tbl { width: 1080px; margin: 30px auto; border-collapse: collapse; }
.v2_sub #container.v2_pdp .v2_size_tbl th,
.v2_sub #container.v2_pdp .v2_size_tbl td {
    padding: 12px 8px; font-size: 15px; text-align: center;
    border: 1px solid var(--chip-border-color);
}
.v2_sub #container.v2_pdp .v2_size_tbl thead th { background: var(--chip-bg-color); font-weight: 500; }

/* ------------------------------------------------------------- 하단 CTA --- */
.v2_sub #container.v2_pdp .v2_pdp_foot { margin-top: 60px; text-align: center; }
.v2_sub #container.v2_pdp .v2_btn_list {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: normal;
    width: 210px; height: 50px; padding: 0 0 0 3px;   /* 패딩 대신 고정 크기 */
    font-size: 25px; font-weight: 600; color: #fff;
    background: var(--primary-color); border-radius: 10px;
}

/* --------------------------------------------- 슬라이더 화살표 · 페이지네이션 --- */
/* 2026-09-22 보정
   화살표 : v1 pc/main.css:3~4 의 전역 규칙이 걸린다.
       .swiper-button-next{width:40px;height:76px;left:100px;background:url(btn_main_next.png)}
     메인 비주얼용 이미지라 상세에서 엉뚱하게 뜬다. v1 뷰는 posi_L00/posi_R00 로 좌우 위치만
     덮어썼을 뿐 이미지는 그대로였다. 여기서는 시안 에셋(50×50 원형)으로 완전히 덮는다.
   불릿 : swiper.css:189~195 가 skew(-25deg) 에 border-radius 가 없어 사각형으로 나온다.
     v1 은 뷰에 .transf_norl 을 붙여 되돌렸는데(layout.css:449) v2 는 직접 지정한다. */
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-prev,
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-next {
    width: 50px; height: 50px; margin-top: -25px;
    background: url("../../images/ico/pdp_arrow.svg") no-repeat center;
    background-size: 50px 50px;
}
/* common.js 의 swiper 설정이 nextButton:'.swiper-button-prev' 로 좌우가 뒤집혀 있다.
   마크업 순서가 아니라 화면 위치를 기준으로 잡는다. */
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-next { left: 33px; right: auto; }
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-prev {
    right: 33px; left: auto;
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
/* hover : 원 배경 --primary(#E41F20) 불투명 — 같은 에셋의 _on 색 변형 */
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-prev:hover,
.v2_sub #container.v2_pdp .sub_swiper .swiper-button-next:hover {
    background-image: url("../../images/ico/pdp_arrow_on.svg");
}

.v2_sub #container.v2_pdp .sub_swiper .swiper-pagination { bottom: 85px; }
.v2_sub #container.v2_pdp .sub_swiper .swiper-pagination-bullet {
    width: 14px; height: 14px; margin: 0 4px;
    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);
}

/* CTA 버튼 — 시안 padding 21/8, 버튼 간격 20 */
.v2_sub #container.v2_pdp .v2_pdp_cta {
    display: flex; justify-content: center; gap: 20px;
}
.v2_sub #container.v2_pdp .v2_btn_cta { margin: 0; }

/* ------------------------------------------------------- 버튼 아이콘 보정 --- */
/* 2026-09-22 — 시안의 버튼 아이콘이 빠져 있었다.
   버튼 문구는 JS 가 .text() 로 갈아끼우므로 마크업에 <i> 를 넣으면 지워진다.
   전부 가상요소로 붙인다.
   아이콘은 기존 v2 에셋을 흰색으로 재색상해 썼다 (색만 다른 같은 도형). */

/* 제품 목록보기 — 시안 List 아이콘. 햄버거가 아니라 좌측에 점이 붙은 불릿 리스트다.
   시안 에셋이 이미 흰색이라 재색상 없이 그대로 쓴다 (노드 6033:1003, 20.75×14.5) */
.v2_sub #container.v2_pdp .v2_btn_list::after {
    content: ""; width: 21px; height: 15px; flex: 0 0 auto;
    display: block;
    background: url("../../images/ico/list_w.svg") no-repeat center;
    background-size: 21px 15px;
}

/* 상품설명 더보기 — 시안 ChevronDown (노드 6033:777, 17.5×10, stroke 2.5). 에셋이 이미 흰색이다 */
.v2_sub #container.v2_pdp .v2_pdp_more .btn_more::after {
    content: ""; width: 17.5px; height: 10px; flex: 0 0 auto;
    display: block;
    background: url("../../images/ico/chevron_down_w.svg") no-repeat center;
    background-size: 17.5px 10px;
}
/* 펼친 상태에서는 화살표를 뒤집는다 */
.v2_sub #container.v2_pdp .v2_pdp_more .btn_more.on::after {
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

/* 제품 사양 상세보기 — 시안 PlusCircle (노드 6033:957, 18.67×18.67). 에셋이 이미 흰색이다.
   버튼 문구를 JS 가 갈아끼우므로 ::before 로 붙인다. gap 4 */
.v2_sub #container.v2_pdp .v2_spec_more a::before {
    content: ""; width: 19px; height: 19px; flex: 0 0 auto;
    display: block;
    background: url("../../images/ico/plus_circle_w.svg") no-repeat center;
    background-size: 19px 19px;
}

/* ------------------------------------------------------------- 용품 상세 --- */
/* 자전거 상세와 구조가 같아 .v2_pdp 규칙을 그대로 쓴다.
   시안(6033:1013) 기준 차이만 여기서 처리한다.
   마크업 : view/kor/v2/unit/view.php */

/* 우측 상단 2뎁스 라벨 (헬멧). 자전거는 이 자리에 브랜드 로고가 온다 */
.v2_sub #container.v2_pdp_unit .v2_pdp_cate2 {
    position: absolute; right: 0; bottom: 22px;
    font-size: 21px; font-weight: 500; color: var(--text-sub3-color);
}

/* 가격 — 자전거(37 / 35)보다 크다. 시안 45 / 40, gap 6 */
.v2_sub #container.v2_pdp_unit .v2_pdp_price > strong { font-size: 45px; }
.v2_sub #container.v2_pdp_unit .v2_pdp_price em { margin-left: 6px; font-size: 40px; }

/* 탭이 "제품 소개" 하나뿐이라 폭 1080 을 다 쓴다 (자전거는 4등분) */
.v2_sub #container.v2_pdp_unit .v2_pdp_tab > li { flex: 1 1 100%; }

/* ============================================================================
   v2 대리점 찾기
   설계 : docs/v2-dealer-260922.md   시안 : docs/v2-gnb-figma-260922.md §5
   마크업 : view/kor/v2/dealer/lists.php
   목록 항목 마크업은 resource/user/naverAPI.js 가 만든다. 여기서는 CSS 로만 손댄다.
   ============================================================================ */

/* 위치정보 동의 팝업 — #container 밖(.pop_content)에 있어 페이지 클래스로 못 가둔다. v1 pc/contents.css:1001~1009 위에 얹는다.
   안내문 안쪽 span 의 padding 은 v1 이 !important 라 같은 방식으로 덮는다 */
.v2_sub .pop_content .popup_Sml { border-radius: 15px; }
.v2_sub .pop_content .popup_Sml span { width: 340px; }
.v2_sub .pop_content .popup_Sml span > span { padding: 0 0 0 11px !important; }
.v2_sub .pop_content .pop_btns > button { 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 #container.v2_dealer .sub_container_wrap { margin: 15px auto 80px; min-height: 0; }
.v2_sub #container.v2_dealer .sub_conts { width: 1080px; margin: 0 auto; }

/* 밴드 — 탭 없이 타이틀만인 페이지(대리점·대량구매·…). 세로 가운데.
   페이지 클래스에 묶지 않는다 — .v2_dealer 에 묶어 두었더니 대량구매에서 안 먹어
   기본 .v2_plp_band 의 padding-top:30 만 남아 타이틀이 위로 붙었다. */
.v2_sub #container .v2_band_only {
    padding: 0; display: flex; align-items: center; justify-content: center;
}

/* 브레드크럼 */
.v2_sub #container.v2_dealer .loction_nav li { font-size: 12px; font-weight: 500; color: var(--text-mute-color); }
.v2_sub #container.v2_dealer .loction_nav li a { color: var(--text-mute-color); }
.v2_sub #container.v2_dealer .loction_nav li::after { padding: 0 7px; color: var(--chip-border-color); }
.v2_sub #container.v2_dealer .loction_nav li:last-child { color: var(--primary-color); }

/* ------------------------------------------------------------- 검색 박스 --- */
.v2_sub #container.v2_dealer .v2_dl_search {
    margin-top: 28px; padding: 45px 50px;
    background: #f8f8f8; border: 1px solid var(--card-border-color); border-radius: 15px;
}
.v2_sub #container.v2_dealer .v2_dl_search 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;
}

/* 필터 체크박스 row
   5개를 한 줄에 놓아야 하는데 내용 폭이 검색 박스 안쪽(1080 − 좌우 50 = 980)을 넘는다.
   항목 폭 합계만 약 940~1000 이라 시안 gap 20 을 그대로 주면 줄바꿈이 난다.
   → 줄바꿈을 막고(nowrap) 남는 공간을 space-between 으로 나눈다.
     라벨 안에서도 끊기지 않게 white-space: nowrap 을 준다. */
.v2_sub #container.v2_dealer .v2_dl_filter {
    display: flex; flex-wrap: nowrap; align-items: flex-start;
    justify-content: space-between; gap: 5px;
}
.v2_sub #container.v2_dealer .v2_dl_filter > p { position: relative; margin: 0; flex: 0 0 auto; }
/* 네이티브 체크박스는 감추되 접근성·클릭 동작은 label 로 유지한다 */
.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: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    height: 21px; white-space: nowrap;
    font-size: 17px; font-weight: 500; color: var(--text-sub2-color);
}
/* 체크박스 모양 — 시안 21×21 / radius 5 / 체크 표시는 CSS 로 그린다 */
.v2_sub #container.v2_dealer .v2_chk {
    position: relative; flex: 0 0 21px; width: 21px; height: 21px;
    background: #fff; border: 1px solid var(--text-sub2-color); border-radius: 5px;
}
/* 체크 표시 위치
     박스 21 − 테두리 2 = 안쪽 19, 중심 (9.5, 9.5)
     5×9 를 45도 돌리면 보이는 영역이 약 9.9×9.9 로 요소 중심을 기준으로 퍼진다.
     요소 중심 = left + 2.5, top + 4.5. 좌우는 (9.5) 정중앙.
     상하는 V 의 잉크가 아래 꼭짓점에 몰려 경계상자 중심에 두면 아래로 처져 보인다 (2026-09-23 지적)
     → 경계상자 중심을 8 로 1.5 올린다 (top 3). */
.v2_sub #container.v2_dealer .v2_chk::after {
    content: ""; position: absolute; left: 7px; top: 3px;
    width: 5px; height: 9px;
    border: solid var(--text-sub2-color); border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
/* 체크 상태 — 고객사 확정 : 활성 테두리 #E41F20 */
.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); }

/* 서비스 아이콘 — on/off 두 벌을 체크 상태로 바꿔 끼운다 */
.v2_sub #container.v2_dealer .v2_dico {
    flex: 0 0 auto; display: block;
    background-repeat: no-repeat; background-position: center;
}
.v2_sub #container.v2_dealer .v2_dico_premium  { width: 21px; height: 21px; background-image: url("../../images/ico/dealer/premium_store_off.svg"); background-size: 21px 21px; }
.v2_sub #container.v2_dealer .v2_dico_service  { width: 20px; height: 20px; background-image: url("../../images/ico/dealer/service_point_off.svg"); background-size: 20px 20px; }
.v2_sub #container.v2_dealer .v2_dico_emaster  { width: 19px; height: 16px; background-image: url("../../images/ico/dealer/e_service_master_off.svg"); background-size: 19px 16px; }
.v2_sub #container.v2_dealer .v2_dico_eservice { width: 23px; height: 20px; background-image: url("../../images/ico/dealer/e_service_point_off.svg"); background-size: 23px 20px; }
.v2_sub #container.v2_dealer .v2_dico_edealer  { width: 14px; height: 21px; background-image: url("../../images/ico/dealer/e_dealer_off.svg"); background-size: 14px 21px; }

.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"); }

/* 보조 링크 + 호버 툴팁 */
.v2_sub #container.v2_dealer .v2_dl_filter em {
    display: block; margin-top: 4px;
    font-size: 13px; font-style: normal; font-weight: 400; color: var(--text-sub-color);
    cursor: pointer;
}
.v2_sub #container.v2_dealer .v2_dl_filter .sto4_box,
.v2_sub #container.v2_dealer .v2_dl_filter .sto5_box {
    display: none; position: absolute; left: -10px; top: -46px; z-index: 5;
    padding: 12px 14px; white-space: nowrap;
    font-size: 13px; font-weight: 400; color: var(--dark-color);
    background: #fff; border: 1px solid var(--chip-border-color); border-radius: 8px;
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.08); box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
/* 말풍선 꼬리(v1 :before/:after, 폭 16, margin-left -8)를 체크박스 정중앙에 맞춘다.
   박스를 10 왼쪽으로 뺐으므로 체크박스 중심(10.5)은 박스 기준 20.5. margin-left −8 과 테두리 8 이 상쇄되어 left 값이 곧 꼬리 중심이다.
   v1 은 left:10% 라 박스 폭에 따라 꼬리가 움직였다. 10 을 뺀 이유는 꼬리가 radius 8 모서리에 걸리지 않게 하려는 것 */
.v2_sub #container.v2_dealer .v2_dl_filter .sto4_box::before,
.v2_sub #container.v2_dealer .v2_dl_filter .sto4_box::after,
.v2_sub #container.v2_dealer .v2_dl_filter .sto5_box::before,
.v2_sub #container.v2_dealer .v2_dl_filter .sto5_box::after { left: 20.5px; }
.v2_sub #container.v2_dealer .v2_dl_filter .sto4_box::before,
.v2_sub #container.v2_dealer .v2_dl_filter .sto5_box::before { border-top-color: var(--chip-border-color); }

/* 검색 입력 row */
.v2_sub #container.v2_dealer .v2_dl_input {
    display: flex; align-items: center; gap: 15px; margin-top: 22px;
}
.v2_sub #container.v2_dealer .v2_dl_sel select {
    width: 140px; height: 40px; padding: 8px 12px;
    font-size: 16px; font-weight: 500; color: var(--text-sub-color);
    background: #fff; border: 1px solid var(--btn-gray-color); border-radius: 5px;
}
.v2_sub #container.v2_dealer .v2_dl_key { position: relative; flex: 1 1 auto; }
.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; color: var(--dark-color);
    background: #fff; border: 1px solid var(--btn-gray-color); border-radius: 5px;
}
.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: none;
    background: url("../../images/ico/search.svg") no-repeat center;
    background-size: 20px 20px; cursor: pointer;
}
.v2_sub #container.v2_dealer .v2_dl_btn_my {
    flex: 0 0 auto; height: 40px; padding: 8px 12px;
    font-size: 16px; font-weight: 500; color: #fff;
    background: var(--sub-red-color);
    border: 1px solid var(--primary-color); border-radius: 5px; cursor: pointer;
}

/* --------------------------------------------------------------- 결과 --- */
/* 결과 카운트는 시안상 목록·지도 **두 칼럼 위**에 있고(top 452),
   목록과 지도는 같은 선(top 481)에서 시작한다.
   그런데 naverAPI.js 계약상 카운트 <p> 는 .store_find 의 첫 자식이어야 한다
   ($(.store_find).children().eq(1) 로 목록 <ul> 을 찾는다).
   → 마크업은 그대로 두고 카운트만 .store_inner 기준으로 absolute 로 끌어올린다.
     .store_inner 는 그만큼 padding-top 으로 자리를 비운다. */
.v2_sub #container.v2_dealer .v2_dl_count {
    position: absolute; left: 0; top: 0;
    /* v1 : .store_find > p { width:365px; margin:-59px 0 0 0; padding:20px 0 }
       padding 을 안 끄면 높이가 19 → 59 로 부풀어 아래 목록과 겹친다 */
    width: auto; margin: 0; padding: 0;
    font-size: 16px; font-weight: 500; line-height: 19px; color: var(--dark-color);
}
.v2_sub #container.v2_dealer .v2_dl_count #count { color: var(--primary-color); }

.v2_sub #container.v2_dealer .store_inner {
    position: relative; display: flex; gap: 36px; align-items: flex-start;
    margin-top: 30px; padding-top: 29px;   /* 29 = 카운트 한 줄 19 + 시안 간격 10 */
}
/* 좌측 목록. ⚠ 자식 순서가 naverAPI.js 계약이라 건드리지 않는다 */
.v2_sub #container.v2_dealer .store_find { flex: 0 0 366px; width: 366px; }
.v2_sub #container.v2_dealer .store_find > ul { margin: 0; }
.v2_sub #container.v2_dealer .store_find > ul > li {
    padding: 18px; border-top: 1px solid var(--text-mute-color);
    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.store_select { background: var(--band-bg-color); }

.v2_sub #container.v2_dealer .store_find > ul > li strong {
    display: block; font-size: 20px; font-weight: 500; color: var(--text-sub2-color);
}
.v2_sub #container.v2_dealer .store_find > ul > li.store_select strong { color: var(--primary-color); }

/* 항목 우측 서비스 아이콘 — JS 가 span.icon_storeNN 으로 찍는다.
   06 서비스마스터 / 05 전기서비스지정점 / 02 서비스지정점 / 01 전기취급점 / 04 프리미엄 */
.v2_sub #container.v2_dealer .store_find .icon_store {
    display: flex; justify-content: flex-end; align-items: center; gap: 12px;
    margin: -26px 0 0; height: 21px;
}
.v2_sub #container.v2_dealer .store_find .icon_store > span {
    display: block; 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; }
/* 선택된 항목은 아이콘도 on */
.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"); }

.v2_sub #container.v2_dealer .store_find .icon_map {
    margin-top: 12px; font-size: 13px; font-weight: 400; line-height: 1.5;
    color: var(--text-sub2-color);
}
.v2_sub #container.v2_dealer .store_find .store_select .icon_map { color: var(--dark-color); }
.v2_sub #container.v2_dealer .store_find .icon_map > span { display: block; }
.v2_sub #container.v2_dealer .store_find .icon_tel {
    margin-top: 12px; font-size: 13px; font-weight: 400; color: var(--text-sub2-color);
}
.v2_sub #container.v2_dealer .store_find .store_select .icon_tel { color: var(--dark-color); }
.v2_sub #container.v2_dealer .store_find .mob_tel { display: none; }

/* 페이지네이션 — 마크업은 서버가 만든 page_html 이다. 실제 구조 :
     <a class="direction"><img btn_prev.png></a>
     <span><a>1</a></span>&nbsp;<Strong>2</Strong>&nbsp;<span><a>3</a></span>…
     <a class="direction"><img btn_next.png></a>
   숫자는 span 이 a 를 감싸므로 박스는 a·strong 에만 준다 (span 에 주면 이중이 된다).
   항목 사이 &nbsp; 는 flex 의 익명 아이템이 되므로 컨테이너 font-size 를 0 으로 죽인다. */
.v2_sub #container.v2_dealer .store_paging {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    margin-top: 14px; font-size: 0;
}
.v2_sub #container.v2_dealer .store_paging span { display: inline-flex; }
.v2_sub #container.v2_dealer .store_paging a,
.v2_sub #container.v2_dealer .store_paging strong {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 35px;
    font-size: 18px; font-weight: 500; color: var(--dark-color);
}
.v2_sub #container.v2_dealer .store_paging strong { font-weight: 700; color: var(--sub-red-color); }
/* 좌우 화살표 — 시안(6033:2850 / 6033:2844)은 **빨강 원형 셰브론 21×21** 이다.
   v1 은 btn_prev/next.png 를 쓰는데 모양이 다르다. 시안 에셋으로 덮는다.
   서버가 만든 <a class="direction"><img …png></a> 구조라 img 를 감추고 a 에 배경을 준다.
   좌우는 같은 파일을 180도 돌려 쓴다.
   숫자 사이 gap 5, 화살표와는 26 → 화살표에 margin 21 을 더해 맞춘다. */
.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_sub #container.v2_dealer .store_map {
    flex: 0 0 678px; width: 678px; height: 709px;
    border: 1px solid var(--card-border-color); border-radius: 15px; overflow: hidden;
}

/* 셀렉트 화살표 — 시안 노드 6033:2376.
   래퍼 박스 14.4×9 안에 Polygon 12.47×6.75 가 rotate(180) 으로 들어 있다(아래 방향).
   에셋은 위를 향한 삼각형이라 가상요소에서 180도 돌려 쓴다.
   네이티브 select 화살표는 appearance:none 으로 감춘다. */
.v2_sub #container.v2_dealer .v2_dl_sel { position: relative; display: inline-block; }
.v2_sub #container.v2_dealer .v2_dl_sel select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 34px;
}
.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);
}

/* v1 결과 영역 규칙 되받기 (2026-09-22)
   v1 pc/contents.css 619~651 이 같은 클래스를 쓴다. flex 배치와 충돌하는 것만 끈다.

   ★ 지도가 오른쪽으로 넘치던 원인
     v1 : .store_map{ width:680px; height:711px; margin-left:35px; display:inline-block }
     폭·높이는 명시도로 이겼지만 margin-left:35 를 안 껐다.
     366 + gap 36 + margin 35 + 678 = 1115 → 1080 을 35 넘겼다. */
.v2_sub #container.v2_dealer .store_map { margin-left: 0; display: block; }

/* v1 은 .store_find 에 위/아래 테두리를 준다. v2 는 li 마다 선을 그어서 끈다 */
.v2_sub #container.v2_dealer .store_find { float: none; border-top: 0; border-bottom: 0; }
.v2_sub #container.v2_dealer .store_find > ul > li {
    display: block; min-height: 0; border-bottom: 0;
}
/* v1 은 선택 항목에 배경 PNG(select_icon_point)를 깔았다. v2 배경으로 완전히 덮는다 */
.v2_sub #container.v2_dealer .store_find > ul > li.store_select { background-image: none; }
.v2_sub #container.v2_dealer .store_find > ul > li:hover { background: var(--band-bg-color); }

/* v1 : p.icon_store{ float:right } + span{ margin-right:10px } — flex 와 겹친다 */
.v2_sub #container.v2_dealer .store_find .icon_store { float: none; }
.v2_sub #container.v2_dealer .store_find .icon_store > span { margin: 0; }

/* v1 : .store_paging{ padding:25px 0; margin-left:13px } / 숫자에 45×45 테두리 박스 */
.v2_sub #container.v2_dealer .store_paging { padding: 0; margin-left: 0; }
.v2_sub #container.v2_dealer .store_paging > strong,
.v2_sub #container.v2_dealer .store_paging > span > a {
    width: auto; height: 35px; line-height: normal; border: 0; background: none;
}

/* ============================================================================
   v2 대량 구매
   설계 : docs/v2-bulk-260922.md   시안 : docs/v2-gnb-figma-260922.md §6
   마크업 : view/kor/v2/introduction/buy.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 #container.v2_buy .sub_container_wrap { margin: 15px auto 80px; min-height: 0; }
.v2_sub #container.v2_buy .sub_conts { width: 1080px; margin: 0 auto; }

/* 브레드크럼 */
.v2_sub #container.v2_buy .loction_nav li { font-size: 12px; font-weight: 500; color: var(--text-mute-color); }
.v2_sub #container.v2_buy .loction_nav li a { color: var(--text-mute-color); }
.v2_sub #container.v2_buy .loction_nav li::after { padding: 0 7px; color: var(--chip-border-color); }
.v2_sub #container.v2_buy .loction_nav li:last-child { color: var(--primary-color); }

/* ------------------------------------------------------------ 상단 배너 --- */
/* 시안 6033:3590 : 1080×192 / border #D1DBEA / radius 15 / 배경 이미지 cover
   텍스트 블록 w 648, pl 39, py 49, gap 14 */
.v2_sub #container.v2_buy .v2_buy_visual {
    position: relative; width: 1080px; height: 192px; margin-top: 28px;
    background: url("../../images/contents/bulk/bulk_visual.jpg") no-repeat center / cover;
    border: 1px solid var(--chip-border-color); border-radius: 15px; overflow: hidden;
}
.v2_sub #container.v2_buy .v2_buy_visual_txt {
    position: absolute; left: 39px; top: 49px; width: 648px;
}
.v2_sub #container.v2_buy .v2_buy_visual_txt strong {
    display: block; font-size: 27px; font-weight: 500; line-height: 1.2; color: var(--dark-color);
}
.v2_sub #container.v2_buy .v2_buy_visual_txt p {
    margin-top: 14px; font-size: 17px; font-weight: 400; line-height: 24px; color: var(--dark-color);
}

/* ------------------------------------------------------------ 카드 4개 --- */
.v2_sub #container.v2_buy .v2_buy_tit {
    margin: 28px 0 0; font-size: 27px; font-weight: 500; line-height: 1.2;
    text-align: left; color: var(--dark-color);
}
/* 시안 : 카드 253×282 4개, 중심 간격 275 → 카드 사이 22. 4×253 + 3×22 = 1078 ≈ 1080 */
.v2_sub #container.v2_buy .v2_buy_cards {
    display: flex; justify-content: space-between; margin-top: 17px;
}
.v2_sub #container.v2_buy .v2_buy_cards > li {
    position: relative; width: 253px; height: 282px; padding: 30px 12px 0;
    text-align: center; overflow: hidden;
    background: var(--band-bg-color);
    border: 1px solid var(--chip-border-color); border-radius: 15px;
}
.v2_sub #container.v2_buy .v2_buy_cards strong {
    display: block; font-size: 21px; font-weight: 500; line-height: 1.2; color: var(--dark-color);
}
.v2_sub #container.v2_buy .v2_buy_cards p {
    margin-top: 10px; font-size: 15px; font-weight: 400; line-height: 1.3; color: var(--text-sub2-color);
}
/* 일러스트 — 시안 카드별 배치 비율(카드 기준 %) 그대로. 카드 하단에 깔린다 */
.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%; }

/* ------------------------------------------------------------- 연락처 --- */
/* 시안 6033:3282 : bg #F9FAFD / border #D1DBEA / radius 10 / padding 30 300 / space-between */
.v2_sub #container.v2_buy .v2_buy_contact {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 26px; padding: 30px 300px;
    background: var(--band-bg-color);
    border: 1px solid var(--chip-border-color); border-radius: 10px;
}
.v2_sub #container.v2_buy .v2_buy_contact > strong {
    font-size: 21px; font-weight: 500; color: var(--dark-color);
}
.v2_sub #container.v2_buy .v2_buy_contact > div { width: 232px; }
.v2_sub #container.v2_buy .v2_buy_contact em {
    display: block; font-size: 27px; font-weight: 500; font-style: normal; line-height: 1.2; color: var(--dark-color);
}
.v2_sub #container.v2_buy .v2_buy_contact a {
    display: block; margin-top: 1px; font-size: 19px; font-weight: 400; color: var(--dark-color);
}

/* ============================================================================
   v2 all ways / moments
   설계 : docs/v2-allways-260922.md   시안 : docs/v2-gnb-figma-260922.md §8
   마크업 : view/kor/v2/introduction/story.php
   moments 는 v1 마크업·CSS(.samch_year …) 를 그대로 두고 radius 20 만 얹는다.
   ============================================================================ */

.v2_sub #container.v2_story,
.v2_sub #container.v2_story * {
    -webkit-box-sizing: border-box; box-sizing: border-box;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    vertical-align: baseline;
}
.v2_sub #container.v2_story .sub_container_wrap { margin: 15px auto 0; min-height: 0; }
.v2_sub #container.v2_story .sub_conts { width: 1080px; margin: 0 auto; }

/* 브레드크럼 */
.v2_sub #container.v2_story .loction_nav li { font-size: 12px; font-weight: 500; color: var(--text-mute-color); }
.v2_sub #container.v2_story .loction_nav li a { color: var(--text-mute-color); }
.v2_sub #container.v2_story .loction_nav li::after { padding: 0 7px; color: var(--chip-border-color); }
.v2_sub #container.v2_story .loction_nav li:last-child { color: var(--primary-color); }

/* 탭 — .v2_pdp_tab 공용 규칙(20px / h53 / 바 3)을 그대로 받고 위치만 조정. 2개라 flex 1 → 540씩 */
.v2_sub #container.v2_story .v2_story_tab { margin-top: 28px; }
.v2_sub #container.v2_story .v2_story_sec + .v2_story_tab { margin-top: 80px; }

/* ------------------------------------------------------------- all ways --- */
/* 시안 6039:3608 : 블록 gap 40 / 이미지 1080×600 radius 20 / 텍스트 gap 14 center */
.v2_sub #container.v2_story #v2_story_allways { margin-top: 40px; }
.v2_sub #container.v2_story .v2_story_blk + .v2_story_blk { margin-top: 40px; }
.v2_sub #container.v2_story .v2_story_img {
    width: 1080px; height: 600px; overflow: hidden; border-radius: 20px;
}
.v2_sub #container.v2_story .v2_story_img img {
    display: block; width: 1080px; height: 600px; max-width: none; object-fit: cover;
}
.v2_sub #container.v2_story .v2_story_blk strong {
    display: block; margin-top: 40px;
    font-size: 23px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--dark-color);
}
.v2_sub #container.v2_story .v2_story_blk p {
    margin-top: 14px;
    font-size: 18px; font-weight: 400; line-height: 24px; text-align: center; color: var(--text-sub3-color);
}

/* -------------------------------------------------------------- moments --- */
/* 코멘트 : "모든 요소 동일하게, 네모 박스만 20px Coner Radius".
   v1 .samch_year li 는 258×258 이미지 타일 + hover 시 ::before 빨강 오버레이(가로 0→100%).
   타일(li)·이미지·오버레이 세 겹 전부 같은 radius 를 줘야 모서리가 안 튄다. */
.v2_sub #container.v2_story .samch_year li {
    border-radius: 20px; overflow: hidden;
}
.v2_sub #container.v2_story .samch_year li img { border-radius: 20px; }
.v2_sub #container.v2_story .samch_year li::before { border-radius: 20px; }
/* v1 .prodt_conts / .moments_mp 의 위·아래 간격은 그대로. 앞 탭 줄을 숨겨 all ways 본문에 바로 이어지므로 섹션 간격 80 */
.v2_sub #container.v2_story #v2_story_moments { margin-top: 80px; }

/* moments 타일이 4×3 이 아니라 3 열로 줄바꿈되던 문제 (2026-09-22)
   v1 : .samch_year{ width:1110px; padding-left:16px }  li{ 258 + 좌우 margin 8 }  → 4열 = 1096
   v1 은 content-box 라 실제 폭이 1126 이었는데, .v2_story * 의 border-box 가 걸리면서
   안쪽 폭이 1094 로 줄어 4열(1096)이 안 들어갔다. 이 요소만 v1 사이징으로 되돌린다.
   moments 블록은 회색 배경을 꽉 채우려고 .sub_conts(1080) 밖(전폭)에 두므로
   그리드는 v1 처럼 margin auto 로 가운데 온다. 타일 시각 폭 1080 이 본문 폭과 일치한다. */
.v2_sub #container.v2_story .samch_year {
    -webkit-box-sizing: content-box; box-sizing: content-box;
    width: 1110px; padding-left: 16px; margin: 80px auto 72px;
}

/* ============================================================================
   v2 고객지원 4종 — A/S 접수(as_center) · A/S 조회(as_search) · 정품등록(refined_write) · 정품등록 조회(refined_list)
   설계 : docs/v2-customer-260922.md   시안 : docs/v2-gnb-figma-260922.md §7 (코멘트만)

   고객사 지시 (2026-09-22)
     1) .qa_acctab 탭 → 박스를 없애고 텍스트 + 밑줄 (v2_pdp_tab 과 같은 모양)
     2) 버튼 → 5px radius
   "이하 모든 요소 동일하게" 라 뷰를 복제하지 않고 v1 뷰 위에 CSS 만 얹는다.

   스코프 : .v2_pg_customer — Customer::_remap 이 v2_page 로 넘기고 v2 헤더가 #wrap 에 붙인다.
   고객지원 컨트롤러 전 페이지에 적용된다 (A/S 접수·조회 / 정품등록·조회 / FAQ / 제품설명서 / 지난제품).
   처음엔 qa_acctab 4종만 가뒀는데 FAQ·제품설명서에도 적용 지시가 와서 컨트롤러 단위로 넓혔다.
   .btn_clorR / .btn_clorB 를 쓰는 뉴스·키워드·채용 페이지는 다른 컨트롤러라 여전히 영향 없다.
   ============================================================================ */

/* ------------------------------------------------------------------ 탭 --- */
/* v1 : li 50% / padding 18 / 1px #ddd 박스 / 활성 = 빨강 배경 + 흰 글자 + 아래 삼각형(::after)
   v2 : 텍스트만, h 53, 20px Medium, 활성 #E41F20 + 3px 바 / 비활성 #71797F + #ECF0F6 바 */
.v2_sub.v2_pg_customer #container .qa_acctab {
    display: flex; width: 100%; margin: 0;
}
.v2_sub.v2_pg_customer #container .qa_acctab li {
    flex: 1 1 0; width: auto; height: 53px; padding: 0; float: none;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 20px; font-weight: 500; color: var(--text-sub-color);
    border: 0; border-bottom: 3px solid var(--chip-bg-color);
    background: none; cursor: pointer;
}
.v2_sub.v2_pg_customer #container .qa_acctab > li:first-child { border-left: 0; }
.v2_sub.v2_pg_customer #container .qa_acctab li.qa_select {
    padding: 0; position: static;
    color: var(--primary-color); background: none;
    border-bottom-color: var(--primary-color);
}
/* v1 활성 탭의 아래 삼각형 제거 */
.v2_sub.v2_pg_customer #container .qa_acctab li.qa_select::after { content: none; display: none; }

/* --------------------------------------------------------------- 버튼 --- */
/* 4종에서 쓰는 버튼 전부. 색·크기·배치는 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; }
/* 제품설명서 검색 : v1 입력은 높이 지정 없이 패딩 + 줄높이(normal)로 44 가 되는데, 줄높이가 배율마다 달라
   150% 에서 1px · 175% 에서 2px 짧아져 옆 select·버튼과 아래 테두리가 어긋난다 (100 · 125% 는 같음).
   입력 높이를 44 로 고정하고 버튼 정렬도 입력과 같은 top 으로 */
.v2_sub.v2_pg_customer #container .line_search_inner.search_direc p.inptxt input { height: 44px; }
.v2_sub.v2_pg_customer #container .line_search_inner.search_direc .btn_serch { vertical-align: top; }

/* ------------------------------------------------- 상단 배너 → 카테고리 밴드 --- */
/* 고객사 지시 (2026-09-22) : 4종 공통으로 상단 이미지 제거 + 타이틀 영역을 시안 밴드(6033:3286)로.
   v1 마크업 : <div class="sub_visual" style="background:url(customer.jpg)"><div class="sub_visual_Text"><h3>온라인 A/S</h3>
   뷰는 안 고치므로 이 마크업을 CSS 로 밴드 모양(bg #F9FAFD / h 117 / 24px SemiBold #676B72 중앙)으로 바꾼다.

   배경 이미지는 인라인 style 이라 스타일시트로는 !important 없이 못 지운다.
   이 파일은 !important 를 쓰지 않는 원칙이라 ::before 로 밴드색 판을 덮어 가린다.
   (이미지 요청 1건은 그대로 나간다 — 뷰를 고치지 않는 대가) */
.v2_sub.v2_pg_customer #container .sub_visual {
    position: relative; width: 100%; min-width: 1080px; height: 117px;
    border-top: 1px solid var(--chip-border-color);
    border-bottom: 1px solid var(--chip-border-color);
}
.v2_sub.v2_pg_customer #container .sub_visual::before {
    content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    background: var(--band-bg-color);
}
.v2_sub.v2_pg_customer #container .sub_visual_Text {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.v2_sub.v2_pg_customer #container .sub_visual_Text h3 {
    margin: 0; padding: 0;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--text-sub2-color);
}
/* 밴드 아래 간격은 다른 v2 서브페이지와 같게 (v1 은 40) */
.v2_sub.v2_pg_customer #container .sub_container_wrap { margin: 15px auto 80px; }

/* FAQ 탭 (.qa_tabs) — qa_acctab 과 같은 처리. v1 은 li 216px 5개 박스 + a.select_tabs 빨강 배경 + 삼각형,
   hover/focus/active 도 빨강 배경으로 채운다. 전부 텍스트 + 밑줄로 바꾼다.
   ※ a 에 flex 를 쓰면 안 된다. faq.js 가 클릭한 a 에 active_nor 를 붙이고(떼지 않음) v1 layout.css 의
   .active_nor{display:block !important} 가 flex 를 덮어 텍스트가 위로 붙는다. line-height 로 세로 중앙. */
.v2_sub.v2_pg_customer #container .qa_tabs {
    display: flex; width: 100%; margin: 0; text-align: center;
}
.v2_sub.v2_pg_customer #container .qa_tabs > li {
    flex: 1 1 0; width: auto; float: none; border: 0;
}
.v2_sub.v2_pg_customer #container .qa_tabs > li:first-child { border-left: 0; }
.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:focus,
.v2_sub.v2_pg_customer #container .qa_tabs > li > a:active {
    display: block; width: 100%; height: 50px; line-height: 50px; padding: 0; position: static;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 20px; font-weight: 500; color: var(--text-sub-color);
    background: none; border-bottom: 3px solid var(--chip-bg-color);
}
.v2_sub.v2_pg_customer #container .qa_tabs > li > a.select_tabs {
    color: var(--primary-color); border-bottom-color: var(--primary-color);
}
.v2_sub.v2_pg_customer #container .qa_tabs > li > a.select_tabs::after { content: none; display: none; }

/* 제품설명서 카드 제목 (.direc_txt strong) — "2026 팬텀 어라운드 (파스전용)" 처럼 길면 두 줄로 꺾여
   카드 높이가 흔들린다. 한 줄 + 말줄임. v1 은 strong float:left / a float:right 라 strong 폭이 정해지지
   않아 flex 로 바꾼다. 글자 위치(padding-top 10)·다운로드 버튼(43×42)은 v1 그대로. */
.v2_sub.v2_pg_customer #container .direc_txt { display: flex; }
.v2_sub.v2_pg_customer #container .direc_txt strong {
    flex: 1 1 0; min-width: 0; float: none; padding: 10px 10px 0 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2_sub.v2_pg_customer #container .direc_txt a { flex: 0 0 43px; float: none; }

/* 체크박스 — as_center(동의 1개) · refined_write(동의 1개 + 라이딩 스타일 4개). 지시 범위는 이 두 페이지뿐인데
   고객지원 컨트롤러에서 체크박스가 있는 뷰도 이 둘뿐이라 .v2_pg_customer 스코프로 충분하다.
   (as_search · refined_list · faq_list · product_lists · after_pro_lists · bicycle_* 에는 체크박스가 없다)
   v1 : label::before 24×24 PNG(checkbox_off/on = 1px #ddd 사각 + 회색 V / 빨강 사각 + 빨강 V).
   이미지에는 radius 를 줄 수 없어 대리점 .v2_chk 처럼 CSS 로 그린다. 크기 24 · 오른쪽 간격 8 은 v1 그대로.
   color : 테두리 #ddd → --input-border-color(#D6D6D6) 스냅, V #bbb → --btn-gray-color(#BBBFC7) 스냅,
           체크 시 #d92628 → --primary-color(#E41F20, B안).
   ::after 를 V 로 쓴다. refined_write 라이딩 스타일은 .qa_formTxt li 안이라 v1 이 label::after 에 필수표시 "*" 를
   두고 .filebox1 에서 display:none 으로 감춘다 — 여기서 content · display 를 함께 덮어 V 로 바꾼다. */
.v2_sub.v2_pg_customer #container .checks input[type="checkbox"] + label {
    display: inline-flex; align-items: center; position: relative;
}
.v2_sub.v2_pg_customer #container .checks input[type="checkbox"] + label::before {
    content: ""; flex: 0 0 24px; width: 24px; height: 24px; 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;
}
/* V 위치 — 박스 24(안쪽 22, 중심 12,12). 요소 6×11 + 테두리 2 = 8×13 을 45도 돌리면 잉크 중심이
   요소 중심에서 약 (-0.9, +3) 로 밀린다. 요소 중심 (12.9, 9) → left 9 / top 2.5 */
.v2_sub.v2_pg_customer #container .checks input[type="checkbox"] + label::after {
    content: ""; display: block; position: absolute; left: 9px; top: 2.5px;
    width: 6px; height: 11px; padding: 0; margin: 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); }
.v2_sub.v2_pg_customer #container .checks input[type="checkbox"]:checked + label::after { border-color: var(--primary-color); }

/* ============================================================================
   v2 회사소개 서브 (PC) — 선수 후원 · 윤리경영 · 투자정보 : 모바일 "공통 페이징 작업" 과 같은 수준으로 맞춤 (2026-09-22)
   설계 : docs/v2-customer-260922.md §9-1 · §9-3(PC)
   뷰는 v1 그대로. 스코프 .v2_pg_intro_<load|method> 는 Introduction::_remap 이 v2_page 로 넘긴다.
   ============================================================================ */

/* ------------------------------------------------- 상단 배너 → 카테고리 밴드 --- */
/* 고객지원 PC(.v2_pg_customer .sub_visual) 와 같은 처리. 윤리경영 PC 뷰에는 .sub_visual 이 없어 대상 밖 */
.v2_sub.v2_pg_intro_rider #container .sub_visual,
.v2_sub.v2_pg_intro_finance #container .sub_visual,
.v2_sub.v2_pg_intro_stock #container .sub_visual,
.v2_sub.v2_pg_intro_irList #container .sub_visual,
.v2_sub.v2_pg_news_list #container .sub_visual,
.v2_sub.v2_pg_news_view #container .sub_visual {
    position: relative; width: 100%; min-width: 1080px; height: 117px;
    border-top: 1px solid var(--chip-border-color);
    border-bottom: 1px solid var(--chip-border-color);
}
.v2_sub.v2_pg_intro_rider #container .sub_visual::before,
.v2_sub.v2_pg_intro_finance #container .sub_visual::before,
.v2_sub.v2_pg_intro_stock #container .sub_visual::before,
.v2_sub.v2_pg_intro_irList #container .sub_visual::before,
.v2_sub.v2_pg_news_list #container .sub_visual::before,
.v2_sub.v2_pg_news_view #container .sub_visual::before {
    content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    background: var(--band-bg-color);
}
.v2_sub.v2_pg_intro_rider #container .sub_visual_Text,
.v2_sub.v2_pg_intro_finance #container .sub_visual_Text,
.v2_sub.v2_pg_intro_stock #container .sub_visual_Text,
.v2_sub.v2_pg_intro_irList #container .sub_visual_Text,
.v2_sub.v2_pg_news_list #container .sub_visual_Text,
.v2_sub.v2_pg_news_view #container .sub_visual_Text {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.v2_sub.v2_pg_intro_rider #container .sub_visual_Text h3,
.v2_sub.v2_pg_intro_finance #container .sub_visual_Text h3,
.v2_sub.v2_pg_intro_stock #container .sub_visual_Text h3,
.v2_sub.v2_pg_intro_irList #container .sub_visual_Text h3,
.v2_sub.v2_pg_news_list #container .sub_visual_Text h3,
.v2_sub.v2_pg_news_view #container .sub_visual_Text h3 {
    margin: 0; padding: 0;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--text-sub2-color);
}
.v2_sub.v2_pg_intro_rider #container .sub_container_wrap,
.v2_sub.v2_pg_intro_finance #container .sub_container_wrap,
.v2_sub.v2_pg_intro_stock #container .sub_container_wrap,
.v2_sub.v2_pg_intro_irList #container .sub_container_wrap,
.v2_sub.v2_pg_news_list #container .sub_container_wrap,
.v2_sub.v2_pg_news_view #container .sub_container_wrap { margin: 15px auto 80px; }

/* ------------------------------------------------------------------ 탭 --- */
/* 고객지원 .qa_tabs 와 같은 값 : 텍스트만, h 53(패딩 18 대신), 20px 500, 3px 바. 활성 #E41F20
   선수후원 .rider_acctab 는 table-cell 360×90 이미지 탭 → flex. v2 뷰(view/kor/v2/introduction/rider.php)에서 텍스트 탭, 활성 a.on */
.v2_sub.v2_pg_intro_rider #container .rider_acctab,
.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: flex; width: 100%; margin: 0; border: 0; text-align: center;
}
.v2_sub.v2_pg_intro_rider #container .rider_acctab li,
.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 {
    flex: 1 1 0; display: block; float: none; width: auto; height: auto; line-height: normal;
    padding: 0; border: 0; text-align: center;
}
.v2_sub.v2_pg_intro_rider #container .rider_acctab li a,
.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_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: 53px; line-height: 53px; padding: 0; position: static;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 20px; font-weight: 500; color: var(--text-sub-color);
    background: none; border: 0; border-bottom: 3px solid var(--chip-bg-color);
}
.v2_sub.v2_pg_intro_rider #container .rider_acctab li a.on,
.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; }

/* --------------------------------------------------------------- 버튼 --- */
/* 색·크기·배치는 v1 그대로, 모서리만 5px */
.v2_sub.v2_pg_intro_rider #container .ride_cont.cont3 .text_wrap a,
.v2_sub.v2_pg_intro_ethics #container .ethics_txt button.policy_down,
.v2_sub.v2_pg_intro_irList #container .btn_down,
.v2_sub.v2_pg_intro_irList #container button.btn_add { border-radius: 5px; }

/* ------------------------------------------------- 선수 후원 장비 카드 --- */
/* 모바일은 이미지에 20 라운드. PC 는 이미지가 1px #e7e7e7 카드(.prd_detail) 안 좌측에 붙어 있어 카드째 20 라운드 */
.v2_sub.v2_pg_intro_rider #container .ride_cont.cont3 .prd_detail { border-radius: 20px; overflow: hidden; }

/* 선수 후원 intro·history 이미지(.cont1/.cont2 .pc_img img, 1080×500 / 1080×200) 20px 라운드 — 모바일과 동일 (2026-09-22 지시) */
.v2_sub.v2_pg_intro_rider #container .ride_cont.cont1 .pc_img img,
.v2_sub.v2_pg_intro_rider #container .ride_cont.cont2 .pc_img img { display: block; border-radius: 20px; }


/* ============================================================================
   v2 뉴스 목록 · 상세 (PC) — 설계 : docs/v2-news-260930.md
   뷰·JS 는 v1 그대로(view/kor/news/news_list.php · news_view.php). 스코프 .v2_pg_news_list / .v2_pg_news_view 는 News::_remap 이 v2_page 로 넘긴다.
   상단 밴드는 위 회사소개 밴드 규칙에 셀렉터를 같이 걸었다. 여기는 뉴스 전용만.
   ============================================================================ */

/* 타이틀·브레드크럼 문구 "뉴스·이벤트". 뷰를 안 고치므로 글자를 0 으로 두고 가상 요소로 넣는다 */
.v2_sub.v2_pg_news_list #container .sub_visual_Text h3,
.v2_sub.v2_pg_news_view #container .sub_visual_Text h3 { font-size: 0; }
.v2_sub.v2_pg_news_list #container .sub_visual_Text h3::after,
.v2_sub.v2_pg_news_view #container .sub_visual_Text h3::after { content: "뉴스·이벤트"; font-size: 24px; }
/* v1 : Home / 뉴스 / 뉴스 → Home / 뉴스·이벤트 */
.v2_sub.v2_pg_news_list #container .loction_nav li:nth-child(2),
.v2_sub.v2_pg_news_view #container .loction_nav li:nth-child(2) { display: none; }
.v2_sub.v2_pg_news_list #container .loction_nav li:last-child,
.v2_sub.v2_pg_news_view #container .loction_nav li:last-child { font-size: 0; }
.v2_sub.v2_pg_news_list #container .loction_nav li:last-child::before,
.v2_sub.v2_pg_news_view #container .loction_nav li:last-child::before { content: "뉴스·이벤트"; font-size: 13px; }

/* 태그 — 메인 뉴스·이벤트 태그(pc/main.css .v2_news_tags em)와 같은 값.
   상단 필터 .heshtag2(li > a) / 목록 .heshtag3(사진 있음)·.heshtag4(글만) (li > span, JS 렌더).
   상세 하단 .view_txt .heshtag(li 에 글자 직접). 상세 태그는 링크가 아니라 hover 변화 없음.
   v1 은 li 사이에 &nbsp; 가 있어 ul 글자 크기를 0 으로 두고 간격은 li margin 으로 */
.v2_sub.v2_pg_news_list #container .heshtag2,
.v2_sub.v2_pg_news_list #container .news_lst .heshtag3,
.v2_sub.v2_pg_news_list #container .news_lst .heshtag4,
.v2_sub.v2_pg_news_view #container .view_txt .heshtag { font-size: 0; line-height: 0; }
.v2_sub.v2_pg_news_list #container .heshtag2 li,
.v2_sub.v2_pg_news_list #container .heshtag2 li:hover,
.v2_sub.v2_pg_news_list #container .heshtag2 li.on,
.v2_sub.v2_pg_news_list #container .news_lst .heshtag3 li,
.v2_sub.v2_pg_news_list #container .news_lst .heshtag3 li:hover,
.v2_sub.v2_pg_news_list #container .news_lst .heshtag4 li,
.v2_sub.v2_pg_news_list #container .news_lst .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(--btn-gray-color);
    border: .3px solid var(--text-mute-color); border-radius: 3px;
    -webkit-transition: background-color .2s ease, border-color .2s ease;
    transition: background-color .2s ease, border-color .2s ease;
}
/* 상단 필터는 같은 줄 오른쪽 검색 입력(h 44)과 높이·모서리(10)를 맞춘다 */
.v2_sub.v2_pg_news_list #container .heshtag2 li,
.v2_sub.v2_pg_news_list #container .heshtag2 li:hover,
.v2_sub.v2_pg_news_list #container .heshtag2 li.on {
    display: inline-flex; align-items: center; height: 44px; padding: 0 16px; box-sizing: border-box;
    border-radius: 10px;
}
/* 안쪽 글자는 v1 의 줄높이 14.4 · vertical-align top 때문에 글자(17)가 칸 위로 붙는다 → 글자 높이 그대로 가운데 */
.v2_sub.v2_pg_news_list #container .heshtag2 li a,
.v2_sub.v2_pg_news_list #container .news_lst .heshtag3 li span,
.v2_sub.v2_pg_news_list #container .news_lst .heshtag4 li span,
.v2_sub.v2_pg_news_view #container .view_txt .heshtag li,
.v2_sub.v2_pg_news_view #container .view_txt .heshtag li:hover { line-height: normal; vertical-align: baseline; color: #fff; }
/* v1 상세 태그는 ::after 로 배경 이미지(heshtag_bg.png)를 붙인다 */
.v2_sub.v2_pg_news_view #container .view_txt .heshtag li::after { display: none; }
/* 선택·hover 는 메인과 같이 빨강. 목록 태그는 행 hover 에 같이 바뀐다 (메인 행 hover 와 같음) */
.v2_sub.v2_pg_news_list #container .heshtag2 li:hover,
.v2_sub.v2_pg_news_list #container .heshtag2 li.on,
.v2_sub.v2_pg_news_list #container .news_lst > li > a:hover .heshtag3 li,
.v2_sub.v2_pg_news_list #container .news_lst > li > a:hover .heshtag4 li {
    background: var(--sub-red-color);
    border-color: var(--sub-red-border-color);
}

/* 날짜 아래 화살표 버튼 — 고객사 전달 이미지(100×44). v1 btn_lst_linkB.png 는 다른 v1 페이지도 써서 따로 둔다 */
.v2_sub.v2_pg_news_list #container .news_info > p + p::after { background-image: url("../../images/contents/btn_news_link.png"); }

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

/* 검색 입력 + 버튼 : 바깥 모서리 10 (지난 제품보기 검색과 같은 값). 색·크기는 v1 그대로.
   v1 input 패딩(위 4 · 아래 1)이 글자를 아래로 치우치게 해 위아래 0 으로, 높이는 44 그대로 */
.v2_sub.v2_pg_news_list #container .news_search p.inptxt input {
    box-sizing: border-box; height: 44px; padding-top: 0; padding-bottom: 0;
    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 button.btn_add,
.v2_sub.v2_pg_news_view #container button.btn_add { border-radius: 5px; }

/* 검은 선 #333 → --text-mute-color(#A1A5AE). 목록 : 검색줄 하단 · 마지막 글 하단 / 상세 : 본문 상단(.bord_top) · 머리 하단 · 본문 하단 */
.v2_sub.v2_pg_news_list #container .news_search { border-bottom-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 .prodt_area.bord_top { border-top-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 키워드로 찾기 (PC) — 설계 : docs/v2-keyword-260923.md
   마크업 : view/kor/v2/bicycle/keyword.php. 컨테이너에 .v2_plp 를 같이 붙여
   밴드·브레드크럼·카드·태그칩은 위 PLP 규칙을 그대로 받는다. 여기는 키워드 전용만.
   v1 pc/contents.css:176~220(검색·칩·버튼) / 1049~1067(슬라이더) 위에 얹는다.
   지시에 없는 값(칩 크기 100/44px, 구분선 #bbb, 슬라이더 트랙 이미지)은 v1 그대로.
   ============================================================================ */

/* 검색 입력 + 버튼 : 바깥 모서리 15, 배경 --primary (지시 #E41F20).
   vertical-align top : .v2_plp * 의 baseline 이 v1 top 을 덮어 입력·버튼 높이가 어긋난다 (통합검색과 같은 원인) */
.v2_sub #container.v2_keyword .search_keywod { margin-top: 40px; }
.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 20, 선택 = 흰 글자 + --sub-red (지시 #F55B5C). hover 의 v1 #d92628 은 --primary 로 스냅 */
.v2_sub #container.v2_keyword .recomm_keywod > ul > li > a { border-radius: 20px; }
.v2_sub #container.v2_keyword .recomm_keywod > ul > li > a:hover { color: var(--primary-color); border-color: var(--primary-color); }
.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 */
.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 (PLP 규칙의 상단선은 뺀다) */
.v2_sub #container.v2_keyword .result_txt { overflow: hidden; }
.v2_sub #container.v2_keyword .result_txt > p { font-size: 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 {
    margin-top: 0; padding: 0 0 10px;
    border-top: 0; border-bottom: 1px solid var(--text-mute-color);
}


/* ============================================================================
   v2 통합검색 결과 (PC) — 설계 : docs/v2-search-260923.md
   마크업 : view/kor/v2/introduction/searchList.php. 컨테이너에 .v2_plp 를 같이 붙여
   밴드·브레드크럼·카드·태그칩은 PLP 규칙을 받는다. 여기는 검색 전용만.
   v1 pc/contents.css:223~240(검색·건수·구분·결과없음) / 566~573(연도 탭) 위에 얹는다.
   ============================================================================ */

/* 검색 입력 + 버튼 : 바깥 모서리 15, 배경 --primary (지시 #E41F20) */
.v2_sub #container.v2_search .line_search_inner02 { margin-top: 40px; }
/* 입력·버튼 위치 : v1 은 vertical-align top 인데 .v2_plp * 의 baseline 이 덮어 입력이 0.4px 내려앉는다 → top 으로 되돌림 */
.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;
}

/* 건수 + 연도 탭 한 줄. 하단 1px --text-mute (지시 #A1A5AE) */
.v2_sub #container.v2_search .search_year {
    display: flex; align-items: flex-end; justify-content: space-between;
    width: 100%; margin-top: 50px; padding-bottom: 10px;
    border-bottom: 1px solid var(--text-mute-color);
}
.v2_sub #container.v2_search .search_year p { float: none; padding: 0; font-size: 16px; color: var(--dark-color); }
.v2_sub #container.v2_search .search_year p span { color: var(--primary-color); }
/* 연도 탭 — PLP 정렬바와 같은 규칙. v1 의 png 화살표 아이콘은 뺀다 */
.v2_sub #container.v2_search .last_year { float: none; margin: 0; font-size: 0; }
.v2_sub #container.v2_search .last_year li { font-size: 13px; }
.v2_sub #container.v2_search .last_year li::after { padding: 0 10px; color: var(--chip-border-color); }
.v2_sub #container.v2_search .last_year li a { font-size: 13px; color: var(--text-mute-color); }
.v2_sub #container.v2_search .last_year li a:hover,
.v2_sub #container.v2_search .last_year li a.last_select { color: var(--sub-red-color); }
.v2_sub #container.v2_search .last_year li a.last_select::before { content: none; display: none; }

/* 구분 제목 "자전거 (n건)" — 세로바 삭제(지시). 용품 앞 상단선은 --text-mute */
.v2_sub #container.v2_search p.prodtdep { padding: 30px 0 0; font-size: 20px; 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: 15px; }
.v2_sub #container.v2_search ul.prodt_lst + p.prodtdep { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--text-mute-color); }

/* 결과 없음 — 카드 규칙이 걸리지 않게 폭 100% / 테두리 없음. v1 배경 이미지·#333 선은 뺀다 */
.v2_sub #container.v2_search ul.prodt_lst > li.norl_list,
.v2_sub #container.v2_search ul.prodt_lst > li.norl_list:hover,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst > li.norl_list,
.v2_sub.v2_pg_customer #container .last_flm ~ ul.prodt_lst > li.norl_list:hover {
    width: 100%; min-height: 0; padding: 80px 0; line-height: 1.4;
    font-size: 18px; text-align: center; color: var(--text-sub-color);
    background: none; border: 0; border-radius: 0;
}


/* ============================================================================
   v2 윤리 경영 (PC) — 설계 : docs/v2-ethics-260923.md
   마크업 : view/kor/v2/introduction/ethics.php (v2 뷰). 탭·버튼 규칙은 위 .v2_pg_intro_ethics 블록 그대로.
   밴드는 공용 .v2_plp_band. 여기는 브레드크럼·여백만.
   ============================================================================ */
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .sub_container_wrap { margin: 15px auto 80px; min-height: 0; }
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .loction_nav li { font-size: 12px; font-weight: 500; color: var(--text-mute-color); }
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .loction_nav li a { color: var(--text-mute-color); }
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .loction_nav li::after { padding: 0 7px; color: var(--chip-border-color); }
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .loction_nav li:last-child { color: var(--primary-color); }
/* 탭 안 제목(.pol_title)과 상단선이 빠져 탭과 본문이 붙는다 → 첫 블록 위 40 */
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .ethics_cont > .policy:first-child { margin-top: 40px; padding-top: 0; }
/* 2026-09-23 지시 : 블록(.inside_txt) 위 30, 구분선 블록(.policy.bord_top)의 v1 padding-top 30 은 뺀다 */
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .inside_txt { padding-top: 30px; }
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .policy.bord_top { padding-top: 0; }
/* 2026-09-23 지시 : 본문 p 들여쓰기를 모바일(v1 m_contents.css:932)과 같은 7% 로. v1 PC 는 40px.
   윤리 위반 신고 탭의 메일 줄도 같은 7% 로 들여 안내문과 줄을 맞춘다 */
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .inside_txt p { padding-left: 7%; }
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .inside_txt p.policy_intro { padding-left: 0; }
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .inside_txt p.ethics_mail { font-size: 16px; color: var(--dark-color); }
.v2_sub.v2_pg_intro_ethics #container.v2_ethics .inside_txt p.ethics_mail a { display: inline; line-height: inherit; vertical-align: baseline; }