/* 상세페이지에서 lnb 고정 사용 금지 */ #view-page ~ * .lnb, body:has(#view-page) .lnb { position: relative !important; top: auto !important; } /* 상품상세 */ #view-page {} /* semantic ui custom */ #view-page .ui.input, #view-page .ui.dropdown, #view-page .ui.dropdown .menu>.item {font-size:0.875rem;} #view-page .ui.button {font-weight:600;} #view-page .ui.table {font-size:0.875rem; font-weight:400;} /* sns-share */ #view-page .sns-share {position:absolute; right:0; top:0;} #view-page .sns-share .btn-share { display:block; height:30px; padding:4px 8px 5px; font-size:0.8125rem; line-height:1.6; border:1px solid #ddd; border-radius:2px; background:#fff; color:#333; cursor:pointer; outline:none;} #view-page .sns-share .btn-share:hover {background:#f4f4f4;} #view-page .sns-share .layer-share {display:none; position:absolute; top:29px; right:0; z-index:2; width:270px; padding:10px; border:1px solid #333; background:#fff; box-shadow:1px 1px 4px rgba(0,0,0,0.2);} #view-page .sns-share .layer-share h5 {padding:0 0 10px; font-size:1rem; border-bottom:1px solid #333;} #view-page .sns-share .layer-share .content {position:relative;} #view-page .sns-share .layer-share .content > a {display:inline-block; margin:0 0 0 22px; font-size:1rem;} #view-page .sns-share .layer-share .content > a:first-child {margin-left:5px;} /* 공유 아이콘 — 초대장 공용 규격(폰트아이콘 흰색 + 브랜드색 원형). 카카오톡 포함 5종 한 줄. */ #view-page .sns-share .layer-share .sns-share-icons {display:flex; justify-content:space-between; gap:8px; margin:6px 0 12px;} #view-page .sns-share .layer-share .sns-share-icons > a {margin:0;} #view-page .sns-share .layer-share .sns-icon {display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-size:19px;} /* 브랜드 이미지 아이콘(네이버/밴드) — 자체 완결 원형이라 배경 제거. */ #view-page .sns-share .layer-share .sns-icon.img-brand {background:transparent;} #view-page .sns-share .layer-share .sns-icon img {width:42px; height:42px; object-fit:contain;} #view-page .sns-share .layer-share .sns-icon.kakao {background:#FEE500; color:#3C1E1E;} #view-page .sns-share .layer-share .sns-icon.naver {background:#03c75a;} #view-page .sns-share .layer-share .sns-icon.facebook {background:#3b5998;} #view-page .sns-share .layer-share .sns-icon.x {background:#000;} #view-page .sns-share .layer-share .sns-icon.naverband {background:#00c73c;} #view-page .sns-share .layer-share .content .action.input {margin-top:10px;} #view-page .sns-share .layer-share .content .ui[class*="right labeled"].icon.button {padding:0 10px !important; font-size:0.8125rem !important; font-weight:500;} #view-page .sns-share .layer-share .content .ui.input>input {width:200px; padding:5px 5px;} #view-page .sns-share .layer-share .close {position:absolute; top:10px; right:10px; } #view-page .sns-share .layer-share .close button {display:block; width:20px; height:20px; background:none; border:0; cursor:pointer; outline:none;} #view-page .sns-share .layer-share .close span.bar {display:block; position:absolute; top:50%; left:0; width:100%; height: 1px; background:#000;} #view-page .sns-share .layer-share .close span.bar1 {-webkit-transform: rotate(135deg); transform: rotate(135deg);} #view-page .sns-share .layer-share .close span.bar2 {-webkit-transform: rotate(-135deg); transform: rotate(-135deg);} /* title-area */ #view-page .product-detail-info .title-area {position:relative; margin:0 0 0; padding:0 5px 15px 5px;} #view-page .product-detail-info .title-area h2 {margin:0; padding:5px 0 0; font-weight:600; color:#111; font-size:1.5rem !important;} #view-page .product-detail-info .title-area p.summary {margin:0; padding:5px 0 0; color:#777; font-size:1rem;} /* detail-wrap */ #view-page .product-detail-info .detail-wrap {position:relative; padding:30px 0 30px 550px; border-top:1px solid #111;} #view-page .product-detail-info .detail-wrap:after {content:''; display:block; clear:both;} /* detail-image */ #view-page .detail-image {position:relative; left:-550px; float:left; width:500px; margin-right:-500px; font-size:1rem; vertical-align:top;} #view-page .detail-image:after {content:''; display:block; clear:both;} #view-page .detail-info {float:left; display:inline-block; width:100%; font-size: 0.875rem; vertical-align:top;} /* 대표이미지 자리 선점(CLS 제거) */ /* 대표이미지 박스 배경은 흰색 — 상품 원본이 흰 배경이라 회색 여백(#f7f7f7)이 테두리처럼 보였다. */ #view-page .detail-image .image-big {text-align:center; aspect-ratio:1/1; background:#fff; overflow:hidden;} #view-page .detail-image .image-big img.thumb {display:block; margin:0; padding:0; width:100%; height:100%; object-fit:contain;} #view-page .detail-image .image-small {position:relative; padding:10px 0; text-align:center;} #view-page .detail-image .image-small:after {content:''; display:block; clear:both;} #view-page .detail-image .image-small ul.grid { margin:0 0 0; padding:0 0; list-style:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } #view-page .detail-image .image-small.off ul.grid {margin:0; padding:0; font-size:0; text-align:center;} #view-page .detail-image .image-small.off ul.grid li {display:inline-block; width:20%; padding:0 2px; list-style:none;} #view-page .detail-image .image-small.off ul.grid li:first-child {padding-left:0;} #view-page .detail-image .image-small.off ul.grid li:last-child {padding-right:0;} #view-page .detail-image .image-small ul.grid li a {display:block; margin:0; padding:0;} /* 썸네일 스트립도 로드 전 높이 0 → 슬라이드 영역이 접혔다 펴지는 깜빡임 발생. 1:1 슬롯을 미리 확보한다. */ #view-page .detail-image .image-small img.thumb {display:block; margin:0; padding:0; max-width:100px; max-height:100px; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; background:#fafafa; border:1px solid #eee; cursor:pointer;} #view-page .detail-image .image-small img.thumb.active {border:1px solid #000; } #view-page .detail-image .image-small .prev, #view-page .detail-image .image-small .next { position:absolute; z-index:2; top:50%; left:-1px; margin-top:-15px; padding:10px; width:5px; height:32px; outline:none; text-indent:0; border-radius:0; background-image:none; box-shadow:none;} #view-page .detail-image .image-small .next {left:auto; right:0;} #view-page .detail-image .image-small .prev i, #view-page .detail-image .image-small .next i {position:absolute; top:0; left:0; font-size:1.4rem; line-height:32px;} /* 상품 동영상(유튜브) — 대표이미지 박스를 그대로 덮는 영상 레이어 */ #view-page .detail-image .image-big {position:relative;} #view-page .detail-image .image-big .image-video {display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:#000;} #view-page .detail-image .image-big .image-video iframe {display:block; width:100%; height:100%; border:0;} #view-page .detail-image .image-big.video-on .image-video {display:block;} #view-page .detail-image .image-big.video-on img.thumb {visibility:hidden;} /* 대표이미지 좌우 이동 버튼 */ #view-page .detail-image .image-big .big-prev, #view-page .detail-image .image-big .big-next { display:none; position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; text-align:center; line-height:36px; font-size:1.4rem; cursor:pointer; opacity:.9; } #view-page .detail-image .image-big .big-prev {left:8px;} #view-page .detail-image .image-big .big-next {right:8px;} /* 마우스를 올렸을 때만 노출 */ #view-page .detail-image .image-big.has-nav:hover .big-prev, #view-page .detail-image .image-big.has-nav:hover .big-next {display:block;} #view-page .detail-image .image-big .big-prev.disabled, #view-page .detail-image .image-big .big-next.disabled {opacity:.18; cursor:default;} /* 드래그 스와이프 중 이미지가 고스트로 끌려가는 것 방지 */ #view-page .detail-image .image-big img.thumb {user-select:none; -webkit-user-drag:none;} /* 썸네일 재생 아이콘 — 이미지 썸네일과 한눈에 구분되게 가운데 오버레이(클릭은 아래 img 가 받게 통과시킨다) */ #view-page .detail-image .image-small li.video-slide {position:relative;} #view-page .detail-image .image-small li.video-slide .video-play {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:2rem; line-height:1; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); pointer-events:none;} /* detail-info */ #view-page .detail-info .icons {} #view-page .detail-info .icons img {margin:0 5px 3px 0;} #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.25rem; font-weight:bold; color:#000; letter-spacing:-0.02em;} #view-page .detail-info ul.price-area li.price.strike {text-decoration:line-through; font-size:1.25rem; font-weight:normal; color:#333;} #view-page .detail-info ul.price-area li.discount {margin-top:10px; font-size:1.25rem; font-weight:600; color:#000; } #view-page .detail-info ul.price-area li.price span.quantity {padding-left:0px; font-size:1rem; 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:1rem; line-height:1.6; font-weight:700; color:#fff; background:#f44336; border-left:0; border-radius:4px; font-family:"Pretendard Variable", "Pretendard", 'Helvetica Neue', 'Apple SD Gothic Neo', '맑은고딕', 'malgun gothic', 'Open Sans', Helvetica, sans-serif;} #view-page .detail-info ul.price-area li.discount.percent span {position:relative; top:-1px; font-size: 0.875rem;} #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; } #view-page .detail-info ul.price-area li .code {position:absolute; right:5px; bottom:0; margin:0 0 0; padding:5px 10px; border-radius:3px; font-size:0.875rem; line-height:1rem; letter-spacing:0; font-weight:500; color:#fff; background:rgba(0,0,0,0.7);} /* 상품코드 클릭 복사: 클릭 가능함을 커서로 표시 */ #view-page .detail-info ul.price-area li .code.code-copy {cursor:pointer;} #view-page .detail-info ul.price-area li .code.code-copy:hover {background:rgba(0,0,0,0.85);} #view-page .detail-info .deliveryPaymentType {margin-bottom:5px;} #view-page .detail-info ul.coupon-area {position:relative; margin:0 0 0; padding:8px 5px 0; font-size:0;} #view-page .detail-info ul.coupon-area:before {content:''; display:block; margin:5px 0; border-bottom:0px solid #ddd;} #view-page .detail-info ul.coupon-area li {display:inline-block; margin:5px 2px 5px 0; padding:0; font-size:1rem;} #view-page .detail-info ul.coupon-area li .coupon.download {position:relative; display:inline; margin:0 5px 5px 0; padding:4px 15px 5px 10px; font-size:0.9231rem; line-height:1rem; color:#fff; font-weight:400; text-align:center; background:#ff7608; border-radius:1px;} #view-page .detail-info ul.coupon-area li .coupon.download:after { content:''; position:absolute; top:1px; right:0; width: 0; height: 0; border-top: 11px solid transparent; border-right: 7px solid #fff; border-bottom: 11px solid transparent; } #view-page .detail-info ul.coupon-area li .coupon.download i {margin:0 0 0 5px;} #view-page .detail-info ul.coupon-area li .coupon.download:hover {color:#fff; background:#ff5411;} /* price-table */ #view-page .price-table-area {margin:0 0 0; padding:15px 5px 0px;border-top:1px solid #ddd;} #view-page .price-table-area .price-info {margin:0; padding:0 0 10px; font-size: 0.875rem;} #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:0.875rem; 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 {font-size:0.9375rem;} #view-page .detail-info .price-table-description p {margin:0; padding:3px 0;} /* main info table */ #view-page .detail-info table.info-table {width:100%; margin:10px 0 0; padding:15px 0 15px; text-align:left; font-size:0.875rem; border-top:1px solid #ddd;} #view-page .detail-info table.info-table caption {display:none;} #view-page .detail-info table.info-table th, #view-page .detail-info table.info-table td {padding:10px 5px;} #view-page .detail-info table.info-table th:first-child, #view-page .detail-info table.info-table td:first-child {} #view-page .detail-info table.info-table th {padding-right:10px; color:#333; text-align:left;} #view-page .detail-info table.info-table td {} #view-page .detail-info table.info-table td:last-child {} #view-page .detail-info table.info-table.price-calculate {} #view-page .detail-info table.info-table.price-calculate th {padding:5px 5px;} #view-page .detail-info table.info-table.price-calculate td {padding:5px 5px;} #view-page .detail-info table.info-table td .money {font-weight:600;} #view-page .detail-info table.info-table td .consumer-price {color:#a6a6a6;} #view-page .detail-info table.info-table td .discount-rate {color:#d03935; font-size:0.786rem;} #view-page .detail-info table.info-table td b.reserve {color:#18973e;} /* 특가 이벤트(기간한정 단일가) */ #view-page .detail-info table.info-table tr.special-sale th {color:var(--point-color);} #view-page .detail-info table.info-table td .special-sale-price {color:var(--point-color); font-size:1.143rem; font-weight:700;} #view-page .detail-info table.info-table td .special-sale-badge {display:inline-block; margin-left:0; padding:1px 7px; color:#fff; font-size:0.786rem; font-weight:600; background:var(--point-color); border-radius:11px; vertical-align:middle;} /* 특가 행은 flex 로 조립한다 — inline 나열이면 기간 문구 길이(로케일별 날짜 포맷)에 따라 타이머만 다음 줄로 밀려 어긋난다. 1줄: 특가 + 할인율 + 타이머 / 2줄: 기간. order 로 순서를 바꾸므로 템플릿 순서는 그대로 둔다. */ #view-page .detail-info table.info-table tr.special-sale td {display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px;} #view-page .detail-info table.info-table td .special-sale-term {display:inline-block; order:2; flex:0 0 100%; margin-left:0; color:#888; font-size:0.857rem;} #view-page .detail-info table.info-table td .special-sale-timer {display:inline-block; order:1; margin-left:0; padding:1px 8px; color:#d03935; font-size:0.857rem; font-weight:600; font-variant-numeric:tabular-nums; background:#fdeeee; border-radius:3px;} #view-page .detail-info table.info-table td .special-sale-timer.ended {color:#888; font-weight:400; background:#f2f2f2;} #view-page .detail-info table.info-table td a.btn.coupon {display:inline-block; margin:2px 4px 2px 0; padding:2px 8px; color:#fff; font-size: 0.875rem; background:#f44336; border-radius:3px;} #view-page .detail-info table.info-table td a.btn.coupon:hover {background:#d42417;} #view-page .detail-info table.info-table td a.btn.card-benefit {margin:0 5px 0 0; padding:4px 8px 5px; color:#333; font-size:1rem; background:#fff; border:1px solid #888; border-radius:3px;} #view-page .detail-info table.info-table td a.btn.card-benefit:hover {color:#fff; background:#888; border-color:#888;} #view-page .detail-info table.info-table td a.btn.print-ex {margin:0 5px 0 0; padding:4px 11px 5px; color:#fff; font-size:1rem; background:#777; border:1px solid #666; border-radius:3px;} #view-page .detail-info table.info-table td a.btn.print-ex:hover {color:#fff; background:#333; border-color:#333;} #view-page .detail-info table.info-table td .pt-10 {padding-top:10px;} #view-page .detail-info table.info-table.ui.form .fields {margin:0 !important;} /* main option table */ #view-page .detail-info #options {margin-top:-15px; margin-bottom:15px;} #view-page .detail-info #options .option-selected {margin-top:5px;} #view-page .detail-info table.option-table {width:100%; text-align:left; font-size:0.875rem;} #view-page .detail-info table.option-table caption {display:none;} #view-page .detail-info table.option-table th, #view-page .detail-info table.option-table td {padding:5px;} #view-page .detail-info table.option-table th:first-child, #view-page .detail-info table.option-table td:first-child {} #view-page .detail-info table.option-table th {color:#333; text-align:left;} #view-page .detail-info table.option-table td {} #view-page .detail-info table.option-table td:last-child {} #view-page .detail-info table.option-table .ui.default.dropdown:not(.button)>.text, #view-page .detail-info table.option-table .ui.dropdown:not(.button)>.default.text {color:#333;} #view-page .detail-info table.option-table .ui.input > input::-webkit-input-placeholder {color:#444;} #view-page .detail-info table.option-table .ui.input > input::-moz-placeholder {color:#444;} #view-page .detail-info table.option-table .ui.input > input:-ms-input-placeholder {color:#444;} #view-page .detail-info table.option-table .ui.input.focus > input::-webkit-input-placeholder, #view-page .detail-info table.option-table .ui.input > input:focus::-webkit-input-placeholder {color:#ccc;} #view-page .detail-info table.option-table .ui.input.focus > input::-moz-placeholder, #view-page .detail-info table.option-table .ui.input > input:focus::-moz-placeholder {color:#ccc;} #view-page .detail-info table.option-table .ui.input.focus > input:-ms-input-placeholder, #view-page .detail-info table.option-table .ui.input > input:focus:-ms-input-placeholder {color:#ccc;} #view-page .detail-info table.option-table .input-option input {font-size: 0.875rem; color:#333;} #view-page .detail-info table.option-table .input-option .input-name {font-size: 0.8125rem; margin-bottom:5px;} /* 조합형(다단) 옵션 — 이전 단계 미선택 시 다음 단계 비활성(1단계만 활성으로 시작) */ #view-page .detail-info table.option-table .field.option-step-disabled {opacity:0.45; pointer-events:none;} #view-page .detail-info table.option-table .field.option-step-disabled .ui.dropdown {background:#f5f5f5; cursor:not-allowed;} #view-page .detail-info .etc-description {padding:5px 10px; font-size:1rem; border:1px solid var(--point-color); background:#fff;} #view-page .detail-info .etc-description p {margin:0; padding:0; font-size:1rem; line-height:1.6rem; color:#000; text-align:center;} #view-page .detail-info .etc-description p b {color:#18a69c;} /* option selected */ #view-page .detail-info .option-selected ul {margin:0; padding:0; font-size:0;} #view-page .detail-info .option-selected ul li {overflow:hidden; display:block; position:relative; margin:3px 0; padding:0 270px 0 0; font-size:1rem; border:0; border-radius:5px; background:#f5f5f5;} #view-page .detail-info .option-selected ul li:after {content:''; display:block; clear:both;} #view-page .detail-info .option-selected ul li:first-child {border-top:0;} #view-page .detail-info .option-selected ul li .name {padding:15px 15px; font-size: 0.875rem; line-height:1.2rem;} #view-page .detail-info .option-selected ul li .controll {margin-top:10px;} #view-page .detail-info .option-selected ul li .ui.mini.input > input {width:50px; padding:3px 0; font-size: 0.875rem; line-height:1.8rem; font-weight:700;} #view-page .detail-info .option-selected ul li .ui.mini.input .ui.button {border:1px solid #ddd !important; background:#fff;} #view-page .detail-info .option-selected ul li .ui.mini.input .ui.button:hover {background:#e8e8e8; color:#333;} #view-page .detail-info .option-selected ul li .ui.mini.input .ui.compact.button, #view-page .detail-info .option-selected ul li .ui.mini.input .ui.compact.buttons .button {padding:3px 7px 4px;} #view-page .detail-info .option-selected ul li > .price {position:absolute; top:50%; right:10px; width:240px; margin-top:-12px;} #view-page .detail-info .option-selected ul li > .price .currency {float:right; margin:2px 30px 0 0; font-size: 0.8125rem;} #view-page .detail-info .option-selected ul li > .price .currency .money {font-weight:bold; font-size:0.9375rem;} #view-page .detail-info .option-selected ul li > .price .delete {position:absolute; right:0; top:50%; z-index:1; width:24px; height:24px; margin-top:-13px; padding:0; text-align:center; line-height:1; border:0; background:transparent; cursor:pointer;} #view-page .detail-info .option-selected ul li > .price .delete i {margin:0; font-size:22px; color:#999;} /* 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:3px; color:#000; font-size:1.125rem; font-weight:500;} #view-page .detail-info .total-price-area .total.price {float:right; display:block; width:70%; text-align:right; color:#333; font-size:1rem; font-weight:500; letter-spacing:-0.05rem;} #view-page .detail-info .total-price-area .total.price .money {position:relative; width:auto; font-size:1.75rem; color:#f02a2a; font-weight:bold; letter-spacing:-0.05rem; border:0; background:transparent; border-color:#fff; cursor:default;} #view-page .detail-info .total-price-area .total.price .prefix, #view-page .detail-info .total-price-area .total.price .suffix {font-size:1.625rem; font-weight:600;} #view-page .detail-info .total-price-area .total.price > span { font-weight:bold; color:var(--text-total-price-color);} #view-page .detail-info .detail-btn-area {margin:10px 0 10px 0; padding:0; font-size:0;} /* 네이버페이 버튼 */ #view-page .detail-info .detail-btn-area:not(.naverpay-button-area) a { display:inline-block; width:calc(20% - 5px); height:48px !important; margin:0 0 5px 5px; padding:15px 0; font-size:1rem; color:#444; font-weight:500; text-align:center; border:1px solid #ccc; background:#fff; vertical-align:middle; border-radius:3px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } #view-page .detail-info .detail-btn-area {margin:10px 0 0; padding:0; font-size:0;} /* 1단: 구매하기 / 장바구니 / 찜하기 - flex 균등분배 */ #view-page .detail-info .detail-btn-area:not(.naverpay-button-area) {display:flex; gap:8px;} #view-page .detail-info .detail-btn-area:not(.naverpay-button-area) a { flex:1 1 0; width:auto; min-width:0; margin:0; height:48px; padding:0; font-size:1rem; color:#444; font-weight:500; text-align:center; border:1px solid #ccc; background:#fff; box-sizing:border-box; border-radius:5px; display:flex; align-items:center; justify-content:center; } #view-page .detail-info .detail-btn-area:not(.naverpay-button-area) a:hover { position:relative; z-index:1; background:#f7f7f7; } #view-page .detail-info .detail-btn-area a.buy { flex:2 1 0; position:relative; z-index:2; color:var(--text-on-point); font-weight:600; border-color:var(--point-border-color); background:var(--point-color); } #view-page .detail-info .detail-btn-area a.buy:hover { border-color:var(--point-border-color); background:var(--point-hover-color); } #view-page .detail-info .detail-btn-area a.cart {flex:1 1 0;} #view-page .detail-info .detail-btn-area a.wish {flex:0 0 52px; width:52px; padding:0;} #view-page .detail-info .detail-btn-area a.wish .wish-icon.heart.icon {font-size:1.125rem; margin:0;} #view-page .detail-info .detail-btn-area a.wish:hover {color:var(--point-color);} #view-page .detail-info .detail-btn-area a.wish .wish-icon.heart.icon:not(.outline) {color:var(--point-color);} /* 간편결제 버튼 나란히(PC): 카카오페이(좌) → 네이버페이(우). 간격은 gap(순서 무관) */ #view-page .detail-info .simple-pay-area {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-end; gap:14px;} /* 품절 - 단독 노출 */ #view-page .detail-info .detail-btn-area a.soldout { display:block; width:100%; height:48px; margin:0; font-size:1.143rem; font-weight:400; text-align:center; color:#aaa; border:1px solid #ddd; background:#f7f7f7; box-sizing:border-box; cursor:default; display:flex; align-items:center; justify-content:center; } /* 2단: 견적서출력 / 샘플신청 - 보조 영역 */ #view-page .detail-info .detail-sub-btn-area {display:flex; gap:8px; margin-top:8px;} #view-page .detail-info .detail-sub-btn-area a { flex:1 1 0; width:auto; min-width:0; margin:0; height:38px; padding:0; font-size:0.875rem; color:#444; font-weight:500; text-align:center; border:1px solid #ccc; background:#f6f6f6; box-sizing:border-box; border-radius:5px; display:flex; align-items:center; justify-content:center; } #view-page .detail-info .detail-sub-btn-area a:hover {color:#111; border-color:#333;} /* 굿즈 시안 만들기: 관리자 '상품 상세정보' 버튼 아래(이미지 컬럼) */ #view-page .design-btn-area {margin:14px 0 8px; text-align:center;} #view-page .design-btn-area a.btn-goods-designer { display:inline-block; box-sizing:border-box; margin:0; padding:13px 30px; font-size:1.071rem; font-weight:700; line-height:1.2; color:#fff !important; 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; width:100% !important; } #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 .design-btn-area a.btn-goods-designer i {margin:0 6px 0 0; font-size:1.15rem; vertical-align:middle;} /* 공급처 상품 모아보기(관리자 전용): 목록 공급처명과 같은 주황 톤 */ #view-page .detail-image a.btn-seller-search {color:#e8590c !important;} #view-page .detail-image a.btn-seller-search:hover {color:#d9480f !important;} #view-page .detail-image a.btn-seller-search i {margin-right:3px; font-size:0.8125rem; vertical-align:-1px;} /* 관리자 버튼이 네 개라 좁은 열에서 두 줄로 접힌다. 줄끼리 붙지 않게 아래 여백을 준다 */ #view-page .detail-image a.btn-seller-search, #view-page .detail-image a.btn-admin-info, #view-page .detail-image a.btn-margin-sheet, #view-page .detail-image a.btn-product-update {margin-bottom:4px;} /* detail-additional */ #view-page .detail-additional {display:flex; justify-content:space-between;} /* detail-view-area */ #view-page .detail-additional .detail-view-area {flex:1 1 900px;} #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:0 0 260px; margin-top:0; margin-left:40px;} /* 견적요청 sticky */ #view-page .detail-additional .estimate-area h3 {font-size:1rem; font-weight:600;} #view-page .detail-additional .estimate-area h3 i {font-size:1.3rem; font-weight:400;} #view-page .detail-additional .estimate-area > .estimate-sticky {position:sticky; top:var(--estimate-sticky-top, 64px); padding:20px; border:1px solid #eee; background:#fff;} #view-page .detail-additional .estimate-area > div { margin-bottom: 20px; } #view-page .detail-additional .estimate-area .description {padding-top:5px; font-size: 0.8125rem; color:#777;} #view-page .detail-additional .estimate-area .button {width:100%; font-size:1rem !important;} /* 견적요청 / 시안요청 탭 */ #view-page .detail-additional .estimate-area .estimate-tabs {display:flex; margin:-20px -20px 16px;} #view-page .detail-additional .estimate-area .estimate-tabs .estimate-tab {flex:1 1 50%; min-width:0; padding:12px 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:hover {color:#333;} #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; font-size:0.8125rem !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 .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; align-items:center; width:auto; max-width:100%;} /* 좁은 PC 견적카드(260px)에선 캡차를 컴팩트하게 */ #view-page .detail-additional .estimate-area .estimate-captcha .ui.action.input #captcha-image {flex:0 0 auto; width:auto; height:30px !important; max-width:100%; display:block;} #view-page .detail-additional .estimate-area .estimate-captcha .ui.action.input .button {width:auto !important; flex:0 0 auto; padding:8px 9px !important; font-size:.85rem !important;} #view-page .detail-additional .estimate-area .estimate-captcha #captcha-key {width:110px; max-width:100%; min-width:0; box-sizing:border-box;} /* 적당한 고정폭 */ /* detail-nav */ #view-page .detail-nav { position: sticky; top: var(--estimate-sticky-top, 0px); z-index: 100; } #view-page .detail-additional .detail-nav ul {display:flex; justify-content:space-between; margin:0; padding:0; font-size:0; background-color:#fff;} /* 탭 개수만큼 균등 분배 */ #view-page .detail-additional .detail-nav ul li {flex:1 1 0; font-size: 1rem;} #view-page .detail-additional .detail-nav ul li a {position:relative; display:block; height:50px; padding:15px 20px 15px 20px; font-weight:700; color:#333; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; outline:none;} .detail-nav ul li a:focus-visible { outline: 2px solid #111; outline-offset: -2px; border-radius: 2px; } #view-page .detail-additional .detail-nav ul li a:hover {background:#fafafa;} #view-page .detail-additional .detail-nav ul li.on a {position:relative; z-index:1; top:0; padding-top:15px; color:#111; background:#fff; border-bottom:4px solid #111;} #view-page .detail-additional .detail-nav ul li a span {position:relative; top:0; font-size: 0.9375rem;} #view-page .detail-additional .detail-nav ul li a span.label {min-width:21px; min-height:15px; padding:4px 10px !important; font-weight:500 !important;} #view-page #detail {word-break:break-word;} #view-page h3.view-section-title {font-size:1.25rem; font-weight:700;} #view-page h3.view-section-title .sction-count {color:#000;} /* notification */ #view-page #detail .notification {margin:0 0 50px;} #view-page #detail .notification:after {content:''; display:block; clear:both;} #view-page #detail .notification table.notification-table {width:100%; margin:0 0 20px; text-align:left; border-top:1px solid #eee; border-bottom:1px solid #eee; background:#fff;} #view-page #detail .notification table.notification-table caption {padding:0 0 10px; font-size:1rem; font-weight:bold; color:#111; text-align:left;} #view-page #detail .notification table.notification-table caption i {margin-right:0;} #view-page #detail .notification table.notification-table th, #view-page #detail .notification table.notification-table td {padding:10px 15px; border-right:1px solid #eee; font-size: 0.875rem; word-break:break-word;} #view-page #detail .notification table.notification-table th {color:#333; border-bottom:1px solid #eee; background:#fcfcfc;} #view-page #detail .notification table.notification-table td {border-bottom:1px solid #eee; border-color:#eee;} #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;} /* 항목이 홀수개일 때 뒷칸(빈 th/td)은 4열 그리드 유지용 빈칸 — 회색 헤더 배경·구분선 지운다 */ #view-page #detail .notification table.notification-table th:empty {background:transparent; border-right:0;} #view-page #detail .notification table.notification-table td:empty {border-right:0;} /* 주의안내 행: 내용이 길어 한 치수 작게(0.875→0.8125rem) */ #view-page #detail .notification table.notification-table tr.notification-caution td {font-size:0.8125rem; line-height:1.6; color:#666;} /* product-relation-list */ #view-page #detail .product-relation-list .common-title h3 {padding:0 0 10px; font-size:1rem; font-weight:bold; color:#111; text-align:left;} #view-page #detail .product-relation-list .product.list { margin-bottom:0px !important; } #view-page #detail .product-relation-list .product.list.thumb ul.grid li.item { margin: 0 0 20px !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:45px; padding-bottom:30px; word-break:break-word; scroll-margin-top: 30px;} #view-page .product-together-list {margin-top:20px;} #view-page .product-together-list .common-title {padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #000;} #view-page .product-together-list .common-title h3 {font-size:1.125rem; font-weight:600;} /* ── AI 상품 요약 박스 (수량별 단가표 위) ── */ .ai-summary-box{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;} .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-box{position:relative;} .ai-summary-head{padding-right:24px;} .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:9px 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:44px 0 40px;}/* 하단 여백 확대: 아래 상품정보 제공고시와 붙지 않도록 */ .product-faq-title{font-size:18px;font-weight:700;color:#222;margin:0 0 16px;padding-bottom:12px;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:16px 46px 16px 18px;font-size:15px;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:22px;height:22px;line-height:22px;text-align:center;background:#333;color:#fff;border-radius:50%;font-size:12px;margin-right:10px;vertical-align:middle;} .product-faq-q::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;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 18px 18px 50px;font-size:14px;line-height:1.75;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);}} /* ── 콕쿠폰(다운로드 쿠폰) 영역 — 가격정보 아래, 총 합계금액 위 ── */ #view-page .detail-info .option-selected > .coupon {margin:15px 0 0; text-align:right;} #view-page .detail-info .option-selected > .coupon a.btn.coupon {padding:5px 10px 6px; color:#f44336; font-weight:400; border:1px solid #f44336; background:#fff;} #view-page .detail-info .option-selected > .coupon a.btn.coupon:hover {color:#fff; background:#f44336;} .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: 0; min-width: 170px; max-width: 170px; text-align: center; padding: 12px 8px; font-size: 1.1875rem; font-weight: 800; color: var(--text-coupon-color); line-height: 1.15; 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; } /* 상품상세 하단 통 배너(adhook 무관 일반 배너) */ .product-view-bottom-banner { margin: 40px 0 10px; } .product-view-bottom-banner a, .product-view-bottom-banner img { display: block; } .product-view-bottom-banner img { width: 100%; height: auto; border-radius: 8px; } .product-view-bottom-banner > *:not(:last-child) { margin-bottom: 12px; } /* 배너 여러 장이면 세로 간격 */ /* 견적서 요청 모달 */ .ui.mini.modal.estimate-request-modal { width: 400px; max-width: 92vw; } /* 상품공유 QR — 공유 레이어 하단 */ .layer-share .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; } /* 구매수량 행 */ .quantity-field { display:flex; align-items:center; gap:10px; } .quantity-field > .ui.input.quantity { flex:0 0 auto; } .quantity-hints { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.5; } .quantity-hints > span { word-break:keep-all; overflow-wrap:normal; } /* 판매 단위(N개 단위 판매) 안내 — 수량 입력칸 옆 강조. 스타일은 인라인이 아니라 CSS 로 분리 */ .quantity-unit-hint { color:var(--point-color); font-weight:700; } /* 좌측 사이드바 슬롯 — 목록과 동일 규약(빈 슬롯은 레이아웃에서 제거) */ .product-side:empty {display:none;} /* 당일발송 뱃지/배너 */ #view-page .product-detail-info .title-area h2 .sameday-badge {display:inline-flex; align-items:center; gap:2px; margin:0 6px 3px 0; padding:4px 7px; border-radius:4px; background:#f02a2a; color:#fff; font-size:0.813rem; 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.938rem; line-height:1;} #view-page .detail-info .sameday-notice {display:flex; align-items:center; gap:14px; margin:-8px 0 20px; padding:13px 16px; 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:4px; color:#e8590c;} #view-page .detail-info .sameday-notice .sameday-notice-tag {display:block; padding:3px 6px; border-radius:3px; background:#ffd43b; color:#7a4b00; font-size:0.625rem; 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.875rem; line-height:1;} #view-page .detail-info .sameday-notice .sameday-notice-body {display:flex; flex-direction:column; gap:4px; min-width:0;} #view-page .detail-info .sameday-notice .line1 {color:#222; font-size:0.938rem; 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.813rem; 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; } /* 상품상세 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; } /* 3장: 왼쪽 큰 1 + 오른쪽 세로 2 */ .md-pick-count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .md-pick-count-3 .md-pick-cell:nth-child(1) { grid-row: 1 / 3; } /* 4장: 왼쪽 큰 1 + 오른쪽 세로 3 */ .md-pick-count-4 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); } .md-pick-count-4 .md-pick-cell:nth-child(1) { grid-row: 1 / 4; } /* 5장: 왼쪽 큰 1 + 오른쪽 2x2 (스크린샷 레이아웃) */ .md-pick-count-5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .md-pick-count-5 .md-pick-cell:nth-child(1) { grid-column: 1; grid-row: 1 / 3; } /* 갤러리 전체 높이 가이드(왼쪽 큰 셀 기준) */ .md-pick-count-3, .md-pick-count-4, .md-pick-count-5 { min-height: 360px; } .md-pick-count-3 .md-pick-cell, .md-pick-count-4 .md-pick-cell, .md-pick-count-5 .md-pick-cell { min-height: 0; } @media (max-width: 767px) { .md-pick { margin: 22px 0 28px; } .md-pick-title { font-size: 1.1rem; } .md-pick-count-3, .md-pick-count-4, .md-pick-count-5 { min-height: 260px; } } /* 상품상세 도움 버튼: 상품옵션 위 버튼 줄 + 안내 레이어(PC) */ .goods-help-buttons { display: flex; flex-wrap: wrap; /* 버튼이 많으면 다음 줄로 — 마진 덕에 줄 간격도 유지된다 */ align-items: center; /* 글자 버튼과 이미지 버튼이 섞이면 높이가 달라진다 — 세로 가운데로 */ gap: 6px; margin: 0; } /* 옵션표와 같은 열 정렬을 위한 한 행짜리 표 */ #view-page .detail-info table.option-table.goods-help-table { margin: 0 0 2px; } .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: 48px; /* 버튼 줄 높이 상한 — 원본이 더 크면 비율 유지하며 줄인다 */ max-width: 100%; width: auto; height: auto; } /* 안내 레이어 본문 — 이미지는 폭에 맞춰 줄이고, 긴 글은 스크롤 */ .ui.modal.goods-help-layer > .content { max-height: 70vh; 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; } /* 인쇄예시 레이어 폭: Fomantic small 모달의 4/3. 버튼에 data-modal-width 가 있으면 그 값이 우선한다 */ @media only screen and (min-width: 768px) { .ui.small.modal.print-example-layer { width: 93.8%; } } @media only screen and (min-width: 992px) { .ui.small.modal.print-example-layer { width: 907px; } } @media only screen and (min-width: 1200px) { .ui.small.modal.print-example-layer { width: 960px; } } @media only screen and (min-width: 1920px) { .ui.small.modal.print-example-layer { width: 1013px; } } /* 인쇄예시 레이어: 등록 이미지를 세로로 이어 보여준다 */ .ui.modal.print-example-layer > .content { max-height: 70vh; 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 .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:5px 0 0; font-size: 0.875rem; 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: 0 0 140px; 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-list .ui.checkbox input+label[for], #goods-review-list .ui.checkbox input.hidden+label {margin-right:10px; padding-left:18px;} /* 포토리뷰 이미지: 등록폼 미리보기 썸네일 */ .review-photo-field {margin-bottom:10px;} .review-photo-list {display:flex; flex-wrap:wrap; gap:8px; margin-bottom:5px;} .review-photo-list:empty {display:none;} .review-photo-thumb {position:relative; width:72px; height:72px; border:1px solid #e0e0e0; border-radius:4px; 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-list .review-photos {display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;} #goods-review-list .review-photos img {width:64px; height:64px; object-fit:cover; border:1px solid #e8e8e8; border-radius:4px; cursor:pointer;} /* 리뷰유형 탭 */ .review-type-tabs {margin-bottom:12px;} .review-login-prompt { margin: 0; padding: 24px 16px; text-align: center; background: #fafafa; border: 1px dashed #ddd; border-radius: 6px; } .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: 4px; } /* 모바일: 카드 폭이 좁으니 여백만 살짝 압축, 버튼은 풀폭 (터치 영역 확보) */ @media (max-width: 767px) { .review-login-prompt { padding: 20px 16px; } .review-login-btn.ui.tiny.black.button { display: block; width: 100%; } } /* 리뷰 출처 상품 라벨 */ #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;} #goods-qna-list tr.qna-contents {} #goods-qna-list tr.qna-contents td {background: #f9f9f9;} /* 비회원 상품문의 폼: 개인정보 수집·이용 동의 / 캡챠 */ .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; } /* 캡챠 한 줄 정렬: 이미지는 오른쪽 테두리를 지워 버튼과 접합, 높이는 --qna-captcha-h 로 통일 */ .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; }