/* fluxshop 구매 화면 v2 — 담기 팝업(서랍·모달·모바일 시트·말풍선) 시안 visual/mock/pf.css 5절 + 8절(팝업) 그대로. 수치는 시안 값, 색은 purchase-base.css 의 --pf-* 토큰만. 팝업 루트(#fhs-cart-drawer, #fhs-cart-overlay, #fhs-pf-toast-region)가 body 아래에 직접 붙어 .fhs-pf 를 스스로 단다. fluxshop.css 의 옛 서랍 규칙(#fhs-cart-drawer.fx-ui …)을 이기려고 선택자를 #fhs-cart-drawer.fhs-pf 로 시작한다. v1 스위치일 때는 이 파일을 싣지 않는다(Fluxshop_Purchase_UI). */ /* 오버레이 */ #fhs-cart-overlay.fhs-pf { position: fixed; inset: 0; z-index: 99998; background: var(--pf-overlay); opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility 0s .24s; } #fhs-cart-overlay.fhs-pf.is-open { opacity: 1; visibility: visible; transition: opacity .24s ease, visibility 0s; } /* 서랍(기본, 오른쪽 400) */ #fhs-cart-drawer.fhs-pf { position: fixed; z-index: 99999; display: flex; flex-direction: column; top: 0; right: 0; bottom: 0; left: auto; width: 400px; max-width: 100vw; height: auto; max-height: none; padding: 0; border-radius: 0; background: var(--pf-sheet); color: var(--pf-text); font-family: var(--pf-font); box-shadow: none; opacity: 1; visibility: hidden; transform: translateX(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s .24s; } #fhs-cart-drawer.fhs-pf.is-open { visibility: visible; transform: none; box-shadow: var(--pf-shadow-pop); transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s; } /* 모달(가운데 440) — 내용은 모바일 시트와 같다 */ #fhs-cart-drawer.fhs-pf[data-mode="modal"] { top: 50%; left: 50%; right: auto; bottom: auto; width: 440px; max-height: 85vh; border-radius: 12px; opacity: 0; transform: translate(-50%, -50%); transition: opacity .24s ease, visibility 0s .24s; } #fhs-cart-drawer.fhs-pf[data-mode="modal"].is-open { opacity: 1; transform: translate(-50%, -50%); transition: opacity .24s ease, visibility 0s; } /* 머리 */ #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__handle { display: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--pf-line); } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 8px 24px; border: 0; background: none; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__title { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: 0; color: var(--pf-text); } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__title:focus { outline: 0; } #fhs-cart-drawer.fhs-pf .fhs-cart-drawer__count { display: inline; min-width: 0; height: auto; margin-left: 6px; padding: 0; border-radius: 0; background: none; color: var(--pf-text-3); font-size: 18px; font-weight: 400; } #fhs-cart-drawer.fhs-pf .fhs-cart-drawer__close { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0; color: var(--pf-text-2); font-size: 0; } #fhs-cart-drawer.fhs-pf .fhs-cart-drawer__close:hover { color: var(--pf-text); } /* 본문 */ #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__body { flex: 1; min-height: 0; overflow: auto; padding: 8px 24px 16px; } #fhs-cart-drawer.fhs-pf .fhs-mini-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border: 0; } #fhs-cart-drawer.fhs-pf .fhs-mini-item__img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--pf-fill); } #fhs-cart-drawer.fhs-pf .fhs-mini-item__main { min-width: 0; flex: 1; } /* 삭제(X) 버튼 자리는 이름·옵션 줄에만 비운다 — 금액·수량 줄은 오른쪽 끝선까지 쓴다(X 는 이름 줄 높이 안에 들어온다) */ #fhs-cart-drawer.fhs-pf .fhs-mini-item__name, #fhs-cart-drawer.fhs-pf .fhs-mini-item__opt { padding-right: 32px; } #fhs-cart-drawer.fhs-pf .fhs-mini-item__name { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--pf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #fhs-cart-drawer.fhs-pf .fhs-mini-item__opt { margin: 2px 0 0; font-size: 13px; color: var(--pf-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #fhs-cart-drawer.fhs-pf .fhs-mini-item__row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; } #fhs-cart-drawer.fhs-pf .fhs-mini-item__amt { font-size: 15px; font-weight: 700; color: var(--pf-text); } /* 수량 조절: 묶음 28 높이, 버튼 28, 투명 터치 확장 */ #fhs-cart-drawer.fhs-pf .fhs-mini-qty { display: inline-flex; align-items: center; width: auto; height: 28px; padding: 0; border: 0; border-radius: 6px; background: var(--pf-fill); } #fhs-cart-drawer.fhs-pf .fhs-mini-qty button { position: relative; display: grid; place-items: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--pf-text); } #fhs-cart-drawer.fhs-pf .fhs-mini-qty button::after { content: ""; position: absolute; inset: -8px -4px; } #fhs-cart-drawer.fhs-pf .fhs-mini-qty button:disabled { color: var(--pf-disabled); cursor: default; } #fhs-cart-drawer.fhs-pf .fhs-mini-item__qnum { min-width: 24px; text-align: center; font-size: 14px; font-weight: 600; color: var(--pf-text); } #fhs-cart-drawer.fhs-pf .fhs-mini-item__remove { position: absolute; top: -6px; right: -12px; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--pf-text-3); } #fhs-cart-drawer.fhs-pf .fhs-mini-item__remove:hover { color: var(--pf-text); } #fhs-cart-drawer.fhs-pf .fhs-pf-bundle { margin: 4px 0 0; } /* 방금 담은 상품 */ #fhs-cart-drawer.fhs-pf .fhs-pf-mini--added { padding-top: 8px; } #fhs-cart-drawer.fhs-pf .fhs-pf-mini--added .fhs-mini-item__img { width: 64px; height: 64px; } #fhs-cart-drawer.fhs-pf .fhs-pf-mini--added .fhs-mini-item__name { font-size: 16px; font-weight: 400; white-space: normal; } #fhs-cart-drawer.fhs-pf .fhs-pf-mini--added .fhs-mini-item__amt { font-size: 18px; } #fhs-cart-drawer.fhs-pf .fhs-pf-mini--added .fhs-mini-item__opt { font-size: 14px; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__label { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--pf-line); font-size: 13px; color: var(--pf-text-3); } #fhs-cart-drawer.fhs-pf .fhs-pf-mini__more { display: none; padding-top: 12px; border-top: 1px solid var(--pf-line); font-size: 13px; color: var(--pf-text-3); } /* 빈 장바구니 */ #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__empty { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 48px 0; text-align: center; background: none; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__empty .fxu-ico { width: 32px; height: 32px; margin-bottom: 12px; color: var(--pf-text-3); } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__empty h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--pf-text); } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__empty p { margin: 8px 0 20px; font-size: 14px; color: var(--pf-text-3); } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__empty .fhs-pf-btn { height: 48px; font-size: 15px; } /* 아래 영역: 계량줄 → 결제예정금액 → 버튼 */ #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__foot { padding: 20px 24px; border-top: 1px solid var(--pf-line); background: none; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__foot .fhs-pf-freeship { margin-top: 0; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__sum { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__sum > span { font-size: 16px; font-weight: 600; color: var(--pf-text); } #fhs-cart-drawer.fhs-pf .fhs-cart-drawer__total { font-size: 22px; font-weight: 700; color: var(--pf-text); } #fhs-cart-drawer.fhs-pf .fhs-cart-drawer__total .fhs-pf-won { font-size: 16px; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__btns { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__btns .fhs-pf-textbtn { align-self: center; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__btns .fhs-pf-btn { display: none; } /* 모달·모바일 시트: 방금 담은 줄만 보이고 나머지는 「외 N개 상품」 한 줄. 계속 쇼핑 + 장바구니 보기 */ #fhs-cart-drawer.fhs-pf[data-mode="modal"][data-view="added"] .fhs-pf-drawer__label, #fhs-cart-drawer.fhs-pf[data-mode="modal"][data-view="added"] .fhs-mini-item:not(.fhs-pf-mini--added) { display: none; } #fhs-cart-drawer.fhs-pf[data-mode="modal"][data-view="added"] .fhs-pf-mini__more { display: block; } #fhs-cart-drawer.fhs-pf[data-mode="modal"] .fhs-pf-drawer__btns { display: grid; grid-template-columns: 1fr 2fr; } #fhs-cart-drawer.fhs-pf[data-mode="modal"] .fhs-pf-drawer__btns .fhs-pf-btn { display: inline-flex; height: 52px; font-size: 16px; } #fhs-cart-drawer.fhs-pf[data-mode="modal"] .fhs-pf-drawer__btns .fhs-pf-cta { height: 52px; font-size: 16px; order: 2; } #fhs-cart-drawer.fhs-pf[data-mode="modal"] .fhs-pf-drawer__btns .fhs-pf-textbtn { display: none; } /* 옵션 선택 보기(목록에서 옵션 상품 담기): 아래 영역을 옛 옵션 하단 버튼으로 바꾼다 */ #fhs-cart-drawer.fhs-pf[data-view="options"] .fhs-pf-drawer__foot { display: none; } #fhs-cart-drawer.fhs-pf[data-view="options"] .fhs-cart-drawer__optfoot { display: block; } /* page 모드: 말풍선 (3초, 포커스 이동 없음) */ .fhs-pf-toast-region { position: static; } .fhs-pf-toast-region .fhs-pf-toast { position: fixed; z-index: 99999; top: 72px; right: 24px; display: flex; align-items: center; gap: 12px; width: 320px; padding: 12px 16px; border-radius: 12px; background: var(--pf-sheet); box-shadow: var(--pf-shadow-pop); color: var(--pf-text); font-family: var(--pf-font); animation: pf-in-fade .24s ease; } .fhs-pf-toast-region .fhs-pf-toast::before { content: ""; position: absolute; top: -4px; right: 28px; width: 8px; height: 8px; background: var(--pf-sheet); transform: rotate(45deg); } .fhs-pf-toast-region .fhs-pf-toast .fhs-pf-thumb { width: 40px; height: 40px; object-fit: cover; } .fhs-pf-toast__txt { min-width: 0; flex: 1; } .fhs-pf-toast__txt b { display: block; font-size: 14px; font-weight: 600; } .fhs-pf-toast__txt span { display: block; font-size: 13px; color: var(--pf-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fhs-pf-toast-region .fhs-pf-toast a { padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--pf-primary); white-space: nowrap; } @keyframes pf-in-fade { from { opacity: 0; } to { opacity: 1; } } /* 모바일: 하단 시트 (모든 모드) */ @media (max-width: 767px) { #fhs-cart-drawer.fhs-pf, #fhs-cart-drawer.fhs-pf[data-mode="modal"] { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 85vh; border-radius: 16px 16px 0 0; opacity: 1; transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s .24s; } #fhs-cart-drawer.fhs-pf.is-open, #fhs-cart-drawer.fhs-pf[data-mode="modal"].is-open { transform: none; transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__handle { display: block; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__head { padding: 4px 8px 4px 16px; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__body { padding: 8px 16px 12px; } #fhs-cart-drawer.fhs-pf[data-view="added"] .fhs-pf-drawer__label, #fhs-cart-drawer.fhs-pf[data-view="added"] .fhs-mini-item:not(.fhs-pf-mini--added) { display: none; } #fhs-cart-drawer.fhs-pf[data-view="added"] .fhs-pf-mini__more { display: block; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__foot { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__btns, #fhs-cart-drawer.fhs-pf[data-mode="modal"] .fhs-pf-drawer__btns { display: grid; grid-template-columns: 1fr 2fr; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__btns .fhs-pf-btn { display: inline-flex; height: 52px; font-size: 16px; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__btns .fhs-pf-cta { height: 52px; font-size: 16px; order: 2; } #fhs-cart-drawer.fhs-pf .fhs-pf-drawer__btns .fhs-pf-textbtn { display: none; } #fhs-cart-drawer.fhs-pf[data-view="options"] .fhs-pf-drawer__foot { display: none; } .fhs-pf-toast-region .fhs-pf-toast { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; } /* 상세 하단 구매 바가 떠 있으면 그 위로 (바 높이는 purchase-detail.js 가 --pf-bar-h 로 둔다) */ body:has(.fhs-pf-pdpbar.is-on) .fhs-pf-toast-region .fhs-pf-toast { bottom: calc(var(--pf-bar-h, 104px) + 12px); } .fhs-pf-toast-region .fhs-pf-toast::before { display: none; } } @media (prefers-reduced-motion: reduce) { #fhs-cart-drawer.fhs-pf, #fhs-cart-overlay.fhs-pf, .fhs-pf-toast-region .fhs-pf-toast { animation: none !important; transition: none !important; } } /* 허브 테마 호환(_ui-states.css 2절): 허브 규칙 `html[data-fx-surface] #fhs-cart-drawer …`(1,2,1)가 위 v2 규칙(1,2,0)을 덮는 자리를 `html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf …` (1,3,2 이상)로 되돌린다. 허브가 없으면 위 규칙과 같은 값이라 보이는 변화 없음. 색은 --pf-* 토큰만. */ html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf { background: var(--pf-sheet); color: var(--pf-text); font-family: var(--pf-font); } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf.is-open { box-shadow: var(--pf-shadow-pop); } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-cart-drawer__foot { display: contents; } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-pf-drawer__title { letter-spacing: 0; color: var(--pf-text); } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-cart-drawer__count { display: inline; min-width: 0; height: auto; margin-left: 6px; padding: 0; border-radius: 0; background: none; color: var(--pf-text-3); font-size: 18px; font-weight: 400; } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-cart-drawer__close { color: var(--pf-text-2); } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-cart-drawer__close:hover { color: var(--pf-text); } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-mini-item { display: flex; grid-template-columns: none; grid-template-areas: none; gap: 12px; align-items: flex-start; padding: 12px 0; border: 0; } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-mini-item__img { border-radius: 6px; background: var(--pf-fill); } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-mini-item__name { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--pf-text); } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-mini-item__opt { margin: 2px 0 0; font-size: 13px; color: var(--pf-text-3); } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-pf-mini--added .fhs-mini-item__name { font-size: 16px; font-weight: 400; } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-pf-mini--added .fhs-mini-item__opt { font-size: 14px; } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-mini-qty { display: inline-flex; align-items: center; justify-content: flex-start; width: auto; height: 28px; padding: 0; border: 0; border-radius: 6px; background: var(--pf-fill); box-shadow: none; color: var(--pf-text); font-size: inherit; transition: none; } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-mini-qty:hover { background: var(--pf-fill); } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-mini-item__qnum { min-width: 24px; font-size: 14px; font-weight: 600; color: var(--pf-text); } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-mini-item__remove { display: grid; align-self: auto; justify-self: auto; font-size: 0; color: var(--pf-text-3); } html body #fhs-cart-drawer.fhs-cart-drawer.fhs-pf .fhs-mini-item__remove:hover { color: var(--pf-text); } /* 허브는 서랍 안에서 --fhs-white 를 「버튼 위 글자색(어두움)」으로 바꿔 놓아 --pf-sheet 가 어두워진다 → 서랍 면 토큰만 허브 카드 면으로 */ html[data-fx-surface] #fhs-cart-drawer.fhs-pf { --pf-sheet: var(--fx-card); } html[data-fx-surface="dark"] #fhs-cart-drawer.fhs-pf { --pf-fill: var(--fx-card-2); --pf-line: var(--fx-edge); --pf-line-strong: var(--fx-edge-strong); --pf-disabled: var(--fx-fg-3); }