/* ==========================================================
   admin.css — 꽃도매 관리자 공통 스타일
   - 블루 포인트 컬러, 라이트/다크 테마
   - 추가: 서브메뉴, 공통 dialog(입력/메시지), 폼 2컬럼, 페이지 공통 요소
   ========================================================== */

/* ---------- 1. 색상 토큰 ---------- */
:root{--page-max:1280px;--chat-group-hd:#0f766e;--chat-group-bg:#ecfdf5;--chat-group-out:#0f766e;--chat-group-from:#0f766e;--bg:#f4f6f9;--card:#fff;--tx:#1f2937;--mu:#6b7280;--bd:#e5e7eb;--pr:#2563eb;--pr2:#dbeafe;--ok:#16a34a;--wa:#d97706;--er:#dc2626;--seg-on:#15803d;--seg-on-bg:#dcfce7;--seg-off:#4b5563;--seg-off-bg:#e5e7eb;--chat-in-bg:#eef0f3;--chat-in-tx:#111827;--chat-in-mu:#4b5563;--chat-out-bg:#1d4ed8;--chat-out-tx:#fff;--chat-out-mu:#dbe6ff;--chat-shadow:0 16px 40px rgb(15 23 42 / 18%),0 3px 10px rgb(15 23 42 / 10%);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--chat-group-hd:#115e59;--chat-group-bg:#0c201e;--chat-group-out:#0f766e;--chat-group-from:#5eead4;--bg:#0f1218;--card:#181d27;--tx:#e5e7eb;--mu:#9ca3af;--bd:#2a3140;--pr:#3b82f6;--pr2:#1c2a48;--seg-on:#15803d;--seg-on-bg:#14301f;--seg-off:#6b7280;--seg-off-bg:#262b35;--chat-in-bg:#2a303c;--chat-in-tx:#f3f4f6;--chat-in-mu:#a3aab8;--chat-out-bg:#1d4ed8;--chat-out-tx:#fff;--chat-out-mu:#dbe6ff;--chat-shadow:0 16px 44px rgb(0 0 0 / 60%),0 3px 12px rgb(0 0 0 / 40%)}}
:root[data-theme=dark]{--chat-group-hd:#115e59;--chat-group-bg:#0c201e;--chat-group-out:#0f766e;--chat-group-from:#5eead4;--bg:#0f1218;--card:#181d27;--tx:#e5e7eb;--mu:#9ca3af;--bd:#2a3140;--pr:#3b82f6;--pr2:#1c2a48;--seg-on:#15803d;--seg-on-bg:#14301f;--seg-off:#6b7280;--seg-off-bg:#262b35;--chat-in-bg:#2a303c;--chat-in-tx:#f3f4f6;--chat-in-mu:#a3aab8;--chat-out-bg:#1d4ed8;--chat-out-tx:#fff;--chat-out-mu:#dbe6ff;--chat-shadow:0 16px 44px rgb(0 0 0 / 60%),0 3px 12px rgb(0 0 0 / 40%)}

/* ---------- 2. 기본 ---------- */
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);scrollbar-gutter:stable}
body{margin:0;font:14px/1.5 system-ui,'Noto Sans KR','Malgun Gothic',sans-serif;background:var(--bg);color:var(--tx)}
[hidden]{display:none!important}
h2{margin:0 0 16px;font-size:20px}
h3{margin:0 0 10px;font-size:15px}

/* ---------- 3. 상단 바 ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:10px;padding:10px max(16px,calc((100vw - var(--page-max)) / 2 + 16px));background:var(--card);border-bottom:1px solid var(--bd)}
.top b{font-size:17px}
.top .brand{color:inherit;text-decoration:none}
.sp{flex:1}
/* 타이틀바 QnA 미답변 배지 */
.top-qna{position:relative}
.top-user{color:var(--mu);font-size:13px;white-space:nowrap}
.top-user small{margin-left:4px;padding:1px 6px;border-radius:99px;background:var(--pr2);color:var(--pr);font-size:11px}
.nav-bottom form{margin:0}
/* 휴대폰 메뉴 줄 (base.html .m-nav) — 상단 바 아래 전체 메뉴 · 하위 메뉴 가로 탭, 고정하지 않음 (PC 는 숨김) */
.m-nav{display:none}
@media(max-width:900px){
  .m-nav{display:block;background:var(--card);border-bottom:1px solid var(--bd)}
  .m-nav-row{display:flex;align-items:center;gap:4px;padding:6px 14px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .m-nav-row::-webkit-scrollbar{display:none}
  .m-nav-row a{flex:none;display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:99px;color:var(--tx);font-size:13px;text-decoration:none}
  .m-nav-row a:hover{background:var(--pr2)}
  .m-nav-row a.on{background:var(--pr2);color:var(--pr);font-weight:600}
  .m-nav-sub{border-top:1px dashed var(--bd)}
  .m-nav-sub a.on{background:var(--pr);color:#fff}
}
.top-qna .cnt{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--er);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}

/* ---------- 4. 버튼 / 입력 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--pr);background:var(--pr);color:#fff;padding:8px 14px;border-radius:8px;font:inherit;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.muted{color:var(--mu)}
.btn.sec{background:none;color:var(--pr)}
.btn.dan{background:var(--er);border-color:var(--er);color:#fff}
.btn.sm{padding:3px 9px;font-size:12px}
.btn.ic{background:none;color:var(--tx);border-color:var(--bd)}
/* 아이콘 버튼 묶음 (상품 관리 엑셀 다운로드 · 업로드) — 붙여서 한 덩어리 */
.icon-group{display:inline-flex;align-self:stretch}
.icon-group .btn.ic{width:42px;height:auto;min-height:38px;padding:0;border-radius:0;color:var(--ok)}
.icon-group .btn.ic:first-child{border-radius:8px 0 0 8px}
.icon-group .btn.ic:last-child{border-radius:0 8px 8px 0}
.icon-group .btn.ic:only-child{border-radius:8px}
.icon-group .btn.ic+.btn.ic{margin-left:-1px}
.icon-group .btn.ic:hover{background:color-mix(in srgb,var(--ok) 12%,transparent);position:relative}
.icon-group svg{width:21px;height:21px}
.btn:focus-visible,aside a:focus-visible,.nav-parent:focus-visible,.nav-btn:focus-visible{outline:2px solid var(--pr2);outline-offset:1px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx);font:inherit}
input[type=checkbox],input[type=radio]{width:auto}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pr2);border-color:var(--pr)}
/* 공통 검색창 — 돋보기 · 카드 배경 · 진한 테두리로 목록 위에서 눈에 띄게 */
input[type=search]{min-height:42px;padding-left:38px;border:1.5px solid color-mix(in srgb,var(--pr) 35%,var(--bd));background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center/18px;box-shadow:0 1px 3px rgb(15 23 42 / 8%);font-weight:500}
input[type=search]::placeholder{color:var(--mu);font-weight:400}
input[type=search]:hover{border-color:color-mix(in srgb,var(--pr) 60%,var(--bd))}
input[type=search]:focus{outline:3px solid var(--pr2);border-color:var(--pr)}
label{display:block;margin:10px 0 4px;color:var(--mu);font-size:12px}

/* ---------- 5. 레이아웃 / 메뉴 패널 ---------- */
.wrap{display:flex;width:100%;max-width:var(--page-max);margin:0 auto;min-height:calc(100vh - 56px)}
aside{width:230px;flex:none;background:var(--card);border-right:1px solid var(--bd);padding:12px}
aside a,.nav-parent,.nav-btn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;margin-bottom:2px;border:0;border-radius:8px;background:none;color:var(--tx);font:inherit;text-align:left;cursor:pointer;text-decoration:none}
aside a:hover,.nav-parent:hover,.nav-btn:hover{background:var(--pr2)}
aside a.on{background:var(--pr);color:#fff}
.nav-parent.has-active{color:var(--pr);font-weight:600}
.nav-parent .caret{margin-left:auto;color:var(--mu);font-size:16px;line-height:1;transition:transform .2s}
.nav-parent[aria-expanded=true] .caret{transform:rotate(90deg)}
/* 메뉴 옆 건수 (승인 대기 등) */
.nav-cnt{display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--er);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.sub a{align-items:center}
/* 서브메뉴 (접힘/펼침) */
.sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease,visibility .2s;visibility:hidden}
.sub.open{grid-template-rows:1fr;visibility:visible}
.sub>div{min-height:0;overflow:hidden;margin:0 0 2px 20px;padding-left:8px;border-left:2px solid var(--bd)}
.sub a{padding:7px 12px;font-size:13px;margin-bottom:1px}
.nav-bottom{margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.sb-backdrop{display:none}
main{flex:1;min-width:0;padding:20px 20px calc(90px + env(safe-area-inset-bottom,0px));width:100%}   /* 아래 여백: 오른쪽 아래 채팅 버튼(54px + 18px)에 마지막 버튼 · 내용이 가리지 않게 (PC · 휴대폰 공통) */
#sbtn{display:none}

/* ---------- 6. 카드 / 표 / 배지 ---------- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:16px;margin-bottom:16px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.g2{display:grid;gap:16px;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
/* grid 자식이 내부 표 min-width 때문에 늘어나 화면을 넘치지 않도록 */
.grid>*,.g2>*{min-width:0}
.g2 table{min-width:0}
.stat small{color:var(--mu)}
.stat div{font-size:22px;font-weight:700;overflow-wrap:anywhere}
.tw,.scroll-x{position:relative;overflow-x:auto;overscroll-behavior-x:contain}
/* overscroll-behavior: 끝까지 가로로 밀어도 브라우저 뒤로가기 · 앞으로가기 제스처로 넘어가지 않게
   position:relative: 안의 숨긴 select(.select-hidden, absolute)가 이 상자 기준이 되어 함께 잘림 — 페이지 밖으로 나가 휴대폰에서 축소되지 않게 */
table{width:100%;border-collapse:collapse}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap}
th{color:var(--mu);font-weight:600;font-size:12px}
.tw select{width:auto}
.badge{padding:2px 8px;border-radius:99px;background:var(--pr2);color:var(--pr);font-size:12px}
.badge.off{background:var(--bg);color:var(--mu);border:1px solid var(--bd)}
.bars{display:flex;align-items:flex-end;gap:10px;height:160px}
.bars i{flex:1;background:var(--pr);border-radius:6px 6px 0 0;position:relative;min-height:4px}
.bars i span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-style:normal;font-size:11px;color:var(--mu)}
/* 월별 구매금액 막대 상단 금액 표시용 추가 스타일 */
.bars i .bar-val {
  position: absolute;
  top: -18px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
}

/* 월별 주문건수 (막대 상단, 금액 위) */
.bars i .bar-cnt{position:absolute;top:-32px;bottom:auto;right:auto;left:50%;transform:translateX(-50%);font-size:10px;font-style:normal;color:var(--mu);white-space:nowrap}

.center{max-width:380px;margin:30px auto}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- 7. 페이지 공통 요소 ---------- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.page-head h2{margin:0}
.page-head h2 .head-count{margin-left:6px;color:var(--mu);font-size:14px;font-weight:500;white-space:nowrap}
.page-head h2 .head-count b{color:var(--tx);font-weight:700;font-variant-numeric:tabular-nums}
.desc{margin:-6px 0 14px;color:var(--mu);font-size:13px}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
/* 목록 상단 검색 · 탭 영역 스크롤 고정 — 상단 바(59px) 바로 아래, main 좌우 여백까지 배경으로 덮음 */
.sticky-bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 59px);z-index:15;padding:10px 20px;background:var(--bg)}
.sticky-bar,.sticky-bar.filter-bar,.sticky-bar.status-tabs{margin:0 -20px 2px}
.filter-bar input,.filter-bar select{width:auto;min-width:170px;flex:1;max-width:320px}
.thumb{font-size:20px;margin-right:6px}

.link{color:var(--tx);font-weight:600;text-decoration:none}
.link:hover{color:var(--pr);text-decoration:underline}
tr[data-href]{cursor:pointer}
tr[data-href]:hover{background:color-mix(in srgb,var(--pr2) 45%,transparent)}
input[readonly]{opacity:.75;cursor:not-allowed}
.input-group{display:flex;gap:8px;align-items:center}
.input-group input{flex:1;min-width:0}
/* 주소 입력 (address_input 매크로 · common/address.js): 기본 주소는 검색으로만, 상세 주소는 직접 */
.addr-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.addr-field input[data-addr-base][readonly]{opacity:1;cursor:pointer}
.addr-field .btn{flex:none;white-space:nowrap}
.addr-clear{width:38px;padding:8px 0}
.form-row:has(.addr-field){align-items:start}
.form-row:has(.addr-field)>label{padding-top:9px}
.cam-btn{flex:none;padding:6px 10px;font-size:18px;line-height:1}
/* 상세 정보 (회원 상세 등) */
.profile-head{display:flex;align-items:center;gap:14px;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--bd)}
.profile-head .profile-edit{margin-left:auto;align-self:flex-start}      /* 회원 상세: 카드 오른쪽 위 수정 버튼 */
.avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--pr2);color:var(--pr);font-size:22px;font-weight:700}
.profile-name{display:block;font-size:18px}
.profile-sub{color:var(--mu);font-size:13px}
.detail{margin:0}
.detail-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--bd)}
.detail-row:last-child{border-bottom:0}
.detail dt{color:var(--mu);font-size:13px}
.detail dd{margin:0;overflow-wrap:anywhere}
.detail dd small{margin-left:6px;color:var(--mu)}
.detail-card .form-row{grid-template-columns:140px minmax(0,1fr)}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* 상품 썸네일 · 이미지 미리보기 */
.prod-cell{display:inline-flex;align-items:center;gap:12px}
.prod-thumb{width:72px;height:72px;flex:none;border-radius:8px;object-fit:cover;background:var(--bg);border:1px solid var(--bd)}
.prod-thumb.is-empty{display:grid;place-items:center;font-size:30px}
#prodTable td{padding-top:7px;padding-bottom:7px}
/* 배송지 위치 사진 */
.pre-line{white-space:pre-line}
.ship-photo{display:block;width:fit-content;margin-top:8px}
.ship-photo img{display:block;width:240px;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--bd)}
.photo-item{margin:0;color:var(--tx);cursor:pointer}
.detail dd .photo-empty{display:block;margin:4px 0 0;color:var(--mu)}
.form-section{margin:22px 0 12px;padding-top:14px;border-top:1px solid var(--bd)}
.form-hint-indent{margin-left:152px}

/* 알림 박스 (회원 상세 QnA 미답변 등) */
.alert{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;margin-bottom:16px;border:1px solid color-mix(in srgb,var(--wa) 45%,transparent);border-radius:10px;background:color-mix(in srgb,var(--wa) 12%,var(--card))}
.alert .alert-text{flex:1;min-width:200px}
.alert .alert-text small{display:block;color:var(--mu)}
/* 인증 상태 */
.verify-list{display:flex;gap:6px;flex-wrap:wrap}

/* QnA 관리 */
.badge.wait{background:color-mix(in srgb,var(--wa) 18%,var(--card));color:var(--wa)}
.badge.done{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}
.stat.is-alert div{color:var(--wa)}
.qa-count{color:var(--mu);font-size:11px}
td.qa-empty{padding:28px 10px;text-align:center;color:var(--mu)}
.qa-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--bd)}
.qa-title .badge{flex:none}
.qa-thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.qa-item{max-width:88%;padding:11px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--bg)}
.qa-item.admin{align-self:flex-end;background:var(--pr2);border-color:transparent}
.qa-meta{display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin-bottom:4px;font-size:12px;color:var(--mu)}
.qa-meta b{color:var(--tx)}
.qa-item.admin .qa-meta b{color:var(--pr)}
.qa-text{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.qa-by{gap:6px 16px;margin-bottom:10px}
.qa-by label{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--tx);font-size:13px;cursor:pointer}

