/* 올댓학원 앱 — 퍼블리셔 작업 영역.
   네이버 커넥트 단말(세로 터치스크린) 기준.
   디자인 시스템 출처: ai팜_네이버커넥트/project (class_ 시리즈 1차 퍼블리싱, Figma 네이버커넥트)
   병합 시 원본 CSS의 "main > .inner" 선택자는 이 앱이 SPA(화면 전환 시 페이지 이동 없이
   9개 section.screen이 한 <main>에 공존)라서 ".inner"로 완화했습니다. 그 외 선택자는 원본 그대로. */

/* ============================================================
   디자인 토큰 — colors (Figma "AI 팜" node-id=5889-13336)
   ============================================================ */
:root {
  /* ── primitive ── */
  --primitive-ai-pharm-wh-fff:   #FFFFFF;
  --primitive-ai-pharm-black-22: #222222;
  --primitive-color-click-green: #124B29;
  --primitive-color-disable-bg:  #414141;
  --primitive-ai-naver-color-gray-line: #434343;
  --primitive-ai-pharm-gray-50:     #505050;
  --primitive-bg-card:        #141414;
  --primitive-bg-screen:      #0a0a0a;
  --primitive-primaty:  #00DE5A;
  --primitive-txt-gray: #828282;
  --primitive-bg:       #000000;
  --primitive-bg-sub:   #1E1E1E;

  /* ── semantic ── */
  --color-text-primary:    var(--primitive-ai-pharm-wh-fff);
  --color-text-secondary:  var(--primitive-txt-gray);
  --color-text-disabled:   var(--primitive-txt-gray);
  --color-text-muted:      var(--primitive-ai-pharm-gray-50);

  --color-bg-default:      var(--primitive-bg);
  --color-bg-surface:      var(--primitive-bg-sub);
  --color-bg-disabled:     var(--primitive-color-disable-bg);

  --color-border-default:  var(--primitive-ai-naver-color-gray-line);
  --color-border-subtle:   var(--primitive-ai-naver-color-gray-line);

  --color-brand-primary:   var(--primitive-primaty);
  --color-brand-pressed:   var(--primitive-color-click-green);
  --color-brand-on:        var(--primitive-ai-pharm-wh-fff);

  --color-bg-card:         var(--primitive-bg-card);
  --color-bg-screen:       var(--primitive-bg-screen);

  --color-button-text:        var(--primitive-ai-pharm-wh-fff);
  --color-button-bg:          var(--primitive-primaty);
  --color-button-bg-hover:    var(--primitive-color-click-green);
  --color-button-bg-disabled: var(--primitive-color-disable-bg);

  --danger: #ff5b5b;
}

/* ============================================================
   디자인 토큰 — spacing · 타이포그래피
   ============================================================ */
:root {
  --font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;

  --primitive-font-weight-r:  400;
  --primitive-font-weight-m:  500;
  --primitive-font-weight-sb: 600;
  --primitive-font-weight-b:  700;
  --primitive-font-weight-eb: 800;
  --primitive-font-letter-spacing: -0.025em;

  /* mid: 26px */
  --text-mid-font-size: 26px;
  --text-mid-line-height: 36px;
  --text-mid-letter-spacing: var(--primitive-font-letter-spacing);
  --text-mid-weight: var(--primitive-font-weight-m);
  --text-mid-weight-strong: var(--primitive-font-weight-sb);

  /* xs: 20px */
  --text-xs-font-size: 20px;
  --text-xs-line-height: 22px;
  --text-xs-letter-spacing: var(--primitive-font-letter-spacing);
  --text-xs-weight: var(--primitive-font-weight-m);
  --text-xs-weight-light: var(--primitive-font-weight-r);
  --text-xs-weight-strong: var(--primitive-font-weight-b);

  /* big: 36px */
  --text-big-font-size: 36px;
  --text-big-line-height: 46px;
  --text-big-letter-spacing: var(--primitive-font-letter-spacing);
  --text-big-weight: var(--primitive-font-weight-sb);

  /* xxl: 48px */
  --text-xxl-font-size: 48px;
  --text-xxl-line-height: 68px;
  --text-xxl-letter-spacing: var(--primitive-font-letter-spacing);
  --text-xxl-weight: var(--primitive-font-weight-eb);

  /* card: 24px */
  --text-card-font-size: 24px;
  --text-card-line-height: 34px;
  --text-card-letter-spacing: var(--primitive-font-letter-spacing);
  --text-card-weight: var(--primitive-font-weight-sb);

  /* spacing scale */
  --spacing-2xs: 4px;
  --spacing-xs:  8px;
  --spacing-sm:  12px;
  --spacing-md:  16px;
  --spacing-lg:  22px;
  --spacing-xl:  32px;
  --spacing-page-h: 20px;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-chk-ico: 10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  --spacing-btn-h: 24px;
  --spacing-btn-v: 20px;
  --spacing-btn-gap: 10px;

  --size-num-h: 86px;
  --spacing-num-p: 10px;

  /* .class-action-btn__icon(공용 화살표)은 --_ico-size에 의존 — .class-action-btn 안에서
     쓰일 땐 거기서 재선언되지만, pay-end-review__btn처럼 그 밖에서 재사용될 때를 위해
     전역 기본값을 둔다(참고: class_common.css 원본 주석 "컨텍스트 밖 재사용 시 개별 주입"). */
  --_ico-size: 20px;
}

/* ============================================================
   리셋
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--color-bg-screen);
  font-family: 'Pretendard', var(--font-family-base);
  height: 100%;
  overflow-x: hidden;
}
button { font: inherit; }

/* ============================================================
   키오스크 오조작 방어 — 잘못된 드래그/스와이프/확대로 인한 화면 이동 차단
   (세로 스크롤은 유지 / 가로 스와이프·핀치줌·당겨서새로고침·고무줄·선택·이미지드래그만 차단)
   ============================================================ */
html, body {
  overscroll-behavior: none;      /* 당겨서 새로고침 · 스크롤 체이닝 · 고무줄 바운스 차단 */
  touch-action: pan-y;            /* 세로 스크롤만 허용 → 가로 스와이프(뒤로가기)·핀치줌 차단 */
  -webkit-user-select: none; user-select: none;   /* 텍스트 선택 드래그 방지 */
  -webkit-touch-callout: none;    /* 롱프레스 콜아웃/컨텍스트 방지 */
}
/* 입력 필드만 선택·편집 허용 */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text; user-select: text; touch-action: auto;
}
/* 이미지·링크 드래그(고스트 이미지) 방지. 이미지 탭은 부모 버튼으로 전달 */
img, a { -webkit-user-drag: none; user-drag: none; }
img { pointer-events: none; }
/* 내부 스크롤 영역: 스크롤이 body로 새어 고무줄 나는 것 방지 */
.set-scroll, .std-list, .room-list, .pay-list,
.normal-pay-list-area, .class-select-main__list-wrap { overscroll-behavior: contain; }

/* ============================================================
   Pretendard 폰트 (common.css)
   ============================================================ */
@font-face { font-family:'Pretendard'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Pretendard'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Pretendard'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Pretendard'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Pretendard'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }

/* ============================================================
   단말 프레임 (.class-page 대응)
   ============================================================ */
.device {
  min-height: 100dvh;
  max-width: 533px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-default);
  overflow: hidden;
}

/* ============================================================
   헤더 (class-header 기반, #backBtn 기능 유지)
   ============================================================ */
/* class-header — 학원 전용 헤더 (class_common.css 원본 그대로, id 선택자 없음)
   변형: .class-header--first(홈 아이콘, 진입화면) / .class-header--back(뒤로가기, 그 외 화면) */
