body { background: #f7f7f7 !important; } #side-left, #side-right {display:none !important;} /* 장바구니 */ #cart-page {max-width:; margin: 0 auto; } #cart-page .container {} /* 상단 - 총 개수 + 전체선택 */ #cart-page .cart-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 16px; } #cart-page .total-count { margin: 0; font-size: 0.9375rem; color: #555; padding:0 15px 0 0;} #cart-page .total-count strong { color: #000; } #cart-page .cart-top .all-select {padding-left:20px;} #cart-page .cart-top .all-select label { font-size: 0.875rem; color: #666; } /* 상품 카드 */ #cart-page .cart-item-list { margin-bottom: 16px; } #cart-page .cart-item { display: flex; gap: 16px; padding: 20px; margin-bottom: 12px; border: 1px solid #e8e8e8; border-radius: 12px; background: #fff; } #cart-page .cart-item .ui.checkbox { margin-top: 4px; flex-shrink: 0; } #cart-page .product-image { flex-shrink: 0; } #cart-page .product-image img.thumb { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; } #cart-page .product-desc { flex: 1; min-width: 0; } #cart-page .desc-top { margin-bottom: 6px; } #cart-page .product-desc a.ui.tiny.header { font-size: 1rem; color: #111; font-weight: 600; } #cart-page .options { margin: 0 0 12px; } #cart-page .options ul { margin: 0; padding: 0; font-size: 0.875rem; list-style: none; } #cart-page .options ul li { margin: 0; padding: 1px 0; color: #777; } #cart-page .options ul li span.option-value { color: #222; } /* 수량/배송비/합계 요약 박스 */ #cart-page .summary-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; padding: 12px 16px; border-radius: 8px; background: #fafafa; } #cart-page .summary-cell .label { display: block; margin-bottom: 2px; font-size: 0.8125rem; color: #999; } #cart-page .summary-cell .value { font-size: 0.875rem; font-weight: 600; color: #333; } #cart-page .summary-cell.total .value { font-size: 1rem; font-weight: 700; color: #111; } #cart-page .summary-cell .value .vat { display: inline-block; margin-left: 0; font-size: 0.8125rem; font-weight: 400; color: #aaa; font-style: normal;} /* 하단 합계 카드의 (부가세 포함)도 상품 행과 같은 모양: em 기본 이탤릭을 끈다 */ #cart-page .summary-row .label .vat { display: inline-block; margin-left: 0; font-size: 0.8125rem; font-weight: 400; color: #aaa; font-style: normal;} /* 추가할인금액 */ #cart-page .dc-info { margin: 0 0 12px; font-size: 0.8125rem; color: #e20000; } #cart-page .dc-info strong { font-weight: 700; } /* 카드 하단 버튼 */ #cart-page .cart-item-actions { display: flex; justify-content: flex-end; gap: 8px; } #cart-page .cart-item-actions .ui.button { margin: 0; font-size: 0.875rem; font-weight:500;} /* 데이터 없음 */ #cart-page .list-no-data { padding: 80px 20px; text-align: center; color: #999; border:1px solid #e8e8e8; border-radius:12px;} /* 전체선택/선택삭제/비우기 버튼줄 */ #cart-page .cart-list-actions { display: flex; gap: 8px; margin-bottom: 24px; } #cart-page .cart-list-actions .ui.button { margin: 0; font-size: 0.875rem; font-weight:500;} /* 결제 예상금액 카드 */ /* 결제 예상금액 카드 - 좌: 금액내역 / 우: 최종금액+버튼 */ #cart-page .cart-summary-card { display: flex; align-items: flex-start; gap: 48px; padding: 2rem 1.5rem; border: 1px solid #e8e8e8; border-radius: 12px; background: #fff; } #cart-page .summary-left { flex: 1; } #cart-page .summary-row { display: flex; justify-content: space-between; padding: 8px 0; } #cart-page .summary-row .label { font-size: 1rem; color: #666; } #cart-page .summary-row .value { font-size: 1rem; font-weight: 600; color: #222; } #cart-page .summary-row .value.minus { color: var(--text-discount-color); } #cart-page .summary-divider { width: 1px; height:100px; background: #eee; } #cart-page .summary-right { flex: 1; text-align: right; margin-top:20px;} #cart-page .summary-right .label { margin: 0 0 6px; font-size: 0.875rem; color: #666; } #cart-page .summary-right .grand-total { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; color: var(--text-total-price-color); } #cart-page .summary-right .mileage { margin: 0 0 18px; font-size: 0.8125rem; color: #999; } #cart-page .summary-order-actions { display: flex; gap: 8px; } #cart-page .summary-order-actions .ui.button { flex: 1; margin: 0; padding: 15px 0; border-radius: ; font-size: 0.9375rem; font-weight: 700; } /* 장바구니 간편결제(네이버페이/카카오): PC 가로 나란히, 그룹 가운데 정렬 */ #cart-page .cart-simple-pay-area { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 14px; margin: 18px 0 0; } #cart-page .cart-naverpay-area { display: flex; justify-content: center; } /* 상단여백은 래퍼가 담당(위 정렬 어긋남 방지) */ #cart-page .cart-naverpay-area #naverpay-cart-button { display: inline-block; } #cart-page .cart-simple-pay-area .cart-kakaopay-area { margin-top: 0; } /* .kakaopay-button-area 기본 margin-top:10px 상쇄 → 네이버와 위 정렬 */ /* 장바구니 상품옵션 수정 */ /* 옵션 목록이 길어져도 모달 크기는 고정, .content 내부에서만 세로 스크롤 */ .ui.modal.cart-update > .content {max-height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch;} .ui.modal.cart-update .detail-info .goods-item {display:table;} .ui.modal.cart-update .detail-info .goods-item .image {display: table-cell; vertical-align: top; width:auto; max-width:80px; border-radius:8px;} .ui.modal.cart-update .detail-info .goods-item .content {display: table-cell; vertical-align: top;} .ui.modal.cart-update .detail-info .goods-item .name {font-size: 1rem; line-height:1.125rem; color: rgba(0,0,0,.87) !important;} .ui.modal.cart-update .detail-info .goods-item .summary {margin:5px 0 0; font-size:0.9286rem; font-weight:normal; color:#666;} .ui.modal.cart-update .detail-info .goods-item .price {margin:5px 0 0; font-size:0.9375rem;} .ui.modal.cart-update .detail-info .goods-item .price .consumer-price {display:inline-block; margin-right:5px; color:#a6a6a6;} .ui.modal.cart-update .detail-info .goods-item .price .discount-rate {color:#d03935; font-size:0.786rem;} /* main info table */ .ui.modal.cart-update .detail-info table.info-table {width:100%; margin:5px 0 0; padding:10px 0 10px; text-align:left; font-size:0.9286rem; border-top:1px solid #ddd;} .ui.modal.cart-update .detail-info table.info-table caption {display:none;} .ui.modal.cart-update .detail-info table.info-table th, .ui.modal.cart-update .detail-info table.info-table td {padding:5px 5px;} .ui.modal.cart-update .detail-info table.info-table th:first-child, .ui.modal.cart-update .detail-info table.info-table td:first-child {} .ui.modal.cart-update .detail-info table.info-table th {padding-right:10px; color:#333; text-align:left; font-weight:400;} .ui.modal.cart-update .detail-info table.info-table td {font-weight:600; text-align:right;} .ui.modal.cart-update .detail-info table.info-table td:last-child {} .ui.modal.cart-update .detail-info table.info-table td .ui.input {font-weight:600;} .ui.modal.cart-update .detail-info table.info-table td .consumer-price {color:#a6a6a6;} .ui.modal.cart-update .detail-info table.info-table td .discount-rate {color:#d03935; font-size:0.786rem;} .ui.modal.cart-update .detail-info table.info-table td .pt-10 {padding-top:10px;} .ui.modal.cart-update .detail-info table.info-table.ui.form .fields {margin:0 !important;} .ui.modal.cart-update .detail-info table.info-table.price-calculate td { text-align: right; } .ui.modal.cart-update .detail-info table.info-table.price-calculate .fields, .ui.modal.cart-update .detail-info table.info-table.price-calculate .field { display: flex; justify-content: flex-end; } .ui.modal.cart-update .detail-info table.info-table.price-calculate .ui.right.labeled.input { display: inline-flex; justify-content: flex-end; width: auto; } .ui.modal.cart-update .detail-info table.info-table.price-calculate .ui.right.labeled.input input { text-align: right; border: 0; background: transparent; font-weight: 600; color: #222; } .ui.modal.cart-update .detail-info table.info-table.price-calculate .ui.right.labeled.input .label { background: transparent; border: 0; font-weight: 600; color: #222; } /* main option table */ .ui.modal.cart-update .detail-info #options {margin-bottom:15px;} .ui.modal.cart-update .detail-info #options .option-selected {margin-top:5px;} .ui.modal.cart-update .detail-info table.option-table {width:100%; text-align:left; font-size:0.9375rem;} .ui.modal.cart-update .detail-info table.option-table caption {display:none;} .ui.modal.cart-update .detail-info table.option-table th, .ui.modal.cart-update .detail-info table.option-table td {padding:5px;} .ui.modal.cart-update .detail-info table.option-table th:first-child, .ui.modal.cart-update .detail-info table.option-table td:first-child {} .ui.modal.cart-update .detail-info table.option-table th {color:#333; text-align:left;} .ui.modal.cart-update .detail-info table.option-table td {} .ui.modal.cart-update .detail-info table.option-table td:last-child {} .ui.modal.cart-update .detail-info table.option-table .ui.default.dropdown:not(.button)>.text, .ui.modal.cart-update .detail-info table.option-table .ui.dropdown:not(.button)>.default.text {color:#333; font-size:0.9375rem;} .ui.modal.cart-update .detail-info table.option-table .ui.input > input::-webkit-input-placeholder {color:#444; font-size:0.9375rem;} .ui.modal.cart-update .detail-info table.option-table .ui.input > input::-moz-placeholder {color:#444; font-size:0.9375rem;} .ui.modal.cart-update .detail-info table.option-table .ui.input > input:-ms-input-placeholder {color:#444; font-size:0.9375rem;} .ui.modal.cart-update .detail-info table.option-table .ui.input.focus > input::-webkit-input-placeholder, .ui.modal.cart-update .detail-info table.option-table .ui.input > input:focus::-webkit-input-placeholder {color:#ccc;} font-size:0.9375rem; .ui.modal.cart-update .detail-info table.option-table .ui.input.focus > input::-moz-placeholder, .ui.modal.cart-update .detail-info table.option-table .ui.input > input:focus::-moz-placeholder {color:#ccc; font-size:0.9375rem;} .ui.modal.cart-update .detail-info table.option-table .ui.input.focus > input:-ms-input-placeholder, .ui.modal.cart-update .detail-info table.option-table .ui.input > input:focus:-ms-input-placeholder {color:#ccc; font-size:0.9375rem;} .ui.modal.cart-update .detail-info table.option-table .input-option input {font-size:0.9375rem; border-radius:0;} .ui.modal.cart-update .detail-info table.option-table .input-option .input-name {font-size:0.875rem; color:#666; margin-bottom:5px;} .ui.modal.cart-update .detail-info table.option-table .ui.selection.dropdown {font-size:0.9375rem;} .ui.modal.cart-update .detail-info table.option-table .ui.selection.dropdown .menu>.item {font-size:0.9375rem;} .ui.modal.cart-update .detail-info table.option-table .ui.quantity input {font-size:0.9375rem;} /* option selected */ .ui.modal.cart-update .detail-info .option-selected ul {margin:0; padding:0; font-size:0;} .ui.modal.cart-update .detail-info .option-selected ul li {overflow:hidden; display:block; position:relative; margin:3px 0; padding:0 200px 0 0; font-size:1rem; border:0; border-radius:5px; background:#f5f5f5;} .ui.modal.cart-update .detail-info .option-selected ul li:after {content:''; display:block; clear:both;} .ui.modal.cart-update .detail-info .option-selected ul li:first-child {border-top:0;} .ui.modal.cart-update .detail-info .option-selected ul li .name {padding:15px 10px; font-size:0.9286rem; line-height:1.2rem;} .ui.modal.cart-update .detail-info .option-selected ul li .controll {margin-top:10px;} .ui.modal.cart-update .detail-info .option-selected ul li .ui.mini.input > input {width:50px; padding:3px 0; font-size:0.9286rem; line-height:1.8rem; font-weight:400; } .ui.modal.cart-update .detail-info .option-selected ul li .ui.mini.input .ui.button {border:1px solid #ddd !important; background:#fff;} .ui.modal.cart-update .detail-info .option-selected ul li .ui.mini.input .ui.button:hover {background:#e8e8e8;} .ui.modal.cart-update .detail-info .option-selected ul li .ui.mini.input .ui.compact.button, .ui.modal.cart-update .detail-info .option-selected ul li .ui.mini.input .ui.compact.buttons .button {padding:3px 7px 4px; border-radius:0 !important;} .ui.modal.cart-update .detail-info .option-selected ul li .ui.mini.input .ui.button:first-child {font-weight:600; border-radius: .28571429rem 0 0 .28571429rem !important;} .ui.modal.cart-update .detail-info .option-selected ul li .ui.mini.input .ui.button:last-child {font-weight:600; border-radius: 0 .28571429rem .28571429rem 0 !important;} .ui.modal.cart-update .detail-info .option-selected ul li > .price {position:absolute; top:50%; right:10px; width:190px; margin-top:-12px;} .ui.modal.cart-update .detail-info .option-selected ul li > .price .currency {float:right; margin:0 30px 0 0; font-size:0.8571rem; } .ui.modal.cart-update .detail-info .option-selected ul li > .price .currency .money {font-weight:bold; font-size:1.071rem; } .ui.modal.cart-update .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;} .ui.modal.cart-update .detail-info .option-selected ul li > .price .delete i {margin:0; font-size:22px; color:#999;} .ui.modal.cart-update .detail-info .option-selected > .coupon {margin:15px 0 0; text-align:right;} .ui.modal.cart-update .detail-info .option-selected > .coupon a.btn.coupon {padding:5px 10px 6px; color:#f44336; font-weight:400; border:1px solid #f44336; background:#fff;} .ui.modal.cart-update .detail-info .option-selected > .coupon a.btn.coupon:hover {color:#fff; background:#f44336;} /* total area */ .ui.modal.cart-update .detail-info .total-price-area {overflow:hidden; margin:0; padding:10px 0 0; border-top:1px solid #ddd;} .ui.modal.cart-update .detail-info .total-price-area .total.text {float:left; display:block; width:30%; padding-top:8px; color:#000; font-size:1.071rem; font-weight:400;} .ui.modal.cart-update .detail-info .total-price-area .total.price {float:right; display:block; width:70%; text-align:right; color:#333; font-size:1.071rem; font-weight:400; letter-spacing:-0.05rem;} .ui.modal.cart-update .detail-info .total-price-area .total.price .money {position:relative; width:auto; font-size:1.5rem; color:var(--text-total-price-color); font-weight:bold; letter-spacing:-0.05rem; border:0; background:transparent; border-color:#fff; cursor:default;} .ui.modal.cart-update .detail-info .total-price-area .total.price > span {font-size:1.5rem; font-weight:bold; color:var(--text-total-price-color);} /* 주문 */ #checkout-page {} #checkout-page .normal-form { margin-top: 20px; } #checkout-page .normal-form .ui.form {background:transparent; border-top:0;} /* 주문서 상품목록 - 장바구니 카드와 동일 톤 */ #checkout-page .order-product-list { max-width: 1200px; margin: 0 auto; } #checkout-page .order-product-list .order-item { display: flex; gap: 16px; padding: 20px; margin-bottom: 12px; border: 1px solid #e8e8e8; border-radius: 12px; background: #fff; } #checkout-page .order-product-list .order-item:last-child { margin-bottom: 0; } #checkout-page .order-product-list .product-image { flex-shrink: 0; } #checkout-page .order-product-list .product-image img.thumb { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; } #checkout-page .order-product-list .product-desc { flex: 1; min-width: 0; } #checkout-page .order-product-list .product-desc a.ui.tiny.header { display: block; margin-bottom: 6px; font-size: 1rem; color: #111; font-weight: 600; } #checkout-page .order-product-list .options { margin: 0 0 12px; } #checkout-page .order-product-list .options ul { margin: 0; padding: 0; font-size: 0.875rem; list-style: none; } #checkout-page .order-product-list .options ul li { margin: 0; padding: 1px 0; color: #777; } #checkout-page .order-product-list .options ul li span.option-value { color: #222; } /* 수량/배송비/합계 요약 박스 */ #checkout-page .order-product-list .summary-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 16px; border-radius: 8px; background: #fafafa; } #checkout-page .order-product-list .summary-cell .label { display: block; margin-bottom: 2px; font-size: 0.8125rem; color: #999; } #checkout-page .order-product-list .summary-cell .value { font-size: 0.875rem; font-weight: 600; color: #333; } #checkout-page .order-product-list .summary-cell.total .value { font-size: 1rem; font-weight: 700; color: #111; } /* 결제금액 카드 배송비 라벨의 부가세 포함도 상품정보 표기와 같은 모양 */ #checkout-page .ui.custom-price-segment .inline.fields > label .vat, #checkout-page .order-product-list .summary-cell .value .vat { display: inline-block; margin-left: 0; font-size:0.8125rem; font-weight: 400; color: #aaa; font-style: normal;} /* 추가할인금액 */ #checkout-page .order-product-list .dc-info { margin: 12px 0 0; font-size: 0.8125rem; color: #e20000; } #checkout-page .order-product-list .dc-info strong { font-weight: 700; } #checkout-page .ui.custom-segment { position: relative; background: #fff; border:1px solid #e8e8e8; -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.0); box-shadow: 0 1px 2px 0 rgba(34,36,38,.0); margin:1rem 0; padding: 1em 1em; border-radius: 12px; } #checkout-page .ui.custom-price-segment { position: relative; background: #fff; border: 2px solid #000; -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.0); box-shadow: 0 1px 2px 0 rgba(34,36,38,.0); margin:0 0 1rem; padding: 1em 1em; border-radius: 12px; } #checkout-page h3.section-title {margin:10px 0 20px; padding:0 0 15px; color:#000; font-size:1.143rem; border-bottom:1px solid #000;} #checkout-page .normal-form .ui.form .field>label, #checkout-page .normal-form .ui.form .inline.fields>label {padding-left:5px;} #checkout-page .normal-form .ui.form .inline.fields.order-password {align-items: initial;} #checkout-page .normal-form .ui.form .inline.fields.order-password label {padding-top:7px;} #checkout-page .normal-form .ui.form .inline.fields.order-password .pointing.label {line-height:1.4em;} #checkout-page .normal-form .ui.form .inline.fields.order-password .pointing.label::before {left:20px !important;} #checkout-page .normal-form .ui.form .field.right.aligned {width:100%; text-align:right; padding-right:0; } #checkout-page .normal-form .ui.divider {margin:8px 0; border-color:#fff;} #checkout-page .normal-form .ui.divider.grey {width:100%; margin:15px 0 15px; border-top-color:#ddd;} #checkout-page .normal-form .ui.form span.price {font-size:1.231rem; font-weight:500;} #checkout-page .normal-form .ui.form span.price.use-point {color:var(--text-discount-color);} #checkout-page .normal-form .ui.form .total-payment { font-weight:bold !important;} #checkout-page .normal-form .ui.form .total-payment .currency {color:var(--text-total-price-color);} #checkout-page .normal-form .ui.form .total-payment .money {font-weight:bold !important;} #checkout-page .normal-form .ui.form span.unit {padding:0 10px 0 0;} #checkout-page .normal-form .ui.form input.right.aligned {text-align:right;} #checkout-page .normal-form .ui.form .point-effect {position:relative;font-weight:bold; color:#222; margin:0px; z-index:1;} #checkout-page .normal-form .ui.form .point-effect:after {position: absolute; display: block; width: 100%; height: 6px; left: 0; bottom: 0; background: #ffd643; border-radius: 4px; content: ''; z-index: -1;} #checkout-page .normal-form .ui.form .side .inline.fields>label { min-width: 80px; flex-shrink: 0; } /* 좁은 화면에서 주문자정보(.side) 입력칸이 카드를 넘지 않게 축소 허용 */ #checkout-page .normal-form .ui.form .side .inline.fields>.field { flex: 1 1 auto; min-width: 0; } #checkout-page .normal-form .ui.form .side .inline.fields>.field>input, #checkout-page .normal-form .ui.form .side .inline.fields>.field>.ui.input { width: 100%; min-width: 0; box-sizing: border-box; } /* 주문자정보(.side) 주소 찾기: 우편번호 input 은 남는 폭, 버튼은 고정 */ #checkout-page .normal-form .ui.form .side .inline.fields>.field>.ui.action.input>input { flex: 1 1 auto; min-width: 0; width: auto; } #checkout-page .normal-form .ui.form .side .inline.fields>.field>.ui.action.input>.ui.button { flex: 0 0 auto; } /* 해외 화면은 라벨이 길고 입력이 둘씩(국가번호+번호)이라 한 줄에 넣으면 번호칸이 잘린다. 라벨을 윗줄로 올려 입력에 카드 폭을 전부 준다 */ #checkout-page .normal-form .ui.form .side.intl-stacked .inline.fields { display: block; } #checkout-page .normal-form .ui.form .side.intl-stacked .inline.fields > label { display: block; width: auto; min-width: 0; margin: 0 0 6px; padding: 0; } /* 주소 둘째·셋째 줄은 라벨이 비어 있어 그대로 두면 빈 줄이 남는다 */ #checkout-page .normal-form .ui.form .side.intl-stacked .inline.fields > label:empty { display: none; } #checkout-page .normal-form .ui.form .side.intl-stacked .inline.fields > .field { width: 100%; padding-left: 0; } #checkout-page .ui.custom-price-segment .inline.fields>label { min-width: 140px !important; font-weight: normal;} #checkout-page .ui.secondary.menu {display:block !important; font-size:0; line-height:0;} #checkout-page .ui.secondary.menu .item { display:inline-block; width:calc(25% - 10px); margin:5px; padding:15px 15px; border:1px solid #eee; font-size:1.077rem; line-height:1.4; text-align:center; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } #checkout-page .ui.secondary.menu .active.item { -webkit-box-shadow: none; box-shadow: none; background: #fff; color: rgba(0,0,0,.95); border-radius: .28571429rem; border-color:#000; color:#000; font-weight:bold; } #checkout-page .ui.secondary.menu .item.icons {clear:both; padding:10px 15px 6px 15px;} #checkout-page .icon-pay {display:block; height:28px; margin:0 auto; overflow:hidden; background:url('/theme/site/giftwiki/giftwiki/base/assets/css/../images/icons/icon_order_pay.svg') 0 0 no-repeat; background-size:auto 28px;} #checkout-page .icon-pay.npay {width:76px;} #checkout-page .icon-pay.kakaopay {width:118px; background-position:-93px 0;} #checkout-page .icon-pay.payco {width:94px; background-position:-246px 0;} #checkout-page .icon-pay.paynow {width:92px; background-position:-376px 0;} #checkout-page .icon-pay.kpay {width:60px; background-position:-486px 0;} #checkout-page .icon-pay.samsungpay {width:150px; background-position:-560px 0;} #checkout-page .normal-form .ui.form .paymethod-type {display:none; width:100%;padding:0 10px;} #checkout-page .normal-form .ui.form .paymethod-type .dropdown.bank { min-width: 400px; } #checkout-page .normal-form .ui.form .tax-info {display:none; width:100%;padding:0;} #checkout-page .normal-form .ui.form .tax-info .taxsave1 {display:none;} #checkout-page .normal-form .ui.form .tax-info .taxsave2 {display:none;} #checkout-page .normal-form .ui.form .tax-info .taxbill {display:none;} #checkout-page .normal-form .ui.form .pay.button {width:100%; border-radius:8px;} #checkout-page .normal-form .ui.form .field.agreement {padding-bottom: 10px;} #checkout-page .normal-form .ui.form .low {position:relative; top:-5px; display:inline-block; width:15px; height:15px; margin-left:15px; border-left:1px dotted #bbb; border-bottom:1px dotted #bbb;} #checkout-page .normal-form .ui.form .desc {padding:0 10px; font-size:1rem;} #checkout-page .normal-form .ui.form a.privacy {float:right; cursor:pointer; margin-top: 28px; margin-right: 8px;} #checkout-page .pg-area.active {min-height:300px; overflow:hidden;} /* PG 영역 넘침 방지 */ #checkout-page .pg-area.active #pay-methods {margin:0 -20px;} /* 결제수단 좌우 여백 확장 */ #checkout-page .normal-form .dropdown.bank {min-width:380px;} #checkout-page .ui.custom-segment input.custom-width20 {width:20% !important;} /* 주문완료 */ #checkout-result-page {} #checkout-result-page .order-result {padding:50px 0 50px 0; text-align:center;} #checkout-result-page .order-result i {margin:0 0 30px; font-size:5rem; line-height:1; color:var(--point-color);} #checkout-result-page .order-result i:before {} #checkout-result-page .order-result p.desc {font-size:1.25rem; line-height:1.6; margin-top:30px;} #checkout-result-page .order-result p.sub-desc {font-size:1rem; line-height:1.6;} #checkout-result-page .order-result a.order-number {font-weight:bold; color:#000;} #checkout-result-page.normal-form .ui.form {background:transparent; border-top:0;} #checkout-result-page .ui.custom-segment { position: relative; background: #fff; border:1px solid #e8e8e8; border-radius:12px; -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.0); box-shadow: 0 1px 2px 0 rgba(34,36,38,.0); margin:1rem 0 2rem; padding: 1em 1em; } #checkout-result-page .ui.huge.button, #checkout-result-page .ui.huge.buttons .button, #checkout-result-page .ui.huge.buttons .or { font-size:1.22857143rem; padding:.98571429em 2.5em .98571429em; } /* 주문/배송조회 */ #list-page {} #list-page .ui.message {background:none;} #list-page .order-search-form .and {padding-top:8px;} #list-page .order-search-form .search {overflow:hidden;} #list-page .info {vertical-align: top;} #list-page .options { font-size: 0.9286rem;} #list-page .ui.table { margin-bottom:20px; } #list-page .ui.table .thumb {max-width:80px;} /* 노이미지 폴백 */ #list-page .ui.table .thumb-box {display:inline-block; width:80px; height:80px; position:relative;} #list-page .ui.table .thumb-box .thumb {width:80px; height:80px; object-fit:cover;} #list-page .ui.table .thumb-box .no-image {width:80px; height:80px; align-items:center; justify-content:center; background:#f5f5f5; border:1px solid #eee; color:#d1d1d1; font-size:1.6rem;} /* 주문상세내역 */ #view-page {} #view-page .ui.stat.message {background:none;} #view-page .ui.stat.message .statistics .label {padding-bottom:10px;} #view-page .ui.stat.message .statistics .value {font-size:1.125rem;} #view-page .info {vertical-align: top;} #view-page .options { font-size: 0.8125rem;} #view-page .options ul { padding:0px; margin-bottom:0;} #view-page .options li {padding:0;color:#666; letter-spacing:0;} #view-page .options li .option-value {padding:0;color:#888888;letter-spacing:0;} #view-page .ui.table { margin-bottom:20px; } #view-page .ui.table .thumb {max-width:80px;} /* 노이미지 폴백 */ #view-page .ui.table .thumb-box {display:inline-block; width:80px; height:80px; position:relative;} #view-page .ui.table .thumb-box .thumb {width:80px; height:80px; object-fit:cover;} #view-page .ui.table .thumb-box .no-image {width:80px; height:80px; align-items:center; justify-content:center; background:#f5f5f5; border:1px solid #eee; color:#d1d1d1; font-size:1.6rem;} #view-page .normal-form { margin-top: 20px; } #view-page .normal-form .ui.form {background:transparent; border-top:0;} #view-page .ui.custom-segment { position: relative; margin:0; padding: 1em; } #view-page .ui.custom-price-segment { position: relative; background: #fff; border: 2px solid #000; -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.0); box-shadow: 0 1px 2px 0 rgba(34,36,38,.0); margin:1rem 0; padding: 1em 1em; } #view-page h3.section-title {margin:10px 0 20px; padding:0 0 15px 5px; color:#000; font-size:1.125rem; border-bottom:1px solid #000;} #view-page .normal-form .ui.form .field {line-height:1.4;} #view-page .normal-form .ui.form .field>label, #view-page .normal-form .ui.form .inline.fields>label {padding-left:5px; min-width: 80px; color:#777;} #view-page .normal-form .ui.form .field.right.aligned {width:100%; text-align:right; padding-right:0; } #view-page .order-summary { display: flex; align-items: stretch; margin: 20px 0; padding: 26px 10px; border: 1px solid rgba(34, 36, 38, .15); border-radius: 12px; background: #fff; box-shadow: none; } /* 공통 아이템 */ #view-page .order-summary .summary-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; position: relative; text-align: center; } #view-page .order-summary .summary-item + .summary-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 36px; background: #eee; } #view-page .order-summary .summary-item.point::before { width:0; } #view-page .order-summary .summary-item .label { font-size: 0.875rem; color: #666; } #view-page .order-summary .summary-item .value { font-size:1.125rem; font-weight: 700; color: #222; } #view-page .order-summary .summary-item .value.minus { color: #111; } /* 최종 결제금액 강조 */ #view-page .order-summary .summary-item.total { flex: 1.4; } #view-page .order-summary .summary-item.total .label { font-size: 0.8929rem; font-weight: 700; color: #111; } #view-page .order-summary .summary-item.total .value { font-size: 1.5rem; font-weight: 800; color: #111; } #view-page .order-summary .summary-item.total .currency { color:var(--text-total-price-color); } /* 구매 적립금 - 브랜드 컬러 강조 */ #view-page .order-summary .summary-item.point { border-radius: 8px; background: #f6fbfa; margin: -6px 0; } #view-page .order-summary .summary-item.point .label { display: flex; align-items: center; gap: 5px; color: #76b9bd; font-weight: 600; } #view-page .order-summary .summary-item.point .value { color: #76b9bd; } #view-page .order-detail { padding: 0; } #view-page .order-detail .ui.segment { border: 0; box-shadow: none; padding: 0; } #view-page .order-detail .ui.grid { margin: 0 -14px; } #view-page .order-detail .ui.grid > .column { padding: 0 14px 28px; } /* 섹션 카드 */ #view-page .order-detail .ui.custom-segment { height: 100%; padding: 26px 28px; border: 1px solid rgba(34, 36, 38, .15); border-radius: 12px; background: #fff; box-shadow:none !important; } /* 섹션 타이틀 */ #view-page .order-detail .section-title { margin: 0 0 18px; padding-bottom: 14px; font-size: 1.125rem ; font-weight: 600; color: #111; border-bottom: 1px solid #111; } /* 항목 행 */ #view-page .order-detail .detail-row { display: flex; align-items: flex-start; gap: 20px; padding: 14px 0; border-bottom: 1px solid #f2f2f2; } #view-page .order-detail .detail-row:last-child { border-bottom: 0; } #view-page .order-detail .detail-row .label { flex: 0 0 90px; width: 90px; font-size: 0.9375rem; color: #999; padding-top: 2px; padding-left:5px; } #view-page .order-detail .detail-row .value { flex: 1; font-size: 0.9375rem; color: #222; font-weight: 500; line-height: 1.5; word-break: break-all; } #view-page .order-detail .detail-row.address .value { line-height: 1.6; } #view-page .order-detail .detail-row .value.strong { font-size: 1.0714rem; font-weight: 700; color: #111; } /* 첨부파일 */ #view-page .order-detail .file-name { display: inline-flex; align-items: center; gap: 5px; color: var(--text-link-color); font-size: 0.8571rem; } #view-page .order-detail .file-name .size { color: #aaa; font-size: 0.7857rem; } /* 영수증 출력 버튼 */ #view-page .order-detail .receipt-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 18px; border-top: 1px solid #f2f2f2; } /* 영수증 칸 앞의 행은 :last-child 가 아니라 아래 테두리가 남는다. 그 테두리를 구분선으로 쓰고 칸 자체의 위 테두리는 뺀다. */ #view-page .order-detail .detail-row + .receipt-actions { margin-top: 0; border-top: 0; } #view-page .order-detail .receipt-actions .ui.button { margin: 0; border-radius: 6px; } /* 구매 상품리뷰 작성 */ .goods-review-write .ui.rating .active.icon {color: #ffe623 !important;} /* 주문서 할인쿠폰 셀렉트: 가장 긴 옵션 기준으로 폭 확장 */ .ui.dropdown.coupon-select { max-width: 100%; } .ui.dropdown.coupon-select > .text { white-space: normal; word-break: keep-all; /* 한글/금액 단어 중간 잘림 방지 */ } .ui.dropdown.coupon-select .menu { /* 메뉴는 박스 폭을 그대로 따른다 */ width: calc(100% + 2px); min-width: calc(100% + 2px); } .ui.dropdown.coupon-select .menu > .item { white-space: normal; word-break: keep-all; /* 폭 상한 초과 시에도 어절 단위로만 줄바꿈 */ } /* 주문서 첨부파일: 썸네일 칩 UI, 세로 스택 */ /* 네이티브 file input 숨김 */ .order-file-field input.order-file-input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; opacity:0; } /* Fomantic inline fields 선택자와 같은 무게로 세로 스택 강제 */ .ui.form .inline.fields .field.order-file-field, .order-file-field {display:flex; flex-direction:column; align-items:flex-start;} /* 칩 목록: 버튼 아래에 쌓이고 넘치면 다음 줄로 */ .order-file-field .order-file-list {display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 0;} .order-file-field .order-file-list:empty {margin:0;} .order-file-thumb {position:relative; width:72px; text-align:center;} .order-file-thumb img, .order-file-thumb .ext {width:72px; height:72px; border:1px solid #e2e2e2; border-radius:8px; box-sizing:border-box;} .order-file-thumb img {object-fit:cover; display:block;} .order-file-thumb .ext {display:flex; align-items:center; justify-content:center; background:#f6f7f9; font-size:12px; font-weight:600; color:#98a2b3; text-transform:uppercase;} .order-file-thumb .order-file-name {display:block; max-width:72px; margin-top:4px; font-size:11px; color:#98a2b3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .order-file-thumb .order-file-del {position:absolute; top:-7px; right:-7px; width:20px; height:20px; line-height:18px; font-size:13px; color:#fff; text-align:center; text-decoration:none; background:#333; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25);} .order-file-thumb .order-file-del:hover {background:#111;} /* 버튼 + 안내문구 한 줄 정렬 */ .order-file-field .order-file-actions {display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;} .order-file-field .order-file-add {margin:0; white-space:nowrap;} .order-file-field .order-file-hint {font-size:12px; color:#98a2b3; line-height:1.4;} /* 굿즈 시안 멀티선택: field 를 세로 flex 로 고정, 안내문구는 셀렉트 아래 */ .ui.form .inline.fields .field.goods-design-field, .goods-design-field {display:flex; flex-direction:column; align-items:stretch;} /* 안내문구는 왼쪽 정렬 고정(상속된 가운데 정렬 차단) */ .goods-design-field .goods-design-hint {align-self:stretch; margin-top:6px; font-size:12px; color:#98a2b3; line-height:1.4; text-align:left;} /* 상담 담당직원: field 를 세로 flex 로 고정, '담당자 변경' 버튼은 셀렉트 아래 왼쪽 */ .ui.form .inline.fields .field.sales-manager-field, .sales-manager-field {display:flex; flex-direction:column; align-items:stretch;} .sales-manager-field .sales-manager-actions {align-self:flex-start; margin-top:6px; display:flex; flex-wrap:wrap; gap:6px;} /* 프로필 보기 — 담당자를 고르기 전에는 감춘다 */ .sales-manager-field .js-sales-manager-profile.hide {display:none;} /* 주문상세 굿즈 시안 제목: 여러 개면 한 줄씩 쌓기 */ .order-goods-design {display:block; line-height:1.6;} /* 배송 주소록 모달 상단 안내 */ .address-book-hint.ui.message { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 10px 14px; font-size: 0.9rem; line-height: 1.5; } .address-book-hint.ui.message > i { margin: 0; font-size: 1rem; opacity: 0.8; } .address-book-hint.ui.message > span { flex: 1 1 auto; } /* 해외 배송 고지: 배송지 국가가 KR 아닐 때만 .active 로 노출 */ .ui.form .intl-order-notice { display: none; margin: 0 0 1em; } .ui.form .intl-order-notice.active { display: block; } /* 착불 배송비 — 금액이 0 이라 '0원'과 구분이 안 되므로 빨간색으로 강조(상품별 줄 + 결제금액 배송비 줄) */ #checkout-page .order-product-list .summary-cell .value .delivery-cod, #checkout-page .ui.custom-price-segment .price.total-delivery-price .delivery-cod { color: #e20000; font-weight: 700; font-style: normal; } /* [최종 협의가격] 협의 조정행 + 버튼 */ #checkout-page .ui.custom-price-segment .negotiate-price-area .price.negotiate-price { color: #e20000; } #checkout-page .ui.custom-price-segment .negotiate-price-btns { display: flex; justify-content: flex-end; align-items: center; gap: 6px; /* 위 행의 Fomantic margin-bottom(1em=16px)과 겹쳐 합쳐지므로 음수로 당긴다 → 실제 간격 10px */ margin-top: -6px; margin-bottom: 8px; } #checkout-page .ui.custom-price-segment .negotiate-price-btns .ui.button { margin: 0; } #checkout-page .ui.custom-price-segment .btn-negotiate-price.applied { border-color: #e20000 !important; color: #e20000 !important; box-shadow: 0 0 0 1px #e20000 inset !important; } /* 협의 금액 입력 모달 — 원 주문금액은 회색 안내, 입력칸은 금액이라 오른쪽 정렬 */ .ui.modal.negotiate-price-modal .negotiate-base-price { color: #888; font-size: 1.077rem; } .ui.modal.negotiate-price-modal input[name=negotiateInput] { text-align: right; } /* 선택 상품 합계 갱신중 표시 */ #cart-page .cart-summary-value { transition: opacity 0.15s; } #cart-page .cart-summary-value.cart-summary-updating { opacity: 0.35; } /* 부분취소 반영 요약: 주문 총계는 주문 당시 값이라 취소 전후를 나란히 적는다 */ #view-page .order-cancel-summary { margin: 20px 0; padding: 18px 20px; border: 1px solid rgba(34, 36, 38, .15); border-radius: 12px; background: #fff; } #view-page .order-cancel-summary .cancel-title { font-size: .9375rem; font-weight: 700; color: #d0021b; margin-bottom: 12px; } #view-page .order-cancel-summary ul { margin: 0; padding: 0; list-style: none; } #view-page .order-cancel-summary li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .9375rem; color: #444; } #view-page .order-cancel-summary li + li { border-top: 1px dashed #eee; } #view-page .order-cancel-summary li em { font-style: normal; font-weight: 700; color: #222; } #view-page .order-cancel-summary li.minus em { color: #d0021b; } #view-page .order-cancel-summary li.total { margin-top: 6px; padding-top: 12px; border-top: 1px solid #ddd; } /* 라벨만 잡는다: 자손으로 두면 금액 안쪽 span(.money·.suffix)까지 물들어 색이 안 바뀐다 */ #view-page .order-cancel-summary li.total > span { font-weight: 700; color: #111; } #view-page .order-cancel-summary li.total em { font-size: 1.25rem; font-weight: 800; color: #111; } /* 취소 카드가 뜨면 위의 결제 확정금액은 지난 값이다: 강조를 카드의 변경 금액으로 옮긴다 */ #view-page .order-summary .summary-item.total.is-superseded .label, #view-page .order-summary .summary-item.total.is-superseded .value, #view-page .order-summary .summary-item.total.is-superseded .value .currency, #view-page .order-summary .summary-row.total.is-superseded .label, #view-page .order-summary .summary-row.total.is-superseded .value, #view-page .order-summary .summary-row.total.is-superseded .value .currency { color: #9aa0a6; } #view-page .order-cancel-summary li.total em, #view-page .order-cancel-summary li.total em .currency { color: var(--text-total-price-color, #d0021b); } /* 구매적립 줄은 결제금액과 성격이 다르다: 합계 아래에서 색으로 갈라 둔다 */ #view-page .order-cancel-summary li.point > span { color: #76b9bd; } #view-page .order-cancel-summary li.point em, #view-page .order-cancel-summary li.point em .currency { color: #76b9bd; } #view-page .order-cancel-summary li.point.minus em, #view-page .order-cancel-summary li.point.minus em .currency { color: #d0021b; } #view-page .order-cancel-summary li.total + li.point { margin-top: 4px; padding-top: 10px; border-top: 1px dashed #eee; }