/* 니짐내짐 레슨 관리 프로토타입 — 니짐 팔레트 v2 (이 표 밖 색 금지)
   Apple 디자인 리스타일: 옵티컬 트래킹·리딩, 반투명 머티리얼, 스프링 시트,
   press-down 피드백, reduced-motion/transparency 대응. 기능·문구 무변경. */
:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-sunken: #f4f4f6;
  --surface-rose: #ffedf3;
  --surface-blue: #eaf6ff;
  --border: #ececef;
  --border-strong: #d9d9df;
  --text: #202024;
  --text-muted: #6b6b73;
  --text-on-brand: #ffffff;
  --text-disabled: #a0a0a8;
  --cta: #ff0065;
  --cta-hover: #e0005a;
  --cta-disabled: #f2c2d3;
  --link: #e0005a;
  --secondary: #39b4ff;
  --success: #00c281;
  --warning: #b45309;
  --warning-surface: #fef3c7;
  --danger: #c81e1e;
  --danger-surface: #fee2e2;
  --ink-band: #16161c;
  --r: 18px;
  /* 깊이 단계: 카드(1) < 플로팅 크롬(2) < 시트(3) */
  --shadow: 0 1px 2px rgba(22,22,28,.04), 0 6px 20px rgba(22,22,28,.06);
  --shadow-2: 0 2px 6px rgba(22,22,28,.05), 0 12px 32px rgba(22,22,28,.10);
  --shadow-3: 0 -12px 48px rgba(22,22,28,.18);
  --ease-out: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #f0f0f2;
  color: var(--text);
  /* ⚠️ font: 단축 속성 금지 — font-family로만 지정 */
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0; /* 본문 트래킹은 0 — 큰 활자만 음수 트래킹 */
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
  overflow-wrap: break-word;
}
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; touch-action: manipulation; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; }
:where(button, a, select, input, textarea):focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* ── 모바일 셸 (390 기준, PC에선 중앙 430px) ── */
.shell { max-width: 430px; margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--border); }
.screen { flex: 1; padding: 16px 16px 24px; }
.screen.no-tab { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
/* 화면 진입: 살짝 떠오르는 크로스페이드 (해시 이동 시에만 부여) */
.screen.enter { animation: screen-in .3s var(--ease-out); }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } }

/* 헤더 — 반투명 머티리얼, 콘텐츠가 밑으로 스크롤됨. 경계선은 스크롤 시에만(스크롤 에지) */
.hd { position: sticky; top: 0; z-index: 20; background: rgba(250,250,250,.78); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease; }
.hd.scrolled { border-bottom-color: var(--border); box-shadow: 0 1px 12px rgba(22,22,28,.05); }
.hd-in { display: flex; align-items: center; gap: 8px; padding: 12px 16px; min-height: 56px; }
.hd-title { font-size: 17px; font-weight: 700; letter-spacing: -0.012em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-back { width: 36px; height: 36px; margin-left: -6px; border-radius: 50%; background: rgba(255,255,255,.9); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; flex-shrink: 0; transition: transform .12s var(--ease-out); }
.hd-back:active { transform: scale(.92); background: var(--surface-sunken); }
.hd-role { font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--text-muted); background: rgba(255,255,255,.9); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; flex-shrink: 0; transition: transform .12s var(--ease-out); }
.hd-role:active { transform: scale(.95); }
.hd-role b { color: var(--cta); font-weight: 700; }

/* 하단 탭바 — 플로팅 알약. 큰 플로팅 면 = 더 두꺼운 머티리얼(강한 블러+깊은 그림자) */
.tabbar { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); margin: 16px auto 12px; width: calc(100% - 32px); max-width: 398px; background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(236,236,239,.9); border-radius: 999px; box-shadow: var(--shadow-2); display: flex; z-index: 30; padding: 6px; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; border-radius: 999px; font-size: 11px; letter-spacing: .01em; color: var(--text-muted); font-weight: 600; transition: transform .12s var(--ease-out), background .18s ease, color .18s ease; }
.tab:active { transform: scale(.94); }
.tab .ic { font-size: 18px; line-height: 1; }
.tab.on { color: var(--cta); background: var(--surface-rose); }

/* 카드·리스트 */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.card.flat { box-shadow: none; }
.card-tap { display: block; width: 100%; text-align: left; transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); }
.card-tap:active { transform: scale(.98); box-shadow: 0 1px 2px rgba(22,22,28,.05); }
.sec-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin: 22px 0 10px; }
.sec-title:first-child { margin-top: 4px; }
.row { display: flex; align-items: center; gap: 10px; }
.row .grow { flex: 1; min-width: 0; }
.muted { color: var(--text-muted); font-size: 13px; }
.small { font-size: 12px; }
.big { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.divider { height: 1px; background: var(--border); margin: 12px 0; }

/* 뱃지·칩 */
.badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .01em; border-radius: 999px; padding: 3px 9px; vertical-align: 1px; }

/* v2.61 센터 태그 — 활성 소속 2곳 이상인 선생님에게만 뜬다(형 확정 ③).
   상태 배지(.badge) 계열과 섞지 않는다: 센터명은 «상태»가 아니라 «소속»이라 톤을 낮춘다. */
.ctr-tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px;
  margin-right: 6px; background: var(--surface-blue); color: #1673ab; vertical-align: 1px;
  max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-rose { background: var(--surface-rose); color: var(--cta); }
.b-blue { background: var(--surface-blue); color: #1673ab; }
.b-green { background: #e2f8ef; color: #067a56; }
.b-warn { background: var(--warning-surface); color: var(--warning); }
.b-danger { background: var(--danger-surface); color: var(--danger); }
.b-gray { background: var(--surface-sunken); color: var(--text-muted); }
/* v2.28 반복 생성 회차 배지 — 상태(예정·마감)와 구분되는 «출처» 표시라 중립 톤 */
.b-rc { background: var(--surface-sunken); color: var(--text); border: 1px solid var(--border-strong); padding: 2px 8px; }

/* v2.28 «수업» 탭 반복 설정 헤더 — 390px에서 버튼이 줄바꿈되도록 */
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; padding: 4px 0 10px; border-bottom: 1px solid var(--border); }
.rc-top .rc-allbtns { display: flex; gap: 6px; flex-shrink: 0; }
.toggle-row .grow { min-width: 0; }
.toggle-row .tl, .toggle-row .td { word-break: keep-all; }

/* 버튼 — pointer-down 즉시 피드백(scale), 터치 타깃 확보 */
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; text-align: center; border-radius: 14px; padding: 14px 16px; font-size: 15px; font-weight: 700; letter-spacing: -0.005em; word-break: keep-all; transition: transform .12s var(--ease-out), background .15s ease; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--cta); color: var(--text-on-brand); box-shadow: 0 4px 14px rgba(255,0,101,.22); }
.btn.primary:active { background: var(--cta-hover); }
.btn.primary:disabled { background: var(--cta-disabled); box-shadow: none; cursor: default; transform: none; }
.btn.ghost { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); }
.btn.danger-ghost { background: var(--surface); border: 1px solid var(--border-strong); color: var(--danger); }
.btn.sm { min-height: 40px; padding: 9px 14px; font-size: 13px; border-radius: 11px; width: auto; display: inline-flex; }
.btn-row { display: flex; gap: 8px; margin-top: 12px; }
/* v2.48: flex-basis auto — 행은 언제나 100% 채우되, 라벨이 긴 버튼(주버튼)이 더 넓게 가져가 줄바꿈을 줄인다 */
.btn-row .btn { margin: 0; flex: 1 1 auto; min-width: 0; }

/* 프로토타입 데모 전용 장치 — 실서비스 UI와 시각적으로 구분 (점선 보더 + 캡션) */
.demo-box { margin-top: 10px; padding: 9px 11px; border: 1.5px dashed var(--border-strong); border-radius: 12px; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; background: var(--surface-sunken); }
.demo-cap { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .01em; flex: 1 1 auto; min-width: 120px; text-align: left; }
.btn.demo { border: 1.5px dashed var(--border-strong); background: var(--surface); color: var(--text-muted); flex: 0 0 auto; }

/* 알림 배너 */
.banner { display: flex; align-items: center; gap: 10px; background: var(--surface-rose); border: 1px solid #ffd3e3; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: #a3003f; text-align: left; width: 100%; transition: transform .12s var(--ease-out); }
button.banner:active { transform: scale(.98); }
.banner .ic { font-size: 18px; }
.banner.warn { background: var(--warning-surface); border-color: #f4dfa8; color: var(--warning); }

/* 슬롯/일정 */
.slot { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.slot:last-child { border-bottom: 0; }
.slot .time { font-size: 12.5px; font-weight: 800; width: 68px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.slot .grow { flex: 1; min-width: 0; }
.slot .t { font-size: 14px; font-weight: 700; }
.cap-bar { height: 4px; background: var(--surface-sunken); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.cap-bar i { display: block; height: 100%; background: var(--secondary); border-radius: 999px; transition: width .5s var(--ease-out); }
.cap-bar.full i { background: var(--danger); }

/* 요일 스트립 */
.daystrip { display: flex; gap: 6px; margin-bottom: 14px; }
.day { flex: 1; text-align: center; padding: 8px 0 9px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); transition: transform .12s var(--ease-out); font-family: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.day:active { transform: scale(.94); }
.day .dw { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.day .dn { font-size: 15px; font-weight: 800; margin-top: 1px; font-variant-numeric: tabular-nums; }
.day.on { background: var(--cta); border-color: var(--cta); color: #fff; box-shadow: 0 4px 12px rgba(255,0,101,.28); }
.day.on .dw { color: #ffd3e3; }

/* 폼 */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.field input[type=text], .field input[type=number], .field input[type=date], .field input[type=time], .field select, .field textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px; background: var(--surface); font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; }
.field :is(input, select, textarea):focus { border-color: var(--cta); box-shadow: 0 0 0 3px rgba(255,0,101,.12); outline: none; }
/* iOS Safari: date/time 네이티브 인풋이 고유폭으로 width:100%를 넘겨 우측이 잘리는 버그 방지 */
.field input[type=date], .field input[type=time] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; min-height: 46px; text-align: left; }
.field input::-webkit-date-and-time-value { text-align: left; }
.field .hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
/* v2.49: 트랙 #f4f4f6이 페이지 배경 #fafafa와 거의 같아 미선택 탭이 맨 텍스트로 보였다 — 트랙을 한 톤 낮추고 테두리로 «누르는 컨트롤»임을 드러낸다 */
.seg { display: flex; background: #ececf0; border: 1px solid #e2e2e8; border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { flex: 1; padding: 9px 4px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--text-muted); transition: background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .12s var(--ease-out); }
.seg button:active { transform: scale(.96); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(32,32,36,.12); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.check input { width: 18px; height: 18px; accent-color: var(--cta); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .tl { font-size: 14px; font-weight: 700; }
.toggle-row .td { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.toggle-row select { border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px; background: var(--surface); }
/* iOS 비례 스위치 — 썸은 transform으로만 이동(스프링풍 이징) */
.sw { position: relative; width: 51px; height: 31px; border-radius: 999px; background: var(--border-strong); flex-shrink: 0; transition: background .25s var(--ease-out); }
.sw.on { background: var(--cta); }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; transform: translateX(0); transition: transform .3s cubic-bezier(.22,1.18,.36,1); box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); }
.sw.on::after { transform: translateX(20px); }

/* 원장/타임라인 */
.ledger { list-style: none; }
.ledger li { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ledger li:last-child { border-bottom: 0; }
.ledger .delta { font-weight: 800; width: 34px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ledger li > span:last-child { flex-shrink: 0; white-space: nowrap; } /* 일시가 두 줄로 꺾이지 않게 */
.ledger .delta.minus { color: var(--danger); }
.ledger .delta.plus { color: var(--success); }
.tl-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; align-items: flex-start; }
/* v2.48: .row/.slot의 .grow와 달리 여기만 flex:1이 빠져 있어 내용 블록이 가장 긴 텍스트 폭으로 수축 — 버튼 행이 카드 폭을 못 채우던 원인 */
.tl-item > .grow { flex: 1; min-width: 0; }
.tl-item:last-child { border-bottom: 0; }

/* 역할 랜딩 */
.landing { padding: 44px 24px 32px; }
.landing h1 { font-size: 26px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; }
.landing h1 b { color: var(--cta); }
.landing .sub { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 10px 0 28px; }
.role-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 16px; box-shadow: var(--shadow); margin-bottom: 12px; transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); }
.role-card:active { transform: scale(.98); box-shadow: 0 1px 2px rgba(22,22,28,.05); }
.role-card .em { width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--surface-rose); flex-shrink: 0; }
.role-card > span:nth-child(2) { flex: 1; min-width: 0; }
.role-card .rt { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.role-card .rd { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.role-card .arrow { margin-left: auto; color: var(--text-disabled); font-size: 18px; }

/* 모달 = 바텀 시트 (JS 스프링 진입·드래그 디스미스, transform은 JS가 관리) */
.modal-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal-dim { position: absolute; inset: 0; background: rgba(22,22,28,.44); opacity: 0; }
.modal { position: relative; width: 100%; max-width: 430px; background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-radius: 22px 22px 0 0; padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); z-index: 1; box-shadow: var(--shadow-3); will-change: transform; touch-action: none; }
.modal :is(input, textarea, select) { touch-action: auto; }
.modal .pd-list { touch-action: pan-y; }
/* 오버슈트 시 아래 틈이 보이지 않도록 스커트 연장 */
.modal::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100px; background: #fff; }
.modal .grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 4px auto 14px; }
.modal h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.012em; margin-bottom: 8px; }
.modal p { font-size: 14px; line-height: 1.6; color: var(--text-muted); }

/* 토스트 — 살짝 떠오르며 정착 */
.toast { position: fixed; bottom: calc(88px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgba(22,22,28,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 11px 18px; z-index: 60; max-width: calc(100% - 48px); text-align: center; box-shadow: var(--shadow-2); animation: toast-in .4s cubic-bezier(.3,1.3,.4,1); }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.96); } }
.toast.out { opacity: 0; transform: translateX(-50%) translateY(6px); transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }

/* 통계 그리드 */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; transition: transform .12s var(--ease-out); }
button.stat:active { transform: scale(.97); }
.stat .k { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.stat .v { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--text-muted); }

/* 칩 멀티셀렉트 (회원·수업권 지정 picker) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; font-weight: 600; border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 12px; background: var(--surface); color: var(--text-muted); transition: transform .12s var(--ease-out), background .15s ease, color .15s ease, border-color .15s ease; }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--surface-rose); border-color: var(--cta); color: var(--cta); }

/* 소형 세그 (완료 보고 참석/노쇼) */
.seg.seg-sm { flex-shrink: 0; }
.seg.seg-sm button { padding: 6px 4px; font-size: 12px; }

/* P2-2b 선생님별 지정 가능 회원 범위 */
.scope-prod { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-top: 8px; background: var(--surface); }
.chip.sm { font-size: 12.5px; padding: 6px 10px; }
.chip[disabled] { opacity: .55; pointer-events: none; }

/* v2.4 대규모 회원 검색 선택 picker — 결과는 스크롤 영역 안에서 점진 로딩 */
.pk { border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); overflow: hidden; }
.pk-selbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); max-height: 132px; overflow-y: auto; }
.pk-count { font-size: 12.5px; font-weight: 800; flex-shrink: 0; }
.pk-tools { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.pk-tools input[type=search] { flex: 1; min-width: 0; border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 11px; background: var(--surface); font-size: 14px; }
.pk-tools select { width: 128px; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 6px; background: var(--surface); font-size: 13px; }
.pk-total { padding: 6px 12px; font-size: 11.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.pk-results { max-height: 264px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pk-row { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13px; transition: background .12s ease; }
.pk-row:last-child { border-bottom: 0; }
.pk-row b { font-size: 14px; }
.pk-row:active { background: var(--surface-sunken); }
.pk-row.on { background: var(--surface-rose); }
.pk-check { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: var(--text-muted); flex-shrink: 0; }
.pk-row.on .pk-check { background: var(--cta); border-color: var(--cta); color: var(--text-on-brand); }
.pk-more { display: block; width: 100%; padding: 12px; font-size: 13px; font-weight: 700; color: var(--link); text-align: center; border-top: 1px solid var(--border); }

/* v2.7 정책 화면 — 선생님 수십 명 규모: 요약+편집, 검색 리스트, 행 탭 진입 */
.pk-results.tall { max-height: 420px; }
.pk-row .arrow { color: var(--text-disabled); font-size: 17px; flex-shrink: 0; }

/* v2.9 회차별 단가 명세 (정산 펼침) + 샐리 push 미리보기 */
.pd { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-sunken); overflow: hidden; }
.pd summary { padding: 11px 12px; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; }
.pd summary::-webkit-details-marker { display: none; }
.pd summary::before { content: "▸"; color: var(--text-muted); transition: transform .15s var(--ease-out); }
.pd[open] summary::before { transform: rotate(90deg); }
.pd-note { padding: 0 12px 10px; font-size: 12px; color: var(--text-muted); }
.pd-group { border-top: 1px solid var(--border); background: var(--surface); }
.pd-ghead { padding: 7px 12px; font-size: 12px; color: var(--text-muted); background: var(--surface-sunken); border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.pd-ghead b { color: var(--text); }
.pd-ghead.pd-held { color: var(--danger); }
.pd-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.pd-row:last-child { border-bottom: 0; }
.pd-price { font-weight: 800; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pd-disc { color: var(--link); font-weight: 700; }
.pd-list { max-height: 42vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 12px; margin: 10px 0 12px; }
.pd-list .pd-group:first-child { border-top: 0; }

/* ══ v2.10 회원(멤버) 화면 — 실서비스 «내 멤버십» 톤 리스타일 (role-m 스코프만) ══
   포인트 핑크 #F0195F = 실서비스 스크린샷 하단탭 아이콘 스포이드 추출값.
   기능·문구·정보 구조 무변경 — 비주얼만. 선생님·센터 화면은 기존 톤 그대로. */
.role-m {
  --bg: #f5f5f7;
  --cta: #f0195f;
  --cta-hover: #d31150;
  --cta-disabled: #f9c0d4;
  --link: #e01458;
  --surface-rose: #ffe9f1;
}
.role-m .hd { background: rgba(245,245,247,.8); }
.role-m .btn.primary { box-shadow: 0 4px 14px rgba(240,25,95,.22); }
.role-m .day.on { box-shadow: 0 4px 12px rgba(240,25,95,.26); }
.role-m .field :is(input, select, textarea):focus { box-shadow: 0 0 0 3px rgba(240,25,95,.12); }

/* 하단 탭: 플로팅 알약 → 실서비스형 흰 바 + 핑크 활성 (라인 아이콘) */
.role-m .tabbar { bottom: 0; margin: 12px 0 0; width: 100%; max-width: none; border-radius: 18px 18px 0 0; border: 0; border-top: 1px solid var(--border); background: rgba(255,255,255,.94); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 28px rgba(22,22,28,.07); }
.role-m .tab { gap: 3px; padding: 7px 0 5px; color: #8e8e96; }
.role-m .tab .ic { display: flex; align-items: center; justify-content: center; }
.role-m .tab .ic svg { width: 23px; height: 23px; display: block; }
.role-m .tab.on { background: none; color: var(--cta); font-weight: 800; }

/* ══ v2.25 ④ 선생님·센터 화면 톤 통일 (형 확정 A) ══
   회원(role-m)이 쓰던 실서비스 디자인 시스템(팔레트·하단탭·라인 아이콘)을 선생님(role-t)·센터(role-c)에도 그대로 적용.
   기능·정보 구조는 무변경 — 토큰과 크롬만 공유한다. */
.role-t, .role-c {
  --bg: #f5f5f7;
  --cta: #f0195f;
  --cta-hover: #d31150;
  --cta-disabled: #f9c0d4;
  --link: #e01458;
  --surface-rose: #ffe9f1;
}
.role-t .hd, .role-c .hd { background: rgba(245,245,247,.8); }
.role-t .btn.primary, .role-c .btn.primary { box-shadow: 0 4px 14px rgba(240,25,95,.22); }
.role-t .day.on, .role-c .day.on { box-shadow: 0 4px 12px rgba(240,25,95,.26); }
.role-t .field :is(input, select, textarea):focus,
.role-c .field :is(input, select, textarea):focus { box-shadow: 0 0 0 3px rgba(240,25,95,.12); }
.role-t .tabbar, .role-c .tabbar { bottom: 0; margin: 12px 0 0; width: 100%; max-width: none; border-radius: 18px 18px 0 0; border: 0; border-top: 1px solid var(--border); background: rgba(255,255,255,.94); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 28px rgba(22,22,28,.07); }
.role-t .tab, .role-c .tab { gap: 3px; padding: 7px 0 5px; color: #8e8e96; }
.role-t .tab.on, .role-c .tab.on { background: none; color: var(--cta); font-weight: 800; }

/* 라인 아이콘 — 배너·탭·버튼 안 (stroke=currentColor라 주변 색을 따라간다) */
.tab .ic { display: flex; align-items: center; justify-content: center; }
.tab .ic svg { width: 23px; height: 23px; display: block; }
.banner .ic { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.banner .ic svg { width: 19px; height: 19px; display: block; }
.ic-inline { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; margin-right: 6px; }
.ic-inline svg { width: 16px; height: 16px; display: block; }
.mb-empty .em svg, .state-em svg { width: 32px; height: 32px; stroke: var(--text-disabled); }
/* v2.31 §D-4: 결과·차단 화면의 대형 안내 이모지 → 공용 라인 아이콘 (mb-empty와 같은 규격) */
.state-em { display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.stat .v .ic-inline svg { width: 17px; height: 17px; }

/* v2.25 ③ 사용 수업권 블록 — 라벨/«변경»을 한 줄, 값은 아래로 (라벨 줄바꿈·버튼 잘림 방지) */
.pass-pick .pp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.pass-pick .pp-head .muted { white-space: nowrap; }
.pass-pick .pass-chg { width: auto; min-height: 32px; padding: 5px 13px; flex: 0 0 auto; }
.pass-pick .pp-name { display: block; font-size: 15px; letter-spacing: -0.01em; margin-top: 2px; }
.pass-opt { display: block; width: 100%; text-align: left; }
.pass-opt .po-sub { display: block; font-weight: 600; font-size: 12px; opacity: .82; margin-top: 2px; }

/* v2.25 ⑤ 회원 «예약» 탭 상단 세그먼트 (캘린더 | 내 예약) */
.book-seg { margin-bottom: 14px; }
/* v2.36 §1: 세그먼트 «요청» 칸의 답변 대기 배지 — 0이면 아예 렌더하지 않는다(탭 배지와 같은 규칙) */
.seg-n { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 3px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; font-style: normal; line-height: 1; vertical-align: 1px; }
.seg button.on .seg-n { background: var(--danger); }

/* ══ v2.11 회원 «수업 예약» — 주간 캘린더 스트립 + 날짜별 회차 리스트 (role-m 팔레트 상속) ══ */
.mb-cal { padding: 12px 12px 10px; }
.mb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mb-month { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; padding: 6px 10px; border-radius: 10px; transition: background .15s ease, transform .12s var(--ease-out); }
.mb-month:active { background: var(--surface-sunken); transform: scale(.96); }
.mb-month .car { color: var(--text-muted); font-size: 11px; }
.mb-nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; transition: transform .12s var(--ease-out), background .15s ease; }
.mb-nav:active { transform: scale(.92); background: var(--surface-sunken); }
.mb-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; touch-action: pan-y; }
.mb-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; border-radius: 12px; transition: transform .12s var(--ease-out), background .15s ease; }
.mb-day:active { transform: scale(.94); }
.mb-day .dw { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.mb-day .dn { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.mb-day.today .dn { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.mb-day.past .dn, .mb-day.past .dw { color: var(--text-disabled); }
.mb-day.on { background: var(--surface-rose); }
.mb-day.on .dw { color: var(--cta); font-weight: 700; }
.mb-day.on .dn { background: var(--cta); color: var(--text-on-brand); box-shadow: 0 4px 10px rgba(240,25,95,.26); }
.mb-dots { display: flex; gap: 3px; height: 5px; align-items: center; }
.mb-dots i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.mb-dots .av { background: var(--secondary); }
.mb-dots .mine { background: var(--cta); }
.mb-day.on .mb-dots .mine { background: var(--cta-hover); }
.mb-legend { display: flex; gap: 14px; justify-content: center; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); }
.mb-legend i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; vertical-align: 1px; margin-right: 4px; }
.mb-legend .av { background: var(--secondary); }
.mb-legend .mine { background: var(--cta); }
.mb-item { align-items: flex-start; gap: 8px; }
.mb-main { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; text-align: left; transition: opacity .12s ease; }
.mb-main:active { opacity: .6; }
.mb-main .time { margin-top: 1px; }
.mb-right { flex-shrink: 0; margin-top: 2px; }
.mb-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.mb-empty { text-align: center; padding: 26px 16px; }
.mb-empty .em { font-size: 30px; }
.mb-empty .btn { width: auto; display: inline-flex; min-height: 44px; padding: 10px 16px; font-size: 14px; }

/* ══ v2.13 수업완료 확인 — 회원 원탭 확인 카드·탭 배지 + 현장 일회용 QR (PIN 폐지) ══ */
.confirm-req { border: 1.5px solid #ffd3e3; box-shadow: 0 6px 20px rgba(240,25,95,.08); }
.tab .ic { position: relative; }
.tab-dot { position: absolute; top: -3px; right: -8px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--danger, #e5484d); color: #fff; font-size: 9.5px; font-weight: 800; font-style: normal; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--surface, #fff); }
.qr-wrap { text-align: center; padding: 14px 0 6px; }
.qr-svg { width: 168px; height: 168px; max-width: 60vw; border: 1px solid var(--border); border-radius: 14px; padding: 10px; background: #fff; }
.qr-meta { margin-top: 8px; font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* ══ v2.14 회원 «내 멤버십» — 실서비스 멤버십 카드 문법 재현 (기존 앱 끼워넣기 목적) ══
   카드=시설명+핑크 원형 화살표 / 프로그램명 / 멤버십 라벨 / 큰 잔여 숫자+작은 단위 / 회색 보조줄.
   여러 장=scroll-snap 페이징 캐러셀(이웃 카드 가장자리 노출). 버튼=«입장하기» 문법(풀폭 연회색+아이콘). */
.role-m .hd-title.center { text-align: center; }
/* 실측(기준 스샷 1179px 원본): 카드 폭=화면의 72.0% · 가로:세로=849:539(1.575) · 이웃 노출 5.8% · 카드 간격 8.1% */
.mp-carousel { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 4px -16px 0; padding: 4px 54px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.mp-carousel::-webkit-scrollbar { display: none; }
.mp-carousel.drag { scroll-snap-type: none; cursor: grabbing; }
.mp-card { flex: 0 0 100%; scroll-snap-align: center; min-height: 179px; background: var(--surface); border-radius: 24px; padding: 8px 20px 8px; box-shadow: var(--shadow); user-select: none; -webkit-user-select: none; }
.mp-carousel.single .mp-card { flex-basis: 100%; }
.mp-fac { display: flex; align-items: center; gap: 7px; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; min-width: 0; line-height: 1.2; }
.mp-fac > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-arrow { width: 21px; height: 21px; border-radius: 50%; background: var(--cta); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mp-arrow svg { width: 9px; height: 9px; display: block; }
.mp-prog { font-size: 15px; font-weight: 700; margin-top: 26px; line-height: 1.2; }
.mp-plabel { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; margin-top: 2px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.mp-left { margin-top: 0; display: flex; align-items: baseline; gap: 1px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.mp-left b { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.0; }
.mp-left span { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.mp-left small { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 6px; }
.mp-sub { margin-top: 3px; font-size: 13.5px; line-height: 1.2; color: #8e8e96; font-variant-numeric: tabular-nums; }
.mp-sub .d { color: var(--link); font-weight: 700; }
.mp-sub .warn { color: var(--danger); font-weight: 800; }
.mp-card.off { background: var(--surface-sunken); box-shadow: none; }
.mp-card.off .mp-fac, .mp-card.off .mp-plabel, .mp-card.off .mp-left b, .mp-card.off .mp-left span { color: var(--text-muted); }
.mp-card.off .mp-arrow { background: var(--text-disabled); }
.mp-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 56px; margin-top: 14px; border-radius: 18px; background: #ececef; color: #55555c; font-size: 16px; font-weight: 700; letter-spacing: -0.005em; transition: transform .12s var(--ease-out), background .15s ease; }
.mp-btn:active { transform: scale(.98); background: #e2e2e6; }
.mp-btn svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--cta); }
.mp-status { text-align: center; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin: 22px 0 4px; }
/* v2.41: .mp-sec/.mp-info(멤버십 상세정보)는 #/m/pass 삭제와 함께 제거 — 참조 0 */

@media (min-width: 1024px) {
  body { padding: 32px 0; }
  .shell { border-radius: 24px; overflow: hidden; min-height: calc(100vh - 64px); box-shadow: 0 24px 64px rgba(32,32,36,.12), 0 0 0 1px var(--border); }
  .modal-wrap { position: absolute; }
  .toast { position: absolute; }
}

/* ── 접근성: 모션·투명도·대비 선호 존중 ── */
@media (prefers-reduced-motion: reduce) {
  .screen.enter { animation: screen-fade .2s ease; }
  @keyframes screen-fade { from { opacity: 0; } }
  .toast { animation: toast-fade .2s ease; }
  @keyframes toast-fade { from { opacity: 0; transform: translateX(-50%); } }
  .toast.out { transform: translateX(-50%); }
  .btn:active, .card-tap:active, .role-card:active, .tab:active, .hd-back:active,
  .hd-role:active, button.stat:active, button.banner:active, .seg button:active, .day,
  .mb-day:active, .mb-nav:active, .mb-month:active, .mp-btn:active,
  .cb-day:active, .cb-chip:active { transform: none; }
  .sw, .sw::after, .cap-bar i { transition-duration: .01ms; }
}
@media (prefers-reduced-transparency: reduce) {
  .hd { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabbar, .modal { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .toast { background: var(--ink-band); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .hd, .tabbar, .modal { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--border-strong); }
  .card, .stat, .role-card { border-color: var(--border-strong); }
}

/* ══ v2.16 회원 «수업 멤버십 구매» — 실서비스 구매 화면 카드 문법 (purchase_ui_spec.md v1 실측) ══
   ⚠️ 레드 계열(#CE0000·#C80000 등)은 실서비스 실측값 — 니짐 Rose(#FF0065)로 치환 금지 (스펙 §3-1) */
.shop { margin: -16px -16px -24px; padding: 4px 0 28px; background: #ffffff; }
.shop-h { margin: 28px 16px 0; font-size: 20px; font-weight: 700; color: #111111; line-height: 1.3; }
.shop-h:first-child { margin-top: 10px; }
.shop-row { display: flex; align-items: flex-start; gap: 30px; overflow-x: auto; padding: 24px 18px 8px; scroll-snap-type: x proximity; scroll-padding-left: 18px; scrollbar-width: none; }
.shop-row::-webkit-scrollbar { display: none; }
.shop-card { position: relative; flex: 0 0 140px; width: 140px; display: flex; flex-direction: column; padding: 0; background: #ffffff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.08); text-align: center; scroll-snap-align: start; transition: transform .12s var(--ease-out); }
.shop-card:active { transform: scale(.97); }
.sc-cap { display: flex; align-items: center; justify-content: center; height: 23px; border-radius: 10px 10px 0 0; background: #343434; color: #ffffff; font-size: 17px; font-weight: 700; }
.shop-card.ev .sc-cap { background: #ce0000; }
.sc-band { display: flex; align-items: center; justify-content: center; height: 15px; background: #d6d6d6; color: #333333; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; }
.shop-card.ev .sc-band { background: #ffced5; }
.sc-price { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 18px 8px; }
.sc-won { font-size: 17px; font-weight: 700; color: #111111; line-height: 1.25; }
.sc-per { font-size: 13px; font-weight: 500; color: #767676; line-height: 1.3; }
.sc-list { font-size: 13px; font-weight: 500; color: #555555; line-height: 1.25; text-decoration: line-through; }
.sc-sale { font-size: 15px; font-weight: 600; color: #c80000; line-height: 1.25; }
.sc-per-ev { font-size: 17px; font-weight: 800; color: #c80000; line-height: 1.25; }
.sc-badge { position: absolute; left: -10px; top: -24px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: #fcce00; color: #443300; font-size: 10px; font-weight: 700; line-height: 1.15; display: flex; align-items: center; justify-content: center; text-align: center; }
.shop-notice { margin: 20px 16px 0; padding: 14px 18px; border-radius: 12px; background: #f1f1f1; color: #333333; font-size: 13px; font-weight: 500; line-height: 1.6; }

/* ══ v2.20 센터 «예약 현황» — 월간 캘린더+필터 칩 (회원 캘린더 mb-* 문법 재사용) ══ */
.cb-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cb-frow { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cb-frow::-webkit-scrollbar { display: none; }
.cb-flabel { font-size: 12px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; width: 42px; }
.cb-chip { flex-shrink: 0; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: transform .12s var(--ease-out), background .15s ease, color .15s ease, border-color .15s ease; }
.cb-chip:active { transform: scale(.95); }
.cb-chip.on { background: var(--surface-rose); border-color: var(--cta); color: var(--cta); font-weight: 700; }
.cb-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 2px; }
.cb-dow span { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.cb-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; touch-action: pan-y; }
.cb-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 5px; border-radius: 12px; transition: transform .12s var(--ease-out), background .15s ease; }
.cb-day.blank { pointer-events: none; }
.cb-day:active { transform: scale(.94); }
.cb-day .dn { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cb-day.today .dn { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.cb-day.past .dn { color: var(--text-disabled); }
.cb-day.on { background: var(--surface-rose); }
.cb-day.on .dn { background: var(--cta); color: var(--text-on-brand); box-shadow: 0 4px 10px rgba(240,25,95,.26); }
.cb-day .cnt { font-size: 9.5px; font-weight: 700; color: var(--text-muted); height: 12px; line-height: 12px; }
.cb-day.past .cnt { color: var(--text-disabled); }
/* v2.24 U22: 조율 표식은 날짜 셀 위 절대배치(셀 밖 부유)를 폐기하고 상태 점 줄에 인라인 배치 */
.mb-dots .ar { background: var(--warning); }
.mb-dots .fl, .mb-legend .fl { background: var(--danger); }
.mb-dots .pd, .mb-legend .pd { background: var(--border-strong); }
.mb-legend .ar { background: var(--warning); }
.cb-legend { flex-wrap: wrap; gap: 8px 12px; }
/* v2.21: 정산 캘린더 점 — 확정(브랜드)·자동확정(파랑)·보류(경고) */
.mb-dots .cf, .mb-legend .cf { background: var(--cta); }
.mb-dots .au, .mb-legend .au { background: var(--secondary); }
.mb-dots .hd, .mb-legend .hd { background: var(--warning); }
.cs-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.cs-amt { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-amt.held { color: var(--text-muted); text-decoration: line-through; font-weight: 600; }

/* v2.22: 선생님발 제안 — 인박스 시간 변경 표시 (기존 → 제안 시간) */
.pp-shift { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; }
.pp-shift .old { color: var(--text-muted); text-decoration: line-through; }
.pp-shift .arw { color: var(--text-disabled); }
.pp-shift .new { font-weight: 700; color: var(--cta); }

/* v2.24 U3: 홈 «다가오는 예약» 행 탭 → 회차 상세 (취소·변경 동선의 입구) */
.slot.tapable { cursor: pointer; border-radius: 10px; transition: background .15s ease, transform .12s var(--ease-out); }
.slot.tapable:active { transform: scale(.985); background: var(--surface-alt, rgba(0,0,0,.03)); }
.slot .chev { flex-shrink: 0; font-size: 17px; font-weight: 700; color: var(--text-disabled); line-height: 1; }
/* v2.36: 한 행에 버튼이 2개(변경 요청·취소) 붙는 카드 — 좁은 화면에선 액션을 아랫줄로 내려 본문 칸을 지킨다 */
@media (max-width: 430px) {
  .slot.slot2 { flex-wrap: wrap; }
  .slot.slot2 > .grow { flex: 1 1 100%; }
  .slot.slot2 > .badge, .slot.slot2 > .btn { margin-top: 8px; }
  .slot.slot2 > .btn { flex: 0 0 auto; width: auto; }
}

/* v2.26 «수업 만들기» — 회원 채우는 방식 선택(라디오 카드).
   세그먼트가 아니라 카드형인 이유: 각 선택지에 «무슨 일이 벌어지는지» 한 줄 설명이 필요해서. */
.fill-opts { display: flex; flex-direction: column; gap: 8px; }
.fill-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 13px 14px; border: 1.5px solid var(--border-strong); border-radius: 14px;
  background: var(--surface); color: var(--text);
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out), transform .12s var(--ease-out);
}
.fill-opt:active { transform: scale(.985); }
.fill-opt.on { border-color: var(--cta); background: var(--surface-rose); }
.fill-opt .fo-dot {
  flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--surface);
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.fill-opt.on .fo-dot { border-color: var(--cta); box-shadow: inset 0 0 0 4px var(--cta); }
.fill-opt .grow { min-width: 0; }
.fill-opt b { display: block; font-size: 14px; font-weight: 800; line-height: 1.35; word-break: keep-all; }
.fill-opt .fo-d { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--text-muted); word-break: keep-all; }
.fill-opt.on .fo-d { color: var(--text); }

/* ══ v2.29 §A1 «해야 할 일» 블록 (감사 2차 U1·U11·U21) ══
   요약 행은 항목마다 배경·테두리·아이콘 모양을 바꾸지 않는다 — 배너가 색색으로 쌓이던 것이 문제의 핵심.
   톤 예외는 danger(문제 계열) 하나뿐. */
.sec-title.todo-title { display: flex; align-items: center; gap: 8px; }
.card.todo-card { padding: 0; overflow: hidden; }
.todo-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: 56px; padding: 14px 16px; background: transparent; color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background .15s ease, transform .12s var(--ease-out);
}
.todo-row:last-child { border-bottom: 0; }
.todo-row:active { transform: scale(.99); background: var(--surface-sunken); }
.todo-row .ic { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.todo-row .ic svg { width: 20px; height: 20px; display: block; }
.todo-row .tr-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo-row .tr-n { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.todo-row .chev { flex-shrink: 0; font-size: 17px; font-weight: 700; color: var(--text-disabled); line-height: 1; margin-left: -4px; }
.todo-row.bad { background: var(--danger-surface); }
.todo-row.bad .ic, .todo-row.bad .tr-n { color: var(--danger); }
.todo-row.bad:active { background: #fbd5d5; }

/* §A2-1 행 내 보조 텍스트 — 배지에서 내려온 세부 사유. «문제» 계열만 빨강 */
.row-sub { font-size: 13px; line-height: 1.45; color: var(--text-muted); margin-top: 4px; }
.row-sub.bad { color: var(--danger); }

/* §A1-6 스탯 1장만 남는 역할(선생님 홈)은 풀폭 1열 */
.stat-grid.one { grid-template-columns: 1fr; }

/* §B5 (U19) 이용 내역 — 동명 수업권 구분용 구매일 */
.hist-buy { font-size: 13px; color: var(--text-muted); margin: -6px 0 8px 2px; }

/* §A4 «처리됨» 안의 하위 구분 캡션 (진행 중 / 기록) */
.grp-cap { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; margin: 12px 0 8px; }
.card.flat > .grp-cap:first-child { margin-top: 2px; }

/* §A5 (U4) 선생님 «일정» 캘린더 점 마커 — 회원·센터 캘린더와 같은 .mb-dots 문법 재사용 */
.mb-dots .ov, .mb-legend .ov { background: var(--danger); }
.mb-dots .rp, .mb-legend .rp { background: var(--warning); }

/* ══ v2.29 §B8 (U7) 인박스 상단 고정 단일 진입 «＋ 시간 제안하기» ══ */
.sticky-cta { position: sticky; top: 56px; z-index: 5; background: var(--bg); padding: 12px 0; margin-bottom: 2px; border-bottom: 1px solid var(--border); }
.sticky-cta .btn { margin: 0; }

/* §B8-3 (U8) 요청 카드 3버튼 — 긍정(풀폭) → 중립·부정(1:1 2열) */
.btn-row.col { flex-direction: column; }
.btn-row.col .btn-row.half { display: flex; gap: 8px; margin-top: 0; width: 100%; }
.btn-row.col .btn-row.half .btn { flex: 1 1 auto; min-width: 0; }

/* ══ v2.29 §B13 (U13) 정산 — 상단 월 합계 카드 + «날짜별 상세» 접힘 섹션 ══ */
.cs-sum .k { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.cs-sum .cs-total { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.fold-head {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  min-height: 52px; padding: 14px 16px; margin: 12px 0; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
  transition: background .15s ease, transform .12s var(--ease-out);
}
.fold-head:active { transform: scale(.99); background: var(--surface-sunken); }
.fold-head .chev { margin-left: auto; font-size: 17px; font-weight: 700; color: var(--text-disabled); line-height: 1; transition: transform .2s var(--ease-out); }
.fold-head.on .chev { transform: rotate(90deg); }

/* v2.31 §D-2 B안: «시간이 겹친 수업» 목록 — 겹침 쌍 1장, 안의 회차 2행 */
.ov-pair { margin-top: 8px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ov-line {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; background: transparent; color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}
.ov-line:last-child { border-bottom: 0; }
.ov-line:active { background: var(--surface-sunken); }
.ov-line .grow { min-width: 0; }
.ov-line .t { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.ov-line .chev { flex-shrink: 0; font-size: 17px; font-weight: 700; color: var(--text-disabled); line-height: 1; }

/* ══ v2.39 (형 지시 08-21): 데이터 누적 화면 공통 «검색 · 기간 필터» — 전 화면 동일 문법 ══ */
/* 칩(카테고리)은 cb-chip 문법을, 검색·셀렉트는 pk-tools 문법을 그대로 따른다 — 새 모양을 만들지 않는다. */
.flt { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.flt-cats { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
/* v2.59: 칩이 4개면 좁은 화면에서 가로로 넘친다(설계상 스크롤). 오른쪽 끝을 흐리게 해서
   «잘린 것»이 아니라 «옆으로 더 있다»로 읽히게 한다. 다 들어오는 화면에선 빈 공간에 걸려 티가 안 난다. */
.flt-cats { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
.flt-cats::-webkit-scrollbar { display: none; }
.flt-cat { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: transform .12s var(--ease-out), background .15s ease, color .15s ease, border-color .15s ease; }
.flt-cat:active { transform: scale(.95); }
.flt-cat.on { background: var(--surface-rose); border-color: var(--cta); color: var(--cta); font-weight: 700; }
.flt-cat i { font-style: normal; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--border); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; }
.flt-cat.on i { background: var(--cta); color: #fff; }
.flt-tools { display: flex; gap: 8px; }
.flt-tools input[type=search] { flex: 1; min-width: 0; border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; background: var(--surface); font-size: 14px; color: var(--text); }
.flt-tools select { width: 118px; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 6px; background: var(--surface); font-size: 13px; color: var(--text); }
.flt-range { display: flex; align-items: center; gap: 8px; }
.flt-range input[type=date] { flex: 1; min-width: 0; border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 10px; background: var(--surface); font-size: 13px; color: var(--text); }
.flt-range span { flex-shrink: 0; font-size: 13px; color: var(--text-muted); }
.flt-cnt { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin: 0 0 8px 2px; }
.flt-head { font-size: 13px; color: var(--text-muted); margin: 0 0 8px 2px; }
.cfm-row { padding: 14px 4px; }
.card.flat > .cfm-row + .cfm-row { border-top: 1px solid var(--border); }

/* v2.40: 정산 월 이동 — 미래 달 상한(비활성) · 이번 달 표식 · 월 전송 상태 */
.mb-nav[disabled] { opacity: .32; cursor: default; pointer-events: none; }
.mn-now { font-size: 11px; font-weight: 700; color: var(--link); background: var(--surface-rose); border-radius: 6px; padding: 2px 6px; margin-left: 4px; vertical-align: 1px; }
.te-cal .mb-head { margin-bottom: 0; }
.cs-push { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.cs-push .ic { flex-shrink: 0; margin-top: 1px; }
.cs-push b { color: var(--text); }
.cs-calcap { text-align: center; margin-bottom: 8px; font-weight: 700; }
.ps-ym { margin: 0 0 8px; font-size: 14px; color: var(--text-muted); }

/* ══ v2.45 센터(role-c) 반응형 — 태블릿(≥768)·PC(≥1024·기준 1440) ══
   회원(role-m)·선생님(role-t)은 모바일 전용이라 이 섹션의 모든 규칙은 .role-c 스코프.
   전략: <768 모바일 1단(무변경) / 768~1023 콘텐츠 폭 768 1단+그리드 확장 /
   ≥1024 좌측 사이드 내비+본문, 화면별 2단(cw2) / ≥1280 셸 1200·여백 확대. */

/* cw2 = 화면별 2단 래퍼 — 모바일·태블릿에선 그냥 블록(시각 무변경), PC(≥1024)에서만 grid 2단 */
.cw2 > div > .sec-title:first-child { margin-top: 22px; } /* 래핑으로 first-child가 되어도 모바일 간격 보존 */

@media (min-width: 768px) {
  .shell.role-c { max-width: 768px; }
  .role-c .screen { padding: 20px 28px 32px; }
  /* 스탯·바로가기: 2열 고정 → 칸 수 자동 (홈 지표 2장=2열, 바로가기 4장=4열) */
  .role-c .stat-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  /* 넓은 화면에서 풀폭 버튼이 확대만 되지 않게 상한 — 2열 버튼(btn-row)은 균등분할 유지 */
  .role-c .screen .btn { max-width: 420px; }
  .role-c .screen .btn-row .btn, .role-c .screen .mb-empty .btn { max-width: none; }
  .role-c .seg.book-seg { max-width: 420px; }
  .role-c .flt-tools { max-width: 640px; }
  .role-c .flt-tools select { width: 150px; }
  /* 캘린더 셀 — 여유 폭만큼 시원하게 */
  .role-c .cb-grid, .role-c .cb-dow { gap: 6px; }
  .role-c .cb-day { padding: 9px 0 8px; }
  .role-c .cb-day .dn { width: 30px; height: 30px; font-size: 15px; }
  .role-c .modal { max-width: 560px; }
  /* 수업·상품·겹침 카드 목록 = 자동 채움 그리드 (모바일에선 .cards가 그냥 블록) */
  .role-c .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: stretch; }
  .role-c .cards > .card { margin-bottom: 0; height: 100%; }
}

@media (min-width: 1024px) {
  /* 앱형 풀폭 크롬 — 전역 1024 규칙(모바일 셸 목업 프레임)을 센터에선 해제 */
  body:has(> .role-c) { padding: 0; }
  .shell.role-c { max-width: 900px; border-radius: 0; min-height: 100vh; box-shadow: 0 0 0 1px var(--border); }
  /* 탭바가 있는 메인 화면 = 좌측 내비 rail + 본문 그리드 */
  .shell.role-c:has(> .tabbar) { max-width: 1120px; display: grid; grid-template-columns: 228px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .shell.role-c:has(> .tabbar) > .hd { grid-column: 2; grid-row: 1; }
  .shell.role-c:has(> .tabbar) > .screen { grid-column: 2; grid-row: 2; }
  .role-c .tabbar { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; bottom: auto; align-self: start; height: 100vh;
    margin: 0; width: 100%; max-width: none; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 18px 14px; border-radius: 0; border: 0; border-right: 1px solid var(--border); box-shadow: none; background: rgba(255,255,255,.94); }
  .role-c .tabbar::before { content: "센터 관리"; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--text-muted); padding: 4px 14px 10px; }
  .role-c .tab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; }
  .role-c .tab.on { background: var(--surface-rose); }
  .role-c .tab .ic svg { width: 21px; height: 21px; }
  .role-c .screen { padding: 24px 32px 40px; }
  .role-c .hd-in { padding: 14px 32px; }
  .role-c .hd-title { font-size: 19px; }
  /* 모달: 바텀 시트 → 중앙 다이얼로그 (스프링 진입·드래그 디스미스는 그대로 동작).
     전역 1024 규칙의 absolute는 긴 화면에서 문서 기준으로 밀려나므로 뷰포트 고정으로 복원 */
  .role-c .modal-wrap { position: fixed; align-items: center; }
  .role-c .modal { max-width: 560px; border-radius: 22px; padding-bottom: 24px; }
  .role-c .modal::before { display: none; } /* 시트 오버슈트용 하단 스커트 — 다이얼로그에선 흰 꼬리로 보임 */
  .role-c .toast { position: fixed; bottom: 48px; }
  /* 화면별 2단 배치 */
  .role-c .cw2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .role-c .cw2.one { grid-template-columns: minmax(0, 1fr); } /* 한쪽 열이 빌 때(홈 «해야 할 일» 0건) */
  .role-c .cw2 > div > .sec-title:first-child { margin-top: 4px; }
  .role-c .cw2 > div > .fold-head:first-child { margin-top: 0; }
  /* 예약 현황: 좌=필터+캘린더(고정폭) · 우=선택 날짜 리스트 */
  .role-c .cw2.cw-cal { grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); }
  /* 넓은 본문에서 폼 요소·버튼열이 확대만 되지 않게 상한 (라벨·카드는 그대로) */
  .role-c .field :is(input, select, textarea) { max-width: 640px; }
  .role-c .field .seg { max-width: 640px; }
  .role-c .screen .btn-row { max-width: 640px; }
  /* 필터 칩: 가로 스크롤 대신 줄바꿈 — PC에선 잘린 칩이 «없는 옵션»으로 읽힌다 */
  .role-c .cb-frow { flex-wrap: wrap; overflow: visible; }
}

@media (min-width: 1280px) {
  .shell.role-c { max-width: 960px; }
  .shell.role-c:has(> .tabbar) { max-width: 1200px; grid-template-columns: 240px minmax(0, 1fr); }
  .role-c .screen { padding: 28px 40px 48px; }
  .role-c .hd-in { padding: 14px 40px; }
  .role-c .cw2 { gap: 0 32px; }
}

/* ── v2.53 (P7-2): methodApp=끔 안내 — 원탭 확인 버튼 자리를 대신하는 정보 박스 ── */
.qr-only { background: var(--surface-sunken); border: 1px solid var(--border-strong); border-radius: 12px; padding: 11px 14px; font-size: 13px; font-weight: 500; color: var(--text-muted); line-height: 1.55; text-align: center; width: 100%; }
.mb12 { margin-bottom: 12px; }

/* ── v2.57: 희망 일시 접힘 슬롯 — 기본 1쌍, «+ 희망 시간 추가»로 하나씩 펼침, ×로 접음 ── */
.mch-x { flex: 0 0 40px; width: 40px; min-height: 46px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text-muted); font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mch-x:active { background: var(--surface-sunken); }
.mch-add { display: block; background: none; border: none; padding: 8px 2px 0; color: var(--link); font-weight: 600; font-size: 13px; font-family: inherit; text-align: left; cursor: pointer; }

/* v2.59: 정책 «멤버십 유효 기준» 설명 블록 — 기준별 차이를 한 줄씩 (토글 행 아래 붙는 설명) */
.pol-basis { padding: 0 4px 12px; line-height: 1.55; }
.pol-basis b { color: var(--text); }
/* v2.59: 회원 홈 «멤버십 0장» 빈 상태 카드 */
.mp-empty { text-align: center; padding: 28px 16px; }
.mp-empty .btn { display: inline-flex; }
/* v2.59: 기간 필터 뒤집힘 안내 (직접 지정 입력 바로 아래) */
.flt-rev { margin: 6px 2px 0; color: var(--danger); font-weight: 600; font-size: 12.5px; line-height: 1.5; }
.flt-rev:empty { display: none; }

/* ══ v2.60 «수업 만들기» 2단계 플로우 — 1단계 타임라인 · 2단계 요약 바 ══ */
.cc-steps { display: flex; gap: 6px; margin-bottom: 14px; }
.cc-steps span { flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--surface-sunken); border-radius: 999px; padding: 7px 8px; }
.cc-steps span.on { background: var(--surface-rose); color: var(--cta); }
.cc-tl-card { position: relative; padding: 6px 10px; max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cc-row { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 6px; border-radius: 10px; border-bottom: 1px solid var(--border); transition: transform .12s var(--ease-out), background .15s ease; }
.cc-row:last-child { border-bottom: 0; }
.cc-rt { font-size: 12.5px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cc-rb { min-width: 0; font-size: 13px; }
.cc-rb b { display: block; font-size: 13.5px; font-weight: 800; }
.cc-rb i { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); }
.cc-span { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.cc-free { color: var(--text-muted); }
.cc-cont { font-size: 12px; color: var(--text-muted); }
.cc-row.busy { background: var(--surface-sunken); }
.cc-row.past { opacity: .55; cursor: default; }
.cc-past { color: var(--text-disabled); }
.cc-row.on { background: var(--surface-rose); box-shadow: inset 0 0 0 1.5px var(--cta); }
.cc-row.on .cc-rt { color: var(--cta); }
.cc-on { font-size: 11.5px; font-weight: 800; color: var(--cta); }
.cc-row:not(.past):active { transform: scale(.985); }
/* v2.63 «기준 선생님 고르기» — 센터(원장) 1단계 최상단 */
.cc-tpick { margin-bottom: 12px; }
.cc-basis { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--surface-rose); color: var(--cta); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.cc-tl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 18px; }
.cc-tl-empty svg, .cc-tl-empty .ic { width: 26px; height: 26px; opacity: .45; }
.cc-tl-empty b { font-size: 14.5px; font-weight: 800; }
.cc-tl-empty p { margin: 0; max-width: 34ch; word-break: keep-all; }
.cc-direct { display: flex; gap: 8px; align-items: center; }
.cc-direct input[type=time] { flex: 1 1 auto; min-width: 0; }
.cc-direct .btn { flex: 0 0 auto; }
.cc-next { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.cc-next-lab { flex: 1; min-width: 0; font-size: 13.5px; }
.cc-next-lab i { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.cc-next-lab b { font-size: 14px; font-weight: 800; }
.cc-next .btn { width: auto; flex: 0 0 auto; min-height: 44px; padding: 11px 20px; }
.cc-sum { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 11px 14px; border-radius: 14px; background: var(--surface-rose); }
.cc-sum .grow { flex: 1; min-width: 0; }
.cc-sum i { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--cta); }
.cc-sum b { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.cc-sum button { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: var(--cta); background: var(--surface); padding: 8px 12px; border-radius: 10px; }
.cc-sum button:active { background: var(--surface-sunken); }
@media (prefers-reduced-motion: reduce) { .cc-row:not(.past):active { transform: none; } }