:root {
  color-scheme: dark;
  --page: #2e2d29;
  --rail: #252421;
  --text: #f7f7f6;
  --muted: #cfceca;
  --lime: #80b64a;
  --light-square: #e8ebcf;
  --dark-square: #779456;
  --sidebar: 168px;
  font-family: Arial, "Noto Sans KR", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 270px; background: var(--page); color: var(--text); }
button { font: inherit; }
button:disabled { opacity: 1; cursor: default; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #8cca52; outline-offset: 4px; }
.skip { position: fixed; z-index: 3; left: 8px; top: 8px; padding: 12px; background: var(--rail); transform: translateY(-150%); }
.skip:focus { transform: none; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 2; width: var(--sidebar); display: flex; flex-direction: column; padding: 12px 8px 11px; background: var(--rail); overflow-y: auto; }
.brand { display: flex; align-items: center; padding: 3px 7px 7px; margin-bottom: 3px; width: max-content; font-size: 24px; font-weight: 900; letter-spacing: -1.5px; white-space: nowrap; }
.brand img { width: 22px; height: 34px; margin-right: -1px; }
.brand b { font-size: .75em; font-weight: 750; letter-spacing: -.75px; }
.menu { display: grid; gap: 1px; }
.menu button, .menu a, .aux { height: 39px; padding: 0 7px; display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: transparent; color: #e6e5e3; font-size: 16px; font-weight: 700; white-space: nowrap; }
.icon { width: 24px; text-align: center; display: grid; place-items: center; font-size: 21px; line-height: 1; }
.icon svg { width: 24px; height: 24px; }
.menu a:first-child .icon { font-size: 27px; color: #f1d5a6; text-shadow: 0 2px #9e7046; }
.icon.more { color: #aaa8a2; font-size: 18px; letter-spacing: 1px; }
.sidebar-bottom { display: grid; margin-top: auto; gap: 12px; padding-top: 22px; }
.aux { color: #a9a8a4; font-size: 14px; height: 30px; }
.aux svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.3; }
.aux span { width: 18px; font-size: 19px; text-align: center; }
.aux.support { margin-top: 5px; }
.btn { border: 0; border-radius: 10px; color: #deddd9; background: linear-gradient(#484742, #3b3a36); box-shadow: inset 0 1px #ffffff0a, 0 3px 4px #0004; min-height: 48px; font-weight: 750; }
.btn.green { color: #fff; background: linear-gradient(#83b84b, #639c4e); box-shadow: inset 0 1px #ffffff26, 0 3px 5px #0005; }
.btn.small { font-size: 14px; min-height: 39px; border-radius: 5px; }
.page { width: min(880px, calc(100% - var(--sidebar) - 64px)); margin-inline: auto; position: relative; left: calc(var(--sidebar) / 2); padding-top: 16px; }
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.hero-graphic { position: relative; width: min(100%, 420px); margin-left: 8px; }
.board { display: grid; grid-template: repeat(8, minmax(0, 1fr)) / repeat(8, minmax(0, 1fr)); aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--dark-square); }
.square { display: grid; place-items: center; min-width: 0; min-height: 0; background: var(--light-square); }
.square.dark { background: var(--dark-square); }
.square.highlight { background: #c3d788; }
.chess-piece { display: block; width: 89%; height: 89%; overflow: visible; }
.brilliant { position: absolute; top: 33%; left: 56%; display: grid; place-items: center; width: 11%; aspect-ratio: 1; border-radius: 50%; background: #1eb69f; color: white; font-size: clamp(19px, 2.85vw, 40px); font-weight: 900; letter-spacing: -.08em; padding-right: .06em; line-height: 1; }
.hero-copy { text-align: center; padding: 0 18px 0 20px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { letter-spacing: -.045em; overflow-wrap: anywhere; }
h1 { font-size: 43px; font-weight: 900; line-height: 1.13; }
.hero p, .feature p { font-size: 18px; line-height: 1.5; color: var(--muted); font-weight: 650; }
.hero p { margin: 18px auto 39px; }
.hero-button { font-size: 23px; min-height: 62px; width: 100%; }
.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 448px; }
.hero + .feature { margin-top: 42px; }
.feature h2, .news h2, .closing h2 { font-size: 36px; font-weight: 850; line-height: 1.15; }
.feature p { margin: 17px 0 40px; max-width: 315px; }
.feature-copy { padding-right: 18px; }
.feature-button { width: min(100%, 296px); font-size: 18px; }
.feature-button span { margin-right: 8px; }
.flipped .feature-copy { grid-column: 2; grid-row: 1; padding-left: 9px; }
.flipped .art { grid-column: 1; grid-row: 1; }
.art { position: relative; width: min(100%, 420px); aspect-ratio: 1.05; justify-self: center; container-type: inline-size; }
.lesson-tile { --tile: #258579; position: absolute; width: 24%; aspect-ratio: 1; display: grid; place-items: center; transform: rotate(45deg) skew(-7deg, -7deg); border-radius: 15%; background: var(--tile); box-shadow: 4px 5px #145f58; }
.lesson-tile span { transform: skew(7deg, 7deg) rotate(-45deg); color: #dcfff0; font-size: 10cqw; line-height: 1; }
.t1 { top: 19%; left: 37%; --tile: #69ffd2; box-shadow: 4px 5px #219983, 0 0 32px #20ccaf80; }
.t2 { top: 37%; left: 58%; --tile: #249782; }
.t3 { top: 54%; left: 37%; opacity: .58; }
.t4 { top: 71%; left: 16%; opacity: .37; }
.lesson-medal { position: absolute; top: 5%; left: 17%; width: 23%; aspect-ratio: 1.12; border-radius: 50%; display: grid; place-items: center; background: #1aaf9e; box-shadow: 0 5px #137e76; font-size: 14cqw; }
.lesson-piece { position: absolute; width: 18%; height: 25%; display: grid; place-items: center; filter: drop-shadow(2px 5px 2px #0004); }
.lesson-piece .chess-piece { height: 100%; width: 100%; }
.l1 { top: 0; left: 62%; }.l2 { top: 36%; left: 19%; }.l3 { top: 72%; left: 62%; }
.bots { display: grid; place-items: center; }
.bot-grid { display: grid; width: 66%; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: center; }
.bot-column { display: grid; gap: 6px; }
.avatar { aspect-ratio: 1; border-radius: 10%; overflow: hidden; position: relative; background: linear-gradient(#413f3a, #353430); }
.avatar svg { display: block; width: 100%; height: 100%; }
.avatar.champion { outline: 3px solid #91c651; box-shadow: 0 0 20px #9dd25760; }
.avatar.champion::after { content: "♛♛♛"; position: absolute; bottom: -4%; left: 0; width: 100%; text-align: center; color: #ffd740; font: bold 5.5cqw/1 Arial; }
.puzzle-game { position: absolute; top: 8%; left: 22%; width: 61%; }
.puzzle-game .board, .broadcast .board { border-radius: 3px; }
.puzzle-score { font-size: 4.5cqw; font-weight: 900; }
.puzzle-score small { color: #ffdc63; }
.puzzle-meter { height: 8px; border-radius: 10px; margin: 4px 0 14px; background: #494843; }
.puzzle-meter::before { content: ""; display: block; width: 34%; height: 100%; border-radius: inherit; background: #f4cb43; }
.step { display: grid; place-items: center; position: absolute; width: 13%; aspect-ratio: 1; border: 5px solid #a16b3d; box-shadow: 4px 5px #6f4427; border-radius: 24%; transform: rotate(45deg); background: repeating-radial-gradient(ellipse, #eeb96b 0 5px, #d79c56 6px 7px); }
.step span, .step div { transform: rotate(-45deg); color: #553016; font-weight: 900; font-size: 5cqw; }
.step div { width: 120%; margin-top: -25%; margin-left: -25%; }
.step-one { top: 62%; left: 7%; }.step-two { top: 72%; left: 18%; }.step-three { top: 82%; left: 29%; }
.puzzle-house { position: absolute; top: 60%; right: 3%; font-size: 22cqw; transform: rotate(-10deg); }
.watch, .event { display: grid; place-items: center; }
.broadcast { width: 83%; border: 6px solid #121b26; border-radius: 12px; overflow: hidden; background: #171e2b; box-shadow: 0 8px 18px #0008; }
.broadcast-top, .broadcast-bottom { padding: 6px; display: flex; align-items: center; gap: 7px; color: #cbd6e3; font-size: 2cqw; font-weight: 800; }
.broadcast-top span { color: #ff746c; }
.broadcast-body { display: grid; align-items: center; gap: 4px; grid-template-columns: 1fr 1.65fr 1fr; }
.watch-side { display: grid; text-align: center; gap: 5px; font-size: 2cqw; padding-inline: 4px; }
.watch-side span { color: #c3d4e8; }
.broadcast-bottom i { background: linear-gradient(to right, #e95759 60%, #3d4c5e 60%); height: 3px; flex: 1; }
.event-poster { width: 88%; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; padding: 6%; background: radial-gradient(circle at 75% 35%, #465948, #121a15 62%); box-shadow: 0 5px 10px #0004; }
.event-poster > span { color: #a7bd9b; font-size: 2.6cqw; font-weight: 900; letter-spacing: .12em; }
.event-poster strong { position: relative; line-height: .96; font-size: 8.5cqw; z-index: 1; margin-bottom: 13%; }
.event-pieces { position: absolute; inset: 15% -5% 11% 21%; display: flex; align-items: start; }
.event-pieces div { width: 56%; margin-right: -16%; transform: rotate(-12deg); }.event-pieces div + div { transform: rotate(14deg) translateY(9%); }
.event-stripe { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, 1fr); height: 12%; }
.event-stripe i:nth-child(odd) { background: #8fbc62; }.event-stripe i:nth-child(even) { background: #c9d7ae; }.event-stripe i:last-child { background: #405840; }
.news { padding: 32px 0 65px; }
.news h2 { text-align: center; margin-bottom: 24px; }
.news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.news article { background: #383733; border-radius: 9px; overflow: hidden; }
.news article > div + div { padding: 16px; }
.news small { color: #c4c3bd; }.news h3 { margin-top: 5px; font-size: 18px; }
.news-art { display: grid; place-items: center; aspect-ratio: 2.1; background: #4d623c; }.news-art .chess-piece { width: 38%; height: auto; }
.news-art.teal { background: #39756a; }.news-art.gold { background: #805e3f; }
.closing { display: grid; justify-items: center; gap: 25px; padding: 20px 0 55px; text-align: center; }.closing img { width: 50px; }
footer { text-align: center; color: #acaaa3; font-size: 13px; padding: 14px 0 28px; } footer span { margin: 0 7px; }
@media (max-width: 1130px) {
  .hero-graphic { margin-left: 0; }
  .hero-copy { padding: 0 0 0 25px; }
  h1 { font-size: clamp(27px, 3.6vw, 43px); }
  .hero p { margin-bottom: 24px; }
  .feature { min-height: clamp(300px, 38vw, 448px); }
  .feature h2, .news h2, .closing h2 { font-size: clamp(25px, 3.2vw, 36px); }
}
@media (max-width: 830px) {
  :root { --sidebar: 64px; }
  .sidebar { padding: 12px 6px; }
  .brand { padding-inline: 12px; }
  .brand span { display: none; }
  .menu button, .menu a, .aux { width: 52px; overflow: hidden; gap: 15px; padding-left: 14px; }
  .icon, .aux svg, .aux span { flex: 0 0 24px; }
  .btn.small { font-size: 11px; }
  .page { width: calc(100% - var(--sidebar) - 40px); }
  .feature p, .hero p { font-size: 16px; }
  .hero-button { min-height: 51px; font-size: 19px; }
}
@media (max-width: 600px) {
  :root { --sidebar: 0px; }
  .sidebar { position: sticky; top: 0; width: 100%; min-height: 53px; padding: 5px 12px; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; overflow: hidden; }
  .brand { margin: 0; padding: 0; font-size: 20px; }.brand span { display: inline; }.brand img { width: 19px; height: 28px; }
  .menu { display: none; }
  .sidebar-bottom { display: flex; align-items: center; margin: 0; padding: 0; gap: 6px; }.sidebar-bottom .aux { display: none; }
  .btn.small { min-height: 32px; padding: 0 10px; }
  .page { width: min(calc(100% - 32px), 440px); padding-top: 24px; }
  .hero, .feature { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { padding: 0; grid-row: 1; }
  h1 { font-size: clamp(29px, 8vw, 40px); }
  .hero p { margin: 12px 0 20px; }
  .hero-button { width: min(100%, 320px); margin: 0 auto 24px; }
  .hero-graphic { width: min(100%, 365px); margin: 0 auto; }
  .brilliant { font-size: clamp(23px, 8vw, 34px); }
  .feature { margin-top: 44px; min-height: 0; gap: 18px; }
  .feature-copy, .flipped .feature-copy { padding: 0; grid-column: 1; grid-row: 1; }
  .flipped .art { grid-column: 1; grid-row: 2; }
  .feature p { margin: 12px auto 20px; }
  .art { width: min(100%, 330px); }
  .news-list { grid-template-columns: 1fr; }
  .news article { display: grid; grid-template-columns: 95px 1fr; align-items: center; }
  .news-art { aspect-ratio: 1; }.news-art .chess-piece { width: 59%; }
}
.hero .chess-piece { width: 97%; height: 97%; }
.feature h2, .news h2, .closing h2 { letter-spacing: -.025em; }
.puzzle-icon { filter: hue-rotate(286deg) saturate(1.25); }
.button-icon { display: inline-flex; width: 23px; vertical-align: middle; }
.lesson-medal svg { width: 71%; }
.mobile-promo { display: flex; justify-content: center; align-items: center; gap: 42px; padding: 34px 22px; margin-bottom: 46px; background: #373631; border-radius: 12px; }
.mobile-promo h2 { font-size: clamp(22px, 3.3vw, 32px); }
.mobile-promo p { color: var(--muted); margin: 10px 0 18px; }
.phone { width: 114px; flex: 0 0 auto; padding: 10px 6px 16px; border: 4px solid #67655e; border-radius: 15px; background: #23221f; text-align: center; transform: rotate(-10deg); }
.phone img { width: 20px; }.phone .board { border-radius: 2px; }
.store { min-height: 36px; font-size: 13px; border-radius: 6px; padding: 0 10px; }
@media (min-width: 831px) { .sidebar-bottom { padding-bottom: 8px; gap: 13px; } }
@media (max-width: 600px) { .mobile-promo { gap: 18px; padding-inline: 12px; }.phone { width: 79px; }.store { margin-bottom: 5px; } }

h1, h2, p { word-break: keep-all; overflow-wrap: anywhere; }

.btn:is(a) { display: inline-flex; align-items: center; justify-content: center; }
a.btn { transition: filter 150ms ease, transform 150ms ease; }
a.btn:hover { filter: brightness(1.12); }
a.btn:active { transform: translateY(2px); }
.menu a { border-radius: 5px; }
.menu a:hover { background: #ffffff13; }
.lesson-piece, .brilliant { animation: arrive 380ms ease-out both; }
.brilliant { animation-delay: 90ms; }
@keyframes arrive { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }
@media (max-width: 600px) {
  .feature { margin-top: 34px; }
  .puzzle-game { width: 65%; left: 18%; }
  .puzzle-house { right: 1%; font-size: 17cqw; top: 68%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.analysis-menu summary{display:flex;align-items:center;gap:12px;padding:12px 14px;font-weight:700;cursor:pointer;list-style:none}.analysis-menu summary:hover{background:#ffffff10}.analysis-menu a{padding-left:48px!important;font-size:14px}.analysis-menu summary .icon{width:24px;height:24px}.analysis-menu svg{width:24px;height:24px}
.admin-badge,.profile-name-row .admin-badge{display:inline-flex;align-items:center;vertical-align:middle;white-space:nowrap;margin-left:6px;padding:2px 6px;border:1px solid #72b6dc;border-radius:4px;background:#254b60;color:#c6edff;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:0}.account-badge.admin-badge{color:#c6edff!important;border-color:#72b6dc;margin-left:0}