.class-header {
  --_mask-bell: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22"><path fill="black" d="M17.1733 11.3666V8.58666C17.1733 5.13053 14.8335 2.2218 11.6564 1.3524C11.3451 0.558133 10.5723 0 9.66001 0C8.74768 0 7.98561 0.558133 7.66361 1.3524C4.48655 2.23253 2.14668 5.14126 2.14668 8.58666V11.3666L0.311284 13.202C0.211806 13.3023 0.133104 13.4212 0.0796901 13.552C0.0262761 13.6828 -0.000798751 13.8228 1.794e-05 13.9641V16.1107C1.794e-05 16.7011 0.483017 17.1841 1.07335 17.1841H18.2467C18.837 17.1841 19.32 16.7011 19.32 16.1107V13.9641C19.32 13.6743 19.2019 13.4059 19.0087 13.202L17.1733 11.3666ZM12.6868 19.32H6.63321C7.07328 20.5758 8.25394 21.4666 9.66001 21.4666C11.0661 21.4666 12.2467 20.5758 12.6868 19.32Z"/></svg>');
  --_mask-ico-back: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 20" fill="none"><path stroke="black" stroke-width="2.07375" stroke-linecap="round" stroke-linejoin="round" d="M10.7148 1.03686L1.03734 9.67749L10.7148 18.3181"/></svg>');
  --_mask-ico-first: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 16"><path fill="black" d="M16.9671 8.88969V11.3112C16.9671 13.5716 13.946 15.0816 10.3689 15.0816C6.79169 15.0816 3.77065 13.5716 3.77065 11.3112V8.88969L9.31881 11.1086C9.92335 11.3506 10.5929 11.3766 11.2144 11.1821L11.4189 11.1086L16.9671 8.88969ZM18.8523 6.1043L10.7186 9.35816C10.4941 9.44786 10.2437 9.44786 10.0192 9.35816L0.593133 5.58775C-0.197711 5.27198 -0.197711 4.15405 0.593133 3.83828L10.0192 0.0678674C10.0933 0.038054 10.1709 0.0177826 10.2501 0.00754073L10.3689 0L10.4876 0.00754073C10.5669 0.0177826 10.6445 0.038054 10.7186 0.0678674L20.1748 3.85053L20.2766 3.90238L20.3699 3.96647L20.4528 4.03811L20.5235 4.1154L20.5565 4.15688L20.6253 4.26528L20.6743 4.37368L20.7064 4.46982L20.73 4.59707L20.7356 4.65175L20.7375 10.3686C20.7375 10.6186 20.6382 10.8584 20.4614 11.0352C20.2846 11.2119 20.0449 11.3112 19.7949 11.3112C19.5449 11.3112 19.3051 11.2119 19.1284 11.0352C18.9516 10.8584 18.8523 10.6186 18.8523 10.3686V6.1043Z"/></svg>');
  width: 100%;
  background-color: var(--color-bg-default);
}
.class-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 27px; box-sizing: border-box;
}
/* 아이콘 + 학원 이름을 **한 덩어리로** 누른다(2026-09-02). 예전엔 글자에만 반응해서
   옆의 학사모만 계속 누르는 사람이 있었다. 여백까지 손가락이 닿게 padding 을 준다.
   ⚠️ margin 이 아니라 padding 이다 — 눌리는 면적을 넓히려는 것이지 자리를 벌리려는 게 아니다. */
