/**
 * vendor.css — 도시락 업체(foodbox) 콘솔 전용 스타일 (VENDOR 에이전트 소유)
 * 공유 베이스는 /style.css. 이 파일은 vendor.html 에서만 로드되므로 vendor 한정 오버라이드 안전.
 * 링크 순서: /style.css → /css/vendor.css
 */

/* ── 넓은 레이아웃(콘솔은 데스크톱 활용) ── */
.wrap { max-width: 920px; }
.topbar-in { max-width: 920px; }

/* ── 상단바: 이름 + 로그아웃 ── */
.topbar .who { gap: 10px; }
.topbar .who .uname { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); }
.topbar .who .uname .av { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #8b7ff7, var(--brand)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; box-shadow: 0 3px 8px rgba(108,96,244,.32); }
.topbar .who .rolechip { font-size: 11px; font-weight: 800; color: var(--brand-dark); background: var(--brand-soft); padding: 3px 9px; border-radius: 999px; }
.topbar .who .btn.logout { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
@media (max-width: 560px) { .topbar .who .rolechip, .topbar .who .homelink { display: none; } }
/* ── 모바일 헤더: 한 줄 유지·이름 말줄임·로그아웃 안 깨짐(additive) ── */
@media (max-width: 480px) {
  .topbar-in { padding: 10px 12px; gap: 8px; }
  .brand { min-width: 0; gap: 7px; }
  .brand .blogo { width: 26px; height: 26px; }
  .brand .bwm { font-size: 15.5px; line-height: 1.12; }
  .brand .bwm span { white-space: nowrap; }
  .topbar .who { gap: 7px; min-width: 0; flex: 0 1 auto; }
  .topbar .who .uname { display: inline-block; max-width: 38vw; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; vertical-align: middle; }
  .topbar .who .uname .av { width: 23px; height: 23px; font-size: 12px; flex: 0 0 auto; vertical-align: middle; margin-right: 5px; }
  .topbar .who .btn.logout { flex: 0 0 auto; white-space: nowrap; padding: 6px 11px; font-size: 12px; }
}

/* ── 로그인 히어로 ── */
.authwrap { display: flex; justify-content: center; padding: 34px 0 0; }
.authcard { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg, 0 18px 50px rgba(60,50,140,.16)); overflow: hidden; }
.authhero { background: radial-gradient(120% 120% at 50% 0%, #efeaff 0%, #f7f5ff 60%, #fff 100%); padding: 22px 22px 6px; text-align: center; }
.authhero img { width: 78%; max-width: 320px; height: auto; filter: drop-shadow(0 14px 26px rgba(108,96,244,.22)); }
.authbody { padding: 8px 26px 28px; }
.authbody h2 { font-size: 21px; letter-spacing: -.03em; margin: 0 0 4px; }

/* ── 콘솔 환영 배너 ── */
.vhero { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px 18px; border-radius: 20px;
  background: linear-gradient(120deg, #6c60f4 0%, #8b7ff7 55%, #a9a0fb 100%); color: #fff; box-shadow: 0 12px 30px rgba(108,96,244,.30); overflow: hidden; position: relative; }
.vhero .vhero-img { width: 96px; height: 72px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
.vhero .vhero-txt { flex: 1; min-width: 0; }
.vhero .vhero-hi { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.vhero .vhero-sub { font-size: 13px; opacity: .92; margin-top: 2px; }
.vhero .vhero-badge { font-size: 11.5px; font-weight: 800; background: rgba(255,255,255,.22); padding: 4px 11px; border-radius: 999px; backdrop-filter: blur(4px); }
@media (max-width: 480px) { .vhero .vhero-img { width: 66px; height: 52px; } .vhero .vhero-hi { font-size: 16px; } }

/* ── 탭바: 9개 → 가로 스크롤 pill ── */
.tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tabs::-webkit-scrollbar { height: 5px; }
.tabs::-webkit-scrollbar-thumb { background: #d9d1ee; border-radius: 4px; }
.tabs button { flex: 0 0 auto; white-space: nowrap; padding: 10px 15px; }

/* ── 다열 테이블 모바일 가로 스크롤 ── */
.tblscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tblscroll table { min-width: max-content; }

/* ── 신청자 확인 결과: 조회된 날짜 표시(선택 날짜와 결과 일치 확인) ── */
.roster-datehead { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; font-size: 14px; font-weight: 700; color: var(--brand-dark); }
.roster-datehead .hic { width: 17px; height: 17px; }
.roster-datehead b { font-size: 15px; }

/* ── 급식표/집계 숫자 가독성 ── */
#cBoard table td.center b, #cMenus table td.center { font-variant-numeric: tabular-nums; }
#boardBox input[type="checkbox"] { accent-color: var(--brand); cursor: pointer; }

/* ── 배송 가능 지역 칩 ── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; font-weight: 700; }

/* ── 배송 요일 선택 ── */
.wdrow { display: flex; flex-wrap: wrap; gap: 6px; }
.wdrow .wd { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1.5px solid var(--line); border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.wdrow .wd:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.wdrow .wd input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }

/* ── 문자 수신자 목록 ── */
.reclist { max-height: 260px; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1.5px solid var(--line); border-radius: 12px; padding: 6px; }
.reclist .rec { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.reclist .rec:hover { background: var(--brand-soft); }
.reclist .rec input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.reclist .rec .muted { font-size: 12px; }

/* ── 적립금 집계 칩(충전/사용/환불/잔액) ── */
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 12px; }
.statrow .stat { background: #faf9ff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 10px; text-align: center; }
.statrow .stat .lb { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.statrow .stat .vv { font-size: 16px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.statrow .stat.bal { background: var(--brand-soft); border-color: #d9d1ff; }
.statrow .stat.bal .vv { color: var(--brand-dark); }
.statrow .stat.chg .vv { color: var(--salad); }
.statrow .stat.ref .vv { color: var(--danger, #dc2626); }
@media (max-width: 520px) { .statrow { grid-template-columns: repeat(2, 1fr); } }

/* ── PG 준비중(카드결제 잠금) ── */
.soon { display: inline-block; font-size: 11px; font-weight: 800; color: #9a6a00; background: #fff2d6; border: 1px solid #ffe0a3; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.pg-locked { opacity: .55; pointer-events: none; }
.pg-note { font-size: 12px; color: #9a6a00; background: #fff8ea; border: 1px dashed #ffe0a3; border-radius: 10px; padding: 8px 11px; margin-top: 6px; }

/* ── 호버 툴팁 ── */
.tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: 11px; font-weight: 800; cursor: help; vertical-align: middle; }
.tip .tiptext { visibility: hidden; opacity: 0; position: absolute; z-index: 30; bottom: 140%; left: 50%; transform: translateX(-50%); width: 250px; background: #2a2540; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.5; padding: 10px 12px; border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.25); transition: opacity .15s; }
.tip:hover .tiptext, .tip:focus .tiptext { visibility: visible; opacity: 1; }
.tip .tiptext b { color: #ffd; }

/* ── 배송관리 리스트 ── */
.dvrow { display: grid; grid-template-columns: 1.4fr 1fr 1.6fr 1fr auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dvrow .aca { font-weight: 700; }
@media (max-width: 640px) { .dvrow { grid-template-columns: 1fr 1fr; } }

/* ── 대화형 등록(온보딩) ── */
.obcheck { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.obci { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; }
.obci.done { border-color: #cde7d8; background: #f4fbf6; }
.obci .obck { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.obci.done .obck { background: var(--salad); color: #fff; }
.obprog { height: 8px; background: #eee9fb; border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.obprog .obprog-bar { height: 100%; background: linear-gradient(90deg, #8b7ff7, var(--brand)); border-radius: 999px; transition: width .25s; }
.obstepnum { font-size: 12px; font-weight: 800; color: var(--brand-dark); letter-spacing: .02em; }

/* ── 급식표: 반찬 칩 미리보기(#13) ── */
.menuchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.menuchips .mchip { display: inline-block; padding: 5px 11px; border-radius: 999px; background: #eef7f1; color: #1c7a48; border: 1px solid #cde7d8; font-size: 13px; font-weight: 700; }

/* ── 급식표: 여러 날짜 등록 박스 ── */
.multibox { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; background: #fafaff; }
.multibox > summary { list-style: none; }
.multibox > summary::-webkit-details-marker { display: none; }

/* ── 급식표 등록: 방식 전환 · 날짜/끼니 강조 · 여러개 넣기 ── */
.regmode { margin-bottom: 12px; }
.menu-primary { background: var(--brand-soft); border: 1px solid #ddd6ff; border-radius: 14px; padding: 12px 12px 4px; margin: 2px 0 10px; }
.menu-primary .fld { color: var(--brand-dark); }
.menu-bulk { margin-top: 18px; }
/* 여러개 넣기: 큰 진입 배너 */
.bigbatch { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1.5px dashed var(--brand); background: #faf9ff; border-radius: 16px; padding: 16px 18px; }
.bigbatch-ic { font-size: 30px; line-height: 1; }
.bigbatch-tx { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 3px; }
.bigbatch-tx b { font-size: 15px; color: #2a2540; }
.bigbatch-tx span { font-size: 13px; color: var(--muted); }
.bigbatch-btn { max-width: 230px; }

/* ── 여러개 넣기 모달(할일추가 스타일: 좌 기간 · 우 끼니) ── */
.mm-tx { width: 100%; min-height: 62px; padding: 11px 13px; border: 1.5px solid rgba(108,96,244,.16); border-radius: 12px; font-family: inherit; font-size: 14px; box-sizing: border-box; color: #1c1826; background: rgba(255,255,255,.6); resize: vertical; }
.mm-tx:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(108,96,244,.14); }
.mm-mini.danger { background: linear-gradient(135deg, #e05656, #d64545); box-shadow: 0 6px 16px -6px rgba(214,69,69,.6); }
.tplmodal-list { display: flex; flex-direction: column; gap: 6px; }
.tplmodal-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(108,96,244,.14); border-radius: 11px; background: rgba(255,255,255,.5); }
.tplmodal-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tplmodal-tx b { font-size: 13.5px; color: #2a2540; }
.tplmodal-tx span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-tpl { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.batch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.batch-pane { min-width: 0; }
.batch-hd { font-weight: 800; font-size: 14.5px; color: #2a2540; margin: 2px 0 8px; }
.batchmode { gap: 6px; margin-bottom: 10px; }
.batchmode .btn { flex: 1; }
.bcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bcal-head b { font-size: 14px; color: var(--brand-dark); font-weight: 800; }
.bcal-nav { border: 1px solid var(--line); background: #fff; border-radius: 9px; width: 30px; height: 30px; cursor: pointer; color: var(--brand-dark); font-size: 16px; font-weight: 800; }
.bcal-nav:hover { background: var(--brand-soft); }
.bcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.bcal-dow { text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); padding: 3px 0; }
.bcal-dow.sun { color: #dc2626; }
.bcal-cell { border: 1px solid var(--line); background: #fff; border-radius: 9px; aspect-ratio: 1 / 1; font-size: 13px; font-weight: 700; color: #45454f; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.bcal-cell:hover { background: var(--brand-soft); }
.bcal-cell.empty { border: 0; background: transparent; cursor: default; }
.bcal-cell.today { box-shadow: inset 0 0 0 2px #b9afff; }
.bcal-cell.sel { background: linear-gradient(135deg, #6c60f4, #8a7dff); color: #fff; border-color: transparent; box-shadow: 0 6px 14px -6px rgba(108,96,244,.7); }
.bwdrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bwdrow .bwd { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; font-size: 13px; font-weight: 800; color: #45454f; cursor: pointer; }
.bwdrow .bwd.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.bmeal { border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; margin-bottom: 10px; background: rgba(255,255,255,.55); }
.bmeal-hd { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 4px; cursor: pointer; }
.bmeal-hd input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }
.bmeal-body { transition: opacity .15s; }
.batch-card .mm-bd { padding-left: 20px; padding-right: 20px; }
@media (max-width: 640px) { .batch-grid { grid-template-columns: 1fr; } }

/* ── 최소수량 미달 배지·경고(#16) ── */
.mqbadge { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.mqbadge.ok { color: #1c7a48; background: #eaf7ef; border: 1px solid #cde7d8; }
.mqbadge.bad { color: #dc2626; background: #fdeaea; border: 1px solid #f6c9c9; }
.alertcard { border: 1px solid #f6c9c9; background: #fff5f5; border-radius: 16px; padding: 14px 16px; margin: 0 0 14px; }
.alertcard > b { color: #c81e1e; font-size: 15px; }
.alertcard tr.imminent { background: #fff0f0; }
.badge-danger { display: inline-block; font-size: 10.5px; font-weight: 800; color: #fff; background: #dc2626; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
/* ── 환불 방식 뱃지(적립금 내역) ── */
.rbadge { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.rbadge.acc { color: #1c5aa8; background: #eaf1fb; border: 1px solid #cadcf3; }
.rbadge.card { color: #8a3ab0; background: #f5ecfb; border: 1px solid #e5d2f2; }
/* 신청자 시나리오 뱃지 */
.rbadge.warn { color: #9a6a00; background: #fff2d6; border: 1px solid #ffe0a3; margin-left: 4px; }
.rbadge.danger { color: #b91c1c; background: #fdecec; border: 1px solid #f7c6c6; margin-left: 4px; }
.rbadge.new { color: #1f7a4d; background: #e6f7ee; border: 1px solid #bfe6d1; margin-left: 4px; }
/* 문자 대상 목록: 잔액 부족 강조 */
.warn-tx { color: #b45309; font-weight: 600; }

/* ── 매출·정산 표 합계행(#15) ── */
#salesBox tfoot td { border-top: 2px solid var(--line); background: var(--brand-soft); }

/* ── 업체 탈퇴 경고(#2) ── */
.wd-warn { font-size: 13px; line-height: 1.6; color: #8a1c1c; background: #fff1f1; border: 1px solid #ffcaca; border-radius: 12px; padding: 11px 13px; }
.wd-warn b { color: #c81e1e; }

/* ── 배송장/납품서 리스트 카드 ── */
.dvcard { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 0 0 12px; background: #fafafe; }
.dvcard .dvhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dvcard .dvhead b { font-size: 15px; }

/* ══════════════════════════════════════════════════════════════
   글라스모피즘 고도화 — 반투명+blur · 브랜드 그라데이션(#6c60f4→#8a7dff)
   · 등장/호버 애니메이션 (landing.css 통일 톤, 모바일 우선)
   ══════════════════════════════════════════════════════════════ */

/* ── 브랜드 그라데이션 배경(글라스 blur가 살아나도록) ── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 42% at 12% -4%, rgba(108, 96, 244, .16), transparent 62%),
    radial-gradient(52% 40% at 104% 6%, rgba(138, 125, 255, .14), transparent 60%),
    linear-gradient(180deg, #f6f4ff 0%, #fbfaff 34%, #ffffff 100%);
}

/* ── 콘솔 카드: 반투명 유리 ── */
.card {
  background: linear-gradient(158deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .62));
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .68);
  box-shadow: 0 12px 36px rgba(76, 60, 200, .12), inset 0 1px 0 rgba(255, 255, 255, .6);
  animation: vRise .42s cubic-bezier(.2, .7, .3, 1) both;
}
.card:hover { box-shadow: 0 18px 46px rgba(76, 60, 200, .18), inset 0 1px 0 rgba(255, 255, 255, .7); }

/* ── 로그인 히어로(트럭 이미지) 글라스 ── */
.authcard {
  background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(247, 245, 255, .58));
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 24px 60px rgba(60, 50, 140, .2), inset 0 1px 0 rgba(255, 255, 255, .6);
  animation: vHeroIn .5s cubic-bezier(.2, .7, .3, 1) both;
}
.authhero {
  background:
    radial-gradient(120% 130% at 50% -10%, rgba(108, 96, 244, .22) 0%, rgba(138, 125, 255, .1) 45%, transparent 72%),
    linear-gradient(180deg, rgba(239, 234, 255, .6), rgba(255, 255, 255, .2));
  position: relative;
}
.authhero img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.authcard:hover .authhero img { transform: translateY(-4px) scale(1.02); }

/* ── 콘솔 환영 배너: 그라데이션 + 유리 광택 ── */
.vhero {
  background: linear-gradient(120deg, #6c60f4 0%, #8a7dff 55%, #a9a0fb 100%);
  animation: vHeroIn .5s cubic-bezier(.2, .7, .3, 1) both;
}
.vhero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 88% -20%, rgba(255, 255, 255, .28), transparent 60%);
}

/* ── 리포트(매출·정산 · 문자) 유리 타일 ── */
.statrow .stat {
  background: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(250, 249, 255, .5));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 6px 18px rgba(76, 60, 200, .08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.statrow .stat:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(76, 60, 200, .16); }
.statrow .stat.bal { background: linear-gradient(150deg, #6c60f4, #8a7dff); border-color: transparent; }
.statrow .stat.bal .lb { color: rgba(255, 255, 255, .85); }
.statrow .stat.bal .vv { color: #fff; }

/* ── 급식표·리포트 표: 유리 컨테이너 + 행 호버 ── */
.tblscroll {
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .32));
}
#menuTable .tblscroll, #salesBox .tblscroll, #smsReportBox .tblscroll, #vrosterBox .tblscroll { border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 6px 18px rgba(76, 60, 200, .07); }
#menuTable tbody tr, #vrosterBox tbody tr, #salesBox tbody tr, #smsReportBox tbody tr { transition: background .14s ease; }
#menuTable tbody tr:hover, #vrosterBox tbody tr:hover, #salesBox tbody tr:hover, #smsReportBox tbody tr:hover { background: rgba(108, 96, 244, .06); }

/* ── 배송장/경고 카드 유리 호버 ── */
.dvcard, .alertcard { transition: transform .16s ease, box-shadow .16s ease; }
.dvcard:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(76, 60, 200, .14); }

/* ── 등장 애니메이션 ── */
@keyframes vRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes vHeroIn { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: none; } }

/* ── 접근성: 모션 최소화 요청 시 애니메이션·호버 이동 해제 ── */
@media (prefers-reduced-motion: reduce) {
  .card, .authcard, .vhero { animation: none; }
  .statrow .stat, .dvcard, .authhero img, #menuTable tbody tr, #vrosterBox tbody tr { transition: none; }
  .statrow .stat:hover, .dvcard:hover, .authcard:hover .authhero img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   디자이너 감사 #3 — 가독성·색 통일·접근성·설정 그룹화
   ══════════════════════════════════════════════════════════════ */

/* ── 가독성: 옅은 회색 작은 글씨 대비·크기 상향(13px+) ── */
.hint { font-size: 13px; line-height: 1.55; }
.card .fld .muted, .card label .muted { font-size: 12.5px; }

/* ── 색 통일: 기본 pill의 베이지(#f2ede7/#7c7367) → 쿨 그레이(보라 계열과 조화) ── */
.pill { background: #eef0f6; color: #5b6474; }
.pill.closed { background: #eef0f6; color: #7b8494; }

/* ── 필수 표시: ＊필수(빨강) 통일 ── */
.req { color: var(--danger, #dc2626); font-weight: 800; font-size: 14px; margin-left: 3px; white-space: nowrap; }

/* ── 접근성: 칩 삭제(×)를 button 으로 ── */
.chip { display: inline-flex; align-items: center; }
.chip-x { border: 0; background: transparent; color: var(--brand-dark); font-weight: 800; font-size: 14px; line-height: 1; margin-left: 5px; padding: 0 3px; cursor: pointer; border-radius: 6px; }
.chip-x:hover { background: rgba(108, 96, 244, .16); }
.chip-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── 설정 탭: 소제목으로 그룹 시각 구분 + 경계선 ── */
.setgrp { display: flex; align-items: center; gap: 7px; margin: 22px 0 8px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.setgrp:first-of-type { margin-top: 10px; }
.setgrp .hic { color: var(--brand); }
.setgrp .gm { font-weight: 500; font-size: 12.5px; color: var(--muted); letter-spacing: 0; }
.setgrp .tip { margin-left: 2px; }

/* ── 설정 저장 안내 배너 ── */
.save-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 20px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  color: var(--brand-dark); background: var(--brand-soft); border: 1px solid #d9d1ff; border-radius: 12px; }
.save-note .hic { flex: 0 0 auto; margin-top: 1px; color: var(--brand); }

/* ══════════════════════════════════════════════════════════════
   서브탭(급식표·적립금·설정·관리학원 내부 탭) — 콘솔 .tabs 스타일 재사용
   ══════════════════════════════════════════════════════════════ */
.subtabs { margin-top: 12px; }
.subtabs button { padding: 9px 14px; font-size: 13.5px; }

/* ── 환불 점유인증 박스(적립금 관리) ── */
.refund-verify { margin-top: 12px; padding: 12px 13px; border: 1px solid #f6c9c9; background: #fff7f7; border-radius: 13px; }
.refund-verify .fld { color: #a11d1d; }
.refund-verify.ok { border-color: #cde7d8; background: #f4fbf6; }
.refund-verify.ok .fld { color: #1c7a48; }

/* ── 목록 이름 클릭(적립금/문자 모달 진입) ── */
.namebtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 800; color: var(--brand-dark); cursor: pointer; text-align: left; border-bottom: 1px dashed rgba(108,96,244,.5); }
.namebtn:hover { color: var(--brand); border-bottom-color: var(--brand); }
.namebtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── 페이지네이션 ── */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.pager button { min-width: 34px; height: 32px; padding: 0 9px; border: 1.5px solid var(--line); background: #fff; border-radius: 9px; font-size: 13px; font-weight: 700; color: #45454f; cursor: pointer; }
.pager button:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.pager button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager button:disabled { opacity: .4; cursor: default; }
.pager .pinfo { font-size: 12.5px; color: var(--muted); margin: 0 4px; }

/* ══════════════════════════════════════════════════════════════
   급식표 확인 = 월 캘린더 (학원 콘솔 renderCal 스타일 이식 · vendor는 academy.css 미로드)
   ══════════════════════════════════════════════════════════════ */
.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cal-lg { display: inline-flex; align-items: center; gap: 6px; }
.cal-lg::before { content: ''; width: 14px; height: 14px; border-radius: 5px; display: inline-block; }
.cal-lg.open::before { background: #d1fae5; border: 1.5px solid #047857; }
.cal-lg.closed::before { background: #eef1f5; border: 1.5px solid #cbd0d8; }
/* 미등록 = 개별 메뉴도 사진 급식표도 없는 날(학부모 화면엔 '준비중') — 막아 둔 '미제공'과 눈으로 구분되게 사선 */
.cal-lg.none::before { background: repeating-linear-gradient(45deg, #fff 0 4px, #f1eefb 4px 8px); border: 1.5px dashed #c9c2dd; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; }
.cal-head b { font-size: 16px; font-weight: 800; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-dow.sun { color: #dc2626; }
.cal-cell { position: relative; aspect-ratio: 1/1; border-radius: 10px; border: 1.5px solid transparent; }
.cal-cell.empty { background: transparent; }
.cal-cell.split { display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1.5px solid var(--line); background: #fff; }
.cal-cell.split .dn { position: absolute; top: 2px; left: 4px; z-index: 2; font-size: 11px; font-weight: 800; color: #6b6577; background: rgba(255, 255, 255, .82); border-radius: 5px; padding: 0 3px; line-height: 1.4; }
.cal-cell.split.today { outline: 2px solid var(--warn, #f59e0b); outline-offset: -2px; }
.cal-half { flex: 1; width: 100%; border: 0; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-end; font-family: inherit; padding: 2px 5px; }
.cal-half .hl { font-size: 9.5px; font-weight: 800; opacity: .85; }
.cal-half.lunch { border-bottom: 1px solid #fff; }
/* 2색 통일: 노출=초록/노랑(신청 받는 중) / 신청 불가=회색(미노출·미등록 통합) */
.cal-half.open { background: #d1fae5; color: #047857; font-weight: 700; }
.cal-half.dinner.open { background: #fef3c7; color: #b45309; }
.cal-half.closed, .cal-half.none { background: #eef1f5; color: #9aa2af; }
.cal-half.closed .hl { text-decoration: line-through; }
/* 미등록(등록도 급식표도 없음) = 사선. 업체가 막은 '미제공'(민무늬 회색)과 한눈에 구분된다. */
.cal-half.none { background: repeating-linear-gradient(45deg, #fbfaff 0 5px, #f1eefb 5px 10px); color: #9990b5; }
/* 미운영(저녁을 아예 안 하는 업체의 저녁 칸) = 사선 없이 조용하게 — '미등록' 경고와 섞이지 않게. */
.cal-half.none.quiet { background: #fbfaff; color: #cfc9dd; }
.cal-half.none.quiet .cmenu { font-weight: 400; }
.cal-half:active { filter: brightness(.95); }
.cal-half:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ── 배송 요일 격자(학원 운영일 스타일) + 배송일 달력 (배송관리 모달) ── */
.dvsg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; }
.dvsg-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; transition: .12s; }
.dvsg-cell.sun { color: #dc2626; }
.dvsg-cell.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.dvsg-cell .dvsg-dot { font-size: 10px; line-height: 1; min-height: 10px; color: var(--brand); }
.dvsg-cell:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cal-cell.day { display: flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid var(--line); font-size: 13px; font-weight: 700; color: #6b6577; cursor: pointer; }
.cal-cell.day.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); font-weight: 800; }
.cal-cell.day.today { outline: 2px solid var(--warn, #f59e0b); outline-offset: -2px; }
.cal-cell.day:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* 배송 설정 — 끼니(점심/저녁)별 섹션 + 요일 격자 색 구분(점심 보라·저녁 주황) */
.dv-meal-sec { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.dv-meal-sec.lunch { border-color: #d9d1ff; background: #faf9ff; }
.dv-meal-sec.dinner { border-color: #ffe0c2; background: #fffaf5; }
.dv-meal-hd { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.dv-meal-sec.lunch .dv-meal-hd { color: var(--brand-dark); }
.dv-meal-sec.dinner .dv-meal-hd { color: #c2410c; }
.dvsg.dinner .dvsg-cell.on { border-color: #f59e0b; background: #fff2e6; color: #c2410c; }
.dvsg.dinner .dvsg-cell.on .dvsg-dot { color: #f59e0b; }
/* 제공 달력 — 점심(중)·저녁(석) 반쪽. 제공=색, 미제공=사선 */
.dm-legend { display: flex; gap: 12px; align-items: center; margin: 6px 0 2px; font-size: 12px; font-weight: 700; }
.dm-lg.lunch { color: var(--brand-dark); }
.dm-lg.dinner { color: #c2410c; }
.dm-lg.off { color: #b7b2c0; }
.cal-half.dm.lunch.on { background: var(--brand-soft); color: var(--brand-dark); }
.cal-half.dm.dinner.on { background: #fff2e6; color: #c2410c; }
.cal-half.dm.off { background: repeating-linear-gradient(-45deg, #f7f6fb, #f7f6fb 4px, #efedf5 4px, #efedf5 8px); color: #cfc9dd; }
.cal-half.dm.off .hl { text-decoration: line-through; }
/* 배송 설정 대시보드 표 — 학원별 점심·저녁 제공요일·배달시각 한눈에 */
.dv-tablewrap { overflow-x: auto; margin-top: 4px; }
.dv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dv-table thead th { text-align: left; font-weight: 800; color: var(--muted); font-size: 12px; padding: 8px 10px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.dv-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dv-table tbody tr.dv-tr { cursor: pointer; transition: background .12s; }
.dv-table tbody tr.dv-tr:hover { background: var(--brand-soft); }
.dv-table .dv-aca b { font-size: 14px; }
.dv-table .dv-wd { font-weight: 700; }
.dv-table .dv-l .dv-wd { color: var(--brand-dark); }
.dv-table .dv-d .dv-wd { color: #c2410c; }
.dv-table .dv-off { color: #b7b2c0; font-weight: 700; }
.dv-table .dv-x { text-align: right; white-space: nowrap; }
.cal-half.dm.lunch { border-bottom: 1px solid #fff; }

/* ══════════════════════════════════════════════════════════════
   모바일 반응형 (≤420px) — 버튼·입력·표·탭 넘침/깨짐 방지 (레이아웃만)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  /* seg: 좁은 화면에서 줄바꿈, 자식은 한 줄 폭 확보(넘침 방지) */
  .seg { flex-wrap: wrap; gap: 8px; }
  .seg > div, .seg > input, .seg > select, .seg > textarea { flex: 1 1 100%; min-width: 0; }
  /* 입력·선택·텍스트영역은 폭 100%로 고정(가로 넘침 차단) */
  .card input:not([type="checkbox"]):not([type="radio"]),
  .card select, .card textarea { max-width: 100%; box-sizing: border-box; }
  /* 표는 가로 스크롤 컨테이너(.tblscroll) 안에서만 넘치도록(테이블은 이미 래핑됨) */
  .tblscroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 탭 pill: 좁은 폭에 맞춰 여백·글자 축소(가로 스크롤 유지) */
  .tabs button { padding: 9px 12px; font-size: 13px; }
  /* 신청자 확인 필터: 라벨+입력을 세로로 또렷하게 한 줄씩 접기.
     각 필드·버튼에 인라인 flex:1;min-width:Npx 가 걸려 있어(스타일시트보다 우선) !important 로 무력화해야 실제 폰에서 세로로 접힘.
     입력은 크게(iOS 확대 방지 16px, 탭 영역 44px). 데스크톱(>420px)은 영향 없음. */
  #rSubStudents .seg { gap: 10px; }
  #rSubStudents .seg > div,
  #rSubStudents .seg > .btn { flex: 1 1 100% !important; min-width: 0 !important; align-self: stretch !important; }
  #rSubStudents input[type="date"],
  #rSubStudents input[type="text"],
  #rSubStudents select { min-height: 44px; font-size: 16px; }
  #rSubStudents .roster-datehead { font-size: 13.5px; }
  /* 적립금 통계 타일 2열 */
  .statrow { grid-template-columns: repeat(2, 1fr); }
  /* 배송관리 그리드 2열로 접힘 */
  .dvrow { grid-template-columns: 1fr 1fr; }
  /* 캘린더: 좁은 화면 간격·글자 축소 */
  .cal { gap: 3px; }
  .cal-cell.split .dn { font-size: 10px; }
  .cal-half .hl { font-size: 9px; }
  .subtabs button { padding: 8px 11px; font-size: 12.5px; }
}

/* 급식표 달력: 끼니 반쪽 안 메뉴 일부 노출 */
.cal-half { flex-direction: column; line-height: 1.1; padding: 2px 1px; gap: 1px; }
.cal-half .hl { font-weight: 800; font-size: 11px; }
.cal-half .cmenu { font-size: 8.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* 미등록 칸도 '미등록' 라벨을 보여 준다 — 비어 보이면 업체가 "노출 중"으로 오해한다(학부모 화면엔 '준비중'). */
.cal-half.none .cmenu { display: block; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   로그인 교차 안내(.xnav) — 다른 관계자용 로그인/화면으로 이동
   로그인 카드 하단 전용. 모바일(360·375)에서도 세로로 크게·또렷하게.
   additive · vendor.html 로그인 화면에만 노출(콘솔 내부 아님).
   ══════════════════════════════════════════════════════════════ */
.xnav { margin-top: 18px; }
.xnav-t {
  font-size: 13px; font-weight: 800; color: var(--muted);
  text-align: center; margin: 0 0 10px;
}
.xnav-link {
  display: flex; align-items: center; gap: 11px;
  width: 100%; box-sizing: border-box; min-height: 58px;
  padding: 12px 14px; margin-top: 9px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color .14s, background .14s, box-shadow .14s, transform .06s;
}
.xnav-link:hover { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 6px 18px rgba(108,96,244,.14); }
.xnav-link:active { transform: scale(.98); }
.xnav-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.xnav-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; }
.xnav-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.xnav-tx b { font-size: 14.5px; font-weight: 800; color: var(--ink, #1c1826); line-height: 1.25; word-break: keep-all; }
.xnav-tx span { font-size: 12.5px; color: var(--muted); line-height: 1.3; word-break: keep-all; }
.xnav-arr { flex: 0 0 auto; font-size: 18px; font-weight: 900; color: var(--brand); }

/* ══════════════════════════════════════════════════════════════
   모바일 콘솔 마감(360·375폭) — 헤더·탭·터치영역·모달 다듬기
   전부 additive · ≤480/≤380 미디어쿼리 한정 → 데스크톱(>480) 무영향.
   기존 id·함수·동작 보존. 표는 이미 .tblscroll 로 가로 스크롤됨.
   ══════════════════════════════════════════════════════════════ */

/* 모달 안 체크박스·라디오·파일은 자연 크기로(공유 .mm-bd input{width:100%} 가
   체크박스까지 100%로 키워 라벨을 깨뜨리던 문제 교정 — 여러개 넣기/배송 모달 등).
   .mm-ov 스코프라 vendor 모달에만, 전 폭 공통(데스크톱도 개선) · additive. */
.mm-ov .mm-bd input[type="checkbox"],
.mm-ov .mm-bd input[type="radio"] { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; accent-color: var(--brand); }
.mm-ov .mm-bd input[type="file"] { width: auto; max-width: 100%; }

/* 페이지 자체가 가로로 밀리지 않도록(내부 스크롤 컨테이너는 예외) */
@media (max-width: 480px) {
  html, body { overflow-x: hidden; }
  .wrap { overflow-x: clip; }
}

@media (max-width: 480px) {
  /* ── 탭바(메인·서브): 손가락 탭 영역 확보 + 가로 스크롤 여운(끝에 페이드) ── */
  .tabs { position: relative; padding-bottom: 2px; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
  .tabs button { min-height: 42px; scroll-snap-align: start; }
  .subtabs button { min-height: 40px; }
  /* 서브탭은 페이드 없이(짧아 잘림 오해 방지) */
  .tabs.subtabs { -webkit-mask-image: none; mask-image: none; }

  /* ── 콘솔 버튼 터치영역: 작은 버튼도 최소 40px 높이 ── */
  .cpane .btn.sm, .cpane .btn.ghost.sm { min-height: 40px; }
  .cpane .btn { min-height: 44px; }
  .pager button { min-height: 40px; }

  /* ── 조회·필터 행: 좁은 폭에서 2열로 가지런히 ──
     증상(입금 처리 이력 등 실측): [조회기준][시작일] / [종료일][상태][조회] / [초기화] 처럼
          칸 폭이 제각각(inline flex:1 / 0 0 auto)이라 줄마다 개수가 달라지고 버튼만 홀로 떨어짐.
     해결: 콘솔 안 .seg 의 입력칸과 일반 버튼을 반폭으로 고정해 2열 격자로 흐르게 한다.
          inline style 를 이겨야 하므로 !important. 퀵버튼(.sm: 오늘·최근7일…)은 그대로 4개 한 줄.
     주의: #prodList·#mSubPrice·#vAccNo 등 화면별 예외는 id 스코프라 이 규칙보다 우선한다. */
  .cpane .seg > div { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }
  .cpane .seg > .btn:not(.sm) { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }

  /* ── 헤더 히어로: 좁은 폭 겹침·잘림 방지 ── */
  .vhero { gap: 11px; padding: 14px 15px; }
  .vhero .vhero-txt { min-width: 0; }
  .vhero .vhero-hi { font-size: 15.5px; }
  .vhero .vhero-sub { font-size: 12px; }
  .vhero .vhero-badge { flex: 0 0 auto; align-self: flex-start; }

  /* ── 모달(적립금·문자·주문취소·배송설정·여러개 넣기 등): 좁은 폭 여백 축소·확대방지 ── */
  .mm-ov .mm-hd { padding-left: 16px; padding-right: 16px; }
  .mm-ov .mm-bd { padding-left: 16px; padding-right: 16px; }
  .mm-ov .mm-ac { padding-left: 16px; padding-right: 16px; flex-wrap: wrap; }
  .mm-ov .mm-ac .mm-btn { min-height: 46px; flex: 1 1 auto; }
  /* 모달 안 입력은 16px 로(iOS 자동 확대 방지) */
  .mm-ov .mm-bd input, .mm-ov .mm-bd select, .mm-ov .mm-bd textarea,
  .mm-ov .mm-bd .mm-tx { font-size: 16px; }
  /* 여러개 넣기 모달 내부 필드 터치영역 */
  .mm-ov .batch-card select, .mm-ov .batch-card input,
  .mm-ov .batch-card .bcal-cell, .mm-ov .batch-card .bwdrow .bwd { min-height: 40px; }
}

/* ── 메뉴·가격(품목 목록·품목 추가): 모바일에서 칸이 뒤섞이지 않게 세로로 정돈 ──
   증상: 썸네일·사진버튼·품목명·단가·노출·저장·예약변경·삭제가 모두 같은 flex 줄에서
        제각각 줄바꿈되어 '원' 라벨과 삭제 버튼이 엉뚱한 줄에 놓임.
   해결: 한 행을 [썸네일+사진] / [품목명] / [단가] / [노출·저장·예약변경·삭제] 4단으로 고정. */
@media (max-width: 480px) {
  /* 썸네일과 '메뉴 사진' 버튼이 양 끝으로 벌어지지 않도록 왼쪽부터 채운다 */
  #prodList .total-line { align-items: center; row-gap: 9px; justify-content: flex-start; }
  /* 품목명·단가는 각각 한 줄 전체 */
  #prodList .total-line > div:nth-child(3),
  #prodList .total-line > div:nth-child(4) { flex: 1 1 100% !important; min-width: 0 !important; }
  /* 노출 체크는 왼쪽, 버튼들은 남은 폭을 나눠 한 줄에 */
  #prodList .total-line > label { flex: 0 0 auto !important; margin-right: 4px !important; }
  #prodList .total-line > button { flex: 1 1 auto !important; min-height: 40px; }
  /* 품목 추가 칸도 동일하게 세로 정돈(라벨이 입력과 떨어져 뜨는 문제 방지) */
  #mSubPrice .seg > div { flex: 1 1 100% !important; min-width: 0 !important; }
  #mSubPrice .seg > div:first-child,
  #mSubPrice .seg > div:nth-child(2) { flex: 0 0 auto !important; }
  #mSubPrice .seg > .btn { flex: 1 1 100% !important; min-height: 44px; }
  /* 입금 계좌: 은행 칸이 좁아 '예) 국민은행'이 잘리던 문제 →
     계좌번호는 한 줄 전체, 은행·예금주는 반반으로 균형 */
  #vAccBank, #vAccHolder { min-width: 0; }
  #vAccBank ~ *, #vAccHolder ~ * { min-width: 0; }
  .seg > div:has(> #vAccNo) { flex: 1 1 100% !important; min-width: 0 !important; }
  .seg > div:has(> #vAccBank),
  .seg > div:has(> #vAccHolder) { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; }
}

/* ── 아주 좁은 폭(≤380·360폰) 추가 안전장치 ── */
@media (max-width: 380px) {
  .vhero { gap: 9px; padding: 13px 13px; }
  .vhero .vhero-img { width: 56px; height: 46px; }
  .vhero .vhero-hi { font-size: 15px; }
  .vhero .vhero-badge { font-size: 11px; padding: 3px 9px; }
  /* 배송 일괄적용 다중선택 행: 라벨과 입력이 확실히 세로로 */
  #dvMultiCard .dvm-row { flex-direction: column; align-items: stretch; gap: 7px; }
  #dvMultiCard .dvm-row .dvm-apply { min-width: 0; }
  #dvMultiCard .dvm-row input, #dvMultiCard .dvm-row .seg { width: 100%; min-width: 0; }
  /* 메뉴·가격 품목추가처럼 여러 칸 seg: 좁은 폭에서 세로로 또렷하게 */
  #mSubPrice .seg > div { flex: 1 1 100%; min-width: 0; }
}