/* ============================================================
   매장 PC 주문현황 '바로 등록' + 날짜 · 버튼 줄 (2026-10-20 사장님 선택 '시안 A 격자 정렬형', js/store-quick.js)
   - index.html 에서 admin-v2.css 다음(맨 마지막)에 불러온다 = 시안을 찍을 때와 같은 순서
   - 바로 등록 3줄이 같은 칸 선을 쓴다: [이름표] [칸1] [칸2] [칸3] [버튼 칸]
     1 고객      : 뒷 4자리(칸1) | 고객 정보(칸2~3) | [다시 입력]
     2 현관·메모 : 공동현관(칸1) | 전달사항(칸2 ~ 끝)
     3 박스·접수 : 박스(칸1) | 즉시/예약(칸2) | 배달료(칸3) | [접수]
   - 입력 · 버튼 · 이름표 붙은 칸 높이 40px 하나, 테두리 1px, 모서리 8px, 글자 14px
   - 상자 폭 = 숫자 칸 · 날짜 줄과 같은 양 끝 (최대 폭 없음)
   - 날짜 줄 버튼 색 3가지: 검색(진남색) / 신규 주문(파랑) / 나머지(흰 바탕)
   - 매장 로그인 + 1024px 이상에서만 (폰 화면은 손대지 않음)
   - 고친 뒤에는 node scripts/ui-check/store-order.cjs (+ --store km) 통과 필수
   ============================================================ */
@media (min-width: 1024px) {

/* ---------- 상자 ---------- */
body.store-mode #qr-bar {
    --qa-h: 40px;
    --qa-lb: 88px; --qa-act: 112px; --qa-gap: 10px; --qa-pad: 16px;
    --qa-c1min: 200px; /* 칸1 최소 = '연락처 뒷 4자리' 이름표(118) + 뒷자리 4칸(52) + 여백 (2026-10-20) */
    --qa-cols: [lb] var(--qa-lb) [c1] minmax(var(--qa-c1min), 1fr) [c2] minmax(0, 1fr) [c3] minmax(0, 1fr) [act] var(--qa-act) [end];
    --qa-line: #D5DAE0; --qa-div: #EEF0F3; --qa-lbg: #F7F8FA;
    --qa-ink: #191F28; --qa-ink2: #333D4B; --qa-ink3: #4E5968; --qa-mute: #8B95A1;
    --qa-pri: #1B9BD7; --qa-dark: #0D5C8A;
    max-width: none !important; width: auto !important;
    margin: 0 0 20px !important; padding: 0 var(--qa-pad) !important; gap: 0 !important;
    background: #fff !important; border: 1px solid #E5E8EB !important; border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; box-sizing: border-box !important;
    font-size: 14px; color: var(--qa-ink); word-break: keep-all; overflow-wrap: anywhere;
}
body.store-mode #qr-bar *, body.store-mode #qr-bar *::before, body.store-mode #qr-bar *::after { box-sizing: border-box; }

/* 머리: 제목은 이름표 칸, 안내는 칸1 선에서 시작 */
body.store-mode #qr-bar .qa-h,
body.store-mode #qr-bar .qa-row {
    display: grid !important; grid-template-columns: var(--qa-cols);
    column-gap: var(--qa-gap); row-gap: 10px; align-items: center !important;
}
body.store-mode #qr-bar .qa-h { min-height: 48px; padding: 0; border-bottom: 1px solid var(--qa-div); }
body.store-mode #qr-bar .qa-h b { grid-column: lb / c1; font-size: 16px; font-weight: 900; color: var(--qa-ink); white-space: nowrap; }
body.store-mode #qr-bar .qa-h .qr-note { grid-column: c1 / end; font-size: 13px; color: var(--qa-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 안내 문구 = 연한 주황 띠 (2026-10-20 사장님 선택). 띠는 칸1 선 ~ 줄 끝, 좁아도 잘리지 않고 줄바꿈 */
body.store-mode #qr-bar .qa-h .qa-note {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; min-height: 32px; padding: 6px 12px;
    border-radius: 8px; background: #FFF4E5; color: #B45309; font-size: 13px; font-weight: 700; line-height: 18px;
    white-space: normal; overflow: visible; text-overflow: clip;
}
body.store-mode #qr-bar .qa-h .qa-note-k { color: #9A3412; font-weight: 900; white-space: nowrap; }
/* 필수 칸 * (이름표 안, 빨간색) */
body.store-mode #qr-bar .qa-req { margin-left: 3px; color: #E53935; font-weight: 900; }