/* ---------- 8. 공통 Dialog (입력 폼 / 메시지) ---------- */
dialog.admin-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--tx);box-shadow:0 12px 40px #0005;overflow:auto}
dialog.admin-dialog::backdrop{background:rgb(0 0 0 / 45%)}
.dialog-content{padding:18px}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dialog-header h3{margin:0;font-size:16px}
.dialog-head-btns{display:inline-flex;align-items:center;gap:6px}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
/* 입력 양식: label : input 2컬럼 (textarea 행만 세로 배치) */
.form-row{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:8px 12px;margin-bottom:10px}
.form-row label{margin:0}
.form-row.is-textarea{grid-template-columns:1fr;align-items:start}
.form-row.is-textarea label{margin-bottom:-2px}
.legal-tools{display:flex;justify-content:flex-end;margin-top:-4px}   /* 환경 설정 › 약관 — 기본 문안 넣기 */
.form-hint{margin:-4px 0 10px;color:var(--mu);font-size:12px}
/* 메시지 Dialog: 안내 / 경고 / 확인 */
.msg-dialog .dialog-content{padding:24px 22px 18px;text-align:center}
.msg-dialog .dialog-actions{justify-content:center}
.msg-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 10px;border-radius:50%;font-size:26px}
.msg-dialog.is-info .msg-icon{background:color-mix(in srgb,#3b82f6 18%,var(--card))}
.msg-dialog.is-warn .msg-icon{background:color-mix(in srgb,var(--wa) 20%,var(--card))}
.msg-dialog.is-confirm .msg-icon{background:var(--pr2)}
.msg-title{margin:0 0 6px;font-size:17px}
.msg-dialog .msg-text{margin:0;color:var(--tx);white-space:pre-line;overflow-wrap:anywhere}
.msg-dialog .btn{min-width:84px}
/* dialog 가 열려 있는 동안 뒤 페이지 스크롤 고정 (상품 등록/수정 등에서 스크롤 시 배경이 움직이던 문제) */
html:has(dialog[open]){overflow:hidden}
dialog.admin-dialog{overscroll-behavior:contain}
/* 고정 프레임 Dialog: 제목 · 하단 버튼은 고정, .dialog-body 만 스크롤 */
dialog.admin-dialog.is-fixed-frame{overflow:hidden}
.is-fixed-frame .dialog-content{display:flex;flex-direction:column;max-height:calc(100dvh - 34px);padding:0}
.is-fixed-frame .dialog-header{flex:none;margin:0;padding:16px 18px 12px;border-bottom:1px solid var(--bd)}
.is-fixed-frame .dialog-form{display:flex;flex-direction:column;flex:1;min-height:0}
.is-fixed-frame .dialog-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 18px 4px}
.is-fixed-frame .dialog-actions{flex:none;margin:0;padding:12px 18px 16px;border-top:1px solid var(--bd)}

/* 세그먼트 (선택지 2~3개: 상태 · 노출 등) — _macros.html segment() */
.form-label{color:var(--mu);font-size:12px}
.segment{display:inline-flex;padding:3px;gap:2px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);justify-self:start}
.segment label{position:relative;margin:0;color:var(--tx);font-size:13px;cursor:pointer}
.segment input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.segment span{display:block;min-width:64px;padding:6px 14px;border-radius:7px;text-align:center;white-space:nowrap;transition:background .15s,color .15s}
.segment label:hover span{background:var(--pr2)}
.segment input:checked+span{background:var(--pr);color:#fff;font-weight:600}
/* on / off 개념 색 (macro tones): on = 초록, off = 회색 */
.segment .seg-on:hover span{background:var(--seg-on-bg)}
.segment .seg-off:hover span{background:var(--seg-off-bg)}
.segment .seg-on input:checked+span{background:var(--seg-on);color:#fff}
.segment .seg-off input:checked+span{background:var(--seg-off);color:#fff}
.segment .seg-on input:checked+span::before,.segment .seg-off input:checked+span::before{content:"●";margin-right:5px;font-size:9px;vertical-align:2px}
.segment input:focus-visible+span{outline:2px solid var(--pr);outline-offset:1px}
/* 링크로 된 세그먼트 (목록 필터: 상품 판매 상태 등) — 선택 = .on */
.seg-links{align-self:center}
.seg-links a{color:var(--tx);font-size:13px;text-decoration:none;border-radius:7px}
.seg-links a span{min-width:0;font-variant-numeric:tabular-nums}
.seg-links a:hover span{background:var(--pr2)}
.seg-links a.on span{background:var(--pr);color:#fff;font-weight:600}
.seg-links a.seg-on:hover span{background:var(--seg-on-bg)}
.seg-links a.seg-off:hover span{background:var(--seg-off-bg)}
.seg-links a.seg-on.on span{background:var(--seg-on);color:#fff}
.seg-links a.seg-off.on span{background:var(--seg-off);color:#fff}
.seg-links a.seg-on.on span::before,.seg-links a.seg-off.on span::before{content:"●";margin-right:5px;font-size:9px;vertical-align:2px}
.seg-links a:focus-visible{outline:2px solid var(--pr);outline-offset:1px}
.seg-links .seg-n{font-weight:inherit}
/* 상품 관리 검색줄 — 휴대폰: [검색칸 ········ | 세그먼트] 한 줄 (가로 스크롤 없이 꽉 차게, 세그먼트 숫자 숨김)
   / [공급업체 ······ | 검색] 다음 줄 */
@media(max-width:900px){
  .prod-filter input[type=search]{flex:1 1 0;min-width:0;max-width:none}
  .prod-filter .seg-links{flex:none}
  .prod-filter .seg-links a span{padding:6px 10px}
  .prod-filter .seg-n{display:none}
  .prod-filter select,.prod-filter .select-btn{flex:1 1 calc(100% - 90px);min-width:0;max-width:none}
}
@media(max-width:380px){.prod-filter .seg-links a span{padding:6px 7px;font-size:12.5px}}

/* select → 펼침 목록 (admin.js enhanceSelects) — PC · 휴대폰 같은 모양 (홈페이지 정렬 드롭다운과 같은 방식) */
.select-hidden{position:absolute!important;width:1px!important;min-width:0!important;max-width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0;pointer-events:none}   /* 크기를 준 select 도 1px — 숨긴 select 가 페이지 폭을 넓히지 않게 */
.select-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 11px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s}
.select-btn:hover:not(:disabled),.select-btn[aria-expanded="true"]{border-color:var(--pr)}
.select-btn:disabled{opacity:.6;cursor:default}
.select-caret{color:var(--mu);font-size:12px;transition:transform .2s}
.select-btn[aria-expanded="true"] .select-caret{transform:rotate(180deg)}
.filter-bar .select-btn{width:auto;min-width:170px;flex:1;max-width:320px}
.tw .select-btn{width:auto}
/* 목록 — popover(최상위 층), 위치는 admin.js placePicker 가 버튼 아래(또는 위)로 */
.picker-menu{position:fixed;inset:auto;margin:0;padding:6px;border:1px solid var(--bd);border-radius:10px;background:var(--card);color:var(--tx);
             box-shadow:0 10px 30px rgb(0 0 0 / 14%);overflow-y:auto;overscroll-behavior:contain;animation:pickerIn .14s ease-out}
.picker-menu.up{animation-name:pickerInUp}
@keyframes pickerIn{from{opacity:0;transform:translateY(-4px)}}
@keyframes pickerInUp{from{opacity:0;transform:translateY(4px)}}
.picker-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 12px;border:0;border-radius:6px;background:none;color:var(--mu);font:inherit;font-size:14px;text-align:left;overflow-wrap:anywhere;cursor:pointer}
.picker-opt[hidden]{display:none}
.picker-opt:hover:not(:disabled),.picker-opt:focus-visible{background:color-mix(in srgb,var(--tx) 6%,transparent);color:var(--tx);outline:0}
.picker-opt.on{color:var(--tx);font-weight:700}
.picker-opt.is-active{background:color-mix(in srgb,var(--tx) 6%,transparent);color:var(--tx)}   /* 입력 추천 목록: ↑↓ 로 고른 항목 */
.picker-opt.on::after{content:"✓";color:var(--pr)}
.picker-opt:disabled{opacity:.45;cursor:default}
@media(pointer:coarse){.picker-opt{min-height:44px;font-size:15px}}   /* 손가락으로 누르기 좋게 */
@media(prefers-reduced-motion:reduce){.picker-menu{animation:none}}

/* 상품 폼 이미지 필드 (대표 · 꽃 얼굴 · 특징) */
.img-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.img-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.img-field-head{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:30px;color:var(--mu);font-size:12px}
.img-field-head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.img-field-head .cam-btn{padding:4px 7px;font-size:15px}
.img-field-media{position:relative}
.img-field-pick{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;margin:0;overflow:hidden;border:1px dashed var(--bd);border-radius:8px;background:var(--bg);color:var(--mu);cursor:pointer}
.img-field-pick:hover,.img-field-media:focus-within .img-field-pick{border-color:var(--pr)}
.img-field-pick.has-img{border-style:solid}
.img-field-pick.is-new{border-color:var(--pr)}
.img-field-pick img{display:block;width:100%;height:100%;object-fit:contain}
.img-field-pick img[hidden],.img-field-pick.has-img .img-field-empty{display:none}
.img-field-empty{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:22px;line-height:1}
.img-field-empty small{font-size:11px}
.img-field-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.img-field-del{position:absolute;top:4px;right:4px;width:26px;height:26px;border:0;border-radius:50%;background:rgb(0 0 0 / 60%);color:#fff;font-size:12px;cursor:pointer}
.img-field-del[hidden]{display:none}
.img-field-del:hover{background:var(--er)}
.img-field-note{margin:0;color:var(--wa);font-size:12px}
.link-btn{border:0;background:none;padding:0;color:var(--pr);font:inherit;text-decoration:underline;cursor:pointer}
/* 상품 목록: 품종명 상품명 등급 · 행 클릭 수정 */
.prod-name{display:flex;flex-direction:column;line-height:1.3}
.prod-thumb-link{position:relative;display:block;flex:none;border-radius:8px}
.prod-thumb-link:hover .prod-thumb{border-color:var(--pr)}
.thumb-count{position:absolute;right:3px;bottom:3px;min-width:18px;padding:0 5px;border-radius:99px;background:rgb(0 0 0 / 65%);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center}
.prod-name small{color:var(--mu);font-size:12px}
/* 경매 동기화 상품 표시 · 홈페이지 미노출(표시 이름 없음 · 판매가 0원) 안내 */
.prod-name .prod-src{font-size:11px;font-weight:600;padding:0 6px;vertical-align:1px}
.prod-name small.prod-hidden{color:var(--wa)}
.lock-spec{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.lock-spec .badge{margin-left:6px;font-size:11px;font-weight:600}
.dialog-form input[readonly]{background:var(--bg);color:var(--mu)}
tr[data-row-edit]{cursor:pointer}
.row-edit-btn{color:var(--tx);font-weight:600;text-decoration:none;text-align:left}
.row-edit-btn:hover{color:var(--pr);text-decoration:underline}

/* dialog 의 삭제 버튼은 왼쪽 끝 */
.dialog-actions .dialog-delete{margin-right:auto}
tr[data-row-edit]:hover{background:color-mix(in srgb,var(--pr2) 45%,transparent)}
.sms-link{margin-left:8px;font-weight:400;font-size:13px}
/* 공통 이미지 Dialog (Admin.image / a[data-image-view]) */
/* 공통 이미지 Dialog 스타일 — common/image-viewer.css (홈페이지와 같은 화면) */
a[data-image-view]{cursor:zoom-in}

/* ---------- 9. 채팅 ---------- */
#fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:54px;height:54px;border-radius:50%;font-size:24px;padding:0;justify-content:center;box-shadow:0 4px 14px #0004;z-index:40}
#chat{position:fixed;right:18px;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:340px;max-width:calc(100vw - 36px);height:460px;max-height:calc(100dvh - 110px);display:none;flex-direction:column;z-index:40;padding:0;overflow:hidden;box-shadow:var(--chat-shadow)}
#chat.on{display:flex}
#chat .h{display:flex;align-items:center;gap:6px;box-sizing:border-box;min-height:50px;padding:8px 10px;background:var(--pr);color:#fff;font-weight:600}
#chat .h span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat .h button{border:0;background:none;color:inherit;font:inherit;font-size:18px;line-height:1;padding:4px 6px;border-radius:6px;cursor:pointer}
#chat .h button:hover{background:#fff3}
#chat .h .chat-back{display:grid;place-items:center;width:34px;height:34px;padding:0;margin-left:-4px}
#chat .h .chat-back[hidden]{display:none}
#chat .h .chat-back svg{display:block}
#fab .cnt{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--er);color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center}
/* 대화 상대 목록 */
.chat-list{flex:1;overflow:auto;overscroll-behavior:contain;padding:4px}
.chat-contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--tx);font:inherit;text-align:left;cursor:pointer}
.chat-contact:hover{background:var(--pr2)}
.chat-contact b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-contact b small{margin-left:4px;color:var(--mu);font-weight:400;font-size:11px}
.chat-contact time{color:var(--mu);font-size:11px;text-align:right}
.chat-contact .prev{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mu);font-size:12px}
.chat-contact .cnt{min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--er);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;justify-self:end}
.chat-empty{padding:24px 10px;text-align:center;color:var(--mu);font-size:13px;white-space:pre-line}
/* 대화 내용 (chat.js renderMessage) — 줄 .msg-row: [프로필] [이름 / 말풍선 .msg + 읽음 · 시각 .msg-meta]
   같은 사람 · 같은 분 묶음: 첫 줄만 프로필 · 이름 · 말꼬리, 다음 줄(.cont)은 간격 좁게, 시각은 마지막 줄만 (.no-time) */
#msgs{flex:1;overflow:auto;overscroll-behavior:contain;padding:12px 12px 14px;display:flex;flex-direction:column;gap:3px}
#msgs .msg-row{display:flex;align-items:flex-start;gap:8px;margin-top:10px}
#msgs .msg-row.cont{margin-top:0}
#msgs .msg-row.me{justify-content:flex-end}
#msgs .msg-avatar{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:14px;background:hsl(var(--hue,210) 55% 88%);color:hsl(var(--hue,210) 45% 32%);font-size:15px;font-weight:700}
#msgs .msg-avatar.is-blank{visibility:hidden;height:0}
#msgs .msg-col{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:78%}
#msgs .msg-line{display:flex;align-items:flex-end;gap:6px}
#msgs .msg-row.me .msg-line{flex-direction:row-reverse}
#msgs .msg{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:8px 12px;border-radius:16px;background:var(--chat-in-bg);color:var(--chat-in-tx);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
/* 내 말풍선: 전송 버튼(비활성일 때 보이는 연한 파랑)과 같은 색 바탕 + 받은 메시지와 같은 글자색 — 단체방은 초록 계열 */
#chat{--chat-me-bg:color-mix(in srgb,var(--pr) 40%,var(--card))}
#chat.is-group{--chat-me-bg:color-mix(in srgb,var(--chat-group-out) 40%,var(--card))}
#msgs .msg.me{background:var(--chat-me-bg);color:var(--chat-in-tx)}
/* 말꼬리 — 묶음의 첫 말풍선 위쪽 (상대: 왼쪽 · 나: 오른쪽) */
#msgs .msg-row:not(.cont) .msg{border-top-left-radius:4px}
#msgs .msg-row.me:not(.cont) .msg{border-top-left-radius:16px;border-top-right-radius:4px}
#msgs .msg-row:not(.cont) .msg::before{content:'';position:absolute;top:0;left:-6px;border-top:10px solid var(--chat-in-bg);border-left:8px solid transparent}
#msgs .msg-row.me:not(.cont) .msg::before{left:auto;right:-6px;border-top-color:var(--chat-me-bg);border-left:0;border-right:8px solid transparent}
#msgs .msg-body{white-space:pre-wrap}
/* 읽음 · 시각 (말풍선 옆 아래) — 안 읽음은 강조 색 숫자 */
#msgs .msg-meta{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding-bottom:2px;font-size:11px;line-height:1.2;white-space:nowrap}
#msgs .msg-row.me .msg-meta{align-items:flex-end}
#msgs .msg-meta time{color:var(--mu);font-size:10.5px}
#msgs .msg-row.no-time .msg-meta time{display:none}
#msgs .msg-read{color:var(--mu)}
#msgs .msg-read:empty{display:none}
#msgs .msg-read.is-unread{color:var(--wa);font-size:12px;font-weight:800}
#msgs .msg-from{margin-left:2px;font-size:12px;color:var(--chat-group-from)}
/* 날짜 줄 · 여기부터 읽지 않은 메시지 */
#msgs .msg-date,#msgs .msg-unread{align-self:center;margin:14px 0 4px;padding:3px 12px;border-radius:99px;background:color-mix(in srgb,var(--tx) 7%,transparent);color:var(--mu);font-size:11px}
#msgs .msg-unread{align-self:stretch;text-align:center;background:color-mix(in srgb,var(--pr) 10%,transparent);color:var(--pr);font-weight:600}
#msgs > :first-child{margin-top:0}
#msgs .msg-img img{display:block;max-width:100%;max-height:200px;border-radius:8px;object-fit:contain;background:#0001}
#msgs .msg-link{display:block;padding:6px 8px;border-radius:8px;background:var(--card);color:var(--tx);text-decoration:none;border:1px solid var(--bd)}
#msgs .msg-link:hover{border-color:var(--pr)}
#msgs .msg-link b{display:block;font-size:13px}
#msgs .msg-link small{display:block;color:var(--mu);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 단체 채팅방 (#chat.is-group): 제목 줄 · 바탕 · 내 말풍선 색상을 1:1 대화와 다르게 */
#chat.is-group .h{background:var(--chat-group-hd)}
#chat.is-group #msgs{background:var(--chat-group-bg)}
#chat.is-group #msgs .msg:not(.me){background:var(--card)}
#chat.is-group #msgs .msg-row:not(.me):not(.cont) .msg::before{border-top-color:var(--card)}
#msgs .msg-from small{margin-left:4px;color:var(--mu);font-weight:400;font-size:11px}
.chat-contact.is-group{margin-bottom:4px;background:var(--chat-group-bg);border:1px solid color-mix(in srgb,var(--chat-group-hd) 30%,transparent)}
.chat-contact.is-group:hover{background:color-mix(in srgb,var(--chat-group-hd) 16%,var(--card))}
#chatForm{padding:8px;border-top:1px solid var(--bd)}
/* 입력 — 기본(휴대폰 · 좁은 화면): 한 줄 [📎][🔗][입력][➤] */
.chat-input{display:flex;align-items:flex-end;gap:4px}
.chat-bar{display:contents}                       /* 도구 줄의 버튼들을 입력 줄에 바로 배치 */
.chat-bar-sp{display:none}
.chat-input textarea{order:1;flex:1;min-width:0;resize:none;overscroll-behavior:contain;max-height:120px;padding:7px 9px;line-height:1.4}
.chat-tool{flex:none;padding:6px 7px;font-size:16px;line-height:1}
/* 전송 버튼: 화면 크기와 상관없이 동그란 아이콘만 — 내 말풍선과 같은 바탕 · 글자색 (--chat-me-bg) */
.chat-send{order:2;flex:none;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:var(--chat-me-bg);color:var(--chat-in-tx)}
.chat-send:hover:not(:disabled){filter:brightness(.95)}
.chat-send .send-text{display:none}
.chat-send:disabled{opacity:.45;cursor:default;filter:none}
.chat-attach{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.chat-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 4px 3px 6px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);font-size:12px}
.chat-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.chat-chip img{width:32px;height:32px;border-radius:4px;object-fit:cover}
.chat-chip button{border:0;background:none;color:var(--mu);cursor:pointer;font-size:13px;padding:2px 4px}
/* 알림 켜기 안내 */
.chat-notice{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--pr2);font-size:12px;line-height:1.4}
.chat-notice span{flex:1;min-width:0}
.chat-notice .btn{flex:none}
.chat-notice-x{flex:none;border:0;background:none;color:var(--mu);cursor:pointer;padding:2px 4px}
/* 큰 화면(PC): 대화창 · 입력창 크게 */
@media (min-width:1024px) and (min-height:720px){
  #chat{width:420px;height:min(640px,calc(100dvh - 110px))}
  #msgs .msg-col{max-width:80%}
  #msgs .msg-img img{max-height:260px}
  #chatForm{padding:0}
  .chat-input{flex-direction:column;align-items:stretch;gap:0}
  .chat-input textarea{order:0;min-height:96px;max-height:220px;padding:12px 14px;border:0;border-radius:0;background:transparent;font-size:14px}
  .chat-input textarea:focus{outline:0}
  .chat-bar{display:flex;align-items:center;gap:2px;padding:4px 8px 8px}
  .chat-bar-sp{display:block;flex:1}
  .chat-tool{border-color:transparent;font-size:18px;padding:6px}
  .chat-tool:hover{background:var(--bg)}
  .chat-attach{margin:8px 10px 0}
}
@media (min-width:1600px) and (min-height:900px){
  #chat{width:480px;height:min(760px,calc(100dvh - 110px))}
  .chat-input textarea{min-height:120px;max-height:280px}
}

/* 휴대폰: 거의 전체 화면 */
@media (max-width:480px){
  html.chat-open,html.chat-open body{overflow:hidden}       /* 대화창이 열린 동안 뒤 페이지 고정 */
  #chat{overscroll-behavior:contain;left:12px;right:12px;width:auto;max-width:none;height:80dvh}
}

/* ---------- 9-1. 공지사항 (목록 · 보기 · HTML 편집기 · 대시보드) ---------- */
.inline-form{display:inline;margin:0}
.badge-btn{border:0;font:inherit;font-size:12px;cursor:pointer}
.badge-btn.off{border:1px solid var(--bd)}
.badge-btn:hover{filter:brightness(.95)}
.notice-table .notice-title{min-width:220px;white-space:normal;overflow-wrap:anywhere}   /* 긴 제목은 줄바꿈 — PC 가로 스크롤 없이 */
.notice-table .row-actions{white-space:nowrap;text-align:right}
/* 일반 팝업 (admin/popups) — 목록 썸네일 · 이미지 필드 · 노출 기간 */
.popup-cell{display:flex;align-items:center;gap:10px;min-width:0}
.popup-thumb{flex:none;width:44px;height:58px;border:1px solid var(--bd);border-radius:6px;object-fit:cover;background:var(--bg)}
.popup-table .c-link,.popup-table .c-period{min-width:100px;white-space:normal;overflow-wrap:anywhere}
/* 좁은 PC · 태블릿 (휴대폰 행 카드 모양 전): 칸 여백 · 최소 폭을 줄이고 작성자도 줄바꿈 — 가로 스크롤 없이 */
@media(min-width:701px) and (max-width:1100px){
  .notice-table th,.notice-table td{padding:9px 6px}
  .notice-table .notice-title{min-width:150px}
  .notice-table .c-author{white-space:normal;overflow-wrap:anywhere}
  .popup-table .c-link,.popup-table .c-period{min-width:76px}
  .popup-thumb{width:36px;height:48px}
  .popup-cell{gap:8px}
}
.popup-img-field{width:min(200px,100%)}
.popup-img-field .img-field-pick{aspect-ratio:3/4}
.popup-period input{width:auto;min-width:0;flex:1 1 140px;max-width:180px}
.notice-view{padding:20px 22px}
.notice-view-head{padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--bd)}
.notice-view-head h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 4px;font-size:18px}
.notice-meta{margin:0;color:var(--mu);font-size:12px}
/* 공지 본문 (보기 · 편집 영역 · 대시보드 공통) */
.notice-body{line-height:1.7;overflow-wrap:anywhere}
.notice-body>:first-child{margin-top:0}
.notice-body>:last-child{margin-bottom:0}
.notice-body p{margin:0 0 .6em}
.notice-body h2,.notice-body h3,.notice-body h4{margin:1em 0 .5em}
.notice-body img{max-width:100%;height:auto;border-radius:6px}
.notice-body a{color:var(--pr)}
.notice-body blockquote{margin:.6em 0;padding:6px 12px;border-left:3px solid var(--pr);background:var(--bg);color:var(--mu)}
.notice-body table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse}   /* 넓은 표는 표 안에서만 가로 스크롤 */
.notice-body td,.notice-body th{border:1px solid var(--bd);padding:4px 8px;white-space:normal}               /* 공통 td 의 nowrap 해제 */
.notice-body pre{max-width:100%;overflow-x:auto;white-space:pre-wrap}
.notice-body hr{border:0;border-top:1px solid var(--bd);margin:1em 0}
/* HTML 편집기 */
.rte{border:1px solid var(--bd);border-radius:8px;background:var(--bg);overflow:hidden}
.rte:focus-within{border-color:var(--pr);outline:2px solid var(--pr2)}
.rte-bar{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;border-bottom:1px solid var(--bd);background:var(--card)}
.rte-bar button{min-width:32px;height:32px;padding:0 7px;border:1px solid transparent;border-radius:6px;background:none;color:var(--tx);font:inherit;font-size:14px;cursor:pointer}
.rte-bar button:hover,.rte-bar button[aria-pressed=true]{background:var(--pr2);border-color:var(--bd)}
.rte-bar select{width:auto;height:32px;padding:0 6px;margin-right:4px;font-size:13px}
.rte-bar .sp{flex:1}
.rte-sep{width:1px;height:20px;margin:0 4px;background:var(--bd)}
.rte-color{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;margin:0;border-radius:6px;color:var(--tx);font-weight:700;font-size:14px;cursor:pointer}
.rte-color:hover{background:var(--pr2)}
.rte-color input{position:absolute;left:4px;right:4px;bottom:3px;width:auto;height:4px;padding:0;border:0;opacity:1;cursor:pointer}
.rte-src-btn{font-size:12px!important}
.rte-bar .rte-popup-btn{font-size:12.5px}
/* 공지 편집기 › 팝업 이미지 고르기 */
dialog.popup-pick-dialog{width:min(560px,calc(100vw - 32px))}
.popup-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:0 0 10px;padding:0;list-style:none}
.popup-pick button{display:flex;flex-direction:column;gap:6px;width:100%;padding:6px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.popup-pick button:hover,.popup-pick button:focus-visible{border-color:var(--pr);background:var(--pr2)}
.popup-pick img{display:block;width:100%;aspect-ratio:3/4;border-radius:5px;object-fit:cover;background:var(--card)}
.popup-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rte-area{min-height:320px;max-height:70vh;overflow:auto;padding:14px 16px;background:var(--card);color:var(--tx);outline:0}
.rte-area.is-drop{background:var(--pr2)}
.rte-area.is-uploading{cursor:progress;opacity:.7}
.rte-source{display:block;min-height:320px;border:0;border-radius:0;font:13px/1.5 ui-monospace,Consolas,monospace;resize:vertical}
.rte-help{margin:6px 0 0}
/* 공지 등록 · 수정 (일반 · 관리자) — 휴대폰: 항목 이름은 위로, 편집 도구는 한 줄(옆으로 밀기) · 상단 바 아래 고정,
   편집 영역은 안쪽 스크롤 없이 내용만큼 늘어나 화면 스크롤 하나로 편집 */
@media(max-width:700px){
  .notice-edit{padding:12px}
  .detail-card.notice-edit .form-row{grid-template-columns:minmax(0,1fr);gap:4px;margin-bottom:12px}   /* 아래 480px 규칙보다 우선 */
  .notice-edit .form-row>label,.notice-edit .form-row>.form-label{color:var(--mu);font-size:12px}
  .notice-edit #n-title{font-size:16px}                                         /* iOS 입력 확대 방지 */
  .notice-edit .rte{overflow:clip}                                             /* hidden 이면 도구 모음 고정(sticky)이 안 됨 */
  .notice-edit .rte-bar{top:calc(env(safe-area-inset-top,0px) + 59px);z-index:5;flex-wrap:nowrap;gap:2px;padding:5px 6px;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .notice-edit .rte-bar::-webkit-scrollbar{display:none}
  .notice-edit .rte-bar>*{flex:none}
  .notice-edit .rte-bar button,.notice-edit .rte-color{min-width:38px;height:38px}
  .notice-edit .rte-bar select{height:38px;margin-right:2px}
  .notice-edit .rte-bar .sp{display:none}
  .notice-edit .rte-sep{margin:0 2px}
  .notice-edit .rte-area{min-height:50vh;max-height:none;overflow:visible;padding:12px;font-size:15px}
  .notice-edit .rte-source{min-height:50vh}
  .notice-edit .rte-help{font-size:12px}
  .notice-edit .form-actions{margin-top:14px}
  .notice-edit .form-actions .btn{flex:1;min-height:44px}
}
/* 대시보드 상단 관리자 공지 */
.dash-notice{margin-bottom:16px;border-left:4px solid var(--wa)}
.dash-empty{margin:4px 0 0;color:var(--mu);font-size:13px}
.dash-stats{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.stat-sub{display:block;margin-top:2px;color:var(--mu);font-size:12px}
.dash-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.dash-card-head h3{margin:0}
.dash-card-head h3 small{margin-left:6px;color:var(--mu);font-size:12px;font-weight:400}
.dash-card-head .link{font-size:12px;color:var(--mu);white-space:nowrap}
/* 주간 매출 막대 — 막대(요일)를 누르면 그날 주문 목록 */
.dash-bars{min-width:420px;margin:30px 0 24px}
.dash-bars .bar-link{flex:1;display:flex;align-items:flex-end;height:100%;color:inherit;text-decoration:none}
.dash-bars .bar-link i{width:100%;opacity:.55;transition:opacity .15s}
.dash-bars .bar-link.is-today i,.dash-bars a.bar-link:hover i{opacity:1}
.dash-bars .bar-link.is-today span:last-child{color:var(--pr);font-weight:700}
.dash-recent .dash-time{display:block;color:var(--mu);font-size:11px}
/* 양재 경매 시세 (admin/market.html) — 상단 리포트 카드 · 등락(▲ 빨강 · ▼ 파랑) */
.mk-bar{align-items:center}
.mk-bar.sticky-bar{position:static}                  /* 고정은 아래 탭 · 검색 줄만 (.mk-tabbar) */
.mk-search{align-items:center}
.mk-search input[type=search]{flex:1;min-width:140px;width:auto}
.mk-bar .segment input{min-width:0;flex:none}
.mk-day{display:flex;align-items:center;gap:4px}
.mk-cal{position:relative}
.mk-cal>summary{list-style:none;white-space:nowrap}
.mk-cal>summary::-webkit-details-marker{display:none}
.mk-cal-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:280px;max-width:calc(100vw - 32px);padding:12px;border:1px solid var(--bd);border-radius:12px;background:var(--card);box-shadow:0 12px 32px rgb(15 23 42 / 18%)}
/* 머리글 안 달력 (상품 동기화) — 팝업 기준을 버튼 대신 머리글 전체로: 세로는 버튼 바로 아래, PC 는 오른쪽 끝 ·
   휴대폰(머리글이 두 줄로 접혀 버튼이 왼쪽에 옴)은 가운데 — 어느 쪽이든 화면 밖으로 잘리지 않게 */
.page-head:has(.mk-cal){position:relative}
.page-head .mk-cal{position:static}
.page-head .mk-cal-pop{top:auto;left:auto;right:0;margin-top:6px}
@media(max-width:600px){.page-head .mk-cal-pop{left:0;right:0;margin:6px auto 0}}
.mk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.mk-cal-head .btn:disabled{opacity:.3}
.mk-cal-grid{width:100%;border-collapse:collapse;table-layout:fixed}
.mk-cal-grid th{padding:4px 0;border:0;font-size:11px;color:var(--mu);text-align:center}
.mk-cal-grid th.sun{color:var(--er)}.mk-cal-grid th.sat{color:var(--pr)}
.mk-cal-grid td{padding:2px;border:0;text-align:center}
.mk-cal-grid td>a,.mk-cal-grid td>span{display:block;padding:6px 0;border-radius:8px;font-size:13px;line-height:1.2}
.mk-cal-grid td>span{color:var(--mu);opacity:.45}
.mk-cal-grid td>a{background:var(--pr2);color:var(--pr);font-weight:600;text-decoration:none}
.mk-cal-grid td>a:hover{outline:2px solid var(--pr);outline-offset:-2px}
.mk-cal-grid td>a.on{background:var(--pr);color:#fff}
.mk-cal-grid td>a.is-new{background:none;color:var(--tx);font-weight:400;box-shadow:inset 0 0 0 1px var(--bd)}
.mk-cal-grid td>a.is-new.is-today{box-shadow:inset 0 0 0 2px var(--tx)}
.mk-cal-grid .is-today{box-shadow:inset 0 0 0 2px var(--tx)}
.mk-cal-key{margin:8px 0 0;color:var(--mu);font-size:12px}
.mk-cal-key i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--pr2);vertical-align:-1px}
.mk-cal-key i.is-new{background:none;box-shadow:inset 0 0 0 1px var(--bd)}
.mk-cal-key+.mk-cal-key{margin-top:2px}
.mk-warn{margin:0;color:var(--wa)}
.mk-card{margin-bottom:16px}
/* 주요 품목 카드 6개 */
.mk-feat{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.mk-feat-card{display:flex;flex-direction:column;gap:2px;margin:0;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.mk-feat-card:hover,.mk-feat-card.on{border-color:var(--pr)}
.mk-feat-card:hover{transform:translateY(-1px)}
.mk-feat-card.is-empty{opacity:.6}
.mk-feat-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:14px}
.mk-feat-head span{font-size:12px;white-space:nowrap}
.mk-feat-price{margin-top:4px;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.mk-feat-price small{margin-left:2px;color:var(--mu);font-size:11px;font-weight:400}
.mk-feat-sub{color:var(--mu);font-size:12px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* 카드 그래프 — 최근 15일 평균가 (선 2px · 마지막 점 강조 · 점 위 hover 영역 넓게) */
.mk-spark{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}
.mk-spark-base{stroke:var(--bd);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-spark-line{fill:none;stroke:var(--pr);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mk-spark-dot{fill:var(--pr);stroke:var(--card);stroke-width:1.5;vector-effect:non-scaling-stroke}
.mk-spark-hit{fill:transparent}
.mk-spark g:hover .mk-spark-dot{r:4.5}
.mk-spark-axis{display:flex;justify-content:space-between;color:var(--mu);font-size:11px;font-variant-numeric:tabular-nums}
/* 상품 진열 › 경매 시세 보기 */
.mkd-opts{display:flex;gap:16px 40px;flex-wrap:wrap}
.mkd-opts>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mkd-opts small{flex-basis:100%;color:var(--mu);font-size:12px}
.mkd-table input[type=checkbox]{width:18px;height:18px}
.mkd-table input[type=number]{width:64px;text-align:right}
.mkd-table tr.is-on td{background:var(--pr2)}
/* 휴대폰: 표 대신 행마다 2줄 (체크 | 품목 · 거래금액 / 순서 · 거래량) — 가로 스크롤 없음 */
@media(max-width:700px){
  .mkd-table{min-width:0}
  .mkd-table thead{display:none}
  .mkd-table tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"chk name amt" "chk ord qty";align-items:center;gap:6px 12px;padding:10px 4px;border-bottom:1px solid var(--bd)}
  .mkd-table tr.is-on{background:var(--pr2)}
  .mkd-table tbody td{padding:0;border:0;background:none!important;white-space:normal}
  .mkd-table .c-chk{grid-area:chk;padding-left:6px}
  .mkd-table .c-name{grid-area:name;overflow-wrap:anywhere}
  .mkd-table .c-amt{grid-area:amt;font-weight:600}
  .mkd-table .c-ord{grid-area:ord;text-align:left}
  .mkd-table .c-ord::before{content:'순서 ';color:var(--mu);font-size:12px}
  .mkd-table .c-qty{grid-area:qty;color:var(--mu);font-size:12px}
  .mkd-table td.qa-empty{grid-column:1/-1}
}
/* 탭: 요약 · 품목별 · 전체 시세 */
.status-tabs.mk-tabs{align-items:center;margin:4px 0 14px}
/* 탭 · 검색 한 줄 (PC) — 휴대폰은 아래 @media 에서 display:contents 로 풀어 탭 아래 줄에 검색 */
/* 탭 · 검색 — 스크롤해도 상단 바(59px) 바로 아래에 고정 (PC · 휴대폰), 높이는 --mk-bar-h (market.html 스크립트) → 표 머리글이 그 아래 고정 */
.mk-tabbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 59px);z-index:14;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:4px -20px 14px;padding:10px 20px;background:var(--bg)}
.mk-tabbar .status-tabs.mk-tabs{flex:1 1 auto;margin:0}
.mk-tabbar .mk-search{flex:0 1 380px;margin:0}
.status-tabs.mk-tabs a{padding:8px 16px;font-size:14px}
.mk-tab-q{margin-left:auto;color:var(--mu);font-size:12px;white-space:nowrap}
@media(max-width:1100px){.mk-feat{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.mk-feat{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mk-feat-price{font-size:17px}}
/* 목록 — 상자 안 스크롤 없이 페이지와 함께 스크롤 (넓은 PC 는 머리글을 탭 · 검색 줄 아래에 고정) */
@media(min-width:701px){
  .mk-list{font-size:15px}
  .mk-list th{font-size:13px}
  .mk-list td{padding-top:12px;padding-bottom:12px}
  .mk-list td small{font-size:12px}
}
@media(min-width:1000px){
  .mk-scroll{overflow:visible}                       /* 가로 스크롤 상자가 아니어야 머리글이 페이지 기준으로 고정됨 */
  .mk-scroll thead th{position:sticky;top:calc(env(safe-area-inset-top,0px) + 59px + var(--mk-bar-h,0px));z-index:1;background:var(--card);box-shadow:inset 0 -1px var(--bd)}
}
.mk-report{margin-bottom:16px;border:1px solid var(--bd);border-radius:14px;background:var(--card);overflow:clip}
.mk-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 22px;background:#1f4a35;color:#fff}
.mk-head h3{margin:0;font-size:17px}
.mk-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:5px;background:#d6ecd9;color:#1f4a35;font-size:10px;font-weight:700;letter-spacing:.12em}
.mk-badge i{width:6px;height:6px;border-radius:50%;background:#7aa985}
.mk-when{margin-left:auto;color:#d6e5d9;font-size:13px}
.mk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--bd)}
.mk-stats>div{padding:12px 22px;border-right:1px solid var(--bd)}
.mk-stats>div:last-child{border-right:0}
.mk-stats small{display:block;color:var(--mu);font-size:12px}
.mk-stats b{margin-right:6px;font-size:17px;font-variant-numeric:tabular-nums}
.mk-stats span{font-size:12px}
.mk-table td small{display:block;color:var(--mu);font-size:11px}
.mk-table .num{text-align:right;font-variant-numeric:tabular-nums}
.mk-report .mk-table th:first-child,.mk-report .mk-table td:first-child{padding-left:22px}
.mk-report .mk-table th:last-child,.mk-report .mk-table td:last-child{padding-right:22px}
.mk-report .mk-table td{padding-top:12px;padding-bottom:12px}
.mk-up{color:var(--er);font-weight:600}
.mk-down{color:var(--pr);font-weight:600}
.mk-flat{color:var(--mu)}
.mk-note{margin:0;padding:12px 22px;color:var(--mu);font-size:12px}
@media(max-width:700px){
  .mk-head{padding:14px 16px}
  .mk-when{margin-left:0;width:100%}
  .mk-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-stats>div{padding:10px 16px}
  .mk-stats>div:nth-child(2n){border-right:0}
  .mk-stats>div:nth-child(-n+2){border-bottom:1px solid var(--bd)}
  .mk-report .mk-table th:first-child,.mk-report .mk-table td:first-child{padding-left:14px}
  .mk-note{padding:10px 14px}
  /* 모바일: 앱처럼 — 탭이 상단에 멈추고 아래는 목록 상자 없이 전체 목록이 페이지와 함께 스크롤 (검색 줄은 고정 해제)
     표는 행마다 2줄 목록으로: 1줄 이름 · 평균가 / 2줄 등급 · 최저~최고 · 거래량 · 금액 · 등락 (가로 스크롤 없음) */
  .mk-scroll{overflow:visible}
  .mk-list{min-width:0}
  .mk-list thead{display:none}
  .mk-list tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;padding:11px 14px;border-bottom:1px solid var(--bd)}
  .mk-list tbody tr::before{content:'';order:3;flex-basis:100%;height:0}
  .mk-list tbody td{padding:0!important;border:0;white-space:normal;text-align:left}
  .mk-list .c-name{order:1;flex:1 1 0;min-width:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
  .mk-list .c-name small{font-weight:400}
  .mk-list .c-avg{order:2;font-size:15px;font-weight:700}
  .mk-list .c-grade,.mk-list .c-var,.mk-list .c-range,.mk-list .c-qty,.mk-list .c-amt{order:4;color:var(--mu);font-size:12px}
  .mk-list .c-var::before{content:'품종·등급 '}
  .mk-list .c-qty::before{content:'거래량 '}
  .mk-list .c-chg{order:5;margin-left:auto;font-size:13px}
  .mk-list td.qa-empty{flex:1 1 100%;padding:20px 0!important;text-align:center}
  .card.mk-card{padding-left:0;padding-right:0;overflow:clip}
  .card.mk-card>.dash-card-head{padding:0 14px}
  .mk-tabbar{margin:0 -14px 12px;padding:8px 14px}
  .mk-tabbar .status-tabs.mk-tabs{flex:1 1 100%;flex-wrap:nowrap}
  .status-tabs.mk-tabs a{flex:1;justify-content:center;padding:8px 6px}
  .mk-tab-q{display:none}
  .mk-tabbar .mk-search{flex:1 1 100%}
}
@media print{
  body[data-page="market"] .top,body[data-page="market"] aside,body[data-page="market"] .to-top,body[data-page="market"] .page-head .btn,body[data-page="market"] .mk-bar,body[data-page="market"] .mk-search{display:none!important}
  body[data-page="market"] main{padding:0}
  body[data-page="market"] .mk-scroll{overflow:visible}
  body[data-page="market"] .mk-tabbar{position:static}
  body[data-page="market"] .mk-tabs{display:none}
  body[data-page="market"] .mk-panel[hidden]{display:block!important}
  body[data-page="market"] .mk-feat{grid-template-columns:repeat(6,minmax(0,1fr))}
  body[data-page="market"] .mk-head{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* 보고서 — 월간/주간 전환 탭 · 막대 · 인기 상품 · 인쇄 */
.rep-unit{margin:0;gap:4px}
.rep-unit a{padding:3px 10px;font-size:12px}
.rep-bars.is-week{gap:4px}
.rep-bars.is-week i span{font-size:10px}
.rep-top .num{text-align:right;font-variant-numeric:tabular-nums}
.rep-top .rep-name{white-space:normal;word-break:keep-all}
@media print{
  body[data-page="report"] .top,body[data-page="report"] aside,body[data-page="report"] .to-top,body[data-page="report"] .page-head form,body[data-page="report"] .rep-unit{display:none!important}
  body[data-page="report"] main{padding:0}
  body[data-page="report"] .g2{grid-template-columns:1fr}
  body[data-page="report"] .scroll-x{overflow:visible}
  body[data-page="report"] .rep-bars{min-width:0!important}
  body[data-page="report"] .card{break-inside:avoid}
}
.dash-notice-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.dash-notice-head h3{margin:0}
.dash-notice-head .link{font-size:12px;color:var(--mu)}
.dash-notice-item{border-top:1px solid var(--bd)}
.dash-notice-item summary{display:flex;align-items:center;gap:10px;padding:9px 2px;cursor:pointer;list-style:none}
.dash-notice-item summary::-webkit-details-marker{display:none}
.dash-notice-item summary::before{content:'›';color:var(--mu);transition:transform .15s}
.dash-notice-item[open] summary::before{transform:rotate(90deg)}
.dash-notice-title{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-notice-item time{flex:none;color:var(--mu);font-size:12px}
.dash-notice-item .notice-body{padding:4px 2px 12px 18px}
.dash-notice-item .notice-body img{max-height:360px}
/* 보기 방식 '일부만' — 앞부분만 (아래로 흐려짐) · 더 보기 로 전체 (admin.js [data-notice-more]) */
.notice-body.is-clip{max-height:8.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.notice-more{display:block;margin:-6px 0 10px 18px;padding:2px 0;border:0;background:none;color:var(--pr);font:inherit;font-size:12px;font-weight:600;cursor:pointer}

/* ---------- 10. 모바일 ---------- */
@media(max-width:900px){
  #sbtn{display:inline-flex}
  aside{position:fixed;left:-250px;top:0;bottom:0;z-index:30;transition:.2s;padding-top:60px;overflow-y:auto;overscroll-behavior:contain}
  /* 메뉴 패널을 펼친 동안 뒤 화면 스크롤 막기 (admin.js toggleSidebar) — 패널 안 스크롤은 패널에서 끝남 */
  html.sb-lock,html.sb-lock body{overflow:hidden}
  .sb-backdrop.on{touch-action:none;overscroll-behavior:contain}
  aside.on{left:0}
  .sb-backdrop.on{display:block;position:fixed;inset:0;z-index:25;background:rgb(0 0 0 / 40%)}
  .g2{grid-template-columns:1fr}
  main{padding:14px 14px calc(90px + env(safe-area-inset-bottom,0px))}   /* 아래 여백: 오른쪽 아래 채팅 버튼(54px + 18px)에 마지막 버튼 · 내용이 가리지 않게 */
  .sticky-bar{padding:8px 14px}
  .sticky-bar,.sticky-bar.filter-bar,.sticky-bar.status-tabs{margin:0 -14px 2px}   /* main padding 14px */
}
@media(max-width:480px){
  .form-row,.detail-card .form-row{grid-template-columns:96px minmax(0,1fr);gap:6px 8px}
  .detail-row{grid-template-columns:96px minmax(0,1fr);gap:8px}
  .dialog-content{padding:16px}
  /* 통계 카드: 1열로 길게 쌓이지 않도록 2열 고정 + 크기 축소 */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid>.card{margin-bottom:0}
  .grid+*{margin-top:12px}
  .card{padding:12px}
  .stat small{font-size:12px}
  .stat div{font-size:17px;line-height:1.3;margin-top:2px}
  .g2{gap:12px}
  .bars{gap:6px;height:130px}
  .qa-item{max-width:100%}
  .form-hint-indent{margin-left:0}
  table.table-fit th,table.table-fit td{padding:9px 6px}
  .prod-thumb{width:56px;height:56px}
  .top-user{display:none}
}
/* 카테고리 카드 이미지 (카테고리관리 dialog) */
.cat-img-field{width:140px}
.logo-img-field{width:min(260px,100%)}
.logo-img-field .img-field-pick{aspect-ratio:3/1}
/* 환경 설정 › 배송 권역 (settings.html) — 이름 · 지역 · 추가 배송비 · 삭제 (좁은 화면은 두 줄) */
.zone-row-wrap{align-items:start}
.zone-editor{display:flex;flex-direction:column;gap:8px;min-width:0}
.zone-editor>.btn{align-self:flex-start}
.zone-head,.zone-row{display:grid;grid-template-columns:140px minmax(0,1fr) 150px 32px;gap:8px;align-items:start}
.zone-head{color:var(--mu);font-size:12px}
.zone-row textarea{min-height:40px;resize:vertical}
.zone-row .input-unit input{width:100%}
@media(max-width:700px){
  .zone-head{display:none}
  .zone-row{grid-template-columns:minmax(0,1fr) 32px;padding-bottom:8px;border-bottom:1px dashed var(--bd)}
  .zone-row textarea,.zone-row .input-unit{grid-column:1}
  .zone-row [data-zone-del]{grid-column:2;grid-row:1}
}
/* 배송 관리 › QR 송장 출력 (shipping/labels.html) */
.lb-group th{padding-top:14px;background:var(--bg);text-align:left}
.lb-group label{display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer}
.lb-group .badge{margin-left:4px}
.lb-zone{display:block;color:var(--pr);font-size:12px;font-weight:600}
.lb-move{display:flex;align-items:center;gap:6px}
.lb-move select{width:auto;min-width:120px;padding:5px 8px}
.input-unit{display:flex;align-items:center;gap:6px}
.input-unit input{width:120px}
.input-unit input[type=time]{width:150px}                  /* '오후 03:00' + 시계 아이콘이 잘리지 않게 (환경 설정 › 출고 마감 시각) */
.input-unit span{color:var(--mu);font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lb-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:10px}
.lb-acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.lb-all{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--tx);font-weight:600;cursor:pointer}
.lb-chk input,.lb-all input{width:18px;height:18px;margin:0;cursor:pointer}
/* 목록 — 가로 스크롤 없이: 고정 폭 표 + 칸 안에서 줄바꿈 (받는 분 · 연락처 · 주소를 한 칸에) */
.lb-table{width:100%;table-layout:fixed}
.lb-table tbody tr{cursor:default}
.lb-table td{overflow-wrap:anywhere;word-break:keep-all;vertical-align:top}
.lb-table td small{display:block;color:var(--mu);font-size:12px}
.lb-chk{width:36px;text-align:center}
.lb-no{width:128px}
.lb-items{width:24%}
.lb-qr{width:64px;text-align:center}
/* 휴대폰: 표 대신 카드 한 줄 — [선택] 받는 분 / 주문 번호 · 배송 방법 / 주소(2줄) / 상품(1줄) [QR] */
@media(max-width:600px){
  .lb-bar .lb-acts{width:100%;margin-left:0}
  .lb-acts .btn{flex:1 1 0;min-width:0;padding-left:4px;padding-right:4px}
  .lb-move select{flex:1;min-width:0}
  .lb-table,.lb-table tbody{display:block}
  .lb-table thead{display:none}
  .lb-table tr.lb-group{display:block}
  .lb-table tr.lb-group th{display:flex;align-items:center;padding:12px 8px 8px}
  .lb-table tbody tr:not(.lb-group){display:grid;grid-template-columns:32px minmax(0,1fr) 44px;grid-template-areas:"chk to qr" "chk no qr" "chk items qr";
    column-gap:6px;padding:10px 6px;border-bottom:1px solid var(--bd)}
  .lb-table td{display:block;width:auto;padding:0;border:0}
  .lb-table td.lb-chk{grid-area:chk;padding-top:1px}
  .lb-chk input{width:22px;height:22px}
  .lb-table td.lb-to{grid-area:to}
  .lb-to b{font-size:15px}
  .lb-to small:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* 주소 */
  .lb-table td.lb-no{grid-area:no;display:flex;align-items:baseline;gap:6px;margin-top:2px;font-size:12px}
  .lb-table td.lb-no small{display:inline}
  .lb-table td.lb-items{grid-area:items;display:block;margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}
  .lb-table td.lb-items small.qa-count{display:inline}   /* 수량 — .order-table 의 휴대폰 숨김보다 우선 */
  .lb-table td.lb-qr{grid-area:qr;align-self:center;white-space:nowrap}
  .lb-qr .qa-count{font-size:11px}
}
/* 진열 추가 · 상품 선택 (product-picker.js) */
/* dialog 크기 고정 — 검색 결과 수 · '결과가 많습니다' 안내와 관계없이 같은 크기 (목록 높이 고정 + 안내 줄 자리 확보).
   휴대폰 · 태블릿은 상품을 고른 화면도 같은 크기: 열 때 검색 화면 높이로 틀을 고정 (product-picker.js lockHeight, PC 는 내용에 맞춤) */
dialog.admin-dialog.pick-dialog{--pick-list-h:min(46vh,380px);width:min(560px,calc(100vw - 32px))}
.pick{display:flex;flex-direction:column;gap:8px;min-width:0}
.pick-search{display:flex;flex-direction:column;gap:8px}
.pick-search[hidden]{display:none}
.pick-bar{display:flex;gap:6px}
.pick-bar select{flex:0 0 40%;min-width:0}
.pick-bar input{flex:1;min-width:0}
.pick-list{height:var(--pick-list-h);overflow:auto;overscroll-behavior:contain;margin:0;padding:4px;list-style:none;border:1px solid var(--bd);border-radius:8px;background:var(--bg)}
.pick-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:6px;border:1px solid transparent;border-radius:8px;background:none;color:var(--tx);font:inherit;text-align:left;cursor:pointer}
.pick-item:hover:not(:disabled),.pick-item:focus-visible{background:var(--card);border-color:var(--pr)}
.pick-item[aria-selected=true]{background:var(--pr2);border-color:var(--pr)}
.pick-item:disabled{opacity:.5;cursor:not-allowed}
.pick-thumb{display:grid;place-items:center;width:48px;height:48px;flex:none;overflow:hidden;border-radius:8px;border:1px solid var(--bd);background:var(--card);font-size:22px}
.pick-thumb img{width:100%;height:100%;object-fit:cover}
.pick-info{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.pick-info b,.pick-info small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-info small{color:var(--mu);font-size:12px}
.pick-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.pick-price{font-weight:600;font-size:13px;white-space:nowrap}
.pick-msg{padding:20px 10px;text-align:center;color:var(--mu);font-size:13px}
.pick-more{min-height:18px;margin:0;color:var(--mu);font-size:12px;line-height:18px}
.pick-more[hidden]{display:block;visibility:hidden}          /* 안 보여도 자리는 차지 */
.pick-selected{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border:1px solid var(--pr);border-radius:8px;background:var(--pr2)}
.pick-selected .pick-thumb{width:56px;height:56px}
/* 추천 상품 목록: 추천 메시지 (여러 줄 · 긴 글) */
.banner-thumb img{display:block;width:72px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--bd)}
.banner-img-field{max-width:150px}
.display-msg{max-width:280px;white-space:pre-line;color:var(--mu);font-size:13px}
/* 카테고리별 마진: 계산 미리보기 · 상품 dialog 판매가 안내 */
.margin-try{display:flex;align-items:center;gap:8px}
.margin-try input{width:140px}
.margin-try b{font-size:16px;color:var(--pr)}
.margin-hint[data-kind=auto]{color:var(--ok)}
.margin-hint[data-kind=manual]{color:var(--wa)}
/* 보기 전용 폼 묶음 (환경 설정 — 최고운영자) */
.plain-fieldset{margin:0;padding:0;border:0;min-width:0}
.plain-fieldset:disabled input,.plain-fieldset:disabled select{opacity:.7;cursor:not-allowed}
/* 입력창 + 버튼 한 줄 (상품 판매가 'A' 마진 자동 계산) — 휴대폰에서도 줄바꿈 없음 */
.input-with-btn{display:flex;align-items:stretch;gap:6px;min-width:0}
.input-with-btn input{flex:1;min-width:0}
.input-with-btn .btn{flex:none}
.margin-auto-btn{width:42px;padding:0;font-weight:800;font-size:15px}
.margin-auto-btn:disabled{opacity:.35;cursor:not-allowed;filter:none}

/* ---------- 배송 관리 › 주문 상품 수집 ---------- */
.cnt-pill{display:inline-block;min-width:20px;padding:0 6px;margin-left:2px;border-radius:99px;background:#fff;color:var(--pr);font-size:12px;font-weight:700;line-height:20px;text-align:center}
/* 요약 카드 4개: 한 줄로 · 스크롤해도 상단 바(.top, 약 60px) 아래에 고정. 배경을 깔아 아래 내용이 비치지 않게 */
.grid.collect-stats{position:sticky;top:calc(env(safe-area-inset-top,0px) + 59px);z-index:15;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 -20px 16px;padding:10px 20px;background:var(--bg)}
.collect-stats>.card{margin:0}
.stat.is-ok div{color:var(--ok)}
.stat-bar,.oc-progress{height:6px;margin-top:8px;border-radius:3px;background:var(--bg);overflow:hidden}
.stat-bar i,.oc-progress i{display:block;height:100%;border-radius:3px;background:var(--ok);transition:width .3s}
.collect-card{margin-bottom:16px}
.collect-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.collect-bar h3{margin:0;flex:1}
.collect-sort select{width:auto}
.switch-label{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--tx);font-size:13px;cursor:pointer}
/* 상품별 블록: 왼쪽 상품 · 필요 수량 / 오른쪽 주문자별 수량 · 확인 */
.cg-list{display:flex;flex-direction:column;gap:12px}
.cg{display:grid;grid-template-columns:270px minmax(0,1fr);border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:var(--card)}
.cg.is-done{border-color:color-mix(in srgb,var(--ok) 45%,var(--bd))}
.cg-prod{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--bg);border-right:1px solid var(--bd)}
.cg-thumb{width:64px;height:64px;flex:none;border-radius:10px;object-fit:cover;border:1px solid var(--bd);background:var(--card)}
.cg-thumb.is-empty{display:grid;place-items:center;font-size:28px}
.cg-thumb-link{position:relative;display:block;flex:none;border-radius:10px}
.cg-thumb-link:hover .cg-thumb{border-color:var(--pr)}
.cg-zoom{position:absolute;right:3px;bottom:3px;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:rgb(0 0 0 / 55%);color:#fff;font-size:12px;line-height:1}
.stat-link{display:block;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.stat-link:hover{border-color:var(--pr);transform:translateY(-1px)}
.stat-go{display:block;margin-top:4px;color:var(--pr);font-size:12px}
#ordersComplete,#ordersIncomplete{scroll-margin-top:190px}
.cg-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.cg-name{font-size:15px;line-height:1.3;white-space:normal}
.cg-need{display:flex;align-items:baseline;gap:4px}
.cg-need small{margin-right:4px;color:var(--mu);font-size:12px}
.cg-need strong{font-size:20px;line-height:1;color:var(--pr);font-variant-numeric:tabular-nums}
.cg-need strong.bump{animation:needBump .45s}
@keyframes needBump{30%{transform:scale(1.25)}}
.cg.is-done .cg-need strong{color:var(--ok)}
.cg.is-done .cg-need strong::after{content:' ✓';font-size:18px}
.cg-total{color:var(--mu);font-size:12px}
.cg-rows{margin:0;padding:0;list-style:none}
.ci{display:grid;grid-template-columns:minmax(0,1fr) 72px 120px;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bd)}
.ci:last-child{border-bottom:0}
.ci-who{display:flex;align-items:baseline;gap:6px;min-width:0;padding:2px 0;border:0;background:none;color:var(--tx);font:inherit;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden}
.ci-who b{text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .15s}
.ci-who:hover b{color:var(--pr);text-decoration-color:var(--pr)}
.ci-who b{flex:none}
.ci-who small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--mu);font-size:12px}
.ci-qty{text-align:right;white-space:nowrap}
.ci-qty b{font-size:17px}
.ci-state{display:flex;align-items:center;justify-content:center;gap:6px}
.ci.is-done{background:color-mix(in srgb,var(--ok) 5%,var(--card))}
.ci.is-done .ci-who b,.ci.is-done .ci-qty{color:var(--mu)}
.ci.is-done .ci-qty b{text-decoration:line-through}
.ci-check{min-width:64px}
.ci-undo{font-size:12px;color:var(--mu)}
.cg-list.hide-done .ci.is-done,.cg-list.hide-done .cg.is-done{display:none}
.oc-no.link-btn{color:var(--tx);font-weight:700;text-decoration:none}
.oc-no.link-btn:hover{color:var(--pr);text-decoration:underline}
/* 주문내역 dialog */
dialog.order-view-dialog{width:min(520px,calc(100vw - 32px))}
.ov-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ov-no{font-size:16px;font-variant-numeric:tabular-nums}
.ov-head time{margin-left:auto;color:var(--mu);font-size:12px}
.ov-who{margin:8px 0 14px;line-height:1.6}
.ov h4{margin:14px 0 8px;font-size:13px}
.ov-items{margin:0;padding:0;list-style:none;border:1px solid var(--bd);border-radius:8px}
.ov-items li{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--bd);font-size:13px}
.ov-items li:last-child{border-bottom:0}
.ov-items img,.ov-ph{width:36px;height:36px;border-radius:6px;object-fit:cover;display:grid;place-items:center;background:var(--bg);font-size:18px}
.ov-items li.is-done .ov-name{color:var(--mu)}
.ov-total{margin:8px 0 0;text-align:right;font-size:13px}
.ov-total b{font-size:15px}
.ov-kv{display:grid;grid-template-columns:80px 1fr;gap:6px 10px;margin:0;font-size:13px}
.ov-kv dt{color:var(--mu)}
.ov-kv dd{margin:0}
.collect-alldone{margin:10px 0 0}
/* 완성 · 미완성 주문서 */
.collect-orders{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.oc-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.oc-list-head h3{margin:0}
.oc-list-head form{margin:0}
.oc-cards{display:flex;flex-direction:column;gap:10px}
.oc-empty{display:none;margin:0;padding:20px 10px;text-align:center;color:var(--mu);font-size:13px}
.oc-list:not(:has(.oc)) .oc-empty{display:block}
.oc{padding:12px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--bg)}
#ordersComplete .oc{border-color:color-mix(in srgb,var(--ok) 45%,var(--bd))}
.oc.flash{animation:ocFlash 1s}
@keyframes ocFlash{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 45%,transparent)}100%{box-shadow:none}}
.oc-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.oc-no{font-variant-numeric:tabular-nums}
.oc-who{flex:1}
.oc-who small{color:var(--mu)}
.oc-head time{color:var(--mu);font-size:12px}
.oc-count{margin:6px 0 4px;color:var(--mu);font-size:12px}
.oc-items{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;padding:0;list-style:none}
.oc-items li{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--bd);border-radius:99px;background:var(--card);font-size:12px}
.oc-items li b{font-weight:600}
.oc-mark{width:12px;height:12px;border:1.5px solid var(--bd);border-radius:50%}
.oc-items li.is-done{border-color:color-mix(in srgb,var(--ok) 40%,var(--bd));color:var(--mu)}
.oc-items li.is-done .oc-mark{border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center/100% no-repeat}
.oc-ready{display:flex;justify-content:flex-end;margin:8px 0 0}
#ordersIncomplete .oc-ready{display:none}
@media(max-width:900px){
  .collect-orders{grid-template-columns:1fr}
  .grid.collect-stats{margin:0 -14px 16px;padding:10px 14px}   /* main padding 14px */
}
/* 휴대폰: 상품(필요 수량)을 위에, 주문자별 행을 아래에 */
@media(max-width:700px){
  /* 요약 카드: 휴대폰 폭에서도 한 줄 — 작게 */
  .grid.collect-stats{gap:6px;margin-bottom:12px;padding:8px 14px}
  .collect-stats>.card{padding:8px 6px;text-align:center}
  .collect-stats .stat small{display:block;font-size:11px;line-height:1.3;letter-spacing:-.02em;word-break:keep-all}
  .collect-stats .stat div{font-size:15px;line-height:1.3;margin-top:2px}
  .collect-stats .stat-go{display:none}
  .collect-stats .stat-bar{height:4px;margin-top:4px}
  .collect-stats+*{margin-top:0}
  #ordersComplete,#ordersIncomplete{scroll-margin-top:150px}
  .collect-bar h3{flex-basis:100%}
  .cg{grid-template-columns:1fr}
  .cg-prod{align-items:center;border-right:0;border-bottom:1px solid var(--bd)}
  .cg-thumb{width:52px;height:52px}
  .cg-info{flex:1}
  .ci{grid-template-columns:minmax(0,1fr) auto auto;padding:10px 12px}
  .ci-state{min-width:84px;justify-content:flex-end}
}

/* ---------- 회원관리 › 승인 대기 · 가입 승인 폼 (members/pending.html · _approve.html) ---------- */
.pend-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));align-items:start}
.pend{display:flex;flex-direction:column;gap:12px;margin:0}
.pend-head{display:flex;align-items:center;gap:10px}
.pend-head .avatar{width:40px;height:40px;font-size:17px;flex:none}
.pend-who{flex:1;min-width:0}
.pend-who small{display:block;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pend-head time{flex:none;color:var(--mu);font-size:12px}
.pend-info{display:grid;grid-template-columns:84px minmax(0,1fr);gap:6px 10px;margin:0;font-size:13px}
.pend-info dt{color:var(--mu)}
.pend-info dd{margin:0;overflow-wrap:anywhere}
.pend-info .photo-empty{color:var(--mu)}
.pend-license{margin:0}
.pend-license img{display:block;width:160px;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--bd)}
p.qa-empty{margin:0;padding:20px 0;text-align:center;color:var(--mu)}
.approve-form{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:0;padding-top:10px;border-top:1px solid var(--bd)}
.approve-check{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--tx);font-size:13px;cursor:pointer}
.approve-form .btn{margin-left:auto}
.approve-alert .approve-form{padding-top:0;border-top:0}

