/* deck.css — 공부만랩 교사·운영앱 공용 스타일 (C2 "관제탑" 승인안, 재민 2026-08-21).

   ⚠⚠ 왜 staff.css 를 안 쓰고 새로 만들었나 — 이름 충돌 사고 때문이다.
     staff.css 는 v1 teacher.css 30KB 를 바이트 단위로 이식한 것이라 흔한 이름이 다 들어 있다
     (.sheet .seg .chip .on .t .n .empty .grow .search .tag .prog .cnt …).
     실사고: 시험지 컨테이너에 .sheet 를 썼더니 staff.css 493행의 **바텀시트(translateY)** 규칙에
     걸려 시험지 판이 한 화면 아래로 밀렸다. 원인을 찾는 데만 여러 차례 실측이 들었다.
     → 관제탑 화면은 이 파일만 쓴다. staff.css 는 **링크하지 않는다.**
     → 새 클래스는 전부 `d-` 접두어. 상태는 `is-` 접두어.

   토큰은 C2 시안에서 그대로 왔다. 여기가 단일 출처다 — 화면에 색을 다시 적지 마라.
*/

:root{
  /* ⚠⚠ 2026-08-25 재민 지시로 팔레트를 갈았다:
       *"앱 전체 디자인을 부모님께 보내는 페이지 컨셉 참고해서 … 폰트 크기 위계도
         그대로 입혀서 전체적으로 수정해주도록해."*
     원천은 학부모 성장일지(concepts/p01-report.html)의 --g-* 토큰이다 —
     딥그린(#14554E) + 골드(#C9A227) + 크림(#F7F6F2). 학부모가 받는 화면과
     원장이 쓰는 앱이 **같은 학원의 것**으로 보여야 한다.
     ⚠ 여기가 단일 출처다. 화면에서 색을 다시 적지 마라. */
  /* 바탕·면 */
  --d-bg:#F7F6F2; --d-card:#FFFFFF; --d-soft:#EFEEE8;
  --d-line:#E5E3DC; --d-line2:#D3D0C6;
  /* 글자 */
  --d-ink:#1A1D21; --d-ink2:#4B5450; --d-ink3:#78827D;
  /* 강조 — 딥그린 하나 */
  --d-key:#14554E; --d-key-soft:#E7F0EE; --d-key-line:#BBD3CD;
  /* 보조 강조 — 골드. 상장·표창·중요 배너에만 쓴다(면 전체를 칠하지 않는다) */
  --d-gold:#C9A227; --d-gold-2:#9C7A18; --d-gold-soft:#FAF7F0; --d-gold-line:#EADFBF;
  --d-teal2:#2E7D72;
  /* 상태 3색 — 이 셋 말고 다른 의미색을 만들지 마라 */
  --d-ok:#2E7D72;   --d-ok-soft:#E7F0EE;
  --d-warn:#B4541F; --d-warn-soft:#FAF1E8;
  --d-now:#C0392B;  --d-now-soft:#FBEDEB;
  /* 인용·소견 — 원장/선생님 말씀 블록.
     ⚠ 검수3(2026-08-21)에서 p01 이 이 색들을 화면에 직접 신설한 게 잡혔다(골드 5색).
        "상태 3색 말고 다른 의미색을 만들지 마라" 는 **상태색** 규칙이고,
        인용 블록은 상태가 아니라 서식이다 — 그래서 금지가 아니라 **토큰으로 승격**한다.
        화면이 직접 색을 적는 것만 여전히 금지다. */
  --d-quote-bg:#FAF7F0; --d-quote-line:#EADFBF;
  --d-quote-key:#9C7A18; --d-quote-ink:#3B3116;

  /* 남·여 — 수업모드 카드 색을 가른다(재민 2026-08-25: "성별따라 색상을 남자 여자
     따로 색상으로 구분"). 상태색 규칙("상태 3색 말고 만들지 마라")과 충돌하지 않는다 —
     성별은 **상태가 아니라 그 아이의 속성**이라 인용 블록과 같은 이유로 토큰이 된다.
     ⚠ 남학생은 앱 메인 인디고를 그대로 쓴다 — 다수를 위해 새 색을 만들면 앱 색이 하나 더 는다.
     ⚠ 분홍은 700 단계(연분홍 아님)로 잡는다 — 유아용으로 보이면 원장이 못 쓴다.
        인디고와 같은 Untitled UI 사다리(700/50/200)라 나란히 놓아도 톤이 맞는다. */
  --d-boy:#14554E;  --d-boy-soft:#E7F0EE; --d-boy-line:#BBD3CD;
  --d-girl:#B04A6E; --d-girl-soft:#FAEFF3; --d-girl-line:#EFD3DD;

  /* 규격 락 (AGENTS §3) */
  --d-tap:44px; --d-r:12px; --d-r-s:8px;
  /* 글자 위계 — 학부모 성장일지 실측(h1 27/800 · h2 19/800 · b 16/800 ·
     본문 12.5/400 · 잔글 10.5/400). 화면이 제각기 크기를 적지 않도록 토큰으로 둔다. */
  --d-t1:27px; --d-t2:19px; --d-t3:16px; --d-t4:13.5px;
  --d-body:12.5px; --d-small:10.5px;
  --d-ease:cubic-bezier(.2,.9,.3,1);
  --d-shadow:0 1px 2px rgba(16,24,40,.05);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--d-bg);color:var(--d-ink);
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all;
}
/* ── 앱 좌우 여백 (설정에서 원장님이 정한다) ─────────────────
   원장님 2026-08-28: *"내 폰 옆이 굴곡이라 · 옆쪽에 여백을 좀 줄 수 있음"*.
   ⚠⚠ **이 규칙은 tokens.css 에도 똑같이 있다. 지우지 마라 — 일부러 둘이다.**
      이 앱은 스타일 집안이 둘이고 서로 안 섞는다(deck.css = 선생님 화면 26개,
      tokens.css+student.css = 아이 화면). 공유 파일이 없어서 한쪽에만 두면 반대편
      절반이 통째로 무효가 된다. 2026-09-01 에 실제로 tokens.css 로 «한 곳으로 모았다가»
      선생님 화면 26개에서 여백이 안 먹는 걸 실측으로 잡았다.
   ⚠ 화면에 붙어 있는 띠(position:fixed)는 여기서 안 밀린다 — js/app-pad.js 가 따로 좁힌다. */
