/* parent.css — 학부모(신청) surface 전용 스타일. 소유(OWNER): PARENT 에이전트.
   공유 베이스(style.css) 위에 얹는 규칙만 둡니다. style.css 는 건드리지 않음. */

/* ---------- 가입: 학원 검색형 선택 ---------- */
.branch-pick { position: relative; }
.branch-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: #fff; border: 1.5px solid #d9d5f2; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(40, 32, 90, .16); max-height: 250px; overflow-y: auto; padding: 6px;
}
.branch-opt {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 10px 12px; border-radius: 9px; cursor: pointer;
}
.branch-opt:hover, .branch-opt:focus { background: #f1f0fb; }
.branch-opt b { font-size: 14.5px; color: var(--brand-dark, #5546e0); }
.branch-opt span { font-size: 12.5px; color: #6b7280; }
.branch-empty { padding: 16px 12px; font-size: 13px; color: #6b7280; text-align: center; line-height: 1.6; }

/* 학생 핸드폰 없음 */
.nophone { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13.5px; color: #4b4670; cursor: pointer; }
.nophone input { width: 17px; height: 17px; accent-color: var(--brand, #6c60f4); }

/* 받는 학생 이름 입력(수량만큼·제품별) */
.ord-names { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.names-seg { display: flex; flex-direction: column; gap: 7px; }
.names-lbl { font-size: 13.5px; font-weight: 700; color: #4b4670; }
.names-inp { width: 100%; }
.ord-names .hint { margin: 0; }

/* 신청/취소 확인 모달 */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 16, 40, .5); }
.modal.show { display: flex; animation: modalFade .18s ease; }
.modal-card { background: #fff; border-radius: 20px; padding: 26px 22px 22px; max-width: 340px; width: 100%; text-align: center; box-shadow: 0 24px 64px rgba(20, 16, 40, .32); animation: modalPop .2s ease; }
.modal-ic { font-size: 46px; line-height: 1; }
.modal-card h3 { margin: 10px 0 6px; font-size: 20px; font-weight: 800; color: var(--brand-dark, #5546e0); }
.modal-sub { margin: 0; font-size: 15px; color: #4b4670; line-height: 1.5; }
.modal-mail { margin: 14px 0 0; font-size: 13px; color: #6b7280; background: #f4f3fb; border-radius: 11px; padding: 10px 12px; line-height: 1.5; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { transform: scale(.94); opacity: .5; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal.show, .modal-card { animation: none; } }

/* 비밀번호 표시 눈 버튼 */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 46px; }
.pw-eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
  padding: 7px 8px; border-radius: 8px; opacity: .65; transition: opacity .12s, background .12s;
}
.pw-eye:hover { opacity: 1; background: #f1f0fb; }
.pw-eye:focus-visible { outline: 2px solid var(--brand, #6c60f4); outline-offset: 1px; }

/* 가입 폼: 간결화 + 포커스 인라인 헬프 */
.signup-intro { margin: 14px 0 6px; font-size: 14px; line-height: 1.55; color: #4b4670; }
.signup-optional { margin: 20px 0 4px; font-size: 12.5px; font-weight: 700; color: #8b86a3; display: flex; align-items: center; gap: 8px; }
.signup-optional::before, .signup-optional::after { content: ""; flex: 1; height: 1px; background: var(--line, #ece9f6); }
.signup-foot { text-align: center; margin-top: 12px; }
.field-help {
  margin: 7px 0 2px; padding: 9px 12px; font-size: 13px; line-height: 1.55;
  color: #4b3fd6; background: rgba(108, 96, 244, .08);
  border-left: 3px solid var(--brand, #6c60f4); border-radius: 8px;
  animation: fieldHelpIn .16s ease;
}
.field-help b { color: var(--brand-dark, #4b3fd6); font-weight: 800; }
@keyframes fieldHelpIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .field-help { animation: none; } }

/* 특수 안내 강조(색·볼드) */
.hl-warn { color: #d92d20; font-weight: 800; }
.hint-warn { background: #fff4f1; border: 1px solid #f6cabd; border-radius: 9px; padding: 8px 11px; color: #9a3412; }
.pw-ok { color: #15803d; font-weight: 700; }
.pw-bad { color: #d92d20; font-weight: 700; }

/* ---------- 학부모 고지사항(배송·환불) ---------- */
/* 경고용 주황 박스는 유지하되 탁한 베이지/브라운을 정돈한 앰버 톤으로 통일 */
.notice-card {
  margin-top: 14px; background: #fff8e6; border: 1.5px solid #f2e3b8;
  border-radius: 14px; padding: 12px 14px;
}
.notice-card > summary {
  list-style: none; cursor: pointer; font-weight: 800; font-size: 14.5px;
  color: #8a5a00; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.notice-card > summary::-webkit-details-marker { display: none; }
.notice-card .notice-more { font-size: 12.5px; font-weight: 700; color: #a8792f; }
.notice-card[open] .notice-more::after { content: ' ▲'; }
.notice-card:not([open]) .notice-more::after { content: ' ▼'; }
.notice-list { margin: 10px 0 2px; padding-left: 18px; }
.notice-list li { font-size: 13.5px; line-height: 1.6; color: #574a30; margin-bottom: 6px; }
.notice-list li b { color: #9a3412; }
.sheet-notice { margin-top: 14px; }
.ord-agree {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  font-size: 13.5px; color: #4b4670; line-height: 1.45; cursor: pointer;
}
.ord-agree input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--brand, #6c60f4); }
.ord-agree.shake { animation: notice-shake .4s; }
@keyframes notice-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ---------- 상단 메뉴바(탭바) 우측 로그아웃 ---------- */
#tabsBar .tab-logout {
  flex: 0 0 auto; color: #dc2626; background: transparent;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
#tabsBar .tab-logout:hover { background: #fdeaea; }
#tabsBar .tab-logout.on { background: transparent; box-shadow: none; }
@media (max-width: 480px) {
  #tabsBar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #tabsBar button { flex-shrink: 0; }
  #tabsBar > button:not(.tab-logout) { flex: 1 0 auto; }
}

/* (제거됨) 우리 학원 노출 카드 — 입력 화면이 없어 늘 비공개였다(2026-08-03 대표 결정). */

/* ---------- 문의하기: 협약 도시락 업체 연락처·카카오채널 ---------- */
.contact-head h2 { margin: 0 0 6px; }
.contact-card { }
.contact-name { font-size: 17px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.contact-name b { color: var(--brand-dark, #5546e0); }
.contact-region {
  font-size: 12px; font-weight: 600; color: #6b7280;
  background: #f1f0fb; border-radius: 999px; padding: 2px 10px;
}
.contact-desc { margin: 8px 0 0; line-height: 1.5; }
.contact-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.contact-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 14px 16px; border-radius: 14px; transition: filter .15s, transform .05s;
}
.contact-btn:active { transform: translateY(1px); }
.contact-btn b { font-weight: 800; }
.contact-btn.call {
  background: var(--brand, #6c60f4); color: #fff;
}
.contact-btn.call:hover { filter: brightness(1.05); }
.contact-btn.kakao {
  background: #FEE500; color: #3A1D1D;
}
.contact-btn.kakao:hover { filter: brightness(0.97); }

/* ---------- 충전: 10,000원 단위 금액 선택 + 업체 노출 결제수단 ---------- */
.chg-amts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chg-amt {
  border: 1.5px solid #e5e3f5; background: #fff; color: #4b4670;
  font-weight: 700; font-size: 15px; padding: 13px 8px; border-radius: 12px;
  cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.chg-amt:hover { border-color: var(--brand, #6c60f4); }
.chg-amt.on {
  border-color: var(--brand, #6c60f4); background: var(--brand, #6c60f4); color: #fff;
}
.chg-methods { display: flex; gap: 8px; flex-wrap: wrap; }
.chg-method {
  flex: 1 1 auto; min-width: 140px;
  border: 1.5px solid #e5e3f5; background: #fff; color: #4b4670;
  font-weight: 700; font-size: 14px; padding: 12px 10px; border-radius: 12px;
  cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.chg-method:hover { border-color: var(--brand, #6c60f4); }
.chg-method.on { border-color: var(--brand, #6c60f4); background: #ece9ff; color: var(--brand-dark, #5546e0); }
.chg-body { margin-top: 4px; }
@media (max-width: 380px) { .chg-amts { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 우리 아이(자녀) 관리 (#5) ---------- */
.children-box { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; }
.child-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f7f6fc; border: 1px solid #ece9f8; border-radius: 11px; padding: 10px 12px; }
.child-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.child-info b { font-size: 14.5px; color: #3a3560; }
.child-grade { font-size: 12px; color: #6b7280; background: #fff; border: 1px solid #e5e2f2; border-radius: 8px; padding: 2px 8px; }
.child-del { flex: 0 0 auto; border: 1px solid #ecdada; background: #fff; color: #b4485a; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 13px; border-radius: 8px; }
.child-del:hover { color: #dc2626; background: #fdecec; border-color: #f3c9c9; }
.child-add { display: flex; gap: 8px; flex-wrap: wrap; }
.child-add input { flex: 1; min-width: 120px; }
.child-add .btn { flex: 0 0 auto; white-space: nowrap; }
/* 자녀 소속 학원(같은/다른) 선택 */
.child-acad { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 2px; }
.child-acad-opt { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: #3a3560; cursor: pointer; }
.child-acad-opt input { width: auto; margin: 0; }
.child-acad-badge { font-size: 11.5px; font-weight: 700; color: #6b5bd6; background: #f0edff; border: 1px solid #ddd6f7; border-radius: 8px; padding: 2px 8px; }
.child-acad-badge.same { color: #2b8a6b; background: #e8f7f0; border-color: #cdeee0; }

/* ---------- 내 정보: 서브탭 ---------- */
.acc-subtabs { margin-bottom: 12px; }
.acc-pane { }
/* 서비스 제안 문구 */
.share-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 130px; line-height: 1.6; font-family: inherit; font-size: 14px; }
/* 주문 시트: 자녀 이름 빠른 채우기 칩 */
.child-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.child-chip { border: 1px solid #d9d5f2; background: #f4f3fb; color: var(--brand-dark, #5546e0); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.child-chip:hover { background: #ece9ff; border-color: var(--brand, #6c60f4); }

/* ---------- 내 정보: 적립금 요약 ---------- */
.acc-balance { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f7f6fc; border: 1px solid #ece9f8; border-radius: 12px; padding: 12px 14px; }

/* ---------- 카드 충전(준비중·테스트) 스캐폴드 (#6) ---------- */
.card-test { margin-top: 16px; border: 1px dashed #cfd8e3; background: #f8fafc; border-radius: 13px; padding: 14px; }
.card-test-hd { font-size: 14.5px; font-weight: 800; color: #475569; display: flex; align-items: center; gap: 8px; }
.badge-soon { font-size: 11px; font-weight: 700; color: #7c6f00; background: #fff3c4; border-radius: 7px; padding: 2px 7px; }

/* ---------- 상태 배지 표준화 (#7) ---------- */
.pill.pending { background: #fff3c4; color: #8a6d00; }
.pill.fail { background: #fdecec; color: #dc2626; }
.pill.confirmed { background: #e6f7ee; color: #1a7f45; }

/* ---------- 적립금 요약 스탯(총 충전·사용·환불·남은 적립금) ---------- */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.statrow .stat { background: #faf9ff; border: 1px solid var(--line, #ece9f8); border-radius: 14px; padding: 11px 10px; text-align: center; }
.statrow .stat .lb { font-size: 11.5px; color: var(--muted, #6b7280); font-weight: 700; }
.statrow .stat .vv { font-size: 15.5px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #3a3560; }
.statrow .stat.chg .vv { color: var(--salad, #1a7f45); }
.statrow .stat.ref .vv { color: var(--danger, #dc2626); }
.statrow .stat.bal { background: var(--brand-soft, #ece9ff); border-color: #d9d1ff; }
.statrow .stat.bal .vv { color: var(--brand-dark, #5546e0); }
@media (max-width: 380px) { .statrow { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 환불 안내(접이식) ---------- */
.refund-policy { margin-top: 14px; border: 1px solid #ece9f8; border-radius: 12px; background: #faf9ff; overflow: hidden; }
.refund-policy summary { list-style: none; cursor: pointer; padding: 12px 14px; font-size: 13.5px; font-weight: 700; color: var(--brand-dark, #5546e0); display: flex; align-items: center; gap: 7px; }
.refund-policy summary::-webkit-details-marker { display: none; }
.refund-policy summary::after { content: '›'; margin-left: auto; font-size: 18px; color: #a8a3c4; transform: rotate(90deg); transition: transform .15s; }
.refund-policy[open] summary::after { transform: rotate(-90deg); }
.refund-policy-body { padding: 0 14px 12px; }
.refund-policy-body .rp-item { margin-top: 8px; }
.refund-policy-body .rp-item b { font-size: 12.5px; color: #4b4670; }
.refund-policy-body .rp-item p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: #6b6785; white-space: pre-wrap; }

/* ---------- 로그인 안내(#8) ---------- */
.login-help { margin-top: 12px; font-size: 13px; line-height: 1.6; color: #7a2e2e; background: #fdf1f1; border: 1px solid #f4d4d4; border-radius: 11px; padding: 12px 14px; }

/* ---------- 회원 탈퇴(#2) ---------- */
.withdraw-link { color: #8a84a0; font-size: 13px; }
.withdraw-link:hover { color: #dc2626; }
/* 내 정보 하단: 계정 관리(로그아웃·회원 탈퇴) 한 묶음 */
.acc-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
.acc-sep { color: #cfccdd; }
.withdraw-note { text-align: center; margin-top: 8px; }
.withdraw-warn { font-size: 13px; line-height: 1.55; color: #7a5a00; background: #fff8e6; border: 1px solid #f2e3b8; border-radius: 11px; padding: 11px 13px; }

/* ==========================================================================
   공통 디자인 통일(학부모 surface 전용 오버라이드) — 이 파일은 index.html 에서만 로드됨
   ========================================================================== */
/* 가독성: 안내(hint) 12px·옅은 회색 → 13px + 대비 상향 */
.hint { font-size: 13px; color: #55556a; }
/* 필수 표시 통일 = ＊필수(빨강 pill). 진짜 선택은 문구로 (선택) 표기 */
.req { background: #fdecec; color: #d92d20; font-size: 11.5px; }
/* usp 소형 라벨(가격·마감) 11px → 12.5px */
.usp .u .us { font-size: 12.5px; }

/* ---------- 신청 탭 히어로: 컴팩트 배너 ----------
   사진은 분위기용이라 화면의 1/3을 차지할 이유가 없다. 높이를 고정해 줄이고
   달력·안내 스트립이 첫 화면에 함께 보이게 한다. (비로그인 랜딩 히어로는 .compact 없이 그대로) */
.hero.compact { aspect-ratio: auto; height: 112px; max-height: none; border-radius: 18px; margin-top: 12px; }
.hero.compact::after { background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(30,15,5,.62) 55%, rgba(30,15,5,.82) 100%); }
.hero.compact .hero-in { padding: 0 16px 12px; }
.hero.compact .hero-title { margin: 0 0 2px; font-size: 21px; }
.hero.compact .hero-sub { font-size: 13px; }
@media (max-width: 480px) {
  .hero.compact { height: 100px; }
  .hero.compact .hero-title { font-size: 19px; }
  .hero.compact .hero-sub { font-size: 12.5px; }
}

/* ---------- 안내 스트립(품목 카드) ----------
   품목은 업체 카탈로그 기준 N종이라 개수가 달라진다. 3종 이상이면 가로 스크롤. */
.usp .u .uimg { width: 34px; height: 34px; margin: 0 auto 2px; display: block; border-radius: 9px; object-fit: cover; background: #f2f0f8; }
.usp .u .ut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usp.many { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.usp.many::-webkit-scrollbar { display: none; }
.usp.many .u { flex: 0 0 auto; min-width: 94px; }
/* 접근성: 신청 캘린더 셀 키보드 포커스 링 */
.cal-cell[role="button"] { cursor: pointer; }
.cal-cell[role="button"]:focus-visible { outline: 2px solid var(--brand, #6c60f4); outline-offset: 2px; }

/* 휴무·마감 날짜도 셀 경계를 옅게 보여 준다.
   배경이 전혀 없으면 셀 맨 아래에 붙는 '휴무'·'마감' 글자가 어느 날짜의 것인지
   알기 어렵고(아랫줄 날짜와 붙어 보임) 달력 전체가 어긋나 보인다.
   ⚠ 휴무/준비중 셀은 .closed 가 아니라 .aca-closed(또는 태그만) 이므로 그 클래스로 지정. */
.cal-cell.closed { background: #f8f6fb; border: 1px solid #edeaf3; }
.cal-cell.aca-closed { background: #fdf5f5; border: 1px solid #f4e3e3; }

/* ---------- 학원 운영일(점심/저녁) 달력 표시 ---------- */
.cal-cell .mealbar { display: flex; gap: 2px; margin-top: 2px; }
.cal-cell .mealbar i { font-style: normal; font-size: 8.5px; font-weight: 800; line-height: 1; padding: 1px 3px; border-radius: 4px; }
.cal-cell .mealbar i.on { background: var(--brand-soft, #ece9ff); color: var(--brand-dark, #5546e0); }
.cal-cell .mealbar i.off { background: #f1eff5; color: #b7b2c0; text-decoration: line-through; }
.cal-cell .cstat.aca-off { color: #c0392b; font-weight: 800; }
.cal-cell.aca-closed:not(.has) .dnum { color: #c8b8bc; }

/* ---------- 상단 헤더(topbar) 우측 로그아웃 — 로그인 상태에서만 노출 ---------- */
.who { display: inline-flex; align-items: center; gap: 10px; }
.who-logout {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 6px 11px; border: 1px solid rgba(220,38,38,.28); border-radius: 999px;
  background: rgba(255,255,255,.6); color: #dc2626; font-weight: 700; font-size: 12.5px;
  font-family: inherit; cursor: pointer; line-height: 1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s, transform .12s;
}
.who-logout:hover { background: #fdeaea; }
.who-logout:active { transform: scale(.96); }
.who-logout svg { width: 15px; height: 15px; }

/* ---------- 적립금 요약 스탯: 클릭하면 내역 모달 ---------- */
.statrow.q4 { grid-template-columns: repeat(2, 1fr); }
.statrow button.stat { font-family: inherit; cursor: pointer; width: 100%; position: relative; }
.statrow button.stat:hover { border-color: var(--brand, #6c60f4); box-shadow: 0 6px 16px -10px rgba(108,96,244,.5); }
.statrow button.stat:active { transform: scale(.98); }
.statrow .stat .stat-more { margin-top: 4px; font-size: 10.5px; font-weight: 700; color: var(--brand-dark, #5546e0); opacity: .8; }
.statrow button.stat.ref .stat-more { color: #dc2626; }

/* ---------- 내역 모달: 기간 필터 chips + 소계 ---------- */
.hist-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.hist-chip {
  padding: 7px 12px; border: 1px solid var(--line, #ece9f8); border-radius: 999px;
  background: #faf9ff; color: #4b4670; font-weight: 700; font-size: 12.5px; font-family: inherit; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.hist-chip:hover { border-color: var(--brand, #6c60f4); }
.hist-chip.on { background: var(--brand, #6c60f4); border-color: var(--brand, #6c60f4); color: #fff; }
.hist-custom { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
.hist-custom input[type="date"] { flex: 1 1 40%; min-width: 0; padding: 9px 10px; border: 1.5px solid rgba(108,96,244,.16); border-radius: 10px; font-family: inherit; font-size: 13.5px; }
.hist-sum { margin: 10px 0 6px; }
.hist-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--brand-soft, #ece9ff); border: 1px solid #d9d1ff; border-radius: 12px; font-size: 13px; color: #4b4670; }
.hist-sum-row b { color: var(--brand-dark, #5546e0); font-size: 14px; }
.hist-list { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 환불 요청 모달 · 충전 안내 문구 ---------- */
.rf-note { font-size: 13px; line-height: 1.55; color: #4b4660; margin-bottom: 4px; }
.chg-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 11px 13px; background: #f6f8ff; border: 1px solid #e2e6ff; border-radius: 12px; font-size: 12.5px; line-height: 1.55; color: #4b4670; }
.chg-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--brand, #6c60f4); }

/* ==========================================================================
   모바일 반응형(≤420px) — 학부모 앱 버튼·입력창 넘침/깨짐 방지(레이아웃만)
   ========================================================================== */
@media (max-width: 420px) {
  .wrap input, .wrap select, .wrap textarea { width: 100%; min-width: 0; }
  .seg > * { min-width: 0; }
  .child-add input { min-width: 0; }
  .contact-name { gap: 6px; }
  .modal-card { padding: 22px 16px 18px; }
  /* 신청 캘린더 모바일 정리: 7열 유지하되 셀 내용이 좁은 너비에 맞게 축소 */
  .cal { gap: 4px; }
  /* 셀 높이를 조금 키우고 넘침을 잘라, '휴무'·'준비중' 배지가 셀 밖(다음 줄)으로
     흘러나와 날짜와 어긋나 보이던 문제를 막는다. */
  .cal-cell { aspect-ratio: 1/1.32; padding: 5px 1px 3px; border-radius: 11px; overflow: hidden; }
  .cal-cell .dnum { font-size: 12px; }
  .cal-cell .emoji { font-size: 16px; margin-top: 2px; }
  .cal-cell .thumb { width: 24px; height: 24px; border-radius: 7px; margin-top: 2px; }
  .cal-cell .cstat { font-size: 9px; }
  .cal-cell .mealbar { gap: 1px; }
  .cal-cell .mealbar i { font-size: 8px; padding: 1px 2px; }
  .cal .dow { font-size: 11px; }
  .cal-head { gap: 10px; margin: 14px 0 8px; }
  .cal-title { font-size: 16px; min-width: 96px; }
  .cal-nav { width: 34px; height: 34px; font-size: 18px; }
  /* 충전 금액칩 2열(공용 380 규칙 보강) */
  .chg-amts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 340px) {
  .cal { gap: 3px; }
  .cal-cell { padding: 4px 1px 2px; }
  .cal-cell .emoji { font-size: 14px; }
  .cal-cell .thumb { width: 21px; height: 21px; }
}

/* ==========================================================================
   이번 급식표(업체가 이미지로 등록) — 신청 탭 상단 배너 + 이미지 모달
   ========================================================================== */
.mchart-banner { margin-top: 14px; }
.mchart-banner-btn {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 9px; width: 100%; padding: 16px 14px; border-radius: 18px; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, #eef0ff 0%, #ffffff 70%);
  border: 1.5px solid #dcd9fb; box-shadow: 0 8px 22px -14px rgba(76, 63, 214, .45);
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.mchart-banner-btn:hover { border-color: var(--brand, #6c60f4); box-shadow: 0 12px 26px -14px rgba(76, 63, 214, .55); }
.mchart-banner-btn:active { transform: scale(.99); }
.mchart-banner-btn:focus-visible { outline: 2px solid var(--brand, #6c60f4); outline-offset: 2px; }
.mchart-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--brand-dark, #5546e0); }
.mchart-eyebrow svg { flex: 0 0 auto; }
.mchart-thumb {
  width: 100%; max-width: 240px; height: 128px; object-fit: cover;
  border-radius: 13px; background: #fff; border: 1px solid #e6e3fb;
}
.mchart-t { font-size: 15.5px; font-weight: 800; color: #2e2952; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mchart-p { font-size: 12.5px; color: #6b7280; font-variant-numeric: tabular-nums; }
.mchart-cta {
  display: inline-flex; align-items: center; margin-top: 2px; padding: 9px 22px; border-radius: 999px;
  background: var(--brand, #6c60f4); color: #fff; font-size: 13.5px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(108, 96, 244, .7);
}

/* 메뉴·가격(주문 단위) 카드 — 업체 등록 품목·단가. 사진 급식표와 별개 */
.menu-price-card {
  margin-top: 12px; padding: 14px 16px; border-radius: 16px;
  background: #fff; border: 1.5px solid #e6e3fb;
  box-shadow: 0 6px 18px -14px rgba(76, 63, 214, .4);
}
.menu-price-card .mp-hd {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 800; color: #2e2952;
}
.menu-price-card .mp-hd svg { flex: 0 0 auto; }
.menu-price-card .mp-tag {
  font-size: 11px; font-weight: 700; color: var(--brand-dark, #5546e0);
  background: #eef0ff; border-radius: 999px; padding: 2px 8px; margin-left: 2px;
}
.menu-price-card .mp-list { margin-top: 9px; display: flex; flex-direction: column; gap: 2px; }
.menu-price-card .mp-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px dashed #eceafc;
}
.menu-price-card .mp-row:last-child { border-bottom: 0; }
.menu-price-card .mp-thumb {
  width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
  margin-right: 9px; flex: 0 0 auto; background: #f2f2fa; border: 1px solid #eceafc;
}
.menu-price-card .mp-name { font-size: 14px; font-weight: 700; color: #2e2952; flex: 1 1 auto; }
.menu-price-card .mp-price {
  font-size: 14px; font-weight: 800; color: var(--brand, #6c60f4);
  font-variant-numeric: tabular-nums;
}
.menu-price-card .mp-note { margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: #8b8ba3; }

/* ==========================================================================
   버튼 가운데 정렬(대표 지시) — inline/좁은 버튼 묶음만 center.
   full-width(.btn.full)·flex:1 자식은 이미 폭을 채우므로 영향 없음(레이아웃 유지).
   ========================================================================== */
.seg, .child-add { justify-content: center; }
.child-chips, .hist-presets { justify-content: center; }
/* 카드/시트 안에서 홀로 놓인 좁은 링크형 버튼(예: 전체 식단표 보기)도 가운데 */
.sheet-card > .link-btn { display: block; margin-left: auto; margin-right: auto; }

/* 급식표 이미지 모달(전체화면·핀치줌/스크롤) */
.mchart-ov {
  position: fixed; inset: 0; z-index: 300; display: none;
  flex-direction: column; background: rgba(17, 14, 34, .9);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.mchart-ov.show { display: flex; }
.mchart-box { display: flex; flex-direction: column; width: 100%; height: 100%; }
.mchart-hd {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px)); color: #fff;
}
.mchart-ti { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.mchart-ti b { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mchart-ti span { font-size: 12.5px; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.mchart-x {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; font-family: inherit; transition: background .12s;
}
.mchart-x:hover { background: rgba(255, 255, 255, .28); }
.mchart-scroll {
  flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch;
  touch-action: pinch-zoom; padding: 0 12px 16px; text-align: center;
}
.mchart-scroll img {
  display: inline-block; max-width: 100%; height: auto; border-radius: 12px;
  background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

/* ---------- 주문 시트: 점심/저녁 끼니 선택 ----------
   같은 날 두 번 배송하는 업체만 탭이 뜬다(점심만 쓰면 종전 화면 그대로). */
.meal-tabs { display: flex; gap: 6px; margin: 6px 0 10px; }
.meal-tab {
  flex: 1 1 0; padding: 9px 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid #e6e1d8; background: #faf8f5; color: #6b6257;
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: -0.01em;
  transition: background .12s, color .12s, border-color .12s;
}
.meal-tab:hover { background: #f3efe9; }
.meal-tab.on { background: var(--brand, #6c60f4); border-color: var(--brand, #6c60f4); color: #fff; }
.meal-tab .mt-q { font-size: 12px; font-weight: 700; opacity: .85; }
.sheet-hd .meal-tag {
  font-size: 12px; font-weight: 800; color: #7a4bd6;
  background: #f1ecfd; border-radius: 8px; padding: 2px 7px;
}
.pill.meal-dinner { background: #f1ecfd; color: #6c47c4; }

/* 현금영수증 요청 모달의 발급 가능 금액 요약(충전 합계 − 이미 요청) */
.rf-sum {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: #faf8f5; border: 1px solid #ece7de; font-size: 13px;
}
.rf-sum .ob-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.rf-sum .ob-row b { font-weight: 800; }