:root {
  color-scheme: light;
  --s5-ink: #172a46;
  --s5-muted: #4e6380;
  --s5-line: #cfdaea;
  --s5-paper: #fff;
  --s5-canvas: #f0f5fc;
  --s5-blue: #165ab7;
  --s5-green: #176d45;
}

html:has(.s5-top) { background: var(--s5-canvas); }
body:has(> .s5-top), body.student-login-page { min-width: 0; background: var(--s5-canvas); color: var(--s5-ink); }
.s5-top, .s5-shortcuts { box-sizing: border-box; font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif; }
.s5-top {
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(12px, 2vw, 30px);
  padding-inline: max(12px, calc((100% - 1320px) / 2));
  background: var(--s5-paper);
  border-bottom: 1px solid var(--s5-line);
}
.s5-top :is(a, summary) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 9px;
  color: var(--s5-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.s5-top a[hidden], .s5-shortcut[hidden] { display: none; }
.s5-top .s5-brand { padding-inline: 0; gap: 8px; font-size: 16px; font-weight: 850; }
.s5-brand::before { content: ''; width: 13px; height: 12px; border-inline: 3px solid var(--s5-green); transform: skewX(-28deg); }
.s5-top nav { display: flex; flex-wrap: wrap; align-items: stretch; }
.s5-top :is(a[aria-current], a[data-s5-section-active], details[data-current] > summary) { color: var(--s5-blue); box-shadow: inset 0 -3px var(--s5-blue); }
.s5-top summary { cursor: pointer; list-style: none; gap: 5px; }
.s5-top summary::after { content: ''; width: 6px; height: 6px; border-inline-end: 1px solid; border-bottom: 1px solid; transform: translateY(-2px) rotate(45deg); }
.s5-top details > div { position: absolute; inset-inline: auto 12px; width: min(440px, calc(100% - 24px)); max-height: min(66vh, 440px); overflow: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 8px; border: 1px solid var(--s5-line); border-radius: 8px; background: var(--s5-paper); box-sizing: border-box; }
.s5-top details:not([open]) > div { display: none; }
.s5-top :is(a, summary):hover { background: #e8f1ff; }
.s5-top :is(a, summary):focus-visible, .s5-shortcut:focus-visible { outline: 2px solid var(--s5-blue); outline-offset: -2px; }
.s5-student { margin-inline-start: auto; color: var(--s5-muted); font-size: 13px; }
.s5-student:empty { display: none; }

html body:has(> .s5-top) { height: auto; min-height: 100dvh; overflow: visible; }
html body:has(> .s5-top) :is(.economy-dashboard-side, .economy-dashboard-mobile-nav, .student-economy-sidebar-shell, .avatar-store-mobile-nav) { display: none; }
html body:has(> .s5-top) :is(.student-economy-shell, .economy-dashboard-stage, .economy-dashboard-app) {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 1320px;
  height: auto;
  min-height: 0;
  margin-inline: auto;
  background: none;
  overflow: visible;
}
html body:has(> .s5-top) :is(.student-economy-main-shell, .economy-dashboard-main, .economy-dashboard-content, .economy-course-activity) {
  width: 100%; min-width: 0; height: auto; min-height: 0; overflow: visible; background: none;
}
body:has(> .s5-top) :is(.student-economy-shell, .economy-dashboard-stage) { padding: clamp(12px, 2vw, 24px); box-sizing: border-box; }

html .economy-dashboard-main .student-home-redesign {
  --home-ink: var(--s5-ink);
  --home-line: var(--s5-line);
  display: grid;
  gap: 14px;
  padding: 0;
  color: var(--s5-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.s5-shortcuts h1 { margin: 0 0 12px; font-size: 26px; letter-spacing: -.025em; }
.s5-shortcuts h2 { margin-block: 0 8px; font-size: 15px; }
.s5-shortcuts > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.s5-shortcuts .s5-shortcut:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 52px; padding-inline: 12px; border-inline-start: 4px solid var(--shortcut-accent); border-radius: 6px; background: var(--shortcut-bg); font-weight: 750; }
.s5-shortcut::after { content: '›'; }
.s5-shortcut--blue { --shortcut-accent: #4285c4; --shortcut-bg: #dcecff; }
.s5-shortcut--green { --shortcut-accent: #499e72; --shortcut-bg: #def3e8; }
.s5-shortcut--violet { --shortcut-accent: #8062bf; --shortcut-bg: #eee5fd; }
.s5-shortcut--amber { --shortcut-accent: #a96b21; --shortcut-bg: #fdf0de; }
html .economy-dashboard-main .student-home-identity-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0 0 10px; min-height: 0; }
html .economy-dashboard-main .student-home-identity-bar .student-home-identity-actions { margin-inline-start: auto; }
html .economy-dashboard-main .student-home-identity-bar :is(.student-home-rank, .student-home-class-pill) { display: none; }
html .economy-dashboard-main .student-home-summary-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: 'tasks schedule' 'notice meal'; gap: 10px 20px; }
.student-home-summary-card--tasks { grid-area: tasks; }
.student-home-summary-card--schedule { grid-area: schedule; }
.student-home-summary-card--notice { grid-area: notice; }
.student-home-summary-card--meal { grid-area: meal; }
html .economy-dashboard-main .student-home-summary-card { min-height: 0; background: var(--s5-paper); border: 1px solid var(--s5-line); border-radius: 8px; box-shadow: none; gap: 6px; padding: 12px; }
html .economy-dashboard-main .student-home-summary-card header { display: flex; flex-wrap: wrap; min-height: 0; }
html .economy-dashboard-main .student-home-summary-icon { display: none; }
html .economy-dashboard-main .student-home-summary-card :is(header small, small, a, button strong, button em, button span) { font-size: 13px; }
html .economy-dashboard-main .student-home-summary-card > a { min-height: 44px; background: #e9f5ed; border-color: #bedcc8; color: var(--s5-green); }
html .economy-dashboard-main .student-home-summary-card button { min-height: 44px; }
html .economy-dashboard-main .student-home-schedule-actions { position: static; }
html .economy-dashboard-main .student-home-schedule-actions button { min-width: 44px; }

html body:has(> .s5-top) .student-quest-main { display: grid; gap: 12px; }
html body:has(> .s5-top) :is(.student-quest-hero,.student-quest-chest,.student-quest-ledger) { min-height: 0; margin: 0; padding: 12px 16px; background: var(--s5-paper); border: 1px solid var(--s5-line); border-radius: 8px; box-shadow: none; color: var(--s5-ink); }
html body:has(> .s5-top) .student-quest-chest { padding-inline-end: 86px; background: #e6f3e9; }
html body:has(> .s5-top) .student-quest-chest-hotspot { inset: 12px 12px auto auto; width: 60px; height: 54px; background: #cce8d5; border-radius: 6px; }
html body:has(> .s5-top) .student-quest-chest-hotspot > img { display: block; width: 100%; height: 100%; object-fit: contain; }
html body:has(> .s5-top) .student-quest-ledger::before, html body:has(> .s5-top) .student-quest-ledger::after { content: none; }
html body:has(> .s5-top) :is(.student-quest-hero h1, .student-quest-hero-copy > span, .student-quest-summary :is(dd,dt), .student-quest-ledger-heading h2) { color: var(--s5-ink); text-shadow: none; }
html body:has(> .s5-top) .student-quest-hero h1 { font: 800 25px/1.2 system-ui, sans-serif; white-space: normal; }
html body:has(> .s5-top) .student-quest-hero-copy p { display: none; }
html body:has(> .s5-top) .student-quest-summary div { background: #e8f1ff; }
html body:has(> .s5-top) .student-quest-tabs button { min-height: 44px; padding-inline: 10px; font-size: 13px; background: #eef4fb; border: 1px solid var(--s5-line); color: var(--s5-ink); box-shadow: none; }
html body:has(> .s5-top) .student-quest-tabs button.is-active { background: var(--s5-blue); color: white; }

html body.student-notices-page { --notice-bg: var(--s5-canvas); --notice-panel: #fff; --notice-panel-strong: #e8f1fb; --notice-line: var(--s5-line); --notice-text: var(--s5-ink); --notice-muted: var(--s5-muted); --notice-accent: var(--s5-blue); --notice-accent-soft: #e8f1ff; }
html body:has(> .s5-top) .student-notice-shell { height: auto; min-height: calc(100dvh - 60px); }
html body:has(> .s5-top) .student-notice-layout { min-height: inherit; grid-template-columns: minmax(160px, 29%) minmax(0, 1fr); }
html body:has(> .s5-top) .student-notice-list-header { background: var(--s5-paper); }
html body:has(> .s5-top) .student-notice-brand h1 { color: var(--s5-ink); }
html body:has(> .s5-top) .student-class-stock-shell { min-width: 0; width: 100%; }
html body.student-login-page .student-login-shell { grid-template-columns: minmax(0, 1fr); width: min(100% - 32px, 460px); min-height: 0; margin: clamp(20px, 9vh, 90px) auto; padding: 0; background: var(--s5-paper); border: 1px solid var(--s5-line); border-radius: 12px; box-shadow: none; }
html body.student-login-page :is(.student-login-visual, .student-login-admin-entry, .student-login-back) { display: none; }
html body.student-login-page .student-login-panel { min-width: 0; padding: clamp(18px, 5vw, 34px); }

@media (max-width: 780px) {
  .s5-top nav { order: 3; width: 100%; }
  .s5-top :is(a, summary) { font-size: 13px; }
  .s5-shortcuts > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  html .economy-dashboard-main .student-home-summary-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'tasks' 'notice' 'schedule' 'meal'; }
  html body:has(> .s5-top) .student-notice-layout { grid-template-columns: minmax(0, 1fr); }
}

html body:has(> .s5-top) :is(.student-learning-frame, .student-shop-notebook-frame, .economy-bank-notebook-frame, .student-game-lobby-emblem, #studentLearningHeaderArt) { display: none; }
html body:has(> .s5-top) :is(.student-learning-paper-content, .student-shop-notebook-sheet, .economy-bank-notebook-shell, .student-badge-paper) {
  min-width: 0;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid var(--s5-line);
  border-radius: 8px;
  background: var(--s5-paper);
  box-shadow: none;
}
html body:has(> .s5-top) :is(.student-learning-header, .student-game-lobby-header, .economy-bank-overview-hero, .economy-wallet-token-hero) {
  min-width: 0;
  color: var(--s5-ink);
  border-color: var(--s5-line);
  background: var(--s5-paper);
  box-shadow: none;
}
html body:has(> .s5-top) .student-learning-tabs button {
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--s5-line);
  border-radius: 6px;
  background: #edf3fa;
  color: var(--s5-ink);
  box-shadow: none;
}
html body:has(> .s5-top) .student-learning-tabs button[aria-selected="true"] { color: #fff; background: var(--s5-blue); }
html body:has(> .s5-top) .student-badge-main { display: block; }

html:has(> body > .s5-top) { overflow: auto; width: auto; height: auto; }
html body:has(> .s5-top) { display: block; width: auto; padding: 0; }
html body:has(> .s5-top) .economy-dashboard-cloud { display: none; }
html body:has(> .s5-top) .economy-dashboard-stage { position: static; margin: 0 auto; border: 0; }
html body:has(> .s5-top) .economy-dashboard-app { margin: 0; padding: 0; }
html body:has(> .s5-top) :is(.economy-dashboard-main, .economy-dashboard-content, .economy-course-activity) { margin: 0; padding: 0; }
html body:has(> .s5-top) .student-home-summary-card button:is([data-student-href], .economy-wallet-notice-item) { min-height: 44px; }

.s5-top [data-s5-phone-link] { display: none; }
.s5-learning-path { width: min(1320px, 100%); margin-inline: auto; padding: 4px clamp(12px, 2vw, 24px) 0; box-sizing: border-box; }
.s5-learning-return { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--s5-blue); font-weight: 700; }
.s5-learning-return::before { content: '‹'; margin-inline-end: 8px; }
body[data-s5-study-focus] > :is(.s5-top, .s5-learning-path),
body[data-s5-page="hanja"]:is([data-hanja-display="focus"], [data-hanja-display="native"]) > .s5-learning-path { display: none; }

@media (max-width: 560px) {
  html body .s5-top nav { order: 3; width: 100%; justify-content: space-between; }
  html body :is(.s5-top nav > a, .s5-top nav > details > summary) { min-height: 44px; padding-inline: 5px; font-size: 13px; }
  html body .s5-top nav > [data-s5-wide-link] { display: none; }
  .s5-top [data-s5-phone-link]:not([hidden]) { display: flex; }
  .s5-top details[data-phone-current] > summary { color: var(--s5-blue); box-shadow: inset 0 -3px var(--s5-blue); }
  .s5-top .s5-student { display: none; }
  .s5-top nav > details > summary { position: absolute; inset: 0 12px auto auto; }
}