/* 학습 진도 모듈 — 이어보기 알림(.dp-resume)과 진도 패널(#dp-panel).
   색은 전부 테마 토큰. engine/deck.css 의 .deck-pill/.deck-btn/.deck-note 를 우선 쓴다. */

.dp-resume { bottom:3vh; left:50%; transform:translateX(-50%); }

#dp-panel {
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--bg) 45%, transparent);
  padding:4vh 4vw;
}
#dp-panel.on { display:flex; }

#dp-card {
  width:min(920px, 100%); max-height:88vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-pill); padding:24px 28px;
}

#dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
#dp-head h3 { font-size:22px; }

#dp-summary { display:flex; gap:28px; flex-wrap:wrap; margin-bottom:10px; }
.dp-stat .n { font-size:28px; font-weight:800; letter-spacing:-0.02em; color:var(--fg); }
.dp-stat .l { color:var(--muted); font-size:13px; margin-top:2px; }

#dp-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));
  gap:8px; margin:18px 0;
}
.dp-cell {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; aspect-ratio:1; border-radius:8px; cursor:pointer;
  background:var(--bg); border:1px solid var(--border); color:var(--muted);
  font:inherit; padding:4px;
}
.dp-cell.seen { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.dp-cell.cur { outline:2px solid var(--accent); outline-offset:2px; }
.dp-num { font-size:14px; font-weight:700; }
.dp-dwell { font-size:10px; opacity:.85; }

#dp-footer { display:flex; align-items:center; gap:12px; margin-top:8px; }