/* BASIC css start */ /* ========================================================= 가자안전센터 장바구니 · 디자인 리뉴얼 (원본 테이블 구조 유지) - 검증된 테이블 마크업 위에 현대적 스타일만 입힘 → 폭 붕괴 없음 - 견적서 기능/파서는 원본 그대로 ========================================================= */ #cartWrap{ --ink:#222; --sub:#666; --muted:#888; --line:#ddd; --line2:#ccc; --soft:#f7f7f7; --point:#438D46; --green:#438D46; --green-d:#367038; /* 버튼·체크박스·적립 등 = 주문서 브랜드 그린 #438D46 */ --price:#ff3c00; /* 상품 가격·총합계 = 주문서 포인트 주황(레드오렌지) */ font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic','맑은 고딕',sans-serif; color:var(--ink); font-size:13px; line-height:1.5; letter-spacing:-0.01em; -webkit-font-smoothing:antialiased; } #cartWrap *{ box-sizing:border-box; } #cartWrap a{ color:inherit; text-decoration:none; } #cartWrap img{ vertical-align:middle; } /* 위치 내비 숨김 */ #cartWrap .loc-navi{ display:none; } /* 제목 (시안 cart-head) */ #cartWrap .cart-head{ display:flex; align-items:baseline; gap:10px; margin:32px 0 18px; } #cartWrap .cart-head h1{ font-size:24px; font-weight:800; letter-spacing:-0.02em; margin:0; color:var(--ink); } #cartWrap .cart-head .cnt{ font-size:13px; font-weight:700; color:var(--point); } #cartWrap .tit-page{ font-size:24px; font-weight:800; letter-spacing:-0.02em; margin:32px 0 18px; color:var(--ink); } #cartWrap .tit-cart{ font-size:15px; font-weight:700; margin:26px 0 10px; color:var(--ink); } /* 상단 툴바 (전체선택 + 선택삭제/비우기) */ #cartWrap .cart-toolbar{ display:flex; align-items:center; gap:12px; padding:4px 4px 8px; background:transparent; border:0; border-radius:0; margin-bottom:0; } #cartWrap .cart-toolbar .all-check{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:12px; cursor:pointer; color:var(--ink); } #cartWrap .cart-toolbar .tb-actions{ margin-left:auto; display:flex; gap:8px; } #cartWrap .cart-toolbar .t-btn{ display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--sub); border:1px solid var(--line2); border-radius:4px; padding:5px 10px; background:#fff; white-space:nowrap; transition:.15s; } #cartWrap .cart-toolbar .t-btn:hover{ border-color:var(--muted); color:var(--ink); background:#fafbfc; } /* 테이블 카드 */ #cartWrap .table-cart{ background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-bottom:14px; } #cartWrap .table-cart table{ width:100%; border-collapse:collapse; } #cartWrap .table-cart caption{ display:none; } #cartWrap .table-cart thead{ display:none; } /* 컬럼 헤더 숨김(모던 리스트형) */ /* 공급사 소계(총 구매금액) 숨김  하단 합계 박스로 통합. 단 빈 장바구니 안내는 유지 */ #cartWrap .table-cart tfoot td .tb-right{ display:none; } #cartWrap .table-cart tfoot td .tb-center{ padding:44px 20px; text-align:center; font-size:14px; font-weight:600; color:var(--sub); } #cartWrap .table-cart tfoot td{ padding:0; background:transparent; border:0; } /* ── 상품 행 (시안 카드형: 체크 · 썸네일 · 상세 · 컨트롤) ── */ /* 제품 사이 구분선 제거 (요청)  스킨 테두리까지 확실히 제거 */ #cartWrap .table-cart tbody tr.prd-row, #cartWrap .table-cart tbody tr.prd-row > td{ border:0 !important; background-image:none !important; } /* 제품 사이 실선 구분선 (마지막 행 제외) */ #cartWrap .table-cart tbody tr.prd-row:not(:last-child) > td{ border-bottom:1px solid #eee !important; } #cartWrap .prd-row > td{ padding:15px 8px; vertical-align:top; } #cartWrap .prd-row .c-check{ width:40px; text-align:center; padding-top:19px; } #cartWrap .prd-row .c-thumb{ width:80px; text-align:center; padding-top:15px; } #cartWrap .prd-row .c-detail{ position:relative; padding:15px 56px 15px 6px; } #cartWrap .prd-row .c-ctrl{ width:180px; padding:15px 10px 15px 8px; text-align:right; } #cartWrap input[type=checkbox]{ width:19px; height:19px; accent-color:var(--green); cursor:pointer; } /* ===== 관심상품(위시리스트) 모던 리스트 ===== */ #cartWrap .wishlist-cart{ margin-bottom:14px; } #cartWrap .wishlist-cart table{ width:100%; border-collapse:collapse; table-layout:fixed; } /* 관심상품은 항목명(적립/재고 등)을 알 수 있게 헤더 노출 */ #cartWrap .wishlist-cart thead{ display:table-header-group !important; } #cartWrap .wishlist-cart thead th{ padding:10px 6px; background:var(--soft); border-bottom:1px solid var(--line); font-size:12px; font-weight:700; color:var(--sub); text-align:center; } #cartWrap .wishlist-cart thead th .tb-center{ font-size:12px; font-weight:700; color:var(--sub); } #cartWrap .wishlist-cart tbody tr, #cartWrap .wishlist-cart tbody tr > td{ border:0 !important; background:none !important; background-image:none !important; } #cartWrap .wishlist-cart tbody tr:not(:last-child) > td{ border-bottom:1px solid #eee !important; } #cartWrap .wishlist-cart tbody td{ padding:14px 6px; vertical-align:middle; text-align:center; word-break:break-all; } #cartWrap .wishlist-cart td .thumb{ display:block; width:60px; height:60px; margin:0 auto; border:0; overflow:hidden; border-radius:4px; line-height:normal; } #cartWrap .wishlist-cart td .thumb img{ width:60px !important; height:60px !important; object-fit:cover; display:block; border:1px solid var(--line); border-radius:4px; float:none; } #cartWrap .wishlist-cart td .tb-left{ text-align:left; font-weight:700; font-size:13px; color:var(--ink); line-height:1.45; word-break:keep-all; padding-left:4px; } #cartWrap .wishlist-cart td .tb-center{ font-size:12px; color:var(--sub); } #cartWrap .wishlist-cart td .tb-center.tb-bold{ font-weight:800; font-size:14px; color:var(--price); } #cartWrap .wishlist-cart td .txt-right{ width:40px; text-align:center; padding:4px; border:1px solid var(--line2); border-radius:4px; font-size:12px; } #cartWrap .wishlist-cart .w-btns{ display:flex; flex-direction:column; gap:6px; align-items:stretch; } #cartWrap .wishlist-cart .w-btn{ display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border-radius:4px; padding:7px 10px; white-space:nowrap; transition:.15s; } #cartWrap .wishlist-cart .w-btn.cart{ background:var(--green); color:#fff; } #cartWrap .wishlist-cart .w-btn.cart:hover{ background:var(--green-d); } #cartWrap .wishlist-cart .w-btn.del{ background:#fff; border:1px solid var(--line2); color:var(--sub); } #cartWrap .wishlist-cart .w-btn.del:hover{ border-color:var(--muted); color:var(--ink); } /* 썸네일 (스킨 .thumb 50px 강제 override) */ #cartWrap .c-thumb .thumb{ display:block; width:68px; height:68px; margin:0 auto; border:0; overflow:hidden; border-radius:4px; line-height:normal; } #cartWrap .c-thumb .thumb img{ width:68px !important; height:68px !important; object-fit:cover; display:block; border:1px solid var(--line); border-radius:4px; float:none; } /* 상세: 이름/옵션칩/메타 */ #cartWrap .p-name a{ font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.45; } #cartWrap .raw-opt{ display:none; } #cartWrap .p-opts{ margin-top:8px; display:flex; flex-direction:column; gap:4px; } #cartWrap .p-opts .opt{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--sub); flex-wrap:wrap; } #cartWrap .p-opts .opt .k{ color:var(--muted); flex:none; } #cartWrap .p-opts .opt .add{ color:var(--point); font-weight:700; } #cartWrap .p-opts .opt .q{ background:var(--soft); border-radius:3px; padding:1px 7px; font-weight:700; color:var(--sub); font-size:11px; } #cartWrap .p-meta{ margin-top:10px; display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); flex-wrap:wrap; } #cartWrap .p-meta .pt{ color:var(--point); font-weight:700; white-space:nowrap; } #cartWrap .p-meta .ship{ background:var(--soft); border-radius:3px; padding:2px 8px; font-weight:600; color:var(--sub); white-space:nowrap; } /* 배송비(MS_tb_delivery) 한 줄 + 호버 레이어 숨김 */ #cartWrap .p-meta .ship .MS_tb_delivery, #cartWrap .p-meta .ship .MS_deli_txt, #cartWrap .p-meta .ship .MS_deli_block, #cartWrap .p-meta .ship .MS_deli_title, #cartWrap .p-meta .ship .MS_deli_desc{ display:inline; } #cartWrap .p-meta .ship .MS_deli_desc{ margin-left:3px; } #cartWrap .p-meta .ship .MS_layer_delivery{ display:none !important; } /* 관심/삭제 아이콘 (우상단) */ #cartWrap .rowicons{ position:absolute; top:14px; right:6px; display:flex; gap:2px; } #cartWrap .ic-btn{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:4px; color:#b6bdc7; transition:.12s; } #cartWrap .ic-btn:hover{ background:var(--soft); } #cartWrap .ic-btn svg{ width:16px; height:16px; } #cartWrap .ic-wish:hover{ color:#e2823f; } #cartWrap .ic-del:hover{ color:#e23f3f; } /* 컨트롤: 가격/스테퍼/버튼 (오른쪽 정렬) */ #cartWrap .p-price{ font-size:17px; font-weight:800; color:var(--price); white-space:nowrap; line-height:1; } #cartWrap .p-price span{ font-weight:800; } #cartWrap .p-price em{ font-size:12px; font-weight:700; font-style:normal; margin-left:1px; } #cartWrap .p-stepper{ display:inline-flex; align-items:center; width:auto; height:auto; position:static; border:1px solid var(--line2); border-radius:4px; overflow:hidden; background:#fff; margin:10px 0 0; padding:0; vertical-align:middle; } #cartWrap .p-stepper .step{ position:relative; display:block; float:none; width:26px; height:28px; background:#fff; text-decoration:none; margin:0; } #cartWrap .p-stepper .step:hover{ background:var(--soft); } #cartWrap .p-stepper .step::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:11px; height:1.6px; background:var(--sub); } #cartWrap .p-stepper .step-up::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1.6px; height:11px; background:var(--sub); } #cartWrap .p-stepper input.txt-spin{ float:none; width:34px; height:28px; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font-weight:800; font-size:13px; color:var(--ink); background:#fff; -moz-appearance:textfield; padding:0; margin:0; } #cartWrap .p-stepper input.txt-spin::-webkit-outer-spin-button, #cartWrap .p-stepper input.txt-spin::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } #cartWrap .p-ctrl-btns{ margin-top:8px; display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; } #cartWrap .p-update, #cartWrap .p-optbtn{ display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:var(--sub); border:1px solid var(--line2); border-radius:4px; padding:5px 10px; background:#fff; transition:.15s; } #cartWrap .p-update:hover{ border-color:var(--muted); color:var(--ink); } #cartWrap .p-optbtn:hover{ border-color:var(--ink); color:var(--ink); background:var(--soft); } /* 합계 박스 (시안 수식형) */ #cartWrap .basket-totalprice.sum-card{ margin-top:14px; padding:24px 20px 20px; border:1px solid var(--line); border-radius:4px; background:#fff; height:auto; display:block; } #cartWrap .sum-card .equation{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; } #cartWrap .sum-card .eq-i{ text-align:center; } #cartWrap .sum-card .eq-i .l{ font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:5px; } #cartWrap .sum-card .eq-i .v{ font-size:19px; font-weight:800; color:var(--ink); } #cartWrap .sum-card .eq-i .v small{ font-size:12px; font-weight:700; } #cartWrap .sum-card .eq-op{ font-size:17px; font-weight:700; color:var(--muted); padding-top:16px; } #cartWrap .sum-card .eq-i.total .l{ color:var(--price); } #cartWrap .sum-card .eq-i.total .v{ font-size:26px; color:var(--price); } #cartWrap .sum-card .eq-note{ text-align:center; margin-top:12px; font-size:12px; color:var(--sub); } #cartWrap .sum-card .eq-note b{ color:var(--point); font-weight:700; } #cartWrap .sum-card .ship-note{ text-align:center; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line2); font-size:11.5px; color:var(--muted); } /* 회원 등급 */ #cartWrap .mem-lvl{ margin-top:16px; padding:14px 16px; background:var(--soft); border-radius:4px; font-size:12.5px; color:var(--sub); line-height:1.6; overflow:hidden; } #cartWrap .mem-lvl .lvl-img{ float:left; margin-right:10px; } #cartWrap .mem-lvl .lvl-img img{ height:34px; width:auto; } #cartWrap .mem-lvl em{ color:var(--green); font-style:normal; font-weight:700; } /* 배송 메시지 */ #cartWrap .delivery{ margin-top:14px; text-align:center; font-size:12px; color:var(--muted); } /* 하단 버튼 (시안 3버튼: 계속쇼핑 / 견적서출력 / 주문하기) */ #cartWrap .actions{ display:flex; gap:10px; margin-top:16px; } #cartWrap .actions .abtn{ display:inline-flex; align-items:center; justify-content:center; flex:1; height:52px; border-radius:4px; font-size:14px; font-weight:700; border:1px solid var(--line2); background:#fff; color:var(--sub); cursor:pointer; transition:.15s; text-align:center; } #cartWrap .actions .abtn:hover{ background:#fafbfc; border-color:var(--muted); color:var(--ink); } #cartWrap .actions .abtn.dark{ background:#fff; border-color:var(--ink); color:var(--ink); } #cartWrap .actions .abtn.dark:hover{ background:var(--ink); color:#fff; } #cartWrap .actions .abtn.order{ flex:1.6; background:var(--green); border-color:var(--green); color:#fff; font-size:15px; font-weight:800; } #cartWrap .actions .abtn.order:hover{ background:var(--green-d); border-color:var(--green-d); color:#fff; } /* 네이버페이 배너 */ #cartWrap .npay-event-banner{ margin-top:20px; } #cartWrap .npay-event-banner img{ max-width:100%; height:auto; } /* 반응형 */ @media (max-width:768px){ #cartWrap .table-cart td{ padding:12px 6px; } #cartWrap .thumb img{ width:64px; height:64px; } #cartWrap .sum-card .equation{ gap:12px; } #cartWrap .sum-card .eq-i.total .v{ font-size:22px; } #cartWrap .actions{ flex-wrap:wrap; } #cartWrap .actions .abtn{ flex:1 1 46%; } #cartWrap .actions .abtn.order{ flex:1 1 100%; } } /* ========================================================= 가자안전센터 견적서 CSS (원본 그대로 · 팝업 오버레이) ========================================================= */ #gaja-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 99999; overflow-y: auto; } #gaja-paper { background: white; width: 794px; margin: 30px auto; padding: 24px 28px 20px; font-family: '맑은 고딕','Malgun Gothic',sans-serif; font-size: 11px; color: #111; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .gaja-btn-wrap { text-align: center; margin-bottom: 14px; } .gaja-btn-print { background: #2d6b2d; color: white; border: none; padding: 9px 32px; font-size: 13px; font-weight: bold; cursor: pointer; border-radius: 4px; letter-spacing: 2px; margin: 0 4px; } .gaja-btn-print:hover { background: #1f4f1f; } .gaja-btn-close { background: #888; color: white; border: none; padding: 9px 20px; font-size: 12px; cursor: pointer; border-radius: 4px; } .gaja-title { text-align: center; font-size: 26px; font-weight: bold; letter-spacing: 8px; padding: 10px 0 18px; } .gaja-header-wrap { display: table; width: 100%; margin-bottom: 6px; } .gaja-header-left { display: table-cell; width: 57%; vertical-align: top; padding-right: 10px; } .gaja-header-right { display: table-cell; width: 43%; vertical-align: top; } .gaja-date-row { font-size: 11px; font-weight: bold; margin-bottom: 10px; line-height: 1.8; } .gaja-recv-row { display: flex; align-items: flex-end; height: 26px; } .gaja-recv-key { width: 44px; white-space: nowrap; flex-shrink: 0; } .gaja-recv-col { width: 14px; text-align: center; flex-shrink: 0; } .gaja-recv-val { width: 185px; flex-shrink: 0; border-bottom: 1.2px solid #333; height: 100%; display: flex; align-items: flex-end; padding-bottom: 2px; padding-left: 4px; } .gaja-recv-empty { width: 185px; flex-shrink: 0; border-bottom: 1.2px solid #333; height: 100%; } .gaja-kwijung { padding-left: 6px; white-space: nowrap; padding-bottom: 2px; } .gaja-send-block { font-size: 11px; margin-top: 6px; } .gaja-send-row { display: flex; align-items: center; height: 26px; } .gaja-send-email { padding-left: 58px; color: #1a6db5; text-decoration: underline; font-size: 10.5px; } .gaja-logo-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .gaja-logo-url { font-size: 13px; font-weight: bold; color: #1a6db5; text-decoration: underline; } .gaja-logo-img { height: 36px; width: auto; } .gaja-sup-img { width: 100%; display: block; } .gaja-sub-right { text-align: right; font-size: 11px; margin: 4px 0 5px; } .gaja-total-bar { display: flex; align-items: stretch; border: 1.5px solid #888; margin-bottom: 6px; min-height: 44px; } .gaja-total-label { background: #f0f0f0; padding: 6px 12px; font-weight: bold; font-size: 10.5px; border-right: 1.5px solid #888; display: flex; flex-direction: column; justify-content: center; text-align: center; white-space: nowrap; line-height: 1.5; min-width: 76px; } .gaja-total-amount { padding: 6px 14px; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 8px; } .gaja-table { width: 100%; border-collapse: collapse; font-size: 10.5px; border-top: 2px solid #222; table-layout: fixed; } .gaja-table th { background: #f0f0f0; color: #111; padding: 6px 3px; text-align: center; border: 1.5px solid #888; font-weight: bold; font-size: 10.5px; height: 36px; } .gaja-table td { border: 1px solid #aaa; padding: 5px 3px; text-align: center; vertical-align: middle; font-size: 10.5px; height: 38px; background: white; overflow: hidden; word-break: break-word; } .gaja-table td.gr { text-align: right; padding-right: 5px; } .gaja-table td.gg { color: #bbb; text-align: right; padding-right: 5px; } .gaja-table tr.sep td { text-align: center; color: #777; font-style: italic; background: #fafafa !important; } .gaja-table tfoot td { border: 1px solid #aaa; border-top: 2px solid #555; background: #f0f0f0; font-weight: bold; padding: 5px 3px; font-size: 10.5px; height: 32px; text-align: center; } .gaja-table tfoot td.gr { text-align: right; padding-right: 5px; } .gaja-bigo { display: flex; border: 1.5px solid #888; border-top: none; min-height: 54px; font-size: 10.5px; } .gaja-bigo-label { background: #f0f0f0; padding: 6px 10px; font-weight: bold; border-right: 1.5px solid #888; display: flex; align-items: center; white-space: nowrap; min-width: 36px; } .gaja-bigo-content { padding: 6px 12px; line-height: 2.0; } .gaja-brands-img { margin-top: 8px; width: 100%; display: block; } .gaja-footer { text-align: right; font-size: 10.5px; font-weight: bold; margin-top: 6px; } /* ===== END ===== */ /* BASIC css end */