/* ───────── 원곡이 키우기 : 수학편 — 파스텔 & 말랑한 태블릿 UI ───────── */
:root {
  --bg: #FFF8EF;
  --bg-dot: #F3E6D3;
  --card: #FFFFFF;
  --line: #F0E6D8;
  --ink: #3B3355;
  --ink-2: #5E5778;
  --muted: #9A93B3;

  --purple: #7C6CF2;  --purple-d: #5F4FD6;  --purple-s: #EEEBFF;
  --mint:   #34C29A;  --mint-d:   #22A07D;  --mint-s:   #DDF7EE;
  --peach:  #FF8A6B;  --peach-d:  #E86A4A;  --peach-s:  #FFE9E1;
  --yellow: #FFC94D;  --yellow-d: #E6A92A;  --yellow-s: #FFF4D6;
  --pink:   #FF7FA8;  --pink-s:   #FFE4EE;
  --sky:    #4BAEF0;  --sky-d:    #2E8FD0;  --sky-s:    #E1F2FD;
  --red:    #F2647A;  --red-s:    #FFE3E7;
  --gray-s: #F4F1EC;

  --r-sm: 12px; --r: 18px; --r-lg: 26px;
  --shadow: 0 2px 0 rgba(59, 51, 85, .04), 0 10px 30px -12px rgba(59, 51, 85, .18);
  --shadow-lift: 0 4px 0 rgba(59, 51, 85, .05), 0 18px 40px -14px rgba(59, 51, 85, .28);
  --font: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-round: 'Cafe24Ssurround', 'Pretendard Variable', 'Apple SD Gothic Neo', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@font-face {
  font-family: 'Cafe24Ssurround'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
  /* 한글·영문·숫자만 이 글꼴로. ①②·수학 기호·화살표는 글꼴에 빈칸으로 들어 있어 Pretendard로 넘긴다 */
  unicode-range: U+0020-007E, U+00A0-00FF, U+1100-11FF, U+3130-318F, U+AC00-D7A3, U+2018-201F, U+3000-303F, U+FF01-FF5E;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(var(--bg-dot) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  overscroll-behavior-y: none;
}
h1, h2, h3, h4, .round { font-family: var(--font-round); font-weight: 400; letter-spacing: -.02em; margin: 0; }
h1 { font-size: 34px; } h2 { font-size: 26px; } h3 { font-size: 21px; } h4 { font-size: 18px; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.hidden { display: none !important; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.nowrap { flex-wrap: nowrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }

/* ───────── 레이아웃 ───────── */
.page { max-width: 1180px; margin: 0 auto; padding: 18px 20px calc(40px + var(--safe-b)); }
.topbar {
  position: sticky; top: 0; z-index: 30;
  padding: calc(10px + var(--safe-t)) 20px 10px;
  background: rgba(255, 248, 239, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--line);
}
.topbar-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-round); font-size: 22px; }
.brand svg { width: 42px; height: 42px; }
.brand svg { flex: none; }
.brand span { word-break: keep-all; line-height: 1.15; } /* 좁으면 '원곡이 / 키우기' 두 줄 */
.brand-sub { font-size: .62em; color: var(--muted); font-family: var(--font); font-weight: 700; margin-left: 2px; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-round); font-size: 20px; color: #fff; background: var(--purple);
  box-shadow: 0 3px 0 var(--purple-d);
}
.hello { line-height: 1.25; }
.hello b { font-family: var(--font-round); font-weight: 400; font-size: 19px; }

/* ───────── 버튼 ───────── */
.btn {
  --c: var(--purple); --cd: var(--purple-d); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px; border: 0; border-radius: var(--r);
  background: var(--c); color: var(--fg); box-shadow: 0 4px 0 var(--cd);
  font-family: var(--font-round); font-size: 18px; cursor: pointer; user-select: none;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cd); }
.btn:disabled { filter: grayscale(.6) opacity(.55); cursor: not-allowed; transform: none; }
.btn.mint { --c: var(--mint); --cd: var(--mint-d); }
.btn.peach { --c: var(--peach); --cd: var(--peach-d); }
.btn.sky { --c: var(--sky); --cd: var(--sky-d); }
.btn.yellow { --c: var(--yellow); --cd: var(--yellow-d); --fg: var(--ink); }
.btn.red { --c: var(--red); --cd: #C9475B; }
.btn.ghost { --c: #fff; --cd: var(--line); --fg: var(--ink-2); border: 2px solid var(--line); }
.btn.soft { --c: var(--purple-s); --cd: #DAD3FF; --fg: var(--purple-d); }
.btn.sm { min-height: 38px; padding: 6px 14px; font-size: 15px; border-radius: 13px; box-shadow: 0 3px 0 var(--cd); }
.btn.lg { min-height: 60px; padding: 14px 30px; font-size: 21px; border-radius: 22px; }
.btn.block { width: 100%; }
.btn.icon { width: 48px; padding: 0; }
.btn.sm.icon { width: 38px; }

/* ───────── 카드 / 배지 ───────── */
.card {
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 22px;
}
.card.tight { padding: 14px 16px; }
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 99px;
  font-size: 13.5px; font-weight: 700; background: var(--gray-s); color: var(--ink-2); white-space: nowrap;
}
.badge.purple { background: var(--purple-s); color: var(--purple-d); }
.badge.mint { background: var(--mint-s); color: var(--mint-d); }
.badge.peach { background: var(--peach-s); color: var(--peach-d); }
.badge.yellow { background: var(--yellow-s); color: #A27310; }
.badge.sky { background: var(--sky-s); color: var(--sky-d); }
.badge.red { background: var(--red-s); color: #C9475B; }
.badge.lock { background: var(--ink); color: #fff; }

/* ───────── 탭 / 칩 ───────── */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; min-height: 46px; padding: 8px 18px; border-radius: 99px; border: 2px solid var(--line);
  background: #fff; font-family: var(--font-round); font-size: 17px; color: var(--ink-2); cursor: pointer;
  transition: all .15s;
}
.tab.on { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 4px 12px -4px rgba(59, 51, 85, .5); }
.tab .cnt { margin-left: 6px; font-size: 13px; opacity: .7; }
/* 개수가 많아도 다 보이게 여러 줄로 감싸는 탭 (제출 현황 문제 고르기) */
.tabs.wrap { flex-wrap: wrap; overflow: visible; }
.tabs.wrap .tab { flex: 0 1 auto; max-width: 100%; text-align: left; overflow-wrap: anywhere; }

/* ───────── 📖 왼쪽 목차 (전자책 느낌) ───────── */
.topbar:has(.nav-toggle) .topbar-in { max-width: none; }
.nav-toggle {
  flex: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px;
  border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--ink-2); transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.shell { --nav-w: 250px; --top-h: calc(66px + var(--safe-t)); transition: padding-left .28s ease; }
.sidenav {
  position: fixed; z-index: 28; left: 0; top: var(--top-h); bottom: 0; width: var(--nav-w);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 0 calc(20px + var(--safe-b)) 14px;
  /* 책등(왼쪽 띠) + 종이 */
  background:
    linear-gradient(90deg, var(--purple) 0 6px, rgba(59, 51, 85, .12) 6px 7px, transparent 7px),
    linear-gradient(90deg, transparent calc(100% - 14px), rgba(59, 51, 85, .05)),
    #FFFDF8;
  border-right: 2px solid var(--line);
  box-shadow: 6px 0 24px -16px rgba(59, 51, 85, .35);
  transform: translateX(-102%); transition: transform .28s ease;
}
.shell.nav-open .sidenav { transform: none; }
.sn-head { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 10px 14px; margin-bottom: 8px; border-bottom: 2px dashed var(--line); }
.sn-title { font-family: var(--font-round); font-size: 20px; letter-spacing: .12em; color: var(--ink-2); }
.sn-close {
  width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--gray-s); color: var(--ink-2);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.sn-list { display: flex; flex-direction: column; gap: 4px; padding-right: 0; }
.sn-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px;
  padding: 8px 14px 8px 12px; border: 0; border-radius: 14px 0 0 14px; background: transparent;
  font-family: var(--font-round); font-size: 17px; color: var(--ink-2); text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.sn-item:hover { background: var(--gray-s); }
.sn-no { width: 24px; font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.sn-ic { width: 26px; text-align: center; font-size: 19px; }
.sn-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 현재 장: 종이에서 삐져나온 책갈피 */
.sn-item.on { background: var(--purple-s); color: var(--purple-d); }
.sn-item.on .sn-no { color: var(--purple); }
.sn-group .sn-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 34px; padding-left: 10px; border-left: 2px dashed var(--line); }
.sn-child { min-height: 42px; font-size: 16px; }
.sn-group:not(.open) > .sn-sub { display: none; }
.sn-caret { font-size: 13px; color: var(--muted); transition: transform .2s; }
.sn-group.open > .sn-parent .sn-caret { transform: rotate(90deg); }
.sn-group.here > .sn-parent { color: var(--purple-d); }
.sn-item.on::after {
  content: ''; position: absolute; right: 0; top: 6px; bottom: 6px; width: 8px;
  border-radius: 4px 0 0 4px; background: var(--purple);
}
.sn-backdrop { display: none; }

@media (min-width: 901px) {
  .shell.nav-open { padding-left: var(--nav-w); }
}
@media (max-width: 900px) {
  .sidenav { z-index: 40; top: 0; padding-top: calc(18px + var(--safe-t)); width: min(var(--nav-w), 82vw); }
  .shell.nav-open .sn-backdrop {
    display: block; position: fixed; inset: 0; z-index: 39; background: rgba(59, 51, 85, .28);
    animation: fadeIn .2s ease;
  }
}
@keyframes fadeIn { from { opacity: 0; } }

.seg { display: inline-flex; padding: 5px; background: var(--gray-s); border-radius: 18px; gap: 4px; }
.seg button {
  border: 0; background: transparent; padding: 10px 22px; border-radius: 14px; cursor: pointer;
  font-family: var(--font-round); font-size: 17px; color: var(--muted); transition: all .15s;
}
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 3px 10px -3px rgba(59, 51, 85, .25); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; min-width: 64px; padding: 8px 16px; border-radius: 15px; border: 2px solid var(--line);
  background: #fff; cursor: pointer; font-family: var(--font-round); font-size: 17px; color: var(--ink-2);
  transition: all .12s;
}
.chip.on { border-color: var(--purple); background: var(--purple-s); color: var(--purple-d); }

/* ───────── 입력 ───────── */
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-2); font-weight: 700; }
.input, select.input, textarea.input {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 16px; border: 2px solid var(--line);
  background: #FFFDF9; font-size: 18px; font-weight: 400; color: var(--ink); outline: none; transition: border .15s, box-shadow .15s;
}
textarea.input { min-height: 110px; resize: vertical; line-height: 1.5; }
.input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px var(--purple-s); background: #fff; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: #FFFDF9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239A93B3' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; color: var(--ink-2); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .knob { width: 52px; height: 30px; border-radius: 99px; background: #E3DDD3; position: relative; transition: background .2s; flex: none; }
.switch .knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.15); transition: transform .2s; }
.switch input:checked + .knob { background: var(--mint); }
.switch input:checked + .knob::after { transform: translateX(22px); }

/* ───────── 로그인 ───────── */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 100px 18px 30px; position: relative; overflow: hidden; }
.login-card { width: min(480px, 100%); position: relative; z-index: 2; text-align: center; padding: 30px 28px 28px; }
.login-card .mascot { margin: -86px auto 0; display: block; filter: drop-shadow(0 10px 14px rgba(124, 108, 242, .25)); }
.login-card h1 { margin-top: 6px; }
.login-card form { text-align: left; margin-top: 22px; }
.floaters span {
  position: absolute; font-family: var(--font-round); opacity: .55; user-select: none; pointer-events: none;
  animation: floaty 7s ease-in-out infinite;
}
.demo-note { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--yellow-s); font-size: 14px; color: #8A6410; text-align: left; }

/* ───────── 마스코트 ───────── */
.mascot { animation: bob 3.2s ease-in-out infinite; }
.mascot.still { animation: none; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(12deg); } }
.speech {
  position: relative; display: inline-block; background: #fff; border: 2px solid var(--line); border-radius: 18px;
  padding: 10px 16px; font-family: var(--font-round); font-size: 17px; box-shadow: var(--shadow);
}

/* ───────── 학생 홈 ───────── */
.hero {
  display: flex; align-items: center; gap: 22px; padding: 22px 26px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #8F80FF 0%, #B49CFF 55%, #FFB4C8 100%); color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 16px 40px -18px rgba(124, 108, 242, .8);
}
.hero::after { content: '∑  π  √  ∞  △'; position: absolute; right: 18px; bottom: -6px; font-family: var(--font-round); font-size: 46px; opacity: .14; letter-spacing: 8px; white-space: nowrap; }
.hero h2 { font-size: 27px; }
.hero .bar { background: rgba(255,255,255,.3); }
.hero .bar > i { background: #fff; }
.bar { height: 14px; border-radius: 99px; background: var(--gray-s); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--mint)); transition: width .6s cubic-bezier(.3,1.4,.5,1); }

.section-title { display: flex; align-items: center; gap: 10px; margin: 28px 4px 14px; }
.section-title h3 { font-size: 22px; }

.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.unit-card {
  --c: var(--purple); --s: var(--purple-s);
  text-align: left; border: 2px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: 18px 18px 16px;
  cursor: pointer; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; position: relative; overflow: hidden;
}
.unit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.unit-card:active { transform: scale(.98); }
.unit-card .ico { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--s); color: var(--c); font-family: var(--font-round); font-size: 26px; margin-bottom: 12px; }
.unit-card h4 { margin-bottom: 10px; line-height: 1.3; }
.unit-card .bar > i { background: var(--c); }
.unit-card .done-stamp { position: absolute; right: 14px; top: 14px; font-size: 30px; transform: rotate(12deg); }
.c0 { --c: var(--purple); --s: var(--purple-s); } .c1 { --c: var(--mint); --s: var(--mint-s); }
.c2 { --c: var(--peach); --s: var(--peach-s); } .c3 { --c: var(--sky); --s: var(--sky-s); }
.c4 { --c: #E0A21B; --s: var(--yellow-s); } .c5 { --c: var(--pink); --s: var(--pink-s); }

.prob-list { display: grid; gap: 12px; }
.prob-item {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 22px; border: 2px solid var(--line);
  background: #fff; cursor: pointer; text-align: left; width: 100%; box-shadow: var(--shadow); transition: transform .12s;
}
.prob-item:active { transform: scale(.985); }
.prob-num {
  flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--font-round); font-size: 22px; background: var(--purple-s); color: var(--purple-d);
}
.prob-item.done .prob-num { background: var(--mint-s); color: var(--mint-d); }
.prob-item .title { font-family: var(--font-round); font-size: 19px; }

