/* ============================================================================
   센터 설정(B7) — 시안 proto/sales_settings.html <style> 의 센터 부분(A-2 2차 메뉴 · 락커 숫자 · B-3 칩 입력 · B-4 방법 기호 원 · B-5 역할 표)을 옮긴 것 +
   설정 행 상태 줄 · 운영 시간 표 · 상품 시트 · 공용 계정 시트 · 센터 고르기 데스크 공용 계정 칸 · 공용 모드 가림 화면.
   새 색·새 크기 0: 값은 tokens.css 변수 또는 components.css 에 이미 있는 수치다.
   시안과 다른 점: 입장 방식 패널·입구 화면 미리보기(C) 없음 · 락커 있음/없음 고르기 없음(서버 값 없음) · 직원 초대 없음(앱 「강사 관리」).
   ========================================================================== */

/* 2차 메뉴 — 시안 A-2 */
.center-menu { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.center-menu a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--r-input); font-size: var(--fs-14); font-weight: 600; color: var(--muted); }
.center-menu a:hover { background: var(--paper); color: var(--ink); }
.center-menu a[aria-current="page"] { background: var(--sky-1); color: var(--ink); font-weight: 700; }
.center-menu a .t-caption { margin-left: auto; }
@media (max-width: 1279px) { .center-menu { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .center-menu a { flex: none; } .center-menu a .t-caption { display: none; } }
@media (min-width: 1280px) { .cs-menu-panel { position: sticky; top: calc(var(--head) + 24px); } }
.cs-back { margin: -8px 0 8px -8px; }
.cs-phone-list { display: flex; flex-direction: column; padding: 4px 0; }
.cs-phone-item { display: flex; align-items: center; gap: 8px; min-height: var(--row); padding: 0 20px; border-top: 1px solid var(--line); color: var(--ink); }
.cs-phone-item:first-child { border-top: 0; }
.cs-phone-item .t-caption { margin-left: auto; }
.cs-phone-item > .ico { color: var(--faint); }
.cs-phone-item .t-caption + .ico { margin-left: 0; }
.cs-phone-item .t-name + .ico { margin-left: auto; }

/* 설정 행(스위치 행 — 위쪽 1px 선만, 맨 위 행은 선 없음) · 행 아래 상태 줄 */
.switch-row.is-first { border-top: 0; }
.switch-row > .sr-status { flex: 1 0 100%; }
.switch-row > .sr-status:empty { display: none; }
.sr-saved { display: inline-flex; align-items: center; gap: 4px; color: var(--go); }
.sr-saved .ico { width: 14px; height: 14px; }
.field > .sr-status:empty { display: none; }
.cs-rows { padding-top: 4px; }
.cs-rows > .notice-line { margin-bottom: 8px; }
.cs-unit { width: 120px; flex: none; }
.switch-row > .seg[aria-busy="true"], .input[aria-busy="true"] { opacity: .6; }

/* 칩 입력 — 시안 B-3 */
.chip-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--input); padding: 8px 10px; border: 1px solid var(--line-input); border-radius: var(--r-input); background: var(--surface); transition: border-color var(--t-micro) var(--ease-micro), box-shadow var(--t-micro) var(--ease-micro); }
.chip-input:focus-within { border-color: var(--drop-deep); box-shadow: var(--focus-input); }
.chip-input input { flex: 1; min-width: 140px; height: 28px; border: 0; background: none; font-size: var(--fs-14); font-weight: 500; }
.chip-input input:focus { outline: none; }
.chip-input input::placeholder { color: var(--faint); }
.chip-input.is-disabled { background: var(--mute-bg); }
.chip-input[aria-busy="true"] { opacity: .6; }
.tag .x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -4px; border-radius: 50%; color: var(--muted); }
.tag .x:hover { background: rgba(17,20,24,.08); color: var(--ink); }
.tag .x .ico { width: 12px; height: 12px; stroke-width: 2; }
.tag .x:disabled { display: none; }
.cs-tag-preview { padding: 12px 14px; border-radius: var(--r-input); background: var(--paper); }
.cs-cat-body > .btn-text { align-self: flex-start; }

