/* BASIC css start */ /* 전체 레이아웃 #contentWrapper {width:1240px !important;} */ html { overflow-y:scroll; } /* [2026-08] 웹폰트 @import 2줄 제거 - 공통HEAD.txt로 통합 이전(Josefin Sans/ Lato/Noto Serif KR/KoPubWorldBatang 전부 공통헤드가 사이트 전역 1회만 로드. 이 페이지는 상단 CSS의 구버전 @import와도 겹쳐서 실제로 3중 로드되고 있었음) */ /* 카테고리네비게이션 */ /* [2026-08] 시안 반영: 상단 카테고리 네비 바 숨김. display:none이라 DOM 텍스트는 남아있어 .loc-navi 기반 BreadcrumbList 구조화데이터 스크립트(html.txt 하단)는 그대로 정상 작동함 */ .right_fixed {display:none;} #productDetail .thumb-info .catenavi_warp { display: none; } .catenavi_warp { position: relative; } .catenavi_warp ul { } .catenavi_warp ul li { display: inline-block; padding-left: 10px; color:#111; } .catenavi_warp ul li a { color:#111; } .catenavi_warp ul li select { width: 150px; border: 1px solid #e5e5e5; height: 25px; background:#fff; } .catenavi01 { position:absolute; right:0; z-index: 1; } .catenavi01 img { } .rdt_warp { position: absolute; left:0; vertical-align: middle; bottom: 30px !important; } .rdt_01 { } .rdt_02 { letter-spacing: 0.2em; font-size: 10px; padding: 0px 0px 0px 10px; color: #000; } .rdt_03 { font-size: 12px; padding: 0px 10px 0px 0px; } .rdt_04 { font-size: 12px; } .rdt_04 a { font-size: 12px; vertical-align: baseline; } .rdt_04 a:hover { color: #c39562; } .rdt_05 { } .rdt_06 { position: absolute; top:6px; } .rdt_07 { } .rdt_08 { color:#bababa; letter-spacing: 0.2em; font-size: 11px; padding: 0px 10px; } .rdt_09 { } /* 리스트이미지배경 */ .prd_grey { background-color: rgba(0, 0, 0, .02); text-align: center; margin-bottom: 20px; } .prd_grey img { mix-blend-mode: multiply; max-width: 100%; height: auto; } .prd_grey_tab { background-color: rgba(0, 0, 0, .02); padding: 18% 0; } .prd_grey_tab img { mix-blend-mode: multiply; max-width: 90%; height: auto; } /* 다이아몬드 */ .table_bg { background: #efe9df; color: #524233; } /* 판매가격타이틀 */ .price-title { color: #222; font-size: 14px; text-align: left; } /* 브랜드소개 */ .detailbrand_warp { max-width: 1380px; margin: 0 auto; } .detailbrand_warp .brand_bg { position: relative; left: 50%; transform: translateX(-50%); font-size: 0px; } .detailbrand_warp .brand_bg .brand01 { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); color:#000; font-size: 24px; letter-spacing: 0.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Josefin Sans', sans-serif; padding:20px 20px 0px 20px; background: #fff; } .brand02 {} .brand02 img { width:100%; } .brand07 img { width:50%; } .brand12 img { width:50%; } .brand03 { text-align:center; font-family: 'Nanum Gothic', serif; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; margin: 40px 0px 0px 0px; font-size: 15px; } .brand04 { position: relative; margin-top: 50px; } .brand05 { position: absolute; width: 50%; top: 50%; text-align: center; font-family: 'Josefin Sans', sans-serif; color: #000; font-size: 24px; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); } .brand06 { position: absolute; width: 50%; top: 60%; text-align: center; font-family: 'Nanum Gothic', serif; color: #000; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); font-size: 13px; } .brand07 { text-align: right; } .brand08 { position: relative; } .brand09 { position: absolute; right: 0; width: 50%; top: 40%; text-align: center; font-family: 'Josefin Sans', sans-serif; color: #000; font-size: 24px; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); } .brand10 { position: absolute; right: 0; width: 50%; top: 48%; text-align: center; font-family: 'Nanum Gothic', serif; color: #000; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); font-size: 13px; } .brand11 { position: absolute; right: 0; width: 50%; top: 60%; text-align: center; font-family: 'Nanum Gothic', serif;color: #000; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); font-size: 12px; } .brand13 { position: absolute; left: 50%; top: 53%; text-align: center; font-family: 'Josefin Sans', sans-serif; color: #fff; font-size: 24px; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); } .brand14 { position: absolute; left: 50%; top: 60%; text-align: center; font-family: 'Nanum Gothic', serif; color: #fff; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); font-size: 11px; } .brand_bgend { position: relative; left: 50%; transform: translateX(-50%); font-size: 0px; margin-top:40px; } .price_bold { font-family: 'Noto Serif KR', serif !important; color: #1b1b1b; font-size: 20px; font-weight: 600; letter-spacing: 0.1rem;} /* 간략상품정보 */ .pro_material_warp { width: 1000px; max-width: 100%; margin: 0 0 2.5rem; } .pro_material_warp ul { background: #fafafa; padding: 1rem 1.25rem; border-radius: 0.25rem; text-align: left; font-size: 11px; } .pro_material_warp ul li { display: table; width: 100%; margin-bottom: 0.1rem; } .pro_material_warp ul li h4 { display: table-cell; width: 5rem; letter-spacing: 0.03em; line-height: 1.3rem; color:#000; font-weight: 400; font-size: 11px; } .pro_material_warp ul li p { display: table-cell; padding-left: 2rem; word-break: break-all; font-weight: 400; letter-spacing: 0.01em; } .pro_material_02 { padding: 0px 3px; } .pro_material_03 { } .pro_material_05 { max-width:30px; } /* 쇼핑가이드 */ .shopping_guide01 { font-weight: bold; text-align: center; font-family: 'Nanum Gothic', serif; color: #2c2c2c; font-size: 14px; margin: 60px 0px 20px 0px; border: 1px solid #e1e1e3; padding: 10px; background: #fafafa; } .shopping_guide02 {float:left; width:270px; height:250px; padding:0; color:#111; font-size:17px; font-weight:400; text-align:center; line-height:250px; background-color:#fafafa; border-right: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9;} .shopping_guide03 {float:left; width:270px; height:170px; padding:0; color:#111; font-size:17px; font-weight:400; text-align:center; line-height:170px; background-color:#fafafa; border-right: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9;} .shopping_guide04 {float:left; width:270px; height:245px; padding:0; color:#111; font-size:17px; font-weight:400; text-align:center; line-height:245px; background-color:#fafafa; border-right: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9;} .shopping_guide05 {float:left; width:270px; height:180px; padding:0; color:#111; font-size:17px; font-weight:400; text-align:center; line-height:180px; background-color:#fafafa; border-right: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9;} .text_highlight { color: #479fcf; margin-top:5px; } /* 관련상품 타이틀 */ .related_en_title { text-align: center; margin: 150px 0px 0px 0px; letter-spacing: 0.08rem; font-size: 30px; font-family: 'Josefin Sans', sans-serif; } .related_ko_title { line-height: 25px; font-size: 14.4px; color: #000; text-align: center; } .prd_mname { margin-top: 20px; color: #1b1b1b; font-size: 15px; font-weight: 400; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prd_mname a { margin-top: 20px; color: #1b1b1b; font-size: 15px; font-weight: 400; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prd_sname { letter-spacing: 0.045em; font-style: italic; color: #3a3a3a; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prd_sprice { position: relative; margin-top: 10px; color: #000; font-size: 15px; font-weight: 700; text-align: left; } .related_price_01 { } .related_price_02 { margin-left: 7px; color: #999; font-size: 16px; font-weight: 300; text-align: left; text-decoration: line-through; } .icon { margin-top: 18px; font-size: 0px; text-align: left; } .icon img { padding-right: 3px; } .prd-info01 { padding: 0px 20px 20px 20px; overflow: hidden; } /* 브랜드및가이드 */ .brand_warp { max-width: 1380px; margin: 0 auto; } /* ============================================================ [2026-08] 2프레임 재구축 - 이미지 갤러리(왼쪽 1000px 고정) 구 swiper6(.swiper-container, position/overflow 누락으로 썸네일이 겹쳐 보이던 버그)를 모바일 상세페이지에서 검증된 구조로 교체. 클래스명을 .swiper-container가 아니라 .swiper로 써서 Swiper11 번들 기본 CSS의 position:relative/overflow:hidden을 자동으로 받음(수동 보정 불필요 - 이 사이트에서 반복된 버그 유형을 원천 회피). ============================================================ */ /* [2026-08] 메인 이미지 왼쪽 정렬 + 썸네일 오른쪽 세로열(1000px 프레임 기준) - justify-content:space-between으로 메인은 왼쪽, 썸네일열은 오른쪽 끝에 붙게 함 */ .ss-pd-media { position: relative; display: flex; align-items: flex-start; justify-content: space-between; margin: 0; padding: 0; } /* -- 공유 버튼(이미지 갤러리 우상단) + 공유 팝오버 -- */ .ss-pd-share-btn { position: absolute; top: 16px; right: 16px; z-index: 20; width: 40px; height: 40px; border-radius: 50%; padding: 0; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.9); } .ss-pd-share-btn .material-symbols-outlined { font-size: 20px; color: #222; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; } /* 팝오버 바깥 클릭 시 닫기용 투명 캐처 - 모바일 바텀시트의 딤 오버레이와 달리 화면을 어둡게 하지 않음(작은 팝오버라 데스크톱에서 전체 딤은 과함) */ .ss-pd-share-catcher { display: none; position: fixed; inset: 0; z-index: 25; background: transparent; } .ss-pd-share-catcher.is-open { display: block; } .ss-pd-share-popover { /* [2026-08] right는 .ss-pd-media(메인+썸네일 전체 폭) 기준이 아니라, 메인이미지 박스(750px) 우측 끝에서 16px 안쪽으로 맞춤 - 버튼이 메인이미지 박스 안에 있어서 위치를 맞춰야 함 */ position: absolute; top: 62px; right: calc(100% - 750px + 16px); z-index: 30; width: 260px; background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.14); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } .ss-pd-share-popover.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .2s ease, transform .2s ease, visibility 0s; } .ss-pd-share-options { display: flex; justify-content: space-between; } .ss-pd-share-option { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0; flex: 1; } .ss-pd-share-badge { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; } .ss-pd-share-badge .material-symbols-outlined { font-size: 20px; } .ss-pd-share-badge-kakao { background: #FEE500; color: #3C1E1E; } .ss-pd-share-badge-facebook { background: #1877F2; color: #fff; } .ss-pd-share-badge-x { background: #000; color: #fff; } .ss-pd-share-badge-copy { background: #f4f0ea; color: #222; } .ss-pd-share-option-label { font-size: 11px; color: #555; } .ss-pd-media-single { position: relative; background-color: rgba(0,0,0,.02); text-align: left; width: 750px; height: 750px; margin: 0; padding: 0; } .ss-pd-media-single img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; } /* [2026-08] width/height에 !important - Swiper JS가 초기화 시점에 컨테이너 폭을 잘못 측정하면 .swiper-slide에 인라인 style로 다른 폭을 박아버려서(관측된 증상: 이미지가 750px보다 좁게 렌더되고 좌우로 여백처럼 보임) CSS로 다시 강제 고정. margin/padding도 0으로 명시해서 정렬에 영향 줄 여지를 없앰 */ .ss-pd-main-gallery { width: 750px !important; height: 750px !important; flex: 0 0 750px; margin: 0; padding: 0; } .ss-pd-main-gallery .swiper-wrapper { margin: 0; padding: 0; } .ss-pd-main-gallery .swiper-slide { width: 750px !important; height: 750px !important; margin: 0; padding: 0; } /* [2026-08] 재수정: mix-blend-mode:normal 오버라이드가 오진이었음 - 실측(라이브 vs 새 디자인) 비교 결과 multiply가 맞는 스타일이었음. 사진 원본이 흰 배경이라, multiply로 흰 영역이 뒤의 회색 배경(.prd_grey)과 자연스럽게 섞여야 사진 전체가 균일한 회색 톤으로 보임(정상 의도). normal로 두면 사진의 흰 배경이 불투명하게 그대로 남아 회색은 padding 여백에서만 보이고 사진 안쪽은 하얗게 붕 떠보이는 "테두리만 있는" 모습이 됨 - 그래서 padding도 제거하고 원래대로 프레임 가득 채움(object-fit:cover) */ .ss-pd-main-gallery .swiper-slide .prd_grey { width: 100%; height: 100%; background-color: rgba(0,0,0,.02); margin: 0; display: flex; align-items: flex-start; justify-content: flex-start; } .ss-pd-main-gallery .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; mix-blend-mode: multiply; } /* [2026-08] 오른쪽 끝에 안 붙던 원인 - margin이 없다고 가정했는데 실측 결과 flex 계산에 56px가 끼어들고 있었음(justify-content:space-between은 margin까지 포함해서 배치함) - margin:0을 명시로 확실히 고정 */ /* [2026-08] 마지막 썸네일 아래 여백 재진단: 원인은 .prd_grey margin 누수가 아니라 height:750px 고정값과 실제 썸네일 스택 높이(예: 5장일 때 138*5+12*4=738px)의 불일치였음 (align-items:flex-start라 이 높이는 flex로 늘어나지 않고 그대로 빈 공간이 됨). 실측으로 확인(getBoundingClientRect) - height를 고정값 대신 max-height로 바꿔 내용에 맞게 줄어들게 하고, 썸네일이 많아 750을 넘으면 기존처럼 스와이퍼 스크롤(.swiper 기본 overflow:hidden)로 처리 */ .ss-pd-thumb-gallery { width: 138px; max-height: 750px; flex: 0 0 138px; margin: 0; } .ss-pd-thumb-gallery .swiper-wrapper { margin: 0; padding: 0; } /* [2026-08] opacity 페이드(마스크처럼 보임)에 이어 선택 테두리도 제거 요청 - 상태 표시 없이 이미지 그대로만 노출 */ .ss-pd-thumb-gallery .swiper-slide { height: 138px; margin-bottom: 12px; cursor: pointer; } .ss-pd-thumb-gallery .swiper-slide:last-child { margin-bottom: 0; } /* [2026-08] 메인갤러리와 동일하게 재수정 - mix-blend-mode:multiply로 되돌리고 padding 제거 */ .ss-pd-thumb-gallery .swiper-slide .prd_grey, .ss-pd-thumb-gallery .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; background-color: rgba(0,0,0,.02); mix-blend-mode: multiply; margin: 0; } /* [2026-08] 전역 .prd_grey{margin-bottom:20px} 규칙이 위 결합 선택자엔 margin-bottom이 명시되지 않아 그대로 새어들어와 마지막 썸네일 아래만 여백이 남던 버그 - margin:0으로 확실히 차단 */ /* [2026-08] 요청: 썸네일이 정확히 5개일 때는(138*5+12*4=738로 750에 12px 모자람) 메인 이미지(750px)와 높이를 맞추되 마지막 썸네일 아래에 남는 여백은 없어야 함 - 4개 이하일 때는 기존처럼 내용 높이만큼만 차지(축소). :has()로 "5번째 자식이 곧 마지막 자식"(=정확히 5개)인 경우만 골라 높이를 750px로 고정하고, 개별 margin-bottom 대신 justify-content:space-between로 간격을 4곳에 균등 분배(690px 콘텐츠 + 60px를 4칸에 15px씩) - 마지막 다음엔 여백이 생기지 않음. 6개 이상은 이 선택자에 해당 안 되므로 기존 max-height:750px + 스와이퍼 스크롤 그대로 유지 */ .ss-pd-thumb-gallery:has(.swiper-slide:nth-child(5):last-child) { height: 750px; } .ss-pd-thumb-gallery:has(.swiper-slide:nth-child(5):last-child) .swiper-wrapper { justify-content: space-between; } .ss-pd-thumb-gallery:has(.swiper-slide:nth-child(5):last-child) .swiper-slide { margin-bottom: 0; } .page-body {margin-top:0px;} .img_l { max-width:550px; } .muimage_veiw { text-align: center; margin-top: 50px; } /* 추가옵션 */ /* [2026-08] 라벨 잘림 버그 수정(스크린샷 "COL"/"FOR"/"COD" 등) - 좁은 고정폭 table th 대신 flex row로 전환, 라벨 폭을 내용에 맞게 자동 확장. 죽은 규칙 정리(table/tbody/th/td는 더 이상 안 씀), ao_07의 깨진 선언(letter-spacing 프로퍼티명 누락)도 같이 수정 */ .ao_warp { position: relative; margin: 0px 0 0; padding-top: 0px; } .ao_warp .ss-pd-meta-row { display: flex; gap: 16px; padding: 6px 0; font-size: 12px; } .ao_warp .ao_01, .ao_warp .ao_05, .ao_warp .ao_07 { flex: 0 0 auto; min-width: 90px; color: #111; letter-spacing: 0.1em; } .ao_warp .ao_02, .ao_warp .ao_06, .ao_warp .ao_08 { flex: 1 1 auto; font-weight: 400; letter-spacing: 0.01em; color: #444; } .ao_warp .naver-checkout { margin-top: 16px; text-align: right; } /* 서브영역 : 이벤트배너01 */ .center_banner {font-size:0px; max-width:1680px; margin:100px auto 0px;} .center_banner li {display:inline-block; width:50%;} .center_banner li:first-child {text-align:right;} .center_banner li a {vertical-align:top;} /* 상품 공통정보 */ .prdInfo_box {width:100%; padding-top:15px;} .prdInfo_box .prdInfo_line { border-bottom:1px solid #d9d9d9; border-right: 1px solid #d9d9d9; } .prdInfo_box .prdInfo_line:first-child {border-top:1px solid #d9d9d9;} .prdInfo_box .prdInfo_line h3 {float:left; width:270px; height:230px; padding:0; color:#111; font-size:17px; font-weight:400; text-align:center; line-height:230px; background-color:#fafafa; border-right: 1px solid #d9d9d9; } .prdInfo_box .prdInfo_line .prdInfo_text {font-family: 'Nanum Gothic', sans-serif; float: left; width: 930px; padding: 20px 0 10px 20px; line-height: 20px;} .prdInfo_box .prdInfo_line .prdInfo_text b {color:#555;} .count_color { color: #c39562; } /* ============================================================ [2026-08] 2프레임 레이아웃 - 왼쪽 이미지 1000px 고정 / 오른쪽 옵션 sticky. 컨테이너를 이 프로젝트 PC 표준 1680px로 확장(레거시 1380px에서). 오른쪽 컬럼 실폭은 기존 635px과 큰 차이 없음(1680-1000-60"H620px). ============================================================ */ #productDetail .thumb-info { max-width:1680px; margin:0px auto 0; } #productDetail .thumb-info .ss-pd-layout { display: flex; align-items: flex-start; gap: 60px; padding-top: 40px; } #productDetail .thumb-info .ss-pd-media { flex: 0 0 1000px; width: 1000px; } #productDetail .thumb-info .ss-pd-purchase { flex: 1 1 auto; min-width: 0; padding: 0; display: flex; flex-direction: column; } /* [2026-08] z-index:1500 상시 적용 시 헤더 드롭다운 메가메뉴(.ss-pc-panel, z-index:999)보다 구매영역이 항상 위에 그려져서, 스크롤로 고정된 상태에서 상단 메뉴를 호버하면 메가메뉴 오른쪽 부분(컬렉션 썸네일 등)이 구매영역에 가려져 레이아웃이 깨져 보이는 문제 발생. position:fixed는 z-index 값과 무관하게 항상 새 스태킹 컨텍스트를 만들어서, 그 안의 드로어(z-index:10002)도 이 값에 갇혀버림 - 그래서 평소엔 헤더(z-index:1000)보다 낮게(60) 두고, 실제로 드로어가 열렸을 때만(.drawer-open) 헤더보다 위로 올려서 드로어가 헤더 뒤에 가려지던 원래 버그만 해결하고 메가메뉴와는 평소에 충돌하지 않게 함 */ #productDetail .thumb-info .ss-pd-purchase.is-pinned { position: fixed; z-index: 60; } #productDetail .thumb-info .ss-pd-purchase.is-pinned.drawer-open { z-index: 1500; } /* [2026-08] 재수정: "특별한 경험 아래로 안 내려간다"는 프레임이 사라지는 게 아니라 그 지점에서 멈춰 선 채로 계속 보여야 한다는 뜻이었음 - is-pinned를 그냥 풀면 패널이 원래 문서상 위치(맨 위, 이미 한참 지나온 스크롤 지점)로 돌아가 화면 밖으로 사라져버림. 대신 경계 지점에 도달하면 position:fixed 대신 absolute로 전환해서 문서 좌표상 그 자리에 고정(주차)시킴 - 뷰포트를 따라다니진 않지만 화면에서 사라지지 않고 계속 보임(js.txt updatePin 참고) */ #productDetail .thumb-info .ss-pd-purchase.is-parked { position: absolute; z-index: 60; } #productDetail .thumb-info .ss-pd-purchase.is-parked.drawer-open { z-index: 1500; } .ss-pc-header-bar.ss-pd-header-hidden { transform: translateY(-100%); transition: transform 0.3s ease; } .ss-pc-header-bar { transition: transform 0.3s ease; } #productDetail .thumb-info .ss-pd-purchase { overflow-x: hidden; } #productDetail .thumb-info .ss-pd-scroll-area { position: relative; flex: 0 0 auto; overflow-x: hidden; } .mCSB_outside + .mCSB_scrollTools {right:0;left:-26px;} #productDetail .thumb-info .ss-pd-guide-accordion.shopping_warp { width: 100%; margin: 24px 0 0; } #productDetail .thumb-info .ss-pd-guide-accordion .guide_btn01, #productDetail .thumb-info .ss-pd-guide-accordion .guide_btn02 { padding: 0; margin: 0; cursor: pointer; } #productDetail .thumb-info .ss-pd-guide-accordion .guide_title { font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 13px; color: #222; letter-spacing: 0.02em; } #productDetail .thumb-info .ss-pd-guide-accordion .guide_arrow { position: static; margin: 0; width: auto; height: auto; font-size: 20px; color: #222; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); } #productDetail .thumb-info .ss-pd-guide-accordion .guide_arrow::before, #productDetail .thumb-info .ss-pd-guide-accordion .guide_arrow::after { content: none; } #productDetail .thumb-info .ss-pd-guide-accordion .guide_btn01 { display: flex; align-items: center; justify-content: space-between; } #productDetail .thumb-info .ss-pd-guide-accordion .guide_btn01 a { display: flex; align-items: center; justify-content: space-between; width: 100%; text-decoration: none; } #productDetail .thumb-info .ss-pd-guide-accordion p.active .guide_arrow { transform: rotate(180deg); } /* [2026-08] 요청: 상품정보고시/사이즈가이드/쇼핑가이드가 전부 guide_sub_warp(03)라는 비슷한 이름을 공유해서 헷갈리던 문제 - 아코디언 접힘/펼침 매커니즘(전역 .guide_sub_warp03 기본 규칙)은 그대로 유지한 채, 각 섹션에 이해하기 쉬운 전용 클래스를 별도로 추가하고 이 페이지 안의 콘텐츠 스타일(ul/li/table 등)은 전부 그 전용 클래스 기준으로 다시 연결함 */ #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-notice-body ul li h4 { font-size: 12px; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-notice-body ul li p { font-size: 11px; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-size-guide-body ul li h4, #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-shopping-guide-body ul li h4, #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body ul li h4 { font-size: 14px; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-size-guide-body ul li, #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-shopping-guide-body ul li, #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body ul li { font-size: 13px; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-size-guide-body table, #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-shopping-guide-body table { font-size: 11px; table-layout: fixed; width: 100%; word-break: break-all; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-size-guide-body table th, #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-size-guide-body table td, #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-shopping-guide-body table th, #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-shopping-guide-body table td { } /* [2026-08] Notice(마지막 li) 항목만 위쪽 여백 살짝 추가 요청 */ #productDetail .thumb-info .ss-pd-guide-accordion #shopping_guide02 .ss-pd-notice-body ul li:last-child { padding-top: 0px; line-height: 1.6; } /* [2026-09] 색상가이드 - 안내문 + 이미지 행(원본 200x160px, 확대 안 함) + 색상별 상세설명 */ #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_section { margin-bottom: 35px; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_section:last-of-type { margin-bottom: 20px; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_heading { font-family: 'Josefin Sans', sans-serif; font-size: 16px; letter-spacing: 0.1em; margin: 0px 0px 12px 0px; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_intro { font-size: 13px; line-height: 1.6; color: #444; word-break: keep-all; margin: 0 0 50px; letter-spacing: -0.01rem; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 25px; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_thumb { width: 150px; text-align: center; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_thumb img { width: 150px; height: 120px; object-fit: contain; display: block; margin: 0 auto; background: #fafafa; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_thumb_name { font-family: 'Josefin Sans', sans-serif; font-size: 11px; letter-spacing: -0.01em; margin: 15px 0 0; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_detail { padding: 20px 0; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_detail:first-of-type { border-top: none; padding-top: 0; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_detail h5 { font-family: 'Josefin Sans', sans-serif; font-size: 13px; letter-spacing: -0.01em; margin: 0 0 8px; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-color-guide-body .color_guide_detail p { font-size: 13px; line-height: 1.6; color: #444; word-break: keep-all; margin: 0; } /* [2026-08] 반지사이즈가이드/쇼핑가이드 드로어 - .guide_sub_warp는 원래 아코디언용이라 section.is-open이 아니면 max-height:0/opacity:0으로 숨겨짐. 드로어는 자체 슬라이드 애니메이션(.ss-pd-drawer.is-open)으로 열고닫으므로 내부 콘텐츠는 항상 펼쳐진 상태로 표시 */ #productDetail .thumb-info .ss-pd-drawer-body .ss-pd-size-guide-body, #productDetail .thumb-info .ss-pd-drawer-body .ss-pd-shopping-guide-body, #productDetail .thumb-info .ss-pd-drawer-body .ss-pd-color-guide-body { max-height: none; opacity: 1; overflow: visible; padding: 50px 25px 25px 25px; } /* [2026-09] 사이즈/색상/쇼핑가이드가 별도 박스 3개에서 "구매 가이드" 아코디언 안 링크 목록으로 통합됨(상품정보고시/선물포장패키징과 동일한 아코디언 항목). [2026-09 수정] 구분선 리스트 대신 모바일(.detail-guide-box)과 동일한 회색 박스 타입으로 */ #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-purchase-guide-body { padding-top: 0; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-guide-linklist { display: flex; gap: 8px; list-style: none; margin: 20px 0px 15px 0px; padding: 0; background: transparent; border-radius: 0; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-guide-linklist li { display: block; width: auto; flex: 1 1 0; margin: 0; background: #fafafa; transition: background-color 0.3s ease; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-guide-linklist li:hover { background: #f4f0ea; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-guide-linklist a { display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 16px; text-decoration: none; color: #222; font-size: 13px; transition: color 0.3s ease; } #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-guide-linklist li:hover a { color: #1c1c1c; } /* [2026-08] 신규: 선물포장 패키징 아코디언 콘텐츠(모바일 장바구니 .cart-giftbox와 동일 톤) */ #productDetail .thumb-info .ss-pd-gift-box { display: flex; align-items: center; gap: 16px; } #productDetail .thumb-info .ss-pd-gift-img { width: 76px; flex-shrink: 0; } #productDetail .thumb-info .ss-pd-gift-img img { width: 100%; height: auto; display: block; } #productDetail .thumb-info .ss-pd-gift-text { flex: 1; min-width: 0; } #productDetail .thumb-info .ss-pd-gift-title { font-family: 'Noto Serif KR', serif !important; letter-spacing: -0.1rem; display: block; font-size: 15px; font-weight: 600; color: #222; margin-bottom: 5px; } #productDetail .thumb-info .ss-pd-gift-desc { font-size: 12px; color: #1c1c1c; letter-spacing: 0.02rem; line-height: 1.6; margin: 0; } /* [2026-08] 자세히 보기 - 링크를 텍스트에만 걸고(전체 박스 아님) inline-block으로 텍스트 너비만큼만 밑줄이 생기게 함. 호버 애니메이션은 pc/개별페이지(boutique 등)의 .kakao_btn과 동일한 기법 - border-bottom 색상 전환이 아니라 ::after 를 transform:scaleX(1→0)로 왼쪽 기준(transform-origin:left) 스윕하며 사라지게 함 */ #productDetail .thumb-info .ss-pd-gift-more { position: relative; display: inline-block; margin-top: 5px; font-size: 12px; color: #1c1c1c; letter-spacing: 0.02rem; line-height: 1.6; text-decoration: none; } #productDetail .thumb-info .ss-pd-gift-more::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #1c1c1c; transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease; } #productDetail .thumb-info .ss-pd-gift-more:hover::after { transform: scaleX(0); } /* [2026-08] 선물포장 패키징만 상단 패딩 30px로 분리 요청(상품정보 고시는 기존 패딩 유지) - .guide_sub_warp03(전역, 두 아코디언 공용) 패딩보다 더 구체적인 선택자로 상단만 덮어씀 */ #productDetail .thumb-info .ss-pd-guide-accordion .ss-pd-gift-warp { padding-top: 30px; } /* [2026-08] 시안 반영: 리뷰+포인트 요약(판매가격 하단) */ #productDetail .thumb-info .ss-pd-rating-strip { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; margin-bottom: 70px; } #productDetail .thumb-info .ss-pd-rating-tag { font-size: 11px; color: #1c1c1c; letter-spacing: 0.05em; } #productDetail .thumb-info .ss-pd-rating-point { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #1c1c1c; } /* [2026-08] 크리마 "리뷰 점수" 위젯(.rdt_warp)을 .catenavi_warp에서 이 자리로 이동시킨 뒤 원래 위치(breadcrumb absolute 배치)용 스타일을 무력화하고 여기 레이아웃에 맞게 재정의. 전역 .rdt_warp/.rdt_0N 규칙(css.txt 상단)은 다른 페이지에도 쓰일 수 있어 그대로 두고 더 구체적인 선택자 + !important(bottom:30px !important 를 이겨야 함)로 덮어씀 */ #productDetail .thumb-info .ss-pd-rating-slot .rdt_warp { position: static !important; left: auto !important; bottom: auto !important; display: flex !important; align-items: center; gap: 6px; } #productDetail .thumb-info .ss-pd-rating-slot .rdt_01 { font-size: 11px; color: #1c1c1c; letter-spacing: 0.05em; padding: 0; } #productDetail .thumb-info .ss-pd-rating-slot .rdt_04 a { color: #222; text-decoration: none; } /* [2026-08] overflow-x:hidden만 지정된 요소는 CSS 스펙상 overflow-y가 자동으로 auto로 강제 변환돼(둘 다 visible이 아니면 안 됨) 콘텐츠가 1px만 넘어도 세로 스크롤바가 노출됨. 스크롤 기능은 유지하되 스크롤바만 시각적으로 숨김 */ #productDetail .thumb-info .ss-pd-purchase, #productDetail .thumb-info .ss-pd-scroll-area, #productDetail .thumb-info .ss-pd-drawer, #productDetail .thumb-info .ss-pd-drawer-body { scrollbar-width: none; -ms-overflow-style: none; } #productDetail .thumb-info .ss-pd-purchase::-webkit-scrollbar, #productDetail .thumb-info .ss-pd-scroll-area::-webkit-scrollbar, #productDetail .thumb-info .ss-pd-drawer::-webkit-scrollbar, #productDetail .thumb-info .ss-pd-drawer-body::-webkit-scrollbar { display: none; width: 0; height: 0; } /* [2026-08] 공통CSS-JS.txt의 레거시 규칙 `button span { visibility: hidden; }`(이미지 교체 버튼 기법)가 새로 만든