/* ---------- 배송 관리 › 주문 상품 사입 (공급업체별 구매 목록) ---------- */
.pu-actions{display:flex;gap:8px;flex-wrap:wrap}
.pu-actions form{margin:0}
.cnt-pill.next{background:color-mix(in srgb,var(--wa) 22%,var(--card));color:var(--tx)}
/* 주문접수 가져오기 — 다음 출고일 주문 안내 dialog */
dialog.collect-next-dialog{width:min(520px,calc(100vw - 32px))}
.cn-counts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.cn-counts div{padding:10px 12px;border:1px solid var(--bd);border-radius:8px}
.cn-counts .is-next{border-color:var(--wa);background:color-mix(in srgb,var(--wa) 8%,var(--card))}
.cn-counts dt{color:var(--mu);font-size:12px}
.cn-counts dd{margin:2px 0 0;font-size:14px}
.cn-counts b{font-size:20px;font-variant-numeric:tabular-nums}
.cn-lead{margin:0 0 6px}
.cn-notes{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--tx);font-size:13px;line-height:1.55}
.collect-next-dialog .dialog-actions{flex-wrap:wrap}
.pu-card{padding:0;overflow:hidden}
.pu-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--bd)}
.pu-sup{flex:1;min-width:0}
.pu-sup h3{margin:0}
.pu-sup small{color:var(--mu);font-size:12px}
.pu-sum{margin:0;color:var(--mu);font-size:13px}
.pu-sum b{color:var(--tx)}
.pu-table .num{text-align:right;font-variant-numeric:tabular-nums}
.pu-table .prod-thumb{width:48px;height:48px}
.pu-table .prod-thumb.is-empty{font-size:22px}
.pu-qty{font-size:16px;color:var(--pr)}
.pu-table tbody tr:last-child td{border-bottom:0}
/* 만든 사입 목록 표 · 사입 대상 머리말 (purchase.html) */
.pu-lists{margin-bottom:20px}
.pu-lists h3{margin:0 0 10px}
.pu-lists-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.pu-lists-head h3{flex:1;margin:0}
.pl-no{font-weight:700}
/* 사입 목록 행 펼치기 — 행 전체를 누를 수 있음 (purchase.js) */
.pl-main{cursor:pointer}
.pl-main:hover td{background:color-mix(in srgb,var(--pr) 4%,var(--card))}
.pl-main.is-open td{background:var(--pr2);border-bottom-color:transparent}
.pl-open{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--pr);font:inherit;cursor:pointer}
.pl-caret{display:inline-block;width:12px;transition:transform .15s}
.pl-open[aria-expanded=true] .pl-caret{transform:rotate(90deg)}
.pl-body>td{padding:10px 14px 14px;background:var(--bg);white-space:normal}
.pl-sup+.pl-sup{margin-top:10px}
.pl-sup-head{margin:0 0 6px}
.pl-sup-head small{color:var(--mu);font-size:12px}
.pl-items{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pl-items li{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--bd);border-radius:99px;background:var(--card);font-size:12px}
.pl-items li small{color:var(--mu)}
.pl-items li.is-done{border-color:color-mix(in srgb,var(--ok) 40%,var(--bd));color:var(--mu)}
.pl-items li.is-done .oc-mark{border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center/100% no-repeat}
.pl-body-act{margin:12px 0 0;text-align:right}
.pl-sub{display:block;color:var(--mu);font-size:12px}
.pl-table tr.is-done .pl-no{color:var(--mu)}
/* 오늘 만든 사입 목록 — 초록 바탕 · 왼쪽 띠 · '오늘' 표시 */
.pl-main.is-today:not(.is-open):not(:hover) td{background:color-mix(in srgb,var(--ok) 8%,var(--card))}
.pl-main.is-today td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.pl-today{display:inline-block;padding:0 6px;border-radius:99px;background:var(--ok);color:#fff;font-size:11px;font-weight:700;line-height:1.6}
.pl-prog{min-width:110px}
.pl-prog-num{font-size:12px;font-variant-numeric:tabular-nums}
.pl-prog .stat-bar{display:block;margin-top:4px}
.pu-target-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.pu-target-head h3{flex:1;margin:0}
.pu-target-head h3 small{margin-left:6px;color:var(--mu);font-size:13px;font-weight:400}
.pu-create{display:flex;gap:6px;margin:0}
.pu-create input{width:200px}
/* 사입 목록 화면 — 항목별 확인 (purchase_list.html · purchase.js) */
.pl-groups .pu-card.is-done{border-color:color-mix(in srgb,var(--ok) 45%,var(--bd))}
.pl-row.is-done{background:color-mix(in srgb,var(--ok) 5%,var(--card))}
.pl-row.is-done .prod-name b,.pl-row.is-done .pu-qty{color:var(--mu);text-decoration:line-through}
.pl-state-h{text-align:center}
.pl-state .ci-state{min-width:96px}
.pl-groups.hide-done .pl-row.is-done,.pl-groups.hide-done .pu-card.is-done{display:none}
@media(max-width:600px){
  .pu-create{flex-basis:100%}
  .pu-create input{flex:1;width:auto;min-width:0}
  .pl-state .ci-state{min-width:0;justify-content:flex-end}
}
@media(max-width:600px){
  .pu-head{padding:10px 12px}
  .pu-sum{flex-basis:100%;order:3}
  .pu-table .m-hide{display:none}
  .pu-table th,.pu-table td{padding-left:6px;padding-right:6px}
  .pu-table td{white-space:normal;word-break:keep-all}
  .pu-table .prod-cell{gap:8px}
  .pu-table .prod-thumb{width:40px;height:40px}
}

/* ---------- 예치금 관리 ---------- */
.dp-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.dp-main,.dp-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.dp-main .card,.dp-side .card{margin:0}
.dp-balance small{color:var(--mu)}
.dp-balance strong{display:block;margin:2px 0 6px;font-size:28px;font-variant-numeric:tabular-nums}
.dp-balance .od-warn{margin-top:4px}
.dp-table .num{text-align:right;font-variant-numeric:tabular-nums}
.dp-plus{color:var(--ok)}
.dp-minus{color:var(--er)}
.dp-note{white-space:normal;min-width:160px}
/* 예치금 조회 — 탭(예치금 회원 · 로그) · 검색칸 + 세그먼트 한 줄 · 가로 스크롤 없는 목록 */
.status-tabs.dp-tabs a{padding:8px 18px;font-size:14px}
.dp-filter .seg-links{flex:none}
.dm-table td.dm-co{max-width:240px;overflow:hidden;text-overflow:ellipsis}
.dl-table td.dl-at small,.dl-table .dl-co,.dl-table .dl-bal-in{display:block;color:var(--mu);font-size:12px;font-weight:400}
.dl-table td.dl-who{max-width:200px;overflow:hidden;text-overflow:ellipsis}
.dl-table .dl-co{overflow:hidden;text-overflow:ellipsis}
.dl-table .dl-bal-in{display:none}
.dl-table td.dp-note{width:100%;min-width:0}
@media(max-width:1100px){
  .dl-table th.dl-bal,.dl-table td.dl-bal{display:none}       /* 잔액은 금액 아래로 */
  .dl-table .dl-bal-in{display:block}
  .dl-table th,.dl-table td{padding-left:6px;padding-right:6px}
  .dl-table td.dl-who{max-width:140px}
  .dm-table th,.dm-table td{padding-left:6px;padding-right:6px}
  .dm-table td.dm-co{max-width:160px}
}
@media(max-width:900px){
  .dp-filter input[type=search]{flex:1 1 0;min-width:0;max-width:none}
  .dp-filter .seg-links a span{padding:6px 10px}
  .dp-filter .seg-n{display:none}
}
@media(max-width:600px){
  .status-tabs.dp-tabs{margin:12px 0 4px}
  .status-tabs.dp-tabs a{flex:1;justify-content:center}
  .dp-filter .btn{display:none}                               /* 검색은 Enter — 한 줄에 검색칸 · 세그먼트만 */
  .dm-table td,.dl-table td{white-space:normal;word-break:keep-all}
  .dm-table td.num,.dl-table td.num{white-space:nowrap}
  .dl-table td.dl-who,.dm-table td:first-child{max-width:none;overflow:visible;overflow-wrap:anywhere}   /* 띄어쓰기 없는 긴 업체명도 줄바꿈 */
  .dl-table .dl-co{white-space:normal}
  .dl-table .dl-note-m{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}   /* 내용 2줄까지 */
  .dl-table td.dl-who .m-only .badge{font-size:11px;padding:1px 6px}
  .dl-table td.dl-at{font-size:12px}
}
@media(max-width:380px){.dp-filter .seg-links a span{padding:6px 7px;font-size:12.5px}}
/* 회원 예치금 내역 (deposits/member.html) — .dl-table 칸 규칙을 함께 씀, 가로 스크롤 없음
   PC: 일시(날짜/시각 두 줄) · 구분 · 금액 · 잔액 · 내용(남는 폭, 줄바꿈) / 좁은 화면: 잔액은 금액 아래 / 휴대폰: 내용 · 처리자는 구분 아래 */
.dt-table .dt-th-m,.dt-table .dt-th-bal{display:none}
.dt-table td.dl-at{width:1%}
.dt-table td.dp-note{word-break:keep-all;overflow-wrap:anywhere}
.dt-table td.dp-note .dt-who{display:block;color:var(--mu);font-size:12px}
@media(max-width:1100px){.dt-table .dt-th-bal{display:inline}}
@media(max-width:600px){
  .dt-table .dt-th-m{display:inline}
  .dt-table td.dt-kind{width:100%}
  .dt-table td.dt-kind .m-only{margin-top:3px;font-size:12px;color:var(--tx)}
  .dt-table td.dt-kind .dt-who{display:block;margin-top:1px;color:var(--mu);font-size:11px}
  .dt-table td.dt-kind .dl-note-m{overflow-wrap:anywhere}
}
/* 미수금 조회 — 가로 스크롤 없이: 최근 차감 칸이 남는 폭을 쓰고 넘치면 말줄임 · 휴대폰은 회원 칸 안에 */
.rv-table td.rv-who{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.rv-table .rv-co,.rv-table td.rv-note small{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--mu);font-size:12px;font-weight:400}
.rv-table td.rv-note{width:100%;max-width:0;overflow:hidden;text-overflow:ellipsis}
.rv-table .rv-act{width:1%;text-align:right}
.rv-filter input[type=search]{flex:1 1 auto}
@media(max-width:1100px){
  .rv-table th,.rv-table td{padding-left:6px;padding-right:6px}
  .rv-table td.rv-who{max-width:150px}
}
@media(max-width:600px){
  .rv-table td{white-space:normal;word-break:keep-all}
  .rv-table td.rv-who{max-width:none;overflow:visible;overflow-wrap:anywhere}
  .rv-table .rv-co{white-space:normal}
  .rv-table td .rv-last{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rv-table td.num,.rv-table td.rv-act{white-space:nowrap}
}
/* 미수금 청구서 */
.rv-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
.rv-title{font-size:18px}
.rv-total dd b{color:var(--er);font-size:20px}
.rv-sub{margin:18px 0 6px;font-size:14px}
.rv-tx td small{display:block;color:var(--mu);font-size:12px}
.rv-tx td.rv-txt{width:100%;white-space:normal}
.rv-foot{margin:14px 0 0;color:var(--mu);font-size:12px}
.rv-send textarea{width:100%;font-size:13px;line-height:1.6;resize:vertical}
.rv-waiting{border:1px solid var(--wa)}
.rv-wlist{margin:0;padding:0;list-style:none}
.rv-wlist li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--bd)}
.rv-wlist li small{display:block}
.rv-wlist form{margin:0}
.rv-table td.num small{display:block;margin-top:3px}
.rv-btns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.rv-btns form{margin:0}
.rv-btns small{font-weight:400}
@media(max-width:900px){.rv-grid{grid-template-columns:1fr}}
@media print{
  body[data-page="receivables"] .top,body[data-page="receivables"] aside,body[data-page="receivables"] .to-top,body[data-page="receivables"] .page-head,
  body[data-page="receivables"] .rv-send,body[data-page="receivables"] .rv-waiting,body[data-page="receivables"] .m-nav,body[data-page="receivables"] .alert,body[data-page="receivables"] #fab,body[data-page="receivables"] #chat{display:none!important}
  body[data-page="receivables"] main{padding:0}
  body[data-page="receivables"] .rv-grid{display:block}
  body[data-page="receivables"] .rv-invoice{border:0}
}
.rf-account small,.rf-act small{display:block;color:var(--mu);font-size:12px}
.rf-account,.rf-act{white-space:normal}
.rf-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rf-form input{flex:1;min-width:140px;width:auto}
/* 입금 확인 › 입금 내역 · 앱 연동 설정 (admin/bank_deposits) */
.bd-table td small{display:block;color:var(--mu);font-size:12px}
.bd-act{white-space:normal;min-width:260px}
.bd-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.bd-form select,.bd-form input{flex:1;min-width:160px;width:auto}
.bd-note{color:var(--wa)!important}
/* 입금 내역 › 회원 찾아 예치금 입금 dialog (bank-deposits.js) — 상품 선택 dialog(pick-*) 모양 */
.bm-dep{margin:0 0 10px;padding:10px 12px;border-radius:8px;background:var(--bg)}
.bm-bar input{flex:1;min-width:0}
.bm-chips{display:flex;flex-wrap:wrap;gap:6px}
.bm-chips .chip{cursor:pointer;gap:4px}
.bm-chips .chip:hover{border-color:var(--pr)}
.bm-list{margin-top:8px}
.bm-item{grid-template-columns:minmax(0,1fr) auto}
.bm-why{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.bm-why .badge{font-size:11px;padding:1px 6px}
.bm-bal{font-size:13px;font-weight:600;white-space:nowrap}
.bd-find{margin-top:6px}
@media(max-width:600px){dialog.admin-dialog.bm-dialog{width:calc(100vw - 16px)}}
/* 입금 내역 — 휴대폰 · 좁은 태블릿: 표 대신 카드 [입금자 · 금액] / [입금 시각 · 상태] / [처리 (주문 · 미수금 회원 · 무시)] — 가로 스크롤 없이 */
@media(max-width:700px){
  .bd-table,.bd-table tbody{display:block}
  .bd-table thead{display:none}
  .bd-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who amt" "at st" "act act";gap:4px 10px;padding:12px 2px;border-bottom:1px solid var(--bd)}
  .bd-table td{display:block;padding:0;border:0;min-width:0;white-space:normal}
  .bd-table td.bd-who{grid-area:who;overflow-wrap:anywhere}
  .bd-table td.bd-amt{grid-area:amt;align-self:start}
  .bd-table td.bd-at{grid-area:at;color:var(--mu);font-size:12px}
  .bd-table td.bd-at small{display:inline;margin-left:4px}
  .bd-table td.bd-st{grid-area:st;justify-self:end}
  .bd-table td.bd-act{grid-area:act;min-width:0}
  .bd-table td.qa-empty{grid-column:1/-1}
  .bd-form select,.bd-form .select-btn,.bd-form input{min-width:0;flex:1 1 100%}
}
.bd-msg summary{cursor:pointer;color:var(--mu);font-size:12px}
.bd-off{color:var(--er)}
.bd-token{border:1px solid var(--wa)}
.bd-qr{width:min(240px,100%);margin:0 auto 12px;border:1px solid var(--bd)}
.bd-copy{display:flex;gap:6px}
.bd-copy input{flex:1;font-family:ui-monospace,Consolas,monospace}
/* 회원관리 › 회원 목록 (admin/members) — 휴대폰: 표 대신 행마다 3줄 (이름 · 상태 / 아이디 · 핸드폰 / 이메일 · 최근 로그인), 가로 스크롤 없음 */
@media(max-width:700px){
  .mem-table{min-width:0}
  .mem-table thead{display:none}
  .mem-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name stat" "id mob" "mail login";gap:3px 12px;padding:11px 4px;border-bottom:1px solid var(--bd)}
  .mem-table tbody td{padding:0;border:0;white-space:normal;min-width:0}
  .mem-table .c-name{grid-area:name;font-size:15px}
  .mem-table .c-stat{grid-area:stat;justify-self:end}
  .mem-table .c-id{grid-area:id;font-size:13px}
  .mem-table .c-mob{grid-area:mob;justify-self:end;font-size:13px;white-space:nowrap}
  .mem-table .c-mail{grid-area:mail;color:var(--mu);font-size:12px;overflow-wrap:anywhere}
  .mem-table .c-login{grid-area:login;justify-self:end;color:var(--mu);font-size:12px;white-space:nowrap}
  .mem-table td.qa-empty{grid-column:1/-1}
}
/* 공급업체 관리 (admin/suppliers) — 휴대폰: 행마다 상호 · 상태 / 담당자 · 공급 상품 / 연락처 · 핸드폰 / 이메일, 가로 스크롤 없음 */
@media(max-width:700px){
  .sup-table{min-width:0}
  .sup-table thead{display:none}
  .sup-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name stat" "contact cnt" "phone mob" "mail mail";gap:3px 12px;padding:11px 4px;border-bottom:1px solid var(--bd)}
  .sup-table tbody td{padding:0;border:0;white-space:normal;min-width:0}
  .sup-table .c-name{grid-area:name;font-size:15px;overflow-wrap:anywhere}
  .sup-table .c-stat{grid-area:stat;justify-self:end}
  .sup-table .c-contact{grid-area:contact;font-size:13px}
  .sup-table .c-cnt{grid-area:cnt;justify-self:end;font-size:13px}
  .sup-table .c-cnt::before{content:'공급 상품 ';color:var(--mu);font-size:12px}
  .sup-table .c-phone{grid-area:phone;font-size:13px}
  .sup-table .c-mob{grid-area:mob;justify-self:end;font-size:13px;white-space:nowrap}
  .sup-table .c-mail{grid-area:mail;color:var(--mu);font-size:12px;overflow-wrap:anywhere}
  .sup-table .c-phone:empty,.sup-table .c-mail:empty{display:none}
  .sup-table td.qa-empty{grid-column:1/-1}
}
/* 상품 진열 (MAIN 진열 · 배너 · 추천 · 베스트 — admin/display/list.html) — 휴대폰: 행마다
   [순서] [사진 | 상품명 / 카테고리 · 판매가 · 판매량 · 라벨 / “문구”] [진열 / 해제]  + 배너 이미지(있을 때) — 가로 스크롤 없음
   카테고리 · 판매가 등 따로 된 칸은 숨기고 상품명 아래 .dsp-meta · .dsp-msg 로 */
.dsp-table .m-only{display:none}
@media(max-width:700px){
  .dsp-table{min-width:0}
  .dsp-table thead{display:none}
  .dsp-table tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ord prod vis" "ord prod act" "ord img img";align-items:center;gap:4px 10px;padding:12px 2px;border-bottom:1px solid var(--bd)}
  .dsp-table tbody td{padding:0;border:0;white-space:normal;min-width:0}
  .dsp-table .c-cat,.dsp-table .c-price,.dsp-table .c-sales,.dsp-table .c-label,.dsp-table .c-msg{display:none}
  .dsp-table .c-ord{grid-area:ord;min-width:22px;color:var(--mu);font-size:13px;font-weight:700;text-align:center}
  .dsp-table .c-prod{grid-area:prod}
  .dsp-table .c-prod .prod-cell{display:flex;align-items:center;gap:10px}
  .dsp-table .c-prod .prod-thumb{flex:none;width:52px;height:52px}
  .dsp-table .c-prod .prod-name{min-width:0;gap:2px;overflow-wrap:anywhere}
  .dsp-table .c-prod .prod-name>b{font-size:14px}
  .dsp-table .m-only{display:block}
  .dsp-table .dsp-meta{color:var(--mu);font-size:12px}
  .dsp-table .dsp-meta b{color:var(--tx);font-weight:600}
  .dsp-table .dsp-meta .badge{padding:1px 6px;font-size:10.5px}
  .dsp-table .dsp-msg{color:var(--mu);font-size:12px;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .dsp-table .c-vis{grid-area:vis;justify-self:end;align-self:end}
  .dsp-table .c-act{grid-area:act;justify-self:end;align-self:start}
  .dsp-table .c-act .btn.dan{padding:2px 8px;border-color:color-mix(in srgb,var(--er) 45%,var(--bd));background:none;color:var(--er);font-size:11.5px}   /* 진열 해제: 테두리만 (가볍게) */
  .dsp-table .c-img{grid-area:img}
  .dsp-table .c-img:has(> small.muted){display:none}                 /* 배너 이미지 없음(상품 이미지 사용)은 줄 숨김 */
  .dsp-table .c-img .banner-thumb img{width:100%;max-width:220px;height:auto;aspect-ratio:3/2}
  .dsp-table td.qa-empty{grid-column:1/-1;padding:20px 0;text-align:center}
}
/* 휴대폰 목록 공통 — 표 대신 행마다 몇 줄 (flex 줄바꿈), 가로 스크롤 없음: 공지사항 · QnA · 카테고리별 마진 · 회원 상세 최근 주문 */
@media(max-width:700px){
  .notice-table,.qa-table,.mg-table,.mo-table{min-width:0}
  .notice-table thead,.qa-table thead,.mg-table thead,.mo-table thead{display:none}
  .notice-table tbody tr,.qa-table tbody tr,.mg-table tbody tr,.mo-table tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:11px 4px;border-bottom:1px solid var(--bd)}
  .notice-table tbody tr::before,.qa-table tbody tr::before,.mg-table tbody tr::before,.mo-table tbody tr::before{content:'';order:3;flex-basis:100%;height:0}
  .notice-table tbody td,.qa-table tbody td,.mg-table tbody td,.mo-table tbody td{padding:0;border:0;white-space:normal;min-width:0;text-align:left}
  .notice-table td.qa-empty,.qa-table td.qa-empty,.mg-table td.qa-empty,.mo-table td.qa-empty{flex-basis:100%;padding:20px 0;text-align:center}
  /* 회원 상세 › 최근 7일 주문: 주문번호 · 상태 / 주문일시 · 결제금액 */
  .mo-table .c-no{order:1;flex:1 1 0;overflow-wrap:anywhere}
  .mo-table .c-stat{order:2}
  .mo-table .c-date{order:4;color:var(--mu);font-size:12px}
  .mo-table .c-amt{order:5;margin-left:auto;font-weight:600}
  /* 공지사항: 제목 · 전시 / 번호 · 작성자 · 등록일 · 수정 삭제 */
  .notice-table .notice-title{order:1;flex:1 1 0;min-width:0;font-size:15px;overflow-wrap:anywhere}
  .notice-table .c-vis{order:2}
  .notice-table .c-no,.notice-table .c-author,.notice-table .c-date{order:4;color:var(--mu);font-size:12px}
  .notice-table .c-no::before{content:'#'}
  .notice-table .row-actions{order:5;margin-left:auto}
  .popup-table .c-link,.popup-table .c-period{order:4;font-size:12px}
  /* 검색 줄 한 줄 (.bar-1line — QnA · 공지사항): 검색 · 상태 · 검색 버튼, 검색칸이 남는 폭을 씀 */
  .bar-1line{flex-wrap:nowrap;gap:6px}
  .bar-1line input[type=search]{flex:1 1 0;min-width:0;max-width:none}
  .bar-1line select,.bar-1line .select-btn{flex:0 0 auto;width:auto;min-width:0;max-width:none}
  .bar-1line>.btn{flex:none}
  /* QnA: 상태 · 분류 · 회원 / 제목 / 문의일 · 최근 처리 */
  .qa-table .c-stat{order:1}
  .qa-table .c-cat{order:1;color:var(--mu);font-size:12px}
  .qa-table .c-mem{order:2;margin-left:auto;font-size:13px}
  .qa-table .c-title{order:4;flex-basis:100%;font-size:15px;overflow-wrap:anywhere}
  .qa-table .c-date,.qa-table .c-upd{order:5;color:var(--mu);font-size:12px}
  .qa-table .c-date::before{content:'문의 '}
  .qa-table .c-upd::before{content:'· 최근 '}
  /* 카테고리별 마진: 카테고리 · 마진 / 단위 · 올림 · 예시 · 상품 수 */
  .mg-table .c-cat{order:1;flex:1 1 0;font-size:15px}
  .mg-table .c-rate{order:2;font-size:15px}
  .mg-table .c-unit,.mg-table .c-mode,.mg-table .c-ex,.mg-table .c-cnt{order:4;color:var(--mu);font-size:12px}
  .mg-table .c-unit::before{content:'단위 '}
  .mg-table .c-ex::before{content:'예시 '}
  .mg-table .c-cnt::before{content:'상품 '}
  .mg-table .c-cnt{margin-left:auto}
}
/* 매니저 관리 목록 — 휴대폰: 행마다 이름 · 아이디 · 권한 · 상태 / 직책 / 연락처 · 이메일 / 최근 로그인 · 수정 삭제, 가로 스크롤 없음 */
@media(max-width:700px){
  .mgr-table{min-width:0}
  .mgr-table thead{display:none}
  .mgr-table tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:11px 4px;border-bottom:1px solid var(--bd)}
  .mgr-table tbody tr::before{content:'';order:3;flex-basis:100%;height:0}
  .mgr-table tbody tr[hidden]{display:none}                          /* 매니저 검색(data-filter)으로 숨긴 행 */
  .mgr-table tbody td{padding:0;border:0;white-space:normal;min-width:0}
  .mgr-table .c-name{order:1;flex:1 1 0;font-size:15px}
  .mgr-table .c-role,.mgr-table .c-stat{order:2}
  .mgr-table .c-name .c-id{display:inline;margin-left:6px}
  .mgr-table .c-pos{order:4;font-size:13px;color:var(--mu)}
  .mgr-table .c-contact{order:5;flex-basis:100%;font-size:13px}
  .mgr-table .c-contact:empty,.mgr-table .c-pos:empty{display:none}
  .mgr-table .c-login{order:6;color:var(--mu);font-size:12px}
  .mgr-table .c-login::before{content:'최근 로그인 '}
  .mgr-table .c-act{order:7;margin-left:auto;white-space:nowrap}
}
/* 매니저 관리 › 메뉴별 권한 (admin/managers) */
.acc-table td,.acc-table th{text-align:center}
/* 메뉴 칸: 글자가 잘리지 않는 만큼만 (상위 메뉴는 윗줄에 작게) · 가로 스크롤해도 왼쪽에 고정 */
.acc-table .acc-menu,.acc-table thead th:first-child{position:sticky;left:0;z-index:1;width:1%;padding-right:14px;background:var(--card);text-align:left;box-shadow:inset -1px 0 var(--bd)}
.acc-table .acc-menu{color:var(--tx);font-size:13px;font-weight:600;line-height:1.3}
.acc-menu small{display:block;color:var(--mu);font-size:11px;font-weight:400}
.acc-sel,.acc-sel+.select-btn{width:auto;min-width:118px;padding:5px 8px;font-size:13px}
.acc-sel.changed,.acc-sel.changed+.select-btn{border-color:var(--wa);box-shadow:inset 3px 0 var(--wa)}
/* 매니저 관리 — PC · 태블릿: 가로 스크롤 없이 화면 폭 안에 (휴대폰은 위 700px 이하 행 카드 모양)
   이름 아래 아이디 · 연락처 아래 이메일, 긴 칸(직책 · 이메일 · 최근 로그인)은 줄바꿈, 권한 등급 이름 · 선택은 좁게 */