/* 락커 숫자·번호판 — 시안 A-2 · 19절 */
.lock-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-13); font-weight: 600; color: var(--muted); }
.lock-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.lock-stats b.t-warn { color: var(--stop); }
.legend i.lg-used { background: var(--sky-1); box-shadow: none; }
.legend i.lg-expired { background: var(--stop-bg); box-shadow: none; }
.legend i.lg-cleaning { background: var(--mute-bg); box-shadow: none; outline: 1px dashed var(--faint); outline-offset: -1px; }
.legend i.lg-off { background: repeating-linear-gradient(135deg, var(--mute-bg) 0 3px, var(--surface) 3px 6px); }
.cs-lk-body { gap: 16px; }
.cs-lk-group { gap: 8px; }
.cs-lk-head { justify-content: flex-start; }
.cs-pick { max-height: 360px; overflow-y: auto; padding: 2px; margin: -2px; }
.cs-opt-list { gap: 4px; max-height: 320px; overflow-y: auto; }
.cs-opt { border-radius: var(--r-input); box-shadow: inset 0 0 0 1px var(--line); }
.cs-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); background: var(--surface); }
.cs-hist { gap: 0; }
.cs-hist-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.cs-hist-row:first-child { border-top: 0; }
.popover.menu.has-head { min-width: 260px; }
.popover.menu .menu-head { padding: 4px 16px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.popover.menu .menu-head .pop-label { padding: 0 0 4px; }

/* 표 위쪽 여백(패널 머리 아래 바로 표) */
.cs-flush-top { padding-top: 12px; }
.cs-note-body { padding-top: 12px; padding-bottom: 16px; }
.cs-note-body + .cs-flush-top { padding-top: 0; }
.cs-flush { padding: 0; }

/* 역할 표 — 시안 B-5 */
.ss-role td, .ss-role th { text-align: center; }
.ss-role td:first-child, .ss-role th:first-child { text-align: left; }
.ss-role .ico { display: inline-block; vertical-align: middle; color: var(--ink); }
.ss-mico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-1); color: var(--navy); }
.ss-mico .ico { width: 22px; height: 22px; }
.ss-mico.cs-mico-32 { width: 32px; height: 32px; }
.ss-mico.cs-mico-32 .ico { width: 16px; height: 16px; }
.cs-badge-gap { margin-left: 6px; }
.cs-staff-note { gap: 10px; }
.cs-me { display: flex; align-items: baseline; gap: 12px; }

/* 운영 시간 표 · 시간 고르기 */
.cs-hours .table td { height: 52px; }
.cs-day { width: 72px; }
.cs-times { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.cs-time { width: 128px; height: var(--btn-sm); padding-right: 8px; }
.cs-closed { white-space: nowrap; }
.cs-fold-panel { padding-top: 16px; padding-bottom: 16px; }
.cs-fold-rows { gap: 0; }
.cs-fold-rows > .t-caption { padding-top: 8px; }
.cs-crm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 16px; padding-bottom: 16px; }

/* 상품 시트 · 공용 계정 시트 */
.cs-dur { display: flex; align-items: center; gap: 8px; }
.cs-dur .input { width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
.cs-rule { gap: 10px; margin-top: 8px; }
.cs-rule[hidden] { display: none; }
.cs-sheet-switch { border-top: 1px solid var(--line); }
.cs-perm { gap: 16px; }
.cs-perm-group > .t-label { margin-bottom: 4px; }
.cs-perm-row { padding: 10px 0; }
.cs-extra { padding-top: 16px; border-top: 1px solid var(--line); }
.cs-extra > .btn { align-self: flex-start; }
.cs-links { gap: 0; }
.cs-link-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.cs-link-row:first-child { border-top: 0; }
.cs-link-row > .cell-two { flex: 1; }
.cs-ok { color: var(--go); }
.cs-form .fold { margin-top: 10px; }

@media (max-width: 767px) {
  .cs-time { width: 104px; }
  .cs-hours .table td:nth-child(2) { width: 56px; }
  .cs-me { flex-direction: column; gap: 2px; }
}
.badge.is-stop { background: var(--stop-bg); color: var(--stop); }

/* 센터 정보 — 보기만 하는 칸(이름·주소)은 회색 바탕 · 운영 시간 표는 내용 폭만 */
.cs-body .input[readonly] { background: var(--mute-bg); color: var(--muted); border-color: transparent; }
.cs-hours { margin-top: 20px; }
.cs-hours .table { width: auto; }
.cs-hours .table td { padding-right: 24px; }
/* 고르기 칩 줄(포함 항목·요일)은 줄을 바꿔 다 보인다(회원 목록 거르기 줄은 가로 굴림) — 센터 시트(.cs-form)만, 판매·등록 시트(.ss-form)에 새지 않게 */
.cs-form .filters, .cs-body .filters { flex-wrap: wrap; overflow: visible; }
.cs-form .input[readonly] { background: var(--mute-bg); color: var(--muted); border-color: transparent; }

/* 폰(≤767) 표 → 카드 행(BRIEF 5-4) — 표 칸이 화면 폭을 넘어 안쪽 가로 굴림 뒤에 숨지 않게(390 캡처가 표 칸 scrollWidth = clientWidth 를 확인한다)
   · 운영 시간: 요일 줄(요일 · 스위치) 아래 여는 시각 ~ 닫는 시각을 폭 안에 · 상품: products.js 카드 행 · 역할 표: staff.js 역할별 카드 */
@media (max-width: 767px) {
  .cs-hours .table { width: 100%; }
  .cs-hours .table tbody { display: block; }
  .cs-hours .table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .cs-hours .table tr:last-child { border-bottom: 0; }
  .cs-hours .table td { display: block; width: auto; height: auto; padding: 0; border: 0; }
  .cs-hours .table td:nth-child(3) { grid-column: 1 / -1; }
  .cs-hours .cs-times { display: flex; width: 100%; }
  .cs-hours .cs-time { flex: 1 1 0; width: auto; min-width: 0; }
  .cs-pd-cards { border-top: 1px solid var(--line); }
  .cs-pd-cards .mrow:last-child { border-bottom: 0; }
  .cs-pd-cards .mrow-head { flex-wrap: wrap; row-gap: 2px; }
  .cs-pd-cards .mrow-cap { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 600; }
  .cs-role-cards { display: flex; flex-direction: column; gap: 0; padding: 4px 20px 8px; }
  .cs-role-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
  .cs-role-card:first-child { border-top: 0; }
  .cs-role-line { display: flex; flex-direction: column; gap: 2px; }
}

/* ============================================================================
   입장 방식 · 입구 태블릿(C) — 시안 proto/sales_settings.html B-4(방법 기호 원·펼침·입구 화면 미리보기) · B-5(단계·6자리 칸) · 'tablet' 화면을 옮긴 것.
   새 색·새 크기 0. 미리보기 입구 화면은 css/screens/kiosk.css 의 .kiosk 를 1024×768 그대로 그려 상자 폭으로 줄인다(--k = CSSOM).
   ========================================================================== */
.cs-entry-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.cs-entry-side { display: none; }
@media (min-width: 1280px) {
  .cs-entry-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cs-entry-side:not([hidden]) { display: block; position: sticky; top: calc(var(--head) + 24px); }
}
.ss-more { flex: 1 0 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.switch-row.is-lead > .sr-status { grid-column: 2 / -1; }
@media (max-width: 767px) { .switch-row.is-lead > .sr-status { grid-column: 1 / -1; } }
.ss-bezel { padding: 10px; border-radius: var(--r-face); background: var(--ink); box-shadow: var(--e-face); }
.cs-prev { position: relative; width: 100%; aspect-ratio: 1024 / 768; overflow: hidden; border-radius: var(--r-input); background: var(--surface); }
.kiosk.is-preview { position: absolute; inset: auto; left: 0; top: 0; width: 1024px; height: 768px; transform-origin: 0 0; transform: scale(var(--k, .3)); pointer-events: none; background: var(--surface); background-image: var(--face-bg); }
.ss-prev-cap { display: flex; flex-direction: column; gap: 8px; padding: 16px 4px 0; }
.switch-row > .volume.cs-volume { flex: 1 1 200px; max-width: 280px; }
.cs-play { align-self: flex-start; margin-top: 4px; }
/* 입장 QR·위치(E·G — entry_qr_geo/mock 04): 번호 행 '늘 켬'(스위치 자리) · 센터 위치 카드 · 휴대폰 위치 재기 상자 */
.switch-row.is-lead > .cs-always { grid-column: 4; grid-row: 1; align-self: center; }
@media (max-width: 767px) { .switch-row.is-lead > .cs-always { grid-column: 3; } }
/* 센터 위치 카드: 행동 두 개는 폭과 무관하게 설명 아래 줄(390 과 같은 배치 — W11) */
.cs-loc { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-input); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.cs-loc > .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--muted); }
.cs-loc.is-set > .ico { color: var(--go); }
.cs-loc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-loc-title { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 600; }
.cs-loc-acts { width: 100%; display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: flex-start; padding-left: 32px; }
.cs-meas { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px; border-radius: var(--r-input); background: var(--paper); }
.cs-meas b { font-family: var(--font-num); font-size: var(--fs-28); line-height: var(--lh-28); font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-meas > .ico { flex: none; width: 24px; height: 24px; }
.cs-meas > .cs-meas-ok { color: var(--go); }
.cs-meas > .cs-meas-bad { color: var(--stop); }
[data-key="geo:note"]:empty { display: none; }
.ss-cell-line { display: flex; align-items: center; gap: 8px; }

/* 입구 주소 카드 · 기기 표 · 폰 카드 행 */
.entry-url .eu-url.is-empty { color: var(--muted); }
.cs-slug { color: var(--action); font-weight: 700; }
.cs-url-body { padding: 0; border-bottom: 1px solid var(--line); }
.cs-dev-acts { display: inline-flex; gap: 16px; }
.cs-dev-cards { display: flex; flex-direction: column; padding: 4px 20px 8px; }
.cs-dev-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.cs-dev-card:first-child { border-top: 0; }
.cs-dev-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-dev-line > :last-child { margin-left: auto; white-space: nowrap; }

/* 오늘 번호 입장(데스크 — 실명·사유) */
.cs-att-list { display: flex; flex-direction: column; padding-top: 0; }
.cs-att-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: var(--row); padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); }
.cs-att-row:first-child { border-top: 0; }
.cs-att-row:hover { background: var(--paper); }
.cs-att-time { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--muted); }
.cs-att-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-att-why { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.cs-att-reason { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 700; color: var(--stop); }
/* 입구 기록 방법(번호·QR·위치 — E·G 서버) · 확인 필요(QR 을 찍은 순간 센터 반경 밖) */
.cs-att-method { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--tag-fill); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 600; }
.cs-att-method .ico { width: 13px; height: 13px; stroke-width: 2; }
.cs-att-check { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 700; }
@media (max-width: 767px) {
  .cs-att-row { grid-template-columns: 64px minmax(0, 1fr); }
  .cs-att-why { grid-column: 2; justify-content: flex-start; }
}

