@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* ─── HummingBlocks Teacher · Design Tokens ─── */
:root {
  /* 본문 = Pretendard(가독성), 제목/버튼 = var(--hb-font)(Jua, 페이지에서 지정) */
  --hb-font-body: "Pretendard Variable", "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  /* Brand palette */
  --hb-blue: #4f61d8;
  --hb-blue-deep: #3d4fb8;
  --hb-blue-soft: #e9edff;
  --hb-pink: #ec739c;
  --hb-pink-deep: #db5b85;
  --hb-pink-soft: #ffe6ef;
  --hb-teal: #4bcac9;
  --hb-teal-deep: #2fa7a7;
  --hb-teal-soft: #ddf6f5;
  --hb-yellow: #ffd034;
  --hb-yellow-soft: #fff5a0;
  --hb-cream: #fffce3;
  --hb-red: #e73e32;
  --hb-red-soft: #ffe2df;
  --hb-purple: #8979ff;
  --hb-purple-soft: #ece8ff;

  /* Surface */
  --hb-bg: #f4f1e8;          /* warm cream background */
  --hb-card: #ffffff;
  --hb-ink: #1e2541;         /* near-black navy ink */
  --hb-ink-2: #4b5170;
  --hb-mute: #8a90a8;
  --hb-line: #1e2541;        /* dark outline (signature) */
  --hb-line-soft: #e6e1d2;

  /* Type */
  --hb-font: "NanumSquareRound", "NanumSquareRoundOTF", "Pretendard",
    "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Geometry */
  --hb-radius-card: 22px;
  --hb-radius-btn: 14px;
  --hb-radius-pill: 999px;
  --hb-shadow: 4px 4px 0 var(--hb-line);
  --hb-shadow-sm: 3px 3px 0 var(--hb-line);
  --hb-shadow-lift: 0 10px 28px rgba(30, 37, 65, 0.12);

  /* Motion + spacing (polish) */
  --hb-ease: cubic-bezier(0.34, 1.2, 0.64, 1);
  --hb-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --hb-space-1: 4px;
  --hb-space-2: 8px;
  --hb-space-3: 12px;
  --hb-space-4: 16px;
  --hb-space-6: 24px;
}

/* ─── Reset ─── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  background: var(--hb-bg);
  color: var(--hb-ink);
  font-family: var(--hb-font-body);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 제목·버튼·로고·라벨·통계값 등 '표시용'은 Jua 유지(톤 보존) */
.hb-logo-text, .hb-topbar-sub, .hb-section-title, .hb-section-desc,
.hb-label, .hb-btn, .hb-action, .hb-control, .hb-back, .hb-status,
.stat-card .val, .stat-card .lbl, .val {
  font-family: var(--hb-font);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
a { color: inherit; text-decoration: none; }

/* ─── Page background pattern (subtle block dots) ─── */
.hb-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 12%, rgba(75, 202, 201, 0.10) 0, transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(236, 115, 156, 0.10) 0, transparent 28%),
    radial-gradient(circle at 88% 88%, rgba(255, 208, 52, 0.12) 0, transparent 32%),
    var(--hb-bg);
}

/* ─── Topbar (banner ribbon look) ─── */
.hb-topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
  background: var(--hb-blue);
  border-bottom: 3px solid var(--hb-line);
}
.hb-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.6px);
  background-size: 28px 28px;
  background-position: 0 0;
  pointer-events: none;
  opacity: 0.55;
}
.hb-topbar > * { position: relative; }

.hb-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hb-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 2.5px solid var(--hb-line);
  border-radius: 12px;
  background: var(--hb-yellow);
  box-shadow: 2px 2px 0 var(--hb-line);
  font-size: 18px;
  font-weight: 800;
  color: var(--hb-ink);
  transform: rotate(-4deg);
}
.hb-logo-text {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  text-shadow: 1.5px 1.5px 0 rgba(30, 37, 65, 0.45);
  white-space: nowrap;
}
.hb-logo-text small {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 10px;
  border: 2px solid var(--hb-line);
  border-radius: 999px;
  background: var(--hb-pink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
  letter-spacing: 0.4px;
}
.hb-topbar-sub {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 2px solid var(--hb-line);
  border-radius: 999px;
  background: #fff;
  color: var(--hb-ink);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 2px 2px 0 var(--hb-line);
  white-space: nowrap;
}

/* topbar action buttons (chunky white pills w/ navy outline) */
.hb-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.hb-control,
.hb-action {
  min-height: 38px;
  padding: 6px 14px;
  border: 2px solid var(--hb-line);
  border-radius: 12px;
  background: #fff;
  color: var(--hb-ink);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 2px 2px 0 var(--hb-line);
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
  white-space: nowrap;
}
.hb-control { min-width: 130px; }
.hb-control option { color: var(--hb-ink); }
.hb-action.is-pink { background: var(--hb-pink); color: #fff; }
.hb-action.is-teal { background: var(--hb-teal); color: #fff; }
.hb-action:hover:not(:disabled),
.hb-control:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--hb-line);
}
.hb-action:active:not(:disabled),
.hb-control:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--hb-line);
}