/* 줄: 위아래 12px, 줄 사이 가는 선 */
body.store-mode #qr-bar .qa-row { padding: 12px 0; gap: 10px var(--qa-gap) !important; align-items: start !important; }
body.store-mode #qr-bar .qa-row + .qa-row { border-top: 1px solid var(--qa-div); }
body.store-mode #qr-bar .qa-row > * { min-width: 0; }

/* 이름표 칸: 번호 + 이름 (첫 줄 높이에 맞춤) */
body.store-mode #qr-bar .qa-lb { grid-column: lb / c1; grid-row: 1; align-self: start; display: flex; align-items: center; gap: 7px; height: var(--qa-h); font-size: 13.5px; font-weight: 800; color: var(--qa-ink2); white-space: nowrap; }
body.store-mode #qr-bar .qa-lb i { font-style: normal; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--qa-pri); color: #fff; font-size: 12px; font-weight: 900; }

/* ---------- 칸 공통: 이름표 + 입력 한 상자 ---------- */
body.store-mode #qr-bar .qa-f {
    display: flex; align-items: stretch; height: var(--qa-h); margin: 0; min-width: 0;
    border: 1px solid var(--qa-line); border-radius: 8px; background: #fff; overflow: hidden;
}
body.store-mode #qr-bar .qa-f:focus-within { border-color: var(--qa-pri); box-shadow: 0 0 0 3px rgba(27,155,215,0.15); }
body.store-mode #qr-bar .qa-fl {
    flex: none; display: inline-flex; align-items: center; padding: 0 12px;
    background: var(--qa-lbg); border-right: 1px solid var(--qa-line);
    font-size: 13px; font-weight: 700; color: var(--qa-ink3); white-space: nowrap;
}
body.store-mode #qr-bar .qa-in {
    flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 12px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
    font-family: inherit; font-size: 14px; color: var(--qa-ink);
}
body.store-mode #qr-bar .qa-in::placeholder { color: #B0B8C1; }
body.store-mode #qr-bar .qa-in[readonly] { background: #FAFBFC; cursor: default; }
body.store-mode #qr-bar .qa-digits { font-size: 16px; font-weight: 800; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
body.store-mode #qr-bar .qa-door .qa-in { font-weight: 700; color: var(--qa-dark); }
body.store-mode #qr-bar .qa-f.off { background: var(--qa-lbg); }
body.store-mode #qr-bar .qa-f.off .qa-in { color: var(--qa-mute); }
body.store-mode #qr-bar .qa-f.off .qa-fl { color: var(--qa-mute); }

/* 상자 오른쪽 끝 붙은 버튼 (주소 [검색]) */
body.store-mode #qr-bar .qa-seg-btn {
    flex: none; height: 100%; padding: 0 18px; margin: 0; border: 0; border-left: 1px solid var(--qa-dark);
    background: var(--qa-dark); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
/* 고객을 고르기 전에는 주소 칸이 잠김 (공동현관 칸과 같게) */
body.store-mode #qr-bar .qa-seg-btn:disabled { background: #B0B8C1; border-left-color: #B0B8C1; cursor: default; }
body.store-mode #qr-bar .qa-f.off .qa-in[readonly] { background: transparent; }

/* ---------- 버튼 ---------- */
body.store-mode #qr-bar .qa-btn {
    height: var(--qa-h); margin: 0; padding: 0 12px; border: 1px solid var(--qa-line) !important; border-radius: 8px;
    background: #fff; color: var(--qa-ink2); font-family: inherit; font-size: 14px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
body.store-mode #qr-bar .qa-btn:hover { background: var(--qa-lbg); border-color: #B9C1CA !important; }
body.store-mode #qr-bar .qa-act { grid-column: act / end; width: 100%; }
body.store-mode #qr-bar button:focus { outline: none; }
body.store-mode #qr-bar .qa-btn:focus-visible, body.store-mode #qr-bar .qa-go:focus-visible { box-shadow: 0 0 0 3px rgba(27,155,215,0.30); }
body.store-mode #qr-bar .qa-seg:focus-visible, body.store-mode #qr-bar .qr-sbtn:focus-visible, body.store-mode #qr-bar .qa-seg-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--qa-pri); }
body.store-mode #qr-bar .qa-go {
    height: var(--qa-h); margin: 0; padding: 0 12px; border: 1px solid var(--qa-pri) !important; border-radius: 8px;
    background: var(--qa-pri); color: #fff; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: 1px;
    white-space: nowrap; cursor: pointer; box-shadow: none;
}
body.store-mode #qr-bar .qa-go:hover:not(:disabled) { background: #1689C0; border-color: #1689C0 !important; }
body.store-mode #qr-bar .qa-go:disabled { background: #A9D6EC; border-color: #A9D6EC !important; cursor: default; }