/* 입구 화면에 보이는 말 */
.ss-says { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ss-say { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 24px 24px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); background-image: var(--face-bg); }
.ss-say .droplet { width: 14px; height: 20px; margin-top: 4px; color: var(--drop); }
.cs-says-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
.cs-says-facts .t-value { white-space: normal; }
.cs-says-note { margin-top: 16px; }
@media (max-width: 767px) {
  .ss-says { grid-template-columns: minmax(0, 1fr); }
  .cs-says-facts { grid-template-columns: minmax(0, 1fr); }
  .cs-says-facts > div + div { padding-left: 0; padding-top: 12px; border-left: 0; }
  .cs-says-facts > div:not(:last-child) { padding-right: 0; }
}

/* 태블릿 연결하기 시트 — 단계 · 6자리 칸(시안 B-5) */
.ss-steps { display: flex; flex-direction: column; gap: 20px; }
.ss-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.ss-step-no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); font-family: var(--font-num); font-weight: 800; font-size: var(--fs-13); font-variation-settings: "wdth" 100; }
.ss-step-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 4px; }
.ss-code { position: relative; display: block; cursor: text; }
.ss-code input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: var(--fs-16); }
.ss-code .digits { justify-content: flex-start; gap: 8px; }
.ss-code .digit { width: 56px; height: 64px; font-size: var(--fs-36); }
.ss-code .digit:nth-child(3) { margin-right: 10px; }
@media (max-width: 767px) { .ss-code .digit { width: 44px; height: 56px; font-size: var(--fs-28); } .ss-code .digits { gap: 6px; } }