.class-header__left {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 0; margin: -10px 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.class-header__left:active { opacity: .6; }
.class-header__ico-wrap { display: flex; align-items: center; width: 27px; justify-content: center; }
.class-header__ico-link {
  display: inline-block; line-height: 0; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.class-header__ico {
  height: 20px; display: block; flex-shrink: 0;
  color: var(--color-text-primary); background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.class-header--back .class-header__ico {
  aspect-ratio: 12 / 20;
  -webkit-mask-image: var(--_mask-ico-back); mask-image: var(--_mask-ico-back);
}
.class-header--first .class-header__ico {
  aspect-ratio: 21 / 16;
  -webkit-mask-image: var(--_mask-ico-first); mask-image: var(--_mask-ico-first);
}
.class-header__title {
  font-family: var(--font-family-base);
  font-size: var(--text-mid-font-size);
  font-weight: var(--text-mid-weight-strong);
  line-height: 40px;
  letter-spacing: var(--text-mid-letter-spacing);
  color: var(--color-text-primary);
  white-space: nowrap;
}
/* class-header__call-* — 우측 "직원 호출" 버튼 (class_common.css 원본, 장식용·기능 없음) */
.class-header__call-btn {
  background-color: var(--color-bg-default);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden; box-sizing: border-box;
}
.class-header__call-link {
  display: flex; align-items: center; gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-page-h) var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-primary); text-decoration: none; cursor: pointer;
  white-space: nowrap; box-sizing: border-box;
}
.class-header__bell {
  height: 24px; aspect-ratio: 20 / 22; display: block; flex-shrink: 0;
  color: var(--color-brand-primary); background: currentColor;
  -webkit-mask-image: var(--_mask-bell); mask-image: var(--_mask-bell);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.class-header__call-text {
  font-family: var(--font-family-base); font-size: var(--text-xs-font-size);
  font-weight: var(--text-mid-weight-strong); line-height: 24px;
  letter-spacing: var(--text-xs-letter-spacing); color: var(--color-text-primary);
}

/* ============================================================
   본문 공통 (.screen)
   ============================================================ */
main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.screen { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
/* [hidden] 속성은 항상 display:none이어야 함 — 컴포넌트별 display 지정(flex 등)이
   [hidden]의 UA 기본 스타일을 덮어써버리는 문제를 여기서 한 번에 방지 */
[hidden] { display: none !important; }
.screen.center { align-items: center; justify-content: center; text-align: center; }
.inner { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; padding: 0 30px; }
.center { text-align: center; }
h2 {
  font-family: var(--font-family-base); font-size: 20px; margin: 4px 0 2px;
  color: var(--color-text-primary);
}
.sub { color: var(--color-text-disabled); font-size: 13px; margin: 0 0 8px; }
.hint { color: var(--color-text-disabled); font-size: 12px; }
.hint.center { text-align: center; }
.text_accent { color: var(--color-brand-primary); }

/* ============================================================
   class-action-btn — 공용 액션 버튼 (class_common.css)
   ============================================================ */
.class-action-btn {
  --_py: 25px; --_radius: 12px; --_border: 2px; --_lh: 40px; --_ico-size: 20px;
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: var(--_py) 30px;
  background-color: var(--color-bg-surface);
  border: var(--_border) solid var(--color-border-default);
  border-radius: var(--_radius);
  cursor: pointer; box-sizing: border-box; text-decoration: none;
  color: var(--color-brand-primary);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.class-action-btn--focus, .class-action-btn:hover {background-color: var(--color-brand-primary); border-color: var(--color-brand-primary);
  color: var(--color-bg-default); }
.class-action-btn--click, .class-action-btn:active {
  background-color: var(--color-brand-primary); border-color: var(--color-brand-primary);
  color: var(--color-bg-default);
}
.class-action-btn--focus .class-action-btn__text,
.class-action-btn:hover .class-action-btn__text {color: var(--color-bg-default);}
.class-action-btn--focus .class-action-btn__icon,
.class-action-btn:hover .class-action-btn__icon {color: var(--color-bg-default);}
.class-action-btn__text {
  font-family: var(--font-family-base); font-size: var(--text-mid-font-size);
  font-weight: var(--text-mid-weight-strong); line-height: var(--_lh);
  letter-spacing: var(--text-mid-letter-spacing); color: var(--color-text-primary); white-space: nowrap;
}
.class-action-btn--click .class-action-btn__text, .class-action-btn:active .class-action-btn__text {
  color: var(--color-bg-default);
}
.class-action-btn__icon {
  --_mask-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 17" fill="none"><path stroke="black" stroke-width="2.35897" stroke-linecap="round" stroke-linejoin="round" d="M1.17969 15.3333L8.25661 8.25637L1.17969 1.17944"/></svg>');
  color: var(--color-brand-primary);
  height: var(--_ico-size); aspect-ratio: 10 / 17; display: block; flex-shrink: 0;
  background: currentColor;
  -webkit-mask-image: var(--_mask-icon); mask-image: var(--_mask-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.btn-grid { display: flex; flex-direction: column; gap: 14px; }

/* ============================================================
   foot-box — 공용 CTA 푸터 (class_common.css의 class-page-footer)
   ============================================================ */
.foot-box { flex-shrink: 0; background-color: var(--color-bg-default);     width: 100%;}
.foot-box > .inner { display: flex; flex-direction: column;  gap: var(--spacing-page-h); }
.class-page-footer__btn-wrap { display: flex; flex-direction: column; gap: 13px; }
/* 결제하기 + 부분결제 가로 정렬. 부분결제 숨김 시 결제하기가 전체 폭 차지 */
.pay-btn-row { display: flex; gap: 10px; }
.pay-btn-row .class-page-footer__btn {flex: 1;word-break: keep-all;}
.pay-btn-row .class-page-footer__btn.class-page-footer__btn--partial {    width: 140px;
    flex: inherit;}
.class-page-footer__btn--partial { flex: 0 0 auto; white-space: nowrap; }
/* 전체선택 — 부분결제와 같은 고정폭. '결제하기' 가 남는 폭을 가져간다 */
.pay-btn-row .class-page-footer__btn.class-page-footer__btn--all { width: 140px; flex: inherit; }
.class-page-footer__btn--all { flex: 0 0 auto; white-space: nowrap; }

/* 대기화면 학원 이름 = 설정 진입점(탭 가능). 그 외 화면에선 '이전' 텍스트라 해당 없음 */
.class-header--first .class-header__title { cursor: pointer; }
/* 관리자 비밀번호 — 틀렸을 때 안내 */
.apw-error {
  margin-top: 14px; text-align: center; font-family: var(--font-family-base);
  font-size: 20px; font-weight: 700; color: #ff5a5a;
}

/* 부분결제 — 금액 입력 힌트 + 확인 화면 요약 */
.partial-hint { margin-top: 8px; font-size: 20px; color: var(--color-text-sub, #888); text-align: center; }
.partial-hint b { color: var(--color-brand-primary);     font-weight: 400;}
.partial-amount-hint {
  font-family: var(--font-family-base); font-size: 27px; font-weight: var(--primitive-font-weight-sb);
  color: var(--color-text-secondary); text-align: center; margin: 0; padding: 8px 0 14px; width: 100%;
}
.partial-amount-hint b { color: var(--color-brand-primary); font-weight: var(--primitive-font-weight-sb); }
.partial-summary {
  width: 100%; background-color: var(--color-bg-surface);
  border: 2px solid var(--color-border-default); border-radius: 16px; overflow: hidden; box-sizing: border-box;
}
.partial-summary__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: none; box-sizing: border-box;
}
.partial-summary__row--total { border-bottom: 2px solid var(--color-border-default); }
.partial-summary__label {
  font-family: var(--font-family-base); font-size: 24px; font-weight: var(--primitive-font-weight-r);
  line-height: 34px; letter-spacing: -0.6px; color: var(--color-text-primary);
}
.partial-summary__value {
  font-family: var(--font-family-base); font-size: 24px; font-weight: var(--primitive-font-weight-m);
  line-height: 34px; letter-spacing: -0.6px; color: var(--color-text-primary);
}
.partial-summary__row--total .partial-summary__label,
.partial-summary__row--total .partial-summary__value { font-weight: var(--primitive-font-weight-m); }
.partial-summary__row--accent .partial-summary__value { color: var(--color-brand-primary); font-weight: var(--primitive-font-weight-b); }
.partial-summary__row--muted .partial-summary__value { color: var(--color-text-secondary); }
.class-page-footer__btn {
  width: 100%; padding: 17px var(--spacing-md); border-radius: var(--radius-lg); border: none;
  font-family: var(--font-family-base); font-size: var(--text-mid-font-size);
  font-weight: var(--text-mid-weight-strong); line-height: var(--text-mid-line-height);
  letter-spacing: var(--text-mid-letter-spacing); text-align: center; cursor: pointer;
  appearance: none; -webkit-appearance: none; box-sizing: border-box;
  background-color: var(--color-bg-disabled); color: var(--color-text-disabled);
}
.class-page-footer__btn:not([disabled]) { background-color: var(--color-brand-primary); color: var(--color-bg-default); }
/* 게이트웨이발 결제화면 '중단'(취소) — 보조 아웃라인(결제하기 옆, 좁게). :not([disabled]) 이후 배치해 브랜드색 덮음 */
.class-page-footer__btn--cancel { flex: 0 0 auto; width: 180px; white-space: nowrap;
  background-color: var(--color-bg-surface); color: var(--color-text-secondary);
  border: 2px solid var(--color-border-default); }
.class-page-footer__btn--cancel:not([disabled]) {
  background-color: var(--color-bg-surface); color: var(--color-text-secondary); }
.class-page-footer__noti {
  font-family: var(--font-family-base); font-size: var(--text-xs-font-size); font-weight: var(--text-xs-weight);
  line-height: var(--text-xs-line-height); letter-spacing: var(--text-xs-letter-spacing);
  color: var(--color-text-disabled); text-align: center; margin: 0;
}
.class-page-banner {
  width: 100%; height: 94px; background-color: #005623; border-radius: var(--radius-lg);
  overflow: hidden; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
}
.class-page-banner__img { width: 100%; height: 100%; display: block; object-fit: cover; }
.class-page-brand {
  font-family: var(--font-family-base); font-size: var(--text-xs-font-size);
  font-weight: var(--text-mid-weight-strong); line-height: var(--text-xs-line-height);
  letter-spacing: var(--text-xs-letter-spacing); color: var(--color-text-disabled);
  text-align: center; margin: 0; padding-bottom: 29px; margin-top: 20px;
}

/* ============================================================
   완료 화면 공통 아이콘 (class_common.css)
   ============================================================ */
.class-ico-check {
  flex-shrink: 0; width: 87px; height: 87px; border-radius: var(--radius-full);
  border: 5.33px solid var(--color-brand-primary); display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; color: var(--color-brand-primary);
}
.class-ico-check__svg { width: 55px; height: 55px; display: block; flex-shrink: 0; }
.class-ico-check--fail { border-color: var(--danger); color: var(--danger); }
/* 출결 결과 아이콘 — ERP 가 거절하면(수업일 아님·대상반 없음 등) 체크가 아니라 ✕ 를 띄운다.
   ⚠️ 두 svg 를 다 넣어 두고 CSS 로 고른다. 결과가 온 뒤 아이콘을 만들면 화면이 한 번 튄다. */
.class-ico-check__no { display: none; }
.is-fail .class-ico-check { border-color: var(--danger); color: var(--danger); }
.is-fail .class-ico-check__ok { display: none; }
.is-fail .class-ico-check__no { display: block; }
.class-ico-star {
  --_mask-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28" fill="none"><path d="M14.25 1.25L18.267 9.388L27.25 10.701L20.75 17.032L22.284 25.976L14.25 21.751L6.216 25.976L7.75 17.032L1.25 10.701L10.233 9.388L14.25 1.25Z" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  color: var(--color-brand-primary); width: 19px; height: 18px; display: block; flex-shrink: 0;
  background: currentColor; -webkit-mask-image: var(--_mask-icon); mask-image: var(--_mask-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.class-ico-phone {
  --_mask-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="29" viewBox="0 0 21 29" fill="none"><path d="M10.35 22.05H10.363M3.85 1.25H16.85C18.2859 1.25 19.45 2.41406 19.45 3.85V24.65C19.45 26.0859 18.2859 27.25 16.85 27.25H3.85C2.41406 27.25 1.25 26.0859 1.25 24.65V3.85C1.25 2.41406 2.41406 1.25 3.85 1.25Z" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  color: var(--color-brand-primary); width: 13px; height: 19px; display: block; flex-shrink: 0;
  background: currentColor; -webkit-mask-image: var(--_mask-icon); mask-image: var(--_mask-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.std-list__check-icon {
  width: 17px; height: 13px; display: block; background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="13" viewBox="0 0 18 13" fill="none"><path d="M1.44336 5.77398L6.49576 10.8264L15.8788 1.44336" stroke="%231E1E1E" stroke-width="3.33125" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="13" viewBox="0 0 18 13" fill="none"><path d="M1.44336 5.77398L6.49576 10.8264L15.8788 1.44336" stroke="%231E1E1E" stroke-width="3.33125" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

/* ============================================================
   선택 화면 공통 (.class-select) — students / attend-class / payment
   ============================================================ */
.class-select .class-select-main__top { flex-shrink: 0; width: 100%; }
.class-select .class-select-main__txt {
  font-family: var(--font-family-base); font-size: 30.65px; font-weight: var(--text-mid-weight-strong);
  line-height: 37.31px; letter-spacing: var(--text-mid-letter-spacing);
  color: var(--color-text-primary); text-align: center; margin: 0;
}
.class-select .class-select-main__txt--accent { color: var(--color-brand-primary); }
.class-select .class-select-main__list-wrap.pay-end-review__header { flex: 1 1 0; min-height: 0; overflow-y: auto; width: 100%; }
.class-select .inner { padding: 20px 30px 20px; gap: 40px; }
/* ============================================================
   students 화면 (class_select_std)
   ============================================================ */
/* ⚠️ height 가 아니라 max-height, scroll 이 아니라 auto 다(2026-09-16).
   · overflow-y:scroll 은 내용이 넘치든 말든 **항상** 스크롤바를 그린다 — 학생이 한 명일
     때도 오른쪽에 회색 막대가 남았다.
   · height 고정이면 한 줄짜리 목록 아래로 빈 상자가 그대로 남는다.
   목록이 길면 예전과 똑같이 그 높이에서 스크롤된다. */
.class-select-std .std-list { display: flex; flex-direction: column; gap: var(--spacing-page-h);     max-height: 400px;
    overflow-y: auto;}
.class-select-std .std-list__item {
  width: 100%; min-height: 139px; display: flex; align-items: center; gap: var(--spacing-page-h);
  padding: 22px 29px; background-color: var(--color-bg-surface);
  border: 2px solid var(--color-border-default); border-radius: var(--radius-lg);
  cursor: pointer; appearance: none; -webkit-appearance: none; box-sizing: border-box; text-align: left;
}
.class-select-std .std-list__prof {
  flex-shrink: 0; width: 77px; height: 77px; border-radius: var(--radius-full);
  background-color: var(--color-brand-pressed); overflow: hidden;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.class-select-std .std-list__prof-img { width: 83px; height: 83px; display: block; flex-shrink: 0; }
.class-select-std .std-list__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.class-select-std .std-list__name {
  font-family: var(--font-family-base); font-size: var(--text-card-font-size); font-weight: var(--text-card-weight);
  line-height: 35px; letter-spacing: var(--text-card-letter-spacing); color: var(--color-text-primary); margin: 0;
}
.class-select-std .std-list__meta { display: flex; flex-direction: column; }
/* ⚠️ 이 카드에 새 줄을 넣을 때 **색을 반드시 직접 적는다.** 카드가 <button> 이라 글자색이
   상속되지 않는다(UA 기본색) — 빠뜨리면 어두운 카드(#1E1E1E) 위에 검은 글씨가 찍혀
   **요소도 글자도 멀쩡한데 안 보인다.** 학원명 줄이 실제로 그렇게 나갔다(2026-10-01). */
.class-select-std .std-list__school, .class-select-std .std-list__phone {
  min-height: 27px; font-family: var(--font-family-base); font-size: var(--text-xs-font-size);
  font-weight: var(--text-mid-weight-strong); line-height: 24px;
  letter-spacing: var(--text-xs-letter-spacing); color: var(--color-text-disabled); margin: 0;
}
/* 학원명 — 크기는 전화번호와 같고 **색은 학생 이름과 같은 흰색**이다(기획 요청 2026-10-01).
   학원이 여럿인 매장에서 이 줄이 두 사람을 가르는 유일한 단서라, 흐린 회색이면 눈에 안 든다. */
.class-select-std .std-list__academy {
  min-height: 27px; font-family: var(--font-family-base); font-size: var(--text-xs-font-size);
  font-weight: var(--text-mid-weight-strong); line-height: 24px;
  letter-spacing: var(--text-xs-letter-spacing); color: var(--color-text-primary); margin: 0;
}
.class-select-std .std-list__item--selected { border-color: var(--color-brand-primary); }
.class-select-std .std-list__check {
  flex-shrink: 0; width: 33px; height: 33px; border-radius: var(--radius-full);
  background-color: var(--color-text-disabled); display: flex; align-items: center; justify-content: center;
}
.class-select-std .std-list__item--selected .std-list__check { background-color: var(--color-brand-primary); }

/* ============================================================
   attend-class 화면 (class_select_room)
   ============================================================ */
.class-select-room .room-list { display: flex; flex-direction: column;    max-height: 370px;
    overflow-y: auto; }
.class-select-room .room-list__item {
  width: 100%; display: flex; align-items: center; gap: var(--spacing-page-h);
  padding: 22px 29px; background-color: var(--color-bg-surface);
  border: 2px solid var(--color-border-default); border-radius: var(--radius-lg);
  cursor: pointer; appearance: none; -webkit-appearance: none; box-sizing: border-box; text-align: left;
  margin-bottom: 20px;
}
.class-select-room .room-list__item--selected { border-color: var(--color-brand-primary); }
.class-select-room .room-list__prof {
  flex-shrink: 0; width: 77px; height: 77px; border-radius: var(--radius-full);
  background-color: var(--color-brand-pressed); overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.class-select-room .room-list__prof-img { width: 44px; height: 44px; display: block; flex-shrink: 0; }
.class-select-room .room-list__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.class-select-room .room-list__name {
  font-family: var(--font-family-base); font-size: var(--text-card-font-size); font-weight: var(--text-card-weight);
  line-height: 35px; letter-spacing: var(--text-card-letter-spacing); color: var(--color-text-primary); margin: 0;
}
.class-select-room .room-list__time {
  min-height: 27px; font-family: var(--font-family-base); font-size: var(--text-xs-font-size);
  font-weight: var(--text-mid-weight-strong); line-height: 24px;
  letter-spacing: var(--text-xs-letter-spacing); color: var(--color-text-disabled); margin: 0;
}
.class-select-room .room-list__check {
  flex-shrink: 0; width: 33px; height: 33px; border-radius: var(--radius-full);
  background-color: var(--color-text-disabled); display: flex; align-items: center; justify-content: center;
}
.class-select-room .room-list__item--selected .room-list__check { background-color: var(--color-brand-primary); }

/* ============================================================
   payment 화면 (class_select_pay)
   ============================================================ */
.class-select-pay .pay-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-page-h);
    max-height: 360px;
    overflow-y: auto;
}
.class-select-pay .pay-list__item,
.chk.pay-list__item {
  width: 100%; display: flex; align-items: center; gap: var(--spacing-page-h);
  padding: 18px 29px; background-color: var(--color-bg-surface);
  border: 2px solid var(--color-border-default); border-radius: var(--radius-lg);
  cursor: pointer; appearance: none; -webkit-appearance: none; box-sizing: border-box; text-align: left;
}
.class-select-pay .pay-list__item--selected, .chk.pay-list__item.on { border-color: var(--color-brand-primary); }
.class-select-pay .pay-list__prof, .pay-list__prof {
  flex-shrink: 0; width: 77px; height: 77px; border-radius: var(--radius-full);
  background-color: var(--color-brand-pressed); overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.class-select-pay .pay-list__prof-img, .pay-list__prof-img { width: 44px; height: 44px; display: block; flex-shrink: 0; }
.class-select-pay .pay-list__info, .pay-list__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.class-select-pay .pay-list__name-wrap, .pay-list__name-wrap { display: flex; flex-direction: column; width: 100%; }
.class-select-pay .pay-list__name, .class-select-pay .pay-list__amount, .pay-list__name, .pay-list__amount {
  font-family: var(--font-family-base); font-size: var(--text-card-font-size); font-weight: var(--text-card-weight);
  line-height: 35px; letter-spacing: var(--text-card-letter-spacing); color: var(--color-text-primary); margin: 0;
}
.class-select-pay .pay-list__due, .pay-list__due {
  min-height: 27px; font-family: var(--font-family-base); font-size: var(--text-xs-font-size);
  font-weight: var(--text-mid-weight-strong); line-height: 24px;
  letter-spacing: var(--text-xs-letter-spacing); color: var(--color-text-disabled); margin: 0;
}
.class-select-pay .pay-list__check, .pay-list__check {
  flex-shrink: 0; width: 33px; height: 33px; border-radius: var(--radius-full);
  background-color: var(--color-text-disabled); display: flex; align-items: center; justify-content: center;
}
.class-select-pay .pay-list__item--selected .pay-list__check, .chk.on .pay-list__check { background-color: var(--color-brand-primary); }

/* 사업자번호 오류 — 서버/기기 값을 나란히 보여 준다. 어느 쪽이 틀렸는지 그 자리에서
   보여야 설치 기사가 데스크에 물어볼 것도 없이 고친다. */
.biz-cmp { display: flex; flex-direction: column; gap: 18px; width: 100%; margin: 4px 0 8px; }
.biz-cmp__row { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.biz-cmp__label { font-family: var(--font-family-base); font-size: 20px;
  font-weight: var(--text-mid-weight-strong); color: var(--color-text-secondary); margin: 0; }
.biz-cmp__value { font-family: var(--font-family-base); font-size: 26px; font-weight: 800;
  color: var(--color-text-primary); margin: 0; text-align: center; word-break: break-all;
  line-height: 1.4; }

/* 수납조회 모드 + 배경화면 없음 — 기본 이미지 + 인사(2026-09-02 기획 · 2026-09-08 배치 변경).
   ⚠️ 인사는 **그림 위, 원래 자리**다. 화면 맨 위에 붙지 않게 여백으로 조금 내려놓는다 —
      그래야 위아래로 숨통이 트여서, 그림이 작아져도 위가 허전해 보이지 않는다.
      (한 번 인사를 그림 아래로 내려봤는데 그건 과했다 — 2026-09-08) */
.class-view-hello {
  display: flex; flex-direction: column; align-items: center; width: 100%;
  flex: 1 1 auto; min-height: 0;              /* 남는 높이를 차지해야 그림을 가운데 놓을 수 있다 */
}
.class-view-hello__hero {
  flex: 0 0 auto; padding: 56px 0 0;          /* 상단에 딱 붙지 않게 조금 내려놓는다 */
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.class-view-hello__sub {
  font-family: var(--font-family-base); font-size: 30px;
  font-weight: var(--text-mid-weight-strong); color: var(--color-text-primary);
  margin: 0; text-align: center;
}
/* 그림은 **인사 아래 남는 공간의 한가운데**에 놓는다. 위아래 여백을 숫자로 박지 않는 이유는,
   그림 높이가 바뀌면 그 숫자가 곧 틀린 값이 되기 때문이다 — 가운데는 늘 가운데다. */
.class-view-hello__img {
  width: 100%; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center;
}
.class-view-hello__img img { display: block; width: 100%; border-radius: var(--radius-lg); }

/* 합계 카드 (payment.html 전용, class_select_pay엔 없던 요소 — normal_pay 합계행 스타일 재사용) */
.total-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 19px 29px; background-color: var(--color-bg-surface);
  border: 2px solid var(--color-border-default); border-radius: 13px; box-sizing: border-box;
}
.amount {
  font-family: var(--font-family-base); font-size: 30.65px; font-weight: var(--text-mid-weight-strong);
  color: var(--color-brand-primary); letter-spacing: var(--text-mid-letter-spacing);
}

/* ============================================================
   pay-result 화면 (class_pay_end)
   ============================================================ */
.class-pay-end-page .pay-end-group {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 45.3px; width: 100%;
}
.pay-end-hero { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 26.65px; width: 100%; }
.pay-end-hero__title {
  font-family: var(--font-family-base); font-size: 36px; font-weight: 800; line-height: 45.3px;
  letter-spacing: var(--text-mid-letter-spacing); color: var(--color-text-primary); text-align: center; margin: 0; width: 100%;
}
.pay-end-review {
  flex-shrink: 0; width: 100%; background-color: var(--color-bg-surface);
  border: 2px solid var(--color-border-default); border-radius: 13px; overflow: hidden; box-sizing: border-box;
}
.pay-end-review__header { padding: 24px 27px; box-sizing: border-box;  border-bottom: 0.666px solid var(--color-text-disabled);}
.pay-end-review__header-text {
  font-family: var(--font-family-base); font-size: var(--text-xs-font-size); font-weight: var(--text-mid-weight-strong);
  line-height: 24px; letter-spacing: var(--text-xs-letter-spacing); color: var(--color-text-primary); margin: 0;
}

.pay-end-review__accent { color: var(--color-brand-primary); }
.pay-end-review__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 24px 27px; border-bottom: 0.666px solid var(--color-text-disabled);
  background: none; border-left: none; border-right: none; border-top: none;
  cursor: pointer; appearance: none; -webkit-appearance: none; box-sizing: border-box; text-align: left;
}
.pay-end-review__btn--last { border-bottom: none; }
.pay-end-review__btn-left { display: flex; align-items: center; gap: 13px; }
.pay-end-review__ico-wrap {
  flex-shrink: 0; width: 29px; height: 29px; border-radius: 7px;
  background-color: var(--color-brand-pressed); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pay-end-review__btn-text {
  font-family: var(--font-family-base); font-size: var(--text-xs-font-size); font-weight: var(--text-mid-weight-strong);
  line-height: 24px; letter-spacing: var(--text-xs-letter-spacing); color: var(--color-text-primary); white-space: nowrap;
}
.pay-end-review__btn-text--medium { font-weight: var(--text-xs-weight); }
.kv {
  display: flex; justify-content: space-between; font-size: 14px; padding: 12px 27px;
  border-bottom: 1px solid var(--color-border-default); color: var(--color-text-primary);
}
.kv:last-child { border-bottom: none; }
.kv span:first-child { color: var(--color-text-disabled); }
.pay-end-sub-txt {
  font-family: var(--font-family-base); font-size: var(--text-xs-font-size); font-weight: var(--text-mid-weight-strong);
  line-height: 24px; letter-spacing: var(--text-xs-letter-spacing); color: var(--color-text-disabled);
  text-align: center; margin: 0; width: 100%;
}
.big-icon { font-size: 56px; margin: 12px 0; }

/* 부분결제 이어하기 안내 (pay-result 화면, 남은 금액 있을 때만) */
.pay-end-more-txt {
  font-family: var(--font-family-base); font-size: 26px; font-weight: var(--primitive-font-weight-sb);
  line-height: 36px; letter-spacing: -0.65px; color: var(--color-text-primary); text-align: center; margin: 0; width: 100%;
}
.pay-end-more-txt__accent { color: var(--color-brand-primary); }
.pay-end-skip-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; padding: 0; background: none; border: none; cursor: pointer; appearance: none; -webkit-appearance: none;
  font-family: var(--font-family-base); font-size: 24px; font-weight: var(--primitive-font-weight-sb);
  line-height: 34px; letter-spacing: -0.6px; color: var(--color-brand-primary);
}
.class-pay-end-page .part_btn_wrap {
    margin-bottom: 110px;
}
.class-pay-end-page .part_btn_wrap .class-page-footer__btn {margin-bottom: 20px;}

/* ============================================================
   attend-result 화면 (class_complete)
   ============================================================ */
.class-complete-page .class-comp-wrap {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 27px; width: 100%;
}
.class-complete-page .class-comp-title {
  font-family: var(--font-family-base); font-size: 38.65px; font-weight: 800; line-height: 45.3px;
  letter-spacing: var(--text-mid-letter-spacing); color: var(--color-text-primary); text-align: center; margin: 0;
}
.class-complete-page .class-comp-main-txt {
  font-family: var(--font-family-base); font-size: 26.65px; font-weight: var(--text-mid-weight-strong);
  line-height: 38.65px; letter-spacing: var(--text-mid-letter-spacing); color: var(--color-text-primary);
  text-align: center; margin: 0; width: 100%;
}
.class-complete-page .class-comp-sub-txt {
  font-family: var(--font-family-base); font-size: var(--text-xs-font-size); font-weight: var(--text-mid-weight-strong);
  line-height: 24px; letter-spacing: var(--text-xs-letter-spacing); color: var(--color-text-disabled);
  text-align: center; margin: 0; width: 100%;
}

/* ============================================================
   actions 화면 (class_main_page 액션 버튼 UI 재사용)
   ============================================================ */
.class-main-page .class-main {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 80px; width: 100%;
}
.class-main-page .class-main__hero {
  display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%;
}
.class-main-page .class-main__title {
  font-family: var(--font-family-base); font-size: var(--text-xxl-font-size); font-weight: var(--text-xxl-weight);
  line-height: var(--text-xxl-line-height); letter-spacing: var(--text-xxl-letter-spacing);
  color: var(--color-brand-primary); text-align: center; margin: 0;
}
.class-main-page .class-main__subtitle {
  font-family: var(--font-family-base); font-size: 26px; font-weight: var(--text-big-weight);
  line-height: 1.4; letter-spacing: var(--text-big-letter-spacing);
  color: var(--color-text-primary); text-align: center; margin: 0;
}
.class-main-page .class-main__actions { display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* ── 광고 모드 (?ad=1) — class_main_page.html .class-main--ad 재현 ──
   기본 모드(class-main__hero/__actions)와 같은 .class-main 안에서 data-bind-row로 전환 */
.class-main-page .class-main.is-ad-mode { align-items: stretch; justify-content: flex-start; gap: 20px; }
/* 수납조회 전용(ad=2 — 버튼이 없는 모드)에서는 **배너가 곧 대기화면**이다.
   높이를 593px 로 고정해 두면 원래 버튼이 있던 자리가 그대로 빈 채로 남는다(2026-08-26 확인).
   그 모드에서만 남는 높이를 채운다 — 검은 여백이 없어지고, 세로가 길어져 이미지도 덜 잘린다.
   ⚠️ ad=1(버튼 있는 모드)은 593px 그대로 둔다. 늘리면 버튼 자리를 침범한다. */
.class-main-page .class-main.is-ad-only .class-ad-banner { height: auto; flex: 1 1 auto; min-height: 0; }
.class-ad-banner {
  /* flex:1로 남는 공간을 채우지 않고, 이미지 원본 비율(479×636)로 고정 높이 유지
     — ad=1(버튼 있음)/ad=2(버튼 없음) 어느 쪽이든 같은 이미지가 항상 같은 크기로 보이게 함 */
  position: relative; width: 100%; height: 593px; flex-shrink: 0; background-color: #005623;
  overflow: hidden; border-radius: var(--radius-lg); cursor: pointer;
}
.class-ad-banner .class-page-banner__img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
}
.class-ad-actions { flex-shrink: 0; display: flex; flex-direction: row; gap: 16px; width: 100%; }
.class-ad-actions .class-action-btn-wrap { flex: 1 1 0; min-width: 0; }
.class-ad-actions .class-action-btn { height: 85px; }

/* ============================================================
   search / paying / attend-confirm — 새 톤 통일 (원본 대응 화면 없음, 톤만 맞춤)
   ============================================================ */
.card {
  background: var(--color-bg-surface); border: 2px solid var(--color-border-default);
  border-radius: var(--radius-xl); padding: 20px;
}
input[type=text] {
  width: 100%; padding: 14px 16px; font-size: 16px; background: var(--color-bg-default);
  color: var(--color-text-primary); border: 2px solid var(--color-border-default);
  border-radius: var(--radius-lg); outline: none;
}
input[type=text]:focus { border-color: var(--color-brand-primary); }
.list { display: flex; flex-direction: column; gap: 10px; }
.list-item {
  width: 100%; text-align: left; background: var(--color-bg-surface);
  border: 2px solid var(--color-border-default); border-radius: var(--radius-lg);
  padding: 16px; font-size: 16px; cursor: pointer; color: var(--color-text-primary);
  display: flex; justify-content: space-between; align-items: center;
}
.list-item:active { border-color: var(--color-brand-primary); }
.chev { color: var(--color-text-disabled); }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--color-bg-disabled); color: var(--color-text-disabled); }
.btn {
  width: 100%; padding: 17px; font-size: 17px; font-weight: 700; border: none; border-radius: var(--radius-lg);
  background: var(--color-brand-primary); color: var(--color-bg-default); cursor: pointer;
}
.btn:active { background: var(--color-brand-pressed); }
.btn.ghost { background: var(--color-bg-surface); color: var(--color-brand-primary); border: 2px solid var(--color-border-default); }
.btn.dark { background: var(--color-bg-disabled); color: var(--color-text-disabled); }
.btn:disabled { background: var(--color-bg-disabled); color: var(--color-text-disabled); cursor: not-allowed; }
.chk {
  display: flex; align-items: center; gap: 12px; padding: 18px 29px;
  border: 2px solid var(--color-border-default); border-radius: var(--radius-lg);
  background: var(--color-bg-surface); cursor: pointer;
}
.chk.on { border-color: var(--color-brand-primary); }
.chk-body { flex: 1; }
.chk .box {
  width: 28px; height: 28px; border-radius: var(--radius-md); border: 3px solid var(--color-border-default);
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 14px;
}
.chk.on .box { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-bg-default); }
.spinner {
  width: 48px; height: 48px; border: 4px solid var(--color-border-default);
  border-top-color: var(--color-brand-primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 20px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   popup — 알림 팝업 (검색결과 없음 / 미납없음 등, 기존 .msg 대체)
   app.css 디자인 토큰(surface/border/radius/brand color) 그대로 사용
   ============================================================ */
.popup-overlay {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0, 0, 0, .8);
  display: flex; align-items: center; justify-content: center;
  padding: 0 30px; box-sizing: border-box;
}
.popup-overlay[hidden] { display: none; }
.popup {
  width: 100%; max-width: 420px; box-sizing: border-box;
  background: var(--color-bg-surface);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: 32px 27px 27px;
  display: flex; flex-direction: column; align-items: center; gap: 36px;
  text-align: center;
  animation: popup-in .18s ease both;
}
@keyframes popup-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.popup__icon {
  width: 56px; height: 56px; border-radius: var(--radius-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-base); font-size: 26px; font-weight: var(--text-mid-weight-strong);
}
.popup--error .popup__icon {
    background: var(--danger);
    color: var(--primitive-bg);
    font-size: 36px;
    font-weight: 900;
}
/* 오류가 아닌 **안내** 팝업은 아이콘을 쓰지 않는다(손님이 잘못한 줄 알게 된다).
   ⚠️ .popup__icon 이 display:flex 라 hidden 속성만으로는 안 숨는다 — 클래스 규칙이 UA 기본값을
      이긴다. 그래서 명시적으로 끈다. */
.popup__icon[hidden] { display: none; }
.popup--ok .popup__icon { background: var(--color-brand-primary); 
    color: var(--primitive-bg);
    font-size: 36px;
    font-weight: 900; }
/* 팝업 제목 — 안내 팝업(직원 호출 등)에서 본문 위에 놓는다. 아이콘이 없는 팝업의 머리다. */
.popup__title {
  font-family: var(--font-family-base); font-size: 28px; font-weight: 800;
  color: var(--color-text-primary); margin: 0 0 6px; text-align: center;
}
.popup__text {
  font-family: var(--font-family-base); font-size: 24px; font-weight: var(--text-mid-weight-strong);
  /* ⚠️ 줄간격을 토큰(--text-xs-line-height: 22px)으로 두면 24px 글자가 **겹친다.**
     이 문단은 <br> 로 두 줄이 온다(직원호출 안내). 글자크기에 비례하는 배수로 준다. */
  line-height: 1.45; letter-spacing: var(--text-xs-letter-spacing);
  color: var(--color-text-primary); margin: 0;
  /* ⚠️ 한글은 기본값(word-break: normal)에서 **글자 사이 아무 데나** 끊긴다. 실제로
     "…문의해주세 / 요" 로 잘렸다(2026-10-08). keep-all 이라야 어절 단위로 끊는다.
     ⚠️ pre-line 은 문구에 넣은 줄바꿈을 그대로 살린다 — 어디서 끊길지를 화면 폭에 맡기지 않고
        정해야 하는 안내가 있다(기획이 두 줄로 준 문구). <br> 로 오는 기존 문단도 그대로 된다. */
  white-space: pre-line; word-break: keep-all;
}
/* 팝업 본문 아래 붙는 **작은 설명줄**. 기계가 준 말(ERP 오류 메시지 등)을 담는다.
   ⚠️ .popup 은 gap 이 36px 이라 덩어리를 늘리면 세로가 확 길어진다. 그래서 새 덩어리가 아니라
      .popup__text 안에 <span> 으로 넣는다 — 화면 구성은 아이콘/본문/버튼 셋 그대로다.
   ⚠️ **색을 직접 적는다.** 팝업은 어두운 배경(#1E1E1E)이라 안 적으면 검은 글씨가 된다
      (2026-10-01 원생 목록에서 그렇게 안 보인 적이 있다). */
.popup__sub {
  display: block; margin-top: 10px;
  font-size: var(--text-xs-font-size); font-weight: var(--text-mid-weight-strong);
  line-height: 1.45; color: var(--color-text-disabled); word-break: keep-all;
}
.popup__btn {
    width: 100%;
    margin-top: 4px;
    padding: 14px;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--color-brand-primary);
    color: var(--color-bg-default);
    font-family: var(--font-family-base);
    font-size: 24px;
    font-weight: var(--text-mid-weight-strong);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    letter-spacing: -2.5%;
}
.popup__btn:active { background: var(--color-brand-pressed); color: var(--color-text-primary); }

/* ============================================================
   신규(미연동) 화면 — number / payment-method / normal-pay
   개발자가 흐름에 연결하기 전까지는 시각적 참고용 마크업입니다.
   ============================================================ */
.class-number-page .inner {
    gap: 40px;
}
.class-number-main__top { flex-shrink: 0; display: flex; flex-direction: column; gap: 13px; width: 100%; }
.class-number-main__txt { min-height: 75px; display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.class-number-main__txt-body {
  font-family: var(--font-family-base); font-size: 30.65px; font-weight: var(--text-mid-weight-strong);
  line-height: 37.31px; letter-spacing: var(--text-mid-letter-spacing); color: var(--color-text-primary);
  text-align: center; width: 100%; margin: 0;
}
.class-number-main__txt--accent { color: var(--color-brand-primary); }
.class-number-main__input { border-bottom: 2px solid var(--color-brand-primary); padding: 7px 0; width: 100%; overflow: hidden; }
.num-input__display {
  display: block; font-family: var(--font-family-base); font-size: 30.65px; font-weight: var(--text-mid-weight);
  line-height: 37.31px; letter-spacing: var(--text-mid-letter-spacing); color: var(--color-text-disabled);
  text-align: center; white-space: nowrap;
}
.num-input__display.is-filled { color: var(--color-text-primary); }
.keypad { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; }
.keypad__row { display: flex; gap: var(--spacing-page-h); width: 100%; }
.num-btn {
  flex: 1 1 0; min-width: 0; height: 77px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); border: 2px solid var(--color-bg-default); background-color: var(--color-bg-default);
  font-family: var(--font-family-base); font-size: 30.65px; font-weight: var(--text-mid-weight);
  letter-spacing: var(--text-mid-letter-spacing); color: var(--color-text-primary); cursor: pointer;
  appearance: none; -webkit-appearance: none; box-sizing: border-box;
}
.num-btn:active { background-color: var(--color-brand-pressed); border-color: var(--color-brand-pressed); }
.num-btn--clear { font-size: 20px; font-weight: var(--text-mid-weight-strong); color: var(--color-text-disabled); }

.payment-main__title {
  flex-shrink: 0; font-family: var(--font-family-base); font-size: 30.65px; font-weight: var(--text-mid-weight-strong);
  line-height: 37.31px; letter-spacing: var(--text-mid-letter-spacing); color: var(--color-text-primary); text-align: center; margin: 0;
}
.payment-options { flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.payment-options .class-action-btn { height: 85px; }
.payment-installment { border: 2px solid var(--color-border-default); border-radius: 13px; overflow: hidden; box-sizing: border-box; }
.payment-installment.is-selected { border-color: var(--color-brand-primary); }
.payment-installment__header {
  display: flex; align-items: center; justify-content: space-between; padding: 21px 27px;
  border-bottom: 2px solid var(--color-border-default); box-sizing: border-box; color: var(--color-text-primary); cursor: pointer;
}
.payment-installment__text {
  font-family: var(--font-family-base); font-size: var(--text-mid-font-size); font-weight: var(--text-mid-weight-strong);
  line-height: 38.65px; letter-spacing: var(--text-mid-letter-spacing); color: var(--color-text-primary);
}
.payment-installment__ico { width: 20px; height: 20px; aspect-ratio: unset; transform: rotate(90deg); }
/* 할부 영역 상단 안내문 + 선택값 표시(2026-08-13 개편 — 기존 '할부로 결제할게요' 헤더 대체) */
.payment-installment__guide {
  margin: 0; padding: 18px 27px 0; box-sizing: border-box;
  font-family: var(--font-family-base); font-size: var(--text-card-font-size); font-weight: var(--text-card-weight);
  letter-spacing: var(--text-card-letter-spacing); color: var(--color-text-primary);
}
.payment-installment__picked {
  margin: 12px 27px 0; padding: 13px 7px; border-radius: 12px; background-color: var(--color-bg-disabled);
  box-sizing: border-box;
}
.payment-installment__picked .num-input__display { font-size: var(--text-card-font-size); line-height: 35px; }
.payment-installment__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; padding: 21px 27px; box-sizing: border-box; }
.payment-month {
  display: flex; align-items: center; justify-content: center; padding: 13px 7px; border-radius: 12px; border: none;
  background-color: var(--color-bg-disabled); font-family: var(--font-family-base); font-size: var(--text-card-font-size);
  font-weight: var(--text-card-weight); line-height: 35px; letter-spacing: var(--text-card-letter-spacing);
  color: var(--color-text-disabled); cursor: pointer; appearance: none; -webkit-appearance: none; box-sizing: border-box;
}
.payment-month.is-selected { background-color: var(--color-brand-primary); color: var(--color-bg-default); }

/* Figma: inner (726:1507) pt-[19.987px] px-[26.65px] pb-[39.975px] gap-[39.975px](타이틀↔래퍼) —
   generic .inner{padding:0 30px}엔 이 gap이 없어서 제목/리스트가 붙어 보이던 것 수정 */
.class-normal-pay-page .inner { padding: 20px 27px 40px; gap: 40px; }
.normal-pay-top { flex-shrink: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.normal-pay-title {
  font-family: var(--font-family-base); font-size: 30.65px; font-weight: var(--text-mid-weight-strong);
  line-height: 37.31px; letter-spacing: var(--text-mid-letter-spacing); color: var(--color-text-primary);
  text-align: center; margin: 0; width: 100%;
}
.normal-pay-title__accent { color: var(--color-brand-primary); }
.normal-pay-wrap { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 27px; }
.normal-pay-list-area { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.normal-pay-list { display: flex; flex-direction: column; gap: 10px; }
.normal-pay-item {
  width: 100%; display: flex; align-items: center; padding: 18px 29px; background-color: var(--color-bg-surface);
  border: 2px solid var(--color-brand-primary); border-radius: 12px; box-sizing: border-box;
}
.normal-pay-item__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.normal-pay-item__name {
  font-family: var(--font-family-base); font-size: 24px; font-weight: var(--text-mid-weight-strong); line-height: 34.65px;
  letter-spacing: var(--text-mid-letter-spacing); color: var(--color-text-primary); margin: 0; width: 100%; white-space: pre-wrap;
}
.normal-pay-item__meta { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; min-height: 27px; }
.normal-pay-item__student {
  flex: 1 1 0; min-width: 0; font-family: var(--font-family-base); font-size: var(--text-xs-font-size);
  font-weight: var(--text-mid-weight-strong); line-height: var(--text-xs-line-height);
  letter-spacing: var(--text-xs-letter-spacing); color: var(--color-text-disabled); margin: 0;
}
.normal-pay-item__amount {
  flex-shrink: 0; width: 133px; font-family: var(--font-family-base); font-size: 24px;
  font-weight: var(--text-mid-weight-strong); line-height: 34.65px; letter-spacing: var(--text-mid-letter-spacing);
  color: var(--color-text-primary); text-align: right; margin: 0;
}
.normal-pay-summary {
  flex-shrink: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 19px 29px;
  background-color: var(--color-bg-surface); border: 2px solid var(--color-border-default); border-radius: 13px; box-sizing: border-box;
}
.normal-pay-summary__left { display: flex; align-items: center; gap: 7px; }
.normal-pay-summary__label { font-family: var(--font-family-base); font-size: var(--text-xs-font-size); font-weight: var(--text-xs-weight); color: var(--color-text-primary); }
.normal-pay-summary__count { font-family: var(--font-family-base); font-size: var(--text-xs-font-size); font-weight: var(--text-mid-weight-strong); color: var(--color-text-disabled); }
.normal-pay-summary__total {
  font-family: var(--font-family-base); font-size: 30.65px; font-weight: var(--text-mid-weight-strong);
  line-height: 37.31px; letter-spacing: var(--text-mid-letter-spacing); color: var(--color-brand-primary); margin: 0;
}

/* ============================================================
   receipt 화면 (수납 정보만 조회 모드 — 수납내역 확인)
   ============================================================ */
.class-receipt-page .inner { padding: 20px 30px 0px; gap: 40px; }
.receipt-summary__top { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.receipt-summary__title {
  font-family: var(--font-family-base); font-size: 30px; font-weight: var(--primitive-font-weight-b);
  line-height: 36px; letter-spacing: -0.75px; color: var(--color-text-primary); text-align: center; margin: 0; width: 100%;
}
.receipt-summary__amount {
  font-family: var(--font-family-base); font-size: 46px; font-weight: var(--primitive-font-weight-b);
  line-height: 56px; letter-spacing: -1.15px; color: var(--color-brand-primary); text-align: center; margin: 0; width: 100%;
}
.receipt-summary__body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.receipt-summary__count-row { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.receipt-summary__count-label, .receipt-summary__count-value {
  font-family: var(--font-family-base); font-size: 26px; font-weight: var(--primitive-font-weight-sb);
  line-height: 36px; letter-spacing: -0.65px; color: var(--color-text-primary);
}
.receipt-total {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 20px; background-color: var(--color-bg-surface);
  border: 2px solid var(--color-border-default); border-radius: 13px; box-sizing: border-box;
}
.receipt-total__label {
  font-family: var(--font-family-base); font-size: 22px;
  font-weight: var(--text-mid-weight-strong); letter-spacing: var(--text-xs-letter-spacing);
  color: var(--color-text-primary);
}
.receipt-total__amount {
  font-family: var(--font-family-base); font-size: 22px; font-weight: var(--text-mid-weight-strong);
  letter-spacing: var(--text-mid-letter-spacing); color: var(--color-brand-primary);
}
.receipt-list { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.receipt-item {
  flex-shrink: 0; background-color: var(--color-bg-surface);
  border: 2px solid var(--color-border-default); border-radius: var(--radius-lg);
  padding: 24px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box;
}
.receipt-row { display: flex; gap: 14px; align-items: baseline; }
.receipt-label {
  flex: 0 0 auto;
  width: 76px;
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: var(--text-mid-weight);
  color: var(--color-text-disabled);
}
.receipt-val {
  flex: 1; min-width: 0; font-family: var(--font-family-base); font-size: 20px;
  font-weight: var(--text-mid-weight-strong); line-height: 1.5; color: var(--color-text-primary);
}
.receipt-val.receipt-amt { color: var(--color-brand-primary); font-size: 22px; }



.pay-end-more-txt .txt-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.alltalk-color {
    display: flex;
    color: #ca5fff;
}

.alltalk-logo {
    width: 30px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alltalk-logo .alltalk-logo-img {
    width: 100%;
    height: 100%;
}
/* .txt-wrap.alltalk-box {
    background: #9d44ff;
    font-weight: 500;
    border-radius: 9px;
    padding: 8px 16px 8px 12px;
    width: fit-content;
    margin: 10px auto 10px;
} */

/* 결제결과 보조안내 — 단말 상태오류(9003) 등 '카드 문제가 아닌' 실패의 조치 안내(2026-08-13) */
.pay-end-hero__reason {
  margin: 12px 0 0; font-family: var(--font-family-base); font-size: 17px; line-height: 25px;
  color: var(--color-text-disabled); text-align: center;
}

/* [테스트] 프린터 연결 확인 버튼 — 대기화면 하단. 확인 끝나면 제거 */
.print-test { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; flex-shrink:0; }
.print-test__btn {
  padding:10px 18px; border-radius:var(--radius-full); border:2px solid var(--color-border-default);
  background:var(--color-bg-surface); color:var(--color-text-secondary);
  font-family:var(--font-family-base); font-size:15px; font-weight:600; cursor:pointer;
  appearance:none; -webkit-appearance:none;
}
.print-test__btn:active { background:var(--color-brand-pressed); color:var(--color-bg-default); }
.print-test__msg { font-family:var(--font-family-base); font-size:13px; color:var(--color-text-disabled); }

/* 결제할 수 없는 미납 항목 — ERP 에 사업자번호(CompNum)가 없어 CHECK_PAY 가 거부하는 건.
   지우지 않고 흐리게 보여준다(있는 미납을 감추면 왜 안 보이냐는 문의가 생긴다). 탭하면 이유 안내. */
.pay-list__item--off { opacity: .45; }
.pay-list__item--off .pay-list__due { color: var(--color-status-error, #f04452); }

/* 설정 전 안내 화면(screens/unconfigured.html) */
.unconf-hint { font-family: var(--font-family-base); font-size: 15px; line-height: 1.6;
  color: var(--color-text-secondary); text-align: center; margin: 24px 20px 0; word-break: keep-all; }
.unconf-hint b { color: var(--color-brand-primary); }
.unconf-serial { font-family: var(--font-family-base); font-size: 13px;
  color: var(--color-text-muted); text-align: center; margin: 14px 0 0; }
.unconf-serial b { font-family: ui-monospace, Menlo, monospace; color: var(--color-text-secondary); }