/* ---------- 1줄 고객 ---------- */
body.store-mode #qr-bar .qa-l4 { grid-column: c1 / c2; }
body.store-mode #qr-bar .qa-hint {
    grid-column: c2 / end; display: flex; align-items: center; height: var(--qa-h); padding: 0 14px;
    border: 1px solid var(--qa-line); border-radius: 8px; background: #FAFBFC;
    font-size: 13px; line-height: 1.3; color: var(--qa-mute); overflow: hidden;
}
/* 고른 고객: 뒷자리 칸과 같은 상자 */
body.store-mode #qr-bar .qa-cust {
    grid-column: c2 / act; display: flex; align-items: center; gap: 14px; height: var(--qa-h); padding: 0 14px;
    border: 1px solid var(--qa-line); border-radius: 8px; background: #F5FAFE; overflow: hidden; white-space: nowrap;
}
body.store-mode #qr-bar .qa-who { flex: none; display: inline-flex; align-items: baseline; gap: 10px; }
body.store-mode #qr-bar .qa-who b { font-size: 15px; font-weight: 900; color: var(--qa-ink); }
body.store-mode #qr-bar .qa-ph { font-size: 14px; color: var(--qa-ink3); font-variant-numeric: tabular-nums; }
body.store-mode #qr-bar .qa-ad { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--qa-ink2); overflow: hidden; }
body.store-mode #qr-bar .qa-road { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 같은 사람인지는 동 · 호로 가리므로 상세주소는 자르지 않는다 (도로명이 먼저 줄어듦) */
body.store-mode #qr-bar .qa-det { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--qa-ink); }

/* 같은 끝자리 여러 명: 한 줄 고르기 버튼 */
/* 좁은 PC: 안내 한 줄 + 고르기 버튼 한 줄에 하나씩 (칸2 ~ 끝) */
body.store-mode #qr-bar .qa-chips { grid-column: c2 / end; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
body.store-mode #qr-bar .qa-tag {
    display: inline-flex; align-items: center; height: var(--qa-h); padding: 0 14px; border-radius: 8px;
    font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%;
}
body.store-mode #qr-bar .qa-tag-b { background: #EEF6FC; color: var(--qa-dark); }
body.store-mode #qr-bar .qa-tag-o { background: #FFF4E5; color: #B45309; }
body.store-mode #qr-bar .qr-chip.qa-chip {
    display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important;
    height: var(--qa-h) !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 14px !important;
    border: 1px solid var(--qa-line) !important; border-radius: 8px !important; background: #fff !important;
    font-family: inherit; font-size: 14px !important; color: var(--qa-ink); text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer;
}
body.store-mode #qr-bar .qr-chip.qa-chip:hover, body.store-mode #qr-bar .qr-chip.qa-chip:focus-visible { border-color: var(--qa-pri) !important; background: #F0F7FF !important; outline: none; }
body.store-mode #qr-bar .qa-chip b { flex: none; font-weight: 900; }
body.store-mode #qr-bar .qa-chip .qa-cm { flex: none; color: var(--qa-ink3); font-variant-numeric: tabular-nums; }
/* 도로명은 다 들어가면 보이고, 모자라면 잘린 조각 대신 통째로 숨긴다 (다음 줄로 넘겨 높이 밖. 전체는 title).
   상세주소(동 · 호)는 자르지 않는다 - 상세주소 하나가 칸보다 길 때만 끝이 줄어든다 (2026-10-20 '글씨가 칸 넘어가지 않게') */
body.store-mode #qr-bar .qa-chip .qa-cad { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 10px; height: 20px; line-height: 20px; overflow: hidden; }
body.store-mode #qr-bar .qa-chip .qa-cd { flex: 0 1 auto; min-width: 0; max-width: 100%; font-weight: 700; color: var(--qa-ink2); overflow: hidden; text-overflow: ellipsis; }
body.store-mode #qr-bar .qa-chip small { display: block; flex: 0 0 auto; max-width: 100%; font-size: 12.5px; color: var(--qa-mute); overflow: hidden; }

