:root {
  --ink: #17233f;
  --night: #17284a;
  --blue-night: #20375f;
  --hill: #6c7aa1;
  --deep-green: #344d67;
  --panel: #f4f1e8;
  --paper: #fbfaf6;
  --muted: #4d5870;
  --line: #26395e;
  --lime: #9cc7aa;
  --cyan: #a7c9d8;
  --pink: #8a79b2;
  --gold: #f5c943;
  --orange: #ff8f3d;
  --white: #ffffff;
  --shadow: 0 12px 30px rgba(13, 25, 49, 0.14);
}

/* Public launch: retain account features in code while hiding their entry points. */
html:not([data-account-features="enabled"]) .nav-mypage-trigger,
html:not([data-account-features="enabled"]) .mypage-mega,
html:not([data-account-features="enabled"]) .signup-button,
html:not([data-account-features="enabled"]) .signup-menu {
  display: none !important;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f8f6ef;
  --night: #0d1931;
  --blue-night: #17284a;
  --panel: #101f3b;
  --paper: #17284a;
  --muted: #bec8da;
  --line: #8b9bb8;
  --white: #20375f;
  --shadow: 0 14px 34px rgba(2, 8, 20, 0.36);
}

html.large-text {
  font-size: 112.5%;
}

html.reduce-motion {
  scroll-behavior: auto;
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .main-nav > button {
  color: #f8f6ef;
}

html[data-theme="dark"] :where(.course-tab.locked, .course-card.locked) {
  color: #e8e1ee;
  background: #342f4a;
}

html[data-theme="dark"] :where(input, textarea, select) {
  color: #f8f6ef;
  background: #17284a;
}

/* Dynamic campsite environment and customization layers. */
.hero-scene {
  min-height: min(520px, calc(100vh - 64px));
  padding: 42px clamp(18px, 5vw, 72px) 58px;
  background:
    linear-gradient(180deg, rgba(12, 18, 28, 0.22), rgba(12, 18, 28, 0.58)),
    linear-gradient(90deg, rgba(12, 18, 28, 0.38), transparent 35% 65%, rgba(12, 18, 28, 0.38)),
    url("../images/hero-campsite-study.webp") center / cover no-repeat;
  transition: background-color 1.2s ease, filter 1.2s ease;
}

.hero-scene::before,
.hero-scene::after {
  content: none;
}

[data-camp-environment][data-period="dawn"] { filter: sepia(0.12) saturate(1.08); }
[data-camp-environment][data-period="day"] { filter: brightness(1.08) saturate(0.95); }
[data-camp-environment][data-period="sunset"] { filter: sepia(0.22) saturate(1.16); }
[data-camp-environment][data-period="night"] { filter: brightness(0.76) saturate(0.9); }

.environment-status {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 14;
  margin: 0;
  padding: 7px 9px;
  color: #fffaf0;
  background: rgba(12, 18, 28, 0.72);
  border: 2px solid rgba(255, 250, 240, 0.72);
  border-radius: 2px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.62rem;
  line-height: 1.35;
}

.weather-particles {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
}

.home-shell .weather-particles {
  -webkit-mask: url("../images/hero-study-window-mask.svg") var(--hero-scene-position, center) / cover no-repeat;
  mask: url("../images/hero-study-window-mask.svg") var(--hero-scene-position, center) / cover no-repeat;
}

.weather-particles span {
  position: absolute;
  top: -12%;
  left: var(--weather-x);
  animation-delay: var(--weather-delay);
  animation-duration: var(--weather-speed);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

[data-weather="rain"] .weather-particles span,
[data-weather="storm"] .weather-particles span {
  width: 2px;
  height: 28px;
  background: linear-gradient(180deg, rgba(218, 244, 255, 0), rgba(178, 224, 242, 0.9));
  box-shadow: 10px 14px 0 rgba(178, 224, 242, 0.36);
  animation-name: camp-rain;
  transform: rotate(12deg);
}

[data-weather="snow"] .weather-particles span {
  width: calc(5px + var(--weather-size));
  height: calc(5px + var(--weather-size));
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.65);
  animation-name: camp-snow;
}

@keyframes camp-rain { to { transform: translate(-38px, 650px) rotate(12deg); } }
@keyframes camp-snow { 50% { transform: translate(18px, 300px); } to { transform: translate(-12px, 650px); } }

.camp-category-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.camp-category-tabs button {
  min-height: 44px;
  padding: 8px;
  color: var(--ink);
  background: #e4d6e8;
  border: 3px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
}

.camp-category-tabs button:hover,
.camp-category-tabs button:focus-visible,
.camp-category-tabs button.active {
  background: var(--cyan);
  box-shadow: 3px 3px 0 var(--ink);
  outline: none;
}

.camp-category-panel[hidden] { display: none; }
.camp-card em {
  display: inline-block;
  padding: 3px 5px;
  background: var(--lime);
  border: 2px solid var(--ink);
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.52rem;
  font-style: normal;
}
.camp-item-card.preview { cursor: default; opacity: 0.68; }
.camp-item-card.preview.unique { background: #f3ddff; border-color: #7253a8; }

@media (max-width: 920px) {
  .main-nav { gap: 8px; padding: 12px; }
  .main-nav > a,
  .main-nav > button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 10px 13px;
    color: #fff9ea;
    background: #28345f;
    border: 3px solid #8073aa;
    box-shadow: 3px 3px 0 rgba(10, 13, 28, 0.72);
    text-align: left;
  }
  .main-nav > a:hover,
  .main-nav > a.active,
  .main-nav > a:focus-visible,
  .main-nav > button:hover,
  .main-nav > button.active,
  .main-nav > button:focus-visible {
    color: var(--ink);
    background: var(--cyan);
    border-color: var(--ink);
    outline: none;
  }
}


@media (max-width: 560px) {
  .camp-category-tabs { grid-template-columns: 1fr; }
  .camp-category-tabs button { text-align: left; }
  .hero h1 span { white-space: normal; }
}

/* Compact title-only course and lesson lists. */
.course-card,
.mega-course-card,
.lesson-link-card {
  min-height: 0;
  align-content: center;
}

.course-card {
  padding: 18px;
}

.course-card h3,
.mega-course-card h3,
.lesson-link-card .lesson-link-title {
  margin: 0;
}

.mega-course-card {
  padding: 13px 15px;
}

.lesson-link-card {
  display: block;
  padding: 13px 14px;
}

.lesson-link-card .lesson-link-title {
  display: block;
  font-size: 0.94rem;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .weather-particles span { animation: none; }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--panel);
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
}

body::before {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 64px;
  padding: 8px clamp(18px, 4vw, 48px);
  color: var(--panel);
  background: var(--night);
  border-bottom: 4px solid var(--ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  font-weight: 900;
}

.brand-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--night);
  background: var(--gold);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 3px 3px 0 #48366a;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 1.25rem;
}

.brand strong,
.brand small {
  display: block;
  line-height: 1;
}

.brand strong {
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
}

.brand small {
  margin-top: 3px;
  color: #efe7ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
}

.main-nav a,
.nav-course-trigger,
.nav-blog-trigger,
.nav-focus-trigger,
.nav-mypage-trigger,
.nav-community-trigger {
  padding: 10px 12px;
  border: 3px solid transparent;
  border-radius: 2px;
  color: var(--panel);
  background: transparent;
  cursor: pointer;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: lowercase;
}

.main-nav a:hover,
.main-nav a.active,
.nav-course-trigger:hover,
.nav-course-trigger.active,
.nav-blog-trigger:hover,
.nav-blog-trigger.active,
.nav-focus-trigger:hover,
.nav-focus-trigger.active,
.nav-mypage-trigger:hover,
.nav-mypage-trigger.active,
.nav-community-trigger:hover,
.nav-community-trigger.active {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 #48366a;
}

.focus-player {
  display: grid;
  grid-template-columns: auto minmax(94px, 1fr) auto;
  gap: 7px;
  align-items: center;
  justify-self: end;
  width: min(255px, 100%);
  min-height: 44px;
  padding: 5px 7px;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(23, 17, 31, 0.18);
}

.header-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.header-actions .focus-player {
  justify-self: auto;
}

.focus-timer-stack {
  position: relative;
  width: 0;
  min-width: 0;
}

.focus-timer-stack.timer-stack-visible {
  width: min(255px, 100%);
}

.focus-player[data-focus-player] {
  display: none;
}

.focus-player.timer-hidden {
  display: none !important;
}

.focus-player[data-focus-player].timer-visible,
.desktop-study-shell .focus-player.timer-visible {
  display: grid;
}

.focus-player.break-mode {
  background: #eef8ff;
}

.focus-player.break-mode .focus-play {
  background: var(--cyan);
}

.focus-cycle-prompt {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 90;
  width: 100%;
  padding: 11px;
  color: var(--ink);
  background: #fffdf6;
  border: 2px solid var(--ink);
  border-radius: 7px;
  box-shadow: 4px 5px 0 rgba(23, 17, 31, 0.2);
}

.focus-cycle-prompt[hidden] {
  display: none;
}

.focus-cycle-prompt > strong,
.focus-cycle-prompt p {
  display: block;
  margin: 0;
}

.focus-cycle-prompt > strong {
  font-size: 0.72rem;
  line-height: 1.3;
}

.focus-cycle-prompt p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 700;
}

.focus-cycle-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 9px;
}

.focus-cycle-actions button {
  min-height: 29px;
  padding: 3px 5px;
  color: var(--ink);
  background: var(--lime);
  border: 1px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
  font: 800 0.6rem/1 "Manrope", "Noto Sans KR", system-ui, sans-serif;
}

.focus-cycle-actions button:hover {
  background: var(--cyan);
}

.focus-cycle-actions button.secondary {
  background: var(--white);
}

.desktop-focus-timer-window {
  position: fixed;
  top: 66px;
  right: 18px;
  z-index: 106;
  display: none;
  width: 272px;
  max-width: calc(100vw - 122px);
  flex-direction: column;
  color: var(--ink);
  background: #f7f5ef;
  border: 1px solid #70858a;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(5, 21, 28, 0.36);
  overflow: hidden;
}

.desktop-focus-timer-window.open {
  display: flex;
}

.focus-timer-window-titlebar {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 0 11px;
  color: #eaf3ef;
  background: #234451;
  border-bottom: 1px solid #73888c;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.focus-timer-window-titlebar > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
}

.focus-timer-window-titlebar button {
  display: grid;
  width: 27px;
  height: 27px;
  padding: 0;
  place-items: center;
  color: #dbe8e4;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.focus-timer-window-titlebar button:hover,
.focus-timer-window-titlebar button:focus-visible {
  color: #17303d;
  background: #f2c94c;
  border-color: #f2c94c;
  outline: none;
}

.focus-timer-window-body {
  padding: 9px;
}

.desktop-focus-timer-window .focus-timer-stack,
.desktop-focus-timer-window .focus-timer-stack.timer-stack-visible {
  width: 100%;
}

.desktop-focus-timer-window .focus-player,
.desktop-study-shell .desktop-focus-timer-window .focus-player {
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 5px 7px;
  background: #edf3ef;
  border: 1px solid #80969a;
  border-radius: 6px;
  box-shadow: none;
}

.desktop-focus-timer-window .focus-player.break-mode {
  background: #eef8ff;
}

.desktop-focus-timer-window .focus-cycle-prompt {
  position: static;
  width: 100%;
  margin-top: 8px;
  border: 1px solid #80969a;
  border-radius: 6px;
  box-shadow: none;
}

.signup-button {
  min-height: 42px;
  padding: 0 16px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(23, 17, 31, 0.2);
  cursor: pointer;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.signup-button:hover,
.signup-button.active {
  background: var(--cyan);
}

.signup-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: clamp(18px, 5vw, 72px);
  display: none;
  z-index: 30;
  width: min(360px, calc(100vw - 36px));
}

.signup-menu.open {
  display: block;
}

.signup-menu-inner {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--ink);
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.signup-menu h2 {
  margin: 0;
  font-size: 1.35rem;
}

.signup-form {
  display: grid;
  gap: 8px;
}

.signup-guest-panel,
.signup-user-panel {
  display: grid;
  gap: 10px;
}

.signup-guest-panel[hidden],
.signup-user-panel[hidden],
.signup-verification[hidden],
.signup-choice[hidden],
.signup-status[hidden] {
  display: none !important;
}

.signup-form input:not([type="checkbox"]) {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font: inherit;
  font-weight: 800;
}

.signup-email-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.signup-email-actions .signup-choice {
  justify-content: center;
  padding-inline: 8px;
  text-align: center;
}

.signup-choice {
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(23, 17, 31, 0.18);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.signup-choice.primary {
  background: var(--lime);
}

.signup-choice:hover {
  background: var(--cyan);
}

.signup-choice:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.signup-privacy-notice {
  color: #273742;
  background: #f2f5f2;
  border: 1px solid #9ba9a7;
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 550;
  line-height: 1.45;
}

.signup-privacy-notice summary {
  padding: 8px 9px;
  cursor: pointer;
  font-weight: 800;
  list-style-position: inside;
}

.signup-privacy-notice[open] summary {
  border-bottom: 1px solid #c2ccca;
}

.signup-privacy-notice dl {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 9px;
}

.signup-privacy-notice dl > div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 7px;
}

.signup-privacy-notice dt {
  font-weight: 800;
}

.signup-privacy-notice dd {
  margin: 0;
}

.signup-privacy-notice > a {
  display: inline-block;
  margin: 0 9px 9px;
  color: #165a6d;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.signup-privacy-consent {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  color: #344b54;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 650;
  line-height: 1.45;
}

.signup-privacy-consent input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: #1b6a5b;
}

.signup-user-copy,
.signup-status {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.45;
}

.signup-user-copy {
  color: var(--muted);
}

.signup-user-copy strong {
  color: var(--ink);
}

.signup-verification {
  margin: 0;
  padding: 7px 9px;
  color: #714d13;
  background: #fff2c8;
  border: 1px solid #d9b75b;
  border-radius: 5px;
  font-size: 0.66rem;
  font-weight: 800;
}

.signup-verification[data-state="verified"] {
  color: #23443a;
  background: #e1f2e7;
  border-color: #8eb49a;
}

.signup-status {
  padding: 8px 9px;
  color: #23443a;
  background: #e1f2e7;
  border: 1px solid #8eb49a;
  border-radius: 5px;
}

.signup-status[data-state="error"] {
  color: #732f2d;
  background: #f8e2df;
  border-color: #d69992;
}

.signup-status[data-state="pending"] {
  color: #3d485f;
  background: #e8edf5;
  border-color: #a9b5c9;
}

.focus-player.complete {
  background: #fff0f8;
}

.focus-player.complete .focus-play {
  background: var(--gold);
}

.focus-play {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: var(--ink);
  background: var(--lime);
  border: 2px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.focus-player-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.focus-row {
  display: grid;
  grid-template-columns: minmax(58px, 0.42fr) minmax(46px, 0.58fr);
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.focus-row span {
  overflow: hidden;
  font-size: 0.56rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-bar {
  height: 4px;
  overflow: hidden;
  background: #e4d6e8;
  border: 1px solid var(--ink);
  border-radius: 2px;
}

.focus-bar span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--pink);
}

.timer-bar span {
  background: var(--lime);
}

.focus-player strong {
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.68rem;
  white-space: nowrap;
}

.course-mega {
  position: absolute;
  top: calc(100% + 6px);
  left: clamp(18px, 5vw, 72px);
  right: clamp(18px, 5vw, 72px);
  display: none;
  z-index: 25;
}

.course-mega.open {
  display: block;
}

.course-mega[aria-hidden="true"] {
  display: none;
}

.course-mega-inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.36fr) minmax(0, 0.64fr);
  gap: 16px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  color: var(--ink);
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--ink);
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.course-mega-side {
  padding: 16px;
  color: var(--ink);
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 2px;
}

.course-mega-side .menu-panel-title {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(1.32rem, 2.5vw, 2rem);
}

.course-mega-side p:not(.eyebrow) {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}

.course-mega-categories {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.mega-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.mega-category.active,
.mega-category:hover {
  background: var(--cyan);
  box-shadow: 3px 3px 0 var(--ink);
}

.mega-category.locked {
  background: #ede6ef;
}

.mega-category small {
  flex: 0 0 auto;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.course-mega-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mega-course-subcategory {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mega-course-subcategory + .mega-course-subcategory {
  margin-top: 8px;
}

.mega-course-subcategory-heading {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
}

.mega-course-subcategory-heading strong {
  font-size: 1rem;
}

.mega-course-subcategory-heading small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.mega-course-card {
  display: grid;
  min-height: 132px;
  padding: 14px;
  color: var(--ink);
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 4px 4px 0 rgba(23, 17, 31, 0.18);
}

.mega-course-card.locked {
  background: #ede6ef;
  color: #3f3349;
}

.mega-course-card span {
  justify-self: start;
  padding: 4px 7px;
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
}

.mega-course-card h3 {
  margin: 10px 0 6px;
  font-size: 1rem;
  line-height: 1.15;
}

.mega-course-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.42;
}

.blog-mega {
  position: absolute;
  top: calc(100% + 6px);
  left: clamp(18px, 5vw, 72px);
  right: clamp(18px, 5vw, 72px);
  display: none;
  z-index: 25;
}

.blog-mega.open {
  display: block;
}

.blog-mega-inner {
  display: grid;
  grid-template-columns: minmax(250px, 0.32fr) minmax(0, 0.68fr);
  gap: 16px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  color: var(--ink);
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--ink);
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.blog-mega-side,
.blog-topic-card {
  color: var(--ink);
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 2px;
}

.blog-mega-side {
  padding: 16px;
}

.blog-mega-side .menu-panel-title {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(1.32rem, 2.5vw, 2rem);
}

.blog-mega-side p:not(.eyebrow) {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}

.blog-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.blog-topic-card {
  display: grid;
  min-height: 142px;
  padding: 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.blog-topic-card:hover,
.blog-topic-card.active {
  background: var(--cyan);
  box-shadow: 4px 4px 0 var(--ink);
}

.blog-topic-card:hover p,
.blog-topic-card.active p,
.community-topic-card:hover p,
.focus-option:hover span,
.focus-option.active span {
  color: var(--ink);
}

.blog-topic-card span {
  justify-self: start;
  padding: 4px 7px;
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
}

.blog-topic-card h3 {
  margin: 10px 0 6px;
  font-size: 1.05rem;
  line-height: 1.15;
}

.blog-topic-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.42;
}

.community-mega {
  position: absolute;
  top: calc(100% + 6px);
  left: clamp(18px, 5vw, 72px);
  right: clamp(18px, 5vw, 72px);
  display: none;
  z-index: 25;
}

.community-mega.open {
  display: block;
}

.community-mega-inner {
  display: grid;
  grid-template-columns: minmax(250px, 0.32fr) minmax(0, 0.68fr);
  gap: 16px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  color: var(--ink);
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--ink);
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.community-mega-side,
.community-topic-card {
  color: var(--ink);
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 2px;
}

.community-mega-side {
  padding: 16px;
}

.community-mega-side h2 {
  margin-bottom: 10px;
  font-size: clamp(1.32rem, 2.5vw, 2rem);
}

.community-mega-side p:not(.eyebrow) {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}

.community-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.community-topic-card {
  min-height: 146px;
  padding: 14px;
}

.main-nav .community-topic-card,
.main-nav .community-topic-card span,
.main-nav .community-topic-card h3,
.main-nav .community-topic-card p {
  color: var(--ink);
}

.community-topic-card:hover {
  background: var(--cyan);
  box-shadow: 4px 4px 0 var(--ink);
}

.community-topic-card span {
  display: inline-flex;
  padding: 4px 7px;
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
}

.community-topic-card h3 {
  margin: 10px 0 6px;
  font-size: 1rem;
  line-height: 1.15;
}

.community-topic-card p {
  margin-bottom: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.42;
}

.mypage-mega {
  position: absolute;
  top: calc(100% + 6px);
  right: clamp(18px, 5vw, 72px);
  display: none;
  z-index: 28;
  width: min(430px, calc(100vw - 36px));
  color: var(--ink);
}

.mypage-mega.open {
  display: block;
}

.mypage-mega-inner {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  color: var(--ink);
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--ink);
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.mypage-mini-camp {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
}

.mypage-mini-sprite {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-size: 2rem;
}

.mypage-mini-copy h3 {
  margin: 0 0 5px;
  font-size: 1.05rem;
}

.mypage-mini-copy p {
  margin: 0;
  color: #3f3349;
  font-size: 0.82rem;
  font-weight: 800;
}

.mypage-mini-bar {
  height: 10px;
  margin-top: 9px;
  overflow: hidden;
  background: #e4d6e8;
  border: 2px solid var(--ink);
  border-radius: 2px;
}

.mypage-mini-bar span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--lime);
}

.mypage-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mypage-mini-stats div {
  padding: 10px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
}

.mypage-mini-stats small,
.mypage-mini-stats strong {
  display: block;
}

.mypage-mini-stats small {
  color: #3f3349;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mypage-mini-stats strong {
  margin-top: 4px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
}

.mypage-open-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: #17111f;
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(23, 17, 31, 0.2);
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
}

.mypage-open-button:visited,
.mypage-open-button:hover,
.mypage-open-button:focus-visible {
  color: #17111f;
}

.main-nav .mypage-open-button,
.main-nav .mypage-open-button:visited,
.main-nav .mypage-open-button:hover,
.main-nav .mypage-open-button:focus-visible {
  color: #17111f;
}

.focus-mega {
  position: absolute;
  top: calc(100% + 6px);
  left: clamp(18px, 5vw, 72px);
  right: clamp(18px, 5vw, 72px);
  display: none;
  z-index: 25;
}

.focus-mega.open {
  display: block;
}

.focus-mega-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 16px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  color: var(--ink);
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--ink);
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.focus-panel {
  padding: 16px;
  color: var(--ink);
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 2px;
}

.focus-panel .menu-panel-title {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(1.24rem, 2.2vw, 1.85rem);
}

.focus-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sound-options,
.timer-options {
  grid-template-columns: 1fr;
}

.focus-option {
  display: grid;
  gap: 7px;
  min-height: 98px;
  padding: 12px;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.sound-options .focus-option {
  min-height: auto;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 0.66fr);
  align-items: center;
}

.focus-option:hover,
.focus-option.active {
  background: var(--cyan);
  box-shadow: 3px 3px 0 var(--ink);
}

.focus-option strong {
  font-size: 0.96rem;
}

.focus-option span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.youtube-focus-playlist {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 3px solid var(--ink);
}

.youtube-focus-playlist.selected .youtube-focus-frame {
  box-shadow: 4px 4px 0 var(--gold);
}

.youtube-focus-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.youtube-focus-heading strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.youtube-focus-heading a,
.youtube-focus-heading a:visited {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
}

.youtube-focus-frame {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0f0f0f;
  border: 3px solid var(--ink);
}

.youtube-focus-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.nav-community-trigger {
  display: grid;
  gap: 1px;
  align-content: center;
  line-height: 1.05;
}

.nav-community-trigger small {
  font-family: "Manrope", "Noto Sans KR", sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: none;
}

.focus-statistics {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  color: var(--ink);
  border-top: 3px solid var(--ink);
}

.focus-statistics-heading strong {
  font-size: 0.86rem;
}

.focus-statistics-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.focus-statistics-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  background: var(--white);
  border: 3px solid var(--ink);
}

.focus-statistics-summary small,
.focus-statistics-timers small {
  color: #51485a;
  font-size: 0.66rem;
}

.focus-statistics-summary strong {
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.focus-statistics-timers {
  display: grid;
  gap: 6px;
}

.focus-statistics-timers > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--paper);
  border: 2px solid var(--ink);
}

.focus-statistics-timers span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.focus-statistics-timers span strong {
  font-size: 0.75rem;
}

.focus-statistics-timers b {
  flex: 0 0 auto;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.68rem;
}

.nav-toggle {
  display: none;
  justify-self: end;
  width: 46px;
  height: 46px;
  padding: 9px;
  background: var(--gold);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 3px 3px 0 var(--ink);
}

.nav-toggle span {
  display: block;
  height: 4px;
  margin: 4px 0;
  background: var(--ink);
}

.hero {
  padding: 0;
  background: var(--night);
  border-bottom: 5px solid var(--ink);
}

.hero-scene {
  position: relative;
  display: grid;
  min-height: min(360px, calc(100vh - 64px));
  place-items: center;
  overflow: hidden;
  padding: 28px clamp(18px, 5vw, 72px) 58px;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(10, 15, 38, 0) 0 62%, rgba(10, 15, 38, 0.22) 62% 100%),
    linear-gradient(180deg, #2f67a0 0%, #2a5686 48%, #214161 100%);
}

.hero-scene::before {
  position: absolute;
  inset: auto -4vw 50px;
  z-index: -2;
  height: 88px;
  content: "";
  background: var(--hill);
  clip-path: polygon(0 33%, 14% 22%, 24% 12%, 38% 30%, 52% 12%, 66% 22%, 78% 10%, 100% 32%, 100% 100%, 0 100%);
}

.hero-scene::after {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 62px;
  content: "";
  background:
    repeating-linear-gradient(90deg, #0e1b34 0 10px, transparent 10px 27px),
    linear-gradient(180deg, var(--deep-green) 0 70%, #2b4c45 70% 100%);
}

.window-row {
  position: absolute;
  top: 24px;
  display: flex;
  gap: 36px;
  opacity: 0.9;
}

.window-row-left {
  left: clamp(22px, 7vw, 96px);
}

.window-row-right {
  right: clamp(22px, 7vw, 96px);
}

.window-row span {
  width: clamp(66px, 8vw, 126px);
  height: clamp(28px, 3vw, 42px);
  background:
    linear-gradient(90deg, rgba(76, 186, 207, 0.45) 0 28%, rgba(201, 241, 245, 0.82) 28% 70%, rgba(76, 186, 207, 0.45) 70% 100%),
    #7ac4d5;
}

.hero-copy {
  z-index: 2;
  display: grid;
  justify-items: center;
  max-width: 820px;
  margin-top: 0;
  color: var(--panel);
  text-align: center;
}

.eyebrow {
  margin: 0 0 13px;
  color: var(--pink);
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

h1 {
  max-width: 610px;
  margin-bottom: 18px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.72rem, 3.9vw, 3.15rem);
  font-weight: 700;
  line-height: 1.08;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  line-height: 1.04;
}

.hero-description,
.section-heading p,
.community p {
  max-width: 650px;
  color: var(--muted);
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.65;
}

.hero .eyebrow {
  color: var(--gold);
  text-shadow: 2px 2px 0 var(--ink);
}

.hero h1 {
  max-width: 920px;
  color: #ffd783;
  font-size: clamp(1.35rem, 2.55vw, 2.65rem);
  line-height: 1.08;
  text-shadow:
    3px 3px 0 #452548,
    -2px 2px 0 var(--ink),
    2px -2px 0 var(--ink);
}

.hero h1 span {
  display: block;
  white-space: nowrap;
}

.hero .hero-description {
  color: rgba(255, 250, 240, 0.94);
  text-shadow: 2px 2px 0 rgba(23, 17, 31, 0.35);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 18px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: var(--shadow);
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
}

.button:hover {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--ink);
}

.button.primary {
  color: var(--ink);
  background: var(--gold);
}

.button.secondary {
  color: var(--paper);
  background: #4155b7;
}

.grass-hill {
  position: absolute;
  z-index: -1;
  width: 96px;
  height: 88px;
  bottom: 126px;
  background: #193846;
  clip-path: polygon(60% 0, 100% 52%, 77% 100%, 0 80%);
}

.grass-hill::after {
  position: absolute;
  inset: 32px 0 0 29px;
  content: "";
  background: #5fa373;
  clip-path: polygon(0 0, 80% 0, 100% 100%, 38% 74%);
}

.grass-hill-left {
  left: 9vw;
}

.grass-hill-right {
  right: 14vw;
  transform: scaleX(-1);
}

.pixel-desk {
  position: absolute;
  left: 12vw;
  bottom: 46px;
  width: 46px;
  height: 60px;
}

.desk-screen,
.desk-body,
.desk-note {
  position: absolute;
  display: block;
  border: 4px solid #3d3657;
  box-shadow: 5px 5px 0 rgba(23, 17, 31, 0.35);
}

.desk-screen {
  top: 0;
  left: 6px;
  width: 30px;
  height: 31px;
  background:
    linear-gradient(90deg, transparent 9px, #31526b 9px 13px, transparent 13px 19px, #31526b 19px 23px, transparent 23px),
    #82d8e7;
}

.desk-body {
  bottom: 0;
  left: 0;
  width: 42px;
  height: 23px;
  background: #7b7f9f;
}

.desk-note {
  right: -5px;
  bottom: 22px;
  width: 19px;
  height: 15px;
  background: #ffdf83;
  transform: rotate(-8deg);
}

.study-ground {
  position: absolute;
  right: 12vw;
  bottom: 56px;
  width: 10px;
  height: 10px;
  background: var(--pink);
  box-shadow:
    -44vw -18px 0 2px #c7a8ff,
    -26vw 16px 0 1px var(--pink),
    24vw -28px 0 3px #c7a8ff,
    18vw -214px 0 0 #fff0a6;
}

.track-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 76px clamp(18px, 5vw, 72px) 54px;
  background: var(--panel);
}

.home-shell .track-band {
  padding-top: 42px;
  padding-bottom: 32px;
}

.track,
.course-card,
.article-card,
.mypage-preview,
.map-panel {
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: var(--shadow);
}

.track {
  padding: 18px;
}

.track.locked {
  background: #e8dfeb;
  color: #3f3349;
}

.track span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 9px;
  color: var(--ink);
  background: var(--cyan);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
}

