/* hub-nav.css : 학생·선생님 통합 화면 메뉴판(2026-11-12). hub-nav.js와 함께 쓴다 */
.hn-hide { display: none !important; }
.hn-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 16px; }
@media (max-width: 1000px) { .hn-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hn-tile { display: flex; align-items: center; gap: 12px; min-height: 80px; padding: 14px 18px; border-radius: 16px; border: 2px solid #c7d2fe; background: #fff; color: #1e1b4b; font: inherit; font-size: 19px; font-weight: 800; text-align: left; text-decoration: none; cursor: pointer; box-shadow: 0 4px 14px rgba(30, 27, 75, .08); transition: transform .12s, border-color .12s, box-shadow .12s; }
.hn-tile:hover, .hn-tile:focus-visible { border-color: #6366f1; box-shadow: 0 8px 22px rgba(79, 70, 229, .18); transform: translateY(-2px); outline: none; }
.hn-ic { font-size: 30px; line-height: 1; flex: none; }
.hn-t { line-height: 1.25; }
.hn-link { border-style: dashed; }
.hn-bar { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; position: sticky; top: var(--hn-top, 0px); z-index: 4; padding: 8px 0; background: rgba(244, 245, 255, .96); backdrop-filter: blur(4px); }
.hn-back { font: inherit; font-size: 17px; font-weight: 800; padding: 10px 18px; border-radius: 12px; border: 2px solid #6366f1; background: #eef2ff; color: #3730a3; cursor: pointer; flex: none; }
.hn-back:hover, .hn-back:focus-visible { background: #e0e7ff; outline: none; }
.hn-title { margin: 0; font-size: 22px; font-weight: 800; color: #1e1b4b; }
/* 선생님 화면은 탭 이름만 쓰므로 단추를 조금 낮게 */
.hn-teacher .hn-menu { margin: 12px 0 6px; }
.hn-t { word-break: keep-all; }
.hn-teacher .hn-tile { min-height: 64px; font-size: 18px; }
/* 서재 구역에서는 접기 줄 없이 바로 펼쳐 보인다 */
.hn-in [data-hn="room"] > summary { display: none; }
@media (max-width: 600px) {
  .hn-menu { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hn-tile { min-height: 64px; padding: 10px 12px; font-size: 16px; gap: 8px; white-space: normal; }
  .hn-ic { font-size: 24px; }
  .hn-title { font-size: 18px; }
  .hn-back { font-size: 15px; padding: 8px 12px; }
}
/* 메뉴 단추 숫자(새 과제 수) */
.hn-tile { position: relative; }
.hn-badge { position: absolute; top: 8px; right: 10px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: #e11d48; color: #fff; font-size: 15px; line-height: 26px; text-align: center; font-weight: 800; box-shadow: 0 2px 6px rgba(225, 29, 72, .35); }