*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #5f6f89;
  --line: #dce3f0;
  --surface: #ffffff;
  --soft: #f5f7fb;
  --brand: #5b5fe9;
  --brand-dark: #3e43b5;
  --brand-tint: #eef0ff;
  --brand-tint-strong: #e0e4ff;
  --curriculum-tint: #dbe2ff;
  --curriculum-divider: #b8c4ea;
  --line-strong: #c9d3e7;
  --green: #087f5b;
  --red: #c92a2a;
  --danger-soft: #fff0f0;
  --danger-line: #ffd0d0;
}
html, body { margin: 0; padding: 0; min-height: 100%; background: #fff; }
body { font-family: "Noto Sans KR", "Noto Sans JP", "Noto Sans TC", system-ui, sans-serif; color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1080px, 100%); margin: 0 auto; padding: 22px 16px 24px; }
.shell.catalog-shell { width: min(1480px, 100%); }
.shell.student-shell { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.shell.teacher-shell { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.student-footer-spacer { flex:1 0 42px; }
.teacher-footer-spacer { flex:1 0 42px; }
.student-shell .site-footer { margin-top:0; }
.teacher-shell .site-footer { margin-top:0; }
.student-shell .topnav { margin-bottom:10px; }
.student-entry { padding:18px 0 10px; }
.student-entry .join-card { margin-top:0; }
.topnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand { display:inline-flex; align-items:center; gap:8px; font-size:1.15rem; font-weight:900; color:var(--ink); text-decoration:none; }
.brand::before {
  content:"";
  flex:0 0 26px;
  width:26px;
  height:26px;
  border-radius:8px;
  background:
    radial-gradient(circle at 73% 73%,#fff 0 2px,transparent 2.4px),
    linear-gradient(#fff,#fff) center / 12px 3px no-repeat,
    linear-gradient(#fff,#fff) center / 3px 12px no-repeat,
    linear-gradient(135deg,#7c81ff,#4d52d1);
  box-shadow:0 5px 12px rgba(62,67,181,.2);
  transition:transform .16s ease, box-shadow .16s ease;
}
.brand:hover::before, .brand:focus-visible::before { transform:translateY(-1px) rotate(-3deg); box-shadow:0 7px 15px rgba(62,67,181,.27); }
.nav-actions { display: flex; gap: 8px; align-items: center; }
.locale-select { width:auto; min-width:112px; padding:8px 30px 8px 10px; border-radius:10px; font-size:.8rem; font-weight:700; }
.link-btn, .button { border: 0; border-radius: 12px; padding: 11px 15px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.link-btn { background: var(--soft); color: var(--ink); }
.button { background: var(--brand); color: white; }
.button:hover { background: var(--brand-dark); }
.button.secondary { background: #eef0ff; color: var(--brand-dark); }
.button.danger { background:var(--danger-soft); color:var(--red); box-shadow:inset 0 0 0 1px var(--danger-line); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.catalog-intro { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(520px, 700px); gap: clamp(28px, 5vw, 72px); align-items: center; padding: 22px 0 12px; }
.catalog-intro.participant-ready { grid-template-columns: 1fr; }
.catalog-intro .hero { padding: 0; }
.catalog-intro .join-card { margin-top: 0; }
.hero { padding: 22px 0 12px; }
.eyebrow { color: var(--brand); font-weight: 700; font-size: .8rem; letter-spacing:.02em; }
h1 { font-size: clamp(2rem, 6vw, 3.8rem); line-height: 1.14; letter-spacing: -.04em; margin: 8px 0 14px; font-weight:900; }
.lead { color: var(--muted); line-height: 1.75; max-width: 680px; margin: 0; }
.join-card, .card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 10px 30px rgba(17, 24, 39, .06); }
.join-card { width: min(700px, 100%); margin-top: 26px; padding: 20px; }
.join-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) auto; gap: 10px; align-items: end; }
label { display: grid; gap: 7px; font-size: .84rem; color: var(--muted); font-weight: 700; }
input, select { width: 100%; border: 1px solid #cfd4dc; border-radius: 11px; padding: 12px 13px; background: white; color: var(--ink); outline: none; }
input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(91, 91, 214, .13); }
.message { min-height: 22px; margin: 10px 2px 0; color: var(--muted); font-size: .88rem; font-weight: 700; }
.message.error { color: var(--red); }
.message.ok { color: var(--green); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin: 34px 0 14px; }
.section-heading h2 { margin: 0; color:#13213a; }
.section-heading p { margin: 0; color: var(--muted); font-size: .9rem; }
.student-shell #catalog-section .section-heading { margin-top:18px; }
.special-content-panel {
  border:1px solid #d8e0f0;
  border-radius:16px;
  padding:15px 16px;
  background:#fbfcff;
  box-shadow:0 7px 22px rgba(73,82,145,.07);
}
.special-content-heading { display:flex;align-items:baseline;justify-content:space-between;gap:10px 18px;flex-wrap:wrap; }
.special-content-heading h2 { margin:0;color:#18233b;font-size:1rem;line-height:1.4;letter-spacing:-.02em; }
.special-content-heading p { margin:0;color:var(--muted);font-size:.78rem;line-height:1.5; }
.special-content-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,280px));gap:9px;margin-top:11px; }
.special-content-item {
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:62px;
  border:1px solid #d7dcff;
  border-radius:12px;
  padding:9px 11px;
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.special-content-item:hover,.special-content-item:focus-visible { border-color:#aeb6f4;background:#f7f7ff;box-shadow:0 5px 15px rgba(73,75,170,.1);outline:none;transform:translateY(-1px); }
.special-content-icon { display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--brand-tint);color:var(--brand-dark);font-size:1.35rem;font-weight:700;line-height:1; }
.special-content-copy { display:grid;min-width:0;gap:2px; }
.special-content-copy strong { font-size:.9rem;font-weight:700;line-height:1.35; }
.special-content-copy small { color:var(--muted);font-size:.74rem;font-weight:500;line-height:1.4; }
.special-content-arrow { color:var(--brand);font-size:1rem;font-weight:700; }
.student-special-content { width:100%;margin:8px 0 20px; }
.student-special-content .special-content-grid { grid-template-columns:repeat(auto-fill,minmax(190px,230px));justify-content:start; }
.student-special-content .special-content-item { grid-template-columns:34px minmax(0,1fr);min-height:58px;gap:9px;padding:8px 10px; }
.student-special-content .special-content-icon { width:34px;height:34px;border-radius:9px;font-size:1.15rem; }
.grade-select { width:auto; min-width:210px; margin:0 0 7px; padding:8px 36px 8px 12px; border:1px solid #cfd4dc; border-radius:10px; background-color:#fff; font-size:1.05rem; line-height:1.3; font-weight:800; letter-spacing:-.02em; }
.grade-select:hover { border-color:#aeb7c6; }
.grade-select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(91, 91, 214, .13); outline:none; }
.grade-select option { font-size:1rem; font-weight:600; }
.catalog-grade-empty { margin:0; padding:22px 2px; color:var(--muted); font-weight:700; }
.content-system-wrap { overflow-x:auto; background:#fff; border:1px solid #d8e0f0; border-radius:14px; box-shadow:0 7px 22px rgba(73,82,145,.09); scrollbar-color:#aeb9d1 transparent; scrollbar-width:thin; }
.content-system-table { width:100%; min-width:900px; border:1px solid var(--line-strong); border-collapse:collapse; table-layout:fixed; background:#fff; }
.content-system-table th, .content-system-table td { border:1px solid var(--line); padding:0; text-align:left; vertical-align:top; }
.content-system-table thead th { height:54px; padding:13px 10px; background:#e9ecff; text-align:center; font-size:1.05rem; font-weight:700; color:#292f70; }
.content-system-table thead th:first-child { width:145px; background:#f8faff; }
.content-system-table tbody th { width:145px; padding:14px 10px; background:var(--curriculum-tint); color:#222957; text-align:center; vertical-align:middle; font-size:1rem; font-weight:700; }
.content-system-table tbody tr + tr > * { border-top:2px solid var(--curriculum-divider); }
.content-system-list { min-height:48px; }
.content-system-item { display:block; width:100%; min-height:40px; border:0; border-top:1px solid var(--line); padding:8px 10px; background:#fff; color:var(--ink); text-align:left; font-weight:500; transition:background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.content-system-item:first-child { border-top:0; }
.content-system-item:hover { background:#f3f5ff; color:var(--brand-dark); box-shadow:inset 3px 0 0 var(--brand); }
.content-system-item:focus-visible { background:var(--brand-tint); color:var(--brand-dark); outline:2px solid var(--brand); outline-offset:-2px; }
.content-resource-view { min-height:280px; padding:2px 0 18px; background:#fff; }
.content-system-back { border:0; margin-bottom:6px; padding:8px 2px; background:transparent; color:var(--brand-dark); font-size:.88rem; font-weight:700; }
.content-system-back:hover, .content-system-back:focus-visible { text-decoration:underline; text-underline-offset:3px; outline:none; }
.content-resource-heading { margin:20px 0 16px; }
.content-resource-heading span { color:var(--muted); font-size:.84rem; font-weight:800; }
.content-resource-heading h2 { margin:5px 0 0; font-size:1.45rem; }
.content-resource-heading p { margin:7px 0 0; color:var(--muted); font-size:.84rem; font-weight:700; }
.content-resource-editor-help { display:flex; align-items:center; justify-content:space-between; gap:10px 18px; }
.content-resource-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); min-height:58px; border-left:1px solid var(--line); background:#fff; }
.content-resource-grid.is-drop-target { background:#f0f1ff; outline:2px solid var(--brand); outline-offset:-2px; }
.content-resource-item { display:flex; align-items:center; min-height:58px; border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px; background:#fff; transition:background-color .15s ease, box-shadow .15s ease; }
.content-resource-item:not(.is-dragging):hover, .content-resource-item:focus-within { background:#fafaff; box-shadow:inset 0 0 0 1px var(--brand-tint-strong); }
.content-resource-item.is-dragging { opacity:.55; outline:2px solid var(--brand); outline-offset:-2px; cursor:grabbing; }
.content-resource-rows.is-saving { pointer-events:none; opacity:.72; }
.content-resource-new-row-drop { margin-top:10px; min-height:50px; border:2px dashed #b8bdc7; display:flex; align-items:center; justify-content:center; background:#fafbff; color:var(--muted); font-size:.84rem; font-weight:800; }
.content-resource-new-row-drop.is-drop-target { border-color:var(--brand); background:#f0f1ff; color:var(--brand-dark); }
.content-resource-item.is-hidden-resource { color:#8b93a3; background:#fafafa; }
.content-resource-drag { flex:0 0 auto; width:22px; height:28px; border:0; padding:0; margin:0 7px 0 -4px; background:transparent; color:#8b93a3; font-size:1.15rem; line-height:1; cursor:grab; touch-action:none; }
.content-resource-drag:hover, .content-resource-drag:focus-visible { color:var(--brand-dark); outline:2px solid var(--brand); outline-offset:1px; }
.content-resource-checkbox { flex:0 0 auto; width:18px; height:18px; margin:0 8px 0 0; accent-color:var(--brand); }
.content-resource-link { display:flex; flex:1; align-items:center; align-self:stretch; min-width:0; color:inherit; text-decoration:none; font-weight:700; line-height:1.45; }
.content-resource-item:not([data-order-kind]) .content-resource-link { font-size:.92rem; line-height:1.4; white-space:nowrap; }
.content-resource-link:hover, .content-resource-link:focus-visible { color:var(--brand-dark); outline:none; }
.content-resource-link:hover .catalog-title,
.content-resource-link:focus-visible .catalog-title,
.content-resource-link:hover .catalog-title-phrase,
.content-resource-link:focus-visible .catalog-title-phrase,
.content-resource-link:hover .catalog-title-suffix,
.content-resource-link:focus-visible .catalog-title-suffix,
.content-resource-link:hover .catalog-title-word,
.content-resource-link:focus-visible .catalog-title-word,
.content-resource-link:hover .catalog-math,
.content-resource-link:focus-visible .catalog-math { text-decoration:underline; text-underline-offset:3px; }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.game-card { padding: 18px; display: flex; min-height: 210px; flex-direction: column; }
.game-tag { color: var(--brand); font-size: .78rem; font-weight: 900; }
.game-card h3 { margin: 8px 0; font-size: 1.2rem; }
.game-card p { color: var(--muted); line-height: 1.6; font-size: .9rem; margin: 0 0 18px; flex: 1; }
.participant-chip { position:relative; display:none; min-width:0; padding:7px 30px 7px 11px; border:1px solid var(--brand-tint-strong); border-radius:12px; background:var(--brand-tint); color:var(--ink); font-size:.8rem; line-height:1.3; text-align:left; transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.participant-chip.visible { display:inline-grid; gap:1px; }
.participant-chip::after { content:"✎"; position:absolute; right:9px; top:50%; color:#7379a8; font-size:.9rem; line-height:1; transform:translateY(-50%); }
.participant-chip::before { content:attr(data-tooltip); position:absolute; z-index:40; top:calc(100% + 7px); right:0; padding:6px 9px; border-radius:7px; background:#202744; color:#fff; box-shadow:0 7px 18px rgba(24,31,63,.18); font-size:.72rem; font-weight:700; line-height:1.2; white-space:nowrap; opacity:0; pointer-events:none; transform:translateY(-3px); transition:opacity .14s ease, transform .14s ease; }
.participant-chip:hover, .participant-chip:focus-visible { border-color:#b9c2ef; background:#e8ebff; box-shadow:0 0 0 3px rgba(91,95,233,.11); outline:none; }
.participant-chip:hover::before, .participant-chip:focus-visible::before { opacity:1; transform:translateY(0); }
.participant-control { display:flex; align-items:center; min-width:0; }
.participant-name, .participant-code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.participant-name { font-weight:700; }
.participant-separator { display:none; }
.participant-code { color:var(--muted); font-size:.72rem; font-weight:500; }
.demo-note { margin-top: 16px; border-radius: 12px; padding: 11px 13px; background: #fff8e6; color: #8a5d00; font-size: .83rem; line-height: 1.6; }
.catalog-wrap { overflow-x: auto; background: #fff; }
.catalog-table { width: 100%; min-width: 1180px; border-collapse: collapse; table-layout: fixed; }
.catalog-table th, .catalog-table td { border: 1px solid #b8bdc7; padding: 13px 12px; text-align: left; }
.catalog-table thead th { background: #ffe39a; text-align: center; font-weight: 900; }
.catalog-table thead th:last-child { background: #f8c994; }
.catalog-table thead th:first-child { width: 110px; }
.catalog-table thead th:nth-child(2) { width: 230px; }
.catalog-area { text-align: center !important; font-weight: 900; background: #fffdf7; vertical-align: middle; }
.catalog-unit { font-weight: 700; background: #fff; vertical-align: middle; }
.catalog-resource-cell { padding: 0 !important; }
.catalog-resources { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.catalog-link, .catalog-empty { min-height: 48px; padding: 12px; display: flex; align-items: center; }
.catalog-resources > :not(:nth-child(5n + 1)) { border-left: 1px solid #d4d7de; }
.catalog-resources > :nth-child(n + 6) { border-top: 1px solid #d4d7de; }
.catalog-link { color: var(--ink); text-decoration: none; font-weight: 700; }
.catalog-title { min-width: 0; }
.catalog-title-suffix { display:inline-block; white-space:nowrap; }
.catalog-title-phrase { display:inline-block; white-space:nowrap; }
.catalog-title-word { display:inline-block; white-space:nowrap; }
.catalog-math { display: inline-block; white-space: nowrap; }
.catalog-math mjx-container { margin: 0 .02em !important; font-size: .96em !important; }
.catalog-link:hover, .catalog-link:focus-visible { background: #f3f4ff; color: var(--brand-dark); outline: none; }
.catalog-emoji { flex:0 0 auto; margin-right:.35em; font-family:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-variant-emoji:emoji; }
.catalog-empty { min-height: 48px; }
.site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; margin-top:42px; padding:14px 2px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; line-height:1.6; }
.site-footer p { margin:0; }
.site-footer a { color:inherit; text-underline-offset:3px; }
.landing-body {
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(circle at 84% 12%, rgba(91,91,214,.11), transparent 34%),
    linear-gradient(180deg,#fff 0%,#fbfbff 100%);
}
.landing-intro-enabled body.intro-playing { overflow:hidden; }
.landing-intro { display:none; }
.landing-intro-enabled .landing-intro {
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:clamp(28px,6vw,80px);
  background:
    radial-gradient(circle at 50% 45%,rgba(91,95,233,.055),transparent 34%),
    #fff;
  opacity:0;
  visibility:hidden;
  transition:opacity .72s cubic-bezier(.22,1,.36,1), visibility 0s linear .72s;
}
.landing-intro-enabled .intro-playing .landing-intro {
  opacity:1;
  visibility:visible;
  transition:none;
}
.landing-intro-copy {
  width:min(980px,100%);
  display:grid;
  gap:clamp(4px,1vh,12px);
  text-align:center;
}
.landing-intro-line {
  position:relative;
  margin:0;
  overflow:hidden;
  color:var(--ink);
  font-size:clamp(2.25rem,6.4vw,6.3rem);
  font-weight:900;
  line-height:1.12;
  letter-spacing:-.055em;
  word-break:keep-all;
}
.landing-intro-line span {
  position:relative;
  display:inline-block;
  opacity:0;
  filter:blur(18px);
  transform:translate3d(62vw,-18vh,0) rotate(-7deg) skewX(-14deg) scale(.94);
  transform-origin:center;
  text-shadow:42px 18px 0 rgba(91,95,233,.08), 78px 32px 0 rgba(91,95,233,.04);
}
.intro-playing .intro-line-one span { animation:intro-brake-in .96s linear .28s forwards; }
.intro-playing .intro-line-two span { animation:intro-brake-in .98s linear 1.58s forwards; }
.intro-playing .intro-line-three span {
  color:var(--brand-dark);
  animation:intro-brake-in-final 1.08s linear 2.88s forwards;
}
.landing-intro-line::before {
  content:"";
  position:absolute;
  top:50%;
  left:58%;
  width:min(46vw,620px);
  height:clamp(2px,.18vw,3px);
  border-radius:999px;
  background:linear-gradient(90deg,rgba(91,95,233,.42),rgba(91,95,233,.1),transparent);
  opacity:0;
  transform:translate3d(34vw,-8vh,0) rotate(-7deg) scaleX(.25);
  transform-origin:left center;
}
.intro-playing .intro-line-one::before { animation:intro-speed-line .96s linear .28s both; }
.intro-playing .intro-line-two::before { animation:intro-speed-line .98s linear 1.58s both; }
.intro-playing .intro-line-three::before { animation:intro-speed-line 1.08s linear 2.88s both; }
.landing-intro-line::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:.02em;
  width:min(620px,80vw);
  height:clamp(2px,.25vw,4px);
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--brand),#a7aaff,var(--brand),transparent);
  opacity:0;
  transform:translateX(-50%) scaleX(.08);
  transform-origin:center;
}
.intro-playing .intro-line-three::after { animation:intro-ink-flash .78s cubic-bezier(.22,1,.36,1) 3.86s both; }
.landing-intro-copy::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(780px,82vw);
  aspect-ratio:1;
  border:1px solid rgba(91,95,233,.16);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.55);
}
.intro-playing .landing-intro-copy::after { animation:intro-ripple .9s cubic-bezier(.16,1,.3,1) 3.82s both; }
.landing-intro-skip {
  position:absolute;
  right:clamp(18px,3vw,42px);
  bottom:clamp(18px,3vw,36px);
  border:0;
  border-radius:999px;
  padding:9px 13px;
  background:transparent;
  color:#8a93a6;
  font-size:.78rem;
  font-weight:700;
  text-underline-offset:4px;
}
.landing-intro-skip:hover,
.landing-intro-skip:focus-visible { color:var(--brand-dark); background:var(--brand-tint); outline:none; }
.landing-shell {
  width:min(1480px,100%);
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  padding:22px clamp(18px,4vw,58px) 24px;
  display:flex;
  flex-direction:column;
}
.landing-intro-enabled .landing-shell {
  opacity:1;
  transform:none;
  transition:opacity .85s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1), filter .9s ease;
}
.landing-intro-enabled .intro-playing .landing-shell {
  opacity:0;
  filter:blur(12px);
  transform:translate3d(0,20px,0) scale(.985);
}
.landing-nav { margin-bottom:clamp(28px,5vh,66px); }
.landing-hero {
  display:grid;
  grid-template-columns:minmax(360px,.84fr) minmax(520px,1.16fr);
  gap:clamp(44px,6vw,96px);
  align-items:center;
  flex:1;
}
.landing-copy { position:relative; z-index:2; padding:18px 0 34px; }
.landing-copy h1 {
  max-width:660px;
  margin:12px 0 24px;
  font-size:clamp(2.55rem,3.55vw,3.75rem);
  line-height:1.2;
  letter-spacing:-.045em;
  font-weight:800;
  word-break:keep-all;
}
.landing-lead {
  max-width:620px;
  margin:0;
  color:var(--muted);
  font-size:clamp(1rem,1.25vw,1.16rem);
  line-height:1.8;
  word-break:keep-all;
}
.landing-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.landing-actions .button { min-height:52px; padding:13px 21px; border-radius:14px; font-size:.96rem; }
.landing-primary { box-shadow:0 12px 26px rgba(65,65,170,.22); }
.landing-secondary { box-shadow:inset 0 0 0 1px var(--brand-tint-strong); }
.landing-note { margin:18px 0 0; color:#7a8498; font-size:.82rem; line-height:1.6; }
.landing-visual {
  position:relative;
  isolation:isolate;
  min-height:clamp(420px,57vh,680px);
  overflow:hidden;
  border:1px solid rgba(91,91,214,.17);
  border-radius:32px;
  background:
    radial-gradient(circle at 22% 18%,rgba(255,255,255,.28),transparent 24%),
    linear-gradient(145deg,#26275f 0%,#5657c4 50%,#7778e7 100%);
  box-shadow:0 30px 80px rgba(34,36,100,.22);
}
.landing-visual::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,transparent 38%,rgba(18,19,58,.46) 100%);
}
.landing-visual-grid {
  position:absolute;
  inset:-10%;
  z-index:-2;
  opacity:.25;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:54px 54px;
  transform:perspective(520px) rotateX(58deg) translateY(26%);
  transform-origin:center bottom;
}
.landing-orbit {
  position:absolute;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
}
.landing-orbit::after {
  content:"";
  position:absolute;
  top:50%;
  left:-7px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 18px rgba(255,255,255,.75);
}
.landing-orbit-one { width:310px; height:310px; top:10%; right:8%; animation:landing-spin 19s linear infinite; }
.landing-orbit-two { width:470px; height:470px; right:-17%; bottom:-29%; animation:landing-spin 27s linear infinite reverse; }
.landing-symbol {
  position:absolute;
  color:rgba(255,255,255,.78);
  text-shadow:0 8px 24px rgba(19,20,68,.24);
  animation:landing-float 7s ease-in-out infinite;
}
.landing-symbol mjx-container { margin:0 !important; }
.symbol-one { top:17%; left:12%; font-size:clamp(2.1rem,4vw,4.3rem); }
.symbol-two { top:12%; right:20%; font-size:clamp(1.6rem,3vw,3rem); animation-delay:-2s; }
.symbol-three { top:48%; left:22%; font-size:clamp(2rem,3.6vw,3.8rem); animation-delay:-4s; }
.symbol-four { top:39%; right:8%; font-size:clamp(1.15rem,2.1vw,2.1rem); animation-delay:-1.5s; }
.landing-visual-label {
  position:absolute;
  left:clamp(24px,4vw,52px);
  right:clamp(24px,4vw,52px);
  bottom:clamp(28px,5vw,56px);
  display:grid;
  gap:7px;
  color:#fff;
}
.landing-visual-label span { font-size:.8rem; font-weight:700; letter-spacing:.08em; opacity:.76; }
.landing-visual-label strong { max-width:620px; font-size:clamp(1.55rem,2.5vw,2.55rem); line-height:1.25; letter-spacing:-.035em; }
.landing-footer { margin-top:clamp(36px,6vh,70px); }
@keyframes landing-spin { to { transform:rotate(360deg); } }
@keyframes landing-float {
  0%,100% { transform:translate3d(0,0,0) rotate(-2deg); }
  50% { transform:translate3d(0,-18px,0) rotate(3deg); }
}
@keyframes intro-brake-in {
  0% {
    opacity:0;
    filter:blur(20px);
    letter-spacing:-.015em;
    transform:translate3d(62vw,-18vh,0) rotate(-7deg) skewX(-14deg) scale(.94);
    text-shadow:42px 18px 0 rgba(91,95,233,.08),78px 32px 0 rgba(91,95,233,.04);
  }
  42% { opacity:1; filter:blur(7px); }
  67% {
    opacity:1;
    filter:blur(0);
    letter-spacing:-.075em;
    transform:translate3d(-28px,5px,0) rotate(.7deg) skewX(5deg) scale(1.025,.94);
    text-shadow:16px 2px 0 rgba(91,95,233,.12),32px 4px 0 rgba(91,95,233,.05);
  }
  79% {
    letter-spacing:-.048em;
    transform:translate3d(11px,-2px,0) rotate(-.25deg) skewX(-2deg) scale(.992,1.012);
    text-shadow:none;
  }
  89% { transform:translate3d(-4px,1px,0) skewX(.7deg) scale(1.004,.996); }
  100% {
    opacity:1;
    filter:blur(0);
    letter-spacing:-.055em;
    transform:translate3d(0,0,0) rotate(0) skewX(0) scale(1);
    text-shadow:none;
  }
}
@keyframes intro-brake-in-final {
  0% {
    opacity:0;
    filter:blur(22px);
    letter-spacing:-.01em;
    transform:translate3d(68vw,-20vh,0) rotate(-8deg) skewX(-16deg) scale(.92);
    text-shadow:48px 20px 0 rgba(91,95,233,.12),88px 36px 0 rgba(91,95,233,.05);
  }
  40% { opacity:1; filter:blur(8px); }
  66% {
    opacity:1;
    filter:blur(0);
    letter-spacing:-.085em;
    transform:translate3d(-34px,6px,0) rotate(.8deg) skewX(6deg) scale(1.035,.92);
    text-shadow:18px 2px 0 rgba(91,95,233,.15),36px 4px 0 rgba(91,95,233,.06);
  }
  78% {
    letter-spacing:-.046em;
    transform:translate3d(14px,-3px,0) rotate(-.3deg) skewX(-2.5deg) scale(.988,1.018);
    text-shadow:none;
  }
  89% { transform:translate3d(-5px,1px,0) skewX(.8deg) scale(1.005,.995); }
  100% {
    opacity:1;
    filter:blur(0);
    letter-spacing:-.055em;
    transform:translate3d(0,0,0) rotate(0) skewX(0) scale(1);
    text-shadow:none;
  }
}
@keyframes intro-speed-line {
  0%,22% { opacity:0; transform:translate3d(34vw,-8vh,0) rotate(-7deg) scaleX(.25); }
  43% { opacity:.55; }
  66% { opacity:.7; transform:translate3d(2vw,0,0) rotate(0) scaleX(1); }
  82% { opacity:0; transform:translate3d(-3vw,0,0) rotate(0) scaleX(.18); }
  100% { opacity:0; }
}
@keyframes intro-ink-flash {
  0% { opacity:0; transform:translateX(-50%) scaleX(.08); }
  42% { opacity:.78; }
  100% { opacity:0; transform:translateX(-50%) scaleX(1); }
}
@keyframes intro-ripple {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.55); }
  26% { opacity:.48; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.18); }
}
@media (prefers-reduced-motion:reduce) {
  .landing-orbit, .landing-symbol { animation:none; }
  .landing-intro-enabled .landing-intro { display:none; }
  .landing-intro-enabled .intro-playing .landing-shell { opacity:1; filter:none; transform:none; }
}
@media (max-width: 760px) {
  .shell { padding-top: 14px; }
  .topnav { align-items:flex-start; margin-bottom:12px; }
  .catalog-intro { padding-top:8px; }
  html[lang="ko"] .brand[data-i18n="common.brand"] { width:110px; flex:0 0 110px; gap:6px; line-height:1.22; white-space:normal; word-break:keep-all; }
  .brand::before { flex-basis:24px; width:24px; height:24px; border-radius:7px; }
  .join-grid { grid-template-columns: 1fr; }
  .game-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .grade-select { max-width:100%; min-width:190px; font-size:1rem; }
  .nav-actions { flex-direction:column; flex-wrap:nowrap; align-items:flex-end; justify-content:flex-start; }
  .student-shell .nav-actions { display:grid; grid-template-columns:auto 38px; grid-template-rows:auto auto; align-items:center; justify-items:end; }
  .student-shell .locale-select { grid-column:1; grid-row:1; }
  .student-shell .student-fullscreen-button { grid-column:2; grid-row:1; }
  .student-shell .participant-control { grid-column:1 / -1; grid-row:2; justify-self:end; }
  .participant-chip.visible { padding:7px 28px 7px 10px; }
  .participant-chip::before { display:none; }
  .participant-control { flex-direction:row; align-items:flex-start; }
  .catalog-table { min-width: 960px; }
  .content-system-table { min-width:780px; }
  .content-system-table thead th:first-child,
  .content-system-table tbody th { position:sticky; left:0; z-index:2; width:124px; }
  .content-system-table thead th:first-child { z-index:3; }
  .content-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .content-resource-item:not([data-order-kind]) .content-resource-link { font-size:.9rem; line-height:1.45; white-space:normal; }
  .content-resource-editor-help { align-items:flex-start; flex-direction:column; }
  .student-entry { padding-top:8px; }
  .special-content-panel { padding:13px; }
  .special-content-heading { display:block; }
  .special-content-heading p { margin-top:3px; }
  .special-content-grid,
  .student-special-content .special-content-grid { grid-template-columns:1fr; }
  .student-special-content { width:100%;margin-top:6px; }
  .landing-shell { padding-top:14px; }
  .landing-intro-copy { gap:8px; }
  .landing-intro-line { font-size:clamp(2rem,10.8vw,3.55rem); line-height:1.16; }
  .landing-intro-line.intro-line-three { font-size:clamp(1.55rem,7.8vw,3.1rem); white-space:nowrap; }
  .landing-intro-line::after { width:min(340px,82vw); }
  .landing-nav { align-items:center; margin-bottom:22px; }
  .landing-nav .brand { width:auto !important; flex:0 1 auto !important; white-space:nowrap !important; }
  .landing-hero { grid-template-columns:1fr; gap:28px; }
  .landing-copy { padding:8px 0 0; }
  .landing-copy h1 {
    margin-bottom:20px;
    font-size:clamp(2.2rem,10.6vw,3rem);
    line-height:1.18;
    letter-spacing:-.04em;
  }
  .landing-lead { font-size:.96rem; }
  .landing-actions { display:grid; grid-template-columns:1fr; }
  .landing-actions .button { width:100%; }
  .landing-visual { min-height:360px; border-radius:24px; }
  .landing-orbit-one { right:-25%; }
  .landing-orbit-two { right:-62%; }
  .landing-footer { margin-top:42px; }
}

@media (max-width: 1100px) {
  .catalog-intro { grid-template-columns: 1fr; gap: 20px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .content-resource-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .landing-hero { grid-template-columns:1fr; }
  .landing-copy { max-width:820px; }
  .landing-visual { min-height:500px; }
}

@media (min-width: 1101px) and (max-width: 1500px) {
  .content-resource-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (min-width: 761px) and (max-width: 900px) {
  .content-resource-item:not([data-order-kind]) .content-resource-link { font-size:.9rem; line-height:1.45; white-space:normal; }
}