.track.locked span {
  background: #c8bdd0;
}

.track strong {
  display: block;
  line-height: 1.35;
}

.section,
.learning-map,
.community {
  padding: 72px clamp(18px, 5vw, 72px);
}

.home-shell .section,
.home-shell .learning-map {
  padding-top: 44px;
  padding-bottom: 44px;
}

.section-heading {
  display: grid;
  gap: 2px;
  margin-bottom: 28px;
}

.home-shell .section-heading {
  margin-bottom: 18px;
}

.section-heading.compact {
  margin-bottom: 18px;
}

.course-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.course-tab {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  color: var(--ink);
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.course-tab:hover,
.course-tab.active {
  background: var(--cyan);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.course-tab.locked {
  background: #ede6ef;
}

.course-tab.locked.active,
.course-tab.locked:hover {
  background: #dcd1e3;
}

.course-tab span {
  font-size: 0.9rem;
  font-weight: 900;
}

.course-tab small {
  flex: 0 0 auto;
  padding: 4px 7px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.54rem;
  font-weight: 700;
  text-transform: uppercase;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.course-subcategory {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.course-subcategory + .course-subcategory {
  margin-top: 10px;
}

.course-subcategory-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
}

.course-subcategory-heading h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.1;
}

.course-subcategory-heading p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.course-subcategory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.course-card {
  position: relative;
  display: grid;
  min-height: 205px;
  padding: 14px;
}

.course-card.locked {
  background: #ede6ef;
  color: #3f3349;
}

.course-card .tag {
  justify-self: start;
  padding: 4px 8px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
}

.course-card.locked .tag {
  background: #c8bdd0;
}

.course-card h3 {
  margin: 12px 0 6px;
  font-size: 1.05rem;
  line-height: 1.18;
}

.course-card p {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.45;
}

.course-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.course-topic-list span {
  padding: 5px 7px;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.25;
}

.course-topic-list.compact {
  gap: 4px;
  margin-top: 8px;
}

.course-topic-list.compact span {
  padding: 3px 5px;
  font-size: 0.58rem;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: end;
}

.course-meta span {
  padding: 5px 7px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.learning-map {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.17) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.17) 1px, transparent 1px),
    var(--night);
  background-size: 18px 18px;
  color: var(--white);
  border-top: 5px solid var(--ink);
  border-bottom: 5px solid var(--ink);
}

.learning-map .section-heading p,
.learning-map .eyebrow {
  color: var(--gold);
}

.map-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px;
  background: #392753;
}

.map-step {
  min-height: 154px;
  padding: 18px;
  color: var(--ink);
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
}

.map-step.active {
  background: var(--lime);
}

.map-step span,
.map-step small {
  display: block;
  font-weight: 900;
}

.map-step span {
  color: #7d1f5a;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
}

.map-step strong {
  display: block;
  margin: 26px 0 8px;
  font-size: 1.05rem;
  line-height: 1.18;
}

.map-step small {
  color: var(--muted);
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 22px;
  align-items: start;
}

.article-list {
  display: grid;
  gap: 12px;
}

.blog-reader-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 0.62fr);
  gap: 16px;
  align-items: start;
}

.blog-post-list-panel {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 132px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 5px 5px 0 rgba(23, 17, 31, 0.18);
  scrollbar-gutter: stable;
}

.blog-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.blog-tab {
  min-height: 58px;
  padding: 10px;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  text-align: left;
}

.blog-tab:hover,
.blog-tab.active {
  background: var(--cyan);
  box-shadow: 3px 3px 0 var(--ink);
}

.article-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(23, 17, 31, 0.14);
}

.article-card:hover,
.article-card.active {
  background: var(--cyan);
  box-shadow: 3px 3px 0 var(--ink);
}

.article-card span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  background: var(--cyan);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}

.article-card.active span,
.article-card:hover span {
  background: var(--gold);
}

.article-card h3 {
  margin: 0 0 5px;
  font-size: 0.96rem;
  line-height: 1.2;
}

.article-card small {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
}

.article-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.42;
}

.blog-post-view {
  display: none;
  gap: 18px;
  min-height: 480px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 5px 5px 0 rgba(23, 17, 31, 0.2);
}

.blog-post-view.active {
  display: grid;
}

.blog-post-body {
  display: grid;
  gap: 12px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.65;
}

.blog-post-body p {
  margin: 0;
}

.blog-post-body h3 {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.25;
}

.blog-post-body ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 16px 14px 28px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 2px;
}

.blog-post-body li {
  padding-left: 2px;
}

.blog-feature-image {
  display: grid;
  gap: 9px;
  margin: 0 0 12px;
}

.blog-feature-image img {
  display: block;
  width: min(100%, 760px);
  height: auto;
  margin: 0 auto;
  background: #11120f;
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 4px 5px 0 rgba(23, 17, 31, 0.16);
}

.blog-feature-image figcaption {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

/* Blog reader mirrors the course workspace: navigation left, article right. */
.blog-page-shell {
  width: min(100%, 1480px);
}

.blog-workspace.placeholder-panel {
  display: grid;
  grid-template-columns: minmax(170px, 210px) minmax(220px, 270px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.blog-workspace-sidebar {
  position: sticky;
  top: 86px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100dvh - 104px);
  max-height: calc(100vh - 104px);
  overflow: hidden;
  color: #f8f6ef;
  background: #20375f;
  border: 1px solid #41557c;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(13, 25, 49, 0.18);
}

.blog-workspace-heading {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-bottom: 1px solid #41557c;
}

.blog-workspace-heading span {
  color: #f5c943;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.blog-workspace-heading strong {
  font-size: 1rem;
}

.blog-workspace .blog-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 0;
  padding: 8px;
  background: #17284a;
  border-bottom: 1px solid #41557c;
}

.blog-workspace .blog-tab {
  min-width: 0;
  min-height: 38px;
  padding: 7px 6px;
  overflow: hidden;
  color: #cbd3e3;
  background: transparent;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  font-size: 0.66rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-workspace .blog-tab:hover,
.blog-workspace .blog-tab.active {
  color: #17233f;
  background: #f5c943;
  box-shadow: none;
}

.blog-workspace .blog-post-list-panel {
  position: sticky;
  top: 86px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100dvh - 104px);
  max-height: calc(100vh - 104px);
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  color: #f8f6ef;
  background: #20375f;
  border: 1px solid #41557c;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(13, 25, 49, 0.18);
  scrollbar-gutter: stable;
}

.blog-post-list-heading {
  display: grid;
  gap: 4px;
  padding: 14px 12px;
  border-bottom: 1px solid #41557c;
}

.blog-post-list-heading span {
  color: #f5c943;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.blog-post-list-heading strong {
  font-size: 0.9rem;
}

.blog-workspace .article-list {
  gap: 6px;
  align-content: start;
  padding: 9px;
}

.blog-workspace .article-card {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  min-height: 48px;
  padding: 8px;
  color: #dce2ee;
  background: #17284a;
  border: 1px solid #41557c;
  border-radius: 6px;
  box-shadow: none;
}

.blog-workspace .article-card:hover,
.blog-workspace .article-card.active {
  color: #17233f;
  background: #c9c0e2;
  border-color: #c9c0e2;
  box-shadow: none;
}

.blog-workspace .article-card > span {
  width: 34px;
  height: 34px;
  color: #17233f;
  background: #f5c943;
  border: 0;
  border-radius: 5px;
  font-size: 0.54rem;
}

.blog-workspace .article-card h3 {
  margin: 0 0 3px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}

.blog-workspace .article-card small {
  margin: 0;
  color: inherit;
  font-size: 0.56rem;
  font-weight: 500;
}

.blog-workspace-list-empty {
  margin: 0;
  padding: 14px 10px;
  color: #aeb9cf;
  border: 1px dashed #52688f;
  border-radius: 6px;
  font-size: 0.64rem;
  font-weight: 400;
  line-height: 1.5;
}

.blog-workspace .blog-post-view {
  min-width: 0;
  min-height: 680px;
  padding: clamp(18px, 3vw, 28px);
  overflow-x: hidden;
  color: #f7f8fc;
  background: #17284a;
  border: 1px solid #41557c;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(7, 14, 29, 0.3);
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.62;
}

.blog-workspace .blog-post-view .lesson-article-header {
  padding-bottom: 16px;
  border-bottom: 1px solid #41557c;
}

.blog-workspace .blog-post-view .lesson-article-header :is(h1, h2) {
  color: #ffffff;
  font-size: clamp(1.18rem, 2vw, 1.48rem);
  font-weight: 600;
  line-height: 1.3;
}

.blog-workspace .blog-post-view .lesson-article-header p:not(.eyebrow),
.blog-workspace .blog-post-body,
.blog-workspace .blog-post-body p,
.blog-workspace .blog-post-body li,
.blog-workspace .blog-feature-image figcaption {
  color: #d3dbea;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.62;
}

.blog-workspace .blog-post-body h3 {
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 600;
}

.blog-workspace .blog-post-body ul {
  color: #f7f8fc;
  background: #20375f;
  border: 1px solid #52688f;
  border-radius: 6px;
}

.blog-workspace .blog-post-body .lesson-formula {
  color: #ffe06a;
  background: #0e1b34;
  border: 1px solid #52688f;
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 500;
}

.blog-workspace .blog-post-body .lesson-formula mjx-container {
  color: #ffe06a;
  font-size: 100% !important;
}

.blog-workspace .blog-feature-image img {
  border: 1px solid #52688f;
  border-radius: 6px;
  box-shadow: none;
}

.blog-view-empty {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #d3dbea;
  text-align: center;
}

.blog-view-empty .menu-item-icon {
  width: 42px;
  height: 42px;
  padding: 10px;
  color: #17233f;
  background: #f5c943;
  border-radius: 50%;
}

.blog-view-empty strong {
  color: #ffffff;
  font-size: 0.92rem;
}

.blog-view-empty p {
  max-width: 320px;
  margin: 0;
  color: #aeb9cf;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 920px) {
  .blog-workspace.placeholder-panel {
    grid-template-columns: 1fr;
  }

  .blog-workspace-sidebar {
    position: static;
    height: auto;
    max-height: none;
  }

  .blog-workspace .blog-workspace-posts {
    position: static;
    height: auto;
    max-height: none;
  }

  .blog-workspace .blog-post-list-panel {
    max-height: 360px;
  }

  .blog-workspace .blog-post-view {
    min-height: 0;
  }
}

.euler-figure {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
}

.euler-figure svg {
  width: 100%;
  max-width: 460px;
  background: #fff9ea;
  border: 4px solid var(--ink);
  border-radius: 2px;
}

.euler-figure .grid {
  fill: none;
  stroke: rgba(23, 17, 31, 0.12);
  stroke-width: 1;
}

.euler-figure .axis,
.euler-figure .unit {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.euler-figure .radius {
  fill: none;
  stroke: var(--pink);
  stroke-linecap: round;
  stroke-width: 4;
}

.euler-figure .projection,
.euler-figure .arc {
  fill: none;
  stroke: var(--blue-night);
  stroke-dasharray: 5 4;
  stroke-width: 3;
}

.euler-figure .point {
  fill: var(--gold);
  stroke: var(--ink);
  stroke-width: 3;
}

.euler-figure text {
  fill: var(--ink);
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.euler-figure figcaption {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}

body {
  font-weight: 500;
}

.hero-description,
.placeholder-panel p,
.placeholder-card small,
.course-card p,
.mega-course-card p,
.blog-topic-card p,
.community-topic-card p,
.course-subcategory-heading p,
.lesson-article-header p:not(.eyebrow),
.lesson-note p,
.lesson-note li,
.lesson-checkpoint p,
.lesson-link-card small,
.blog-post-body,
.blog-post-body p,
.blog-post-body li,
.article-card p,
.calendar-day small,
.map-step small,
.track span,
.track strong {
  font-weight: 500;
}

.lesson-note h3,
.blog-post-body h3,
.article-card h3 {
  font-weight: 700;
}

.mypage-preview {
  position: sticky;
  top: 102px;
  padding: 22px;
}

.progress-ring {
  display: grid;
  width: 156px;
  height: 156px;
  margin: 22px auto;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(23, 17, 31, 0.1) 1px, transparent 1px),
    linear-gradient(180deg, rgba(23, 17, 31, 0.1) 1px, transparent 1px),
    conic-gradient(var(--lime) calc(var(--progress) * 1%), #d8cddd 0);
  background-size: 8px 8px, 8px 8px, auto;
}

.progress-ring span {
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  color: var(--ink);
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

.focus-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 18px;
}

.focus-stats div {
  padding: 10px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
}

.focus-stats small,
.focus-stats strong {
  display: block;
}

.focus-stats small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.focus-stats strong {
  margin-top: 4px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
}

.camp-panel {
  position: relative;
  display: grid;
  gap: 16px;
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 16px;
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 2px;
}

.camp-game-header {
  position: relative;
  z-index: 4;
  display: flex;
  gap: 16px;
  align-items: start;
  justify-content: space-between;
}

.camp-game-header h2 {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.camp-game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.camp-game-actions span,
.camp-shop-toggle {
  min-height: 38px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
}

.camp-shop-toggle {
  cursor: pointer;
}

.camp-shop-toggle:hover,
.camp-shop-toggle.active {
  background: var(--cyan);
  box-shadow: 3px 3px 0 var(--ink);
}

.camp-game-screen {
  position: relative;
  min-height: clamp(360px, 54vw, 520px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(12, 18, 28, 0.04), rgba(12, 18, 28, 0.18)),
    url("../images/hero-campsite-study.webp") center / cover no-repeat;
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: inset 0 -8px 0 rgba(23, 17, 31, 0.12);
  image-rendering: auto;
  isolation: isolate;
}

.camp-time-sunset .camp-game-screen {
  background:
    linear-gradient(180deg, rgba(255, 143, 61, 0.12), rgba(238, 125, 165, 0.18)),
    url("../images/hero-campsite-study.webp") center / cover no-repeat;
}

.camp-time-night .camp-game-screen {
  background:
    linear-gradient(180deg, rgba(7, 9, 26, 0.1), rgba(7, 9, 26, 0.34)),
    url("../images/hero-campsite-study.webp") center / cover no-repeat;
  filter: brightness(0.9) saturate(0.92);
}

.camp-sky,
.camp-mountains,
.camp-ground,
.camp-decor-layer,
.camp-tent-wrap,
.camp-stage-copy {
  position: absolute;
}

.camp-sky {
  inset: 0 0 34% 0;
  z-index: 0;
  display: none;
}

.camp-sun,
.camp-moon,
.camp-star {
  position: absolute;
  display: block;
  border: 3px solid var(--ink);
  border-radius: 2px;
}

.camp-sun {
  top: 12%;
  right: 14%;
  width: 58px;
  height: 58px;
  background: var(--gold);
  box-shadow: 0 0 0 10px rgba(255, 204, 85, 0.24);
}

.camp-moon {
  top: 12%;
  right: 14%;
  display: none;
  width: 54px;
  height: 54px;
  background: var(--panel);
  box-shadow: -12px 0 0 #10193f inset;
}

.camp-star {
  display: none;
  width: 12px;
  height: 12px;
  background: var(--gold);
  transform: rotate(45deg);
}

.camp-star-one {
  top: 18%;
  left: 16%;
}

.camp-star-two {
  top: 30%;
  left: 34%;
}

.camp-star-three {
  top: 16%;
  left: 58%;
}

.camp-time-night .camp-sun {
  display: none;
}

.camp-time-night .camp-moon,
.camp-time-night .camp-star {
  display: block;
}

.camp-mountains {
  left: 0;
  right: 0;
  bottom: 29%;
  z-index: 1;
  display: none;
  height: 28%;
}

.camp-mountains span {
  position: absolute;
  bottom: 0;
  width: 36%;
  height: 100%;
  background: #3f7c75;
  border: 4px solid var(--ink);
  transform: skewX(-18deg);
}

.camp-mountains span:nth-child(1) {
  left: -6%;
  height: 76%;
}

.camp-mountains span:nth-child(2) {
  left: 27%;
  height: 105%;
  background: #4e9380;
}

.camp-mountains span:nth-child(3) {
  right: -8%;
  height: 86%;
}

.camp-time-night .camp-mountains span {
  background: #1f3455;
}

.camp-ground {
  left: -4%;
  right: -4%;
  bottom: -18%;
  z-index: 2;
  display: none;
  height: 48%;
  background:
    radial-gradient(circle at 18% 45%, rgba(255, 255, 255, 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 74% 34%, rgba(255, 255, 255, 0.16) 0 3px, transparent 4px),
    linear-gradient(160deg, #7fc47d, #3f875a);
  border: 4px solid var(--ink);
  border-radius: 50% 50% 0 0;
}

.camp-time-night .camp-ground {
  background: linear-gradient(160deg, #416b4a, #253f34);
}

.camp-tent-wrap {
  display: none;
  left: clamp(145px, 23%, 265px);
  bottom: 22%;
  z-index: 5;
  width: min(265px, 36vw);
  aspect-ratio: 1.4 / 1;
  transform: translateX(-50%);
  filter: drop-shadow(8px 10px 0 rgba(23, 17, 31, 0.34));
}

.camp-sprite {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  color: transparent;
}

.camp-sprite::before,
.camp-sprite::after,
.camp-tent-door,
.camp-tent-glow {
  position: absolute;
  content: "";
  display: block;
}

.camp-sprite::before {
  left: 50%;
  bottom: 0;
  width: 86%;
  height: 88%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 22% 76%, rgba(23, 17, 31, 0.18)),
    repeating-linear-gradient(115deg, rgba(255, 250, 240, 0.2) 0 8px, transparent 8px 20px),
    #caa15d;
  border: 5px solid var(--ink);
  clip-path: polygon(
    48% 0,
    56% 0,
    60% 8%,
    66% 8%,
    70% 18%,
    75% 18%,
    80% 30%,
    85% 30%,
    90% 44%,
    95% 44%,
    100% 100%,
    0 100%,
    5% 44%,
    10% 44%,
    15% 30%,
    20% 30%,
    25% 18%,
    30% 18%,
    34% 8%,
    40% 8%
  );
  transform: translateX(-50%);
  box-shadow: inset -16px -10px 0 rgba(94, 55, 35, 0.28), inset 12px 0 0 rgba(255, 229, 158, 0.28);
}

.camp-sprite::after {
  left: 50%;
  bottom: 0;
  width: 44%;
  height: 76%;
  background:
    linear-gradient(90deg, rgba(255, 204, 85, 0.24), transparent 45%),
    #8f643b;
  border-left: 5px solid var(--ink);
  border-right: 5px solid rgba(23, 17, 31, 0.42);
  clip-path: polygon(
    50% 0,
    58% 10%,
    64% 10%,
    70% 24%,
    76% 24%,
    100% 100%,
    0 100%,
    24% 24%,
    30% 24%,
    36% 10%,
    42% 10%
  );
  transform: translateX(-50%);
}

.camp-tent-night::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 24% 74%, rgba(7, 9, 26, 0.22)),
    repeating-linear-gradient(115deg, rgba(255, 250, 240, 0.16) 0 8px, transparent 8px 20px),
    #6256a5;
}

.camp-tent-night::after {
  background: #433a78;
}

.camp-tent-lake::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 24% 74%, rgba(7, 9, 26, 0.18)),
    repeating-linear-gradient(115deg, rgba(255, 250, 240, 0.18) 0 8px, transparent 8px 20px),
    #77d1e0;
}

.camp-tent-lake::after {
  background: #56aaba;
}

.camp-tent-sunset::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 24% 74%, rgba(94, 55, 35, 0.22)),
    repeating-linear-gradient(115deg, rgba(255, 250, 240, 0.18) 0 8px, transparent 8px 20px),
    var(--orange);
}

.camp-tent-sunset::after {
  background: #d76e36;
}

.camp-tent-empty::before {
  background: #d8cddd;
}

.camp-tent-door {
  left: 50%;
  bottom: 2%;
  z-index: 2;
  width: 21%;
  height: 36%;
  background:
    linear-gradient(180deg, rgba(255, 204, 85, 0.24), transparent 38%),
    var(--night);
  border: 5px solid var(--ink);
  border-bottom: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}

.camp-tent-glow {
  left: 50%;
  bottom: 7%;
  z-index: 1;
  width: 38%;
  height: 28%;
  background: rgba(255, 204, 85, 0.5);
  filter: blur(14px);
  transform: translateX(-50%);
}

.camp-decor-layer {
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.camp-decor {
  position: absolute;
  left: var(--decor-x);
  top: var(--decor-y);
  display: grid;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 246, 223, 0.86);
  border: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: 4px 4px 0 rgba(23, 17, 31, 0.32);
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, 2.6vw, 1.65rem);
  line-height: 1;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
}

.camp-decor-inside {
  z-index: 8;
  min-width: 30px;
  min-height: 30px;
  background: rgba(255, 250, 240, 0.94);
  font-size: clamp(0.95rem, 2.4vw, 1.45rem);
}

.camp-decor-campfire {
  background: var(--orange);
}

.camp-decor-lantern,
.camp-decor-string-lights,
.camp-decor-study-lamp {
  background: var(--gold);
  box-shadow: 0 0 16px rgba(255, 204, 85, 0.55), 3px 3px 0 rgba(23, 17, 31, 0.18);
}

.camp-stage-copy {
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 9;
  max-width: none;
  margin: 0;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(255, 250, 240, 0.9);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-size: 0.86rem;
  line-height: 1.35;
}

.placeholder-panel .camp-stage-copy {
  max-width: none;
  color: var(--ink);
}

.camp-progress {
  display: grid;
  gap: 8px;
}

.camp-progress div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 900;
}

.camp-progress span,
.camp-progress strong {
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
}

.camp-coin-bar {
  height: 14px;
  overflow: hidden;
  background: #e4d6e8;
  border: 3px solid var(--ink);
  border-radius: 2px;
}

.camp-coin-bar span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--lime);
}

.camp-shop-drawer {
  position: absolute;
  top: 76px;
  right: 16px;
  z-index: 20;
  display: none;
  width: min(430px, calc(100% - 32px));
  max-height: min(640px, calc(100vh - 150px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 8px 8px 0 var(--ink);
}

.camp-shop-drawer.open {
  display: grid;
  gap: 14px;
}

.camp-shop-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.camp-shop-header h3 {
  margin: 4px 0 0;
  font-size: 1.25rem;
}

.camp-shop-header button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--ink);
  background: var(--pink);
  border: 3px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 900;
}

.camp-shop-section {
  display: grid;
  gap: 10px;
}

.camp-shop-section > strong {
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.camp-grid,
.camp-inventory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.coin-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.camp-card,
.camp-item-card,
.coin-actions button {
  min-height: 72px;
  padding: 10px;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.camp-card:hover,
.camp-card.active,
.camp-item-card:hover,
.camp-item-card.owned,
.coin-actions button:hover {
  background: var(--cyan);
  box-shadow: 3px 3px 0 var(--ink);
}

.camp-item-card.owned {
  cursor: default;
  background: var(--lime);
}

.camp-card span,
.camp-item-card span {
  display: block;
  font-size: 1.8rem;
  line-height: 1;
}

.camp-card small,
.camp-item-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
}

.camp-card:hover small,
.camp-card.active small,
.camp-item-card:hover small,
.camp-item-card.owned small {
  color: #241b2d;
}

.mypage-preview ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mypage-preview li {
  display: flex;
  gap: 9px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.4;
}

.mypage-preview li span {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  background: var(--pink);
  border: 3px solid var(--ink);
}

.community {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  background: var(--night);
  color: var(--white);
  border-top: 5px solid var(--ink);
}

.community .eyebrow {
  color: var(--gold);
}

.community p {
  color: #fffaf0;
}

.community .button.primary {
  flex: 0 0 auto;
  color: var(--ink);
  background: var(--gold);
}

.page-shell {
  width: min(100%, 1240px);
  min-height: calc(100vh - 78px);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 92px) clamp(18px, 5vw, 72px) 72px;
}

.page-hero {
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin-bottom: 28px;
}

.page-hero h1 {
  margin-bottom: 4px;
}

/* Preserves the course/blog context styling when a prerendered route uses the lesson title as its single H1. */
.page-hero .prerendered-course-context {
  max-width: 610px;
  margin: 0 0 4px;
  color: var(--ink);
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.72rem, 3.9vw, 3.15rem);
  font-weight: 700;
  line-height: 1.08;
}

.placeholder-panel {
  padding: clamp(18px, 3vw, 28px);
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: var(--shadow);
}

.placeholder-panel p {
  max-width: 720px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.6;
}

.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.placeholder-card {
  padding: 16px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
}

.placeholder-card strong,
.placeholder-card small {
  display: block;
}

.placeholder-card small {
  margin-top: 8px;
  color: #3f3349;
  font-weight: 800;
  line-height: 1.45;
}

.study-calendar {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: clamp(16px, 3vw, 22px);
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 5px 5px 0 rgba(23, 17, 31, 0.18);
}

.study-calendar-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.study-calendar-header h2 {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.study-calendar-actions {
  display: flex;
  gap: 7px;
}

.study-calendar-actions button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.study-calendar-summary {
  color: #51485a;
  font-size: 0.82rem;
  font-weight: 700;
}

.study-calendar-weekdays,
.study-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.study-calendar-weekdays span {
  min-height: 32px;
  color: #3f3349;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  display: grid;
  min-height: 82px;
  align-content: space-between;
  padding: 9px;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font: inherit;
  text-align: left;
}

button.calendar-day {
  cursor: pointer;
}

button.calendar-day:hover {
  background: var(--cyan);
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(1px, 1px);
}

.calendar-day strong {
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.92rem;
}

.calendar-day small {
  color: #3f3349;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.25;
}

.calendar-day.today {
  background: var(--lime);
  box-shadow: 4px 4px 0 var(--ink);
}

.calendar-day.has-records {
  background: #dff3ff;
}

.calendar-day.selected {
  outline: 4px solid var(--gold);
  outline-offset: -7px;
}

.calendar-day.muted {
  color: #3f3349;
  background: var(--white);
  border-color: #3f3349;
}

.study-day-detail {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding: 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
}

.study-day-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.study-day-detail-heading > span {
  display: grid;
  min-width: 32px;
  height: 32px;
  place-items: center;
  background: var(--gold);
  border: 2px solid var(--ink);
  font-weight: 900;
}

.study-day-records {
  display: grid;
  gap: 8px;
}

.study-day-records > p {
  margin: 0;
  color: #51485a;
}

.study-day-record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  text-decoration: none;
}

