/* ============================================================
   어사문 매일 학습 엔진 — 화면 (daily-course.js 짝)
   규격 v4 「햇살 든 유자」 토큰만 쓴다. HEX·새 값을 적지 않는다.
   카드 = 미색 + 1px 선 + 12 + 그림자 1 · 누를 것 = 유자 300(화면당 1개)
   끝낸 날 = 잎 틴트 · 오늘 = 유자 100 알약 · 남은 날 = 무채
   ============================================================ */

.dc-root { display: flex; flex-direction: column; gap: var(--yj-s4); color: var(--yj-ink); }
.dc-ic { width: 20px; height: 20px; flex: none; }

.dc-label {
  margin: 0;
  font-size: var(--yj-t-label);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--yj-yuja-ink);
}
.dc-sub { margin: 0; font-size: var(--yj-t-small); line-height: 1.7; color: var(--yj-sub); }

/* ── 오늘의 학습 카드 ───────────────────────────────── */
.dc-today,
.dc-board,
.dc-day__head {
  background: var(--yj-card);
  border: 1px solid var(--yj-line);
  border-radius: var(--yj-r-lg);
  box-shadow: var(--yj-sh-1);
  padding: var(--yj-s5);
}
.dc-today { display: flex; flex-direction: column; gap: var(--yj-s3); }
.dc-title {
  margin: 0;
  font-family: var(--yj-font-disp);
  font-size: var(--yj-t-h2);
  font-weight: 800;
  line-height: 1.45;
  color: var(--yj-ink-deep);
  word-break: keep-all;
}
.dc-ago { font-family: var(--yj-font-ui); font-size: var(--yj-t-small); font-weight: 500; color: var(--yj-sub); }
.dc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--yj-s2); margin-top: var(--yj-s1); }
.dc-link {
  align-self: flex-start;
  min-height: var(--yj-tap);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--yj-t-small);
  color: var(--yj-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dc-link:hover { color: var(--yj-ink-deep); }
.dc-slot:empty { display: none; }

/* ── 100칸 진도판 ──────────────────────────────────── */
.dc-board__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--yj-s3);
  margin-bottom: var(--yj-s3);
}
.dc-board__title {
  margin: 0;
  font-family: var(--yj-font-disp);
  font-size: var(--yj-t-body);
  font-weight: 800;
  color: var(--yj-ink-deep);
}
.dc-board__meta { font-size: var(--yj-t-cap); color: var(--yj-sub); font-variant-numeric: tabular-nums; }
.dc-streak { font-weight: 700; color: var(--yj-leaf-ink); }
.dc-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--yj-s1); }
.dc-cell {
  min-height: var(--yj-tap);
  padding: 0;
  border: 1px solid var(--yj-line);
  border-radius: var(--yj-r-sm);
  background: var(--yj-card);
  color: var(--yj-sub);
  font: inherit;
  font-size: var(--yj-t-cap);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--yj-m-fast) var(--yj-ease), border-color var(--yj-m-fast) var(--yj-ease),
              color var(--yj-m-fast) var(--yj-ease);
}
.dc-cell:hover { border-color: var(--yj-line-strong); background: var(--yj-yuja-50); color: var(--yj-ink-deep); }
.dc-cell:focus-visible { outline: 2px solid var(--yj-yuja-600); outline-offset: 2px; }
.dc-cell.is-review { border-style: dashed; border-color: var(--yj-line-strong); }
.dc-cell.is-done { background: var(--yj-leaf-tint); border-color: transparent; color: var(--yj-leaf-ink); font-weight: 700; }
.dc-cell.is-today {
  background: var(--yj-yuja-100);
  border-color: var(--yj-yuja-600);
  border-radius: var(--yj-r-full);
  color: var(--yj-ink-deep);
  font-weight: 700;
}
.dc-legend {
  display: flex; flex-wrap: wrap; gap: var(--yj-s2) var(--yj-s4);
  margin-top: var(--yj-s3);
  font-size: var(--yj-t-cap); color: var(--yj-sub);
}
.dc-legend span { display: inline-flex; align-items: center; gap: var(--yj-s1); }
.dc-sw { display: inline-block; width: 14px; height: 14px; border-radius: var(--yj-r-xs); border: 1px solid var(--yj-line); background: var(--yj-card); }
.dc-sw.is-done { background: var(--yj-leaf-tint); border-color: transparent; }
.dc-sw.is-today { background: var(--yj-yuja-100); border-color: var(--yj-yuja-600); border-radius: var(--yj-r-full); }
.dc-sw.is-review { border-style: dashed; border-color: var(--yj-line-strong); }

