/* academy.css — CLASSUP MEAL 학원 콘솔 전용 스타일 (ACADEMY 에이전트 소유)
   style.css(공유 베이스) 다음에 로드. 공유 토큰(--brand, --line, --muted, --salad …)만 사용. */

/* 상단바 로그아웃 */
.who .logout { color: #dc2626; font-weight: 700; margin-left: 10px; }

/* 상단바 좁은 화면 겹침 방지: 학원명/신청링크(.whoname)는 380px↓에서 숨김(공유 style.css 규칙),
   430px↓에서는 이름(b)을 말줄임 처리해 로그아웃 버튼을 항상 노출 */
.topbar .who { min-width: 0; }
@media (max-width: 430px) {
  .topbar .who b { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
}

/* 콘솔 테이블 모바일 가로 스크롤 */
.tblscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 탭이 많아 좁은 화면에서 가로 스크롤 */
.tabs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll button { flex: 0 0 auto; white-space: nowrap; }

/* 문자 포인트 배지 */
.pt-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700; color: var(--brand-dark);
  background: var(--brand-soft); padding: 5px 12px; border-radius: 999px;
}
.pt-badge b { font-size: 15px; }

/* 받는 사람 라디오 픽 */
.pick {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1; min-width: 150px; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 14px; font-weight: 600; cursor: pointer; background: #fff;
}
.pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }

/* 업체 행(연결현황·검색결과 공용) */
.vrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.vrow:last-child { border-bottom: 0; }
.vrow.primary {
  background: var(--brand-soft); border-radius: 12px; padding: 12px; margin: 4px 0;
  border-bottom: 0;
}
.vact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vact .btn { text-decoration: none; }