:root{ --app-pad:0px }
html.has-app-pad body{ padding-left:var(--app-pad); padding-right:var(--app-pad); box-sizing:border-box }

.d-wrap{max-width:520px;margin:0 auto;padding:8px 16px 0}
.d-pad-tab{padding-bottom:76px}
.d-pad-foot{padding-bottom:112px}

/* ── 헤더 ─────────────────────────────────────────────── */
.d-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0 10px}
.d-hd h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.022em}
.d-hd .d-date{font-size:13px;color:var(--d-ink3);font-weight:600;margin-left:6px}
.d-ico{width:var(--d-tap);height:var(--d-tap);display:grid;place-items:center;border:0;background:none;
  color:var(--d-ink2);cursor:pointer;border-radius:10px;transition:background .16s;position:relative}
.d-ico:hover{background:var(--d-soft)}
.d-ico:active{background:#E3E6EC;transform:scale(.94)}
.d-ico .d-dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;
  background:var(--d-now);border:1.5px solid var(--d-card)}

/* ── 카드 ─────────────────────────────────────────────── */
.d-card{background:var(--d-card);border:1px solid var(--d-line);border-radius:var(--d-r);
  box-shadow:var(--d-shadow)}
.d-card + .d-card{margin-top:10px}
.d-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:13px 14px 0}
.d-card-h h2{margin:0;font-size:15px;font-weight:800;letter-spacing:-.012em}
/* 44px 규격 락(AGENTS §3) — 글자만 있는 링크도 손가락 타깃은 44px 이어야 한다(실측 20px 이었다) */
.d-card-h a{font-size:12.5px;color:var(--d-ink3);text-decoration:none;font-weight:600;
  min-height:var(--d-tap);display:inline-flex;align-items:center;padding:0 2px;margin:-12px -2px}
/* 캡션(눌리지 않는 라벨) — 링크와 자리는 같지만 44px 타깃을 만들지 않는다 */
.d-card-cap{font-size:12.5px;color:var(--d-ink3);font-weight:600}
.d-card-b{padding:10px 14px 14px}
.d-sec{margin:18px 0 8px;font-size:12.5px;font-weight:700;color:var(--d-ink3);letter-spacing:.02em}

/* ── 상태 칩 ───────────────────────────────────────────── */
.d-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.d-chips::-webkit-scrollbar{display:none}
.d-stat{flex:1 0 auto;min-height:var(--d-tap);display:flex;align-items:center;justify-content:center;gap:6px;
  padding:0 12px;border-radius:999px;border:1px solid var(--d-line2);background:var(--d-card);
  font-size:13px;font-weight:700;color:var(--d-ink2);cursor:pointer;
  transition:transform .14s var(--d-ease),border-color .14s}
.d-stat:active{transform:scale(.97)}
.d-stat b{font-size:15px;font-variant-numeric:tabular-nums}
.d-stat.is-now{border-color:var(--d-now);color:var(--d-now);background:var(--d-now-soft)}
.d-stat.is-warn{border-color:var(--d-warn);color:var(--d-warn);background:var(--d-warn-soft)}
.d-stat.is-ok{border-color:var(--d-ok);color:var(--d-ok);background:var(--d-ok-soft)}

/* ── 필터 칩 ───────────────────────────────────────────── */
.d-chip{flex:0 0 auto;height:var(--d-tap);padding:0 14px;border-radius:999px;border:1px solid var(--d-line2);
  background:var(--d-card);color:var(--d-ink2);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:all .16s var(--d-ease)}
.d-chip:active{transform:scale(.96)}
.d-chip.is-on{background:var(--d-key);border-color:var(--d-key);color:#fff}
.d-chip.is-ghost.is-on{background:var(--d-ok);border-color:var(--d-ok)}

/* ── KPI 격자 ──────────────────────────────────────────── */
.d-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.d-kpi{background:var(--d-card);border:1px solid var(--d-line);border-radius:var(--d-r);padding:12px 13px;
  box-shadow:var(--d-shadow)}
.d-kpi span{display:block;font-size:12.5px;color:var(--d-ink3);font-weight:600;margin-bottom:2px}
.d-kpi b{font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.d-kpi .d-spark{display:block;margin-top:4px}

/* ── 분포 막대 ─────────────────────────────────────────── */
.d-dist{display:grid;grid-template-columns:32px 1fr 46px;gap:8px;align-items:center;
  font-size:12.5px;color:var(--d-ink2)}
.d-dist + .d-dist{margin-top:7px}
.d-dist .d-track{height:8px;border-radius:99px;background:var(--d-soft);overflow:hidden;position:relative}
.d-dist .d-fill{display:block;height:100%;border-radius:99px;background:var(--d-ok);
  transition:width .5s var(--d-ease)}
.d-dist .d-fill.is-warn{background:var(--d-warn)}
.d-dist .d-val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--d-ink)}
.d-base{position:absolute;top:-3px;bottom:-3px;width:1px;border-left:1px dashed var(--d-line2)}

/* ── 목록 행 ───────────────────────────────────────────── */
.d-row{display:flex;align-items:center;gap:10px;min-height:56px;padding:9px 14px;cursor:pointer;
  transition:background .14s}
.d-row:hover{background:#FAFBFC}
.d-row:active{background:var(--d-soft)}
.d-row + .d-row{border-top:1px solid var(--d-line)}
.d-row .d-mark{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--d-key-soft);color:var(--d-key);font-size:12px;font-weight:800}
.d-row .d-body{flex:1;min-width:0}
.d-row .d-body b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.d-row .d-body span{display:block;font-size:12.5px;color:var(--d-ink3)}
.d-row .d-go{flex:0 0 auto;color:var(--d-ink3)}
.d-row.is-done{opacity:.55}

/* ── 버튼 ─────────────────────────────────────────────── */
.d-btn{min-height:48px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;
  transition:transform .14s var(--d-ease),background .16s,border-color .16s}
.d-btn:active{transform:scale(.98)}
.d-btn.is-key{background:var(--d-key);border:1px solid var(--d-key);color:#fff}
.d-btn.is-sec{background:var(--d-card);border:1px solid var(--d-line2);color:var(--d-ink2)}
.d-btn.is-now{background:var(--d-now);border:1px solid var(--d-now);color:#fff}
.d-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.d-btn.is-full{width:100%}

/* ── 하단 고정 액션 ─────────────────────────────────────── */
.d-foot{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);border-top:1px solid var(--d-line);z-index:20;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.d-foot .d-in{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.d-foot .d-note{text-align:center;font-size:11.5px;color:var(--d-ink3);font-variant-numeric:tabular-nums}

/* ── 탭바 ─────────────────────────────────────────────── */
.d-tabs{position:fixed;left:0;right:0;bottom:0;height:64px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-top:1px solid var(--d-line);display:flex;
  padding-bottom:env(safe-area-inset-bottom);z-index:20}
.d-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:none;color:var(--d-ink3);font-size:11px;font-weight:600;cursor:pointer;
  transition:color .16s}
.d-tab.is-on{color:var(--d-key)}
.d-tab:active{transform:scale(.94)}

/* ── 상태 화면 (빈·로딩·에러도 화면이다) ─────────────────── */
.d-state{padding:40px 18px;text-align:center;color:var(--d-ink3);font-size:13.5px;line-height:1.65}
.d-state b{display:block;color:var(--d-ink2);font-size:15.5px;margin-bottom:5px}
.d-spin{width:26px;height:26px;border:2.5px solid var(--d-key-line);border-top-color:var(--d-key);
  border-radius:50%;margin:0 auto 12px;animation:d-sp .8s linear infinite}
@keyframes d-sp{to{transform:rotate(360deg)}}
.d-prog{height:4px;background:var(--d-soft);border-radius:99px;overflow:hidden;margin:12px auto 0;max-width:220px}
.d-prog i{display:block;height:100%;background:var(--d-key);border-radius:99px;transition:width .3s var(--d-ease)}

/* ── 진입 모션 ─────────────────────────────────────────── */
.d-in-up{animation:d-up .34s var(--d-ease) both}
@keyframes d-up{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.d-in-drop{animation:d-drop .28s var(--d-ease) both}
@keyframes d-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.d-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--d-key);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* 인용 블록 다크 대응 — 밝은 크림 위 짙은 글씨는 다크에서 눈이 아프다 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --d-quote-bg:#241F12; --d-quote-line:#3E351C;
    --d-quote-key:#D6B76A; --d-quote-ink:#E8DFC6;
  }
}
:root[data-theme="dark"]{
  --d-quote-bg:#241F12; --d-quote-line:#3E351C;
  --d-quote-key:#D6B76A; --d-quote-ink:#E8DFC6;
}