/* 🛍️ 판매 · 📦 택배 · ↩️ 반품 — 위쪽은 2026-10-21 정리의 날에 style.css에서 옮긴 것 (순서 그대로) */
/* 🛍️ 판매내역: 배송 정보 상자 */
.ship-box { margin-top: 8px; max-width: 520px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--panel); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.ship-box .sb-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ship-box .sb-h small { color: var(--muted); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ship-box .sb-h b { white-space: nowrap; }
.ship-box .sb-edit { margin-left: auto; font-size: 12.5px; color: var(--accent-text); font-weight: 700; padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
.ship-box .sb-edit:hover { background: var(--accent-soft); }
.ship-box .sb-r { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--line); }
.ship-box .sb-r > span { flex: none; width: 52px; color: var(--muted); font-size: 13px; padding-top: 3px; }
.ship-box .sb-r > b { flex: 1; min-width: 0; font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; padding-top: 2px; }
.ship-box .sb-r > b a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ship-box .sb-r > b em { font-style: normal; color: var(--muted); font-weight: 500; }
.ship-box .sb-r .btn { flex: none; }
.ship-box .sb-all { margin-top: 6px; width: 100%; justify-content: center; }
.ship-box.reading, .ship-box.none { display: flex; align-items: center; gap: 8px; color: var(--muted); border-left-color: var(--line-2); }
.ship-box.none .btn { margin-left: auto; }
.sb-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: sbSpin .8s linear infinite; flex: none; }
@keyframes sbSpin { to { transform: rotate(360deg); } }
.sys-line.sys-top { text-align: center; margin: 10px auto; max-width: 560px; padding: 8px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; line-height: 1.5; }
.msg.mine .ship-box { margin-left: auto; }
/* 🛍️ 판매 건수 (택 · 상품 사진 하나 = 1건) */
.sale-sum { margin-top: 8px; max-width: 520px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; }
.sale-sum > small { color: var(--muted); font-size: 12.5px; }
.sale-sum .sb-edit { margin-left: auto; font-size: 12.5px; color: var(--accent-text); font-weight: 700; padding: 2px 6px; border-radius: 8px; }
.sale-tags { flex-basis: 100%; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.sale-tags b { font-weight: 700; margin-left: 4px; }
.msg.mine .sale-sum { margin-left: auto; }
.sale-n { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--text); color: var(--panel); margin-left: 4px; }
/* 🛍 판매 → 택배 / 매장 픽업 */
.sale-pick { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 6px; margin-top: 2px; border-top: 1px dashed var(--line-2); font-size: 13px; }
.sale-pick > span { color: var(--muted); }
.sale-pick .sp-ship { font-weight: 700; }
.sale-pick.on .sp-t { font-size: 13.5px; text-align: left; }
.sale-pick.on .sp-t b { color: var(--accent-text); }
.sale-pick .done-chk { margin-left: auto; }
.sale-pk { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); margin-left: 4px; }
.sale-pk.done { background: #e3efe3; color: #3f6b40; }
.sale-tags span { line-height: 1.5; }
.sale-tags span.dup { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.sale-tags em { font-style: normal; color: var(--muted); }
.sh-sale { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; }
.sh-sale > span { font-weight: 700; }
.sh-sale .field { margin: 8px 0 0; }
/* 🛍️ 판매 폼: 사진 한 번에 → 제품 · DM 자동 구분, 받는 분 · 번호는 자동으로 */
.shots-slot > small { display: block; margin-top: 6px; line-height: 1.45; }
.ps-th .ps-kind { top: auto; right: auto; left: 50%; bottom: -10px; transform: translateX(-50%); width: auto; height: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.ps-th.sh-product .ps-kind { background: var(--espresso); color: #fff; }
.ps-th.sh-dm .ps-kind { background: #3b6fb6; color: #fff; }
.ps-th.sh-dm img { border: 2px solid #3b6fb6; }
.shots-slot .ps-row { padding-bottom: 10px; }
.auto-f .auto-sum { border: 1px solid var(--line); background: var(--panel, var(--bg)); border-radius: 12px; padding: 4px 14px; }
.auto-f .as-row { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.auto-f .as-row:last-child { border-bottom: 0; }
.auto-f .as-row > span { flex: 0 0 86px; color: var(--muted); font-size: 13.5px; }
.auto-f .as-row b { flex: 1; min-width: 0; word-break: break-all; }
.auto-f .as-row b.muted { font-weight: 500; color: var(--muted); }
.auto-f .auto-ed { margin-top: 8px; }
.auto-f .auto-ed > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-text); padding: 4px 0; list-style: none; }
.auto-f .auto-ed > summary::-webkit-details-marker { display: none; }
.auto-f .auto-ed[open] > summary { margin-bottom: 6px; }

/* 🛍️ 판매 등록 알림 (대표님): 확인할 때까지 화면 가운데 */
.sale-alert { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(28, 20, 16, .45); animation: saFade .2s ease-out; }
.sa-card { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border-radius: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.3); padding: 20px; border-top: 6px solid #1f8a70; animation: saPop .35s cubic-bezier(.2,.9,.25,1.2); }
.sa-h { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.sa-ic { font-size: 34px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--k-pk-s, #def3ec); animation: saRing 1s ease-in-out 2; }
.sa-h b { display: block; font-size: 19px; }
.sa-h small { color: var(--muted); font-size: 13px; }
.sa-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sa-it { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.sa-it b { font-size: 14.5px; }
.sa-it span { font-size: 14px; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.sa-it small { color: var(--muted); font-size: 12px; }
.sa-act { display: flex; gap: 8px; }
.sa-act .btn { flex: 1; height: 46px; font-size: 15px; font-weight: 700; }
@keyframes saFade { from { opacity: 0; } }
@keyframes saPop { from { transform: translateY(24px) scale(.96); opacity: 0; } }
@keyframes saRing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .sale-alert, .sa-card, .sa-ic { animation: none; } }
.ship-box.buyer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ship-box.buyer b { font-size: 16px; flex: 1; }
/* 📒 판매장부 올리기: 택배 요청이 있을 때만 배송 정보 칸 */
.sl-ship .sl-chk { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.sl-ship .sl-chk input { width: 20px; height: 20px; accent-color: var(--espresso); }
.sl-ship #slShipF { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: var(--bg); }
.sl-ship #slShipF[hidden] { display: none; }
/* 📒 판매장부: 상품마다 구매자 */
.sale-tags .sb-buyer { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.sale-tags .sb-buyer.none { color: var(--accent-text); border-style: dashed; cursor: pointer; }
.lg-rows { display: grid; gap: 6px; margin: 8px 0; }
.lg-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.lg-row { display: grid; grid-template-columns: 22px minmax(0, 1.4fr) minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.lg-nc { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; min-width: 0; } .lg-nc .lg-qty { width: 58px; flex: none; } .lg-nc small { font-weight: 500; } .lg-row.nc + .lg-ext { margin: 4px 0 10px 28px; } /* 📦 코드 없는 상품 */
.lg-row .lg-n { font-size: 12px; color: var(--muted); text-align: center; }
.lg-row .input { height: 38px; padding: 0 10px; font-size: 14px; min-width: 0; }
.lg-row .lg-x { width: 30px; height: 30px; border-radius: 50%; color: var(--muted); }
#side .nav-item .ic .ch-bdg, #side .nav-item .ic .ch-bdg .ico { color: var(--c) !important; stroke: var(--c); opacity: 1; }
#side .nav-item .ic .ch-bdg { background: color-mix(in srgb, var(--c) 22%, transparent) !important; }

.sale-sum .sb-who { margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.sale-sum .sb-who.none { color: var(--accent-text); border-style: dashed; font-weight: 600; cursor: pointer; }
/* 📒 판매장부 사진(필수) · 📷 제품 사진(선택) 칸 나누기 */
.sl-sec { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; margin-top: 10px; background: var(--panel); }
.sl-sec.req { border-color: var(--accent); }
.sl-sec.need { border-color: var(--danger, #d33); box-shadow: 0 0 0 3px rgba(221, 51, 51, .15); }
.sl-sec-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.sl-sec-h b { font-size: 14px; }
.sl-sec-h small { flex: 1 1 100%; }
.sl-req, .sl-opt { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.sl-req { background: var(--accent); color: #fff; }
.sl-opt { background: var(--accent-soft); color: var(--muted); }
.sl-sec.empty .sl-add { aspect-ratio: auto; min-height: 64px; grid-column: 1 / -1; grid-auto-flow: column; gap: 8px; font-size: 18px; }
.sl-sec { text-align: left; }
.sl-th .sl-ed { top: auto; right: auto; left: 4px; bottom: 4px; width: auto; height: auto; padding: 2px 7px; border-radius: 6px; display: block; white-space: nowrap; }
/* 🛍️ 판매 줄 (판매장부 · 판매 글): 맨 위 번호 + ✏️ 고치기, 가운데 건수 · 합계 · 구매자, 아래 코드 | 금액 */
.sale-sum.ss2 { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; padding: 10px 12px; }
.ss2 .ss-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* 휴대폰: 번호 · 판매일 · 고치기가 넘치면 다음 줄로 */
.ss2 .ss-top .sb-edit { margin-left: auto; flex: none; white-space: nowrap; }
.ss2 .ss-mid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ss2 .ss-mid .sb-who { margin-left: 0; }
.ss2 .ss-cnt { font-size: 15px; }
.ss2 .ss-won { font-weight: 800; font-variant-numeric: tabular-nums; }
.ss2 .ss-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 12.5px; }
.ss2 .sale-tags { flex: none; gap: 0; border-top: 1px dashed rgba(139, 98, 72, .25); padding-top: 4px; }
.sale-tags .st-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.sale-tags .st-row + .st-row { border-top: 1px solid rgba(139, 98, 72, .1); }
.sale-tags .st-c { min-width: 0; overflow-wrap: anywhere; }
.sale-tags .st-c small { color: var(--muted); font-size: 11.5px; margin-left: 4px; }
.sale-tags .st-p { margin-left: auto; flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.sale-tags .st-row.dup .st-p, .sale-tags .st-row.dup .st-c b { color: var(--muted); }
/* 🛍️ 판매내역 버튼 3개: 휴대폰에서는 같은 너비로 한 줄에 */
@media (max-width: 760px) {
  .action-bar.ab-sales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .action-bar.ab-sales .act-btn { justify-content: center; text-align: center; padding: 9px 6px; font-size: 13px; line-height: 1.25; white-space: normal; word-break: keep-all; min-width: 0; }
}
/* 🛍️ 판매 알림 창: ✕ 닫기 (확인했어요 전까지 다시 떠요) · 코드 · 금액 줄바꿈 */
.sa-card { position: relative; }
.sa-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); }
.sa-x:hover { color: var(--text); background: var(--accent-soft); }
.sa-h { padding-right: 40px; }
.sa-it span { white-space: pre-line; }
/* 🛍️ 밀린 판매 한 창에 쌓기: 목록만 스크롤, 버튼은 항상 아래에 */
#saleAlert .sa-card.sa-stack { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 32px); }
#saleAlert .sa-stack .sa-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px 14px; padding: 0 6px; }
#saleAlert .sa-stack .sa-h, #saleAlert .sa-stack .sa-act { flex: none; }
.sa-day { position: sticky; top: 0; z-index: 1; background: var(--panel); font-size: 12px; font-weight: 800; color: var(--muted); padding: 4px 2px; }
.sa-it-h { display: flex; align-items: center; gap: 8px; width: 100%; }
.sa-it-h small { margin-left: auto; flex: none; }
.sa-no { font-style: normal; flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: #1f8a70; color: #fff; font-size: 12px; font-weight: 800; }
/* 📗 판매장부(구글 시트) 연동: 판매 상자 · 반품 기록 안 한 줄 */
.sht-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(46, 125, 80, .08); border: 1px dashed rgba(46, 125, 80, .35); font-size: 13px; }
.sht-row > span { flex: 1 1 200px; min-width: 0; }
.sht-row .btn { flex: none; }
.sht-row.done { border-style: solid; background: rgba(46, 125, 80, .1); }
.sht-row.wait { background: var(--accent-soft); border-color: var(--line-2); color: var(--muted); }
.sht-row small { color: var(--muted); }
.sht-row .sht-miss { flex-basis: 100%; color: var(--danger); }
.rec-card .sht-row { margin: 8px 0 4px; }
.sht-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 6px 0 10px; }
.sht-tbl th, .sht-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.sht-tbl th { font-size: 12px; color: var(--muted); font-weight: 600; }
.sht-tbl .num { font-variant-numeric: tabular-nums; }

/* 📗 시트에서 그 줄 바로 보기 */
.sht-go { font-weight: 700; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* 📒 판매장부 글: 사진을 판매 상자 안에 (한 카드) */
/* 📒 판매장부 카드: 폭은 늘 같게(최대 520px), 장부 사진은 잘리지 않게 카드 폭에 맞춰 통째로 */
.msgs .msg .sale-sum.ss2.has-pics { width: 100%; max-width: min(520px, 100%); box-sizing: border-box; }
.ss-pics { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 10px; margin-bottom: 4px; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 22%, transparent); }
.ss-pic { position: relative; display: block; line-height: 0; }
.ss-pic img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: contain; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); cursor: zoom-in; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.ss-prods { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ss-prods::-webkit-scrollbar { display: none; }
.ss-pic.prod { flex: none; }
.ss-pic.prod img { width: auto; height: 96px; max-width: 160px; max-height: none; object-fit: cover; }
@media (max-width: 520px) { .ss-pic img { max-height: 320px; } .ss-pic.prod img { height: 84px; } }
.ss-pic i { position: absolute; left: 6px; bottom: 6px; line-height: 1.5; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(28, 20, 16, .62); color: #fff; }

/* ✂︎ 오늘 택배 마감선 (테라코타 선 · 왼쪽 「택배 마감」 · 오른쪽 시각 · 건수) */
.cut-line { display: flex; align-items: center; gap: 10px; margin: 18px 16px 14px; cursor: pointer; }
.cut-line b { font-size: 14px; font-weight: 900; color: #b4532a; letter-spacing: -.01em; white-space: nowrap; }
.cut-line i { flex: 1; height: 2px; background: #b4532a; border-radius: 1px; }
.cut-line small { font-size: 12px; font-weight: 700; color: #b4532a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-ship { margin-left: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; color: #b4532a; border: 1px solid rgba(180, 83, 42, .45); background: rgba(180, 83, 42, .06); white-space: nowrap; }
.act-btn.ab-cut { border: 1px solid #b4532a; color: #b4532a; background: transparent; font-weight: 800; }
.act-btn.ab-cut:hover { background: rgba(180, 83, 42, .07); }
/* PC: 택배 마감은 판매장부 사진 바로 옆에 */
@media (max-width: 760px) { .action-bar.ab-sales .ab-cut { grid-column: 1 / -1; padding: 7px 6px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cut-line b, :root:not([data-theme="light"]) .cut-line small, :root:not([data-theme="light"]) .nx-ship, :root:not([data-theme="light"]) .act-btn.ab-cut { color: #e8956b; border-color: rgba(232, 149, 107, .5); } :root:not([data-theme="light"]) .cut-line i { background: #e8956b; } }
:root[data-theme="dark"] .cut-line b, :root[data-theme="dark"] .cut-line small, :root[data-theme="dark"] .nx-ship, :root[data-theme="dark"] .act-btn.ab-cut { color: #e8956b; border-color: rgba(232, 149, 107, .5); } :root[data-theme="dark"] .cut-line i { background: #e8956b; }

/* 📱 휴대폰 #판매내역: 떠 있는 ＋ (시안 C) — 아래 버튼 줄 · 안내 문단은 숨기고, 누르면 아래에서 고르는 창 */
.sale-fab { display: none; }
@media (max-width: 820px) {
  .action-bar.ab-sales, .readonly-note.ro-sales { display: none !important; }
  .sale-fab { display: flex; align-items: center; justify-content: center; position: fixed; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 40; width: 60px; height: 60px; border-radius: 50%; border: 0; background: #2f221c; color: #fff; font-size: 32px; font-weight: 300; line-height: 1; box-shadow: 0 8px 22px rgba(47, 34, 28, .35); }
  .sale-fab:active { transform: scale(.94); }
  body.kb-open .sale-fab, body:has(.modal-back) .sale-fab { display: none; }
  body:has(.sale-fab) #msgs { padding-bottom: 92px; }
  .modal-back.as-sheet { place-items: end stretch; padding: 0; }
  .modal-back.as-sheet .modal { width: 100%; max-width: none; border-radius: 20px 20px 0 0; margin: 0; padding-bottom: env(safe-area-inset-bottom); animation: ssUp .22s ease-out; }
  @keyframes ssUp { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
}
.modal-back.as-sheet .modal-f { display: none; }
.ss-list { display: flex; flex-direction: column; }
.ss-it { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 6px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; }
.ss-it:first-child { border-top: 0; }
.ss-it:active { background: var(--paper); }
/* 마우스가 있는 PC에서만 올렸을 때 색칠 — 휴대폰은 ＋를 누른 손가락 자리(맨 아래 「택배 마감」)가 눌린 것처럼 칠해져 보였어요 */
@media (hover: hover) and (pointer: fine) { .ss-it:hover { background: var(--paper); } }
.ss-ic { width: 38px; flex: none; text-align: center; font-size: 26px; display: flex; justify-content: center; }
.ss-it b { display: block; font-size: 16px; }
.ss-it small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.ss-it.cut b { color: #b4532a; }
.ss-cut { display: block; width: 24px; height: 3px; border-radius: 2px; background: #b4532a; margin: 12px 0; }
/* 📮 반품 택배 사진 순서 표시: 1 · 송장 / 2 · 제품 / 3 · 택 (편집 버튼은 위로 비켜요) */
.rseq-slot .ps-row { padding-bottom: 16px; }
.rseq-slot > small { display: block; margin-top: 6px; line-height: 1.45; }
.rseq-slot .ps-th .ps-ed { bottom: auto; top: 4px; left: 4px; transform: none; }
.rseq-slot .ps-th .ps-kind { bottom: -12px; color: #fff; background: var(--espresso); }
.rseq-slot .ps-th.rk-invoice .ps-kind { background: #3b6fb6; }
.rseq-slot .ps-th.rk-tag .ps-kind { background: #b4532a; }

/* 📝 줄마다 M열 메모 */
.lg-memo { display: block; width: calc(100% - 24px); margin: -2px 0 10px 24px; padding: 8px 11px; font-size: 13.5px; }
.sht-tbl tr.sht-mrow td { padding-top: 0; }
.sht-tbl tr.sht-mrow .lg-memo { width: 100%; margin: 0 0 4px; }
@media (max-width: 820px) { .lg-memo { width: 100%; margin-left: 0; } }

/* 📮 반품 사진 끌어서 순서 바꾸기 */
.rseq-slot .ps-th { touch-action: pan-y; cursor: grab; transition: transform .12s, box-shadow .12s; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rseq-slot .ps-th img { -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: auto; }
.rseq-slot .ps-th.dragging { z-index: 5; cursor: grabbing; transition: none; box-shadow: 0 10px 24px rgba(47, 34, 28, .35); opacity: .95; }
.rseq-slot .ps-thumbs.drag-on .ps-th.drop-before { box-shadow: -4px 0 0 0 var(--accent); }
.rseq-slot .ps-thumbs.drop-end .ps-th:not(.dragging):last-child { box-shadow: 4px 0 0 0 var(--accent); }
.rseq-slot .ps-kind { pointer-events: none; }

.sht-row .sht-tag { display: block; flex-basis: 100%; font-size: 12.5px; color: var(--text); margin-top: 2px; }
.sht-row .sht-tag b { letter-spacing: .02em; }

.home-sub { margin: 14px 4px 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* 🔗 원거래 상자: 반품 · 교환 카드 안 한 상자 — 판 글 + 판매장부 시트 표시 */
.org { margin: 10px 0 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.org-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 2px; }
.org-h > span { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--muted); }
.org-pick { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--accent-text); cursor: pointer; }
.org-pick:hover { text-decoration: underline; }
.org-sale { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-decoration: none; }
.org-sale + .org-sale, .org-item + .org-item, .org-item + .org-sale, .org-sale + .org-item { border-top: 1px solid var(--line); }
.org-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 12px 9px 56px; margin-top: -3px; font-size: 12px; }
.org-links .sht-go { font-weight: 700; }
.org-links small { color: var(--muted); font-size: 11.5px; }
.org-sale:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.org-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 17px; background: color-mix(in srgb, var(--accent-soft) 70%, var(--panel)); }
.org-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.4; }
.org-main b { font-size: 13.5px; font-weight: 700; }
.org-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.org-main small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.org-main .org-sub { font-size: 11.5px; color: var(--faint, var(--muted)); }
.org-code { font-weight: 700; color: var(--text); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.org-tag { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; color: #2e7d50; background: transparent; white-space: nowrap; }
.org-tag.sheet { color: #8a6a4a; }
.org-tag.name { color: var(--muted); }
.org-tag.manual { color: var(--accent-text); }
.org-sale > i { flex: none; font-style: normal; color: var(--muted); font-size: 16px; }
.org-empty { padding: 6px 12px 10px; font-size: 13px; color: var(--muted); }
.org-sheet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent-soft) 30%, var(--panel)); font-size: 12.5px; color: var(--muted); }
.org-sheet.done .org-st b { color: #2e7d50; }
.org-st { flex: 1 1 220px; min-width: 0; line-height: 1.5; }
.org-st b { color: var(--text); }
.org-st small { display: block; font-size: 12px; }
.org-sheet.done .org-st small { display: inline; }
.org-st .sht-go { color: var(--accent-text); }
.org-btn { flex: none; margin-left: auto; border: 1px solid var(--line-2, var(--line)); background: var(--panel); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 8px; cursor: pointer; }
.org-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.org-warn { flex-basis: 100%; font-size: 11.5px; color: var(--danger); }
.org.ret .org-h > span { color: #b4532a; }
/* 원거래 고르기 창 */
.op-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; margin-bottom: 8px; }
.op-it { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.lg-day { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 6px; padding: 8px 4px 4px; background: var(--surface, #fff); font-weight: 800; font-size: 14px; }
.lg-day small { font-weight: 600; color: var(--muted, #8a7a71); }
.op-it:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 50%, var(--panel)); }
.op-it.hit { border-color: color-mix(in srgb, #2e7d50 40%, var(--line)); }
.op-it input { flex: none; accent-color: var(--accent); }
.op-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.op-main b { font-size: 13.5px; } .op-main small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.op-hit { color: #2e7d50; font-weight: 800; }
.op-none { border-style: dashed; }
/* 휴대폰: 반품 · 교환 6단계(접수요청 · 제품도착 · 스타일러 · 매장디피 · 처리완료 · 반려)가 한 줄에 들어가게 */
@media (max-width: 820px) {
  .rec-card .steps { flex-wrap: nowrap; gap: 3px; }
  .rec-card .steps button { flex: 1 1 auto; min-width: 0; padding: 5px 2px; white-space: nowrap; letter-spacing: -.02em; }
}

/* 📦 택배 마감 → 대표님 알림: B 위 배너 아이콘 · A 가운데 카드 */
.nb-ic.nb-ic-x { border-radius: 12px; background: var(--pri); }
.modal.cut-pop { max-width: 360px; text-align: center; }
.modal.cut-pop .modal-h { display: none; }
.modal.cut-pop .modal-b { padding-top: 26px; }
.cut-pop .cut-ic { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 12px; background: var(--accent-soft); display: grid; place-items: center; font-size: 28px; }
.cut-pop h3 { margin: 0; font-size: 20px; font-weight: 800; }
.cut-pop .cut-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.cut-pop .cut-big { font-size: 46px; font-weight: 800; line-height: 1.1; margin-top: 14px; }
.cut-pop .cut-big small { font-size: 18px; font-weight: 700; color: var(--muted); margin-left: 3px; }
.cut-pop .cut-sum { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--accent-text); font-weight: 700; font-size: 13.5px; }
.modal.cut-pop .modal-f { display: flex; gap: 8px; }
.modal.cut-pop .modal-f .btn { flex: 1; justify-content: center; padding-block: 12px; }
/* 위 알림 배너 · 택배 마감 카드는 판매 확인 창(9000)보다 위에 */
.nbs { z-index: 9500; }
.modal-back:has(.cut-pop) { z-index: 9100; }

/* 🏷️ 반품 · 교환: 택 사진 칸 · 택 표시 · 판매장부 줄 버튼 두 개 */
.ps-add.ps-tag { border-color: var(--accent); color: var(--accent-text, var(--accent)); font-weight: 700; }
.ps-th .ps-tagb { position: absolute; left: 4px; top: 4px; z-index: 1; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(59, 47, 43, .82); color: #fbf3ec; pointer-events: none; }
.org-sheet .org-btns { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.org-sheet .org-btns .org-btn { margin-left: 0; }
.org-fix { border: 0; background: none; padding: 0 2px; font: inherit; font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: underline; cursor: pointer; white-space: nowrap; }
/* 🧾 택배 마감 + 운송장 내역: 한 장의 카드 */
.cut-box { margin: 14px 16px 12px; border: 1.5px solid #e2b9a2; border-radius: 14px; background: #fcf3ee; overflow: hidden; }
.cut-box .cut-line { margin: 0; padding: 11px 14px 9px; }
.cut-bd { display: flex; gap: 12px; align-items: stretch; padding: 0 14px 12px; }
.cut-main { flex: none; width: 112px; height: 140px; padding: 0; border: 1px solid #e7cfc2; border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; }
.cut-main img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cut-cap { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.cut-cap b { font-size: 14px; color: #8f3f1d; }
.cut-cap small { font-size: 12px; color: #9a6a55; }
.cut-more { display: flex; gap: 6px; margin-top: 2px; }
.cut-more button { width: 40px; height: 50px; padding: 0; border: 1px solid #e7cfc2; border-radius: 6px; overflow: hidden; background: #fff; }
.cut-more img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cut-zoom { margin-top: auto; font-size: 12px; font-weight: 700; color: #b4532a; }
.cut-slot .ps-th img { width: 56px; height: 56px; }
.cut-slot .ps-th img { width: 72px; height: 90px; }
/* 📅 판매일 */
.sold-chip { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sold-chip.on { background: #fdf0e3; border-color: #e6b98f; color: #a2561f; }
.ss-top .sold-chip { margin-left: auto; margin-right: 6px; }
.sold-line { margin: 8px 0 2px; }
.sold-f input[type="date"] { max-width: 220px; }
.sl-sec + .sold-f, .sold-f { margin-top: 12px; }
/* 📮 택배 마감 뒤 들어온 택배: 주소 등록 필요 / 완료 */
.addr-undo { margin-left: auto; border: 0; background: none; color: #4f7a6d; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.addr-bar:empty { display: none; }
.addr-bar { padding: 10px 20px 4px; display: flex; flex-direction: column; gap: 8px; flex: none; }
.addr-bar .ab-row { display: flex; gap: 8px; align-items: center; }
.ab-chip { border: 1.5px solid #d98a4e; background: #fdf0e3; color: #a2561f; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ab-chip b { background: #c2611f; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.ab-chip.on { background: #c2611f; border-color: #c2611f; color: #fff; } .ab-chip.on b { background: #fff; color: #c2611f; }
.ab-sum { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ab-sum span { color: var(--muted); line-height: 1.6; }
.ab-sum .btn { align-self: flex-start; }
#msgs[data-addr="1"] .msg:not([data-addr="need"]), #msgs[data-addr="1"] .msg[data-sleft="done"] { display: none; } /* 「주소 등록 필요」 탭: 둘 다 끝낸 카드는 빼요 (마감 때 발송완료 · 전체 내역엔 그대로 — 하영님 2026-10-20) */
/* 📦 택배 할 일 (1차안): 카드 맨 위 남은 것 + 「포장 완료」 · 「주소 등록 완료」 두 버튼 */
.ship-do { margin: -12px -14px 12px; padding: 10px 14px 12px; background: #fdf3ea; border-bottom: 1px solid #efcfae; display: flex; flex-direction: column; gap: 8px; }
.ship-do.ok { background: #eaf4ec; border-bottom-color: #b9d8bf; }
.ship-do .sd-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; } .ship-do .sd-h span { color: #8a3d10; font-weight: 700; } .ship-do.ok .sd-h span { color: #24502e; }
.ct-sms { display: flex; justify-content: center; text-decoration: none; margin: 4px 0 2px; } .ct-sms-h { margin: 4px 0 10px; text-align: center; } /* 📱 서명 링크 문자 */
.ct-qr { display: flex; gap: 14px; align-items: center; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } .ct-qr-img { width: 168px; height: 168px; flex: none; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #888; } .ct-qr-img svg { width: 100%; height: 100%; } .ct-qr-t { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.55; }
.ss-memo { margin: 8px 0 2px; padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } /* 📒 판매장부 메모 (카드 안) */
.sd-bts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sd-bt { min-height: 54px; border-radius: 12px; border: 0; background: #3b302e; color: #fff; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; cursor: pointer; }
.sd-bt b { font-size: 14px; font-weight: 800; } .sd-bt small { font-size: 11.5px; opacity: .85; }
.sd-bt.on { border: 1.5px solid #9cc5a4; background: #e8f3ea; color: #24502e; }
.rec-card:has(.ship-do:not(.ok)) { border-color: #e6b98f; }
#msgs[data-addr="1"][data-sf="pack"] .msg:not([data-sleft~="pack"]), #msgs[data-addr="1"][data-sf="addr"] .msg:not([data-sleft~="addr"]) { display: none; }
#msgs.sale-msgs[data-ship="1"] .msg:not([data-ship="1"]) { display: none; }
/* 🧾 운송장 모아 보기: 마감마다 날짜 · 사진 (채팅 글은 숨겨요) */
#msgs.sale-msgs[data-inv="1"] > :not(.inv-wrap) { display: none !important; }
.inv-wrap { padding: 12px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.inv-day { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.inv-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .inv-h b { font-size: 16px; } .inv-h span { font-size: 13px; color: var(--muted); }
.inv-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inv-pics button { border: 1px solid var(--line); padding: 0; background: none; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 4; cursor: pointer; } .inv-pics img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ship-do { background: #2e241f; border-color: #4a382c; } :root:not([data-theme="light"]) .sd-bt:not(.on) { background: #f1e4d8; color: #2d2422; } :root:not([data-theme="light"]) .ab-chip:not(.on) { background: #3a2617; color: #f1c7a2; } }
:root[data-theme="dark"] .ship-do { background: #2e241f; border-color: #4a382c; } :root[data-theme="dark"] .sd-bt:not(.on) { background: #f1e4d8; color: #2d2422; } :root[data-theme="dark"] .ab-chip:not(.on) { background: #3a2617; color: #f1c7a2; }
.addr-bar .ab-row.ntc-filter { padding: 0; }
.ab-chip.zero:not(.on) { opacity: .5; }
.addr-bar .ab-chip { background: #fdf0e3; border-color: #d98a4e; color: #a2561f; }
.addr-bar .ab-chip b { background: #c2611f; color: #fff; opacity: 1; border-radius: 999px; padding: 0 7px; }
.addr-bar .ab-chip.on { background: #c2611f; border-color: #c2611f; color: #fff; }
.addr-bar .ab-chip.on b { background: #fff; color: #c2611f; opacity: 1; }
/* 「주소 등록 필요」 탭: 필요한 카드만 날짜 줄 없이 모아서 */
#msgs[data-addr="1"] .day-sep { display: none !important; }
#msgs[data-addr="1"] .msg[data-addr="need"] { margin-top: 10px; }
#msgs[data-addr="1"] .cut-wrap, #msgs[data-addr="1"] > :not(.msg) { display: none !important; }

/* ↩️ #판매내역 속 반품 · 교환 (sales.js addrBar) — 「반품·교환」 탭에서만 반품 카드 · 원거래 상자, 「전체」에서는 원거래를 한 줄 칩으로 */
#msgs.sale-msgs[data-sret] .msg:not([data-rt="return"]), #msgs.sale-msgs[data-sret] .cut-wrap, #msgs.sale-msgs[data-sret] .new-sep { display: none; }
#msgs.sale-msgs[data-sret] .day-sep small:not(.ds-ret) { display: none; }
.org-mini { display: none; }
#msgs.sale-msgs:not([data-sret]) .org-full, #msgs.sale-msgs .org.ret.org-full { display: none; }
#msgs.sale-msgs:not([data-sret]) .org-mini, #msgs.sale-msgs .org-mini:has(+ .org.ret) { display: inline-flex; }
.org-mini { align-items: center; gap: 4px; margin-top: 8px; border: 1px solid #b9c8d9; background: #eef3f8; color: #3c5a7a; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-row .ab-ret.on { background: #3c5a7a; border-color: #3c5a7a; color: #fff; }
.day-sep small.ds-ret { color: #3c5a7a; }
/* ✅ 판매 줄 자동 확인 (위탁장부 코드 · 판매금액과 맞는지) */
.st-row .chk-ok { flex: none; margin-left: 4px; font-size: 12px; }
.st-row .chk-need { flex-basis: 100%; color: var(--danger); font-size: 12px; font-weight: 700; }
.st-row:has(.chk-need) { flex-wrap: wrap; }
.sht-row.okay { border-style: solid; }
.sht-row.need { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
/* 📗 시트 한 번에 — ✅ 맞는 글 · ⚠️ 확인할 글 */
.bk-list .op-it.need { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.bk-it .bk-ok { color: var(--ok); font-weight: 700; }
.bk-it .bk-why { color: var(--danger); font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 🏷️ 코드 · 금액 적기 창: 줄마다 ✅ · ⚠️ (위탁장부 대조) · 🔎 장부에서 찾기 목록 */
.lg-row .lg-chk { grid-column: 2 / -1; font-size: 12px; font-weight: 700; }
.lg-row .lg-chk.need { color: var(--danger); }
.lg-row .lg-chk.ok { color: var(--ok); }
.lf-list { max-height: 52vh; overflow-y: auto; }
/* ＋ 판매 올리기: 📒 판매장부 사진을 맨 위 큰 버튼 · 나머지는 두 칸씩 */
.ss-hero { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--espresso, #3b302e); color: #fff; text-align: left; cursor: pointer; font-family: inherit; }
.ss-hero .ss-ic { font-size: 30px; }
.ss-hero b { display: block; font-size: 18px; }
.ss-hero small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .78); margin-top: 2px; }
.ss-hero:active { filter: brightness(1.15); }
.ss-grp { margin-top: 14px; }
.ss-gh { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 2px 6px; }
.ss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ss-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 76px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel, #fff); color: var(--text); text-align: left; cursor: pointer; font-family: inherit; min-width: 0; }
.ss-tile .ss-ic { width: auto; font-size: 22px; justify-content: flex-start; }
.ss-tile b { font-size: 14.5px; }
.ss-tile small { font-size: 12px; color: var(--muted); }
.ss-tile.cut b { color: #b4532a; }
.ss-tile:active { background: var(--paper); }

/* 🛍️ 판매 구역 화면 (features/sales.js · salecode.js) — style.css에서 옮겨 왔어요 (2026-10-20) */
/* 📝 옛날 코드: 시트 칸 직접 적기 (브랜드 · 디자인 · 컬러 · 사이즈 · 정상금액 · 메모) */
.lg-ext { margin: 2px 0 10px 24px; padding: 10px 12px 12px; border-radius: 12px; background: var(--paper); border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); }
.sht-confirm .lg-ext { margin: 10px 0 0; }
.lg-ext-c { display: block; font-size: 14px; margin-bottom: 2px; }
.lg-ext-h { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.lg-ext-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lg-ext-g label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lg-ext-g label.wide { grid-column: 1 / -1; }
.lg-ext-g select.need { border-color: #c0392b; box-shadow: 0 0 0 2px rgba(192, 57, 43, .18); }
.lg-ext-g .need { color: #c0392b; }
.lg-ext-g span { font-size: 11.5px; font-weight: 700; color: var(--accent-text); }
.lg-ext-g .input { padding: 8px 10px; font-size: 14px; min-width: 0; }
@media (max-width: 820px) { .lg-ext { margin-left: 0; } .lg-ext-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 품목까지 적은 칸은 한 줄로 접기 (누르면 펼쳐요) · 창이 넓으면 펼친 칸도 한 줄 (하영님 2026-10-20) */
.lg-ext.ext-one { padding: 6px 8px 6px 12px; }
.lg-ext.ext-one .lg-ext-h, .lg-ext.ext-one .lg-ext-g { display: none; }
.ext-sum { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ext-sum span { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-sum b { flex: none; font-size: 12.5px; color: var(--accent-text); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; background: var(--panel); }
.lg-ext-c + .ext-sum { margin-top: 2px; }
.lg-form { container-type: inline-size; }
@container (min-width: 640px) {
  .lg-ext-g { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.1fr); }
  .lg-ext[data-code^="#"] .lg-ext-h { display: none; }
}
/* 📒 판매장부 고치기 옆 장부 사진 (salecode.js lgPicHtml) — PC 나란히 · 휴대폰 위에 붙어서 */
.modal.lg-xwide { max-width: min(1180px, 96vw); }
.lg-split { display: flex; gap: 18px; align-items: flex-start; } .lg-split > .lg-form { flex: 1 1 380px; min-width: 0; }
.lg-pic { flex: 0 0 44%; position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; background: var(--panel); padding-bottom: 6px; }
.lg-pic-box { max-height: 72vh; overflow: auto; border-radius: 12px; border: 1px solid var(--line); background: #1d1816; overscroll-behavior: contain; }
.lg-pic-box img { display: block; width: 100%; height: auto; cursor: zoom-in; } .lg-pic.zoom .lg-pic-box img { width: 250%; max-width: none; cursor: grab; }
.lg-pic-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .lg-pic-tabs button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 12.5px; cursor: pointer; } .lg-pic-tabs button.on { background: var(--pri); color: var(--pri-fg); border-color: var(--pri); }
.lg-pic-h { font-size: 11.5px; color: var(--muted); }
.lg-pic-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } /* 사진 아래: 안내 + ✂︎ 사진 돌리기 · 자르기 */
@media (max-width: 820px) { .lg-split { flex-direction: column; align-items: stretch; gap: 10px; } .lg-pic { flex: none; } .lg-pic-box { max-height: 34vh; } }
/* 📱 휴대폰 판매장부 창: 코드 · 금액 칸을 누르면(자판이 올라오면) 위 사진을 작게 줄이고 안내 줄은 숨겨 칸이 가려지지 않게 (하영님 2026-10-20 안드로이드) */
@media (max-width: 820px) {
  .lg-split:has(.lg-form input:not([type=checkbox]):not([type=radio]):focus, .lg-form textarea:focus, .lg-form select:focus) .lg-pic-box { max-height: 14vh; }
  .lg-split:has(.lg-form input:not([type=checkbox]):not([type=radio]):focus, .lg-form textarea:focus, .lg-form select:focus) :is(.lg-pic-f, .lg-pic-tabs) { display: none; }
}
/* 👥 손님 여러 명 (판매장부 고치기 · 2026-10-20) */
.lg-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -1px 0 6px 28px; font-size: 12.5px; color: var(--muted); }
.lg-who.same b { color: var(--text); }
.lg-who .lg-wn { height: 34px; flex: 1; min-width: 0; font-size: 14px; }
.lg-chip { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 4px 11px; font-family: inherit; font-size: 12.5px; font-weight: 600; min-height: 30px; }
.lg-chip.on { background: var(--espresso); border-color: var(--espresso); color: #fff; }
.lg-chip.new { border-style: dashed; color: var(--accent-text, var(--accent)); }
.lg-wo { font-size: 12px; text-decoration: underline; color: var(--accent-text, var(--accent)); padding: 4px 2px; }
.lg-row.grp { border-top: 2px solid var(--accent); padding-top: 8px; margin-top: 4px; }
.lg-grps { display: grid; gap: 8px; margin: 4px 0 10px; } .lg-grps:empty { display: none; }
.lg-grp { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: grid; gap: 6px; background: var(--panel); }
.lg-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .lg-gh small { color: var(--muted); flex: 1; }
.lg-gh .sl-chk { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; } .lg-gh .sl-chk input { width: 18px; height: 18px; accent-color: var(--espresso); }
.lg-grp .lg-gm { height: 36px; font-size: 14px; }
.lg-warn { color: var(--danger); font-weight: 700; }
.lg-split-go { display: block; width: 100%; margin: 8px 0 2px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--accent); background: var(--panel); color: var(--accent-text, var(--accent)); font-weight: 700; font-size: 14px; text-align: left; } /* 👥 손님 여러 명 — 확인하고 나눠 올리기 */
/* 👥 판매장부 올리기 · 구매자 여러 명 (saleup.js · 2026-10-20) */
.lu { margin-top: 12px; }
.lu-list { display: grid; gap: 8px; margin-top: 6px; }
.lu-b { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 8px; background: var(--panel); }
.lu-top, .lu-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lu-sub { padding-left: 34px; }
.lu-no { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--espresso); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.lu-b .input { flex: 1; min-width: 0; height: 42px; }
.lu-b .lu-memo { height: 38px; font-size: 14px; }
.lu-x { flex: none; width: 36px; height: 36px; color: var(--muted); font-size: 16px; }
.lu-chk { flex: none; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; } .lu-chk input { width: 18px; height: 18px; accent-color: var(--espresso); }
.lu-add { width: 100%; height: 44px; margin-top: 8px; border: 1.5px dashed var(--accent); border-radius: 12px; background: var(--panel); color: var(--accent-text, var(--accent)); font-weight: 700; font-size: 14px; }
.lu-prev { display: grid; gap: 8px; margin-top: 10px; } .lu-prev:empty { display: none; }
.lu-ph { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; }
.lu-reading { padding: 12px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; font-weight: 600; text-align: center; }
.lu-g { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--panel); display: grid; gap: 4px; }
.lu-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; } .lu-gh small { color: var(--muted); }
.lu-gh .lu-no { width: 22px; height: 22px; font-size: 12px; }
.lu-ln { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; padding: 5px 0; border-top: 1px dashed var(--line); }
.lu-ln > span:first-child { flex: 1; min-width: 0; font-weight: 600; }
.lu-ok { font-size: 12px; } .lu-need { font-size: 12px; font-weight: 700; color: var(--danger); }
.lu-mv { display: flex; gap: 6px; margin-left: auto; } .lu-mv:empty { display: none; }
.lu-mv button { font-size: 12px; font-weight: 700; color: var(--accent-text, var(--accent)); border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 4px 10px; min-height: 30px; }
.lu-warn { color: var(--danger); font-weight: 600; }
.sl-ship #slShipF { display: grid; gap: 6px; margin-top: 8px; } .sl-ship #slShipF[hidden] { display: none; }
/* 📒 판매장부 고치기 A안 (하영님 2026-10-21): ① 누가 샀어요? → ② 무엇을 팔았어요? · 줄마다 장부 확인 · 「＋ 상품 추가」 하나 · 잘 안 쓰는 건 작은 글씨로 · 큰 저장 */
.lg-a { display: flex; flex-direction: column; gap: 16px; }
.lg-q h5 { margin: 0 0 8px; font-size: 15px; font-weight: 800; display: flex; align-items: baseline; gap: 8px; }
.lg-q h5 small { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.lg-q h5 .lg-sum { margin-left: 4px; }
.lg-bn { height: 44px; font-size: 15px; }
.lg-seg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.lg-seg button { height: 44px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.lg-seg button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.lg-shipf { display: grid; gap: 6px; margin-top: 8px; }
.lg-a .lg-rows { margin: 0; gap: 4px; }
.lg-st { margin: -1px 0 4px 28px; font-size: 12.5px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lg-st:empty { display: none; }
.lg-st.ok { color: var(--ok); }
.lg-st.need { color: var(--danger); }
.lg-fk { border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: inherit; font-size: 12px; padding: 2px 9px; cursor: pointer; }
/* 💸 할인 · 가격 조정 (하영님 2026-10-22 시안): ① 물어보기 · ② 할인 칸 · ③ ✅ + 💸 할인 */
.lg-sub { display: contents; }
.lg-st.warn { color: var(--warn); }
.lg-dbtn { border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent-text); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; padding: 3px 11px; cursor: pointer; }
.lg-dchip { background: var(--accent-soft); color: var(--accent-text); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; }
.lg-dfix { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.lg-disc { margin: 6px 0 8px 28px; border: 1.5px solid var(--accent); border-radius: 14px; background: var(--panel); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.lg-dh { display: flex; align-items: baseline; gap: 8px; }
.lg-dh b { color: var(--accent-text); font-size: 14.5px; flex: none; }
.lg-dh small { margin-left: auto; color: var(--muted); font-size: 12px; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.lg-dg { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.lg-dj, .lg-dk { display: block; border-radius: 10px; padding: 8px 10px; min-width: 0; }
.lg-dj { background: var(--paper); }
.lg-dk { border: 1.5px solid var(--text); cursor: text; }
.lg-dj small, .lg-dk small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.lg-dj b { font-size: 17px; color: var(--muted); text-decoration: line-through; }
.lg-dk span { display: flex; align-items: center; font-size: 17px; font-weight: 800; }
.lg-dp { flex: 1; min-width: 0; width: 100%; border: 0; background: none; color: var(--text); font: inherit; padding: 0 0 0 2px; outline: none; }
.lg-da { font-weight: 800; color: var(--accent); }
.lg-drow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lg-drow > small { color: var(--muted); font-weight: 700; margin-right: 2px; }
.lg-dsum { background: var(--ok-soft); color: var(--ok); border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 700; }
.lg-dsum.no { background: var(--warn-soft); color: var(--warn); }
.lg-dact { display: flex; gap: 6px; justify-content: flex-end; }
.st-row .chk-disc { flex: none; margin-left: 4px; background: var(--accent-soft); color: var(--accent-text); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; }
@media (max-width: 640px) { .lg-disc { margin-left: 0; } .lg-dg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lg-da { display: none; } }
.lg-plus { margin-top: 8px; }
.lg-plusb { width: 100%; height: 42px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: none; color: var(--accent-text); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.lg-plusb[aria-expanded="true"] { border-style: solid; background: var(--accent-soft); }
.lg-menu { display: grid; gap: 6px; margin-top: 6px; }
.lg-menu button { text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lg-menu button:hover { background: var(--paper); }
.lg-menu small { color: var(--muted); font-weight: 500; }
.lg-links { display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; }
.lg-links button { border: 0; background: none; padding: 4px; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* ↩️ 반품 처리 한 창 (하영님 2026-10-21): 택 코드 → 원래 판 글 → 반품 / 교환 → 큰 「📗 판매장부에 반품 표시」 */
.rp { display: flex; flex-direction: column; gap: 12px; }
.rp .field { margin: 0; }
.rp-code .input { height: 46px; font-size: 17px; font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.rp-org { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.rp-org > span { flex: 1; min-width: 0; }
.rp-org small { display: block; margin-top: 2px; font-weight: 500; color: var(--muted); font-size: 12.5px; }
.rp-org.ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--panel)); }
.rp-org.miss { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 7%, var(--panel)); color: var(--danger); }
.rp-pick { flex: none; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rp-kind { margin-top: 0; }
.rp-note { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); }
.rp-tag { align-self: center; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.modal:has(.rp, .lg-a) .modal-f .btn.primary { flex: 1; min-height: 48px; font-size: 16px; white-space: nowrap; }
.modal:has(.rp, .lg-a) .modal-f .btn:not(.primary) { flex: none; }
.lg-pic-box:focus { outline: none; } /* 📱 자판이 안 올라오게 사진에 둔 초점 — 테두리는 안 보여요 */
/* 📋 접수증 (하영님 2026-10-21): 올리기 전에 사진을 칸별로 크게 · 칸 옮기기 · 빼기 · 더하기 */
.rc { display: flex; flex-direction: column; gap: 12px; }
.rc-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--paper); font-size: 13.5px; }
.rc-kv dt { color: var(--muted); white-space: nowrap; } .rc-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rc-slot { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rc-slot.empty { border-style: dashed; }
.rc-sh { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; } .rc-sh small { color: var(--muted); font-weight: 600; }
.rc-slot.empty .rc-sh small { color: var(--danger); }
.rc-ph { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.rc-p { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-img { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); aspect-ratio: 3 / 4; cursor: zoom-in; }
.rc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-mv, .pe-mv { width: 100%; min-width: 0; font: inherit; font-size: 12px; padding: 3px 4px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--panel); color: var(--accent-text, var(--text)); }
.rc-x { border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--danger); font: inherit; font-size: 12px; padding: 3px 4px; cursor: pointer; }
.rc-add { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1.5px dashed var(--line-2); border-radius: 8px; color: var(--muted); font-size: 22px; cursor: pointer; }
.modal:has(.rc) .modal-f .btn.ghost { display: none; } /* 「← 고치기」가 취소와 같아요 */
.modal:has(.rc) .modal-f .btn.primary { flex: 1; min-height: 48px; font-size: 16px; white-space: nowrap; }
.pe-th .pe-mv { margin-top: 4px; }
.rec-phfix { align-self: flex-start; margin-top: 6px; }
.cut-fix { align-self: flex-start; margin-top: 6px; padding: 5px 11px; border: 1.5px solid var(--accent); border-radius: 999px; background: var(--panel); color: var(--accent-text, var(--accent)); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
/* ↩️ 반품 · 교환 카드는 빨갛게 (하영님 2026-10-22 A안): 왼쪽 굵은 빨간 선 · 연분홍 바탕 · 맨 앞 「↩️ 반품 / 🔄 교환」 배지 — 처리완료도 빨간 선은 옅게 남겨요 */
.rec-card.t-return { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); border-left: 6px solid var(--danger); background: color-mix(in srgb, var(--danger-soft) 60%, var(--panel)); }
.rec-card.t-return .rec-type { color: var(--danger); }
.rec-card.t-return.st-done { background: color-mix(in srgb, var(--danger-soft) 30%, var(--panel)); border-color: color-mix(in srgb, var(--danger) 22%, var(--line)); border-left-color: color-mix(in srgb, var(--danger) 70%, var(--panel)); }
.ret-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--danger); color: #fff; border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.hgrp-return .hgrp-h { border-bottom-color: var(--danger); }
.hgrp-return .hgrp-h b { color: var(--danger); }
.hgrp-return .hrow { box-shadow: inset 4px 0 0 var(--danger); padding-left: 12px; }

/* 📒 판매장부 올리기 새 모양 (ledgerup.js · 하영님 2026-10-23 시안): 사진은 위에 붙어 있고 · 읽은 줄은 큰 카드 · 종류는 카드 안에서 바로 */
.lu2-modal .modal { max-width: 640px; }
.lu-stick { position: sticky; top: -18px; z-index: 3; margin: -6px -4px 10px; }
.lu-view { position: relative; border-radius: 14px; overflow: hidden; background: #2a2120; line-height: 0; box-shadow: 0 6px 16px rgba(45, 30, 25, .18); }
.lu-view img { width: 100%; max-height: 34vh; object-fit: contain; display: block; cursor: zoom-in; }
.lu-view.empty { background: var(--paper); line-height: 1.4; padding: 12px; box-shadow: none; }
.lu-band { position: absolute; left: 2%; right: 2%; border: 3px solid var(--gold); border-radius: 8px; box-shadow: 0 0 0 999px rgba(43, 34, 32, .25); pointer-events: none; transition: top .2s, height .2s; }
.lu-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(43, 34, 32, .7); color: #fff; font-size: 20px; line-height: 1; }
.lu-nav.p { left: 6px; } .lu-nav.n { right: 6px; }
.lu-vn { position: absolute; right: 8px; bottom: 8px; background: rgba(43, 34, 32, .75); color: #fbf3ec; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; line-height: 1.5; }
.lu-read { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.lu-read b { color: var(--text); font-variant-numeric: tabular-nums; }
.lu-cards { display: grid; gap: 8px; }
.lu-card { background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 11px; display: grid; gap: 7px; cursor: pointer; }
.lu-card.on { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); cursor: default; }
.lu-ct { display: grid; grid-template-columns: 28px minmax(0, 1fr) 118px; gap: 8px; align-items: center; }
.lu-n { width: 28px; height: 28px; border-radius: 50%; background: var(--espresso); color: #fbf3ec; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.lu-card .lu-code { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 17px; font-weight: 700; letter-spacing: .01em; min-width: 0; }
.lu-card .lu-price { font-size: 16px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.lu-ncl { font-weight: 800; font-size: 14px; color: var(--warn); }
.lu-chip { justify-self: start; margin-left: 36px; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; background: var(--paper); color: var(--muted); }
.lu-chip.ok { background: var(--ok-soft); color: var(--ok); } .lu-chip.warn { background: var(--danger-soft); color: var(--danger); } .lu-chip.old { background: var(--info-soft); color: var(--info); } .lu-chip.nc { background: var(--warn-soft); color: var(--warn); }
.lu-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--paper); border-radius: 11px; padding: 3px; }
.lu-seg button { border: 0; background: none; border-radius: 9px; padding: 7px 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.lu-seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.lu-qty { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; } .lu-qty input { width: 70px; }
.lu-card .lg-ext { margin: 0; }
.lu-cf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lu-find { border: 1px solid var(--accent); background: var(--panel); color: var(--accent-text); border-radius: 10px; padding: 6px 12px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.lu-x { border: 0; background: none; color: var(--faint); font-weight: 700; font-size: 13px; padding: 4px 6px; }
.lu-adds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
.lu-more { border: 1.5px dashed var(--line-2); background: var(--panel); border-radius: 14px; padding: 11px 8px; font-weight: 800; color: var(--muted); font-size: 13.5px; display: grid; }
.lu-more small { font-weight: 600; font-size: 11.5px; }
.lu-back { border: 0; background: none; padding: 0 0 8px; font-size: 13.5px; }
.lu-card .lg-ext [data-ext="item"].need { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
@media (max-width: 520px) { .lu-ct { grid-template-columns: 28px minmax(0, 1fr) 104px; } .lu-card .lu-code { font-size: 16px; } .lu-adds { grid-template-columns: minmax(0, 1fr); } }