/* hub-ui.css : 통합 화면 공용 손질(2026-11-12). 첫 화면·학생·선생님 화면이 함께 쓴다.
   1) 마우스를 올리면 흰 글자 단추가 하얗게 되던 것: style.css의 button:hover(밝은 바탕)가 색 있는 단추 바탕까지 덮었다.
      색 있는 단추는 마우스를 올려도 짙은 바탕을 유지한다.
   2) 글자 링크로 된 이동(처음 화면, 돌아가기 등)을 단추 모양(.btn)으로. */

/* 1) 색 있는 단추의 마우스 올림 */
button.pri:hover, button.pri:focus-visible { background: #4338ca; border-color: #4338ca; color: #fff; }
.tabs button.on:hover, .vbtns button.on:hover, .status .vbtns button.on:hover,
.gate .ftabs button.on:hover, .tl-ban button.on:hover, .daily-filter-btns button.on:hover, .tl-act button.on:hover {
  background: #4338ca; border-color: #4338ca; color: #fff;
}
.sg-bet[aria-pressed="true"]:hover { background: #8f3f30; border-color: #8f3f30; color: #fff; }
button:disabled:hover { filter: none; }

/* 2) 단추 모양 링크 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border: 1px solid #d6daea; border-radius: 10px; background: #fff; color: var(--ink, #1e1b4b); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover, .btn:focus-visible { border-color: #818cf8; background: #eef2ff; color: #3730a3; outline: none; }
.btn.pri { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.btn.pri:hover, .btn.pri:focus-visible { background: #4338ca; border-color: #4338ca; color: #fff; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* 3) 위쪽 띠의 접는 목록(학생 「내 설정」). 선생님 화면의 .tl-more와 같은 모양 */
.hub-more { position: relative; }
.hub-more > summary { list-style: none; cursor: pointer; border: 1px solid #d6daea; background: #fff; border-radius: 8px; padding: 6px 12px; white-space: nowrap; }
.hub-more > summary::-webkit-details-marker { display: none; }
.hub-more > summary::after { content: ' ▾'; color: var(--mute, #64748b); }
.hub-more[open] > summary { border-color: #818cf8; background: #eef2ff; }
.hub-more-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 200px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: #fff; border: 1px solid var(--line, #e2e5f1); border-radius: 12px; box-shadow: 0 14px 34px rgba(30, 27, 75, .14); }
.hub-more-list button { text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-weight: 600; color: var(--ink, #1e1b4b); white-space: nowrap; }
.hub-more-list button:hover, .hub-more-list button:focus-visible { background: #eef2ff; outline: none; }

/* 4) 위쪽 띠와 본문의 좌우 끝 맞추기(사용자 지적: 띠마다 폭이 달라 보임). 본문 .wrap은 최대 1500px에 좌우 18px 여백 */
#app .top, .tl-bar { padding-left: max(18px, calc((100% - 1500px) / 2 + 18px)); padding-right: max(18px, calc((100% - 1500px) / 2 + 18px)); }
@media (max-width: 700px) { #app .top, .tl-bar { padding-left: 12px; padding-right: 12px; } }
.hn-title { word-break: keep-all; }
/* 5) 게임 색 바탕의 흰 글자(게임 하기·사용설명서): 밝은 게임 색(햇살 노랑)에서도 글자가 보이게 */
.gl .a a.p { background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)); text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.gl .a a.p:hover { background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)); color: #fff; }

/* 6) 같은 줄 카드가 가장 긴 카드에 맞춰 늘어나 비는 것 막기(게임 기록·그래프 카드, 2026-11-12 점검) */
.games, .vgrid { align-items: start; }

/* 7) 접근성(2026-11-12 점검): 키보드로 옮길 때 초점 테두리가 늘 보이게, 휴대폰 작은 단추 키우기, 너무 작은 글자 키우기 */
:where(a, button, summary, select, input, textarea, [role="button"], [tabindex]):focus-visible { outline: 3px solid #818cf8 !important; outline-offset: 2px; }
@media (max-width: 700px) {
  .top .home-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
  .gl .a a, .jump .glinks a { min-height: 38px; display: inline-flex; align-items: center; }
}
.daily-badge { font-size: 12px; }