[data-feature="buyer-order"] { --bg:#f4f3ef; --panel:#ffffff; --panel-line:#e2e0da; --fg:#1a1a19; --fg2:#6f6f6b; --fg3:#a3a29d; --line:#e2e0da; --ctrl:#d3d1c7; --field:#ffffff; --solid:#1a1a19; --solid-fg:#ffffff; --warn-bg:#fbf3e0; --warn-line:#e8d6a8; --warn-fg:#7a5a12; --ok-bg:#e8f3ec; --ok-line:#bcdcc8; --ok-fg:#2f7d52; --info-bg:#e9f0f6; --info-line:#c3d7e6; --info-fg:#2b5876; --danger:#b04545; --unpaid:#ddd9cf; --band:#efece4; --invite-bg:#efece4; --invite-line:#e2e0da; --invite-fg:#6f6f6b; color-scheme: light; --bo-canvas-w: 100%; /* R35-4(USER 승인) — 관리자와 같은 글자 역할 6개(크기 · 굵기 · 행간). 입력 글자(--bo-ts-input)와 화면 대표 숫자만 예외 */ --bo-ts-title:22px; --bo-tw-title:700; --bo-tl-title:1.3; --bo-ts-section:16px; --bo-tw-section:600; --bo-tl-section:1.4; --bo-ts-label:14px; --bo-tw-label:600; --bo-tl-label:1.45; --bo-ts-body:14px; --bo-tw-body:400; --bo-tl-body:1.55; --bo-ts-hint:13px; --bo-tw-hint:400; --bo-tl-hint:1.5; --bo-ts-tag:12px; --bo-tw-tag:600; --bo-tl-tag:1.35; } html:has([data-buyer-order-host]:not([hidden])) { --bg:#f4f3ef; --panel:#ffffff; --panel-line:#e2e0da; --fg:#1a1a19; --fg2:#6f6f6b; --fg3:#a3a29d; --line:#e2e0da; --ctrl:#d3d1c7; --field:#ffffff; --solid:#1a1a19; --solid-fg:#ffffff; --warn-bg:#fbf3e0; --warn-line:#e8d6a8; --warn-fg:#7a5a12; --ok-bg:#e8f3ec; --ok-line:#bcdcc8; --ok-fg:#2f7d52; --info-bg:#e9f0f6; --info-line:#c3d7e6; --info-fg:#2b5876; --danger:#b04545; --unpaid:#ddd9cf; --band:#efece4; --invite-bg:#efece4; --invite-line:#e2e0da; --invite-fg:#6f6f6b; color-scheme: light; } @media (prefers-color-scheme: dark) { [data-feature="buyer-order"]:not([data-theme="light"]) { --bg:#0e0e0e; --panel:#1c1c1c; --panel-line:#2f2f2f; --fg:#f2f2f0; --fg2:#8d8d88; --fg3:#5f5f5c; --line:#262626; --ctrl:#3a3a3a; --field:#161616; --solid:#f2f2f0; --solid-fg:#0e0e0e; --warn-bg:#241f16; --warn-line:#4a3c24; --warn-fg:#d8b878; --ok-bg:#132018; --ok-line:#274a35; --ok-fg:#6fbf90; --info-bg:#141c24; --info-line:#263d4f; --info-fg:#7fb0d6; --danger:#d97d7d; --unpaid:#33332f; --band:#242424; --invite-bg:#242424; --invite-line:#3a3a3a; --invite-fg:#8d8d88; color-scheme: dark; } html:has([data-buyer-order-host]:not([hidden])):has([data-feature="buyer-order"]:not([data-theme="light"])) { --bg:#0e0e0e; --panel:#1c1c1c; --panel-line:#2f2f2f; --fg:#f2f2f0; --fg2:#8d8d88; --fg3:#5f5f5c; --line:#262626; --ctrl:#3a3a3a; --field:#161616; --solid:#f2f2f0; --solid-fg:#0e0e0e; --warn-bg:#241f16; --warn-line:#4a3c24; --warn-fg:#d8b878; --ok-bg:#132018; --ok-line:#274a35; --ok-fg:#6fbf90; --info-bg:#141c24; --info-line:#263d4f; --info-fg:#7fb0d6; --danger:#d97d7d; --unpaid:#33332f; --band:#242424; --invite-bg:#242424; --invite-line:#3a3a3a; --invite-fg:#8d8d88; color-scheme: dark; } } [data-feature="buyer-order"][data-theme="dark"] { --bg:#0e0e0e; --panel:#1c1c1c; --panel-line:#2f2f2f; --fg:#f2f2f0; --fg2:#8d8d88; --fg3:#5f5f5c; --line:#262626; --ctrl:#3a3a3a; --field:#161616; --solid:#f2f2f0; --solid-fg:#0e0e0e; --warn-bg:#241f16; --warn-line:#4a3c24; --warn-fg:#d8b878; --ok-bg:#132018; --ok-line:#274a35; --ok-fg:#6fbf90; --info-bg:#141c24; --info-line:#263d4f; --info-fg:#7fb0d6; --danger:#d97d7d; --unpaid:#33332f; --band:#242424; --invite-bg:#242424; --invite-line:#3a3a3a; --invite-fg:#8d8d88; color-scheme: dark; } html:has([data-buyer-order-host]:not([hidden])):has([data-feature="buyer-order"][data-theme="dark"]) { --bg:#0e0e0e; --panel:#1c1c1c; --panel-line:#2f2f2f; --fg:#f2f2f0; --fg2:#8d8d88; --fg3:#5f5f5c; --line:#262626; --ctrl:#3a3a3a; --field:#161616; --solid:#f2f2f0; --solid-fg:#0e0e0e; --warn-bg:#241f16; --warn-line:#4a3c24; --warn-fg:#d8b878; --ok-bg:#132018; --ok-line:#274a35; --ok-fg:#6fbf90; --info-bg:#141c24; --info-line:#263d4f; --info-fg:#7fb0d6; --danger:#d97d7d; --unpaid:#33332f; --band:#242424; --invite-bg:#242424; --invite-line:#3a3a3a; --invite-fg:#8d8d88; color-scheme: dark; } /* R33 D6 (USER 2026-10-31) — 터치 화면의 입력 칸: 글자 16 · 400 · 1.4(아이폰이 확대하지 않게), 한 줄 칸 44, 여러 줄 칸 위아래 12 */ @media (pointer: coarse) { [data-feature="buyer-order"] { --bo-ts-input:16px; --bo-tw-input:400; --bo-tl-input:1.4; --bo-input-h:44px; --bo-input-pad-y:12px; } } @media (min-width: 480px) { /* 원본 데스크톱 표시: 기본 폭 380 캔버스를 band 바탕 위 가운데에 둔다 */ [data-feature="buyer-order"] { --bo-canvas-w: 380px; } } @font-face{font-family:'Buyer Pretendard Fallback';font-style:normal;font-display:swap;font-weight:400;src:local('Arial');unicode-range:U+0-2F,U+3A-FF;size-adjust:99.245186%;ascent-override:95.722528%;descent-override:24.182533%;line-gap-override:0%} @font-face{font-family:'Buyer Pretendard Fallback';font-style:normal;font-display:swap;font-weight:400;src:local('Arial');unicode-range:U+30-39;size-adjust:107.111501%;ascent-override:88.692623%;descent-override:22.406557%;line-gap-override:0%} @font-face{font-family:'Buyer Pretendard Fallback';font-style:normal;font-display:swap;font-weight:400;src:local('AppleSDGothicNeo-Regular'),local('Malgun Gothic'),local('Noto Sans CJK KR Regular'),local('Noto Sans KR Regular');unicode-range:U+100-10FFFF;size-adjust:86.42578125%;ascent-override:109.920904%;descent-override:27.769492%;line-gap-override:0%} @font-face{font-family:'Buyer Pretendard Fallback';font-style:normal;font-display:swap;font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT');unicode-range:U+0-2F,U+3A-FF;size-adjust:99.245186%;ascent-override:95.722528%;descent-override:24.182533%;line-gap-override:0%} @font-face{font-family:'Buyer Pretendard Fallback';font-style:normal;font-display:swap;font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT');unicode-range:U+30-39;size-adjust:107.111501%;ascent-override:88.692623%;descent-override:22.406557%;line-gap-override:0%} @font-face{font-family:'Buyer Pretendard Fallback';font-style:normal;font-display:swap;font-weight:700;src:local('AppleSDGothicNeo-Bold'),local('Malgun Gothic Bold'),local('Noto Sans CJK KR Bold'),local('Noto Sans KR Bold');unicode-range:U+100-10FFFF;size-adjust:86.42578125%;ascent-override:109.920904%;descent-override:27.769492%;line-gap-override:0%} html[data-buyer-font-pending] [data-feature="buyer-order"],html[data-buyer-font-fallback] [data-feature="buyer-order"]{font-family:'Buyer Pretendard Fallback',system-ui,sans-serif} [data-feature="buyer-order"] .bo-space-zero.bo-space-zero { margin: 0; } [data-feature="buyer-order"] .bo-space-top8.bo-space-top8 { margin: 8px 0 0; } [data-feature="buyer-order"] .bo-space-top10.bo-space-top10 { margin: 10px 0 0; } [data-feature="buyer-order"] .bo-space-top6.bo-space-top6 { margin: 6px 0 0; } [data-feature="buyer-order"] .bo-gap24.bo-gap24 { height: 24px; } [data-feature="buyer-order"] .bo-mt8.bo-mt8 { margin-top: 8px; } [data-feature="buyer-order"] .bo-mt4.bo-mt4 { margin-top: 4px; } [data-feature="buyer-order"] .bo-ml6.bo-ml6 { margin: 0 0 0 6px; } [data-feature="buyer-order"] .bo-mb10.bo-mb10 { margin-bottom: 10px; } [data-feature="buyer-order"] .bo-bottom4.bo-bottom4 { margin: 0 0 4px; } [data-feature="buyer-order"] .bo-mt0.bo-mt0 { margin-top: 0; } [data-feature="buyer-order"] .bo-danger-text.bo-danger-text { color: var(--danger); } [data-feature="buyer-order"] .bo-center.bo-center { text-align: center; } [data-feature="buyer-order"] .bo-hero-pad12.bo-hero-pad12 { padding: 12px 0; } body[data-buyer-order-document] { margin: 0; padding: 0; } /* * V63 — html·body도 지금 화면 모드의 바탕(좁은 화면 --bg, 넓은 화면 루트와 같은 --band). 빠른 스크롤·당겨 늘이기·키보드·주소창이 루트 상자 * 밖(canvas)을 드러내도 기존 SSR 페이지의 밝은 html 바탕이나 브라우저 기본 흰 바탕이 비치지 않는다. 독립 문서와 실제 /o 연결 문서 모두 * (BUYER_DOCUMENT_HTML). 토큰은 buyer-tokens의 html 규칙이 준다 */ html:has([data-buyer-order-host]:not([hidden])), html:has([data-buyer-order-host]:not([hidden])) > body { background: var(--bg); } @media (min-width: 480px) { html:has([data-buyer-order-host]:not([hidden])), html:has([data-buyer-order-host]:not([hidden])) > body { background: var(--band); } } /* 복사 fallback이 잠시 body에 붙이는 칸 — 기존 동작대로 화면 밖 고정·투명 */ textarea[data-bo-copy-buffer] { position: fixed; opacity: 0; } [data-feature="buyer-order"] { /* 설계(03 스크롤 늘어남): 주소창이 접히며 커지는 dvh 대신 작은 보이는 높이 svh — 바닥 고정 막대 아래로 내용이 늘어나지 않게 */ min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--fg); font-family: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; font-size: var(--bo-ts-body); font-weight: var(--bo-tw-body); line-height: var(--bo-tl-body); /* R31-e 6(§222 · §224) · R35-5 — 라이브 구매자와 같이 낱말 단위 줄바꿈, 긴 주소 · 번호만 칸 안에서 꺾는다. 줄 끝 외톨이 낱말은 줄인다(루트 한 곳) */ word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; } [data-feature="buyer-order"] *, [data-feature="buyer-order"] *::before, [data-feature="buyer-order"] *::after { box-sizing: border-box; } html:has([data-buyer-order-host]:not([hidden])), [data-feature="buyer-order"], [data-feature="buyer-order"] * { -webkit-tap-highlight-color: transparent; } [data-feature="buyer-order"] :focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* * 실기 v60 4번 — 주문서에 보이는 받는 분·주문 정보(주소·연락처 등)를 길게 눌러 고르거나 복사하지 못하게 한다. 링크를 연 다른 사람이 * 주소를 그대로 옮겨 가는 것을 어렵게 하는 장치일 뿐 보안 경계가 아니다(화면 캡처·개발자 도구는 그대로). 입력 칸 안(치기·고르기·붙여넣기)과 * 채움 복사 버튼(계좌·금액 — 화면 밖 임시 칸으로 복사)은 그대로. 보조공학이 읽는 내용은 바뀌지 않는다. 개인정보 안내 독립 페이지는 제외 */ [data-feature="buyer-order"]:not([data-screen="notice"]) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } [data-feature="buyer-order"] input, [data-feature="buyer-order"] textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* V63 — 링크는 길게 눌러 새 탭으로 열 수 있게(문맥 메뉴도 링크에서만 열린다), 그림은 끌어 가지 않게 */ [data-feature="buyer-order"] a[href] { -webkit-touch-callout: default; } [data-feature="buyer-order"] img { -webkit-user-drag: none; } [data-feature="buyer-order"] button { color: inherit; font: inherit; font-family: inherit; } [data-feature="buyer-order"] input, [data-feature="buyer-order"] textarea { font-family: inherit; } [data-feature="buyer-order"] h1, [data-feature="buyer-order"] p, [data-feature="buyer-order"] ol, [data-feature="buyer-order"] ul, [data-feature="buyer-order"] dl, [data-feature="buyer-order"] dd { margin: 0; padding: 0; } [data-feature="buyer-order"] ol, [data-feature="buyer-order"] ul { list-style: none; } /* * 실제 /o 연결 문서는 기존 SSR 페이지 스타일과 같은 문서에 있다 — 전역 h1(흐린 색 · 자간 · 크기) · h2(자간 · 줄 높이), * body.order-page h1 · h2(색 · 크기)가 주문서 제목에 새지 않게 루트 글자로 되돌린다. 세기는 html body + 루트 + 요소(0,1,3): * 그 규칙들(가장 센 body.order-page h1 = 0,1,2)은 순서와 상관없이 이기고, 제목 class 규칙(루트 + class = 0,2,0 이상)에는 진다 */ html body [data-feature="buyer-order"] h1 { font: inherit; color: inherit; letter-spacing: inherit; } html body [data-feature="buyer-order"] h2, html body [data-feature="buyer-order"] h3 { color: inherit; letter-spacing: inherit; line-height: inherit; } [data-feature="buyer-order"] [hidden] { display: none !important; } [data-feature="buyer-order"] [data-bo-heading]:focus { outline: none; } [data-feature="buyer-order"] button:focus-visible, [data-feature="buyer-order"] input:focus-visible, [data-feature="buyer-order"] textarea:focus-visible { outline: 1.5px solid var(--fg2); outline-offset: 1px; } [data-feature="buyer-order"] .bo-icon { flex: none; display: inline-block; vertical-align: -0.16em; } [data-feature="buyer-order"] .bo-canvas { position: relative; width: 100%; background: var(--bg); overflow-x: clip; } @media (min-width: 480px) { [data-feature="buyer-order"] { background: var(--band); padding: 22px 14px 40px; } /* clip: 둥근 모서리는 자르되 스크롤 상자를 만들지 않는다 — 바닥 버튼(sticky)이 페이지 스크롤에 붙게. 모르는 브라우저는 hidden */ [data-feature="buyer-order"] .bo-canvas { width: var(--bo-canvas-w); margin: 0 auto; border-radius: 16px; overflow: hidden; overflow: clip; box-shadow: 0 8px 34px rgba(0,0,0,.18); } } /* 스크롤바 (원본 .sb) */ [data-feature="buyer-order"] .bo-scroll { scrollbar-width: thin; scrollbar-color: var(--ctrl) transparent; } [data-feature="buyer-order"] .bo-scroll::-webkit-scrollbar { width: 9px; height: 9px; } [data-feature="buyer-order"] .bo-scroll::-webkit-scrollbar-track { background: transparent; } [data-feature="buyer-order"] .bo-scroll::-webkit-scrollbar-thumb { background: var(--ctrl); border-radius: 99px; border: 2.5px solid transparent; background-clip: padding-box; } /* 머리 */ [data-feature="buyer-order"] .bo-invite { display: inline-flex; align-items: center; gap: 6px; background: var(--invite-bg); border: .5px solid var(--invite-line); color: var(--invite-fg); border-radius: 999px; padding: 5px 11px; font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); letter-spacing: .06em; flex: none; white-space: nowrap; } [data-feature="buyer-order"] .bo-head { padding: 16px 20px 14px; } [data-feature="buyer-order"] .bo-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } [data-feature="buyer-order"] .bo-head-row { height: 30px; } [data-feature="buyer-order"] .bo-head-controls { display: flex; align-items: center; gap: 8px; flex: none; } [data-feature="buyer-order"] .bo-shop-avatar { display: inline-block; width: 18px; height: 18px; object-fit: cover; border: .5px solid var(--ctrl); border-radius: 50%; vertical-align: -4px; margin-right: 6px; } [data-feature="buyer-order"] .bo-checkout-back { display: inline-flex; align-items: center; height: 30px; padding: 0; border: 0; background: transparent; color: var(--fg); cursor: pointer; } [data-feature="buyer-order"] .bo-head-title { font-size: var(--bo-ts-title); font-weight: var(--bo-tw-title); line-height: var(--bo-tl-title); margin-top: 12px; word-break: keep-all; overflow-wrap: anywhere; } [data-feature="buyer-order"] .bo-head-sub { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-top: 5px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; } [data-feature="buyer-order"] .bo-head-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-feature="buyer-order"] .bo-top { padding: 15px 20px 13px; display: flex; align-items: center; gap: 10px; } [data-feature="buyer-order"] .bo-top-back { background: none; border: none; color: var(--fg); padding: 0; cursor: pointer; display: flex; } [data-feature="buyer-order"] .bo-top-title { font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); flex: 1; } [data-feature="buyer-order"] .bo-result-head { padding: 16px 20px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } [data-feature="buyer-order"] .bo-result-title { font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); } /* SSR can paint after only two list items have arrived; each step keeps its final column while parsing. */ [data-feature="buyer-order"] .bo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: start; padding: 4px 8px; background: var(--panel); font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); color: var(--fg3); } [data-feature="buyer-order"] .bo-steps > li:nth-child(2) { justify-self: center; } [data-feature="buyer-order"] .bo-steps > li:nth-child(3) { justify-self: end; } /* 단계 번호(실기 9번) — 다른 단계는 누르는 글자. 바깥 여백을 칸 안으로 옮겨 줄 높이 · 글자 자리는 예전 그대로, 누르는 면만 넓다 */ [data-feature="buyer-order"] .bo-step { display: block; padding: 8px 12px; } [data-feature="buyer-order"] .bo-step-jump { font: inherit; color: inherit; background: none; border: none; cursor: pointer; border-radius: 8px; touch-action: manipulation; } [data-feature="buyer-order"] .bo-step-jump:hover { color: var(--fg2); } [data-feature="buyer-order"] .bo-step-jump:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; } [data-feature="buyer-order"] .bo-steps .is-on { color: var(--fg); } /* 화면 모드 (원본 themeBtn size s, align r) */ [data-feature="buyer-order"] .bo-theme { position: relative; } [data-feature="buyer-order"] .bo-theme-btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 28px; background: transparent; border: .5px solid var(--ctrl); color: var(--fg); border-radius: 8px; padding: 0; cursor: pointer; } [data-feature="buyer-order"] .bo-theme-btn.is-open { background: var(--panel); border-color: var(--panel-line); } [data-feature="buyer-order"] .bo-theme-pop { position: absolute; top: calc(100% + 7px); right: 0; width: 172px; background: var(--panel); border: .5px solid var(--panel-line); border-radius: 10px; padding: 5px; box-shadow: 0 10px 26px rgba(0,0,0,.34); z-index: 60; } [data-feature="buyer-order"] .bo-theme-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: transparent; color: var(--fg); padding: 9px 10px; border-radius: 7px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); cursor: pointer; } [data-feature="buyer-order"] .bo-theme-opt.is-on { background: var(--field); font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); } [data-feature="buyer-order"] .bo-theme-opt-label { flex: 1; } [data-feature="buyer-order"] .bo-theme-opt-check { color: var(--ok-fg); display: flex; } [data-feature="buyer-order"] .bo-theme-note { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); padding: 6px 10px 4px; } /* 누르는 면 44×44 — 보이는 크기 · 자리 · 모양은 그대로 두고, 가운데를 맞춘 투명한 면만 넓힌다(작은 글 버튼 · 아이콘 버튼 공용) */ [data-feature="buyer-order"] :is(.bo-theme-btn, .bo-step-jump, .bo-top-back, .bo-edit, .bo-consent, .bo-consent-more, .bo-foot-link, .bo-copy, .bo-h-back, .bo-h-my, .bo-h-out, .bo-mo-links .bo-btn, .bo-mo-livebar a) { position: relative; } [data-feature="buyer-order"] :is(.bo-theme-btn, .bo-step-jump, .bo-top-back, .bo-edit, .bo-consent, .bo-consent-more, .bo-foot-link, .bo-copy, .bo-h-back, .bo-h-my, .bo-h-out, .bo-mo-links .bo-btn, .bo-mo-livebar a)::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); } /* 버튼 */ [data-feature="buyer-order"] .bo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 8px; padding: 9px 14px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); cursor: pointer; white-space: nowrap; } [data-feature="buyer-order"] .bo-btn--primary { background: var(--solid); color: var(--solid-fg); border: none; } [data-feature="buyer-order"] .bo-btn--ghost { background: transparent; color: var(--fg); border: .5px solid var(--ctrl); } [data-feature="buyer-order"] a.bo-btn.bo-btn--ghost, [data-feature="buyer-order"] a.bo-btn.bo-btn--primary { text-decoration: none; } [data-feature="buyer-order"] .bo-btn--pill { border-radius: 999px; padding: 7px 16px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"] .bo-btn--block { width: 100%; margin-top: 10px; padding: 13px 0; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"] .bo-cta { display: block; width: 100%; text-align: center; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); padding: 15px 0; border-radius: 10px; border: none; cursor: pointer; background: var(--solid); color: var(--solid-fg); } [data-feature="buyer-order"] .bo-cta.is-off { background: var(--unpaid); color: var(--fg3); } [data-feature="buyer-order"] .bo-cta:disabled { cursor: default; } [data-feature="buyer-order"] .bo-icon-btn { background: none; border: none; color: var(--fg); padding: 4px; cursor: pointer; display: flex; } [data-feature="buyer-order"] .bo-icon-btn--dim { color: var(--fg2); } [data-feature="buyer-order"] .bo-copy { flex: none; display: flex; align-items: center; gap: 5px; background: transparent; border: .5px solid var(--ctrl); color: var(--fg2); border-radius: 999px; padding: 6px 11px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); cursor: pointer; } /* v0.51 — 복사 실패: 그 값 글자를 통째로 골라 두고 노란 테두리로 표시(길게 눌러 직접 복사) */ [data-feature="buyer-order"] [data-bo-copyfail] { -webkit-user-select: all; user-select: all; background: var(--warn-bg); box-shadow: 0 0 0 1.5px var(--warn-line); border-radius: 4px; color: var(--fg); } /* * R35-1 처리 중 버튼(구매자 공용 한 곳 — busyAttrs가 처리 중 글을 붙이고 buyerButton이 두 글을 한 칸에 겹친다). * 도는 고리 → 8 → 「동사+하는 중」. 흐리게 하지 않는다. 폭은 처음부터 평소 글과 「고리+처리 중 글」 중 넓은 쪽(가운데 맞춤, 흔들림 없음). * 처리 중 글은 버튼 글자가 아니라 그림 글(::after)이라 화면 글(textContent)은 그대로이고, 보이는 쪽만 이름으로 읽힌다(가린 쪽은 visibility로 빠진다) */ [data-feature="buyer-order"] button[aria-busy="true"] { cursor: progress; } [data-feature="buyer-order"] .bo-btn, [data-feature="buyer-order"] .bo-copy { --bo-busy-gap: 5px; } [data-feature="buyer-order"] .bo-copy-all { --bo-busy-gap: 7px; } [data-feature="buyer-order"] .bo-busy-face { display: inline-grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 0; max-width: 100%; } [data-feature="buyer-order"] .bo-busy-idle { grid-area: 1 / 1 / 2 / 4; justify-self: center; display: inline-flex; align-items: center; justify-content: center; gap: var(--bo-busy-gap, 6px); min-width: 0; } [data-feature="buyer-order"] .bo-busy-face::before, [data-feature="buyer-order"] .bo-busy-face::after { grid-area: 1 / 2; visibility: hidden; } [data-feature="buyer-order"] .bo-busy-face::before { content: ""; justify-self: start; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; } [data-feature="buyer-order"] .bo-busy-face::after { content: attr(data-bo-busy-label); padding-left: 20px; white-space: nowrap; } [data-feature="buyer-order"] button[aria-busy="true"] .bo-busy-idle { visibility: hidden; } [data-feature="buyer-order"] button[aria-busy="true"] .bo-busy-face::before, [data-feature="buyer-order"] button[aria-busy="true"] .bo-busy-face::after { visibility: visible; } [data-feature="buyer-order"] button[aria-busy="true"] .bo-busy-face::before { animation: bo-spin .8s linear infinite; } /* R44-4: copying keeps its compact idle face, not a reserved pending sentence. */ [data-feature="buyer-order"] .bo-copy { width: 68px; height: 34px; box-sizing: border-box; justify-content: center; } [data-feature="buyer-order"] .bo-copy .bo-busy-face::before, [data-feature="buyer-order"] .bo-copy .bo-busy-face::after { display: none; } [data-feature="buyer-order"] .bo-copy[aria-busy="true"] .bo-busy-idle { visibility: visible; } @media (max-width: 339px) { [data-feature="buyer-order"] .bo-copy { width: 38px; height: 34px; padding: 0; gap: 0; --bo-busy-gap: 0px; } [data-feature="buyer-order"] .bo-copy-label { display: none; } [data-feature="buyer-order"] .bo-copy .bo-busy-idle { gap: 0; } } /* 주소 검색 중 — 안내 글 앞의 같은 고리 */ [data-feature="buyer-order"] [data-bo-address-body][aria-busy="true"] .bo-addr-tip-desc::before { content: ""; display: inline-block; flex: none; width: 12px; height: 12px; margin: 0 8px 0 0; vertical-align: -2px; box-sizing: border-box; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: bo-spin .8s linear infinite; } @keyframes bo-spin { to { transform: rotate(360deg); } } /* 카드 · 안내 */ [data-feature="buyer-order"] .bo-card { background: var(--panel); border: .5px solid var(--panel-line); border-radius: 12px; } [data-feature="buyer-order"] .bo-card--pad { padding: 14px; } [data-feature="buyer-order"] .bo-order-actions { padding: 2px 14px 6px; margin-top: 16px; } [data-feature="buyer-order"] .bo-order-actions:not(:has(.bo-order-action)) { display: none; } [data-feature="buyer-order"] .bo-order-action { display: flex; align-items: center; gap: 8px; padding: 13px 0; } [data-feature="buyer-order"] .bo-order-actions > .bo-order-action ~ .bo-order-action, [data-feature="buyer-order"] [data-bo-save-slot]:has(.bo-order-action), [data-feature="buyer-order"] [data-bo-save-slot]:has(.bo-order-action) + .bo-order-action { border-top: .5px solid var(--line); } [data-feature="buyer-order"] .bo-order-action > svg { flex: none; color: var(--fg2); } [data-feature="buyer-order"] .bo-order-action-copy { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; } [data-feature="buyer-order"] .bo-order-action-copy strong { display: block; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); white-space: normal; } [data-feature="buyer-order"] .bo-order-action-copy > span { display: block; margin-top: 4px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); white-space: normal; } [data-feature="buyer-order"] .bo-order-action .bo-order-action-button { flex: 0 0 90px; width: 90px; height: 40px; min-height: 40px; padding: 0 4px; } [data-feature="buyer-order"] .bo-inst.bo-inst--embedded { margin: 0; padding: 0; border: 0; background: transparent; } [data-feature="buyer-order"] .bo-kv-row { display: flex; gap: 12px; align-items: center; } [data-feature="buyer-order"] .bo-kv-row + .bo-kv-row { margin-top: 10px; padding-top: 10px; border-top: .5px solid var(--line); } [data-feature="buyer-order"] .bo-kv dt { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); width: 80px; flex: none; } [data-feature="buyer-order"] .bo-kv dd { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; } [data-feature="buyer-order"] .bo-note { display: flex; gap: 9px; background: transparent; border: .5px solid var(--ctrl); border-radius: 10px; padding: 11px 13px; } [data-feature="buyer-order"] .bo-note-icon { color: var(--fg3); display: flex; margin-top: 1px; } [data-feature="buyer-order"] .bo-note-body { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); flex: 1; } [data-feature="buyer-order"] .bo-callout { display: flex; gap: 10px; background: var(--warn-bg); border: .5px solid var(--warn-line); border-radius: 10px; padding: 12px 13px; } [data-feature="buyer-order"] .bo-callout-icon { color: var(--warn-fg); display: flex; margin-top: 1px; } [data-feature="buyer-order"] .bo-callout-body { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--warn-fg); } [data-feature="buyer-order"] .bo-deadline { display: flex; align-items: center; gap: 8px; background: var(--warn-bg); border: .5px solid var(--warn-line); border-radius: 10px; padding: 11px 13px; } [data-feature="buyer-order"] .bo-deadline-icon { color: var(--warn-fg); display: flex; } [data-feature="buyer-order"] .bo-deadline-copy { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--warn-fg); flex: 1; } [data-feature="buyer-order"] .bo-deadline-copy strong { font-weight: 600; } [data-feature="buyer-order"] .bo-nowrap { white-space: nowrap; } .bo-copy-fallback { position: fixed; inset: auto 0 0; margin: 0 auto; box-sizing: border-box; width: min(100%, 480px); max-height: 70dvh; overflow: auto; border: 0; border-radius: 18px 18px 0 0; padding: 24px; color: CanvasText; background: Canvas; color-scheme: light dark; } .bo-copy-fallback::backdrop { background: #0006; } .bo-copy-fallback h2 { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 12px; } .bo-copy-fallback p { font-size: 14px; font-weight: 400; line-height: 1.55; } .bo-copy-fallback input { box-sizing: border-box; width: 100%; padding: 12px; font-size: 16px; user-select: text; } .bo-copy-fallback button { width: 100%; padding: 12px; font-size: 14px; font-weight: 600; line-height: 1.45; } .bo-copy-fallback--share[data-feature="buyer-order"] { min-height: 0; max-width: 100%; border-radius: 16px 16px 0 0; padding: 20px 20px 16px; background: var(--panel); color: var(--fg); } .bo-copy-fallback--share h2 { margin: 0; } .bo-copy-fallback--share input { margin-top: 12px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--fg) 2.5%, var(--panel)); color: inherit; font-size: var(--bo-ts-input, var(--bo-ts-body)); line-height: var(--bo-tl-input, var(--bo-tl-body)); } .bo-copy-fallback--share p { margin: 8px 0 0; font-size: var(--bo-ts-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } .bo-copy-fallback--share button { height: 48px; margin-top: 16px; padding: 0; border: 0; border-radius: 8px; background: var(--solid); color: var(--solid-fg); } #chaeum-buyer-connected[inert] button, #chaeum-buyer-connected[inert] input, #chaeum-buyer-connected[inert] select, #chaeum-buyer-connected[inert] a { opacity: .45; cursor: wait; } [data-feature="buyer-order"] .bo-deadline-left { font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); color: var(--warn-fg); } /* * 실기 V60 테스트 서버 — 좁은 폭(320)에서도 「입금 기한 10월 25일 06:12까지」와 남은 시간이 390·1280처럼 한 줄씩이다(같은 글). * R35-4부터 글자는 역할 크기 그대로(힌트 13 · 꼬리표 12) — 11px로 줄이던 예외는 뺐다. 기한 글이 한 줄에 다 들어가도록 * 남은 시간은 모자랄 때만 다음 줄(오른쪽 끝)로 내려간다 — 두 글 모두 각자 한 줄 */ @media (max-width: 359.98px) { [data-feature="buyer-order"] .bo-deadline { flex-wrap: wrap; gap: 4px 8px; padding: 11px 10px 11px 11px; } [data-feature="buyer-order"] .bo-deadline-copy { flex: 1 1 auto; } [data-feature="buyer-order"] .bo-deadline-left { margin-left: auto; } } [data-feature="buyer-order"] .bo-hero { text-align: center; } [data-feature="buyer-order"] .bo-hero-mark { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } [data-feature="buyer-order"] .bo-hero-mark--solid { background: var(--solid); color: var(--solid-fg); } [data-feature="buyer-order"] .bo-hero-mark--muted { background: var(--unpaid); border: .5px solid var(--panel-line); color: var(--fg3); } [data-feature="buyer-order"] .bo-hero-title { font-size: var(--bo-ts-title); font-weight: var(--bo-tw-title); line-height: var(--bo-tl-title); } [data-feature="buyer-order"] .bo-hero-desc { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-top: 8px; } [data-feature="buyer-order"] .bo-section-title { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"] .bo-section-title span { font-size: var(--bo-ts-body); font-weight: var(--bo-tw-body); line-height: var(--bo-tl-body); color: var(--fg2); } [data-feature="buyer-order"] .bo-foot-note { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); text-align: center; margin-top: 14px; } /* 주문 상품 줄 (03·05·07) */ [data-feature="buyer-order"] .bo-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; } [data-feature="buyer-order"] .bo-item + .bo-item { border-top: .5px solid var(--line); } [data-feature="buyer-order"] .bo-item-tile { border-radius: 8px; flex: none; background: var(--bo-tile, var(--unpaid)); overflow: hidden; } [data-feature="buyer-order"] .bo-item-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* * 다듬기 1차 — 사진이 없거나 실패가 확인된 타일(01 목록 · 03 확인 · 결과 줄)은 관리자와 같은 상자 자리표시: 옅은 테두리 · 페이지 바탕 · 흐린 상자. * 크기는 타일 그대로(border-box). svg를 넣어 01 선택 화면 규칙([data-screen] .bo-thumb)보다 앞선다 */ [data-feature="buyer-order"] :is(.bo-thumb, .bo-item-tile):has(> svg.bo-photo-missing) { display: grid; place-items: center; border: .5px solid var(--line); background: var(--bg); color: var(--fg3); } /* 03 사진 보기를 여는 타일 — 모양은 위 타일 그대로 */ [data-feature="buyer-order"] button.bo-item-tile { display: block; border: none; padding: 0; cursor: pointer; } [data-feature="buyer-order"] .bo-item-tile--md { width: 40px; height: 40px; } [data-feature="buyer-order"] .bo-item-tile--sm { width: 38px; height: 38px; } [data-feature="buyer-order"] .bo-item-copy { flex: 1; min-width: 0; } [data-feature="buyer-order"] .bo-item-name { font-size: var(--bo-ts-body); font-weight: var(--bo-tw-body); line-height: var(--bo-tl-body); word-break: keep-all; overflow-wrap: anywhere; } [data-feature="buyer-order"] .bo-item-meta { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-top: 3px; } [data-feature="buyer-order"] .bo-item-price { flex: none; white-space: nowrap; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"] .bo-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: .5px solid var(--line); font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); } [data-feature="buyer-order"] .bo-sum-row > span:first-child { color: var(--fg2); } /* 금액 */ [data-feature="buyer-order"] .bo-free { font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); color: var(--ok-fg); } [data-feature="buyer-order"] .bo-amount-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); } [data-feature="buyer-order"] .bo-amount-row > span:last-child, [data-feature="buyer-order"] .bo-amount-total-value, [data-feature="buyer-order"] .bo-total-value { flex: none; white-space: nowrap; } [data-feature="buyer-order"] .bo-amount-row > span:first-child { color: var(--fg2); } [data-feature="buyer-order"] .bo-amount-row--fee { margin-top: 10px; } [data-feature="buyer-order"] .bo-amount-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: .5px solid var(--line); } [data-feature="buyer-order"] .bo-amount-total-label { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"] .bo-amount--confirm .bo-amount-total { margin-top: 13px; padding-top: 13px; } [data-feature="buyer-order"] .bo-amount--confirm .bo-amount-total-value { font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); } [data-feature="buyer-order"] .bo-amount--complete .bo-amount-total { margin-top: 12px; padding-top: 12px; } [data-feature="buyer-order"] .bo-amount--complete .bo-amount-total-value { font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); } /* 앱 설치 안내(화면 지도 v0.13 · 80판 46판) — 접힌 한 줄 → 그 자리에서 펼침. 아이콘은 업체 로고 또는 채움 컵 */ [data-feature="buyer-order"] .bo-app-icon { display: inline-grid; place-items: center; flex: none; border-radius: 22.5%; overflow: hidden; background: #f6f7f9; color: oklch(48% .096 158); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); } [data-feature="buyer-order"] .bo-app-icon img { width: 100%; height: 100%; object-fit: cover; } [data-feature="buyer-order"] .bo-app-icon--cup svg { width: 58%; height: 58%; } [data-feature="buyer-order"] .bo-inst { margin-top: 12px; border: .5px solid var(--line); border-radius: 12px; background: var(--panel); } [data-feature="buyer-order"] .bo-inst-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: left; font: inherit; color: var(--fg); background: none; border: 0; cursor: pointer; touch-action: manipulation; } [data-feature="buyer-order"] .bo-inst-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } [data-feature="buyer-order"] .bo-inst-title { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"] .bo-inst-sub { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"] .bo-inst-chev { color: var(--fg3); display: flex; transition: transform .26s cubic-bezier(.2,.8,.2,1); } [data-feature="buyer-order"] .bo-inst[data-open] .bo-inst-chev { transform: rotate(180deg); } [data-feature="buyer-order"] .bo-inst-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.2,.8,.2,1); } [data-feature="buyer-order"] .bo-inst[data-open] .bo-inst-body { grid-template-rows: 1fr; } [data-feature="buyer-order"] .bo-inst-body > div { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .16s ease; padding: 0 12px; } [data-feature="buyer-order"] .bo-inst[data-open] .bo-inst-body > div { opacity: 1; transition: opacity .22s ease .06s; padding-bottom: 12px; } [data-feature="buyer-order"] .bo-inst-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border-radius: 10px; border: none; background: var(--solid); color: var(--solid-fg); font: inherit; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); cursor: pointer; } [data-feature="buyer-order"] .bo-inst-steps { list-style: none; margin: 0; padding: 12px; display: grid; gap: 10px; background: var(--bg); border-radius: 10px; font-size: 13px; line-height: 1.5; } [data-feature="buyer-order"] .bo-inst-steps li { display: flex; align-items: flex-start; gap: 10px; } [data-feature="buyer-order"] .bo-inst-no { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--solid); color: var(--solid-fg); margin-top: 1px; } [data-feature="buyer-order"] .bo-inst-glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; vertical-align: -6px; border-radius: 6px; border: .5px solid var(--ctrl); color: var(--fg2); background: var(--panel); } @media (prefers-reduced-motion: reduce) { [data-feature="buyer-order"] .bo-inst-body, [data-feature="buyer-order"] .bo-inst-chev { transition: none; } } /* 01·02 바닥 합계 */ [data-feature="buyer-order"] .bo-foot { padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); border-top: .5px solid var(--line); } /* * 01·02 바닥 버튼은 화면 아래에 잠근다 — 기존 SSR 주문서 .sticky-order(같은 여백·윗선·바탕)와 라이브 주문서 .lb-bar와 같은 자리. * 휴대폰 폭에서는 내용이 짧아도 바닥에 둔다(빈 자리를 버튼 위에). 겹침 화면(z 50)·화면 모드 창(z 60)·toast 아래. * 실기 V61 3번 — 03 동의·주문하기(.bo-confirm-foot)는 잠그지 않는다: 내용을 다 읽은 끝에 이어진다(짧은 내용이면 휴대폰 폭에서 그대로 바닥) */ [data-feature="buyer-order"] .bo-foot { position: sticky; bottom: 0; z-index: 10; background: var(--bg); } @media (max-width: 479.98px) { [data-feature="buyer-order"][data-screen="product"] .bo-screen, [data-feature="buyer-order"][data-screen="shipping"] .bo-screen, [data-feature="buyer-order"][data-screen="confirmation"] .bo-screen { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } /* * 빈 자리는 내용 칸의 아래 여백(auto) — 바닥 막대의 단계별 위 여백은 그대로 최소 간격. 늘어나는 빈 칸(::before)을 두지 않아, * 느린 연결에서 문서가 조금씩 그려져도 이미 보인 것이 밀리지 않는다(실기 v60 5번 측정: 그 칸이 0.26 layout shift) */ [data-feature="buyer-order"] .bo-screen > [data-bo-checkout-content] { margin-bottom: auto; } } /* * 실기 V60 테스트 서버 — 입력 중에도 잠근 그대로다. 칸 focus에 따라 막대를 풀면(예전 position: static) 칸을 떠나는 순간 막대가 뛰어 * 「주문 확인」을 두 번 눌러야 했고, 긴 02에서는 버튼이 화면 밖으로 밀렸다. 휴대폰 키보드가 올라와 있는 동안만 mount가 잰 * 키보드 높이(--bo-bar-lift, visualViewport)만큼 translate로 올린다 — 배치는 그대로라 layout shift가 없고, focus/blur로는 바뀌지 않는다. * V63: Chrome·삼성 인터넷은 viewport interactive-widget=resizes-content로 layout이 줄어 sticky 막대가 스스로 키보드 위에 앉는다(lift 0). * layout이 줄지 않는 iOS Safari만 lift를 쓴다 */ [data-feature="buyer-order"] .bo-foot { translate: 0 calc(-1 * var(--bo-bar-lift, 0px)); } /* * 실기 고침 B2(USER 2026-10-25) — 02 배송은 합계 · [주문 확인]을 잠그지 않고 배송 메모 아래, 내용 끝에 둔다(03 확인과 같은 방식). * 배송 메모를 가리지 않고 키보드와 부딪히지 않는다. 내용이 짧으면 휴대폰 폭에서 그대로 바닥(위 margin-bottom: auto). 01 상품은 그대로 잠금 */ [data-feature="buyer-order"][data-screen="shipping"] .bo-foot { position: static; translate: none; } [data-feature="buyer-order"][data-screen="shipping"] .bo-screen > [data-bo-checkout-content] { margin-bottom: 0; } [data-feature="buyer-order"] .bo-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } /* 화면 지도 v0.77(R26 부탁 1) — 잡아 둔 시간 끝 알림: 바닥 막대 맨 위 한 줄(01 · 02 · 03 같은 줄). 1분 남음 = 주의(노랑), 바뀜 = 위험 글색, 그대로 = 보통 */ [data-feature="buyer-order"] .bo-hold { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); background: var(--surface-2, color-mix(in srgb, var(--fg) 5%, transparent)); } [data-feature="buyer-order"] .bo-hold svg { flex: none; margin-top: 2px; } [data-feature="buyer-order"] .bo-hold.is-warn { color: var(--warn-fg); background: var(--warn-bg); border: .5px solid var(--warn-line); } [data-feature="buyer-order"] .bo-hold.is-changed { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); } [data-feature="buyer-order"] .bo-check-form { display: grid; gap: 12px; } [data-feature="buyer-order"] .bo-check-slot { display: flex; justify-content: center; align-items: center; min-height: 92px; } [data-feature="buyer-order"] .bo-hold-left { font-variant-numeric: tabular-nums; font-weight: 600; display: inline-block; min-width: 2.6em; } [data-feature="buyer-order"] .bo-total-label { font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); } [data-feature="buyer-order"] .bo-total-label span { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"] .bo-total-value { font-size: var(--bo-ts-title); font-weight: var(--bo-tw-title); line-height: var(--bo-tl-title); } @media (max-width: 340px) { [data-feature="buyer-order"] .bo-total-product { display: none; } [data-feature="buyer-order"] .bo-total-label { display: grid; gap: 4px; } [data-feature="buyer-order"] .bo-total-label > span { white-space: nowrap; } } [data-feature="buyer-order"] .bo-foot .bo-cta { margin-top: 16px; } /* 겹침 화면 — 원본은 캔버스 전체를 덮는다. 실제 페이지에서는 보이는 화면에 고정한다 */ [data-feature="buyer-order"] .bo-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: var(--bo-canvas-w); z-index: 50; } /* 수령인 미리 채움 안내(실기 10번) — 닫을 때 높이가 접힌다 */ [data-feature="buyer-order"] .bo-prefill { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .26s cubic-bezier(.2,.8,.2,1), opacity .16s ease; } [data-feature="buyer-order"] .bo-prefill > div { min-height: 0; overflow: hidden; } [data-feature="buyer-order"] .bo-prefill.is-closing { grid-template-rows: 0fr; opacity: 0; } [data-feature="buyer-order"] .bo-prefill-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding: 9px 8px 9px 11px; background: var(--panel); border-radius: 8px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"] .bo-prefill-note > svg { flex: none; margin-top: 2px; } [data-feature="buyer-order"] .bo-prefill-note > span { flex: 1; } [data-feature="buyer-order"] .bo-prefill-x { flex: none; display: flex; background: none; border: none; color: var(--fg3); padding: 2px; margin: -1px 0; cursor: pointer; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { [data-feature="buyer-order"] .bo-prefill { transition: opacity .14s ease; } } /* * 공용 고르기 칸(설계 「고르기 A」 · 실기 12번) — 입력 칸 모양의 칸, 목록은 칸 폭 그대로 아래(자리가 모자라면 위)에 떠서 아래 내용을 밀지 않는다. * 휴대폰 폭은 아래에서 올라오는 시트(뒤 가림막을 누르면 닫힘) */ [data-feature="buyer-order"] .bo-pick { position: relative; } [data-feature="buyer-order"] .bo-pick-trigger { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 10px 0 12px; border-radius: 8px; border: .5px solid var(--ctrl); background: var(--field); color: var(--fg); font: inherit; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); text-align: left; cursor: pointer; } [data-feature="buyer-order"] .bo-pick.is-open .bo-pick-trigger { border-color: var(--fg2); } [data-feature="buyer-order"] .bo-pick-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-feature="buyer-order"] .bo-pick-caret { flex: none; display: flex; color: var(--fg3); transition: transform .2s cubic-bezier(.2,.8,.2,1); } [data-feature="buyer-order"] .bo-pick.is-open .bo-pick-caret { transform: rotate(180deg); } [data-feature="buyer-order"] .bo-pick-scrim { display: none; } [data-feature="buyer-order"] .bo-pick-sheet { display: contents; } [data-feature="buyer-order"] [data-buyer-sheet-grab] { touch-action: none; } [data-feature="buyer-order"] .bo-pick-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; padding: 4px; background: var(--panel); border: .5px solid var(--panel-line); border-radius: 10px; box-shadow: 0 10px 26px rgba(0,0,0,.22); animation: bo-pick-in .14s ease-out; } [data-feature="buyer-order"] .bo-pick[data-up] .bo-pick-panel { top: auto; bottom: calc(100% + 4px); } [data-feature="buyer-order"] .bo-pick-sheet-head { display: none; } [data-feature="buyer-order"] .bo-pick-option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 0 10px; border: none; border-radius: 7px; background: transparent; color: var(--fg); font: inherit; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); text-align: left; cursor: pointer; } [data-feature="buyer-order"] .bo-pick-option > span:first-child { flex: 1; min-width: 0; } [data-feature="buyer-order"] .bo-pick-option:hover, [data-feature="buyer-order"] .bo-pick-option:focus-visible { background: var(--field); outline: none; } [data-feature="buyer-order"] .bo-pick-option.is-on { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"] .bo-pick-check { flex: none; display: flex; width: 14px; color: var(--ok-fg); } @keyframes bo-pick-in { from { opacity: 0; transform: translateY(-3px); } } @media (max-width: 479.98px) { [data-feature="buyer-order"] .bo-pick-scrim { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(0,0,0,.32); } [data-feature="buyer-order"] .bo-pick-panel, [data-feature="buyer-order"] .bo-pick[data-up] .bo-pick-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 70; padding: 6px 10px calc(14px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; animation: bo-sheet-in .2s cubic-bezier(.2,.8,.2,1); } [data-feature="buyer-order"] .bo-pick-sheet-head { display: block; padding: 12px 10px 8px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); color: var(--fg2); } [data-feature="buyer-order"] .bo-pick-option { min-height: 48px; font-size: var(--bo-ts-body); font-weight: var(--bo-tw-body); line-height: var(--bo-tl-body); } } @keyframes bo-sheet-in { from { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { [data-feature="buyer-order"] .bo-pick-panel, [data-feature="buyer-order"] .bo-pick[data-up] .bo-pick-panel { animation: none; } [data-feature="buyer-order"] .bo-pick-caret { transition: none; } } /* * 상품 사진 — 받기 전에는 같은 크기의 옅은 자리, 받은 사진은 추가 페이드 없이 바로 그린다. * 숨김은 mount가 붙인 뒤([data-bo-live])에만 — 스크립트가 없으면 사진은 평소대로 바로 보인다. 이미 받아 둔 사진은 mount가 곧바로 표시한다 */ [data-bo-live] [data-feature="buyer-order"] img[data-bo-photo]:not([data-bo-loaded]) { opacity: 0; } [data-bo-live] [data-feature="buyer-order"] img[data-bo-photo] { transition: none; } [data-bo-live] [data-feature="buyer-order"] :is(.bo-thumb, .bo-item-tile):has(> img[data-bo-photo]:not([data-bo-loaded])) { background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--fg) 7%, transparent) 50%, transparent 100%); background-size: 200% 100%; animation: bo-photo-wait 1.2s ease-in-out infinite; } @keyframes bo-photo-wait { from { background-position: 100% 0; } to { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { [data-bo-live] [data-feature="buyer-order"] img[data-bo-photo] { transition: none; } [data-bo-live] [data-feature="buyer-order"] :is(.bo-thumb, .bo-item-tile):has(> img[data-bo-photo]:not([data-bo-loaded])) { animation: none; } } /* R50 replaces v60's measured bottom lift: every buyer notice is above content; the product viewer retains its header offset. */ [data-feature="buyer-order"] .bo-toast { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 200; pointer-events: none; max-width: 440px; background: var(--fg); color: var(--bg); font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); text-align: center; padding: 11px 18px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.3); } [data-feature="buyer-order"] .bo-toast { width: max-content; max-width: min(440px, calc(100% - 32px)); } [data-feature="buyer-order"] .bo-toast:not([hidden]) { animation: bo-toast-in .2s cubic-bezier(.2,.7,.2,1); } @keyframes bo-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } } @media (prefers-reduced-motion: reduce) { [data-feature="buyer-order"] .bo-toast:not([hidden]) { animation: none; } } /* 전환 (원본 .acc / .os-chev) */ [data-feature="buyer-order"] .bo-acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.2,.8,.2,1); } [data-feature="buyer-order"] .bo-acc[data-state="1"] { grid-template-rows: 1fr; } [data-feature="buyer-order"] .bo-acc > div { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .16s ease; } [data-feature="buyer-order"] .bo-acc[data-state="1"] > div { opacity: 1; transition: opacity .22s ease .06s; } /* mount가 잰 높이에서 직접 움직이는 동안(상품 칸) — CSS 전환은 쉰다(전환이 움직임을 덮지 않게) */ [data-feature="buyer-order"] .bo-acc[data-bo-flip], [data-feature="buyer-order"] .bo-acc[data-bo-flip] > div { transition: none; } [data-feature="buyer-order"] .bo-chev { display: flex; transition: transform .26s cubic-bezier(.2,.8,.2,1); } [data-feature="buyer-order"] .bo-chev[data-state="1"] { transform: rotate(180deg); } /* 단계가 바뀔 때(UIUX-AS R7): 다음 단계는 오른쪽에서, 뒤로 가면 왼쪽에서 12px 미끄러지며 나타난다. 같은 단계 안의 다시 그리기에는 없다 */ @keyframes bo-step-forward { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } @keyframes bo-step-back { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } [data-feature="buyer-order"] [data-bo-enter="forward"] { animation: bo-step-forward .24s cubic-bezier(.2,.8,.2,1) backwards; } [data-feature="buyer-order"] [data-bo-enter="back"] { animation: bo-step-back .24s cubic-bezier(.2,.8,.2,1) backwards; } @media (prefers-reduced-motion: reduce) { [data-feature="buyer-order"] .bo-acc, [data-feature="buyer-order"] .bo-acc > div, [data-feature="buyer-order"] .bo-chev, [data-feature="buyer-order"] .bo-prow { transition: none !important; } [data-feature="buyer-order"] [data-bo-enter] { animation: none !important; } [data-feature="buyer-order"] .bo-busy-face::before, [data-feature="buyer-order"] [data-bo-address-body][aria-busy="true"] .bo-addr-tip-desc::before { animation: none !important; } } [data-feature="buyer-order"][data-screen="product"] .bo-list-head { padding: 18px 20px 6px; } [data-feature="buyer-order"][data-screen="product"] .bo-list-title { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); } [data-feature="buyer-order"][data-screen="product"] .bo-list-sub { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-top: 3px; } [data-feature="buyer-order"][data-screen="product"] .bo-list { padding: 0 12px; } [data-feature="buyer-order"][data-screen="product"] .bo-foot { margin-top: 14px; } /* 상품 줄 */ [data-feature="buyer-order"][data-screen="product"] .bo-prow { width: 100%; padding: 0 14px; border: .5px solid transparent; border-radius: 12px; background: transparent; margin: 0; transition: background-color .26s, border-color .26s, margin .26s; } [data-feature="buyer-order"][data-screen="product"] .bo-prow[data-state="1"] { background: var(--panel); border-color: var(--panel-line); margin: 8px 0; } /* R24 B01-1 넓은 칸 — 사진 84 · 이름 두 줄 · 설명 한 줄 · 값 줄. 칸 머리는 열림 · 닫힘 · 담기 전후 높이가 같다 */ [data-feature="buyer-order"][data-screen="product"] .bo-prow-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; min-height: 116px; border-bottom: .5px solid var(--line); } [data-feature="buyer-order"][data-screen="product"] .bo-prow-head--toggle { cursor: pointer; } [data-feature="buyer-order"][data-screen="product"] .bo-prow-toggle { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; background: none; border: none; padding: 0; margin: 0; text-align: left; color: var(--fg); cursor: pointer; } [data-feature="buyer-order"][data-screen="product"] .bo-prow-toggle--static { cursor: default; } /* Parse fixed-width controls before wrapping text, but keep their reviewed trailing visual positions. */ [data-feature="buyer-order"][data-screen="product"] .bo-prow-head > .bo-unavailable { order: 1; } [data-feature="buyer-order"][data-screen="product"] .bo-prow-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; min-height: 84px; } /* 이름은 열림 · 닫힘 모두 두 줄까지 — 머리 높이가 바뀌지 않게(긴 이름은 상품 창에서 끝까지) */ [data-feature="buyer-order"][data-screen="product"] .bo-prow-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); word-break: keep-all; overflow-wrap: anywhere; } [data-feature="buyer-order"][data-screen="product"] .bo-prow-desc { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 값 줄 — 「✓ 담음 N」 · 「확인 필요 n건」이 맨 앞 고정 자리(이름 말줄임에 잘리지 않게) · 숫자는 자리 고정(tabular) */ /* 좁은 폭에서 남은 수 칩이 다 들어가지 않으면 칩만 아래 줄(오른쪽)로 내려간다 — 칩은 잘리거나 줄바꿈되지 않는다 */ [data-feature="buyer-order"][data-screen="product"] .bo-prow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: auto; min-height: 22px; white-space: nowrap; overflow: hidden; } [data-feature="buyer-order"][data-screen="product"] .bo-prow-price { flex: none; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); font-variant-numeric: tabular-nums; } [data-feature="buyer-order"][data-screen="product"] .bo-prow-note { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); overflow: hidden; text-overflow: ellipsis; } [data-feature="buyer-order"][data-screen="product"] .bo-picked-mark { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); color: var(--solid-fg); background: var(--solid); border-radius: 4px; padding: 1px 6px 1px 4px; } [data-feature="buyer-order"][data-screen="product"] .bo-picked-mark.is-issue { background: var(--danger); color: var(--panel); } [data-feature="buyer-order"][data-screen="product"] .bo-prow.is-picked:not([data-state="1"]) { background: var(--panel); border-color: var(--panel-line); margin: 4px 0; } [data-feature="buyer-order"][data-screen="product"] .bo-prow.is-picked:not([data-state="1"]) .bo-prow-head { border-bottom-color: transparent; } /* * 남은 수 칩 — 줄 나눔은 칩의 최소 폭(min-content = 옵션 이름 최소 폭 + 남은 수 글자)으로 정하고, 남는 자리만큼 옵션 이름을 더 보인다. * 긴 옵션 이름은 4em(세 글자 + …)까지만 줄고, 그 최소를 지킬 수 없으면 칩이 아래 줄로 내려간다. 옵션 이름도 남은 수도 사라지거나 잘리지 않는다 */ [data-feature="buyer-order"] .bo-stock-chip { flex: 1 0 auto; width: min-content; max-width: max-content; margin-left: auto; display: inline-grid; grid-template-columns: minmax(auto, max-content) max-content; align-items: baseline; font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); border-radius: 5px; padding: 2px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ok-fg); background: var(--ok-bg); border: .5px solid var(--ok-line); } [data-feature="buyer-order"] .bo-stock-chip-opt { grid-column: 1; margin-right: .3em; } [data-feature="buyer-order"] .bo-stock-chip-opt.is-long { min-width: 4em; overflow: hidden; text-overflow: ellipsis; } [data-feature="buyer-order"] .bo-stock-chip-n { grid-column: 2; } [data-feature="buyer-order"] .bo-stock-chip.is-low { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-line); } [data-feature="buyer-order"] .bo-stock-chip.is-out { color: var(--fg3); background: transparent; border-color: var(--ctrl); } /* R24 B01-12 — 라이브 방송 주문 머리 꼬리표 「방송 중」(빨간 점) */ [data-feature="buyer-order"] .bo-invite--live { gap: 6px; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); } [data-feature="buyer-order"] .bo-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); } [data-feature="buyer-order"][data-screen="product"] .bo-list-live { display: flex; align-items: center; gap: 5px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-top: 6px; } [data-feature="buyer-order"][data-screen="product"] .bo-stock-alert { display: flex; align-items: center; gap: 7px; margin: 8px 20px 0; padding: 9px 12px; border-radius: 10px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); } [data-feature="buyer-order"][data-screen="product"] .bo-chev--row { order: 1; color: var(--fg2); margin-top: 2px; } [data-feature="buyer-order"][data-screen="product"] .bo-prow-body { padding: 2px 0 16px; } /* 지금 주문할 수 없는 상품 — 기존 '주문 불가' 배지 */ [data-feature="buyer-order"][data-screen="product"] .bo-prow.is-unavailable .bo-prow-copy { opacity: .55; } [data-feature="buyer-order"][data-screen="product"] .bo-unavailable { flex: none; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); border: .5px solid var(--ctrl); border-radius: 999px; padding: 4px 10px; } /* 썸네일 — 사진(받는 동안 고른 색 바탕), 사진이 없거나 실패하면 상자 자리표시(buyer-shared-styles .bo-photo-missing) */ [data-feature="buyer-order"][data-screen="product"] .bo-thumb { width: 84px; height: 84px; border-radius: 10px; flex: none; padding: 0; cursor: pointer; position: relative; border: none; background: var(--bo-tile, var(--unpaid)); display: flex; align-items: center; justify-content: center; color: var(--fg3); overflow: hidden; } [data-feature="buyer-order"][data-screen="product"] .bo-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } [data-feature="buyer-order"][data-screen="product"] .bo-thumb-count { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.55); border-radius: 4px; padding: 1px 4px; color: #fff; font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); } /* 단계형 옵션 */ [data-feature="buyer-order"][data-screen="product"] .bo-og + .bo-og { border-top: .5px solid var(--line); } [data-feature="buyer-order"][data-screen="product"] .bo-og-head { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; padding: 12px 0; cursor: pointer; text-align: left; color: var(--fg); } [data-feature="buyer-order"][data-screen="product"] .bo-og-mark { width: 18px; height: 18px; border-radius: 50%; flex: none; border: .5px solid var(--ctrl); color: var(--fg3); display: flex; align-items: center; justify-content: center; font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); } [data-feature="buyer-order"][data-screen="product"] .bo-og-mark.is-on { border-color: var(--fg); color: var(--fg); } [data-feature="buyer-order"][data-screen="product"] .bo-og-mark.is-done { border: none; background: var(--solid); color: var(--solid-fg); } [data-feature="buyer-order"][data-screen="product"] .bo-og-name { flex: 1; min-width: 0; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"][data-screen="product"] .bo-og-head.is-done .bo-og-name { color: var(--fg); } [data-feature="buyer-order"][data-screen="product"] .bo-og-head.is-on .bo-og-name { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); color: var(--fg); } [data-feature="buyer-order"][data-screen="product"] .bo-og-count { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); } [data-feature="buyer-order"][data-screen="product"] .bo-og-current { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); color: var(--fg); } [data-feature="buyer-order"][data-screen="product"] .bo-og-picked { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); color: var(--fg); max-width: 170px; min-width: 0; } [data-feature="buyer-order"][data-screen="product"] .bo-og-picked-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-feature="buyer-order"][data-screen="product"] .bo-og-change { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); } [data-feature="buyer-order"][data-screen="product"] .bo-chev--og { color: var(--fg3); } [data-feature="buyer-order"][data-screen="product"] .bo-og-values { padding: 0 0 14px 27px; display: flex; flex-wrap: wrap; gap: 7px; } [data-feature="buyer-order"][data-screen="product"] .bo-og-values--grid { display: grid; grid-template-columns: 1fr 1fr; } [data-feature="buyer-order"][data-screen="product"] .bo-ov { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 8px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); cursor: pointer; word-break: keep-all; background: transparent; color: var(--fg); border: .5px solid var(--ctrl); } [data-feature="buyer-order"][data-screen="product"] .bo-ov.has-swatch { padding: 9px 13px 9px 10px; } [data-feature="buyer-order"][data-screen="product"] .bo-og-values--grid .bo-ov { width: 100%; text-align: left; } [data-feature="buyer-order"][data-screen="product"] .bo-ov.is-on { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); background: var(--solid); color: var(--solid-fg); border-color: var(--solid); } [data-feature="buyer-order"][data-screen="product"] .bo-ov.is-soldout { cursor: default; color: var(--fg3); border-color: var(--line); border-style: dashed; } [data-feature="buyer-order"][data-screen="product"] .bo-ov.is-soldout.is-on { background: transparent; color: var(--fg3); border-style: solid; } [data-feature="buyer-order"][data-screen="product"] .bo-ov-soldout { font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); color: var(--fg3); } [data-feature="buyer-order"][data-screen="product"] .bo-ov-price { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-feature="buyer-order"][data-screen="product"] .bo-ov.is-on .bo-ov-price { color: inherit; opacity: .75; } /* R24 B01-10 — 이름 왼쪽 · 개수 · 품절 오른쪽(숫자가 바뀌어도 칸 폭이 그대로) */ [data-feature="buyer-order"][data-screen="product"] .bo-ov-label { flex: 1; min-width: 0; } [data-feature="buyer-order"][data-screen="product"] .bo-ov-end { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); white-space: nowrap; } [data-feature="buyer-order"][data-screen="product"] .bo-ov-end:empty { display: none; } [data-feature="buyer-order"][data-screen="product"] .bo-ov-end > span { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); margin: 0; } [data-feature="buyer-order"][data-screen="product"] .bo-ov-left { color: var(--fg3); font-variant-numeric: tabular-nums; } [data-feature="buyer-order"][data-screen="product"] .bo-ov-left.is-low { color: var(--warn-fg); font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); } [data-feature="buyer-order"][data-screen="product"] .bo-ov.is-on .bo-ov-left { color: inherit; opacity: .75; } [data-feature="buyer-order"] .bo-swatch { border-radius: 50%; flex: none; display: inline-block; background: var(--bo-swatch); border: .5px solid var(--ctrl); } [data-feature="buyer-order"] .bo-swatch.is-on { border: 1px solid var(--solid-fg); } [data-feature="buyer-order"] .bo-swatch--12 { width: 12px; height: 12px; } [data-feature="buyer-order"] .bo-swatch--13 { width: 13px; height: 13px; } [data-feature="buyer-order"] .bo-swatch--16 { width: 16px; height: 16px; } /* 담기 */ [data-feature="buyer-order"][data-screen="product"] .bo-put { width: 100%; margin-top: 6px; padding: 14px 0; border-radius: 8px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); cursor: pointer; background: var(--solid); color: var(--solid-fg); border: .5px solid var(--solid); } [data-feature="buyer-order"][data-screen="product"] .bo-put.is-dupe { background: transparent; color: var(--fg); border-color: var(--ctrl); } [data-feature="buyer-order"][data-screen="product"] .bo-put.is-wait { cursor: default; background: transparent; color: var(--fg3); border-color: var(--line); } [data-feature="buyer-order"][data-screen="product"] .bo-put-option { font-weight: 400; opacity: .75; } /* 담은 조합 */ [data-feature="buyer-order"][data-screen="product"] .bo-lines { margin-top: 16px; border-top: .5px solid var(--line); padding-top: 12px; } [data-feature="buyer-order"][data-screen="product"] .bo-lines-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-bottom: 10px; } [data-feature="buyer-order"][data-screen="product"] .bo-lines-hint { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); } /* v0.82 — 좁은 폭(320)에서 「담은 조합 n건」이 「n / 건」으로 꺾이지 않게: 제목은 한 줄, 안내는 오른쪽에서 줄바꿈 */ [data-feature="buyer-order"][data-screen="product"] .bo-lines-head > span:first-child { flex: none; white-space: nowrap; } [data-feature="buyer-order"][data-screen="product"] .bo-lines-hint { min-width: 0; text-align: right; } [data-feature="buyer-order"][data-screen="product"] .bo-line { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } /* 다듬기 B5 — 좁은 화면(320)에서는 옵션 글만 줄어든다(줄바꿈): 수량 · 삭제는 크기 그대로 */ [data-feature="buyer-order"][data-screen="product"] .bo-line-copy { flex: 1; min-width: 0; } [data-feature="buyer-order"][data-screen="product"] .bo-line-label { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); display: flex; align-items: center; gap: 6px; min-width: 0; } [data-feature="buyer-order"][data-screen="product"] .bo-line-label > span:last-child { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; } [data-feature="buyer-order"][data-screen="product"] .bo-line-amount { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-top: 2px; } [data-feature="buyer-order"][data-screen="product"] .bo-line-remove { position: relative; flex: none; width: 40px; height: 40px; background: none; border: none; color: var(--fg3); padding: 0; cursor: pointer; display: grid; grid-auto-flow: column; place-content: center; align-items: center; } /* * 수량(담은 조합 줄 · 옵션 없는 상품 머리 — 같은 stepper) — 둥근 테두리 높이 40, −/+ 각 40×40, 삭제 40×40. * 누르는 자리는 44: 보이는 40 밖으로 2px씩 넓힌다(::before — ::after는 진행 중 표시가 쓴다). 수량 1의 −는 지금처럼 흐리게 */ [data-feature="buyer-order"][data-screen="product"] .bo-stepper { flex: none; display: flex; align-items: center; height: 40px; border: .5px solid var(--ctrl); border-radius: 999px; padding: 0; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); } [data-feature="buyer-order"][data-screen="product"] .bo-stepper-btn { position: relative; width: 40px; height: 40px; background: none; border: none; color: var(--fg2); padding: 0; cursor: pointer; display: grid; grid-auto-flow: column; place-content: center; align-items: center; } [data-feature="buyer-order"][data-screen="product"] :is(.bo-stepper-btn, .bo-line-remove)::before { content: ""; position: absolute; inset: -2px; } [data-feature="buyer-order"][data-screen="product"] .bo-stepper-btn.is-min { color: var(--fg3); cursor: default; } [data-feature="buyer-order"][data-screen="product"] .bo-stepper-btn[disabled] { opacity: .35; cursor: default; } /* R24 B01-6 — 재고가 바뀐 줄: 옵션 흐리게 · 금액 자리에 한 줄 안내(줄바꿈 없음) */ [data-feature="buyer-order"][data-screen="product"] .bo-line.is-issue .bo-line-label { opacity: .6; } /* v0.82 — 줄 안 상태 글은 왼쪽 칸 안에서 줄바꿈(수량 단추와 겹치지 않게 · USER 실기 지적) */ [data-feature="buyer-order"][data-screen="product"] .bo-line-issue { display: block; font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); color: var(--danger); white-space: normal; overflow-wrap: anywhere; } [data-feature="buyer-order"][data-screen="product"] .bo-stepper-btn--up { color: var(--fg); } [data-feature="buyer-order"][data-screen="product"] .bo-stepper-count { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; } /* 이미지 보기 */ /* 설명이 길거나 화면이 낮으면(모바일) 창 전체가 세로로 스크롤된다 — 바깥 페이지로 넘치지 않게 */ [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer { background: var(--bg); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-title { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-stage { position: relative; height: 360px; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--fg3); font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); overflow: hidden; } /* 여러 장일 때 가로 밀기는 화면이, 세로 스크롤은 브라우저가 맡는다 */ [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-stage[data-bo-swipe] { touch-action: pan-y pinch-zoom; } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-track { display: flex; width: 100%; height: 100%; flex: none; transform: translate3d(var(--bo-photo-offset, 0px), 0, 0); transition: transform .25s ease-out; will-change: transform; } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-track[data-bo-dragging] { transition: none; } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } @media (prefers-reduced-motion: reduce) { [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-track { transition: none; } } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-fail { display: flex; flex-direction: column; align-items: center; gap: 8px; } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; } /* 첫 사진 밑에 깐 목록 타일 사진 — 큰 사진이 풀린(decode) 즉시 숨긴다(투명한 사진 뒤로 비치지 않게). 표시는 mount가 decode 뒤에 붙인다 */ [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-img[data-bo-loaded] + .bo-viewer-ph { visibility: hidden; } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-nav { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px; } /* 원본 이전/다음 버튼은 padding을 주지 않아 브라우저 기본 padding을 쓴다 */ [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-step { background: none; border: none; color: var(--fg2); cursor: pointer; display: flex; } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-dots { display: flex; gap: 6px; } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--ctrl); } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-dot.is-on { width: 16px; background: var(--fg); } /* 상품 설명 — 판매자가 넣은 줄바꿈을 지키고 긴 낱말도 화면 폭 안에서 끊는다 */ [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-desc { padding: 4px 20px 28px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; } [data-feature="buyer-order"]:is([data-screen="product"], [data-screen="confirmation"]) .bo-viewer-stage + .bo-viewer-desc { padding-top: 18px; } /* R24 B01-4 상품 창 — 위 뒤로 줄(60) · 아래 담기 줄 고정 · 가운데 스크롤 하나. 아래에서 올라오며 열리고 내려가며 닫힌다 */ @keyframes bo-viewer-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes bo-viewer-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(28px); } } [data-feature="buyer-order"][data-screen="product"] .bo-viewer--detail { display: flex; flex-direction: column; overflow: hidden; } [data-feature="buyer-order"][data-screen="product"] .bo-viewer--detail[data-bo-pop] { animation: bo-viewer-in .24s cubic-bezier(.2,.8,.2,1); } [data-feature="buyer-order"][data-screen="product"] .bo-viewer--detail[data-bo-leave] { animation: bo-viewer-out .18s ease-in forwards; pointer-events: none; } /* 열고 닫을 때 바탕이 흔들리지 않게 — 바탕 스크롤을 잠그고, 스크롤 막대 자리는 늘 잡아 둔다. 잠금은 상품 창이 있는 동안 mount가 html에 두는 표시로 건다(문서 전체를 훑는 :root:has()는 그리기마다 스타일 계산을 늘렸다) */ :root[data-buyer-viewer-open], :root[data-buyer-viewer-open] body { overflow: hidden; } html:has([data-feature="buyer-order"][data-screen="product"]) { scrollbar-gutter: stable; } [data-feature="buyer-order"][data-screen="product"] .bo-dv-head { flex: none; display: flex; align-items: center; gap: 4px; height: 60px; padding: 8px 16px 8px 8px; background: var(--bg); border-bottom: .5px solid var(--line); } [data-feature="buyer-order"][data-screen="product"] .bo-dv-head .bo-icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: none; } [data-feature="buyer-order"][data-screen="product"] .bo-dv-head-title { flex: 1; min-width: 0; font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 상품 창에서는 「담았어요」를 위 줄 바로 아래에 — 아래로 옮겨 간 담은 줄을 가리지 않게 */ /* 상품 창은 캔버스 바로 아래(닫히는 복사본은 루트 바로 아래)에만 있다 — 자식 단계만 보아 루트 아래 다른 변경이 이 규칙을 다시 맞춰 보게 하지 않는다 */ [data-feature="buyer-order"]:has(> .bo-canvas > .bo-viewer--detail, > .bo-viewer--detail) .bo-toast { top: calc(72px + env(safe-area-inset-top)); bottom: auto; translate: none; } [data-feature="buyer-order"][data-screen="product"] .bo-dv-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } [data-feature="buyer-order"][data-screen="product"] .bo-dv-foot { flex: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: .5px solid var(--line); } [data-feature="buyer-order"][data-screen="product"] .bo-dv-foot .bo-put { margin: 0; width: 100%; } [data-feature="buyer-order"][data-screen="product"] .bo-put--done { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } [data-feature="buyer-order"][data-screen="product"] .bo-viewer--detail .bo-viewer-stage { height: 320px; } [data-feature="buyer-order"][data-screen="product"] .bo-viewer--detail .bo-viewer-nav { padding: 12px 16px 4px; } [data-feature="buyer-order"][data-screen="product"] .bo-dv-info { padding: 14px 20px 18px; } [data-feature="buyer-order"][data-screen="product"] .bo-dv-name { margin: 0; font-size: var(--bo-ts-title); font-weight: var(--bo-tw-title); line-height: var(--bo-tl-title); word-break: keep-all; overflow-wrap: anywhere; } [data-feature="buyer-order"][data-screen="product"] .bo-dv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; min-height: 22px; } [data-feature="buyer-order"][data-screen="product"] .bo-dv-meta .bo-prow-price { font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); } [data-feature="buyer-order"][data-screen="product"] .bo-dv-sec { border-top: 8px solid var(--band); padding: 18px 20px 20px; } [data-feature="buyer-order"][data-screen="product"] .bo-dv-sec-title { margin: 0 0 10px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } /* R24 B01-11 — 상품 설명은 줄바꿈 그대로 끝까지 */ [data-feature="buyer-order"][data-screen="product"] .bo-dv-desc { margin: 0; font-size: var(--bo-ts-body); font-weight: var(--bo-tw-body); line-height: var(--bo-tl-body); color: var(--fg); white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; } [data-feature="buyer-order"][data-screen="product"] .bo-dv-sec--pick { padding-bottom: 28px; } @media (prefers-reduced-motion: reduce) { [data-feature="buyer-order"][data-screen="product"] .bo-prow { transition: none !important; } [data-feature="buyer-order"][data-screen="product"] .bo-viewer--detail[data-bo-pop], [data-feature="buyer-order"][data-screen="product"] .bo-viewer--detail[data-bo-leave] { animation: none; } } .bo-customs-control { display: block; position: relative; } .bo-customs-control .bo-customs-prefix { position: absolute; inset: 0 auto 0 13px; display: flex; align-items: center; pointer-events: none; font-size: var(--bo-ts-input, var(--bo-ts-body, 14px)); font-weight: var(--bo-tw-input, 400); line-height: var(--bo-tl-input, 1.4); color: inherit; } .bo-customs-control input { padding-left: calc(13px + 1ch + 8px); padding-right: 64px; font-variant-numeric: tabular-nums; } .bo-customs-count { position: absolute; inset: 0 13px 0 auto; display: flex; align-items: center; pointer-events: none; font-variant-numeric: tabular-nums; color: var(--fg2); font-size: var(--bo-ts-hint, 13px); } [data-feature="buyer-order"][data-screen="shipping"] .bo-form { padding: 18px 20px 4px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-field { margin-bottom: 18px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-label { display: block; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-bottom: 7px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-label-required { color: var(--danger); } [data-feature="buyer-order"][data-screen="shipping"] .bo-input { display: block; width: 100%; height: 44px; padding: 0 13px; font-size: 14px; border-radius: 8px; background: var(--field); color: var(--fg); border: .5px solid var(--ctrl); outline: none; } [data-feature="buyer-order"][data-screen="shipping"] .bo-input.is-error { border-color: var(--danger); } [data-feature="buyer-order"][data-screen="shipping"] .bo-input--tel { font-variant-numeric: tabular-nums; } [data-feature="buyer-order"][data-screen="shipping"] .bo-input--detail { margin-top: 8px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-customs-control .bo-input { padding-left: calc(13px + 1ch + 8px); } [data-feature="buyer-order"][data-screen="shipping"] .bo-clear-field { position: relative; } [data-feature="buyer-order"][data-screen="shipping"] .bo-clear-field .bo-input { padding-right: 44px; } /* 다듬기 B4 — 지우기: 공용 x 아이콘, 누르는 자리 44×44. 글이 있을 때만 보이고 자리(padding-right 44)는 늘 비워 둬 글자가 움직이지 않는다 */ [data-feature="buyer-order"][data-screen="shipping"] .bo-field-clear { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--fg2); cursor: pointer; } [data-feature="buyer-order"][data-screen="shipping"] .bo-clear-field:has(.bo-input:placeholder-shown) .bo-field-clear { visibility: hidden; } /* 입금자명(선택, 시안 46판) — 이름 줄 오른쪽 상태(비움 · 같음은 흐리게, 다름은 경고 색). 같은 자리에서 글 · 색만, 줄 높이 고정 */ [data-feature="buyer-order"][data-screen="shipping"] .bo-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 18px; margin-bottom: 7px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-label-row .bo-label { margin-bottom: 0; flex: none; } [data-feature="buyer-order"][data-screen="shipping"] .bo-label-optional { margin-left: 4px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); } [data-feature="buyer-order"][data-screen="shipping"] .bo-dep-state { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); white-space: nowrap; color: var(--fg3); transition: color .16s ease; } [data-feature="buyer-order"][data-screen="shipping"] .bo-dep-state[data-bo-dep-state="same"] { color: var(--fg2); } [data-feature="buyer-order"][data-screen="shipping"] .bo-dep-state[data-bo-dep-state="diff"] { color: var(--warn-fg); font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); } /* 320 폭에서 '주소 검색' 버튼이 오른쪽 여백을 넘던 것(BUYER-R18)을 바로잡는다(UIUX-AS R7): 우편번호 칸이 줄어들 수 있게 */ [data-feature="buyer-order"][data-screen="shipping"] .bo-input--zip { flex: 1; width: auto; min-width: 0; cursor: pointer; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-row { display: flex; gap: 8px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-search { flex: none; height: 44px; padding: 0 16px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-picked { margin-top: 8px; font-size: var(--bo-ts-body); font-weight: var(--bo-tw-body); line-height: var(--bo-tl-body); padding: 12px 13px; border-radius: 8px; background: var(--panel); border: .5px solid var(--panel-line); } [data-feature="buyer-order"][data-screen="shipping"] .bo-err { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--danger); margin-top: 6px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-hint { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); margin-top: 6px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-note-more { background: none; border: none; padding: 0; color: var(--fg2); font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); text-decoration: underline; cursor: pointer; } [data-feature="buyer-order"][data-screen="shipping"] .bo-memos { display: flex; flex-wrap: wrap; gap: 8px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-memo { padding: 9px 14px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); border-radius: 999px; cursor: pointer; background: transparent; color: var(--fg2); border: .5px solid var(--ctrl); } [data-feature="buyer-order"][data-screen="shipping"] .bo-memo.is-on { background: var(--solid); color: var(--solid-fg); border-color: var(--solid); } [data-feature="buyer-order"][data-screen="shipping"] .bo-textarea { display: block; width: 100%; height: 74px; padding: 12px 13px; font-size: 14px; border-radius: 8px; background: var(--field); color: var(--fg); border: .5px solid var(--ctrl); outline: none; resize: none; margin-top: 10px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-foot { margin-top: 8px; } /* 키보드·오류 칸 focus — 위 칸의 outline:none이 공용 focus 표시(buyer-shared-styles)를 덮지 않게 같은 token으로. 배치·치수는 그대로 */ /* R12: 글자 칸은 바깥 고리 없이 칸 테두리 한 겹만 진해진다(관리자와 같은 규칙) */ [data-feature="buyer-order"][data-screen="shipping"] .bo-input:focus-visible, [data-feature="buyer-order"][data-screen="shipping"] .bo-textarea:focus-visible { outline: none; border-color: var(--fg2); box-shadow: inset 0 0 0 .5px var(--fg2); } [data-feature="buyer-order"][data-screen="shipping"] .bo-input.is-error:focus-visible { border-color: var(--danger); box-shadow: inset 0 0 0 .5px var(--danger); } /* R33 D6 — 터치 화면의 입력 칸(토큰은 buyer-tokens). 마우스 · PC는 위 규격 그대로 */ @media (pointer: coarse) { [data-feature="buyer-order"][data-screen="shipping"] .bo-input, [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-input { height: var(--bo-input-h); font-size: var(--bo-ts-input); font-weight: var(--bo-tw-input); line-height: var(--bo-tl-input); } [data-feature="buyer-order"][data-screen="shipping"] .bo-textarea { padding-top: var(--bo-input-pad-y); padding-bottom: var(--bo-input-pad-y); font-size: var(--bo-ts-input); font-weight: var(--bo-tw-input); line-height: var(--bo-tl-input); } } /* 주소 검색 (원본 bKakao) */ [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-dialog { background: var(--panel); display: flex; flex-direction: column; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: .5px solid var(--line); } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; font-size: 14px; border-radius: 8px; background: var(--field); color: var(--fg); border: .5px solid var(--ctrl); outline: none; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-input::-webkit-search-cancel-button { display: none; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-body { flex: 1; overflow: auto; background: var(--bg); padding: 16px 16px 8px; display: flex; flex-direction: column; } /* * SDK 칸은 준비 전까지 자리만 잡고 보이지 않는다. 높이는 mount가 이 칸의 규칙으로 정한 SDK 내용 높이에서 시작해(줄지 않음) * 시트 남은 높이까지 늘어난다 — SDK 창(height 100%)이 시트를 채우고, 내용이 더 길면 시트 몸통이 스크롤된다 (CH-031) */ [data-feature="buyer-order"][data-screen="shipping"] [data-bo-address-slot] { flex: 1 0 auto; } [data-feature="buyer-order"][data-screen="shipping"] [data-bo-address-slot].is-pending { visibility: hidden; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-result { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: .5px solid var(--line); padding: 14px 0; cursor: pointer; color: var(--fg); } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-zip { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-bottom: 6px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-line { display: flex; gap: 8px; font-size: var(--bo-ts-body); font-weight: var(--bo-tw-body); line-height: var(--bo-tl-body); } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-line--jibun { margin-top: 4px; color: var(--fg2); } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-kind { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); flex: none; padding-top: 2px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-tip-title { font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); margin-bottom: 8px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-tip-desc { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-bottom: 14px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-tip { margin-bottom: 11px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-tip-example { color: var(--fg3); margin-top: 2px; } [data-feature="buyer-order"][data-screen="shipping"] .bo-addr-foot { background: var(--panel); padding: 12px; text-align: center; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); border-top: .5px solid var(--line); } /* 03 확인 */ [data-feature="buyer-order"][data-screen="confirmation"] .bo-confirm { padding: 18px 20px 22px; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-confirm-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-confirm-head--pay { margin: 20px 0 10px; } /* 03 입금자명(46판) — 같으면 흐린 한 줄, 다르면 경고 톤 상자 + [수정] */ [data-feature="buyer-order"][data-screen="confirmation"] .bo-dep-note { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"][data-screen="confirmation"] .bo-dep-note strong { color: var(--fg); font-weight: 600; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-dep-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 12px 12px 12px 14px; border-radius: 10px; background: var(--warn-bg); border: .5px solid var(--warn-line); color: var(--warn-fg); } [data-feature="buyer-order"][data-screen="confirmation"] .bo-dep-check > svg { flex: none; margin-top: 2px; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-dep-check-body { flex: 1; min-width: 0; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-dep-check-title { font-size: var(--bo-ts-body); font-weight: var(--bo-tw-body); line-height: var(--bo-tl-body); color: var(--fg); } [data-feature="buyer-order"][data-screen="confirmation"] .bo-dep-check-title strong { font-weight: 600; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-dep-check-sub { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); margin-top: 3px; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-dep-check .bo-edit { flex: none; align-self: center; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-edit { background: none; border: none; color: var(--fg2); font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); padding: 0; cursor: pointer; text-decoration: underline; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-items { padding: 4px 14px; margin-bottom: 20px; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-item-name { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"][data-screen="confirmation"] .bo-item-price { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); color: var(--fg); } [data-feature="buyer-order"][data-screen="confirmation"] .bo-confirm-foot { padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); border-top: .5px solid var(--line); } [data-feature="buyer-order"][data-screen="confirmation"] .bo-consent-row { display: flex; align-items: center; gap: 8px; padding: 0 0 14px; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-consent { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: var(--fg); } [data-feature="buyer-order"][data-screen="confirmation"] .bo-consent-box { width: 20px; height: 20px; flex: none; border-radius: 5px; border: .5px solid var(--ctrl); background: transparent; color: var(--solid-fg); display: flex; align-items: center; justify-content: center; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-consent.is-on .bo-consent-box { border-color: var(--solid); background: var(--solid); } [data-feature="buyer-order"][data-screen="confirmation"] .bo-consent-text { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg); word-break: keep-all; } /* '필수' 표시 — 대괄호 글자 대신 작은 칩. 동의 문장은 한 줄로 끝나게 짧게(목적·항목은 [자세히] 안내 창) */ [data-feature="buyer-order"][data-screen="confirmation"] .bo-consent-tag { flex: none; padding: 1px 6px; border-radius: 5px; background: var(--fg); color: var(--bg); font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); } [data-feature="buyer-order"][data-screen="confirmation"] .bo-consent-more { flex: none; background: none; border: none; padding: 0; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); text-decoration: underline; white-space: nowrap; cursor: pointer; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-privacy-line { margin: -6px 0 14px 30px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); overflow-wrap: anywhere; } [data-feature="buyer-order"][data-screen="confirmation"] .bo-privacy-line a { color: inherit; } [data-feature="buyer-order"][data-screen="complete"] .bo-result, [data-feature="buyer-order"][data-screen="expired"] .bo-result, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-result, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-result { padding: 4px 20px 22px; } [data-feature="buyer-order"][data-screen="complete"] .bo-result-sub, [data-feature="buyer-order"][data-screen="expired"] .bo-result-sub, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-result-sub, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-result-sub { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-top: 3px; } /* 다듬기 B6 — 주문번호 줄(04 · 05 · 07 취소): 13px 보조색 + [복사]. 좁으면 [복사]만 다음 줄, 번호는 자르지 않는다 */ [data-feature="buyer-order"][data-screen="complete"] .bo-result-head-copy, [data-feature="buyer-order"][data-screen="expired"] .bo-result-head-copy, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-result-head-copy, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-result-head-copy { flex: 1; min-width: 0; } [data-feature="buyer-order"][data-screen="complete"] .bo-order-no, [data-feature="buyer-order"][data-screen="expired"] .bo-order-no, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-order-no, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-order-no { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; } [data-feature="buyer-order"][data-screen="complete"] .bo-order-no-text, [data-feature="buyer-order"][data-screen="expired"] .bo-order-no-text, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-order-no-text, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-order-no-text { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-order { padding: 0 20px 12px; } [data-feature="buyer-order"][data-screen="complete"] .bo-cta--gap, [data-feature="buyer-order"][data-screen="expired"] .bo-cta--gap, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-cta--gap, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-cta--gap { margin-top: 20px; } /* * 04·05·07 맨 아래 글 버튼(§233 USER 2026-10-31) — '플랫폼에 문의하기' · '내 개인정보 확인 · 삭제 요청'이 같은 모양 하나: * 13 · fg2 · 밑줄, 가운데 한 줄씩. 줄마다 높이 44 · 줄 사이 0(6677929080 3): 누르는 영역이 곧 줄이라 겹치지 않는다. 문의는 누르면 아래에 문의 칸이 펼쳐진다(⌄ 표시 없음) */ [data-feature="buyer-order"][data-screen="complete"] .bo-foot-row, [data-feature="buyer-order"][data-screen="expired"] .bo-foot-row, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-foot-row, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-foot-row { padding: 0 20px; text-align: center; } [data-feature="buyer-order"][data-screen="complete"] .bo-support, [data-feature="buyer-order"][data-screen="expired"] .bo-support, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-support, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-support { padding: 0 20px 24px; text-align: center; } [data-feature="buyer-order"][data-screen="complete"] .bo-foot-link, [data-feature="buyer-order"][data-screen="expired"] .bo-foot-link, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-foot-link, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-foot-link { display: inline-flex; align-items: center; min-height: 44px; background: none; border: none; padding: 0 2px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } [data-feature="buyer-order"][data-screen="complete"] .bo-support-panel, [data-feature="buyer-order"][data-screen="expired"] .bo-support-panel, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-support-panel, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-support-panel { margin-top: 10px; text-align: left; } /* 접힌 상자 안 카드 그림자가 잘리지 않게 아래 여유 */ [data-feature="buyer-order"][data-screen="complete"] .bo-support-acc > div > .bo-support-panel, [data-feature="buyer-order"][data-screen="expired"] .bo-support-acc > div > .bo-support-panel, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-support-acc > div > .bo-support-panel, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-support-acc > div > .bo-support-panel { margin-bottom: 2px; } [data-feature="buyer-order"][data-screen="complete"] .bo-support-desc, [data-feature="buyer-order"][data-screen="expired"] .bo-support-desc, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-support-desc, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-support-desc { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); word-break: keep-all; overflow-wrap: anywhere; } [data-feature="buyer-order"][data-screen="complete"] .bo-support-field, [data-feature="buyer-order"][data-screen="expired"] .bo-support-field, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-support-field, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-support-field { display: block; margin-top: 12px; } [data-feature="buyer-order"][data-screen="complete"] .bo-support-label, [data-feature="buyer-order"][data-screen="expired"] .bo-support-label, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-support-label, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-support-label { display: block; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-bottom: 7px; } [data-feature="buyer-order"][data-screen="complete"] .bo-support-msg, [data-feature="buyer-order"][data-screen="expired"] .bo-support-msg, [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-support-msg, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-support-msg { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-top: 8px; } /* 04 완료 */ [data-feature="buyer-order"][data-screen="complete"] .bo-hero { padding: 14px 0 22px; } [data-feature="buyer-order"][data-screen="complete"] .bo-deadline { margin-bottom: 14px; } [data-feature="buyer-order"][data-screen="complete"] .bo-hero-name { font-weight: 600; color: var(--fg); } [data-feature="buyer-order"][data-screen="complete"] .bo-bank { padding: 2px 14px 6px; } [data-feature="buyer-order"][data-screen="complete"] .bo-bank-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: .5px solid var(--line); } [data-feature="buyer-order"][data-screen="complete"] .bo-bank-row:last-child { border-bottom: none; } [data-feature="buyer-order"][data-screen="complete"] .bo-bank-key { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); width: 58px; flex: none; } [data-feature="buyer-order"][data-screen="complete"] .bo-bank-value { flex: 1; min-width: 0; font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); } [data-feature="buyer-order"][data-screen="complete"] .bo-bank-value--big { font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); } [data-feature="buyer-order"][data-screen="complete"] .bo-copy-all { width: 100%; margin-top: 10px; padding: 13px 0; border-radius: 10px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); background: var(--solid); color: var(--solid-fg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-copy-hint { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); text-align: center; margin-top: 8px; } /* 실기 고침 B4 — 판매자 문의 카드(계좌 · 복사 아래, 금액 위) */ [data-feature="buyer-order"][data-screen="complete"] .bo-seller-inquiry { margin-top: 12px; } [data-feature="buyer-order"][data-screen="complete"] .bo-seller-inquiry-title { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"][data-screen="complete"] .bo-seller-inquiry-note { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-top: 2px; overflow-wrap: anywhere; } [data-feature="buyer-order"][data-screen="complete"] .bo-seller-inquiry-btn { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; } [data-feature="buyer-order"][data-screen="complete"] .bo-push { background: var(--panel); border: .5px solid var(--panel-line); border-radius: 10px; padding: 13px; margin-top: 16px; } [data-feature="buyer-order"][data-screen="complete"] .bo-push--on { display: flex; align-items: center; gap: 10px; } [data-feature="buyer-order"][data-screen="complete"] .bo-push-row { display: flex; gap: 10px; } [data-feature="buyer-order"][data-screen="complete"] .bo-push-icon { color: var(--fg2); display: flex; margin-top: 1px; } [data-feature="buyer-order"][data-screen="complete"] .bo-push--on .bo-push-icon { color: var(--ok-fg); margin-top: 0; } [data-feature="buyer-order"][data-screen="complete"] .bo-push-text { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); flex: 1; } [data-feature="buyer-order"][data-screen="complete"] .bo-push-btn { width: 100%; margin-top: 11px; padding: 11px 0; border-radius: 8px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); background: transparent; color: var(--fg); border: .5px solid var(--ctrl); cursor: pointer; } [data-feature="buyer-order"][data-screen="complete"] .bo-push--live { margin-top: 10px; } [data-feature="buyer-order"][data-screen="complete"] .bo-push--live .bo-push-text { word-break: keep-all; } [data-feature="buyer-order"][data-screen="complete"] .bo-push-off { margin-left: auto; flex: none; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); background: none; border: 0; padding: 6px 2px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } [data-feature="buyer-order"][data-screen="complete"] .bo-push-warn { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); margin-top: 9px; } [data-feature="buyer-order"][data-screen="complete"] .bo-amount { margin-top: 16px; } [data-feature="buyer-order"][data-screen="complete"] .bo-callout { margin-top: 14px; } /* 05 만료 */ [data-feature="buyer-order"][data-screen="expired"] .bo-hero { padding: 14px 0 20px; } [data-feature="buyer-order"][data-screen="expired"] .bo-hero-desc span { color: var(--fg); } [data-feature="buyer-order"][data-screen="expired"] .bo-section-title { margin-bottom: 10px; } [data-feature="buyer-order"][data-screen="expired"] .bo-history { padding: 2px 14px 4px; opacity: .62; } [data-feature="buyer-order"][data-screen="expired"] .bo-item-tile { filter: grayscale(.55); } [data-feature="buyer-order"][data-screen="expired"] .bo-ref-note { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); margin-top: 10px; } [data-feature="buyer-order"][data-screen="expired"] .bo-callout { margin-top: 16px; } [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-callout { margin-top: 14px; } [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-callout + .bo-card { margin-top: 12px; } /* 06 무효 */ [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-hero { padding: 26px 0 22px; } [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-hero-desc { margin-top: 9px; } [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-guide { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-guide-row { display: flex; gap: 9px; } [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-guide-row + .bo-guide-row { margin-top: 10px; } [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-guide-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--fg3); flex: none; margin-top: 9px; } [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-guide b { color: var(--fg); font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"]:is([data-screen="invalid"], [data-screen="my-orders-locked"]) .bo-cta { margin-top: 18px; } /* 07 기접수 */ [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-head { padding: 16px 20px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-tools { display: flex; align-items: center; gap: 7px; min-width: 0; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-context { min-width: 0; overflow-wrap: anywhere; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-card { background: var(--panel); border: .5px solid var(--panel-line); border-radius: 14px; padding: 18px 16px 16px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-top { display: flex; align-items: center; gap: 10px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-mark { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: transparent; border: .5px solid var(--ctrl); color: var(--fg3); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-label { font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); letter-spacing: .04em; color: var(--fg3); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-card--warn .bo-status-mark { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-fg); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-card--warn .bo-status-label { color: var(--warn-fg); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-card--ok .bo-status-mark { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-card--ok .bo-status-label { color: var(--ok-fg); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-copy { flex: 1; min-width: 0; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-title { font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); margin-top: 3px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-desc { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-top: 10px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-rail { display: flex; align-items: center; margin: 18px 0 4px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-rail-step { text-align: center; flex: none; width: 58px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-rail-dot { width: 16px; height: 16px; border-radius: 50%; margin: 0 auto 6px; background: transparent; border: .5px solid var(--ctrl); color: var(--solid-fg); display: flex; align-items: center; justify-content: center; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-rail-name { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-rail-step.is-on .bo-rail-dot { background: var(--solid); border-color: var(--solid); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-rail-step.is-on .bo-rail-name { color: var(--fg); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-rail-link { flex: 1; height: 1px; background: var(--line); margin: 0 6px; position: relative; top: -8px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-rail-link.is-on { background: var(--fg); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-meta { display: flex; justify-content: space-between; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); margin-top: 8px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-meta--first { margin-top: 16px; padding-top: 13px; border-top: .5px solid var(--line); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-meta strong { color: var(--fg); font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); } /* v0.51 — 주문번호 줄 복사(입금 대기 · 확인 · 발송 · 송장 같은 자리) */ [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-meta--no { align-items: center; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-meta-copy { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-meta-copy strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-meta-copy .bo-copy { padding: 4px 9px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-act-gap { margin-top: 16px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-act-gap + .bo-cta { margin-top: 10px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-bank { padding: 2px 14px 6px; margin-top: 10px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-waybill { padding: 2px 14px 6px; margin-top: 16px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-waybill-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-waybill-row + .bo-waybill-row { border-top: .5px solid var(--line); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-waybill-key { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); width: 58px; flex: none; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-waybill-value { flex: 1; min-width: 0; font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-waybill + .bo-cta, [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-status-bank + .bo-cta { margin-top: 10px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 10px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-section-aside { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-history { padding: 2px 14px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-history.is-cancelled { opacity: .62; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-history.is-cancelled .bo-item-tile { filter: grayscale(.55); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-sum-row > span:last-child { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-mask-note { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); margin-top: 12px; padding-top: 11px; border-top: .5px solid var(--line); } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-onetime { margin-top: 20px; } [data-feature="buyer-order"]:is([data-screen="status"], [data-screen="complete"]) .bo-back-gap { margin-top: 16px; } [data-feature="buyer-order"] .bo-notice { background: var(--bg); display: flex; flex-direction: column; } [data-feature="buyer-order"] .bo-notice-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: .5px solid var(--line); background: var(--panel); } [data-feature="buyer-order"] .bo-notice-title { margin: 0; font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); } [data-feature="buyer-order"] .bo-notice-body { flex: 1; overflow: auto; padding: 16px 20px 8px; } [data-feature="buyer-order"] .bo-notice-body:focus-visible { outline: 1.5px solid var(--fg2); outline-offset: -3px; } [data-feature="buyer-order"] .bo-notice-foot { padding: 12px 20px 18px; border-top: .5px solid var(--line); background: var(--panel); } [data-feature="buyer-order"] .bo-notice-summary { margin-bottom: 18px; } [data-feature="buyer-order"] .bo-notice-section { margin-bottom: 18px; } [data-feature="buyer-order"] .bo-notice-heading { margin: 0 0 8px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"] .bo-notice-text { margin: 0 0 8px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"] .bo-notice-rows { margin: 0; } [data-feature="buyer-order"] .bo-notice-row { display: flex; gap: 12px; padding: 8px 0; } [data-feature="buyer-order"] .bo-notice-row + .bo-notice-row { border-top: .5px solid var(--line); } [data-feature="buyer-order"] .bo-notice-row dt { width: 104px; flex: none; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"] .bo-notice-row dd { flex: 1; min-width: 0; margin: 0; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); overflow-wrap: anywhere; } [data-feature="buyer-order"] .bo-notice-row a { color: inherit; } [data-feature="buyer-order"] .bo-notice-page { padding: 4px 20px 28px; } /* 지난 제출 거절 안내 (01·03) */ [data-feature="buyer-order"] .bo-issue { margin: 0 0 16px; } [data-feature="buyer-order"] [data-screen="product"] .bo-issue { margin: 8px 20px 4px; } [data-feature="buyer-order"] .bo-issue-list { margin-top: 8px; } [data-feature="buyer-order"] .bo-issue-inquiry { text-decoration: none; box-sizing: border-box; } [data-feature="buyer-order"] .bo-issue-list li { display: flex; flex-direction: column; gap: 2px; } [data-feature="buyer-order"] .bo-issue-list li + li { margin-top: 6px; } [data-feature="buyer-order"] .bo-issue-name { font-weight: 600; overflow-wrap: anywhere; } [data-feature="buyer-order"] .bo-pp-card { margin: 12px 20px 0; padding: 14px; background: var(--panel); border: .5px solid var(--panel-line); border-radius: 12px; } [data-feature="buyer-order"] .bo-pp-card--flush { margin: 0; } [data-feature="buyer-order"] .bo-pp-card--soft { background: transparent; border-style: dashed; } /* 02 배송 맨 위 불러오기 한 줄(B3a) · 입력을 시작하면 오른쪽 위 작은 글 단추(B3t) */ [data-feature="buyer-order"] .bo-pp-loadrow { display: grid; grid-template-columns: 18px minmax(0, 1fr) 16px; align-items: center; gap: 10px; width: calc(100% - 40px); margin: 12px 20px 4px; padding: 10px 12px; border: .5px solid var(--ctrl); border-radius: 10px; background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; } [data-feature="buyer-order"] .bo-pp-loadrow strong { display: block; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"] .bo-pp-loadrow span span { display: block; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"] .bo-pp-loadrow > svg:last-child { color: var(--fg3); } [data-feature="buyer-order"] .bo-pp-loadmini { display: flex; justify-content: flex-end; margin: 8px 20px -4px; } [data-feature="buyer-order"] .bo-pp-loadmini .bo-pp-text { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); } [data-feature="buyer-order"] .bo-pp-title { display: flex; align-items: center; gap: 7px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); color: var(--fg); } [data-feature="buyer-order"] .bo-pp-title:focus { outline: none; } [data-feature="buyer-order"] .bo-pp-desc { margin-top: 5px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"] .bo-pp-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } [data-feature="buyer-order"] .bo-pp-actions > .bo-btn { flex: 1; min-height: 42px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"] .bo-pp-text { margin-top: 10px; padding: 0; border: 0; background: none; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } [data-feature="buyer-order"] .bo-pp-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } [data-feature="buyer-order"] .bo-pp-option { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 10px; border: .5px solid var(--ctrl); background: var(--field); } [data-feature="buyer-order"] button.bo-pp-option { width: 100%; font: inherit; color: var(--fg); text-align: left; cursor: pointer; } [data-feature="buyer-order"] .bo-pp-option.is-on { border-color: var(--solid); box-shadow: 0 0 0 1px var(--solid) inset; } [data-feature="buyer-order"] .bo-pp-option--off { opacity: .6; } [data-feature="buyer-order"] .bo-pp-radio { width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--ctrl); display: grid; place-items: center; } [data-feature="buyer-order"] .bo-pp-option.is-on .bo-pp-radio { border-color: var(--solid); } [data-feature="buyer-order"] .bo-pp-option.is-on .bo-pp-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--solid); } [data-feature="buyer-order"] .bo-pp-copy { flex: 1; min-width: 0; display: grid; gap: 2px; word-break: keep-all; } [data-feature="buyer-order"] .bo-pp-copy strong { font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); color: var(--fg); } [data-feature="buyer-order"] .bo-pp-copy span { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); } [data-feature="buyer-order"] .bo-pp-page { padding: 4px 20px 24px; display: grid; gap: 12px; } [data-feature="buyer-order"] .bo-pp-page > .bo-pp-line { margin: 0; } [data-feature="buyer-order"] [data-reuse-page="manage"] .bo-pp-row > .bo-btn { flex: 0 0 58px; width: 58px; height: 40px; box-sizing: border-box; padding: 0; } [data-feature="buyer-order"] [data-reuse-page="manage"] .bo-top, [data-feature="buyer-order"] [data-reuse-page="edit"] .bo-top { touch-action: none; } [data-feature="buyer-order"] .bo-pp-shopchip { display: flex; align-items: center; justify-self: center; width: max-content; max-width: 100%; box-sizing: border-box; height: 32px; padding: 0 12px 0 4px; gap: 8px; border-radius: 999px; background: var(--band); margin: 12px auto; min-width: 0; } [data-feature="buyer-order"] .bo-pp-shopchip strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--fg); } [data-feature="buyer-order"] .bo-pp-shopchip .bo-pp-mark { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; object-fit: contain; font-size: 12px; font-weight: 600; } [data-feature="buyer-order"] .bo-pp-shopchip span.bo-pp-mark { background: var(--solid); color: var(--solid-fg); } [data-feature="buyer-order"] .bo-pp-big { min-height: 50px; font-size: var(--bo-ts-body); font-weight: var(--bo-tw-body); line-height: var(--bo-tl-body); } [data-feature="buyer-order"] .bo-pp-small { font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg3); } [data-feature="buyer-order"] .bo-pp-small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } [data-feature="buyer-order"] .bo-pp-danger { color: var(--danger); border-color: var(--danger); } [data-feature="buyer-order"] .bo-pp-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: .5px solid var(--line); } [data-feature="buyer-order"] .bo-pp-row:first-child { border-top: 0; } [data-feature="buyer-order"] .bo-pp-row .bo-pp-copy { flex: 1; } /* 안내 줄 — [아이콘 칸 18px] [글] [동작] 세로선 정렬 */ [data-feature="buyer-order"] .bo-pp-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 8px 9px; margin: 12px 20px 0; padding: 10px 12px; border-radius: 10px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); background: var(--band); } [data-feature="buyer-order"] .bo-pp-line--warn { color: var(--warn-fg); background: var(--warn-bg); } [data-feature="buyer-order"] .bo-pp-line-icon { display: flex; padding-top: 1px; } [data-feature="buyer-order"] .bo-pp-line-text { word-break: keep-all; } [data-feature="buyer-order"] .bo-pp-line-action { align-self: center; padding: 6px 10px; border-radius: 8px; border: .5px solid var(--ctrl); background: var(--field); color: var(--fg); font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); cursor: pointer; white-space: nowrap; } /* 아래 시트 — 바깥 어둡게 + 아래에서 올라오는 창(주문서 폭 안). 확인 창(alertdialog)도 같은 시트 */ [data-feature="buyer-order"] .bo-pp-sheetwrap { display: flex; flex-direction: column; justify-content: flex-end; background: rgba(0,0,0,.42); animation: bo-pp-fade .2s ease-out; } [data-feature="buyer-order"] .bo-pp-sheet { background: var(--panel); border-radius: 18px 18px 0 0; padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.18); animation: bo-pp-up .32s cubic-bezier(.2,.8,.2,1); max-height: 86%; overflow: auto; overscroll-behavior: contain; } [data-feature="buyer-order"] .bo-pp-grab { width: 38px; height: 4px; border-radius: 2px; background: var(--ctrl); margin: 0 auto 14px; } [data-feature="buyer-order"] .bo-pp-sheet .bo-pp-title { font-size: var(--bo-ts-section); font-weight: var(--bo-tw-section); line-height: var(--bo-tl-section); } [data-feature="buyer-order"] .bo-pp-sheet .bo-pp-list { margin-top: 14px; } /* v0.80 저장한 배송지 줄 — 카드와 [지우기]가 한 줄(지우기 칸 52 · 카드 높이에 맞춤). 더 보기는 목록 아래 가운데 */ [data-feature="buyer-order"] .bo-pp-addr { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; } [data-feature="buyer-order"] [data-buyer-sheet-grab] { touch-action: none; } [data-feature="buyer-order"] .bo-pp-full-content { min-height: 100%; display: flex; flex-direction: column; flex: 1; } [data-feature="buyer-order"] .bo-pp-addr > .bo-pp-option { min-width: 0; } [data-feature="buyer-order"] .bo-pp-rowdel { min-height: 44px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); color: var(--danger); cursor: pointer; } [data-feature="buyer-order"] .bo-pp-listmore { display: flex; justify-content: center; margin-top: 6px; } [data-feature="buyer-order"] .bo-pp-sheet .bo-pp-actions { margin-top: 16px; } [data-feature="buyer-order"] .bo-pp-sheet .bo-pp-actions > .bo-btn { min-height: 48px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"] .bo-pp-sheet .bo-pp-line { margin: 12px 0 0; } [data-feature="buyer-order"] .bo-pp-sheet .bo-pp-small { margin-top: 10px; } [data-feature="buyer-order"] .bo-pp-sheetlinks { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; } [data-feature="buyer-order"] .bo-pp-sheetlinks .bo-pp-text { margin-top: 0; } [data-feature="buyer-order"] .bo-pp-sheetlinks--center { justify-content: center; } /* v0.60 B1c — 필수 동의를 켜기 전 주 단추는 꺼져 보인다 · B1d 안내 전문은 시트 안 카드에 그대로 */ [data-feature="buyer-order"] .bo-pp-sheet .bo-pp-actions > .bo-btn:disabled { opacity: .45; cursor: default; } [data-feature="buyer-order"] .bo-pp-sheet .bo-pp-legal { margin: 0; white-space: normal; word-break: keep-all; } [data-feature="buyer-order"] .bo-pp-sheetlinks a { color: var(--fg2); font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); } [data-feature="buyer-order"] .bo-pp-confirm { z-index: 60; } /* 체크 줄 — 저장 동의(B1c)와 15차 저장한 정보 카드가 같이 쓰는 부품 */ [data-feature="buyer-order"] .bo-mo-check { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: var(--fg); cursor: pointer; } [data-feature="buyer-order"] .bo-mo-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--ctrl); display: grid; place-items: center; color: var(--solid-fg); } [data-feature="buyer-order"] .bo-mo-check.is-on .bo-mo-box { background: var(--solid); border-color: var(--solid); } [data-feature="buyer-order"] .bo-mo-check strong { display: block; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } [data-feature="buyer-order"] .bo-mo-check span.bo-mo-checksub { display: block; margin-top: 3px; font-size: var(--bo-ts-hint); font-weight: var(--bo-tw-hint); line-height: var(--bo-tl-hint); color: var(--fg2); word-break: keep-all; } [data-feature="buyer-order"] .bo-pp-sheet .bo-mo-check { margin-top: 12px; width: 100%; } [data-feature="buyer-order"] .bo-pp-facts { margin: 12px 0 0; } @keyframes bo-pp-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes bo-pp-up { from { transform: translateY(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { [data-feature="buyer-order"] .bo-pp-sheetwrap, [data-feature="buyer-order"] .bo-pp-sheet { animation: none; } } /* v0.80 — 이미 열린 시트를 다시 그릴 때(동의 체크 · 안내 전문 열고 닫기)는 움직임 없이 */ [data-feature="buyer-order"] .bo-pp-sheetwrap.bo-pp-still, [data-feature="buyer-order"] .bo-pp-still .bo-pp-sheet { animation: none; } /* 완료 화면 맨 아래 '배송지 저장' 줄 */ [data-feature="buyer-order"] .bo-pp-endcard { margin: 16px 20px 20px; } [data-feature="buyer-order"] .bo-pp-endrow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; } /* 수정 칸 — 주문서 배송 칸과 같은 높이 · 테두리 */ [data-feature="buyer-order"] .bo-pp-field { display: grid; gap: 6px; font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); color: var(--fg2); } [data-feature="buyer-order"] .bo-pp-field input { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 10px; border: .5px solid var(--ctrl); background: var(--field); color: var(--fg); font: inherit; font-size: 14px; font-weight: 400; } [data-feature="buyer-order"] .bo-pp-field input[readonly] { color: var(--fg2); } /* R33 D6 — 터치 화면의 입력 글자(토큰은 buyer-tokens). 칸 높이 46은 44 이상이라 그대로 */ @media (pointer: coarse) { [data-feature="buyer-order"] .bo-pp-field input { font-size: var(--bo-ts-input); font-weight: var(--bo-tw-input); line-height: var(--bo-tl-input); } } [data-feature="buyer-order"] .bo-pp-card .bo-pp-field { margin-top: 12px; } [data-feature="buyer-order"] .bo-pp-address { display: flex; gap: 8px; } [data-feature="buyer-order"] .bo-pp-address .bo-btn { flex: none; min-height: 46px; padding: 0 14px; font-size: var(--bo-ts-label); font-weight: var(--bo-tw-label); line-height: var(--bo-tl-label); } /* 관리 소제목 · 주문서와 같은 주소 창을 그 범위 표시 감싸개 안에 */ [data-feature="buyer-order"] .bo-pp-nested { display: contents; } [data-feature="buyer-order"] .bo-pp-label { margin: 6px 2px -4px; font-size: var(--bo-ts-tag); font-weight: var(--bo-tw-tag); line-height: var(--bo-tl-tag); color: var(--fg2); } /* 저장 알림 — 2초 보인 뒤 사라진다(아래 끝 줄을 가리지 않게) */ [data-feature="buyer-order"] .bo-toast.bo-pp-toast:not([hidden]) { animation: bo-toast-in .2s cubic-bezier(.2,.7,.2,1), bo-pp-toast 2.6s ease forwards; } @keyframes bo-pp-toast { 0%, 75% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { [data-feature="buyer-order"] .bo-toast.bo-pp-toast:not([hidden]) { animation: bo-pp-toast 2.6s steps(1, end) forwards; } } /* 공통 확인 · 관리 화면 — 휴대폰 높이를 채우고 주 버튼은 아래(엄지 자리). 주문서 위에 덮는 창으로 열린다 */ [data-feature="buyer-order"] .bo-pp-full { min-height: 100dvh; display: flex; flex-direction: column; } [data-feature="buyer-order"] .bo-overlay.bo-pp-full { min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); } [data-feature="buyer-order"] .bo-pp-full .bo-pp-page { flex: 1; display: flex; flex-direction: column; } [data-feature="buyer-order"] .bo-pp-full .bo-pp-page > * { flex: none; } [data-feature="buyer-order"] .bo-pp-full .bo-hero { padding: 14px 0 22px; } [data-feature="buyer-order"] .bo-pp-full .bo-result-title:focus { outline: none; } [data-feature="buyer-order"] .bo-pp-bottom { margin-top: auto; display: grid; gap: 10px; padding-top: 16px; } [data-feature="buyer-order"] .bo-mo-head2 { display:grid; grid-template-columns:44px minmax(0,1fr) 56px; align-items:center; min-height:56px; padding:6px 12px 6px 8px; border-bottom:.5px solid var(--line); } [data-feature="buyer-order"] .bo-mo-back2 { width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:10px; background:none; color:var(--fg); text-decoration:none; } [data-feature="buyer-order"] .bo-mo-head2 h1 { margin:0; font-size:16px; font-weight:700; color:var(--fg); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-feature="buyer-order"] .bo-mo-list { list-style:none; margin:12px 20px; padding:0; border-radius:14px; background:var(--panel); border:.5px solid var(--panel-line); overflow:hidden; } [data-feature="buyer-order"] .bo-mo-row { width:100%; display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border-top:.5px solid var(--line); color:var(--fg); text-decoration:none; min-height:76px; } [data-feature="buyer-order"] .bo-mo-list > li:first-child .bo-mo-row { border-top:0; } [data-feature="buyer-order"] .bo-mo-thumb { width:52px; height:52px; border-radius:10px; display:grid; place-items:center; background:var(--band); color:var(--fg3); object-fit:cover; } [data-feature="buyer-order"] .bo-mo-rowtext { min-width:0; display:grid; gap:3px; } [data-feature="buyer-order"] .bo-mo-rowtext strong { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-feature="buyer-order"] .bo-mo-rowtop { font-size:11.5px; color:var(--fg3); } [data-feature="buyer-order"] .bo-mo-rowend { display:grid; gap:6px; justify-items:end; } [data-feature="buyer-order"] .bo-mo-rowend b { font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; } [data-feature="buyer-order"] .bo-mo-chip { font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--band); color:var(--fg2); white-space:nowrap; } [data-feature="buyer-order"] .bo-mo-chip--wait { background:var(--warn-bg); color:var(--warn-fg); } [data-feature="buyer-order"] .bo-mo-chip--paid { background:var(--ok-bg); color:var(--ok-fg); } [data-feature="buyer-order"] .bo-mo-chip--shipped { background:var(--info-bg); color:var(--info-fg); } [data-feature="buyer-order"] .bo-mo-done { margin:12px 20px; min-height:44px; display:grid; place-items:center; font-size:12.5px; color:var(--fg3); } [data-feature="buyer-order"] .bo-mo-backline { display:inline-flex; align-items:center; gap:2px; min-height:44px; margin:0 12px; padding:0 8px 0 4px; font-size:14px; font-weight:600; color:var(--fg); text-decoration:none; } [data-feature="buyer-order"],[data-shop-orders] { --buyer-hint:#6b6b70;--fg3:var(--buyer-hint); } /* Connected pages retain legacy body markup; the visible V28 host owns the viewport. */ html:has([data-buyer-order-host]:not([hidden])):has([data-feature="buyer-order"] :is(.so-screen,.so-checkout,.so-after)) > body { margin:0;padding:0; } /* The parked legacy page opens the body, so a paint while the rest still streams in already has no UA margin to lose. */ html:has(> body > #chaeum-buyer-legacy[hidden]) > body { margin:0;padding:0; } [data-feature="buyer-order"] :is(.so-recovery,.so-shelf-host,.so-gallery,.so-product-sheet,.so-cart-lines,.so-description-text,.so-scroll,.so-memos,.so-edit-sheet) { scrollbar-width:none; } [data-feature="buyer-order"] :is(.so-recovery,.so-shelf-host,.so-gallery,.so-product-sheet,.so-cart-lines,.so-description-text,.so-scroll,.so-memos,.so-edit-sheet)::-webkit-scrollbar { display:none; } [data-feature="buyer-order"] .so-screen { position:relative;height:100svh;min-height:560px;background:#f4f3ef;color:#111;text-size-adjust:100%;font-variant-numeric:tabular-nums; } [data-feature="buyer-order"] .so-main { height:100%; } [data-feature="buyer-order"] .so-recovery { position:sticky;top:0;z-index:6;background:#f4f3ef; } [data-feature="buyer-order"] .so-screen .so-recovery { position:absolute;top:72px;left:16px;right:16px;max-height:calc(100% - 180px);overflow:auto;border-radius:16px; } [data-feature="buyer-order"] .so-shop { position:absolute;top:24px;left:16px;z-index:3;display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);height:40px;padding:4px 12px 4px 4px;border-radius:24px;background:rgba(255,255,255,.92);font-size:14px;white-space:nowrap; } [data-feature="buyer-order"] .so-shop-mark { flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#3a3a3c;color:white;overflow:hidden; } [data-feature="buyer-order"] .so-shop-mark img { width:100%;height:100%;object-fit:cover; } /* The dark fill is for the initial only; under a clipped logo its antialiased corner shows as a dark rim. */ [data-feature="buyer-order"] .so-shop-mark:has(> img) { background:transparent; } [data-feature="buyer-order"] .so-back { display:grid;place-items:center;width:32px;height:32px;border:0;background:none; } [data-feature="buyer-order"] .so-shelf-host { height:100%;overflow-y:auto;overscroll-behavior:contain; } [data-feature="buyer-order"] .so-shelf { padding:96px 16px 120px; } [data-feature="buyer-order"] .so-shelf-title { font-size:22px;font-weight:600;line-height:30px; } [data-feature="buyer-order"] .so-hint { color:var(--buyer-hint);font-size:13px;line-height:20px; } /* V42 confirm 1 (C6-173): the sale kind is one line; a long title ends in an ellipsis. */ [data-feature="buyer-order"] .so-kind { display:flex;align-items:center;gap:8px;min-height:20px;margin:8px 0;color:var(--buyer-hint);font-size:13px;line-height:20px;white-space:nowrap; } [data-feature="buyer-order"] .so-kind > span:last-child { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; } [data-feature="buyer-order"] .so-kind-pill { flex:none;display:inline-flex;align-items:center;gap:4px;padding:0 8px;border-radius:12px;background:#e9e8e5;color:#777;font-size:12px;font-weight:600; } [data-feature="buyer-order"] .so-kind-pill.is-live { color:#d54b43;background:#fbe9e7; } [data-feature="buyer-order"] .so-kind-pill.is-live i { width:5px;height:5px;border-radius:50%;background:currentColor; } [data-feature="buyer-order"] .so-kind-pill.is-group { color:#3d70c5;background:#eaf0fb; } [data-feature="buyer-order"] .so-kind-goal { display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--buyer-hint);font-size:12px;line-height:20px; } [data-feature="buyer-order"] .so-kind-goal progress { width:72px;height:4px;appearance:none;border:0;border-radius:4px;overflow:hidden;background:#e4e3df; } [data-feature="buyer-order"] .so-kind-goal progress::-webkit-progress-bar { background:#e4e3df; } [data-feature="buyer-order"] .so-kind-goal progress::-webkit-progress-value { background:#3d70c5; } [data-feature="buyer-order"] .so-kind-goal progress::-moz-progress-bar { background:#3d70c5; } [data-feature="buyer-order"] .so-kind-goal progress.is-time::-webkit-progress-value { background:#8a8a8e; } [data-feature="buyer-order"] .so-kind-goal progress.is-time::-moz-progress-bar { background:#8a8a8e; } [data-feature="buyer-order"] .so-kind-goal b { color:#111;font-weight:600; } [data-feature="buyer-order"] .so-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;margin-top:20px; } [data-feature="buyer-order"] .so-card { display:grid;align-content:start;gap:4px;min-width:0;text-align:left;border:0;background:none;padding:0;font-size:15px;line-height:22px; } [data-feature="buyer-order"] .so-photo { position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;border-radius:16px;background:#e9e8e4;overflow:hidden; } [data-feature="buyer-order"] .so-photo img { width:100%;height:100%;object-fit:cover; } [data-feature="buyer-order"] .so-card-name { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin:8px 4px 0; } [data-feature="buyer-order"] .so-card strong { margin:0 4px;font-weight:600; } [data-feature="buyer-order"] .so-picked { position:absolute;left:8px;bottom:8px;padding:2px 10px;border-radius:20px;background:rgba(17,17,17,.78);color:white;font-size:12px; } [data-feature="buyer-order"] .so-item { position:absolute;inset:0;display:flex;flex-direction:column; } [data-feature="buyer-order"] .so-gallery { display:flex;flex:0 0 42%;min-height:0;overflow-x:auto;scroll-snap-type:x mandatory;background:#e9e8e4;overscroll-behavior:contain; } [data-feature="buyer-order"] .so-slide { flex:0 0 100%;min-width:0;min-height:0;grid-template-rows:minmax(0,1fr);scroll-snap-align:start;display:grid;place-items:center;overflow:hidden; } [data-feature="buyer-order"] .so-slide img { width:100%;height:100%;object-fit:cover; } [data-feature="buyer-order"] .so-product-sheet { position:absolute;top:calc(100% - var(--so-sheet-height,42%));bottom:0;left:0;right:0;z-index:2;min-height:0;padding:24px 20px 112px;border-radius:28px 28px 0 0;background:white;overflow-y:auto;overscroll-behavior:contain; } [data-feature="buyer-order"] .so-title { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline; } [data-feature="buyer-order"] .so-title h2 { font-size:20px;font-weight:600;line-height:28px;overflow-wrap:anywhere; } [data-feature="buyer-order"] .so-title > span { white-space:nowrap;font-size:16px; } [data-feature="buyer-order"] .so-description { display:flex;align-items:center;gap:2px;width:100%;min-height:24px;margin:4px 0 0;padding:0;border:0;background:none;text-align:left;color:var(--buyer-hint);font-size:13px; } [data-feature="buyer-order"] .so-description > span { flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } [data-feature="buyer-order"] .so-option-label { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:16px 0 12px;font-size:13px;color:var(--buyer-hint); } [data-feature="buyer-order"] .so-option-label > span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } [data-feature="buyer-order"] .so-option-label .bo-swatch { display:inline-block;margin:0 4px 0 0;vertical-align:-1px; } [data-feature="buyer-order"] .so-option-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; } [data-feature="buyer-order"] .so-option-grid[data-columns="1"] { grid-template-columns:minmax(0,1fr); } [data-feature="buyer-order"] .so-option { min-width:0;min-height:48px;padding:12px 14px;border:0;border-radius:16px;background:#f1f0ec;color:#111;display:grid;align-content:center;justify-items:start;gap:2px;text-align:left;font-size:15px;line-height:22px; } [data-feature="buyer-order"] .so-option-name { display:block;min-width:0;max-width:100%; } [data-feature="buyer-order"] .so-option-name > span:last-child { display:inline;overflow-wrap:anywhere; } [data-feature="buyer-order"] .so-option-baseline { display:inline-block;width:0;height:0;vertical-align:baseline; } [data-feature="buyer-order"] .so-option-name .bo-swatch { display:inline-block;margin:0 8px 0 0;vertical-align:calc(.36em - 8px);transform:translateY(var(--so-swatch-shift,0px)); } [data-feature="buyer-order"] .so-option small { min-height:18px;font-size:12px;line-height:18px;color:var(--buyer-hint); } [data-feature="buyer-order"] .so-option[aria-pressed="true"] { background:#111;color:white; } [data-feature="buyer-order"] .so-option[aria-pressed="true"] small { color:inherit; } [data-feature="buyer-order"] .so-option:disabled { color:#b5b5b5; } [data-feature="buyer-order"] .so-option-wait:disabled { opacity:.4;color:#111; } [data-feature="buyer-order"] .so-action { min-height:40px;padding:8px 12px;border:0;border-radius:16px;background:#f1f0ec;font-size:14px; } [data-feature="buyer-order"] .so-text { border:0;background:none;color:inherit;padding:0;text-decoration:underline;font-size:13px; } [data-feature="buyer-order"] :is(.so-text,.so-action,.so-shop-button) { position:relative; } [data-feature="buyer-order"] :is(.so-text,.so-action,.so-shop-button)::after { content:"";position:absolute;top:50%;left:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%); } [data-feature="buyer-order"] .so-post { display:grid;gap:12px;margin:16px 0 0; } [data-feature="buyer-order"] .so-post > p { display:flex;align-items:center;gap:8px;margin:0;color:#2f6b3a;font-size:15px; } /* C3-76 · C3-78 · C3-227: photo and name once per product, then option rows; [−] dims at 1 and the trash button removes. */ [data-feature="buyer-order"] .so-line { display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"ph t t" "ph q b";column-gap:12px;row-gap:8px;align-items:center;padding:12px 0;border-top:1px solid #efeee9; } [data-feature="buyer-order"] .so-line:first-child,[data-feature="buyer-order"] .so-line.is-sub { border-top:0; } [data-feature="buyer-order"] .so-line.is-sub { padding-top:0; } [data-feature="buyer-order"] .so-line-photo { grid-area:ph;align-self:start;width:44px;height:44px;border-radius:12px;overflow:hidden;background:#e9e8e4; } [data-feature="buyer-order"] .so-line-photo img { display:block;width:100%;height:100%;object-fit:cover; } [data-feature="buyer-order"] .so-line.is-sub .so-line-photo { visibility:hidden;height:0; } [data-feature="buyer-order"] .so-line.is-sub .so-line-name { display:none; } [data-feature="buyer-order"] .so-line-copy { grid-area:t;min-width:0;display:grid;font-size:15px;font-weight:500;line-height:22px;overflow-wrap:anywhere; } [data-feature="buyer-order"] .so-line-option { display:block;color:var(--buyer-hint);font-size:13px;font-weight:400;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } [data-feature="buyer-order"] .so-line.is-group .so-line-option { color:#111;font-size:14px;font-weight:500; } [data-feature="buyer-order"] :is(.so-line-option,.so-receipt-option,.so-receipt-name small) .bo-swatch { display:inline-block;margin-right:6px;vertical-align:-1px; } [data-feature="buyer-order"] .so-line-amount { grid-area:b;font-size:15px;font-weight:500;text-align:right;white-space:nowrap; } [data-feature="buyer-order"] .so-quantity { grid-area:q;justify-self:start;display:flex;align-items:center;gap:8px;font-size:15px;white-space:nowrap; } [data-feature="buyer-order"] .so-quantity > span { min-width:56px;text-align:center; } [data-feature="buyer-order"] .so-quantity-button { width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:#f1f0ec;color:#111; } [data-feature="buyer-order"] .so-quantity-button:disabled { opacity:.3; } [data-feature="buyer-order"] .so-line-remove { width:32px;height:32px;margin-left:2px;padding:0;display:grid;place-items:center;border:0;background:none;color:var(--buyer-hint); } [data-feature="buyer-order"] .so-line.is-post { display:flex;justify-content:space-between;gap:12px;min-height:52px;padding:4px 0; } [data-feature="buyer-order"] .so-line.is-post .so-line-option { color:#111;font-size:15px;line-height:22px; } [data-feature="buyer-order"] .so-next { display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px; } [data-feature="buyer-order"] .so-next > button { display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:24px; } [data-feature="buyer-order"] .so-post-lines { border-radius:16px;background:#f1f0ec;padding:0 14px; } [data-feature="buyer-order"] .so-post-lines .so-line.is-post { border-top:0; } [data-feature="buyer-order"] .so-post-lines .so-line + .so-line { border-top:1px solid #efeee9; } [data-feature="buyer-order"] .so-post-lines .so-quantity-button { background:white;box-shadow:inset 0 0 0 1px #efeee9; } [data-feature="buyer-order"] .so-bar { position:absolute;left:16px;right:16px;bottom:max(24px,env(safe-area-inset-bottom));z-index:4;display:flex;align-items:center;gap:8px;height:64px;padding:0 12px;border-radius:32px;background:white;box-shadow:0 8px 24px rgba(0,0,0,.12); } [data-feature="buyer-order"] .so-summary { display:flex;align-items:center;gap:12px;flex:1;min-width:0;height:52px;padding:0;border:0;background:none;text-align:left; } [data-feature="buyer-order"] .so-thumbnails { display:flex;flex:none; } [data-feature="buyer-order"] .so-thumbnails > span { display:grid;place-items:center;width:32px;height:32px;margin-left:-8px;border:2px solid white;border-radius:50%;overflow:hidden;background:#ecebe8;font-size:12px; } [data-feature="buyer-order"] .so-thumbnails > span:first-child { margin-left:0; } [data-feature="buyer-order"] .so-thumbnails img { width:100%;height:100%;object-fit:cover; } [data-feature="buyer-order"] .so-sum { min-width:0;display:grid; } [data-feature="buyer-order"] .so-sum strong { font-size:17px;line-height:22px;font-weight:600; } [data-feature="buyer-order"] .so-sum strong { display:flex;align-items:center;gap:4px; } [data-feature="buyer-order"] .so-sum strong .bo-icon { transform:rotate(180deg);color:var(--buyer-hint); } [data-feature="buyer-order"] .so-sum small { color:var(--buyer-hint);font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden; } [data-feature="buyer-order"] .so-empty-shipping { color:var(--buyer-hint);font-size:13px;line-height:20px; } [data-feature="buyer-order"] .so-go { flex:none;height:40px;padding:0 20px;border:0;border-radius:24px;background:#111;color:white;font-size:15px; } [data-feature="buyer-order"] .so-go:is(:disabled,[aria-disabled="true"]) { opacity:.4; } [data-feature="buyer-order"] .so-overlay { position:absolute;inset:0;z-index:10;background:rgba(0,0,0,.28);display:flex;align-items:flex-end;padding:16px 16px 100px; } [data-feature="buyer-order"] .so-modal { width:100%;max-height:72%;display:flex;flex-direction:column;min-height:0;padding:0 20px 20px;border-radius:24px;background:white;overflow:hidden; } [data-feature="buyer-order"] .so-modal h2 { font-size:16px;font-weight:600;line-height:24px; } [data-feature="buyer-order"] [data-so-cart-open] .so-bar { position:relative;left:auto;right:auto;bottom:auto;flex:none;margin:12px -20px 0;z-index:11;border-radius:0 0 24px 24px;box-shadow:0 -1px 0 #efeee9; } [data-feature="buyer-order"] [data-so-cart-open] .so-overlay { padding-bottom:max(24px,env(safe-area-inset-bottom)); } [data-feature="buyer-order"] [data-so-cart-open] .so-modal { padding-bottom:0; } [data-feature="buyer-order"] [data-so-cart-open] .so-sum strong .bo-icon { transform:none; } [data-feature="buyer-order"] .so-grabber { flex:none;display:grid;place-items:center;height:28px;touch-action:none; } [data-feature="buyer-order"] .so-grabber::before { content:"";width:36px;height:4px;border-radius:2px;background:#d6d5d0; } [data-feature="buyer-order"] .so-cart-lines { min-height:0;overflow-y:auto;overscroll-behavior:contain; } [data-feature="buyer-order"] .so-cart-total { display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex:none;margin:12px -20px -20px;padding:14px 16px;border-top:1px solid #efeee9;font-size:15px;line-height:22px; } [data-feature="buyer-order"] .so-cart-total small { font-size:13px;color:var(--buyer-hint); } [data-feature="buyer-order"] .so-cart-total strong { flex:none;font-size:17px;font-weight:600;white-space:nowrap; } [data-feature="buyer-order"] .so-description-text { display:grid;gap:12px;overflow-y:auto;overscroll-behavior:contain;margin-top:16px;white-space:pre-line;font-size:15px;line-height:24px; } :where([data-feature="buyer-order"] .so-checkout,[data-feature="buyer-order"] .so-after) { --so-keyboard-space:0px;--so-question-gap:24px; } [data-feature="buyer-order"] .so-checkout { position:relative;height:100svh;min-height:560px;overflow:hidden;background:#f4f3ef;color:#111; } /* The desktop buyer host reserves 22px above and 40px below its canvas. */ @media (min-width:480px) { [data-feature="buyer-order"]:has(.so-screen,.so-checkout) { box-sizing:border-box; } [data-feature="buyer-order"] :is(.so-screen,.so-checkout) { height:calc(100svh - 62px);min-height:0; } } [data-feature="buyer-order"] .so-checkout-main { position:relative;height:100%; } [data-feature="buyer-order"] .so-flow-head { position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 20px;background:#f4f3ef; } [data-feature="buyer-order"] .so-flow-head > span { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px; } [data-feature="buyer-order"] .so-choose-more,[data-feature="buyer-order"] .so-checkout-cart { display:flex;align-items:center;gap:6px;min-height:40px;padding:0;border:0;background:none;font-size:14px;white-space:nowrap; } [data-feature="buyer-order"] .so-checkout-cart { padding:4px 10px 4px 4px;border-radius:24px;background:white; } [data-feature="buyer-order"] .so-checkout-thumb { display:block;width:28px;height:28px;overflow:hidden;border-radius:50%;background:#e9e8e4; } [data-feature="buyer-order"] .so-checkout-thumb img { width:100%;height:100%;object-fit:cover; } [data-feature="buyer-order"] .so-scroll { position:absolute;top:64px;bottom:0;left:0;right:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px calc(16px + var(--so-keyboard-space)); } [data-feature="buyer-order"] .so-answers { border-radius:20px;background:white;overflow:hidden; } [data-feature="buyer-order"] .so-answer { display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;gap:12px;min-height:56px;width:100%;padding:12px 16px;border:0;border-bottom:1px solid #efeee9;background:white;text-align:left; } [data-feature="buyer-order"] .so-answer:last-child { border-bottom:0; } [data-feature="buyer-order"] .so-prefill { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin:0;padding:0 16px; } [data-feature="buyer-order"] .so-prefill small { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--buyer-hint);font-size:13px; } [data-feature="buyer-order"] .so-prefill .so-text { flex:none;min-height:40px; } [data-feature="buyer-order"] .so-answer small,[data-feature="buyer-order"] .so-answer-edit { color:var(--buyer-hint);font-size:12px;white-space:nowrap; } [data-feature="buyer-order"] .so-answer-value { min-width:0;font-size:16px;line-height:24px;overflow-wrap:anywhere;white-space:pre-line; } [data-feature="buyer-order"] .so-answer-value[data-so-value="phone"] { white-space:nowrap; } [data-feature="buyer-order"] .so-answer-value.is-empty { color:var(--buyer-hint);font-weight:400; } [data-feature="buyer-order"] .so-answer .so-answer-hint { grid-column:2/-1;margin-top:-2px;font-size:13px;line-height:20px;color:var(--buyer-hint); } [data-feature="buyer-order"] .so-answer:has(.so-answer-hint) { row-gap:0; } [data-feature="buyer-order"] .so-sending-to { margin:8px 4px 12px;font-size:15px;line-height:22px;color:#555; } [data-feature="buyer-order"] .so-reuse { display:none;align-items:center;justify-content:center;gap:6px;margin-top:16px;color:var(--buyer-hint); } [data-feature="buyer-order"] .so-reuse:has(button) { display:flex; } [data-feature="buyer-order"] .so-reuse .so-text { text-decoration:none; } [data-feature="buyer-order"] [data-so-arriving] { visibility:hidden; } [data-feature="buyer-order"] .so-question-slot { padding-top:var(--so-question-gap); } [data-feature="buyer-order"] .so-question-count { margin:0 0 8px;color:var(--buyer-hint);font-size:12px;line-height:18px; } [data-feature="buyer-order"] .so-question-title { margin:0 0 20px;font-size:22px;font-weight:600;line-height:30px;letter-spacing:-.02em;white-space:pre-line; } [data-feature="buyer-order"] .so-field { position:relative;display:flex;align-items:center;min-height:48px;border-bottom:1px solid #bbb9b3; } /* C6-33: the underline darkens while the field has focus. */ [data-feature="buyer-order"] .so-field:focus-within { border-bottom-color:#111; } /* C6-33: an answer the form refused turns the underline and its message the shared danger colour. */ [data-feature="buyer-order"] .so-question[data-so-invalid] .so-field { border-bottom-color:var(--danger); } [data-feature="buyer-order"] .so-question[data-so-invalid] [data-so-error] { color:var(--danger); } [data-feature="buyer-order"] .so-field input { width:100%;height:48px;min-width:0;padding:8px 32px 8px 0;border:0;outline:0;background:none;color:#111;font-size:16px;line-height:24px;border-radius:0; } [data-feature="buyer-order"] .so-customs-prefix { flex:none;margin-right:8px;font-size:16px;line-height:24px; } [data-feature="buyer-order"] .so-clear { position:absolute;right:0;top:8px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#ecebe8; } [data-feature="buyer-order"] .so-question-help { min-height:20px;margin:8px 0 16px;font-size:13px;line-height:20px;color:var(--buyer-hint); } [data-feature="buyer-order"] .so-flow-next { display:block;width:100%;min-height:48px;margin-top:20px;padding:12px 16px;border:0;border-radius:24px;background:#111;color:white;font-size:15px;line-height:24px; } [data-feature="buyer-order"] .so-flow-next:disabled { background:#d6d5d0;color:var(--buyer-hint); } [data-feature="buyer-order"] .so-memos { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px; } [data-feature="buyer-order"] .so-memos > button { flex:none;white-space:nowrap;border-radius:24px;background:white;box-shadow:inset 0 0 0 1px #efeee9; } [data-feature="buyer-order"] .so-address-example { display:grid;gap:2px;min-height:66px;padding:12px 4px;border-bottom:1px dashed #efeee9;color:var(--buyer-hint);font-size:15px;line-height:22px; } [data-feature="buyer-order"] .so-address-example small { font-size:13px;color:#b5b5b5; } [data-feature="buyer-order"] .so-address-results { min-height:391px; } [data-feature="buyer-order"] .so-address-button { display:block;width:100%;min-height:66px;padding:12px 4px;border:0;border-bottom:1px solid #e9e7e1;background:none;text-align:left;font-size:15px;line-height:22px; } [data-feature="buyer-order"] .so-address-button > span { display:block; } [data-feature="buyer-order"] .so-address-button small { display:block;color:var(--buyer-hint);font-size:13px;line-height:20px; } [data-feature="buyer-order"] .so-address-more { display:flex;align-items:center;justify-content:center;gap:6px;min-height:56px;width:100%;padding:12px 4px;border:0;background:none;font-size:15px;font-weight:500;color:#555; } [data-feature="buyer-order"] .so-receipt { display:grid;gap:12px;margin:16px 0;background:white;border-radius:20px;padding:16px;font-size:14px; } [data-feature="buyer-order"] .so-receipt-grand-total { padding-top:12px;border-top:1px dashed #efeee9;align-items:baseline; } [data-feature="buyer-order"] .so-receipt-grand-total > strong:last-child { font-size:20px;font-weight:600; } [data-feature="buyer-order"] .so-receipt > div { display:flex;justify-content:space-between;gap:16px; } [data-feature="buyer-order"] .so-receipt > .so-receipt-item { align-items:center;gap:12px; } [data-feature="buyer-order"] .so-receipt-photo { flex:none;width:40px;height:40px;overflow:hidden;border-radius:8px;background:#e9e8e4; } [data-feature="buyer-order"] .so-receipt-photo img { display:block;width:100%;height:100%;object-fit:cover; } [data-feature="buyer-order"] .so-receipt-name { display:grid;flex:1;min-width:0;gap:2px; } [data-feature="buyer-order"] .so-receipt-name > span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } [data-feature="buyer-order"] .so-receipt-name small { color:var(--buyer-hint);font-size:12px;line-height:18px; } [data-feature="buyer-order"] .so-receipt-item > span:last-child { flex:none; } [data-feature="buyer-order"] .so-receipt-kinds { flex:none;color:var(--buyer-hint);font-size:13px; } [data-feature="buyer-order"] .so-receipt > .so-receipt-option { align-items:baseline;margin-top:-4px;padding-left:52px; } [data-feature="buyer-order"] .so-receipt-option > span { min-width:0;color:var(--buyer-hint);overflow-wrap:anywhere; } [data-feature="buyer-order"] .so-receipt-option > strong { flex:none;font-weight:500; } [data-feature="buyer-order"] .so-depositor { position:relative;border-radius:16px;overflow:hidden; } [data-feature="buyer-order"] .so-depositor.is-diff::after { content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px #efc98a;pointer-events:none; } [data-feature="buyer-order"] .so-depositor.is-diff > .so-answer { background:#fff7ea; } [data-feature="buyer-order"] .so-depositor.is-diff [data-so-depositor-hint] { color:#9a5a00;font-weight:400; } [data-feature="buyer-order"] .so-consent { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px; } [data-feature="buyer-order"] .so-shop-button { display:flex;align-items:center;gap:8px;min-width:0;padding:0;border:0;background:none;white-space:nowrap; } [data-feature="buyer-order"] .so-shop-button > span:last-child { min-width:0;overflow:hidden;text-overflow:ellipsis; } [data-feature="buyer-order"] .so-photo-dots { position:absolute;top:calc(100% - var(--so-sheet-height,42%) - 42px);left:0;right:0;z-index:2;display:flex;justify-content:center; } [data-feature="buyer-order"] .so-photo-dot { width:24px;height:32px;padding:0;display:grid;place-items:center;border:0;background:none; } [data-feature="buyer-order"] .so-photo-dot i { width:6px;height:6px;border-radius:3px;background:#fffa; } [data-feature="buyer-order"] .so-photo-dot[aria-current="true"] i { width:18px;background:white; } [data-feature="buyer-order"] .so-option-grab { position:absolute;top:0;left:calc(50% - 32px);width:64px;height:24px;display:grid;place-items:center;border:0;background:none;touch-action:none; } [data-feature="buyer-order"] .so-option-grab::before { content:"";width:36px;height:4px;border-radius:2px;background:#d6d5d0; } [data-feature="buyer-order"] .so-gallery { position:absolute;top:0;left:0;right:0;z-index:1;height:calc(100% - var(--so-sheet-height,42%) + 32px); } [data-feature="buyer-order"] .so-options-measure { position:absolute;top:0;left:20px;right:20px;visibility:hidden;pointer-events:none; } [data-feature="buyer-order"] .so-option-measure { position:absolute;visibility:hidden;white-space:nowrap;width:max-content;max-width:none; } [data-feature="buyer-order"] .so-option-measure > span:last-child { white-space:nowrap;overflow-wrap:normal; } [data-feature="buyer-order"] .so-zoom-photo { position:absolute;inset:0;z-index:2;width:100%;height:100%;aspect-ratio:auto;transform-origin:0 0; } [data-feature="buyer-order"] [data-so-photo-hidden] { visibility:hidden; } [data-feature="buyer-order"] .so-overlay .so-modal { animation:so-cart-reveal .28s cubic-bezier(.32,.72,0,1) both; } @keyframes so-cart-reveal { from { clip-path:inset(100% 0 0 round 24px); } to { clip-path:inset(0 0 0 round 24px); } } [data-feature="buyer-order"] .so-edit-overlay { position:absolute;inset:0;z-index:10;display:flex;align-items:flex-end;background:rgba(0,0,0,.28);padding-bottom:var(--so-keyboard-space); } [data-feature="buyer-order"] .so-edit-sheet { width:100%;max-height:calc(100% - 24px);min-height:min(480px,calc(100% - 24px));padding:0 20px 16px;background:white;border-radius:28px 28px 0 0;overflow-y:auto;overscroll-behavior:contain; } [data-feature="buyer-order"] .so-flying-answer { position:absolute;top:0;left:0;z-index:5;pointer-events:none;font-size:16px;line-height:24px;white-space:nowrap;color:#111; } [data-feature="buyer-order"] .so-empty-saved { position:absolute;top:76px;left:16px;right:16px;z-index:12;display:flex;align-items:center;gap:12px;padding:16px;border-radius:16px;background:white;box-shadow:0 8px 24px #0002;font-size:14px; } [data-feature="buyer-order"] .so-empty-saved > div { display:grid;gap:4px; } [data-feature="buyer-order"] .so-empty-saved span { color:var(--buyer-hint);font-size:13px; } [data-feature="buyer-order"] .so-customs-link { display:block;color:#5d5d60;font-size:13px;text-decoration:none; } [data-feature="buyer-order"] .so-complete { min-height:100svh;padding:80px 24px 40px;background:#f4f3ef;text-align:center;color:#111; } [data-feature="buyer-order"] .so-complete-check { display:grid;place-items:center;width:64px;height:64px;margin:0 auto 20px;border-radius:50%;background:white; } html body [data-feature="buyer-order"] .so-complete h1 { font-size:26px;font-weight:600;line-height:34px; } [data-feature="buyer-order"] .so-transfer { display:grid;gap:8px;margin:32px 0 20px;padding:20px;border-radius:24px;background:white;text-align:left;font-size:14px; } [data-feature="buyer-order"] .so-transfer > div { display:flex;align-items:center;justify-content:space-between;gap:12px; } [data-feature="buyer-order"] .so-transfer strong { min-width:0;font-size:20px;font-weight:600;overflow-wrap:anywhere; } [data-feature="buyer-order"] .so-transfer-condition { margin-top:-6px;color:var(--buyer-hint);font-size:13px;font-weight:400;line-height:20px; } [data-feature="buyer-order"] .so-kv { display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;margin:0;font-size:14px;line-height:22px; } [data-feature="buyer-order"] .so-kv > span:first-child,[data-feature="buyer-order"] .so-kv.is-hint > span:last-child { color:var(--buyer-hint); } [data-feature="buyer-order"] .so-kv > span:last-child { min-width:0;overflow-wrap:anywhere; } [data-feature="buyer-order"] .so-kv.is-value > span:last-child { font-weight:600; } [data-feature="buyer-order"] .so-ship-note { margin:0;color:var(--buyer-hint);font-size:13px;line-height:20px; } [data-feature="buyer-order"] .so-ship-actions { display:flex;gap:8px;margin-top:4px; } [data-feature="buyer-order"] .so-ship-actions > * { flex:1;justify-content:center;text-align:center; } [data-feature="buyer-order"] .so-action.so-primary { background:#111;color:white; } [data-feature="buyer-order"] .so-send-as { font-size:15px;line-height:24px; } [data-feature="buyer-order"] .so-complete-links { display:flex;justify-content:center;flex-wrap:wrap;gap:0 12px;margin-top:24px; } /* Stacked link rows (mockup .p3/.p3x) sit one touch height apart so neighbouring 44px hit areas never overlap. */ [data-feature="buyer-order"] .so-complete-links .so-text { min-height:44px; } [data-feature="buyer-order"] .so-complete-links a.so-text { display:inline-flex;align-items:center; } /* PR107 6677929080 1: the 410 shop-home card row (leading house mark, row height 52 or more). */ [data-feature="buyer-order"] .so-home-row { justify-content:flex-start;min-height:52px; } [data-feature="buyer-order"] .so-home-row > span { flex:1; } [data-feature="buyer-order"] .so-after { position:relative; } [data-feature="buyer-order"] .so-after .so-edit-overlay { position:fixed; } [data-feature="buyer-order"] .so-after .so-complete { text-align:left;padding-top:48px; } [data-feature="buyer-order"] .so-after .so-complete:has(.so-hero-fresh) { padding:72px 20px 40px; } [data-feature="buyer-order"] .so-after .so-complete > h1,[data-feature="buyer-order"] .so-after .so-complete > h1 + p { text-align:center; } [data-feature="buyer-order"] .so-complete-products { display:grid;justify-items:center;gap:12px;margin:20px 0;font-size:13px; } [data-feature="buyer-order"] .so-complete-circles { display:flex;gap:8px;justify-content:center; } [data-feature="buyer-order"] .so-complete-circles > span { display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ecebe8;overflow:hidden; } [data-feature="buyer-order"] .so-complete-circles img { width:100%;height:100%;object-fit:cover; } [data-feature="buyer-order"] .so-after-section { margin:28px 4px 12px;font-size:13px;font-weight:500;color:var(--buyer-hint); } [data-feature="buyer-order"] .so-after-group { border-radius:20px;overflow:hidden;background:white; } [data-feature="buyer-order"] .so-order-receipt { border-radius:20px;padding:0 16px;background:white; } [data-feature="buyer-order"] .so-order-item { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:16px 0;border-bottom:1px solid #efeee9;font-size:14px;line-height:22px; } [data-feature="buyer-order"] .so-order-item > span { min-width:0;overflow-wrap:anywhere; } [data-feature="buyer-order"] .so-order-item > small { grid-column:1/-1;color:var(--buyer-hint);font-size:13px;line-height:20px; } [data-feature="buyer-order"] .so-order-item > strong { font-weight:500;white-space:nowrap; } [data-feature="buyer-order"] .so-order-receipt.is-terminal .so-order-item > :not(.so-return) { opacity:.45; } [data-feature="buyer-order"] .so-return { color:#b4432f; } [data-feature="buyer-order"] .so-order-receipt.is-terminal .so-return { color:var(--buyer-hint); } [data-feature="buyer-order"] .so-receipt-more { display:block;width:100%;padding:12px 0;border:0;background:none;color:#5d5d60;text-align:left;font-size:13px;line-height:20px; } [data-feature="buyer-order"] .so-receipt-total { display:flex;justify-content:space-between;gap:12px;padding:12px 0;font-size:14px;line-height:22px; } [data-feature="buyer-order"] .so-after-row { display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;padding:16px;border:0;border-bottom:1px solid #efeee9;background:white;color:#111;text-align:left;text-decoration:none; } [data-feature="buyer-order"] .so-after-row > span { display:grid;gap:4px;min-width:0; } [data-feature="buyer-order"] .so-after-row > span:last-child:not(:first-child) { flex:none;white-space:nowrap; } [data-feature="buyer-order"] .so-after-row strong { font-size:14px;font-weight:500; } [data-feature="buyer-order"] .so-after-row small { font-size:12px;line-height:18px;color:var(--buyer-hint); } [data-feature="buyer-order"] .so-after-field { display:grid;gap:8px;margin-top:20px;font-size:13px; } [data-feature="buyer-order"] .so-after-field input { height:48px;width:100%;padding:8px 0;border:0;border-bottom:1px solid #bbb9b3;background:none;font-size:16px;line-height:24px; } [data-feature="buyer-order"] .so-bank-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px; } [data-feature="buyer-order"] .so-bank-choice { min-width:0;display:grid;justify-items:center;align-content:start;gap:8px;min-height:84px;padding:12px 4px;border:0;border-radius:12px;background:none;color:#111;font-size:13px;line-height:20px; } [data-feature="buyer-order"] .so-bank-circle { display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:var(--bo-swatch);color:white;font-size:14px;font-weight:600; } [data-feature="buyer-order"] .so-bank-circle.is-light { color:#111; } [data-feature="buyer-order"] .so-bank-circle.is-logo { border:1px solid #e5e5e7;box-sizing:border-box;background:white;overflow:visible; } [data-feature="buyer-order"] .so-bank-circle img { display:block;width:24px;height:24px;object-fit:contain;border-radius:0; } [data-feature="buyer-order"] .so-bank-selected { display:flex;align-items:center;gap:12px;min-height:56px;margin-top:12px;font-size:15px;line-height:22px; } [data-feature="buyer-order"] .so-bank-selected strong { flex:1;font-weight:500; } [data-feature="buyer-order"] .so-bank-selected .so-bank-circle { width:28px;height:28px; } [data-feature="buyer-order"] .so-bank-selected .so-bank-circle img { width:calc(28px * 2 / 3);height:calc(28px * 2 / 3); } [data-feature="buyer-order"] .so-bank-trademark { margin-top:16px; } [data-feature="buyer-order"] .so-secondary { background:#efeee9;color:#111; } [data-feature="buyer-order"] .so-after-number { display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0;font-size:14px; } [data-feature="buyer-order"] .so-hero { display:grid; } [data-feature="buyer-order"] .so-hero > div { grid-area:1/1;transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1); } [data-feature="buyer-order"] .so-hero h1 { margin:4px 4px 0;font-size:26px;font-weight:600;line-height:34px; } [data-feature="buyer-order"] .so-hero-fresh { display:grid;justify-items:start; } [data-feature="buyer-order"] .so-hero-fresh .so-complete-check { margin:0 0 20px;background:#111;color:white; } html body [data-feature="buyer-order"] .so-hero-fresh h1 { margin:0;color:#111; } [data-feature="buyer-order"] .so-hero-fresh > p:not(.so-complete-check) { margin:4px 0 0;font-size:14px;line-height:22px; } [data-feature="buyer-order"] .so-hero-fresh .so-complete-products { display:flex;align-items:center;gap:8px;min-width:0;margin:12px 0 0; } [data-feature="buyer-order"] .so-hero-fresh .so-complete-circles { flex:none;gap:0; } [data-feature="buyer-order"] .so-hero-fresh .so-complete-circles > span { width:28px;height:28px;margin-left:-8px;border:2px solid #f4f3ef; } [data-feature="buyer-order"] .so-hero-fresh .so-complete-circles > span:first-child { margin-left:0; } [data-feature="buyer-order"] .so-hero-fresh .so-complete-products > small { min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--buyer-hint);font-size:13px;line-height:20px; } [data-feature="buyer-order"] .so-hero .so-order-number { margin:8px 4px 0;color:var(--buyer-hint);font-size:13px;line-height:20px; } [data-feature="buyer-order"] .so-hero-subtitle { margin:4px 4px 0;color:var(--buyer-hint);font-size:14px;line-height:22px; } [data-feature="buyer-order"] .so-hero[data-so-hero="fresh"] .so-hero-stage { opacity:0;transform:translateY(14px);pointer-events:none; } [data-feature="buyer-order"] .so-hero[data-so-hero="stage"] .so-hero-fresh { opacity:0;transform:translateY(-14px);pointer-events:none; } [data-feature="buyer-order"] .so-status-dots { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0 0;padding:0;font-size:13px;line-height:20px;list-style:none; } [data-feature="buyer-order"] .so-status-dots li { position:relative;display:grid;justify-items:center;gap:8px;color:var(--buyer-hint);white-space:nowrap; } [data-feature="buyer-order"] .so-status-dots li + li::before { content:"";position:absolute;top:5px;right:50%;width:100%;height:2px;background:#d6d5d0; } [data-feature="buyer-order"] .so-status-dots i { position:relative;z-index:1;width:12px;height:12px;border-radius:50%;background:#d6d5d0; } [data-feature="buyer-order"] .so-status-dots .is-done i,[data-feature="buyer-order"] .so-status-dots .is-done::before { background:#111; } [data-feature="buyer-order"] .so-status-dots [aria-current] { color:#111; } [data-feature="buyer-order"] .so-status-dots [aria-current] i { background:#2f7a4f;animation:so-stage-glow 1.8s ease-in-out infinite; } @keyframes so-stage-glow { 0%,100% { box-shadow:0 0 0 3px rgba(47,122,79,.10); } 50% { box-shadow:0 0 0 6px rgba(47,122,79,.04); } } [data-feature="buyer-order"] .so-drawn-check svg :is(path,polyline) { stroke-dasharray:32;animation:so-draw-check .56s ease both; } @keyframes so-draw-check { from { stroke-dashoffset:32; } to { stroke-dashoffset:0; } } @media (prefers-reduced-motion:reduce) { [data-feature="buyer-order"] .so-drawn-check svg :is(path,polyline) { animation:none; } } @media (prefers-reduced-motion:reduce) { [data-feature="buyer-order"] .so-hero > div { transition:none; } [data-feature="buyer-order"] .so-status-dots [aria-current] i { animation:none; } } /* V43 1-1: platform inquiry — second line under the seller inquiry, reasons as one radio list. */ [data-feature="buyer-order"] .so-platform-link { margin-top:0;align-items:center;gap:6px;color:var(--buyer-hint);font-size:13px; } [data-feature="buyer-order"] .so-platform-reasons { display:grid;margin:16px 0 0;border-radius:16px;overflow:hidden;background:#f1f0ec; } [data-feature="buyer-order"] .so-platform-reason { display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;border:0;border-bottom:1px solid #efeee9;background:none;color:#111;text-align:left;font-size:15px;line-height:22px; } [data-feature="buyer-order"] .so-platform-reason:last-child { border-bottom:0; } [data-feature="buyer-order"] .so-radio { flex:none;width:18px;height:18px;border:1.5px solid #d6d5d0;border-radius:50%; } [data-feature="buyer-order"] .so-platform-reason[aria-checked="true"] .so-radio { border:5px solid #111; } [data-feature="buyer-order"] .so-platform-sent { margin:20px 0 12px; } /* V55 7: 내 주문에서 빼기 sheet — the removal button is the shared danger colour, 닫기 a quiet text line under it. */ [data-feature="buyer-order"] .so-flow-next.so-remove { background:#c2412d; } [data-feature="buyer-order"] .so-remove-close { display:block;min-height:44px;margin:8px auto 0;color:#555; } /* V43 1-5: recipient rows keep 10 between columns at 360 and lift the name above the value at 320. */ @media (max-width:380px) { [data-feature="buyer-order"] .so-answer { column-gap:10px; } } @media (max-width:340px) { [data-feature="buyer-order"] .so-answer { grid-template-columns:minmax(0,1fr) 56px;row-gap:2px; } [data-feature="buyer-order"] .so-answer > small { grid-column:1;grid-row:1; } [data-feature="buyer-order"] .so-answer-value { grid-column:1;grid-row:2; } [data-feature="buyer-order"] .so-answer-edit { grid-column:2;grid-row:1/3;align-self:center; } } /* V43 1-4: buyer press matches admin at 0.97; reduced motion keeps the size. */ [data-feature="buyer-order"] :is(.so-flow-next,.so-action,.so-go,.so-secondary) { transition:transform .12s ease; } [data-feature="buyer-order"] :is(.so-flow-next,.so-action,.so-go,.so-secondary):not(:disabled,[aria-disabled="true"]):active { transform:scale(.97); } @media (prefers-reduced-motion:reduce) { [data-feature="buyer-order"] :is(.so-flow-next,.so-action,.so-go,.so-secondary) { transition:none; } [data-feature="buyer-order"] :is(.so-flow-next,.so-action,.so-go,.so-secondary):active { transform:none; } } [data-feature="buyer-order"],[data-shop-orders] { --buyer-hint:#6b6b70;--fg3:var(--buyer-hint); } [data-shop-orders] { width:100%;max-width:none;min-height:100svh;padding:0;background:#f4f3ef;color:#111; } [data-shop-orders] .bo-canvas { width:100%;max-width:none;min-height:100svh;margin:0;border-radius:0;box-shadow:none;background:#f4f3ef; } [data-shop-orders] .bo-h-head { position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;height:56px;padding:0 12px 0 8px;background:#f4f3ef; } [data-shop-orders] .bo-h-name { display:flex;align-items:center;gap:8px;flex:1;min-width:0; } [data-shop-orders] .bo-h-name b,[data-shop-orders] .bo-h-name h1 { margin:0;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } [data-shop-orders] .bo-h-logo { width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;object-fit:cover; } [data-shop-orders] span.bo-h-logo { background:#111;color:#fff; } [data-shop-orders] .bo-h-back { width:40px;height:40px;padding:0;display:grid;place-items:center;border:0;background:transparent; } [data-shop-orders] .bo-h-my { height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;background:#fff;color:#111;font-size:14px;text-decoration:none;white-space:nowrap; } [data-shop-orders] .bo-h-count { min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#111;color:#fff;text-align:center;font-size:12px;line-height:20px; } [data-shop-orders] .bo-h-out { border:0;background:none;padding:0 8px;color:#555;height:36px; } [data-shop-orders] .bo-h-body { width:100%;max-width:480px;margin:0 auto;padding:16px 20px 40px; } [data-shop-orders] .bo-h-title { margin:0 4px;font-size:22px;line-height:30px;font-weight:600; } [data-shop-orders] .bo-h-desc { margin:4px 4px 0;font-size:14px;line-height:21px;color:#555; } [data-shop-orders] .bo-h-note { margin:24px 4px 0;font-size:12px;line-height:18px;color:var(--buyer-hint); } [data-shop-orders] .bo-h-secondary { background:#e9e7e1;color:#111; } [data-shop-orders] .so-flow-next { height:48px;margin-top:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:500; } [data-shop-orders] .so-flow-next+.so-flow-next { margin-top:8px; } [data-shop-orders] .bo-h-orders { list-style:none;padding:0 16px; } [data-shop-orders] .bo-h-orders li+li { border-top:1px solid #f0efeb; } [data-shop-orders] .bo-h-order { display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 0;color:#111;text-decoration:none; } [data-shop-orders] .bo-h-order>span { flex:1;min-width:0;display:grid;gap:2px; } [data-shop-orders] .bo-h-order strong { font-size:15px;line-height:22px;font-weight:500;overflow-wrap:anywhere; } [data-shop-orders] .bo-h-order small { font-size:13px;line-height:20px;color:var(--buyer-hint); } [data-shop-orders] .bo-h-order>b { font-size:14px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums; } [data-shop-orders] .bo-h-line { height:40px;margin:8px 0 0;color:var(--buyer-hint);font-size:13px;line-height:20px; } [data-shop-orders] .bo-h-line[data-error] { color:#b74338; } [data-shop-orders] .bo-h-card { margin-top:24px;padding:16px;border-radius:16px;background:#fff; } [data-shop-orders] .bo-h-address { display:grid;grid-template-columns:minmax(0,1fr) 58px;align-items:center;gap:12px;min-height:72px;padding:12px 0; } [data-shop-orders] .bo-h-address+ .bo-h-address { border-top:1px solid #ecebe8; } [data-shop-orders] .bo-h-address span { min-width:0;display:grid;gap:4px;font-size:14px;overflow-wrap:anywhere; } [data-shop-orders] .bo-h-address small { color:var(--buyer-hint);font-size:13px; } [data-shop-orders] .bo-h-pill { width:58px;height:40px;border:1px solid #d7d5cf;border-radius:999px;background:#fff;color:#111;text-decoration:none;padding:0;display:grid;place-items:center;font-size:14px; } [data-shop-orders] .bo-h-pill-danger { color:#c2412d; } [data-shop-orders] .bo-h-address[data-unavailable] strong { color:#555; } [data-shop-orders] .bo-h-info { margin-top:12px;padding:16px;background:#e9e7e1;border-radius:16px;font-size:13px; } [data-shop-orders] .bo-h-danger { display:block;margin:24px auto 0;border:0;background:none;color:#c2412d;font-size:14px;min-height:44px;padding:0 16px; } [data-shop-orders] .bo-h-later { display:block;min-height:44px;margin:8px auto 0;border:0;background:none;font-size:14px;color:#555; } [data-shop-orders] .bo-h-remove { background:#c2412d; } [data-shop-orders] .bo-h-keep { font-size:14px;line-height:22px; } [data-shop-orders] .bo-h-keep strong { font-size:15px;font-weight:600; } [data-shop-orders] .bo-h-keep p { margin:4px 0 0;color:#555; } [data-shop-orders] .bo-h-keep ul { margin:4px 0 0;padding-left:18px;color:#555; } [data-shop-orders] .bo-h-keep .bo-h-agree { margin-top:12px;font-size:13px;line-height:20px; } [data-shop-orders] .bo-h-keep .bo-h-agree p { margin:0;color:inherit; } [data-shop-orders] .bo-h-keep .so-flow-next { margin-top:16px; } [data-shop-orders] .bo-h-keep .bo-h-later { margin-top:4px;text-decoration:underline; } [data-shop-orders] .bo-h-keep + .bo-h-orders { margin-top:16px; } [data-shop-orders] .so-edit-overlay { position:fixed;z-index:10; } [data-shop-orders] .so-edit-sheet { max-width:480px;margin:0 auto;min-height:0;border-radius:24px 24px 0 0;background:#f4f3ef;padding-bottom:max(20px,env(safe-area-inset-bottom)); } [data-shop-orders] .so-edit-sheet .so-question-title { margin:4px 4px 0;font-size:18px;line-height:26px; } [data-shop-orders] .bo-h-home .bo-mo-card3 { margin:0 0 16px; } [data-shop-orders] .bo-mo-list { margin:24px 0 0; } [data-shop-orders] .bo-mo-row { grid-template-columns:52px minmax(0,1fr) auto; } [data-shop-orders] .bo-h-link { display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:0;border:0;background:none;text-align:left;color:inherit;text-decoration:none; } [data-shop-orders] .bo-h-link span { flex:1;display:grid;gap:4px; } [data-shop-orders] .bo-h-link small { color:var(--buyer-hint);font-size:13px; }