.mgr-table .c-id{display:block;color:var(--mu);font-size:12px;font-weight:400}
.mgr-table .c-contact a{display:block;width:fit-content}
.mgr-table .c-mail{overflow-wrap:anywhere}
@media(min-width:701px){
  .mgr-table th,.mgr-table td{padding:9px 7px}
  .mgr-table .c-pos,.mgr-table .c-contact{white-space:normal}
  .mgr-table .c-contact{min-width:130px;font-size:13px}
  .mgr-table .c-login{width:1%;white-space:normal;font-size:12px;line-height:1.35}    /* 날짜 / 시각 두 줄 */
  .mgr-table .c-act{width:1%;white-space:nowrap;text-align:right}
  .acc-table th,.acc-table td{padding:8px 5px}
  .acc-table thead th{white-space:normal;line-height:1.3}
  .acc-table .acc-menu,.acc-table thead th:first-child{padding-right:10px}
  .acc-sel,.acc-sel+.select-btn{min-width:0;padding:5px 6px;font-size:12.5px}
}
.bd-spec{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;margin:0;font-size:13px}
.bd-spec dt{color:var(--mu)}
.bd-spec dd{margin:0;min-width:0;word-break:break-all}
.bd-spec pre{margin:0;padding:10px;border-radius:8px;background:var(--bg);overflow-x:auto;white-space:pre}
@media(max-width:600px){.bd-spec{grid-template-columns:1fr}.bd-spec dd{margin-bottom:6px}}
/* 주문 상세: 결제 정보 */
.od-pay-wait{border:1px solid var(--er)}
.od-pay-wait h3 .badge{margin-left:4px}
@media(max-width:900px){
  .dp-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .dp-table .m-hide{display:none}
  .dp-table .m-only{display:block;color:var(--mu);font-size:11px}
  .dp-table th,.dp-table td{padding-left:6px;padding-right:6px}
  .rf-table td{white-space:normal;word-break:keep-all}
}
/* 환불 요청 — 휴대폰: 행마다 회원 · 금액 / 입금 계좌 · 상태 / 신청일 / 처리(메모 · 버튼), 가로 스크롤 없음 */
@media(max-width:700px){
  .rf-table{min-width:0}
  .rf-table thead{display:none}
  .rf-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mem amt" "acct stat" "date date" "act act";gap:4px 12px;padding:12px 4px;border-bottom:1px solid var(--bd)}
  .rf-table tbody td{padding:0!important;border:0;white-space:normal;min-width:0}
  .rf-table .c-mem{grid-area:mem;font-size:15px}
  .rf-table .c-amt{grid-area:amt;font-size:15px}
  .rf-table .rf-account{grid-area:acct;font-size:13px;overflow-wrap:anywhere}
  .rf-table .c-stat{grid-area:stat;justify-self:end;align-self:start}
  .rf-table .c-date{grid-area:date;color:var(--mu);font-size:12px}
  .rf-table .c-date::before{content:'신청 '}
  .rf-table .rf-act{grid-area:act}
  .rf-table .rf-act:has(>span.qa-count:only-child){display:none}         /* 처리 권한 없음 '-' */
  .rf-table .rf-form{margin-top:4px}
  .rf-table .rf-form input{flex:1 1 100%;min-width:0}
  .rf-table .rf-form .btn{flex:1}
  .rf-table td.qa-empty{grid-column:1/-1}
}