/* 처음 고객: 표시 + 이름 · 연락처 */
body.store-mode #qr-bar .qa-pair { grid-column: c3 / act; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--qa-gap); min-width: 0; }

/* ---------- 2줄 배송지: 주소 · 상세주소 / 공동현관 · 전달사항 (2026-10-20 기존 고객도 주소를 바꿀 수 있게 늘 보임) ---------- */
body.store-mode #qr-bar .qa-addr { grid-column: c1 / c3; }
body.store-mode #qr-bar .qa-detf { grid-column: c3 / end; }
body.store-mode #qr-bar .qa-door { grid-column: c1 / c2; }
body.store-mode #qr-bar .qa-memo { grid-column: c2 / end; }

/* ---------- 3줄 박스 · 접수 ---------- */
body.store-mode #qr-bar .qa-hasbox .qa-step { grid-column: c1 / c2; }
body.store-mode #qr-bar .qa-hasbox .qa-dt { grid-column: c2 / c3; }
body.store-mode #qr-bar .qa-hasbox .qa-fee { grid-column: c3 / act; }
body.store-mode #qr-bar .qa-nobox .qa-dt { grid-column: c1 / c2; }
body.store-mode #qr-bar .qa-nobox .qa-fee { grid-column: c2 / act; }
body.store-mode #qr-bar .qa-r3 .qa-go { grid-column: act / end; width: 100%; }

/* 박스 [-] N [+] */
body.store-mode #qr-bar .qr-sbtn {
    flex: none; width: 40px !important; height: 100% !important; margin: 0; padding: 0; border: 0 !important; border-radius: 0 !important;
    border-left: 1px solid var(--qa-line) !important; background: #fff; color: var(--qa-ink2);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
body.store-mode #qr-bar .qa-fl + .qr-sbtn { border-left: 0 !important; }
body.store-mode #qr-bar .qr-sbtn:hover:not(:disabled) { background: var(--qa-lbg); }
body.store-mode #qr-bar .qr-sbtn:disabled { opacity: 1; color: #C9CFD6; cursor: default; }
body.store-mode #qr-bar .qr-sbtn svg { width: 16px; height: 16px; }
body.store-mode #qr-bar .qa-sv { flex: 1 1 auto; min-width: 32px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--qa-line); font-size: 17px; font-weight: 900; color: var(--qa-ink); font-variant-numeric: tabular-nums; }

/* 즉시 / 예약 (+ 예약 시간) */
body.store-mode #qr-bar .qa-seg {
    flex: 1 1 0; min-width: 44px; height: 100%; margin: 0; padding: 0 8px; border: 0; border-radius: 0;
    background: #fff; color: var(--qa-ink3); font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
body.store-mode #qr-bar .qa-seg + .qa-seg, body.store-mode #qr-bar .qa-dt .qa-time { border-left: 1px solid var(--qa-line); }
body.store-mode #qr-bar .qa-seg:hover:not(.on) { background: var(--qa-lbg); }
body.store-mode #qr-bar .qa-seg.on { background: var(--qa-dark); color: #fff; }
body.store-mode #qr-bar .qa-dt .qa-time { flex: 1.4 1 0; min-width: 128px; padding: 0 8px 0 10px; font-weight: 700; }
body.store-mode #qr-bar .qa-dt.sch .qa-seg { flex: 1 1 0; }

/* 배달료 */
body.store-mode #qr-bar .qa-fee { align-items: stretch; }
body.store-mode #qr-bar .qa-fv { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; column-gap: 6px; padding: 0 12px; line-height: 1.25; overflow: hidden; }
body.store-mode #qr-bar .qa-fv b { font-size: 17px; font-weight: 900; color: var(--qa-pri); white-space: nowrap; }
body.store-mode #qr-bar .qa-fv .qr-note { font-size: 13px; color: var(--qa-mute); }

/* 접수 중 */
body.store-mode #qr-bar.saving .qr-row { opacity: 0.6; }

