/* BASIC css start */ .shopdetail .shopdetailInfo h2 {font-size:1.333em; font-weight:bold; text-align:center; padding:0 7px 0;} .shopdetail h3 {font-weight:bold; padding:10px 15px; margin-bottom:10px; background-color:#f3f3f3;} .shopdetail h3 .fa {float:right; font-size: 1.5em;} .shopdetail .shopdetailInfo .shopdetailInfoTop figure {padding:16px 15px; border-bottom:1px solid #c7c7c7;} .shopdetail .shopdetailInfo .shopdetailInfoTop figure img {border:1px solid #c7c7c7;} .shopdetail .shopdetailInfo .shopdetailInfoTop figcaption {text-align:center; margin:16px 0;} .shopdetail .shopdetailInfo .shopdetailInfoTop h2 {margin:16px 0 0;} .shopdetail .shopdetailInfo .shopdetailInfoBottom {background-color:#fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue {position: relative; border-bottom:1px solid #c7c7c7; padding:18px 15px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue em {color:#f1191f; font-size:1.333em;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue p {margin-bottom:8px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue p:last-child {margin-bottom:0px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .shopdetailInfoName {width:30%; display:inline-block;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .shopdetailInfoCont {width:70%; display:inline-block; margin-left: -4px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .region {margin-left: 10px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .btn_relation {position:absolute; top:50%; right:10px; text-align:center; margin-top: -25px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .btn_relation a {width:50px; height:50px; color:#fff; background-color:#636363; display: inline-block; font-size:0.917em; border-radius: 4px; border:1px solid #424242;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .btn_relation a:first-child {} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .btn_relation a .fa {display:block; margin:6px 0 3px 0;} .shopdetailInfoDelivery {padding:10px 15px;} /* 상품옵션 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area {} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed {width: 100%; position: fixed; z-index: 101; bottom: 0; left: 0; right: 0;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed {-webkit-animation: qbuy 150ms linear 1 normal; animation: qbuy 150ms linear 1 normal;} @-webkit-keyframes qbuy { from {bottom:-65px;} to {bottom:0;} } @keyframes qbuy { from {bottom:-65px;} to {bottom:0;} } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .option_tk {height:150px; overflow-y:auto; background-color: #fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn {width:100%; box-sizing: border-box; position:relative; bottom:0; left:0; right:0; background-color:#f6f6f6; border-top:1px solid #dfdfdf; z-index: 101; text-align: center; padding:6px; margin:0 auto; display:none;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn.fixed {display: block; position: fixed;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .fixed-btn.fixed {display: block; position: relative;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn .btn_option {position: absolute; top: -16px; left: 50%; margin-left:-33px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoMultiSelect {background-color: #fff; border-top: 1px dotted #444;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on {background-color: #f6f6f6; text-align: center; padding: 10px 15px; display:none;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on a {width:48%; color: #3b3b3b; background-color:#fff; border:1px solid #222; display: inline-block; padding:6px 0; margin: 0;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on a.buy {background-color:#222; color:#fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect {} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .opt-com {text-align: right;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect p {background-color:#f6f6f6; padding: 5px 15px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect p:last-child {margin-bottom:0px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoName {width: 28%; padding-right: 5px; display:inline-block;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoCont {width:70%; display:inline-block; margin-left: -4px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoCont select {width:100%;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoCount .txt-qnty {text-align:right; padding:0 6px; width: 50px !important;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoCount .fa-plus {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff; margin: 0 5px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoCount .fa-minus {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoMultiSelect .MK_optAddWrap #MK_innerOptScroll {background-color: #f6f6f6; padding:0 15px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .add-option-sel {font-weight: bold; font-size: 1.1em; padding-top: 10px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .add-option select {margin-bottom: 10px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .add-option .shopdetailInfoName {vertical-align: top; padding-top: 11px;} .shopdetail .shopdetailBoard {text-align:center; border-top:1px solid #bbb; border-bottom:1px solid #bbb; margin-bottom:32px;} .shopdetail .shopdetailBoard a {width:33.33%; background-color:#f8f8f8; border-left:1px solid #bbb; display:inline-block; margin-left: -1px; font-weight:bold; padding:20px 0;} .MK_optAddWrap .MK_inner-opt-cm li {position:relative; border-bottom:1px solid #c7c7c7; padding: 12px 0;} .MK_optAddWrap .MK_inner-opt-cm li:last-child {border-bottom:0px none;} .MK_optAddWrap .MK_inner-opt-cm .MK_p-name {padding-right: 30px; display: block;} .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl {margin-top:8px;} .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl input[type="tel"] {padding:0 6px; width: 50px;} .MK_optAddWrap .MK_inner-opt-cm .MK_btn-del {position:absolute; top:12px; right:0;} .MK_optAddWrap .MK_inner-opt-cm .MK_btn-del img {width: 20px;} .MK_optAddWrap .MK_inner-opt-cm .MK_price {position:absolute; bottom:21px; right:0; font-size: 1.3em;} .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl .btn-type-02 {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff; display: inline-block;} .MK_optAddWrap .total {text-align:right; padding:10px 15px; font-size: 1.3em;} .MK_optAddWrap .MK_total {font-size:18px; color:#f1191f; margin-left:15px;} .MK_optAddWrap .MK_txt-won {font-size:17px;} /* //상품옵션 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailTotal {background-color:#fff; text-align:right; padding:15px; font-size:1.2em;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailTotal em {color:#f1191f; font-size:1.333em; margin-left:16px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton {text-align:center; padding:15px 0; } .shopdetailButtonTop {width:98%;margin:0 auto;font-size:0;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop a {width:48.5%;font-size:14px; color:#222;display:inline-block;font-weight:bold;line-height:43px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop .cart {width:100%;border:1px solid #ececec;margin:0 0 2% 0;background-color:#222;color:#fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop .buy {float:left;border:1px solid #ececec;color:#555;background-color:#efefef;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop .wish {float:right;border:1px solid #ececec;color:#888;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonBottom {margin:20px 0;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonBottom img {margin:0 2px; width:45px; height:auto;} .shopdetail .shopdetailCoupon {margin-top:15px;} .shopdetail .shopdetailCoupon .shopdetailCouponGet {padding:0 15px;} .shopdetail .shopdetailCoupon .shopdetailCouponGet li {height:34px; background:url("/images/d3/m_04/bg_coupon@2x.gif") no-repeat left center; padding:10px 0 10px 92px; border-bottom:1px dashed #cbcbcb; position:relative; background-size: 81px auto;} .shopdetail .shopdetailCoupon .shopdetailCouponGet li:last-child {border-bottom:0px none;} .shopdetail .shopdetailCoupon .shopdetailCouponGet .MS_coupon dt {width:82px; position:absolute; top:10px; left:0 ; color:#fff; text-align:center;} .shopdetail .shopdetailCoupon .shopdetailCouponGet .MS_coupon dt strong {font-weight: normal;} .shopdetail .shopdetailCoupon .shopdetailCouponGet .MS_coupon h4 {font-weight:bold;} .shopdetail .shopdetailItem .shopdetailItemPopup {text-align:center; padding:0 15px; margin:22px 0;} .shopdetail .shopdetailItem .shopdetailItemPopup a {font-weight:bold; color:#fff; background-color:#636363; display:block; padding:10px 0;} .shopdetail .shopdetailItem .shopdetailItemPopup .shopdetailItemZoom {height:60px; padding:0 0 0 75px; margin-top:10px; background:url("/images/d3/m_04/bg_hand@2x.gif") no-repeat 20px center; line-height: 60px; background-size: 50px auto;} .shopdetail .shopdetailItem .shopdetailImage img {max-width:100% !important; height: auto !important;} .shopdetail .shopdetailItem .shopdetailImage table {width:100% !important;} .shopdetail .shopdetailItem .shopdetailImage object {width:100% !important;} .shopdetail .shopdetailItem .shopdetailImage iframe {width:100% !important;} .shopdetail .shopdetailItem .shopdetailImage table {table-layout: auto !important;} .shopdetail .shopdetailItem .shopdetailImage div {width:100% !important;} .shopdetail .shopdetailItem .shopdetailNotify {margin-top:24px;} .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo {padding:0 15px;} .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo dt {font-weight:bold; margin-bottom:2px;} .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo dd {margin:0 0 25px 6px;} .shopdetail .shopdetailRelationItem {padding:0 15px 30px 15px;} .shopdetail .shopdetailRelationItem .listName input {float:right;} .shopdetail .shopdetailRelationItem .btn_cart {width:290px; text-align:center; font-weight:bold; color:#fff; background-color:#393939; display:block; padding:10px 0; margin:0 auto;} /* 관련상품 */ .shopdetailRelation {margin-bottom:30px;} .shopdetailRelation .list_shoppingRelationItem1x {padding: 0 7px;} .shopdetailRelation .list_shoppingRelationItem1x ul {width:100%; display:table; table-layout: fixed; box-sizing: border-box;} .shopdetailRelation .list_shoppingRelationItem1x li {width:100%; display:inline-block; vertical-align: top; border-top:1px solid #d9d9d9; padding:18px 0;} .shopdetailRelation .list_shoppingRelationItem1x li figure {padding:0 7px;} .shopdetailRelation .list_shoppingRelationItem1x li:first-child {border:0px none;} .shopdetailRelation .list_shoppingRelationItem1x li img.listPic {width:40%; float:left;} .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo {width:57%; float:left; padding-left:3%; position: relative;} .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo .listName {border-bottom: 1px solid #dedede; padding: 0 15px 2px 0; margin-bottom: 5px;} .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo .options-select {width:100%;} .shopdetailRelation .list_shoppingRelationItem1x .MS_related_checkbox {position:absolute; top:0; right:0;} .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo .listCount {margin: 12px 0;} .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo .listCount .amount-input {text-align:right;} .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo .listCount .fa-plus {background-color: #bbb; width: 30px; height: 30px; text-align: center; vertical-align: middle; line-height: 30px; color: #fff;} .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo .listCount .fa-minus {background-color: #bbb; width: 30px; height: 30px; text-align: center; vertical-align: middle; line-height: 30px; color: #fff;} .shopdetailRelation .list_shoppingRelationItem1x .btn_Black {width:290px; margin: 0 auto;} /* //관련상품 */ /* 퀵바이 버튼 노출 시 커뮤니티 탭 위치 변경 */ .cs-button {bottom: 53px !important;} /* //퀵바이 버튼 노출 시 커뮤니티 탭 위치 변경 */ @media screen and (min-width:420px) and (max-width:767px) { .shopdetail .shopdetailInfo {position:relative; overflow:hidden; zoom:1; background-color: #fff;} .shopdetail .shopdetailInfo .shopdetailInfoTop {float:left;} .shopdetail .shopdetailInfo .shopdetailInfoTop figure {border-bottom:0px none;} .shopdetail .shopdetailInfo .shopdetailInfoTop, .shopdetail .shopdetailInfo .shopdetailInfoBottom {width:50%;} .shopdetail .shopdetailInfo .shopdetailInfoBottom {float:right; background-color:#fff;} .shopdetailInfoBottom .shopdetailInfoMultiSelect .MK_optAddWrap #MK_innerOptScroll {background-color: #fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailTotal {border-top:1px solid #c7c7c7;} .shopdetail .shopdetailCoupon .shopdetailCouponGet {width:335px; margin:0 auto;} .shopdetail .shopdetailRelationItem {padding:0 0 30px 0;} .shopdetail .shopdetailItem .shopdetailItemPopup {width:335px; margin:22px auto;} .shopdetail .shopdetailRelationItem .btn_cart {margin:34px auto;} .shopdetailRelation .list_shoppingRelationItem1x li {width:50%;} .shopdetailRelation .list_shoppingRelationItem1x li:nth-child(2) {border:0px none;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop a {font-size:12px;} } @media screen and (min-width:768px) { .shopdetail .shopdetailInfo {position:relative; overflow:hidden; zoom:1; background-color: #fff;} .shopdetail .shopdetailInfo .shopdetailInfoTop {float:left;} .shopdetail .shopdetailInfo .shopdetailInfoTop figure {border-bottom:0px none;} .shopdetail .shopdetailInfo .shopdetailInfoTop, .shopdetail .shopdetailInfo .shopdetailInfoBottom {width:50%;} .shopdetailInfoBottom .shopdetailInfoMultiSelect .MK_optAddWrap #MK_innerOptScroll {background-color: #fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom {float:right; background-color:#fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailTotal {border-top:1px solid #c7c7c7;} .shopdetail .shopdetailCoupon .shopdetailCouponGet {width:335px; margin:0 auto;} .shopdetail .shopdetailRelationItem {padding:0 0 30px 0;} .shopdetail .shopdetailItem .shopdetailItemPopup {width:335px; margin:22px auto;} .shopdetail .shopdetailItem .shopdetailNotify {margin-top:36px;} .shopdetail .shopdetailRelationItem .btn_cart {margin:34px auto;} .shopdetailRelation .list_shoppingRelationItem1x li {width:50%;} .shopdetailRelation .list_shoppingRelationItem1x li:nth-child(2) {border:0px none;} } /* 추가 구성 상품 */ .shopdetail .shopdetailInfo .shopdetailInfoTit { height:40px; line-height:42px; padding:0 12px; border-top:1px solid #c7c7c7; border-bottom:1px solid #c7c7c7; font-size:14px; color:#000; } .shopdetail .shopdetailInfo .shopdetailInfoWrap:after { clear: both; content: ""; display: block; } .shopdetail .shopdetailInfo .shopdetailInfoWrap { width:100%; border-bottom:1px solid #c7c7c7; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoTop { float:left; width:45%; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoTop figure { padding:15px 12px; border:0; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue { float:right; width:52%; padding:15px 0; margin-right:3%; border:0; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue .shopdetailInfoprdName { font-size:1.333em; font-weight:bold; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue .shopdetailInfoCont { width:auto; margin:0; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue .shopdetailInfoName { width:auto; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoSelect p { padding:0; background:none; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoSelect .shopdetailInfoCont .basic_option { width:100%; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoSelect .shopdetailInfoName { display:none; width:100%; padding:0 0 5px 0; } /* 상품 상세 이벤트 공통 정보 */ .detail-common-info-event { padding:0 0 20px; word-break: break-all; } .detail-common-info-event img {max-width: 100%;} .detail-common-info-event div {margin-top:10px; } /* 상품 상세 일반 공통 정보 */ .detail-common-info { padding:0 15px 20px; word-break: break-all; } .detail-common-info img {max-width: 100%;} .detail-common-info dl { padding-top:20px; font-size:inherit; font-weight:normal; letter-spacing:-0.5px; } .detail-common-info dl dt { padding-bottom:10px; color:#444; font-weight:bold; } .detail-common-info dl dd { padding-left:10px; text-indent:-10px; color:#777; line-height:20px; } /* 스마트 쿠폰 목록 */ .shopdetail .shopdetailCoupon .smart-coupon-list li {position:relative; margin:14px; border:1px solid #cecece; border-radius:10px; letter-spacing:-1px; overflow:hidden;} .shopdetail .shopdetailCoupon .smart-coupon-list li .c-info { width:82%; padding:20px; border-right: 1px dashed #cecece; box-sizing: border-box;} .shopdetail .shopdetailCoupon .smart-coupon-list li .c-image img { width:100%; height:128px;} .shopdetail .shopdetailCoupon .smart-coupon-list li p { padding-bottom:10px; line-height:18px; font-size:13px; color:#999; word-break:break-all; font-family:"Malgun Gothic"; } .shopdetail .shopdetailCoupon .smart-coupon-list li p:last-child {padding-bottom:0;} .shopdetail .shopdetailCoupon .smart-coupon-list li p.c-name { font-size:14px; color:#000; font-weight:bold; word-break: break-all; } .shopdetail .shopdetailCoupon .smart-coupon-list li p.c-price {font-size:22px; color:#ff3a34; font-weight:bold;} .shopdetail .shopdetailCoupon .smart-coupon-list li .btn-down {position:absolute; top:0; right:0; width:18%; height:100%; background:#f8f8f8; text-align:center; box-sizing: border-box;} .shopdetail .shopdetailCoupon .smart-coupon-list li .btn-down span {position:absolute; right:0; top:50%; width:100%; margin-top:-22px; height:44px; font-size:12px; display:flex; word-break:break-all; flex-wrap:wrap; align-items:center; justify-content:center; } .shopdetail .shopdetailCoupon .smart-coupon-list li .btn-down span {color:#999;} .shopdetail .shopdetailCoupon .smart-coupon-list li .btn-down span a { font-size:0; text-indent:-9999px; display:inline-block; width:22px; height:22px; background:url('/images/common/ico_h11_down_black_l.png') no-repeat center center; } .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style1.sc-reserve p.c-price {color:#3b6ce9;} .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style2 {border:1px solid #fff;} .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style2 .c-info { background:#171940; border-color:#171940; } .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style2 p { color:#fff; } .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style2 p.c-txt { color:#999; } .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style2 .btn-down { background:#ff3a34; border:0; color:#fff; } .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style2 .btn-down a { background:url('/images/common/ico_h11_down_white_l.png') no-repeat center right; } .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style2 .btn-down span { color:#fff; } .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style2.sc-reserve .btn-down { background:#3b6ce9; color:#fff; } .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style3 { border:0; border-radius:0;} .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style3 .c-info { border:1px solid #000; border-right:2px dotted #272a4d; border-radius:10px; } .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style3 p.c-price { color:#eb3697;} .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style3 .btn-down { background:#fff2f9 ; border:1px solid #272a4d; border-left:0; border-radius:10px;} .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style3 .btn-down a { background:url('/images/common/ico_h11_down_pink_l.png') no-repeat center right; } .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style3.sc-reserve p.c-price {color:#18b776;} .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style3.sc-reserve .btn-down { background:#eefff7; } .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style3.sc-reserve .btn-down span a {color:#000;} .shopdetail .shopdetailCoupon .smart-coupon-list li.sc-style3.sc-reserve .btn-down a { background:url('/images/common/ico_h11_down_green_l.png') no-repeat center right; } /* 오늘출발 상품 */ .shopdetail .today-delivery { display:flex; align-items:center; margin:0 15px 15px; padding:10px; border:1px solid #e4e4e5; background:#f8f8f8; color:#111; font-size:1em; box-sizing: border-box; } .shopdetail .today-delivery .icon { padding:12px 10px; border:1px solid #111; border-radius:6px; background:#fff; } .shopdetail .today-delivery .txt { padding-left:12px; } .shopdetail .today-delivery .txt p { padding-top:5px; } /* ============================================================ 피시위즈 모바일 리뉴얼 — 상세 페이지 오버라이드 v2.0 (2026-07) KREAM풍 미니멀 : 구매 버튼 코랄레드(#14181d) / 블랙(#222) + 관련상품 가로 스크롤 캐러셀 (KREAM 스타일) ============================================================ */ /* 섹션 타이틀 */ .shopdetail h3 {background-color:#fff !important; border-bottom:1px solid #F0F0F0; font-size:15px; color:#222;} /* 할인가 강조 */ .shopdetail .shopdetailInfoDiscount, .shopdetail .shopdetailInfoDiscount em {color:#c8420f !important;} /* 구매 버튼 : 바로구매 코랄레드 / 장바구니 블랙 (KREAM과 동일 구도) */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop .cart {background-color:#222 !important; border:1px solid #222 !important; color:#fff !important; border-radius:10px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop .buy {background-color:#14181d !important; border:1px solid #14181d !important; color:#fff !important; border-radius:10px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on a {border-radius:10px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on a.buy {background-color:#14181d !important; border-color:#14181d !important; color:#fff !important;} /* 하단 고정 구매바 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn {background-color:#fff; border-top:1px solid #EEE;} .shopdetail .fixed-btn .btn_Red {border-radius:10px; background-color:#14181d !important; border-color:#14181d !important;} /* 수량 +/- 버튼 */ .shopdetail .shopdetailInfoCount .fa-plus, .shopdetail .shopdetailInfoCount .fa-minus, .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl .btn-type-02 {background-color:#222 !important; border-radius:6px;} /* 관련상품 버튼·팝업 버튼 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .btn_relation a, .shopdetail .shopdetailItem .shopdetailItemPopup a, .shopdetail .shopdetailRelationItem .btn_cart {background-color:#222 !important; border-color:#222 !important; border-radius:10px;} /* 상세 하단 게시판 탭 */ .shopdetail .shopdetailBoard a {background-color:#fff !important; border-top:1px solid #EEE; border-bottom:1px solid #EEE; color:#222;} /* 쿠폰 가격 */ .shopdetail .shopdetailCoupon .smart-coupon-list li p.c-price {color:#c8420f !important;} /* ---------- 관련상품 캐러셀 (2026-07) — 걷어냄 · 2026-08-06 16단계 ---------- 여기 있던 !important 열두 줄이 아래 16a 블록과 싸워서 새 모양이 안 먹었다. 같은 내용을 16a 에서 다시 짠다. (PC 다듬기19 에서 겪은 것과 같은 문제) */ /* ===== 상세 디자인 매칭 : 바로구매 골드 2026-07-24 ===== */ .shopdetail .buy,.shopdetail .buy_on a.buy,.shopdetail .fixed-btn .btn_Red{background-color:#F0D025 !important;border-color:#F0D025 !important;color:#14181d !important;} /* ============================================================ 피시위즈 모바일 리뉴얼 — 상세 v2.2 (2026-07-25) 브랜드 라인 · 배송 프로모 · 실시간 재고 ============================================================ */ /* 브랜드 라인 + 상품명 위계 */ .shopdetail .shopdetailInfoTop figure {margin:0;} .shopdetail .shopdetailInfoTop .pd-brand {padding:14px 15px 0; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8A8F96; line-height:1.2;} .shopdetail .shopdetailInfoTop h2 {padding:4px 15px 0 !important; font-size:17px; font-weight:700; line-height:1.4; color:#14181d; text-wrap:pretty;} /* 배송 프로모 스트립 (문구는 shopdetail.html의 .pd-promo 한 줄) */ .shopdetail .pd-promo {margin:12px 15px 0; padding:9px 12px; border-radius:8px; background:#F6F7F8; font-size:12px; font-weight:600; color:#4A5057; letter-spacing:-.01em;} /* 실시간 재고 — 표 대신 카드 리스트 (재입고 예정 표기 없음) */ .shopdetail .shopdetailStock {margin-top:10px;} .shopdetail .shopdetailStock h3 {padding:14px 15px !important; font-size:15px; font-weight:700;} .shopdetail .shopdetailStock .stock-list {padding:0 15px;} .shopdetail .shopdetailStock .stock-list li {display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid #F0F0F0; font-size:13px;} .shopdetail .shopdetailStock .stock-list .s-name {color:#14181d; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .shopdetail .shopdetailStock .stock-list .s-state {flex:0 0 auto; color:#8A8F96; font-weight:700; font-size:12px;} .shopdetail .shopdetailStock .stock-more {display:block; margin:12px 15px 0; padding:12px 0; border:1px solid #E4E5E7; border-radius:10px; text-align:center; font-size:13px; font-weight:700; color:#14181d;} /* ========================================================================== FISHWIZ v2 5a — 모바일 상품상세 (2026-08-06 · 1단계 : CSS 만) 원본 뼈대는 건드리지 않는다. 색·글자·여백만 v2 톤으로 바꾼다. 마크업이 필요한 것(다중이미지 옆으로 넘기기, 별점 줄, 발송·배송 묶기)은 2단계에서 한다. 기준 폭 390px. PC 상세(5a)와 같은 규칙을 쓰되 크기만 모바일로 줄인다. ========================================================================== */ .shopdetail{background:#fff;font-family:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif; color:#14181d;padding-bottom:76px;} /* 하단 고정 바 자리만큼 비워 둔다 */ .shopdetail a{text-decoration:none;color:inherit;} /* ── 브레드크럼 ───────────────────────────────────────────────────── PC·목록과 같은 규격. 모바일은 좌우 여백만 15px 로 줄인다. (자세한 규격은 스킬 references/tokens.md 의 '브레드크럼' 표) */ .shopdetail .page_location{padding:14px 15px 0 !important;border:0 !important;background:transparent;} .shopdetail .page_location ol{display:flex;flex-wrap:nowrap;overflow:hidden;margin:0;padding:0;list-style:none;} .shopdetail .page_location li{font-size:12px !important;color:#9aa0a8 !important; white-space:nowrap;float:none !important;} .shopdetail .page_location li a{font-size:12px !important;color:#9aa0a8 !important;} /* ★ 구분자는 공용 CSS(common.css)가 이미 li::after 로 '>' 를 넣고 있다. 여기서 또 넣으면 두 개가 된다. 새로 넣지 말고 있는 것의 모양만 바꾼다. */ .shopdetail .page_location li::after{content:'›' !important;margin:0 6px;color:#c6cbd2; font-size:12px !important;font-weight:400 !important;} .shopdetail .page_location li:last-child::after{content:'' !important;margin:0;} .shopdetail .page_location li:last-child{color:#41474e !important;font-weight:600; overflow:hidden;text-overflow:ellipsis;} .shopdetail .page_location li:last-child a{color:#41474e !important;font-weight:600;} /* ── 상단 : 이미지 · 브랜드 · 상품명 ────────────────────────────────── */ .shopdetail .shopdetailInfoTop{padding:0;} .shopdetail .shopdetailInfoTop figure{margin:0;} .shopdetail .shopdetailInfoTop figure img.response100{width:100%;height:auto;display:block;background:#fff;} .shopdetail .pd-brand{padding:16px 15px 0 !important;margin:0; font-size:11px;font-weight:600;letter-spacing:.5px;color:#8a9099;text-transform:uppercase;} .shopdetail .shopdetailInfoTop h2{margin:0;padding:6px 15px 0; font-size:18px;font-weight:800;line-height:1.4;letter-spacing:-.3px;color:#14181d;} /* 무료배송 안내 줄 */ /* ★ 2026-08-06 : 무료배송 안내 줄은 삭제했다(헤더·발송 묶음과 세 번 겹쳤다). 상품이 이 클래스를 다시 쓰더라도 나오지 않게 막아 둔다. */ .shopdetail .pd-promo{display:none !important;} /* ── 가격·적립금·배송비 표 ─────────────────────────────────────────── */ .shopdetail .shopdetailInfoValue{padding:14px 15px 0;} .shopdetail .shopdetailInfoValue table{width:100%;border-collapse:collapse;} .shopdetail .shopdetailInfoName{font-size:12px !important;color:#8a9099 !important; font-weight:500 !important;padding:7px 0 !important;white-space:nowrap;} .shopdetail .shopdetailInfoCont{font-size:13px !important;color:#41474e !important;padding:7px 0 !important;} /* 판매가 한 줄만 크게 */ .shopdetail .shopdetailInfoValue .bold{font-size:24px !important;font-weight:800 !important; color:#14181d !important;letter-spacing:-.5px;} .shopdetail .shopdetailInfoDiscount{display:inline-block;margin-left:6px;padding:3px 7px; background:#F0D025;border-radius:5px;font-size:12px !important;font-weight:800 !important; color:#14181d !important;vertical-align:middle;} /* 오늘출발 안내 */ .shopdetail .today-delivery{margin:12px 15px 0 !important;padding:12px !important; background:#fff;border:1px solid #eef1f4;border-radius:10px;font-size:12px;color:#41474e;line-height:1.5;} /* ── 옵션 상자 ────────────────────────────────────────────────────── PC 와 같은 얼개 : 검은 머리 + 흰 상자. 머리 글자는 2단계에서 상품 옵션명으로 바꾼다. */ .shopdetail .option_area{margin:16px 15px 0 !important;padding:0 !important; width:auto !important;float:none !important;} .shopdetail .option_tk{border:1px solid #eef1f4;border-radius:12px;padding:14px;background:#fff;} .shopdetail .shopdetailInfoSelect{width:auto !important;padding:0 !important;} .shopdetail .shopdetailInfoSelect select{width:100% !important;max-width:100% !important; height:46px !important;box-sizing:border-box;border:1px solid #dfe3e8 !important;border-radius:10px; padding:0 14px !important;font-size:14px;color:#14181d;background:#fff;} /* 수량 [ − ][ 숫자 ][ + ] — PC 와 같은 모양, 크기만 줄인다 */ .shopdetail .shopdetailInfoCount{display:flex !important;align-items:center; justify-content:space-between;gap:10px;margin-top:12px;} .shopdetail .shopdetailInfoCount .btn-qty-box{display:flex;align-items:stretch; width:132px;height:42px;box-sizing:border-box; border:1px solid #dfe3e8;border-radius:9px;overflow:hidden;background:#fff;} /* 총 상품 금액 */ .shopdetail .shopdetailTotal{margin:14px 15px 0 !important;padding:14px 16px !important; background:#f6f7f9;border-radius:10px; display:flex;align-items:baseline;justify-content:flex-end;gap:8px;} .shopdetail .shopdetailTotal .bold{font-size:22px !important;font-weight:800 !important;color:#14181d !important;} /* ── 구매 버튼 : 화면 맨 아래 고정 바 ─────────────────────────────── 손님이 상세설명을 한참 내려 봐도 버튼이 따라온다. */ .shopdetail .buy_on{position:fixed !important;left:0;right:0;bottom:0;z-index:60; display:flex !important;gap:8px; padding:10px 15px calc(10px + env(safe-area-inset-bottom)) !important; background:#fff;border-top:1px solid #eef1f4;box-shadow:0 -6px 18px rgba(20,24,29,.06);} .shopdetail .buy_on a{flex:1 1 0;display:flex;align-items:center;justify-content:center; height:50px;border-radius:10px;font-size:15px;font-weight:700;box-sizing:border-box;} .shopdetail .buy_on a.cart, .shopdetail .buy_on a:not(.buy):not(.wish){background:#fff;color:#14181d;border:1.5px solid #14181d;} .shopdetail .buy_on a.buy{background:#14181d;color:#fff;border:0;flex:1.3 1 0;} .shopdetail .buy_on a.wish{flex:0 0 50px;background:#fff;color:#8a9099;border:1.5px solid #dfe3e8;font-size:20px;} /* 옛 고정 바(옵션열기 + 빨간 바로구매)는 쓰지 않는다 */ .shopdetail .fixed-btn{display:none !important;} /* ── 실시간 재고 ───────────────────────────────────────────────────── */ .shopdetail .shopdetailStock{margin-top:20px;padding-top:20px;border-top:8px solid #F4F5F6;} .shopdetail .stock-list{padding:0 15px !important;} .shopdetail .stock-list li{display:flex;align-items:center;justify-content:space-between; padding:11px 0;border-bottom:1px solid #f1f3f6;font-size:13px;color:#41474e;} .shopdetail .stock-list .s-name{font-weight:600;color:#14181d;} .shopdetail .stock-list .s-state{font-size:12px;color:#8a9099;} /* ── 리뷰 · Q&A 줄 ─────────────────────────────────────────────────── */ .shopdetail .shopdetailBoard{margin-top:20px;border-top:8px solid #F4F5F6; display:flex;padding:0 !important;} .shopdetail .shopdetailBoard a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px; height:52px;font-size:13px;font-weight:600;color:#41474e;border-bottom:1px solid #eef1f4;} .shopdetail .shopdetailBoard a + a{border-left:1px solid #eef1f4;} /* ── 상세설명 ──────────────────────────────────────────────────────── */ .shopdetail .shopdetailItem{padding:0;} .shopdetail .shopdetailItem img{max-width:100%;height:auto;} /* ── 정가 · 할인율 (2026-08-06) ───────────────────────────────────── 모바일 상품 카드와 같은 규격. 값이 없으면 JS 가 감춘다. */ .shopdetail .shopdetailInfoValue .fw-dconsumer{display:none; margin-right:8px;font-size:13px;color:#b3b9c0;text-decoration:line-through;font-weight:500;} .shopdetail .shopdetailInfoValue .fw-dconsumer.on{display:inline;} .shopdetail .shopdetailInfoValue .fw-doff{display:none; margin-left:8px;padding:3px 7px;border-radius:5px; background:#c8420f;color:#fff;font-size:12px;font-weight:800;letter-spacing:-.2px; vertical-align:middle;} .shopdetail .shopdetailInfoValue .fw-doff.on{display:inline-block;} /* ========================================================================== FISHWIZ v2 5a — 모바일 상품상세 · 2단계 (마크업이 필요한 것들) 2026-08-06 ========================================================================== */ /* ── 다중이미지 ───────────────────────────────────────────────────── 메이크샵 위젯이 그린다. 우리는 바깥 크기만 잡는다. 안쪽은 건드리지 않는다. (남의 위젯 안으로 규칙을 넣으면 깨진다 — others-widgets.md) */ .shopdetail .fw-mimg{position:relative;background:#fff;} .shopdetail .fw-mimg-multi{display:none;} .shopdetail .fw-mimg-multi.on{display:block;} .shopdetail .fw-mimg-multi img{max-width:100%;height:auto;} .shopdetail .fw-mimg-one img{width:100%;height:auto;display:block; aspect-ratio:1/1;object-fit:contain;background:#fff;} .shopdetail .fw-mimg-one.off{display:none;} /* ── 옵션 머리 (검은 바) ───────────────────────────────────────────── */ .shopdetail .fw-mopthead{margin:16px 15px 0;padding:12px 14px; background:#14181d;color:#fff;border-radius:12px 12px 0 0; font-size:14px;font-weight:700;letter-spacing:-.2px;} .shopdetail .fw-mopthead em{margin-left:4px;font-style:normal;font-size:12px;font-weight:500;color:#F0D025;} /* 머리가 붙었으니 상자 위쪽 모서리는 각지게 */ .shopdetail .option_area .option_tk{border-radius:0 0 12px 12px;} /* ── 수량 [ − ][ 숫자 ][ + ] ───────────────────────────────────────── */ /* ★ 2026-08-06 : 여기 !important 를 걸어 두는 바람에 JS 가 style.display='none' 을 줘도 줄이 계속 보였다. 감추는 것은 아래 .fw-hide 로 확실히 이기게 한다. */ .shopdetail .fw-mqtyonly{display:block !important;margin-top:0 !important;} .shopdetail .fw-hide, .shopdetail .fw-mqtyonly.fw-hide{display:none !important;} .shopdetail .fw-mqtyonly .shopdetailInfoName{display:block !important;width:100% !important; margin:0 0 8px !important;font-size:13px !important;color:#41474e !important;} .shopdetail .fw-mqtyonly .fw-mstockmark{margin-left:6px;font-size:12px;color:#8a9099;} .shopdetail .fw-mqtyonly .fw-mstockmark.low{color:#C8420F;font-weight:600;} .shopdetail .fw-mqtyonly .shopdetailInfoCont{display:block !important;width:100% !important;} .shopdetail .fw-mqty{display:flex !important;align-items:stretch; width:148px;height:44px;box-sizing:border-box; border:1px solid #dfe3e8;border-radius:10px;overflow:hidden;background:#fff;} .shopdetail .fw-mqty input{position:static !important;order:1;flex:1 1 0 !important; width:auto !important;min-width:0 !important;height:42px !important; border:0 !important;background:transparent !important;padding:0 !important;margin:0 !important; text-align:center !important;font-size:15px;font-weight:700;color:#14181d;box-sizing:border-box;} .shopdetail .fw-mqty a{position:relative !important;flex:0 0 42px !important; width:42px !important;height:42px !important;display:flex !important; align-items:center;justify-content:center;background:#fff;text-decoration:none;} .shopdetail .fw-mqty a.fw-mqup{order:2;border-left:1px solid #eef1f4;} .shopdetail .fw-mqty a.fw-mqdw{order:0;border-right:1px solid #eef1f4;} /* ★ 2026-08-06 : 가상요소 막대 삭제 — JS 가 진짜 글자 − + 를 넣으므로 여기서 또 그리면 두 겹으로 겹친다(+ 위에 − 와 + 가 포개져 보이던 원인). */ .shopdetail .fw-mqty a.fw-off{background:#fafbfc;cursor:default;} /* ── 고른 옵션 줄 (멀티옵션박스) ────────────────────────────────────── */ .shopdetail #MK_innerOptScroll{margin:0 0 10px;} .shopdetail #MK_innerOptScroll ul{margin:0;padding:0;list-style:none;} .shopdetail #MK_innerOptScroll li{display:flex;align-items:center;gap:10px;flex-wrap:wrap; list-style:none;background:#f8f9fb;border:1px solid #eef1f4;border-radius:10px; padding:11px 12px !important;margin:0 0 8px !important;} .shopdetail #MK_innerOptScroll .MK_p-name{flex:1 1 100%;font-size:13px;font-weight:600;color:#14181d;} .shopdetail #MK_innerOptScroll .fw-optstock{margin-left:6px;font-size:11.5px;font-weight:500; color:#8a9099;font-style:normal;} .shopdetail #MK_innerOptScroll .fw-optstock.low{color:#C8420F;font-weight:600;} .shopdetail #MK_innerOptScroll .MK_qty-ctrl{position:static !important;display:flex !important; align-items:stretch;flex:0 0 122px;width:122px !important;height:38px !important;box-sizing:border-box; border:1px solid #dfe3e8;border-radius:9px;overflow:hidden;background:#fff;} .shopdetail #MK_innerOptScroll .MK_qty-ctrl input{position:static !important;order:1;flex:1 1 0 !important; width:auto !important;min-width:0 !important;height:36px !important; border:0 !important;background:transparent !important;padding:0 !important;margin:0 !important; text-align:center !important;font-size:14px;font-weight:700;color:#14181d;box-sizing:border-box;} .shopdetail #MK_innerOptScroll .MK_qty-ctrl a{position:relative !important;flex:0 0 36px !important; width:36px !important;height:36px !important;display:flex !important; align-items:center;justify-content:center;background:#fff;font-size:0;text-decoration:none;} .shopdetail #MK_innerOptScroll .MK_qty-ctrl a img{display:none !important;} .shopdetail #MK_innerOptScroll .MK_qty-ctrl a.MK_btn-up{order:2;border-left:1px solid #eef1f4;} .shopdetail #MK_innerOptScroll .MK_qty-ctrl a.MK_btn-dw{order:0;border-right:1px solid #eef1f4;} /* ★ 2026-08-06 : 가상요소 막대 삭제 — 위와 같은 이유. */ .shopdetail #MK_innerOptScroll .MK_qty-ctrl a.fw-off{background:#fafbfc;cursor:default;} .shopdetail #MK_innerOptScroll .MK_price{position:static !important;flex:1 1 auto;text-align:right; font-size:14px;font-weight:700;color:#14181d !important;} .shopdetail #MK_innerOptScroll .MK_price span{color:#14181d !important;} .shopdetail #MK_innerOptScroll .MK_btn-del{position:relative;flex:0 0 26px;width:26px;height:26px; display:flex !important;align-items:center;justify-content:center; border:1px solid #eef1f4;border-radius:8px;background:#fff;font-size:0;} .shopdetail #MK_innerOptScroll .MK_btn-del img{display:none !important;} .shopdetail #MK_innerOptScroll .MK_btn-del::before, .shopdetail #MK_innerOptScroll .MK_btn-del::after{content:'';position:absolute; width:11px;height:1.5px;background:#8a9099;border-radius:1px;} .shopdetail #MK_innerOptScroll .MK_btn-del::before{transform:rotate(45deg);} .shopdetail #MK_innerOptScroll .MK_btn-del::after{transform:rotate(-45deg);} /* ── 발송·배송·원산지 묶음 (JS 가 옵션 위로 모은다) ─────────────────── */ .shopdetail .fw-mdeli{margin:14px 15px 0;padding:12px 14px; border:1px solid #eef1f4;border-radius:10px;background:#fff;} .shopdetail .fw-mdeli .r{display:flex;gap:10px;padding:4px 0;font-size:12px;line-height:1.5;} .shopdetail .fw-mdeli .lb{flex:0 0 56px;color:#8a9099;} .shopdetail .fw-mdeli .vl{flex:1 1 auto;color:#41474e;} /* ── 마무리 (2026-08-06) ────────────────────────────────────────────── */ /* 총 상품 금액 — 빨간색으로 나오던 것을 v2 색으로 */ .shopdetail #MK_innerOptTotal, .shopdetail .shopdetailTotal{color:#14181d !important;} .shopdetail #MK_innerOptTotal .MK_total, .shopdetail #MK_innerOptTotal strong, .shopdetail #MK_innerOptTotal span, .shopdetail .shopdetailTotal .bold{color:#14181d !important;} /* 다중이미지 — 위젯이 그린다. 안쪽 구조를 모르니 넘침만 막는다. (남의 위젯 안으로 규칙을 넣으면 깨진다 — others-widgets.md) */ .shopdetail .fw-mimg-multi{overflow:hidden;} .shopdetail .fw-mimg-multi img{max-width:100%;height:auto;} /* ── 고른 옵션이 3줄 이상일 때 (2026-08-06) ───────────────────────── 메이크샵이 이 상자에 높이 제한을 걸어 3줄부터 안에서 스크롤이 생긴다. 모바일에서는 페이지 스크롤과 겹쳐 불편하므로 높이를 풀어 줄 수만큼 자라게 한다. */ .shopdetail #MK_innerOptWrap, .shopdetail #MK_innerOptScroll{max-height:none !important;height:auto !important;overflow:visible !important;} /* ===== FISHWIZ v2 15a : 하단 탭바 · 상세설명 정리 (2026-08-06) =============== 상세정보 | 리뷰(n) | Q&A(n) — 스크롤하면 화면 위에 붙는 탭바. 상세정보는 제자리 이동, 리뷰·Q&A 는 해당 게시판으로 이동. 상세설명 영역은 "새창 열기" 안내를 걷어내고 이미지를 화면 폭에 맞춘다. ========================================================================== */ .shopdetail .fw-mtabs{position:-webkit-sticky;position:sticky;top:0;z-index:80; display:flex;background:#fff;border-bottom:1px solid #eef1f4;} .shopdetail .fw-mtabs a{flex:1;display:flex;align-items:center;justify-content:center;gap:4px; height:46px;font-size:14px;font-weight:700;color:#7d848c;text-decoration:none; border-bottom:2px solid transparent;margin-bottom:-1px;} .shopdetail .fw-mtabs a.on{color:#14181d;border-bottom-color:#14181d;} .shopdetail .fw-mtabs a i{font-style:normal;font-size:11.5px;font-weight:800;color:#E0A400;} .shopdetail .shopdetailItemPopup{display:none !important;} .shopdetail .shopdetailItem{padding:0 !important;} .shopdetail .shopdetailImage{padding:0 !important;text-align:center;} .shopdetail .shopdetailImage img{max-width:100% !important;height:auto !important;} /* ========================================================================== FISHWIZ v2 16a — 모바일 상품상세 아래쪽 (2026-08-06 · 16단계) ① 관련상품 : 세로로 쌓이던 목록 → 옆으로 미는 레일 ② 상품 고시 정보 · 교환/반품 : v2 접기 상자 + CSS 화살표 ③ 남은 fa 아이콘 정리 (글꼴이 안 실리면 네모로 깨지는 것들) ========================================================================== */ /* ── 하단 공통 : 흰 판을 회색 바탕 위에 8px 씩 띄운다 (PC 다듬기20 과 같은 얼개) ── */ .shopdetail .shopdetailItem{background:#f4f5f6;} .shopdetail .shopdetailItem > .shopdetailImage, .shopdetail .shopdetailItem > section{background:#fff;margin:0 0 8px;} .shopdetail .shopdetailItem > section:last-child{margin-bottom:0;} /* ══════════════════════════════════════════════════════════════════════ ① 함께 본 상품(관련상품) — 부품표대로 다시 잡음 (2026-08-15) ★ 이 구역만 id(#related_product_tk)로 좁힌다. '교환/반품' 상자도 class 가 shopdetailRelation 이라 class 로 걸면 같이 잡힌다. ★ 부품표 값 가로 레일 카드 폭 120 · 카드 사이 8 · 좌우 16 · 끝에서 잘려 보이게 썸네일 120x120 · 흰 배경 + contain · 모서리 10 슬롯 높이 브랜드 12 · 상품명 33 · 정가 13 · 판매가 20 · 별점 15 · 적립금 15 · 품절 15 (값이 없어도 자리를 남긴다) 입력칸 높이 44 · 모서리 10 · 좌우 12 · 글자 13.5 수량조절 높이 36 · 좌우 칸 36 · 숫자 칸 44 · 바깥 모서리 8 · 숫자 칸 좌우만 1px 선 주 버튼 높이 52 · 모서리 10 · 검정 #14181D 흰 글자 섹션머리 제목 16 Bold · 제목과 내용 사이 16 ★ 줄 순서는 CSS order 로 세운다. 카드 마무리 JS(카드 v3)가 일곱 줄을 맨 끝으로 다시 붙이기 때문에 HTML 순서로는 「수량 → 옵션 → 상품정보」가 되어 버린다. 사장님 지시대로 **옵션 선택 밑에 수량**이 오도록 order 로 바로잡는다. ══════════════════════════════════════════════════════════════════════ */ #related_product_tk{padding:32px 0 24px;} #related_product_tk > h3{margin:0 0 16px;padding:0 16px !important; background:#fff !important;border:0 !important; font-size:16px;font-weight:800;color:#14181D;line-height:1.3;letter-spacing:-.3px;} #related_product_tk .list_shoppingRelationItem1x{padding:0;} /* 줄 → 가로 레일 */ #related_product_tk .list_shoppingRelationItem1x ul{ display:flex;width:auto;table-layout:auto; gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch; margin:0;padding:0 16px 4px; scroll-snap-type:x proximity;scroll-padding-left:16px;scrollbar-width:none;} /* ★ scroll-padding 이 없으면 브라우저가 첫 카드를 화면 맨 왼쪽에 붙여 버려 왼쪽 여백 16 이 사라진다. 실제로 재서 확인하고 넣은 줄이다. */ #related_product_tk .list_shoppingRelationItem1x ul::-webkit-scrollbar{display:none;} #related_product_tk .list_shoppingRelationItem1x li{ flex:0 0 120px;width:120px;display:block;float:none; margin:0;padding:0;border:0;background:#fff;scroll-snap-align:start;} #related_product_tk .list_shoppingRelationItem1x li figure{position:relative;margin:0;padding:0;} /* 썸네일 — 흰 배경 contain · 모서리 10 (부품표) */ #related_product_tk .list_shoppingRelationItem1x li img.listPic{ width:120px;height:120px;object-fit:contain;float:none; border:0;border-radius:10px;background:#fff;} /* 글자 칸 — 줄 순서를 order 로 세운다 */ #related_product_tk .list_shoppingRelationItem1x .list_shoppingInfo{ position:static;width:auto;float:none;padding:8px 0 0;text-align:left; display:flex;flex-direction:column;} #related_product_tk .list_shoppingRelationItem1x .fw-brand{ order:1;height:12px;line-height:12px;margin:0;overflow:hidden; font-size:9px;font-weight:700;color:#8A9099;} #related_product_tk .list_shoppingRelationItem1x .listName{ order:2;height:33px;margin:0;padding:0;border:0; font-size:12px;font-weight:400;line-height:1.35;color:#2B3138; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} #related_product_tk .list_shoppingRelationItem1x .listDiscount{ order:3;height:13px;line-height:13px;margin:0;font-size:10px;color:#B3B9C0;} #related_product_tk .list_shoppingRelationItem1x .listDiscount del{color:#B3B9C0;} #related_product_tk .list_shoppingRelationItem1x .listPrice{ order:4;height:20px;line-height:20px;margin:0;font-size:14px;font-weight:800;color:#14181D;} #related_product_tk .list_shoppingRelationItem1x .listSale{ order:4;height:20px;line-height:20px;margin:0;font-size:14px;font-weight:800;color:#14181D;} #related_product_tk .list_shoppingRelationItem1x .fw-review{ order:5;height:15px;line-height:15px;margin:0;font-size:10.5px;color:#8A9099;} #related_product_tk .list_shoppingRelationItem1x .listReserve{ order:6;height:15px;line-height:15px;margin:0;font-size:10.5px;font-weight:500;color:#8A7207;} #related_product_tk .list_shoppingRelationItem1x .listSoldout{ order:7;height:15px;line-height:15px;margin:0;font-size:11px;font-weight:700;color:#EF6253;} /* 옵션 고르기 — 라벨 12 Bold · 셀렉트 44/10/12/13.5 (부품표 입력칸) */ #related_product_tk .list_shoppingRelationItem1x .fw-relopt-tit{ order:8;margin:8px 0 4px;font-size:12px;font-weight:700;color:#8A9099;line-height:1.2;} #related_product_tk .list_shoppingRelationItem1x .fw-relopt{order:9;margin:0 0 4px;} #related_product_tk .list_shoppingRelationItem1x .options-select, #related_product_tk .list_shoppingRelationItem1x select{ box-sizing:border-box;width:100%;height:44px;padding:0 12px; border:1px solid #DFE3E8;border-radius:10px;background:#fff; font-size:13.5px;color:#14181D;-webkit-appearance:none;appearance:none;} #related_product_tk .list_shoppingRelationItem1x select:focus{ border-color:#14181D;border-width:1.5px;outline:none;} /* 수량조절 — 옵션 **밑에** 온다 (사장님 지시). 36 + 44 + 36 = 116 */ #related_product_tk .list_shoppingRelationItem1x .listCount{ order:10;display:flex;align-items:stretch;margin:8px 0 0; height:36px;width:116px;box-sizing:border-box; border:1px solid #DFE3E8;border-radius:8px;overflow:hidden;background:#fff;} #related_product_tk .list_shoppingRelationItem1x .listCount a{ flex:0 0 36px;width:36px;display:flex;align-items:center;justify-content:center; border:0;background:#fff;color:#41474E;font-size:12px;text-decoration:none;} #related_product_tk .list_shoppingRelationItem1x .listCount a:first-of-type{order:3;} #related_product_tk .list_shoppingRelationItem1x .listCount a:last-of-type{order:1;} #related_product_tk .list_shoppingRelationItem1x .listCount input{ order:2;flex:0 0 44px;width:44px;box-sizing:border-box;height:100%; border:0;border-left:1px solid #DFE3E8;border-right:1px solid #DFE3E8; border-radius:0;background:#fff;padding:0; text-align:center;font-size:12.5px;color:#14181D;} /* 고르기 체크칸 — 썸네일 오른쪽 위 8,8 (뱃지와 같은 자리) */ #related_product_tk .list_shoppingRelationItem1x .MS_related_checkbox{ position:absolute;top:8px;right:8px;left:auto;z-index:2; margin:0;width:18px;height:18px;accent-color:#14181D; box-shadow:0 1px 3px rgba(0,0,0,.14);} /* 선택상품 장바구니 담기 — 주 버튼 52 (부품표) */ #related_product_tk .btn_Black{ display:block;width:auto;height:52px;line-height:52px;margin:16px 16px 0; border:0;border-radius:10px;background:#14181D;color:#fff; font-size:14px;font-weight:700;text-align:center;text-decoration:none;} /* ── ② 접기 상자 (상품 고시 정보 · 교환/반품/환불/취소) ─────────────── */ .shopdetail .shopdetailItem h3.btn_toggle{ position:relative;box-sizing:border-box;display:flex;align-items:center; height:54px;margin:0;padding:0 46px 0 16px !important; background:#fff !important;border:0 !important;border-bottom:1px solid #f1f3f5 !important; font-size:14px;font-weight:700;color:#14181d;cursor:pointer;} /* 화살표는 글꼴(fa) 대신 CSS 로 그린다 — 글꼴이 안 실려도 안 깨진다 */ .shopdetail .shopdetailItem h3.btn_toggle .fa{display:none !important;} .shopdetail .shopdetailItem h3.btn_toggle::after{ content:'';position:absolute;right:18px;top:50%;width:8px;height:8px; border-right:1.6px solid #9aa0a7;border-bottom:1.6px solid #9aa0a7; transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;} .shopdetail .shopdetailItem h3.btn_toggle.fw-open::after{ transform:translateY(-25%) rotate(-135deg);border-color:#14181d;} /* 펼쳤을 때 안쪽 글 — 상품 고시 정보 */ .shopdetail .shopdetailItem .shopdetailNotify{margin-top:0;} .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo{padding:16px;} .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo dl{margin:0;} .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo dt{ margin:0 0 3px;font-size:13px;font-weight:700;color:#14181d;} .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo dd{ margin:0 0 14px;font-size:13px;line-height:1.6;color:#5a6169;} /* 펼쳤을 때 안쪽 글 — 교환/반품/환불/취소 */ .shopdetail .shopdetailItem .detail-common-info{padding:16px;font-size:13px;line-height:1.6;color:#5a6169;} .shopdetail .shopdetailItem .detail-common-info dl{margin:0 0 14px;} .shopdetail .shopdetailItem .detail-common-info dt{margin:0 0 3px;font-size:13px;font-weight:700;color:#14181d;} .shopdetail .shopdetailItem .detail-common-info dd{margin:0;} .shopdetail .shopdetailItem .detail-common-info img{max-width:100%;height:auto;} /* ── ③ 남은 fa 아이콘 ───────────────────────────────────────────────── 폰트어썸이 안 실리면 네모(□)로 깨진다. 글자로 뜻이 통하는 자리는 아이콘을 뺀다. */ .shopdetail .fa-mobile, .shopdetail .fa-tags, .shopdetail .fa-caret-down{display:none !important;} /* 배송 안내의 동그란 i 는 눌리는 곳 표시라 남긴다 — 글꼴 대신 유니코드로 그린다 */ .shopdetail .fa-info-circle{font-family:inherit !important;font-size:12px !important; color:#9aa0a7;line-height:1;} .shopdetail .fa-info-circle::before{content:'\24D8' !important;} /* 오른쪽에 떠 있던 '관련상품' 검은 사각 버튼 — 아래 레일로 대신한다 */ .shopdetail .btn_relation{display:none !important;} /* ========================================================================== FISHWIZ v2 17a — 파트2 시안의 모바일 번안 (2026-08-06 저녁) · 탭 : 상세정보 · 리뷰 · 문의 (PC 와 이름 통일) · 골드 경고 상자(반품 불가 조건) — 교환/반품 접기 아래 · 관련상품 → '함께 본 상품' 이름으로 맨 끝 ========================================================================== */ .shopdetail .fw-mwarn{margin:0 0 8px;padding:14px 16px !important; border:0;border-radius:0;background:#FFF8DC !important; font-size:12.5px;line-height:1.7;color:#8a7207;} .shopdetail .fw-mwarn b{color:#14181d;font-weight:800;} /* ========================================================================== FISHWIZ v2 18a — 모바일 하단 디자인 확정판 (2026-08-06 밤) v2 시안에 모바일 하단이 없어서 PC 파트2의 언어를 모바일로 옮겨 새로 짰다. · 회색 바탕 위 "떠 있는 카드" — 좌우 10px 여백 · 둥근 14px · 얇은 테두리 · 상세설명만 전폭(이미지가 꽉 차야 해서) · 붙는 탭바는 그림자로 내용과 구분 ========================================================================== */ .shopdetail .shopdetailItem{padding-bottom:12px;} .shopdetail .shopdetailItem > section{margin:0 10px 10px;border:1px solid #e7ebef; border-radius:14px;overflow:hidden;background:#fff;} .shopdetail .shopdetailItem > .shopdetailImage{margin:0 0 10px;border:0;border-radius:0;} /* 접기 제목줄은 카드 안이라 밑줄만 */ .shopdetail .shopdetailItem h3.btn_toggle{border-bottom:0 !important;} .shopdetail .shopdetailItem section h3{border:0 !important;} /* 골드 경고 카드 */ .shopdetail .fw-mwarn{border:1px solid #F0D025 !important;border-radius:14px; margin:0 10px 10px;background:#FFF8DC !important;} /* 탭바 — 내용과 구분되게 그림자 + 굵은 밑줄 */ .shopdetail .fw-mtabs{box-shadow:0 8px 16px -10px rgba(20,24,29,.22);} .shopdetail .fw-mtabs a.on{border-bottom-width:3px;} /* ========================================================================== FISHWIZ v2 19a — 모바일 전체 글자·버튼 축소, 무신사 수준 (2026-08-06 밤 · 피그마 합의) 상단·옵션·하단 전부. 기준 : 상품명 15 중간굵기 · 큰 가격 20 · 본문 12 · 옵션 머리/셀렉트 38px · 구매 버튼 46px · 탭 13.5 · 접기 제목 13. ========================================================================== */ /* ── 상단 ── */ .shopdetail .shopdetailInfoTop h2{font-size:15px !important;font-weight:500 !important;} .shopdetail .shopdetailInfoTop .pd-brand{font-size:11px;} .shopdetail .shopdetailInfoValue p, .shopdetail .shopdetailInfoValue .shopdetailInfoName, .shopdetail .shopdetailInfoValue .shopdetailInfoCont{font-size:12px !important;} .shopdetail .shopdetailInfoValue .fw-dsell{font-size:20px !important;} .shopdetail .shopdetailInfoDiscount em{font-size:20px !important;} .shopdetail .fw-dconsumer{font-size:12px !important;} /* ── 옵션 ── */ .shopdetail .fw-mopthead{height:38px;line-height:38px;font-size:12.5px;padding:0 14px;} .shopdetail .fw-mopthead em{font-size:11px;} .shopdetail .shopdetailInfoSelect select{height:38px !important;font-size:12px !important;} .shopdetail .shopdetailInfoSelect option{font-size:12px;} .shopdetail .shopdetailInfoSelect p{font-size:12px;} /* 고른 옵션 줄(멀티옵션박스)·수량 칸 */ .shopdetail .MK_optAddWrap, .shopdetail .MK_optAddWrap .MK_inner-opt-cm li, .shopdetail #MK_innerOptWrap{font-size:12px !important;} .shopdetail .fw-mqty a,.shopdetail .fw-mqty input{font-size:12px !important;} /* 총 상품 금액 */ .shopdetail #MK_innerOptTotal,.shopdetail .shopdetailTotal{font-size:12px !important;} .shopdetail #MK_innerOptTotal .MK_total, .shopdetail #MK_innerOptTotal strong, .shopdetail .shopdetailTotal em{font-size:16px !important;} /* ── 고정 구매바 ── */ .shopdetail .buy_on a{height:46px !important;font-size:13.5px !important;border-radius:12px;} /* ── 하단 ── */ .shopdetail .fw-mtabs a{font-size:13.5px;height:44px;} .shopdetail .fw-mtabs a i{font-size:11px;} .shopdetail .shopdetailItem h3.btn_toggle{height:48px;font-size:13px;} .shopdetail .shopdetailItem .shopdetailNotifyInfo dt, .shopdetail .shopdetailItem .shopdetailNotifyInfo dd, .shopdetail .shopdetailItem .detail-common-info, .shopdetail .shopdetailItem .detail-common-info dt{font-size:12.5px;} .shopdetail .fw-mwarn{font-size:12px;} #related_product_tk > h3{font-size:14px;} #related_product_tk .list_shoppingRelationItem1x .listName{font-size:12px;} #related_product_tk .list_shoppingRelationItem1x .listPrice{font-size:12.5px;} #related_product_tk .list_shoppingRelationItem1x .listSale{font-size:11.5px;} #related_product_tk .btn_Black{height:44px;line-height:44px;font-size:13.5px;} /* ========================================================================== FISHWIZ v2 20a — 옵션선택 바텀시트 (2026-08-06 밤 · 피그마 확정) 상세를 읽다가 아래 구매바를 눌렀는데 옵션을 아직 안 골랐으면, 옵션 영역(option_area)을 그 자리에서 떼지 않고 '고정 위치'로만 바꿔 아래에서 올라온 둥근 판처럼 보여준다. 메이크샵 배선은 그대로. ========================================================================== */ .fw-mbackdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45); z-index:70;display:none;} body.fw-sheet-open .fw-mbackdrop{display:block;} body.fw-sheet-open .shopdetail .option_area{ position:fixed;left:0;right:0;bottom:64px;z-index:75;background:#fff; border-radius:18px 18px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.18); padding:8px 15px 12px;max-height:65vh;overflow:auto;-webkit-overflow-scrolling:touch;} body.fw-sheet-open .shopdetail .option_area::before{content:'';display:block; width:44px;height:4px;border-radius:2px;background:#d9dde2;margin:2px auto 10px;} /* 구매바는 시트·어둠막보다 위 */ body.fw-sheet-open .shopdetail .buy_on{z-index:80 !important;} /* ========================================================================== FISHWIZ v2 21a — 상세에서는 하단 탭바 숨김 + 시트 정리 (2026-08-06 밤) ① 상세 화면에는 구매바가 있으므로 전 페이지 공용 하단 탭바(#tabbar)를 숨긴다. (무신사 방식 — 웹·앱 모두 겹침이 사라진다) ② 바텀시트 안에서는 발송·배송·원산지 묶음(fw-mdeli)을 감춘다 — 옵션만 남긴다. ========================================================================== */ #tabbar{display:none !important;} body{padding-bottom:0 !important;} body.fw-sheet-open .shopdetail .option_area .fw-mdeli{display:none !important;} /* ========================================================================== FISHWIZ v2 22a — 구매바·시트 마무리 (2026-08-06 밤 · 피드백 반영) ① 버튼 글자가 위에 붙던 문제 — 옛 규칙(inline-block·padding)이 더 셌다. 같은 무게의 선택자로 가운데 정렬을 다시 박는다. ② 위시 버튼(하트 SVG) — 세 버튼 한 줄. ③ 시트가 하단 구역(탭바 z80) 뒤로 가던 문제 — 층수 재정리. ========================================================================== */ /* ① 글자 세로 가운데 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on a{ display:flex !important;align-items:center !important;justify-content:center !important; padding:0 !important;line-height:1 !important;height:46px !important; border-radius:12px;box-sizing:border-box;} /* ② 위시 버튼 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on a.wish{ flex:0 0 46px !important;width:46px !important;min-width:0; background:#fff !important;color:#8a9099 !important; border:1.5px solid #dfe3e8 !important;} .shopdetail .buy_on a.wish svg{display:block;} /* ③ 층수 : 어둠막 85 < 시트 90 < 구매바 95 (하단 탭바 z80 을 전부 이긴다) */ .fw-mbackdrop{z-index:85;} body.fw-sheet-open .shopdetail .option_area{z-index:90;} body.fw-sheet-open .shopdetail .buy_on{z-index:95 !important;} /* ========================================================================== FISHWIZ v2 23a — 옵션은 시트 전용 (2026-08-06 밤 · 피그마 댓글 반영) 상단 인라인 옵션 상자는 바텀시트와 중복 → 옵션 있는 상품(body.fw-optsheet)은 화면 흐름에서 옵션 영역을 감추고, 시트를 열 때만 보여준다. 발송·배송 묶음(fw-mdeli)과 구매바(buy_on)는 상단에 남긴다. 옵션 없는 상품은 지금 그대로(수량 칸 인라인). ========================================================================== */ body.fw-optsheet .shopdetail .option_area > *{display:none !important;} body.fw-optsheet .shopdetail .option_area > .fw-mdeli{display:block !important;} body.fw-optsheet .shopdetail .option_area > .buy_on{display:flex !important;} body.fw-optsheet.fw-sheet-open .shopdetail .option_area > *{display:block !important;} body.fw-optsheet.fw-sheet-open .shopdetail .option_area > .fw-mdeli{display:none !important;} body.fw-optsheet.fw-sheet-open .shopdetail .option_area > .buy_on{display:flex !important;} body.fw-optsheet.fw-sheet-open .shopdetail .option_area > .fixed-btn{display:none !important;} /* ========================================================================== FISHWIZ v2 26a — 구매 동선 일원화 + 네이버페이 고정줄 (2026-08-07) 네이버페이 정책 : 상세에 Npay 구매·찜 노출 필수 → 빼지 않고 자리만 올린다. ① 페이지 안 장바구니·구매·위시 버튼 숨김 (고정바에 다 있음 · 품절 문구는 남김) ② 네이버페이 묶음 : DOM 그대로, 화면 위치만 고정바 바로 위 흰 줄로. 시트가 열리면 어둠막 뒤로 내려가 흐려진다 (버튼 안은 네이버가 그려서 시트 연결을 못 붙이므로, 열림 중에는 누르지 못하게 하는 것이 맞다). ========================================================================== */ /* ① 페이지 안 구매 버튼 숨김 */ .shopdetail .shopdetailButtonTop a.cart, .shopdetail .shopdetailButtonTop a.buy, .shopdetail .shopdetailButtonTop a.wish{display:none !important;} /* 옛 SNS 공유 gif 줄도 같이 정리 */ .shopdetail .shopdetailButtonBottom{display:none !important;} /* ② 네이버페이 고정줄 — 위젯은 안 옮기고 컨테이너 위치만 고정 */ body.fw-npay .shopdetail .naver-checkout{ position:fixed;left:0;right:0;bottom:66px;z-index:59; margin:0;padding:8px 12px 6px;background:#fff;text-align:center; box-shadow:0 -8px 18px -12px rgba(20,24,29,.16);} /* 네이버 줄 높이만큼 본문 바닥 여유 */ body.fw-npay .shopdetail .shopdetailItem{padding-bottom:70px;} /* ========================================================================== FISHWIZ v2 28a — 품절 상품 표시 (2026-08-07) 품절(또는 구매 불가) 상품은 고정바의 장바구니·구매 버튼 대신 회색 '품절된 상품입니다' 막대가 나온다. 하트(위시)는 남긴다. ========================================================================== */ body.fw-soldout .shopdetail .buy_on a:not(.wish){display:none !important;} .shopdetail .fw-soldbar{flex:1 1 auto;display:flex;align-items:center;justify-content:center; height:46px;border-radius:12px;background:#eef1f4;color:#9aa0a8; font-size:13.5px;font-weight:700;} /* 토요일·휴무일 발송 문구 (31단계) */ .shopdetail .today-delivery .icon.fw-mclosed{background:#eef1f4 !important;color:#7d848c !important;} /* ── 뒤로 단추 자리 (2026-08-11) ───────────────────────────────────────── 브레드크럼 줄 왼쪽에 놓는다. 줄을 가로로 만들어 단추와 경로가 나란히 오게 한다. 단추 모양 자체는 header.1.css 의 공통 부품(.fw-back)이 그린다. */ #contents .shopdetail .page_location {display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 16px 0;} #contents .shopdetail .page_location ol {flex:1; min-width:0;} /* ══════════════════════════════════════════════════════════════ 추가 구성 상품 — 부품표대로 다시 잡음 (2026-08-15) ★ 자리를 옮긴 이유는 shopdetail.html 주석에 적어 두었다(옵션 상자 안이라 감춰지고 있었다). ★ 이번에 고친 것 두 가지 ① 화면 폭을 넘던 것 — 상자마다 box-sizing 과 min-width:0 을 주고 글자·셀렉트가 카드 밖으로 못 나가게 막았다. ② 「(조건)배송」·「지역별」 링크가 깨져 있던 것 — 주소가 `[removed]alert(...)` 였다. `javascript:` 가 어딘가에서 지워진 채 저장돼 있었다. 두 줄 다 없앴다. 부품표에 「alert() 금지」 가 있고, 배송 조건은 아래 배송정보 칸에 이미 있다. ★ 부품표 값 가장자리 16 · 섹션 위 32 · 제목 16 Bold · 제목과 내용 사이 16 카드 선 1px #DFE3E8 · 모서리 12 · 안쪽 12 · 카드 사이 12 썸네일 72 · 모서리 10 · 흰 배경 contain 상품명 13.5 · 정가 11 취소선 · 판매가 14 Bold · 적립 10.5 #8A7207 입력칸(셀렉트) 44 / 10 / 12 / 13.5 · 작은 버튼 34 · 모서리 8 ══════════════════════════════════════════════════════════════ */ .shopdetail .fw-mextra{padding:32px 16px 0;box-sizing:border-box;max-width:100%;overflow:hidden;} .shopdetail .fw-mextra .fw-metit{margin:0 0 16px;font-size:16px;font-weight:800; color:#14181D;line-height:1.3;letter-spacing:-.3px;} .shopdetail .fw-mextra .fw-mecard{display:flex;gap:12px;align-items:flex-start; box-sizing:border-box;width:100%;max-width:100%; border:1px solid #DFE3E8;border-radius:12px;padding:12px;margin:0 0 12px;background:#fff;} .shopdetail .fw-mextra .fw-methumb{flex:0 0 72px;width:72px;} .shopdetail .fw-mextra .fw-methumb img{width:72px;height:72px;object-fit:contain; background:#fff;border-radius:10px;display:block;} .shopdetail .fw-mextra .fw-meinfo{flex:1 1 0;min-width:0;} .shopdetail .fw-mextra .fw-mename{margin:0;font-size:13.5px;font-weight:500;line-height:1.35;color:#14181D; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;} .shopdetail .fw-mextra .fw-meprice{margin:6px 0 0;font-size:14px;font-weight:800;color:#14181D;line-height:1.3;} .shopdetail .fw-mextra .fw-meprice del{margin-right:6px;font-size:11px;font-weight:400;color:#B3B9C0;} .shopdetail .fw-mextra .fw-meprice em{font-style:normal;font-size:14px;font-weight:800;color:#14181D;} .shopdetail .fw-mextra .fw-meprice .rep{font-size:12.5px;font-weight:500;color:#41474E;} .shopdetail .fw-mextra .fw-mersv{margin:4px 0 0;font-size:10.5px;font-weight:500;color:#8A7207;} .shopdetail .fw-mextra .fw-meopt-tit{margin:10px 0 4px;font-size:12px;font-weight:700;color:#8A9099;line-height:1.2;} .shopdetail .fw-mextra .fw-meopt{margin:0;} .shopdetail .fw-mextra .fw-meopt select, .shopdetail .fw-mextra select{box-sizing:border-box;width:100%;max-width:100%;height:44px;padding:0 12px; border:1px solid #DFE3E8;border-radius:10px;background:#fff; font-size:13.5px;color:#14181D;-webkit-appearance:none;appearance:none;} .shopdetail .fw-mextra select:focus{border-color:#14181D;border-width:1.5px;outline:none;} .shopdetail .fw-mextra .fw-medone{margin:8px 0 0;} .shopdetail .fw-mextra .fw-medone a{display:inline-flex;align-items:center;justify-content:center; box-sizing:border-box;height:34px;padding:0 14px;border:1px solid #14181D;border-radius:8px; background:#fff;color:#14181D;font-size:12.5px;font-weight:700;text-decoration:none;} /* ══════════════════════════════════════════════════════════════ 2026-08-15 · 겹침 순서를 부품표대로 바로잡음 부품표 : 시트·팝업 200 · 하단 고정 바 120 · 헤더 100 · 그 외 0 그런데 고정 구매바가 60 이라 상세정보·문의·리뷰 탭(sticky 80)과 메이크샵 옵션 단추(101) 밑으로 묻히고 있었다(크롬으로 재서 확인). ══════════════════════════════════════════════════════════════ */ .shopdetail .buy_on{z-index:120 !important;} body.fw-sheet-open .shopdetail .option_area{z-index:200 !important;} body.fw-sheet-open .shopdetail .buy_on{z-index:210 !important;} .shopdetail .fw-mbackdrop{z-index:190 !important;} .shopdetail .fw-mtabs{z-index:80;} /* ★ 2026-08-15 (2차) : 비회원에게 보이는 네이버페이 줄이 상세정보·문의·리뷰 탭 밑으로 묻히던 것 (사장님 지적). 재 보니 네이버 줄 59 · 탭 80 이었다. 네이버 줄은 구매바(120) 바로 밑인 119 로 올린다. 옵션 창을 열면 뒷막(190)에 가려진다. */ .shopdetail .naver-checkout{z-index:119 !important;} /* ── 다중이미지 — 옆으로 넘겨 보는 슬라이드 (2026-08-15 · 2차) ── 시안이 슬라이드였습니다. 메이크샵이 주는 것은 큰 그림 한 장 + 썸네일 표이고 썸네일은 마우스를 올려야 바뀌어 휴대폰에서는 쓸 수 없습니다. 그래서 shopdetail.js 가 큰 그림 줄(.fw-mslide)을 만들고 여기서 모양을 잡습니다. 한 칸이 화면 폭 그대로, 손을 떼면 딱 멈춥니다. 아래 점이 몇 번째인지 알려 줍니다. */ .shopdetail .fw-mslide{display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:0; margin:0; padding:0; list-style:none; scrollbar-width:none;} .shopdetail .fw-mslide::-webkit-scrollbar{display:none;} .shopdetail .fw-msl{flex:0 0 100%; width:100%; max-width:100%; margin:0; padding:0; scroll-snap-align:center;} .shopdetail .fw-msl img{width:100% !important; height:auto !important; max-width:100% !important; display:block; aspect-ratio:1/1; object-fit:contain; background:#fff;} .shopdetail .fw-mdots{display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 0 4px;} .shopdetail .fw-mdots i{display:block; width:6px; height:6px; border-radius:50%; background:#DFE3E8; transition:width .15s, background .15s;} .shopdetail .fw-mdots i.on{width:16px; border-radius:3px; background:#14181D;} /* BASIC css end */