/* ---------- 주문 조회 · 주문 상세 ---------- */
.badge.st-wait{background:color-mix(in srgb,var(--er) 12%,var(--card));color:var(--er)}
.badge.st-new{background:var(--pr2);color:var(--pr)}
.badge.st-prep{background:color-mix(in srgb,var(--wa) 16%,var(--card));color:var(--wa)}
.badge.st-ready{background:color-mix(in srgb,#8b5cf6 16%,var(--card));color:#7c3aed}
.badge.st-ship{background:color-mix(in srgb,#0891b2 16%,var(--card));color:#0e7490}
.badge.st-done{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}
.badge.st-cancel{background:var(--bg);color:var(--mu);border:1px solid var(--bd);text-decoration:line-through}
.order-search{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.os-toggle{display:none}
.os-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.os-label{width:48px;flex:none;color:var(--mu);font-size:12px;font-weight:600}
.os-dates{display:flex;align-items:center;gap:6px}
.os-dates input{width:150px}
.os-presets{display:flex;gap:4px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;padding:5px 11px;border:1px solid var(--bd);border-radius:99px;background:var(--card);color:var(--tx);font-size:12px;text-decoration:none;white-space:nowrap}
.chip:hover{border-color:var(--pr);color:var(--pr)}
.chip.on{background:var(--pr);border-color:var(--pr);color:#fff}
/* 상품 관리 카테고리 — 버튼 한 줄, 넘치면 가로 스크롤 (휴대폰도 줄바꿈 없음) */
.cat-chips{position:relative;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;margin:0 0 12px;padding:2px 0 6px;
           scrollbar-width:thin;scrollbar-color:var(--bd) transparent;-webkit-overflow-scrolling:touch}
.cat-chips::-webkit-scrollbar{height:6px}
.cat-chips::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}
.cat-chips .chip{flex:none;gap:5px;padding:7px 13px;font-size:13px}
/* 스크롤 시 상단 고정 (.sticky-bar) — 화면 끝까지 배경을 채우도록 좌우로 넓히고 안쪽 여백 */
.cat-chips.sticky-bar{position:sticky;margin:0 -20px 12px;padding:8px 20px;scroll-padding:0 20px}
@media(max-width:900px){.cat-chips.sticky-bar{margin:0 -14px 12px;padding:8px 14px;scroll-padding:0 14px}}   /* main padding 14px */
/* 상품 관리: 검색 영역 + 카테고리 줄을 한 묶음으로 고정 — 카테고리 줄은 묶음 끝까지(좌우 여백 포함) 가로 스크롤 */
.prod-sticky{margin-bottom:12px;padding-bottom:4px}
.prod-sticky .prod-filter{margin-bottom:8px}
.prod-sticky .cat-chips{margin:0 -20px;padding:2px 20px 6px;scroll-padding:0 20px}
@media(max-width:900px){.prod-sticky .cat-chips{margin:0 -14px;padding:2px 14px 6px;scroll-padding:0 14px}}
.cat-chips .chip.on b{opacity:.9}
.os-q{flex:1;min-width:200px;width:auto}
.os-row select{width:auto;min-width:130px}
/* PC: 검색어 · 상태 · 검색 · 초기화 한 줄 (상태는 select 대신 보이는 펼침 버튼 .select-btn 크기) */
.os-row .select-btn{flex:none;width:auto;min-width:140px}
.os-row>.btn{flex:none}
.status-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.status-tabs a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--bd);border-radius:8px;background:var(--card);color:var(--tx);font-size:13px;text-decoration:none}
.status-tabs a b{font-variant-numeric:tabular-nums}
.status-tabs a:hover{border-color:var(--pr)}
.status-tabs a.on{border-color:var(--pr);background:var(--pr2);color:var(--pr);font-weight:600}
.order-sum{margin:0 0 10px;color:var(--mu);font-size:13px}
.order-sum b{color:var(--tx)}
.order-table tbody tr{cursor:pointer}
/* 주문 목록 — 가로 스크롤 없이: 상품 칸이 남는 폭을 쓰고 넘치면 말줄임, 업체명 · 금액 내역은 줄을 나눔 */
.order-table td.ot-prod{width:100%;max-width:0;overflow:hidden;text-overflow:ellipsis}
.order-table .ot-qty{display:block;color:var(--mu);font-size:12px}
.order-table td.ot-who{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.order-table .ot-co{display:block;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.order-table .ot-time{display:block;color:var(--mu);font-size:12px}
.order-table .ot-narrow,.order-table .ot-auc-in{display:none}
@media(max-width:1100px){
  .order-table .ot-wide{display:none}
  .order-table .ot-narrow{display:block;color:var(--mu);font-size:11px;font-weight:400}
  .order-table th,.order-table td{padding-left:6px;padding-right:6px}
  .order-table td.ot-who{max-width:130px}
}
@media(max-width:900px){
  .order-table .ot-auc{display:none}
  .order-table .ot-auc-in{display:block;margin-top:3px}
}
/* 경매가 — 출고 마감 후 주문 (app/services/auction.py) */
.au-bar .btn{white-space:nowrap}
/* 상품 엑셀 업로드 안내 */
.excel-help{margin:0 0 14px;padding-left:18px;color:var(--mu);font-size:13px;line-height:1.7}
.excel-help b{color:var(--tx)}
.au-confirm{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.au-confirm-text{flex:1;min-width:240px}
.au-confirm-text h3{margin:0 0 6px}
.au-confirm-text .desc{margin:0}
/* 경매 설정 — 경매 요일 · 휴무일 달력 */
.au-weekdays{margin:0 0 6px;font-size:20px}
.au-week{display:grid;gap:4px;margin:10px 0 0;padding:0;list-style:none;font-size:13px}
.au-week li{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:8px;background:var(--bg);color:var(--mu)}
.au-week li.on{background:var(--pr2);color:var(--pr);font-weight:600}
.au-week small{font-size:12px}
.au-cal-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.au-cal-head h3{margin:0}
.au-key{display:inline-block;padding:1px 8px;border-radius:99px;background:var(--bg);border:1px solid var(--bd);color:var(--mu);font-size:12px}
.au-key.on{background:var(--pr2);border-color:transparent;color:var(--pr)}
.au-key.off{background:color-mix(in srgb,var(--er) 12%,var(--card));border-color:transparent;color:var(--er);text-decoration:line-through}
.au-cal{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.au-cal th{padding:4px;font-size:12px;color:var(--mu);text-align:center}
.au-cal th.sun{color:var(--er)}.au-cal th.sat{color:var(--pr)}
.au-cal td{height:64px;padding:0;border:1px solid var(--bd);border-radius:8px;vertical-align:top;background:var(--card)}
.au-cal td.empty{border:0;background:none}
.au-cal td>button,.au-cal td>span{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;height:100%;padding:6px 8px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left}
.au-cal td>button{cursor:pointer}
.au-cal td>button:hover{outline:2px solid var(--pr);outline-offset:-2px}
.au-cal small{font-size:11px;font-weight:600}
.au-cal td.is-on{background:var(--pr2);border-color:transparent;color:var(--pr)}
.au-cal td.is-off{background:color-mix(in srgb,var(--er) 10%,var(--card));border-color:transparent;color:var(--er)}
.au-cal td.is-off small{text-decoration:line-through}
.au-cal td.is-none{color:var(--mu)}
.au-cal td.is-past{opacity:.5}
.au-cal td.is-today{box-shadow:inset 0 0 0 2px var(--tx)}
@media(max-width:720px){.au-cal{border-spacing:2px}.au-cal td{height:48px}.au-cal td>button,.au-cal td>span{padding:4px}}
.au-up{color:var(--er)}.au-down{color:var(--ok)}       /* 상승 = 고객이 더 냄 · 하락 = 돌려줌 */
.amt-sub{display:block;color:var(--mu);font-size:12px;font-weight:400;white-space:nowrap}   /* 주문 목록 — 결제 금액 아래 상품 + 경매 예치금 · 입금할 금액 */
.amt-sub.amt-pay{color:var(--wa)}
.price-old{display:block;color:var(--mu);text-decoration:line-through;font-weight:400;font-size:12px}
.order-table tbody tr:hover{background:var(--bg)}
.pager{display:flex;justify-content:center;gap:4px;margin-top:14px;flex-wrap:wrap}
.pager a,.pager span{min-width:32px;padding:5px 9px;border:1px solid var(--bd);border-radius:6px;text-align:center;text-decoration:none;color:var(--tx);font-size:13px}
.pager span.on{background:var(--pr);border-color:var(--pr);color:#fff}
/* 상세 */
.od-no{font-variant-numeric:tabular-nums}
.od-flow{display:flex;margin:0 0 16px;padding:0;list-style:none;counter-reset:s}
.od-flow li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--mu);font-size:12px;text-align:center}
.od-flow li::before{content:'';position:absolute;top:15px;left:-50%;right:50%;height:3px;background:var(--bd);z-index:0}
.od-flow li:first-child::before{display:none}
.od-flow li i{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--bd);border-radius:50%;background:var(--card);font-style:normal;font-weight:700}
.od-flow li.done::before,.od-flow li.now::before{background:var(--ok)}
.od-flow li.done i{border-color:var(--ok);background:var(--ok);color:#fff}
.od-flow li.now i{border-color:var(--pr);background:var(--pr);color:#fff;box-shadow:0 0 0 4px var(--pr2)}
.od-flow li.now{color:var(--tx);font-weight:700}
.od-cancel{margin:0 0 16px;padding:12px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--mu)}
.od-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.od-main,.od-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.od-main .card,.od-side .card{margin:0}
.od-thumb{width:48px;height:48px}
/* 주문 상세 › 주문 상품 — 가로 스크롤 없음: 상품 칸이 남는 폭을 쓰고 줄바꿈, 나머지 칸은 내용 폭만 */
.oi-table td{vertical-align:middle}
.oi-table td.oi-prod{width:100%;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.oi-table .prod-cell{display:flex;min-width:0}
.oi-table .prod-name{min-width:0;gap:1px}
.oi-table .prod-name small.m-only{color:var(--mu);font-size:12px}
.oi-table .prod-name s{color:var(--mu)}
/* 합계 — 오른쪽 정렬 두 칸 (라벨 · 금액), 최종 금액은 굵게 */
.od-sum{display:flex;flex-direction:column;gap:4px;margin:0;padding:10px 10px 0;border-top:2px solid var(--bd)}
.od-sum>div{display:flex;justify-content:flex-end;align-items:baseline;gap:16px}
.od-sum dt{color:var(--mu);font-size:13px;text-align:right}
.od-sum dt small{font-size:11.5px}
.od-sum dd{min-width:96px;margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.od-sum .grand dt{color:var(--tx);font-weight:600}
.od-sum .grand dd{font-size:16px;font-weight:700}
.od-item-off td{color:var(--mu)}
.od-item-off .prod-name b{text-decoration:line-through}
.od-canceled{display:block;color:var(--er);font-size:12px;font-weight:400}
.od-partial{margin-top:12px;border-top:1px solid var(--bd);padding-top:10px}
.od-partial summary{cursor:pointer;color:var(--er);font-size:13px;font-weight:600}
.od-partial form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.od-partial-items{margin:0;padding:0;list-style:none}
.od-partial-items li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--bd);font-size:13px}
.od-partial-items label{display:flex;align-items:center;gap:4px;flex:none;margin:0}
.od-partial-items input{width:72px;text-align:right}
.od-photos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.od-photo{position:relative}
.od-photo form{position:absolute;top:3px;right:3px;margin:0}
.od-photo-del{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgb(0 0 0 / 60%);color:#fff;font-size:11px;cursor:pointer}
.od-photo-del:hover{background:var(--er)}
.od-photo-form{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd)}
.od-photo-row{display:flex;align-items:center;gap:6px}
.od-photo-row input[type=file]{flex:1;min-width:0;width:auto;font-size:12px}
.od-qr-btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.od-driver{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:var(--bg);font-size:14px;font-weight:600}
.od-qr-process{flex:1 0 100%}
.od-qr-process .btn:first-child{flex:1}
.od-ship-form select{flex:1;min-width:140px;width:auto}
.od-fields select{flex:1;min-width:0}
/* 주문 상세 › QR 코드 보기 — 휴대폰 화면 가득 크게, 어두운 테마에서도 흰 바탕 (스캔이 잘 되게) */
dialog.admin-dialog.qr-dialog{width:min(420px,calc(100vw - 24px))}
.qr-big{padding:10px;border-radius:12px;background:#fff}
.qr-big svg{display:block;width:100%;height:auto}
.qr-cap{margin:12px 0 0;text-align:center;font-size:14px}
.qr-cap small{color:var(--mu)}
.qr-url{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:var(--bg);font-size:13px;text-align:center;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.od-photos a{display:block;width:84px;height:84px;overflow:hidden;border:1px solid var(--bd);border-radius:8px}
.od-photos img{display:block;width:100%;height:100%;object-fit:cover}
.od-ship-form{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.od-ship-form input{flex:1;min-width:140px;width:auto}
.od-process{border:1px solid var(--pr)}
.od-process form{display:flex;flex-direction:column;gap:8px}
.od-warn{margin:0;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--wa) 12%,var(--card));color:var(--wa);font-size:12px}
.od-check{display:flex;align-items:center;gap:6px;margin:0;color:var(--tx);font-size:13px}
.od-fields{display:flex;gap:6px}
.od-fields input{flex:1;min-width:0}
.od-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.od-actions .btn:not(.sm){flex:1 0 100%}
.od-member{margin:0 0 10px;line-height:1.6}
.od-meta{margin:10px 0 0;color:var(--mu);font-size:12px}
.od-log{margin:0;padding:0;list-style:none}
.od-log li{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--bd);font-size:13px}
.od-log li:last-child{border-bottom:0}
.od-log time{color:var(--mu);font-size:12px;font-variant-numeric:tabular-nums}
.od-log p{grid-column:2/-1;margin:0;color:var(--mu);font-size:12px;white-space:pre-line}
@media(max-width:900px){
  .od-grid{grid-template-columns:1fr}
  .od-side{order:-1}
}
@media(max-width:600px){
  /* 휴대폰: 검색 카드는 접어 두고 카드를 누르면 펼침 (admin.js [data-collapsible]) */
  .order-search:not(.open){cursor:pointer}
  .order-search:not(.open) .os-row{display:none}
  .os-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;background:none;color:var(--tx);font:inherit;font-weight:600;text-align:left;cursor:pointer}
  .os-toggle small{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mu);font-size:12px;font-weight:400}
  .os-toggle .caret{color:var(--mu);transition:transform .2s}
  .order-search.open .os-toggle .caret{transform:rotate(180deg)}
  /* 상태 탭: 한 줄 가로 스크롤 (고정 영역이 여러 줄로 커지지 않게) */
  .status-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .status-tabs::-webkit-scrollbar{display:none}
  .status-tabs a{flex:none;white-space:nowrap}
  /* 휴대폰 검색 카드: 이름표 없이 (입력칸 · 안내 글로 충분) — 날짜 / 기간 칩 한 줄(가로 밀기) / 검색어 / 상태 · 검색 · 초기화 한 줄 */
  .order-search.open{gap:8px}
  .os-label{display:none}
  .os-row{gap:6px}
  .os-dates{width:100%}
  .os-dates input{flex:1;width:auto;min-width:0}
  .os-presets{flex-wrap:nowrap;width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .os-presets::-webkit-scrollbar{display:none}
  .os-presets .chip{flex:none}
  .os-q{min-width:0;flex-basis:100%}
  .os-row .select-btn{flex:1 1 0;min-width:0}
  .od-flow li span{font-size:10.5px}
  /* 휴대폰: 덜 중요한 열은 숨기고 핵심 정보는 셀 안에 작게 (가로 스크롤 없이) */
  .order-table .m-hide,.od-main .m-hide{display:none}
  .oi-table th,.oi-table td{padding-left:4px;padding-right:4px}
  .oi-table .prod-cell{gap:10px}
  .oi-table .od-thumb{width:44px;height:44px}
  .oi-table .m-only{display:block}
  .oi-table .m-only .badge{margin-top:3px;padding:1px 6px;font-size:11px}
  .od-sum{padding-left:4px;padding-right:4px}
  .od-sum>div{gap:10px}
  .od-sum dt{font-size:12.5px}
  .order-table .m-only{display:block;color:var(--mu);font-size:11px;font-weight:400}
  .order-table td small.qa-count{display:none}          /* 업체명은 상세에서 */
  .order-table th,.order-table td{padding-left:6px;padding-right:6px}
  .order-table td{white-space:normal;word-break:keep-all}
  .order-table td:last-child{white-space:nowrap}
  .order-table .ot-narrow{display:none}                 /* 주문일시는 m-only 줄에 */
}
.m-only{display:none}

/* ---------- 공통: 맨 위로 버튼 (화면 아래 가운데, 스크롤하면 나타남) ---------- */
.to-top{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:35;display:grid;place-items:center;width:44px;height:44px;padding:0;
        border:1px solid var(--bd);border-radius:50%;background:var(--card);color:var(--tx);box-shadow:0 4px 14px rgb(0 0 0 / 15%);cursor:pointer;
        opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:opacity .25s,transform .25s,visibility .25s}
.to-top.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.to-top:hover{border-color:var(--pr);color:var(--pr)}
.to-top svg{width:20px;height:20px}
html.chat-open .to-top{display:none}

/* ---------- 알림(toast) — Admin.toast() · flash(kind="toast"). 홈페이지(shop.css .toast)와 같은 모양 ---------- */
.toasts{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 70px);z-index:1000;display:flex;flex-direction:column;gap:8px;transform:translateX(-50%);width:min(92vw,420px);pointer-events:none}
.toast{padding:12px 16px;border-radius:14px;background:var(--tx);color:var(--card);font-size:14px;box-shadow:0 24px 60px rgb(15 23 42 / 22%);animation:toastIn .3s ease-out;pointer-events:auto;white-space:pre-line}
.toast.warn{background:var(--er);color:#fff}
.toast.out{animation:toastOut .3s forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.toast,.toast.out{animation:none}}

/* ---------- 상품 관리: 판매중 / 품절 토글 (product-status.js) ---------- */
.sw{display:inline-flex;align-items:center;gap:6px;padding:2px 0;border:0;background:none;color:var(--mu);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}
.sw-track{position:relative;flex:none;width:34px;height:20px;border-radius:99px;background:var(--seg-off-bg);border:1px solid var(--bd);transition:background .2s,border-color .2s}
.sw-track::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / 25%);transition:transform .2s}
.sw[aria-checked=true]{color:var(--ok)}
.sw[aria-checked=true] .sw-track{background:var(--ok);border-color:var(--ok)}
.sw[aria-checked=true] .sw-track::after{transform:translateX(14px)}
.sw:disabled{opacity:.6;cursor:progress}
.sw:focus-visible{outline:2px solid var(--pr);outline-offset:2px;border-radius:6px}
/* 버튼식 토글 (.sw.sm) — 휴대폰 상품 목록에서 삭제 버튼(.btn.sm) 위, 같은 크기 · 모양: 판매중 초록 · 품절 회색 */
.sw.sm{justify-content:center;padding:3px 9px;border:1px solid var(--bd);border-radius:8px;background:var(--seg-off-bg);color:var(--seg-off);font-size:12px;font-weight:600}
.sw.sm .sw-track{display:none}
.sw.sm[aria-checked=true]{border-color:var(--seg-on);background:var(--seg-on-bg);color:var(--seg-on)}
#prodTable .m-only{display:none}
#prodTable .prod-meta{color:var(--mu)}
/* 휴대폰: 색상 · 카테고리 · 공급업체 · 공급가 · 상태 칸을 숨기고 상품명 아래 · 판매가 칸으로 — 가로 스크롤 없이 */
@media(max-width:700px){
  #prodTable .col-color,#prodTable .col-cat,#prodTable .col-sup,#prodTable .col-supply,#prodTable .col-status{display:none}
  #prodTable td:first-child{width:100%;white-space:normal}              /* 상품명은 줄바꿈 — 남는 폭을 모두 씀 */
  #prodTable th,#prodTable td{padding-left:6px;padding-right:6px}
  #prodTable .m-only{display:block}
  #prodTable span.m-only{display:inline}
  /* 판매 상태 토글(짧게) · 삭제 버튼을 위아래로 — 같은 폭, 오른쪽 정렬 */
  #prodTable .col-act:has(.sw){white-space:nowrap}
  #prodTable .col-act{text-align:right}
  #prodTable .col-act .sw.m-only{display:flex;width:100%;margin-bottom:6px}
  #prodTable .col-act form{display:block!important}
  #prodTable .col-act:has(.sw) .btn.dan{width:100%}                    /* 토글 버튼과 같은 폭 */
  #prodTable .badge.m-only{display:inline-block;align-self:flex-start;margin-top:4px}
  #prodTable .prod-meta{font-size:12px}
  #prodTable .col-sale{white-space:nowrap;text-align:right}
  #prodTable .col-sale .m-supply{display:block;color:var(--mu);font-size:12px}   /* 공급가 (윗줄) · 판매가 (아랫줄) */
  #prodTable .prod-cell{gap:8px;align-items:flex-start}
  #prodTable .prod-thumb{width:48px;height:48px}
  #prodTable .prod-name{min-width:0}
  #prodTable .col-sale .badge{display:block;width:max-content;margin:2px 0 0 auto}   /* 역마진 표시는 금액 아래 */
  /* 품절: 행 바탕을 회색으로 · 글자를 흐리게 */
  #prodTable tr.is-soldout td{background:color-mix(in srgb,var(--mu) 10%,var(--card))}
  #prodTable tr.is-soldout .prod-name b,#prodTable tr.is-soldout .col-sale b{color:var(--mu)}
}

/* ---------- 무한 로딩 센티넬 (common/infinite.js · _macros infinite_more) ---------- */
.infinite-more{display:flex;justify-content:center;padding:14px 0 6px}
.infinite-more .im-busy,.infinite-more .im-error{display:none}
.infinite-more.is-loading .im-idle,.infinite-more.is-error .im-idle{display:none}
.infinite-more.is-loading .im-busy{display:inline}
.infinite-more.is-error .im-error{display:inline}
.infinite-more.is-loading button{opacity:.6;pointer-events:none}

/* 경매 상품 동기화 (templates/admin/auction_sync.html) */
.as-errors{margin:6px 0 0;padding-left:18px}
dialog.as-plan-dialog{width:min(640px,calc(100vw - 32px))}
.as-plan-dialog .desc{margin-top:0}
.as-plan-dialog .as-plan-lists ul{max-height:none;overflow:visible}       /* dialog 본문이 스크롤 — 목록 안 스크롤 없음 */
.as-plan-dialog .as-plan-lists li{margin:3px 0}
.as-plan-chg{display:flex;flex-wrap:wrap;gap:0 10px;color:var(--mu);font-size:13px}
.as-plan-chg>span{white-space:nowrap}
.as-plan-chg b{color:var(--tx)}
.as-plan-lists{display:grid;gap:8px;margin:10px 0}
.as-plan-lists summary{cursor:pointer;font-weight:600}
.as-plan-lists ul{margin:6px 0 0;padding-left:18px;max-height:240px;overflow:auto}
.as-apply{display:flex;justify-content:flex-end;gap:8px}
.as-sub{margin:12px 0 6px;font-size:14px}
/* 상품 동기화 탭 (동기화 목록 · 품절 관리) */
.as-tabs a b.as-tab-alert{min-width:20px;padding:0 6px;border-radius:99px;background:var(--wa);color:#fff;text-align:center}
/* 품절 관리 하위 탭 — 품절 처리 대상 · 품절 해제 (밑줄 탭) */
.as-subtabs{display:flex;gap:4px;margin:4px 0 8px;border-bottom:1px solid var(--bd)}
.as-subtabs button{display:inline-flex;align-items:center;gap:6px;margin-bottom:-1px;padding:8px 14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--mu);font:inherit;font-size:14px;cursor:pointer}
.as-subtabs button b{font-variant-numeric:tabular-nums}
.as-subtabs button.on{border-bottom-color:var(--pr);color:var(--pr);font-weight:600}
.as-subtabs button[data-as-sub="risk"] b{color:var(--wa)}
/* 품절 관리 카드 (.so-*) — 구분별 목록, 줄마다 [이름 · 정보 | 처리] */
.so-rules{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 6px;padding:0;list-style:none;color:var(--mu);font-size:12px}
.so-rules b{margin-right:4px;color:var(--tx)}
.so-note{margin:0 0 8px;color:var(--mu);font-size:12px}
.so-note span{display:block}
.so-group{margin-top:14px}
.so-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin:0 0 6px;font-size:13px;font-weight:400}
.so-head>span{white-space:nowrap}
.so-head small{color:var(--mu);font-size:12px}
.so-tag{padding:2px 8px;border-radius:99px;font-size:12px;font-weight:700}
.so-tag.is-risk{background:color-mix(in srgb,var(--wa) 18%,var(--card));color:var(--wa)}
.so-tag.is-resume{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}
.so-list{margin:0;padding:0;list-style:none;border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.so-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:9px 12px;border-top:1px solid var(--bd)}
.so-row:first-child{border-top:0}
.so-main{display:flex;flex-direction:column;gap:1px;min-width:0;margin:0;color:var(--tx);font-size:14px;cursor:default}
label.so-main{cursor:pointer}
.so-main small{color:var(--mu);font-size:12px;overflow-wrap:anywhere}
.so-main small span{white-space:nowrap}                 /* 금액은 줄바꿈으로 쪼개지 않게 */
.so-main small .so-avg{color:var(--pr);font-weight:600}  /* 경매 평균가 — 공급가 정할 때 참고 */
.so-ctrl{display:flex;align-items:center;justify-content:flex-end;gap:8px}
/* 품절 위험 — 최근 경매에서 연속으로 빠진 횟수 (2회는 빨강) */
.so-miss{padding:2px 8px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;background:color-mix(in srgb,var(--wa) 16%,var(--card));color:var(--wa)}
.so-miss.is-2{background:color-mix(in srgb,var(--er) 14%,var(--card));color:var(--er)}
.so-check{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 12px;border:1px solid var(--bd);border-radius:8px;color:var(--tx);font-size:13px;cursor:pointer}
.so-check:has(input:checked){border-color:var(--er);background:color-mix(in srgb,var(--er) 10%,var(--card));color:var(--er);font-weight:600}
.so-price{display:inline-flex;align-items:center;gap:4px}
.so-price input{width:120px;height:36px;padding:0 10px;text-align:right;background:var(--card)}
.as-resume-sale{min-width:110px;color:var(--pr);font-size:12px;font-weight:600;white-space:nowrap}
.as-resume-sale.is-warn{color:var(--wa)}
/* 하위 탭 줄 + 검증 버튼 (오른쪽) — 탭 줄의 밑줄은 버튼 아래까지 이어짐 */
.so-bar{display:flex;align-items:flex-end;gap:8px;margin:4px 0 8px;border-bottom:1px solid var(--bd)}
.so-bar .as-subtabs{flex:1;min-width:0;margin:0;border-bottom:0}
.so-bar>.btn{flex:none;margin-bottom:4px}
/* 목록 위 도구 — PC 한 줄: 거르기(왼쪽, 검색이 늘어남) | 거래량 설정(오른쪽). 높이 42px 로 맞춤 */
.as-tools{display:flex;align-items:center;gap:10px 16px;margin-bottom:12px;flex-wrap:wrap}
.as-filter{display:flex;align-items:center;gap:6px;flex:1 1 420px;min-width:0}
.as-filter input[type=search]{flex:1 1 180px;min-width:0;width:auto}
.as-filter select{flex:0 1 170px;width:auto;min-width:0;height:42px;padding-top:0;padding-bottom:0}
.as-count{flex:none;white-space:nowrap}
.as-low{display:flex;align-items:center;gap:6px;margin:0;padding:0 4px 0 10px;min-height:42px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);white-space:nowrap}
.as-low label{display:inline;margin:0;color:var(--tx);font-size:13px}
.as-low-in{display:inline-flex;align-items:center;gap:3px}
.as-low-in input{width:58px;height:32px;padding:0 6px;text-align:right;background:var(--card)}
.as-low .btn{height:32px;padding:0 12px}
.as-low-sum{padding-right:6px}
#asTable .as-c-avg{white-space:nowrap;color:var(--mu)}
#asTable tr.as-absent td{background:color-mix(in srgb,var(--wa) 7%,var(--card))}
/* 거래량 하위 N% — 품절위험 (붉은 배경) */
#asTable tr.is-low td{background:color-mix(in srgb,var(--er) 11%,var(--card))}
.as-low-key{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;background:color-mix(in srgb,var(--er) 22%,var(--card));border:1px solid color-mix(in srgb,var(--er) 40%,transparent)}
#asTable .as-c-prod{min-width:220px;white-space:normal}
.as-prods{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.as-pick-list{margin:10px 0 0;padding:0;list-style:none;height:320px;overflow:auto;border:1px solid var(--bd);border-radius:8px}
.as-pick-list li{border-bottom:1px solid var(--bd)}
.as-pick-list li.qa-count{padding:12px}
.as-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:8px 12px;border:0;background:none;color:var(--tx);text-align:left;cursor:pointer}
.as-pick:hover:not(:disabled){background:var(--pr2)}
.as-pick:disabled{cursor:default;color:var(--mu)}
.as-pick small{color:var(--mu);font-size:12px}
.as-pick small.pa-linked{color:var(--pr)}
/* 경매 품목 = 지금 품종명 — 왼쪽 굵은 선 · 옅은 배경 */
.as-pick-list li.is-same{background:color-mix(in srgb,var(--ok) 8%,var(--card));box-shadow:inset 3px 0 0 var(--ok)}
.as-pick-list li.is-same .as-pick b{color:var(--ok)}
.badge.pa-same{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}
/* 상품 dialog — 경매 동기화 지정 (product-auction.js) */
.pa-cur{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:36px}
.pa-cur [data-pa-text]{border:0;font-family:inherit;cursor:default}
.pa-cur [data-pa-text]:not(.badge){padding:0;background:none}
.pa-cur .pa-copy{cursor:copy}
.pa-cur .pa-copy:hover{filter:brightness(.95);text-decoration:underline}
/* 상품 dialog — 색상 선택 (product-colors.js): 원형 견본 + 이름, 여러 개 선택 */
.form-row.color-row{grid-template-columns:minmax(0,1fr)}
.color-picks{display:flex;flex-wrap:wrap;gap:6px}
.color-pick{position:relative;display:inline-flex;align-items:center;gap:6px;margin:0;padding:5px 10px 5px 6px;border:1px solid var(--bd);border-radius:99px;background:var(--bg);color:var(--tx);font-size:13px;cursor:pointer}
.color-pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.color-pick i{width:18px;height:18px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 18%)}
.color-pick:hover{background:var(--pr2)}
.color-pick:has(input:checked){border-color:var(--pr);background:var(--pr2);color:var(--pr);font-weight:600}
.color-pick:has(input:focus-visible){outline:2px solid var(--pr);outline-offset:1px}
.color-pick.is-extra i{background:repeating-linear-gradient(45deg,var(--bd) 0 3px,transparent 3px 6px)}
.pa-search{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pa-search input[type=search]{flex:1 1 200px;min-width:0}
#asTable .m-only{display:none}
@media(max-width:700px){
  /* 도구: 검색 · 구분 한 줄씩 · 거래량 설정 한 줄 */
  .as-tools{flex-direction:column;align-items:stretch;gap:8px}
  .as-filter{display:grid;grid-template-columns:1fr;flex:none}
  .as-filter input[type=search]{grid-column:1 / -1;width:100%}
  .as-filter select{width:100%}
  .as-count{grid-column:1 / -1;text-align:right}
  .as-count:empty{display:none}
  .as-low{flex-wrap:wrap;white-space:normal;padding:6px 6px 6px 10px}
  .as-low .btn{margin-left:auto}
  .as-low-sum{flex-basis:100%;padding:0 0 2px}
  /* 목록: 가로 스크롤 없는 카드 줄 — 품종(아래 품목 · 등급) 수량 평균가 / 동기화 상품은 다음 줄 */
  #asTable,#asTable tbody,#asTable thead{display:block}
  #asTable thead{display:none}
  #asTable tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"var qty avg" "prod prod prod";gap:4px 8px;padding:9px 2px;border-bottom:1px solid var(--bd)}
  #asTable tbody td{border:0;padding:0;white-space:normal}
  #asTable .as-c-item,#asTable .as-c-grade{display:none}
  #asTable .as-c-var{grid-area:var;min-width:0}
  #asTable .as-c-qty{grid-area:qty}
  #asTable .as-c-avg{grid-area:avg;font-size:12px}
  #asTable .as-c-prod{grid-area:prod;min-width:0}
  #asTable .as-m-meta{display:block;color:var(--mu);font-size:12px}
  #asTable tbody tr.is-low{background:color-mix(in srgb,var(--er) 11%,var(--card))}
  #asTable tbody tr.is-low td{background:none}
  #asTable tbody tr.as-absent{background:color-mix(in srgb,var(--wa) 7%,var(--card))}
  #asTable tbody tr.as-absent td{background:none}
  /* 상품 동기화 탭 — 한 줄에 똑같은 너비로 */
  .as-tabs{flex-wrap:nowrap;gap:4px}
  .as-tabs a{flex:1 1 0;min-width:0;justify-content:center;gap:4px;padding:8px 4px;font-size:13px;white-space:nowrap}
  /* 품절 관리: 줄마다 이름 → 정보 → 처리 (입력칸 꽉 차게), 검증 버튼 꽉 차게 */
  .so-rules{flex-direction:column}
  .so-row{gap:6px 10px;padding:10px}
  .so-row.is-input{grid-template-columns:minmax(0,1fr)}
  .so-ctrl .badge{white-space:nowrap}
  .so-check{padding:6px 10px}
  .so-ctrl{min-width:0}
  .so-price{flex:1;min-width:0}
  .so-price input{flex:1;width:auto;min-width:0}
  .as-resume-sale{flex:none;min-width:0;text-align:right}
}
}

