/* 포털 임시 스타일. 구조(아이콘 격자·분류 탭·내가 만든 활동)는 확정, 색·글꼴·모양은 피그마 디자인 후 교체한다.
   값은 전부 CSS 변수(--hub-*)라 디자인 토큰이 정해지면 :root 한 곳만 바꾸면 된다. */
:root {
  --hub-font: 16px/1.5 "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  --hub-bg: #f6f7fb;        /* 바탕 */
  --hub-card: #ffffff;      /* 카드·패널 */
  --hub-fg: #1d2433;
  --hub-muted: #6b7385;
  --hub-line: #e3e6ee;
  --hub-accent: #3b6cf0;
  --hub-accent-soft: #e9efff;
  --hub-kakao: #fee500;
  --hub-radius: 16px;
  --hub-tile: 72px;         /* 앱 아이콘 크기 */
  --hub-bar-bg: #ffffff;
  --hub-badge-bg: var(--hub-accent-soft);
  --hub-badge-fg: #2b4bb3;
  --hub-btn-bg: #fff;
  --hub-btn-fg: var(--hub-fg);
}
* { box-sizing: border-box }
html, body { margin: 0; min-height: 100% }
body { font: var(--hub-font); background: var(--hub-bg); color: var(--hub-fg); -webkit-font-smoothing: antialiased }
a { color: inherit }
button, input, select { font: inherit }
[hidden] { display: none !important }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

/* ───── 첫 화면(로그인 전): 교사 로그인 + 학생 입장. 태블릿·휴대폰에서 스크롤 없이 한 화면 ───── */
.landing { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(12px, 3vh, 32px) 20px }
.landing header { text-align: center; padding-top: 2vh }
.brand { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin: 0 }
.brand small { display: block; font-size: .5em; font-weight: 500; color: var(--hub-muted); margin-top: .35em; letter-spacing: 0 }
.gate { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 400px)); justify-content: center; align-content: center }
.card { background: var(--hub-card); border: 1px solid var(--hub-line); border-radius: var(--hub-radius); padding: clamp(18px, 3vw, 28px); box-shadow: 0 1px 2px rgba(20, 30, 60, .04) }
.card h2 { margin: 0 0 .35rem; font-size: 1.25rem }
.card p { margin: 0 0 1rem; color: var(--hub-muted); font-size: .95rem }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 52px; padding: .6rem 1rem;
  border: 1px solid var(--hub-line); border-radius: 12px; background: var(--hub-btn-bg); color: var(--hub-btn-fg); cursor: pointer; font-weight: 600 }
.btn.kakao { background: var(--hub-kakao); border-color: var(--hub-kakao); color: #191919 }
.btn.primary { background: var(--hub-accent); border-color: var(--hub-accent); color: #fff }
.btn[disabled] { opacity: .5; cursor: default }
.code-row { display: flex; gap: .6rem }
.code-row input { flex: 1; min-width: 0; min-height: 52px; padding: .5rem .8rem; border: 1px solid var(--hub-line); border-radius: 12px;
  text-transform: uppercase; letter-spacing: .25em; text-align: center; font-size: 1.15rem; font-weight: 700 }
.code-row .btn { width: auto; padding: 0 1.2rem }
.landing footer { text-align: center; color: var(--hub-muted); font-size: .85rem }
.msg { min-height: 1.4em; margin: .5rem 0 0; font-size: .9rem; color: #b00020 }
.msg.ok { color: #0a7d3b }

/* ───── 교사 홈 ───── */
.home { max-width: 1240px; margin: 0 auto; padding: 20px; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) }
@media (min-width: 1000px) { .home { grid-template-columns: minmax(0, 1fr) 340px; align-items: start } .home .panel.acts { position: sticky; top: 76px } }
.panel { background: var(--hub-card); border: 1px solid var(--hub-line); border-radius: var(--hub-radius); padding: 18px 20px }
.panel h2 { margin: 0; font-size: 1.05rem; font-weight: 700 }
.panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.panel-head .grow { flex: 1 }
.hello { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.hello h1 { margin: 0; font-size: 1.4rem; font-weight: 800 }
.hello span { color: var(--hub-muted) }

.tabs { display: flex; gap: 6px; flex-wrap: wrap }
.tab { border: 1px solid var(--hub-line); background: var(--hub-card); color: var(--hub-muted); border-radius: 999px; padding: .35rem .9rem; cursor: pointer; font-weight: 600; font-size: .92rem }
.tab[aria-selected="true"] { background: var(--hub-fg); border-color: var(--hub-fg); color: #fff }
.search { min-width: 160px; flex: 1; max-width: 260px; min-height: 40px; padding: .4rem .8rem; border: 1px solid var(--hub-line); border-radius: 999px; background: var(--hub-bg) }

.grid { display: grid; gap: 18px 10px; grid-template-columns: repeat(auto-fill, minmax(calc(var(--hub-tile) + 24px), 1fr)); justify-items: center }
.tile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 110px; padding: 6px 2px; text-decoration: none; border-radius: 14px; position: relative }
.tile:hover, .tile:focus-visible { background: var(--hub-accent-soft); outline: none }
.icon { width: var(--hub-tile); height: var(--hub-tile); border-radius: 22%; display: grid; place-items: center; font-size: calc(var(--hub-tile) * .5); color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 2px 6px rgba(20, 30, 60, .12); user-select: none }
.icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit }
.tile .name { font-size: .88rem; font-weight: 600; text-align: center; line-height: 1.25; word-break: keep-all }
.tile .desc { position: absolute; bottom: calc(100% - 2px); left: 50%; transform: translateX(-50%); background: var(--hub-fg); color: #fff; font-size: .8rem; padding: .35rem .6rem;
  border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 5; max-width: 240px; overflow: hidden; text-overflow: ellipsis }
.tile:hover .desc, .tile:focus-visible .desc { opacity: 1 }
#recent:not([hidden]) + .panel { margin-top: 20px }
.recent .grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--hub-tile) + 24px), 1fr)) }
.empty { grid-column: 1 / -1; width: 100%; color: var(--hub-muted); text-align: center; padding: 28px 8px; font-size: .95rem; word-break: keep-all }

.acts .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px }
.acts select { min-height: 40px; padding: .3rem .6rem; border: 1px solid var(--hub-line); border-radius: 10px; background: var(--hub-bg) }
.acts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto }
.acts li a { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; text-decoration: none; border: 1px solid transparent }
.acts li a:hover { background: var(--hub-accent-soft) }
.acts .mini { width: 36px; height: 36px; border-radius: 10px; flex: none; font-size: 1.05rem; display: grid; place-items: center; color: #fff }
.acts .mini img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit }
.acts .t { flex: 1; min-width: 0 }
.acts .t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.acts .t small { color: var(--hub-muted) }

@media (max-width: 480px) { :root { --hub-tile: 60px } .home { padding: 14px } .panel { padding: 14px } .acts .filters { grid-template-columns: 1fr } }