@charset "utf-8";
/* ==========================================================================
rb.BoardFactory — 부품: 쇼핑몰 화면 (상품 상세 · 탭 · 후기 · 문의 · 관련상품 · 장바구니 ·
주문서 · 주문내역 · 마이페이지)
쇼핑몰 화면에만 쓰이는 목업 규칙 — 모든 화면에 싣던 sub.css 에서 옮겼다.
쇼핑몰 머리(shop/shop.head.php)가 bf_part('shop-page') 로 싣는다.
theme.css 의 영카트 마크업 보정(콘텐츠샵 · 주문서 절)은 마감층 순서를 지키려고 그 자리에 둔다.
========================================================================== */
/* --------------------------------------------------------------------------
13. 보드 상세 — sub.css 에서
-------------------------------------------------------------------------- */
.pd-top {
display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
gap: 36px;
padding: 28px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm);
}
.pd-main {
display: block; aspect-ratio: 640 / 448;
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden; background: var(--plate);
}
.pd-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 큰 그림 = '크게 보기' 링크 — 누르면 사진 뷰어(rb.js/bf.viewer.js). 오른쪽 아래 돋보기는 올렸을 때 또렷해진다 */
.pd-zoom { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.pd-zoom-badge {
position: absolute; right: 12px; bottom: 12px;
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255, 255, 255, .92);
box-shadow: var(--sh-sm);
color: var(--ink-700);
opacity: .8;
transition: opacity .18s, transform .18s;
}
.pd-zoom-badge .bf-ico { width: 18px; height: 18px; }
.pd-zoom:hover .pd-zoom-badge,
.pd-zoom:focus-visible .pd-zoom-badge { opacity: 1; transform: scale(1.06); }
.pd-zoom:focus-visible { outline: 3px solid var(--sky-400); outline-offset: -3px; }
:root[data-theme="dark"] .pd-zoom-badge { mix-blend-mode: normal; background: rgba(21, 31, 41, .9); color: var(--ink-800); }
/* 다크 — 제품 사진은 배경이 흰색이라 밝은 판(--plate) 위에 곱셈 합성해 경계를
지운다. isolation 은 합성을 판 안으로 가둔다(목업 theme.css 2절). 아래 썸네일도 같다 */
:root[data-theme="dark"] .pd-main { isolation: isolate; }
:root[data-theme="dark"] .pd-main img { mix-blend-mode: var(--plate-blend); }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.pd-thumbs button {
display: block; width: 100%; aspect-ratio: 1 / 1;
border: 1px solid var(--line);
border-radius: var(--r-sm);
overflow: hidden; background: var(--plate);
transition: border-color .2s;
}
.pd-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root[data-theme="dark"] .pd-thumbs button { isolation: isolate; }
:root[data-theme="dark"] .pd-thumbs button img { mix-blend-mode: var(--plate-blend); }
.pd-thumbs li.on button,
.pd-thumbs button:hover { border-color: var(--sky-b3); }
.pd-cate { font-size: 13px; font-weight: 600; color: var(--sky-t1); }
.pd-name {
margin-top: 7px;
font-size: 26px; font-weight: 700; line-height: 1.34;
letter-spacing: -.8px; color: var(--ink-900);
}
.pd-sub { margin-top: 8px; font-size: 14.5px; color: var(--ink-500); }
.pd-score { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; }
.pd-stars { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink-800); }
.pd-stars .ico { width: 16px; height: 16px; fill: var(--amber); stroke: var(--amber); }
.pd-score a { color: var(--ink-500); text-decoration: underline; }
.pd-score a:hover { color: var(--sky-t2); }
.pd-price {
margin-top: 16px; padding-bottom: 18px;
border-bottom: 1px solid var(--line);
font-size: 16px; color: var(--ink-600);
}
.pd-price b {
font-size: 32px; font-weight: 800; color: var(--ink-900);
letter-spacing: -1px;
}
.pd-was { margin-left: 8px; font-size: 14.5px; color: var(--ink-300); text-decoration: line-through; }
.pd-summary { margin-top: 18px; }
.pd-summary > div { display: flex; gap: 14px; padding: 6px 0; font-size: 14px; }
.pd-summary dt { flex: none; width: 78px; color: var(--ink-400); }
.pd-summary dd { color: var(--ink-700); }
.pd-summary .in-stock { color: var(--mint); font-weight: 600; }
.pd-buy { margin-top: 22px; }
.pd-btns { display: flex; gap: 8px; margin-top: 12px; }
.pd-btns .bf-btn { flex: 1 1 0; height: 54px; font-size: 16px; }
.pd-btns .ico { width: 18px; height: 18px; }
.pd-sub-btns {
display: flex; align-items: center; gap: 18px;
margin-top: 16px; padding-top: 16px;
border-top: 1px dashed var(--line);
}
.pd-sub-btns button {
display: inline-flex; align-items: center; gap: 5px;
font-size: 13.5px; color: var(--ink-500);
transition: color .18s;
}
.pd-sub-btns button:hover { color: var(--sky-t2); }
.pd-sub-btns .ico { width: 15px; height: 15px; }
/* 상세 탭 */
.detail-tab { margin-top: 24px; }
.dt-btns {
display: flex; flex-wrap: wrap; gap: 4px;
padding: 6px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--sh-xs);
}
.dt-btn {
flex: 1 1 0;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
height: 46px; padding: 0 14px;
border-radius: var(--r-sm);
font-size: 15px; font-weight: 500; color: var(--ink-500);
transition: all .2s;
}
.dt-btn:hover { background: var(--sky-50); color: var(--sky-t2); }
.dt-btn.on { background: var(--sky-500); color: #fff; font-weight: 600; }
.dt-btn i {
font-family: var(--font-en);
font-size: 12px; font-weight: 700; opacity: .75;
}
.dt-panel {
display: none;
margin-top: 16px; padding: 24px 26px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm);
}
.dt-panel.on { display: block; animation: fadeIn .3s ease; }
.review-list li { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.review-list li:first-child { padding-top: 0; }
.review-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.rv-head { display: flex; align-items: center; gap: 10px; }
.rv-star {
display: inline-flex; align-items: center; gap: 3px;
font-family: var(--font-en);
font-size: 14px; font-weight: 700; color: var(--amber);
}
.rv-star .ico { width: 15px; height: 15px; fill: var(--amber); stroke: var(--amber); }
.rv-head b { font-size: 14px; font-weight: 600; color: var(--ink-800); }
.rv-head i { font-size: 12.5px; color: var(--ink-400); }
.rv-text { margin-top: 8px; font-size: 14.5px; line-height: 1.7; color: var(--ink-600); }
.qna-list li { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.qna-list li:first-child { padding-top: 0; }
.rel-sec { margin-top: 40px; }
.rel-sec .sec-head {
display: flex; align-items: center; gap: 14px;
padding-bottom: 16px; margin-bottom: 18px;
border-bottom: 1px solid var(--line);
}
/* --------------------------------------------------------------------------
19. 1:1 문의 내역 — sub.css 에서
-------------------------------------------------------------------------- */
.qna-state {
display: inline-flex; align-items: center; justify-content: center;
min-width: 58px; height: 23px; padding: 0 8px;
border-radius: var(--r-xs);
font-size: 11.5px; font-weight: 700;
}
.qna-done { background: var(--sky-100); color: var(--sky-t3); }
.qna-wait { background: #FFF2EF; color: var(--point); }
:root[data-theme="dark"] .qna-wait { background: #3B221F; }
/* --------------------------------------------------------------------------
20. 마이페이지 — sub.css 에서
-------------------------------------------------------------------------- */
/* 마이페이지 — 프로필 · 숫자 칸 · 최근 주문/내가 쓴 글 · 찜한 상품 사이 간격.
메인은 .content-main 의 gap 으로 띄우지만 이 화면 감싸개(.sub-body)에는 없어 붙어 있었다 */
.my-wrap { display: flex; flex-direction: column; gap: 22px; }
.my-wrap > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-profile {
display: flex; align-items: center; gap: 18px;
padding: 24px 26px;
background: linear-gradient(135deg, var(--surface), var(--sky-50));
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm);
}
.my-thumb {
flex: none;
display: flex; align-items: center; justify-content: center;
width: 68px; height: 68px; border-radius: 50%;
background: linear-gradient(140deg, var(--sky-300), var(--sky-600));
color: #fff;
box-shadow: 0 6px 16px rgba(62,159,222,.28);
}
.my-thumb .ico { width: 34px; height: 34px; }
.my-txt { flex: 1 1 auto; min-width: 0; }
.my-name { font-size: 16px; color: var(--ink-600); }
.my-name b { font-size: 20px; font-weight: 800; color: var(--ink-900); }
.my-name .mem-lv { margin-left: 6px; display: inline; }
.my-sub { margin-top: 4px; font-size: 13px; color: var(--ink-400); }
.my-bar { margin-top: 12px; max-width: 360px; }
.my-bar-info { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--ink-500); }
.my-bar-info b { color: var(--sky-t2); font-weight: 700; }
.my-stat {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px; margin-top: 16px;
}
.my-stat a {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 18px 8px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-md);
transition: all .2s;
}
.my-stat a:hover { border-color: var(--sky-b2); box-shadow: var(--sh-sm); }
.my-stat em { font-size: 12.5px; color: var(--ink-500); }
.my-stat b {
font-family: var(--font-en);
font-size: 22px; font-weight: 800; color: var(--sky-t3);
}
.my-stat i { font-size: 11.5px; color: var(--ink-400); }
.my-order li {
display: flex; align-items: center; gap: 12px;
padding: 12px 0;
}
.my-order li + li { border-top: 1px solid var(--line-soft); }
/* 목업은 줄 전체가 링크가 아니지만 우리는 주문 상세로 보내야 해서 로
감쌌다. 그러면 li 의 flex 가 하나만 잡으므로 줄 배치를 a 가 이어받는다. */
.my-order li > a {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; gap: 12px;
}
.my-order li > a:hover .ord-body strong { color: var(--sky-t3); }
.ord-thumb {
flex: none; width: 56px; height: 56px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
overflow: hidden; background: var(--plate);
}
.ord-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root[data-theme="dark"] .ord-thumb { isolation: isolate; }
:root[data-theme="dark"] .ord-thumb img { mix-blend-mode: var(--plate-blend); }
.ord-body { flex: 1 1 auto; min-width: 0; }
.ord-body em {
display: block;
font-family: var(--font-en);
font-size: 12px; color: var(--ink-400);
}
.ord-body strong {
display: block; margin-top: 3px;
font-size: 14.5px; font-weight: 600; color: var(--ink-800);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ord-state {
display: inline-flex; align-items: center;
height: 22px; padding: 0 9px; margin-top: 6px;
border-radius: var(--r-xs);
background: var(--sky-100); color: var(--sky-t3);
font-size: 11.5px; font-weight: 700;
}
.ord-state.ord-done { background: #E4F8F3; color: #0F9D86; }
:root[data-theme="dark"] .ord-state.ord-done { background: #113630; color: #4FD9B8; }
.ord-state.ord-cancel { background: var(--plate); color: var(--ink-400); }
/* 주문취소는 목업에 없어 테마가 더한 배지다. --plate(사진 판)는 다크에서 오히려
밝아지므로(#E7EEF4) 목업 다크의 '종료' 회색을 쓴다 */
:root[data-theme="dark"] .ord-state.ord-cancel { background: #28323B; }
/* 주문내역 화면(shop/orderinquiry.php) — 마이페이지의 .my-order 를 그대로
쓰되, 줄 오른쪽에 금액이 한 칸 더 붙는다. */
.od-total { margin-bottom: 12px; font-size: 13.5px; color: var(--ink-500); }
.od-total b { color: var(--sky-t3); font-weight: 700; }
.od-list li a { align-items: center; }
.ord-sum {
flex: none; width: 150px;
text-align: right; line-height: 1.3;
}
.ord-sum b {
font-family: var(--font-en);
font-size: 17px; font-weight: 800; color: var(--ink-900);
}
.ord-sum i { margin-left: 2px; font-size: 12.5px; color: var(--ink-500); }
.od-misu { display: block; margin-top: 3px; font-size: 12px; color: var(--point); }
@media (max-width: 760px) {
.ord-sum { width: auto; padding-left: 62px; text-align: left; }
.od-list li a { flex-wrap: wrap; }
}
/* --------------------------------------------------------------------------
21. 상품 옵션 · 장바구니 · 주문 — sub.css 에서
-------------------------------------------------------------------------- */
.pd-option { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.opt-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink-700); }
.pd-option select {
width: 100%; height: 48px; padding: 0 15px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--sky-50);
font-size: 15px; cursor: pointer;
}
.pd-option select:focus { background: var(--surface); border-color: var(--sky-b3); }
.opt-added { margin-top: 10px; }
.opt-item {
padding: 14px 16px;
background: var(--sky-50);
border: 1px solid var(--line);
border-radius: var(--r-sm);
}
.opt-name { display: block; font-size: 14px; font-weight: 600; color: var(--ink-800); }
.opt-ctl { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.opt-ctl .qty { background: var(--surface); }
.opt-price {
margin-left: auto;
font-size: 16px; font-weight: 700; color: var(--ink-900);
}
.opt-del {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
color: var(--ink-400);
}
.opt-del:hover { background: var(--surface); color: var(--point); }
.opt-del .ico { width: 14px; height: 14px; }
.pd-total {
margin-top: 16px; padding-top: 16px;
border-top: 1px dashed var(--line);
text-align: right;
font-size: 14.5px; color: var(--ink-600);
}
.pd-total b {
margin-left: 8px;
font-size: 26px; font-weight: 800; color: var(--point);
letter-spacing: -.5px;
}
.cart-wrap {
display: grid; grid-template-columns: minmax(0, 1fr) 320px;
gap: 24px; align-items: start;
}
.cart-main { min-width: 0; }
.cart-tools {
display: flex; align-items: center; justify-content: space-between;
padding: 0 4px 12px;
}
.cart-tools .chk { font-size: 14.5px; color: var(--ink-700); }
.cart-del-sel {
font-size: 13.5px; color: var(--ink-500);
text-decoration: underline;
}
.cart-del-sel:hover { color: var(--point); }
.cart-list {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm);
overflow: hidden;
}
.cart-item {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px;
}
.cart-item + .cart-item { border-top: 1px solid var(--line-soft); }
.cart-chk { flex: none; }
.cart-thumb {
flex: none; width: 82px; height: 82px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
overflow: hidden; background: var(--plate);
}
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root[data-theme="dark"] .cart-thumb { isolation: isolate; }
:root[data-theme="dark"] .cart-thumb img { mix-blend-mode: var(--plate-blend); }
.cart-body { flex: 1 1 auto; min-width: 0; }
.cart-name {
display: block;
font-size: 15.5px; font-weight: 600; color: var(--ink-900);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-name:hover { color: var(--sky-t3); }
.cart-opt { margin-top: 4px; font-size: 13px; color: var(--ink-400); }
/* 옵션 줄 — 코어 default_shop.css 가 글자 #000 · 옵션 칩 #e2eaf6/#3a8afd 를 박아 다크에서 글자가
안 보였다. 장바구니 · 주문서 · 주문내역이 같은 마크업(print_item_options)이다 */
.bf-container .sod_opt li { color: var(--ink-600); }
.bf-container .sod_opt li::before { background: var(--sky-100); color: var(--sky-t1); font-weight: 600; }
.cart-body .qty { margin-top: 10px; }
.cart-body .qty button { width: 34px; height: 38px; }
.cart-body .qty input { width: 44px; height: 38px; }
.cart-price { flex: none; text-align: right; }
.cart-price b { font-size: 18px; font-weight: 700; color: var(--ink-900); }
.cart-price i { font-size: 13px; color: var(--ink-500); }
.cart-del {
flex: none;
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%;
color: var(--ink-300);
}
.cart-del:hover { background: var(--sky-50); color: var(--point); }
.cart-del .ico { width: 15px; height: 15px; }
.cart-notice {
display: flex; align-items: flex-start; gap: 10px;
margin-top: 14px; padding: 14px 18px;
background: var(--sky-50);
border: 1px solid var(--sky-b1);
border-radius: var(--r-md);
font-size: 14px; color: var(--ink-600);
}
.cart-notice .ico { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--sky-t1); }
.cart-notice b { font-weight: 700; color: var(--sky-t3); }
.order-sum {
position: sticky; top: 90px;
padding: 24px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm);
}
.os-tit {
padding-bottom: 14px; margin-bottom: 14px;
border-bottom: 1px solid var(--line);
font-size: 17px; font-weight: 700; color: var(--ink-900);
}
.os-list > div {
display: flex; align-items: center; justify-content: space-between;
padding: 7px 0;
font-size: 14.5px;
}
.os-list dt { color: var(--ink-500); }
.os-list dd { color: var(--ink-800); font-weight: 500; }
.os-minus { color: var(--point) !important; }
.os-total {
display: flex; align-items: baseline; justify-content: space-between;
margin-top: 14px; padding-top: 16px;
border-top: 2px solid var(--ink-800);
font-size: 14.5px; font-weight: 600; color: var(--ink-700);
}
.os-total b {
font-size: 28px; font-weight: 800; color: var(--point);
letter-spacing: -.6px;
}
.os-total i { margin-left: 2px; font-size: 15px; color: var(--ink-700); }
.os-point { margin-top: 8px; text-align: right; font-size: 12.5px; color: var(--ink-400); }
.os-point b { color: var(--sky-t2); font-weight: 700; }
.os-btn { width: 100%; height: 52px; margin-top: 10px; font-size: 16px; }
.os-use { display: flex; gap: 6px; margin-top: 14px; }
.os-use input {
flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 13px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--sky-50);
font-family: var(--font-en);
font-size: 14px; text-align: right;
}
.os-use .bf-btn { flex: none; }
.os-have { margin-top: 6px; text-align: right; font-size: 12.5px; color: var(--ink-400); }
.os-have b { color: var(--sky-t2); font-weight: 700; }
.order-goods li {
display: flex; align-items: center; gap: 14px;
padding: 14px 0;
}
.order-goods li + li { border-top: 1px solid var(--line-soft); }
.order-goods b { flex: none; font-size: 15px; font-weight: 700; color: var(--ink-900); }
/* --------------------------------------------------------------------------
24. 반응형 — sub.css 에서
-------------------------------------------------------------------------- */
@media (max-width: 1280px) {
.pd-top { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 26px; }
.pd-name { font-size: 23px; }
.cart-wrap { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (max-width: 1080px) {
.pd-top { grid-template-columns: minmax(0, 1fr); }
.pd-main { max-width: 480px; }
.pd-thumbs { max-width: 480px; }
.cart-wrap { grid-template-columns: minmax(0, 1fr); }
.order-sum { position: static; }
}
@media (max-width: 900px) {
/* 보드 상세 */
.pd-top { padding: 16px; gap: 20px; }
.pd-main, .pd-thumbs { max-width: none; }
.pd-name { font-size: 20px; }
.pd-price b { font-size: 26px; }
.pd-btns .bf-btn { height: 48px; font-size: 15px; }
.pd-sub-btns { gap: 14px; justify-content: space-between; }
.dt-btns { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.dt-btns::-webkit-scrollbar { display: none; }
.dt-btn { flex: none; height: 42px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.dt-panel { padding: 18px 16px; }
.rel-sec { margin-top: 28px; }
/* ----- 마이페이지 ----- */
.my-wrap { gap: 14px; }
.my-profile { flex-wrap: wrap; padding: 18px 16px; gap: 14px; }
.my-profile .bf-btn { width: 100%; }
.my-thumb { width: 56px; height: 56px; }
.my-thumb .ico { width: 28px; height: 28px; }
.my-name b { font-size: 18px; }
.my-stat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.my-stat a { padding: 14px 6px; }
.my-stat b { font-size: 19px; }
/* ----- 장바구니 · 주문 ----- */
.cart-item { flex-wrap: wrap; padding: 14px 16px; gap: 10px; }
.cart-thumb { width: 64px; height: 64px; }
.cart-body { flex: 1 1 calc(100% - 140px); }
.cart-name { font-size: 14.5px; white-space: normal; }
.cart-price { flex: 1 1 100%; text-align: right; }
.order-sum { padding: 18px 16px; }
.os-total b { font-size: 24px; }
.order-goods li { gap: 10px; flex-wrap: wrap; }
.order-goods b { flex: 1 1 100%; text-align: right; }
.pd-total b { font-size: 22px; }
}
@media (max-width: 600px) {
.my-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}