/* ── 하루 도장 (잎 배지) ───────────────────────────── */
.dc-stamp {
  display: inline-flex; align-items: center; gap: var(--yj-s1);
  align-self: flex-start;
  height: 32px; padding: 0 var(--yj-s3);
  border-radius: var(--yj-r-full);
  background: var(--yj-leaf-tint);
  color: var(--yj-leaf-ink);
  font-size: var(--yj-t-cap);
  font-weight: 700;
}
.dc-stamp .dc-ic { width: 18px; height: 18px; }

/* ── 하루 화면 ─────────────────────────────────────── */
.dc-day { display: flex; flex-direction: column; gap: var(--yj-s4); }
.dc-day__nav { display: flex; }
.dc-back { margin-left: calc(var(--yj-s2) * -1); }
.dc-day__head { display: flex; flex-direction: column; gap: var(--yj-s2); }
.dc-day__title {
  margin: 0;
  font-family: var(--yj-font-disp);
  font-size: var(--yj-t-disp);
  font-weight: 800;
  line-height: 1.2;
  color: var(--yj-ink-deep);
  font-variant-numeric: tabular-nums;
}
.dc-day__body { display: flex; flex-direction: column; gap: var(--yj-s4); }
.dc-day__foot { display: flex; flex-direction: column; align-items: stretch; gap: var(--yj-s3); padding-top: var(--yj-s2); }
.dc-day__foot .dc-quiz { width: 100%; }
.dc-day__pager { display: flex; justify-content: space-between; }
@media (min-width: 768px) {
  .dc-day__foot .dc-quiz { width: auto; align-self: center; min-width: 280px; }
}

/* 복습일 — 낱말 목록만 */
.dc-words {
  display: flex; flex-wrap: wrap; gap: var(--yj-s2);
  margin: 0; padding: var(--yj-s4);
  list-style: none;
  background: var(--yj-card);
  border: 1px solid var(--yj-line);
  border-radius: var(--yj-r-lg);
  box-shadow: var(--yj-sh-1);
}
.dc-words li {
  padding: var(--yj-s1) var(--yj-s3);
  border: 1px solid var(--yj-line-strong);
  border-radius: var(--yj-r-full);
  font-size: var(--yj-t-small);
  color: var(--yj-ink);
}

/* ── 배지 (L3 · §12-7) ───────────────────────────────
   「오늘의 학습」 카드 안 [data-dc-slot="badges"] — 얻은 이정표 = 잎 배지, 다음 이정표 = 외곽선 배지(규격 v4 §7-6).
   자물쇠·방패·원형 아이콘 줄을 쓰지 않는다(§0-3). 글자 알약 + 선 SVG 하나 */
.dc-slot { padding-top: var(--yj-s3); border-top: 1px solid var(--yj-line); }
.dc-badges { display: flex; flex-direction: column; gap: var(--yj-s2); }
.dc-badge-row { display: flex; flex-wrap: wrap; gap: var(--yj-s2); margin: 0; padding: 0; list-style: none; }
.dc-badge {
  display: inline-flex; align-items: center; gap: var(--yj-s1);
  min-height: 32px; padding: 0 var(--yj-s3);
  border: 1px solid var(--yj-line-strong);
  border-radius: var(--yj-r-full);
  color: var(--yj-sub);
  font-size: var(--yj-t-cap);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dc-badge .dc-ic { width: 16px; height: 16px; }
.dc-badge.is-got { background: var(--yj-leaf-tint); border-color: transparent; color: var(--yj-leaf-ink); font-weight: 700; }
.dc-badges__cat { margin: 0; font-size: var(--yj-t-cap); line-height: 1.6; color: var(--yj-sub); word-break: keep-all; }
.dc-badges__cat b { font-weight: 700; color: var(--yj-leaf-ink); }
.dc-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--yj-ink); }

/* 퀴즈 완료 화면 한 줄 축하 — 이정표·카테고리 완주를 처음 얻은 날에만. 움직임은 320ms 한 번, 줄이기 설정이면 없음 */
.dc-cheer {
  display: inline-flex; align-items: center; gap: var(--yj-s2);
  margin: 0; padding: var(--yj-s2) var(--yj-s4);
  border-radius: var(--yj-r-lg);
  background: var(--yj-leaf-tint);
  color: var(--yj-leaf-ink);
  font-size: var(--yj-t-small);
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
  animation: dc-rise var(--yj-m-slow) var(--yj-ease) both;
}
@keyframes dc-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dc-cheer { animation: none; } }

/* 카테고리별 보기 칩 옆 완주 표시 — 제품 화면이 칩 안 끝에 덧붙인다(.dc-catmark) */
.dc-catmark { display: inline-flex; align-items: center; margin-left: var(--yj-s1); vertical-align: -3px; color: var(--yj-leaf-ink); }
.dc-catmark .dc-ic { width: 16px; height: 16px; }