.study-day-record > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.study-day-record small {
  color: #51485a;
}

.study-day-record b {
  flex: 0 0 auto;
  padding: 5px 7px;
  background: var(--lime);
  border: 2px solid var(--ink);
}

.course-content-panel {
  display: grid;
  gap: 22px;
}

.course-dashboard-grid {
  align-items: start;
  margin-top: 0;
}

.lesson-summary-card {
  align-self: start;
  display: grid;
  gap: 8px;
}

.quiz-summary-card {
  align-self: start;
  display: grid;
  align-content: start;
  gap: 8px;
}

.course-selection-panel {
  display: grid;
  gap: 12px;
}

.lesson-list,
.quiz-list {
  display: grid;
  gap: 8px;
}

.lesson-category-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.lesson-category-toggle:hover,
.lesson-category-toggle.active {
  background: var(--cyan);
  box-shadow: 3px 3px 0 var(--ink);
}

.lesson-category-toggle span {
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.76rem;
}

.lesson-category-toggle small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.lesson-category-panel {
  display: none;
  gap: 8px;
}

.lesson-category-panel.open {
  display: grid;
}

.course-selection-panel .lesson-category-panel {
  padding: 14px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 5px 5px 0 rgba(23, 17, 31, 0.2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lesson-link-card {
  display: grid;
  gap: 5px;
  min-height: 94px;
  padding: 10px 12px;
  background: var(--lime);
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 4px 4px 0 rgba(23, 17, 31, 0.2);
}

.lesson-link-card:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.lesson-link-card.active {
  background: var(--cyan);
  box-shadow: 4px 4px 0 var(--ink);
}

.lesson-link-card span {
  justify-self: start;
  padding: 4px 6px;
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 2px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
}

.lesson-link-card .lesson-link-title {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.18;
}

.lesson-link-card small {
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.35;
}

.quiz-category-toggle {
  background: var(--pink);
}

.quiz-category-toggle:hover,
.quiz-category-toggle.active {
  background: var(--orange);
}

.quiz-link-card {
  background: #ffe2f0;
}

.quiz-link-card.active {
  background: var(--orange);
}

.lesson-article {
  display: none;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 5px 5px 0 rgba(23, 17, 31, 0.2);
}

.lesson-article.active {
  display: grid;
}

.quiz-article {
  display: none;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 5px 5px 0 rgba(23, 17, 31, 0.2);
}

.quiz-article.active {
  display: grid;
}

.quiz-question-grid {
  display: grid;
  gap: 14px;
}

.quiz-question {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 2px;
}

.quiz-question h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.quiz-option.selected {
  background: #dff3ff;
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px, -1px);
}

.quiz-option:disabled {
  cursor: default;
  opacity: 1;
}

.quiz-feedback {
  display: none;
  gap: 6px;
  margin: 12px 0 0;
  padding: 12px;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
}

.quiz-feedback.visible {
  display: grid;
}

.assessment-solution {
  overflow: hidden;
  margin-top: 2px;
  background: var(--white);
  border: 2px solid color-mix(in srgb, var(--ink) 68%, transparent);
  border-radius: 3px;
}

.assessment-solution summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 32%, var(--paper));
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  list-style: none;
}

.assessment-solution summary::-webkit-details-marker {
  display: none;
}

.assessment-solution summary::after {
  content: "+";
  font-size: 1rem;
  line-height: 1;
}

.assessment-solution[open] summary::after {
  content: "−";
}

.assessment-solution-body {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 2px solid color-mix(in srgb, var(--ink) 68%, transparent);
}

.assessment-solution-body > p,
.assessment-solution-body > div,
.assessment-solution-body p {
  margin: 0;
  line-height: 1.6;
}

.assessment-solution-body > p {
  padding: 8px 10px;
  background: color-mix(in srgb, var(--lime) 34%, var(--paper));
  border-left: 4px solid var(--deep-green);
}

.assessment-solution-body > div {
  display: grid;
  gap: 5px;
}

.quiz-feedback span,
.quiz-feedback p {
  margin: 0;
  line-height: 1.55;
}

.answered-correct {
  background: #e6f8e8;
}

.answered-wrong {
  background: #fff0ee;
}

.assessment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 16px;
  background: var(--paper);
  border: 4px solid var(--ink);
}

.assessment-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--ink);
}

.assessment-result strong {
  font-size: 1.35rem;
}

.assessment-result.warning {
  color: #9b2c2c;
}

.assessment-result small {
  flex-basis: 100%;
  max-width: 62ch;
  font-size: 0.78rem;
  line-height: 1.55;
}

.assessment-submit,
.lesson-complete-button {
  min-height: 44px;
  padding: 10px 16px;
  color: #fff;
  background: var(--ink);
  border: 3px solid var(--ink);
  font: 700 0.84rem "Manrope", "Noto Sans KR", sans-serif;
  cursor: pointer;
}

.assessment-submit:disabled,
.lesson-complete-button.complete {
  color: var(--ink);
  background: #bdeec7;
  cursor: default;
}

.lesson-complete-button {
  justify-self: start;
  margin-top: 18px;
}

.practice-summary-card .practice-category-panel {
  display: none;
  margin-top: 8px;
}

.practice-summary-card .practice-category-panel.open {
  display: grid;
}

.study-history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.study-history-panel,
.wrong-answer-panel {
  padding: 18px;
  background: var(--white);
  border: 4px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(23, 17, 31, 0.16);
}

.study-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.study-history-heading > span {
  min-width: 32px;
  padding: 5px 8px;
  text-align: center;
  background: var(--gold);
  border: 3px solid var(--ink);
  font-weight: 800;
}

.study-history-heading h2,
.study-history-heading p {
  margin: 0;
}

.study-history-list,
.wrong-answer-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.study-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  text-decoration: none;
}

.study-history-item > span:first-child,
.study-history-result {
  display: grid;
  gap: 3px;
}

.study-history-item small,
.study-history-empty {
  color: #51485a;
  font-size: 0.72rem;
}

.study-history-result {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 800;
}

.wrong-answer-panel {
  margin-top: 18px;
}

.wrong-answer-course {
  background: var(--white);
  border: 4px solid var(--ink);
}

.wrong-answer-course > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--ink);
  background: #dff3ff;
  cursor: pointer;
  list-style: none;
}

.wrong-answer-course > summary > span {
  display: grid;
  gap: 3px;
}

.wrong-answer-course > summary b {
  display: grid;
  min-width: 32px;
  height: 32px;
  place-items: center;
  background: var(--gold);
  border: 2px solid var(--ink);
}

.wrong-answer-course-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-top: 3px solid var(--ink);
}

.wrong-answer-unit {
  background: var(--paper);
  border: 3px solid var(--ink);
}

.wrong-answer-unit > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.wrong-answer-unit > summary > span {
  display: grid;
  gap: 3px;
}

.wrong-answer-unit > summary small {
  color: #51485a;
}

.wrong-answer-unit > summary b {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  background: var(--white);
  border: 2px solid var(--ink);
}

.wrong-answer-unit-list {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--white);
  border-top: 3px solid var(--ink);
}

.mypage-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 4px solid var(--ink);
}

.mypage-tabs button {
  min-width: 120px;
  padding: 11px 16px;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-bottom: 0;
  font: 800 0.82rem "Manrope", "Noto Sans KR", sans-serif;
  cursor: pointer;
}

.mypage-tabs button.active {
  background: var(--gold);
}

.language-settings-panel {
  min-height: 360px;
}

[data-mypage-panel][hidden] {
  display: none;
}

.language-settings-heading {
  max-width: 720px;
}

.language-settings-heading h2,
.language-settings-heading p {
  margin-top: 0;
}

.language-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.language-options button {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 16px;
  color: var(--ink);
  background: var(--white);
  border: 4px solid var(--ink);
  text-align: left;
  cursor: pointer;
}

.language-options button.active {
  background: #dff3ff;
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}

.language-options strong {
  font-size: 1rem;
}

.language-options small,
.language-save-status {
  color: #51485a;
}

.language-save-status {
  margin: 18px 0 0;
  font-weight: 700;
}

.settings-intro {
  margin-bottom: 20px;
}

.settings-intro h2,
.settings-intro p {
  margin-top: 0;
}

.mypage-body .settings-intro > p:not(.eyebrow),
.mypage-body .settings-card p,
.mypage-body .language-save-status {
  color: #b9c3d7;
}

.settings-intro h2 {
  margin-bottom: 8px;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
}

.settings-stack {
  display: grid;
  gap: 14px;
}

.settings-card {
  padding: clamp(16px, 2.5vw, 22px);
  background: #2b416c;
  border: 1px solid #50638a;
  border-radius: 8px;
}

.settings-card-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.settings-card-heading h2,
.settings-card-heading p {
  margin: 0;
}

.settings-card-heading > p {
  max-width: 480px;
  color: #b9c3d7;
  font-size: 0.8rem;
  text-align: right;
}

.setting-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.setting-choice-grid button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 10px;
  min-height: 76px;
  align-items: center;
  padding: 12px;
  color: #f8f6ef;
  background: #20375f;
  border: 1px solid #50638a;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.setting-choice-grid button > span {
  grid-row: 1 / 3;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #17233f;
  background: #c9c0e2;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 900;
}

.setting-choice-grid button strong,
.setting-choice-grid button small {
  min-width: 0;
}

.setting-choice-grid button small {
  color: #aeb9cf;
  font-size: 0.68rem;
}

.setting-choice-grid button:hover,
.setting-choice-grid button.active {
  background: #3a4d79;
  border-color: #f5c943;
  outline: none;
}

.setting-toggle-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.setting-toggle-row {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  background: #20375f;
  border: 1px solid #50638a;
  border-radius: 7px;
  cursor: pointer;
}

.setting-toggle-row > span {
  display: grid;
  gap: 3px;
}

.setting-toggle-row small {
  color: #aeb9cf;
  font-size: 0.7rem;
}

.setting-toggle-row input {
  width: 46px;
  height: 24px;
  accent-color: #f5c943;
  cursor: pointer;
}

@media (max-width: 620px) {
  .language-options,
  .setting-choice-grid {
    grid-template-columns: 1fr;
  }

  .settings-card-heading {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }

  .settings-card-heading > p {
    text-align: left;
  }

  .mypage-tabs button {
    min-width: 0;
    flex: 1;
  }
}

/* Compact icon-led header menus. */
.nav-course-trigger,
.nav-blog-trigger,
.nav-focus-trigger,
.nav-mypage-trigger,
.nav-community-trigger {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
}

.nav-menu-icon,
.menu-heading-icon,
.menu-item-icon,
.menu-stat-icon,
.menu-action-icon {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
}

.nav-menu-icon {
  width: 16px;
  height: 16px;
}

.menu-heading-icon {
  width: 20px;
  height: 20px;
}

.menu-item-icon {
  width: 19px;
  height: 19px;
}

.course-mega,
.blog-mega,
.focus-mega,
.community-mega {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.course-mega { width: min(940px, calc(100vw - 36px)); }
.blog-mega { width: min(780px, calc(100vw - 36px)); }
.focus-mega { width: min(860px, calc(100vw - 36px)); }
.community-mega { width: min(860px, calc(100vw - 36px)); }

.course-mega-inner,
.blog-mega-inner,
.focus-mega-inner,
.community-mega-inner {
  gap: 10px;
  max-height: min(72vh, calc(100vh - 92px));
  padding: 10px;
  background: #f7f5ef;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 16px 34px rgba(13, 25, 49, 0.2);
}

.course-mega-inner { grid-template-columns: 210px minmax(0, 1fr); }
.blog-mega-inner,
.community-mega-inner { grid-template-columns: 178px minmax(0, 1fr); }
.focus-mega-inner { grid-template-columns: minmax(0, 1fr) 270px; }

.course-mega-side,
.blog-mega-side,
.community-mega-side,
.focus-panel {
  padding: 5px;
  background: transparent;
  border: 0;
}

.course-mega-side .menu-panel-title,
.blog-mega-side .menu-panel-title,
.community-mega-side h2,
.focus-panel .menu-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.course-mega-side > .eyebrow,
.blog-mega-side > .eyebrow,
.community-mega-side > .eyebrow,
.focus-panel > .eyebrow {
  margin-bottom: 4px;
  font-size: 0.58rem;
}

.course-mega-side > p:not(.eyebrow),
.blog-mega-side > p:not(.eyebrow),
.community-mega-side > p:not(.eyebrow) {
  display: none;
}

.course-mega-categories {
  gap: 5px;
  margin-top: 8px;
}

.mega-category {
  min-height: 36px;
  gap: 7px;
  padding: 5px 7px;
  background: var(--white);
  border: 1px solid #9aa3b4;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 700;
}

.mega-category.active,
.mega-category:hover {
  border-color: var(--ink);
  box-shadow: none;
}

.mega-category-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.mega-category small {
  font-size: 0.5rem;
  font-weight: 700;
}

.course-mega-list,
.mega-course-subcategory {
  gap: 6px;
}

.mega-course-subcategory + .mega-course-subcategory {
  margin-top: 3px;
}

.mega-course-subcategory-heading {
  gap: 0;
  padding: 3px 1px 1px;
}

.mega-course-subcategory-heading strong {
  font-size: 0.72rem;
  font-weight: 700;
}

.mega-course-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
  min-height: 42px;
  align-items: center;
  padding: 6px 8px;
  background: var(--white);
  border: 1px solid #a4acba;
  border-radius: 5px;
  box-shadow: none;
}

.mega-course-card:hover,
.mega-course-card:focus-visible {
  background: #eef7f8;
  border-color: var(--ink);
  outline: none;
}

.mega-course-card .menu-item-icon,
.blog-topic-card > .menu-item-icon,
.community-topic-card > .menu-item-icon,
.focus-option > .menu-item-icon {
  width: 28px;
  height: 28px;
  padding: 5px;
  color: #294c63;
  background: #e6f0f1;
  border: 1px solid #9bb4bd;
  border-radius: 5px;
}

.mega-course-card h3 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.blog-menu-grid,
.community-menu-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.blog-topic-card,
.community-topic-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  min-height: 62px;
  align-items: center;
  padding: 7px;
  background: var(--white);
  border: 1px solid #a4acba;
  border-radius: 5px;
  box-shadow: none;
}

.blog-topic-card:hover,
.blog-topic-card.active,
.community-topic-card:hover {
  border-color: var(--ink);
  box-shadow: none;
}

.blog-topic-card .menu-card-copy,
.community-topic-card .menu-card-copy {
  display: block;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.menu-card-copy small {
  display: block;
  margin-bottom: 1px;
  color: #5f687b;
  font-size: 0.48rem;
  font-weight: 700;
}

.blog-topic-card .menu-card-copy h3,
.community-topic-card .menu-card-copy h3 {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.blog-topic-card .menu-card-copy p,
.community-topic-card .menu-card-copy p {
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-options,
.sound-options,
.timer-options {
  grid-template-columns: 1fr;
  gap: 5px;
}

.focus-option,
.sound-options .focus-option {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  min-height: 42px;
  align-items: center;
  padding: 6px;
  background: var(--white);
  border: 1px solid #a4acba;
  border-radius: 5px;
}

.focus-option:hover,
.focus-option.active {
  border-color: var(--ink);
  box-shadow: none;
}

.focus-option-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.focus-option-copy strong {
  font-size: 0.74rem;
  font-weight: 700;
}

.focus-option-copy > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.youtube-focus-playlist,
.focus-statistics {
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #a4acba;
}

.youtube-focus-playlist:not(.selected) .youtube-focus-frame {
  display: none;
}

.youtube-focus-frame {
  height: 140px;
  aspect-ratio: auto;
  border: 1px solid var(--ink);
  border-radius: 5px;
}

.focus-statistics-summary { gap: 5px; }
.focus-statistics-summary > div { gap: 2px; padding: 6px; border: 1px solid #a4acba; border-radius: 5px; }
.focus-statistics-timers { gap: 3px; }
.focus-statistics-timers > div { padding: 5px 6px; border-width: 1px; }

.mypage-mega {
  top: calc(100% + 6px);
  width: min(350px, calc(100vw - 36px));
}

.mypage-mega-inner,
.signup-menu-inner {
  gap: 8px;
  padding: 10px;
  background: #f7f5ef;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 16px 34px rgba(13, 25, 49, 0.2);
}

.mypage-menu-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
}

.mypage-menu-heading .eyebrow { margin: 0; }

.mypage-mini-camp {
  grid-template-columns: 48px 1fr;
  gap: 8px;
  padding: 7px;
  border: 1px solid #a4acba;
  border-radius: 5px;
}

.mypage-mini-sprite {
  width: 48px;
  height: 48px;
  border-width: 1px;
  border-radius: 5px;
  font-size: 1.25rem;
}

.mypage-mini-copy h3 { margin-bottom: 2px; font-size: 0.84rem; }
.mypage-mini-copy p { font-size: 0.65rem; }
.mypage-mini-bar { height: 6px; margin-top: 5px; border-width: 1px; }
.mypage-mini-stats { gap: 6px; }

.mypage-mini-stats div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 6px;
  border: 1px solid #a4acba;
  border-radius: 5px;
}

.menu-stat-icon { width: 18px; height: 18px; color: #294c63; }
.mypage-mini-stats small { font-size: 0.52rem; }
.mypage-mini-stats strong { margin-top: 1px; font-size: 0.7rem; }

.mypage-open-button {
  min-height: 34px;
  gap: 6px;
  border: 1px solid var(--ink);
  border-radius: 5px;
  box-shadow: none;
}

.menu-action-icon { width: 15px; height: 15px; }

.signup-menu { width: min(330px, calc(100vw - 36px)); }
.signup-menu h2 { font-size: 1rem; }
.signup-form { gap: 5px; }
.signup-form input:not([type="checkbox"]),
.signup-choice { min-height: 36px; border-width: 1px; border-radius: 5px; box-shadow: none; }

@media (max-width: 920px) {
  .main-nav > button {
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border-width: 1px;
    box-shadow: none;
  }

  .course-mega,
  .blog-mega,
  .focus-mega,
  .community-mega {
    left: 18px;
    right: 18px;
    width: auto;
    transform: none;
  }

  .course-mega-inner,
  .blog-mega-inner,
  .focus-mega-inner,
  .community-mega-inner {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 112px);
  }

  .course-mega-side,
  .blog-mega-side,
  .community-mega-side { padding-bottom: 2px; }

  .course-mega-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-category { min-width: 0; }
  .mega-category small { display: none; }
  .blog-menu-grid,
  .community-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .course-mega-inner,
  .blog-mega-inner,
  .focus-mega-inner,
  .community-mega-inner { padding: 8px; }

  .course-mega-categories,
  .course-mega-list,
  .mega-course-subcategory,
  .blog-menu-grid,
  .community-menu-grid { grid-template-columns: 1fr; }

  .course-mega-side .menu-panel-title,
  .blog-mega-side .menu-panel-title,
  .community-mega-side h2 { display: none; }

  .course-mega-side > .eyebrow,
  .blog-mega-side > .eyebrow,
  .community-mega-side > .eyebrow { margin: 0; }

  .course-mega-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-category-label { justify-content: center; }
  .mega-category-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mega-category .menu-item-icon { display: none; }
  .blog-topic-card .menu-card-copy p,
  .community-topic-card .menu-card-copy p { white-space: normal; }
}

.wrong-answer-intro {
  margin: 8px 0 0;
  color: #51485a;
}

.wrong-answer-item {
  background: #fff8f4;
  border: 3px solid var(--ink);
}

.wrong-answer-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.wrong-answer-item summary > span {
  display: grid;
  gap: 5px;
}

.wrong-answer-item summary small {
  color: #6d4750;
}

.wrong-answer-item summary b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  background: #ffb3a7;
  border: 2px solid var(--ink);
}

.wrong-answer-detail {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-top: 3px solid var(--ink);
}

.wrong-answer-detail > p {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  margin: 0;
}

.wrong-answer-detail > p span,
.wrong-answer-detail > div > strong {
  font-weight: 800;
}

.wrong-answer-detail > div p {
  margin: 6px 0 0;
  line-height: 1.6;
}

.wrong-answer-detail a {
  justify-self: start;
  color: var(--ink);
  font-weight: 800;
}

@media (max-width: 900px) {
  .study-history-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .assessment-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .assessment-result {
    align-items: flex-start;
    flex-direction: column;
  }
}

.quiz-options {
  display: grid;
  gap: 8px;
}

.quiz-option {
  padding: 10px 12px;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.quiz-option:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.quiz-option:disabled:hover {
  transform: none;
  box-shadow: none;
}

.quiz-option.correct {
  background: var(--lime);
}

.quiz-option.incorrect {
  background: #ffd0d0;
}

.quiz-feedback {
  display: none;
  gap: 6px;
  margin: 12px 0 0;
  padding: 12px;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  font-weight: 700;
  line-height: 1.55;
}

.quiz-feedback.visible {
  display: grid;
}

.lesson-article-header {
  display: grid;
  gap: 8px;
}

.lesson-article-header :is(h1, h2) {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.lesson-article-header p:not(.eyebrow) {
  margin: 0;
}

.lesson-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lesson-note,
.lesson-checkpoint {
  padding: 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 2px;
}

.lesson-note h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.25;
}

.lesson-note p,
.lesson-note li,
.lesson-checkpoint p {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}

.lesson-note p {
  margin: 0 0 10px;
}

.lesson-note ul,
.lesson-note ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.lesson-note-wide {
  grid-column: 1 / -1;
}

.precalc-table-wrap {
  width: 100%;
  margin: 12px 0;
  overflow-x: auto;
}

.precalc-concept-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.88rem;
  line-height: 1.45;
}

.precalc-concept-table th,
.precalc-concept-table td {
  padding: 10px 12px;
  border: 1px solid #6078a0;
  text-align: left;
  vertical-align: top;
}

.precalc-concept-table th {
  color: #ffe06a;
  background: #101f3b;
}

.precalc-concept-table td {
  color: #e5eaf3;
  background: #29466f;
}

.precalc-reasoning-steps {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 22px;
  color: #d3dbea;
  font-weight: 800;
  line-height: 1.55;
}

.precalc-checkpoint-expanded {
  display: grid;
  gap: 8px;
}

.precalc-checkpoint-expanded .precalc-reasoning-steps {
  margin: 0;
}

@media (max-width: 680px) {
  .lesson-note-wide {
    grid-column: auto;
  }
}

.lesson-formula {
  margin: 12px 0;
  padding: 12px;
  overflow-x: auto;
  background: var(--night);
  border: 3px solid var(--ink);
  border-radius: 2px;
  color: var(--gold);
  font-family: "STIX Two Math", "Cambria Math", serif;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.5;
}

.lesson-formula mjx-container {
  color: var(--gold);
  font-size: 112% !important;
}

.science-derivation ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.science-equation-strip {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px dashed var(--ink);
}

.science-equation-strip > strong {
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.72rem;
  line-height: 1.5;
}

.science-pixel-diagram {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--ink) 22%, transparent);
}

.science-pixel-diagram svg {
  display: block;
  width: 100%;
  max-height: 270px;
  background: color-mix(in srgb, var(--gold) 10%, var(--paper));
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.science-pixel-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 8%, transparent);
  stroke-width: 1;
}

.science-pixel-art {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.science-pixel-art .accent {
  stroke: var(--accent);
}

.science-pixel-art .pixel-fill {
  fill: var(--gold);
  stroke: var(--ink);
}

.science-pixel-art text {
  fill: var(--ink);
  stroke: none;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.science-pixel-diagram figcaption {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.science-topic-extension {
  display: grid;
  gap: 14px;
}

.science-extension-intro {
  margin-top: 2px;
}

.science-wave-pulse-figure {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 10px;
  background: var(--white);
  border: 3px solid var(--ink);
}

.science-wave-pulse-figure svg {
  display: block;
  width: 100%;
  height: auto;
  background: color-mix(in srgb, var(--gold) 9%, var(--paper));
}

.science-wave-pulse-figure .wave-axis {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 52%, transparent);
  stroke-width: 2;
}

.science-wave-pulse-figure .wave-curve {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
}

.science-wave-pulse-figure .wave-marker {
  fill: var(--gold);
  stroke: var(--ink);
  stroke-width: 3;
}

.science-wave-pulse-figure .wave-motion-arrow {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
}

.science-wave-pulse-figure .wave-label {
  fill: var(--ink);
  font-family: "Manrope", "Noto Sans KR", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.periodic-wave-figure .periodic-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 10%, transparent);
  stroke-width: 1;
}

.periodic-wave-figure .periodic-curve {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
}

.periodic-wave-figure .periodic-measure {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.periodic-graph-rules,
.periodic-equation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 11px;
}

.periodic-graph-rules > div,
.periodic-equation-grid > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
}

.periodic-graph-rules span,
.periodic-equation-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .periodic-graph-rules,
  .periodic-equation-grid {
    grid-template-columns: 1fr;
  }
}

.boundary-case-grid,
.boundary-investigation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.boundary-case-grid > div,
.boundary-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
}

.boundary-case-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.boundary-wave-figure .boundary-baseline,
.boundary-wave-figure .boundary-wall,
.boundary-wave-figure .boundary-junction,
.boundary-wave-figure .boundary-direction,
.polarizer-figure .polarizer-path,
.polarizer-figure .polarizer-angle {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.boundary-wave-figure .boundary-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
}

.boundary-wave-figure .boundary-pulse.reflected {
  stroke: color-mix(in srgb, var(--accent) 64%, var(--ink));
}

.boundary-wave-figure .boundary-pulse.transmitted {
  stroke: color-mix(in srgb, var(--gold) 68%, var(--ink));
}