/* topbar back link styled as ghost chip */
.hb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 2px solid var(--hb-line);
  border-radius: 999px;
  background: #fff;
  color: var(--hb-ink);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 2px 2px 0 var(--hb-line);
  white-space: nowrap;
}
.hb-back:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--hb-line); }

/* ─── Container ─── */
.hb-container { width: min(1140px, 100%); margin: 0 auto; padding: 32px 28px 64px; }
.hb-container.narrow { width: min(520px, 100%); padding-top: 40px; }
.hb-container.medium { width: min(760px, 100%); padding-top: 40px; }

/* ─── Status line ─── */
.hb-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 16px;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  background: var(--hb-teal-soft);
  border: 2px solid var(--hb-line);
  color: var(--hb-ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--hb-line);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hb-status::before {
  content: "🎵";
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 13px;
  line-height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--hb-line);
}
.hb-status:empty { display: none; }
.hb-status.is-error {
  background: var(--hb-red-soft);
  color: var(--hb-red);
}
.hb-status.is-error::before { content: "!"; background: var(--hb-red); color: #fff; }

/* ─── Card (signature look) ─── */
.hb-card {
  border: 2.5px solid var(--hb-line);
  border-radius: var(--hb-radius-card);
  background: var(--hb-card);
  box-shadow: var(--hb-shadow);
}
.hb-card.flat { box-shadow: none; }

.hb-section {
  margin-bottom: 22px;
  padding: 24px 26px;
}

.hb-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.hb-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2.5px solid var(--hb-line);
  border-radius: 12px;
  background: var(--hb-yellow);
  box-shadow: 2px 2px 0 var(--hb-line);
  font-size: 18px;
}
.hb-section-icon.is-pink { background: var(--hb-pink); color: #fff; }
.hb-section-icon.is-teal { background: var(--hb-teal); color: #fff; }
.hb-section-icon.is-blue { background: var(--hb-blue); color: #fff; }
.hb-section-icon.is-cream { background: var(--hb-cream); }
.hb-section-icon.is-red { background: var(--hb-red); color: #fff; }
.hb-section-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--hb-ink);
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.hb-section-desc {
  margin-left: auto;
  padding: 4px 12px;
  border: 2px solid var(--hb-line);
  border-radius: 999px;
  background: var(--hb-cream);
  color: var(--hb-ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* ─── Legend chips ─── */
.hb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.hb-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 2px solid var(--hb-line);
  border-radius: 999px;
  background: #fff;
  color: var(--hb-ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.hb-legend .ld {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--hb-line);
  border-radius: 3px;
}

/* ─── Form ─── */
.hb-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--hb-ink);
  letter-spacing: -0.1px;
}
.hb-input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 2.5px solid var(--hb-line);
  border-radius: 14px;
  background: #fff;
  color: var(--hb-ink);
  font-size: 15px;
  font-weight: 700;
  outline: none;
  transition: box-shadow 0.12s, transform 0.08s;
}
.hb-input::placeholder { color: #b3b8cc; font-weight: 600; }
.hb-input:focus {
  box-shadow: 4px 4px 0 var(--hb-line);
  transform: translate(-1px, -1px);
}

/* ─── Buttons ─── */
.hb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  padding: 0 22px;
  border: 2.5px solid var(--hb-line);
  border-radius: 16px;
  background: #fff;
  color: var(--hb-ink);
  font-size: 15px;
  font-weight: 800;
  box-shadow: var(--hb-shadow);
  transition: transform 0.08s, box-shadow 0.08s;
}
.hb-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--hb-line); }
.hb-btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--hb-line); }
.hb-btn.is-pink { background: var(--hb-pink); color: #fff; }
.hb-btn.is-teal { background: var(--hb-teal); color: #fff; }
.hb-btn.is-yellow { background: var(--hb-yellow); color: var(--hb-ink); }
.hb-btn.is-block { width: 100%; }

/* ─── Empty state ─── */
.hb-empty {
  padding: 22px;
  border: 2.5px dashed var(--hb-line);
  border-radius: 16px;
  background: var(--hb-cream);
  color: var(--hb-ink-2);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* ─── Block dot pattern bg helper ─── */
.hb-blockbg {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(75, 202, 201, 0.18) 0, transparent 24%),
    radial-gradient(circle at 88% 30%, rgba(236, 115, 156, 0.16) 0, transparent 26%),
    radial-gradient(circle at 50% 90%, rgba(255, 208, 52, 0.18) 0, transparent 30%);
}

/* Pills should never break their short labels mid-character */
.stat-card .lbl,
.info-card .lbl,
.char-type,
.choice-badge,
.stu-type-badge,
.error-count,
.portal-mark,
.sel-btn,
.qr-info-row span:first-child {
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   POLISH LAYER (additive · 톤 유지)
   ───────────────────────────────────────────── */

/* 1) Smoother easing on existing interactions */
.hb-btn, .hb-action, .hb-control, .hb-back, .hb-input { transition-timing-function: var(--hb-ease); }

/* 2) Entrance: 카드/섹션이 로드 시 부드럽게 떠오름 (살짝 스태거) */
@keyframes hb-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hb-section, .hb-card { animation: hb-fade-up 0.45s var(--hb-ease) both; }
.hb-section:nth-child(2) { animation-delay: 0.05s; }
.hb-section:nth-child(3) { animation-delay: 0.10s; }
.hb-section:nth-child(4) { animation-delay: 0.15s; }
.hb-section:nth-child(5) { animation-delay: 0.20s; }
.hb-section:nth-child(n+6) { animation-delay: 0.24s; }

/* 3) 상호작용 카드는 hover 시 살짝 들림 (예: 학생 카드) */
.hb-card.is-interactive,
.student-grid > *,
.media-item {
  transition: transform 0.14s var(--hb-ease), box-shadow 0.14s var(--hb-ease);
}
.hb-card.is-interactive:hover,
.student-grid > a:hover,
.media-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--hb-line);
}

/* 4) 숫자 가독성 — 통계/점수 값은 등폭 숫자로 깔끔하게 */
.val, .stat-card .val, .stat-row .val,
.error-count, .score-num, .hb-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

/* 5) 스켈레톤 로딩 (불러오는 중 텍스트 대신 사용) */
@keyframes hb-shimmer { 100% { background-position: -200% 0; } }
.hb-skeleton {
  border-radius: 10px;
  background: linear-gradient(100deg, #efeadd 30%, #f7f4ea 50%, #efeadd 70%);
  background-size: 200% 100%;
  animation: hb-shimmer 1.2s linear infinite;
}
.hb-skeleton-line { height: 14px; margin: 8px 0; }
.hb-skeleton-line.short { width: 55%; }
.hb-skeleton-card { height: 96px; border: 2.5px solid var(--hb-line-soft); }

/* 6) 상태줄: 로딩 중(에러 아님)일 때 은은한 펄스 */
@keyframes hb-pulse { 50% { opacity: 0.62; } }
.hb-status:not(.is-error):not(:empty) { animation: hb-pulse 1.4s var(--hb-ease-soft) infinite; }

/* 7) 접근성 — 키보드 포커스 링 */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--hb-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 8) Lucide 아이콘 크기/굵기 */
.hb-section-icon svg, .hb-section-icon [data-lucide] { width: 22px; height: 22px; stroke-width: 2.4; }
.hb-logo-mark svg, .hb-logo-mark [data-lucide] { width: 20px; height: 20px; stroke-width: 2.4; }
.hb-btn svg, .hb-action svg, .hb-back svg { width: 17px; height: 17px; stroke-width: 2.4; vertical-align: -3px; }

/* 9) 토스트 알림 (우측 하단, 떴다가 사라짐) */
.hb-toast-wrap {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.hb-toast {
  display: inline-flex; align-items: center; gap: 9px;
  max-width: 360px; padding: 12px 16px;
  border: 2.5px solid var(--hb-line); border-radius: 14px;
  background: #fff; color: var(--hb-ink);
  font-family: var(--hb-font); font-weight: 800; font-size: 13.5px;
  box-shadow: 4px 4px 0 var(--hb-line);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.25s var(--hb-ease), transform 0.25s var(--hb-ease);
}
.hb-toast.is-in { opacity: 1; transform: translateY(0); }
.hb-toast.is-error { background: var(--hb-red-soft); color: var(--hb-red); }
.hb-toast.is-info { background: var(--hb-teal-soft); }
.hb-toast-ic { flex-shrink: 0; }

/* 10) 빈 상태 — 아이콘 + 제목 + 안내 (친근하게) */
.hb-empty { transition: none; }
.hb-empty.is-rich {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 22px; line-height: 1.5;
}
.hb-empty .e-ic {
  font-size: 30px; width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--hb-line-soft); border-radius: 16px;
  background: #fff; margin-bottom: 4px;
}
.hb-empty .e-title { font-family: var(--hb-font); font-size: 15px; color: var(--hb-ink); }
.hb-empty .e-hint { font-size: 12.5px; color: var(--hb-mute); }

/* 11) 모션 민감 사용자 존중 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}