/* 상품상세 */ #view-page {} /* 브레드크럼 + 공유버튼 영역 */ #view-page .breadcrumb.selection { padding: 12px 0; font-size: 0.75rem; overflow: visible; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 2px; } #view-page .breadcrumb.selection .select-direct-category { max-width: 100%; } /* product-image-slide */ #view-page .product-image-slide .swiper-container { position: relative; overflow: hidden; /* 핵심: 넘치는 부분을 잘라냄 */ width: 100%; aspect-ratio: 1 / 1; /* 상품 이미지 비율 - 정사각형 기준. 필요시 4/3, 3/4 등으로 조정 */ padding-bottom:0; } #view-page .product-image-slide .swiper-slide { position: relative; overflow: hidden; } #view-page .product-image-slide .swiper-slide img.thumb { display: block; width: 100%; height: 100%; object-fit: cover; /* 비율 유지하며 프레임을 꽉 채우고, 넘치는 부분은 잘림 */ border-radius: var(--slide-radius, 0px); } #view-page .product-image-slide.normal-slide .swiper-pagination-fraction {bottom:10px !important; right:10px !important;} /* 상품 동영상(유튜브) 슬라이드 */ #view-page .product-image-slide .video-slide {background:#000;} #view-page .product-image-slide .video-slide .video-frame {display:none; position:absolute; top:0; left:0; width:100%; height:100%;} #view-page .product-image-slide .video-slide .video-frame iframe {display:block; width:100%; height:100%; border:0;} #view-page .product-image-slide .video-slide.playing .video-frame {display:block;} #view-page .product-image-slide .video-slide.playing img.video-poster, #view-page .product-image-slide .video-slide.playing .video-play {display:none;} #view-page .product-image-slide .video-slide img.video-poster {object-fit:contain;} #view-page .product-image-slide .video-slide .video-play {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:3.5rem; line-height:1; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); pointer-events:none;} /* 터치 방패 */ #view-page .product-image-slide .video-slide .video-shield {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;} #view-page .product-image-slide .video-slide.playing .video-shield {display:block;} #view-page .product-image-slide .video-slide .video-shield i {position:absolute; left:10px; bottom:10px; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:1.1rem; line-height:34px; text-align:center;} /* 상품코드, 공유버튼 */ #view-page .share-area { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #view-page .share-area .code-copy-inline { flex: 1; min-width: 0; } #view-page .share-area .code-copy-inline .code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } #view-page .share-area .sns-share-inline { flex-shrink: 0; } #view-page .code-copy-inline {margin:10px 0 5px;} #view-page .code-copy-inline .code {padding:5px 10px; border-radius:3px; font-size:0.875rem; line-height:1; font-weight:500; color:#fff; background:rgba(0,0,0,0.5);} /* 상품코드 탭 복사: 탭 가능함을 커서로 표시 */ #view-page .code-copy-inline .code.code-copy {cursor:pointer;} #view-page .code-copy-inline .code.code-copy:active {background:rgba(0,0,0,0.75);} /* 공유 버튼 */ .sns-share-inline .btn-share-open { padding: 5px 8px; width:40px; height:40px; border: 1px solid #ddd; border-radius: 100px; background: #fff; color: #555; box-shadow:1px 1px 3px rgba(0,0,0,0.2); } .sns-share-inline .btn-share-open i { font-size: 1.2rem; } /* 바텀시트 (기본 숨김) */ .sns-share-sheet { display: none; position: fixed; inset: 0; z-index: 1000; } .sns-share-sheet.on { display: block; } .sns-share-dimmer { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .sns-share-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); background: #fff; border-radius: 16px 16px 0 0; animation: sns-sheet-up 0.25s ease-out; } @keyframes sns-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .sns-share-header { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 20px; font-size: 1rem; font-weight: 700; color: #111; } .sns-share-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 2em; color: #999; padding: 4px; } /* 아이콘 그리드 */ .sns-share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; margin-bottom: 20px; } .sns-share-grid a { display: flex; flex-direction: column; align-items: center; gap: 8px; } /* 초대장 공유 위젯과 동일 규격 — 폰트 아이콘(흰색) + 브랜드색 원형 배경 */ .sns-share-grid .sns-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #888; color: #fff; font-size: 20px; overflow: hidden; } /* 브랜드 이미지 아이콘(네이버/밴드 등 RemixIcon 미제공) — 자체 완결 원형이라 배경 제거. */ .sns-share-grid .sns-icon.img-brand { background: transparent; } .sns-share-grid .sns-icon img { width: 44px; height: 44px; object-fit: contain; } .sns-share-grid .sns-icon.kakao { background: #FEE500; color: #3C1E1E; } .sns-share-grid .sns-icon.naver { background: #03c75a; } .sns-share-grid .sns-icon.facebook { background: #3b5998; } .sns-share-grid .sns-icon.x { background: #000; } .sns-share-grid .sns-icon.naverband { background: #00c73c; } .sns-share-grid .sns-icon.link { background: #888; } .sns-share-grid .sns-label { font-size: 0.72rem; color: #555; white-space: nowrap; } /* URL 복사 영역 */ .sns-share-url { display: flex; gap: 8px; padding: 12px 14px; border-radius: 10px; background: #f7f7f7; } .sns-share-url input { flex: 1; min-width: 0; border: 0; background: none; font-size: 0.8125rem; color: #666; } .sns-share-url .btn-copy-url { flex-shrink: 0; padding: 5px 12px; border: 0; border-radius: 6px; background: #111; color: #fff; font-size: 0.75rem; font-weight: 600; } /* title-area */ #view-page .product-detail-info .title-area {position:relative; margin:0 0 0; padding: 12px 0 12px;} #view-page .product-detail-info .title-area h2 {margin:0; padding:5px 0 0; font-weight:700; color:#111; font-size:1.25rem; line-height: 1.4; } #view-page .product-detail-info .title-area p.summary { margin: 10px 0 0; padding: 11px 13px; background: #f7f8fa; border-radius: 8px; color: #666; font-size: 0.875rem; line-height: 1.6; word-break: keep-all; } /* detail-info */ #view-page .detail-info ul.price-area {position:relative; margin:0 0 20px; padding:0 5px 0; font-size:0;} #view-page .detail-info ul.price-area:before {content:''; display:block; margin:5px 0; border-bottom:0px solid #ddd;} #view-page .detail-info ul.price-area li {display:block; margin:0 0 5px; padding:0; font-size:1rem;} #view-page .detail-info ul.price-area li.price {margin-bottom:0; font-size:1.692rem; font-weight:700; color:#000; } #view-page .detail-info ul.price-area li.price.strike {text-decoration:line-through; font-size:1.385rem; font-weight:normal; color:#333;} #view-page .detail-info ul.price-area li.discount {margin-top:10px; font-size:1.25rem; font-weight:700; color:#000; } #view-page .detail-info ul.price-area li.price span.quantity {padding-left:0; font-size: 0.875rem ; font-weight:normal; color:#666;} #view-page .detail-info ul.price-area li.discount.percent {position:absolute; right:5px; bottom:0; height:26px; margin:0; padding:0 5px 1px 5px; font-size:1.143rem; line-height:1.6; font-weight:700; color:#fff; background:#f44336; border-left:0; border-radius:4px;} #view-page .detail-info ul.price-area li.discount.percent span {position:relative; top:-1px; font-size:0.9286rem;} #view-page .detail-info ul.price-area li.discount.percent:before { content:''; position:absolute; top:1px; left:-9px; width: 0; height: 0; border-top: 12px solid transparent; border-right: 10px solid #f44336; border-bottom: 12px solid transparent; } /* ── 콕쿠폰(다운로드 쿠폰) 영역 — 가격정보 아래, 총 합계금액 위 ── */ .download-coupon-area { margin: 20px 0 15px; display: flex; flex-direction: column; gap: 8px; } .download-coupon-area .coupon-area-title { font-size: 0.875rem; font-weight: 700; color: #333; margin-bottom: 2px; } .download-coupon-area .coupon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .download-coupon-area .coupon-item { display: flex; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; } /* 좌측 포인트 컬러바 */ .download-coupon-area .coupon-item::before { content: ''; width: 5px; align-self: stretch; background: var(--text-coupon-color); flex-shrink: 0; } .download-coupon-area .coupon-item.downloaded::before { background: #ccc; } .download-coupon-area .coupon-benefit { flex-shrink: 1; min-width: 120px; max-width: 120px; text-align: center; padding: 12px 8px; font-size: 1rem; font-weight: 800; color: var(--text-coupon-color); line-height: 1.15; letter-spacing:-0.02em; border-right: 1px solid #eee; } .download-coupon-area .coupon-benefit::after { content: '할인'; display: block; font-size: 0.8125rem; font-weight: 500; color: #999; margin-top: 2px; } .download-coupon-area .coupon-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; } .download-coupon-area .coupon-name { font-size: 0.875rem; font-weight: 600; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .download-coupon-area .coupon-desc { font-size: 0.8125rem; color: #999; line-height: 1.4; } .download-coupon-area .coupon-download-btn { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; outline: none; box-sizing: border-box; font-family: inherit; line-height: 1; flex-shrink: 0; margin: 0 14px; padding: 7px 14px; border: 1px solid var(--text-coupon-color); border-radius: 999px; background: #fff; color: var(--text-coupon-color); font-size: 0.8125rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; } .download-coupon-area .coupon-download-btn:hover {background:var(--text-coupon-color); color:#fff;} .download-coupon-area .coupon-download-btn.downloaded, .download-coupon-area .coupon-download-btn:disabled { border-color: #ddd; background: #f5f5f5; color: #aaa; cursor: default; } /* price-table */ #view-page .price-table-area {margin:0 0 0; padding:0 0 14px 0; overflow-x: visible; } #view-page .price-table-area .price-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } #view-page .price-table-area .price-info {margin:0; padding:0 0 10px; font-size:0.9375rem;} #view-page .price-table-area .price-info:after {content:''; display:block; clear:both;} #view-page .price-table-area .price-info .info {float:left;} #view-page .price-table-area .price-info .unit {float:right;} #view-page .detail-info table.price-table {width:100%; margin:0 0 10px; text-align:center; border:1px solid #ddd; border-top:0; background:#fff;} #view-page .detail-info table.price-table caption {padding:0 0 10px; font-size:1rem; font-weight:500; color:#333; text-align:left;} #view-page .detail-info table.price-table caption i {margin-right:0;} #view-page .detail-info table.price-table th, #view-page .detail-info table.price-table td {padding:7px 5px; border-left:1px solid #ddd;} #view-page .detail-info table.price-table th:first-child, #view-page .detail-info table.price-table td:first-child {border-left:0;} #view-page .detail-info table.price-table th {color:#333; border-top:1px solid #ddd; background:#f5f5f5;} #view-page .detail-info table.price-table td {border-top:1px solid #ddd; border-color:#ddd; } #view-page .detail-info .price-table-description {margin-top:10px; font-size:0.875rem;} #view-page .detail-info .price-table-description p {margin:0; padding:3px 0;} #view-page .price-table-area .price-info .info, #view-page .price-table-area .price-info .unit { font-size: 0.8125rem; } #view-page .detail-info table.price-table { min-width: 480px; font-size: 0.875rem; } #view-page .info-list { padding:8px 0 4px 0; border-top:1px solid #ddd; } #view-page .info-list .info-title { margin: 0 0 4px; padding: 14px 0 10px; font-size: 1rem; font-weight: 700; color: #111; } #view-page .info-list .info-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; } #view-page .info-list .info-row:last-child { border-bottom: 0; } #view-page .info-list .info-row .label { flex: 0 0 120px; width: 120px; font-size: 0.9375rem; color: #333; font-weight:600; padding-top: 1px; } #view-page .info-list .info-row .value { flex: 1; font-size: 0.9375rem; color: #222; font-weight: 400; line-height: 1.5; word-break: break-all; } #view-page .info-list .info-row .value.aligned.right { text-align:right; } #view-page .info-list .info-row .value p { margin: 0; } #view-page .info-list .info-row .consumer-price { color: #999; font-weight: 400; } #view-page .info-list .info-row .discount-rate { margin-left: 4px; color: #e20000; font-size: 0.875rem; } /* 특가 이벤트(기간한정 단일가) — PC 상세와 동일 규약 */ #view-page .info-list .info-row.special-sale .label { color: var(--point-color); } #view-page .info-list .info-row .special-sale-price { color: var(--point-color); font-size: 1.063rem; font-weight: 700; } #view-page .info-list .info-row .special-sale-badge { display: inline-block; margin-left: 5px; padding: 1px 7px; color: #fff; font-size: 0.75rem; font-weight: 600; background: var(--point-color); border-radius: 11px; vertical-align: middle; } #view-page .info-list .info-row .special-sale-term { display: block; margin-top: 3px; color: #999; font-size: 0.813rem; } #view-page .info-list .info-row .special-sale-timer { display: inline-block; margin-top: 3px; padding: 1px 8px; color: #e20000; font-size: 0.813rem; font-weight: 600; font-variant-numeric: tabular-nums; background: #fdeeee; border-radius: 3px; } #view-page .info-list .info-row .special-sale-timer.ended { color: #999; font-weight: 400; background: #f2f2f2; } /* 배송비 결제방법 드롭다운 */ #view-page .info-list .info-row select.deliveryPaymentType { width: 100%; max-width: 160px; margin-bottom: 6px; font-size: 0.875rem; } /* 옵션 섹션 - 라벨이 위, 입력창이 풀폭 아래 */ #options .option-section { margin-bottom: 20px; border-top:1px solid #ddd; } #options .option-section-title { margin: 10px 0 10px; font-size: 0.9375rem; font-weight: 700; color: #111; } #options .input-option, #options .option-field { margin-bottom: 12px; } #options .option-field:last-child { margin-bottom: 0; } /* 작성형 옵션 안내문구 (인쇄에 들어갈 문구를 입력해 주세요 같은 힌트) */ #options .input-option .input-name { margin: 0 0 6px; font-size: 0.8125rem; color: #888; } /* input, select 공통 높이/스타일 */ #options .input-option input[type="text"] {height:44px; font-size:1rem;} #options .option-field select.ui.dropdown { width: 100%; height: 44px; padding: 0 14px; font-size: 1rem; box-sizing: border-box; } #options .option-field input[type="text"]:focus, #options .option-field select.ui.dropdown:focus { border-color: #111; } #options .ui.dropdown, #options .ui.dropdown .menu > .item { font-size: 1rem !important; } /* 구매수량 안내 문구 */ #options .quantity-hint { margin: 6px 0 0; font-size: 0.75rem; color: #999; text-align: right; /* common.css 전역 `* { word-break:break-all }` 로 어절 중간이 잘리는 것 방지 */ word-break: keep-all; overflow-wrap: normal; } /* 조합형(다단) 옵션 — 이전 단계 미선택 시 다음 단계 비활성(1단계만 활성으로 시작) */ #options .option-field.option-step-disabled, #options .field.option-step-disabled { opacity: 0.45; pointer-events: none; } #options .option-field.option-step-disabled .ui.dropdown, #options .field.option-step-disabled .ui.dropdown { background: #f5f5f5; cursor: not-allowed; } /* 선택된 옵션 리스트 */ #options .option-selected ul { margin: 8px 0 0; padding: 0; list-style: none; } #options .option-selected ul:empty { margin: 0; } #options .option-selected li.options { display: flex; align-items: center; /* flex-start → center로 변경 */ justify-content: space-between; gap: 10px; padding: 12px; margin-bottom: 6px; border: 1px solid #eee; border-radius: 6px; background: #fafafa; } #options .option-selected li.options .name { flex: 1; min-width: 0; font-size: 0.9375rem; color: #333; line-height: 1.5; word-break: break-word; } #options .option-selected li.options .name .controll { margin-top: 6px; } #options .option-selected li.options .price { flex-shrink: 0; display: flex; align-items: center; gap: 6px; font-size: 0.9375rem; color: #111; font-weight: 600; white-space: nowrap; } #options .option-selected li.options .delete { background: none; border: 0; color: #bbb; font-size: 1.5rem; padding: 0; } #options .option-field.quantity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top:20px; } #options .option-field.quantity-row .option-section-title { margin: 0; flex-shrink: 0; font-size: 0.9375rem; font-weight: 700; color: #111; } #options .option-field.quantity-row .quantity-control { flex-shrink: 0; text-align: right; } #options .option-field.quantity-row .ui.right.labeled.input.quantity { display: flex; align-items: center; width: fit-content; margin-left: auto; } #options .option-field.quantity-row .ui.basic.label { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid #ddd; background: #fff; color: #444; font-size: 0.9375rem; cursor: pointer; box-sizing: border-box; } #options .option-field.quantity-row .ui.basic.label.minus { border-radius: 6px 0 0 6px; } #options .option-field.quantity-row .ui.basic.label.plus { border-radius: 0 6px 6px 0; } #options .option-field.quantity-row input { width: 70px !important; height: 40px; margin: 0; padding: 0; border: 1px solid #ddd; border-left: 0; border-right: 0; font-size: 0.9375rem; box-sizing: border-box; } /* total area */ #view-page .detail-info .total-price-area {overflow:hidden; margin:0 0 20px; padding:20px 0 0; border-top:1px solid #000;} #view-page .detail-info .total-price-area .total.text {float:left; display:block; width:30%; padding-top:0; color:#000; font-size:1.125rem; font-weight:400;} #view-page .detail-info .total-price-area .total.price {float:right; display:block; width:70%; text-align:right; color:#333; font-size:1.125rem; font-weight:400; letter-spacing:-0.05rem;} #view-page .detail-info .total-price-area .total.price .money {position:relative; width:auto; font-size:1.5rem; color:var(--text-total-price-color); font-weight:700; letter-spacing:-0.05rem; border:0; background:transparent; border-color:#fff; cursor:default;} #view-page .detail-info .total-price-area .total.price > span { font-weight:600; color:var(--text-total-price-color); font-size:1.5rem;} /* ===== 상세페이지 탭 메뉴 (detail-nav) ===== */ .detail-nav.main-detail-nav { position: sticky; top: var(--mobile-header-height, 0px); z-index: 190; margin:0 -16px; } .detail-nav.main-detail-nav ul { display: flex; list-style: none; justify-content:space-between; margin: 0; padding: 0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox 스크롤바 숨김 */ } .detail-nav.main-detail-nav ul::-webkit-scrollbar { display: none; } /* 크롬/사파리 스크롤바 숨김 */ .detail-nav.main-detail-nav ul li { flex:1 1 0; min-width: max-content; flex-shrink: 0; font-size: 1.143rem; text-align: center; } .detail-nav.main-detail-nav ul li a { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 12px 16px; font-size: 0.875rem; font-weight: 700; color: #111; position: relative; outline:none; white-space: nowrap; } .detail-nav.main-detail-nav ul li.on a { color: #222; font-weight: 700; } .detail-nav.main-detail-nav ul li.on a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #333; } .detail-nav.main-detail-nav.is-fixed { position: fixed; left: 0; right: 0; z-index: 190; } .detail-nav.main-detail-nav.is-stuck { box-shadow: 0 2px 8px rgba(0,0,0,.06); } /* fixed 전환 시 레이아웃 밀림 방지용 자리표시자 */ .detail-nav-placeholder { display: none; } .detail-nav-placeholder.show { display: block; } /* detail-additional (상세뷰 + 견적영역) */ #view-page .detail-additional {display:block;} #view-page .detail-additional .detail-view-area {flex:none;} #view-page .detail-additional .detail-view-area img {max-width:100%;} #view-page .detail-additional .detail-view-area section {} /* estimate-area */ #view-page .detail-additional .estimate-area { flex:none; margin: 30px 0 0; padding: 16px; border:1px solid #eee; border-radius: 10px; } #view-page .detail-additional .estimate-area > div { margin-bottom: 20px; } #view-page .detail-additional .estimate-area .description {padding-top:5px; font-size:0.8571rem; color:#777;} #view-page .detail-additional .estimate-area .button {width:100%;} #view-page .detail-additional .estimate-area h3 { font-size: 1.0625rem; } #view-page .detail-additional .estimate-area .ui.large.button { width: 100%; border-radius: 10px; padding: 15px 0;} /* 견적요청 / 시안요청 탭 */ #view-page .detail-additional .estimate-area .estimate-tabs {display:flex; margin:-16px -16px 16px; overflow:hidden; border-radius:10px 10px 0 0;} #view-page .detail-additional .estimate-area .estimate-tabs .estimate-tab {flex:1 1 50%; min-width:0; padding:13px 6px; font-size:0.9375rem; font-weight:600; color:#888; text-align:center; background:#f7f7f7; border-bottom:1px solid #eee; outline:none;} #view-page .detail-additional .estimate-area .estimate-tabs .estimate-tab + .estimate-tab {border-left:1px solid #eee;} #view-page .detail-additional .estimate-area .estimate-tabs .estimate-tab.on {color:#111; background:#fff; border-bottom-color:transparent; box-shadow:inset 0 3px 0 #111;} /* 첨부파일 — 첨부버튼은 전체폭(.button{width:100%}) 대신 자연폭, 썸네일은 64px 정사각 */ #view-page .detail-additional .estimate-area .estimate-file-field .button {width:auto !important;} #view-page .detail-additional .estimate-area .estimate-file-field .description {display:block;} /* 첨부버튼이 inline-block 이라 안내문구를 줄바꿈 */ #view-page .detail-additional .estimate-area .estimate-file-thumb {position:relative; display:inline-block; margin:4px 8px 4px 0; vertical-align:top;} #view-page .detail-additional .estimate-area .estimate-file-thumb img, #view-page .detail-additional .estimate-area .estimate-file-thumb .ext {width:64px; height:64px; border:1px solid #ddd; border-radius:6px;} #view-page .detail-additional .estimate-area .estimate-file-thumb img {object-fit:cover; display:block;} #view-page .detail-additional .estimate-area .estimate-file-thumb .ext {display:flex; align-items:center; justify-content:center; background:#f5f5f5; font-size:12px; font-weight:600; color:#999; text-transform:uppercase;} #view-page .detail-additional .estimate-area .estimate-file-thumb .estimate-file-del {position:absolute; top:-6px; right:-6px; width:18px; height:18px; line-height:16px; font-size:12px; color:#fff; text-align:center; text-decoration:none; background:#333; border-radius:50%;} #view-page .detail-additional .estimate-area .ui.sticky { position: static !important; top: auto !important; left: auto !important; width: auto !important; transform: none !important; } /* 견적 캡챠: 새로고침 버튼은 아이콘 폭 */ #view-page .detail-additional .estimate-area .estimate-captcha .inline.fields.captcha {display:flex; flex-wrap:nowrap; align-items:center; gap:6px; margin:0;} #view-page .detail-additional .estimate-area .estimate-captcha .inline.fields.captcha > .field {margin:0; padding:0;} #view-page .detail-additional .estimate-area .estimate-captcha .inline.fields.captcha > .field:first-child {flex:0 0 auto;} #view-page .detail-additional .estimate-area .estimate-captcha .inline.fields.captcha > .field + .field {flex:0 1 auto; min-width:0;} /* 입력은 남는폭을 채우지 않고 적당폭 유지(좁으면 축소) */ #view-page .detail-additional .estimate-area .estimate-captcha .ui.action.input {display:inline-flex; width:auto; max-width:100%;} #view-page .detail-additional .estimate-area .estimate-captcha .ui.action.input #captcha-image {flex:0 0 auto; width:auto; max-width:100%;} /* 캡차 이미지 자연폭(가로 늘림 금지) */ #view-page .detail-additional .estimate-area .estimate-captcha .ui.action.input .button {width:auto !important; flex:0 0 auto;} #view-page .detail-additional .estimate-area .estimate-captcha #captcha-key {width:130px; max-width:100%; min-width:0; box-sizing:border-box;} /* 적당한 고정폭 */ /* 견적요청 폼: 모바일에서 입력창+라벨이 부모 폭을 넘지 않도록 flex 기반으로 강제 */ .estimate-area .ui.right.labeled.input, .option-sheet .ui.right.labeled.input { display: flex; width: 100%; } .estimate-area .ui.right.labeled.input input, .option-sheet .ui.right.labeled.input input { flex: 1 1 auto; /* 남는 공간을 채우되, 부족하면 줄어듦 */ width: 100% !important; /* 기존에 박혀있을 px 고정값을 무력화 */ min-width: 0; /* flex 축소 허용 */ } .estimate-area .ui.right.labeled.input .ui.basic.label, .option-sheet .ui.right.labeled.input .ui.basic.label { flex: 0 0 auto; /* "개" 라벨은 고정폭 유지, 줄어들지 않음 */ white-space: nowrap; } #view-page #detail {word-break:break-word;} /* notification */ #view-page #detail .notification {margin:0 0 50px;} #view-page #detail .notification:after {content:''; display:block; clear:both;} /* border-top 제거 */ #view-page #detail .notification table.notification-table {width:100%; margin:0 0 20px; text-align:left; border-bottom:1px solid #eee; background:#fff;} #view-page #detail .notification table.notification-table caption i {margin-right:0;} #view-page #detail .notification table.notification-table tr:last-child th, #view-page #detail .notification table.notification-table tr:last-child td {border-bottom:0;} #view-page #detail .notification table.notification-table td:last-child {border-right:0;} /* product-relation-list */ #view-page .product-relation-list {margin:0 -16px;} #view-page .product-relation-list .common-title { margin:0 16px 14px; } #view-page .product-relation-list .common-title h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size:1.125rem; font-weight: 700; color: #111; } #view-page .product-relation-list .common-title h3 i { font-size: 1.125rem; line-height: 1; color: #111; } #view-page .product-relation-list .common-title .together-subtitle { margin: 0; font-size: 0.8125rem; color: #888; } #view-page .product-relation-list .product.list { margin-bottom:0px !important; } /* detail-view */ #view-page #detail .detail-view {margin-bottom:30px; word-break:break-word;} #view-page #review, #view-page #qna, #view-page #detail, #view-page #guide {padding-top:24px; padding-bottom:16px; word-break:break-word;} #view-page h3.view-section-title {font-size:1.125rem; font-weight:700; color:#111;} #view-page h3.view-section-title .sction-count {color:#000;} /* 상품상세 모바일 오버라이드 */ #view-page .container { padding: 0 16px; } /* 플로트 해제 → 세로 스택 */ #view-page .detail-image { position: static; left: auto; float: none; width: 100%; margin: 0 0 10px; } #view-page .detail-info { float: none; width: 100%; display: block; } /* 구매버튼 그룹 */ #view-page .detail-btn-area { padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; } /* 1단: 구매하기 / 장바구니 / 찜하기 */ #view-page .detail-btn-area .btn-row-primary { display: flex; gap: 8px; margin-bottom: 8px; display:none; } #view-page .detail-btn-area .btn-row-primary a { height: 48px; margin: 0; padding: 0; font-size: 1rem; font-weight: 600; color: #444; border: 1px solid #ccc; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } #view-page .detail-btn-area .btn-row-primary a.buy { flex: 2; color: var(--text-on-point); background: var(--point-color); border-color: var(--point-border-color); } #view-page .detail-btn-area .btn-row-primary a.buy:hover { background: var(--point-hover-color); } #view-page .detail-btn-area .btn-row-primary a.cart { flex: 2; } #view-page .detail-btn-area .btn-row-primary a.cart:hover { border-color:#111; } #view-page .detail-btn-area .btn-row-primary a.wish { flex: 0 0 48px; width: 48px; background:#fff; } #view-page .detail-btn-area .btn-row-primary a.wish .wish-icon.heart.icon { font-size: 1.125rem; margin: 0; } #view-page .detail-btn-area .btn-row-primary a.wish:hover { color: var(--point-color); } #view-page .detail-btn-area .btn-row-primary a.wish .wish-icon.heart.icon:not(.outline) { color: var(--point-color); } #view-page .detail-btn-area .btn-row-secondary { display: flex; gap: 8px; } #view-page .detail-btn-area .btn-row-secondary a { flex: 1; height: 40px; margin: 0; padding: 0; font-size: 0.875rem; font-weight:500; color: #444; border: 1px solid #ccc !important; background: #f6f6f6; border-radius: 6px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } #view-page .detail-btn-area .btn-row-secondary a:hover { background: #f1f1f1; color: #111; } /* 품절 */ #view-page .detail-btn-area a.soldout { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; font-size: 1rem; font-weight: 400; color: #aaa; background: #f7f7f7; border: 1px solid #ddd; border-radius: 6px; cursor: default; } /* 하단 고정 구매버튼 그룹 */ #view-page .detail-btn-area.fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; margin: 0; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #eee; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); } #view-page .detail-btn-area.fixed .btn-row-primary {display:flex; margin-bottom:0;} /* 고정 구매버튼 클릭시 출력되는 옵션시트 */ .option-sheet { display: none; position: fixed; inset: 0; z-index: 1100; } .option-sheet.on { display: block; } .option-sheet-dimmer { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .option-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; animation: option-sheet-up 0.25s ease-out; } @keyframes option-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .option-sheet-header { display: flex; align-items: center; justify-content: center; position: relative; padding: 16px 20px; font-size: 1rem; font-weight: 700; color: #111; border-bottom: 1px solid #f2f2f2; flex-shrink: 0; } .option-sheet-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 2rem; color: #999; padding: 4px; } .option-sheet-body { flex: 1; overflow-y: auto; padding: 16px 20px; -webkit-overflow-scrolling: touch; } .option-sheet-body .option-section {border-top:0 !important;} .option-sheet-footer { flex-shrink: 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #f2f2f2; } .option-sheet-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding-right:5px; } .option-sheet-total .label { font-size: 0.875rem; color: #666; } .option-sheet-total .value { font-size: 1.25rem; font-weight: 700; color: #e20000; } .option-sheet-actions { display: flex; gap: 8px; } .option-sheet-actions button { flex: 1; height: 48px; margin: 0; font-size: 0.9375rem; font-weight: 700; border-radius: 6px; border: 1px solid #ccc; background: #fff; color: #444; } .option-sheet-actions .option-sheet-cart { border: 1px solid #111; background: #fff; color: #444; } .option-sheet-actions .option-sheet-buy { color: var(--text-on-point); background: var(--point-color); border-color: var(--point-border-color); } .option-sheet-actions .option-sheet-buy:hover { background: var(--point-hover-color); color: var(--text-on-point); } /* 굿즈 시안 만들기: 모바일은 가로 꽉 채운 블록 버튼(전폭) */ #view-page .design-btn-area { display: block; margin: 14px 0 8px; text-align: center; } #view-page .design-btn-area a.btn-goods-designer { display: flex !important; width: 100% !important; box-sizing: border-box !important; align-items: center; justify-content: center; gap: 6px; margin: 0 !important; padding: 13px 30px !important; line-height: 1.2; white-space: normal; color: #fff !important; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; border: 0; border-radius: 5px; background: linear-gradient(135deg,#7b3ff2 0%,#c914df 100%); box-shadow: 0 3px 10px rgba(123,63,242,0.28); transition: filter .15s ease, box-shadow .15s ease; } #view-page .design-btn-area a.btn-goods-designer:hover { filter: brightness(1.06); box-shadow: 0 5px 14px rgba(123,63,242,0.38); } /* 관리자 전용 '상품 상세정보' 버튼 */ #view-page .detail-info a.btn-admin-info { margin-bottom: 14px; } /* 공급처 상품 모아보기(관리자 전용): 목록 공급처명과 같은 주황 톤 */ #view-page .detail-info a.btn-seller-search { margin-bottom: 14px; color: #e8590c !important; } #view-page .detail-info a.btn-seller-search:hover { color: #d9480f !important; } #view-page .detail-info a.btn-seller-search i { margin-right: 3px; font-size: 0.8125rem; vertical-align: -1px; } /* flex gap:6px 로 아이콘 간격을 주므로 i 의 우측 margin 은 0 (이중 간격 방지) */ #view-page .design-btn-area a.btn-goods-designer i { margin: 0; font-size: 1.15rem; vertical-align: middle; } /* 하단 바에 가리지 않도록 여백 */ #view-page { padding-bottom: 80px; } /* 제공고시/기본정보 테이블 → 라벨|값 2열 그리드 */ #view-page #detail .notification table.notification-table, #view-page #detail .notification table.notification-table tbody { display: block; width: 100%; } #view-page #detail .notification table.notification-table colgroup { display: none; } /* 데스크톱 col width 무력화 */ #view-page #detail .notification table.notification-table tr { display: grid; grid-template-columns: 33% 67%; border-top: 1px solid #f0f0f0; } #view-page #detail .notification table.notification-table th, #view-page #detail .notification table.notification-table td { display: block; width: auto; border-right: 1px solid #f2f2f2; border-bottom: 0; padding: 9px 12px; font-size: 0.8125rem; line-height: 1.5; word-break: break-word; } #view-page #detail .notification table.notification-table th { background: #fafafa; color: #555; font-weight: 600; } #view-page #detail .notification table.notification-table td { color: #222; } #view-page #detail .notification table.notification-table td:last-child { border-right: 0; } /* 주의안내 행: 내용이 길어 한 치수 작게(0.8125→0.75rem) */ #view-page #detail .notification table.notification-table tr.notification-caution td { font-size: 0.75rem; line-height: 1.6; color: #666; } /* 빈 항목 쌍은 접어 빈 줄 방지 */ #view-page #detail .notification table.notification-table th:empty, #view-page #detail .notification table.notification-table td:empty { padding: 0; border: 0; } /* 제공고시 caption 은 섹션 소제목으로 */ #view-page #detail .notification table.notification-table caption { display: block; padding: 4px 2px 10px; font-size: 0.9375rem; font-weight: 700; color: #111; text-align: left; } /* 관련상품 그리드(2열) */ #view-page #detail .product-relation-list .product.list.thumb ul.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 10px; padding: 0; } #view-page #detail .product-relation-list .product.list.thumb ul.grid li.item { margin: 0 !important; width: auto; } /* 상세 컨텐츠 이미지 풀폭 */ #view-page #detail .detail-view img { max-width: 100%; height: auto; } /* 탭 앵커 이동 시 sticky 헤더(50px) 밑으로 오도록 스크롤 여백(JS offset 수동계산 대체) */ #view-page #detail, #view-page #guide, #view-page #review, #view-page #qna { scroll-margin-top: 58px; } /* 상품상세 모바일 보정 */ /* [1] 네이버페이 버튼 */ #view-page .detail-info .detail-btn-area.naverpay-button-area { position: static; left: auto; right: auto; bottom: auto; z-index: auto; display: block; margin: 10px 0 8px; padding: 0; background: none; border-top: 0; box-shadow: none; } #view-page .detail-info .detail-btn-area.naverpay-button-area #naverpay-button { width: 100%; text-align:center;} /* [1-b] 간편결제 버튼(모바일): 네이버페이·카카오페이 세로 배치 + 가운데 정렬 */ /* 세로 간격은 gap(순서 무관) */ #view-page .detail-info .simple-pay-area {display:flex; flex-direction:column; align-items:center; gap:10px;} #view-page .detail-info .simple-pay-area .detail-btn-area.naverpay-button-area {width:100%;} #view-page .detail-info .simple-pay-area .kakaopay-button-area {width:100%; justify-content:center; margin-top:0;} #view-page .product-together-list {margin-top:20px;} /* ── AI 상품 요약 박스 (수량별 단가표 위) ── */ .ai-summary-box{position:relative; margin:14px 0 18px;padding:16px 18px;border:1px solid #e3e7f5;border-radius:12px;background:linear-gradient(180deg,#f6f8ff 0%,#fff 100%);} .ai-summary-head{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:#4a5bd0;margin-bottom:8px;padding-right:24px;} .ai-summary-head i{font-size:17px;line-height:1;} .ai-summary-body{font-size:14px;line-height:1.7;color:#333;word-break:keep-all;} .ai-summary-note{margin:10px 0 0;font-size:12px;color:#9aa0ad;line-height:1.5;} /* AI 요약 박스 — X(하루 닫기) 버튼 */ .ai-summary-close{position:absolute;top:9px;right:9px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:#9aa0ad;cursor:pointer;border-radius:50%;font-size:18px;line-height:1;padding:0;} .ai-summary-close:hover{background:#eceff7;color:#555;} /* AI 요약 접힘(펼치기 바) */ .ai-summary-open{display:none;width:100%;align-items:center;gap:6px;padding:10px 16px;margin:0;border:0;background:transparent;color:#4a5bd0;font-size:14px;font-weight:700;line-height:1;cursor:pointer;text-align:left;font-family:inherit;} .ai-summary-open i.ri-sparkling-2-fill{font-size:17px;} .ai-summary-open .ai-summary-chevron{margin-left:auto;font-size:18px;color:#9aa0ad;} .ai-summary-box.collapsed{padding:0;background:linear-gradient(180deg,#f6f8ff 0%,#f0f3ff 100%);} .ai-summary-box.collapsed .ai-summary-close, .ai-summary-box.collapsed .ai-summary-head, .ai-summary-box.collapsed .ai-summary-body, .ai-summary-box.collapsed .ai-summary-note{display:none;} .ai-summary-box.collapsed .ai-summary-open{display:flex;} /* ── AI 요약 등장 애니메이션 — 로드 시 '마법처럼 스르륵' 1회 (스크립트 불필요) ── */ /* both: 시작 전 opacity:0 유지해 깜빡임 없음. delay 로 페이지 안착 뒤 스르륵 나타남 */ .ai-summary-box{overflow:hidden;animation:ai-summary-reveal .7s cubic-bezier(.22,.61,.36,1) .3s both;} @keyframes ai-summary-reveal{ 0% {opacity:0;transform:translateY(12px) scale(.98);} 60% {opacity:1;} 100%{opacity:1;transform:translateY(0) scale(1);} } /* 반짝이는 빛줄기가 박스를 한 번 훑고 지나감(마법 느낌) */ .ai-summary-box::before{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.65) 50%,transparent 100%);transform:skewX(-18deg);pointer-events:none;z-index:1;animation:ai-summary-shimmer 1s ease-out .7s 1 both;} @keyframes ai-summary-shimmer{0%{left:-70%;}100%{left:130%;}} /* 스파클 아이콘 반짝임 */ .ai-summary-head i.ri-sparkling-2-fill{animation:ai-summary-twinkle 1.1s ease-in-out 1s 2;transform-origin:center;} @keyframes ai-summary-twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1;}50%{transform:scale(1.35) rotate(18deg);opacity:.75;}} /* 접근성: 모션 최소화 사용자는 애니메이션 끔 */ @media (prefers-reduced-motion:reduce){ .ai-summary-box,.ai-summary-box::before,.ai-summary-head i.ri-sparkling-2-fill{animation:none;} } /* 자주 묻는 질문(FAQ) */ .product-faq{margin:34px 0 30px;}/* 하단 여백 확대: 아래 상품정보 제공고시와 붙지 않도록 */ .product-faq-title{font-size:16px;font-weight:700;color:#222;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid #333;} .product-faq-item{border:1px solid #e5e5e5;border-radius:6px;margin-bottom:8px;background:#fff;overflow:hidden;} .product-faq-item[open]{border-color:#c0c0c0;} .product-faq-q{list-style:none;cursor:pointer;padding:14px 40px 14px 14px;font-size:14px;font-weight:600;color:#222;position:relative;} .product-faq-q::-webkit-details-marker{display:none;} .product-faq-q::before{content:"Q";display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;background:#333;color:#fff;border-radius:50%;font-size:11px;margin-right:8px;vertical-align:middle;} .product-faq-q::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:2px solid #999;border-bottom:2px solid #999;transform:translateY(-70%) rotate(45deg);transition:transform .2s;} .product-faq-item[open] .product-faq-q::after{transform:translateY(-30%) rotate(-135deg);} .product-faq-a{padding:2px 14px 14px 42px;font-size:13px;line-height:1.7;color:#555;} /* 옵션 로딩 스피너 */ .ui.dropdown .menu > .item.option-loading-item {display:flex !important; align-items:center; justify-content:center; gap:7px; color:#999; font-size:0.85rem; cursor:default; pointer-events:none;} .opt-spinner {display:inline-block; width:15px; height:15px; border:2px solid #e5e5e5; border-top-color:#888; border-radius:50%; animation:optSpin .6s linear infinite;} @keyframes optSpin {to {transform:rotate(360deg);}} /* 상세설명 영역만 핀치 줌 */ /* 뷰포트: 평상시엔 기존과 동일(overflow 보임). 확대 시에만 클리핑해 주변 레이아웃을 밀지 않음 */ #view-page #detail .detail-view.detail-zoom {position:relative; touch-action:pan-y; -webkit-user-select:none; user-select:none;} #view-page #detail .detail-view.detail-zoom.is-zoomed {overflow:hidden;} #view-page #detail .detail-view.detail-zoom .detail-zoom-target {transform-origin:0 0;} /* will-change 는 제스처 중에만 */ #view-page #detail .detail-view.detail-zoom.is-interacting .detail-zoom-target {will-change:transform;} /* 확대 안내 힌트 — 잠시 노출 후 사라짐, 확대 시작하면 숨김 */ #view-page #detail .detail-view.detail-zoom .detail-zoom-hint { position:absolute; top:8px; right:8px; z-index:2; pointer-events:none; padding:5px 10px; border-radius:14px; font-size:0.72rem; line-height:1; color:#fff; background:rgba(0,0,0,0.55); white-space:nowrap; opacity:0; animation:detailZoomHint 4s ease forwards; } #view-page #detail .detail-view.detail-zoom.is-zoomed .detail-zoom-hint {display:none;} @keyframes detailZoomHint {0%{opacity:0;} 12%{opacity:1;} 70%{opacity:1;} 100%{opacity:0;}} /* 상품상세 하단 통 배너(adhook 무관 일반 배너) */ .product-view-bottom-banner { margin: 28px 0 8px; } .product-view-bottom-banner a, .product-view-bottom-banner img { display: block; } .product-view-bottom-banner img { width: 100%; height: auto; border-radius: 6px; } .product-view-bottom-banner > *:not(:last-child) { margin-bottom: 10px; } /* 상품공유 QR — 공유 시트 하단 */ .sns-share-panel .share-qr { text-align: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eee; } .share-qr-box { display: inline-block; line-height: 0; } .share-qr-box img { width: 120px; height: 120px; image-rendering: pixelated; } .share-qr-label { display: block; margin-top: 6px; font-size: 12px; color: #888; } /* 판매 단위(N개 단위 판매) 안내 — 수량 입력칸 옆 강조. 스타일은 인라인이 아니라 CSS 로 분리 */ .quantity-unit-hint { color:var(--point-color); font-weight:700; } /* 당일발송 뱃지/배너 */ #view-page .product-detail-info .title-area h2 .sameday-badge {display:inline-flex; align-items:center; gap:2px; margin:0 5px 2px 0; padding:3px 6px; border-radius:4px; background:#f02a2a; color:#fff; font-size:0.75rem; font-weight:700; letter-spacing:-0.04rem; line-height:1; vertical-align:middle;} #view-page .product-detail-info .title-area h2 .sameday-badge i {font-size:0.875rem; line-height:1;} #view-page .detail-info .sameday-notice {display:flex; align-items:center; gap:10px; margin:-8px 0 18px; padding:11px 12px; border:1px solid #f5dfa4; border-radius:8px; background:#fdf6e3;} #view-page .detail-info .sameday-notice .sameday-notice-icon {display:flex; flex:0 0 auto; flex-direction:column; align-items:center; gap:3px; color:#e8590c;} #view-page .detail-info .sameday-notice .sameday-notice-tag {display:block; padding:2px 5px; border-radius:3px; background:#ffd43b; color:#7a4b00; font-size:0.563rem; font-weight:700; line-height:1.3; letter-spacing:-0.04rem; text-align:center; white-space:nowrap;} #view-page .detail-info .sameday-notice .sameday-notice-icon i {font-size:1.5rem; line-height:1;} #view-page .detail-info .sameday-notice .sameday-notice-body {display:flex; flex-direction:column; gap:3px; min-width:0;} #view-page .detail-info .sameday-notice .line1 {color:#222; font-size:0.875rem; font-weight:700; letter-spacing:-0.04rem; line-height:1.35;} #view-page .detail-info .sameday-notice .line1 em {font-style:normal; color:#f02a2a;} #view-page .detail-info .sameday-notice .line2 {color:#6b5a3a; font-size:0.75rem; letter-spacing:-0.04rem; line-height:1.4;} #view-page .detail-info .sameday-notice .line2 u {color:#c92a2a; font-weight:600; text-decoration-thickness:1px; text-underline-offset:2px;} /* 승인 대기 상품 안내문 크기. 요소 셀렉터를 붙여 fomantic 의 .ui.small.message 보다 우선한다 */ div.ui.message.preview-state-message { font-size: 1.39285714em; line-height: 1.5; word-break: keep-all; } /* 주문 잠금 상태의 옵션칸·수량칸: 클릭이 먹지 않는다는 것을 눈으로 알린다. fomantic 이 안 그리는 네이티브 요소만 맡는다 */ #options input:disabled, #options button:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; background-color: #f4f4f5; } /* 상품설명 펼치기: 접힌 높이 밖은 잘라서 아래 이미지(lazy)를 받지 않게 한다 */ #view-page #detail .detail-fold {--detail-fold-height:600px; margin-bottom:30px;} #view-page #detail .detail-fold .detail-view {margin-bottom:0;} #view-page #detail .detail-fold.is-folded .detail-view {max-height:var(--detail-fold-height); overflow:hidden;} /* 크기 속성 없는 본문 이미지는 받기 전 높이가 0 이라 전부 접힌 영역 안에 겹쳐 lazy 가 다 받아 버린다. 받기 전까지만 자리를 잡아 뒤 이미지를 잘린 영역으로 민다 */ #view-page #detail .detail-fold.is-folded .detail-view img:not(.is-loaded) {min-height:300px;} /* 보류 중(src 를 뗀) 이미지는 alt 만 남아 엔진에 따라 엑박으로 그려지므로 감춘다 */ #view-page #detail .detail-fold.is-folded .detail-view img[data-fold-src] {visibility:hidden;} #view-page #detail .detail-fold.is-folded .detail-view::after {content:''; position:absolute; left:0; right:0; bottom:0; height:120px; pointer-events:none; background:linear-gradient(rgba(255,255,255,0), #fff);} /* 본문이 짧아 접기가 풀린 상태(is-folded·is-open 둘 다 없음)는 버튼을 감춘다 */ #view-page #detail .detail-fold-btn-area {display:none; padding:12px 0 0;} #view-page #detail .detail-fold.is-folded .detail-fold-btn-area, #view-page #detail .detail-fold.is-open .detail-fold-btn-area {display:block;} #view-page #detail .detail-fold-btn {display:flex; align-items:center; justify-content:center; gap:4px; width:100%; height:48px; padding:0 16px; border:1px solid #d5d5d5; border-radius:4px; background:#fff; color:#222; font-size:0.95rem; font-weight:600; cursor:pointer;} #view-page #detail .detail-fold-btn i {font-size:1.25rem; transition:transform .2s;} #view-page #detail .detail-fold-btn .detail-fold-close {display:none;} #view-page #detail .detail-fold.is-open .detail-fold-btn .detail-fold-open {display:none;} #view-page #detail .detail-fold.is-open .detail-fold-btn .detail-fold-close {display:inline;} #view-page #detail .detail-fold.is-open .detail-fold-btn i {transform:rotate(180deg);} /* 상품상세 MD추천 카드 */ .md-pick { margin: 30px 0 40px; } /* 헤더 */ .md-pick-head { margin-bottom: 16px; } .md-pick-author { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .md-pick-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; background: #fff; } .md-pick-author-name { font-weight: 800; color: #2f80ed; font-size: 0.98rem; } .md-pick-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8rem; font-weight: 700; color: #f2a007; } .md-pick-badge .icon { color: #f2a007; } .md-pick-title { margin: 6px 0 10px; font-size: 1.35rem; font-weight: 800; line-height: 1.4; color: #191919; word-break: keep-all; } .md-pick-contents { white-space: pre-line; margin: 0; font-size: 0.95rem; line-height: 1.75; color: #555; word-break: keep-all; } /* 이미지 갤러리 — 개수별 그리드 */ .md-pick-media { display: grid; gap: 8px; margin-top: 18px; } .md-pick-cell { position: relative; overflow: hidden; border-radius: 8px; background: #f2f2f2; } .md-pick-cell img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: transform .25s ease; } .md-pick-cell:hover img { transform: scale(1.03); } /* 1장: 큰 단일(16:9 비율) */ .md-pick-count-1 { grid-template-columns: 1fr; } .md-pick-count-1 .md-pick-cell { aspect-ratio: 16 / 9; } /* 2장: 나란히 */ .md-pick-count-2 { grid-template-columns: 1fr 1fr; } .md-pick-count-2 .md-pick-cell { aspect-ratio: 1 / 1; } /* 모바일: 위 큰 이미지 1 + 아래 작은 이미지 나열 (화면이 좁아 가로 분할 대신 상하 분할이 안정적) */ /* 3장: 위 큰 1 + 아래 2 */ .md-pick-count-3 { grid-template-columns: repeat(2, 1fr); } .md-pick-count-3 .md-pick-cell:nth-child(1) { grid-column: 1 / 3; } /* 4장: 위 큰 1 + 아래 3 */ .md-pick-count-4 { grid-template-columns: repeat(3, 1fr); } .md-pick-count-4 .md-pick-cell:nth-child(1) { grid-column: 1 / 4; } /* 5장: 위 큰 1 + 아래 4 */ .md-pick-count-5 { grid-template-columns: repeat(4, 1fr); } .md-pick-count-5 .md-pick-cell:nth-child(1) { grid-column: 1 / 5; } /* 위 큰 이미지는 가로 전체(넓은 비율), 아래 작은 이미지는 정사각 */ .md-pick-count-3 .md-pick-cell:nth-child(1), .md-pick-count-4 .md-pick-cell:nth-child(1), .md-pick-count-5 .md-pick-cell:nth-child(1) { aspect-ratio: 16 / 10; } .md-pick-count-3 .md-pick-cell:not(:nth-child(1)), .md-pick-count-4 .md-pick-cell:not(:nth-child(1)), .md-pick-count-5 .md-pick-cell:not(:nth-child(1)) { aspect-ratio: 1 / 1; } @media (max-width: 767px) { .md-pick { margin: 22px 0 28px; } .md-pick-title { font-size: 1.1rem; } } /* 상품상세 도움 버튼: 상품옵션 위 버튼 줄 + 안내 레이어(모바일) */ .goods-help-buttons { display: flex; flex-wrap: wrap; /* 버튼이 많으면 다음 줄로 — 마진 덕에 줄 간격도 유지된다 */ align-items: center; /* 글자 버튼과 이미지 버튼이 섞이면 높이가 달라진다 — 세로 가운데로 */ gap: 5px; /* 아래 상품옵션 구획선과의 간격 */ margin: 0 0 12px; } .goods-help-buttons .goods-help-btn { margin: 0; /* Fomantic 기본 버튼 마진 제거 — 간격은 gap 이 잡는다 */ white-space: nowrap; } /* 이미지 버튼 */ .goods-help-buttons .goods-help-btn-image { display: inline-block; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; } .goods-help-buttons .goods-help-btn-image:hover { opacity: .85; } .goods-help-buttons .goods-help-btn-image img { display: block; max-height: 40px; /* 버튼 줄 높이 상한 — 원본이 더 크면 비율 유지하며 줄인다 */ max-width: 100%; width: auto; height: auto; } /* 안내 레이어 본문 — 이미지는 폭에 맞춰 줄이고, 긴 글은 스크롤 */ .ui.modal.goods-help-layer > .content { max-height: 68vh; overflow-y: auto; } .ui.modal.goods-help-layer .goods-help-body img { max-width: 100%; height: auto; } /* 인쇄예시 버튼: 도움 버튼 줄 맨 앞. 간격은 gap 이 잡는다 */ .goods-help-buttons .btn-print-example { margin: 0; white-space: nowrap; } /* 인쇄예시 레이어: 등록 이미지를 세로로 이어 보여준다 */ .ui.modal.print-example-layer > .content { max-height: 68vh; overflow-y: auto; } .ui.modal.print-example-layer .print-example-item { text-align: center; margin: 0 0 12px; } .ui.modal.print-example-layer .print-example-item:last-child { margin-bottom: 0; } .ui.modal.print-example-layer .print-example-item img { display: inline-block; max-width: 100%; height: auto; vertical-align: top; } #goods-review-list {} #goods-review-list .review-write-area:after {content:''; content:''; display:block; clear:both;} #goods-review-list .ui.rating .active.icon {color: #ffe623 !important;} #goods-review-list .score { font-size:0.786rem;font-weight:bold;} #goods-review-list .board-top .count {padding-bottom:10px; } /* 상품리뷰 - 평점 요약 */ #goods-review-list .review-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 0; } #goods-review-list .review-avg-rating { position:relative; font-size: 1.75rem; font-weight: 700; color: #111; line-height: 1; } #goods-review-list .review-avg-rating i.star {position:relative; top:-3px; font-size:1.2rem; color:#ffe623;} #goods-review-list .review-summary-text { display: flex; flex-direction: column; gap: 4px; } #goods-review-list .review-stars { display: flex; gap: 1px; color: #f2b90c; font-size: 13px; } #goods-review-list .total-count { padding:0; font-size: 0.8125rem; color: #777; } #goods-review-list .total-count strong { color: #111; } /* 리뷰유형 탭 (전체/포토리뷰/일반리뷰) — 버튼형, 활성색 #111 */ #goods-review-list .review-type-tabs { display: flex; gap: 8px; margin: 0 0 16px; border: 0; padding: 0; } #goods-review-list .review-type-tabs.ui.secondary.pointing.menu { border-bottom: 0; } #goods-review-list .review-type-tabs .item { flex: 1; display: flex; align-items: center; justify-content: center; padding: 9px 4px; font-size: 0.9375rem; font-weight: 600; color: #666; background: #f7f7f7; border: 1px solid #e5e5e5; border-radius: 999px; margin: 0 !important; text-align: center; } #goods-review-list .review-type-tabs .item:hover { background: #eee; } #goods-review-list .review-type-tabs .item.active { background: #111; color: #fff; border-color: #111; } #goods-review-list .review-type-tabs .item i {padding-right:5px;} /* 리뷰 카드 */ .goods-review-items { display: flex; flex-direction: column; } .goods-review-items .review-item { padding: 14px 4px; border-bottom: 1px solid #f2f2f2; } .goods-review-items .review-item-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .goods-review-items .review-item-top .score { color:#111; } .goods-review-items .review-item-top .review-author { font-size: 0.8125rem; font-weight: 600; color: #666; } .goods-review-items .review-item-top .review-date { margin-left: auto; font-size: 0.75rem; color: #aaa; } .goods-review-items .review-item-body { margin: 8px 0 0; padding: 10px 12px; background: #f9f9f9; border-radius: 8px; font-size: 0.875rem; color: #444; line-height: 1.6; } .goods-review-items .review-item-actions { margin-top: 6px; text-align: right; } .goods-review-items .review-item-actions a { padding: 4px 10px; border: 1px solid #e0605e; border-radius: 6px; color: #e0605e; font-size: 0.6875rem; } .goods-review-items .review-empty { padding: 40px 20px; text-align: center; color: #aaa; } .goods-review-items .review-empty i { font-size: 2.5rem; color: #ddd; } .goods-review-items .review-empty p { margin-top: 10px; font-size: 0.8125rem; } /* 리뷰 작성 폼 */ #goods-review-list .review-write-area { border-radius: 10px; padding: 14px; } #goods-review-list .review-write-area .three.wide.field { width: 100% !important; } #goods-review-list .review-write-area textarea { width: 100%; } #goods-review-list .review-write-area .inline.fields { flex-wrap: wrap; gap: 4px 10px; margin: 0; } #goods-review-list .review-write-area .inline.fields .field { margin: 0; } #goods-review-list .review-write-area .right.floated { float: none; margin-top: 10px; } #goods-review-list .review-write-area .right.floated .ui.button { width: 100%; padding: 12px 0; border-radius: 8px; } .review-login-prompt { margin: 0; padding: 24px 16px; text-align: center; background: #fafafa; border: 1px dashed #ddd; border-radius: 12px; } .review-login-icon { width: 40px; height: 40px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; border: 1px solid #eee; } .review-login-icon i { margin: 0; font-size: 1.25rem; color: #666; line-height: 1; } .review-login-title { margin: 0 0 4px; font-size: 0.9375rem; font-weight: 700; color: #111; } .review-login-desc { margin: 0 0 14px; font-size: 0.8125rem; line-height: 1.5; color: #777; } .review-login-btn.ui.tiny.black.button { margin: 0; padding: 10px 24px; font-size: 0.8125rem; font-weight: 600; border-radius: 6px; } /* 모바일: 카드 폭이 좁으니 여백만 살짝 압축, 버튼은 풀폭 (터치 영역 확보) */ @media (max-width: 767px) { .review-login-prompt { padding: 20px 16px; } .review-login-btn.ui.tiny.black.button { display: block; width: 100%; } } /* ── 포토리뷰 이미지: 등록폼 미리보기 썸네일 ── */ .review-photo-field { margin-bottom: 10px; } .review-photo-field .review-photo-add { width: auto !important; padding: 8px 12px !important; } .review-photo-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .review-photo-list:empty { display: none; } .review-photo-thumb { position: relative; width: 68px; height: 68px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; } .review-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .review-photo-thumb .review-photo-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 16px; text-align: center; background: rgba(0,0,0,0.6); color: #fff; border-radius: 50%; font-size: 13px; } .review-photo-count { opacity: 0.6; } /* 포토리뷰 이미지: 리뷰 목록 썸네일. 클릭하면 확대된다 */ .goods-review-items .review-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .goods-review-items .review-photos img { width: 60px; height: 60px; object-fit: cover; border: 1px solid #e8e8e8; border-radius: 6px; cursor: pointer; } /* 리뷰유형 탭 */ .review-type-tabs { margin-bottom: 12px; flex-wrap: nowrap; overflow-x: auto; } .review-type-tabs .item { white-space: nowrap; } /* 리뷰 출처 상품 라벨 */ #goods-review-list .review-goods-label { /* 링크 히트영역을 '글자 폭'으로 제한 */ display: block; width: -webkit-fit-content; width: fit-content; max-width: 100%; margin: 6px 0 6px; text-decoration: none; font-size: 0.8125rem; line-height: 1.3; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #goods-review-list .review-goods-label:hover { color: #555; text-decoration: none; } #goods-qna-list {} #goods-qna-list .new.icon { display: inline-block; width: 16px; line-height: 16px; font-size: 0.733em; color: #fff; background: #76b9bd; text-align: center; border-radius: 2px; margin-left: 2px; font-weight: bold; vertical-align: middle;} /* ===== 상품상세 문의 탭(모바일) ===== */ /* 상단: 건수 + 작성/1:1 버튼 세로 정리 */ #goods-qna-list .board-top { display: block; margin: 0 0 10px; } #goods-qna-list .board-top .ten.wide.column { width: 100% !important; text-align: left !important; padding: 0; } #goods-qna-list .board-top .ui.button { margin: 0 6px 0 0; border-radius: 8px; } #goods-qna-list .board-top .ui.button.write { background: var(--point-color); color: #fff; } #goods-qna-list .qna-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } #goods-qna-list .qna-header-row .total-count { font-size: 0.8125rem; color: #777; } #goods-qna-list .qna-header-row .total-count strong { color: #111; } #goods-qna-list .qna-header-row .qna-header-buttons { display: flex; gap: 8px; flex-shrink: 0; } #goods-qna-list .qna-header-row .qna-header-buttons .ui.tiny.button { margin: 0; white-space: nowrap; } /* 모바일: 카운트 텍스트가 길어지거나(예: 7,840건) 화면이 좁으면 줄바꿈 허용 */ @media (max-width: 480px) { #goods-qna-list .qna-header-row { flex-wrap: wrap; } #goods-qna-list .qna-header-row .qna-header-buttons { width: 100%; } #goods-qna-list .qna-header-row .qna-header-buttons .ui.tiny.button { flex: 1; } } /* 문의 아코디언 카드 */ .qna-item-list { display: flex; flex-direction: column; gap: 8px; } .qna-item { border: 1px solid #eee; border-radius: 10px; overflow: hidden; } .qna-item .qna-head { display: block; padding: 12px 14px; } .qna-item .qna-head-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .qna-item .qna-status { font-size: 0.875rem; font-weight: 700; } .qna-item .qna-status.done { color:#111; } .qna-item .qna-status.wait { color: #777; } .qna-item .qna-cat { font-size: 0.75rem; color: #666; background: #f2f2f2; padding: 2px 8px; border-radius: 20px; } .qna-item .qna-subject-line { display: flex; align-items: center; gap: 4px; font-size: 0.875rem; color: #222; } .qna-item .qna-subject-line .txt { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .qna-item .qna-subject-line i { color: #aaa; } .qna-item .qna-subject-line .new-badge { flex-shrink: 0; width: 15px; line-height: 15px; font-size: 0.625rem; text-align: center; color: #fff; background: #4587ff; border-radius: 3px; } .qna-item .qna-meta { margin-top: 6px; font-size: 0.75rem; color: #aaa; } .qna-item .qna-meta .author { margin-right: 8px; } /* 펼침 내용 */ .qna-item .qna-contents { padding: 12px 14px; background: #f9f9f9; border-top: 1px solid #eee; } .qna-item .qna-contents.hide { display: none; } .qna-item .qna-q-body { font-size: 0.8125rem; color: #444; line-height: 1.6; } .qna-item .qna-owner-actions { margin-top: 8px; text-align: right; } .qna-item .qna-owner-actions a { margin-left: 0; padding: 4px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.6875rem; color: #555; } .qna-item .qna-owner-actions a.delete { border: 1px solid #e0605e; color: #e0605e;} .qna-item .qna-reply { margin-top: 10px; padding: 10px 12px; background: #fff; border: 1px solid #eee; border-radius: 8px; } .qna-item .qna-reply .reply-label { display: block; margin-bottom: 6px; font-size: 0.75rem; color: #111; } .qna-item .qna-reply .reply-body { font-size: 0.8125rem; color: #444; line-height: 1.6; } .qna-empty { padding: 40px 20px; text-align: center; color: #aaa; } .qna-empty i { font-size: 2.5rem; color: #ddd; } .qna-empty p { margin-top: 10px; font-size: 0.8125rem; } /* 문의 작성 폼(모달) - wide 필드 전체폭 */ .goods-qna-write .field[class*="wide"] { width: 100% !important; } .goods-qna-write .field > label { font-size: 0.8125rem; font-weight: 600; color: #555; } .goods-qna-write .field input, .goods-qna-write .field select, .goods-qna-write .field textarea { width: 100%; } .goods-qna-write .ui.divider { margin: 10px 0; } /* 비회원 상품문의 폼 — 개인정보 수집·이용 동의 / 캡챠 */ .goods-qna-write .qna-privacy-terms { margin-top: 8px; padding: 10px 12px; background: #f7f7f7; border: 1px solid #e5e5e5; border-radius: 6px; font-size: 0.875em; color: #666; line-height: 1.6; } .goods-qna-write .qna-privacy-terms p { margin: 0 0 3px; } .goods-qna-write .qna-privacy-terms p.mb-0 { margin-bottom: 0; } .goods-qna-write .qna-privacy-terms strong { color: #333; } /* 자동입력 방지(캡챠) */ .goods-qna-write .qna-captcha { margin-top: 14px; --qna-captcha-h: 38px; } .goods-qna-write .qna-captcha .inline.fields.captcha { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; } .goods-qna-write .qna-captcha .inline.fields.captcha > .field { margin: 0; padding: 0; } .goods-qna-write .qna-captcha .inline.fields.captcha > .field:first-child { flex: 0 0 auto; } .goods-qna-write .qna-captcha .inline.fields.captcha > .field + .field { flex: 0 1 auto; min-width: 0; } .goods-qna-write .qna-captcha .ui.action.input { display: inline-flex; align-items: stretch; width: auto; max-width: 100%; } /* 이미지가 안 뜬 상태(1px 투명 gif)에서도 자리를 유지해 레이아웃이 튀지 않게 min-width 를 준다. */ .goods-qna-write .qna-captcha .ui.action.input .captcha-scope-image { flex: 0 0 auto; display: block; width: auto; min-width: 110px; max-width: 100%; height: var(--qna-captcha-h) !important; box-sizing: border-box; background: #fff; border: 1px solid rgba(34, 36, 38, .15); border-right: 0; border-radius: .28571429rem 0 0 .28571429rem; } .goods-qna-write .qna-captcha .ui.action.input .captcha-scope-reset { flex: 0 0 auto; width: auto !important; height: var(--qna-captcha-h); display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0 11px !important; } .goods-qna-write .qna-captcha .captcha-scope-key { width: 130px; max-width: 100%; min-width: 0; height: var(--qna-captcha-h); box-sizing: border-box; }