/* ---------- 좁은 PC (1024 ~ 1439): 칸 셋 같은 폭, 처음 고객은 두 줄 ---------- */
body.store-mode #qr-bar .qa-new .qa-tag { grid-column: c2 / act; }
body.store-mode #qr-bar .qa-new .qa-pair { display: contents; }
body.store-mode #qr-bar .qa-new .qa-nm { grid-column: c1 / c2; }
body.store-mode #qr-bar .qa-new .qa-tel { grid-column: c2 / c3; }
body.store-mode #qr-bar .qa-new .qa-act { grid-row: 1; }
/* '목록에 없어요 · 처음 고객' 은 버튼 칸보다 길어 고르기 버튼 아래 오른쪽 끝 */
body.store-mode #qr-bar .qa-many .qa-newbtn { grid-column: c2 / end; justify-self: end; width: auto; padding: 0 18px; }
/* 1024 ~ 1259: 고객 정보 두 줄 (이름 · 연락처 / 주소), 셋째 줄은 박스 · 즉시예약 / 배달료 · 접수 */
body.store-mode #qr-bar .qa-cust { gap: 0 14px; }
body.store-mode #qr-bar .qa-hint { font-size: 12.5px; }
}

@media (min-width: 1024px) and (max-width: 1259px) {
    /* 칸1(뒷자리 · 공동현관 · 박스)을 조금 넓게: 이름표 + 값이 잘리지 않게 */
    body.store-mode #qr-bar { --qa-cols: [lb] var(--qa-lb) [c1] minmax(var(--qa-c1min), 1.3fr) [c2] minmax(0, 1fr) [c3] minmax(0, 1fr) [act] var(--qa-act) [end]; }
    body.store-mode #qr-bar .qa-new .qa-tel { grid-column: c2 / act; }
    body.store-mode #qr-bar .qr-chip.qa-chip { font-size: 13px !important; padding: 0 12px !important; gap: 8px !important; }
    body.store-mode #qr-bar .qa-cust { flex-direction: column; align-items: stretch; justify-content: center; gap: 1px; padding: 0 12px; }
    body.store-mode #qr-bar .qa-who { gap: 8px; line-height: 17px; }
    body.store-mode #qr-bar .qa-who b { font-size: 14px; }
    body.store-mode #qr-bar .qa-ph { font-size: 13px; }
    body.store-mode #qr-bar .qa-ad { font-size: 12.5px; line-height: 16px; }
    body.store-mode #qr-bar .qa-hasbox .qa-dt { grid-column: c2 / act; }
    body.store-mode #qr-bar .qa-hasbox .qa-fee { grid-column: c1 / act; }
    body.store-mode #qr-bar .qa-nobox .qa-dt { grid-column: c1 / c3; }
    body.store-mode #qr-bar .qa-nobox .qa-fee { grid-column: c1 / act; }
    body.store-mode #qr-bar .qa-lb { font-size: 12.5px; gap: 5px; }
    body.store-mode #qr-bar .qa-lb i { width: 20px; height: 20px; font-size: 11px; }
    /* 배송지 세 줄: 주소(끝까지) / 상세주소 · 공동현관 / 전달사항(끝까지) - 주소 · 상세주소가 잘리지 않게 */
    body.store-mode #qr-bar .qa-addr { grid-column: c1 / end; }
    body.store-mode #qr-bar .qa-detf { grid-column: c1 / c3; }
    body.store-mode #qr-bar .qa-door { grid-column: c3 / end; }
    body.store-mode #qr-bar .qa-memo { grid-column: c1 / end; }
    /* 같은 끝자리 여러 명: 안내는 칸2 ~ 끝, 고르기 버튼은 칸1 ~ 끝 (이름 · 연락처 · 상세주소가 한 줄에 다 보이게) */
    body.store-mode #qr-bar .qa-many .qa-chips { display: contents; }
    body.store-mode #qr-bar .qa-many .qa-tag { grid-column: c2 / end; }
    body.store-mode #qr-bar .qa-many .qa-chip { grid-column: c1 / end; }
}

@media (min-width: 1260px) {
    body.store-mode #qr-bar { --qa-lb: 100px; --qa-act: 132px; --qa-pad: 20px; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
    body.store-mode #qr-bar .qa-fee .qa-fl { padding: 0 10px; }
    body.store-mode #qr-bar .qa-fv { padding: 0 10px; column-gap: 5px; }
    body.store-mode #qr-bar .qa-fv b { font-size: 16px; }
    body.store-mode #qr-bar .qa-fv .qr-note { font-size: 12.5px; }
}