/* ───────── 문제 풀이 ───────── */
.solve-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.problem-card { position: relative; }
.problem-card .q-label {
  position: absolute; top: -16px; left: 22px; padding: 4px 16px; border-radius: 99px;
  background: var(--yellow); color: var(--ink); font-family: var(--font-round); font-size: 16px; box-shadow: 0 3px 0 var(--yellow-d);
}
.q-body { font-size: 20px; line-height: 1.8; margin-top: 8px; word-break: keep-all; overflow-wrap: anywhere; }
.q-img { margin-top: 14px; border-radius: 16px; border: 2px solid var(--line); max-height: 420px; object-fit: contain; background: #fff; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 18px; }
.choice {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 60px; text-align: left;
  border-radius: 18px; border: 2px solid var(--line); background: #FFFDF9; cursor: pointer; font-size: 18px;
  transition: all .12s;
}
.choice .no {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gray-s); font-family: var(--font-round); font-size: 17px; color: var(--ink-2); transition: all .12s;
}
.choice.on { border-color: var(--purple); background: var(--purple-s); box-shadow: 0 0 0 4px rgba(124,108,242,.12); }
.choice.on .no { background: var(--purple); color: #fff; transform: scale(1.1); }
.choice:disabled { cursor: default; }

/* ───────── 필기 패드 ───────── */
.pad-card { padding: 0; overflow: hidden; }
.pad-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 8px; }
.pad-toolbar {
  position: sticky; top: calc(70px + var(--safe-t)); z-index: 5;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line);
}
.tool {
  width: 46px; height: 46px; border-radius: 14px; border: 2px solid transparent; background: var(--gray-s);
  display: grid; place-items: center; cursor: pointer; font-size: 20px; transition: all .12s; padding: 0;
}
.tool.on { background: var(--purple-s); border-color: var(--purple); transform: translateY(-2px); }
.tool svg { width: 24px; height: 24px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); cursor: pointer; padding: 0; transition: transform .12s; }
.swatch.on { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.12); }
.sizes { display: flex; gap: 4px; padding: 4px; background: var(--gray-s); border-radius: 14px; }
.size { width: 38px; height: 38px; border: 0; border-radius: 11px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.size i { display: block; border-radius: 50%; background: var(--ink); }
.size.on { background: #fff; box-shadow: 0 2px 6px -2px rgba(0,0,0,.2); }
.tb-sep { width: 2px; height: 30px; background: var(--line); border-radius: 2px; margin: 0 4px; }
.pad-wrap {
  position: relative; touch-action: none; cursor: crosshair;
  background-color: #fff;
  background-image: linear-gradient(#EEF0FA 1px, transparent 1px), linear-gradient(90deg, #EEF0FA 1px, transparent 1px);
  background-size: 28px 28px;
}
.pad-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.pad-foot { padding: 10px 16px 14px; display: flex; justify-content: center; border-top: 2px dashed var(--line); }

.submit-bar { position: sticky; bottom: 0; z-index: 10; padding: 14px 0 calc(10px + var(--safe-b)); margin-top: 16px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(transparent, var(--bg) 35%); }
.submit-bar > .btn { flex: 1; min-width: 0; }

/* ───────── 결과 / 모달 ───────── */
/* 🧪 베타 체험판 의견 버튼·창: 협동 탈출 이야기·엔딩(z 3200)보다 위 */
.beta-tab { position: fixed; right: 0; top: 40%; z-index: 3300; writing-mode: vertical-rl; padding: 12px 6px; border: 0; border-radius: 12px 0 0 12px; background: var(--ink-2, #5A4FCF); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; opacity: .88; box-shadow: 0 4px 12px rgba(59, 51, 85, .3); touch-action: manipulation; }
.overlay.beta-overlay { z-index: 3400; }
.beta-bar { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 14px; }
.beta-note { margin: 0; max-width: 560px; text-align: center; }
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(59, 51, 85, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 20px; animation: fade .18s ease; }
.modal {
  width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow: auto; background: #fff; border-radius: 30px;
  padding: 26px; box-shadow: 0 30px 80px -20px rgba(59,51,85,.5); animation: pop .28s cubic-bezier(.3,1.5,.6,1);
}
.modal.wide { width: min(920px, 100%); }
.modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
@keyframes pop { from { transform: scale(.85) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } }

.result-pop { text-align: center; }
.result-pop h2 { font-size: 32px; margin-top: 8px; }

.toasts { position: fixed; left: 50%; bottom: calc(100px + var(--safe-b)); transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 12px 22px; border-radius: 99px; background: var(--ink); color: #fff; font-family: var(--font-round); font-size: 17px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.4); animation: pop .3s cubic-bezier(.3,1.5,.6,1); max-width: 90vw; text-align: center; }
.toast.ok { background: var(--mint-d); } .toast.err { background: var(--red); }

.spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--purple-s); border-top-color: var(--purple); animation: spin .8s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-screen { min-height: 60vh; display: grid; place-items: center; text-align: center; }

.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty .mascot { margin: 0 auto 10px; display: block; }

.confetti { position: fixed; top: -20px; z-index: 300; width: 10px; height: 16px; border-radius: 3px; pointer-events: none; animation: fall 2.4s cubic-bezier(.25,.6,.4,1) forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); opacity: .9; } }

/* ───────── 수행평가 ───────── */
body.exam-lock, body.exam-lock * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.exam-lock input, body.exam-lock textarea { -webkit-user-select: text; user-select: text; }
body.exam-lock { background-color: #F7F4FF; }
.exam-banner {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 18px; margin-bottom: 16px;
  background: var(--ink); color: #fff; font-family: var(--font-round); font-size: 16px;
}
.exam-banner .dot { width: 10px; height: 10px; border-radius: 50%; background: #FF6B81; animation: blink 1.2s infinite; }

/* ⏱️ 시간 도전 */
.time-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.time-level {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border-radius: 18px;
  border: 2px solid var(--line); background: #FFFDF9; cursor: pointer; text-align: left; transition: all .12s;
}
.time-level .nm { font-family: var(--font-round); font-size: 18px; }
.time-level b { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.time-level.on { border-color: var(--mint); background: var(--mint-s); box-shadow: 0 4px 0 #A8E9D5; }
.timer-bar {
  display: flex; align-items: center; gap: 10px; flex: 0 1 340px; min-width: 0;
  padding: 8px 16px; border-radius: 20px; background: #fff; border: 2px solid var(--line); box-shadow: var(--shadow);
}
.timer-bar .ico { font-size: 20px; }
.timer-bar .lbl { font-size: 14px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.timer-bar b { font-family: var(--font-round); font-weight: 400; font-size: 24px; font-variant-numeric: tabular-nums; min-width: 66px; }
.timer-bar .bar { flex: 1; min-width: 50px; }
.timer-bar .bar > i { --c: var(--mint); transition: width .5s linear; }
.timer-bar.hurry { border-color: #FFC6B5; background: var(--peach-s); }
.timer-bar.hurry .bar > i { --c: var(--peach); }
.timer-bar.over { border-color: #F8B4BF; background: var(--red-s); }
.timer-bar.over b { color: var(--red); }

/* 📊 내 성적 */
.score-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1.5px dashed var(--line); }
.score-row:first-of-type { border-top: 0; }
.score-row .score { min-width: 64px; text-align: right; font-family: var(--font-round); }
.score-row .score b { font-size: 24px; font-weight: 400; color: var(--purple-d); }
.score-row .score small { font-size: 14px; color: var(--muted); }
@media (max-width: 600px) {
  .score-row { flex-wrap: wrap; } .score-row .grow { flex-basis: 100%; }
  .submit-bar { flex-direction: column; align-items: stretch; } .timer-bar { flex-basis: auto; }
}
@keyframes blink { 50% { opacity: .25; } }
.exam-warn { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px;
  background: rgba(242, 100, 122, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; text-align: center; }
.exam-warn h2 { font-size: 34px; margin: 10px 0; }
.exam-warn .big { font-family: var(--font-round); font-size: 64px; line-height: 1; }
.rules { text-align: left; display: grid; gap: 10px; margin: 16px 0 6px; }
.rules div { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--gray-s); border-radius: 16px; }
.rules b { font-size: 22px; line-height: 1; }

/* ───────── 자료실 ───────── */
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.mat { display: flex; gap: 14px; align-items: flex-start; }
.mat .fico { flex: none; width: 56px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; position: relative; }
.mat .fico small { position: absolute; bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: .5px; }
.mat-drive { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; text-decoration: none; color: inherit; border: 2px solid var(--sky-s); }
.mat-drive:hover { border-color: var(--sky-d); }
.mat-drive .fico { flex: none; width: 56px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; position: relative; }
.mat-drive .fico small { position: absolute; bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: .5px; }

/* ───────── 교사: 대시보드 ───────── */
.class-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.class-bar .label { font-family: var(--font-round); font-size: 16px; color: var(--muted); flex: none; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { padding: 16px 18px; border-radius: 22px; background: #fff; border: 2px solid var(--line); box-shadow: var(--shadow); }
.stat .k { font-size: 14px; color: var(--muted); font-weight: 700; }
.stat .v { font-family: var(--font-round); font-size: 34px; line-height: 1.15; }
.stat .v small { font-size: 16px; color: var(--muted); margin-left: 3px; }
.stat.mint .v { color: var(--mint-d); } .stat.peach .v { color: var(--peach-d); } .stat.purple .v { color: var(--purple-d); } .stat.sky .v { color: var(--sky-d); }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(52,194,154,.6); animation: ping 1.8s infinite; }
.live.off i { background: #ccc; animation: none; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(52,194,154,0); } 100% { box-shadow: 0 0 0 0 rgba(52,194,154,0); } }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.tile {
  position: relative; padding: 14px 12px 12px; border-radius: 20px; border: 2px solid var(--line); background: #fff; cursor: pointer;
  text-align: center; transition: transform .12s; min-height: 104px;
}
.tile:active { transform: scale(.96); }
.tile .nm { font-family: var(--font-round); font-size: 19px; }
.tile .no { font-size: 13px; color: var(--muted); }
.tile .st { margin-top: 6px; font-size: 14px; font-weight: 700; }
.tile.none { background: repeating-linear-gradient(-45deg, #FBF8F3, #FBF8F3 8px, #F6F2EB 8px, #F6F2EB 16px); border-style: dashed; color: var(--muted); }
.tile.ok { background: var(--mint-s); border-color: #A8E9D5; } .tile.ok .st { color: var(--mint-d); }
.tile.bad { background: var(--peach-s); border-color: #FFC6B5; } .tile.bad .st { color: var(--peach-d); }
.tile.sub { background: var(--sky-s); border-color: #B5DDF8; } .tile.sub .st { color: var(--sky-d); }
.tile .warn { position: absolute; top: -8px; right: -6px; background: var(--red); color: #fff; border-radius: 99px; padding: 2px 8px; font-size: 12.5px; font-weight: 800; box-shadow: 0 3px 8px -2px rgba(242,100,122,.6); }
.tile .pen { position: absolute; top: 8px; left: 10px; font-size: 14px; opacity: .7; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.legend span::before { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 5px; margin-right: 6px; vertical-align: -2px; background: var(--b); border: 2px solid var(--bd, transparent); }

.matrix-wrap { overflow: auto; border-radius: 22px; border: 2px solid var(--line); background: #fff; max-height: 70vh; }
table.matrix { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 15px; }
.matrix th, .matrix td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.matrix thead th { position: sticky; top: 0; background: #FFFBF5; z-index: 2; font-family: var(--font-round); font-weight: 400; font-size: 15px; }
.matrix th.sticky, .matrix td.sticky { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; border-right: 2px solid var(--line); }
.matrix thead th.sticky { z-index: 3; background: #FFFBF5; }
.matrix .rate { display: block; font-size: 12px; color: var(--muted); font-family: var(--font); }
.cell { display: inline-grid; place-items: center; min-width: 40px; height: 34px; border-radius: 11px; font-weight: 800; cursor: pointer; border: 0; padding: 0 8px; position: relative; }
.cell.ok { background: var(--mint-s); color: var(--mint-d); } .cell.bad { background: var(--peach-s); color: var(--peach-d); }
.cell.sub { background: var(--sky-s); color: var(--sky-d); } .cell.none { background: transparent; color: #D5CEC3; cursor: default; }
.cell sup { position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff; border-radius: 99px; font-size: 10px; padding: 1px 5px; }

.exit-feed { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.exit-feed div { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--red-s); font-size: 14.5px; }

.detail-img { width: 100%; border-radius: 18px; border: 2px solid var(--line); background: #fff; min-height: 120px; display: grid; place-items: center; overflow: hidden; }
.detail-img img { display: block; width: 100%; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kv div { background: var(--gray-s); border-radius: 16px; padding: 10px 14px; }
.kv .k { font-size: 13px; color: var(--muted); font-weight: 700; }
.kv .v { font-family: var(--font-round); font-size: 20px; }

/* ───────── 교사: 관리 ───────── */
.split { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.unit-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; border: 2px solid transparent; cursor: pointer; transition: background .12s; }
.unit-row:hover { background: var(--gray-s); }
.unit-row.on { background: var(--purple-s); border-color: #D6CFFF; }
.unit-row .t { font-family: var(--font-round); font-size: 17px; flex: 1; min-width: 0; }
.p-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 2px dashed var(--line); }
.p-row:last-child { border-bottom: 0; }
.preview-box { padding: 14px 16px; border-radius: 16px; background: #FFFCF6; border: 2px dashed var(--line); min-height: 60px; font-size: 18px; line-height: 1.8; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.roster-table { width: 100%; border-collapse: collapse; }
.roster-table td, .roster-table th { padding: 10px 12px; border-bottom: 2px dashed var(--line); text-align: left; }
.roster-table th { font-family: var(--font-round); font-weight: 400; color: var(--muted); }
.drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px; border-radius: 20px; border: 3px dashed #D9CFF5;
  background: #FBFAFF; cursor: pointer; text-align: center; color: var(--ink-2);
}
.drop input { display: none; }

/* ───────── 개념 학습: 전자책 ───────── */
.lesson { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(96px + var(--safe-b)); }
.lesson-top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + var(--safe-t)) 18px 10px; background: rgba(255,248,239,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 2px solid var(--line);
}
.lesson-crumb b { font-size: 19px; font-weight: 400; display: block; line-height: 1.25; }
.page-dots { display: flex; gap: 6px; flex-wrap: wrap; max-width: 300px; }
.page-dots .dot { width: 14px; height: 14px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #E7E0D5; transition: transform .15s; }
.page-dots .dot.past { opacity: .55; }
.page-dots .dot.on { transform: scale(1.35); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.dot.c-yellow.on, .dot.c-yellow.past { background: var(--yellow); } .dot.c-mint.on, .dot.c-mint.past { background: var(--mint); }
.dot.c-purple.on, .dot.c-purple.past { background: var(--purple); } .dot.c-sky.on, .dot.c-sky.past { background: var(--sky); }
.dot.c-peach.on, .dot.c-peach.past { background: var(--peach); } .dot.c-pink.on, .dot.c-pink.past { background: var(--pink); }
#lInk.on-ink { --c: var(--yellow); --cd: var(--yellow-d); --fg: var(--ink); }

.lesson-stage { max-width: 980px; margin: 0 auto; padding: 22px 18px; }
.epage {
  position: relative; padding: 30px 34px 54px; border-radius: 30px; min-height: 60vh;
  background: #fff linear-gradient(90deg, rgba(124,108,242,.05), transparent 24px);
  box-shadow: var(--shadow-lift);
}
.epage::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 6px; border-radius: 0 6px 6px 0; background: var(--pc, var(--purple)); opacity: .7; }
.epage.t-yellow { --pc: var(--yellow); } .epage.t-mint { --pc: var(--mint); } .epage.t-purple { --pc: var(--purple); }
.epage.t-sky { --pc: var(--sky); } .epage.t-peach { --pc: var(--peach); } .epage.t-pink { --pc: var(--pink); }
.epage.flip-in { animation: flipIn .35s cubic-bezier(.3,1.2,.5,1); }
@keyframes flipIn { from { opacity: 0; transform: translateX(26px) rotate(.4deg); } }
.page-head { margin-bottom: 18px; }
.page-head h2 { margin-top: 10px; font-size: 30px; line-height: 1.3; }
.page-chip { display: inline-block; padding: 5px 14px; border-radius: 99px; font-family: var(--font-round); font-size: 15px; }
.c-yellow.page-chip { background: var(--yellow-s); color: #A27310; } .c-mint.page-chip { background: var(--mint-s); color: var(--mint-d); }
.c-purple.page-chip { background: var(--purple-s); color: var(--purple-d); } .c-sky.page-chip { background: var(--sky-s); color: var(--sky-d); }
.c-peach.page-chip { background: var(--peach-s); color: var(--peach-d); } .c-pink.page-chip { background: var(--pink-s); color: #D14D8B; }
.page-no { position: absolute; right: 26px; bottom: 16px; font-family: var(--font-round); color: var(--muted); }
.page-body { display: flex; flex-direction: column; gap: 18px; font-size: 19px; line-height: 1.85; }
.epage mark { background: linear-gradient(transparent 45%, #FFE58A 45%, #FFE58A 92%, transparent 92%); color: inherit; padding: 0 2px; }

/* 숨겨진 단계는 자리를 차지한 채 '가림막'으로 덮어 둔다 → 펼쳐도 아래 내용이 밀리지 않아 필기 위치가 그대로 유지됨 */
.frag { position: relative; }
.frag:not(.shown) > * { visibility: hidden; }
.frag:not(.shown) { border-radius: 16px; background: repeating-linear-gradient(-45deg, #F8F4ED 0 10px, #F1EBE1 10px 20px); }
.frag:not(.shown)::after {
  content: '👀 [다음 단계 ▼]를 누르면 나타나요'; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-round); font-size: 15px; color: #B3AA9C; pointer-events: none;
}
.veil { visibility: hidden; }
.tiles-stage { aspect-ratio: 1 / 1; max-width: 460px; }
.morph-trail { min-height: 52px; align-content: flex-end; }

.say { display: flex; align-items: flex-end; gap: 12px; }
.say .mascot { flex: none; }
.say .speech { border-radius: 22px 22px 22px 6px; font-family: var(--font); font-size: 19px; line-height: 1.7; padding: 14px 18px; }
.big-q { font-family: var(--font-round); font-size: 26px; text-align: center; padding: 14px; border-radius: 20px; background: var(--purple-s); color: var(--purple-d); }
.goal { padding: 16px 20px; border-radius: 20px; background: var(--mint-s); }
.goal ul, .llist { margin: 8px 0 0; padding-left: 22px; }
.llist li { margin: 6px 0; }
.tip { display: flex; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--yellow-s); border: 2px dashed #F3D37A; }
.tip > span { font-size: 24px; line-height: 1.5; }
.tip.warn { background: var(--red-s); border-color: #F7B4BF; }
.formula-box { border-radius: 22px; border: 2px solid #D9D2FF; background: #FBFAFF; overflow: hidden; }
.fb-title { padding: 10px 18px; background: var(--purple-s); color: var(--purple-d); font-size: 18px; }
.fb-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 18px; border-top: 1px dashed #E4DEFF; }
.fb-row:first-of-type { border-top: 0; }
.fb-label { flex: none; min-width: 40px; font-family: var(--font-round); color: var(--purple-d); }
.fb-tex { flex: 1; min-width: 0; overflow-x: auto; }
.fb-note { width: 100%; font-size: 15px; color: var(--ink-2); margin: -6px 0 6px 52px; }
.ex-problem { padding: 14px 18px; border-radius: 18px; background: var(--sky-s); font-weight: 700; }
.steps { display: grid; gap: 8px; margin-top: 10px; }
.step { display: flex; gap: 12px; align-items: flex-start; padding: 8px 12px; border-radius: 14px; background: #FCFBF8; }
.step .sn { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: #fff; font-family: var(--font-round); font-size: 16px; margin-top: 4px; }
.answer { margin-top: 8px; padding: 10px 16px; border-radius: 14px; background: var(--mint-s); color: var(--mint-d); font-weight: 700; }
.lfig { margin: 0; text-align: center; } .lfig img { border-radius: 16px; } .lfig figcaption { font-size: 15px; color: var(--muted); }

.quiz-q { padding: 16px 18px; border-radius: 22px; border: 2px solid var(--line); background: #FFFDF9; margin-bottom: 14px; }
.qq { display: flex; gap: 12px; align-items: flex-start; }
.qn { flex: none; padding: 2px 12px; border-radius: 99px; background: var(--peach); color: #fff; font-family: var(--font-round); margin-top: 4px; }
.qchoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.qchoices.ox { grid-template-columns: repeat(2, minmax(0, 200px)); justify-content: center; }
.qc { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 14px; border-radius: 16px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-size: 18px; transition: all .12s; }
.qchoices.ox .qc { justify-content: center; font-size: 30px; min-height: 70px; }
.qc .no { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-s); font-family: var(--font-round); }
.qc.right { border-color: var(--mint); background: var(--mint-s); } .qc.right .no { background: var(--mint); color: #fff; }
.qc.wrong { border-color: #FFC6B5; background: var(--peach-s); opacity: .7; animation: shake .35s; }
.qc:disabled { cursor: default; }
.explain { margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--mint-s); font-size: 17px; }
.finish-box { text-align: center; padding: 20px; border-radius: 24px; background: linear-gradient(135deg, var(--mint-s), var(--purple-s)); }
.finish-box .mascot { margin: 0 auto; display: block; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.shake { animation: shake .35s; }

.lesson-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 12px 18px calc(12px + var(--safe-b)); background: rgba(255,248,239,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 2px solid var(--line);
}
.lesson-nav .btn { min-width: 150px; }
.ink-dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + var(--safe-b)); z-index: 31; width: min(760px, calc(100% - 24px)); }
.ink-dock .pad-toolbar { position: static; border: 2px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lift); }
.ink-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit; overflow: hidden; }
.ink-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.epage.inking { touch-action: none; cursor: crosshair; outline: 3px dashed var(--yellow); outline-offset: 4px; }
.epage.inking * { -webkit-user-select: none; user-select: none; }

/* 발표 모드(TV·전자칠판) */
body.presenting .lesson-stage { max-width: 1400px; }
body.presenting .page-body { font-size: 26px; }
body.presenting .page-head h2 { font-size: 40px; }
body.presenting .big-q { font-size: 34px; }
body.presenting .katex { font-size: 1.2em; }

/* 위젯 */
.widget-box { padding: 16px; border-radius: 24px; background: #FCFBF8; border: 2px solid var(--line); }
.wcap { text-align: center; font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.wsvg { display: block; width: 100%; height: auto; margin: 0 auto; touch-action: manipulation; }
.wsvg .grid { stroke: #EEE8DF; stroke-width: 1; } .wsvg .axis { stroke: #8A84A3; stroke-width: 2; }
.wsvg .tick { font-size: 14px; fill: var(--muted); font-family: var(--font); }
.wsvg .curve { fill: none; stroke-width: 4; stroke-linecap: round; }
.wsvg .pt { stroke: #fff; stroke-width: 3; } .wsvg .ptl { font-size: 16px; fill: var(--ink); font-weight: 700; }
.wformula { text-align: center; min-height: 40px; overflow-x: auto; }
.wparams { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 18px; margin-top: 12px; }
.wslider { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 16px; background: #fff; border: 2px solid var(--line); }
.wslider .wl { flex: none; min-width: 26px; font-size: 18px; color: var(--c); }
.wslider .wv { flex: none; min-width: 34px; text-align: right; font-family: var(--font-round); font-size: 20px; color: var(--c); }
.wslider input { flex: 1; -webkit-appearance: none; appearance: none; height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, var(--c) var(--p, 50%), #ECE6DC var(--p, 50%)); outline: none; }
.wslider input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 4px solid var(--c); box-shadow: 0 3px 8px rgba(0,0,0,.18); cursor: grab; }
.wslider input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--c); cursor: grab; }
.tiles-stage { margin: 0 auto; }
.tiles-svg .tile-g { cursor: pointer; transition: opacity .2s; }
.tiles-svg .tile-g.dim { opacity: .25; }
.tiles-svg .tile-g.focus rect { stroke-width: 4; }
.tiles-svg .tile-t { font-family: var(--font-round); pointer-events: none; }
.tiles-svg .brace { fill: none; stroke: var(--muted); stroke-width: 2; }
.tiles-svg .edge-t { font-family: 'Times New Roman', serif; font-style: italic; font-size: 22px; fill: var(--ink); }
.tile-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.tile-legend .lg { padding: 4px 12px; border-radius: 99px; background: var(--f); border: 2px solid var(--c); font-size: 15px; cursor: pointer; }
.tile-legend .lg.on { box-shadow: 0 0 0 3px var(--c); }
.dist-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 22px; min-height: 52px; }
.dist-row .paren { font-size: 30px; color: var(--muted); }
.dist-row .eq { font-size: 24px; margin-right: 4px; }
.term { display: inline-block; padding: 4px 10px; border-radius: 12px; border: 2px solid transparent; transition: all .2s; }
.term.pop { animation: pop .3s cubic-bezier(.3,1.5,.6,1); background: #fff; }
.dist-row.final { font-size: 26px; color: var(--mint-d); }
.mc { text-align: center; }
.mc-clock { font-family: var(--font-round); font-size: 22px; color: var(--peach-d); }
.mc-clock b { font-size: 34px; font-weight: 400; }
.mc-q { font-size: 30px; margin: 6px 0 10px; }
.mc-in .input { max-width: 200px; text-align: center; font-size: 24px; }
.mc-msg { margin-top: 8px; min-height: 24px; font-size: 17px; }
.mc-trick { margin-top: 8px; color: var(--purple-d); }

/* 단원 화면의 차시 카드 */
.lesson-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lesson-card { position: relative; text-align: left; padding: 16px; border-radius: 22px; border: 2px solid var(--line); background: #fff; cursor: pointer; box-shadow: var(--shadow); transition: transform .12s; }
.lesson-card:active { transform: scale(.97); }
.lesson-card .no { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--purple-s); color: var(--purple-d); font-family: var(--font-round); font-size: 14px; }
.lesson-card h4 { margin: 8px 0 6px; line-height: 1.3; }
.lesson-card.done { background: linear-gradient(135deg, #fff, var(--mint-s)); }
.lesson-card .stamp { position: absolute; right: 12px; top: 10px; font-size: 26px; transform: rotate(10deg); }

/* ───────── 수업자료 애니메이션 ───────── */
.lesson-stage { perspective: 1600px; }
.epage.turn-next { animation: turnNext .55s cubic-bezier(.25,1.1,.4,1); transform-origin: left center; }
.epage.turn-prev { animation: turnPrev .55s cubic-bezier(.25,1.1,.4,1); transform-origin: right center; }
@keyframes turnNext { from { opacity: 0; transform: translateX(60px) rotateY(-14deg); } }
@keyframes turnPrev { from { opacity: 0; transform: translateX(-60px) rotateY(14deg); } }

/* 페이지가 열릴 때 블록이 차례로 떠오름 */
.blk.enter { animation: blkIn .6s cubic-bezier(.2,1.3,.4,1) both; animation-delay: var(--d, 0ms); }
@keyframes blkIn { from { opacity: 0; transform: translateY(22px) scale(.97); } }
.page-head .page-chip { animation: chipIn .5s cubic-bezier(.3,1.6,.5,1) both; }
.page-head h2 { animation: blkIn .6s .08s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes chipIn { from { opacity: 0; transform: scale(.4) rotate(-10deg); } }

/* [다음 단계]로 펼칠 때: 통통 튀며 등장 + 노란 빛 */
.frag.shown { animation: fragIn .6s cubic-bezier(.2,1.5,.4,1); }
@keyframes fragIn { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.frag.just > * { animation: glow 1.3s ease-out; border-radius: 18px; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(255,201,77,.85); } 100% { box-shadow: 0 0 0 18px rgba(255,201,77,0); } }

/* 형광펜이 쓱 그어지는 효과 */
.epage mark {
  background: linear-gradient(#FFE27A, #FFE27A) no-repeat 0 88% / 0% 52%;
  color: inherit; padding: 0 3px; border-radius: 3px;
}
.blk:not(.frag) mark, .frag.shown mark { animation: hlSwipe .9s .55s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes hlSwipe { to { background-size: 100% 52%; } }

/* 공식이 분필로 쓰이듯 왼쪽부터 나타남 */
.blk.enter .fb-row:not(.frag) .fb-tex, .fb-row.shown .fb-tex { animation: wipe 1s cubic-bezier(.5,0,.3,1) both; animation-delay: calc(var(--d, 0ms) + 250ms); }
.fb-row.shown .fb-tex { animation-delay: 80ms; }
@keyframes wipe { from { clip-path: inset(-10px 100% -10px 0); } to { clip-path: inset(-10px -10px -10px 0); } }

.say .speech { transform-origin: 0 100%; }
.blk.enter .say .speech, .frag.shown .say .speech { animation: bubble .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--d, 0ms) + 200ms); }
.blk.enter .say .mascot, .frag.shown .say .mascot { animation: hop .7s ease both, bob 3.2s 1s ease-in-out infinite; animation-delay: var(--d, 0ms), 1s; }
@keyframes bubble { from { opacity: 0; transform: scale(.3); } }
@keyframes hop { 0% { transform: translateY(0); } 30% { transform: translateY(-22px) rotate(-6deg); } 60% { transform: translateY(0) scaleY(.9); } 100% { transform: none; } }
.big-q { animation: wobble 1s 1s ease both; }
.frag:not(.shown) .big-q { animation: none; }
@keyframes wobble { 20% { transform: rotate(-2deg) scale(1.03); } 40% { transform: rotate(2deg) scale(1.03); } 60% { transform: rotate(-1deg); } 80% { transform: rotate(1deg); } }

.step.shown .sn { animation: numPop .5s cubic-bezier(.3,1.8,.5,1) both; }
@keyframes numPop { from { transform: scale(0) rotate(-90deg); } }
.step.cur { background: var(--sky-s); box-shadow: inset 4px 0 0 var(--sky); }
.answer.shown { animation: stamp .55s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.8) rotate(-6deg); } 70% { transform: scale(.96) rotate(1deg); } 100% { transform: none; } }

/* 마무리 도장 */
.finish-box { position: relative; overflow: hidden; }
.finish-box .mascot { animation: hop .8s .2s ease both, bob 3.2s 1.2s ease-in-out infinite; }
.good-stamp {
  position: absolute; right: 22px; top: 18px; width: 92px; height: 92px; border-radius: 50%; border: 5px double #F2647A;
  color: #F2647A; display: grid; place-items: center; font-family: var(--font-round); font-size: 17px; line-height: 1.15; text-align: center;
  transform: rotate(-14deg); animation: slam .6s .7s cubic-bezier(.3,1.6,.5,1) both; background: rgba(255,255,255,.6);
}
@keyframes slam { 0% { opacity: 0; transform: scale(2.6) rotate(-30deg); } 60% { opacity: 1; transform: scale(.9) rotate(-12deg); } 100% { transform: rotate(-14deg); } }

/* 반짝이(정답) */
.sparkle { position: fixed; z-index: 300; pointer-events: none; font-size: 18px; animation: spark .8s ease-out forwards; }
@keyframes spark { from { transform: translate(-50%, -50%) scale(.3); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(180deg); opacity: 0; } }
.qc.right { animation: bounceIn .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes bounceIn { 40% { transform: scale(1.08); } }

/* 위젯 애니메이션 */
.tiles-svg .tile-g { transform-box: fill-box; transform-origin: center; }
.tiles-svg { overflow: visible; }
.tiles-svg .tile-frame { fill: #FFFDF9; stroke: #CFC6B8; stroke-width: 2.5; stroke-dasharray: 8 7; }
.tiles-svg .tile-g.pop-new { animation: tilePop .5s cubic-bezier(.3,1.7,.5,1) both; animation-delay: var(--td, 0ms); }
.tiles-svg .tile-g.wait { opacity: 0; }
@keyframes tilePop { from { opacity: 0; transform: scale(.2); } }
.tiles-svg .tile-g.fly { transition: transform .8s cubic-bezier(.3,1.3,.5,1), opacity .4s; }
.tiles-svg .edge-g { transition: opacity .5s; }
.tile-count { text-align: center; font-family: var(--font-round); font-size: 20px; color: var(--ink-2); min-height: 30px; }
.tile-count b { display: inline-block; animation: numPop .35s cubic-bezier(.3,1.8,.5,1); }
.wbtns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dist-wrap { position: relative; padding-top: 70px; }
.dist-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dist-arcs path { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: drawArc .6s ease-out forwards; }
.dist-arcs path.old { opacity: .25; }
@keyframes drawArc { to { stroke-dashoffset: 0; } }
.term.lit { transform: translateY(-4px) scale(1.08); box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); }
.wsvg .curve.draw-in { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: drawArc 1.4s ease-out forwards; --len: 3000; }
.mc-clock.running b { animation: tick 1s steps(2) infinite; }
@keyframes tick { 50% { color: var(--red); } }
/* 🧠 공식 카드 복습 */
.review-home { display: flex; align-items: center; gap: 18px; margin-top: 18px; background: linear-gradient(135deg, #fff, var(--purple-s)); flex-wrap: wrap; }
.rv-deck { position: relative; width: 74px; height: 74px; flex: none; }
.rv-deck i { position: absolute; inset: 6px 4px 0; border-radius: 14px; background: #fff; border: 2px solid #D9D2FF; box-shadow: var(--shadow); }
.rv-deck i:nth-child(1) { transform: rotate(-10deg); } .rv-deck i:nth-child(2) { transform: rotate(6deg); }
.rv-deck span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; animation: bob 3s ease-in-out infinite; }
.rv-box { width: 16px; height: 16px; border-radius: 5px; background: #E7E0D5; display: inline-block; }
.rv-box.on { background: var(--mint); box-shadow: 0 0 0 2px var(--mint-s); }
.flashcard { perspective: 1800px; max-width: 760px; margin: 0 auto; transition: transform .38s ease, opacity .38s ease; }
.flashcard.out-right { transform: translateX(120px) rotate(8deg); opacity: 0; }
.flashcard.out-left { transform: translateX(-120px) rotate(-8deg); opacity: 0; }
/* 뒤집기: 90°까지 돌린 뒤 면을 바꾸고 다시 돌아온다(안쪽에 필기 도구가 있어도 깨지지 않는 방식) */
.fc-inner { transition: transform .26s ease-in; animation: blkIn .5s ease both; }
.flashcard.flipping .fc-inner { transform: rotateY(90deg) scale(.96); }
.flashcard.flipped .fc-inner { animation: flipBack .32s ease-out; }
@keyframes flipBack { from { transform: rotateY(-90deg) scale(.96); } }
.fc-face { background: #fff; border: 2px solid var(--line); border-radius: 30px; box-shadow: var(--shadow-lift); padding: 24px; }
.fc-front { background: #fff linear-gradient(160deg, var(--purple-s), #fff 40%); }
.fc-back { display: none; background: #fff linear-gradient(160deg, var(--mint-s), #fff 40%); }
.flashcard.flipped .fc-front { display: none; }
.flashcard.flipped .fc-back { display: block; }
.fc-tag { display: inline-block; padding: 3px 12px; border-radius: 99px; background: rgba(255,255,255,.8); font-size: 13px; color: var(--ink-2); font-weight: 700; }
.fc-q { font-size: 26px; text-align: center; margin: 14px 0 6px; overflow-x: auto; }
.fc-why { margin: 10px 0 14px; padding: 12px 16px; border-radius: 16px; background: var(--yellow-s); border: 2px dashed #F3D37A; font-size: 17px; line-height: 1.7; }
#fcPad { margin-top: 10px; border-radius: 18px; overflow: hidden; border: 2px dashed var(--line); }
.grade-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.grade-row .btn { flex-direction: column; gap: 0; min-height: 70px; }
.grade-row .btn small { font-family: var(--font); font-size: 12px; opacity: .85; }

/* 🟢 접속 현황 */
.conn { color: var(--mint-d); font-weight: 700; }
.tile.away { background: var(--red-s); border-color: #F7B4BF; animation: awayPulse 1.6s ease-in-out infinite; }
.tile.away .st { color: #C9475B; }
@keyframes awayPulse { 50% { box-shadow: 0 0 0 6px rgba(242,100,122,.25); } }
.tile .where { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.3; }
.away-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; border-radius: 18px; background: var(--red); color: #fff; animation: blkIn .4s ease both; }
.away-banner .dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: blink 1s infinite; }

/* 🚀 모둠 합동 대결 */
.g-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.g-team { padding: 8px 18px; border-radius: 99px; background: var(--tc); color: #fff; font-family: var(--font-round); font-size: 20px; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.g-timer { margin-left: auto; font-family: var(--font-round); font-size: 30px; color: var(--ink); min-width: 80px; text-align: right; }
.g-timer.big { font-size: 54px; margin: 0; }
.g-timer.hurry { color: var(--red); animation: tick 1s steps(2) infinite; }
.g-race { display: grid; gap: 6px; padding: 12px 14px; border-radius: 20px; background: #fff; border: 2px solid var(--line); margin-bottom: 14px; }
.g-lane { display: grid; grid-template-columns: 34px 1fr 28px 60px; align-items: center; gap: 8px; font-size: 15px; }
.g-lane.me { font-weight: 800; }
.g-ln { font-size: 22px; text-align: center; }
.g-track { position: relative; height: 14px; border-radius: 99px; background: #F1ECE3; }
.g-track i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--tc); opacity: .75; transition: width .8s cubic-bezier(.3,1.3,.5,1); }
.g-lane.me .g-track { box-shadow: 0 0 0 3px var(--tc); }
.g-rocket { position: absolute; top: 50%; transform: translate(-50%, -55%) rotate(45deg); font-size: 20px; transition: left .8s cubic-bezier(.3,1.3,.5,1); }
.g-star { font-size: 12px; white-space: nowrap; overflow: hidden; }
.g-mission { border-top: 6px solid var(--tc); }
.g-title { text-align: center; font-size: 26px; margin: 10px 0 14px; }
.g-title span { display: block; font-family: var(--font-round); font-size: 18px; color: var(--muted); margin-top: -6px; }
.g-pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.g-piece { padding: 14px; border-radius: 20px; border: 3px dashed #D9D2C4; background: #FFFDF9; text-align: center; min-height: 128px; display: flex; flex-direction: column; justify-content: center; gap: 8px; transition: all .2s; }
.g-piece.done { border-style: solid; border-color: var(--mint); background: var(--mint-s); animation: stamp .45s cubic-bezier(.3,1.5,.5,1); }
.g-piece.mine { border-style: solid; border-color: var(--purple); background: var(--purple-s); box-shadow: 0 8px 20px -8px rgba(124,108,242,.6); }
.g-piece.taken { opacity: .7; background: #F6F2EB; }
.g-pl { font-size: 22px; }
.g-res { font-size: 22px; color: var(--mint-d); }
.g-by { font-size: 14px; color: var(--ink-2); font-weight: 700; }
.g-ch { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.g-ch .btn { font-family: var(--font); font-size: 18px; min-width: 70px; }
.g-final { margin-top: 16px; padding: 16px; border-radius: 22px; background: linear-gradient(135deg, var(--yellow-s), #fff); border: 3px solid var(--yellow); text-align: center; animation: blkIn .5s ease both; }
.g-final .g-ch { margin-top: 10px; }
.g-cool { margin-top: 12px; text-align: center; font-family: var(--font-round); color: var(--peach-d); }
.g-mates { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.g-feed { margin-top: 10px; font-size: 14px; color: var(--muted); display: grid; gap: 2px; }
.g-lobby { max-width: 620px; margin: 10px auto; border-top: 8px solid var(--tc); }
.g-big-emoji { font-size: 76px; line-height: 1; animation: bob 3s ease-in-out infinite; }
.g-boost { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; text-align: center; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,.4)); animation: fade .2s ease; }
.g-boost .rk { font-size: 90px; animation: launch 1.8s cubic-bezier(.5,0,.6,1) both; }
.g-boost h2 { font-size: 40px; color: var(--purple-d); animation: stamp .5s .1s both; }
@keyframes launch { 0% { transform: translateY(60px) rotate(-45deg) scale(.6); } 30% { transform: translateY(0) rotate(-45deg) scale(1.2); } 100% { transform: translate(140px, -320px) rotate(-45deg) scale(.6); opacity: 0; } }
.tg-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tg-race { display: grid; gap: 12px; }
.tg-lane { display: grid; grid-template-columns: 170px 1fr 86px; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 24px; background: #fff; border: 2px solid var(--line); border-left: 10px solid var(--tc); box-shadow: var(--shadow); }
.tg-name { display: flex; align-items: center; gap: 10px; }
.tg-emoji { font-size: 40px; }
.tg-track { position: relative; height: 26px; border-radius: 99px; background: repeating-linear-gradient(90deg, #F4EFE6 0 18px, #EDE6DA 18px 36px); margin-right: 26px; }
.tg-track i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--tc)); opacity: .55; transition: width 1s cubic-bezier(.3,1.3,.5,1); }
.tg-rocket { position: absolute; top: 50%; font-size: 36px; transform: translate(-50%, -55%) rotate(45deg); transition: left 1s cubic-bezier(.3,1.3,.5,1); filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); z-index: 2; }
.tg-goal { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); font-size: 28px; }
.tg-cp { position: absolute; top: 4px; bottom: 4px; width: 3px; margin-left: -1px; border-radius: 3px; background: #D9D0C2; }
.tg-cp.ok { background: var(--tc); }
.tg-score { text-align: right; font-family: var(--font-round); }
.tg-score b { font-size: 36px; } .tg-score small { color: var(--muted); }
.tg-pieces { grid-column: 2 / 4; display: flex; align-items: center; gap: 5px; margin-top: -4px; }
.tg-pieces i { width: 16px; height: 16px; border-radius: 5px; background: #EDE6DA; transition: background .3s; }
.tg-pieces i.on { background: var(--tc); }
.tg-pieces span { margin-left: 6px; }
.tg-feed { margin-top: 16px; display: grid; gap: 4px; max-height: 220px; overflow: auto; font-size: 16px; }
.lobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.lobby-team { text-align: center; border-top: 8px solid var(--tc); animation: blkIn .5s ease both; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 6px 0 16px; }
.pd { text-align: center; width: 180px; animation: blkIn .6s cubic-bezier(.2,1.3,.4,1) both; }
.pd-emoji { font-size: 54px; animation: bob 2.6s ease-in-out infinite; }
.pd-block { margin-top: 8px; border-radius: 18px 18px 0 0; background: var(--tc); color: #fff; font-size: 40px; display: grid; place-items: center; box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
.pd.r1 .pd-block { height: 150px; } .pd.r2 .pd-block { height: 110px; } .pd.r3 .pd-block { height: 80px; }
.pd.r1 { animation-delay: .5s; } .pd.r2 { animation-delay: .25s; }
.coop-award { text-align: center; padding: 12px; margin-bottom: 16px; border-radius: 18px; background: var(--mint-s); font-size: 18px; animation: stamp .6s .9s both; }
body.presenting .tg-lane, :fullscreen .tg-lane { padding: 18px 22px; }
@media (max-width: 700px) {
  .tg-lane { grid-template-columns: 1fr 70px; }
  .tg-track { grid-column: 1 / -1; grid-row: 2; }
  .tg-pieces { grid-column: 1 / -1; }
}

/* 예제·확인 문제 연습장 */
.scratch { margin-top: 12px; border-radius: 22px; border: 2px dashed #BFE0F7; background: #F7FBFF; overflow: hidden; }
.scratch-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 16px 4px; color: var(--sky-d); }
.scratch .pad-toolbar, .qpad .pad-toolbar { top: calc(66px + var(--safe-t)); padding: 8px 10px; }
.scratch .pad-foot, .qpad .pad-foot { padding: 6px 12px 10px; }
.qpad-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.qpad { margin-top: 8px; border-radius: 18px; border: 2px dashed var(--line); overflow: hidden; animation: blkIn .4s ease both; }
.dist-row.final.pop { animation: stamp .55s cubic-bezier(.3,1.5,.5,1) both; }
.mc-msg b { display: inline-block; animation: stamp .5s cubic-bezier(.3,1.5,.5,1); }

/* 변신 수식 */
.morph-stage { position: relative; min-height: 96px; display: grid; place-items: center; overflow: hidden; font-size: 24px; }
.morph-stage .mx { grid-area: 1 / 1; padding: 6px 10px; }
.morph-stage .mx.out { animation: mOut .45s ease forwards; }
.morph-stage .mx.in { animation: mIn .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes mOut { to { opacity: 0; transform: translateY(-40px) scale(.9); filter: blur(4px); } }
@keyframes mIn { from { opacity: 0; transform: translateY(40px) scale(.9); filter: blur(6px); } }
.morph-note { text-align: center; min-height: 28px; font-size: 16px; color: var(--purple-d); }
.morph-note span { display: inline-block; animation: blkIn .5s ease both; }
.morph-dots { display: flex; justify-content: center; gap: 6px; margin: 4px 0; }
.morph-dots i { width: 10px; height: 10px; border-radius: 50%; background: #E7E0D5; transition: all .3s; }
.morph-dots i.on { background: var(--purple); transform: scale(1.3); }
.morph-trail { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 15px; color: var(--muted); min-height: 24px; }

.split.wide-right { grid-template-columns: 1fr 400px; }
.in-exam .topbar, .in-exam .sidenav, .in-exam .sn-backdrop { display: none; }
#app.in-exam .shell { padding-left: 0; }
.in-exam .pad-toolbar { top: var(--safe-t); }

/* ───────── 반응형 ───────── */
@media (max-width: 860px) {
  .split, .split.wide-right { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .page { padding: 14px 14px calc(30px + var(--safe-b)); }
  .topbar { padding-left: 14px; padding-right: 14px; }
  .hero { flex-direction: column; text-align: center; padding: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  /* 휴대폰 상단: 제목이 레벨 배지와 겹치지 않게 아바타·경험치 막대를 숨기고 제목을 두 줄로 */
  .topbar-in { gap: 8px; }
  .brand { font-size: 15px; gap: 0; min-width: 0; }
  .brand svg { display: none; }
  .brand span { white-space: nowrap; }
  .brand .brand-sub { display: block; margin-left: 0; }
  .topbar .avatar, .topbar .xp-mini { display: none; }
  .topbar .btn.sm { white-space: nowrap; }
  .hide-sm { display: none !important; }
  .q-body { font-size: 18px; }
  .epage { padding: 22px 18px 48px; }
  .page-head h2 { font-size: 24px; }
  .page-body { font-size: 17px; }
  .lesson-stage { padding: 14px 10px; }
  .lesson-nav .btn { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.katex { font-size: 1.08em; }

/* ───────── 📺 학생 화면 보기 ───────── */
.watch-badge { position: fixed; top: calc(6px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 90;
  padding: 4px 12px; border-radius: 99px; background: rgba(59,51,85,.82); color: #fff; font-size: 12.5px; font-weight: 700; pointer-events: none; }
.mirror-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mtile { display: block; width: 100%; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden;
  background: #fff; border: 2px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); transition: transform .12s; }
.mtile:hover { transform: translateY(-2px); }
.mtile.online { border-color: #A8E9D5; }
.mtile.away { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-s); }
.mtile.offline { opacity: .55; }
.mtile.exam .mscreen { box-shadow: inset 0 0 0 3px var(--peach); }
.mtile.exam .nm::after { content: ' 🔒'; }
.mscreen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); }
.mscreen .mbox { position: absolute; inset: 0; overflow: hidden; }
.mcap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 12px 10px; border-top: 2px solid var(--line); font-size: 14px; }
.mcap .nm { font-family: var(--font-round); font-size: 16px; }
.mcap .st { font-size: 13px; font-weight: 700; }
.mcap .where { flex-basis: 100%; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mempty { display: grid; place-items: center; height: 100%; min-height: 120px; padding: 12px; text-align: center; white-space: pre-line; color: var(--muted); font-size: 14px; }
.mirror-stage { transform-origin: 0 0; pointer-events: none; }
.mirror-stage *, .mirror-stage *::before, .mirror-stage *::after { animation: none !important; transition: none !important; }
.mirror-stage .epage { box-shadow: none; }
.mirror-full { position: relative; }
.mirror-full .mbox { position: relative; overflow: hidden; border-radius: 14px; background: var(--bg); }
.mview { position: absolute; left: 0; right: 0; border: 3px solid var(--sky); border-radius: 10px; background: rgba(75,174,240,.06); pointer-events: none; }
.mview::before { content: '학생이 보고 있는 곳'; position: absolute; top: -3px; right: -3px; padding: 2px 8px; border-radius: 0 10px 0 10px; background: var(--sky); color: #fff; font-size: 12px; font-weight: 700; }

/* ───────── 🏃 개인전 ───────── */
.solo-board, .solo-tv { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.solo-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: #FFFDF9; }
.solo-row.me { background: var(--purple-s); outline: 2px solid var(--purple); }
.solo-row .rk { width: 34px; text-align: center; font-family: var(--font-round); font-size: 20px; }
.solo-row .nm { width: 120px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.solo-row .sc { width: 52px; text-align: right; font-family: var(--font-round); font-size: 20px; color: var(--purple-d); }
.solo-tv .solo-row { padding: 10px 14px; font-size: 18px; }
.solo-tv .solo-row .nm { width: 160px; }
.solo-q .choices { margin-top: 16px; }
/* ───────── 🔔 할리갈리 개인전: 원탁 · 가운데 종 · 카드 ───────── */
.hg-wrap, .hg-tv { --felt-a: #34B072; --felt-b: #17784A; --felt-c: #0E5534; --wood: #8A5A2B; }
.hg-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 980px) { .hg-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }
.hg-table { position: relative; aspect-ratio: 16 / 11; margin: 34px 44px 40px; }
.hg-felt { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 42%, var(--felt-a, #34B072), var(--felt-b, #17784A) 62%, var(--felt-c, #0E5534));
  border: 14px solid var(--wood, #8A5A2B); box-shadow: inset 0 0 0 3px rgba(255,255,255,.12), inset 0 10px 40px rgba(0,0,0,.35), 0 0 0 4px #5E3B1A, 0 18px 34px -12px rgba(40,24,8,.55); }
.hg-felt-suit { font-size: min(34vw, 260px); line-height: 1; color: rgba(255,255,255,.06); transform: translateY(-4%); user-select: none; }
.hg-seat { position: absolute; transform: translate(-50%, -50%); width: 86px; display: flex; flex-direction: column; align-items: center; gap: 1px; z-index: 2; }
.hg-av { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #FFF8EF; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); overflow: hidden; }
.hg-av svg { width: 50px; height: auto; }
.hg-seat .nm { max-width: 86px; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.95); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.hg-seat.me .hg-av { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,201,77,.55), 0 4px 10px rgba(0,0,0,.25); }
.hg-seat.me .nm { background: var(--yellow); }
.hg-seat.frz .hg-av { filter: saturate(.3) brightness(1.1); border-color: #9AD8FF; }
.hg-seat.won .hg-av { box-shadow: 0 0 0 6px rgba(255,201,77,.8), 0 0 26px rgba(255,201,77,.9); animation: hop .7s ease; }
.hg-ice { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; background: rgba(170,220,255,.55); animation: fade .2s; }
.hg-crown { position: absolute; top: -18px; font-size: 20px; z-index: 3; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); animation: bob 2.6s ease-in-out infinite; }
.hg-pile { position: relative; display: inline-flex; align-items: center; height: 22px; padding-left: 4px; }
.hg-pile i { width: 14px; height: 19px; margin-left: -9px; border-radius: 3px; background: linear-gradient(135deg, #fff, #F3EEE6); border: 1.5px solid var(--tc, #7C6CF2); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.hg-pile i:first-child { margin-left: 0; }
.hg-pile em { margin-left: 4px; min-width: 22px; padding: 0 6px; border-radius: 99px; background: var(--ink); color: #fff; font-style: normal; font-family: var(--font-round); font-size: 13px; text-align: center; }
.hg-mid { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; z-index: 1; }
.hg-bell { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; transition: filter .2s, opacity .2s, transform .1s; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.hg-bell:active { transform: scale(.94); }
.hg-bell .hg-dome, .hg-fab .hg-dome { transform-origin: 60px 88px; }
.hg-bell.off { filter: grayscale(.55) brightness(.85); opacity: .8; cursor: default; }
.hg-bell.ready, .hg-fab.ready { animation: hgReady 1.1s ease-in-out infinite; }
.hg-bell.hit .hg-dome, .hg-fab.hit .hg-dome { animation: hgRing .7s ease; }
@keyframes hgRing { 0% { transform: translateY(0); } 12% { transform: translateY(6px) scaleY(.94); } 30% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } 70% { transform: rotate(-4deg); } 100% { transform: none; } }
@keyframes hgReady { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,226,120,0)); } 50% { filter: drop-shadow(0 0 16px rgba(255,226,120,.95)); } }
.hg-deck { position: relative; width: 52px; height: 72px; display: grid; place-items: center; }
.hg-deck i { position: absolute; inset: 0; border-radius: 8px; border: 2px solid #fff; background: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 4px, transparent 4px 9px), var(--tc, #7C6CF2); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.hg-deck i:nth-child(2) { transform: translate(-3px, -3px); } .hg-deck i:nth-child(3) { transform: translate(-6px, -6px); }
.hg-deck b { position: relative; z-index: 1; margin: -10px 0 0 -6px; font-family: var(--font-round); font-size: 22px; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.5); }
.hg-deck small { position: absolute; bottom: -20px; white-space: nowrap; font-size: 11px; color: #E6FFF1; }
.hg-mini { width: 52px; min-height: 72px; }
.hg-face { width: 52px; height: 72px; border-radius: 8px; background: #fff; border: 2px solid var(--tc); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--tc); box-shadow: 0 3px 8px rgba(0,0,0,.3); animation: flipBack .45s ease; }
.hg-face span { font-size: 24px; line-height: 1; } .hg-face b { font-family: var(--font-round); font-size: 18px; }
.hg-say { display: table; margin: -22px auto 0; max-width: 92%; padding: 6px 18px; border-radius: 99px; background: #17784A; box-shadow: 0 4px 10px -4px rgba(0,0,0,.4); position: relative; z-index: 3; color: #fff; font-size: 14.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-tbl { white-space: nowrap; }
.hg-count { display: inline-block; min-width: 20px; font-family: var(--font-round); font-size: 20px; color: var(--yellow); }
.hg-fly { position: absolute; left: 50%; top: 46%; z-index: 4; width: 34px; height: 46px; margin: -23px 0 0 -17px; display: grid; place-items: center; border-radius: 6px; background: #fff; border: 2px solid var(--tc); color: var(--tc); font-size: 20px; box-shadow: 0 4px 10px rgba(0,0,0,.35); transition: left .9s cubic-bezier(.4,1.3,.5,1), top .9s cubic-bezier(.4,1.3,.5,1), transform .9s, opacity .3s .8s; pointer-events: none; }
.hg-fly.go { transform: rotate(360deg) scale(.8); opacity: 0; }
/* 카드(문제) */
.hg-card { position: relative; padding: 18px 20px 16px; border-radius: 22px; background: #fff; border: 3px solid var(--tc, #7C6CF2); box-shadow: var(--shadow-lift); }
.hg-card.open { animation: flipBack .45s ease; }
.hg-card.trap { border-style: dashed; border-color: var(--peach); background: linear-gradient(#FFF7F2, #fff 40%); }
.hg-card.back { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; background: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 10px, transparent 10px 20px), var(--tc, #7C6CF2); color: #fff; }
.hg-card.back.dim { filter: grayscale(.5); }
.hg-card.back.center { color: var(--ink); background: #fff; }
.hg-back-face { width: 76px; height: 104px; border-radius: 12px; border: 3px solid #fff; display: grid; place-items: center; font-size: 46px; background: rgba(255,255,255,.12); }
.hg-result { padding: 10px 16px; border-radius: 16px; background: rgba(255,255,255,.96); color: var(--ink); max-width: 92%; animation: stamp .45s ease both; }
.hg-result b { font-size: 18px; }
.hg-corner { position: absolute; top: 10px; left: 14px; display: flex; flex-direction: column; align-items: center; line-height: 1; color: var(--tc, #7C6CF2); }
.hg-corner span { font-size: 22px; } .hg-corner b { font-family: var(--font-round); font-size: 16px; }
.hg-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 4px; margin: 0 0 8px 34px; }
.hg-card .q-body { margin-left: 34px; font-size: 19px; }
.hg-card .choices { margin-top: 14px; }
.hg-claim { margin-top: 14px; padding: 14px 18px; border-radius: 16px; background: var(--peach-s); border: 2px solid var(--peach); font-size: 21px; text-align: center; }
.hg-claim b { font-family: var(--font-round); color: var(--peach-d); font-size: 26px; }
.hg-time { height: 8px; margin-top: 14px; border-radius: 99px; background: #F1ECE3; overflow: hidden; }
.hg-time i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--yellow) 40%, var(--mint)); transition: width .25s linear; }
.hg-card.shake { animation: shake .4s; }
/* 좁은 화면: 종이 화면 아래쪽에 늘 떠 있다 */
.hg-fab { display: none; position: fixed; right: 16px; bottom: calc(16px + var(--safe-b)); z-index: 60; width: 88px; height: 88px; border-radius: 50%; border: 4px solid #fff; background: radial-gradient(circle at 50% 40%, #2FA36B, #116340); box-shadow: 0 10px 24px -6px rgba(0,0,0,.45); cursor: pointer; place-items: center; padding: 0; touch-action: manipulation; }
.hg-fab.off { filter: grayscale(.6); opacity: .75; }
.hg-fab.hold { right: 116px; background: radial-gradient(circle at 50% 40%, #FF9A6B, #D9542B); color: #fff; font-size: 34px; line-height: 1; display: none; flex-direction: column; align-items: center; justify-content: center; }
.hg-fab.hold small { font-size: 13px; font-weight: 800; font-family: var(--font-round); margin-top: 2px; }
@media (max-width: 979px) { .hg-fab.hold:not([hidden]) { display: flex; } }
.hg-fab[hidden] { display: none !important; }
.hg-trapbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.hg-trapbtns .btn { min-height: 56px; font-size: 18px; font-family: var(--font-round); }
.hg-tb-ring { background: #2FA36B; border-color: #1E8455; color: #fff; }
.hg-tb-hold { background: #FF8A5B; border-color: #D9542B; color: #fff; }
.hg-trapbtns .btn.off { opacity: .55; }
@media (max-width: 979px) { .hg-fab { display: grid; } .hg-wrap { padding-bottom: 96px; } }
@media (max-width: 700px) {
  .hg-table { aspect-ratio: 4 / 3.3; margin: 30px 32px 36px; }
  .hg-seat { width: 66px; } .hg-av { width: 44px; height: 44px; } .hg-av svg { width: 40px; } .hg-seat .nm { font-size: 11px; max-width: 66px; padding: 0 6px; }
  .hg-mid { gap: 8px; } .hg-mid .hg-bell svg { width: 78px; height: auto; }
  .hg-deck, .hg-mini, .hg-face { width: 40px; } .hg-deck, .hg-face { height: 56px; } .hg-mini { min-height: 56px; }
  .hg-say { font-size: 13px; margin-top: -18px; } .hg-tbl { display: none; }
  .hg-card .q-body { margin-left: 26px; font-size: 17px; } .hg-tags { margin-left: 26px; }
}
/* 로비 · 설정 */
.hg-lobby { max-width: 660px; margin: 10px auto; }
.hg-lobby-bell { display: inline-block; animation: bob 3s ease-in-out infinite; }
.hg-rules { text-align: left; margin: 0 auto; max-width: 540px; padding-left: 22px; display: grid; gap: 8px; }
.hg-setup-bell { line-height: 0; }
/* TV: 원탁 여러 개 */
.hg-room { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.hg-tv { padding: 12px 12px 10px; border-radius: 24px; background: #fff; border: 2px solid var(--line); border-top: 8px solid var(--tc); box-shadow: var(--shadow); }
.hg-tv-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-round); }
.hg-tv-head b { font-size: 20px; color: var(--tc); } .hg-tv-head span { color: var(--muted); }
.hg-table.sm { margin: 28px 34px 30px; }
.hg-table.sm .hg-felt { border-width: 9px; }
.hg-table.sm .hg-felt-suit { font-size: 120px; }
.hg-table.sm .hg-seat { width: 62px; } .hg-table.sm .hg-av { width: 42px; height: 42px; } .hg-table.sm .hg-av svg { width: 38px; }
.hg-table.sm .hg-seat .nm { font-size: 11px; max-width: 64px; padding: 0 6px; }
.hg-table.sm .hg-mid { top: 50%; }
.hg-table.sm .hg-fly { top: 50%; }
.hg-table.done .hg-felt { filter: saturate(.5); }
.hg-tv-say { text-align: center; font-size: 15px; min-height: 22px; }
body.presenting .hg-tv-say, :fullscreen .hg-tv-say { font-size: 18px; }
.hg-champs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; }
.hg-champ { padding: 6px 14px; border-radius: 99px; background: #fff; border: 2px solid var(--tc); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .hg-bell.ready, .hg-fab.ready, .hg-crown, .hg-lobby-bell, .hg-seat.won .hg-av { animation: none; } }

/* ───────── 📝 형성평가 ───────── */
.quiz-live { margin-bottom: 18px; border-color: #FFC6B5; background: linear-gradient(135deg, #fff, var(--peach-s)); }
.score-row.quiz-past { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.score-row.quiz-past:disabled { cursor: default; opacity: .7; }
.quiz-ox { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.quiz-ox span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; padding: 6px 8px; border-radius: 12px; background: var(--gray-s); font-size: 13px; color: var(--muted); }
.quiz-ox span.o { background: var(--mint-s); } .quiz-ox span.x { background: var(--peach-s); }
.quiz-ox b { font-size: 18px; }
.quiz-review { padding: 12px 14px; margin-bottom: 10px; border-radius: 16px; border: 2px solid var(--line); background: #FFFDF9; }
.quiz-review.o { border-color: #A8E9D5; } .quiz-review.x { border-color: #FFC6B5; }
.quiz-review .q-body { margin: 4px 0 6px; }
.quiz-rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px; margin-bottom: 16px; }
.quiz-rates > div { display: flex; align-items: center; gap: 10px; }
.quiz-pick { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding: 4px; }
.quiz-pick-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: #FFFDF9; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.quiz-pick-row.on { border-color: var(--purple); background: var(--purple-s); }
.quiz-pick-row .ck { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--line); display: grid; place-items: center; background: #fff; color: var(--purple-d); font-weight: 800; }
.quiz-pick-row.on .ck { border-color: var(--purple); }
.badge .x { border: 0; background: none; padding: 0 0 0 4px; cursor: pointer; color: inherit; font: inherit; }

/* ───── ⭐ 성장(경험치·레벨·화폐) ───── */
.xp-badge {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 6px; border-radius: 99px;
  border: 2px solid var(--yellow); background: var(--yellow-s); color: var(--ink); font-family: var(--font-round); font-size: 15px; cursor: pointer;
}
.xp-badge .xp-lv { background: var(--purple); color: #fff; border-radius: 99px; padding: 3px 9px; font-size: 14px; }
.xp-badge .xp-coin { white-space: nowrap; color: var(--yellow-d); }
.xp-badge.pop { animation: xpPop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes xpPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.xp-mini { display: inline-block; width: 46px; height: 7px; border-radius: 99px; background: rgba(124, 108, 242, .18); overflow: hidden; }
.xp-mini > i { display: block; height: 100%; background: var(--purple); border-radius: inherit; }
.xp-mini.wide { display: block; width: 120px; margin-top: 4px; }
.lvup-tag { display: inline-block; margin-top: 6px; padding: 4px 14px; border-radius: 99px; background: var(--yellow); color: #fff; font-family: var(--font-round); letter-spacing: .08em; }

.growth-hero { flex-wrap: wrap; }
.lv-medal {
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; flex: none;
  background: #fff; color: var(--purple-d); font-family: var(--font-round); font-size: 44px; line-height: 1; box-shadow: 0 0 0 6px rgba(255,255,255,.35);
}
.lv-medal small { font-size: 16px; }
.coin-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px; border-radius: var(--r); background: rgba(255,255,255,.22); }
.coin-box b { font-family: var(--font-round); font-weight: 400; font-size: 28px; }
.growth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.lv-map { display: flex; flex-direction: column; gap: 6px; }
.lv-step { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--gray-s); color: var(--muted); }
.lv-step .lv-no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-content: center; background: #fff; font-family: var(--font-round); font-size: 14px; }
.lv-step.done { background: var(--mint-s); color: var(--ink); }
.lv-step.done .lv-no { background: var(--mint); color: #fff; }
.lv-step.now { background: var(--purple-s); color: var(--purple-d); outline: 2px solid var(--purple); font-weight: 700; }
.lv-step.now .lv-no { background: var(--purple); color: #fff; }
.rule-list { display: flex; flex-direction: column; gap: 6px; }
.rule-list > div { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 2px dashed var(--line); }
.pt-log { display: flex; flex-direction: column; }
.pt-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 2px dashed var(--line); }
.pt-row .plus { color: var(--mint-d); white-space: nowrap; }
.pt-row .minus { color: var(--red); white-space: nowrap; }
.pt-who { min-width: 64px; }
.grant-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.grant-form .field:not(.grow) { width: 120px; }
.sm-input { min-height: 42px; padding: 6px 10px; }
.game-log { width: 100%; border: 2px solid var(--line); cursor: pointer; font: inherit; color: inherit; }
.game-log:hover { border-color: var(--purple); }
@media (max-width: 800px) { .growth-grid { grid-template-columns: 1fr; } }

/* ───── 🏪 수학 상점 ───── */
.shop-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.shop-wallet { display: flex; flex-direction: column; align-items: center; padding: 10px 20px; border-radius: var(--r); background: var(--yellow-s); border: 2px solid var(--yellow); }
.shop-wallet b { font-family: var(--font-round); font-weight: 400; font-size: 28px; color: var(--yellow-d); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.shop-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r); background: var(--card); border: 2px solid var(--line); box-shadow: var(--shadow); text-align: left; font: inherit; color: inherit; }
.shop-card h4 { font-family: var(--font-round); font-weight: 400; font-size: 19px; margin-top: 6px; }
.shop-card.out { opacity: .6; }
.shop-card.edit { cursor: default; }
.shop-edit { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.shop-card.hidden-item .shop-edit { opacity: .55; }
.shop-card.edit:hover { border-color: var(--purple); }
.shop-card.hidden-item { background: var(--gray-s); }
.shop-pic { aspect-ratio: 4 / 3; border-radius: 14px; background: var(--yellow-s); display: grid; place-content: center; overflow: hidden; font-size: 54px; }
.shop-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-pic:has(img) { display: block; }
.shop-pic.sm { width: 96px; font-size: 34px; }
.shop-price { font-family: var(--font-round); font-weight: 400; font-size: 20px; color: var(--yellow-d); }
.order-row { flex-wrap: wrap; }
.seg .cnt:not(:empty) { margin-left: 4px; padding: 0 7px; border-radius: 99px; background: var(--peach); color: #fff; font-size: 13px; }

/* ───── 🏫 학교 시험 성적 ───── */
.goal-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--mint-s); border-color: #A8E9D5; }
.exam-list { display: flex; flex-direction: column; gap: 10px; }
.exam-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 2px solid var(--line); box-shadow: var(--shadow); flex-wrap: wrap; }
.exam-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-content: center; font-size: 24px; background: var(--purple-s); }
.exam-card .score b { font-family: var(--font-round); font-weight: 400; font-size: 28px; color: var(--purple-d); }
.exam-card .score small { color: var(--muted); }
.exam-card .up { color: var(--mint-d); font-weight: 700; }
.exam-card .down { color: var(--peach-d); }
.g-chart { width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto; }
.g-chart .cg { stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 4; }
.g-chart .ct { fill: var(--muted); font-size: 12px; }
.g-chart .cv { fill: var(--ink); font-size: 13px; font-weight: 700; }
.g-legend { display: flex; gap: 14px; justify-content: center; font-size: 14px; color: var(--muted); }
.g-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* ───── 💬 질문 게시판 ───── */
.bd-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 2px solid var(--line); box-shadow: var(--shadow); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.bd-item:hover { border-color: var(--purple); }
.bd-item.solved { background: #FBFFFD; }
.bd-state { font-size: 26px; }
.bd-title { font-family: var(--font-round); font-size: 18px; }
.bd-snip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-body { font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
.bd-img { margin-top: 12px; min-height: 60px; cursor: zoom-in; }
.bd-img img { max-width: 100%; max-height: 420px; border-radius: 14px; border: 2px solid var(--line); display: block; }
.bd-answer.liked { border-color: var(--yellow); background: var(--yellow-s); }
.bd-answer.teacher { border-color: #A8E9D5; }
.bd-thumb { width: 88px; height: 66px; object-fit: cover; border-radius: 10px; border: 2px solid var(--line); }
.bd-attach { cursor: pointer; }

/* 🧑‍🎓 학생·성적 › 한눈에 보기 */
.matrix.overview tbody tr:hover td { background: rgba(124, 108, 255, .08); }
.matrix.overview td:nth-child(2) { text-align: left; }

/* ───────── 🐉 레이드 던전 (raid-art.js 그림 + 움직임) ───────── */
.ra-stage { position: relative; background: radial-gradient(ellipse at 50% 85%, #3B2A6B 0%, #1A1430 55%, #0D0A1A 100%); color: #EDE9FF; border-radius: var(--r-lg); padding: 18px 16px; overflow: hidden; }
.ra-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 8% 30%, rgba(255,154,46,.18), transparent 28%), radial-gradient(circle at 92% 30%, rgba(255,154,46,.18), transparent 28%); animation: ra-flicker 2.4s infinite alternate; }
.ra-stage h2, .ra-stage h3 { color: #FFE7A3; font-family: var(--font-round); }
.ra-stage .muted { color: #A9A0CC; }
.ra-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ra-boss { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.ra-boss.big { width: min(320px, 70vw); height: min(320px, 70vw); }
.ra-shadow { position: absolute; left: 18%; right: 18%; bottom: 2%; height: 10%; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(4px); }
.ra-breathe { transform-origin: 50% 90%; animation: ra-breathe 2.6s ease-in-out infinite; }
.ra-float { animation: ra-float 3.2s ease-in-out infinite; }
.ra-glow { animation: ra-glow 1.6s ease-in-out infinite alternate; }
.ra-drip { animation: ra-float 2s ease-in-out infinite; } .ra-drip2 { animation: ra-float 2.6s ease-in-out infinite reverse; }
.ra-wing-l { transform-origin: 70px 110px; animation: ra-wing-l 1.8s ease-in-out infinite; }
.ra-wing-r { transform-origin: 130px 110px; animation: ra-wing-r 1.8s ease-in-out infinite; }
.ra-hit .ra-svg { animation: ra-hit .45s ease; }
.ra-down .ra-svg { animation: ra-down 1.4s ease forwards; }
.ra-down .ra-shadow { opacity: 0; transition: opacity 1s; }
.ra-torch { transform-origin: 50% 100%; transform-box: fill-box; animation: ra-torch .35s ease-in-out infinite alternate; }
.ra-torch2 { animation-delay: .17s; }
.ra-gate { width: 100%; max-width: 480px; margin: 0 auto; border-radius: var(--r); overflow: hidden; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6); }
.ra-door-l, .ra-door-r { transition: transform 1.6s cubic-bezier(.6,0,.3,1); transform-box: fill-box; }
.ra-door-l { transform-origin: 0% 50%; } .ra-door-r { transform-origin: 100% 50%; }
.ra-open .ra-door-l { transform: scaleX(.08); } .ra-open .ra-door-r { transform: scaleX(.08); }
.ra-hp { position: relative; height: 22px; border-radius: 99px; background: #2A2145; border: 2px solid #5E5091; overflow: hidden; }
.ra-hp > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #FF5E8A, #FF9A3D); transition: width .6s cubic-bezier(.3,1.2,.5,1); }
.ra-hp > i.lag { background: #FFE7A3; opacity: .6; transition: width 1.4s ease .4s; }
.ra-hp > b { position: relative; display: block; text-align: center; font-size: 13px; line-height: 18px; color: #fff; text-shadow: 0 1px 2px #000; }
.ra-pop { position: absolute; top: 30%; font-family: var(--font-round); font-size: 30px; color: #FFE14D; text-shadow: 0 3px 0 #7A2E00, 0 0 12px rgba(255,180,60,.8); pointer-events: none; animation: ra-pop 1.3s ease-out forwards; z-index: 5; }
.ra-pop.crit { font-size: 42px; color: #FF5E8A; text-shadow: 0 3px 0 #5A0020, 0 0 16px rgba(255,94,138,.9); }
.ra-pop.heal { color: #5FD39B; text-shadow: 0 3px 0 #0C4A30; }
.ra-pop.miss { color: #A9A0CC; font-size: 22px; text-shadow: none; }
.ra-shake { animation: ra-shake .5s; }
.ra-alarm { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(120,0,30,.55); animation: ra-alarm 1s infinite alternate; border-radius: inherit; }
.ra-alarm b { font-family: var(--font-round); font-size: 30px; color: #FFE14D; text-shadow: 0 3px 0 #5A0020; }
.ra-map { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ra-map-step { display: flex; flex-direction: column; align-items: center; width: 120px; opacity: .45; filter: grayscale(.8); transition: .4s; }
.ra-map-step.cur { opacity: 1; filter: none; transform: scale(1.08); }
.ra-map-step.done { opacity: .8; filter: grayscale(.2); }
.ra-map-step.done .ra-map-icon::after { content: '✔'; position: absolute; right: 4px; bottom: 4px; font-size: 22px; color: #5FD39B; text-shadow: 0 2px 0 #0C4A30; }
.ra-map-icon { position: relative; width: 84px; height: 84px; } .ra-map-icon .ra-boss { width: 84px; height: 84px; }
.ra-map-label { text-align: center; font-size: 12px; line-height: 1.35; } .ra-map-label b { display: block; color: #FFE7A3; } .ra-map-label small { color: #A9A0CC; }
.ra-map-link { width: 24px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, #5E5091 0 6px, transparent 6px 10px); }
.ra-fame { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ra-fame-card { background: linear-gradient(160deg, #3A2C66, #241B45); border: 2px solid #6A58B0; border-radius: var(--r); padding: 12px; text-align: center; }
.ra-fame-card .ico { font-size: 30px; } .ra-fame-card b { display: block; color: #FFE7A3; font-family: var(--font-round); margin-top: 4px; }
.ra-fame-card .who { font-size: 15px; margin-top: 6px; color: #fff; } .ra-fame-card small { color: #A9A0CC; }
.ra-fame-card.gold { border-color: #FFD25E; box-shadow: 0 0 18px rgba(255,210,94,.35); }
@keyframes ra-breathe { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes ra-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ra-glow { from { opacity: .65; } to { opacity: 1; } }
@keyframes ra-wing-l { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes ra-wing-r { 0%,100% { transform: rotate(0); } 50% { transform: rotate(12deg); } }
@keyframes ra-hit { 0% { transform: translateX(0); filter: none; } 20% { transform: translateX(-10px); filter: brightness(2.2) saturate(.3); } 45% { transform: translateX(8px); } 70% { transform: translateX(-4px); } 100% { transform: none; filter: none; } }
@keyframes ra-down { 0% { transform: none; opacity: 1; } 30% { transform: rotate(-6deg); filter: brightness(2); } 100% { transform: translateY(30%) scale(.6) rotate(12deg); opacity: 0; filter: grayscale(1); } }
@keyframes ra-torch { from { transform: scale(1, 1); opacity: .85; } to { transform: scale(.9, 1.12); opacity: 1; } }
@keyframes ra-flicker { from { opacity: .7; } to { opacity: 1; } }
@keyframes ra-pop { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { transform: translateY(-10px) scale(1.25); opacity: 1; } 100% { transform: translateY(-80px) scale(1); opacity: 0; } }
@keyframes ra-shake { 0%,100% { transform: none; } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
@keyframes ra-alarm { from { background: rgba(120,0,30,.45); } to { background: rgba(180,0,40,.7); } }
@media (prefers-reduced-motion: reduce) { .ra-breathe, .ra-float, .ra-glow, .ra-torch, .ra-wing-l, .ra-wing-r, .ra-stage::before { animation: none; } }
.ra-boss-wrap { position: relative; margin: 6px auto; width: min(240px, 60vw); }
.ra-boss-wrap .ra-boss { width: 100%; height: auto; aspect-ratio: 1; }
.ra-tv .ra-boss-wrap { width: min(340px, 60vw); }
.ra-qimg { display: block; max-width: 100%; margin: 4px auto; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); }
.ra-nums { grid-template-columns: repeat(5, 1fr) !important; }
.ra-nums .choice { justify-content: center; } .ra-nums .choice .no { margin: 0; font-size: 20px; }
.ra-php { position: relative; height: 18px; border-radius: 99px; background: #3A2145; border: 2px solid #8A4A6A; overflow: hidden; }
.ra-php > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #5FD39B, #B9F5CF); transition: width .5s; }
.ra-php > b { position: relative; display: block; text-align: center; font-size: 12px; line-height: 14px; color: #fff; text-shadow: 0 1px 2px #000; }
.ra-php.down { border-color: #555; } .ra-php.down > i { width: 0 !important; }
.ra-php.low > i { background: linear-gradient(90deg, #FF5E5E, #FFB36B); animation: ra-blink .8s infinite alternate; }
.ra-lives { font-size: 18px; letter-spacing: 1px; white-space: nowrap; }
.ra-lives.danger { animation: ra-blink .6s infinite alternate; }
.tg-top .ra-lives { font-size: 26px; }
.ra-rescue { margin: -4px 0 10px; padding: 10px 12px; border-radius: 12px; background: #FFE3E3; color: #9B1C1C; font-weight: 700; text-align: center; animation: ra-blink .7s infinite alternate; }
.ra-rescue b { font-size: 20px; }
.ra-rage { box-shadow: 0 0 0 3px #FF3D3D, 0 0 28px rgba(255,40,40,.65) inset; animation: ra-rage 1.2s infinite alternate; }
.ra-rage-badge { animation: ra-blink .5s infinite alternate; }
@keyframes ra-blink { from { opacity: 1; } to { opacity: .55; } }
@keyframes ra-rage { from { box-shadow: 0 0 0 3px #FF3D3D, 0 0 20px rgba(255,40,40,.45) inset; } to { box-shadow: 0 0 0 5px #FF7A1A, 0 0 60px rgba(255,60,0,.8) inset; } }
.ra-wbars { display: grid; gap: 4px; margin-top: 8px; } .ra-wbars > div { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.ra-wbars .bar { background: #2A2145; } .ra-wbars .bar i { background: linear-gradient(90deg, #FF5E8A, #FFB547); }
.ra-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.ra-role { text-align: center; padding: 14px 12px; border-radius: var(--r); border: 3px solid var(--line); background: var(--card); cursor: pointer; font: inherit; color: inherit; transition: .2s; }
.ra-role .ico { font-size: 34px; } .ra-role b { display: block; font-family: var(--font-round); font-size: 18px; margin: 2px 0 4px; } .ra-role small { color: var(--ink-2); line-height: 1.45; }
.ra-role.on { border-color: var(--purple); background: var(--purple-s); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.ra-rules { display: grid; gap: 6px; margin-top: 8px; line-height: 1.5; }
.ra-intro { min-height: 360px; display: flex; flex-direction: column; justify-content: center; }
.ra-intro-title { margin-top: 14px; animation: ra-pop-in 1.2s ease .6s both; } .ra-intro-title small { color: #FF9DB8; font-size: 18px; }
@keyframes ra-pop-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.ra-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; }
.ra-tier { padding: 12px 8px; border-radius: var(--r); border: 0; cursor: pointer; font: inherit; color: #fff; text-align: center; box-shadow: 0 4px 0 rgba(0,0,0,.18); transition: transform .15s; }
.ra-tier .ico { font-size: 30px; } .ra-tier b { display: block; font-family: var(--font-round); font-size: 19px; } .ra-tier small { display: block; opacity: .92; font-size: 12px; }
.ra-tier .why { margin-top: 3px; opacity: .8; }
.ra-tier:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.ra-tier:disabled { filter: grayscale(1); opacity: .45; cursor: not-allowed; }
.t-jab { background: linear-gradient(160deg, #5FD39B, #22A07D); } .t-strike { background: linear-gradient(160deg, #FFB547, #E8762A); }
.t-ult { background: linear-gradient(160deg, #A77BFF, #6A3FE0); } .t-killer { background: linear-gradient(160deg, #FF5E8A, #9A1040); }
.ra-skill-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: -4px -4px 12px; border-radius: var(--r-sm); background: var(--red-s); color: #9A1040; font-size: 16px; }
.ra-skillbar { margin-top: 10px; padding: 10px; border-radius: var(--r-sm); text-align: center; background: rgba(255,94,138,.18); border: 2px solid #FF5E8A; animation: ra-glow 1s infinite alternate; }
.ra-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.ra-stats > div { text-align: center; padding: 10px 4px; border-radius: var(--r-sm); background: var(--purple-s); }
.ra-stats b { display: block; font-family: var(--font-round); font-size: 22px; color: var(--purple-d); } .ra-stats small { color: var(--ink-2); }
.ra-record { display: grid; gap: 6px; }
.ra-rec { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--card); font: inherit; color: inherit; cursor: pointer; text-align: left; }
.ra-rec.ok { border-color: var(--mint-s); } .ra-rec.no { border-color: var(--red-s); background: #FFF7F8; }
.ra-news { display: inline-block; margin: 8px 4px 0; padding: 8px 14px; border-radius: 99px; background: linear-gradient(90deg, #FFD25E, #FF9A3D); color: #4A2A00; font-weight: 700; animation: ra-pop-in .8s ease both; }
.ra-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ra-pcard { background: var(--card); border-radius: var(--r); padding: 10px 12px; box-shadow: var(--shadow); display: grid; gap: 6px; }
.ra-pcard.down { background: #EEE9F2; }
.ra-pmem { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; } .ra-pmem span { padding: 2px 6px; border-radius: 99px; background: var(--gray-s); color: var(--muted); }
.ra-pmem span.on { background: var(--mint-s); color: var(--mint-d); }
.ra-world h3 { font-size: 17px; }
@media (max-width: 560px) { .ra-stats { grid-template-columns: repeat(2, 1fr); } .ra-world .row { flex-direction: column; } }
.ra-stage .tip { color: var(--ink); }
.ra-stage .g-timer { color: #FFE7A3; }
.ra-world .ra-boss { width: 110px; height: 110px; }
.ra-role small b { display: inline; font-family: inherit; font-size: inherit; margin: 0; color: var(--purple-d); }
.ra-fame { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ra-act .choices { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ra-banner { position: absolute; left: 0; right: 0; top: 30%; margin: 0 auto; z-index: 7; width: min(92%, 520px); padding: 16px 18px; border-radius: var(--r-lg); text-align: center;
  background: rgba(20,14,40,.92); border: 3px solid #FFD25E; box-shadow: 0 18px 50px rgba(0,0,0,.5); animation: ra-pop-in .45s cubic-bezier(.3,1.5,.5,1) both; }
.ra-banner b { display: block; font-family: var(--font-round); font-size: 30px; color: #FFE14D; }
.ra-banner p { margin: 6px 0 0; color: #EDE9FF; }
.ra-banner.good { border-color: #5FD39B; } .ra-banner.good b { color: #8CF0C0; }
.ra-banner.bad { border-color: #FF5E8A; } .ra-banner.bad b { color: #FF9DB8; }

/* ───────── 👕 원곡이 꾸미기 ───────── */
.hero-avatar { position: relative; background: none; border: 0; padding: 0; cursor: pointer; flex: none; }
.hero-avatar .badge { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.hero-avatar:hover .mascot { transform: translateY(-3px) rotate(-3deg); transition: transform .2s; }
.wd-grid { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 16px; align-items: start; }
.wd-stage { position: sticky; top: 84px; }
.wd-pic { display: flex; justify-content: center; padding: 6px 0; }
.wd-pic .mascot { animation: wdBob 2.6s ease-in-out infinite; }
@keyframes wdBob { 50% { transform: translateY(-6px); } }
.wd-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.wd-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; border: 2px solid var(--line, #eee); background: var(--card, #fff); cursor: pointer; font: inherit; color: inherit; }
.wd-item b { font-size: 14px; }
.wd-item.on { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124, 108, 242, .18); }
.wd-item.locked .wd-thumb { opacity: .45; filter: grayscale(.6); }
.wd-thumb { height: 80px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .wd-grid { grid-template-columns: 1fr; } .wd-stage { position: static; } }
@media (prefers-reduced-motion: reduce) { .wd-pic .mascot { animation: none; } }
.shop-head .seg button { white-space: nowrap; }
@media (max-width: 600px) {
  .shop-head > .grow { flex-basis: 100%; }
  .shop-wallet { flex-direction: row; gap: 10px; width: 100%; justify-content: center; padding: 8px 14px; }
  .shop-wallet b { font-size: 22px; }
  /* 화폐 숫자가 커져도(×10) 상단 제목이 잘리지 않게 */
  .topbar .xp-badge { gap: 5px; padding: 3px 9px 3px 4px; font-size: 13px; min-height: 34px; }
  .topbar .xp-badge .xp-lv { font-size: 12px; padding: 2px 7px; }
  .topbar .btn.sm { padding: 6px 10px; font-size: 14px; }
  .brand { font-size: 14px; }
}

/* ───────── 🌱 친구 원곡이(레이드·게임·게시판에 나오는 학생 캐릭터) ───────── */
.av-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 10px; }
.av-mem { display: flex; flex-direction: column; align-items: center; width: 84px; opacity: .55; filter: grayscale(.5); transition: opacity .3s, filter .3s; }
.av-mem.on, .av-mem.me { opacity: 1; filter: none; }
.av-mem.on .mascot { animation: wdBob 2.6s ease-in-out infinite; }
.av-mem b { font-size: 12.5px; line-height: 1.2; text-align: center; word-break: keep-all; }
.av-mem.sm { width: 64px; } .av-mem.sm b { font-size: 11.5px; }
.av-mem.me b { color: #FFE7A3; }
.av-team.light .av-mem b { color: var(--ink, #3B3355); }
.av-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.av-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px 2px 2px; border-radius: 99px; font-size: 13px; background: rgba(255,255,255,.1); }
.av-chip .mascot { flex: none; }
.av-chip.on { background: rgba(63,208,164,.22); } .av-chip.me { background: rgba(255,214,94,.28); font-weight: 700; }
.av-chips.light .av-chip { background: var(--gray-s); } .av-chips.light .av-chip.on { background: var(--mint-s); color: var(--mint-d); }
.ra-arena { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.ra-arena .ra-boss-wrap { margin: 6px 0; }
.ra-me { display: flex; flex-direction: column; align-items: center; flex: none; margin-bottom: 8px; }
.ra-me span { font-size: 12px; color: #FFE7A3; font-weight: 700; }
.ra-me .mascot { animation: wdBob 2.2s ease-in-out infinite; }
.ra-me.ra-atk .mascot { animation: raDash .6s ease-out; }
@keyframes raDash { 0% { transform: none; } 35% { transform: translateX(46px) rotate(12deg) scale(1.08); } 60% { transform: translateX(30px) rotate(-6deg); } 100% { transform: none; } }
.ra-av { display: flex; justify-content: center; margin-bottom: -6px; }
.ra-fame-card .who .mascot { vertical-align: middle; margin-right: 2px; }
.ra-pmem span { display: inline-flex; align-items: center; gap: 2px; padding-left: 2px; }
.tg-crew { display: inline-flex; margin-left: -4px; vertical-align: middle; } .tg-crew .mascot { margin-left: -8px; }
.solo-row .mascot { flex: none; }
.pd .mascot { display: block; margin: 0 auto; }
.bd-state .mascot { display: block; }
/* 보스 앞 우리 파티: 파티원(뒤, 두 줄로 엇갈려) + 나(맨 앞) */
.ra-team { display: flex; align-items: flex-end; flex: none; gap: 2px; }
.ra-mates { display: grid; grid-template-columns: repeat(2, auto); gap: 0 2px; align-items: end; margin-bottom: 10px; }
.ra-mates.many { grid-template-columns: repeat(3, auto); }
.ra-mate { position: relative; display: flex; flex-direction: column; align-items: center; width: 64px; opacity: .5; filter: grayscale(.6); transition: opacity .3s, filter .3s; }
.ra-mate:nth-child(even) { transform: translateY(-14px); }
.ra-mate.on { opacity: 1; filter: none; }
.ra-mate.on .mascot { animation: wdBob 2.6s ease-in-out infinite; }
.ra-mate:nth-child(3n+2).on .mascot { animation-delay: -.9s; } .ra-mate:nth-child(3n).on .mascot { animation-delay: -1.7s; }
.ra-mate.ra-atk .mascot { animation: raDash2 .6s ease-out; }
.ra-mate span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #EDE9FF; text-shadow: 0 1px 2px #000; }
.ra-mate .zz { position: absolute; top: 0; right: 4px; font-style: normal; font-size: 14px; }
.ra-mate .ra-pop.mate { top: -10%; font-size: 20px; }
@keyframes raDash2 { 0% { transform: none; } 35% { transform: translateX(30px) rotate(10deg) scale(1.08); } 60% { transform: translateX(18px) rotate(-5deg); } 100% { transform: none; } }
@media (max-width: 520px) {
  .ra-me .mascot { width: 72px; height: 72px; }
  .ra-arena .ra-boss-wrap { width: min(240px, 44vw); }
  .ra-mate { width: 40px; } .ra-mate .mascot { width: 40px; height: 40px; }
  .ra-mate span { max-width: 40px; font-size: 9.5px; }
  .ra-mate:nth-child(even) { transform: translateY(-10px); }
  .ra-mates.many .ra-mate { width: 32px; } .ra-mates.many .ra-mate .mascot { width: 32px; height: 32px; }
  .ra-mates.many .ra-mate span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .av-mem.on .mascot, .ra-me .mascot, .ra-me.ra-atk .mascot, .ra-mate.on .mascot, .ra-mate.ra-atk .mascot { animation: none; } }

/* ───────── ⚔️ 공격 연출(RaidArt.fx): 잽·강타·필살기·킬러 ───────── */
.fx { position: absolute; pointer-events: none; z-index: 6; }
/* 공격하는 원곡이 */
.fx-src { z-index: 7; position: relative; }
.fx-src.fx-jab .mascot { animation: fxJab .5s ease-out; }
.fx-src.fx-strike .mascot { animation: fxStrike .9s cubic-bezier(.3,.1,.3,1); }
/* 필살기·킬러: 역할별 동작(--d = 킬러 컷인만큼 늦춤) */
.fx-src.fx-r-dealer .mascot { animation: fxCharge .75s ease-in var(--d) both, fxVanish 1.25s ease calc(var(--d) + .75s); filter: drop-shadow(0 0 10px #7FD6FF) drop-shadow(0 0 22px #2E8BFF); }
.fx-src.fx-r-tank .mascot { animation: fxCrouch .6s ease-in var(--d) both, fxLeap .9s cubic-bezier(.3,.6,.5,1) calc(var(--d) + .6s); filter: drop-shadow(0 0 10px #FFB547) drop-shadow(0 0 22px #E8762A); }
.fx-src.fx-r-healer .mascot { animation: fxCharge 1.4s ease-in var(--d) both, fxRecoil .7s ease-out calc(var(--d) + 1.4s); filter: drop-shadow(0 0 10px #8CF0C0) drop-shadow(0 0 24px #FFF3B0); }
.fx-src.fx-killer .mascot { filter: drop-shadow(0 0 10px #FF5E8A) drop-shadow(0 0 22px #E0003A) !important; }
@keyframes fxVanish { 0% { transform: translateY(-14px) scale(1.18); opacity: 1; } 8% { transform: translateX(50px) scale(1.25, .8); opacity: 0; } 85% { transform: translateX(-10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fxCrouch { 0% { transform: none; } 100% { transform: translateY(8px) scale(1.15, .8); } }
@keyframes fxLeap { 0% { transform: translateY(8px) scale(1.15, .8); } 40% { transform: translate(30px, -130px) scale(.9, 1.15) rotate(-12deg); } 60% { transform: translate(55px, -110px) rotate(15deg); } 78% { transform: translate(70px, 0) scale(1.3, .75); } 100% { transform: none; } }
@keyframes fxJab { 0% { transform: none; } 18% { transform: translateX(22px) scale(1.05); } 32% { transform: translateX(6px); } 50% { transform: translateX(26px) rotate(6deg) scale(1.05); } 100% { transform: none; } }
@keyframes fxStrike { 0% { transform: none; } 30% { transform: translateX(-16px) rotate(-14deg) scaleY(.9); } 45% { transform: translateX(60px) rotate(16deg) scale(1.12); } 65% { transform: translateX(46px) rotate(-4deg); } 100% { transform: none; } }
@keyframes fxCharge { 0% { transform: none; } 20% { transform: translateY(4px) scale(.95, 1.05); } 100% { transform: translateY(-14px) scale(1.18); } }
@keyframes fxRecoil { 0% { transform: translateY(-14px) scale(1.18); } 25% { transform: translateX(-14px) scale(1.1); } 100% { transform: none; } }
@keyframes fxKillDash { 0% { transform: translateY(-14px) scale(1.18); opacity: 1; } 30% { transform: translateX(120px) scale(1.2); opacity: 0; } 70% { transform: translateX(-20px); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* 불꽃·충격파·베기·번쩍 */
.fx-spark { border-radius: 50%; margin: -4px 0 0 -4px; box-shadow: 0 0 8px currentColor; animation: fxSpark .8s ease-out forwards; }
@keyframes fxSpark { 0% { transform: translate(0, 0) scale(1.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.fx-ring { border: 5px solid #fff; border-radius: 50%; transform: translate(-50%, -50%) scale(.2); animation: fxRing .8s ease-out forwards; }
@keyframes fxRing { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; border-width: 10px; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; border-width: 1px; } }
.fx-slash { border-radius: 99px; transform: rotate(var(--r)) scaleX(0); box-shadow: 0 0 14px rgba(255,255,255,.8); animation: fxSlash .6s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes fxSlash { 0% { transform: rotate(var(--r)) scaleX(0); opacity: 1; } 35% { transform: rotate(var(--r)) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--r)) scaleX(1.05) scaleY(.1); opacity: 0; } }
.fx-flash { inset: 0; z-index: 9; animation: fxFlash .6s ease-out forwards; }
@keyframes fxFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.fx-bigshake { animation: fxBigShake .8s cubic-bezier(.36,.07,.19,.97); }
@keyframes fxBigShake { 0%,100% { transform: none; } 10% { transform: translate(-14px, 6px) rotate(-1deg); } 20% { transform: translate(12px, -8px) rotate(1deg); } 35% { transform: translate(-10px, 4px); } 50% { transform: translate(8px, -3px); } 65% { transform: translate(-5px, 2px); } 80% { transform: translate(3px, 0); } }
.ra-hit-mid .ra-svg { animation: fxBossMid .6s ease; }
@keyframes fxBossMid { 0% { transform: none; } 20% { transform: translateX(22px) rotate(5deg); filter: brightness(2.6) saturate(.2); } 50% { transform: translateX(-8px); } 100% { transform: none; filter: none; } }
.ra-hit-big .ra-svg { animation: fxBossBig 1s ease; }
@keyframes fxBossBig { 0% { transform: none; } 12% { transform: translateX(40px) rotate(10deg) scale(.92, 1.08); filter: brightness(3.5) saturate(0); } 30% { transform: translateX(28px) rotate(6deg); filter: brightness(1.8) hue-rotate(40deg); } 55% { transform: translateX(-12px) rotate(-3deg); filter: none; } 75% { transform: translateX(6px); } 100% { transform: none; } }
.fx-boss-zoom .ra-svg { animation: fxBossZoom 1.4s ease; }
@keyframes fxBossZoom { 0% { transform: none; } 30% { transform: scale(1.12); filter: brightness(.6) saturate(1.4); } 100% { transform: none; } }
/* 필살기·킬러: 무대 어둡게 + 컷인 */
.fx-dim { inset: 0; z-index: 5; background: radial-gradient(ellipse at 50% 50%, rgba(40,10,90,.35), rgba(5,0,20,.85)); animation: fxFadeIn .35s ease both; transition: opacity .5s; }
.fx-dim.red { background: radial-gradient(ellipse at 50% 50%, rgba(120,0,30,.35), rgba(25,0,5,.9)); }
.fx-dim.out { opacity: 0; }
@keyframes fxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.fx-cut { left: 0; right: 0; top: 18%; z-index: 8; display: flex; justify-content: center; animation: fxCutLife 1.25s ease forwards; }
.fx-cut-band { display: flex; align-items: center; gap: 12px; width: 120%; justify-content: center; padding: 10px 0; transform: skewY(-6deg);
  background: linear-gradient(90deg, transparent, rgba(110,60,255,.95) 15%, rgba(60,20,170,.95) 85%, transparent); border-top: 3px solid #FFE14D; border-bottom: 3px solid #FFE14D;
  animation: fxCutIn .35s cubic-bezier(.2,1.4,.4,1) both; }
.fx-cut.killer .fx-cut-band { background: linear-gradient(90deg, transparent, rgba(230,0,60,.95) 15%, rgba(110,0,25,.95) 85%, transparent); border-color: #fff; }
.fx-cut-av { transform: skewY(6deg); animation: fxCutAv .9s cubic-bezier(.2,1,.4,1) both .1s; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.fx-cut-txt { transform: skewY(6deg); display: flex; flex-direction: column; animation: fxCutTxt .5s cubic-bezier(.3,1.6,.5,1) both .2s; }
.fx-cut-txt b { font-family: var(--font-round); font-size: 44px; line-height: 1; color: #FFE14D; letter-spacing: 2px; text-shadow: 3px 3px 0 #2A0A6A, 0 0 18px rgba(255,225,77,.8); font-style: italic; }
.fx-cut.killer .fx-cut-txt b { color: #fff; text-shadow: 3px 3px 0 #6A0018, 0 0 22px rgba(255,46,94,.9); }
.fx-cut-txt small { color: #fff; font-weight: 700; font-size: 14px; text-shadow: 0 1px 3px #000; }
.fx-cut.mini { top: 6%; } .fx-cut.mini .fx-cut-band { padding: 4px 0; gap: 8px; } .fx-cut.mini .fx-cut-txt b { font-size: 26px; } .fx-cut.mini .fx-cut-txt small { font-size: 12px; }
@keyframes fxCutIn { 0% { transform: skewY(-6deg) translateX(-110%); } 100% { transform: skewY(-6deg); } }
@keyframes fxCutAv { 0% { transform: skewY(6deg) translateX(-160px) scale(.7); } 60% { transform: skewY(6deg) translateX(8px) scale(1.08); } 100% { transform: skewY(6deg) scale(1); } }
@keyframes fxCutTxt { 0% { transform: skewY(6deg) scale(2.6); opacity: 0; } 100% { transform: skewY(6deg) scale(1); opacity: 1; } }
@keyframes fxCutLife { 0%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(60px); } }
/* 기 모으기·빔 */
.fx-orb { width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: radial-gradient(circle, #fff 20%, #D9C2FF 45%, rgba(138,92,255,0) 70%); animation: fxOrb 1.1s ease-in forwards; }
.fx-orb.go { animation: fxOrbGo .3s ease-out forwards; }
@keyframes fxOrb { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(3.4); opacity: 1; } }
@keyframes fxOrbGo { 0% { transform: scale(3.4); opacity: 1; } 100% { transform: scale(6); opacity: 0; } }
.fx-mote { width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: #F1E6FF; box-shadow: 0 0 8px #B48CFF; opacity: 0; animation: fxMote .55s ease-in forwards; }
@keyframes fxMote { 0% { transform: translate(var(--dx), var(--dy)); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; } }
.fx-beam { height: 28px; border-radius: 99px; transform-origin: 0 50%; transform: rotate(var(--r)) scaleX(0);
  background: linear-gradient(180deg, rgba(138,92,255,0), #B48CFF 25%, #fff 45%, #fff 55%, #FFE14D 75%, rgba(255,225,77,0)); box-shadow: 0 0 26px #A77BFF, 0 0 60px #6A3FE0;
  animation: fxBeam .75s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes fxBeam { 0% { transform: rotate(var(--r)) scaleX(0); } 30% { transform: rotate(var(--r)) scaleX(1); } 70% { transform: rotate(var(--r)) scaleX(1) scaleY(1.3); opacity: 1; } 100% { transform: rotate(var(--r)) scaleX(1) scaleY(0); opacity: 0; } }
/* 🎯 약점 조준경 */
.fx-aim { border: 3px dashed #FF5E8A; border-radius: 50%; transform: translate(-50%, -50%) scale(2.2) rotate(0); animation: fxAim .5s ease-out forwards; box-shadow: 0 0 12px #FF5E8A inset; }
.fx-aim::before, .fx-aim::after { content: ''; position: absolute; background: #FF5E8A; left: 50%; top: -14%; width: 3px; height: 128%; margin-left: -1.5px; }
.fx-aim::after { transform: rotate(90deg); }
@keyframes fxAim { 0% { transform: translate(-50%, -50%) scale(2.2) rotate(-90deg); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } }
/* 💀 킬러: 금 간 화면 */
.fx-crack { z-index: 8; transition: opacity .5s; } .fx-crack.out { opacity: 0; }
.fx-crack svg { width: 100%; height: 100%; overflow: visible; }
.fx-crack path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 4px #FF2E5E); stroke-dasharray: 300; stroke-dashoffset: 300; animation: fxCrack .25s ease-out forwards; }
@keyframes fxCrack { to { stroke-dashoffset: 0; } }
/* 역할별 컷인 색 */
.fx-cut.ult.dealer .fx-cut-band { background: linear-gradient(90deg, transparent, rgba(30,120,230,.95) 15%, rgba(10,40,120,.95) 85%, transparent); }
.fx-cut.ult.tank .fx-cut-band { background: linear-gradient(90deg, transparent, rgba(230,120,30,.95) 15%, rgba(120,50,0,.95) 85%, transparent); }
.fx-cut.ult.healer .fx-cut-band { background: linear-gradient(90deg, transparent, rgba(30,170,120,.95) 15%, rgba(0,80,60,.95) 85%, transparent); border-color: #FFF3B0; }
/* ⚔️ 딜러 잔상 */
.fx-ghost { transform: translate(-50%, -50%); opacity: .85; filter: drop-shadow(0 0 8px var(--c)) brightness(1.4) saturate(.6); animation: fxGhost .38s ease-out forwards; z-index: 7; }
.fx-ghost .mascot { width: 56px; height: 56px; }
@keyframes fxGhost { 0% { transform: translate(-50%, -50%) scale(1.2); opacity: .95; } 100% { transform: translate(-50%, -50%) scale(.9) translateX(16px); opacity: 0; } }
/* 🛡️ 탱커 방패·땅 울림 */
.fx-shield { transform: translate(-50%, -260%) scale(1.5); opacity: 0; filter: drop-shadow(0 0 16px var(--c)); animation: fxShield .43s cubic-bezier(.6,0,.9,.5) forwards; transition: opacity .4s; z-index: 7; }
.fx-shield svg { width: 100%; height: auto; display: block; }
.fx-shield.out { opacity: 0 !important; }
@keyframes fxShield { 0% { transform: translate(-50%, -260%) scale(1.5) rotate(-20deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%, -45%) scale(1) rotate(0); opacity: 1; } }
.fx-quake { transform: translate(-50%, -50%) scale(.2); border-radius: 50%; border: 6px solid var(--c); box-shadow: 0 0 20px var(--c); animation: fxQuake .8s ease-out forwards; }
@keyframes fxQuake { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; } }
.fx-crack.ground path { stroke-width: 1.4; filter: drop-shadow(0 0 3px #FFB547); }
.fx-spark.rock { border-radius: 2px; box-shadow: none; }
@keyframes fxBossSquash { 0% { transform: none; } 12% { transform: translateY(12%) scale(1.25, .7); filter: brightness(3) saturate(0); } 35% { transform: translateY(-6%) scale(.9, 1.12); filter: none; } 60% { transform: scale(1.06, .95); } 100% { transform: none; } }
.fx-boss-squash .ra-svg { animation: fxBossSquash 1s ease; transform-origin: 50% 90%; }
/* ✨ 힐러 마법진·빛기둥 */
.fx-rune { transform: translate(-50%, -50%); opacity: 0; filter: drop-shadow(0 0 10px var(--c)); animation: fxRuneIn .4s ease forwards; transition: opacity .3s, transform .3s; }
.fx-rune svg { width: 100%; height: 100%; animation: fxSpin 1.6s linear infinite; }
.fx-rune.out { opacity: 0 !important; transform: translate(-50%, -50%) scale(1.6); }
@keyframes fxRuneIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fxSpin { to { transform: rotate(360deg); } }
.fx-pillar { transform-origin: 50% 0; background: linear-gradient(90deg, transparent, var(--c) 20%, #fff 45%, #fff 55%, var(--c) 80%, transparent); box-shadow: 0 0 40px var(--c); animation: fxPillar .75s ease-out forwards; z-index: 7; }
@keyframes fxPillar { 0% { transform: scaleY(0) scaleX(.4); opacity: 1; } 30% { transform: scaleY(1) scaleX(1.25); opacity: 1; } 70% { transform: scaleY(1) scaleX(1); opacity: .9; } 100% { transform: scaleY(1) scaleX(0); opacity: 0; } }
.fx-mote.fall { animation-name: fxMoteFall; }
@keyframes fxMoteFall { 0% { transform: translateY(var(--dy)); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
/* 🔗 파티 콤보 */
.ra-combo { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; margin-top: 8px; padding: 6px 12px; border-radius: 12px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.12); }
.ra-combo > b { font-family: var(--font-round); font-size: 17px; color: #FFE7A3; white-space: nowrap; } .ra-combo > b span { color: #fff; font-size: 14px; }
.ra-combo > i { display: block; height: 8px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; }
.ra-combo > i u { display: block; height: 100%; background: linear-gradient(90deg, #FFB547, #FFE14D); transition: width .5s linear; }
.ra-combo small { grid-column: 1 / -1; color: #D9D2F5; font-size: 12px; } .ra-combo small b { color: #FFE14D; }
.ra-combo.off { opacity: .75; } .ra-combo.off small { grid-column: 2; }
.ra-combo.c3, .ra-combo.c4 { border-color: #FFB547; box-shadow: 0 0 14px rgba(255,181,71,.35); }
.ra-combo.c5 { border-color: #FF5E8A; box-shadow: 0 0 18px rgba(255,94,138,.55); animation: ra-glow .8s infinite alternate; }
.ra-combo.c5 > i u { background: linear-gradient(90deg, #FF5E8A, #FFE14D); }
.ra-combo.hurry > i u { animation: ra-blink .4s infinite alternate; }
.fx-combo { right: 4%; top: 22%; z-index: 9; text-align: right; animation: fxCombo 1.8s cubic-bezier(.2,1.5,.4,1) forwards; }
.fx-combo b { display: block; font-family: var(--font-round); font-size: 56px; line-height: .95; font-style: italic; color: #FFE14D; text-shadow: 3px 3px 0 #7A2E00, 0 0 18px rgba(255,180,60,.9); }
.fx-combo b small { font-size: 22px; margin-left: 4px; letter-spacing: 1px; }
.fx-combo span { display: inline-block; margin-top: 2px; padding: 2px 10px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; font-weight: 700; font-size: 13px; }
.fx-combo.c4 b { font-size: 64px; color: #FFB547; }
.fx-combo.c5 b { font-size: 74px; color: #FF7AA0; text-shadow: 3px 3px 0 #5A0020, 0 0 24px rgba(255,46,94,1); }
@keyframes fxCombo { 0% { transform: translateX(80px) scale(1.8); opacity: 0; } 12% { transform: none; opacity: 1; } 20% { transform: scale(1.08); } 28%, 80% { transform: none; opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
.ra-cbadge { background: #FFE7A3; color: #7A4A00; } .ra-cbadge.c5 { background: #FF5E8A; color: #fff; animation: ra-blink .6s infinite alternate; }
@media (max-width: 520px) { .fx-combo { top: 34%; } .fx-combo b { font-size: 40px; } .fx-combo.c4 b { font-size: 46px; } .fx-combo.c5 b { font-size: 52px; } .fx-combo b small { font-size: 16px; } }
/* 큰 데미지 숫자 */
.ra-pop.ult { font-size: 48px; color: #E9DDFF; text-shadow: 0 3px 0 #3A1890, 0 0 20px rgba(167,123,255,.95); }
.ra-pop.killer { font-size: 56px; color: #fff; text-shadow: 0 4px 0 #8A0024, 0 0 24px rgba(255,46,94,1); }
@media (max-width: 520px) {
  .fx-cut-txt b { font-size: 30px; } .fx-cut-av .mascot { width: 80px; height: 80px; }
  .fx-cut.mini .fx-cut-txt b { font-size: 20px; } .fx-cut.mini .fx-cut-av .mascot { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .fx-src .mascot, .fx-cut, .fx-cut-band, .fx-cut-av, .fx-cut-txt, .fx-bigshake { animation: none !important; } }

/* 📒 오답 노트: 탭 세 개가 한 줄에(휴대폰에서도) */
#wbView { display: flex; max-width: 100%; }
#wbView button { flex: 1; white-space: nowrap; }
@media (max-width: 560px) { #wbView button { padding-left: 6px; padding-right: 6px; font-size: 14px; } }

/* ───────── 🛸 협동 탈출 ───────── */
.cp-hud { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 12px; border-radius: 16px; background: #141B2B; color: #E6ECFF; box-shadow: var(--shadow); }
.cp-team { font-family: var(--font-round); font-size: 19px; color: #fff; background: var(--tc); border-radius: 999px; padding: 3px 14px; }
.cp-hud .g-timer { margin-left: 0; font-size: 26px; min-width: 0; color: #fff; background: transparent; }
.cp-hudr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.cp-ko { font-size: 15px; font-weight: 800; color: #FFB3B8; }
.cp-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cp-step { display: inline-flex; flex-direction: column; align-items: center; font-size: 19px; line-height: 1.1; padding: 4px 8px; border-radius: 12px; background: rgba(127, 140, 180, .16); opacity: .55; }
.cp-step small { font-size: 11px; color: inherit; opacity: .85; }
.cp-step.now { opacity: 1; background: rgba(150, 120, 255, .28); outline: 2px solid #9B87FF; }
.cp-step.ok { opacity: 1; background: rgba(80, 200, 140, .22); }
.cp-arrow { color: #6B7699; font-style: normal; }
.cp-o2 { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; }
.cp-o2 span { font-size: 20px; }
.cp-o2b { position: relative; width: 120px; height: 14px; border-radius: 999px; background: rgba(127, 140, 180, .25); overflow: hidden; }
.cp-o2b i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #4FD1FF, #7FF0C8); transition: width .25s linear; }
.cp-o2.mid .cp-o2b i { background: linear-gradient(90deg, #F5C542, #FFD98A); }
.cp-o2.low .cp-o2b i { background: linear-gradient(90deg, #E5484D, #FF8A8A); }
.cp-o2.low { color: #FF8A8A; animation: cpPulse .6s ease-in-out infinite alternate; }
.cp-o2 b { min-width: 2.2em; }

.cp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .cp-wrap { grid-template-columns: 1fr; } }
.cp-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 74vh; border-radius: 18px; overflow: hidden; background: #05070C; box-shadow: var(--shadow-lift); touch-action: none; user-select: none; -webkit-user-select: none; outline: none; cursor: pointer; --t: 40px; }
@media (max-width: 640px) { .cp-stage { aspect-ratio: 1 / 1; border-radius: 14px; } }
.cp-world { position: absolute; left: 0; top: 0; will-change: transform; }
.cp-world > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.cp-world > .cp-dark { z-index: 600; }
.cp-world > .cp-top { z-index: 700; }
.cp-ents { position: absolute; inset: 0; pointer-events: none; }
.cp-ent { position: absolute; width: calc(var(--t) * 1.55); transform: translate(-50%, -88%); display: flex; flex-direction: column; align-items: center; }
.cp-av { position: relative; width: 100%; transition: transform .15s; }
.cp-av svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.cp-ent.flip .cp-av { transform: scaleX(-1); }
.cp-ent.walk .cp-av { animation: cpBob .32s ease-in-out infinite alternate; }
.cp-ent.flip.walk .cp-av { animation-name: cpBobF; }
@keyframes cpBob { from { transform: translateY(0); } to { transform: translateY(-7%); } }
@keyframes cpBobF { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(-7%); } }
.cp-tag { margin-top: -4px; font-size: max(10px, calc(var(--t) * .3)); font-weight: 800; color: #fff; background: rgba(10, 14, 28, .78); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.cp-ent.me .cp-tag { background: var(--purple); }
.cp-ent.me::after { content: ""; position: absolute; bottom: calc(var(--t) * .35); width: 70%; height: calc(var(--t) * .22); border-radius: 50%; border: 3px solid #FFD34D; z-index: -1; }
.cp-ent.frozen .cp-av svg { filter: saturate(.4) brightness(1.15); }
.cp-ent.frozen::before { content: ""; position: absolute; inset: 8% 4% 22%; border-radius: 14px; background: rgba(160, 225, 255, .55); border: 2px solid #E8FBFF; z-index: 2; }
.cp-carry { position: absolute; top: -14%; font-size: calc(var(--t) * .42); line-height: 1; filter: drop-shadow(0 2px 1px rgba(0,0,0,.4)); z-index: 3; white-space: nowrap; }
.cp-bub { position: absolute; bottom: 100%; margin-bottom: 4px; max-width: min(300px, 46vw); width: max-content; padding: 6px 10px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 13px; line-height: 1.35; box-shadow: var(--shadow-lift); display: none; z-index: 5; }
.cp-bub.on { display: block; }
.cp-bub::after { content: ""; position: absolute; left: 50%; top: 100%; border: 7px solid transparent; border-top-color: #fff; transform: translateX(-50%); }
.cp-bub .cp-glyph { vertical-align: middle; }
.cp-emo { font-size: 26px; line-height: 1; }
/* 괴물: 빛 안에서만 보인다 */
.cp-ghost { width: calc(var(--t) * 1.4); opacity: 0; transition: opacity .35s; }
.cp-ghost.lit { opacity: 1; }
.cp-gh { font-size: calc(var(--t) * 1.15); line-height: 1; animation: cpFloat 1s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px rgba(255, 60, 90, .85)); }
.cp-ghost.mad .cp-gh { animation-duration: .35s; filter: drop-shadow(0 0 14px rgba(255, 30, 30, 1)); }
.cp-ghost.flip .cp-gh { transform: scaleX(-1); }
.cp-ghost.look .cp-gh { animation: cpLook .5s ease-in-out infinite alternate; }
@keyframes cpLook { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
@keyframes cpFloat { from { translate: 0 0; } to { translate: 0 -12%; } }
.cp-pulse { animation: cpPulse 1s ease-in-out infinite alternate; }
@keyframes cpPulse { from { opacity: .35; } to { opacity: 1; } }
.cp-uvt { filter: drop-shadow(0 0 6px #B57BFF); }
/* 화면 효과: 경보 · 산소 부족 · 어둠 속 */
.cp-vig { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; z-index: 5; }
.cp-stage.indark .cp-vig { opacity: 1; background: radial-gradient(circle, transparent 55%, rgba(0, 0, 0, .45)); }
.cp-stage.lowo2 .cp-vig { opacity: 1; background: radial-gradient(circle, transparent 45%, rgba(20, 60, 140, .55)); animation: cpBreath 1.6s ease-in-out infinite; }
.cp-stage.alarm .cp-vig { opacity: 1; background: radial-gradient(circle, transparent 40%, rgba(230, 30, 40, .55)); animation: cpBreath .5s ease-in-out infinite; }
@keyframes cpBreath { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.cp-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 6; }
.cp-flash.ok { background: radial-gradient(circle, rgba(127, 214, 127, .55), transparent 70%); }
.cp-flash.bad { background: radial-gradient(circle, transparent 40%, rgba(242, 100, 122, .6)); }
.cp-flash.ice { background: radial-gradient(circle, rgba(160, 225, 255, .1), rgba(160, 225, 255, .7)); }
.cp-flash.go { animation: cpFlash .9s ease-out; }
@keyframes cpFlash { from { opacity: 1; } to { opacity: 0; } }
.cp-under { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cp-emos { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-emos .btn { font-size: 18px; padding: 4px 10px; }

.cp-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
@media (max-width: 1000px) { .cp-panel { position: static; max-height: none; } }
.cp-ph { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.cp-pi { font-size: 34px; line-height: 1; }
.cp-q { background: var(--purple-s); border-radius: 14px; padding: 10px 12px; margin: 8px 0; }
.cp-ql { font-size: 13px; font-weight: 800; color: var(--purple-d); margin-bottom: 4px; }
.cp-qb { font-size: 16px; font-weight: 600; }
.cp-qc { display: grid; gap: 4px; margin-top: 6px; }
.cp-c { display: flex; gap: 6px; align-items: baseline; font-size: 15px; }
.cp-c b { font-size: 18px; }
.cp-btns { display: grid; gap: 6px; margin-top: 8px; }
.cp-cb { justify-content: flex-start; text-align: left; }
.cp-who { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cp-chip { font-size: 13px; padding: 3px 9px; border-radius: 999px; background: var(--gray-s); color: var(--ink-2); }
.cp-chip.on { background: var(--mint-s); color: var(--mint-d); font-weight: 700; }
.cp-big { margin-top: 8px; padding: 12px; border-radius: 14px; background: var(--purple-s); text-align: center; font-family: var(--font-round); font-size: 18px; color: var(--purple-d); }
.cp-big small { font-family: var(--font); font-size: 13px; color: var(--ink-2); }
.cp-big.ok { background: var(--mint-s); color: var(--mint-d); }
.cp-big.soft { background: var(--gray-s); color: var(--ink-2); }
.cp-big.ice { background: #E3F6FF; color: #1F7FB5; }
.cp-lock { margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--red-s); color: var(--red); font-weight: 800; text-align: center; }
.cp-todo { display: grid; gap: 8px; margin-top: 8px; }
.cp-todo > div { padding: 10px 12px; border-radius: 12px; background: var(--sky-s); font-size: 15px; }
.cp-todo .cp-glyph { vertical-align: middle; color: var(--purple-d); }
.cp-pull { margin-top: 10px; }
.cp-radio { margin-top: 12px; padding: 10px; border-radius: 14px; background: #141B2B; color: #E6ECFF; }
.cp-radio .muted { color: #9AA6C8 !important; }
.cp-rc { margin-top: 8px; border-radius: 10px; background: rgba(255, 255, 255, .06); padding: 6px 8px; }
.cp-rc summary { cursor: pointer; font-weight: 800; }
.cp-rc summary small { font-weight: 600; opacity: .75; }
.cp-rc.done { opacity: .6; }
.cp-rc .cp-q { color: var(--ink); }
.cp-nb { margin-top: 12px; padding: 10px; border-radius: 14px; border: 2px dashed var(--line); }
.cp-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cp-note { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border-radius: 12px; background: #1E1A38; color: #E8DEFF; font-size: 20px; }
.cp-items { display: grid; gap: 6px; margin: 6px 0; }
.cp-item { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.cp-item > span { margin-right: auto; }
.cp-manual { padding: 12px; border-radius: 14px; background: #FFF6DE; border: 2px solid #E0C38A; color: #5A4422; }
.cp-manual ol { margin: 8px 0 4px 20px; display: grid; gap: 6px; font-size: 15px; font-weight: 700; }
.cp-wires { display: grid; gap: 6px; margin: 10px 0; }
.cp-wire { display: flex; align-items: center; gap: 8px; }
.cp-wire > b { width: 1.4em; text-align: center; font-family: var(--font-round); }
.cp-wire > i { flex: 1; height: 10px; border-radius: 6px; border: 1px solid rgba(0,0,0,.35); }
.cp-wire > span { width: 3em; font-size: 13px; color: var(--ink-2); }
.cp-code { display: flex; justify-content: center; gap: 10px; margin: 12px 0; }
.cp-code label { display: grid; justify-items: center; gap: 6px; padding: 8px; border-radius: 14px; background: #1E1A38; color: #E8DEFF; }
.cp-dig { width: 46px; height: 52px; text-align: center; font-size: 28px; font-weight: 900; border-radius: 10px; border: 2px solid #6B5BD0; background: #fff; color: var(--ink); }
.cp-glyph { display: inline-block; }

.cp-tale { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: #141B2B; color: #E6ECFF; text-align: left; line-height: 1.6; }
.cp-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; text-align: left; }
.cp-room { background: var(--gray-s); border-radius: 14px; padding: 10px; display: grid; gap: 2px; }
.cp-room span { font-family: var(--font-round); color: var(--purple); }
.cp-room small { color: var(--ink-2); font-size: 12px; line-height: 1.35; }
.cp-rank { display: grid; gap: 6px; }
.cp-rrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 14px; background: var(--gray-s); text-align: left; }
.cp-rrow.me { background: var(--purple-s); outline: 2px solid var(--tc); }
.cp-rrow .cp-steps { margin-left: auto; }
.cp-rrow .cp-step, .cp-tcard .cp-step { font-size: 15px; padding: 2px 5px; background: var(--gray-s); }
.cp-rrow .cp-step small { display: none; }
.cp-rrow .cp-step.ok, .cp-tcard .cp-step.ok { background: var(--mint-s); }
.cp-rrow .cp-step.now, .cp-tcard .cp-step.now { background: var(--purple-s); }
.cp-story h2, .cp-launch h2 { color: #fff; }
.cp-rocket { animation: cpRise 3.2s ease-in forwards; }
@keyframes cpRise { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(6px) rotate(-3deg); } 40% { transform: translateY(0) rotate(3deg); } 100% { transform: translateY(-120vh) scale(.6); } }

.cp-rpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.cp-rp { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; opacity: .6; }
.cp-rp small { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.cp-rp.on { opacity: 1; border-color: var(--purple); background: var(--purple-s); }
.cp-rp.fixed { cursor: default; border-style: dashed; }

.cp-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cp-tcard { border-top: 6px solid var(--tc); display: grid; gap: 8px; align-content: start; }
.cp-tcard.done { background: linear-gradient(180deg, var(--mint-s), var(--card)); }
.cp-tcard .cp-step small { font-size: 10px; }
.cp-mini { position: relative; aspect-ratio: 32 / 20; border-radius: 12px; overflow: hidden; background: #05070C; }
.cp-mini > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-mdot { position: absolute; width: 8%; transform: translate(-50%, -85%); }
.cp-mdot svg { width: 100%; height: auto; display: block; }
.cp-tstat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 800; font-size: 14px; }
.cp-tstat .cp-o2b { width: 90px; }
.cp-escaped { padding: 16px; text-align: center; font-family: var(--font-round); font-size: 20px; color: var(--mint-d); background: var(--mint-s); border-radius: 12px; }
.cp-escaped small { font-family: var(--font); font-size: 14px; }
.cp-mems { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.cp-mems span { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--gray-s); color: var(--muted); }
.cp-mems span.on { color: var(--ink); background: var(--mint-s); }
.cp-mems small { margin-left: 4px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .cp-ent.walk .cp-av, .cp-gh, .cp-pulse, .cp-vig, .cp-o2.low { animation: none !important; } }

/* ── 3.0: 장 테마 · 움직이는 물체 ── */
.cp-chb { font-family: var(--font-round); font-size: 16px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.cp-chb small { font-family: var(--font); font-size: 12px; opacity: .8; }
.cp-hud.cp-h-ruin { background: linear-gradient(90deg, #4A2F17, #6E4823); }
.cp-hud.cp-h-cave { background: linear-gradient(90deg, #0E1F3D, #1B3A6B); }
.cp-k-ruin { background: #3E2814; }
.cp-k-cave { background: #050A14; }
.cp-torch { animation: cpTorch .35s ease-in-out infinite alternate; transform-origin: center bottom; transform-box: fill-box; }
@keyframes cpTorch { from { transform: scale(1, 1); opacity: .9; } to { transform: scale(1.08, .92); opacity: 1; } }
.cp-crys { animation: cpGlint 2.4s ease-in-out infinite alternate; }
@keyframes cpGlint { from { opacity: .45; } to { opacity: 1; } }
.cp-beam { stroke-dasharray: 14 10; animation: cpBeam .5s linear infinite; filter: drop-shadow(0 0 6px #FFE27A); }
@keyframes cpBeam { to { stroke-dashoffset: -24; } }
.cp-block { position: absolute; width: calc(var(--t) * .96); height: calc(var(--t) * .96); transform: translate(-50%, -50%); transition: left .18s ease-out, top .18s ease-out; pointer-events: none; }
.cp-block i { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(160deg, #B9A58A, #8A7458 60%, #6B5840); box-shadow: inset 0 -5px 0 rgba(0,0,0,.25), 0 4px 6px rgba(0,0,0,.35); border: 2px solid #4E3E2A; }
.cp-block i::after { content: "◆"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 240, 210, .55); font-size: calc(var(--t) * .38); }
.cp-block.heavy i { background: linear-gradient(160deg, #F0C76A, #C08A2E 60%, #8C6018); border-color: #5E3E10; }
.cp-block.heavy i::after { content: "⬢"; color: rgba(255, 250, 220, .8); }
.cp-block.wait i { animation: cpShake .12s linear infinite alternate; }
@keyframes cpShake { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
.cp-item-floor { position: absolute; transform: translate(-50%, -60%); font-size: calc(var(--t) * .6); pointer-events: none; filter: drop-shadow(0 0 8px rgba(127, 240, 200, .9)); animation: cpFloat 1.1s ease-in-out infinite alternate; }
.cp-tip { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--yellow-s); font-size: 14px; }
.cp-carrybox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--mint-s); font-size: 15px; }
.cp-carrybox .btn { margin-left: auto; }
.cp-row { display: inline-flex; gap: 3px; vertical-align: middle; }
.cp-row i { width: 18px; height: 18px; border-radius: 4px; background: #EFE3CC; border: 2px solid #B38A52; }
.cp-row i.on { background: #6B4A22; border-color: #3E2814; }
.cp-row.unknown i { background: repeating-linear-gradient(45deg, #ddd, #ddd 3px, #eee 3px, #eee 6px); border-color: #ccc; }
.cp-big .cp-row i { width: 26px; height: 26px; }
.cp-grid { display: grid; gap: 6px; margin-top: 6px; }
.cp-gr { display: flex; align-items: center; gap: 8px; }
.cp-gr > small:first-child { width: 2.4em; color: var(--ink-2); }
.cp-rch { display: inline-flex; gap: 2px; margin-left: auto; }
.cp-rch i { font-style: normal; padding: 2px 5px; border-radius: 8px; background: var(--gray-s); opacity: .5; }
.cp-rch i.ok { opacity: 1; background: var(--mint-s); }
.cp-rch i.now { opacity: 1; background: var(--purple-s); outline: 2px solid var(--purple); }
.cp-tch { font-family: var(--font-round); font-size: 14px; padding: 3px 10px; border-radius: 999px; justify-self: start; }
.cp-r-ship.cp-tch, .cp-room.cp-r-ship { background: #E5E9F5; }
.cp-r-ruin.cp-tch, .cp-room.cp-r-ruin { background: #F7E7C6; }
.cp-r-cave.cp-tch, .cp-room.cp-r-cave { background: #DDF2FB; }
.cp-rp.cp-r-ruin.on { border-color: #B38A52; background: #FBF1DC; }
.cp-rp.cp-r-cave.on { border-color: #3D8BFD; background: #E6F4FD; }

/* ── 📖 이야기 장면 ── */
.cs-wrap { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 18px; color: #fff; overflow: hidden; animation: csIn .5s ease-out; }
@keyframes csIn { from { opacity: 0; } to { opacity: 1; } }
.cs-wrap.bg-ship { background: radial-gradient(ellipse at 30% 20%, #2A2F6B, #0A0C1F 70%); }
.cs-wrap.bg-ruin { background: linear-gradient(180deg, #F6B26B 0%, #E89A4C 40%, #C9783A 70%, #8A4E22 100%); }
.cs-wrap.bg-cave { background: radial-gradient(ellipse at 50% 30%, #2E5E9A, #0B1A33 70%); }
.cs-wrap.shake { animation: csShake .5s linear; }
@keyframes csShake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-12px, 6px); } 40% { transform: translate(10px, -8px); } 60% { transform: translate(-8px, 4px); } 80% { transform: translate(6px, -3px); } }
.cs-art-layer { position: absolute; inset: 0; pointer-events: none; }
.cs-stars { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 10% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent), radial-gradient(2px 2px at 55% 30%, #fff, transparent), radial-gradient(1px 1px at 75% 15%, #fff, transparent), radial-gradient(2px 2px at 85% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 85%, #fff, transparent), radial-gradient(1px 1px at 20% 45%, #fff, transparent), radial-gradient(1.5px 1.5px at 65% 50%, #fff, transparent); animation: csTwinkle 3s ease-in-out infinite alternate; }
.cs-stars.dim { opacity: .4; }
@keyframes csTwinkle { from { opacity: .5; } to { opacity: 1; } }
.cs-art { position: absolute; line-height: 1; }
.cs-planet { position: absolute; right: -8vw; bottom: 22vh; width: 46vw; height: 46vw; max-width: 520px; max-height: 520px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8E7BE0, #3B2A7A 60%, #1A1240); box-shadow: 0 0 80px rgba(142, 123, 224, .5); }
.cs-ship { left: 18%; top: 18%; font-size: min(22vw, 180px); animation: csFall 3s ease-in infinite; filter: drop-shadow(0 0 30px rgba(255, 160, 80, .8)); }
@keyframes csFall { 0% { transform: translate(0, 0) rotate(-10deg); } 50% { transform: translate(8vw, 6vh) rotate(8deg); } 100% { transform: translate(0, 0) rotate(-10deg); } }
.cs-spark { position: absolute; left: 30%; top: 30%; font-size: 60px; animation: csTwinkle .4s infinite alternate; }
.cs-sun { position: absolute; left: 60%; top: 8%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, #FFF6C8, #FFD06B 60%, transparent 70%); }
.cs-dune { position: absolute; left: -10%; right: -10%; border-radius: 50% 50% 0 0; }
.cs-dune.d1 { bottom: 0; height: 42vh; background: #D9954F; }
.cs-dune.d2 { bottom: 0; height: 30vh; left: 30%; background: #B87332; }
.cs-temple { left: 50%; bottom: 30vh; font-size: min(26vw, 200px); transform: translateX(-50%); filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); animation: csRise 2s ease-out; }
@keyframes csRise { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.cs-sand { right: 6%; top: 34vh; font-size: 90px; opacity: .8; }
.cs-crys { font-size: min(16vw, 120px); animation: cpGlint 2s ease-in-out infinite alternate; filter: drop-shadow(0 0 24px #7FE3FF); }
.cs-crys.c1 { left: 8%; bottom: 30vh; } .cs-crys.c2 { right: 10%; bottom: 36vh; animation-delay: .7s; } .cs-crys.c3 { left: 30%; top: 12%; font-size: 70px; animation-delay: 1.3s; }
.cs-tower { left: 55%; bottom: 28vh; font-size: min(18vw, 140px); }
.cs-box { position: relative; margin: 0 auto; width: min(920px, calc(100% - 24px)); display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: rgba(10, 14, 30, .82); border: 2px solid rgba(255, 255, 255, .25); box-shadow: 0 10px 40px rgba(0,0,0,.4); backdrop-filter: blur(4px); }
.cs-box.narr { background: rgba(0, 0, 0, .66); font-style: italic; }
.cs-por { flex: none; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 18px; background: rgba(255, 255, 255, .08); }
.cs-por.none { display: none; }
.cs-txt { flex: 1; min-width: 0; }
.cs-name { font-family: var(--font-round); font-size: 19px; color: #FFD98A; }
.cs-sub { margin-left: 6px; color: #BFC8E6; font-size: 12px; }
.cs-txt p { margin-top: 6px; font-size: 20px; line-height: 1.55; min-height: 3.1em; }
.cs-txt p b { color: #FFE27A; }
.cs-foot { position: relative; margin: 10px auto 0; width: min(920px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; }
.cs-dots { display: flex; gap: 6px; }
.cs-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.cs-dots i.on { background: #FFD98A; }
.cs-note { font-size: 12px; color: #D6DCF0; margin-right: auto; }
.cs-old { font-size: 60px; animation: csTwinkle .8s infinite alternate; filter: drop-shadow(0 0 20px #FFE27A); }
.cs-blink { animation: csBlink 3s infinite; }
@keyframes csBlink { 0%, 92%, 100% { opacity: 1; } 95% { opacity: .1; } }
@media (max-width: 640px) { .cs-por { width: 64px; height: 64px; } .cs-por svg { width: 64px; height: 64px; } .cs-txt p { font-size: 16px; } }

/* ── 장 클리어 ── */
.cc-wrap { position: fixed; inset: 0; z-index: 3100; display: grid; place-items: center; background: rgba(5, 8, 20, .78); animation: csIn .3s; overflow: hidden; }
.cc-wrap.out { animation: ccOut .6s forwards; }
@keyframes ccOut { to { opacity: 0; } }
.cc-title { position: relative; text-align: center; color: #fff; z-index: 2; animation: ccPop .6s cubic-bezier(.2, 1.6, .4, 1); }
.cc-title small { display: block; letter-spacing: .4em; color: #FFD98A; font-weight: 800; }
.cc-title b { font-family: var(--font-round); font-size: min(14vw, 96px); text-shadow: 0 6px 30px rgba(255, 210, 120, .7); }
@keyframes ccPop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cc-lift { position: absolute; inset: 0; display: grid; place-items: center; }
.cc-shaft { position: absolute; width: 160px; top: 0; bottom: 0; background: repeating-linear-gradient(180deg, #1B2232 0 30px, #2C3A55 30px 34px); animation: ccShaft .3s linear infinite; }
@keyframes ccShaft { to { background-position: 0 34px; } }
.cc-car { font-size: 120px; animation: ccUp 2.4s ease-in forwards; }
@keyframes ccUp { from { transform: translateY(40vh); } to { transform: translateY(-60vh); } }
.cc-gate { position: absolute; inset: 0; }
.cc-door { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, #6E4823, #9A6B3C); border: 6px solid #3E2814; }
.cc-door.l { left: 0; animation: ccL 1.8s .3s ease-in-out forwards; } .cc-door.r { right: 0; animation: ccR 1.8s .3s ease-in-out forwards; }
@keyframes ccL { to { transform: translateX(-100%); } } @keyframes ccR { to { transform: translateX(100%); } }
.cc-light { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 230, 150, .9), transparent 60%); animation: csIn 2s; }
.cc-beam { position: absolute; left: 50%; bottom: 0; width: 60px; height: 100%; transform: translateX(-50%); background: linear-gradient(0deg, #FFF6C8, #7FE3FF 60%, transparent); filter: blur(4px); animation: ccBeam 1s ease-out; }
@keyframes ccBeam { from { height: 0; } to { height: 100%; } }

/* ── 🎬 엔딩 시네마틱 ── */
.fn-wrap { position: fixed; inset: 0; z-index: 3200; background: #04060F; color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 18px; }
.fn-sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, #1B3A6B, #04060F 70%); }
.fn-tower { position: absolute; left: 50%; bottom: 16vh; font-size: min(18vw, 130px); transform: translateX(-50%); }
.fn-beam { position: absolute; left: 50%; bottom: 26vh; width: 46px; height: 0; transform: translateX(-50%); background: linear-gradient(0deg, #FFF6C8, #7FE3FF 50%, rgba(127, 227, 255, 0)); filter: blur(3px); box-shadow: 0 0 60px #7FE3FF; transition: height 1.6s ease-out; }
.fn-wrap:not([data-fx="beam"]) .fn-beam, .fn-wrap[data-fx] .fn-beam { height: 76vh; }
.fn-wrap:not([data-fx]) .fn-beam { height: 0; }
.fn-portal { position: absolute; left: 50%; top: 10vh; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, 0); background: radial-gradient(circle, #FFF6C8, #FFD06B 30%, #B57BFF 60%, transparent 70%); box-shadow: 0 0 120px #B57BFF; transition: width 1.8s ease-out, height 1.8s ease-out; animation: fnSpin 6s linear infinite; }
@keyframes fnSpin { to { filter: hue-rotate(360deg); } }
.fn-wrap[data-fx="portal"] .fn-portal, .fn-wrap[data-fx="ship"] .fn-portal, .fn-wrap[data-fx="launch"] .fn-portal { width: min(60vw, 420px); height: min(60vw, 420px); }
.fn-ship { position: absolute; left: 50%; top: -30vh; font-size: min(20vw, 150px); transform: translateX(-50%) rotate(180deg); transition: top 2.6s cubic-bezier(.2, .8, .3, 1); filter: drop-shadow(0 0 30px #FFD06B); }
.fn-wrap[data-fx="ship"] .fn-ship { top: 32vh; }
.fn-wrap[data-fx="launch"] .fn-ship { top: -60vh; transform: translateX(-50%) rotate(0deg); transition: top 3.6s ease-in, transform .6s; }
.fn-crew { position: absolute; left: 50%; bottom: 20vh; transform: translateX(-140%); display: flex; gap: 6px; }
.fn-crew span { animation: cpBob .4s ease-in-out infinite alternate; }
.fn-crew span:nth-child(2n) { animation-delay: .2s; }
.fn-wrap[data-fx="launch"] .fn-crew { animation: fnBoard 1.2s ease-in forwards; }
@keyframes fnBoard { to { transform: translate(-40%, -30vh) scale(.3); opacity: 0; } }
.fn-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.fn-wrap[data-fx="portal"] .fn-flash { animation: fnFlash 1s; }
@keyframes fnFlash { 0% { opacity: .8; } 100% { opacity: 0; } }
.fn-sub { z-index: 2; cursor: pointer; }
.fn-skip { position: absolute; top: 14px; right: 14px; z-index: 3; color: #fff !important; background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .3) !important; }
.fn-credits { position: absolute; inset: 0; display: none; z-index: 4; background: radial-gradient(ellipse at 50% 30%, rgba(30, 40, 90, .85), rgba(4, 6, 15, .97)); overflow: hidden; }
.fn-wrap.roll .fn-credits { display: block; }
.fn-roll { position: absolute; left: 0; right: 0; top: 100%; text-align: center; padding: 0 16px; animation: fnRoll 16s linear forwards; }
@keyframes fnRoll { to { top: 50%; transform: translateY(-50%); } }
.fn-roll h1 { font-family: var(--font-round); font-size: min(16vw, 110px); letter-spacing: .1em; background: linear-gradient(90deg, #FFE27A, #FF9FD0, #7FE3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fn-grade { font-size: 22px; margin: 8px 0 18px; color: #FFE27A; }
.fn-roll h3 { font-size: 24px; margin-bottom: 12px; }
.fn-mems { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 14px; }
.fn-mems > div { display: grid; justify-items: center; gap: 2px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .08); min-width: 110px; }
.fn-mems small { color: #BFC8E6; }
.fn-thanks { margin: 16px 0; font-size: 18px; line-height: 1.6; }
.fn-roll .small { color: #BFC8E6; }
@media (prefers-reduced-motion: reduce) { .fn-roll { animation-duration: .01s; } .cs-ship, .cc-car, .cp-torch, .cp-beam { animation: none; } }

/* ── 🛸 3.1 담당 · 수준 · 숫자 석판 · 이야기 함께 읽기 ── */
.cs-txt { position: relative; }
.cs-past { display: none; margin-left: 8px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 217, 138, .2); color: #FFD98A; }
.cs-wrap.past .cs-past { display: inline-block; }
.cs-wrap.past .cs-box { border-color: rgba(255, 217, 138, .6); }
.cs-foot { flex-wrap: wrap; }
.cs-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-right: auto; font-size: 12.5px; }
.cs-ready span { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #D6DCF0; }
.cs-ready span.on { background: #2FA866; color: #fff; }
.cs-ready span.on::after { content: ' ✓'; }
.cs-ready small { color: #BFC8E6; }
.cs-btns { display: flex; gap: 8px; }
.cs-btns .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); }
.cs-btns .btn:disabled { opacity: .55; }
.cs-btns .cs-skip { font-size: 13px; opacity: .85; }
.cs-btns .cs-skip[hidden] { display: none; }
@media (max-width: 600px) { .cs-btns { flex-wrap: wrap; justify-content: flex-end; } }
.cp-heavy { margin-top: 8px; }
.cp-hsel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.cp-arrows { display: grid; grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(3, 64px); gap: 6px; justify-content: center; margin: 10px 0 4px; }
.cp-arrow { border: 3px solid var(--line, #DCD6F0); border-radius: 14px; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px; touch-action: manipulation; font-family: var(--font-round); }
.cp-arrow b { font-size: 28px; line-height: 1; }
.cp-arrow small { font-size: 11px; color: var(--purple-d); max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-arrow:active { transform: scale(.95); }
.cp-arrow.on { border-color: var(--purple, #7C6CF2); background: var(--purple-s, #EEEAFE); }
.cp-arrow:disabled { opacity: .3; cursor: default; }
.cp-arrow.d-u { grid-column: 2; grid-row: 1; } .cp-arrow.d-l { grid-column: 1; grid-row: 2; } .cp-arrow.d-r { grid-column: 3; grid-row: 2; } .cp-arrow.d-d { grid-column: 2; grid-row: 3; }
.cp-arrow-mid { grid-column: 2; grid-row: 2; display: grid; place-items: center; font-size: 30px; }
.fn-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.fn-nav .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); }
.fn-sub { flex-wrap: wrap; }
.fn-sub .fn-nav { width: 100%; }
.cp-own { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: var(--gray-s); color: var(--ink-2); font-size: 13.5px; }
.cp-own.me { background: var(--yellow-s); color: var(--ink); font-weight: 700; }
.cp-jobs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; padding: 8px 10px; border-radius: 12px; background: var(--yellow-s); font-size: 13px; }
.cp-jobs b { font-family: var(--font-round); }
.cp-jobs span { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .7); }
.cp-jobs small { margin-left: auto; color: var(--ink-2); }
.cp-clue { display: inline-flex; align-items: center; gap: 6px; margin: 3px 6px 3px 0; padding: 4px 10px; border-radius: 10px; background: #F6EBD3; color: #5A3D18; border: 2px solid #D9B77A; }
.cp-clue i { font-style: normal; font-size: 12.5px; }
.cp-clue b { font-family: var(--font-round); font-size: 18px; letter-spacing: .04em; }
.cp-clues { margin-top: 6px; }
.cp-others { margin-top: 4px; }
.cp-how { margin-top: 6px; padding: 6px 8px; border-radius: 10px; background: var(--gray-s); }
.cp-memo { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.cp-q.riddle { background: #FFF1D6; border: 2px dashed #E0A21B; }
.cp-q.riddle .cp-ql { color: #A06A00; }
.cp-mg { display: grid; grid-template-columns: repeat(5, 30px); gap: 4px; padding: 6px; border-radius: 10px; background: #EFE3CC; border: 2px solid #B38A52; }
.cp-mc { width: 34px; height: 34px; border-radius: 6px; border: 2px solid #C9A56C; background: #FFF8EA; font-size: 16px; color: #A04A2A; cursor: pointer; padding: 0; }
.cp-mc.m1 { background: #6B4A22; border-color: #3E2814; }
.cp-mc.hint { background: #FFE27A; border-color: #E0A21B; }
.cp-mine { animation: csTwinkle .9s infinite alternate; }
.cp-tier { display: inline-block; margin-top: 2px; font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--c); color: #fff; }
.cp-bal { margin: -4px 0 6px; color: var(--ink-2); }
.cp-pick { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.cp-pick:hover b { text-decoration: underline; }

/* 🖼️ 선생님 PPT 슬라이드 쪽 */
.epage.slide-page { padding: 14px; min-height: 0; background: #fff; }
.epage.slide-page::before { display: none; }
.slide-frame { position: relative; aspect-ratio: var(--ar, 1.7778); width: min(100%, calc((100vh - 190px) * var(--ar, 1.7778))); margin: 0 auto;
  border-radius: 14px; overflow: hidden; background: var(--line, #EEE) linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%) 0 0 / 200% 100%;
  animation: slideShimmer 1.4s linear infinite; }
.slide-frame.ready, .slide-frame.broken { animation: none; background: #fff; }
.slide-frame img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.slide-frame.broken img { display: none; }
.slide-frame.broken::after { content: '슬라이드를 불러오지 못했어요 😢'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.epage.slide-page .page-no { display: none; }
@keyframes slideShimmer { to { background-position: -200% 0; } }
body.presenting .epage.slide-page { padding: 8px; }
body.presenting .slide-frame { width: min(100%, calc((100vh - 215px) * var(--ar, 1.7778))); }
.deck-drop { border: 2px dashed var(--line, #DDD); border-radius: 18px; padding: 22px; text-align: center; cursor: pointer; }
.deck-drop.over { border-color: var(--purple); background: var(--purple-s); }
.deck-prog { height: 12px; border-radius: 99px; background: var(--line, #EEE); overflow: hidden; margin: 10px 0 6px; }
.deck-prog > i { display: block; height: 100%; width: 0; background: var(--purple); transition: width .3s; }
@media (max-width: 640px) { .epage.slide-page { padding: 6px; } }

/* 개념 학습: 과목 고르기 + 목차 */
.subj-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.subj-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border-radius: 22px; cursor: pointer;
  background: var(--card, #fff); border: 3px solid var(--line); color: inherit; font: inherit; transition: transform .15s, border-color .15s, box-shadow .15s; }
.subj-card:hover { transform: translateY(-2px); }
.subj-card .round { display: block; font-size: 21px; }
.subj-card .small { color: var(--muted); }
.subj-card.on { border-color: var(--purple); background: var(--purple-s); box-shadow: 0 6px 0 #DAD3FF; }
.subj-ico { font-size: 34px; }
.subj-check { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; font-weight: 800; }
.toc-card { margin-bottom: 18px; }
.toc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.toc-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.toc-item:hover { border-color: var(--purple); background: var(--purple-s); }
.toc-code { font-family: var(--font-round); color: var(--purple-d, var(--purple)); min-width: 34px; }
.toc-big { font-size: 20px; color: var(--purple-d); margin: 22px 6px 10px; }
.toc-bighead { font-size: 15px; color: var(--purple-d); margin: 12px 2px 6px; }
.toc-bighead:first-of-type { margin-top: 0; }
section.card.flash { outline: 3px solid var(--purple); outline-offset: 3px; transition: outline-color .4s; }
@media (max-width: 640px) { .subj-card { padding: 12px 14px; } .subj-card .round { font-size: 18px; } .subj-ico { font-size: 28px; } }

/* 🔍 슬라이드 확대 */
.zoom-bar { display: flex; align-items: center; gap: 4px; flex: none; }
.zoom-bar.hidden { display: none; }
.zoom-bar .btn { min-width: 0; padding-left: 10px; padding-right: 10px; }
.zoom-bar .zoom-pct { min-width: 62px; font-variant-numeric: tabular-nums; }
.lesson-stage.slides { touch-action: pan-y; }
.lesson-stage.zoomed { overflow: hidden; touch-action: none; perspective: none; }
.lesson-stage.zoomed .epage:not(.inking) { cursor: grab; }
.lesson-stage.zoomed .epage:not(.inking):active { cursor: grabbing; }
@media (max-width: 640px) { .zoom-bar .zoom-pct { display: none; } .zoom-bar .btn { padding-left: 8px; padding-right: 8px; } .lesson-crumb { min-width: 0; } .lesson-crumb b, .lesson-crumb .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* 차시 필기 전체 지우기 */
.ink-clear-all { position: absolute; right: 8px; bottom: calc(100% + 8px); background: var(--card); color: var(--red); white-space: nowrap; }

/* ───────── 🎬 협동 탈출 이야기 컷(애니메이션) ───────── */
.cine::before, .cine::after { content: ''; position: absolute; left: 0; right: 0; height: 6vh; background: #000; z-index: 1; pointer-events: none; animation: ctBars .6s ease-out; }
.cine::before { top: 0; } .cine::after { bottom: 0; }
.cs-wrap.cine, .fn-wrap.cine { padding-bottom: calc(6vh + 10px); }
@media (max-width: 640px) { .cine::before, .cine::after { height: 4vh; } .cs-wrap.cine, .fn-wrap.cine { padding-bottom: calc(4vh + 8px); } }
@keyframes ctBars { from { height: 0; } }
.cine .cs-box, .cine .cs-foot, .cine .fn-skip, .cine .fn-credits { z-index: 2; }
.ct-scene { position: absolute; inset: 0; overflow: hidden; animation: ctIn .45s ease-out; }
@keyframes ctIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.ct-stage { position: absolute; left: 0; right: 0; top: 6vh; bottom: min(36vh, 230px); animation: ctKen 9s ease-out forwards; }
@keyframes ctKen { from { transform: scale(1); } to { transform: scale(1.08); } }
.ct-bg-space { background: radial-gradient(ellipse at 30% 20%, #2A2F6B, #0A0C1F 70%); }
.ct-bg-dark { background: radial-gradient(circle at 50% 40%, #24324F, #070A14 75%); }
.ct-bg-red { background: radial-gradient(circle at 50% 45%, #FF8A6B, #8E2B3C 75%); }
.ct-bg-dusk { background: linear-gradient(180deg, #5B4B8A, #C9783A); }
.ct-bg-metal { background: repeating-linear-gradient(90deg, #1E2840 0 40px, #232E47 40px 80px); }
.ct-bg-desert { background: linear-gradient(180deg, #FFD9A0 0%, #F6B26B 45%, #D9954F 100%); }
.ct-bg-cave { background: radial-gradient(ellipse at 50% 30%, #2E5E9A, #0B1A33 70%); }
.ct-bg-stone { background: repeating-linear-gradient(0deg, #8C6A3E 0 46px, #7A5A33 46px 50px), #8C6A3E; }
.ct-bg-night { background: radial-gradient(ellipse at 50% 100%, #1B3A6B, #04060F 70%); }
.ct-bg-paper { background: #FFF8E8; }
.ct-bg-warm { background: radial-gradient(circle at 50% 40%, #FFF1C2, #F6B26B 80%); }
.ct-bg-class { background: linear-gradient(180deg, #2F5D50 0 60%, #C9A46A 60%); }
.ct-bg-dim { background: radial-gradient(circle, #2A2F6B, #05060F 80%); }
.ct-big, .ct-fx, .ct-ship, .ct-bubble, .ct-paper, .ct-mission, .ct-moai-big, .ct-tower, .ct-rocket, .ct-teacher, .ct-stamp, .ct-bat { position: absolute; line-height: 1; }
.ct-big { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ct-big.emoji { font-size: min(30vh, 34vw); }
.ct-nuri svg { width: min(34vh, 46vw); height: min(34vh, 46vw); }
.ct-big.bounce { animation: ctBounce 1.2s ease-in-out infinite; }
@keyframes ctBounce { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -58%); } }
.ct-big.wobble { animation: ctWobble .5s ease-in-out infinite; }
@keyframes ctWobble { 0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); } 50% { transform: translate(-50%, -50%) rotate(4deg); } }
.ct-big.shake { animation: ctShake .25s linear infinite; }
@keyframes ctShake { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(-53%, -48%); } 75% { transform: translate(-47%, -52%); } }
.ct-big.tilt { animation: ctTilt 2s ease-in-out infinite; }
@keyframes ctTilt { 0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); } 50% { transform: translate(-50%, -50%) rotate(8deg); } }
.ct-big svg { width: min(34vh, 44vw); height: auto; }
.ct-fx { font-size: min(10vh, 12vw); }
.ct-fx.pop { left: 62%; top: 12%; font-family: var(--font-round); font-weight: 900; color: #FFE27A; text-shadow: 0 4px 0 #8E2B3C, 0 0 20px rgba(255, 226, 122, .7); animation: ctPop .5s .2s cubic-bezier(.2, 1.8, .4, 1) both; }
.ct-fx.pop.num { font-size: min(13vh, 16vw); }
.ct-fx.pop.small { font-size: min(6vh, 8vw); left: 58%; top: 16%; }
.ct-fx.pop.word { left: 50%; top: 6%; transform: translateX(-50%); font-size: min(9vh, 11vw); white-space: nowrap; }
@keyframes ctPop { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
.ct-fx.glass { left: 44%; top: 30%; font-size: min(9vh, 11vw); animation: ctGlass .8s .5s ease-out both; }
@keyframes ctGlass { from { transform: translateY(-40vh); } to { transform: none; } }
.ct-fx.drip { top: 30%; animation: ctDrip 1.4s ease-in infinite; }
.ct-fx.d1 { left: 36%; } .ct-fx.d2 { left: 60%; animation-delay: .6s; } .ct-fx.d3 { left: 58%; animation-delay: .7s; }
@keyframes ctDrip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(26vh); opacity: 0; } }
.ct-fx.fly { top: 60%; animation: ctFly 1.6s ease-out infinite; }
.ct-fx.f1 { left: 20%; } .ct-fx.f2 { left: 74%; animation-delay: .4s; } .ct-fx.f3 { left: 46%; animation-delay: .8s; }
@keyframes ctFly { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(0, -40vh) rotate(540deg); opacity: 0; } }
.ct-fx.q { animation: ctQ 1.4s ease-in-out infinite; }
.ct-fx.q1 { left: 64%; top: 10%; } .ct-fx.q2 { left: 28%; top: 16%; animation-delay: .5s; }
@keyframes ctQ { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.15); } }
.ct-fx.boom { left: 50%; top: 50%; font-size: min(36vh, 44vw); transform: translate(-50%, -50%); animation: ctBoom .9s .5s ease-out both; }
@keyframes ctBoom { from { scale: 0; opacity: 0; } 30% { scale: 1.3; opacity: 1; } to { scale: 1; opacity: .9; } }
.ct-flash { position: absolute; inset: -10vh 0; background: #fff; animation: ctFlash .9s .5s ease-out both; }
@keyframes ctFlash { from { opacity: 0; } 15% { opacity: 1; } to { opacity: 0; } }
.ct-ship { left: 50%; top: 50%; font-size: min(26vh, 32vw); transform: translate(-50%, -50%); }
.ct-ship.cruise { animation: ctCruise 3s ease-in-out infinite; }
@keyframes ctCruise { 0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); } 50% { transform: translate(-50%, -58%) rotate(3deg); } }
.ct-ship .zz { left: 80%; top: -20%; font-size: .35em; animation: ctZz 2s ease-in-out infinite; }
@keyframes ctZz { from { transform: translate(0, 0); opacity: 0; } 40% { opacity: 1; } to { transform: translate(20px, -40px); opacity: 0; } }
.ct-ship.fall { animation: ctFall .7s ease-in both; }
@keyframes ctFall { from { transform: translate(-120%, -160%) rotate(-30deg); } to { transform: translate(-50%, -30%) rotate(25deg); } }
.ct-ship.landed { top: 62%; font-size: min(18vh, 24vw); transform: translate(-50%, -50%) rotate(18deg); filter: grayscale(.4); }
.ct-fx.smoke { left: 52%; top: 30%; animation: ctSmoke 2.4s ease-out infinite; }
@keyframes ctSmoke { from { transform: translateY(0) scale(.6); opacity: .9; } to { transform: translateY(-20vh) scale(1.6); opacity: 0; } }
.ct-fx.snow { top: -5%; animation: ctSnow 3s linear infinite; } .ct-fx.s1 { left: 20%; } .ct-fx.s2 { left: 70%; animation-delay: 1.4s; }
@keyframes ctSnow { to { transform: translateY(50vh) rotate(360deg); } }
.ct-dunes { position: absolute; left: -10%; right: -10%; bottom: 0; height: 40%; border-radius: 50% 50% 0 0; background: #B87332; }
.ct-icicles { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: min(8vh, 10vw); letter-spacing: 3vw; opacity: .8; }
.ct-crew { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); display: flex; gap: 1vw; }
.ct-crew span { display: block; animation-delay: calc(var(--i) * .12s); }
.ct-crew svg { width: min(15vh, 18vw); height: auto; }
.ct-crew.run { left: 30%; animation: ctRun 2.6s linear infinite; }
.ct-crew.run span { animation: ctHop .3s ease-in-out infinite alternate; }
@keyframes ctRun { from { transform: translateX(-60%); } to { transform: translateX(80%); } }
.ct-crew.hop span { animation: ctHop .45s ease-in-out infinite alternate; }
@keyframes ctHop { to { transform: translateY(-14px); } }
.ct-crew.shake span { animation: ctJit .2s linear infinite; }
.ct-crew.tremble { bottom: 2%; } .ct-crew.tremble span { animation: ctJit .15s linear infinite; }
@keyframes ctJit { 0%, 100% { transform: translate(0); } 50% { transform: translate(2px, -2px); } }
.ct-moai-run { position: absolute; left: 0; bottom: 6%; font-size: min(16vh, 20vw); animation: ctRun 2.6s .5s linear infinite; }
.ct-fx.note { left: 10%; bottom: 24%; animation: ctRun 2.6s .5s linear infinite; }
.ct-cells { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 2vw; }
.ct-cell { position: relative; padding: 10px; border: 4px solid #57E1FF; border-radius: 12px; background: #0D121C; }
.ct-cell svg { width: min(11vh, 14vw); height: auto; display: block; }
.ct-cell i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 14px, #7E8BA8 14px 18px); }
.ct-fx.stomp { right: 6%; top: 20%; animation: ctStomp 1s steps(2) infinite; }
@keyframes ctStomp { 50% { transform: translate(-8px, 6px); } }
.ct-fx.thud { left: 8%; top: 6%; font-family: var(--font-round); font-weight: 900; color: #FFB3B8; font-size: min(6vh, 8vw); animation: ctThud 1s infinite; }
@keyframes ctThud { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.3); } }
.ct-spot { position: absolute; left: 50%; top: -10%; width: 60vw; height: 120%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 70%, rgba(255, 246, 200, .5), transparent 60%); animation: csIn 1s; }
.ct-paper { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); padding: 3vh 4vw; background: #F4E3B5; color: #5E3E22; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: min(10vh, 12vw); text-align: center; animation: ctPaper 1.2s ease-out both; }
.ct-paper b { display: block; font-size: .35em; margin-top: 6px; } .ct-paper i { display: block; font-size: .28em; margin-top: 4px; font-style: normal; color: #B04040; }
@keyframes ctPaper { from { transform: translate(-50%, -140%) rotate(20deg); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-4deg); opacity: 1; } }
.ct-moai-row { position: absolute; left: 0; right: 0; bottom: 18%; display: flex; justify-content: center; gap: 2vw; font-size: min(17vh, 15vw); }
.ct-moai-row span { animation: ctRise .6s calc(var(--i) * .25s) ease-out both; }
@keyframes ctRise { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
.ct-moai-big { left: 50%; top: 52%; font-size: min(42vh, 50vw); transform: translate(-50%, -50%); animation: ctCloser 6s ease-out forwards; }
.ct-moai-big.still { animation: none; filter: saturate(.7); }
@keyframes ctCloser { from { scale: .7; } to { scale: 1.12; } }
.ct-bubble { left: 58%; top: 6%; padding: 12px 16px; border-radius: 18px; background: #fff; color: #3B3355; font-family: var(--font-round); font-weight: 800; font-size: min(4.2vh, 5vw); animation: ctPop .4s .6s cubic-bezier(.2, 1.6, .4, 1) both; max-width: 36vw; }
.ct-fx.tear { left: 46%; top: 44%; animation: ctDrip 2.2s ease-in infinite; }
.ct-mural { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3vh 4vw; border: 6px solid #3E2814; background: #C9A46A; border-radius: 8px; overflow: hidden; }
.ct-mural-in { animation: ctWipe 2s ease-out both; text-align: center; font-size: min(10vh, 11vw); filter: sepia(.6); white-space: nowrap; }
.ct-mural-in span.t { font-size: 1.3em; margin-right: 1vw; }
.ct-mural p { margin: 8px 0 0; font-family: var(--font-round); font-size: min(3.6vh, 4.4vw); color: #3E2814; font-weight: 900; filter: none; }
@keyframes ctWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ct-bat { left: 0; top: 30%; font-size: min(16vh, 20vw); animation: ctBat 3s ease-in-out infinite; }
.ct-bat span { font-size: .5em; margin-left: -.2em; }
@keyframes ctBat { 0% { transform: translate(-20vw, 0); } 50% { transform: translate(40vw, -6vh) scaleY(.8); } 100% { transform: translate(100vw, 0); } }
.ct-tower { left: 50%; bottom: 0; transform: translateX(-50%); font-size: min(22vh, 26vw); }
.ct-beam { position: absolute; left: 50%; bottom: 18vh; width: 50px; transform: translateX(-50%); background: linear-gradient(0deg, #FFF6C8, #7FE3FF 50%, rgba(127, 227, 255, 0)); box-shadow: 0 0 60px #7FE3FF; filter: blur(2px); animation: ctBeam 1.4s ease-out forwards; height: 0; }
@keyframes ctBeam { to { height: 120vh; } }
.ct-portal { position: absolute; left: 50%; top: 4%; width: min(46vh, 60vw); height: min(46vh, 60vw); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, #FFF6C8, #FFD06B 30%, #B57BFF 60%, transparent 70%); box-shadow: 0 0 120px #B57BFF; animation: ctPortal 1.4s ease-out both, fnSpin 6s linear infinite; }
@keyframes ctPortal { from { scale: 0; } to { scale: 1; } }
.ct-teacher { left: 50%; top: 8%; font-size: min(26vh, 32vw); transform: translateX(-50%); animation: ctDown 2.4s ease-out both; }
.ct-teacher span { font-size: .4em; }
@keyframes ctDown { from { transform: translate(-50%, -60vh); } to { transform: translate(-50%, 0); } }
.ct-sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2deg); width: min(60vw, 420px); padding: 2vh 3vw; background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ct-sheet div { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 2px dashed #E4DCC8; font-family: var(--font-round); font-size: min(4vh, 5vw); color: #5E3E22; }
.ct-sheet b { color: #E5484D; animation: ctPop .3s calc(.4s + var(--i) * .45s) cubic-bezier(.2, 1.8, .4, 1) both; }
.ct-stamp { left: 62%; top: 10%; font-size: min(22vh, 26vw); animation: ctStamp .5s .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ctStamp { from { scale: 3; opacity: 0; rotate: -30deg; } to { scale: 1; opacity: 1; rotate: -12deg; } }
.ct-fx.spark { animation: ctQ 1s ease-in-out infinite; } .ct-fx.spark.s1 { left: 18%; top: 14%; } .ct-fx.spark.s2 { left: 78%; top: 54%; animation-delay: .4s; }
.ct-free { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; gap: 4vw; font-size: min(22vh, 24vw); }
.ct-free span { position: relative; display: block; }
.ct-free b { display: block; animation: ctCrack 1.6s calc(var(--i) * .3s) ease-in both; }
.ct-free i { position: absolute; left: 0; top: 0; font-style: normal; animation: ctOut 1s calc(1.3s + var(--i) * .3s) cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ctCrack { 0% { transform: none; opacity: 1; } 60% { transform: translateX(-6px) rotate(-3deg); } 70% { transform: translateX(6px) rotate(3deg); } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes ctOut { from { transform: translateY(30%) scale(.2); opacity: 0; } to { transform: translateY(-10%); opacity: 1; } }
.ct-kids { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); display: flex; gap: 2vw; font-size: min(16vh, 15vw); }
.ct-kids span { animation: ctWave .6s calc(var(--i) * .1s) ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes ctWave { from { transform: rotate(-8deg); } to { transform: rotate(8deg) translateY(-8px); } }
.ct-rocket { left: 50%; top: 0; font-size: min(22vh, 26vw); transform: translateX(-50%) rotate(180deg); animation: ctLand 2.2s ease-out both; }
@keyframes ctLand { from { transform: translate(-50%, -60vh) rotate(180deg); } to { transform: translate(-50%, 0) rotate(180deg); } }
.ct-mission { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); padding: 3vh 5vw; border: 5px solid #FFE27A; border-radius: 16px; background: rgba(10, 14, 30, .7); text-align: center; color: #fff; animation: ctStamp .55s .15s cubic-bezier(.2, 1.6, .4, 1) both; box-shadow: 0 0 60px rgba(255, 226, 122, .4); }
.ct-mission small { display: block; letter-spacing: .3em; color: #FFE27A; font-weight: 900; font-size: min(3vh, 3.6vw); }
.ct-mission b { display: block; margin-top: 8px; font-family: var(--font-round); font-size: min(7vh, 8vw); }
.ct-warp { animation: ctWarp .6s linear infinite; }
@keyframes ctWarp { from { background-position: 0 0; } to { background-position: -200px 0; } }
.fn-cut { z-index: 1; }
.fn-wrap.cut .fn-sky > :not(.cs-stars) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ct-scene *, .ct-stage { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }