/* 기본: body를 모바일 폭 컨테이너로 */ body.market-new { margin: 0 auto; background: #fff;} /* 큰 화면 양옆 배경 */ html:has(body.market-new) { background: #ffffff;} .market-new .main-wrap { display: flex; flex-direction: column; width: 100%;gap: 40px; padding-bottom: 50px; box-shadow: none;} .market-empty-text {padding: 20px 0; text-align: center; font-size: 14px; color: #999; letter-spacing: -0.75px;} .guide-wrap{gap: 0; padding-bottom: 0;background-color: #ffffff;} .market-new .beltBanner-close{right: 1%;} .market-new .footer .footer-corp-wrap{padding: 0 16px 50px;} .market-new .footer .footer-corp-wrap .corp-row{flex-direction: column;gap: 20px;} .market-new .footer .corp-cs-wrap .corp-cs{flex-direction: column;gap: 10px;} .market-new .v-line{width: 100%; height: 1px; display: block; background-color: #efefef;} .footer .footer-corp-wrap .corp-row .corp-info .tit{color: #555555;} .footer .service-support .family_link .link{max-width: none; flex: 1;} .footer .service-support .family_link .link>a span{font-size: 11px;} @media (min-width: 501px) { body.market-new .webHeader {display: none !important;} /* 모바일 헤더 계속 표시 */ body.market-new .mobile-header { display: flex; flex-direction: column;width: 100%; margin: 0 auto;} /* 하단 네비도 유지할 경우 */ body.market-new .bottom-bar { display: flex !important; width: 100%; left: 50%;right: auto; transform: translateX(-50%); } } .market-new .mobile-header .gdgnb_menu{padding: 0;} .market-new .mobile-header .gdgnb_menu .swiper .swiper-wrapper{gap: 0; justify-content: flex-start;} .market-new .mobile-header .gdgnb_menu .swiper .swiper-wrapper .swiper-slide{flex: 1;max-width: none;} /* pick */ .market-pick-section {padding-top: 20px; background: #fff;} .market-pick-section .market-more-row { display: flex; justify-content: flex-end; padding: 0 20px 16px;} .market-more-btn {display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; color: #999; letter-spacing: -0.75px; text-decoration: none;} .market-more-btn .view-icon{width: 16px; height: 16px;background: url("../../images/icon/arrow-next-icon.svg") 50% 50% no-repeat; background-size: contain;} .market-pick-swiper {padding-left: 20px;overflow: hidden;} .market-pick-swiper .swiper-wrapper {align-items: stretch;} .market-pick-swiper .swiper-slide {width: 180px;} /* card */ .market-pick-card { position: relative;display: block; width: 100%; height: 280px; border-radius: 12px; overflow: hidden; text-decoration: none; background-repeat: no-repeat; background-position: center top; background-size: cover;} .market-pick-card.orange { background-color: #fff1ea;} .market-pick-card.green { background-color: #edf8ef;} .market-pick-card.blue {background-color: #eef7ff;} .market-pick-card.orange .market-pick-text h2, .market-pick-card.orange .market-pick-text p, .market-pick-card.orange .market-pick-text span{color: #FF6B35;} .market-pick-card.green .market-pick-text h2,.market-pick-card.green .market-pick-text p,.market-pick-card.green .market-pick-text span { color: #00C955;} .market-pick-card.blue .market-pick-text h2,.market-pick-card.blue .market-pick-text p, .market-pick-card.blue .market-pick-text span {color: #28A4FF;} .market-pick-card .wish-btn{position: absolute;top: 10px; left: 10px;} .market-pick-text{width: 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding:20px 10px;gap: 3px;} .market-pick-text .title{display: flex;flex-direction: row; justify-content: space-between; align-items: center; min-width: 0;} .market-pick-text .title h2{flex: 1;min-width: 0;font-size: 1.2rem; letter-spacing: -0.75px; font-weight: 700;line-height: 1;overflow-wrap: anywhere;} .market-pick-text p {font-size: 13px; letter-spacing: -0.75px; line-height: 1.4; font-weight: 500; word-break: keep-all; overflow-wrap: anywhere; min-height: 40px;} .market-pick-card .market-pick-img{width: 30px;height: 30px; object-fit: contain;display: none;} .market-pick-card .market-tags{display: flex;flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 3px; min-width: 0;} .market-pick-card .market-tags span{display: flex; flex-direction: row; align-items: center; justify-content: center; max-width: 100%; padding:6px; border-radius: 30px; background-color: #fff; font-size: 12px; letter-spacing: -0.75px; font-weight: 500; line-height: 1; overflow-wrap: anywhere;} /* heart */ .market-pick-card .wish-btn {position: absolute;top: 10px;left: 10px; z-index: 5; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.75); display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.3s;} .market-pick-card .wish-btn .heart { width: 14px; height: 14px;display: block; background: url('../../images/icon/heart_off_icon.svg') no-repeat center / contain; transition: all 0.3s;} .market-pick-card .wish-btn.active .heart{ width: 14px; height: 14px;display: block; background: url('../../images/icon/heart_on_icon.svg') no-repeat center / contain; } /* product section - 간편식 */ .market-product-section { position: relative; margin-left: 20px; padding-bottom: 20px; border-radius: 12px 0 0 12px; background: #DFE4F9; overflow: hidden;} .market-product-head {position: relative; display: flex;justify-content: space-between;align-items: flex-start;padding: 20px 16px 0px 20px;} .market-product-head .title{display: flex;flex-direction: column; align-items: flex-start; gap: 10px; flex: 1;} .market-product-head .title h2{flex: 1;font-size: 1.2rem; letter-spacing: -0.75px; font-weight: 700;line-height: 1;color: #2F57F8;} .market-product-head .title p{font-size: 13px; letter-spacing: -0.75px; line-height: 1.4; font-weight: 500; color: #2F57F8;} .market-product-head .title .market-tags{display: flex;flex-direction: row; align-items: center; justify-content: flex-start; gap: 3px;} .market-product-head .title .market-tags span{display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 2px 6px; border-radius: 30px; background-color: #fff; font-size: 12px; letter-spacing: -0.75px; font-weight: 500; line-height: 1; color: #2F57F8;} .market-product-head img{width: 54px; object-fit: contain; display: none;} .market-product-section .market-more-row { display: flex; justify-content: flex-end; padding-bottom: 20px;padding-right: 16px;} .market-product-swiper { overflow: hidden;padding-right: 0;padding-left: 20px;} .market-product-swiper .swiper-wrapper { align-items: stretch;} .market-product-swiper .swiper-slide { width: 165px;} /* 상품 카드 */ .market-product-card {display: flex; width: 100%;min-width: 0; text-decoration: none; color: inherit; flex-direction: column; gap: 12px;} /* 상품 이미지 */ .market-product-thumb { position: relative; width: 100%; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #fff;} .market-product-thumb img {display: block; width: 100%; height: 100%; object-fit: cover;} /* 장바구니 버튼 */ .market-product-thumb .cart-btn { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center;} .market-product-thumb .cart-btn i { width: 20px; height: 20px; display: block; background: url("../../images/main/basket_icon.svg") center / contain no-repeat;filter: brightness(2);} /* 상품 정보 */ .market-product-info{width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;} .market-product-info h3{width: 100%;font-size: 14px;letter-spacing: -0.75px; color: #333333; line-height: 1.4;font-weight: 700;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .market-product-info p{width: 100%;font-size: 12px;letter-spacing: -0.75px; color: #333333; line-height: 1.4;font-weight: 400;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .market-price{display: flex; flex-direction: row; align-items: flex-end; gap: 2px;} .market-price span{font-size: 11px; font-weight: 600; color: #888;} .market-price strong{color: #1A1A2E; font-size: 16px; font-weight: 600;} .market-price del{font-weight: 400;font-size: 11px; color: #1A1A2E;} /* 별점 */ .market-product-info .product-rating-wrap { display: flex; align-items: center; gap: 5px; } .market-product-info .product-rating-wrap .rating-icon { display: flex; align-items: center; gap: 2px; } .market-product-info .product-rating-wrap .rating-icon i { font-size: 16px; color: #23b16c; } .market-product-info .product-rating-wrap .rating-score, .market-product-info .product-rating-wrap .review-count { font-size: 13px; color: #666; font-weight: 500; } @media only screen and (max-width: 720px){ .market-product-head .title{gap: 10px !important;} } /* 골라담기 */ .market-pick-detail-wrap{ display: flex; flex-direction: column; width: 100%; min-height: 100%;gap: 40px; padding:104px 0 180px; box-shadow: none;} /* 바텀시트·액션바 스타일 → assets/css/components/product-bottom-sheet.css */ body.sheet-open { overflow: hidden;} .market-pick-detail-wrap .market-detail-tabs {position: sticky; top: 0; z-index: 30; display: flex; height: 52px; background: #fff; border-bottom: 1px solid #eee;} .market-pick-detail-wrap .tab-btn { flex: 1; border: 0; background: #fff; font-size: 14px; font-weight: 500; color: #666; position: relative;} .market-pick-detail-wrap .tab-btn.active { color: #23b16c;font-weight: 700;} .market-pick-detail-wrap .tab-btn.active::after {content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: #23b16c;} .market-pick-detail-wrap .tab-panel { display: none;} .market-pick-detail-wrap .tab-panel.active { display: flex;flex-direction: column;} /* 골라담기 상세탭 */ .market-pick-header{position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);} .market-pick-header .btn-back.icon-back .icon-bg{width: 20px; height: 20px; display: block; background: url("../../images/icon/back-icon.svg") 50% 50% / contain no-repeat;} .market-pick-tabs{width: 100%;position: static; background: #fff; border-bottom: 1px solid #eee; height: 50px; box-shadow: none; display: flex; flex-direction: row; overflow: hidden;} .market-pick-tabs .tab-btn { flex: 1; width: 100%; height: 100%; font-size: 16px; font-weight: 500; color: #333; cursor: pointer; transition: 0.2s; border: none; border-bottom: 1px solid #eee; border-radius: 0; background: 0 0;} .market-pick-tabs .tab-btn.active{color: #23b16c; border-color: #23b16c; border-width: 2px;} .market-pick-detail-head{width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px;} .market-pick-detail-head h2{font-size: 24px; letter-spacing: -0.75px; color: #000; line-height: 1.4;} .market-pick-detail-head p{color: #888888; font-size: 16px;letter-spacing: -0.75px;} .market-pick-detail-head strong{font-size: 18px; letter-spacing: -0.75px; font-weight: 600; color: #23B16C;} .market-pick-detail-wrap .product-detail-banner { margin-bottom: 0; } .pick-product-list{width: 100%; display: flex; flex-direction: column; padding:0 16px 100px;gap: 14px;} .pick-product-list .pick-product-item{width: 100%; display: flex; flex-direction: row; justify-content: flex-start; border: 1px solid #EEEEEE; border-radius: 10px; overflow: hidden; background-color: #fff; align-items: stretch; padding: 16px;box-shadow: 0 0 4px #97979725;gap: 10px;} .pick-product-thumb{width: 95px; height: 95px; border-radius: 5px; overflow: hidden;} .pick-product-thumb img{width: 100%; height: 100%; object-fit: cover;aspect-ratio: 1 / 1;} .pick-product-info{flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: space-between;} .pick-product-info .pick-top-text{display: flex; flex-direction: column; align-items: flex-start; gap: 4px;} .pick-product-top{width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 10px;} .pick-product-top h3{font-size: 16px; letter-spacing: -0.75px; font-weight: 700; color: #333; line-height: 1.2; word-break: keep-all;/*display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis;*/ } .pick-product-info .pick-top-text p{font-size: 12px; letter-spacing: -0.75px; line-height: 1;color: #888;} .pick-product-top .view-btn{font-size: 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 4px 8px; color: #434343; background-color: #F5F5F5; border-radius: 50px; font-weight: 700; letter-spacing: -0.75px; min-width: 50px;} .pick-product-bottom{width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end;} .pick-price-wrap { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .pick-price-wrap .discount-rate { font-size: 18px; font-weight: 700; color: #ff3b30; } .pick-price-wrap .current-price { font-size: 18px; font-weight: 800; color: #23B16C; } .pick-price-wrap .original-price { font-size: 13px; color: #9ca3af; text-decoration: line-through; } .pick-product-bottom strong{font-size: 20px; font-weight: 700;color: #333;} .qty-control{height: 28px; display: flex; flex-direction: row; align-items: center; border: 1px solid #eee; background-color: #fff;} .qty-control .qty-minus, .qty-control .qty-plus{min-width: 28px; max-width: 28px; height: 28px;display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 14px;background-color: #FAFAFA;} .qty-control .qty-minus:disabled, .qty-control .qty-plus:disabled{color: #c9caca; cursor: not-allowed;} .qty-count{width: 28px; height: 28px; display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: center; border-radius: 0; font-weight: 500; line-height: 1; font-size: 14px;} .pick-product-top h3 .soldout-badge{display: inline-flex; align-items: center; justify-content: center; padding: 3px 6px; margin-left: 4px; background-color: #b5b5b6; border-radius: 3px; color: #fff; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -0.75px; vertical-align: middle;} .pick-product-list .pick-product-item.soldout .pick-product-top h3, .pick-product-list .pick-product-item.soldout .pick-price-wrap del, .pick-product-list .pick-product-item.soldout .pick-product-bottom strong, .pick-product-list .pick-product-item.soldout .pick-price-wrap .discount-rate, .pick-product-list .pick-product-item.soldout .pick-price-wrap .current-price{color: #c9caca;} /* 골라담기 상품 상세 모달 */ .market-pick-detail-modal .modal-content .modal-body{overflow-y: auto;} .market-pick-detail-modal .info-table { width: 100%; border-top: 1px solid #eee; margin-top: 15px; margin-bottom: 10px; border-collapse: collapse;} .market-pick-detail-modal .info-table th { background: #f9f9f9; padding: 10px; text-align: left; border-bottom: 1px solid #eee; font-size: 13px; color: #666; font-weight: normal;} .market-pick-detail-modal .info-table td { padding: 10px; border-bottom: 1px solid #eee; font-size: 13px; color: #333; line-height: 1.4;} .market-pick-detail-modal .info-row { display: none; } .market-pick-detail-modal .info-row.has-val { display: table-row; } .market-pick-detail-modal .modal-img-wrap {text-align: center; width: 100%; height: 100%; max-width: 370px; max-height: 370px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;} .market-pick-detail-modal .modal-img-wrap img { max-width: 100%; height: auto; border-radius: 8px; object-fit: contain;} .market-pick-detail-modal .modal-body { max-height: calc(80vh - 56px); overflow-y: auto; flex: none;} .market-pick-detail-modal .market-pick-detail-modal-body { padding: 20px 20px 30px 20px;} /* 골라담기 수정 260715 */ .market-pick-mobile-visual{width: 100%;padding-inline: 10px;} .market-pick-mobile-visual img{width: 100%;} /* 모바일 상품정보: 웹 골라담기 product-info-section과 동일 */ .market-pick-page .market-pick-mobile-info{ width: 100%; padding: 0 10px 20px; gap: 20px; display: flex; flex-direction: column;} .market-pick-page .market-pick-mobile-info .product-info{ width: 100%;display: flex;flex-direction: column;gap: 16px;} .market-pick-page .market-pick-mobile-info .rating-section .review-count.market-pick-review-link{ border: 0; background: transparent; padding: 0; cursor: pointer; color: #333; font-size: 13px;font-weight: 600; letter-spacing: -0.75px;line-height: 1;} .market-pick-page .market-pick-mobile-info .donation-benefit .best-price-detail{ width: 100%;} .market-pick-page .market-pick-mobile-info .market-pick-pc-delivery-policy{ margin-top: 8px; } .market-pick-page .market-pick-mobile-info .market-pick-pc-delivery-policy .market-pick-pc-policy-item .label{ min-width: 88px; max-width: 88px; } .market-pick-page .market-pick-mobile-info .market-pick-pc-delivery-policy .value{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } @media (max-width: 768px) { .market-pick-detail-modal .modal-content { width: 95%; max-height: 90vh;} .market-pick-detail-modal .modal-body { max-height: calc(90vh - 56px); } .market-pick-detail-modal .info-table th { width: 85px; padding: 8px;font-size: 12px;} .market-pick-detail-modal .info-table td { padding: 8px;font-size: 12px; } .market-pick-detail-modal .market-pick-detail-modal-body { padding: 15px 15px 25px 15px;} .market-pick-mobile-info .seller-info{display: none;} .market-pick-detail-wrap .market-tab-content .tab-panel{gap: 20px;} } /*마켓 리뷰 - 모바일 페이지만 있을 경우 260616- 추후 수정 */ .market-pick-detail-wrap .review-item { flex-direction: column; gap: 20px; padding: 0 0 30px 0;} .market-pick-detail-wrap .review-item .review-body .review-images{display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; width: 100%;} .market-pick-detail-wrap .review-item .review-body .review-images div{position: relative; width: 100%;aspect-ratio: 1 / 1;overflow: hidden;cursor: pointer;} .market-pick-detail-wrap .review-item .review-body .review-images div img{width: 100%; height: 100%; object-fit: cover;} /* pc 사이즈 골라담기 상세 */ .market-pick-pc .market-pick-pc-summary::before{content: '';width: 100%;height: 1px; background-color: #ddd; display: block;} .market-pick-pc .market-pick-pc-summary{display: flex; flex-direction: column;gap: 30px;} .market-pick-pc .summary-wrap{width: 100%; gap: 30px; display: flex; flex-direction: row; align-items: center; justify-content: space-between;} .market-pick-pc .summary-wrap .summary-row{ display: flex; flex-direction: row; align-items: center; justify-content: space-between;gap: 5px;} .market-pick-pc .summary-wrap .summary-row.qty{gap: 2px;} .market-pick-pc .summary-wrap .summary-row.qty strong{font-weight: 400; font-size: 20px; color: #23B16C;line-height: 1;} .market-pick-pc .summary-wrap .summary-row span{font-weight: 500; font-size: 20px; color: #333;line-height: 1; letter-spacing: -0.75px;} .market-pick-pc-summary .summary-row p, .market-pick-pc .summary-wrap .summary-row p{display: flex;flex-direction: row;gap: 0;} .market-pick-pc-summary .summary-row p strong, .market-pick-pc-summary .summary-row p span, .market-pick-pc .summary-wrap .summary-row p strong, .market-pick-pc .summary-wrap .summary-row p span{ font-size: 20px; font-weight: 700; color: #000; letter-spacing: -0.75px;gap: 0;} .market-pick-pc .donation-benefit{width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0;} .market-pick-pc .donation-benefit .best-price-toggle{width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 20px; border-radius: 12px; background-color: #1A8A54;} .market-pick-pc .donation-benefit .best-price-toggle.is-open{border-radius: 12px 12px 0 0;} .market-pick-pc .donation-benefit .best-price-detail{border: 1px solid #DEEDE6;border-radius: 0 0 12px 12px;} .market-pick-pc .donation-benefit .best-price-toggle .best-price-amount {color: #fff;font-size: 1rem;letter-spacing: -0.75px;display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 3px;} .market-pick-pc .donation-benefit .best-price-toggle .best-price-amount b{display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 3px 10px; background-color: #fffffff2; border-radius: 50px; font-size: 0.875rem;color: #1A8A54;} .market-pick-pc .donation-benefit .best-price-detail .best-price-list{padding: 0; gap: 0;} .market-pick-pc .donation-benefit .best-price-item { display: flex; align-items: center; gap: 0; padding: 10px 20px;} .market-pick-pc .donation-benefit .best-price-item .item-label {display: flex; align-items: center; flex: 1; min-width: 0;} .market-pick-pc .donation-benefit .best-price-item .item-label::after { content: ''; flex: 1; margin: 0 10px; border-bottom: 1px dotted #d9d9d9;} .market-pick-pc .donation-benefit .best-price-toggle .row{display: flex; flex-direction: row; align-items: center; gap: 3px; border: 1px solid #F1FAF730; padding: 6px 10px; border-radius: 50px; background-color: #F1FAF720;} .market-pick-pc .donation-benefit .best-price-toggle .best-price-label span{font-size: 12px; color: #fff;font-weight: 400;} .market-pick-pc .donation-benefit .best-price-detail .best-price-desc-item{padding: 0 20px; height: 45px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; border-radius: 0; border-top: 1px solid #DEEDE6; background-color: #F8FDF9; gap: 3px;} .market-pick-pc .donation-benefit .best-price-detail .best-price-desc-item i{font-size: 14px; color: #1A8A54;font-weight: 600;} .market-pick-pc .donation-benefit .best-price-detail .best-price-desc-item .coupon-desc{color: #888;} .market-pick-pc .donation-benefit .best-price-detail .best-price-desc-item .coupon-desc b{color:#1A8A54;} .market-pick-pc .donation-benefit .best-price-toggle .best-price-arrow{filter: brightness(10);} /* PC 주문 요약 (히어로·사이드바 공통) */ .market-pick-pc .market-pick-pc-summary .summary-row strong { font-size: 20px; font-weight: 700; color: #333; letter-spacing: -0.75px;line-height: 1; } .market-pick-pc .market-pick-pc-summary .summary-row.total strong { font-size: 24px; color: #23b16c; } .market-pick-pc .free-shipping-box { width: 100%; display: flex; flex-direction: column; gap: 10px; } .market-pick-pc .free-shipping-text { font-size: 13px; font-weight: 400; color: #666; letter-spacing: -0.75px; } .market-pick-pc .free-shipping-text strong { font-weight: 600; color: #222;font-size: 14px; } .market-pick-pc .free-shipping-text .free-shipping-em { font-weight: 600; color: #23b16c; font-size: 14px; } .market-pick-pc .free-shipping-chart { width: 100%; height: 10px; border-radius: 999px; background-color: #d9d9d9; overflow: hidden; } .market-pick-pc .free-shipping-chart span { display: block; width: 0; height: 100%; border-radius: 999px; background-color: #23b16c; transition: width 0.45s ease; } .market-pick-pc .free-shipping-guide { text-align: right; font-size: 13px; font-weight: 500; color: #777; letter-spacing: -0.75px;display: none; } .market-pick-pc .donation-box { display: flex; flex-direction: column; gap: 10px; background-color: #f0ffed; padding: 16px; border-radius: 8px; } .market-pick-pc .donation-row { display: flex; justify-content: space-between; align-items: center; } .market-pick-pc .donation-row span { font-size: 16px; color: #23b16c; font-weight: 700; } .market-pick-pc .donation-row strong { font-size: 13px; color: #23b16c; font-weight: 600; } .market-pick-pc .donation-box p { font-size: 14px; color: #888; font-weight: 500; } .market-pick-pc .donation-box b { color: #23b16c; } .action-btn:disabled { pointer-events: none; opacity: 0.5; cursor: not-allowed;} .market-pick-rating .stars i.empty { color: #d9d9d9;} .market-pick-pc-order { display: flex; flex-direction: column; gap: 20px; margin-top: 0;} .market-pick-pc-page .product-detail-tabs .tab-navigation.web-only { border-bottom: 1px solid #eee;} .market-pick-pc-page .tab-panel {scroll-margin-top: calc(var(--scroll-header-height, 0px) + 50px);} .market-pick-pc-body { display: grid; grid-template-columns: 1fr min(320px, 30%); gap: 30px; align-items: start;} .market-pick-pc-sidebar { position: sticky; top: calc(var(--scroll-header-height, 0px) + 60px); z-index: 5;} .market-pick-pc-sidebar-head {display: flex;align-items: center; justify-content: space-between;} .market-pick-pc-sidebar-head h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.75px; color: #222; line-height: 1.3;} .market-pick-pc-sidebar .all-remove-btn {font-size: 12px; color: #888; letter-spacing: -0.75px; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer;} .market-pick-pc-order-panel.is-sidebar-panel {display: flex;flex-direction: column; gap: 16px;} .market-pick-pc-order-panel.is-sidebar-panel .summary-wrap { display: flex; flex-direction: row; gap: 12px;} .market-pick-pc-order-panel.is-sidebar-panel .summary-row { display: flex; align-items: center; justify-content: space-between;} .market-pick-pc-order-panel.is-sidebar-panel .summary-row span { font-size: 20px; color: #666; letter-spacing: -0.75px;} .market-pick-pc-order-panel.is-sidebar-panel .summary-row strong {font-size: 20px; font-weight: 700; color: #333; letter-spacing: -0.75px;} .market-pick-pc-order-panel.is-sidebar-panel .summary-row.total strong { font-size: 24px; color: #23b16c;} .market-pick-pc-order-panel.is-sidebar-panel .donation-box {background: #F0FFED;border-radius: 8px; padding: 16px;} .market-pick-pc-order-panel.is-sidebar-panel .donation-row strong { color: #23b16c;} .market-pick-pc-order-panel .selected-products{gap: 0;;} .market-pick-pc-order-panel .selected-products .selected-item{margin-bottom: 10px;} .market-pick-pc-order .action-buttons { margin-top: 0;} .market-pick-pc-order .action-btn.market-pick-cart-btn:disabled { background-color: #fff; cursor: not-allowed;} .market-pick-pc-order .action-buttons .line-btn.cart { flex: 0 0 50px; } .market-pick-pc-order .action-buttons .action-btn.buy-now { flex: 1; } .market-pick-pc-order .action-btn.market-pick-pc-buy-btn:disabled { background-color: #ccc; cursor: not-allowed; } .market-pick-pc-hero-order {margin-top: 24px;} .market-pick-pc-hero-order .market-pick-pc-order-panel {display: flex; flex-direction: column; gap: 16px;} .market-pick-pc-pick-head { margin-bottom: 24px;} .market-pick-pc-pick-head h2 {font-size: 24px; font-weight: 700; letter-spacing: -0.75px; color: #333; line-height: 1.3;} .market-pick-pc-pick-head p { margin-top: 8px; font-size: 15px; color: #666; letter-spacing: -0.75px;} .market-pick-pc-list-col{max-width: 700px; width: 100%;} .market-pick-pc .pick-product-list.market-pick-pc-list { padding: 0;max-width: 700px;width: 100%;} .market-pick-dummy-card{width: 100%;} .market-pick-dummy-card img{display: block; width: 100%; max-width: 700px; height: auto;} .market-pick-pc-list-wrap { position: relative; max-height: 480px; overflow: hidden; padding-bottom: 20px;} .market-pick-pc-list-wrap::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; z-index: 30; height: 120px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 5%, #fff); pointer-events: none;} .market-pick-pc-list-wrap.is-expanded, .market-pick-pc-list-wrap.is-no-toggle { max-height: none; overflow: visible; padding-bottom: 0;} .market-pick-pc-list-wrap.is-expanded::before, .market-pick-pc-list-wrap.is-no-toggle::before { display: none;} .market-pick-pc-list-toggle { position: absolute; right: 0; bottom: 30px; left: 0; z-index: 50; padding: 5px;} .market-pick-pc-list-wrap.is-expanded .market-pick-pc-list-toggle { position: static; margin-top: 16px; padding: 0;} .market-pick-pc-list-wrap.is-no-toggle .market-pick-pc-list-toggle { display: none;} .market-pick-pc-list-toggle-btn { width: 100%; height: 60px; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 20px; gap: 10px; background-color: #fff; border-radius: 6px; border: 1px solid #eee; box-shadow: 0 12px 12px 0 rgb(0 0 0 / 16%); cursor: pointer; font-size: 15px; font-weight: 500; letter-spacing: -0.75px; color: #333;} .market-pick-pc-list-toggle-btn .btn-text { line-height: 1;} #detail > .market-pick-pc-product-specs { margin-top: 48px; padding-bottom: 60px; width: 100%;} .market-pick-pc-product-specs { display: flex; flex-direction: column; gap: 20px; } .market-pick-pc-product-specs h3 { color: #333; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.75px; margin: 0; } .market-pick-pc-product-specs .specs-table { width: 100%; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #eee; border-left: 1px solid #eee; } .market-pick-pc-product-specs .specs-table .spec-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; align-items: stretch; min-height: 52px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; } .market-pick-pc-product-specs .specs-table .spec-row span { display: flex; align-items: center; min-height: 52px; padding: 12px 16px; font-size: 13px; line-height: 1.4; letter-spacing: -0.75px; color: #333; word-break: keep-all; } .market-pick-pc-product-specs .specs-table .spec-row .spec-label { background-color: #fafafa; font-weight: 500; border-right: 1px solid #eee; } .market-pick-pc-product-specs .specs-table .spec-row .spec-value { background-color: #fff; word-break: break-word; } .market-pick-pc-list-empty {padding: 40px 0; text-align: center; color: #888; font-size: 15px;} /* 배송관련정보 */ .market-pick-pc-delivery-policy{width: 100%;border-top: 1px solid #ddd; display: flex; flex-direction: column; align-items: flex-start;} .market-pick-pc-delivery-policy .market-pick-pc-policy-item{width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; border-bottom: 1px solid #ddd; padding: 10px;} .market-pick-pc-delivery-policy .market-pick-pc-policy-item .label{min-width: 150px; max-width: 150px; width: 100%;} .market-pick-pc-delivery-policy .market-pick-pc-policy-item .value{flex: 1; width: 100%;} .market-pick-pc-delivery-policy .market-pick-pc-policy-item .label, .market-pick-pc-delivery-policy .market-pick-pc-policy-item .value span{font-size: 14px; line-height: 1; letter-spacing: -0.5px;} .market-pick-pc-delivery-policy .market-pick-pc-policy-item .label {color: #888;} .market-pick-pc-delivery-policy .market-pick-pc-policy-item .value span {color: #555;} @media only screen and (max-width: 1050px){ .market-pick-pc-page .product-detail-wrap{padding: 0 16px;} .market-pick-pc-body{grid-template-columns: 1fr min(320px, 35%);} .pick-product-info{gap: 10px;} .pick-product-list .pick-product-item.soldout .pick-price-wrap del, .pick-product-list .pick-product-item.soldout .pick-product-bottom strong, .pick-product-list .pick-product-item.soldout .pick-price-wrap .discount-rate, .pick-product-list .pick-product-item.soldout .pick-price-wrap .current-price{font-size: 18px;} .pick-price-wrap{flex-direction: column;gap: 2px;} } @media only screen and (max-width: 767px) { .market-pick-page .market-pick-mobile-detail-wrap { position: relative;width: 100%; background-color: #fff; padding: 30px 10px 10px; border-top: 5px solid #d9d9d9;} .market-pick-page .market-pick-mobile-detail-content { position: relative; max-height: 700px; overflow: hidden; transition: max-height 0.35s ease;} .market-pick-page .market-pick-mobile-detail-content::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; height: 180px;pointer-events: none; background: linear-gradient(to bottom, rgb(255 255 255 / 0%), #fff 85%);} .market-pick-page .market-pick-mobile-detail-wrap.is-expanded .market-pick-mobile-detail-content {max-height: none; overflow: visible;} .market-pick-page .market-pick-mobile-detail-wrap.is-expanded .market-pick-mobile-detail-content::after {display: none;} .market-pick-page .market-pick-mobile-detail-list {width: 100%; padding: 0;} .market-pick-page .market-pick-dummy-card { width: 100%;} .market-pick-page .market-pick-dummy-card img { display: block; width: 100%; height: auto;} .market-pick-page .market-pick-mobile-detail-toggle {position: relative;z-index: 10; padding: 0 16px 24px;margin-top: -70px;} .market-pick-page .market-pick-mobile-detail-wrap.is-expanded .market-pick-mobile-detail-toggle { margin-top: 16px;} .market-pick-page .market-pick-mobile-detail-toggle__button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #eee; border-radius: 6px; background-color: #fff; box-shadow: 0 8px 20px rgb(0 0 0 / 10%); color: #333; font-size: 15px; font-weight: 500;letter-spacing: -0.75px;} .market-pick-page .market-pick-mobile-detail-toggle__button .toggle-icon { transition: transform 0.25s ease;} } @media only screen and (max-width: 720px) { .market-pick-detail-wrap{padding-top: 10px;} } .market-pick-page .inquiry-section.web{display: none;} .market-pick-page .inquiry-section.mobile{display: flex; flex-direction: column; gap: 30px; padding: 16px;} .market-pick-page .review-section{padding: 0 16px 40px; gap: 20px;} .market-pick-page .review-write-title .title{display: none;} .market-pick-page .review-write-section.web{display: none !important;} /* 리뷰/문의 있을 때: 일반상세와 같이 탭 바로 아래 상단에 작성 버튼 노출 */ @media only screen and (max-width: 768px) { .market-pick-page .review-write-title { display: flex !important; flex-direction: column; width: 100%;align-items: stretch;} .market-pick-page .review-write-section.mobile, .market-pick-page .inquiry-write-section.mobile { display: flex !important; width: 100% !important; flex-shrink: 0; margin: 0;padding: 0;} .market-pick-page .review-write-section.mobile .btn-write-review, .market-pick-page .inquiry-write-section.mobile .btn-write-inquiry { display: flex !important; align-items: center; justify-content: center;width: 100%; min-height: 48px; height: 48px; visibility: visible;opacity: 1;} /* 리뷰/문의 탭은 액션바 숨김 → 과도한 하단 여백 제거 */ .market-pick-page #reviews.tab-panel.active, .market-pick-page #inquiry.tab-panel.active {padding-bottom: 40px;} .market-pick-tab-inner .review-section{padding-top: 100px;} .market-pick-tab-inner .inquiry-section.mobile{padding-top: 100px;} } /* 상세보기모달 */ .market-pick-detail-modal { display: none;} .market-pick-detail-modal.active {display: block;} .market-pick-detail-modal .modal-backdrop { position: fixed; inset: 0; z-index: 8888;background: rgba(0, 0, 0, 0.45);} .market-pick-detail-modal .modal-content {position: fixed; left: 50%; top: 50%; z-index: 8889; width: calc(100% - 40px); max-width: 460px; max-height: 80vh; transform: translate(-50%, -50%); background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;} .market-pick-detail-modal .modal-header {flex-shrink: 0; height: 56px; padding: 0 48px 0 20px;display: flex; align-items: center;border-bottom: 1px solid #eee;} .market-pick-detail-modal .modal-header h3 { margin: 0;font-size: 17px; font-weight: 800; color: #222; letter-spacing: -0.5px;} .market-pick-detail-modal .close-btn {position: absolute; top: 12px; right: 14px; width: 32px;height: 32px; border: 0; background: transparent; font-size: 20px; color: #333;} .market-pick-detail-modal .modal-body {flex: 1; min-height: 0; overflow-y: auto;} .market-pick-detail-modal-body img {display: block; width: 100%; height: auto;} body.modal-open { overflow: hidden;} body.market-pick-pc-page .market-pick-detail-modal .modal-content {max-width: 560px; max-height: 90vh;} body.market-pick-pc-page .market-pick-detail-modal .modal-body {flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;} body.market-pick-pc-page .market-pick-detail-modal-body {padding: 20px 20px 80px;} body.market-pick-pc-page .market-pick-detail-modal .modal-img-wrap {display: flex; justify-content: center; width: 100%; background: #f8f8f8; border-radius: 8px; overflow: hidden;} body.market-pick-pc-page .market-pick-detail-modal-body img {width: auto; max-width: 100%; max-height: 260px; height: auto; object-fit: contain;} body.market-pick-pc-page .market-pick-detail-modal .modal-product-info {padding-bottom: 32px;} body.market-pick-pc-page .market-pick-detail-modal .info-table {width: 100%; border-top: 1px solid #eee; margin-top: 15px; margin-bottom: 10px; border-collapse: collapse; table-layout: fixed;} body.market-pick-pc-page .market-pick-detail-modal .info-table th {width: 100px; background: #f9f9f9; padding: 10px; text-align: left; border-bottom: 1px solid #eee; font-size: 13px; color: #666; font-weight: normal; line-height: 1.4; word-break: keep-all;} body.market-pick-pc-page .market-pick-detail-modal .info-table td {padding: 10px; border-bottom: 1px solid #eee; font-size: 13px; color: #333; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere;} body.market-pick-pc-page .market-pick-detail-modal .info-row {display: none;} body.market-pick-pc-page .market-pick-detail-modal .info-row.has-val {display: table-row;} @media only screen and (max-width: 375px){ .market-new .main-wrap{box-shadow: none;padding-bottom: 180px;} .market-pick-detail-head h2{font-size: 20px;} .market-pick-detail-head p{font-size: 14px;} .pick-product-info .pick-top-text{gap: 2;} .pick-product-top{flex-direction: column-reverse;align-items: flex-start;gap: 5px;} .pick-product-top h3{font-size: 14px;} .pick-product-info .pick-top-text p{font-size: 10px;} .pick-product-bottom{flex-direction: column-reverse;gap: 10px;align-items: flex-start} .pick-price-wrap { gap: 4px; } .pick-price-wrap .discount-rate { font-size: 14px; } .pick-price-wrap .current-price { font-size: 16px; } .pick-price-wrap .original-price { font-size: 11px; } .pick-product-bottom strong{font-size: 16px;} .qty-control .qty-minus, .qty-control .qty-plus{height: 20px;max-width:20px;min-width: 20px;font-size: 12px;} .qty-control{height: 20px;} .qty-count{font-size: 12px;} } /* 웹화면 - 마켓 메인 PC */ @media only screen and (min-width: 768px) { body.market-new { max-width: none; } body.market-new .webHeader { display: block !important; } body.market-new .mobile-header { display: none !important; } body.market-new .bottom-bar { display: none !important; } .market-new .main-wrap { gap: 70px;} .market-pick-swiper {padding-left: 0; width: 100%; max-width: 1050px; margin: 0 auto;} .market-pick-swiper .swiper-slide { width: 330px; margin-right: 24px !important;} .market-pick-card { height: 510px; border-radius: 20px;} .market-pick-card .market-pick-img { width: 50px; height: 50px; font-size: 0;} .market-pick-text {padding: 16px 24px;} .market-pick-text .title h2 { font-size: 2rem; line-height: 1.2;} .market-pick-text p {font-size: 1.125rem; min-height: 50px; } .market-pick-card .market-tags { padding-top: 20px; } .market-pick-card .market-tags span { font-size: .875rem;padding: 7px 10px;} .market-product-section { width: 100%; max-width: 1050px; margin: 0 auto; border-radius: 20px; padding-bottom: 0;} .market-product-head { padding: 20px; align-items: flex-start; border-radius: 20px 20px 0 0;} .market-product-head .title { display: flex;flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; flex: none;} .market-product-head .title h2 {font-size: 2rem; font-weight: 800; line-height: 1.2; color: #2F57F8; width: 100%; flex: auto;} .market-product-head .title p { display: inline; margin: 0; font-size: 1rem; line-height: 1.4;} .market-product-head .title .market-tags { display: inline-flex; vertical-align: middle; gap: 6px;} .market-product-head .title .market-tags span { padding: 6px 12px; font-size: 0.875rem; border-radius: 50px;} .market-product-swiper { overflow: visible; padding: 0 20px 20px; border-radius: 0 0 20px 20px;} .market-product-swiper .swiper-wrapper { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; transform: none !important; width: 100% !important;} .market-product-swiper .swiper-slide {width: 100%;min-width: 0; margin-right: 0 !important; height: auto;} .market-product-swiper .swiper-slide:nth-child(n+5) { display: none;} .market-product-thumb { height: auto; aspect-ratio: 1 / 1; } .market-product-section .market-more-row { padding-right: 20px;} .market-product-info h3 {font-size: 1.05rem;} .market-price span, .market-price del {font-size: 0.7rem; } .market-price strong {font-size: 1rem;} .market-product-info p { font-size: 0.7rem; } .market-top-banner + .market-pick-section{padding-top: 0;} } @media only screen and (max-width: 768px) { .market-pick-page .inquiry-section.mobile .inquiry-write-section.mobile.top{padding: 0;} } /* 태블릿 패딩 */ @media (min-width: 768px) and (max-width: 1050px) { .market-pick-section { padding-inline: 16px; } .market-product-section { padding-inline: 16px; } } /* 모바일 배너 높이 */