/* ---------- 넓은 PC (1440 이상): 칸 3:4:6 (처음 고객 한 줄은 1600 이상) ---------- */
@media (min-width: 1440px) {
    body.store-mode #qr-bar {
        --qa-lb: 108px; --qa-act: 172px; --qa-gap: 12px;
        --qa-cols: [lb] var(--qa-lb) [c1] minmax(var(--qa-c1min), 3fr) [c2] minmax(0, 4fr) [c3] minmax(0, 6fr) [act] var(--qa-act) [end];
    }
    body.store-mode #qr-bar .qa-many .qa-chips { grid-column: c2 / act; }
    body.store-mode #qr-bar .qa-many .qa-newbtn { grid-column: act / end; grid-row: 1; justify-self: stretch; width: 100%; padding: 0 8px; font-size: 13px; }
    body.store-mode #qr-bar .qa-hint { font-size: 13px; }
}
@media (min-width: 1600px) {
    body.store-mode #qr-bar { --qa-lb: 120px; --qa-act: 184px; --qa-pad: 24px; }
    /* 처음 고객 한 줄 (1440 ~ 1599 는 연락처 칸이 모자라 좁은 PC 처럼 두 줄) */
    body.store-mode #qr-bar .qa-new .qa-tag { grid-column: c2 / c3; }
    body.store-mode #qr-bar .qa-new .qa-pair { display: grid; }
    body.store-mode #qr-bar .qa-new .qa-nm, body.store-mode #qr-bar .qa-new .qa-tel { grid-column: auto; }
    body.store-mode #qr-bar .qa-new .qa-act { grid-row: auto; }
    body.store-mode #qr-bar .qa-many .qa-newbtn { font-size: 14px; }
}
@media (min-width: 1760px) {
    /* 아주 넓은 PC: 안내는 칸2, 고르기 버튼은 칸3 에 한 줄씩 (처음 고객 줄의 표시 · 이름연락처 자리와 같다) */
    body.store-mode #qr-bar .qa-many .qa-chips { display: contents; }
    body.store-mode #qr-bar .qa-many .qa-tag { grid-column: c2 / c3; }
    body.store-mode #qr-bar .qa-many .qa-chip { grid-column: c3 / act; }
}

/* ============================================================
   날짜 · 버튼 줄: 같은 높이 40px, 날짜는 고정 폭, 버튼은 오른쪽 묶음
   ============================================================ */
@media (min-width: 1024px) {
body.store-mode #tab-order .filter-bar {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 10px !important; padding: 14px 16px !important; margin-bottom: 20px !important;
    border: 1px solid #E5E8EB !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
body.store-mode #tab-order .filter-bar > input[type="date"] {
    flex: 0 0 160px !important; width: 160px !important; min-width: 0 !important; height: 40px !important; margin: 0 !important;
    padding: 0 10px 0 12px !important; border: 1px solid #D5DAE0 !important; border-radius: 8px !important;
    background: #fff !important; box-shadow: none !important; font-family: inherit; font-size: 14px !important; color: #191F28 !important;
}
body.store-mode #tab-order .filter-bar > input[type="date"]:focus { border-color: #1B9BD7 !important; box-shadow: 0 0 0 3px rgba(27,155,215,0.15) !important; }
body.store-mode #tab-order .filter-bar > .filter-label { flex: none; padding: 0 2px; color: #8B95A1; font-size: 14px; }
body.store-mode #tab-order .filter-bar > .btn {
    flex: none !important; height: 40px !important; min-width: 96px; margin: 0 !important; padding: 0 16px !important;
    border: 1px solid #D5DAE0 !important; border-radius: 8px !important; box-shadow: none !important;
    background: #fff !important; color: #333D4B !important; font-family: inherit; font-size: 14px !important; font-weight: 700 !important; line-height: 38px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