/* 정식 등록 마법사 */
.wizcard { max-width: 480px; margin: 28px auto 0; }
.wchk { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; margin-top: 8px; }
.wchk.done { background: var(--brand-soft); border-color: var(--brand); }
.wchk span { font-size: 20px; }
.wiz-prog { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.wiz-prog .dot { width: 26px; height: 6px; border-radius: 999px; background: var(--line); }
.wiz-prog .dot.on { background: var(--brand); }
.wiz-prog .dot.done { background: var(--salad); }
.wtitle { margin: 0 0 4px; font-size: 17px; }
.setup-banner { background: var(--brand); color: #fff; font-weight: 700; padding: 12px 14px; border-radius: 12px; margin: 14px 0 0; cursor: pointer; font-size: 14px; }
.setup-banner .sb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.setup-banner .sb-top b { font-size: 15px; }
.setup-banner .sb-cta { font-size: 13px; opacity: .95; white-space: nowrap; }
.setup-banner .sb-bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .3); margin: 8px 0 6px; overflow: hidden; }
.setup-banner .sb-bar span { display: block; height: 100%; border-radius: 999px; background: #fff; transition: width .3s; }
.setup-banner .sb-remain { font-size: 12px; font-weight: 600; opacity: .95; }

/* 급식 운영일 — 요일 칩 + 달력 */
.wk-row { display: flex; gap: 6px; margin: 4px 0 6px; }
.wk-row .wk { flex: 1; padding: 10px 0; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; }
.wk-row .wk.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 요일 × (점심/저녁) 격자 */
.sched-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0 8px; }
.sched-grid { display: grid; grid-template-columns: 54px repeat(7, 1fr) auto; gap: 4px; min-width: 340px; align-items: center; }
.sched-grid .sg-cell { text-align: center; }
.sched-grid .sg-dow { font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; align-self: center; }
.sched-grid .sg-dow.sun { color: #dc2626; }
.sched-grid .sg-lbl { font-size: 12.5px; font-weight: 800; color: var(--brand-dark); display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; }
/* 점심=보라(브랜드) · 저녁=주황(석양)으로 색 분리 */
.sched-grid .sg-lbl.sg-dinner { color: #b45309; }
.sched-grid .sg-tog { border: 1.5px solid var(--line); background: #fff; border-radius: 9px; font-family: inherit; font-size: 12px; color: var(--muted); cursor: pointer; padding: 9px 0; min-width: 0; }
.sched-grid .sg-tog.lunch.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sched-grid .sg-tog.dinner.on { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.sched-grid .sg-tog:not(.on):active { transform: scale(.94); }
.sched-grid .sg-quick { display: flex; flex-direction: column; gap: 3px; padding-left: 4px; }
.sched-grid .sg-mini { border: 1.5px solid var(--line); background: #fff; border-radius: 7px; font-family: inherit; font-size: 11px; font-weight: 700; color: var(--brand-dark); cursor: pointer; padding: 3px 7px; white-space: nowrap; }
.sched-grid .sg-mini.ghost { color: var(--muted); }
.sched-grid .sg-mini:active { transform: scale(.94); }
.sched-apply { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.sched-apply .sched-range { align-items: center; flex-wrap: nowrap; }
.sched-apply .sched-tilde { flex: 0 0 auto; color: var(--muted); font-weight: 700; }

/* 달력 반쪽(점심/저녁) 토글 셀 */
.cal-cell.split { flex-direction: column; padding: 0; overflow: hidden; aspect-ratio: 1/1; 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); 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 4px; }
.cal-half .hl { font-size: 9.5px; font-weight: 800; opacity: .8; }
.cal-half.lunch { border-bottom: 1px solid #fff; }
/* 점심 운영=보라 · 저녁 운영=주황(석양)으로 분리 */
.cal-half.lunch.open { background: var(--brand-soft); color: var(--brand-dark); }
.cal-half.dinner.open { background: #fef3c7; color: #b45309; }
/* 비운영(휴무) 반쪽 — 사선 빗금(diagonal hatch)으로 운영과 확실히 구분 */
.cal-half.closed {
  background:
    repeating-linear-gradient(-45deg, transparent 0 4px, rgba(120, 113, 140, .30) 4px 6px),
    #f2f0f5;
  color: #a49eb0;
}
.cal-half.closed .hl { text-decoration: line-through; }
/* 휴무 반쪽 우상단 ✕ 표시(빗금과 함께 한눈에) */
.cal-half.closed::before {
  content: '✕'; position: absolute; top: 1px; right: 3px;
  font-size: 10px; font-weight: 900; color: #c0392b; opacity: .7; line-height: 1;
}
.cal-half { position: relative; }
.cal-half.lunch.ovr { box-shadow: inset 0 0 0 1.5px var(--brand); }
.cal-half.dinner.ovr { box-shadow: inset 0 0 0 1.5px #f59e0b; }
.cal-half.closed.ovr { box-shadow: inset 0 0 0 1.5px #dc2626; }
.cal-half:active { filter: brightness(.95); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; }
.cal-head b { font-size: 16px; }
.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; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 14px; border: 1.5px solid transparent; user-select: none; }
.cal-cell.empty { cursor: default; }
.cal-cell.open { background: var(--brand-soft); color: var(--brand-dark); }
.cal-cell.closed {
  background:
    repeating-linear-gradient(-45deg, transparent 0 4px, rgba(120, 113, 140, .30) 4px 6px),
    #f2f0f5;
  color: #a49eb0; text-decoration: line-through;
}
.cal-cell.ovr { border-color: var(--brand); }
.cal-cell.closed.ovr { border-color: #dc2626; }
.cal-cell.today { box-shadow: 0 0 0 2px var(--warn) inset; }
.cal-cell:not(.empty):active { transform: scale(.94); }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: middle; }
.lg.on { background: var(--brand-soft); border: 1.5px solid var(--brand); }
.lg.on.dinner { background: #fef3c7; border-color: #f59e0b; }
.lg.off {
  background:
    repeating-linear-gradient(-45deg, transparent 0 2.5px, rgba(120, 113, 140, .55) 2.5px 4px),
    #f2f0f5;
  border: 1.5px solid #d9d5e0;
}

/* 📊 신청 집계 대시보드 */
.kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 520px) { .kpi-row { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--brand-soft); border-radius: 12px; padding: 12px 10px; text-align: center; }
.kpi .kv { font-size: 20px; font-weight: 900; color: var(--brand-dark); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; word-break: keep-all; }
.kpi .kl { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 3px; }
.kpi.good { background: var(--salad-soft); }
.kpi.good .kv { color: var(--salad); }
.kpi.warn { background: #fef3e2; }
.kpi.warn .kv { color: var(--warn); }

.dash-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.dash-tbl th, .dash-tbl td { padding: 9px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dash-tbl th.num, .dash-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dash-tbl thead th { color: var(--muted); font-size: 12px; font-weight: 800; }
.dash-tbl tfoot td { border-top: 2px solid var(--line); border-bottom: 0; font-weight: 800; color: var(--brand-dark); }
.dash-tbl tbody tr:last-child td { border-bottom: 0; }

.dash-week { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.dash-week:empty { display: none; }
.dash-week b { color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.dash-sub { font-size: 12px; margin-bottom: 6px; }
.dash-daily { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-daily span { background: var(--brand-soft, #ece9ff); color: var(--brand-dark); border-radius: 8px; padding: 4px 9px; font-size: 12px; font-variant-numeric: tabular-nums; }

/* 기간(from~to) 선택 — 명단·집계 공용 */
.range-pick { margin-top: 4px; }
.range-quick { margin: 0 0 6px !important; }
.range-quick button { padding: 6px 12px; font-size: 13px; }
.range-dates { display: flex; align-items: center; gap: 6px; }
.range-dates input[type="date"] { flex: 1; min-width: 0; margin-top: 0; }
.range-sep { color: var(--muted); flex: 0 0 auto; }

/* 명단 날짜별 소제목 */
.day-head { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--brand-dark); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.day-head:first-child { margin-top: 4px; }
.day-head b { font-variant-numeric: tabular-nums; }

/* 미입금 후속조치 */
.dash-unpaid { margin-top: 12px; }
.dash-unpaid:empty { display: none; }
.dash-unpaid-ok { padding: 12px; text-align: center; color: var(--salad); font-weight: 700; font-size: 13px; background: var(--salad-soft); border-radius: 12px; }

/* 배송지 순서 이동 버튼 */
.place-ord { display: flex; flex-direction: column; gap: 2px; }
.place-ord .ordbtn { width: 26px; height: 20px; padding: 0; line-height: 1; border: 1.5px solid var(--line); background: #fff; border-radius: 6px; font-size: 10px; color: var(--muted); cursor: pointer; }
.place-ord .ordbtn:disabled { opacity: .35; cursor: default; }
.place-ord .ordbtn:not(:disabled):active { transform: scale(.9); }
.map-link { color: var(--brand-dark); font-weight: 700; text-decoration: none; margin-left: 4px; white-space: nowrap; }

/* 위험 구역(학원 탈퇴) */
.danger-zone { border: 1.5px solid #fca5a5; }
.danger-zone h2 { color: #dc2626; }

/* 탭 내부 서브탭(문자·설정 등 과부하 탭 분리) — 상단 탭바 .tabs 패턴 재사용, 활성 표시는 공유 .tabs button.on */
.subtabs { margin: 0 0 12px; }

/* 문자 변수 삽입 바 */
.varbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.varbar .chip {
  border: 1px solid var(--line); background: var(--brand-soft); color: var(--brand-dark);
  font-family: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; cursor: pointer;
}
.varbar .chip:hover { border-color: var(--brand); }
.varbar .chip.link { background: #eef6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* 명단 수신자 다중선택(체크박스) */
.recip-all { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--brand-dark); }
.recip-list { margin-top: 8px; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px; background: var(--card, #fff); }
.recip-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.recip-item:hover { background: var(--brand-soft); }
.recip-item + .recip-item { border-top: 1px solid var(--line); }
.recip-item input { width: 18px; height: 18px; flex: 0 0 auto; }

/* ============================================================
   글라스모피즘 고도화 (ACADEMY 콘솔 전용) — 공유 토큰과 조화
   반투명+blur, 브랜드 그라데이션(#6c60f4→#8a7dff), 등장·호버 애니메이션
   모바일 우선 / prefers-reduced-motion 대응 / 기능 회귀 없음(시각만)
   ============================================================ */

/* 등장 애니메이션 */
@keyframes acaRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes acaSheen { 0% { transform: translateX(-30%); } 100% { transform: translateX(30%); } }

/* 페이지 전역: 글라스가 비칠 브랜드 그라데이션 앰비언트 배경(고정) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58vw 58vw at 10% -8%, rgba(138, 125, 255, .30), transparent 60%),
    radial-gradient(54vw 54vw at 102% 10%, rgba(108, 96, 244, .22), transparent 62%),
    radial-gradient(52vw 52vw at 50% 116%, rgba(124, 110, 255, .16), transparent 60%);
}

/* 콘솔·로그인 카드 → 글라스 */
.wrap .card {
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 10px 30px rgba(76, 60, 200, .10), inset 0 1px 0 rgba(255, 255, 255, .5);
  animation: acaRise .42s ease both;
}
/* blur 미지원 브라우저는 더 불투명하게(가독성 보장) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .wrap .card { background: rgba(255, 255, 255, .96); }
  .tabs, .kpi { background: rgba(255, 255, 255, .96) !important; }
}

/* 위험 구역 카드는 붉은 톤 유지 */
.wrap .card.danger-zone { border-color: #fca5a5; }

/* 로그인 히어로 — 브랜드 그라데이션 강화 + 광택 + 등장(landing.css보다 뒤라 특이도 상향) */
#paneAuth .ap-hero {
  background: linear-gradient(135deg, #6c60f4 0%, #8a7dff 52%, #5546e0 100%);
  box-shadow: 0 18px 42px rgba(76, 60, 200, .30);
  animation: acaRise .5s ease both;
}
#paneAuth .ap-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 82% at 16% -12%, rgba(255, 255, 255, .38), transparent 56%);
}
#paneAuth .ap-hero > * { position: relative; z-index: 1; }
#paneAuth .ap-hero .bd { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* 상단 탭바 → 글라스 필 + 활성 탭 그라데이션 */
.tabs {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 6px 20px rgba(76, 60, 200, .08);
}
#tabBar button { transition: color .14s, background .14s, transform .06s; }
#tabBar button.on {
  background: linear-gradient(135deg, var(--brand), #8a7dff);
  color: #fff;
  box-shadow: 0 5px 16px rgba(108, 96, 244, .36);
}
#tabBar button:not(.on):active { transform: scale(.96); }

/* 집계 대시보드 KPI 타일 → 글라스 + 호버 */
.kpi {
  background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(236, 233, 255, .62));
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 6px 18px rgba(76, 60, 200, .08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kpi:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(76, 60, 200, .16); }
.kpi.good { background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(230, 246, 237, .7)); }
.kpi.warn { background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(254, 243, 226, .78)); }

/* 대시보드 카드 상단 브랜드 라인 강조 */
#dashCard { position: relative; overflow: hidden; }
#dashCard::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), #8a7dff, var(--cyan));
}

/* 업체·목록 행 호버 살짝 부각 */
.vrow { border-radius: 12px; transition: background .14s; }
.vrow:not(.primary):hover { background: rgba(236, 233, 255, .5); }

/* 온보딩 배너 → 그라데이션 */
.setup-banner {
  background: linear-gradient(135deg, var(--brand), #8a7dff);
  box-shadow: 0 8px 22px rgba(108, 96, 244, .28);
}

/* 정식 등록 마법사 카드도 등장 애니메이션 결 유지(.card 규칙 승계) */

/* 접근성: 모션 최소화 선호 시 애니메이션·이동 제거 */
@media (prefers-reduced-motion: reduce) {
  .wrap .card, #paneAuth .ap-hero { animation: none !important; }
  .kpi, .vrow, #tabBar button { transition: none !important; }
  .kpi:hover { transform: none !important; }
}

/* ============================================================
   UX 정리 — 필수 표시(빨강)·가독성·키보드 포커스 (ACADEMY 콘솔)
   academy.css는 academy.html에서만 로드 → 이 페이지에만 적용
   ============================================================ */

/* 필수 배지 = ＊필수(빨강). 공유 .req(보라 pill) 위에서 색만 재정의 */
.wrap .req { background: #fde8e8; color: #dc2626; }

/* 가독성 — 옅은 회색 살짝 진하게(대비↑) + 작은 안내문 13px로 확대 */
.wrap { --muted: #57576a; }
.wrap .hint { font-size: 13px; }
.wrap th, .dash-tbl thead th, .dash-tbl th { font-size: 12.5px; }

/* 키보드 포커스 링 — 클릭 요소가 키보드로도 조작·식별되게 */
.cal-cell:focus-visible,
.setup-banner:focus-visible,
.wk-row .wk:focus-visible,
#tabBar button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cal-cell.closed:focus-visible { outline-color: #dc2626; }
.cal-half:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ============================================================
   모바일 반응형(≤420px) — 버튼·입력창 넘침/깨짐 방지(레이아웃만)
   ============================================================ */
@media (max-width: 420px) {
  .wrap { padding: 0 12px 110px; }
  /* 입력창은 항상 컨테이너 폭에 맞추고 flex 자식 축소 허용 */
  .wrap input, .wrap select, .wrap textarea { width: 100%; min-width: 0; }
  .seg { gap: 6px; }
  .seg > * { min-width: 0; }
  /* 표는 가로 스크롤(공용 .tblscroll 외에 카드 내부 표도 보호) */
  .dash-tbl { min-width: 460px; }
  /* 격자·달력 셀 축소
     ⚠ 열 개수는 데스크톱과 동일하게 9열(라벨+요일7+퀵버튼) 유지할 것.
        열을 8개로 줄이면 마지막 '평일·해제' 셀이 다음 줄로 밀려 격자 전체가 어긋난다. */
  .sched-grid { grid-template-columns: 42px repeat(7, 1fr) auto; gap: 3px; min-width: 0; }
  .sched-grid .sg-tog { padding: 8px 0; }
  .sched-grid .sg-lbl { font-size: 11.5px; }
  /* 퀵버튼(평일·해제)은 좁은 폭에서 더 조여 요일 칸 폭을 확보 */
  .sched-grid .sg-quick { padding-left: 2px; gap: 2px; }
  .sched-grid .sg-mini { font-size: 10.5px; padding: 3px 5px; }
  /* 기간 반영: 날짜 2개 + 버튼을 한 줄에 욱여넣지 않고 세로로 또렷하게 */
  .sched-apply .sched-range { flex-wrap: wrap; }
  .sched-apply .sched-range input[type="date"] { flex: 1 1 100% !important; min-width: 0 !important; }
  .sched-apply .sched-range .sched-tilde { display: none; }
  .sched-apply .sched-range .btn { flex: 1 1 100% !important; }
  .cal { gap: 3px; }
  .cal-cell.split .dn { font-size: 10px; }
  .cal-half .hl { font-size: 9px; }
  /* 대시보드 KPI 값 폭 넘침 방지 */
  .kpi .kv { font-size: 17px; }
  /* 문자 변수칩·버튼 줄바꿈 허용 */
  .varbar { gap: 5px; }
}

/* ============================================================
   모바일 버튼 세로쌓임 방지 (ACADEMY 콘솔 전용)
   증상: 좁은 화면에서 긴 업체·관 이름이 옆 버튼을 밀면, 한글은 어느 글자
        사이에서나 줄바꿈되므로 버튼 글자가 한 자씩 세로로 쌓임(예: 연/결/해/제).
   원인: .btn 에 white-space 미지정 → 한글 min-content=1글자 → flex 형제에 밀려
        버튼이 글자폭 이하로 줄어들며 세로 줄바꿈.
   해결: 짧은 액션 버튼(.sm)과 가로 버튼 행(.seg 직속 버튼)만 nowrap 으로 한 줄 유지.
        min-content 가 라벨 전체폭이 되어 더는 줄지 않고, .vact/.vrow 의 기존
        flex-wrap:wrap 덕에 자연히 아랫줄로 넘어감. (전체폭 긴 버튼은 대상이 아니라
        기존 2줄 줄바꿈을 그대로 유지)  additive · academy.html 에만 적용. */
.btn.sm { white-space: nowrap; }
.seg > .btn { white-space: nowrap; }

/* 명단 카드 컴팩트(버튼·컨트롤 여백/높이 축소) */
.roster-compact h2 { margin: 0 0 8px; }
.roster-compact .seg { gap: 6px; margin-top: 8px !important; }
.roster-compact .fld { margin-bottom: 3px; font-size: 12.5px; }
.roster-compact select, .roster-compact input { padding: 7px 9px; }
.roster-compact .tabs { margin-top: 8px !important; padding: 3px; }
.roster-compact .tabs button { padding: 6px 10px; font-size: 13px; }
.roster-compact .btn { padding: 8px 12px; }
.roster-compact #rosterBox { margin-top: 10px; }
.roster-compact #rosterBox .total-line { padding: 7px 0; }
.roster-compact #rosterBox td, .roster-compact #rosterBox th { padding: 6px 8px; }

/* ============================================================
   모바일 메뉴바(탭·서브탭) 라벨 잘림·세로쌓임 방지 (ACADEMY 콘솔 전용)
   증상: 좁은 폭에서 상단 탭바(#tabBar: 도시락 업체·배송지·명단·문자·공유·설정)와
        서브탭(.subtabs), 기간 퀵버튼(.range-quick)이 가로 스크롤(스크롤바 숨김)로
        오른쪽 라벨이 화면 밖으로 잘려 안 보임. 스크롤 힌트가 없어 탭 존재를 놓침.
   해결: 모바일에서는 가로 스크롤 대신 줄바꿈(flex-wrap)으로 전환해 모든 라벨을 노출.
        각 버튼은 flex:1 1 auto 로 남는 폭을 나눠 갖고, white-space:nowrap 로 라벨은
        한 줄 유지(한 글자씩 세로 쌓임 방지). 데스크톱(>420px)은 기존 스크롤 그대로.
        additive · academy.html 에만 적용. */
@media (max-width: 420px) {
  #tabBar, .subtabs, .range-quick {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 6px;
  }
  #tabBar button, .subtabs button, .range-quick button {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    padding: 9px 8px;
    font-size: 13px;
    scroll-snap-align: none;
  }
  /* 탭 개수가 홀수여서 마지막 줄에 하나만 남을 때 그 버튼이 전체 폭을 차지해
     '큰 단독 버튼'처럼 보이는 문제 → 한 줄에 3개씩 균등 배치로 균형을 맞춘다. */
  #tabBar button { flex: 1 1 28%; }
  .subtabs button { flex: 1 1 28%; }
  /* 아이콘+라벨 간격 살짝 좁혀 좁은 버튼에서도 한 줄 유지 */
  #tabBar button .ic, .subtabs button .ic { margin-right: 1px; }
}

/* ============================================================
   모바일 상단 헤더(topbar) 정리 (ACADEMY 콘솔 전용)
   증상(로그인 상태, 360·375px 실측): 좌측 브랜드 "CLASSUP MEAL 학원"의 '학원'이
        둘째 줄로 떨어지고, 우측 사용자영역의 "· 학원" 텍스트와 로그아웃 링크가
        한 글자씩 세로로 쌓임(로그아/웃). 요소가 겹치고 잘림.
   원인: .topbar .who 가 wrap 허용 flex라 좁은 폭에서 각 조각이 자기 내용폭 이하로
        찌그러지며 한글이 글자단위로 줄바꿈. 로그아웃(.logout)에 white-space 미지정.
        브랜드 워드마크(.bwm)도 줄바꿈 허용이라 폭 부족 시 2줄.
   해결(additive · style.css 미수정 · 데스크톱 보존 · 모바일 미디어쿼리 한정):
        ① 로그아웃 링크는 전 폭에서 nowrap 고정(핵심 버튼 항상 노출)
        ② ≤480px: 브랜드 컴팩트화(로고·폰트 축소)+한 줄 고정+넘치면 말줄임,
           우측 who 는 nowrap 한 줄+이름만 말줄임 축소, 로그아웃 항상 노출
        ③ ≤480px: 학원명/신청링크(.whoname)는 숨겨 폭 확보(긴 학원명 오버플로 방지).
           로그인 전 '← 신청 화면' 링크는 .whoname 밖이라 그대로 노출됨.
   ============================================================ */
/* 로그아웃 링크는 어느 폭에서도 한 줄 유지(글자단위 세로쌓임 방지) */
.topbar .who .logout { white-space: nowrap; }

@media (max-width: 480px) {
  .topbar .topbar-in { gap: 8px; padding: 10px 12px; }
  /* 좌측 브랜드: 컴팩트 + 한 줄 고정 + 넘치면 말줄임(우측 공간 확보) */
  .topbar .brand { min-width: 0; flex-shrink: 1; gap: 6px; }
  .topbar .brand .blogo { width: 26px; height: 26px; }
  .topbar .brand .bwm { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* 우측 사용자영역: 한 줄 유지, 이름만 축소·말줄임, 로그아웃 항상 노출 */
  .topbar .who { flex-wrap: nowrap; white-space: nowrap; gap: 6px; min-width: 0; font-size: 12.5px; }
  .topbar .who b { flex: 0 1 auto; min-width: 0; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .who .logout { flex: 0 0 auto; }
  /* 긴 학원명/보조 링크는 좁은 폭에서 숨겨 오버플로 차단(로그인 전 링크는 영향 없음) */
  .topbar .who .whoname { display: none; }
}

@media (max-width: 380px) {
  /* 더 좁은 폭에서 브랜드·이름을 조금 더 조여 로그아웃까지 확실히 한 줄에 */
  .topbar .brand .bwm { font-size: 15px; }
  .topbar .who { font-size: 12px; }
  .topbar .who b { max-width: 30vw; }
}

/* ============================================================
   로그인 교차 안내(.xnav) — 다른 관계자용 로그인/화면으로 이동
   로그인 카드 하단 전용. 모바일(360·375)에서도 세로로 크게·또렷하게.
   additive · academy.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); }