:root {
  --learning-ink: #243453;
  --learning-muted: #59677d;
  --learning-line: #d8c69f;
  --learning-blue: #1768c9;
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

body.student-learning-page {
  min-width: 700px;
  margin: 0;
  color: var(--learning-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .1)),
    url('/learning-assets/economy-learning-bg.png') center bottom / cover no-repeat,
    #88ddff;
  background-attachment: fixed;
  font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif;
}

.student-learning-layout {
  width: min(1500px, 100%);
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 18px;
  margin: 0 auto;
  padding: 22px;
}

.student-learning-sidebar {
  min-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  border: 5px solid #92551a;
  border-radius: 28px;
  background: linear-gradient(90deg, #f7e6b8, #fff9e9 17%, #fffdf6 83%, #f1daa2);
  box-shadow: inset 0 0 0 2px #e9bd63, 0 16px 35px rgba(64, 46, 26, .26);
}

.student-learning-brand { display: grid; justify-items: center; gap: 4px; padding: 4px 8px 18px; color: #056bb8; text-align: center; }
.student-learning-brand img { width: 72px; height: 72px; object-fit: contain; }
.student-learning-brand strong { font-size: 25px; font-weight: 950; }
.student-learning-brand span { color: #6b5b43; font-size: 12px; font-weight: 850; }
.student-learning-sidebar nav { display: grid; gap: 9px; }
.student-learning-sidebar nav a {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 17px;
  border: 1px solid #d1a252;
  border-radius: 12px;
  color: #302a22;
  background: rgba(255, 252, 240, .86);
  box-shadow: 0 3px 0 rgba(152, 98, 24, .2);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}
.student-learning-sidebar nav a.is-current { color: #fff; background: linear-gradient(#80bc31, #4d8c12); box-shadow: 0 3px 0 #346a0d; }
.student-learning-session { display: grid; gap: 7px; margin-top: auto; padding: 16px 8px 0; text-align: center; }
.student-learning-session span { overflow: hidden; color: #74664f; font-size: 12px; text-overflow: ellipsis; }
.student-learning-session button { min-height: 44px; border: 1px solid #b98b46; border-radius: 11px; color: #69471a; background: #fff9e9; font-weight: 900; }

.student-learning-notebook {
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3px 4px 0 0;
  scrollbar-gutter: stable;
}
.student-learning-tabs[hidden], .student-learning-paper[hidden] { display: none; }
.student-learning-tabs { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0 65px -1px 78px; }
.student-learning-tabs button {
  min-width: 0;
  min-height: 67px;
  border: 1px solid rgba(31, 45, 74, .35);
  border-radius: 19px 19px 0 0;
  color: #fff;
  background: linear-gradient(#326cad, #16467f);
  box-shadow: inset 0 1px #ffffff8f, 0 -2px #0d2a58;
  font: inherit;
  font-size: clamp(15px, 1.55vw, 21px);
  font-weight: 950;
  text-shadow: 0 1px #19324e;
}
.student-learning-tabs button:nth-child(2) { background: linear-gradient(#8acb64, #4b9335); }
.student-learning-tabs button:nth-child(3) { background: linear-gradient(#9a83dd, #7259b9); }
.student-learning-tabs button:nth-child(4) { background: linear-gradient(#edaa52, #d8791b); }
.student-learning-tabs button:nth-child(5) { background: linear-gradient(#e77b91, #c94c68); }
.student-learning-tabs button[aria-selected="false"] { opacity: .9; filter: saturate(.86); }
.student-learning-tabs button[aria-selected="true"] { transform: translateY(1px); filter: saturate(1.12) brightness(.92); }
.student-learning-tabs button:focus-visible, .student-learning-paper a:focus-visible, .student-learning-paper button:focus-visible, .student-learning-sidebar a:focus-visible, .student-learning-sidebar button:focus-visible { outline: 4px solid #49a5ff; outline-offset: 2px; }

.student-learning-paper { position: relative; isolation: isolate; container-type: inline-size; min-height: 820px; padding: 36px 54px 46px 88px; overflow: hidden; }
.student-learning-frame { position: absolute; z-index: -1; left: 0; width: 100%; pointer-events: none; }
.student-learning-frame-top { top: 0; aspect-ratio: 2048 / 306; background: url('/learning-assets/note-shell-top.png') center / 100% 100% no-repeat; }
.student-learning-frame-body { top: 14.94cqi; bottom: 12.35cqi; background: url('/learning-assets/note-shell-body.png') top center / 100% auto repeat-y; }
.student-learning-frame-bottom { bottom: 0; aspect-ratio: 2048 / 253; background: url('/learning-assets/note-shell-bottom.png') center / 100% 100% no-repeat; }
.student-learning-paper-content { min-height: 710px; padding: 24px 30px 18px; border: 1px solid rgba(87, 104, 130, .25); border-radius: 6px 6px 20px 20px; background: rgba(255, 253, 244, .96); box-shadow: 0 12px 24px rgba(56, 46, 29, .08); }
.student-learning-header { min-height: 150px; display: grid; grid-template-columns: minmax(0, 1fr) 235px 185px; align-items: center; gap: 18px; padding: 0 4px 18px; border-bottom: 2px solid #d8dfeb; }
.student-learning-header span, .student-learning-kicker { color: var(--learning-blue); font-size: 13px; font-weight: 950; letter-spacing: .06em; }
.student-learning-header h1 { margin: 8px 0; color: #142f5d; font-size: clamp(37px, 4vw, 54px); line-height: 1; }
.student-learning-header p { margin: 0; color: var(--learning-muted); font-weight: 750; }
.student-learning-header img { width: 225px; height: 135px; object-fit: contain; filter: drop-shadow(0 7px 6px rgba(37, 61, 96, .16)); }
.student-learning-header time { min-height: 86px; display: grid; place-items: center; padding: 15px; border: 1px solid #d8dfeb; border-radius: 15px; background: #ffffffd6; font-size: 17px; font-weight: 900; text-align: center; }

.student-learning-panel { padding: 22px 14px 0; }
.student-learning-panel > h2 { margin: 0 0 15px; color: #173c76; font-size: 26px; }
.student-learning-next { display: grid; grid-template-columns: 92px minmax(0, 1fr) 155px; align-items: center; gap: 20px; padding: 22px; border: 1px solid var(--learning-line); border-radius: 18px; background: #fffaf0cf; }
.student-learning-next img { width: 82px; height: 82px; object-fit: contain; }
.student-learning-next h2 { margin: 0 0 7px; color: #173c76; font-size: 25px; }
.student-learning-next p { margin: 0; color: var(--learning-muted); font-weight: 750; }
.student-learning-next a, .student-learning-next button { min-height: 52px; display: grid; place-items: center; border: 1px solid #0e4c9a; border-radius: 14px; color: #fff; background: linear-gradient(#2377d6, #0957b9); box-shadow: 0 4px 0 #0b438a; font: inherit; font-weight: 950; text-decoration: none; }
.student-learning-availability { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.student-learning-availability article { display: grid; gap: 5px; padding: 17px; border: 1px solid #ddd4c2; border-radius: 15px; background: #ffffffa3; text-align: center; }
.student-learning-availability strong { color: #1768c9; font-size: 24px; }
.student-learning-availability span { color: var(--learning-muted); font-size: 12px; font-weight: 850; }

.student-learning-tool-list { overflow: hidden; padding: 3px 18px; border: 1px solid var(--learning-line); border-radius: 18px; background: #fffaf0b8; }
.student-learning-tool { min-height: 86px; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 126px; align-items: center; gap: 16px; padding: 9px 12px; color: var(--learning-ink); text-decoration: none; }
.student-learning-tool:not(:last-child) { border-bottom: 1px dashed #d4b77c; }
.student-learning-tool img { width: 58px; height: 58px; object-fit: contain; }
.student-learning-tool > span { display: grid; gap: 3px; }
.student-learning-tool strong { color: #244b91; font-size: 20px; }
.student-learning-tool small { color: #4e596a; font-size: 12px; font-weight: 750; }
.student-learning-tool em { padding: 5px 10px; border: 1px solid #cfd9e8; border-radius: 999px; color: #49617e; background: #f4f8fd; font-size: 11px; font-style: normal; font-weight: 900; white-space: nowrap; }
.student-learning-tool b { min-height: 46px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: #1768c9; box-shadow: 0 3px 0 #0b438a; font-size: 15px; }
.student-learning-tool.is-pending { opacity: .7; }
.student-learning-tool.is-pending b { color: #655f54; background: #e8e4da; box-shadow: 0 3px 0 #c5bfb1; }
.student-learning-note { margin: 14px 0 0; padding: 13px 16px; border: 1px solid #e5d1a5; border-radius: 14px; color: #5d5342; background: #fff9e9; font-size: 13px; font-weight: 800; }
.student-learning-pending { min-height: 380px; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }
.student-learning-pending[hidden] { display: none; }
.student-learning-pending img { width: 180px; height: 150px; object-fit: contain; }
.student-learning-pending h2 { margin: 0; }
.student-learning-pending p { max-width: 610px; margin: 0; color: var(--learning-muted); font-weight: 750; line-height: 1.65; }
.student-learning-action { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; padding: 11px 18px; background: #326b61; color: #fff; font-weight: 900; text-decoration: none; }
.student-learning-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.student-learning-action.is-secondary { border: 1px solid #326b61; background: #fff; color: #285a52; }
.student-learning-status { margin: 18px 14px 0; color: #68758b; font-size: 12px; font-weight: 800; text-align: right; }

.student-learning-page.is-materials-view .student-learning-paper-content { padding-top: 16px; }
.student-learning-page.is-materials-view .student-learning-header { min-height: 92px; grid-template-columns: minmax(0, 1fr) 118px 174px; gap: 12px; padding-bottom: 10px; }
.student-learning-page.is-materials-view .student-learning-header span { font-size: 10px; }
.student-learning-page.is-materials-view .student-learning-header h1 { margin: 4px 0; font-size: clamp(27px, 2.8vw, 36px); }
.student-learning-page.is-materials-view .student-learning-header p { font-size: 12px; }
.student-learning-page.is-materials-view .student-learning-header img { width: 112px; height: 70px; }
.student-learning-page.is-materials-view .student-learning-header time { grid-column: auto; min-height: 52px; padding: 8px; font-size: 13px; }

.student-materials-today { padding: 10px 4px 0; }
.student-materials-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d9e1eb; padding-bottom: 9px; }
.student-materials-viewbar > div { width: min(100%, 540px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #cbd5e1; border-radius: 999px; overflow: hidden; background: #f4f6f8; }
.student-materials-viewbar [role="tab"] { min-height: 44px; border: 0; background: transparent; color: #637185; font: inherit; font-size: 13px; font-weight: 950; }
.student-materials-viewbar [role="tab"][aria-selected="true"] { border-radius: 999px; background: linear-gradient(#377fd0, #1764b7); color: #fff; box-shadow: inset 0 1px rgb(255 255 255 / 55%); }
.student-materials-help { min-height: 44px; border: 1px solid #b7c9db; border-radius: 11px; background: #fff; padding: 0 13px; color: #2d659e; font: inherit; font-size: 10px; font-weight: 900; white-space: nowrap; }
.student-materials-archive { padding-top: 9px; }
.student-materials-archive[hidden], .student-materials-daily[hidden] { display: none; }
.student-materials-archive-toolbar { display: grid; grid-template-columns: minmax(190px, 1fr) repeat(3, 132px) auto; align-items: center; gap: 8px; padding-bottom: 9px; }
.student-materials-archive-toolbar label { min-width: 0; }
.student-materials-archive-toolbar input,
.student-materials-archive-toolbar select { width: 100%; min-height: 42px; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; padding: 0 11px; color: #34445b; font: inherit; font-size: 11px; font-weight: 800; }
.student-materials-archive-search { position: relative; display: block; }
.student-materials-archive-search > span[aria-hidden] { position: absolute; z-index: 1; top: 50%; left: 12px; color: #6b7c91; font-size: 21px; transform: translateY(-52%); }
.student-materials-archive-search input { padding-left: 36px; }
.student-materials-archive-toolbar > strong { color: #5d6c7d; font-size: 10px; white-space: nowrap; }
.student-materials-archive-board { overflow: hidden; border: 1px solid #d2d9e2; border-radius: 10px; background: #fff; }
.student-materials-archive-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.student-materials-archive-table th { height: 36px; border-bottom: 1px solid #d8dee6; background: #f8fafc; padding: 0 9px; color: #53647a; font-size: 10px; font-weight: 950; text-align: left; }
.student-materials-archive-table td { height: 43px; border-bottom: 1px solid #e3e7ec; padding: 6px 9px; color: #33455e; font-size: 10px; font-weight: 780; }
.student-materials-archive-table tbody tr:last-child td { border-bottom: 0; }
.student-materials-archive-table tbody tr:hover { background: #f7fbff; }
.student-materials-archive-table th:nth-child(1), .student-materials-archive-table td:nth-child(1) { width: 132px; }
.student-materials-archive-table th:nth-child(2), .student-materials-archive-table td:nth-child(2) { width: 62px; text-align: center; }
.student-materials-archive-table th:nth-child(3), .student-materials-archive-table td:nth-child(3) { width: 90px; text-align: center; }
.student-materials-archive-table th:nth-child(4), .student-materials-archive-table td:nth-child(4) { width: 86px; }
.student-materials-archive-table th:nth-child(6), .student-materials-archive-table td:nth-child(6) { width: 76px; text-align: center; }
.student-materials-archive-title { display: block; overflow: hidden; color: #164477; font-size: 11px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.student-materials-kind { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; border-radius: 7px; background: #e8f6e5; padding: 0 8px; color: #3f7b29; font-size: 9px; font-weight: 950; }
.student-materials-kind[data-kind="reference"] { background: #e5f2ff; color: #1768c9; }
.student-materials-archive-open { min-width: 64px; min-height: 44px; border: 1px solid #8db9e8; border-radius: 999px; background: #fff; color: #1768c9; font: inherit; font-size: 9px; font-weight: 950; }
.student-materials-archive-empty td { height: 210px; color: #718095; font-size: 11px; text-align: center !important; }
.student-materials-archive-pagination { min-height: 44px; display: flex; align-items: end; justify-content: center; gap: 5px; }
.student-materials-archive-pagination button { min-width: 44px; min-height: 44px; border: 1px solid #cbd6e2; border-radius: 9px; background: #fff; color: #52657c; font: inherit; font-size: 10px; font-weight: 900; }
.student-materials-archive-pagination button[aria-current="page"] { border-color: #2d73ba; background: #337bc4; color: #fff; }
.student-materials-archive-pagination button:disabled { opacity: .4; }
.student-materials-daily { padding-top: 10px; }
.student-materials-datebar { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px auto; align-items: center; gap: 10px; border-bottom: 1px solid #d9e1eb; padding: 0 4px 14px; }
.student-materials-datebar>button { width: 44px; height: 44px; border: 1px solid #b8c7d9; border-radius: 50%; background: #fff; color: #245f9f; font-size: 27px; font-weight: 900; }
.student-materials-datebar>button:disabled { opacity: .35; }
.student-materials-datebar h2 { display: inline; margin: 0 9px 0 0; color: #173c76; font-size: 23px; }
.student-materials-datebar time { color: #64748a; font-size: 11px; font-weight: 850; }
.student-materials-datebar .student-learning-kicker { margin: 0 0 4px; font-size: 10px; }
.student-materials-filter { display: flex; gap: 5px; }
.student-materials-filter button { min-height: 44px; border: 1px solid #c3d0df; border-radius: 999px; background: #fff; padding: 0 11px; color: #53677f; font: inherit; font-size: 10px; font-weight: 900; }
.student-materials-filter button[aria-pressed="true"] { border-color: #2f79c8; background: #e9f4ff; color: #135caa; }
.student-materials-reader { display: grid; min-height: 460px; grid-template-columns: minmax(210px,28%) minmax(0,1fr); gap: 14px; margin-top: 14px; }
.student-materials-student-list { display: grid; align-content: start; gap: 8px; max-height: 560px; overflow: auto; border: 1px solid #d8cfbd; border-radius: 15px; background: #fffaf0; padding: 10px; }
.student-materials-student-row { display: grid; width: 100%; gap: 7px; border: 1px solid #dfd4bf; border-radius: 12px; background: #fff; padding: 12px; color: #243453; text-align: left; cursor: pointer; }
.student-materials-student-row[aria-current="true"] { border-color: #498fd3; background: #eff7ff; box-shadow: inset 4px 0 #3984ce; }
.student-materials-student-row>span { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.student-materials-student-row em { border-radius: 999px; background: #e4f5ff; padding: 4px 7px; color: #1768c9; font-size: 9px; font-style: normal; font-weight: 950; }
.student-materials-student-row em[data-kind="review"] { background: #e8f6e5; color: #3f7b29; }
.student-materials-student-row b { color: #7d8999; font-size: 9px; }
.student-materials-student-row strong { font-size: 13px; line-height: 1.4; }
.student-materials-student-row small { color: #68778b; font-size: 10px; }
.student-materials-list-empty { margin: 0; padding: 45px 14px; color: #77859a; font-size: 11px; font-weight: 800; line-height: 1.7; text-align: center; }
.student-materials-detail { min-width: 0; overflow: hidden; border: 1px solid #d8cfbd; border-radius: 15px; background: #fff; }
.student-materials-detail-empty { min-height: 440px; display: grid; place-content: center; justify-items: center; padding: 30px; color: #728096; text-align: center; }
.student-materials-detail-empty[hidden] { display: none; }
.student-materials-detail-empty img { width: 160px; height: 105px; object-fit: contain; }
.student-materials-detail-empty strong { color: #38577a; font-size: 15px; }
.student-materials-detail-empty p { max-width: 440px; margin: 7px 0 0; font-size: 11px; line-height: 1.6; }
#studentMaterialsDetailContent>header { border-bottom: 1px solid #e1e6ec; padding: 20px 24px 16px; }
#studentMaterialsDetailContent>header span { display: inline-flex; border-radius: 999px; background: #e6f6e2; padding: 5px 9px; color: #3c7a28; font-size: 9px; font-weight: 950; }
#studentMaterialsDetailContent>header span[data-kind="reference"] { background: #e6f3ff; color: #2169ad; }
#studentMaterialsDetailContent>header h2 { margin: 8px 0 5px; color: #193e70; font-size: 25px; }
#studentMaterialsDetailContent>header p { margin: 0; color: #758398; font-size: 10px; font-weight: 800; }
.student-materials-detail nav { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid #e3e8ee; padding: 10px 16px; background: #f8fafc; }
.student-materials-detail nav[hidden] { display: none; }
.student-materials-detail nav button { flex: 0 0 auto; min-height: 44px; border: 1px solid #cad5e2; border-radius: 8px; background: #fff; padding: 0 10px; color: #4f6074; font: inherit; font-size: 9px; font-weight: 900; }
.student-materials-detail nav button[aria-current="true"] { border-color: #4088cf; background: #eaf4fe; color: #1b63a9; }
.student-materials-blocks { min-height: 330px; max-height: 430px; overflow: auto; padding: 22px 25px 40px; color: #29394d; font-size: 13px; line-height: 1.72; }
.student-materials-blocks h2,.student-materials-blocks h3 { margin: 24px 0 9px; color: #183f74; }
.student-materials-blocks h2:first-child,.student-materials-blocks h3:first-child { margin-top: 0; }
.student-materials-blocks p { margin: 8px 0; white-space: pre-wrap; }
.student-materials-blocks blockquote { margin: 14px 0; border-left: 4px solid #70a6d8; background: #f1f7fc; padding: 10px 14px; }
.student-materials-blocks table { width: 100%; border-collapse: collapse; }
.student-materials-blocks th,.student-materials-blocks td { border: 1px solid #d5dee8; padding: 8px; }
.student-materials-blocks .teacher-lesson-flow-resource { display: inline-flex; margin: 4px 2px; border: 1px solid #a9c6e2; border-radius: 8px; background: #eef7ff; padding: 7px 10px; color: #145b9e; font: inherit; font-size: 11px; font-weight: 900; }
.student-materials-blocks .teacher-lesson-flow-callout { display: flex; gap: 9px; border: 1px solid #dacd9c; border-radius: 12px; background: #fff9dc; padding: 12px; }
.student-materials-blocks .student-material-image { display: grid; justify-items: center; gap: 7px; margin: 18px 0; }
.student-materials-blocks .student-material-image img { display: block; width: auto; max-width: 100%; max-height: 680px; border: 1px solid #d5dee8; border-radius: 12px; background: #fff; object-fit: contain; }
.student-materials-blocks .student-material-image figcaption { color: #68778b; font-size: 10px; font-weight: 800; text-align: center; }
.student-materials-blocks .student-material-image p { border: 1px dashed #b9c8d8; border-radius: 10px; padding: 12px; color: #68778b; }

.student-materials-tutorial-layer { position: fixed; z-index: 10000; inset: 0; background: rgb(7 25 44 / 35%); }
.student-materials-tutorial-layer[hidden] { display: none; }
.student-materials-tutorial-spotlight { position: fixed; border: 4px solid #ffc84d; border-radius: 16px; box-shadow: 0 0 0 9999px rgb(7 25 44 / 44%), 0 0 24px rgb(255 200 77 / 70%); pointer-events: none; }
.student-materials-tutorial-panel { position: fixed; width: min(360px, calc(100vw - 24px)); border: 2px solid #e0ad39; border-radius: 17px; background: #fffdf5; padding: 17px; color: #253853; box-shadow: 0 16px 42px rgb(26 53 82 / 28%); }
.student-materials-tutorial-panel small { color: #3776b3; font-size: 10px; font-weight: 950; }
.student-materials-tutorial-panel h2 { margin: 6px 0; color: #173f70; font-size: 19px; }
.student-materials-tutorial-panel p { margin: 0; font-size: 12px; font-weight: 750; line-height: 1.6; }
.student-materials-tutorial-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 13px; }
.student-materials-tutorial-actions button { min-height: 38px; border: 1px solid #b5c7da; border-radius: 9px; background: #fff; padding: 0 10px; color: #4d6078; font: inherit; font-size: 10px; font-weight: 900; }
.student-materials-tutorial-actions button[data-tutorial-action="dismiss"] { color: #87542b; }
.student-materials-tutorial-actions button[data-tutorial-action="next"] { border-color: #1f69b3; background: #2676c6; color: #fff; }

.student-learning-notebook.is-game-lobby { padding-top: 0; }
.student-learning-page.is-game-lobby-view > .student-learning-session { display: none; }
.student-game-lobby {
  width: 100%;
  padding: 0 0 24px;
  container-type: inline-size;
}
.student-game-lobby-header {
  position: relative;
  isolation: isolate;
  min-height: 320px;
  display: grid;
  grid-template-rows: minmax(178px, 1fr) auto;
  gap: 10px;
  overflow: hidden;
  padding: 16px clamp(136px, 11vw, 168px) 18px;
  border: 3px solid #d8ae46;
  border-radius: 30px;
  background: #d9efff url('/game-lobby-assets/board-championship-hero-bg-v4.png') center / cover no-repeat;
  box-shadow: 0 10px 24px rgb(25 88 151 / 22%), inset 0 0 0 2px rgb(255 255 255 / 72%);
}
.student-game-lobby-header::before,
.student-game-lobby-header::after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 54px;
  width: clamp(118px, 9vw, 150px);
  aspect-ratio: 1;
  background: url('/game-lobby-assets/board-top5-trophy-v4.png') center / contain no-repeat;
  pointer-events: none;
}
.student-game-lobby-header::before { left: 13px; }
.student-game-lobby-header::after { right: 13px; }
.student-game-lobby-header > * { position: relative; z-index: 2; }
.student-game-lobby-intro {
  width: min(100%, 920px);
  display: grid;
  grid-template-columns: clamp(150px, 12vw, 180px) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 3px clamp(16px, 2vw, 27px);
  margin: 0 auto;
}
.student-game-lobby-intro > div { grid-column: 2; grid-row: 1; align-self: end; text-align: center; }
.student-game-lobby-intro h1 {
  margin: 0 0 8px;
  color: #0b4d9f;
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-shadow: 0 2px 0 rgb(255 255 255 / 76%);
}
.student-game-lobby-intro p { margin: 0; color: #185fae; font-size: clamp(14px, 1.25vw, 18px); font-weight: 900; line-height: 1.4; }
.student-game-lobby-emblem {
  grid-column: 1;
  grid-row: 1 / 3;
  width: clamp(150px, 12vw, 180px);
  height: clamp(150px, 12vw, 180px);
  display: grid;
  place-items: center;
}
.student-game-lobby-emblem img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px rgb(17 65 121 / 22%)); }
.student-game-lobby-count {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: center;
  min-width: 148px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 2px solid #b8d6ef;
  border-radius: 20px;
  background: rgb(255 255 255 / 92%);
  color: #0b4d9f;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 5px 12px rgb(49 105 169 / 15%);
}
.student-game-lobby-records {
  width: min(100%, 860px);
  min-height: 82px;
  display: grid;
  grid-template-columns: 68px auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  padding: 6px 13px;
  border: 2px solid #d3a547;
  border-radius: 18px;
  background: rgb(255 252 240 / 94%);
  color: #392719;
  box-shadow: 0 6px 13px rgb(63 121 62 / 12%);
}
.student-game-lobby-records img { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 4px 3px rgb(77 52 0 / 24%)); }
.student-game-lobby-records strong { font-size: clamp(14px, 1vw, 16px); font-weight: 950; white-space: nowrap; }
.student-game-lobby-records span { color: #2468bf; font-size: 13px; font-weight: 900; text-align: center; }
.student-game-lobby-list { padding-top: clamp(18px, 2vw, 26px); }
.student-game-lobby-list > h2 { margin: 0 0 14px; color: #0b4d9f; font-size: clamp(22px, 2vw, 30px); }
.student-game-lobby-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.25vw, 16px); align-items: stretch; }
.student-game-lobby-card {
  --game-card-accent: #2b94df;
  min-height: 182px;
  display: grid;
  grid-template-columns: clamp(92px, 7vw, 104px) minmax(0, 1fr);
  grid-template-rows: auto minmax(3.1em, 1fr) auto auto;
  align-items: center;
  gap: 5px clamp(10px, .9vw, 14px);
  padding: clamp(10px, .85vw, 13px);
  border: 2px solid var(--game-card-accent);
  border-radius: 22px;
  background: rgb(255 255 255 / 94%);
  color: #291d14;
  box-shadow: 0 8px 18px rgb(70 117 151 / 12%);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.student-game-lobby-card[data-game-id='typingDefense'],
.student-game-lobby-card[data-game-id='othello'] { --game-card-accent: #58a83f; }
.student-game-lobby-card[data-game-id='janggi'] { --game-card-accent: #f25b82; }
.student-game-lobby-card[data-game-id='omok'],
.student-game-lobby-card[data-game-id='yut'] { --game-card-accent: #ff8b1e; }
.student-game-lobby-card[data-game-id='pentago'] { --game-card-accent: #a25cdd; }
.student-game-lobby-card[data-game-id='alkkagi'] { --game-card-accent: #2aa8cc; }
.student-game-lobby-card[data-game-id='typingDuel'] { --game-card-accent: #4f7ed7; }
.student-game-lobby-card:hover { background: #fff; box-shadow: 0 10px 22px rgb(47 105 150 / 18%); }
.student-game-lobby-card:focus-visible { outline: 4px solid rgb(33 104 199 / 28%); outline-offset: 2px; }
.student-game-lobby-visual {
  grid-column: 1;
  grid-row: 1 / 5;
  position: relative;
  isolation: isolate;
  width: clamp(92px, 7vw, 104px);
  height: clamp(92px, 7vw, 104px);
  display: grid;
  place-items: center;
  padding: clamp(6px, .45vw, 7px);
  border: 3px solid rgb(255 255 255 / 90%);
  border-radius: 50%;
  background: var(--game-card-accent);
  box-shadow: 0 0 0 3px var(--game-card-accent), inset 0 2px 0 rgb(255 255 255 / 34%), 0 5px 10px rgb(43 91 123 / 14%);
}
.student-game-lobby-sparkles { position: absolute; z-index: 0; top: 50%; left: 50%; width: calc(100% + 22px); height: calc(100% + 22px); max-width: none; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; }
.student-game-lobby-artwork { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 5px rgb(48 64 72 / 16%)); }
.student-game-lobby-card > strong { grid-column: 2; grid-row: 1; align-self: end; color: #291d14; font-size: clamp(18px, 1.35vw, 23px); line-height: 1.16; letter-spacing: -.025em; }
.student-game-lobby-card > p { grid-column: 2; grid-row: 2; align-self: start; display: -webkit-box; overflow: hidden; margin: 0; color: #4e4035; font-size: clamp(12px, .82vw, 14px); font-weight: 750; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.student-game-lobby-availability { grid-column: 2; grid-row: 3; display: flex; align-items: center; gap: 6px; min-width: 0; color: #4e4035; font-size: 12px; font-weight: 850; }
.student-game-lobby-availability > span { color: #6d6259; }
.student-game-lobby-availability b { overflow: hidden; color: var(--game-card-accent); text-overflow: ellipsis; white-space: nowrap; }
.student-game-lobby-card > small { grid-column: 2; grid-row: 4; justify-self: start; min-height: 28px; display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--game-card-accent); border-radius: 10px; background: #f7fbff; color: var(--game-card-accent); font-size: 12px; font-weight: 900; }
.student-game-lobby-card > em { grid-column: 2; grid-row: 4; justify-self: end; min-width: 112px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 15px; background: #4d9b2d; color: #fff; font-size: 12px; font-style: normal; font-weight: 950; text-shadow: 0 1px 0 rgb(32 91 22 / 42%); }

@container (max-width: 960px) {
  .student-game-lobby-header { min-height: 286px; padding: 14px 18px 16px; }
  .student-game-lobby-header::before, .student-game-lobby-header::after { display: none; }
  .student-game-lobby-intro { width: min(100%, 820px); grid-template-columns: 132px minmax(0, 1fr); }
  .student-game-lobby-emblem { width: 132px; height: 132px; }
  .student-game-lobby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 700px) {
  .student-game-lobby-header { min-height: 0; padding: 10px; border-radius: 20px; }
  .student-game-lobby-intro { grid-template-columns: 92px minmax(0, 1fr); gap: 3px 11px; }
  .student-game-lobby-intro h1 { font-size: clamp(25px, 6vw, 32px); }
  .student-game-lobby-intro p { font-size: 12px; }
  .student-game-lobby-emblem { width: 92px; height: 92px; }
  .student-game-lobby-count { min-width: 96px; min-height: 40px; padding: 5px 10px; border-radius: 14px; font-size: 14px; }
  .student-game-lobby-records { grid-template-columns: 58px minmax(0, 1fr); }
  .student-game-lobby-records img { width: 58px; height: 58px; grid-row: 1 / 3; }
  .student-game-lobby-records span { text-align: left; }
  .student-game-lobby-grid { grid-template-columns: 1fr; }
}

@container (max-width: 560px) {
  .student-materials-viewbar { align-items: stretch; flex-direction: column; }
  .student-materials-viewbar > div { width: 100%; }
  .student-materials-help { align-self: flex-end; }
  .student-materials-archive-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-materials-archive-search { grid-column: 1 / -1; }
  .student-materials-archive-toolbar > strong { grid-column: 1 / -1; text-align: right; }
  .student-materials-archive-board { overflow: visible; border: 0; background: transparent; }
  .student-materials-archive-table, .student-materials-archive-table tbody { display: grid; gap: 8px; }
  .student-materials-archive-table thead { display: none; }
  .student-materials-archive-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #d2d9e2; border-radius: 11px; background: #fff; padding: 8px; }
  .student-materials-archive-table td { width: auto !important; height: auto; display: grid; gap: 2px; border: 0; padding: 4px 6px; text-align: left !important; }
  .student-materials-archive-table td::before { content: attr(data-label); color: #7a8798; font-size: 8px; font-weight: 900; }
  .student-materials-archive-table td:nth-child(5) { grid-column: 1 / 4; grid-row: 1; }
  .student-materials-archive-table td:nth-child(6) { grid-column: 4; grid-row: 1; align-content: center; justify-items: end; }
  .student-materials-archive-table td:nth-child(-n+4) { grid-row: 2; }
  .student-materials-archive-title { white-space: normal; }
  .student-materials-archive-empty { display: block !important; }
  .student-materials-archive-empty td { display: block; height: auto; padding: 60px 15px; text-align: center !important; }
  .student-materials-archive-empty td::before { display: none; }
}

@media (max-width: 1100px) {
  .student-learning-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .student-learning-sidebar { min-height: calc(100dvh - 24px); padding: 14px 10px; }
  .student-learning-brand img { width: 58px; height: 58px; }
  .student-learning-brand strong { font-size: 20px; }
  .student-learning-sidebar nav a { min-height: 46px; padding: 0 12px; font-size: 14px; }
  .student-learning-tabs { margin-inline: 55px 38px; }
  .student-learning-tabs button { min-height: 58px; }
  .student-learning-paper { min-height: 780px; padding: 29px 34px 39px 66px; }
  .student-learning-paper-content { min-height: 690px; padding: 20px; }
  .student-learning-header { grid-template-columns: minmax(0, 1fr) 160px; }
  .student-learning-header time { grid-column: 1 / -1; min-height: 44px; padding: 8px; }
  .student-learning-header img { width: 160px; height: 105px; }
  .student-learning-tool { grid-template-columns: 54px minmax(0, 1fr) 112px; }
  .student-learning-tool em { display: none; }
  .student-materials-datebar { grid-template-columns: 44px minmax(0,1fr) 44px; }
  .student-materials-filter { grid-column: 1 / -1; justify-content: center; }
  .student-materials-reader { grid-template-columns: minmax(180px,32%) minmax(0,1fr); }
}

@media (max-width: 820px) {
  body.student-learning-page { min-width: 700px; }
  .student-learning-layout { grid-template-columns: 160px minmax(0, 1fr); }
  .student-learning-sidebar nav a { font-size: 13px; }
  .student-learning-tabs { margin-inline: 48px 30px; gap: 4px; }
  .student-learning-tabs button { min-height: 56px; font-size: 13px; }
  .student-learning-paper { padding-left: 58px; padding-right: 27px; }
  .student-learning-next { grid-template-columns: 74px minmax(0, 1fr); }
  .student-learning-next a, .student-learning-next button { grid-column: 1 / -1; }
  .student-learning-availability { grid-template-columns: 1fr; }
  .student-materials-reader { grid-template-columns: 1fr; }
  .student-materials-student-list { max-height: 270px; }
  .student-materials-detail { min-height: 480px; }
}