body.store-mode #tab-order .filter-bar > .btn:hover { background: #F7F8FA !important; border-color: #B9C1CA !important; }
body.store-mode #tab-order .filter-bar > .btn-search { min-width: 80px; background: #0D5C8A !important; border-color: #0D5C8A !important; color: #fff !important; }
body.store-mode #tab-order .filter-bar > .btn-search:hover { background: #0A4A70 !important; border-color: #0A4A70 !important; }
body.store-mode #tab-order .filter-bar > .btn-primary { background: #1B9BD7 !important; border-color: #1B9BD7 !important; color: #fff !important; }
body.store-mode #tab-order .filter-bar > .btn-primary:hover { background: #1689C0 !important; border-color: #1689C0 !important; }
/* 지도를 연 상태(운영 코드가 인라인 빨강을 넣음)는 흰 바탕 + 빨간 글자로 (바탕색 가짓수 유지) */
body.store-mode #tab-order .filter-bar > #btn-map-toggle[style*="229, 57, 53"], body.store-mode #tab-order .filter-bar > #btn-map-toggle[style*="244, 67, 54"],
body.store-mode #tab-order .filter-bar > #btn-map-toggle[style*="E53935" i], body.store-mode #tab-order .filter-bar > #btn-map-toggle[style*="f44336" i] { color: #E53935 !important; border-color: #F3B4B2 !important; }
/* 검색 다음 버튼부터 오른쪽 끝으로. [+ 신규 주문] 이 맨 앞 (2026-10-20 사장님 지시 "신규 주문 버튼 다건 입력 보다 앞쪽에") */
body.store-mode #tab-order .filter-bar > .btn-search ~ .btn:not(.btn-search) { order: 3; }
body.store-mode #tab-order .filter-bar > #btn-order-new { order: 2; margin-left: auto !important; }
body.store-mode #tab-order .filter-bar > .btn-search + .btn:not(#btn-order-new) { margin-left: 0 !important; }
}
@media (min-width: 1260px) {
    body.store-mode #tab-order .filter-bar { padding: 14px 20px !important; }
}
@media (min-width: 1440px) {
    body.store-mode #tab-order .filter-bar > input[type="date"] { flex-basis: 168px !important; width: 168px !important; }
    body.store-mode #tab-order .filter-bar > .btn { min-width: 124px; }
    body.store-mode #tab-order .filter-bar > .btn-search { min-width: 88px; }
}
@media (min-width: 1600px) {
    body.store-mode #tab-order .filter-bar { padding: 14px 24px !important; }
}
/* 1024 ~ 1259: 날짜 · 검색 한 줄, 버튼 묶음은 아래 줄 오른쪽 */
@media (min-width: 1024px) and (max-width: 1259px) {
    body.store-mode #tab-order .filter-bar { row-gap: 0 !important; }
    body.store-mode #tab-order .filter-bar::after { content: ''; order: 1; flex: 0 0 100%; height: 0; }
    body.store-mode #tab-order .filter-bar > .btn-search ~ .btn:not(.btn-search) { margin-top: 10px !important; }
}

/* [+ 신규 주문]: 매장 PC · 폰 모두 '+' 표시 + 배차대기 숫자 칸과 같은 주황 바탕 (2026-10-20 사장님 지시 "배차대기의 주황색 ... 바탕색 ... 강조 표시처럼").
   관리자 · 총괄 · 팀장 화면은 그대로 (body.store-mode 만) */
body.store-mode #tab-order .filter-bar > #btn-order-new { background: #F59E0B !important; border-color: #F59E0B !important; color: #fff !important; box-shadow: none !important; }
body.store-mode #tab-order .filter-bar > #btn-order-new:hover { background: #D98A06 !important; border-color: #D98A06 !important; }
body.store-mode #tab-order .filter-bar > #btn-order-new::before { content: '+'; margin-right: 5px; font-weight: 900; }
/* 폰: 순서만 [검색] [+ 신규 주문] [다건입력] / [지도] [엑셀] (줄 배치 · 크기는 mobile.css 그대로) */
@media (max-width: 1023px) {
    body.store-mode #tab-order .filter-bar > .btn { order: 3; }
    body.store-mode #tab-order .filter-bar > .btn-search { order: 1; }
    body.store-mode #tab-order .filter-bar > #btn-order-new { order: 2; }
}

/* 1024~1439: 배달료 칸 안 '(부가세 별도)' 가 둘째 줄로 내려가지 않게 한 줄 */
@media (min-width: 1024px) and (max-width: 1439px) {
    body.store-mode #qr-bar .qa-fv { flex-wrap: nowrap; }
    body.store-mode #qr-bar .qa-fv .qr-note { white-space: nowrap; font-size: 12px; }
    /* 금액 없이 안내만 있을 때는 칸 안에서 두 줄 (잘리지 않게) */
    body.store-mode #qr-bar .qa-fv .qr-note:only-child { white-space: normal; line-height: 15px; }
}