/* landing.css — 랜딩 섹션마다 "실제로 이렇게 움직여요"를 크게 보여 주는 화면들. 값은 토큰만, 그라데이션은 주요 버튼 · 진행 막대에만. */

/* ── 폭: 첫 화면만 화면 가득, 나머지 섹션은 모두 1200px(배경 띠는 화면 끝까지) */
:root{--pub-full-gut:clamp(16px,3vw,48px)}
.ck-pub .w-narrow>.pub-wrap{width:min(100% - 2 * var(--pub-gut),1200px)}
.ck-pub .w-full>.pub-wrap{width:calc(100% - 2 * var(--pub-full-gut));max-width:none}
/* 머리말은 첫 화면(화면 가득)과 같은 선, 꼬리말은 아래 섹션들(1200px)과 같은 선 */
.ck-pub .pub-head .pub-wrap{width:calc(100% - 2 * var(--pub-full-gut));max-width:none}
.ck-pub .pub-foot .pub-wrap{width:min(100% - 2 * var(--pub-gut),1200px)}

/* ── 공용: PC 에서는 마우스를 올린 섹션만 재생 — 멈춰 있을 때 섹션 오른쪽 위 여백에 연한 안내 하나 */
[data-demo]{position:relative}
.ck-pub section>.pub-wrap{position:relative}
.dm-zhint{position:absolute;right:0;top:-46px;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 12px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--border);color:var(--text-2);font:700 13px/1.2 var(--font-body);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.dm-zhint i{width:0;height:0;border-left:8px solid var(--color-primary);border-top:5px solid transparent;border-bottom:5px solid transparent}
.dm-zidle .dm-zhint{opacity:1;transform:none}
.dm-hint{position:absolute;left:50%;bottom:14px;z-index:8;display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 14px;border-radius:var(--radius-pill);background:rgba(26,28,31,.82);color:var(--neutral-0);font:700 14px/1.2 var(--font-body);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,6px);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.dm-hint i{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.dm-idle .dm-hint{opacity:1;transform:translate(-50%,0)}
.dm-idle [data-step].on::after,.dm-idle .dm-keys b.ok.busy::after{animation-play-state:paused}
.dm-idle .dm-tip{opacity:0}
.dm-poster [data-step].on::after{animation:none;width:0}
.dm-scrub [data-step].on::after{animation:none;width:calc(var(--sp,0) * 100%)}

/* ── 공용: 단계 표시(누르면 그 장면으로) */
[data-step]{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
[data-step]::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:3px;background:var(--action-bg)}
[data-step].on::after{animation:dm-prog var(--dur,3s) linear forwards}
@keyframes dm-prog{from{width:0}to{width:100%}}
.dm-chaps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:var(--space-5) 0 0;padding:0;list-style:none}
.dm-chaps li{overflow:hidden;padding:9px 16px;border-radius:var(--radius-pill);background:var(--surface);color:var(--text-3);font-size:15px;font-weight:700;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.dm-chaps li.on{background:var(--primary-50);color:var(--brand-soft-text)}
.dm-chaps li b{font-family:var(--font-numeric);margin-right:5px}
.dm-cap{margin:var(--space-3) 0 0;min-height:1.5em;font-size:16px;font-weight:800;color:var(--brand-soft-text);text-align:center;letter-spacing:-0.01em}
.dm-dots{display:flex;gap:5px;justify-content:center;margin-top:8px}
.dm-dots i{width:8px;height:8px;border-radius:4px;background:var(--surface-3);transition:width var(--dur-base) var(--ease),background-color var(--dur-base) var(--ease)}
.dm-dots i.on{width:22px;background:var(--color-primary)}
.dm-dots i::after{display:none}

/* ── 키패드(태블릿) */
.dm-tab{position:relative;width:min(100%,360px);background:var(--surface);border-radius:24px;box-shadow:var(--shadow-frame);padding:20px;display:grid;gap:14px;overflow:hidden;box-sizing:border-box}
.dm-bezel{border:12px solid var(--neutral-900);border-radius:34px}
.dm-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;color:var(--text-3);font-weight:700}
.dm-top .chip{padding:3px 10px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text-2);font-size:13px}
.dm-top [data-clock]{font-family:var(--font-numeric);font-weight:800;color:var(--text);font-size:15px}
.dm-digits{display:flex;gap:10px;justify-content:center}
.dm-digits i{width:52px;height:62px;border:2px solid var(--border);border-radius:12px;display:grid;place-items:center;font:800 30px var(--font-numeric);font-style:normal;color:var(--text);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.dm-digits i.cur{border-color:var(--focus);box-shadow:0 0 0 4px var(--primary-100)}
.dm-digits i.fill{border-color:var(--primary-300);animation:dm-pop var(--dur-base) var(--ease)}
.dm-digits.six i{width:40px;height:50px;font-size:24px;border-radius:10px}
@keyframes dm-pop{0%{transform:scale(.8)}60%{transform:scale(1.08)}100%{transform:none}}
.dm-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dm-keys b{position:relative;overflow:hidden;height:46px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;font:700 19px var(--font-numeric);color:var(--text-2);transition:transform 120ms var(--ease),background-color 120ms var(--ease)}
.dm-keys b.fn{font:600 14px var(--font-body)}
.dm-keys b.ok{background:var(--action-bg);color:var(--action-text);font:700 16px var(--font-body)}
.dm-keys b.ok span{position:relative;z-index:1}
/* 확인을 누르면 버튼 안에서 진행 막대가 차오른다 */
.dm-keys b.ok.busy::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.34);animation:dm-okfill var(--busy,900ms) linear forwards}
@keyframes dm-okfill{to{width:100%}}
.dm-keys b.press{transform:scale(.9);background:var(--primary-200);color:var(--text)}
.dm-keys b.ok.press{background:var(--action-active-bg);color:var(--action-text)}
.dm-res{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:20px;color:var(--neutral-0);background:var(--present-solid);opacity:0;transform:scale(1.04);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);pointer-events:none;border-radius:inherit;z-index:2}
.dm-res.on{opacity:1;transform:none}
.dm-res.late{background:var(--late-solid)}
.dm-res.out{background:var(--info-solid)}
.dm-res.err{background:var(--absent-solid)}
.dm-res.warn{background:var(--neutral-700)}
.dm-res .ic svg{width:56px;height:56px;color:var(--neutral-0)}
.dm-res .ic .tint{fill:rgba(255,255,255,.25)}
.dm-res b{font:800 24px/1.3 var(--font-body);letter-spacing:-0.02em;word-break:keep-all}
.dm-res small{font-size:15px;font-weight:600;opacity:.95}
.dm-res mark{background:rgba(255,255,255,.3);color:inherit;border-radius:5px;padding:0 3px}

/* ── 학부모 휴대폰(잠금 화면 알림) */
.dm-phone{width:210px;box-sizing:border-box;border-radius:34px;border:8px solid var(--neutral-900);background:linear-gradient(180deg,var(--primary-50),var(--secondary-50));padding:12px 10px 16px;display:grid;gap:8px;align-content:start;min-height:380px;box-shadow:var(--shadow-overlay);overflow:hidden}
.dm-status{display:flex;justify-content:space-between;font:700 11px var(--font-numeric);color:var(--text-2);padding:0 8px}
.dm-lock{text-align:center;color:var(--text);margin:10px 0 8px}
.dm-lock b{display:block;font:800 44px/1 var(--font-numeric);letter-spacing:-0.02em}
.dm-lock span{font-size:12px;color:var(--text-2)}
.dm-notis{display:grid;gap:8px}
.dm-noti{background:var(--surface);border-radius:16px;padding:10px 12px;display:grid;gap:4px;box-shadow:var(--shadow-soft);animation:dm-drop 420ms var(--ease) both}
.dm-noti .h{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);font-weight:700}
.dm-noti .h img{width:18px;height:18px;border-radius:5px}
.dm-noti .h em{margin-left:auto;font-style:normal;font-weight:500}
.dm-noti p{margin:0;font-size:14px;line-height:1.5;color:var(--text);word-break:keep-all}
@keyframes dm-drop{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
.dm-phone.ring{animation:dm-ring 500ms var(--ease)}
@keyframes dm-ring{20%,60%{transform:rotate(-3deg)}40%,80%{transform:rotate(3deg)}}

/* ── 원장님 관리자 화면 */
.dm-adm{display:grid;grid-template-columns:52px minmax(0,1fr);width:min(100%,420px);background:var(--surface);border-radius:18px;box-shadow:var(--shadow-frame);overflow:hidden;min-height:340px;box-sizing:border-box}
.dm-adm-side{border-right:1px solid var(--surface-2);display:grid;align-content:start;justify-items:center;gap:12px;padding:14px 0}
.dm-adm-side img{width:30px;height:auto;margin-bottom:4px}
.dm-adm-side i{width:26px;height:26px;border-radius:8px;background:var(--surface-2)}
.dm-adm-side i.on{background:var(--primary-100)}
.dm-adm-main{padding:14px;display:grid;gap:12px;align-content:start;min-width:0}
.dm-adm-h{display:flex;align-items:baseline;gap:8px}
.dm-adm-h b{font-size:17px;font-weight:800;letter-spacing:-0.02em}
.dm-adm-h span{font-size:12px;color:var(--text-3)}
.dm-kpis{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.dm-kpi{border:1px solid var(--border);border-radius:12px;padding:9px 10px;display:grid;gap:2px;min-width:0}
.dm-kpi>span{font-size:12px;color:var(--text-2);font-weight:600}
.dm-kpi>b{font:700 18px/1.2 var(--font-body);white-space:nowrap}
.dm-kpi.hero>b{font:400 24px/1.15 var(--font-display);color:var(--color-primary)}
.dm-kpi small{font:600 12px var(--font-body);color:var(--text-3);margin-left:2px}
.dm-kpi .progress{height:5px;margin-top:4px}
.dm-kpi .progress i{transition:width 900ms var(--ease);animation:none}
.dm-rows{display:grid}
.dm-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:8px;height:42px;padding:0 6px;border-top:1px solid var(--surface-2);font-size:14px;border-radius:8px;transition:background-color 600ms var(--ease)}
.dm-row .avatar{width:28px;height:28px;font-size:11px}
.dm-row b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-row .t{font:700 14px var(--font-numeric);color:var(--text-3)}
.dm .badge{height:24px;line-height:24px;font-size:12px;padding:0 8px 0 6px}
.dm .badge .ico{width:14px;height:14px}
.dm-row.hit{background:var(--present-bg);animation:dm-pop var(--dur-base) var(--ease)}

/* ── 머리말: 첫 화면 사진 위(맨 위)에서는 투명 · 흰 글자, 내리거나 메뉴를 열면 흰색(landing.js 가 .clear 를 켜고 끈다) */
.pub-over .pub-head{position:fixed;left:0;right:0;top:0;transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
.pub-head .logo .on-dark{display:none}
.pub-over .pub-head.clear{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.pub-over .pub-head.clear .logo .on-light{display:none}
.pub-over .pub-head.clear .logo .on-dark{display:block}
.pub-over .pub-head.clear .pub-nav a,.pub-over .pub-head.clear .login-link{color:#fff}
.pub-over .pub-head.clear .pub-nav a:hover,.pub-over .pub-head.clear .login-link:hover{background:rgba(255,255,255,.14);color:#fff}
.pub-over .pub-head.clear .pub-menu-btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.pub-over [id]{scroll-margin-top:88px}

/* ── 첫 화면(히어로 시안 11): 화면 끝까지 꽉 찬 사진 위로 여러 학원의 등원 · 하원 · 지각 · 결석 문자가 흐른다 */
.hero3{padding:0;background:var(--surface)}
.h3-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:640px;min-height:max(640px,100vh);min-height:max(640px,100svh);border-radius:0;background:#3a3036}
.h3-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.h3-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:66% 42%;transform-origin:72% 40%;animation:h3-kb 18s ease-in-out infinite alternate}
@keyframes h3-kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.h3-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(72% 62% at 50% 36%,rgba(24,12,34,.62),rgba(24,12,34,.28) 74%),linear-gradient(180deg,rgba(24,12,34,.4) 0%,rgba(24,12,34,0) 20%,rgba(24,12,34,0) 46%,rgba(24,12,34,.42) 100%)}
.h3-head{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(80px + clamp(16px,3vh,40px)) var(--pub-full-gut) clamp(8px,2vh,24px)}
.h3-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,.14);color:#fff;font:700 15px/1 var(--font-body);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.h3-pill i{width:7px;height:7px;border-radius:50%;background:#7CF0A6;box-shadow:0 0 0 4px rgba(124,240,166,.22)}
.hero3 h1{margin:0;font:400 clamp(40px,4.9vw,72px)/1.12 var(--font-display);letter-spacing:0;color:#fff;text-shadow:0 2px 30px rgba(10,4,20,.25)}
.hero3 .lead{margin:16px auto 24px;max-width:none;font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:rgba(255,255,255,.88)}
.hero3 .ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hero3 .btn-lg{--h:56px;padding:0 28px;font-size:17px;border-radius:14px}
.hero3 .btn-glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hero3 .btn-glass:hover{background:rgba(255,255,255,.24)}
.h3-rows{flex:none;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:26px 0 clamp(22px,4vh,56px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.h3-row{display:flex;width:max-content}
.h3-trk{display:flex;gap:12px;padding-right:12px;animation:h3-m var(--d,78s) linear infinite}
.h3-row.rev .h3-trk{animation-direction:reverse}
.h3-rows:hover .h3-trk{animation-play-state:paused}
@keyframes h3-m{to{transform:translateX(-100%)}}
.h3-mc{flex:none;width:372px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:13px 18px 14px 14px;border-radius:20px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(255,255,255,.55),0 16px 34px -18px rgba(10,4,20,.6);text-align:left}
.h3-mc .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px}
.h3-mc .ico svg{width:24px;height:24px}
.h3-mc.in .ico{background:var(--present-bg);color:var(--present-solid)}
.h3-mc.out .ico{background:var(--out-bg);color:var(--out-solid)}
.h3-mc.late .ico{background:var(--late-bg);color:var(--late-solid)}
.h3-mc.abs .ico{background:var(--absent-bg);color:var(--absent-solid)}
.h3-mc .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.h3-mc .hd b{font:700 15px/1.3 var(--font-body);color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h3-mc .hd time{flex:none;font:500 13px/1 var(--font-body);color:var(--text-3);font-variant-numeric:tabular-nums}
.h3-mc p{margin:4px 0 0;font:500 14px/1.45 var(--font-body);color:var(--text-2)}
/* 높이가 낮은 노트북: 띠는 두 줄, 더 낮으면 제목도 조금 작게 */
@media (min-width:1024px) and (max-height:840px){.h3-row:nth-child(3){display:none}.h3-rows{padding:18px 0 14px}}
@media (min-width:1024px) and (max-height:740px){.hero3 h1{font-size:clamp(36px,4.2vw,58px)}.h3-head{padding-top:92px}.hero3 .lead{margin:12px auto 18px}}
@media (max-width:1023px){
  .h3-rows{padding:32px 0 36px}
  .h3-bg img{object-position:72% 40%}
}
@media (max-width:860px){.h3-head{padding-top:calc(64px + 28px)}}
@media (max-width:640px){
  .h3-mc{width:300px}
  .hero3 .btn-lg{--h:52px;padding:0 22px;font-size:16px}
  .hero3 .lead{font-size:clamp(13px,3.9vw,16px)}
}

/* ── 사용 방법: 지금 일하는 기기만 크게 앞으로 */
.dm-how{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,.75fr) 36px minmax(0,1.2fr);align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-6);background:var(--surface);border-radius:28px;margin-bottom:var(--space-5);min-height:520px}
.dm-dev{display:grid;justify-items:center;gap:var(--space-3);opacity:.42;transform:scale(.88);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.dm-dev.on{opacity:1;transform:scale(1.03)}
.dm-lab{font-size:16px;font-weight:800;color:var(--text-3)}
.dm-dev.on .dm-lab{color:var(--brand-soft-text)}
.dm-arrow{height:3px;border-radius:3px;background:var(--surface-3);position:relative;overflow:hidden}
.dm-arrow.go::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:var(--action-bg);animation:dm-run 900ms var(--ease) forwards}
@keyframes dm-run{to{left:100%}}
.pub-steps li[data-step]{overflow:hidden;transition:box-shadow var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);opacity:.7}
.pub-steps li[data-step].on{opacity:1;box-shadow:inset 0 0 0 2px var(--primary-200)}
.pub-steps li[data-step]:hover{opacity:1}
@media (max-width:1100px){
  .dm-how{grid-template-columns:minmax(0,1fr);min-height:560px;padding:var(--space-6) var(--space-4)}
  .dm-arrow{display:none}
  .dm-dev{transform:none}
  .dm-dev:not(.on){display:none}
}

/* ── 섹션 카드 위 장면(크게) */
.dm-mini{position:relative;height:240px;border-radius:16px;background:var(--surface);overflow:hidden;margin-bottom:var(--space-3)}
.pub-sec.alt .dm-mini{background:var(--surface-2)}
.dm-thread{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden}
@keyframes dm-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kk-input .caret{width:2px;height:18px;background:#191919;animation:dm-blink 900ms steps(2) infinite}
@keyframes dm-blink{50%{opacity:0}}

/* ── 공감: 큰 줄 3개(글 | 장면) · 줄마다 따로 재생 · "지금 → 체크넥트" */
.pain-rows{display:grid;gap:var(--space-10)}
.pain-row{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-8);align-items:center;padding:var(--space-6);border-radius:30px;background:var(--surface-2)}
.pain-row.rev{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}   /* 장면이 왼쪽이어도 장면 칸이 넓게 */
.pain-row.rev .pain-tx{order:2}
.pain-no{font:800 16px var(--font-numeric);color:var(--brand-soft-text)}
.pain-tx h3{margin:8px 0 12px;font:800 clamp(24px,2.5vw,34px)/1.3 var(--font-body);letter-spacing:-0.025em;color:var(--text)}
.pain-tx p{margin:0 0 var(--space-5);font-size:17px;line-height:1.7;color:var(--text-2)}
.pain-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pain-steps li{overflow:hidden;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:16px;background:var(--surface);font-size:16.5px;font-weight:700;color:var(--text-3);transition:color var(--dur-fast) var(--ease)}
.pain-steps li b{flex:none;padding:4px 11px;border-radius:var(--radius-pill);font-size:13.5px;background:var(--surface-2);color:var(--text-3)}
.pain-steps li.on{color:var(--text)}
.pain-steps li[data-step="0"].on b{background:var(--neutral-700);color:var(--neutral-0)}
.pain-steps li[data-step="1"].on b{background:var(--primary-50);color:var(--brand-soft-text)}
.pain-row .dm-zhint{top:auto;bottom:20px;right:auto;left:var(--space-6)}
.pain-row.rev .dm-zhint{left:auto;right:var(--space-6)}
.pain-stage{position:relative;height:440px;border-radius:24px;background:var(--surface);overflow:hidden}
/* PC: 글 칸 쪽 안쪽 여백 50px(장면 쪽은 24px) · 안내 칩도 같은 선 · 문자 장면은 위 칩과 휴대폰이 겹치지 않게 */
@media (min-width:1024px){
  .pain-row{padding-left:50px}
  .pain-row.rev{padding-left:var(--space-6);padding-right:50px}
  .pain-row .dm-zhint{left:50px}
  .pain-row.rev .dm-zhint{left:auto;right:50px}
  .pain-stage{height:480px}
  .pain-stage[data-demo="sms"] .ps-phone{margin-top:-171px}
}
@media (max-width:1023px){.pain-row,.pain-row.rev{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}.pain-row.rev .pain-tx{order:0}}
@media (max-width:640px){.pain-row{padding:var(--space-4)}.pain-stage{height:420px}}

/* 휴대폰 두 대: 원장님 폰(가운데) → 체크넥트가 되면 왼쪽으로 물러나고 어머님 폰이 오른쪽에 */
.ps-phone{position:absolute;left:50%;top:50%;width:270px;height:390px;margin:-195px 0 0 -135px;box-sizing:border-box;border-radius:38px;border:9px solid var(--neutral-900);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-frame);transition:transform 600ms var(--ease),opacity 600ms var(--ease)}
.mom-phone{opacity:0;transform:translateX(80px) scale(.96);background:linear-gradient(180deg,var(--primary-50),var(--secondary-50));display:grid;align-content:start;gap:12px;padding:14px 12px;z-index:2}
.pain-stage.after .own-phone{transform:translateX(-150px) scale(.92);opacity:.4}
.pain-stage.after .mom-phone{opacity:1;transform:translateX(150px)}
.ps-lock{display:grid;justify-items:center;gap:2px;margin-top:6px}
.ps-lab{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--surface);font-size:12px;font-weight:800;color:var(--brand-soft-text);margin-bottom:6px}
.ps-lab .ico{width:14px;height:14px}
.ps-lock b{font:800 50px/1 var(--font-numeric);letter-spacing:-0.02em;color:var(--text)}
.ps-lock small{font-size:12.5px;color:var(--text-2)}
.mom-phone .dm-noti{animation:none;padding:12px 13px}
.mom-phone .dm-noti p{font-size:14.5px}
.ps-tag{justify-self:center;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-pill);background:var(--present-bg);color:var(--present-fg);font-size:13px;font-weight:800;text-align:center}
.ps-tag .ico{width:16px;height:16px;flex:none}
.ps-count{position:absolute;left:18px;top:16px;z-index:3;padding:7px 14px;border-radius:var(--radius-pill);background:var(--surface-2);font-size:14px;font-weight:700;color:var(--text-2);transition:opacity var(--dur-base) var(--ease)}
.ps-count b{font:800 17px var(--font-numeric);color:var(--absent-fg)}
.pain-stage.after .ps-count{opacity:.35}

/* 카톡 대화방(다른 앱을 그린 것이라 그 앱의 색을 쓴다: 하늘색 배경 · 노란 말풍선) */
.kk{display:grid;grid-template-rows:auto 1fr auto;background:#B2C7D9}
.kk-top{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;font-size:15px;color:#191919}
.kk-top span{font-size:20px;color:#333;line-height:1}
.kk-top b{font-weight:800}
.kk-thread{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:8px 10px;overflow:hidden}
.kk-in{align-self:flex-start;display:grid;grid-template-columns:30px auto;gap:2px 7px;max-width:88%;animation:dm-up var(--dur-base) var(--ease) both}
.kk-in i{grid-row:span 2;width:30px;height:30px;border-radius:11px;background:#9BB1C6;font:800 12px var(--font-body);font-style:normal;color:#fff;display:grid;place-items:center}
.kk-in small{font-size:11px;color:#3C4A57}
.kk-in span{justify-self:start;padding:8px 11px;border-radius:4px 14px 14px 14px;background:#fff;font-size:14px;line-height:1.45;color:#191919}
.kk-me{align-self:flex-end;display:flex;align-items:flex-end;gap:5px;max-width:92%;animation:dm-up var(--dur-base) var(--ease) both}
.kk-me .m{display:grid;justify-items:end;font-size:10.5px;color:#3C4A57;white-space:nowrap}
.kk-me .m u{text-decoration:none;color:#E6B800;font-weight:800}
.kk-me .b{padding:8px 11px;border-radius:14px 4px 14px 14px;background:#FEE500;font-size:14px;line-height:1.45;color:#191919}
.kk-input{display:flex;align-items:center;gap:6px;min-height:46px;padding:0 6px 0 12px;background:#fff;font-size:14px;color:#191919}
.kk-input .tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.kk-input .send{padding:7px 12px;border-radius:10px;background:#F2F2F2;font-size:13px;color:#999;transition:background-color 120ms var(--ease),transform 120ms var(--ease)}
.kk-input .send.on{background:#FEE500;color:#191919}
.kk-input .send.press{transform:scale(.9)}

/* 전화(통화 화면도 다른 앱을 그린 것: 어두운 바탕 · 빨간 끊기) */
.ps-list{display:grid;align-content:start;gap:2px;padding:14px 12px;height:100%;box-sizing:border-box}
.ps-lh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.ps-lh b{font-size:17px;font-weight:800}
.ps-lh span{font:800 16px var(--font-numeric);color:var(--text-2)}
.ps-list .dm-row{height:46px;font-size:14.5px;grid-template-columns:28px minmax(0,1fr) auto}
.ps-list .dm-row .t{display:none}
.ps-note{margin-top:8px;font-size:12.5px;color:var(--text-3);text-align:center}
.call{position:absolute;inset:0;display:grid;justify-items:center;align-content:start;gap:8px;padding:40px 16px 0;background:linear-gradient(180deg,#2B3440,#151A20);color:#fff;opacity:0;transform:translateY(24px);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.call.on{opacity:1;transform:none}
.c-av{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font:800 28px var(--font-body)}
.call b{font-size:21px;font-weight:800;margin-top:6px}
.c-state{font-size:15px;color:rgba(255,255,255,.75)}
.call.fail .c-state{color:#FF8A8A;font-weight:800}
.call.ended .c-state{color:rgba(255,255,255,.55)}
.c-btns{display:flex;gap:12px;margin-top:16px}
.c-btns i{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font:600 10.5px var(--font-body);font-style:normal;color:rgba(255,255,255,.85)}
.c-end{position:absolute;left:50%;bottom:18px;width:64px;height:64px;margin-left:-32px;border-radius:50%;background:#E5484D;transition:transform 120ms var(--ease)}
.c-end::before{content:"";position:absolute;left:16px;top:27px;width:32px;height:10px;border-radius:6px;background:#fff}
.c-end.press{transform:scale(.88)}

/* 책상 위 흩어진 기록 → 실제 체크넥트 학생 상세 화면 */
.desk{background:#F3EFE7}
.desk .pc{position:absolute;box-shadow:0 10px 24px rgba(26,28,31,.12);transition:transform 650ms var(--ease),opacity 500ms var(--ease),left 650ms var(--ease),top 650ms var(--ease)}
.paper{left:6%;top:9%;width:300px;padding:16px 18px;background:#FFFEF8;border-radius:6px;transform:rotate(-4deg)}
.paper b{display:block;margin-bottom:10px;font-size:17px;font-weight:800;color:#2A3A68}
.paper .g{display:grid;grid-template-columns:1.6fr repeat(3,1fr);border-top:1.5px solid #9DB0D8;border-left:1.5px solid #9DB0D8}
.paper .g i{font-style:normal;padding:7px 6px;border-right:1.5px solid #9DB0D8;border-bottom:1.5px solid #9DB0D8;font-size:15px;color:#2A3A68;text-align:center}
.paper .g i:nth-child(4n+1){text-align:left;font-weight:700}
.paper .g i.x{color:#C2353B;font-weight:800}
.sticky{right:7%;top:12%;width:170px;padding:18px 16px;background:#FFF1A6;font-size:17px;font-weight:800;line-height:1.5;color:#4A3F12;transform:rotate(6deg)}
.kkmsg{right:9%;bottom:12%;display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:#B2C7D9;transform:rotate(-3deg)}
.kkmsg span{font-size:11.5px;color:#3C4A57;font-weight:600}
.kkmsg b{padding:8px 12px;border-radius:4px 14px 14px 14px;background:#fff;font-size:15px;color:#191919}
.desk.shake .pc{animation:dm-wob 600ms var(--ease)}
@keyframes dm-wob{25%{translate:-4px 0}75%{translate:4px 0}}
.desk.merge .pc{left:40%;top:38%;right:auto;bottom:auto;transform:rotate(0) scale(.5);opacity:0}
.ps-win{position:absolute;inset:22px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-frame);overflow:hidden;opacity:0;transform:scale(.94);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.desk.card .ps-win{opacity:1;transform:none}
.ps-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-bottom:1px solid var(--surface-2);font-size:12px;color:var(--text-3);font-weight:600}
.ps-bar i{width:10px;height:10px;border-radius:50%;background:var(--surface-3)}
.ps-bar span{margin-left:8px}
.ps-body{display:grid;gap:12px;padding:16px 20px}
.ps-body .dhead{gap:12px}
.ps-body .avatar.xl{width:48px;height:48px}
.ps-body .dname{font-size:21px}
.ps-body .dsub{font-size:13px}
.ps-body .mstat b{font-size:20px}
.ps-body .lrow{min-height:46px}
.ps-body .lrow .tx b{font-size:14.5px}
.ps-body .lrow .tx span{font-size:12.5px}
@media (max-width:640px){
  .ps-phone{width:230px;height:370px;margin:-205px 0 0 -115px}
  .pain-stage{height:470px}
  .ps-count{top:auto;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px}
  .call{padding-top:26px;gap:6px}.c-av{width:60px;height:60px;font-size:24px}.call b{font-size:19px}.c-btns i{width:50px;height:50px}
  .pain-stage.after .own-phone{transform:translateX(-58px) scale(.86)}
  .pain-stage.after .mom-phone{transform:translateX(52px)}
  .paper{width:230px;left:4%}.paper .g i{font-size:13px;padding:5px 4px}
  .sticky{width:130px;font-size:14px;right:3%;top:52%}
  .kkmsg{right:auto;left:6%;bottom:6%}
  .ps-win{inset:10px}.ps-body{padding:12px}
  .ps-body .lrow .tx span{display:none}
}

/* 기능: 판정 규칙 · 문구 · 달력 */
.dm-mini.tall{height:280px}
.dm-kio{display:grid;place-items:center;padding:14px;box-sizing:border-box}
.dm-kio .dm-tab{width:100%;height:100%;box-shadow:none;border:1px solid var(--border);align-content:center;gap:18px}
.dm-kio .dm-top{font-size:15px}
.dm-kio .dm-res{gap:8px;padding:14px}
.dm-kio .dm-res .ic svg{width:44px;height:44px}
.dm-kio .dm-res b{font-size:21px}
.dm-kio .dm-res small{font-size:14px}
.dm-tpl{display:grid;align-content:center;gap:14px;padding:16px;box-sizing:border-box}
.dm-tplbox{padding:14px 16px;border-radius:12px;border:1px dashed var(--border-strong);background:var(--surface);font-size:16px;line-height:1.8;color:var(--text);word-break:keep-all}
.dm-tplbox .tk{display:inline-block;padding:0 6px;border-radius:6px;background:var(--surface-2);color:var(--brand-soft-text);font-weight:800;line-height:1.6;transition:background-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.dm-tplbox .tk.done{background:var(--primary-100);color:var(--text);animation:dm-pop var(--dur-base) var(--ease)}
.dm-tpl .dm-noti{opacity:0;animation:none;transform:translateY(8px);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);box-shadow:var(--shadow-soft)}
.dm-tpl .dm-noti.on{opacity:1;transform:none}
.dm-cal{display:grid;align-content:center;gap:10px;padding:16px;box-sizing:border-box}
.dm-calh{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--text-2);font-weight:800}
.dm-calh b{font:800 28px var(--font-numeric);color:var(--color-primary)}
.dm-calg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dm-calg span{position:relative;height:30px;border-radius:7px;background:var(--surface);font:700 11px var(--font-numeric);color:var(--text-3);padding:3px 4px;box-sizing:border-box;overflow:hidden}
.dm-calg span.off{background:transparent}
.dm-calg span i{position:absolute;left:4px;right:4px;bottom:4px;height:4px;border-radius:2px;background:var(--present-solid);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease)}
.dm-calg span.f i{transform:scaleX(var(--r,1))}
.dm-calg span.low i{background:var(--late-solid)}
.dm-calg span.pick{outline:2px solid var(--focus);outline-offset:-1px}
.dm-tip{position:absolute;left:50%;bottom:12px;transform:translate(-50%,6px);padding:7px 14px;border-radius:10px;background:var(--neutral-900);color:var(--neutral-0);font-size:13.5px;font-weight:700;white-space:nowrap;opacity:0;transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.dm-tip.on{opacity:1;transform:translate(-50%,0)}

/* ── 학부모가 받는 화면: 대화 */
.dm-chat{width:min(100%,350px);margin-inline:auto;box-sizing:border-box;border-radius:40px;border:11px solid var(--neutral-900);background:var(--surface);padding:14px 14px 18px;display:grid;grid-template-rows:auto auto 1fr;gap:10px;height:520px;overflow:hidden}
.dm-chat .dm-status{color:var(--text-2);font-size:12px}
.dm-chat-h{display:flex;align-items:center;gap:10px;padding:4px 4px 10px;border-bottom:1px solid var(--surface-2);font-size:16px;font-weight:800}
.dm-chat-h img{width:30px;height:30px;border-radius:9px}
.dm-chat .dm-thread{gap:10px}
.dm-msg{align-self:flex-start;max-width:90%;padding:12px 15px;border-radius:20px 20px 20px 5px;background:var(--surface-2);font-size:15.5px;line-height:1.55;color:var(--text);animation:dm-up var(--dur-base) var(--ease) both;word-break:keep-all}
.dm-msg b{display:block;margin-bottom:3px;font-size:12.5px;color:var(--text-3)}
.dm-msg em{display:block;margin-top:4px;font:600 12px var(--font-numeric);font-style:normal;color:var(--text-3)}
.dm-msg.abs{background:var(--absent-bg)}
.dm-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:13px 15px;border-radius:18px;background:var(--surface-2)}
.dm-typing i{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:dm-dot 900ms infinite}
.dm-typing i:nth-child(2){animation-delay:150ms}.dm-typing i:nth-child(3){animation-delay:300ms}
@keyframes dm-dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.dm-day{align-self:center;padding:4px 12px;border-radius:var(--radius-pill);background:var(--surface-2);font-size:12.5px;color:var(--text-3);font-weight:700}
.pub-list li[data-step]{padding:12px 14px;margin:0 -14px;border-radius:14px;overflow:hidden;transition:background-color var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);opacity:.62}
.pub-list li[data-step].on{background:var(--surface);opacity:1}
.pub-sec:not(.alt) .pub-list li[data-step].on{background:var(--surface-2)}
.pub-list li[data-step]:hover{opacity:1}

/* ── 준비물: 기기 연결 */
.dm-ready{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-5);align-items:center}
.dm-set{background:var(--surface);border-radius:20px;box-shadow:var(--shadow-frame);padding:20px;display:grid;gap:12px;align-content:start}
.dm-set>b{font-size:17px;font-weight:800}
.dm-set>span{font-size:14px;color:var(--text-3)}
.dm-btn{justify-self:start;padding:10px 16px;border-radius:12px;background:var(--primary-50);color:var(--brand-soft-text);font-size:15px;font-weight:800;transition:transform 120ms var(--ease)}
.dm-btn.press{transform:scale(.92);background:var(--primary-100)}
.dm-code{display:grid;gap:4px;padding:14px 16px;border-radius:12px;background:var(--success-bg);opacity:0;transform:translateY(6px);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.dm-code.on{opacity:1;transform:none}
.dm-code b{font:800 34px var(--font-numeric);letter-spacing:.12em;color:var(--text)}
.dm-code small{font-size:13px;color:var(--success-fg);font-weight:700}
.dm-url{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;background:var(--surface-2);font:700 13px var(--font-numeric);color:var(--text-2)}
.dm-url::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--present-solid)}
.dm-pair{display:grid;gap:14px;justify-items:center;text-align:center;padding:10px 0}
.dm-pair b{font-size:17px;font-weight:800}
.dm-pair .go{padding:10px 22px;border-radius:12px;background:var(--action-bg);color:var(--action-text);font-size:15px;font-weight:800;transition:transform 120ms var(--ease)}
.dm-pair .go.press{transform:scale(.92)}
.dm-ready .dm-tab{min-height:400px;align-content:start}
/* 남는 아이폰 — 브라우저로 연 키패드 웹 화면(다이내믹 아일랜드 · 상태 표시줄 · 아래 주소창) */
.iph{position:relative;justify-self:center;width:300px;height:620px;box-sizing:border-box;border-radius:52px;border:11px solid var(--neutral-900);background:var(--surface);box-shadow:var(--shadow-frame);display:flex;flex-direction:column;overflow:hidden}
.iph-island{position:absolute;left:50%;top:10px;width:96px;height:28px;margin-left:-48px;border-radius:16px;background:var(--neutral-900);z-index:6}
.iph-status{flex:none;display:flex;justify-content:space-between;align-items:center;height:48px;padding:4px 22px 0 30px;font:700 15px var(--font-numeric);color:var(--text)}
.iph-ind{display:flex;align-items:center;gap:6px}
.iph-ind .sig{display:flex;align-items:flex-end;gap:2px;height:11px}
.iph-ind .sig i{width:3px;border-radius:1px;background:var(--text)}
.iph-ind .sig i:nth-child(1){height:4px}.iph-ind .sig i:nth-child(2){height:6px}.iph-ind .sig i:nth-child(3){height:8px}.iph-ind .sig i:nth-child(4){height:11px}
.iph-ind .bat{position:relative;width:24px;height:12px;border-radius:4px;border:1.5px solid var(--text-3);box-sizing:border-box}
.iph-ind .bat::after{content:"";position:absolute;inset:1.5px 6px 1.5px 1.5px;border-radius:2px;background:var(--text)}
.dm-ready .iph .dm-tab{flex:1;min-height:0;width:100%;border-radius:0;box-shadow:none;padding:12px 16px 10px;gap:12px;align-content:start}
.iph .dm-pair{gap:12px;padding-top:28px}
.iph .dm-pair img{height:30px;width:auto;margin-bottom:6px}
.iph .dm-pair b{font-size:18px}
.iph .dm-pair .sub{font-size:13px;color:var(--text-3)}
.iph .dm-digits.six{gap:6px}
.iph .dm-digits.six i{width:34px;height:46px;font-size:22px}
.iph .dm-pair .go{width:100%;box-sizing:border-box;margin-top:8px;padding:14px 0;font-size:16px}
.iph .dm-top{font-size:14px}
.iph .dm-pad .dm-digits i{width:50px;height:60px;font-size:28px}
.iph .dm-keys{gap:8px}
.iph .dm-keys b{height:56px;font-size:22px}
.iph .dm-pad{gap:14px}
.iph-hint{text-align:center;font-size:13px;color:var(--text-3);font-weight:600}
.iph .dm-res b{font-size:22px}
.iph-safari{flex:none;display:flex;align-items:center;gap:8px;margin:6px 12px 2px;height:44px;padding:0 14px;border-radius:14px;background:var(--surface-2);font:600 14px var(--font-body);color:var(--text)}
.iph-safari .aa{font-size:12px;font-weight:700;color:var(--text-2)}
.iph-safari .url{flex:1;display:flex;align-items:center;justify-content:center;gap:5px}
.iph-safari .url i{width:8px;height:10px;border-radius:2px;background:var(--text-3)}
.iph-safari .rl{font-size:16px;color:var(--text-2)}
.iph-home{flex:none;align-self:center;width:118px;height:5px;margin:8px 0 9px;border-radius:3px;background:var(--neutral-900)}
.dm-ready .dm-pad{display:none;gap:12px}
.dm-ready .dm-tab.paired .dm-pair{display:none}
.dm-ready .dm-tab.paired .dm-pad{display:grid;animation:dm-up var(--dur-base) var(--ease)}
@media (max-width:760px){.dm-ready{grid-template-columns:minmax(0,1fr)}.dm-ready .dm-tab{justify-self:center}}

/* ── 기능 4: 학원비 청구 · 입금 확인 — 세 카드 아래 넓은 카드(왼쪽 설명 · 오른쪽 장면: 학부모 청구서 + 원장님 청구 목록) */
.pub-card.pub-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-8);align-items:center}
.pub-wide .pw-tx{display:grid;gap:var(--space-2);align-content:start}
.pub-wide .pw-tx .tile{margin-bottom:var(--space-2)}
.pub-wide .pw-dm{min-width:0}
.dm-bill{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px;align-items:center;padding:18px;box-sizing:border-box}
.db-pay{display:grid;gap:4px;padding:16px;border-radius:14px;background:var(--surface-2);transition:box-shadow var(--dur-base) var(--ease)}
.db-pay.seen{box-shadow:0 0 0 2px var(--primary-200)}
.db-band{justify-self:start;padding:4px 9px;border-radius:7px;background:var(--info-bg);color:var(--info-fg);font-size:12px;font-weight:800;transition:background-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.db-band.paid{background:var(--present-bg);color:var(--present-fg)}
.db-pay>small{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.db-amt{font:800 26px/1.15 var(--font-numeric);letter-spacing:-0.02em;color:var(--text)}
.db-amt small{margin-left:2px;font-size:15px}
.db-due{font-size:12.5px;font-weight:700;color:var(--brand-soft-text)}
.db-due.paid{color:var(--present-fg)}
.db-bank{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--surface);font-size:11.5px;color:var(--text-2);white-space:nowrap}
.db-bank em{font-style:normal;font-weight:800;color:var(--brand-soft-text)}
.db-adm{border-radius:14px;box-shadow:inset 0 0 0 1px var(--border);overflow:hidden;background:var(--surface)}
.db-h{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--surface-2);font-size:12.5px;white-space:nowrap}
.db-h b{font-weight:800;color:var(--text)}
.db-h span{font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}
.db-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--border);font-size:13px;white-space:nowrap}
.db-row .n{font-weight:800;color:var(--text)}
.db-row .a{color:var(--text-2);font-variant-numeric:tabular-nums}
.db-row .tags{display:flex;gap:4px;justify-content:flex-end;align-items:center}
.db-chip{padding:3px 7px;border-radius:6px;font-size:11.5px;font-weight:800;font-style:normal}
.db-chip.wait{background:var(--info-bg);color:var(--info-fg)}
.db-chip.paid{background:var(--present-bg);color:var(--present-fg)}
.db-chip.late{background:var(--late-bg);color:var(--late-fg)}
.db-chip.view{background:var(--surface-2);color:var(--text-2)}
.db-chip.again{background:var(--primary-50);color:var(--brand-soft-text)}
.db-ok{padding:4px 9px;border-radius:7px;background:var(--action-bg);color:var(--action-text);font-size:11.5px;font-weight:800;transition:transform var(--dur-fast) var(--ease)}
.db-ok.press{transform:scale(.9)}
@media (max-width:1023px){.pub-card.pub-wide{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}.pub-wide .pw-dm{order:-1}}
@media (max-width:640px){.dm-mini.tall.dm-bill{grid-template-columns:minmax(0,1fr);height:auto;gap:10px;padding:14px}.db-bank{display:none}}

/* 동작 줄이기: 장면은 그대로 넘어가되(진행 막대도 유지) 흔들림 · 튀어 오름 · 미끄러짐만 뺀다 */
@media (prefers-reduced-motion:reduce){
  .h3-trk{animation-duration:var(--d,78s)!important}   /* 첫 화면 문자 띠는 동작 줄이기여도 흐른다(공통 1ms 규칙을 덮음) */
  .h3-bg img{animation:none}
  .dm-noti,.kk-in,.kk-me,.dm-msg,.dm-row.hit,.dm-digits i.fill,.dm-phone.ring,.desk.shake .pc,.kk-input .caret,.dm-typing i,
  .dm-tplbox .tk.done,.dm-ready .dm-tab.paired .dm-pad{animation:none}
  .dm-arrow.go::after{animation:none;left:0;width:100%}
  .dm-keys b.press,.dm-btn.press,.dm-pair .go.press,.kk-input .send.press,.c-end.press{transform:none}
}

/* ── 학원비 영역(2026-10-17, 출결 카드 대신): 넓은 '입금 확인' 카드 1장 + 같은 크기 카드 3장. 양 끝 · 왼쪽 정렬을 맞춘다 */
.fee-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(3,minmax(0,1fr))}
.fee-grid .pub-wide{grid-column:1/-1}
.fee-card{align-content:start}
.dm-mini.fee-mini{height:220px;padding:18px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}
/* 청구 문자 */
.fs-from{font-size:12px;font-weight:700;color:var(--text-3)}
.fee-sms .fs-msg{margin:0;padding:12px 14px;border-radius:4px 16px 16px 16px;background:var(--surface-2);font-size:12.5px;line-height:1.55;color:var(--text)}
.fs-msg b{font-weight:800}
.fs-link{color:var(--info-fg);font-weight:600}
/* 아직 안 낸 청구 */
.dm-mini.fee-due{padding:0;gap:0}
.fd-h{display:flex;justify-content:space-between;padding:12px 14px;background:var(--surface-2);font-size:12.5px}
.fd-h b{font-weight:800;color:var(--text)}
.fd-h span{font-weight:700;color:var(--text-3)}
.fd-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:11px 14px;border-top:1px solid var(--border);font-size:13px;white-space:nowrap}
.fd-row .n{font-weight:800;color:var(--text)}
.fd-row .a{color:var(--text-2);font-variant-numeric:tabular-nums}
.fd-note{margin:auto 12px 12px;padding:8px 10px;border-radius:10px;background:var(--primary-50);color:var(--brand-soft-text);font-size:12px;font-weight:700}
/* 달마다 결제 */
.fst-h{display:flex;justify-content:space-between;align-items:baseline}
.fst-h span{font-size:12.5px;font-weight:700;color:var(--text-3)}
.fst-h b{font:800 20px var(--font-numeric);color:var(--text);letter-spacing:-0.02em}
.fst-h b small{margin-left:1px;font-size:13px}
.fst-bars{flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;padding:6px 2px 0}
.fst-bars span{display:flex;flex-direction:column;align-items:center;gap:6px}
.fst-bars i{width:100%;max-width:26px;border-radius:6px 6px 2px 2px;background:var(--primary-100)}
.fst-bars .on i{background:var(--color-primary)}
.fst-bars em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--text-3)}
.fst-bars .on em{color:var(--brand-soft-text)}
.fst-pay{display:flex;gap:14px;font-size:12px;font-weight:700;color:var(--text-2)}
.fst-pay i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px;vertical-align:1px}
.fst-pay .a{background:var(--color-primary)}
.fst-pay .b{background:var(--primary-200)}
@media (max-width:1023px){.fee-grid{grid-template-columns:minmax(0,1fr)}}