/* 쇼핑몰(고객 주문 화면) 스타일.
   기존 화면은 Tailwind 가 컴파일되지 않아 브라우저 기본 스타일이 살아 있다(body 여백 8px, h3 위 여백 등).
   그래서 초기화 규칙을 넣지 않는다. 아래는 기존 index.css 의 적용되던 규칙 + styled-components 규칙을 값 그대로 옮긴 것이다.
   클래스 이름 옆 괄호는 기존 번들의 컴포넌트 이름 (doc/raw/기존쇼핑몰-사양/주문서.md) */

/* index.css 의 @layer base (적용되던 유일한 규칙) */
@layer base {
  body { -webkit-tap-highlight-color: transparent; font-family: Apple SD Gothic Neo, Malgun Gothic, sans-serif; }
}

/* hidden 속성으로 숨기는 요소 (클래스에 display 가 있어도 숨도록) */
[hidden] { display: none !important; }

/* ── 👤 구매자 정보 (Xd) ── */
.buyer-box { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 16px; margin-bottom: 18px; } /* N9 */
.buyer-title { font-size: 18px; font-weight: bold; margin-bottom: 12px; } /* T9 */
.buyer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; } /* O9 */
@media (max-width: 480px) { .buyer-row { grid-template-columns: 1fr; } }
.buyer-input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #ddd; box-sizing: border-box; font-size: 15px; } /* oc */
.buyer-input:disabled { background: #f5f5f5; color: #555; }
.buyer-load-row { display: grid; grid-template-columns: 1fr; gap: 10px; } /* I9 */
.buyer-load-btn { padding: 12px; border: 1px solid #ccc; border-radius: 12px; background: #fff; font-weight: 600; cursor: pointer; transition: all 0.2s; } /* F9 */
.buyer-load-btn:hover { background: #f9f9f9; }
.sns-area { margin-top: 12px; } /* M9 */
.sns-guide { font-size: 13px; color: #666; margin-bottom: 8px; } /* ic */
.sns-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } /* z9 */
.sns-btn { padding: 10px 8px; border: 1px solid #ccc; border-radius: 12px; background: #fff; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.2s; } /* D9 */
.sns-btn:hover:not(:disabled) { background: #f9f9f9; }
.sns-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.logout-btn { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 12px; background: #fff; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; } /* B9 */
.logout-btn:hover { background: #f9f9f9; }
.order-check-btn { width: 100%; padding: 12px; margin-top: 8px; background: #111; color: #fff; border: 1px solid #111; border-radius: 12px; font-weight: 600; font-size: 16px; cursor: pointer; transition: background 0.2s; } /* U9 */
.order-check-btn:hover { background: #222; }

/* ── 🧁 상품 선택 (K9) ── */
.prod-box { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 16px; margin-bottom: 18px; } /* Q9 */
.prod-title { font-size: 18px; font-weight: bold; margin-bottom: 12px; } /* Z9 */
.cat-group { margin-bottom: 16px; } /* G9 */
.cat-group:last-child { margin-bottom: 0; }
.cat-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; color: #555; padding: 8px 12px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 8px; margin-bottom: 10px; border-left: 3px solid #1e6eff; cursor: pointer; user-select: none; transition: background-color 0.2s; } /* q9 */
.cat-head:hover { background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); }
.cat-head:active { background: linear-gradient(135deg, #dee2e6 0%, #ced4da 100%); }
.cat-name { display: flex; align-items: center; gap: 8px; } /* X9 */
.cat-arrow { font-size: 12px; color: #1e6eff; transition: transform 0.2s; } /* _9 */
.cat-count { font-size: 13px; color: #888; font-weight: 500; } /* $9 */
.prod-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } /* em */
.prod-left > b { font-size: 16px; } /* tm */
.prod-left > span { color: #000; font-size: 14px; }
.price-group { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.45; margin-top: 4px; color: #000; } /* nm */
.price-group.muted { color: #999; }
.price-line { display: flex; align-items: baseline; gap: 6px; color: #777; } /* ac */
.price-line.selected { color: #000; }
.price-line.muted { color: #999; }
.price-line span { font-size: 12px; font-weight: 500; }
.price-line.selected span { font-weight: 700; }
.price-line strong { min-width: 0; font-size: 13px; font-weight: 500; }
.price-line.selected strong { font-size: 15px; font-weight: 800; }
.soldout-badge { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600; color: #fff; background: #ff4444; border-radius: 4px; } /* sm */
.qty-group { display: flex; align-items: center; gap: 8px; } /* cc */
.qty-btn { width: 32px; height: 32px; font-weight: bold; font-size: 18px; border: 1px solid #ddd; border-radius: 6px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* qi */
.qty-btn:hover { background: #f5f5f5; }
.qty-num { min-width: 20px; text-align: center; font-weight: 600; font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: background-color 0.2s; user-select: none; } /* uc */
.qty-num:hover { background-color: #f0f0f0; }
.qty-num:active { background-color: #e0e0e0; }
.qty-input { width: 40px; text-align: center; font-weight: 600; font-size: 15px; padding: 4px 6px; border: 2px solid #1e6eff; border-radius: 6px; outline: none; } /* rm */
.qty-input:focus { border-color: #1e6eff; box-shadow: 0 0 0 2px rgba(30, 110, 255, 0.2); }

/* ── 🛒 떠 있는 장바구니 버튼과 창 ── */
.cart-fab { position: fixed; right: max(18px, calc((100vw - 480px) / 2 + 18px)); bottom: 22px; width: 58px; height: 58px; border: none; border-radius: 50%; background: #111; color: #fff; font-size: 27px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); z-index: 900; } /* lm */
.cart-badge { position: absolute; top: -5px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #d00; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /* am */
.cart-dim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.18); z-index: 899; } /* cm */
.cart-modal { position: fixed; right: max(14px, calc((100vw - 480px) / 2 + 14px)); bottom: 92px; width: min(430px, calc(100vw - 28px)); max-height: min(72vh, 640px); overflow-y: auto; background: #fff; border: 1px solid #ddd; border-radius: 16px; padding: 16px; box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22); z-index: 901; box-sizing: border-box; } /* um */
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } /* dm */
.cart-title { margin: 0; font-size: 20px; font-weight: 800; } /* fm */
.cart-close { width: 32px; height: 32px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 20px; line-height: 1; cursor: pointer; } /* pm */
.cart-list { display: flex; flex-direction: column; } /* hm */
.cart-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #eee; } /* mm */
.cart-row:last-child { border-bottom: none; }
.cart-left { display: flex; gap: 8px; min-width: 0; } /* gm */
.cart-dot { font-size: 22px; line-height: 1.15; color: #000; } /* xm */
.cart-text { min-width: 0; } /* ym */
.cart-name { font-size: 15px; font-weight: 700; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; } /* Cm */
.cart-disc { color: #000; font-size: 13px; display: block; margin-top: 6px; padding-left: 18px; line-height: 1.45; } /* im */
.cart-empty { color: #888; padding: 16px 4px; } /* om */
.cart-hr { margin: 8px 0; border: none; border-top: 1px solid #eee; } /* dc */
.cart-sum { font-size: 16px; line-height: 1.7; } /* bl */
.cart-sum b { color: #000; } /* fc */
.cart-sum b.red { color: #d00; }
.cart-total { font-size: 19px; font-weight: 800; line-height: 1.5; } /* vm */

/* ── 주문 완료 창 (g8) ── */
.done-dim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 2000; padding: 20px; overflow-y: auto; } /* $m */
.done-modal { background: #fff; border-radius: 18px; padding: 24px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); margin: auto; } /* eg */
@media (max-width: 768px) { .done-modal { max-height: 85vh; padding: 20px; } }
.done-x-row { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 12px; } /* tg */
.done-title { font-size: 32px; font-weight: bold; margin: 24px 0; text-align: center; color: #111; line-height: 1.4; } /* pc */
@media (max-width: 768px) { .done-title { font-size: 28px; } }
.done-x { background: none; border: none; font-size: 28px; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } /* ng */
.payer { margin-bottom: 24px; text-align: center; } /* rg */
.payer-label { font-size: 14px; color: #666; margin-bottom: 12px; } /* og */
.payer-name { background: #f5f5f5; border: 2px solid #111; border-radius: 12px; padding: 20px; font-size: 24px; font-weight: bold; letter-spacing: 2px; font-family: "Courier New", monospace; margin-bottom: 16px; word-break: break-all; } /* ig */
.payer-warn { font-size: 13px; color: #d32f2f; line-height: 1.6; padding: 12px; background: #ffebee; border-radius: 8px; border: 1px solid #ffcdd2; } /* sg */
.urgent { background: #fff3cd; border: 2px solid #ffc107; border-radius: 12px; padding: 16px; margin-bottom: 24px; text-align: center; } /* lg */
.urgent-title { font-size: 18px; font-weight: bold; color: #d32f2f; margin-bottom: 8px; } /* ag */
.urgent-text { font-size: 15px; color: #856404; line-height: 1.6; font-weight: 500; white-space: pre-wrap; } /* cg ($preWrap) */
.account { background: #f9f9f9; border-radius: 12px; padding: 16px; margin-bottom: 24px; } /* ug */
.sec-title { font-size: 17px; font-weight: bold; margin-bottom: 12px; } /* hc */
.account-list { font-size: 14px; line-height: 1.8; } /* dg */
.account-list div + div { margin-top: 8px; }
.account-hr { margin: 12px 0; padding-top: 12px; border-top: 1px solid #ddd; } /* fg */
.copy-all { width: 100%; padding: 14px; margin-top: 16px; background: #1976d2; color: white; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3); } /* pg */
.copy-all:hover { background: #1565c0; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4); }
.copy-all:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(25, 118, 210, 0.3); }
.copy-all.copied { background: #4caf50; }
.copy-all.copied:hover { background: #45a049; }
.done-simple { text-align: center; padding: 20px 0; font-size: 16px; } /* hg */
.done-btns { display: flex; gap: 10px; } /* mg */
.howto { background: #e3f2fd; border-radius: 12px; padding: 16px; margin-bottom: 20px; border: 1px solid #90caf9; } /* gg */
.howto-steps { margin-top: 12px; } /* xg */
.step { display: flex; align-items: flex-start; margin-bottom: 12px; gap: 12px; } /* hr */
.step-num { background: #1976d2; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; flex-shrink: 0; } /* mr */
.step-text { flex: 1; font-size: 14px; line-height: 1.6; padding-top: 2px; } /* gr */
.caution { background: #fff3cd; border: 1px solid #ffc107; border-radius: 12px; padding: 16px; margin-bottom: 24px; } /* yg */
.caution-title { font-weight: bold; font-size: 15px; color: #856404; margin-bottom: 10px; } /* Cg */
.caution-list { margin: 0; padding-left: 20px; font-size: 13px; color: #856404; line-height: 1.8; } /* vg */
.caution-list li { margin-bottom: 6px; }
.done-ok { width: 100%; padding: 14px; background: #111; color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.2s; } /* wg */
.done-ok:hover { background: #222; }

/* ── 📋 주문 확인 창 (h8) ── */
.oc-dim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 20px; } /* bm */
.oc-modal { background: #fff; border-radius: 18px; padding: 24px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } /* km */
.oc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } /* Am */
.oc-title { font-size: 24px; font-weight: bold; margin: 0; } /* Rm */
.oc-x { background: none; border: none; font-size: 28px; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } /* Pm */
.oc-list { display: flex; flex-direction: column; gap: 24px; } /* Lm */
.oc-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } /* Nm */
.oc-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; } /* Tm */
.oc-card-left { font-size: 14px; color: #555; } /* Om */
.oc-badge { padding: 6px 12px; border-radius: 20px; font-size: 14px; font-weight: bold; background: #fff3cd; color: #856404; border: 1px solid #ffc107; } /* Im */
.oc-badge.confirmed { background: #e8f5e9; color: #2e7d32; border: 1px solid #4caf50; }
.oc-sec { margin-bottom: 20px; } /* wo */
.oc-sec-title { font-size: 17px; font-weight: bold; margin-bottom: 10px; } /* So */
.oc-sec-body { background: #f9f9f9; padding: 12px; border-radius: 10px; font-size: 14px; line-height: 1.6; } /* Xi */
.oc-sec-body div + div { margin-top: 4px; }
.oc-items { background: #f9f9f9; border-radius: 10px; padding: 12px; } /* Fm */
.oc-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; } /* Mm */
.oc-item:not(:last-child) { border-bottom: 1px solid #eee; }
.oc-item-left { display: flex; align-items: center; gap: 8px; } /* zm */
.oc-item-name { font-weight: 500; } /* Dm */
.oc-item-qty { color: #666; font-size: 14px; } /* Bm */
.oc-item-price { font-weight: bold; } /* Um */
.oc-money { background: #f5f5f5; border-radius: 12px; padding: 16px; margin-bottom: 24px; font-size: 15px; } /* Hm */
.oc-line { display: flex; justify-content: space-between; margin-bottom: 8px; } /* ln */
.oc-line .discount { color: #d32f2f; }
.oc-total { display: flex; justify-content: space-between; font-size: 18px; font-weight: bold; padding-top: 12px; border-top: 2px solid #ddd; margin-top: 8px; } /* Wm */
.oc-btns { display: flex; flex-direction: column; gap: 10px; } /* Vm */
.oc-cancel { padding: 14px; background: #dc3545; color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } /* Ym */
.oc-cancel:hover { background: #c82333; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3); }
.oc-cancel:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2); }
.oc-cancel:disabled { background: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }
.oc-close { padding: 14px; background: #111; color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: bold; cursor: pointer; } /* Jm */
.oc-msg { text-align: center; padding: 60px 20px; color: #888; font-size: 16px; } /* Al */
.oc-summary { background: #f9f9f9; border-radius: 10px; padding: 12px; margin-bottom: 16px; font-size: 14px; } /* Km */
.oc-cancel-box { width: 100%; margin-bottom: 10px; } /* Qm */
.oc-cancel-input { width: 100%; padding: 12px; border: 2px solid #dc3545; border-radius: 8px; font-size: 14px; margin-bottom: 8px; box-sizing: border-box; outline: none; } /* Zm */
.oc-cancel-input:focus { border-color: #c82333; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1); }
.oc-cancel-btns { display: flex; gap: 8px; } /* Gm */
.oc-cancel-ok { flex: 1; padding: 10px; background: #dc3545; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } /* qm */
.oc-cancel-ok:hover:not(:disabled) { background: #c82333; }
.oc-cancel-ok:disabled { background: #ccc; cursor: not-allowed; }
.oc-cancel-no { flex: 1; padding: 10px; background: #6c757d; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } /* Xm */
.oc-cancel-no:hover:not(:disabled) { background: #5a6268; }
.oc-cancel-no:disabled { background: #ccc; cursor: not-allowed; }
.oc-copy { width: 100%; margin-top: 12px; padding: 12px 16px; background: #1976d2; color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } /* _m */
.oc-copy:hover { background: #1565c0; transform: translateY(-1px); }
.oc-copy:active { transform: translateY(0); }
.oc-copy.copied { background: #4caf50; }
.oc-copy.copied:hover { background: #45a049; }