.boundary-wave-figure .boundary-junction text {
  fill: var(--ink);
  stroke: none;
  font-family: "Manrope", "Noto Sans KR", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.polarizer-figure .polarizer-sheet {
  fill: color-mix(in srgb, var(--gold) 24%, var(--paper));
  stroke: var(--ink);
  stroke-width: 3;
}

.polarizer-figure .polarizer-field {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
}

.polarizer-figure .polarizer-field.transmitted {
  stroke: color-mix(in srgb, var(--gold) 58%, var(--accent));
}

@media (max-width: 680px) {
  .boundary-case-grid,
  .boundary-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.em-wave-figure .em-wave-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.em-wave-figure .em-wave-electric {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
}

.em-wave-figure .em-wave-magnetic {
  fill: none;
  stroke: color-mix(in srgb, var(--gold) 62%, var(--ink));
  stroke-width: 4;
}

.em-wave-figure .em-wave-magnetic .em-dot {
  fill: color-mix(in srgb, var(--gold) 62%, var(--ink));
  stroke: none;
}

.em-relation-grid,
.em-investigation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.em-relation-grid > div,
.em-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.em-relation-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.em-interaction-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.em-investigation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.em-spectrum-wrap {
  margin: 12px 0;
  overflow-x: auto;
}

.em-spectrum-direction {
  display: flex;
  justify-content: space-between;
  min-width: 700px;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.em-spectrum-strip {
  display: grid;
  grid-template-columns: 1.5fr 1.25fr 1fr 0.72fr 1fr 0.82fr 0.82fr;
  min-width: 700px;
  border: 2px solid var(--ink);
}

.em-spectrum-strip span {
  display: grid;
  min-height: 64px;
  padding: 7px;
  place-items: center;
  border-right: 2px solid color-mix(in srgb, var(--ink) 68%, transparent);
  color: #102034;
  font-size: 0.76rem;
  font-weight: 900;
  text-align: center;
}

.em-spectrum-strip span:last-child { border-right: 0; }
.em-spectrum-strip .radio { background: #d7c8ff; }
.em-spectrum-strip .microwave { background: #bcd9ff; }
.em-spectrum-strip .infrared { background: #ffb8a6; }
.em-spectrum-strip .visible { background: linear-gradient(90deg, #7459d9, #5da8ff, #68c979, #f1d252, #f2994a, #df5968); }
.em-spectrum-strip .ultraviolet { background: #c99be8; }
.em-spectrum-strip .xray { background: #a8e5df; }
.em-spectrum-strip .gamma { background: #f7c85a; }

@media (max-width: 680px) {
  .em-relation-grid,
  .em-interaction-grid,
  .em-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.doppler-wavefront-figure .doppler-axis,
.doppler-wavefront-figure .doppler-spacing {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.doppler-wavefront-figure .doppler-stationary-fronts,
.doppler-wavefront-figure .doppler-moving-fronts {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
}

.doppler-wavefront-figure .doppler-moving-fronts {
  stroke: color-mix(in srgb, var(--accent) 72%, var(--gold));
}

.doppler-wavefront-figure .doppler-source {
  fill: color-mix(in srgb, var(--gold) 34%, var(--paper));
  stroke: var(--ink);
  stroke-width: 3;
}

.doppler-case-grid,
.doppler-investigation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.doppler-case-grid > div,
.doppler-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.doppler-case-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.doppler-shift-scale {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0;
  border: 2px solid var(--ink);
}

.doppler-shift-scale span {
  display: grid;
  min-height: 72px;
  padding: 8px;
  place-items: center;
  border-right: 2px solid var(--ink);
  color: #102034;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.doppler-shift-scale span:last-child { border-right: 0; }
.doppler-shift-scale .blue { background: #a9d5ff; }
.doppler-shift-scale .rest { background: #f4efdd; }
.doppler-shift-scale .red { background: #ffaea8; }

@media (max-width: 680px) {
  .doppler-case-grid,
  .doppler-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.superposition-pulse-figure .superposition-baseline,
.superposition-pulse-figure .superposition-direction,
.standing-mode-figure .standing-frame {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.superposition-pulse-figure .superposition-component,
.superposition-pulse-figure .superposition-result,
.standing-mode-figure .standing-mode-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
}

.superposition-pulse-figure .superposition-component.first {
  stroke: color-mix(in srgb, var(--accent) 70%, var(--gold));
}

.superposition-pulse-figure .superposition-result {
  stroke: color-mix(in srgb, var(--gold) 62%, var(--ink));
}

.standing-mode-figure .standing-node {
  fill: color-mix(in srgb, var(--gold) 70%, var(--ink));
  stroke: var(--ink);
  stroke-width: 2;
}

.interference-condition-grid,
.standing-boundary-grid,
.interference-investigation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.interference-condition-grid > div,
.standing-boundary-grid > div,
.interference-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.interference-condition-grid span,
.standing-boundary-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.standing-boundary-grid,
.interference-investigation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 680px) {
  .interference-condition-grid,
  .standing-boundary-grid,
  .interference-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.diffraction-opening-figure .diffraction-incident,
.diffraction-opening-figure .diffraction-emerging {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
}

.diffraction-opening-figure .diffraction-emerging {
  stroke: color-mix(in srgb, var(--accent) 70%, var(--gold));
}

.diffraction-opening-figure .diffraction-barrier {
  fill: none;
  stroke: var(--ink);
  stroke-width: 12;
}

.diffraction-intensity-figure .diffraction-graph-axis,
.diffraction-intensity-figure .diffraction-width {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.diffraction-intensity-figure .diffraction-graph-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 24%, transparent);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.diffraction-intensity-figure .diffraction-intensity-curve {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
}

.diffraction-intensity-figure .diffraction-minimum {
  fill: color-mix(in srgb, var(--gold) 70%, var(--ink));
  stroke: var(--ink);
  stroke-width: 2;
}

.diffraction-scale-grid,
.diffraction-trend-grid,
.diffraction-regime-grid,
.diffraction-investigation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.diffraction-scale-grid > div,
.diffraction-trend-grid > div,
.diffraction-regime-grid > div,
.diffraction-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.diffraction-scale-grid span,
.diffraction-trend-grid span,
.diffraction-regime-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.diffraction-regime-grid,
.diffraction-investigation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 680px) {
  .diffraction-scale-grid,
  .diffraction-trend-grid,
  .diffraction-regime-grid,
  .diffraction-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.two-slit-geometry-figure .two-slit-axis,
.two-slit-geometry-figure .two-slit-guides,
.two-slit-envelope-figure .two-slit-graph-axis,
.two-slit-envelope-figure .two-slit-envelope-label {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.two-slit-geometry-figure .two-slit-guides {
  stroke-dasharray: 7 6;
  opacity: 0.62;
}

.two-slit-geometry-figure .two-slit-barrier {
  fill: none;
  stroke: var(--ink);
  stroke-width: 12;
}

.two-slit-geometry-figure .two-slit-rays,
.two-slit-envelope-figure .two-slit-envelope {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
}

.two-slit-geometry-figure .two-slit-points {
  fill: color-mix(in srgb, var(--gold) 68%, var(--ink));
  stroke: var(--ink);
  stroke-width: 2;
}

.two-slit-geometry-figure .two-slit-screen-fringes {
  fill: none;
  stroke: color-mix(in srgb, var(--gold) 68%, var(--ink));
  stroke-width: 8;
}

.two-slit-envelope-figure .two-slit-envelope {
  stroke-dasharray: 10 7;
}

.two-slit-envelope-figure .two-slit-fringes {
  fill: none;
  stroke: color-mix(in srgb, var(--gold) 64%, var(--ink));
  stroke-width: 7;
}

.two-slit-envelope-figure .two-slit-envelope-label text {
  fill: var(--ink);
  stroke: none;
  font-family: "Manrope", "Noto Sans KR", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.two-slit-trend-grid,
.slit-role-grid,
.grating-phase-grid,
.two-slit-investigation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.two-slit-trend-grid > div,
.slit-role-grid > div,
.grating-phase-grid > div,
.two-slit-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.two-slit-trend-grid span,
.slit-role-grid span,
.grating-phase-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.slit-role-grid,
.two-slit-investigation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 680px) {
  .two-slit-trend-grid,
  .slit-role-grid,
  .grating-phase-grid,
  .two-slit-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.thin-film-ray-figure .thin-film-layers {
  fill: color-mix(in srgb, var(--gold) 14%, var(--white));
  stroke: var(--ink);
  stroke-width: 3;
}

.thin-film-ray-figure .thin-film-rays,
.thin-film-ray-figure .thin-film-thickness {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
}

.thin-film-ray-figure .thin-film-thickness {
  stroke: var(--ink);
  stroke-width: 3;
}

.thin-film-ray-figure .thin-film-normal {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 45%, transparent);
  stroke-width: 2;
  stroke-dasharray: 7 6;
}

.thin-film-ray-figure .thin-film-phase-mark {
  fill: color-mix(in srgb, var(--gold) 68%, var(--paper));
  stroke: var(--ink);
  stroke-width: 3;
}

.film-color-map-figure .film-wedge {
  fill: color-mix(in srgb, var(--gold) 15%, var(--white));
  stroke: var(--ink);
  stroke-width: 3;
}

.film-color-map-figure .film-color-band {
  fill: url(#film-color-gradient);
  stroke: var(--ink);
  stroke-width: 3;
}

.film-color-map-figure .film-color-markers {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 45%, transparent);
  stroke-width: 2;
  stroke-dasharray: 5 5;
}

.film-reflection-rule-grid,
.film-stack-grid,
.film-investigation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.film-reflection-rule-grid > div,
.film-stack-grid > div,
.film-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.film-reflection-rule-grid span,
.film-stack-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.film-method-list {
  display: grid;
  gap: 7px;
  padding-left: 1.35rem;
}

.film-condition-table td:nth-child(2),
.film-condition-table td:nth-child(3) {
  min-width: 230px;
}

@media (max-width: 680px) {
  .film-reflection-rule-grid,
  .film-stack-grid,
  .film-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.quantum-photoelectric-figure .quantum-graph-axis,
.quantum-photoelectric-figure .quantum-threshold,
.quantum-buildup-figure .quantum-apparatus {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.quantum-photoelectric-figure .quantum-graph-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.quantum-photoelectric-figure .quantum-photoelectric-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
}

.quantum-photoelectric-figure .quantum-threshold {
  stroke-dasharray: 7 6;
}

.quantum-photoelectric-figure .quantum-threshold circle {
  fill: color-mix(in srgb, var(--gold) 68%, var(--ink));
  stroke-dasharray: none;
}

.quantum-photoelectric-figure .quantum-low-frequency {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 50%, transparent);
  stroke-width: 6;
}

.quantum-buildup-figure .quantum-apparatus circle {
  fill: color-mix(in srgb, var(--gold) 38%, var(--paper));
}

.quantum-buildup-figure .quantum-detector-panels {
  fill: color-mix(in srgb, var(--white) 84%, var(--gold));
  stroke: var(--ink);
  stroke-width: 3;
}

.quantum-buildup-figure .quantum-early-dots {
  fill: var(--accent);
}

.quantum-buildup-figure .quantum-fringe-dots {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 72%, var(--ink));
  stroke-width: 6;
  stroke-linecap: round;
}

.quantum-model-grid,
.quantum-investigation-grid,
.quantum-claim-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.quantum-model-grid > div,
.quantum-investigation-grid > div,
.quantum-claim-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.quantum-model-grid span,
.quantum-claim-grid span,
.quantum-claim-grid em {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.quantum-claim-grid em {
  color: var(--ink);
  font-style: normal;
}

.quantum-investigation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quantum-evidence-table td:first-child {
  min-width: 210px;
}

@media (max-width: 680px) {
  .quantum-model-grid,
  .quantum-investigation-grid,
  .quantum-claim-grid {
    grid-template-columns: 1fr;
  }
}

.hydrogen-energy-balance-figure .hydrogen-energy-axis,
.hydrogen-level-figure .hydrogen-level-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.hydrogen-energy-balance-figure .hydrogen-energy-bars {
  fill: var(--accent);
  stroke: var(--ink);
  stroke-width: 3;
}

.hydrogen-energy-balance-figure .hydrogen-energy-bars .potential {
  fill: color-mix(in srgb, var(--gold) 62%, var(--accent));
}

.hydrogen-energy-balance-figure .hydrogen-energy-bars .total {
  fill: color-mix(in srgb, var(--accent) 66%, var(--ink));
}

.hydrogen-energy-balance-figure .hydrogen-energy-guides {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 28%, transparent);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.hydrogen-level-figure .hydrogen-zero-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-dasharray: 9 6;
}

.hydrogen-level-figure .hydrogen-levels {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
}

.hydrogen-level-figure .he-levels {
  stroke: color-mix(in srgb, var(--gold) 62%, var(--ink));
}

.hydrogen-species-grid,
.hydrogen-model-grid,
.hydrogen-sign-grid,
.hydrogen-model-compare,
.hydrogen-investigation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.hydrogen-species-grid > div,
.hydrogen-model-grid > div,
.hydrogen-sign-grid > div,
.hydrogen-model-compare > div,
.hydrogen-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.hydrogen-species-grid span,
.hydrogen-model-grid span,
.hydrogen-sign-grid span,
.hydrogen-model-compare span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.hydrogen-model-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hydrogen-scaling-table td:first-child {
  min-width: 160px;
}

@media (max-width: 680px) {
  .hydrogen-species-grid,
  .hydrogen-model-grid,
  .hydrogen-sign-grid,
  .hydrogen-model-compare,
  .hydrogen-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.spectral-transition-figure .spectral-level-axis,
.spectral-series-figure .spectral-series-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.spectral-transition-figure .spectral-energy-levels {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 76%, var(--accent));
  stroke-width: 6;
  stroke-linecap: round;
}

.spectral-transition-figure .spectral-transition-arrows path {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}

.spectral-transition-figure .spectral-spectrum rect {
  fill: color-mix(in srgb, var(--ink) 92%, #000);
  stroke: color-mix(in srgb, var(--gold) 60%, var(--white));
  stroke-width: 3;
}

.spectral-transition-figure .spectral-spectrum path,
.spectral-series-figure .spectral-series-lines path {
  fill: none;
  stroke-width: 8;
}

.spectral-transition-figure .line-red,
.spectral-series-figure .line-red {
  stroke: #ff554f;
}

.spectral-transition-figure .line-cyan,
.spectral-series-figure .line-cyan {
  stroke: #38cbd7;
}

.spectral-transition-figure .line-violet,
.spectral-series-figure .line-violet {
  stroke: #765cff;
}

#spectral-arrow-red path {
  fill: #ff554f;
}

#spectral-arrow-cyan path {
  fill: #38cbd7;
}

#spectral-arrow-violet path {
  fill: #765cff;
}

.spectral-series-figure .spectral-visible-band {
  fill: url("#visible-band-gradient");
  opacity: 0.78;
  stroke: var(--ink);
  stroke-width: 2;
}

.spectral-series-figure .spectral-series-lines path {
  stroke: color-mix(in srgb, var(--accent) 75%, var(--ink));
  stroke-linecap: round;
}

.spectral-series-figure .spectral-series-lines .line-red {
  stroke: #ff554f;
}

.spectral-series-figure .spectral-series-lines .line-cyan {
  stroke: #38cbd7;
}

.spectral-series-figure .spectral-series-lines .line-violet {
  stroke: #765cff;
}

.spectrum-type-grid,
.spectral-conversion-grid,
.spectral-meaning-grid,
.spectral-investigation-grid,
.spectral-claim-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.spectrum-type-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spectrum-type-grid > div,
.spectral-conversion-grid > div,
.spectral-meaning-grid > div,
.spectral-investigation-grid > div,
.spectral-claim-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.spectrum-type-grid span,
.spectral-conversion-grid span,
.spectral-meaning-grid span,
.spectral-claim-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.spectral-evidence-table td:first-child,
.spectral-series-table td:first-child {
  min-width: 150px;
}

@media (max-width: 680px) {
  .spectrum-type-grid,
  .spectral-conversion-grid,
  .spectral-meaning-grid,
  .spectral-investigation-grid,
  .spectral-claim-grid {
    grid-template-columns: 1fr;
  }
}

.blackbody-curve-figure .blackbody-axis,
.blackbody-quantum-figure .blackbody-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.blackbody-curve-figure .blackbody-grid,
.blackbody-quantum-figure .blackbody-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 2;
  stroke-dasharray: 6 7;
}

.blackbody-curve-figure .blackbody-visible-band {
  fill: url("#blackbody-visible-gradient");
  opacity: 0.2;
}

.blackbody-curve-figure .blackbody-curves,
.blackbody-curve-figure .blackbody-peaks,
.blackbody-quantum-figure .blackbody-model-curves {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blackbody-curve-figure .blackbody-curves path {
  stroke-width: 7;
}

.blackbody-curve-figure .curve-3000 {
  stroke: #ff685e;
}

.blackbody-curve-figure .curve-4500 {
  stroke: #f0b640;
}

.blackbody-curve-figure .curve-6000 {
  stroke: #4f7cff;
}

.blackbody-curve-figure .blackbody-peaks path {
  stroke: color-mix(in srgb, var(--ink) 62%, transparent);
  stroke-width: 3;
  stroke-dasharray: 7 6;
}

.blackbody-curve-figure .blackbody-peaks circle {
  stroke: var(--ink);
  stroke-width: 3;
}

.blackbody-curve-figure .peak-3000 {
  fill: #ff685e;
}

.blackbody-curve-figure .peak-4500 {
  fill: #f0b640;
}

.blackbody-curve-figure .peak-6000 {
  fill: #4f7cff;
}

.blackbody-quantum-figure .blackbody-model-curves path {
  stroke-width: 7;
}

.blackbody-quantum-figure .blackbody-model-curves .measured {
  stroke: color-mix(in srgb, var(--ink) 50%, transparent);
  stroke-width: 3;
  stroke-dasharray: 4 7;
}

.blackbody-quantum-figure .blackbody-model-curves .planck {
  stroke: var(--accent);
}

.blackbody-quantum-figure .blackbody-model-curves .classical {
  stroke: #df675d;
  stroke-dasharray: 10 7;
}

.blackbody-quantum-figure .blackbody-data {
  fill: var(--ink);
}

.blackbody-feature-grid,
.blackbody-rule-grid,
.blackbody-sign-grid,
.blackbody-investigation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.blackbody-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blackbody-sign-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blackbody-feature-grid > div,
.blackbody-rule-grid > div,
.blackbody-sign-grid > div,
.blackbody-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.blackbody-feature-grid span,
.blackbody-rule-grid span,
.blackbody-sign-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.blackbody-spectrum-table td:first-child,
.blackbody-example-table td:first-child {
  min-width: 170px;
}

@media (max-width: 680px) {
  .blackbody-feature-grid,
  .blackbody-rule-grid,
  .blackbody-sign-grid,
  .blackbody-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.photoelectric-apparatus-figure .photoelectric-tube {
  fill: color-mix(in srgb, var(--white) 88%, var(--accent));
  stroke: var(--ink);
  stroke-width: 4;
}

.photoelectric-apparatus-figure .photoelectric-cathode,
.photoelectric-apparatus-figure .photoelectric-anode {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 84%, var(--accent));
  stroke-width: 24;
  stroke-linecap: round;
}

.photoelectric-apparatus-figure .photoelectric-photons {
  fill: none;
  stroke: var(--gold);
  stroke-width: 7;
  stroke-linecap: round;
}

.photoelectric-apparatus-figure .photoelectric-electrons {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 5;
}

#photoelectron-arrow path {
  fill: var(--accent);
}

.photoelectric-apparatus-figure .photoelectric-wire,
.photoelectric-apparatus-figure .photoelectric-meter {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.photoelectric-apparatus-figure .photoelectric-wire circle,
.photoelectric-apparatus-figure .photoelectric-meter circle {
  fill: color-mix(in srgb, var(--gold) 14%, var(--white));
}

.photoelectric-linear-figure .photoelectric-graph-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.photoelectric-linear-figure .photoelectric-graph-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 2;
  stroke-dasharray: 6 7;
}

.photoelectric-linear-figure .photoelectric-linear-lines,
.photoelectric-linear-figure .photoelectric-intercepts {
  fill: none;
  stroke-linecap: round;
}

.photoelectric-linear-figure .photoelectric-linear-lines path {
  stroke-width: 7;
}

.photoelectric-linear-figure .photoelectric-intercepts path {
  stroke: color-mix(in srgb, var(--ink) 54%, transparent);
  stroke-width: 3;
  stroke-dasharray: 7 6;
}

.photoelectric-linear-figure .metal-a {
  stroke: var(--accent);
}

.photoelectric-linear-figure .metal-b {
  stroke: color-mix(in srgb, var(--gold) 70%, var(--ink));
}

.photoelectric-linear-figure circle.metal-a {
  fill: var(--accent);
}

.photoelectric-linear-figure circle.metal-b {
  fill: color-mix(in srgb, var(--gold) 70%, var(--ink));
}

.photoelectric-evidence-grid,
.photoelectric-threshold-grid,
.photoelectric-graph-key-grid,
.photoelectric-iv-grid,
.photoelectric-investigation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.photoelectric-evidence-grid,
.photoelectric-graph-key-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.photoelectric-evidence-grid > div,
.photoelectric-threshold-grid > div,
.photoelectric-graph-key-grid > div,
.photoelectric-iv-grid > div,
.photoelectric-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.photoelectric-evidence-grid span,
.photoelectric-threshold-grid span,
.photoelectric-graph-key-grid span,
.photoelectric-iv-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.photoelectric-control-table td:first-child,
.photoelectric-model-table td:first-child {
  min-width: 210px;
}

@media (max-width: 680px) {
  .photoelectric-evidence-grid,
  .photoelectric-threshold-grid,
  .photoelectric-graph-key-grid,
  .photoelectric-iv-grid,
  .photoelectric-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.compton-collision-figure .compton-axis {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 26%, transparent);
  stroke-width: 2;
  stroke-dasharray: 7 7;
}

.compton-collision-figure .compton-vectors {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.compton-collision-figure .compton-vectors .incoming,
.compton-collision-figure .compton-vectors .scattered {
  stroke: var(--accent);
}

.compton-collision-figure .compton-vectors .recoil {
  stroke: color-mix(in srgb, var(--gold) 72%, var(--ink));
}

#compton-photon-arrow path {
  fill: var(--accent);
}

#compton-electron-arrow path {
  fill: color-mix(in srgb, var(--gold) 72%, var(--ink));
}

.compton-collision-figure .compton-electron-initial {
  fill: color-mix(in srgb, var(--gold) 65%, var(--white));
  stroke: var(--ink);
  stroke-width: 4;
}

.compton-collision-figure .compton-angle-arcs {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.compton-angle-figure .compton-graph-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.compton-angle-figure .compton-graph-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 2;
  stroke-dasharray: 6 7;
}

.compton-angle-figure .compton-angle-curve {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
}

.compton-angle-figure .compton-angle-points {
  fill: color-mix(in srgb, var(--gold) 68%, var(--ink));
  stroke: var(--ink);
  stroke-width: 3;
}

.compton-evidence-grid,
.compton-assumption-grid,
.compton-dependence-grid,
.compton-investigation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.compton-evidence-grid,
.compton-dependence-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compton-evidence-grid > div,
.compton-assumption-grid > div,
.compton-dependence-grid > div,
.compton-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.compton-evidence-grid span,
.compton-assumption-grid span,
.compton-dependence-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.compton-angle-table td:first-child,
.compton-process-table td:first-child {
  min-width: 155px;
}

@media (max-width: 680px) {
  .compton-evidence-grid,
  .compton-assumption-grid,
  .compton-dependence-grid,
  .compton-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.nuclear-ledger-figure .nuclear-ledger-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.nuclear-ledger-figure .nuclear-ledger-bars rect {
  stroke: var(--ink);
  stroke-width: 3;
}

.nuclear-ledger-figure .initial-rest,
.nuclear-ledger-figure .final-rest {
  fill: color-mix(in srgb, var(--accent) 72%, var(--white));
}

.nuclear-ledger-figure .final-kinetic {
  fill: color-mix(in srgb, var(--gold) 72%, var(--white));
}

.nuclear-ledger-figure .final-radiation {
  fill: #f29a58;
}

.nuclear-ledger-figure .nuclear-ledger-guides {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 52%, transparent);
  stroke-width: 3;
  stroke-dasharray: 7 6;
}

.nuclear-binding-figure .nuclear-binding-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.nuclear-binding-figure .nuclear-binding-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 2;
  stroke-dasharray: 6 7;
}

.nuclear-binding-figure .nuclear-binding-curve {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nuclear-binding-figure .nuclear-binding-points {
  fill: color-mix(in srgb, var(--gold) 68%, var(--ink));
  stroke: var(--ink);
  stroke-width: 3;
}

.nuclear-binding-figure .nuclear-binding-arrows {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}

.nuclear-binding-figure .nuclear-binding-arrows .fusion {
  stroke: #42a978;
}

.nuclear-binding-figure .nuclear-binding-arrows .fission {
  stroke: #df675d;
}

.nuclear-accounting-grid,
.nuclear-mass-grid,
.nuclear-curve-key-grid,
.nuclear-q-grid,
.nuclear-process-grid,
.nuclear-chain-grid,
.nuclear-carrier-grid,
.nuclear-investigation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.nuclear-curve-key-grid,
.nuclear-q-grid,
.nuclear-chain-grid,
.nuclear-carrier-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nuclear-accounting-grid > div,
.nuclear-mass-grid > div,
.nuclear-curve-key-grid > div,
.nuclear-q-grid > div,
.nuclear-process-grid > div,
.nuclear-chain-grid > div,
.nuclear-carrier-grid > div,
.nuclear-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.nuclear-accounting-grid span,
.nuclear-mass-grid span,
.nuclear-curve-key-grid span,
.nuclear-q-grid span,
.nuclear-process-grid span,
.nuclear-chain-grid span,
.nuclear-carrier-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.nuclear-process-table td:first-child,
.nuclear-mass-table td:first-child {
  min-width: 190px;
}

@media (max-width: 680px) {
  .nuclear-accounting-grid,
  .nuclear-mass-grid,
  .nuclear-curve-key-grid,
  .nuclear-q-grid,
  .nuclear-process-grid,
  .nuclear-chain-grid,
  .nuclear-carrier-grid,
  .nuclear-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.decay-ensemble-figure .decay-panels rect {
  fill: color-mix(in srgb, var(--white) 88%, var(--gold));
  stroke: var(--ink);
  stroke-width: 3;
}

.decay-ensemble-figure .decay-nuclei circle {
  fill: var(--accent);
  stroke: color-mix(in srgb, var(--ink) 82%, var(--accent));
  stroke-width: 3;
}

.decay-ensemble-figure .panel-one circle {
  fill: color-mix(in srgb, var(--accent) 82%, var(--gold));
}

.decay-ensemble-figure .panel-two circle {
  fill: color-mix(in srgb, var(--accent) 64%, var(--gold));
}

.decay-ensemble-figure .panel-three circle {
  fill: color-mix(in srgb, var(--accent) 45%, var(--gold));
}

.decay-linearization-figure .decay-graph-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.decay-linearization-figure .decay-graph-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 2;
  stroke-dasharray: 6 7;
}

.decay-linearization-figure .decay-exponential-curve,
.decay-linearization-figure .decay-linear-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
}

.decay-linearization-figure .decay-linear-line {
  stroke: color-mix(in srgb, var(--gold) 68%, var(--ink));
}

.decay-linearization-figure .decay-half-points {
  fill: color-mix(in srgb, var(--gold) 68%, var(--ink));
  stroke: var(--ink);
  stroke-width: 3;
}

.decay-scale-grid,
.decay-dating-grid,
.decay-investigation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.decay-dating-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decay-scale-grid > div,
.decay-dating-grid > div,
.decay-investigation-grid > div {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 66%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--white));
}

.decay-scale-grid span,
.decay-dating-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.decay-fraction-table td:first-child,
.decay-unit-table td:first-child,
.decay-comparison-table td:first-child {
  min-width: 180px;
}

@media (max-width: 680px) {
  .decay-scale-grid,
  .decay-dating-grid,
  .decay-investigation-grid {
    grid-template-columns: 1fr;
  }
}

.science-wave-pulse-figure figcaption {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.5;
}

.science-wave-table-wrap {
  width: 100%;
  margin: 10px 0;
  overflow-x: auto;
}

.science-wave-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  color: var(--ink);
  background: var(--white);
  font-size: 0.82rem;
  line-height: 1.5;
}

.science-wave-table th,
.science-wave-table td {
  padding: 9px 10px;
  border: 2px solid color-mix(in srgb, var(--ink) 62%, transparent);
  text-align: left;
  vertical-align: top;
}

.science-wave-table th {
  color: var(--gold);
  background: var(--night);
}

.science-source-note {
  background: color-mix(in srgb, var(--gold) 12%, var(--paper));
}

.science-source-note a,
.science-topic-extension a {
  color: inherit;
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.ap-detailed-visual {
  display: grid;
  grid-template-columns: minmax(190px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 4px 0 18px;
  padding: 14px;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 13%, var(--paper)), var(--paper) 56%),
    var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--ink) 20%, transparent);
}

.science-diagram-note .ap-detailed-visual {
  grid-template-columns: 1fr;
  margin: 0;
}

.ap-visual-tile {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  background: color-mix(in srgb, var(--gold) 8%, var(--paper));
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--white) 72%, transparent);
  image-rendering: pixelated;
}

.ap-visual-atlas {
  position: absolute;
  top: var(--atlas-top, 0%);
  left: var(--atlas-left, 0%);
  display: block;
  width: 400%;
  max-width: none;
  height: 400%;
  object-fit: fill;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

.science-fine-pixel-visual .ap-visual-tile,
.science-fine-pixel-visual .ap-visual-atlas {
  image-rendering: auto;
}

.science-fine-pixel-visual {
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, #5bbcae 12%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 8%, var(--paper)), var(--paper) 62%);
}

.ap-detailed-visual figcaption {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.5;
}

.ap-detailed-visual figcaption strong {
  color: var(--ink);
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: clamp(0.82rem, 2vw, 1rem);
  line-height: 1.4;
}

.ap-concept-graph {
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(220px, 0.85fr);
  gap: 18px;
  align-items: center;
  margin: 4px 0 18px;
  padding: 14px;
  color: var(--ink);
  background: linear-gradient(135deg, #fff9ea, color-mix(in srgb, var(--gold) 10%, var(--paper)));
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--ink) 20%, transparent);
}

.ap-concept-graph canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #fff9ea;
  border: 2px solid var(--ink);
}

.ap-concept-graph figcaption {
  display: grid;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.55;
}

.ap-concept-graph figcaption strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.kinetic-scaling-figure {
  grid-template-columns: minmax(0, 1.5fr) minmax(230px, 0.5fr);
}

.kinetic-scaling-chart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  color: var(--ink);
  background: #fff9ea;
  border: 2px solid var(--ink);
}

.kinetic-chart-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.kinetic-chart-column > strong {
  font-size: 0.82rem;
  line-height: 1.35;
}

.kinetic-bar-row {
  display: grid;
  grid-template-columns: 54px minmax(70px, 1fr) 66px;
  gap: 7px;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
}

.kinetic-bar-row i {
  display: block;
  width: var(--bar-size);
  min-width: 8px;
  height: 15px;
  background: var(--cyan);
  border: 1px solid var(--ink);
}

.kinetic-speed-column .kinetic-bar-row i {
  background: var(--gold);
}

.kinetic-bar-row b {
  white-space: nowrap;
}

.kinetic-sources a,
.kinetic-investigation a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.kinetic-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.gas-variable-key {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.gas-variable-key > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 20%, var(--paper));
  border: 3px solid var(--ink);
}

.gas-variable-key strong {
  color: var(--ink);
  font-family: "STIX Two Math", "Cambria Math", serif;
  font-size: 1.2rem;
  line-height: 1.1;
}

.gas-variable-key span {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
}

.gas-variable-key small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.35;
}

.ideal-gas-sources a,
.ideal-gas-investigation a,
.thermal-sources a,
.thermal-investigation a,
.thermo-sources a,
.thermo-investigation a,
.material-response-sources a,
.material-response-investigation a,
.entropy-sources a,
.entropy-investigation a,
.coulomb-sources a,
.coulomb-investigation a,
.charge-transfer-sources a,
.charge-transfer-investigation a,
.electric-field-sources a,
.electric-field-investigation a,
.charge-energy-sources a,
.charge-energy-investigation a,
.electric-potential-sources a,
.electric-potential-investigation a,
.capacitor-sources a,
.capacitor-investigation a,
.particle-motion-sources a,
.particle-motion-investigation a,
.current-flow-sources a,
.current-flow-investigation a,
.simple-network-sources a,
.simple-network-investigation a,
.resistance-sources a,
.resistance-investigation a,
.power-sources a,
.power-investigation a,
.loop-equation-sources a,
.loop-equation-investigation a,
.junction-equation-sources a,
.junction-equation-investigation a,
.rc-transient-sources a,
.rc-transient-investigation a,
.magnetic-path-sources a,
.magnetic-path-investigation a,
.wire-force-sources a,
.wire-force-investigation a,
.induction-sources a,
.induction-investigation a,
.boundary-optics-sources a,
.boundary-optics-investigation a,
.mirror-model-sources a,
.mirror-model-investigation a,
.refraction-sources a,
.refraction-investigation a,
.thin-lens-sources a,
.thin-lens-investigation a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ideal-gas-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.thermal-concept-key {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.thermal-balance-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.thermo-accounting-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.material-response-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.entropy-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.coulomb-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.charge-transfer-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.electric-field-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.charge-energy-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.electric-potential-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.capacitor-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.particle-motion-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.current-flow-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.simple-network-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.resistance-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.power-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.loop-equation-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.junction-equation-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.rc-transient-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.magnetic-path-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.wire-force-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.induction-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.boundary-optics-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.mirror-model-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.refraction-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.thin-lens-checkpoint > p:not(:first-of-type) {
  margin-top: 18px;
}

.course-workspace-viewer .gas-variable-key > div {
  color: #f7f8fc;
  background: #20375f;
  border-color: #52688f;
}

.course-workspace-viewer .gas-variable-key strong {
  color: #ffe06a;
}

.course-workspace-viewer .gas-variable-key small {
  color: #d3dbea;
}

@media (max-width: 760px) {
  .ap-concept-graph {
    grid-template-columns: 1fr;
  }

  .kinetic-scaling-chart {
    grid-template-columns: 1fr;
  }

  .gas-variable-key {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ap-sequence-overview .ap-sequence-overview-graph {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  background: #fff9ea;
  border: 3px solid var(--ink);
}

.ap-sequence-overview .sequence-overview-grid,
.ap-sequence-overview .sequence-overview-axes,
.ap-sequence-overview .sequence-overview-guides {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.ap-sequence-overview .sequence-overview-grid {
  stroke: #ddd4c4;
  stroke-width: 1;
}

.ap-sequence-overview .sequence-overview-axes {
  stroke: var(--ink);
  stroke-width: 2.5;
}

.ap-sequence-overview .arithmetic-guide {
  stroke: #d47b28;
  stroke-dasharray: 5 5;
  stroke-width: 3;
}

.ap-sequence-overview .geometric-guide {
  stroke: #187d89;
  stroke-dasharray: 5 5;
  stroke-width: 3;
}

.ap-sequence-overview .sequence-overview-points circle {
  stroke: var(--ink);
  stroke-width: 2;
}

.ap-sequence-overview .arithmetic-points circle {
  fill: #f2a23a;
}

.ap-sequence-overview .geometric-points circle {
  fill: #35a7b4;
}

.ap-sequence-overview .sequence-overview-labels {
  fill: var(--ink);
  font-family: "Inter", "Noto Sans KR", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.ap-sequence-overview .arithmetic-label {
  fill: #ad5d16;
}

.ap-sequence-overview .geometric-label {
  fill: #126b75;
}

@media (max-width: 680px) {
  .ap-detailed-visual {
    grid-template-columns: 1fr;
  }

  .ap-visual-tile {
    max-width: 360px;
    margin-inline: auto;
  }
}

.precalc-graph {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 10px;
  background: var(--white);
  border: 2px solid var(--ink);
}

.precalc-graph svg {
  display: block;
  width: 100%;
  max-height: 280px;
  background: #fff9ea;
  border: 2px solid var(--ink);
}

.precalc-graph figcaption {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.45;
}

.precalc-hole-graph {
  grid-template-columns: minmax(280px, 1.25fr) minmax(220px, 0.75fr);
  align-items: center;
}

.precalc-hole-graph svg {
  max-height: none;
  background: #f8fbff;
}

.hole-graph-grid line {
  stroke: #d7e0ee;
  stroke-width: 1;
}

.hole-graph-axes line,
.hole-graph-axes path {
  fill: #21314f;
  stroke: #21314f;
  stroke-width: 2;
}

.hole-graph-curve > line {
  stroke: #2f6edb;
  stroke-width: 5;
}

.hole-graph-curve .hole-marker {
  fill: #f8fbff;
  stroke: #e24949;
  stroke-width: 5;
}

.hole-graph-curve .hole-callout {
  fill: none;
  stroke: #e24949;
  stroke-width: 2;
}

.hole-graph-labels {
  fill: #18243a;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.precalc-asymptote-graph {
  grid-template-columns: minmax(280px, 1.25fr) minmax(220px, 0.75fr);
  align-items: center;
}

.precalc-asymptote-graph svg {
  max-height: none;
  background: #f8fbff;
}

.precalc-zero-graph {
  grid-template-columns: minmax(280px, 1.25fr) minmax(220px, 0.75fr);
  align-items: center;
}

.precalc-zero-graph svg {
  max-height: none;
  background: #f8fbff;
}

.zero-graph-grid line {
  stroke: #d7e0ee;
  stroke-width: 1;
}

.zero-graph-axes line,
.zero-graph-axes path {
  fill: #21314f;
  stroke: #21314f;
  stroke-width: 2;
}

.zero-graph-guides {
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 9 7;
}

.zero-graph-guides .zero-vertical-asymptote {
  stroke: #e24949;
}

.zero-graph-guides .zero-horizontal-asymptote {
  stroke: #d47b28;
}

.zero-function-curve {
  fill: none;
  stroke: #2f6edb;
  stroke-linecap: round;
  stroke-width: 5;
}

.zero-graph-markers .excluded-point {
  fill: #f8fbff;
  stroke: #e24949;
  stroke-width: 5;
}

.zero-graph-markers .valid-zero {
  fill: #1d9a6c;
  stroke: #f8fbff;
  stroke-width: 3;
}

.zero-graph-markers .zero-callout {
  fill: none;
  stroke: #1d9a6c;
  stroke-width: 2;
}

.zero-graph-labels {
  fill: #18243a;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.zero-graph-labels .excluded-label {
  fill: #b83232;
}

.zero-graph-labels .valid-zero-label {
  fill: #147451;
}

.asymptote-graph-grid line {
  stroke: #d7e0ee;
  stroke-width: 1;
}

.asymptote-graph-axes line,
.asymptote-graph-axes path {
  fill: #21314f;
  stroke: #21314f;
  stroke-width: 2;
}

.asymptote-guides {
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 9 7;
}

.asymptote-guides .vertical-asymptote {
  stroke: #e24949;
}

.asymptote-guides .horizontal-asymptote {
  stroke: #d47b28;
}

.asymptote-function-curve {
  fill: none;
  stroke: #2f6edb;
  stroke-linecap: round;
  stroke-width: 5;
}

.asymptote-graph-labels {
  fill: #18243a;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 680px) {
  .precalc-hole-graph,
  .precalc-asymptote-graph,
  .precalc-zero-graph {
    grid-template-columns: 1fr;
  }
}

.precalc-grid,
.precalc-axes,
.precalc-curve {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.precalc-grid {
  stroke: #ded7c9;
  stroke-width: 1;
}

.precalc-axes {
  stroke: var(--ink);
  stroke-width: 2;
}

.precalc-curve {
  stroke: #187d89;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.precalc-curve .reference {
  stroke: #d47b28;
  stroke-width: 2.5;
}

.precalc-curve .asymptote {
  stroke: #db563f;
  stroke-dasharray: 6 5;
  stroke-width: 2;
}

.precalc-curve .point {
  fill: #187d89;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.precalc-curve .hole {
  fill: #fff9ea;
  stroke: #db563f;
  stroke-width: 3;
}

.precalc-curve .direction {
  stroke: #d47b28;
  stroke-width: 3;
}

.precalc-sequence-graph .sequence-panel-grid,
.precalc-sequence-graph .sequence-guides {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.precalc-sequence-graph .sequence-panel-grid {
  stroke: var(--ink);
  stroke-width: 2;
}

.precalc-sequence-graph .arithmetic-guide {
  stroke: #d47b28;
  stroke-width: 2.5;
}

.precalc-sequence-graph .geometric-guide {
  stroke: #187d89;
  stroke-width: 2.5;
}

.precalc-sequence-graph .sequence-points circle {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.precalc-sequence-graph .arithmetic-points circle {
  fill: #f2a23a;
}

.precalc-sequence-graph .geometric-points circle {
  fill: #35a7b4;
}

.precalc-sequence-graph .sequence-labels {
  fill: var(--ink);
  font-family: "Inter", "Noto Sans KR", sans-serif;
  font-size: 10px;
  font-weight: 800;
}

.precalc-residual-comparison .sequence-labels {
  fill: var(--ink);
  font-family: "Inter", "Noto Sans KR", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.discontinuity-lesson-note {
  grid-column: 1 / -1;
}

.discontinuity-graph-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.limit-estimate-graph-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.discontinuity-graph {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 10px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 2px;
}

.discontinuity-graph svg {
  display: block;
  width: 100%;
  height: auto;
  background: #fff9ea;
  border: 2px solid var(--ink);
}

.discontinuity-graph .graph-grid {
  fill: none;
  stroke: #d8d1c4;
  stroke-width: 1;
}

.discontinuity-graph .graph-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
}

.discontinuity-graph .graph-curve {
  fill: none;
  stroke: #187d89;
  stroke-linecap: round;
  stroke-width: 4;
}

.discontinuity-graph .graph-asymptote {
  fill: none;
  stroke: #db563f;
  stroke-dasharray: 7 6;
  stroke-width: 3;
}

.discontinuity-graph .graph-open-point {
  fill: #fff9ea;
  stroke: #187d89;
  stroke-width: 4;
}

.discontinuity-graph .graph-filled-point {
  fill: #db563f;
  stroke: var(--ink);
  stroke-width: 2;
}

.discontinuity-graph text {
  fill: var(--ink);
  font-family: "Manrope", "Noto Sans KR", sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.discontinuity-graph figcaption {
  display: grid;
  gap: 5px;
}

.discontinuity-graph figcaption strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.discontinuity-graph figcaption span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .discontinuity-graph-grid,
  .limit-estimate-graph-grid {
    grid-template-columns: 1fr;
  }

  .discontinuity-graph svg {
    max-height: 260px;
  }
}

.slope-field-figure {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.slope-field-figure svg {
  width: 100%;
  max-width: 360px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 2px;
}

.slope-field-figure rect {
  fill: #fff9ea;
}

.slope-field-figure .grid {
  fill: none;
  stroke: rgba(23, 17, 31, 0.16);
  stroke-width: 1;
}

.slope-field-figure .axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.slope-field-figure .segments {
  fill: none;
  stroke: var(--pink);
  stroke-linecap: square;
  stroke-width: 3;
}

.slope-field-figure figcaption {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.4;
}

.geometry-figure {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.geometry-figure svg {
  width: 100%;
  max-width: 420px;
  background: #fff9ea;
  border: 3px solid var(--ink);
  border-radius: 2px;
}

.geometry-figure .grid {
  stroke: rgba(23, 17, 31, 0.14);
  stroke-width: 1;
}

.geometry-figure .axis,
.geometry-figure .solid {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.geometry-figure .curve {
  fill: none;
  stroke: var(--pink);
  stroke-linecap: round;
  stroke-width: 4;
}

.geometry-figure .accent {
  fill: none;
  stroke: var(--blue-night);
  stroke-linecap: round;
  stroke-width: 4;
}

.geometry-figure .soft {
  fill: rgba(119, 209, 224, 0.35);
  stroke: var(--ink);
  stroke-width: 3;
}

.geometry-figure .point {
  fill: var(--gold);
  stroke: var(--ink);
  stroke-width: 3;
}

.geometry-figure text {
  fill: var(--ink);
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.geometry-figure figcaption {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.4;
}

.lesson-checkpoint {
  background: var(--cyan);
}

.lesson-checkpoint strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.lesson-checkpoint details {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px solid var(--ink);
}

.lesson-checkpoint summary {
  width: fit-content;
  cursor: pointer;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
}

.lesson-checkpoint details p {
  margin: 10px 0 0;
}

.mypage-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.logout-button {
  min-height: 46px;
  padding: 0 16px;
  color: var(--ink);
  background: var(--pink);
  border: 4px solid var(--ink);
  border-radius: 2px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  font-family: "Manrope", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
}

.logout-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 24px clamp(18px, 5vw, 72px);
  color: var(--panel);
  background: var(--ink);
  border-top: 5px solid var(--pink);
  font-size: 0.9rem;
  font-weight: 900;
}

.footer-legal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
}

.footer-legal-nav a,
.footer-legal-nav a:visited {
  color: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-header {
  grid-template-columns: auto 1fr;
}

.legal-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.legal-nav a,
.legal-nav a:visited {
  padding: 8px 10px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.legal-nav a:hover,
.legal-nav a:focus-visible {
  background: var(--gold);
  outline: 2px solid var(--ink);
}

.legal-shell {
  max-width: 1040px;
}

.legal-document {
  display: grid;
  gap: 0;
  margin-bottom: 28px;
  color: var(--ink);
  background: var(--white);
  border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(23, 17, 31, 0.18);
}

.legal-document > section,
.legal-document > .legal-updated {
  padding: clamp(18px, 3vw, 28px);
}

.legal-document > section + section {
  border-top: 3px solid var(--ink);
}

.legal-document h2 {
  margin: 0 0 10px;
  font-size: 1.12rem;
}

.legal-document p,
.legal-document li {
  color: #3f3349;
  line-height: 1.7;
}

.legal-document p {
  margin: 0;
}

.legal-document p + p {
  margin-top: 12px;
}

.legal-document ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.legal-document a,
.legal-document a:visited {
  color: #164b7a;
  font-weight: 800;
}

.legal-updated {
  margin: 0;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.legal-action {
  display: inline-flex;
  padding: 9px 12px;
  color: var(--ink) !important;
  background: var(--gold);
  border: 3px solid var(--ink);
  text-decoration: none;
}

@media (max-width: 700px) {
  .legal-header {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .legal-nav {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .legal-nav a {
    flex: 0 0 auto;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-legal-nav {
    justify-content: flex-start;
  }
}

/* Night-study visual system and character-based MyPage. */
.site-header {
  min-height: 68px;
  color: #f8f6ef;
  background: #17284a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(7, 17, 36, 0.16);
}

.brand-mark {
  color: #fff7d1;
  background: #7567a6;
  border-color: #978ac0;
  border-radius: 8px;
  box-shadow: none;
}

.main-nav > button,
.main-nav > a {
  color: rgba(255, 255, 255, 0.82);
}

.main-nav > button:hover,
.main-nav > button.active,
.main-nav > a:hover,
.main-nav > a.active {
  color: #f5c943;
  background: transparent;
}

.home-shell {
  background: #f4f1e8;
}

.home-shell .hero {
  border-bottom: 0;
}

.home-shell .hero-scene {
  min-height: min(690px, calc(100vh - 68px));
  place-items: center start;
  padding: clamp(62px, 9vw, 110px) clamp(24px, 9vw, 150px) 88px;
  background:
    linear-gradient(90deg, rgba(10, 21, 43, 0.3), rgba(10, 21, 43, 0) 62%),
    url("../images/hero-study-night-v2.webp") center / cover no-repeat;
  filter: none;
}

.home-shell .hero-copy {
  justify-items: start;
  max-width: 670px;
  margin: 0;
  text-align: left;
}

.home-shell .hero h1 {
  max-width: 680px;
  margin-bottom: 20px;
  color: #f9f7f0;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: clamp(2.35rem, 5vw, 4.8rem);
  font-weight: 800;
  line-height: 1.02;
  text-shadow: 0 3px 18px rgba(4, 12, 28, 0.45);
}

.home-shell .hero h1 span {
  white-space: normal;
}

.home-shell .hero .eyebrow {
  color: #f5c943;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.78rem;
  text-shadow: none;
}

.home-shell .hero .hero-description {
  max-width: 590px;
  color: rgba(248, 246, 239, 0.82);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(4, 12, 28, 0.45);
}

.home-shell .hero-actions {
  justify-content: flex-start;
}

.home-shell .button {
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 7px;
  box-shadow: 0 9px 22px rgba(5, 15, 34, 0.25);
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.84rem;
}

.home-shell .button.secondary {
  color: #f8f6ef;
  background: rgba(34, 54, 91, 0.82);
  backdrop-filter: blur(8px);
}

.home-shell .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(5, 15, 34, 0.32);
}

.home-shell .environment-status {
  color: rgba(255, 255, 255, 0.74);
  background: rgba(17, 36, 70, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
}

.home-shell .track-band {
  color: #f8f6ef;
  background: #20375f;
  border: 0;
}

.mypage-body {
  color: #f8f6ef;
  background: #17284a;
}

.mypage-body .mypage-shell {
  width: min(100%, 1180px);
  padding-top: 48px;
}

.mypage-body .mypage-hero {
  max-width: 760px;
  margin-bottom: 22px;
}

.mypage-body .mypage-hero h1 {
  max-width: none;
  margin: 0;
  color: #f8f6ef;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.mypage-body .mypage-hero .hero-description {
  color: rgba(248, 246, 239, 0.72);
}

.mypage-body .eyebrow {
  color: #f5c943;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.72rem;
}

.mypage-body .mypage-tabs {
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px;
  background: #20375f;
  border: 1px solid #41557c;
  border-radius: 7px;
}

.mypage-body .mypage-tabs button {
  min-height: 40px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
}

.mypage-body .mypage-tabs button.active,
.mypage-body .mypage-tabs button:hover {
  color: #17233f;
  background: #f5c943;
}

.mypage-body .placeholder-panel {
  padding: clamp(14px, 2.5vw, 24px);
  color: #f8f6ef;
  background: #20375f;
  border: 1px solid #41557c;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(7, 17, 36, 0.22);
}

.character-dashboard {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(420px, 1.2fr);
  gap: 16px;
  margin-bottom: 18px;
}

.character-profile-card,
.character-customizer {
  min-width: 0;
  padding: clamp(16px, 2.4vw, 22px);
  background: #2b416c;
  border: 1px solid #50638a;
  border-radius: 8px;
}

.character-profile-card {
  display: grid;
  grid-template-columns: minmax(130px, 0.72fr) minmax(160px, 1fr);
  gap: 20px;
  align-items: center;
}

.character-stage {
  position: relative;
  display: grid;
  min-height: 280px;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(201, 192, 226, 0.32), transparent 34%),
    linear-gradient(180deg, #334d7b 0%, #1a3158 100%);
  border: 1px solid #61739a;
  border-radius: 7px;
}

.study-character-emoji {
  position: relative;
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  filter: drop-shadow(0 14px 14px rgba(5, 14, 32, 0.32));
}

.character-emoji-face {
  font-size: 6.8rem;
  line-height: 1;
}

.character-emoji-accessory {
  position: absolute;
  z-index: 2;
  line-height: 1;
  pointer-events: none;
}

.study-character-emoji[data-character-style="glasses"] .character-emoji-accessory {
  top: 54px;
  font-size: 3.6rem;
}

.study-character-emoji[data-character-style="headphones"] .character-emoji-accessory {
  top: 22px;
  font-size: 6.2rem;
}

.study-character-emoji[data-character-style="scarf"] .character-emoji-accessory {
  bottom: 0;
  font-size: 4.4rem;
}

.character-profile-copy h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
}

.character-profile-copy > p:not(.eyebrow) {
  margin-bottom: 20px;
  color: #cbd3e3;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.55;
}

.character-level-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #f8f6ef;
  font-size: 0.82rem;
}

.character-level-row span {
  color: #f5c943;
  font-weight: 800;
}

.character-xp-bar {
  height: 10px;
  margin: 9px 0 7px;
  overflow: hidden;
  background: #17284a;
  border: 1px solid #61739a;
  border-radius: 5px;
}

.character-xp-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: #f5c943;
  border-radius: inherit;
}

.character-profile-copy > small {
  color: #aeb9cf;
  font-size: 0.7rem;
}

.character-customizer {
  display: grid;
  align-content: start;
  gap: 14px;
}

.character-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.character-section-heading h2,
.character-section-heading h3 {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
}

.character-section-heading > span {
  color: #aeb9cf;
  font-size: 0.68rem;
  font-weight: 700;
}

.character-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.character-style {
  display: flex;
  min-width: 0;
  min-height: 66px;
  align-items: center;
  gap: 10px;
  padding: 9px;
  color: #f8f6ef;
  background: #20375f;
  border: 1px solid #50638a;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.character-style:hover,
.character-style.active {
  background: #3a4d79;
  border-color: #f5c943;
  outline: none;
}

.character-style > span {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #17233f;
  background: #c9c0e2;
  border-radius: 50%;
  font-weight: 900;
}

.character-style {
  min-width: 0;
}

.character-style strong,
.character-style small {
  display: block;
}

.character-style small {
  margin-top: 3px;
  overflow: hidden;
  color: #aeb9cf;
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-style {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 9px;
}

.character-style > span {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  font-size: 0.68rem;
}

.character-style.locked {
  cursor: not-allowed;
  opacity: 0.5;
}

.mypage-body .focus-stats div,
.mypage-body .study-history-panel,
.mypage-body .wrong-answer-panel,
.mypage-body .study-calendar,
.mypage-body .language-settings-panel {
  color: #f8f6ef;
  background: #2b416c;
  border: 1px solid #50638a;
  border-radius: 8px;
  box-shadow: none;
}

.mypage-body .focus-stats small,
.mypage-body .study-history-panel small,
.mypage-body .wrong-answer-panel p,
.mypage-body .study-calendar-summary {
  color: #b9c3d7;
}

.mypage-body .study-history-item,
.mypage-body .wrong-answer-course,
.mypage-body .calendar-day,
.mypage-body .study-day-detail {
  color: #f8f6ef;
  background: #20375f;
  border-color: #50638a;
  border-radius: 6px;
}

.mypage-body .calendar-day.has-records,
.mypage-body .calendar-day.today {
  color: #17233f;
  background: #f5c943;
}

.mypage-body .site-footer {
  color: #cbd3e3;
  background: #101f3b;
  border-top-color: #41557c;
}

.mypage-mini-character .mypage-mini-sprite {
  display: grid;
  place-items: center;
  color: #17233f;
  background: #c9c0e2;
  border-radius: 50%;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-weight: 900;
}

@media (max-width: 920px) {
  .home-shell .hero-scene {
    min-height: 590px;
    padding: 78px 24px 84px;
    background-position: 58% center;
  }

  .home-shell .hero-copy {
    max-width: 570px;
  }

  .character-dashboard,
  .character-profile-card {
    grid-template-columns: 1fr;
  }

  .character-stage {
    min-height: 300px;
  }
}

@media (max-width: 560px) {
  .home-shell .hero-scene {
    min-height: 540px;
    padding: 70px 18px 68px;
    background-position: 62% center;
  }

  .home-shell .hero h1 {
    font-size: clamp(2.15rem, 12vw, 3.4rem);
  }

  .character-item-grid {
    grid-template-columns: 1fr;
  }

  .character-section-heading {
    align-items: start;
    flex-direction: column;
  }
}

/* Shared two-column course workspace. */
.course-page-shell {
  width: min(100%, 1480px);
}

.course-content-panel.course-workspace-enabled {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.course-workspace-enabled > p,
.course-workspace-enabled > .course-selection-panel {
  display: none;
}

.course-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.course-workspace-sidebar {
  position: sticky;
  top: 86px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: calc(100dvh - 104px);
  max-height: calc(100vh - 104px);
  overflow: hidden;
  color: #f8f6ef;
  background: #20375f;
  border: 1px solid #41557c;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(13, 25, 49, 0.18);
}

.course-workspace-heading {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-bottom: 1px solid #41557c;
}

.course-workspace-heading span {
  color: #f5c943;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.course-workspace-heading strong {
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  background: #17284a;
  border-bottom: 1px solid #41557c;
}

.course-workspace-tabs button {
  min-width: 0;
  min-height: 42px;
  padding: 7px 5px;
  overflow: hidden;
  color: #cbd3e3;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-workspace-tabs button:hover,
.course-workspace-tabs button.active {
  color: #17233f;
  background: #f5c943;
}

.course-workspace-menu {
  min-height: 0;
  scrollbar-gutter: stable;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #7567a6 #17284a;
}

.course-workspace .course-dashboard-grid {
  display: block;
  margin: 0;
}

.course-workspace [data-course-mode-panel][hidden] {
  display: none !important;
}

.course-workspace [data-course-mode-panel]:not([hidden]) {
  display: grid;
}

.course-workspace .placeholder-card {
  padding: 10px;
  color: #f8f6ef;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.course-workspace .placeholder-card > strong {
  display: none;
}

.course-workspace .lesson-list,
.course-workspace .quiz-list,
.course-workspace .practice-list {
  gap: 6px;
}

.course-workspace .lesson-category-toggle {
  min-height: 48px;
  padding: 9px 10px;
  color: #f8f6ef;
  background: #2b416c;
  border: 1px solid #50638a;
  border-radius: 6px;
  box-shadow: none;
  font-size: 0.76rem;
}

.course-workspace .lesson-category-toggle:hover,
.course-workspace .lesson-category-toggle.active {
  color: #17233f;
  background: #f5c943;
  border-color: #f5c943;
  box-shadow: none;
}

.course-workspace .lesson-category-toggle small {
  flex: 0 0 auto;
  color: inherit;
  font-size: 0.61rem;
}

.course-workspace .lesson-category-panel.open {
  display: grid;
  gap: 5px;
  padding: 6px 0 8px 12px;
}

.course-workspace .lesson-link-card {
  min-height: 42px;
  padding: 10px 11px;
  color: #dce2ee;
  background: #17284a;
  border: 1px solid #41557c;
  border-radius: 6px;
  box-shadow: none;
}

.course-workspace .lesson-link-card:hover,
.course-workspace .lesson-link-card.active {
  color: #17233f;
  background: #c9c0e2;
  border-color: #c9c0e2;
  box-shadow: none;
  transform: none;
}

.course-workspace .lesson-link-card .lesson-link-title {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.course-workspace-viewer {
  min-width: 0;
  min-height: 680px;
}

.course-workspace-viewer[data-active-view="empty"] .course-lesson-view,
.course-workspace-viewer[data-active-view="empty"] [data-quiz-view],
.course-workspace-viewer[data-active-view="empty"] [data-practice-view],
.course-workspace-viewer[data-active-view="lesson"] [data-quiz-view],
.course-workspace-viewer[data-active-view="lesson"] [data-practice-view],
.course-workspace-viewer[data-active-view="quiz"] .course-lesson-view,
.course-workspace-viewer[data-active-view="quiz"] [data-practice-view],
.course-workspace-viewer[data-active-view="practice"] .course-lesson-view,
.course-workspace-viewer[data-active-view="practice"] [data-quiz-view] {
  display: none !important;
}

.course-workspace-viewer[data-active-view="lesson"] .course-lesson-view,
.course-workspace-viewer[data-active-view="quiz"] [data-quiz-view].active,
.course-workspace-viewer[data-active-view="practice"] [data-practice-view].active {
  display: grid !important;
}

.course-workspace-viewer .course-lesson-view {
  display: grid;
  gap: 16px;
}

.course-workspace-viewer .lesson-article,
.course-workspace-viewer .quiz-article {
  color: #f7f8fc;
  background: #17284a;
  border: 1px solid #41557c;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(7, 14, 29, 0.3);
}

.course-workspace-viewer .lesson-article {
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.62;
}

.course-workspace-viewer .quiz-article {
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.62;
}

.course-workspace-viewer .lesson-article-header :is(h1, h2) {
  font-size: clamp(1.18rem, 2vw, 1.48rem);
  font-weight: 600;
  line-height: 1.3;
}

.course-workspace-viewer .quiz-article .lesson-article-header h2 {
  font-size: clamp(1.18rem, 2vw, 1.48rem);
  font-weight: 600;
  line-height: 1.3;
}

.course-workspace-viewer .quiz-article .lesson-article-header p:not(.eyebrow) {
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.62;
}

.course-workspace-viewer .lesson-article h3,
.course-workspace-viewer .lesson-note h3 {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
}

.course-workspace-viewer .lesson-article h4 {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

.course-workspace-viewer .lesson-article p,
.course-workspace-viewer .lesson-article li,
.course-workspace-viewer .lesson-article dd,
.course-workspace-viewer .lesson-article figcaption,
.course-workspace-viewer .lesson-note p,
.course-workspace-viewer .lesson-note li,
.course-workspace-viewer .lesson-checkpoint p,
.course-workspace-viewer .precalc-reasoning-steps {
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.62;
}

.course-workspace-viewer .lesson-article strong,
.course-workspace-viewer .lesson-article th {
  font-weight: 600;
}

.course-workspace-viewer .precalc-concept-table {
  font-size: 0.8rem;
  font-weight: 400;
}

.course-workspace-viewer .lesson-article-header p:not(.eyebrow),
.course-workspace-viewer .lesson-note p,
.course-workspace-viewer .lesson-note li,
.course-workspace-viewer .lesson-checkpoint p,
.course-workspace-viewer .science-pixel-diagram figcaption,
.course-workspace-viewer .ap-detailed-visual figcaption,
.course-workspace-viewer .precalc-graph figcaption {
  color: #d3dbea;
}

.course-workspace-viewer .lesson-note,
.course-workspace-viewer .lesson-checkpoint,
.course-workspace-viewer .quiz-question,
.course-workspace-viewer .assessment-actions {
  color: #f7f8fc;
  background: #20375f;
  border-color: #52688f;
}

.course-workspace-viewer .lesson-formula {
  color: #ffe06a;
  background: #0e1b34;
  border-color: #52688f;
  font-family: "STIX Two Math", "Cambria Math", serif;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.45;
}

.course-workspace-viewer .lesson-formula mjx-container {
  font-size: 100% !important;
}

.course-workspace-viewer .quiz-option {
  color: #f7f8fc;
  background: #29466f;
  border-color: #6078a0;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.5;
}

.course-workspace-viewer .quiz-question h3 {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
}

.course-workspace-viewer .quiz-option:hover,
.course-workspace-viewer .quiz-option.selected {
  color: #101a30;
  background: #f5c943;
  border-color: #f5c943;
  box-shadow: none;
}

.course-workspace-viewer .quiz-option.correct,
.course-workspace-viewer .answered-correct {
  color: #10251a;
  background: #a9d8b7;
  border-color: #77b88b;
}

.course-workspace-viewer .quiz-option.incorrect,
.course-workspace-viewer .answered-wrong {
  color: #351414;
  background: #f3b0ad;
  border-color: #d87975;
}

.course-workspace-viewer .quiz-feedback {
  color: #f7f8fc;
  background: #101f3b;
  border-color: #6078a0;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.58;
}

.course-workspace-viewer .quiz-feedback strong,
.course-workspace-viewer .assessment-result strong {
  font-weight: 600;
}

.course-workspace-viewer .quiz-feedback span,
.course-workspace-viewer .quiz-feedback p,
.course-workspace-viewer .assessment-result,
.course-workspace-viewer .assessment-result small {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.58;
}

.course-workspace-viewer .assessment-result > strong {
  font-size: 1.08rem;
}

.course-workspace-viewer .assessment-submit {
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
}

.course-workspace-viewer .quiz-article mjx-container {
  font-size: 96% !important;
}

.course-workspace-viewer .assessment-result,
.course-workspace-viewer .assessment-result.warning {
  color: #f7f8fc;
}

.course-workspace-viewer .science-pixel-diagram,
.course-workspace-viewer .ap-detailed-visual,
.course-workspace-viewer .science-fine-pixel-visual,
.course-workspace-viewer .ap-concept-graph,
.course-workspace-viewer .precalc-graph {
  color: #f7f8fc;
  background: #20375f;
  border-color: #52688f;
  box-shadow: none;
}

.course-workspace-viewer .ap-detailed-visual figcaption strong {
  color: #ffffff;
}

.course-workspace-viewer .ap-concept-graph figcaption {
  color: #d3dbea;
}

.course-workspace-viewer .ap-concept-graph figcaption strong {
  color: #ffffff;
}

.course-workspace-empty {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: #d3dbea;
  background: #17284a;
  border: 1px solid #41557c;
  border-radius: 8px;
}

.course-workspace-empty[hidden] {
  display: none;
}

.course-workspace-empty span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #17233f;
  background: #f5c943;
  border-radius: 50%;
  font-weight: 900;
}

@media (max-width: 920px) {
  .course-workspace {
    grid-template-columns: 1fr;
  }

  .course-workspace-sidebar {
    position: static;
    height: auto;
    max-height: none;
  }

  .course-workspace-menu {
    max-height: 460px;
  }

  .course-workspace-viewer {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .course-page-shell {
    padding-inline: 12px;
  }

  .course-workspace-tabs button {
    font-size: 0.64rem;
  }

  .course-workspace-viewer .lesson-article,
  .course-workspace-viewer .quiz-article {
    padding: 14px;
  }
}

@media (max-width: 920px) {
  .site-header {
    grid-template-columns: 1fr auto;
    row-gap: 10px;
  }

  .nav-toggle {
    display: block;
  }

  .focus-player {
    width: min(255px, 100%);
  }

  .header-actions {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .signup-menu {
    top: calc(100% + 8px);
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 18px;
    display: none;
    width: min(286px, calc(100vw - 36px));
    padding: 10px;
    background: var(--night);
    border: 4px solid var(--ink);
    border-radius: 2px;
    box-shadow: var(--shadow);
  }

  .main-nav.open {
    display: grid;
  }

  .course-mega {
    top: calc(100% + 8px);
    left: 18px;
    right: 18px;
  }

  .focus-mega {
    top: calc(100% + 8px);
    left: 18px;
    right: 18px;
  }

  .blog-mega {
    top: calc(100% + 8px);
    left: 18px;
    right: 18px;
  }

  .community-mega {
    top: calc(100% + 8px);
    left: 18px;
    right: 18px;
  }

  .mypage-mega {
    top: calc(100% + 8px);
    right: 18px;
  }

  .course-mega-inner {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 110px);
    overflow: auto;
  }

  .focus-mega-inner {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 142px);
    overflow: auto;
  }

  .blog-mega-inner {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 142px);
    overflow: auto;
  }

  .community-mega-inner {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 142px);
    overflow: auto;
  }

  .course-mega-list {
    grid-template-columns: 1fr;
  }

  .blog-menu-grid,
  .community-menu-grid,
  .blog-tabs {
    grid-template-columns: 1fr;
  }

  .blog-reader-layout {
    grid-template-columns: 1fr;
  }

  .blog-post-list-panel {
    position: static;
    max-height: 360px;
  }

  .blog-post-view {
    min-height: auto;
  }

  .focus-options {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .hero-scene {
    min-height: 350px;
    padding: 28px 18px 58px;
  }

  .home-shell .track-band,
  .home-shell .section,
  .home-shell .learning-map {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .window-row {
    top: 24px;
    gap: 16px;
  }

  .window-row-left {
    left: 18px;
  }

  .window-row-right {
    right: 18px;
  }

  .window-row span:nth-child(2) {
    display: none;
  }

  .track-band,
  .course-tabs,
  .course-grid,
  .course-subcategory-grid,
  .mega-course-subcategory,
  .placeholder-grid,
  .lesson-section-grid,
  .camp-grid,
  .camp-inventory,
  .coin-actions,
  .map-panel,
  .split-section {
    grid-template-columns: 1fr;
  }

  .camp-game-header {
    align-items: start;
    flex-direction: column;
  }

  .camp-game-actions {
    justify-content: flex-start;
  }

  .camp-game-screen {
    min-height: 390px;
    background-position: center;
  }

  .camp-tent-wrap {
    left: 50%;
    bottom: 21%;
    width: min(230px, 58vw);
  }

  .camp-shop-drawer {
    top: 126px;
    right: 10px;
    width: calc(100% - 20px);
  }

  .course-subcategory-heading {
    align-items: start;
    flex-direction: column;
  }

  .course-subcategory-heading p {
    max-width: none;
    text-align: left;
  }

  .mypage-preview {
    position: static;
  }

  .study-calendar-header {
    align-items: start;
    flex-direction: column;
  }

  .calendar-day {
    min-height: 66px;
    padding: 7px;
  }

  .calendar-day small {
    font-size: 0.58rem;
  }
}

@media (max-width: 560px) {
  .site-header {
    min-height: 70px;
  }

  .brand small {
    display: none;
  }

  .hero-scene {
    min-height: 330px;
    padding: 26px 18px 56px;
  }

  .home-shell .track-band,
  .home-shell .section,
  .home-shell .learning-map {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .study-calendar {
    padding: 12px;
  }

  .study-calendar-weekdays,
  .study-calendar-grid {
    gap: 5px;
  }

  .study-calendar-weekdays span {
    font-size: 0.64rem;
  }

  .calendar-day {
    min-height: 54px;
    padding: 5px;
    border-width: 2px;
  }

  .calendar-day strong {
    font-size: 0.72rem;
  }

  .calendar-day small {
    display: none;
  }

  .hero h1 {
    font-size: 1.34rem;
    line-height: 1.12;
  }

  .hero-actions,
  .community,
  .site-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .pixel-desk,
  .grass-hill-right {
    display: none;
  }
}

/* Keep these responsive overrides last so the live campsite wins the base theme. */
.hero-scene {
  min-height: min(520px, calc(100vh - 64px));
  padding: 42px clamp(18px, 5vw, 72px) 58px;
  background:
    linear-gradient(180deg, rgba(12, 18, 28, 0.22), rgba(12, 18, 28, 0.58)),
    linear-gradient(90deg, rgba(12, 18, 28, 0.38), transparent 35% 65%, rgba(12, 18, 28, 0.38)),
    url("../images/hero-campsite-study.webp") center / cover no-repeat;
}

.hero-scene::before,
.hero-scene::after {
  content: none;
}

@media (max-width: 920px) {
  .main-nav { gap: 8px; padding: 12px; }
  .main-nav > a,
  .main-nav > button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 10px 13px;
    color: #fff9ea;
    background: #28345f;
    border: 3px solid #8073aa;
    box-shadow: 3px 3px 0 rgba(10, 13, 28, 0.72);
    text-align: left;
  }
}

@media (max-width: 560px) {
  .camp-category-tabs { grid-template-columns: 1fr; }
  .hero h1 span { white-space: normal; }
}

/* Keep title-only lists compact after all legacy card rules. */
.course-card,
.mega-course-card,
.lesson-link-card {
  min-height: 0;
  align-content: center;
}

.course-card {
  padding: 18px;
}

.mega-course-card {
  padding: 13px 15px;
}

.lesson-link-card {
  display: block;
  padding: 13px 14px;
}

.course-card h3,
.mega-course-card h3,
.lesson-link-card .lesson-link-title {
  margin: 0;
}

.lesson-link-card .lesson-link-title {
  font-size: 0.94rem;
  line-height: 1.35;
}

/* Final home hero rules override the legacy campsite theme above. */
.home-shell .hero {
  border-bottom: 6px solid #20375f;
}

.home-shell #courses {
  background: #f4f1e8;
}

.home-shell #blog {
  background: #e8edf4;
  border-top: 6px solid #20375f;
}

.home-shell .hero-scene {
  --hero-scene-position: center;
  min-height: min(690px, calc(100vh - 68px));
  place-items: center start;
  padding: clamp(62px, 9vw, 110px) clamp(24px, 9vw, 150px) 88px;
  background:
    linear-gradient(90deg, rgba(10, 21, 43, 0.3), rgba(10, 21, 43, 0) 62%),
    url("../images/hero-study-night-v2.webp") var(--hero-scene-position) / cover no-repeat;
  filter: none;
}

@media (max-width: 920px) {
  .home-shell .hero-scene {
    --hero-scene-position: 58% center;
    min-height: 590px;
    padding: 78px 24px 84px;
  }
}

@media (max-width: 560px) {
  .home-shell .hero-scene {
    --hero-scene-position: 62% center;
    min-height: 540px;
    padding: 70px 18px 68px;
  }

  .home-shell .hero h1 {
    font-size: clamp(2.15rem, 12vw, 3.4rem);
  }
}

/* Preserve compact menu density after legacy responsive rules. */
.mega-course-card {
  min-height: 42px;
  padding: 6px 8px;
}

.signup-button,
.signup-choice,
.signup-menu h2 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.signup-menu h2 { margin: 0; }

@media (max-width: 920px) {
  .main-nav > button {
    min-height: 42px;
    padding: 8px 10px;
    border-width: 1px;
    box-shadow: none;
  }

  .course-mega-list,
  .mega-course-subcategory,
  .blog-menu-grid,
  .community-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .course-mega-list,
  .mega-course-subcategory,
  .blog-menu-grid,
  .community-menu-grid {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .home-shell #courses {
  background: var(--panel);
}

html[data-theme="dark"] .home-shell #blog {
  background: var(--paper);
}

/* Standalone authentication pages. */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 18px;
  color: #17233f;
  background: #edf1ef;
}

.auth-gate-status {
  display: none;
}

body[data-auth-required][data-auth-status="checking"],
body[data-auth-required][data-auth-status="redirecting"] {
  min-height: 100vh;
  overflow: hidden;
}

body[data-auth-required][data-auth-status="checking"] > :not(.auth-gate-status):not(script),
body[data-auth-required][data-auth-status="redirecting"] > :not(.auth-gate-status):not(script) {
  visibility: hidden;
}

body[data-auth-required][data-auth-status="checking"] > .auth-gate-status,
body[data-auth-required][data-auth-status="redirecting"] > .auth-gate-status {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  visibility: visible;
  color: #17233f;
  background: #e8edf0;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  text-align: center;
}

.auth-gate-mark {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 5px;
  place-items: center;
  color: #f8f6ef;
  background: #17233f;
  border-radius: 5px;
  font-weight: 800;
}

.auth-gate-status strong {
  font-size: 0.92rem;
}

.auth-gate-status small {
  color: #596975;
  font-size: 0.7rem;
  font-weight: 600;
}

.auth-shell {
  width: min(420px, 100%);
  padding: clamp(22px, 5vw, 34px);
  background: rgba(251, 250, 246, 0.96);
  border: 1px solid #71858b;
  border-radius: 8px;
  box-shadow: 0 20px 48px rgba(5, 21, 28, 0.34);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 0.82rem;
  font-weight: 800;
}

.auth-brand .brand-mark {
  width: 34px;
  height: 34px;
  border-width: 0;
  box-shadow: none;
}

.auth-heading {
  margin-bottom: 22px;
}

.auth-heading h1 {
  margin: 0 0 8px;
  font-size: 1.65rem;
  letter-spacing: 0;
}

.auth-heading p {
  margin: 0;
  color: #52606c;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.55;
}

.auth-page .signup-form {
  gap: 10px;
}

.auth-page .signup-form input:not([type="checkbox"]),
.auth-page .signup-choice {
  min-height: 46px;
  border-width: 1px;
  border-radius: 6px;
  box-shadow: none;
}

.auth-page .signup-choice {
  width: 100%;
}

.auth-page .signup-privacy-notice,
.auth-page .signup-privacy-consent {
  font-size: 0.72rem;
}

.auth-text-button,
.signup-reset-button {
  justify-self: end;
  padding: 2px 0;
  color: #1c6172;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-text-button:hover,
.auth-text-button:focus-visible,
.signup-reset-button:hover,
.signup-reset-button:focus-visible {
  color: #17303d;
  outline: 2px solid #f2c94c;
  outline-offset: 3px;
}

.signup-reset-button:disabled,
.auth-text-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: #6c7780;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #b9c3c7;
}

.auth-switch,
.signup-page-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 18px;
  color: #425d69;
  font-size: 0.75rem;
  font-weight: 650;
}

.auth-switch a,
.signup-page-links a {
  color: #1c6172;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-page .signup-status {
  margin-top: 14px;
}

.auth-back {
  display: inline-block;
  margin-top: 22px;
  color: #52606c;
  font-size: 0.75rem;
  font-weight: 650;
}

.home-footer {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #f8f6ef;
  background: #101f3b;
  border-top: 1px solid #41557c;
  font-weight: 700;
}

.home-footer-intro {
  display: grid;
  gap: 4px;
  max-width: 540px;
}

.home-footer-intro > strong {
  color: #f5c943;
  font-size: 1.08rem;
}

.home-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 24px;
}

.home-footer-links > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.home-footer-links > div > strong {
  color: #f8f6ef;
  font-size: 0.66rem;
}

.home-footer .footer-legal-nav {
  align-items: center;
  flex-direction: row;
  gap: 10px;
}

.home-footer .footer-legal-nav a,
.home-footer .footer-legal-nav a:visited {
  color: #b9c3d7;
  font-size: 0.66rem;
  text-decoration-color: #697a99;
}

.home-footer .footer-legal-nav a:hover {
  color: #f5c943;
}

@media (max-width: 700px) {
  .home-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .home-footer-links {
    width: 100%;
  }
}

/* Desktop study shell: persistent navigation rail and windowed workspace. */
body.desktop-study-shell {
  min-height: 100vh;
  padding: 48px 0 0 104px;
  background-color: #bda77e;
  background-image:
    radial-gradient(circle at 18% 14%, rgba(255, 248, 218, 0.3), transparent 34%),
    radial-gradient(circle at 82% 68%, rgba(116, 84, 44, 0.12), transparent 42%),
    repeating-linear-gradient(7deg, rgba(91, 67, 38, 0.045) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(96deg, rgba(255, 250, 226, 0.07) 0 1px, transparent 1px 9px);
  background-attachment: fixed;
  background-size: auto;
}

body.desktop-study-shell::before {
  content: "INSOMNIA\A STUDYROOM";
  position: fixed;
  inset: 48px 0 34px 104px;
  z-index: 0;
  display: grid;
  place-items: center;
  padding-left: 0.18em;
  color: rgba(47, 64, 58, 0.14);
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: clamp(2.4rem, 6.5vw, 6.8rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: 0.18em;
  text-align: center;
  text-shadow:
    1px 1px 0 rgba(255, 246, 216, 0.28),
    -1px -1px 0 rgba(75, 52, 28, 0.08),
    0 5px 14px rgba(70, 49, 28, 0.07);
  white-space: pre;
  pointer-events: none;
  user-select: none;
}

body.desktop-study-shell::after {
  content: "";
  position: fixed;
  inset: 48px 0 0 104px;
  z-index: -1;
  background: transparent;
  pointer-events: none;
}

.desktop-study-shell .workspace-topbar {
  position: fixed;
  inset: 0 0 auto 104px;
  z-index: 60;
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 10px 0 18px;
  color: #eff7f4;
  background: #17303d;
  border-bottom: 1px solid #526c73;
  box-shadow: 0 4px 16px rgba(5, 21, 28, 0.2);
}

.workspace-breadcrumb {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 9px;
  font-size: 0.74rem;
}

.workspace-breadcrumb .workspace-beta-label {
  color: #f2c94c;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
}

.workspace-breadcrumb span,
.workspace-breadcrumb i {
  color: #a9bec0;
  font-style: normal;
}

.workspace-breadcrumb strong {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-topbar-icon,
.workspace-window-icon,
.menu-window-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.workspace-clock {
  flex: 0 0 auto;
  color: #d4e5df;
  font-size: 0.7rem;
  font-weight: 650;
}

.workspace-status {
  display: flex;
  flex: 0 0 auto;
  height: 48px;
  align-items: center;
  gap: 8px;
}

.workspace-status > .workspace-calculator-button,
.workspace-status > .workspace-info-clock,
.workspace-status > .header-actions {
  align-self: center;
  margin-block: 0;
}

.workspace-info-clock {
  display: grid;
  width: clamp(420px, 38vw, 510px);
  height: 38px;
  flex: 0 0 auto;
  grid-template-columns: auto minmax(96px, 0.65fr) minmax(210px, 1.35fr);
  gap: 7px;
  align-items: center;
  padding: 4px 8px;
  color: #eaf3ef;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 44%),
    #203d47;
  border: 1px solid #587078;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 218, 0.04);
  pointer-events: none;
  user-select: none;
}

.workspace-info-clock-time {
  display: flex;
  align-items: baseline;
  color: #fff6cf;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.workspace-info-clock-time time {
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: 0.025em;
}

.workspace-info-clock-time span {
  margin-left: 4px;
  color: #a9bec0;
  font-size: 0.54rem;
  font-weight: 700;
}

.workspace-info-clock-date {
  min-width: 0;
  overflow: hidden;
  padding-left: 10px;
  color: #c8d9d5;
  border-left: 1px solid rgba(169, 190, 192, 0.28);
  font-size: 0.58rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-info-clock-details {
  display: grid !important;
  min-width: 0;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 8px;
  opacity: 1;
  visibility: visible;
}

.workspace-info-clock-details > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  opacity: 1;
  visibility: visible;
}

.workspace-info-clock-details b {
  display: block;
  overflow: hidden;
  color: #eef7f3;
  font-size: 0.58rem;
  font-weight: 700;
  opacity: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  visibility: visible;
}

.workspace-info-icon {
  display: block;
  width: 13px;
  height: 13px;
  color: #f2c94c;
  opacity: 1;
  visibility: visible;
}

.workspace-calculator-button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  color: #c9d9d6;
  background: transparent;
  border: 1px solid #587078;
  border-radius: 5px;
  cursor: pointer;
}

.workspace-calculator-button:hover,
.workspace-calculator-button:focus-visible,
.workspace-calculator-button.active {
  color: #17303d;
  background: #f2c94c;
  border-color: #f2c94c;
  outline: none;
}

.workspace-calculator-icon {
  width: 18px;
  height: 18px;
}

.desktop-study-shell .site-header {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  display: flex;
  width: 104px;
  min-height: 100vh;
  padding: 10px 9px 12px;
  flex-direction: column;
  color: #f5f7f2;
  background: #132732;
  border: 0;
  border-right: 1px solid #536b72;
  box-shadow: 6px 0 20px rgba(5, 21, 28, 0.22);
}

.desktop-study-shell .brand {
  position: relative;
  width: 100%;
  min-height: 66px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  text-align: center;
}

.desktop-study-shell .brand-mark {
  width: 40px;
  height: 40px;
  color: #17303d;
  background: #f2c94c;
  border: 0;
  border-radius: 7px;
  font-size: 1.08rem;
}

.desktop-study-shell .brand strong {
  font-size: 0.72rem;
  font-weight: 750;
}

.desktop-study-shell .brand small {
  display: none;
}

.desktop-study-shell .main-nav {
  display: grid;
  width: 100%;
  gap: 5px;
  margin-top: 12px;
  padding: 0;
}

.desktop-study-shell .main-nav > button,
.desktop-study-shell .main-nav > a {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 64px;
  padding: 7px 4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #adc0c1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1;
  text-align: center;
}

.desktop-study-shell .main-nav > button:hover,
.desktop-study-shell .main-nav > button:focus-visible,
.desktop-study-shell .main-nav > button.active,
.desktop-study-shell .main-nav > button.current-page {
  color: #fff7d7;
  background: #274c58;
  border-color: #55737a;
  box-shadow: none;
  outline: none;
}

.desktop-study-shell .main-nav > button.current-page {
  box-shadow: inset 3px 0 0 #f2c94c;
}

.desktop-study-shell .nav-menu-icon {
  width: 25px;
  height: 25px;
}

.desktop-study-shell .nav-new-badge {
  position: absolute;
  top: 27px;
  left: calc(50% + 7px);
  z-index: 2;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  color: #ffffff;
  background: #c83d3d;
  border: 1px solid #132732;
  border-radius: 50%;
  font-size: 0.5rem;
  font-weight: 750;
  line-height: 1;
}

.desktop-study-shell .nav-toggle {
  display: none;
}

.desktop-study-shell .header-actions {
  position: fixed;
  top: 5px;
  right: 10px;
  z-index: 74;
  display: flex;
  width: auto;
  height: 38px;
  justify-content: flex-end;
  gap: 7px;
}

.desktop-study-shell .workspace-status .header-actions {
  position: relative;
  inset: auto;
  z-index: auto;
  width: auto;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
}

.desktop-study-shell .focus-timer-stack.timer-stack-visible {
  width: 218px;
}

.desktop-study-shell .focus-player {
  width: 218px;
  min-height: 38px;
  height: 38px;
  padding: 3px 6px;
  background: #edf3ef;
  border: 1px solid #80969a;
  border-radius: 7px;
  box-shadow: none;
}

.desktop-study-shell .focus-play {
  width: 26px;
  height: 26px;
  border-width: 1px;
}

.desktop-study-shell .signup-button {
  display: inline-flex;
  min-height: 38px;
  height: 38px;
  padding: 0 11px;
  align-items: center;
  justify-content: center;
  border: 1px solid #6f5f25;
  border-radius: 7px;
  box-shadow: none;
  line-height: 1;
  margin: 0;
}

.desktop-study-shell > main {
  position: relative;
  width: auto;
  max-width: none;
  min-height: calc(100vh - 92px);
  margin: 18px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #70858a;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(5, 21, 28, 0.34);
  overflow: hidden;
}

.desktop-study-shell > .page-shell {
  padding-top: calc(44px + clamp(32px, 5vw, 64px));
}

.desktop-study-shell > .home-shell {
  background: var(--paper);
}

.workspace-window-titlebar,
.menu-window-titlebar {
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #eaf3ef;
  background: #234451;
  border-bottom: 1px solid #73888c;
}

.workspace-window-titlebar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 18;
  padding: 0 9px 0 15px;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.home-shell > .workspace-window-titlebar {
  position: sticky;
  top: 0;
}

.workspace-window-title,
.menu-window-titlebar > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.workspace-window-title span,
.menu-window-titlebar strong {
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-window-controls {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
}

.workspace-window-controls button,
.workspace-window-controls a,
.menu-window-titlebar button {
  display: grid;
  width: 30px;
  height: 28px;
  padding: 0;
  place-items: center;
  color: #dce9e5;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.workspace-window-controls button:hover,
.workspace-window-controls a:hover,
.menu-window-titlebar button:hover {
  color: #17233f;
  background: #f2c94c;
}

.workspace-window-controls [data-window-close]:hover,
.menu-window-titlebar [data-menu-window-close]:hover,
.menu-window-titlebar [data-calculator-close]:hover {
  color: #ffffff;
  background: #bf5b59;
}

.workspace-control-icon {
  width: 15px;
  height: 15px;
}

body.desktop-study-shell:not(.home-blank-shell) > main.desktop-primary-window {
  width: calc(100vw - 140px);
  min-width: 480px;
  max-width: calc(100vw - 122px);
  height: calc(100vh - 106px);
  min-height: 240px;
  max-height: calc(100vh - 104px);
  overflow: auto;
  resize: both;
  transform: translate3d(var(--workspace-window-x, 0), var(--workspace-window-y, 0), 0);
}

.desktop-study-shell.workspace-maximized > main {
  width: calc(100vw - 104px) !important;
  max-width: none;
  height: calc(100vh - 82px) !important;
  max-height: none;
  min-height: calc(100vh - 82px);
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  resize: none;
  transform: none;
}

.desktop-study-shell.workspace-minimized > main {
  min-height: 44px !important;
  height: 44px !important;
  resize: none;
}

.desktop-study-shell.workspace-minimized > main > :not(.workspace-window-titlebar) {
  display: none !important;
}

.desktop-study-shell.workspace-closed > main.desktop-primary-window {
  display: none !important;
}

.desktop-window-layer {
  position: fixed;
  inset: 0;
  z-index: 65;
  pointer-events: none;
}

.desktop-window-layer > .desktop-menu-window,
.desktop-window-layer > .desktop-content-window,
.desktop-window-layer > .desktop-calculator-window {
  pointer-events: auto;
}

.desktop-calculator-window {
  position: fixed;
  top: 72px;
  left: max(122px, calc(100vw - 470px));
  z-index: 102;
  display: none;
  width: 440px;
  min-width: 340px;
  max-width: calc(100vw - 128px);
  height: min(600px, calc(100vh - 116px));
  min-height: 470px;
  max-height: calc(100vh - 84px);
  flex-direction: column;
  background: #f7f5ef;
  border: 1px solid #70858a;
  border-radius: 8px;
  box-shadow: 0 22px 52px rgba(5, 21, 28, 0.42);
  overflow: hidden;
  resize: both;
}

.desktop-calculator-window.open {
  display: flex;
}

.desktop-calculator-window > .calculator-window-titlebar {
  flex: 0 0 44px;
  padding: 0 8px 0 14px;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.scientific-calculator {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  padding: 13px;
  overflow: auto;
  background: #e9dfc7;
}

.calculator-display {
  display: grid;
  min-height: 84px;
  padding: 11px 13px;
  align-content: space-between;
  justify-items: end;
  color: #eff8ef;
  background: #1c3338;
  border: 1px solid #61777a;
  border-radius: 6px;
}

.calculator-display small {
  overflow: hidden;
  width: 100%;
  color: #aebfbb;
  font-size: 0.68rem;
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-display output {
  overflow: hidden;
  width: 100%;
  font-family: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calculator-mode-row button {
  min-width: 52px;
  padding: 6px 9px;
  color: #f7f0dc;
  background: #315862;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 750;
}

.calculator-mode-row span {
  overflow: hidden;
  color: #66716b;
  font-size: 0.59rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-keypad {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(5, minmax(46px, 1fr));
  gap: 6px;
}

.calculator-key {
  min-height: 42px;
  padding: 6px 4px;
  color: #27393c;
  background: #fffaf0;
  border: 1px solid #b7ab90;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 750;
}

.calculator-key:hover,
.calculator-key:focus-visible {
  background: #f4e7c5;
  border-color: #7d745f;
  outline: none;
}

.calculator-key.function {
  color: #31515a;
  background: #dbe6df;
}

.calculator-key.operator {
  color: #17303d;
  background: #f2c94c;
}

.calculator-key.danger {
  color: #7c3432;
  background: #f2d9d2;
}

.calculator-key.equals {
  color: #ffffff;
  background: #2d6573;
  border-color: #2d6573;
}

.desktop-calculator-window.calculator-window-minimized {
  height: 44px !important;
  min-height: 44px;
  resize: none;
}

.desktop-calculator-window.calculator-window-minimized > .scientific-calculator {
  display: none;
}

.desktop-calculator-window.calculator-window-maximized {
  inset: 56px 12px 40px 116px !important;
  width: auto !important;
  max-width: none;
  height: auto !important;
  max-height: none;
  resize: none;
}

.workspace-message-stack {
  position: fixed;
  top: 60px;
  right: 12px;
  z-index: 59;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
}

.workspace-notice-panel {
  width: 220px;
  max-height: 260px;
  flex: 0 0 220px;
  color: #edf2ee;
  background: #17303d;
  border: 1px solid #60767b;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(8, 28, 36, 0.24);
  overflow: hidden;
}

.workspace-welcome-panel {
  width: 315px;
  flex: 0 0 315px;
  color: #edf2ee;
  background: #17303d;
  border: 1px solid #60767b;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(8, 28, 36, 0.24);
  overflow: hidden;
}

.workspace-welcome-panel > header {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 0 9px;
  border-bottom: 1px solid rgba(214, 226, 221, 0.2);
}

.workspace-message-drag-handle {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.workspace-message-drag-handle.dragging {
  cursor: grabbing;
}

.workspace-message-detached {
  position: fixed;
  flex: none;
  margin: 0;
}

.workspace-welcome-panel > header strong {
  color: #f2c94c;
  font-size: 0.61rem;
  font-weight: 650;
}

.workspace-welcome-content {
  padding: 12px 14px 14px;
}

.workspace-welcome-content > strong {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 650;
}

.workspace-welcome-content p {
  margin: 0;
  color: #edf2ee;
  font-size: 0.63rem;
  font-weight: 400;
  line-height: 1.48;
}

.workspace-welcome-content p + p {
  margin-top: 7px;
}

.workspace-welcome-content a {
  color: #f2c94c;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.workspace-welcome-content a:hover,
.workspace-welcome-content a:focus-visible {
  color: #ffffff;
}

.workspace-notice-panel > header {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  border-bottom: 1px solid rgba(214, 226, 221, 0.2);
}

.workspace-notice-panel > header strong {
  font-size: 0.61rem;
  font-weight: 650;
  letter-spacing: 0;
}

.workspace-notice-panel > header span {
  color: #f2c94c;
  font-size: 0.56rem;
  font-weight: 650;
}

.workspace-notice-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.workspace-notice-close {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  color: #dce9e5;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.workspace-notice-close:hover,
.workspace-notice-close:focus-visible {
  color: #ffffff;
  background: #bf5b59;
  outline: none;
}

.workspace-notice-close .workspace-control-icon {
  width: 12px;
  height: 12px;
}

.workspace-notice-list {
  max-height: 225px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.workspace-notice-list article {
  padding: 10px 11px 11px;
  border-bottom: 1px solid rgba(214, 226, 221, 0.14);
}

.workspace-notice-list article:last-child {
  border-bottom: 0;
}

.workspace-notice-list small {
  display: block;
  color: #f2c94c;
  font-size: 0.68rem;
  font-weight: 550;
  line-height: 1.35;
}

.workspace-notice-list p,
.workspace-notice-empty {
  margin: 3px 0 0;
  color: #edf2ee;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.42;
}

.workspace-notice-empty {
  padding: 9px;
}

body.cookie-consent-open {
  overflow: hidden;
}

.cookie-consent-layer {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  padding: 18px;
  place-items: center;
  background: rgba(6, 20, 28, 0.66);
  backdrop-filter: blur(3px);
}

.cookie-consent-panel {
  width: min(520px, 100%);
  max-height: min(680px, calc(100vh - 36px));
  color: #edf2ee;
  background: #17303d;
  border: 1px solid #60767b;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(5, 21, 28, 0.48);
  overflow: auto;
}

.cookie-consent-header {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid rgba(214, 226, 221, 0.2);
}

.cookie-consent-header > span {
  color: #f2c94c;
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.cookie-consent-header button {
  width: 26px;
  height: 26px;
  padding: 0;
  color: #dce9e5;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
}

.cookie-consent-header button:hover,
.cookie-consent-header button:focus-visible {
  color: #fff;
  background: #bf5b59;
  outline: none;
}

.cookie-consent-body {
  padding: 18px;
}

.cookie-consent-body h2 {
  margin: 0 0 9px;
  color: #fff;
  font-size: clamp(1.15rem, 4vw, 1.42rem);
}

.cookie-consent-body > p,
.cookie-consent-summary p {
  margin: 0;
  color: #d6e2de;
  font-size: 0.76rem;
  font-weight: 450;
  line-height: 1.62;
}

.cookie-consent-summary {
  margin-top: 14px;
  padding: 11px 12px;
  background: #203c49;
  border: 1px solid #526b73;
  border-radius: 6px;
}

.cookie-consent-summary > small,
.cookie-consent-current-use {
  display: block;
  margin-bottom: 6px;
  color: #f2c94c;
  font-size: 0.65rem;
  font-weight: 650;
  line-height: 1.45;
}

.cookie-consent-summary a,
.cookie-consent-policy-link {
  color: #a8d8df;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent-details {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.cookie-consent-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px 12px;
  background: #203c49;
  border: 1px solid #526b73;
  border-radius: 6px;
}

.cookie-consent-option strong,
.cookie-consent-option small {
  display: block;
}

.cookie-consent-option strong {
  color: #fff;
  font-size: 0.74rem;
}

.cookie-consent-option small {
  margin-top: 4px;
  color: #cbd9d5;
  font-size: 0.65rem;
  font-weight: 400;
  line-height: 1.48;
}

.cookie-consent-option input {
  width: 34px;
  height: 18px;
  margin: 0;
  accent-color: #f2c94c;
  cursor: pointer;
}

.cookie-consent-option.is-required input {
  cursor: not-allowed;
  opacity: 0.7;
}

.cookie-consent-current-use {
  margin: 2px 0 0;
}

.cookie-consent-policy-link {
  width: fit-content;
  font-size: 0.67rem;
}

.cookie-consent-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(214, 226, 221, 0.2);
}

.cookie-consent-actions[hidden],
.cookie-consent-summary[hidden],
.cookie-consent-details[hidden] {
  display: none;
}

.cookie-consent-actions button {
  min-height: 38px;
  padding: 7px 9px;
  color: #f6f8f5;
  background: #294957;
  border: 1px solid #71858b;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 750;
}

.cookie-consent-actions button:hover,
.cookie-consent-actions button:focus-visible {
  color: #172f3b;
  background: #f2c94c;
  border-color: #f2c94c;
  outline: none;
}

.cookie-consent-actions [data-consent-accept],
.cookie-consent-actions [data-consent-reject],
.cookie-consent-actions [data-consent-save] {
  border-color: #9aabb0;
}

.cookie-consent-detail-actions {
  grid-template-columns: 1fr 1fr;
}

.cookie-settings-trigger {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 120;
  min-height: 28px;
  padding: 5px 9px;
  color: #dce9e5;
  background: #17303d;
  border: 1px solid #60767b;
  border-radius: 5px;
  box-shadow: 0 5px 14px rgba(5, 21, 28, 0.22);
  cursor: pointer;
  font-size: 0.59rem;
  font-weight: 650;
}

.cookie-settings-trigger:hover,
.cookie-settings-trigger:focus-visible {
  color: #172f3b;
  background: #f2c94c;
  border-color: #f2c94c;
  outline: none;
}

.youtube-consent-placeholder {
  display: grid;
  min-height: 150px;
  padding: 18px;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #d6e2de;
  background: #17303d;
  text-align: center;
}

.youtube-consent-placeholder p {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.5;
}

.youtube-consent-placeholder button {
  padding: 6px 10px;
  color: #172f3b;
  background: #f2c94c;
  border: 1px solid #f2c94c;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 750;
}

@media (max-width: 560px) {
  .cookie-consent-layer {
    padding: 10px;
    align-items: end;
  }

  .cookie-consent-panel {
    max-height: calc(100vh - 20px);
  }

  .cookie-consent-body {
    padding: 15px;
  }

  .cookie-consent-actions {
    grid-template-columns: 1fr;
  }

  .cookie-consent-detail-actions {
    grid-template-columns: 1fr 1fr;
  }
}

.desktop-content-window {
  position: fixed;
  top: var(--content-window-top, 68px);
  left: var(--content-window-left, 138px);
  z-index: 101;
  display: flex;
  width: min(780px, calc(100vw - var(--content-window-left, 138px) - 12px));
  min-width: 420px;
  max-width: calc(100vw - var(--content-window-left, 138px) - 12px);
  height: min(640px, calc(100vh - 120px));
  min-height: 240px;
  max-height: calc(100vh - 86px);
  flex-direction: column;
  background: #f7f5ef;
  border: 1px solid #70858a;
  border-radius: 8px;
  box-shadow: 0 22px 52px rgba(5, 21, 28, 0.42);
  overflow: hidden;
  resize: both;
}

.desktop-content-window.lesson-content-window {
  width: min(1320px, calc(100vw - var(--content-window-left, 138px) - 12px));
  height: min(900px, calc(100vh - 104px));
}

.desktop-content-window::after,
.desktop-menu-window::after,
.desktop-calculator-window::after,
body.desktop-study-shell:not(.home-blank-shell) > main.desktop-primary-window::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  z-index: 40;
  width: 11px;
  height: 11px;
  background: rgba(67, 84, 88, 0.66);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.desktop-content-window::-webkit-resizer,
.desktop-menu-window::-webkit-resizer,
.desktop-calculator-window::-webkit-resizer,
body.desktop-study-shell:not(.home-blank-shell) > main.desktop-primary-window::-webkit-resizer {
  background: transparent;
}

.desktop-content-window > .content-window-titlebar {
  height: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  padding: 0 5px 0 10px;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.desktop-content-window > .content-window-titlebar > span {
  gap: 6px;
}

.desktop-content-window > .content-window-titlebar strong {
  font-size: 0.66rem;
}

.desktop-content-window > .content-window-titlebar button {
  width: 26px;
  height: 24px;
}

.desktop-content-window > .content-window-titlebar .workspace-control-icon {
  width: 13px;
  height: 13px;
}

.desktop-content-window > iframe {
  display: block;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  background: var(--paper);
  border: 0;
  overscroll-behavior: contain;
}

.desktop-content-window.content-window-minimized {
  height: 32px !important;
  min-height: 32px;
  resize: none;
}

.desktop-content-window.content-window-minimized > iframe {
  display: none;
}

.desktop-content-window.content-window-maximized {
  inset: 56px 12px 40px 116px !important;
  width: auto !important;
  max-width: none;
  height: auto !important;
  max-height: none;
  resize: none;
}

.desktop-content-window.content-window-minimized::after,
.desktop-content-window.content-window-maximized::after,
.desktop-menu-window.menu-window-minimized::after,
.desktop-menu-window.menu-window-maximized::after,
.desktop-calculator-window.calculator-window-minimized::after,
.desktop-calculator-window.calculator-window-maximized::after,
.desktop-study-shell.workspace-minimized > main.desktop-primary-window::after,
.desktop-study-shell.workspace-maximized > main.desktop-primary-window::after {
  display: none;
}

.desktop-study-shell .course-mega,
.desktop-study-shell .blog-mega,
.desktop-study-shell .focus-mega,
.desktop-study-shell .community-mega,
.desktop-study-shell .mypage-mega,
.desktop-study-shell .signup-menu {
  position: fixed;
  inset: var(--menu-window-top, 66px) auto auto var(--menu-window-left, 122px);
  z-index: 90;
  width: min(var(--menu-window-width, 720px), calc(100vw - 140px));
  min-width: 300px;
  max-width: calc(100vw - 116px);
  height: min(var(--menu-window-height, 560px), calc(100vh - 78px));
  min-height: 160px;
  max-height: calc(100vh - 56px);
  transform: none;
  color: var(--ink);
  background: #f7f5ef;
  border: 1px solid #70858a;
  border-radius: 8px;
  box-shadow: 0 22px 52px rgba(5, 21, 28, 0.4);
  overflow: hidden;
  resize: both;
  container-type: inline-size;
}

.desktop-study-shell .mypage-mega,
.desktop-study-shell .signup-menu {
  width: min(var(--menu-window-width, 430px), calc(100vw - 140px));
}

.desktop-study-shell .workspace-status .header-actions > .signup-menu {
  position: absolute;
  inset: calc(100% + 8px) 0 auto auto !important;
  z-index: 110;
  display: none;
  width: min(360px, calc(100vw - 124px));
  min-width: 300px;
  max-width: calc(100vw - 24px);
  height: auto;
  min-height: 0;
  max-height: calc(100vh - 64px);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  resize: none;
  container-type: normal;
}

.desktop-study-shell .workspace-status .header-actions > .signup-menu.open {
  display: block;
}

.desktop-study-shell .workspace-status .header-actions > .signup-menu .signup-menu-inner {
  height: auto;
  max-height: calc(100vh - 72px);
  padding: 16px;
  background: #f7f5ef;
  border: 1px solid #70858a;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(5, 21, 28, 0.34);
}

.desktop-study-shell .menu-window-titlebar {
  flex: 0 0 44px;
  padding: 0 8px 0 14px;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.desktop-study-shell .menu-window-controls {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
}

.desktop-study-shell .course-mega-inner,
.desktop-study-shell .blog-mega-inner,
.desktop-study-shell .focus-mega-inner,
.desktop-study-shell .community-mega-inner,
.desktop-study-shell .mypage-mega-inner,
.desktop-study-shell .signup-menu-inner {
  height: calc(100% - 44px);
  max-height: none;
  margin: 0;
  padding: 12px;
  background: #f7f5ef;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.blog-mega-inner.blog-cascade-layout {
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.blog-cascade-layout .blog-mega-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: #f8f6ef;
  background: #20375f;
  border: 1px solid #41557c;
  border-radius: 7px;
}

.blog-cascade-heading {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-bottom: 1px solid #41557c;
}

.blog-cascade-heading .eyebrow {
  margin: 0;
  color: #f5c943;
  font-size: 0.58rem;
}

.blog-cascade-heading strong {
  font-size: 0.84rem;
}

.blog-category-rail {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #17284a;
  scrollbar-gutter: stable;
}

.blog-menu-category {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 13px;
  min-width: 0;
  min-height: 48px;
  gap: 7px;
  align-items: center;
  padding: 7px;
  color: #dce2ee;
  background: #20375f;
  border: 1px solid #41557c;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.blog-menu-category:hover,
.blog-menu-category.active {
  color: #17233f;
  background: #f5c943;
  border-color: #f5c943;
}

.blog-menu-category .menu-item-icon {
  width: 28px;
  height: 28px;
  padding: 5px;
  color: currentColor;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid currentColor;
  border-radius: 5px;
}

.blog-menu-category > span,
.blog-submenu-post > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.blog-menu-category b,
.blog-submenu-post b {
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-menu-category small,
.blog-submenu-post small {
  color: inherit;
  font-size: 0.53rem;
  font-weight: 500;
  opacity: 0.78;
}

.blog-menu-chevron {
  width: 13px;
  height: 13px;
}

.blog-menu-grid.blog-submenu-panel {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  gap: 0;
  overflow: hidden;
  color: #f7f8fc;
  background: #17284a;
  border: 1px solid #41557c;
  border-radius: 7px;
}

.blog-submenu-heading {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: #20375f;
  border-bottom: 1px solid #41557c;
}

.blog-submenu-heading > span {
  color: #f5c943;
  font-size: 0.58rem;
  font-weight: 800;
}

.blog-submenu-heading strong {
  font-size: 0.94rem;
}

.blog-submenu-heading p {
  max-width: 560px;
  margin: 0;
  color: #cbd3e3;
  font-size: 0.64rem;
  font-weight: 400;
  line-height: 1.45;
}

.blog-submenu-list {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.blog-submenu-post {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 13px;
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 9px;
  color: #dce2ee;
  background: #20375f;
  border: 1px solid #41557c;
  border-radius: 6px;
}

.blog-submenu-post:hover,
.blog-submenu-post:focus-visible {
  color: #17233f;
  background: #c9c0e2;
  border-color: #c9c0e2;
  outline: none;
}

.blog-submenu-post .menu-item-icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  color: #17233f;
  background: #f5c943;
  border: 0;
  border-radius: 5px;
}

.blog-submenu-empty {
  margin: 0;
  padding: 16px;
  color: #aeb9cf;
  background: #20375f;
  border: 1px dashed #52688f;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.5;
}

@container (max-width: 580px) {
  .blog-mega-inner.blog-cascade-layout {
    grid-template-columns: 1fr;
  }
}

.desktop-study-shell .desktop-menu-window.menu-window-minimized {
  height: 44px !important;
  min-height: 44px;
  resize: none;
}

.desktop-study-shell .desktop-menu-window.menu-window-minimized > :not(.menu-window-titlebar) {
  display: none !important;
}

.desktop-study-shell .desktop-menu-window.menu-window-maximized {
  inset: 56px 12px 12px 116px !important;
  width: auto !important;
  max-width: none;
  height: auto !important;
  max-height: none;
  resize: none;
}

@container (max-width: 580px) {
  .course-mega-inner,
  .blog-mega-inner,
  .focus-mega-inner,
  .community-mega-inner,
  .course-mega-list,
  .blog-menu-grid,
  .community-menu-grid {
    grid-template-columns: 1fr;
  }
}

.desktop-study-shell > .site-footer {
  margin-left: 18px;
  padding: 8px 18px;
  color: #dbe8e4;
  background: #17303d;
  border: 0;
  font-size: 0.68rem;
  font-weight: 650;
}

@media (min-width: 921px) {
  body.desktop-study-shell:not(.home-blank-shell) > .site-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 104px;
    z-index: 55;
    min-height: 34px;
    margin: 0;
  }
}

@media (max-width: 920px) {
  body.desktop-study-shell {
    padding: 48px 0 76px;
    background-position: 62% center;
  }

  .workspace-message-stack {
    top: 58px;
    right: 10px;
    left: 10px;
    justify-content: center;
    gap: 8px;
  }

  .workspace-welcome-panel {
    width: min(315px, calc(100vw - 250px));
    flex: 1 1 315px;
  }

  .workspace-notice-panel {
    flex: 0 1 220px;
  }

  body.desktop-study-shell::before {
    inset: 48px 0 70px;
    padding-left: 0.12em;
    font-size: clamp(1.7rem, 9vw, 4rem);
    letter-spacing: 0.12em;
  }

  body.desktop-study-shell::after {
    inset: 48px 0 70px;
  }

  .desktop-study-shell .workspace-topbar {
    left: 0;
    padding: 0 112px 0 12px;
  }

  .workspace-breadcrumb i,
  .workspace-breadcrumb strong,
  .workspace-clock,
  .workspace-calculator-button {
    display: none;
  }

  .workspace-breadcrumb {
    gap: 6px;
  }

  .workspace-breadcrumb > span:last-of-type {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-info-clock {
    display: none;
  }

  .desktop-study-shell .site-header {
    inset: auto 0 0;
    width: 100%;
    min-height: 70px;
    height: 70px;
    padding: 6px 8px;
    align-items: center;
    justify-content: center;
    background: #132732;
    border: 0;
    border-top: 1px solid #536b72;
  }

  .desktop-study-shell .brand,
  .desktop-study-shell .nav-toggle {
    display: none;
  }

  .desktop-study-shell .main-nav,
  .desktop-study-shell .main-nav.open {
    position: static;
    display: grid;
    width: min(100%, 620px);
    height: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    margin: 0 auto;
    padding: 0;
    align-items: stretch;
    justify-self: center;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .desktop-study-shell .main-nav > button,
  .desktop-study-shell .main-nav > a {
    min-height: 56px;
    padding: 5px 2px;
    font-size: 0.68rem;
  }

  .desktop-study-shell .header-actions {
    top: 5px;
    right: 7px;
    width: auto;
    height: 38px;
  }

  .desktop-focus-timer-window {
    top: 58px;
    right: 8px;
    width: min(272px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
  }

  .desktop-study-shell .focus-player {
    display: none;
  }

  .desktop-study-shell .signup-button {
    min-width: 98px;
  }

  .desktop-study-shell > main {
    min-height: calc(100vh - 150px);
    margin: 10px;
  }

  body.desktop-study-shell:not(.home-blank-shell) > main.desktop-primary-window {
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: calc(100vh - 150px);
    max-height: none;
    resize: none;
    transform: none;
  }

  .desktop-study-shell .workspace-window-titlebar {
    cursor: default;
  }

  .desktop-study-shell > .page-shell {
    padding-inline: clamp(14px, 4vw, 28px);
    padding-top: 76px;
  }

  .desktop-study-shell .course-mega,
  .desktop-study-shell .blog-mega,
  .desktop-study-shell .focus-mega,
  .desktop-study-shell .community-mega,
  .desktop-study-shell .mypage-mega,
  .desktop-study-shell .signup-menu {
    inset: 58px 10px 80px !important;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    resize: none;
  }

  .desktop-study-shell .menu-window-controls [data-menu-window-minimize],
  .desktop-study-shell .menu-window-controls [data-menu-window-maximize],
  .desktop-content-window [data-content-window-minimize],
  .desktop-content-window [data-content-window-maximize] {
    display: none;
  }

  .desktop-content-window {
    inset: 58px 10px 80px !important;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    resize: none;
  }

  .desktop-content-window::after,
  .desktop-menu-window::after,
  .desktop-calculator-window::after,
  body.desktop-study-shell:not(.home-blank-shell) > main.desktop-primary-window::after {
    display: none;
  }

  .desktop-calculator-window {
    inset: 58px 10px 80px !important;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    resize: none;
  }

  .desktop-study-shell .course-mega-inner,
  .desktop-study-shell .blog-mega-inner,
  .desktop-study-shell .focus-mega-inner,
  .desktop-study-shell .community-mega-inner,
  .desktop-study-shell .mypage-mega-inner,
  .desktop-study-shell .signup-menu-inner {
    max-height: calc(100vh - 182px);
  }

  .desktop-study-shell > .site-footer {
    margin: 0 10px 10px;
  }
}

@media (max-width: 560px) {
  .workspace-message-stack {
    max-height: calc(100dvh - 144px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .workspace-welcome-panel,
  .workspace-notice-panel {
    width: 100%;
    max-width: none;
    flex-basis: auto;
  }

  .workspace-notice-panel {
    max-height: min(220px, calc(100vh - 230px));
  }

  .workspace-notice-list {
    max-height: min(185px, calc(100vh - 265px));
  }

  .desktop-study-shell .workspace-topbar {
    padding-right: 92px;
  }

  .desktop-study-shell .signup-button {
    min-width: 82px;
    padding-inline: 8px;
    font-size: 0.62rem;
  }

  .desktop-study-shell .course-mega-inner,
  .desktop-study-shell .blog-mega-inner,
  .desktop-study-shell .focus-mega-inner,
  .desktop-study-shell .community-mega-inner {
    grid-template-columns: 1fr;
  }

  .workspace-window-titlebar {
    padding-left: 10px;
  }

  .workspace-window-title span {
    max-width: 42vw;
  }
}

/* Blank home desk: no workspace window until a navigation menu is opened. */
body.desktop-study-shell.home-blank-shell {
  background-color: #bda77e;
  background-image:
    radial-gradient(circle at 18% 14%, rgba(255, 248, 218, 0.3), transparent 34%),
    radial-gradient(circle at 82% 68%, rgba(116, 84, 44, 0.12), transparent 42%),
    repeating-linear-gradient(7deg, rgba(91, 67, 38, 0.045) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(96deg, rgba(255, 250, 226, 0.07) 0 1px, transparent 1px 9px);
  background-attachment: fixed;
  background-size: auto;
}

body.desktop-study-shell.home-blank-shell::after {
  background: transparent;
}

body.desktop-study-shell.home-blank-shell > main.home-blank-canvas {
  position: relative;
  width: auto;
  min-height: calc(100vh - 84px);
  margin: 18px 24px 36px;
  background-color: #eadbb9;
  background-image:
    linear-gradient(102deg, rgba(126, 91, 45, 0.055), transparent 15% 82%, rgba(126, 91, 45, 0.04)),
    radial-gradient(ellipse at 50% 0%, rgba(255, 251, 231, 0.48), transparent 68%),
    repeating-linear-gradient(0deg, rgba(91, 65, 34, 0.026) 0 1px, transparent 1px 5px);
  border: 0;
  border-radius: 2px;
  box-shadow:
    0 18px 42px rgba(72, 50, 25, 0.22),
    inset 0 0 70px rgba(132, 94, 49, 0.09);
  overflow: visible;
}

.home-search-intro {
  position: absolute;
  right: clamp(18px, 4vw, 52px);
  bottom: clamp(18px, 5vh, 54px);
  width: min(520px, calc(100% - 36px));
  padding: clamp(18px, 3vw, 30px);
  color: #17303d;
  background: rgba(247, 243, 225, 0.94);
  border: 1px solid rgba(73, 87, 73, 0.42);
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(72, 50, 25, 0.16);
}

.home-search-intro .eyebrow {
  margin: 0 0 6px;
  color: #846520;
}

.home-search-intro h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2.35rem);
  line-height: 1.12;
}

.home-search-intro > p:not(.eyebrow) {
  max-width: 58ch;
  margin: 12px 0 0;
  line-height: 1.6;
}

.home-search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.home-search-links a {
  padding: 8px 11px;
  color: #f8f6ef;
  background: #17303d;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.home-search-links a:hover,
.home-search-links a:focus-visible {
  background: #2d6573;
}

.lesson-related-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.lesson-related-navigation a {
  padding: 11px 13px;
  color: #17303d;
  background: #f7f5ef;
  border: 1px solid #98a7a8;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.lesson-related-navigation a:last-child {
  text-align: right;
}

.lesson-related-navigation a:hover,
.lesson-related-navigation a:focus-visible {
  color: #ffffff;
  background: #2d6573;
  border-color: #2d6573;
}

.course-reference-panel {
  display: grid;
  gap: 6px;
  margin: 12px 0 18px;
  padding: 14px 16px;
  color: #17303d;
  background: #f7f5ef;
  border: 1px solid #98a7a8;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.55;
}

.course-reference-panel > :is(p, strong) {
  margin: 0;
}

.course-reference-panel a,
.lesson-provenance a,
.content-byline a {
  color: #256477;
  text-underline-offset: 2px;
}

.course-workspace .course-reference-panel {
  color: #e5eaf3;
  background: #20375f;
  border-color: #52688f;
}

.course-workspace .course-reference-panel a,
.course-workspace-viewer .lesson-provenance a {
  color: #ffe06a;
}

.lesson-provenance {
  margin-top: 18px;
  padding: 11px 13px;
  color: #40515b;
  background: #eef1ee;
  border-left: 4px solid #2d6573;
  font-size: 0.76rem;
  line-height: 1.5;
}

.course-workspace-viewer .lesson-provenance {
  color: #d3dbea;
  background: #20375f;
  border-left-color: #ffe06a;
}

.content-source-line {
  margin: 10px 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
}

.content-source-line a {
  color: #256477;
  text-underline-offset: 2px;
}

.lesson-concept-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin-top: 14px;
}

.lesson-concept-navigation > strong {
  grid-column: 1 / -1;
  font-size: 0.8rem;
}

.lesson-concept-navigation a {
  padding: 10px 12px;
  color: #17303d;
  background: #eef1ee;
  border: 1px solid #98a7a8;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.lesson-concept-navigation a:hover,
.lesson-concept-navigation a:focus-visible {
  color: #ffffff;
  background: #2d6573;
  border-color: #2d6573;
}

.course-workspace-viewer .lesson-concept-navigation a {
  color: #e5eaf3;
  background: #20375f;
  border-color: #52688f;
}

.course-workspace-viewer .lesson-concept-navigation a:hover,
.course-workspace-viewer .lesson-concept-navigation a:focus-visible {
  color: #17233f;
  background: #ffe06a;
  border-color: #ffe06a;
}

.lesson-note > h2,
.lesson-checkpoint > h2 {
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.25;
}

.course-workspace-viewer .lesson-article section > h2,
.course-workspace-viewer .lesson-article aside > h2 {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
}

.blog-post-body > h2 {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.25;
}

.content-byline {
  font-size: 0.76rem;
  line-height: 1.5;
}

.blog-workspace .blog-post-view .lesson-article-header .content-byline {
  font-size: 0.76rem;
  line-height: 1.5;
}

.blog-workspace .blog-post-view .content-byline a {
  color: #ffe06a;
}

.blog-workspace .blog-post-body > h2 {
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 600;
}

@media (max-width: 560px) {
  .lesson-related-navigation,
  .lesson-concept-navigation {
    grid-template-columns: 1fr;
  }

  .lesson-related-navigation a:last-child {
    text-align: left;
  }
}

body.desktop-study-shell.home-blank-shell > .home-footer {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin: 0;
  padding: 10px clamp(18px, 5vw, 72px);
  color: #f8f6ef;
  background: #101f3b;
  border-top: 1px solid #41557c;
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 920px) {
  body.desktop-study-shell.home-blank-shell > main.home-blank-canvas {
    min-height: calc(100vh - 154px);
    margin: 10px 12px 28px;
  }

  .home-search-intro {
    position: static;
    width: min(560px, calc(100% - 24px));
    margin: auto 12px 12px auto;
  }
}

@media (max-width: 700px) {
  body.desktop-study-shell.home-blank-shell > .home-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .home-search-intro {
    width: calc(100% - 20px);
    margin: 10px;
    padding: 16px;
  }
}

.nav-hover-panel {
  display: none;
}

html.embedded-desktop-view,
html.embedded-desktop-view body {
  height: 100%;
  min-height: 100%;
  background: var(--paper);
}

html.embedded-desktop-view {
  overflow: hidden;
}

html.embedded-desktop-view body {
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

html.embedded-desktop-view .site-header,
html.embedded-desktop-view .workspace-topbar,
html.embedded-desktop-view body > .site-footer {
  display: none !important;
}

html.embedded-desktop-view body > main {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.embedded-desktop-view .course-page-shell {
  padding: 8px 12px 24px;
}

html.embedded-desktop-view .course-page-shell > .page-hero {
  max-width: none;
  gap: 2px;
  margin-bottom: 8px;
}

html.embedded-desktop-view .course-page-shell > .page-hero .eyebrow {
  margin: 0;
  font-size: 0.58rem;
  line-height: 1.2;
}

html.embedded-desktop-view .course-page-shell > .page-hero h1 {
  max-width: none;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.25;
}

html.embedded-desktop-view .course-page-shell > .page-hero .hero-description {
  max-width: none;
  margin: 0;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.embedded-desktop-view .blog-page-shell {
  padding: 8px 12px 24px;
}

html.embedded-desktop-view .blog-page-shell > .page-hero {
  max-width: none;
  gap: 2px;
  margin-bottom: 8px;
}

html.embedded-desktop-view .blog-page-shell > .page-hero .eyebrow {
  margin: 0;
  font-size: 0.58rem;
  line-height: 1.2;
}

html.embedded-desktop-view .blog-page-shell > .page-hero h1 {
  max-width: none;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.25;
}

html.embedded-desktop-view .blog-page-shell > .page-hero .hero-description {
  max-width: none;
  margin: 0;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 921px) {
  html.embedded-desktop-view .course-workspace-sidebar {
    top: 8px;
    height: calc(100dvh - 16px);
    max-height: calc(100vh - 16px);
  }

  html.embedded-desktop-view .blog-workspace-sidebar,
  html.embedded-desktop-view .blog-workspace-posts,
  html.embedded-desktop-view .blog-workspace .blog-post-view {
    top: 8px;
    height: calc(100dvh - 16px);
    min-height: 0;
    max-height: calc(100vh - 16px);
  }

  html.embedded-desktop-view .blog-workspace .blog-post-view {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

.ap-only-course-menu .course-mega-categories {
  display: none;
}

@media (min-width: 921px) {
  body.desktop-study-shell.desktop-content-scroll-locked {
    overflow: hidden;
  }

  .desktop-study-shell .main-nav > button {
    position: relative;
    overflow: visible;
  }

  .desktop-study-shell .main-nav > .nav-hover-panel {
    position: fixed;
    top: var(--nav-hover-top, 90px);
    left: 104px;
    z-index: 1000;
    display: grid;
    width: min(390px, calc(100vw - 150px));
    max-height: calc(100vh - var(--nav-hover-top, 90px) - 12px);
    gap: 0;
    padding: 14px;
    color: #24353a;
    background: #f3e7c8;
    border: 1px solid #9b8964;
    border-radius: 5px;
    box-shadow: 0 8px 18px rgba(37, 29, 18, 0.2);
    opacity: 0;
    overflow: visible;
    pointer-events: auto;
    text-align: left;
    transform: translateX(-8px);
    transition: opacity 140ms ease, transform 140ms ease;
    visibility: hidden;
  }

  .desktop-study-shell .main-nav > button:hover + .nav-hover-panel,
  .desktop-study-shell .main-nav > button:focus-visible + .nav-hover-panel,
  .desktop-study-shell .main-nav > .nav-hover-panel.nav-hover-persistent,
  .desktop-study-shell .main-nav > .nav-hover-panel:hover,
  .desktop-study-shell .main-nav > .nav-hover-panel:focus-within {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
  }

  .desktop-study-shell .main-nav > .nav-hover-panel.nav-hover-dismissed {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-8px) !important;
    visibility: hidden !important;
  }

  .nav-hover-panel > strong,
  .nav-hover-heading-open {
    padding: 2px 4px 11px;
    color: #28383b;
    font-size: 0.84rem;
    font-weight: 800;
  }

  .nav-hover-heading-open {
    width: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
  }

  .nav-hover-heading-open:hover,
  .nav-hover-heading-open:focus-visible {
    color: #1f4f56;
    text-decoration: underline;
    outline: none;
  }

  .nav-hover-item {
    display: grid;
    width: 100%;
    gap: 3px;
    padding: 9px 8px;
    color: #44575a;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(126, 103, 65, 0.22);
    cursor: pointer;
    font-family: inherit;
    font-weight: 650;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
  }

  .nav-hover-item-wrap {
    position: relative;
  }

  .nav-hover-item-wrap::after {
    position: absolute;
    top: 0;
    left: 100%;
    width: 14px;
    height: 100%;
    content: "";
  }

  .nav-hover-item.has-mindmap {
    position: relative;
    padding-right: 32px;
  }

  .nav-hover-branch-arrow {
    position: absolute;
    top: 50%;
    right: 9px;
    width: 15px;
    height: 15px;
    color: #7c6c4c;
    transform: translateY(-50%);
  }

  .nav-hover-mindmap {
    position: absolute;
    top: -1px;
    left: calc(100% + 13px);
    z-index: 2;
    width: min(470px, calc(100vw - 495px));
    max-height: calc(100vh - var(--nav-hover-top, 90px) - 12px);
    padding: 14px;
    color: #2d4143;
    background: #f8efd9;
    border: 1px solid #9b8964;
    border-radius: 0 6px 6px 0;
    box-shadow: 10px 10px 22px rgba(37, 29, 18, 0.18);
    opacity: 0;
    overflow-y: auto;
    pointer-events: none;
    transform: translateX(-7px);
    transition: opacity 140ms ease, transform 140ms ease;
    visibility: hidden;
  }

  .nav-hover-item-wrap:hover > .nav-hover-mindmap,
  .nav-hover-item-wrap:focus-within > .nav-hover-mindmap,
  .nav-hover-item-wrap.nav-touch-expanded > .nav-hover-mindmap {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
  }

  .nav-hover-mindmap-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 1px 3px 12px;
    border-bottom: 1px solid rgba(126, 103, 65, 0.28);
  }

  .nav-hover-mindmap-heading strong {
    overflow: hidden;
    color: #2f4143;
    font-size: 0.76rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-mindmap-heading-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: #8a7040;
  }

  .nav-mindmap-tree {
    position: relative;
    display: grid;
    gap: 7px;
    padding: 10px 0 1px 21px;
  }

  .nav-mindmap-tree::before {
    position: absolute;
    top: 0;
    bottom: 22px;
    left: 8px;
    width: 1px;
    content: "";
    background: #b9a271;
  }

  .nav-mindmap-node {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 8px 9px;
    color: #405456;
    background: #fffaf0;
    border: 1px solid #cbb98e;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
  }

  .nav-hover-panel[data-nav-hover-panel="course"] .nav-hover-mindmap {
    width: clamp(190px, calc((100vw - 530px) / 2), 430px);
    overflow: visible;
  }

  .nav-mindmap-node-wrap {
    position: relative;
    min-width: 0;
  }

  .nav-mindmap-node-wrap::after {
    position: absolute;
    top: 0;
    left: 100%;
    width: 13px;
    height: 100%;
    content: "";
  }

  .nav-mindmap-node.has-lessons {
    padding-right: 30px;
  }

  .nav-lesson-branch-arrow {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 14px;
    height: 14px;
    color: #8b713d;
    transform: translateY(-50%);
  }

  .nav-lesson-flyout {
    position: absolute;
    top: 0;
    left: calc(100% + 12px);
    z-index: 5;
    display: flex;
    width: clamp(190px, calc((100vw - 530px) / 2), 430px);
    max-height: calc(100vh - var(--nav-hover-top, 90px) - 12px);
    flex-direction: column;
    color: #2d4143;
    background: #fff9ea;
    border: 1px solid #9b8964;
    border-radius: 6px;
    box-shadow: 10px 10px 22px rgba(37, 29, 18, 0.2);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-7px);
    transition: opacity 140ms ease, transform 140ms ease;
    visibility: hidden;
  }

  .nav-mindmap-node-wrap:nth-child(n + 6) > .nav-lesson-flyout {
    top: auto;
    bottom: 0;
  }

  .nav-mindmap-node-wrap:hover > .nav-lesson-flyout,
  .nav-mindmap-node-wrap:focus-within > .nav-lesson-flyout,
  .nav-mindmap-node-wrap.nav-touch-expanded > .nav-lesson-flyout {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
  }

  .nav-lesson-flyout-heading {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 12px;
    background: #f3e7c8;
    border-bottom: 1px solid rgba(126, 103, 65, 0.3);
  }

  .nav-lesson-flyout-heading > span {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .nav-lesson-flyout-heading strong,
  .nav-lesson-flyout-heading small {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-lesson-flyout-heading strong {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .nav-lesson-flyout-heading small {
    color: #6e7866;
    font-size: 0.56rem;
  }

  .nav-lesson-list {
    display: grid;
    min-height: 0;
    padding: 6px;
    overflow-y: auto;
  }

  .nav-lesson-group {
    border-bottom: 1px solid rgba(126, 103, 65, 0.2);
  }

  .nav-lesson-group-summary {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 20px minmax(0, 1fr) 15px;
    gap: 7px;
    align-items: center;
    padding: 8px;
    color: #405456;
    cursor: pointer;
    list-style: none;
  }

  .nav-lesson-group-summary::-webkit-details-marker {
    display: none;
  }

  .nav-lesson-group-summary:hover,
  .nav-lesson-group-summary:focus-visible,
  .nav-lesson-group[open] > .nav-lesson-group-summary {
    color: #1f383b;
    background: #f1e2bd;
    outline: none;
  }

  .nav-lesson-group-summary > span {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .nav-lesson-group-summary b,
  .nav-lesson-group-summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-lesson-group-summary b {
    color: #34474a;
    font-size: 0.62rem;
    font-weight: 750;
  }

  .nav-lesson-group-summary small {
    color: #7a6a4a;
    font-size: 0.52rem;
    font-weight: 700;
  }

  .nav-lesson-group-icon,
  .nav-lesson-group-arrow {
    width: 14px;
    height: 14px;
    color: #8b713d;
  }

  .nav-lesson-group-arrow {
    transition: transform 140ms ease;
  }

  .nav-lesson-group[open] .nav-lesson-group-arrow {
    transform: rotate(180deg);
  }

  .nav-topic-list {
    display: grid;
    padding: 2px 5px 7px 25px;
    background: rgba(255, 250, 240, 0.74);
  }

  .nav-topic-link {
    padding-block: 6px;
  }

  .nav-lesson-link {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 7px 8px;
    color: #405456;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(126, 103, 65, 0.18);
    font-family: inherit;
    line-height: 1.3;
    text-decoration: none;
  }

  .desktop-study-shell .main-nav .nav-lesson-link,
  .desktop-study-shell .main-nav .nav-lesson-link:visited {
    display: grid;
    padding: 7px 8px;
    color: #405456;
    opacity: 1;
    font-size: inherit;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    visibility: visible;
  }

  .nav-lesson-link:hover,
  .nav-lesson-link:focus-visible {
    color: #1f383b;
    background: #f1e2bd;
    outline: none;
  }

  .nav-lesson-link b {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #34474a;
    font-size: 0.62rem;
    font-weight: 750;
    opacity: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    visibility: visible;
  }

  .nav-lesson-link small {
    display: block;
    color: #7a6a4a;
    font-size: 0.52rem;
    font-weight: 700;
    opacity: 1;
    white-space: nowrap;
    visibility: visible;
  }

  .desktop-study-shell .main-nav .nav-hover-mindmap .nav-mindmap-node,
  .desktop-study-shell .main-nav .nav-hover-mindmap .nav-mindmap-node:visited {
    color: #405456;
    opacity: 1;
  }

  .nav-mindmap-node::before {
    position: absolute;
    top: 50%;
    left: -14px;
    width: 14px;
    height: 1px;
    content: "";
    background: #b9a271;
  }

  .nav-mindmap-node:hover,
  .nav-mindmap-node:focus-visible {
    color: #1f383b;
    background: #f1e2bd;
    border-color: #9f895a;
    outline: none;
  }

  .nav-mindmap-node-icon {
    width: 19px;
    height: 19px;
    margin: 1px auto 0;
    color: #8b713d;
  }

  .nav-mindmap-node > span {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .desktop-study-shell .main-nav .nav-mindmap-node b {
    display: block;
    color: #34474a;
    font-size: 0.67rem;
    font-weight: 780;
    opacity: 1;
    visibility: visible;
  }

  .desktop-study-shell .main-nav .nav-mindmap-node small {
    display: -webkit-box;
    overflow: hidden;
    color: #6e7866;
    font-size: 0.57rem;
    font-weight: 600;
    line-height: 1.4;
    opacity: 1;
    visibility: visible;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .nav-hover-item:hover,
  .nav-hover-item:focus-visible {
    background: rgba(181, 154, 104, 0.18);
    outline: none;
  }

  .nav-hover-item > b {
    color: #34474a;
    font-size: 0.72rem;
    font-weight: 780;
  }

  .nav-hover-item > small {
    display: -webkit-box;
    overflow: hidden;
    color: #6c775f;
    font-size: 0.61rem;
    font-weight: 600;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .nav-hover-open {
    width: 100%;
    margin-top: 7px;
    padding: 8px 8px 1px;
    color: #756747;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.61rem;
    font-weight: 700;
    text-align: left;
  }

  .nav-hover-open:hover,
  .nav-hover-open:focus-visible {
    color: #253a3e;
    text-decoration: underline;
    outline: none;
  }

  .desktop-study-shell .main-nav > .nav-community-trigger {
    min-height: 74px;
    gap: 4px;
  }

  .desktop-study-shell .main-nav > button > [data-community-nav-status] {
    display: block;
    color: #8fa5a7;
    font-size: 0.52rem;
    line-height: 1.1;
    white-space: nowrap;
  }
}

/* Keep the full AP course cascade usable in short desktop viewports. */
@media (min-width: 921px) {
  .desktop-study-shell .main-nav > .nav-hover-panel[data-nav-hover-panel="course"],
  .desktop-study-shell .main-nav > .nav-hover-panel[data-nav-hover-panel="course"].nav-hover-persistent,
  .desktop-study-shell .main-nav > .nav-hover-panel[data-nav-hover-panel="course"].nav-hover-dismissed {
    transform: none !important;
  }

  .nav-hover-panel[data-nav-hover-panel="course"] .nav-hover-mindmap,
  .nav-hover-panel[data-nav-hover-panel="course"] .nav-hover-item-wrap:hover > .nav-hover-mindmap,
  .nav-hover-panel[data-nav-hover-panel="course"] .nav-hover-item-wrap:focus-within > .nav-hover-mindmap,
  .nav-hover-panel[data-nav-hover-panel="course"] .nav-hover-item-wrap.nav-touch-expanded > .nav-hover-mindmap {
    max-height: calc(100dvh - var(--nav-hover-top, 90px) - 12px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    transform: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav-hover-panel[data-nav-hover-panel="course"] .nav-lesson-flyout {
    position: fixed;
    top: var(--nav-lesson-flyout-top, 12px);
    bottom: auto;
    left: var(--nav-lesson-flyout-left, calc(100vw - 442px));
    max-height: var(--nav-lesson-flyout-max-height, calc(100dvh - 24px));
    transform: none;
  }

  .nav-hover-panel[data-nav-hover-panel="course"] .nav-mindmap-node-wrap:nth-child(n + 6) > .nav-lesson-flyout {
    top: var(--nav-lesson-flyout-top, 12px);
    bottom: auto;
  }

  .nav-lesson-list {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

/* A resized Courses window keeps the course cards as an independent scroll region. */
.desktop-study-shell .course-mega-inner {
  min-height: 0;
  overflow: hidden;
}

.desktop-study-shell .course-mega-side,
.desktop-study-shell .course-mega-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 920px) {
  .desktop-study-shell .course-mega-inner {
    grid-template-rows: auto minmax(0, 1fr);
    max-height: calc(100dvh - 182px);
  }
}

/* Mobile and tablet navigation: replace the footer-style dock with a header hamburger menu. */
@media (max-width: 920px) {
  body.desktop-study-shell {
    padding: 48px 0 18px;
  }

  body.desktop-study-shell::before,
  body.desktop-study-shell::after {
    inset: 48px 0 0;
  }

  .desktop-study-shell .site-header {
    position: fixed;
    inset: 0 6px auto auto;
    z-index: 80;
    display: block;
    width: 48px;
    min-height: 48px;
    height: 48px;
    padding: 5px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .desktop-study-shell .brand {
    display: none;
  }

  .desktop-study-shell .nav-toggle {
    position: relative;
    z-index: 2;
    display: block;
    width: 38px;
    height: 38px;
    padding: 7px;
    color: #eff7f4;
    background: #274c58;
    border: 1px solid #6e898d;
    border-radius: 5px;
    box-shadow: none;
    cursor: pointer;
  }

  .desktop-study-shell .nav-toggle span {
    height: 2px;
    margin: 4px 0;
    background: currentColor;
    border-radius: 999px;
    transition: opacity 140ms ease, transform 140ms ease;
  }

  .desktop-study-shell .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .desktop-study-shell .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .desktop-study-shell .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .desktop-study-shell .main-nav,
  .desktop-study-shell .main-nav.open {
    position: fixed;
    top: 54px;
    right: 8px;
    left: auto;
    z-index: 79;
    width: min(300px, calc(100vw - 16px));
    height: auto;
    max-height: calc(100vh - 62px);
    max-height: calc(100dvh - 62px);
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 0;
    padding: 9px;
    align-items: stretch;
    justify-self: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #eff7f4;
    background: #132732;
    border: 1px solid #536b72;
    border-radius: 7px;
    box-shadow: 0 16px 34px rgba(5, 21, 28, 0.34);
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  .desktop-study-shell .main-nav:not(.open) {
    display: none;
  }

  .desktop-study-shell .main-nav.open {
    display: grid;
  }

  .desktop-study-shell .main-nav > button,
  .desktop-study-shell .main-nav > a {
    min-height: 48px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    color: #e4edeb;
    background: #1d3944;
    border: 1px solid #526d73;
    border-radius: 5px;
    box-shadow: none;
    font-size: 0.76rem;
    text-align: left;
  }

  .desktop-study-shell .main-nav > button:hover,
  .desktop-study-shell .main-nav > button:focus-visible,
  .desktop-study-shell .main-nav > button.active,
  .desktop-study-shell .main-nav > a:hover,
  .desktop-study-shell .main-nav > a:focus-visible,
  .desktop-study-shell .main-nav > a.active {
    color: #fff7d7;
    background: #274c58;
    border-color: #759095;
    outline: none;
  }

  .desktop-study-shell .main-nav .nav-menu-icon {
    width: 21px;
    height: 21px;
  }

  .desktop-study-shell .main-nav > button > [data-community-nav-status] {
    margin-left: auto;
    font-size: 0.52rem;
  }

  .desktop-study-shell > main,
  body.desktop-study-shell:not(.home-blank-shell) > main.desktop-primary-window {
    min-height: calc(100vh - 76px);
  }

  .desktop-study-shell .course-mega,
  .desktop-study-shell .blog-mega,
  .desktop-study-shell .focus-mega,
  .desktop-study-shell .community-mega,
  .desktop-study-shell .mypage-mega,
  .desktop-study-shell .signup-menu,
  .desktop-content-window,
  .desktop-calculator-window {
    inset: 58px 10px 10px !important;
  }
}