/**
 * 시계·달력 — 하늘·크림
 */
:root {
  --bg: #eef7ff;
  --bg-glow-1: #bae6fd;
  --bg-glow-2: #fde68a;
  --hero-grad: linear-gradient(135deg, #7dd3fc 0%, #e0f2fe 50%, #fef9c3 100%);
  --surface-soft: #f0f9ff;
  --accent: #0ea5e9;
  --accent-deep: #0369a1;
  --accent-light: #7dd3fc;
  --accent-glow: rgba(14, 165, 233, 0.35);
  --ink: #0c4a6e;
  --heading: #075985;
  --muted: #64748b;
  --line: #bae6fd;
  --rule-line: #e0f2fe;
}

.clk-svg { width: min(240px, 78vw); height: auto; display: block; margin: 0 auto; }
.clk-rim-inner { fill: #475569; }
.clk-face { fill: #fffef8; stroke: #e2e8f0; stroke-width: 1; }
.clk-num { font-size: 20px; font-weight: 900; fill: #0c4a6e; font-family: "Noto Sans KR", sans-serif; }
.clk-min-num { font-size: 8px; font-weight: 700; fill: #64748b; font-family: "Noto Sans KR", sans-serif; }
.clk-tick { stroke: #94a3b8; stroke-width: 1.2; }
.clk-tick-b { stroke: #0c4a6e; stroke-width: 2.6; }
.clk-hour-shape { fill: #1e293b; }
.clk-min-shape { fill: #334155; }
.clk-sec { stroke: #e11d48; stroke-width: 2; stroke-linecap: round; }
.clk-sec-tip { fill: #e11d48; }
.clk-cap { fill: #f59e0b; stroke: #0f172a; stroke-width: 1.2; }
.visual-clock { justify-content: center; width: 100%; }
.visual-clock-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; width: 100%; }
.visual-clock-choice { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; width: 100%; }
.clk-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clk-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 2px solid #bae6fd;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
}
.clk-choice:hover { border-color: #0284c7; }
.clk-choice-let { font-weight: 900; color: #0369a1; width: 1.2em; }
.digi-sm { font-size: 1.15rem; padding: 6px 10px; }
.clk-eq { font-size: 1.6rem; font-weight: 900; color: #0369a1; }
.clk-cap-lab { font-size: 12px; font-weight: 800; text-align: center; color: #0369a1; margin-bottom: 4px; }
.digi {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #0f172a;
  color: #4ade80;
  font-weight: 900;
  font-size: 1.8rem;
  padding: 10px 16px;
  border-radius: 12px;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.04em;
}
.digi i { color: #86efac; font-style: normal; animation: blink 1.2s step-end infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.visual-cal {
  display: block;
  width: 100%;
  max-width: none;
  overflow-x: auto;
}
.cal-card {
  background: #fff;
  border: 3px solid #7dd3fc;
  border-radius: 18px;
  padding: 14px 16px 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.cal-head {
  text-align: center;
  font-weight: 900;
  color: #0369a1;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 1.35rem;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  text-align: center;
  font-weight: 800;
}
.cal-wd {
  color: #64748b;
  padding: 8px 0 6px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.cal-wd:first-child { color: #e11d48; }
.cal-wd:nth-child(7) { color: #2563eb; }
.cal-empty { min-height: 48px; }
.cal-day {
  aspect-ratio: 1.45 / 1;
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 16px;
  border: 1.5px solid #e2e8f0;
}
.cal-day.is-on {
  background: #0ea5e9;
  color: #fff;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
}
.cal-day.is-on2 {
  background: #22c55e;
  color: #fff;
  border-color: #16a34a;
}

@media (max-width: 640px) {
  .cal-day { min-height: 40px; font-size: 14px; aspect-ratio: 1.2 / 1; }
  .clk-svg { width: min(230px, 86vw); }
}

.level-tabs, .age-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.age-tab {
  border: 3px solid #fff;
  background: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  color: var(--muted);
}
.age-tab.active { background: var(--accent); color: #fff; }
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.unit-card {
  border: 3px solid #fff; background: #fff; border-radius: 18px; padding: 14px;
  text-align: left; cursor: pointer; font-family: inherit; width: 100%;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}
.unit-card.active { border-color: var(--accent); background: var(--surface-soft); }
.unit-card h3 { margin: 4px 0 6px; font-family: var(--font-display); font-size: 1.1rem; color: var(--heading); }
.unit-count { font-size: 12px; font-weight: 800; color: var(--accent-deep); }