/* 세금계산서 (templates/admin/tax_invoices.html) */
.tx-month{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;margin:0}
.tx-month input[type=month]{width:auto;height:38px;padding:0 8px}
.tx-month .btn.ic{width:38px;height:38px;padding:0;font-size:18px}
.tx-table .m-only{display:none}
.tx-table td small.tx-sub{display:block;color:var(--mu);font-size:12px;white-space:normal}
.tx-warn{color:var(--wa)}
.tx-table .badge.tx-free{background:color-mix(in srgb,var(--ok) 14%,var(--card));color:var(--ok)}
.tx-table .badge.tx-vat{background:var(--pr2);color:var(--pr)}
.tx-table tr.is-changed td{background:color-mix(in srgb,var(--wa) 10%,var(--card))}
.tx-act{text-align:right}
.tx-act form{display:inline}
.prod-tax{color:var(--pr);font-weight:600}
@media(max-width:700px){
  .tx-table,.tx-table tbody{display:block}
  .tx-table thead{display:none}
  .tx-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who total" "status act";gap:4px 10px;padding:10px 2px;border-bottom:1px solid var(--bd)}
  .tx-table td{border:0;padding:0;white-space:normal}
  .tx-table .tx-c-kind,.tx-table .tx-c-amt{display:none}
  .tx-table .tx-c-who{grid-area:who;min-width:0}
  .tx-table .tx-c-total{grid-area:total;text-align:right}
  .tx-table .tx-c-status{grid-area:status;min-width:0}
  .tx-table .tx-act{grid-area:act;align-self:center}
  .tx-table .m-only{display:inline-block}
  .tx-table small.m-only{display:block;color:var(--mu);font-size:12px}
  .tx-table tbody tr.is-changed{background:color-mix(in srgb,var(--wa) 10%,var(--card))}
  .tx-table tbody tr.is-changed td{background:none}
}
@media print{.m-nav{display:none!important}}