/* ============================================================================
   센터 관리 B1 — 공통 틀 보충 · 얼굴 화면(로그인·센터 고르기·잠금·안내) · 띠
   값은 tokens.css 만 읽는다(새 색 0). 인라인 style 은 CSP(style-src 'self')로 막혀 있어 모든 모양을 여기 클래스로 둔다.
   얼굴 화면 문법은 시안 proto/login.html <style> 을 옮긴 것이다(시안 표시용 주소창 틀·검은 알약은 뺐다).
   ========================================================================== */

/* SVG 묶음(index.html 의 <symbol> 모음) — 그 자체는 그리지 않는다 */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* 워드마크 글자색(시안 symbol 의 인라인 style 을 클래스로 옮김) */
.wm-k { fill: var(--wm-k, var(--ink)); }
.wm-ai { fill: var(--wm-ai); }
.wm-drop { fill: var(--drop); }

.app { min-height: calc(100vh - var(--band-h, 0px)); }

/* ── 맨 위 띠: 미리보기 · 서버 옛 판 · 새 버전 ───────────────────────────── */
/* 띠 묶음은 맨 위에 붙어 있고, 그 높이(--band-h — boot.js 가 재서 넣는다)만큼 머리 줄·레일·얼굴 화면을 내린다 */
.banners { position: sticky; top: 0; z-index: 45; }
.banners:empty { display: none; }
.headbar { top: var(--band-h, 0px); }
.rail { top: calc(var(--head) + var(--band-h, 0px)); }
.top-band {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 32px; padding: 6px var(--gut);
  background: var(--sky-1); color: var(--ink); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; text-align: center;
}
.top-band b { font-weight: 800; }
.top-band .btn-text { min-height: 24px; font-size: var(--fs-12); line-height: var(--lh-12); }
.top-band.is-note { background: var(--mute-bg); }

/* 오프라인 띠 — 머리 줄 바로 아래에 붙는다(얼굴 화면에서는 맨 위) */
.offline-band.is-fixed { position: sticky; top: calc(var(--head) + var(--band-h, 0px)); z-index: 39; }
.main > .offline-band.is-fixed { margin: -24px calc(-1 * var(--gut)) 20px; }
.face .offline-band.is-fixed { top: var(--band-h, 0px); }
@media (max-width: 767px) {
  .offline-band.is-fixed { top: calc(var(--head-m) + var(--band-h, 0px)); }
  .main > .offline-band.is-fixed { margin: -16px calc(-1 * var(--gut)) 16px; }
}

/* ── 첫 로드 ─────────────────────────────────────────────────────────────── */
.boot { min-height: calc(100vh - var(--band-h, 0px)); display: grid; place-items: center; background: var(--paper); }

/* ── 얼굴 화면(로그인·센터 고르기·잠금·안내) — 하늘 방사형 바탕 + 흰 카드 ───────── */
.face { min-height: calc(100vh - var(--band-h, 0px)); display: flex; flex-direction: column; background: var(--surface); background-image: var(--face-bg); }
.face-stage { flex: 1; display: grid; place-items: center; align-content: center; gap: 20px; padding: 48px var(--gut) 32px; }
.face-foot { display: flex; justify-content: center; gap: 8px; padding: 0 var(--gut) 24px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--muted); }
.face-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: .22em; text-decoration-color: var(--line-input); }
.face-foot a:hover { color: var(--ink); }

.lg-card { width: 100%; max-width: 400px; padding: 36px 32px 28px; display: flex; flex-direction: column; gap: 20px; }
.lg-lock { display: flex; align-items: center; gap: 12px; }
.lg-lock .wordmark { width: 96px; height: 36px; }
.lg-lock .vr { width: 1px; height: 20px; background: var(--line-input); }
.lg-lock b { font-size: var(--fs-16); font-weight: 700; }
.lg-card h1 { font-size: var(--fs-24); line-height: var(--lh-24); font-weight: 700; letter-spacing: -.01em; }
.lg-card h1:focus { outline: none; }
.lg-card .t-desc { margin-top: -12px; }
.lg-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-input); background: var(--mute-bg); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); }
.lg-note > .ico { width: 18px; height: 18px; color: var(--stop); }
.lg-note.is-info > .ico { color: var(--action); }
.lg-note .t-sub { display: block; margin-top: 2px; }
.lg-actions { display: flex; flex-direction: column; gap: 10px; }
.lg-error:empty { display: none; }
/* 입력칸 포커스는 테두리 drop-deep + 고리(DESIGN_SYSTEM 2-3) — 전역 2px 잉크 윤곽을 겹쳐 그리지 않는다 */
.input:focus-visible, .search input:focus-visible { outline: none; }
.lg-who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-input); background: var(--paper); }
.lg-who .t-sub { display: block; }

/* 센터 고르기 */
.lg-pick-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.lg-pick-wrap > .t-face-2 { text-align: center; }
.lg-pick-wrap > .t-face-2:focus { outline: none; }
.lg-pick { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px; width: 100%; max-width: calc(var(--cols, 2) * 320px); }
.lg-pick.is-n1 { --cols: 1; }
.lg-pick.is-n2 { --cols: 2; }
.lg-pick.is-n3 { --cols: 3; }
.lg-center { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: left; color: var(--ink); transition: box-shadow var(--t-micro) var(--ease-micro), transform var(--t-micro) var(--ease-micro); }
a.lg-center:hover { box-shadow: inset 0 0 0 1px var(--ink); }
a.lg-center:active { transform: scale(var(--press)); }
.lg-center .lc-name { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 600; padding-right: 28px; }
.lg-center .lc-chev { position: absolute; top: 18px; right: 16px; width: 20px; height: 20px; color: var(--faint); }
.lg-center .lc-row { display: flex; align-items: baseline; gap: 6px; min-height: var(--lh-28); }
.lg-center .lc-row.is-wait { visibility: hidden; }
.lg-center .num { font-size: var(--fs-28); line-height: var(--lh-28); }
.lg-center.is-off { background: var(--mute-bg); box-shadow: none; color: var(--muted); }
.lg-center.is-off .lc-name { color: var(--muted); }
.lg-pick-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }

/* ── 앱 틀 보충 ─────────────────────────────────────────────────────────── */
/* 레일·하단 탭 칸 수는 권한으로 줄어든다(B = 오늘·회원·매출·센터 4개, 매출 권한이 없으면 3개) */
.tabbar.is-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tabbar.is-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tabbar.is-n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hb-account { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.hb-account:hover { background: rgba(17,20,24,.06); }
.lockup-center[aria-disabled="true"] { cursor: default; }
.lockup-center[aria-disabled="true"]:hover { color: var(--muted); }
.now-count.is-wait { visibility: hidden; }
.hb-brand, .hb-right { position: relative; }
.hb-pop { top: calc(100% - 4px); }
.hb-pop.is-center { left: 20px; width: 300px; }
.hb-pop.is-account { right: var(--gut); width: 260px; }
.pop-item .ico.is-check { width: 20px; height: 20px; color: var(--navy); }
.pop-who { display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pop-who .t-sub { display: block; }
.pop-act { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 16px; text-align: left; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 600; color: var(--ink); transition: background-color var(--t-micro) var(--ease-micro); }
.pop-act:hover { background: var(--paper); }
.pop-act .ico { width: 20px; height: 20px; color: var(--faint); }
.pop-act.is-danger { color: var(--stop); }
.pop-act.is-danger .ico { color: var(--stop); }
.pop-sep { height: 1px; margin: 4px 0; background: var(--line); }
@media (max-width: 767px) {
  .hb-pop.is-center { left: 12px; right: 12px; width: auto; }
}

/* 화면 머리 · '방금 갱신' */
.ph-acts { display: flex; align-items: center; gap: 8px; }
.page-head h1:focus { outline: none; }

/* 다음 단계 화면 자리(B1 임시 — B2~B7 에서 화면으로 바뀐다. tools/verify.mjs --release 가 남아 있으면 막는다) */

/* 빈 상태 그림 — 물방울(시안 갤러리 14절 그림의 색을 클래스로) */
.empty-art .ea-line { fill: none; stroke: var(--line-input); stroke-width: 1.5; }
.empty-art .ea-drop { fill: var(--sky-1); stroke: var(--drop); stroke-width: 1.5; }
.empty-art .ea-shine { fill: none; stroke: var(--surface); stroke-width: 2; stroke-linecap: round; }

/* 블록 오류 줄 버튼 자리 */
.error-note .en-act { flex: none; align-self: center; }

/* 확인 대화상자 */
.dialog .t-sheet:focus { outline: none; }

@media (max-width: 767px) {
  .face-stage { padding: 32px 20px 24px; }
  .lg-card { padding: 28px 20px 24px; }
  .lg-pick, .lg-pick.is-n2, .lg-pick.is-n3 { --cols: 1; max-width: 400px; }
  .lg-pick-wrap > .t-face-2 { font-size: var(--fs-24); line-height: var(--lh-24); }
}

/* 강사 색 점(12색 — 오늘 수업 막대·회원 목록 담당 칸이 같이 쓴다. 색 번호는 data/labels.js 가 정한다) */
.dot.tr-c1 { --c: var(--tr-1); } .dot.tr-c2 { --c: var(--tr-2); } .dot.tr-c3 { --c: var(--tr-3); } .dot.tr-c4 { --c: var(--tr-4); }
.dot.tr-c5 { --c: var(--tr-5); } .dot.tr-c6 { --c: var(--tr-6); } .dot.tr-c7 { --c: var(--tr-7); } .dot.tr-c8 { --c: var(--tr-8); }
.dot.tr-c9 { --c: var(--tr-9); } .dot.tr-c10 { --c: var(--tr-10); } .dot.tr-c11 { --c: var(--tr-11); } .dot.tr-c12 { --c: var(--tr-12); }

/* 알림 [닫기] — 실패·동작 있는 알림은 저절로 사라지지 않는다(ui/toast.js). 잉크 바탕 위 글자색 그대로, 누름 영역 32×32 */
.toast .t-text { min-width: 0; }
.toast .t-close { flex: none; width: 32px; height: 32px; margin: -6px -8px -6px 2px; border-radius: 50%; display: grid; place-items: center; color: var(--muted-on-ink); }
.toast .t-close:hover { color: var(--on-ink); background: rgba(247,250,252,.12); }
.toast .t-close:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 1px; }
.toast .t-close .ico { width: 16px; height: 16px; }

/* 결과를 모르는 쓰기 — 대화상자 안의 오류 줄 + [다시 확인](ui/dialog.js noticeDialog) */
.dialog .error-note { margin-top: 12px; }

/* ── 데스크 공용 PC(B7) — 로그인 화면 나눔 줄(시안 login.html .lg-or) · 센터 고르기 공용 계정 칸 · 공용 모드 가림 화면 ── */
.lg-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; }
.lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lg-shared-sec { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 960px; }
.lg-shared-sec > .t-sub { text-align: center; }
.lg-shared-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; gap: 12px; }
.lg-shared-card .lc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.lg-shared-empty { text-align: center; }
.lg-shared-form { display: flex; flex-direction: column; gap: 16px; max-width: 400px; width: 100%; margin: 0 auto; padding: 20px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lg-shared-sec > div > .btn.is-block { display: flex; max-width: 400px; margin: 0 auto; }
.lg-shared > .btn { width: 100%; }