/* 데이터 가져오기(F) — 센터 › 데이터 가져오기. 새 색·새 크기 0(값은 tokens.css 변수·components.css 에 있는 수치) */
.imp-steps-wrap { padding-top: 4px; padding-bottom: 0; }
.imp-steps { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0 0 12px; list-style: none; border-bottom: 1px solid var(--line); }
.imp-steps li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; color: var(--muted); }
.imp-steps li.is-on { color: var(--ink); font-weight: 700; }
.imp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--mute-bg); font-size: var(--fs-12); font-weight: 700; color: var(--muted); }
.imp-steps li.is-on .imp-step-n { background: var(--ink); color: var(--on-ink); }
.imp-steps li.is-done .imp-step-n { background: var(--sky-1); color: var(--navy); }
.imp-body { display: flex; flex-direction: column; gap: 16px; }
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px; border: 1px dashed var(--line-input); border-radius: var(--r-card); background: var(--paper); text-align: center; }
.imp-drop > .ico { color: var(--action); }
.imp-pick { margin-top: 8px; cursor: pointer; }
.imp-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--muted); }
.imp-cols .input, .imp-progs .input { min-width: 0; width: 100%; }
.imp-col { max-width: 280px; }
.imp-map { max-width: 420px; }
.imp-ex { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-req { color: var(--stop); }
.imp-ask { padding: 12px 16px; border-radius: var(--r-input); background: var(--warn-bg); }
.imp-ask ul { margin: 6px 0; padding-left: 18px; font-size: var(--fs-13); line-height: var(--lh-13); }
/* 페이 안내(10-24) — 문장 여럿이 한 덩어리로 읽히지 않게 줄 사이를 띄운다(목록 점은 전역에서 없앰) */
.imp-ask ul.imp-pay-list { display: flex; flex-direction: column; gap: 6px; }
.imp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.imp-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.imp-progress { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-card); background: var(--paper); }
.imp-bar { flex: none; width: 100%; }
.imp-stats { --n: 5; }
.imp-rows-wrap { display: flex; flex-direction: column; gap: 12px; }
/* 사유·표시 칸 안쪽 묶음(td 가 아니라 div — td 에 flex 를 주면 .table td 높이가 고정 높이가 돼 여러 줄이 다음 줄을 덮었다, 10-24 되돌리기 캡처) */
.imp-why { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.imp-confirm { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-13); font-weight: 600; color: var(--action); cursor: pointer; }
/* 미리보기 줄마다 PT 수강권 종류(신규·재등록 — 10-24 Q5) */
.imp-type { margin-top: 4px; max-width: 160px; }
.imp-done { align-items: flex-start; }
.imp-hist td.chev { width: 72px; text-align: right; }
/* 셀프 가져오기 v2(G) — 첫 사용 카드 · 시트 고르기 · 열 묶음 · 가져오지 않는/민감한 칸 · PT 칸. 새 색·새 크기 0(같은 변수·수치) */
.today-start-host:empty { display: none; }
.today-start { margin-bottom: 16px; }
.imp-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.imp-check { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.imp-check:last-child { border-bottom: 0; }
.imp-check.is-done .imp-step-n { background: var(--sky-1); color: var(--navy); }
.imp-check-text { flex: 1 1 auto; min-width: 0; }
.imp-actions.is-start { justify-content: space-between; align-items: center; padding-top: 12px; }
.imp-actions.is-center { justify-content: center; }
.empty .imp-actions .btn { margin-top: 14px; }
.imp-sheets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.imp-sheets .btn { width: 100%; justify-content: space-between; }
.imp-group td { padding-top: 16px; font-size: var(--fs-12); font-weight: 700; color: var(--muted); background: var(--paper); }
.imp-sug { color: var(--action); }
.imp-cells { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.imp-cells li { padding: 2px 8px; border-radius: var(--r-pill); background: var(--tag-fill); font-size: var(--fs-12); line-height: 18px; color: var(--muted); }
.imp-ask.is-mute { background: var(--mute-bg); }
.imp-ask.is-stop { background: var(--stop-bg); }
.imp-pt { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; border-radius: var(--r-input); background: var(--paper); }
.imp-pt-line { display: block; }
@media (max-width: 767px) {
  /* 폰: 표 → 카드 행(BRIEF 5-4 — 머리 줄을 숨기고 한 줄을 세로로 쌓는다. 안쪽 가로 굴림 0) */
  .imp-table thead { display: none; }
  .imp-table, .imp-table tbody, .imp-table tr, .imp-table td { display: block; width: 100%; }
  .imp-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .imp-table tbody tr:last-child { border-bottom: 0; }
  .imp-table td { height: auto; padding: 2px 0; border-bottom: 0; white-space: normal; text-align: left; }
  .imp-table td.is-num, .imp-table .imp-hist td.chev { text-align: left; }
  .imp-table td.is-wrap { min-width: 0; }
  .imp-table .imp-ex { max-width: none; white-space: normal; }
  .imp-table td.hide-m { display: none; }
  /* 사유·표시가 여럿이면 줄마다(카드 행에서도 — 안쪽 묶음 .imp-why 는 늘 flex 라 td 블록 규칙과 겹치지 않는다) */
  .imp-why { min-width: 0; }
  .imp-hist td.chev { width: auto; text-align: left; }
  .imp-extra { grid-template-columns: 1fr; }
  .imp-stats { grid-template-columns: 1fr 1fr; }
  .imp-actions { justify-content: stretch; }
  .imp-actions > .btn { flex: 1 1 auto; }
  .imp-col, .imp-map { max-width: none; }
}

/* ═══ 직원·권한(B7.2~B7.5 — 시안 proto/sales_settings.html '직원·권한' B-6 을 옮김. 새 색·새 크기 0, 같은 변수) ═══
   왼쪽 직원 목록 + 오른쪽 한 사람 패널(폰 = 전체 화면) · 역할 3칸 · 서브관리자 권한 묶음 · 강사 세부 권한 · 앱 스위치 · 바뀐 점 띠 · 바뀐 기록 */
.st-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
@media (max-width: 1279px) { .st-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
@media (max-width: 767px) { .st-split { grid-template-columns: minmax(0, 1fr); } }
.st-list .panel-head { align-items: flex-start; }
.st-list .t-section .t-caption { margin-left: 4px; font-variant-numeric: tabular-nums; }
.st-tools { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px 8px; }
.st-tools .search { height: var(--btn); }
.st-tools-row { display: flex; align-items: center; gap: 8px; }
.st-tools-row .search { flex: 1; min-width: 0; }
.st-tools-row > .btn { flex: none; height: var(--btn); }
.st-glabel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 24px 8px; }
.st-rows { padding-bottom: 8px; }
.st-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 20px; align-items: center; column-gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px 10px 24px; text-align: left; border-top: 1px solid var(--line); transition: background-color var(--t-micro) var(--ease-micro); }
.st-glabel + .st-row { border-top: 0; }
.st-row:hover { background: var(--paper); }
.st-row[aria-current="true"] { background: var(--sky-1); }
.st-row > .ico { width: 20px; height: 20px; color: var(--faint); }
.st-row .cell-two { gap: 2px; min-width: 0; }
.st-row .cell-two .t-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row .t-name { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st-empty { padding: 24px; text-align: center; }
.st-desk { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-1); color: var(--navy); }
.st-desk .ico { width: 18px; height: 18px; }
.st-desk.is-40 { width: 40px; height: 40px; }
.st-desk.is-40 .ico { width: 22px; height: 22px; }
.st-tag { gap: 4px; white-space: nowrap; }
.st-cr { flex: none; width: 14px; height: 14px; color: var(--navy); fill: currentColor; }
.st-tag .ico { width: 14px; height: 14px; color: var(--navy); }
.st-panel { min-height: 320px; }
@media (min-width: 768px) { .st-panel.is-stick { position: sticky; top: calc(var(--head) + 24px); } }
.st-mhead { display: none; }
.st-ph { display: flex; align-items: center; gap: 14px; padding: 20px 24px; }
.st-ph .cell-two { flex: 1; gap: 2px; min-width: 0; }
.st-ph .cell-two .t-sub { white-space: normal; }
.st-sec { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; border-top: 1px solid var(--line); }
.st-sec.is-flush { gap: 0; padding: 20px 0 0; }
.st-sec.is-flush > .st-sec-head { padding: 0 24px 12px; }
.st-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; min-height: 32px; }
.st-ttl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-ttl .t-caption { font-variant-numeric: tabular-nums; }
.st-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-roles .choice { min-height: 72px; }
.st-roles .ch-name { display: flex; align-items: center; gap: 6px; padding-right: 22px; white-space: nowrap; font-weight: 700; }
.st-roles .choice[aria-disabled="true"] { background: var(--mute-bg); box-shadow: inset 0 0 0 1px var(--line); cursor: not-allowed; }
.st-roles .choice[aria-disabled="true"] .ch-name { color: var(--muted); }
.st-roles .ch-lock { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; color: var(--muted); }
.st-presets { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.st-presets .choice { min-height: 64px; }
.st-presets .ch-name { padding-right: 22px; font-weight: 700; overflow-wrap: anywhere; }
.st-presets .choice[aria-disabled="true"] { cursor: not-allowed; }
.st-copy { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-input); background: var(--sky-1); }
.st-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-flow > .ico { width: 16px; height: 16px; color: var(--navy); }
.st-facts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-facts li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 500; }
.st-facts .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--navy); stroke-width: 2; }
.st-facts li.is-no, .st-facts li.is-no .ico { color: var(--muted); }
.st-ro .fold-line { grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
.st-ro .fold-line > .t-label { padding-top: 3px; }
.st-grp-head { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 24px 0 16px; background: var(--paper); border-top: 1px solid var(--line); }
.st-grp-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; text-align: left; border-radius: var(--r-input); }
.st-grp-btn > .ico { width: 16px; height: 16px; color: var(--faint); transform: rotate(-90deg); transition: transform var(--t-micro) var(--ease-micro); }
.st-grp-btn[aria-expanded="true"] > .ico { transform: none; }
.st-grp-btn .t-caption { font-variant-numeric: tabular-nums; }
.st-grp-body[hidden] { display: none; }
.st-perm { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 6px 24px 6px 48px; border-top: 1px solid var(--line); }
.st-perm-t { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 2px; }
.st-perm-t > .t-sub { flex-basis: 100%; }
.st-perm .switch { flex: none; }
.st-perm .switch:disabled { opacity: .55; }
.st-app .switch-row:first-of-type { border-top: 0; padding-top: 4px; }
.st-log { display: grid; margin: 0; padding: 0; list-style: none; }
.st-log li { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.st-log li:first-child { border-top: 0; padding-top: 0; }
.st-log .t-sub { font-variant-numeric: tabular-nums; }
.st-foot { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface); border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: var(--e1); }
.st-foot.is-nudge { animation: st-nudge 420ms var(--ease-set) 1; }
@keyframes st-nudge { 0%, 100% { transform: none; } 35% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .st-foot.is-nudge { animation: none; } }
.st-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.st-dl li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 500; white-space: nowrap; }
.st-dl li.st-more.is-m { display: none; }
.st-foot-act { display: flex; align-items: center; gap: 8px 12px; }
.st-foot-act > .cell-two { flex: 1; min-width: 0; gap: 2px; }
.st-foot-act .st-btns { flex: none; display: flex; gap: 8px; }
.st-foot-msg:empty { display: none; }
.st-copy-wrap { position: relative; }
/* 앱에서 관리자로 올린 강사에게 남은 세부 권한 안내(B7 — 2026-10-24 되살리지 않음) */
.st-left { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.st-left .notice-line { align-self: stretch; }
.st-pop { right: 0; top: calc(100% + 6px); width: 320px; max-height: min(480px, calc(100vh - 32px)); overflow-y: auto; }
.st-pop .pop-item { min-height: 52px; }
.st-pop .pop-label { padding: 8px 16px 4px; font-size: var(--fs-12); font-weight: 700; color: var(--muted); }
.st-pop .pop-foot { padding: 8px 16px 4px; border-top: 1px solid var(--line); }
html.st-lock, html.st-lock body { overflow: hidden; }
.st-jrn { margin-left: 2px; font-weight: 700; color: var(--stop); font-variant-numeric: tabular-nums; }
.jr-list { display: grid; }
.jr-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; min-height: 72px; padding: 12px 0; border-top: 1px solid var(--line); }
.jr-row:first-child { border-top: 0; padding-top: 0; }
.jr-row .cell-two { gap: 2px; min-width: 0; }
.jr-row .t-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.jr-row .t-sub { font-variant-numeric: tabular-nums; white-space: normal; }
.jr-act { display: flex; gap: 8px; }
.jr-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 0 8px; }
.jr-note { grid-column: 1 / -1; }
.jr-note:empty { display: none; }
.jr-go { padding: 10px 0; border-top: 0; border-radius: var(--r-input); }
.pr-row .t-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-steps { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.lk-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.lk-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--surface); font-size: var(--fs-13); font-weight: 700; }
.lk-steps .t-name { padding-top: 3px; }
.lk-steps > li > .t-sub, .lk-steps > li > .lk-cred { grid-column: 2; }
.lk-cred { display: grid; padding: 0 16px; border-radius: var(--r-input); background: var(--paper); }
.lk-line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; }
.lk-line + .lk-line { border-top: 1px solid var(--line); }
.lk-line .t-value { overflow-wrap: anywhere; }
.lk-pw { display: flex; align-items: flex-end; gap: 8px; }
.lk-pw .field { flex: 1; min-width: 0; }
.lk-pw .btn { flex: none; height: var(--input); }
.pr-list { display: grid; }
.pr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 0; text-align: left; border-top: 1px solid var(--line); }
.pr-row:first-child { border-top: 0; }
.pr-row > .ico { width: 20px; height: 20px; color: var(--faint); }
.pr-row .cell-two { gap: 2px; min-width: 0; }
.pr-perm .st-perm { padding-left: 16px; padding-right: 0; }
.pr-perm .st-grp-head { padding: 0 0 0 8px; }
@media (max-width: 767px) {
  .st-tools, .st-glabel { padding-left: 20px; padding-right: 20px; }
  .st-row { padding-left: 20px; padding-right: 12px; }
  .st-panel { display: none; }
  .st-panel.is-open { display: block; position: fixed; inset: 0; z-index: 79; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0; }
  .st-mhead { display: flex; align-items: center; position: sticky; top: 0; z-index: 6; height: 48px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .st-ph, .st-sec { padding-left: 20px; padding-right: 20px; }
  .st-sec.is-flush { padding-left: 0; padding-right: 0; }
  .st-sec.is-flush > .st-sec-head { padding: 0 20px 12px; }
  .st-grp-head { padding: 0 20px 0 12px; }
  .st-perm { padding: 6px 20px 6px 44px; }
  .st-roles { grid-template-columns: minmax(0, 1fr); }
  .st-roles .choice { min-height: 52px; flex-direction: row; align-items: center; gap: 10px; }
  .st-roles .choice[aria-pressed="true"]::after { top: 50%; margin-top: -9px; }
  .st-roles .ch-lock { top: 50%; margin-top: -8px; }
  .st-foot { border-radius: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .st-foot-act > .cell-two > .t-sub { display: none; }
  .st-dl li.is-wide, .st-dl li.st-more.is-w { display: none; }
  .st-dl li.st-more.is-m { display: flex; }
  .jr-act { grid-column: 2 / -1; }
  .jr-act .btn { flex: 1; }
  .lk-pw { flex-direction: column; align-items: stretch; }
  .st-pop { width: calc(100vw - 40px); }
}