@charset "utf-8"; /* ========================================================== 상품상세 페이지 전용 스타일 (www/shop/list/item/index.jsp) - board.css 의 상품상세 기본 스타일을 사이트 톤(main_page.css · shop_all.css)에 맞춰 오버라이드 · 색 : 본문 #2b2926 / 보조 #736d68 · #8e8883 / 선 #e6e3df · #f0eeeb / 배경 #faf9f7 · #f5f3f0 · 강조 : 할인 #d5442f / 브랜드 그린 #1f4d36 · #2b6b4f · 각진 요소(border-radius:0), 얇은 1px 선, 굵기 대비는 금액·활성 탭에만 - 선택자는 #wrap.shop_item_page 로 스코프 한정 (alert 모달 등 공통 컴포넌트 오염 방지) - 컨텐츠 폭은 헤더·전제품과 동일: max 1552px, 좌우 40px ========================================================== */ #wrap.shop_item_page {font-family:'Noto Sans KR', sans-serif; font-size:14px; color:#2b2926; line-height:1.5;} #wrap.shop_item_page a {color:inherit;} /* board.css 의 .shop_common_wrapper01 * {word-break:break-all} 보정 — 단어 단위 줄바꿈, 넘칠 때만 임의 위치에서 끊음 */ #wrap.shop_item_page.shop_common_wrapper01 * {word-break:keep-all; overflow-wrap:anywhere;} /* ---------- 컨텐츠 폭 ---------- */ #wrap.shop_item_page .shop_item_detail_wrapper01 > .inner, #wrap.shop_item_page .shop_item_info_detail_box01 {width:100%; max-width:1552px; margin:0 auto; padding:0 40px; box-sizing:border-box;} #wrap.shop_item_page .shop_item_detail_wrapper01 > .inner {padding-top:56px;} #wrap.shop_item_page .shop_item_info_detail_box01 {margin-top:96px; padding-bottom:112px;} /* 안쪽에 중첩된 .inner(탭·섹션)·2컬럼은 바깥 여백을 이미 가지므로 폭 제한/여백 해제 */ #wrap.shop_item_page .shop_item_info_detail_box01 .inner, #wrap.shop_item_page .shop_item_content_wrapper {width:100%; max-width:none; padding-left:0; padding-right:0;} /* ---------- 상단: 이미지 / 상품정보 2컬럼 ---------- */ #wrap.shop_item_page .shop_item_detail_top_box01 {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 80px; align-items:start;} #wrap.shop_item_page .shop_item_detail_top_box01 > div {width:auto;} /* 정보 컬럼: 이미지가 더 길어도 정보가 따라오도록 sticky. 아래 결과 영역이 하단에 붙지 않게 flex → block */ #wrap.shop_item_page .shop_item_detail_alt_box01 {display:block; position:sticky; top:24px;} /* 이미지 슬라이드 — 각진 썸네일, 얇은 사각 화살표 */ #wrap.shop_item_page .shop_item_detail_slide .item, #wrap.shop_item_page .shop_item_detail_slide_thumb .item {border-radius:0; background:#f5f3f0;} #wrap.shop_item_page .shop_item_detail_slide .swiper-button-prev, #wrap.shop_item_page .shop_item_detail_slide .swiper-button-next {width:40px; height:40px; margin-top:-20px; border:1px solid rgba(43,41,38,0.25); border-radius:0; background:rgba(255,255,255,0.85); box-shadow:none; transition:background 0.25s, border-color 0.25s;} #wrap.shop_item_page .shop_item_detail_slide .swiper-button-prev:after, #wrap.shop_item_page .shop_item_detail_slide .swiper-button-next:after {font-size:12px; font-weight:400; color:#2b2926;} #wrap.shop_item_page .shop_item_detail_slide .swiper-button-prev:hover, #wrap.shop_item_page .shop_item_detail_slide .swiper-button-next:hover {background:#fff; border-color:#2b2926;} #wrap.shop_item_page .shop_item_detail_slide .swiper-button-prev {left:16px;} #wrap.shop_item_page .shop_item_detail_slide .swiper-button-next {right:16px;} /* 이미지가 1장이면 화살표(swiper-button-lock)·썸네일 줄(.single) 숨김 */ #wrap.shop_item_page .shop_item_detail_slide .swiper-button-lock, #wrap.shop_item_page .shop_item_detail_slide_thumb_wrap.single {display:none;} #wrap.shop_item_page .shop_item_detail_slide_thumb_wrap {gap:8px; margin-top:12px;} #wrap.shop_item_page .shop_item_detail_slide_thumb_wrap .swiper-button-prev, #wrap.shop_item_page .shop_item_detail_slide_thumb_wrap .swiper-button-next {width:28px; height:28px; border:1px solid #d9d5d0; border-radius:0; background:#fff; box-shadow:none; transition:border-color 0.25s;} #wrap.shop_item_page .shop_item_detail_slide_thumb_wrap .swiper-button-prev:after, #wrap.shop_item_page .shop_item_detail_slide_thumb_wrap .swiper-button-next:after {font-size:10px; font-weight:400; color:#2b2926;} #wrap.shop_item_page .shop_item_detail_slide_thumb_wrap .swiper-button-prev:hover, #wrap.shop_item_page .shop_item_detail_slide_thumb_wrap .swiper-button-next:hover {background:#fff; border-color:#2b2926;} #wrap.shop_item_page .shop_item_detail_slide_thumb_wrap .swiper-button-lock {display:none;} /* 썸네일: 선택된 것만 또렷하게 + 검정 테두리 */ #wrap.shop_item_page .shop_item_detail_slide_thumb .item {border:1px solid transparent; box-sizing:border-box; opacity:0.55; transition:opacity 0.2s, border-color 0.2s;} #wrap.shop_item_page .shop_item_detail_slide_thumb .item:hover {opacity:1;} #wrap.shop_item_page .shop_item_detail_slide_thumb .swiper-slide-thumb-active {opacity:1; border-color:#2b2926;} /* ---------- 상품정보 ---------- */ /* 상품명 + 찜 */ #wrap.shop_item_page .shop_item_detail_alt_box01 .top_box.border_box01 {padding-bottom:24px; border-bottom:1px solid #2b2926;} #wrap.shop_item_page .shop_item_detail_alt_box01 .top_box .tit_box {gap:16px; align-items:flex-start;} #wrap.shop_item_page .shop_item_detail_alt_box01 .top_box .tit_box .tit {font-size:28px; font-weight:500; line-height:1.35; letter-spacing:-0.02em; color:#2b2926;} #wrap.shop_item_page .shop_item_detail_alt_box01 .top_box .tit_box .fa-heart {flex:0 0 auto; margin-top:8px; font-size:22px; color:#d9d5d0; transition:color 0.2s;} #wrap.shop_item_page .shop_item_detail_alt_box01 .top_box .tit_box .fa-heart:hover {color:#2b2926;} #wrap.shop_item_page .shop_item_detail_alt_box01 .top_box .tit_box .fa-heart.active {color:#d5442f;} #wrap.shop_item_page .shop_item_detail_alt_box01 .top_box .alt_box {margin-top:10px; font-size:15px; font-weight:300; line-height:1.7; color:#736d68;} #wrap.shop_item_page .shop_item_detail_alt_box01 .top_box .alt_box p {margin:0;} /* 판매금액·배송비 행 — 라벨은 옅게, 값은 본문색. 행 사이는 옅은 1px 선 */ #wrap.shop_item_page .shop_item_detail_alt_box01 .center_box .option_box01 {display:flex; align-items:center; padding:18px 0;} #wrap.shop_item_page .shop_item_detail_alt_box01 .center_box .option_box01.border_box01 {border-bottom:1px solid #f0eeeb;} #wrap.shop_item_page .shop_item_detail_alt_box01 .center_box .option_box01:first-child {padding:24px 0;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .tit {width:96px; flex:0 0 96px; font-size:14px; font-weight:400; color:#8e8883;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .option_alt {width:auto; flex:1; min-width:0; gap:4px 10px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .option_alt span {font-size:15px; font-weight:400; color:#2b2926;} /* 금액: 할인율(레드) → 판매가(굵게) → 정가(취소선) 순서 — 상품 카드(.price .dc .now .org)와 동일 */ #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .option_alt .percent01 {order:1; font-size:22px; font-weight:700; color:#d5442f;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .option_alt .price01 {order:2; align-items:baseline; gap:2px; font-size:26px; font-weight:700; color:#2b2926;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .option_alt .price01 span {font-size:15px; font-weight:400;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .option_alt .discount01 {order:3; font-size:15px; font-weight:400; color:#9c9691; text-decoration:line-through;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .option_alt .price01 .grade_label {margin-left:6px; font-size:13px; font-weight:500; color:#2b6b4f;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .option_alt .free_condition {font-size:13px; color:#8e8883;} /* 옵션 select — 흰 배경, 1px 테두리, 각진 모서리 */ #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 {padding:24px 0 0; margin:0;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_info_select01 {height:52px; padding:0 44px 0 16px; border:1px solid #d9d5d0; border-radius:0; background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%232b2926' stroke-width='1.2' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-size:12px 12px; background-position:right 16px center; font-family:inherit; font-size:14px; color:#2b2926; transition:border-color 0.2s;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_info_select01:hover, #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_info_select01:focus {border-color:#2b2926;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_info_select01 + .shop_prd_info_select01 {margin-top:8px;} /* 선택된 옵션 결과 — 베이지 카드 */ #wrap.shop_item_page .shop_item_detail_alt_box01 .option_result_box01_wrapper {margin-top:12px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_result_box01_wrapper .box:empty {display:none;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 {gap:12px 16px; padding:14px 16px; border:1px solid #f0eeeb; border-radius:0; background:#faf9f7;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 + .option_result_box01, #wrap.shop_item_page .shop_item_detail_alt_box01 .option_result_box01_wrapper .box + .box .option_result_box01:first-child {margin-top:8px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .l_box {gap:14px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .l_box .tit {max-width:none; font-size:14px; font-weight:400; color:#2b2926;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .l_box .shop_prd_count_box01 {min-width:0; border:1px solid #d9d5d0; background:#fff;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .shop_prd_count_box01 .shop_option_btn01 {display:flex; align-items:center; justify-content:center; width:32px; min-width:32px; height:32px;} /* +/- 는 이미지 대신 CSS 기호 (작게 줄이면 png 가 흐려짐) */ #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .shop_prd_count_box01 .shop_option_btn01 img {display:none;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .shop_prd_count_box01 .shop_option_btn01:before {display:block; width:10px; height:10px; content:''; background:no-repeat center / 10px 10px; opacity:0.85; transition:opacity 0.2s;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .shop_prd_count_box01 .shop_option_btn01.minus_btn01:before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath stroke='%232b2926' stroke-width='1.2' d='M1 5h8'/%3E%3C/svg%3E");} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .shop_prd_count_box01 .shop_option_btn01.plus_btn01:before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath stroke='%232b2926' stroke-width='1.2' d='M1 5h8M5 1v8'/%3E%3C/svg%3E");} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .shop_prd_count_box01 .shop_option_btn01:hover:before {opacity:1;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .shop_prd_count_box01 .shop_option_btn01.disabled:before {opacity:0.3;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .l_box .shop_prd_count_box01 .shop_option_count01 {width:40px; height:32px; border-left:1px solid #d9d5d0; border-right:1px solid #d9d5d0; font-size:14px; color:#2b2926;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .shop_prd_price_box01 {align-items:center; gap:0 14px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .shop_prd_price01 {display:flex; align-items:baseline; gap:0 2px; font-size:14px; color:#2b2926;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .shop_prd_price01 b {font-size:16px; font-weight:700;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_cancle_btn01 {width:18px; height:18px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_cancle_btn01 span {background:#9c9691; transition:background 0.2s;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_cancle_btn01:hover span {background:#2b2926;} /* 할인 정보(세일·쿠폰 예상) — index.jsp 인라인 스타일을 사이트 톤으로 보정 */ #wrap.shop_item_page .shop_discount_info_box {margin:16px 0 0; padding:4px 16px; border:1px solid #f0eeeb; border-radius:0; background:#faf9f7;} #wrap.shop_item_page .shop_discount_info_box .discount_row {padding:9px 0;} #wrap.shop_item_page .shop_discount_info_box .discount_row:not(:last-child) {border-bottom:1px dashed #e6e3df;} #wrap.shop_item_page .shop_discount_info_box .discount_row .label {font-size:13px; color:#736d68;} #wrap.shop_item_page .shop_discount_info_box .discount_row .value {font-size:14px; font-weight:500; color:#d5442f;} #wrap.shop_item_page .shop_discount_info_box .discount_row.sale_discount_row .label, #wrap.shop_item_page .shop_discount_info_box .discount_row.coupon_discount_row .label {color:#736d68;} #wrap.shop_item_page .shop_discount_info_box .discount_row.sale_discount_row .value {color:#2b6b4f;} #wrap.shop_item_page .shop_discount_info_box .discount_row.coupon_discount_row .value {color:#d5442f;} /* 총 주문 금액 + 버튼 */ #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_item_detail_result_box01 {margin-top:24px; padding-top:20px; border-top:1px solid #2b2926;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_info_quick_result01 {margin-bottom:20px; font-size:15px; font-weight:500;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_info_quick_result01 .tit {color:#2b2926;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_info_quick_result01 .price01 {align-items:baseline; gap:0 3px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_info_quick_result01 .price01 b {font-size:28px; font-weight:700; color:#2b2926;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_info_quick_result01 .price01 span {font-size:15px; color:#2b2926;} /* 버튼: 장바구니(라인) / 바로구매(검정) — 이벤트 상세의 .btn_line / .btn_black 과 동일 규격, 호버는 브랜드 그린 */ #wrap.shop_item_page .shop_item_detail_wrapper01 .login_submit_btn_box01, #wrap.shop_item_page .cart_popup .login_submit_btn_box01 {display:flex; gap:8px; margin-top:0;} #wrap.shop_item_page .shop_item_detail_wrapper01 .login_chk_btn01, #wrap.shop_item_page .shop_item_right_sticky .login_chk_btn01, #wrap.shop_item_page .cart_popup .login_chk_btn01 {height:56px; border:1px solid #1f4d36; border-radius:0; background:#1f4d36; color:#fff; font-size:15px; font-weight:500; letter-spacing:0.02em; transition:background 0.25s, border-color 0.25s, color 0.25s;} #wrap.shop_item_page .shop_item_detail_wrapper01 .login_chk_btn01:hover, #wrap.shop_item_page .shop_item_right_sticky .login_chk_btn01:hover, #wrap.shop_item_page .cart_popup .login_chk_btn01:hover {background:#153526; border-color:#153526; color:#fff;} #wrap.shop_item_page .shop_item_detail_wrapper01 .login_chk_btn01.type02, #wrap.shop_item_page .shop_item_right_sticky .login_chk_btn01.type02, #wrap.shop_item_page .cart_popup .login_chk_btn01.type02 {background:#fff; border-color:#2b2926; color:#2b2926;} #wrap.shop_item_page .shop_item_detail_wrapper01 .login_chk_btn01.type02:hover, #wrap.shop_item_page .shop_item_right_sticky .login_chk_btn01.type02:hover, #wrap.shop_item_page .cart_popup .login_chk_btn01.type02:hover {background:#f5f3f0; border-color:#2b2926; color:#2b2926;} /* 면색 버튼(바로구매·팝업 장바구니 가기 등)은 전부 브랜드 그린 → 호버 진한 그린 (2026-09-22 전 사이트 통일). 장바구니 담기는 .type02 테두리형. 아래 바로구매 규칙은 위 기본값과 같아졌지만 명시적으로 유지 */ #wrap.shop_item_page .shop_item_detail_wrapper01 .login_chk_btn01.buy_now_btn, #wrap.shop_item_page .shop_item_right_sticky .login_chk_btn01.sticky_buy_btn {background:#1f4d36; border-color:#1f4d36; color:#fff;} #wrap.shop_item_page .shop_item_detail_wrapper01 .login_chk_btn01.buy_now_btn:hover, #wrap.shop_item_page .shop_item_right_sticky .login_chk_btn01.sticky_buy_btn:hover {background:#153526; border-color:#153526; color:#fff;} /* 타임세일 배너 — 각진 모서리만 */ #wrap.shop_item_page .timesale_detail_banner {border-radius:0; margin:20px 0 0;} #wrap.shop_item_page .timesale_detail_timer .ts_digit {border-radius:0; box-shadow:none;} /* ---------- 탭 (상세설명 / 배송·반품 / 상품평 / Q&A) ---------- 전제품 카테고리 탭(.cate_tab)과 동일: 얇은 하단선, 활성은 2px 검정 밑줄 */ /* 하단 1px 선은 래퍼 border 대신 inset 그림자로 — 항목의 2px 활성 밑줄이 그 위에 겹치고, 항목이 래퍼 높이를 넘치지 않는다 (넘치면 board.css 600px 이하 overflow-x:hidden !important 로 세로 스크롤바가 생김) */ #wrap.shop_item_page .prd_tab_wrapper.shop_info {height:56px; border-bottom:0; box-shadow:inset 0 -1px 0 #e6e3df; background:#fff; overflow:hidden;} /* 헤더가 고정형이 아니므로 스크롤 시 탭은 화면 최상단(top:0)에 붙는다 */ #wrap.shop_item_page .prd_tab_wrapper.shop_info.onScroll {top:0; box-shadow:inset 0 -1px 0 #e6e3df;} #wrap.shop_item_page .prd_tab_slide_box01 {overflow:hidden;} #wrap.shop_item_page .prd_tab_slide_box01 .item_box01 {height:100%;} #wrap.shop_item_page .prd_tab_slide_box01 .item {flex:1; height:100%; padding:0; margin:0; border-bottom:2px solid transparent; box-sizing:border-box; font-size:16px; font-weight:400; color:#736d68; letter-spacing:0.02em; transition:color 0.2s;} #wrap.shop_item_page .prd_tab_slide_box01 .item a {display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:inherit;} #wrap.shop_item_page .prd_tab_slide_box01 .item:hover {color:#2b2926;} #wrap.shop_item_page .prd_tab_slide_box01 .item.active {font-weight:500; color:#2b2926; border-color:#2b2926;} /* 앵커 스크롤 위치 = 탭 높이(56) + 여백 */ #wrap.shop_item_page #section_detail, #wrap.shop_item_page #section_delivery, #wrap.shop_item_page #section_review, #wrap.shop_item_page #section_qna {scroll-margin-top:76px;} /* ---------- 본문 2컬럼 (좌 상세 / 우 고정 옵션) ---------- */ #wrap.shop_item_page .shop_item_content_wrapper {gap:64px; margin-top:0;} #wrap.shop_item_page .shop_item_right_wrapper, #wrap.shop_item_page .shop_item_right_sticky, #wrap.shop_item_page .shop_item_right_sticky.is_fixed, #wrap.shop_item_page .shop_item_right_sticky.is_stopped {width:300px;} #wrap.shop_item_page .shop_item_right_sticky {margin-top:40px;} /* 기본은 숨김 — 상단 결제정보(.shop_item_detail_alt_box01)가 화면 위로 사라진 뒤 JS 가 is_fixed/is_stopped 를 붙이면 떠오르며 나타남 (index.jsp handleScroll 의 topInfoGone 판정과 한 쌍) */ #wrap.shop_item_page .shop_item_right_sticky {opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity 0.3s, transform 0.3s, visibility 0s linear 0.3s;} #wrap.shop_item_page .shop_item_right_sticky.is_fixed, #wrap.shop_item_page .shop_item_right_sticky.is_stopped {opacity:1; visibility:visible; transform:none; transition:opacity 0.3s, transform 0.3s, visibility 0s;} /* 고정 시 탭(56px) 아래 */ #wrap.shop_item_page .shop_item_right_sticky.is_fixed {top:76px; margin-top:0; max-height:calc(100vh - 96px);} #wrap.shop_item_page .shop_item_right_sticky.is_stopped {margin-top:0;} #wrap.shop_item_page .shop_item_right_sticky .sticky_inner {padding:24px; border:1px solid #e6e3df; border-radius:0; background:#fff;} #wrap.shop_item_page .shop_item_right_sticky .sticky_option_wrapper .option_tit {margin-bottom:12px; font-size:14px; font-weight:500; color:#2b2926;} #wrap.shop_item_page .shop_item_right_sticky .option_select_box01 select {height:44px; padding:0 40px 0 14px; border:1px solid #d9d5d0; border-radius:0; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%232b2926' stroke-width='1.2' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center; background-size:12px 12px; font-family:inherit; font-size:13px; color:#2b2926; transition:border-color 0.2s;} #wrap.shop_item_page .shop_item_right_sticky .option_select_box01 select:hover, #wrap.shop_item_page .shop_item_right_sticky .option_select_box01 select:focus {border-color:#2b2926;} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 {padding:10px 30px 10px 12px; border:1px solid #f0eeeb; border-radius:0; background:#faf9f7;} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .tit {font-size:13px; color:#2b2926;} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .shop_prd_count_box01 .shop_option_btn01, #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .shop_prd_count_box01 .shop_option_count01 {border-color:#d9d5d0;} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .shop_prd_count_box01 .shop_option_btn01 img {display:none;} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .shop_prd_count_box01 .shop_option_btn01:before {display:block; width:9px; height:9px; content:''; background:no-repeat center / 9px 9px; opacity:0.85;} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .shop_prd_count_box01 .shop_option_btn01.minus_btn01:before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath stroke='%232b2926' stroke-width='1.2' d='M1 5h8'/%3E%3C/svg%3E");} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .shop_prd_count_box01 .shop_option_btn01.plus_btn01:before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath stroke='%232b2926' stroke-width='1.2' d='M1 5h8M5 1v8'/%3E%3C/svg%3E");} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .shop_prd_count_box01 .shop_option_btn01.disabled:before {opacity:0.3;} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .shop_prd_price01 {font-size:13px; color:#2b2926;} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .shop_prd_price01 b {font-size:14px; font-weight:700;} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .shop_prd_cancle_btn01 span {background:#9c9691;} #wrap.shop_item_page .shop_item_right_sticky .option_result_box01 .shop_prd_cancle_btn01:hover span {background:#2b2926;} #wrap.shop_item_page .shop_item_right_sticky .sticky_result_wrapper {padding-top:16px; border-top:1px solid #2b2926;} #wrap.shop_item_page .shop_item_right_sticky .shop_discount_info_box {margin:0 0 12px; padding:2px 12px;} #wrap.shop_item_page .shop_item_right_sticky .shop_prd_info_quick_result01 {margin-bottom:0;} #wrap.shop_item_page .shop_item_right_sticky .shop_prd_info_quick_result01 .tit {font-size:14px; color:#2b2926;} #wrap.shop_item_page .shop_item_right_sticky .shop_prd_info_quick_result01 .price01 {align-items:baseline; gap:0 2px; font-size:14px; font-weight:400; color:#2b2926;} #wrap.shop_item_page .shop_item_right_sticky .shop_prd_info_quick_result01 .price01 b {font-size:22px; font-weight:700; color:#2b2926;} #wrap.shop_item_page .shop_item_right_sticky .login_submit_btn_box01 {margin-top:16px;} #wrap.shop_item_page .shop_item_right_sticky .login_submit_btn_box01 .login_chk_btn01 {height:46px; font-size:14px;} /* ---------- 섹션 공통 ---------- */ #wrap.shop_item_page .shop_item_info_con + .shop_item_info_con {margin-top:88px;} #wrap.shop_item_page .shop_item_info_con .tit_box {padding-bottom:14px; border-bottom:1px solid #2b2926; font-size:20px; font-weight:500; color:#2b2926;} #wrap.shop_item_page .shop_item_info_con .tit_box .sub_tit {font-size:13px; color:#8e8883;} /* 상세설명 — 에디터 본문 */ #wrap.shop_item_page .sho_item_detail_info .shop_item_info_box001 {padding:48px 0 0;} #wrap.shop_item_page .secret_review_box01 {padding-bottom:0; border-bottom:0;} #wrap.shop_item_page .secret_review_box01 .center_img {font-size:15px; line-height:1.8; color:#2b2926;} #wrap.shop_item_page .secret_review_box01 .center_img img {max-width:100%; height:auto;} #wrap.shop_item_page .secret_review_box01 .secret_btn_box01 .secret_btn01 {height:48px; max-width:240px; border:1px solid #2b2926; border-radius:0; background:#fff; box-shadow:none; font-size:14px; font-weight:500; color:#2b2926; transition:background 0.25s, color 0.25s;} #wrap.shop_item_page .secret_review_box01 .secret_btn_box01 .secret_btn01:hover {background:#2b2926; color:#fff;} /* 상품 고시정보 (containers/elList.jsp) */ #wrap.shop_item_page .my_order_complete_wrapper.custom {padding-top:64px;} #wrap.shop_item_page .my_order_complete_wrapper.custom .my_order_con > .tit {padding-bottom:14px; border-bottom:1px solid #2b2926; font-size:20px; font-weight:500; color:#2b2926;} #wrap.shop_item_page .my_order_complete_wrapper.custom .my_order_con .alt_box {display:flex; padding:14px 0; border-bottom:1px solid #f0eeeb; font-size:14px; line-height:1.6;} #wrap.shop_item_page .my_order_complete_wrapper.custom .my_order_con .alt_box .alt_tit {width:240px; flex:0 0 240px; padding:0; font-weight:400; color:#8e8883;} #wrap.shop_item_page .my_order_complete_wrapper.custom .my_order_con .alt_box .alt {width:auto; flex:1; padding:0 0 0 20px; color:#2b2926;} /* 상품/배송/반품 안내문 */ #wrap.shop_item_page .shop_item_deliver_info .shop_item_info_box001 {padding:28px 0 0; font-size:14px; line-height:1.8; color:#5f5953;} #wrap.shop_item_page .shop_item_deliver_info .shop_item_info_box001 p {margin:0;} /* 상품평 요약 (shop/review/top.jsp) */ #wrap.shop_item_page .shop_item_evaluation_box {margin:28px 0 32px; padding:32px 20px; border:1px solid #e6e3df; border-radius:0; background:#faf9f7;} #wrap.shop_item_page .evaluation_box01 .e_tit {font-size:13px; color:#8e8883;} #wrap.shop_item_page .evaluation_box01 .avg-stars i {color:#d9d5d0;} #wrap.shop_item_page .evaluation_box01 .avg-stars i.on {color:#d5442f;} #wrap.shop_item_page .evaluation_box01 .result_num {color:#2b2926;} #wrap.shop_item_page .evaluation_box01 .graph_box_wrapper01 .graph_box01 .bar .fill {background:#2b2926; border-radius:0;} #wrap.shop_item_page .evaluation_box01 .graph_box_wrapper01 .graph_box01 .bar {border-radius:0;} /* 상품평 정렬·작성 / Q&A 필터 */ #wrap.shop_item_page .shop_item_evaluation_txt_box .sub_tit_box .l_box .tit {font-size:15px; font-weight:500; color:#2b2926;} #wrap.shop_item_page .evaluation_tab_menu01 {min-width:0; padding:8px 14px; border:1px solid #e6e3df; border-radius:0; font-size:13px; color:#736d68; transition:border-color 0.2s, color 0.2s, background 0.2s;} #wrap.shop_item_page .evaluation_tab_menu01:hover {border-color:#2b2926; color:#2b2926;} #wrap.shop_item_page .evaluation_tab_menu01.active {border-color:#2b2926; color:#2b2926; font-weight:500;} #wrap.shop_item_page .evaluation_tab_menu01.red {padding:9px 20px; border-color:#1f4d36; background:#1f4d36; color:#fff; font-weight:500;} #wrap.shop_item_page .evaluation_tab_menu01.red:hover {border-color:#153526; background:#153526; color:#fff;} #wrap.shop_item_page .evaluation_tab_menu01.gray {border-color:#d9d5d0; background:#d9d5d0; color:#fff;} #wrap.shop_item_page .id_save_box {gap:6px; font-size:13px; color:#736d68;} #wrap.shop_item_page .id_save_box input {width:22px !important; height:22px !important; background-color:#c9c4bf;} #wrap.shop_item_page .id_save_box input:checked {background-color:#2b2926;} #wrap.shop_item_page .shop_item_qa_info_chk_box01 {padding:20px 0;} #wrap.shop_item_page .shop_item_evaluation_info .nodata_box01, #wrap.shop_item_page .shop_item_qa_info .nodata_box01 {border:0; border-bottom:1px solid #f0eeeb; background:transparent;} #wrap.shop_item_page .shop_item_evaluation_info .nodata_box01 p, #wrap.shop_item_page .shop_item_qa_info .nodata_box01 p {font-size:14px; font-weight:300; color:#8e8883;} /* 페이징 (공통 .paging_wrap .page 구조) — 전제품(shop_all.css)과 동일 톤 */ #wrap.shop_item_page .paging_wrap {margin-top:40px; text-align:center;} #wrap.shop_item_page .paging_wrap .page {display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:0;} #wrap.shop_item_page .paging_wrap .page a, #wrap.shop_item_page .paging_wrap .page strong {display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid transparent; border-radius:0; background:transparent; font-size:14px; font-weight:400; color:#736d68; line-height:1; transition:all 0.2s;} #wrap.shop_item_page .paging_wrap .page a:hover {border-color:#2b2926; color:#2b2926;} #wrap.shop_item_page .paging_wrap .page strong {background:#2b2926; border-color:#2b2926; color:#fff; font-weight:500;} #wrap.shop_item_page .paging_wrap .page a.next {border:0; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:12px; color:#9c9691;} #wrap.shop_item_page .paging_wrap .page a.next:hover {color:#2b2926;} #wrap.shop_item_page .paging_wrap .page a.next img {display:none;} #wrap.shop_item_page .paging_wrap .page a.next:before {content:'\f054';} #wrap.shop_item_page .paging_wrap .page a.next:has(img[src*='li_prev_b']):before {content:'\f053';} #wrap.shop_item_page .paging_wrap .page a.next.no02:before {content:'\f100';} #wrap.shop_item_page .paging_wrap .page a.next.no03:before {content:'\f101';} /* ---------- 관련상품 (containers/relationProduct.jsp) — 상품정보 컬럼, 장바구니/바로구매 버튼 아래 (2026-09-22 이동) ---------- 컬럼 폭(이미지 컬럼과 1:1, 약 700px)에 4열이 들어가도록 카드를 축소 (메인 상품 카드보다 한 단계 작은 규격). 제목은 가운데 큰 제목 대신 좌측 작은 제목 + 얇은 하단선 (상품정보 컬럼의 행 구분선과 같은 톤) */ #wrap.shop_item_page .shop_item_relation_box {margin-top:40px;} #wrap.shop_item_page .shop_item_relation_box .inter_prod_box {padding:0;} #wrap.shop_item_page .inter_prod_tit {margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid #2b2926; text-align:left; font-size:15px; font-weight:500; letter-spacing:0.02em; color:#2b2926;} #wrap.shop_item_page .inter_prod_box .shop_list_con_box01.item04 {display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px 12px; margin-top:0;} #wrap.shop_item_page .inter_prod_box .shop_list_con_box01.item04 .shop_list_item01 {width:auto; max-width:none; min-width:0; flex:none;} #wrap.shop_item_page .inter_prod_box .shop_list_item01 .img {border-radius:0; background:#f5f3f0;} #wrap.shop_item_page .inter_prod_box .shop_list_item01 .img img {transition:transform 0.4s;} #wrap.shop_item_page .inter_prod_box .shop_list_item01:hover .img img {transform:scale(1.04);} #wrap.shop_item_page .inter_prod_box .shop_list_item01 .tit {margin:10px 0 4px; font-size:13px; font-weight:400; line-height:1.4; color:#2b2926;} #wrap.shop_item_page .inter_prod_box .shop_list_item01 .price_box01 {margin-top:0;} #wrap.shop_item_page .inter_prod_box .shop_list_item01 .price_box01 > .price01 {flex-wrap:wrap; align-items:baseline; gap:0 4px;} #wrap.shop_item_page .inter_prod_box .shop_list_item01 .price_box01 .percent01 {order:1; margin:0; font-size:13px; font-weight:700; color:#d5442f;} #wrap.shop_item_page .inter_prod_box .shop_list_item01 .price_box01 > .price01 > .price01 {order:2; font-size:13px; color:#2b2926;} #wrap.shop_item_page .inter_prod_box .shop_list_item01 .price_box01 > .price01 > .price01 b {font-size:13px; font-weight:700;} #wrap.shop_item_page .inter_prod_box .shop_list_item01 .price_box01 > .price01 > span {order:3; margin-left:-4px; font-size:12px; color:#2b2926;} #wrap.shop_item_page .inter_prod_box .shop_list_item01 .price_box01 .discount01 {order:4; margin:0; font-size:12px; font-weight:400; color:#9c9691; text-decoration:line-through;} /* ---------- 장바구니 담기 팝업 ---------- */ #wrap.shop_item_page .cart_popup.renewal {border-radius:0;} /* ---------- 반응형 ---------- */ @media all and (max-width:1280px){ #wrap.shop_item_page .shop_item_detail_top_box01 {gap:0 48px;} #wrap.shop_item_page .shop_item_content_wrapper {gap:40px;} } @media all and (max-width:1024px){ #wrap.shop_item_page .shop_item_detail_wrapper01 > .inner, #wrap.shop_item_page .shop_item_info_detail_box01 {padding-left:24px; padding-right:24px;} #wrap.shop_item_page .shop_item_detail_wrapper01 > .inner {padding-top:32px;} #wrap.shop_item_page .shop_item_info_detail_box01 {margin-top:64px; padding-bottom:80px;} /* 1컬럼: 이미지 위, 정보 아래 */ #wrap.shop_item_page .shop_item_detail_top_box01 {display:block;} #wrap.shop_item_page .shop_item_detail_alt_box01 {position:static; margin-top:32px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .top_box .tit_box .tit {font-size:24px;} #wrap.shop_item_page .prd_tab_wrapper.shop_info.onScroll {top:0;} #wrap.shop_item_page .shop_item_info_con + .shop_item_info_con {margin-top:64px;} /* 1컬럼이 되어 이미지 컬럼이 전체폭 → 관련상품 4열 유지·간격만 조금 넓게 */ #wrap.shop_item_page .shop_item_relation_box {margin-top:32px;} #wrap.shop_item_page .inter_prod_box .shop_list_con_box01.item04 {gap:24px 16px;} #wrap.shop_item_page .my_order_complete_wrapper.custom .my_order_con .alt_box .alt_tit {width:160px; flex-basis:160px;} } @media all and (max-width:768px){ #wrap.shop_item_page .shop_item_detail_alt_box01 .top_box .tit_box .tit {font-size:21px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .top_box .alt_box {font-size:14px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .option_alt .price01 {font-size:22px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .option_alt .percent01 {font-size:19px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .shop_prd_info_quick_result01 .price01 b {font-size:24px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 {padding:12px 14px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_select_box01 .option_result_box01 .l_box {flex-wrap:wrap;} #wrap.shop_item_page .prd_tab_wrapper.shop_info {height:50px;} #wrap.shop_item_page .prd_tab_slide_box01 .item {font-size:14px;} #wrap.shop_item_page #section_detail, #wrap.shop_item_page #section_delivery, #wrap.shop_item_page #section_review, #wrap.shop_item_page #section_qna {scroll-margin-top:66px;} #wrap.shop_item_page .shop_item_info_con .tit_box {font-size:18px;} #wrap.shop_item_page .inter_prod_box .shop_list_con_box01.item04 {grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px 12px;} #wrap.shop_item_page .my_order_complete_wrapper.custom .my_order_con .alt_box {flex-direction:column; gap:4px;} #wrap.shop_item_page .my_order_complete_wrapper.custom .my_order_con .alt_box .alt_tit {width:100%; flex-basis:auto;} #wrap.shop_item_page .my_order_complete_wrapper.custom .my_order_con .alt_box .alt {padding:0;} } @media all and (max-width:600px){ /* board.css 가 600px 이하 .inner 에 padding 16px !important 를 주므로, 바깥 박스가 여백을 가진 안쪽 .inner 는 여백 해제 */ #wrap.shop_item_page .shop_item_info_detail_box01 .inner {padding-left:0 !important; padding-right:0 !important;} } @media all and (max-width:480px){ #wrap.shop_item_page .shop_item_detail_wrapper01 > .inner, #wrap.shop_item_page .shop_item_info_detail_box01 {padding-left:16px; padding-right:16px;} #wrap.shop_item_page .shop_item_detail_wrapper01 > .inner {padding-top:20px;} #wrap.shop_item_page .shop_item_info_detail_box01 {margin-top:48px; padding-bottom:64px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .tit {width:80px; flex-basis:80px;} #wrap.shop_item_page .shop_item_detail_alt_box01 .option_box01 .option_alt .price01 {font-size:20px;} #wrap.shop_item_page .shop_item_detail_wrapper01 .login_chk_btn01 {height:50px; font-size:14px;} #wrap.shop_item_page .shop_item_relation_box {margin-top:24px;} #wrap.shop_item_page .inter_prod_box .shop_list_con_box01.item04 {grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 10px;} }