/* CheckUS Manual - Hub / landing styles (role picker + per-audience hubs) */
:root {
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-900:#1e3a5f;
  --green-50:#f0fdf4; --green-100:#dcfce7; --green-600:#16a34a; --green-700:#15803d;
  --purple-50:#faf5ff; --purple-100:#f3e8ff; --purple-600:#9333ea; --purple-700:#7e22ce;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans KR',sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); background:var(--gray-50); color:var(--gray-900); line-height:1.6; }
.hub { max-width:900px; margin:0 auto; padding:56px 24px 72px; }
.hub-back { display:inline-block; margin-bottom:20px; color:var(--gray-500); font-size:14px; text-decoration:none; }
.hub-back:hover { color:var(--blue-700); }
.hub-title { font-size:34px; font-weight:700; margin-bottom:8px; }
.hub-subtitle { font-size:16px; color:var(--gray-500); margin-bottom:44px; }

/* ── Role picker (index.html) ── */
.role-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.role-card {
  display:block; background:white; border:1px solid var(--gray-200); border-radius:14px;
  padding:28px 26px; text-decoration:none; color:var(--gray-800);
  transition:border-color .15s, box-shadow .15s, transform .15s;
  border-top:4px solid var(--gray-200);
}
.role-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
.role-card.teacher { border-top-color:var(--blue-600); }
.role-card.teacher:hover { border-color:var(--blue-600); }
.role-card.guardian { border-top-color:var(--green-600); }
.role-card.guardian:hover { border-color:var(--green-600); }
.role-card.student { border-top-color:var(--purple-600); }
.role-card.student:hover { border-color:var(--purple-600); }
.role-card .role-kicker { font-size:13px; font-weight:600; letter-spacing:.4px; margin-bottom:8px; }
.role-card.teacher .role-kicker { color:var(--blue-700); }
.role-card.guardian .role-kicker { color:var(--green-700); }
.role-card.student .role-kicker { color:var(--purple-700); }
/* Brand cards (index.html → 리플랜 / 사오수학) */
.role-card.replan { border-top-color:#ca8a04; }            /* 리플랜 = 금색 */
.role-card.replan:hover { border-color:#ca8a04; }
.role-card.replan .role-kicker { color:#a16207; }
.role-card.saomath { border-top-color:#0ea5e9; }           /* 사오수학 = 하늘색 */
.role-card.saomath:hover { border-color:#0ea5e9; }
.role-card.saomath .role-kicker { color:#0369a1; }
.role-card h3 { font-size:24px; font-weight:700; margin-bottom:8px; }
.role-card p { font-size:14px; color:var(--gray-500); line-height:1.6; margin-bottom:14px; }
.role-card .role-go { font-size:14px; font-weight:600; color:var(--gray-700); }

/* ── Per-audience hub ── */
.audience-title { font-size:22px; font-weight:600; margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid var(--gray-200); display:flex; align-items:center; gap:8px; }
.audience-badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:9999px; font-size:12px; font-weight:500; }
.audience-badge.teacher { background:var(--blue-100); color:var(--blue-700); }
.audience-badge.guardian { background:var(--green-100); color:var(--green-700); }
.audience-badge.student { background:var(--purple-100); color:var(--purple-700); }
.section-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.section-link { display:block; background:white; border:1px solid var(--gray-200); border-radius:8px; padding:14px 16px; text-decoration:none; color:var(--gray-800); font-size:14px; font-weight:500; transition:border-color .15s, box-shadow .15s; }
.section-link:hover, .section-link:active { border-color:var(--blue-600); box-shadow:0 2px 8px rgba(37,99,235,.1); }
@media (hover:none) { .section-link:active { background:var(--gray-100); } }
.section-link .num { font-size:11px; color:var(--gray-400); font-weight:400; }

/* ── What's New / release notes banner (index.html) ── */
.whatsnew { display:flex; align-items:center; gap:12px; margin-top:28px; padding:16px 20px; background:white; border:1px solid var(--gray-200); border-radius:12px; text-decoration:none; color:var(--gray-700); transition:border-color .15s, box-shadow .15s; }
.whatsnew:hover, .whatsnew:active { border-color:var(--purple-600); box-shadow:0 4px 14px rgba(147,51,234,.10); }
.whatsnew-badge { flex-shrink:0; font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--purple-700); background:var(--purple-100); padding:3px 9px; border-radius:9999px; }
.whatsnew-text { flex:1; font-size:14px; }
.whatsnew-text strong { font-weight:600; color:var(--gray-900); }
.whatsnew-arrow { flex-shrink:0; font-size:16px; color:var(--gray-400); transition:color .15s; }
.whatsnew:hover .whatsnew-arrow { color:var(--purple-600); }