/* 로지카 탑 탈출 — 세계 스타일 (맑은 낮 하늘, 크림·흰 카드, 금테 보드) */
:root {
  --sky0: #BFE8FF; --sky1: #FFF3D6; --sky2: #9ED6F6;
  --gold: #F5C451; --gold-deep: #C8952A; --gold-dark: #8A5A10;
  --cyan: #2EC4D6; --magenta: #FF6FB5; --violet: #9B7BFF;
  --cream: #FFF8EA; --cream-shadow: #E5CFA6; --white: #FFFFFF; --ink: #2A2F4A;
  --ok: #34D399; --ok-text: #157A56; --bad: #FF6B6B; --bad-text: #C93D3D;
  --glass: rgba(255, 255, 255, .72); --glass-line: rgba(42, 47, 74, .14);
  --text: #2A2F4A; --muted: #5F6580;
  /* 그림 헬퍼(render.js)용 */
  --fg: #2A2F4A; --card: rgba(255, 255, 255, .8); --line: rgba(42, 47, 74, .18);
  --accent: var(--violet); --accent-fg: #fff; --shade: rgba(155, 123, 255, .5);
  --c0: var(--cyan); --c1: var(--magenta); --c2: #D9A21B; --star: #E0A400;
  --font-title: "Jua", "Noto Sans KR", "Noto Sans Math", system-ui, sans-serif;
  --font-body: "Noto Sans KR", "Noto Sans", "Noto Sans Math", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100%; overflow-x: hidden; color: var(--text);
  background:
    radial-gradient(circle at 84% 9%, #FFF6C2 0 5%, rgba(255, 246, 194, .6) 11%, rgba(255, 246, 194, 0) 24%),
    linear-gradient(180deg, var(--sky2) 0%, var(--sky0) 45%, var(--sky1) 100%);
  font: 16px/1.5 var(--font-body);
  transition: background 2.5s ease;
}
body.rainbow {
  background:
    radial-gradient(circle at 50% 12%, #FFFBE0 0 8%, rgba(255, 251, 224, 0) 30%),
    linear-gradient(180deg, #FFD3E1 0%, #FFE9B8 22%, #FFF9B8 40%, #D6F7D9 58%, #C9EBFF 78%, #E3D4FF 100%);
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
h1, h2, h3, .title-font { font-family: var(--font-title); font-weight: 400; letter-spacing: .01em; }
p { margin: 0; }

/* ── 층: 3D 무대 / 2D 배경 / UI ── */
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; touch-action: none; opacity: 0; transition: opacity .8s ease; }
#stage.on { opacity: 1; }
#bg2d { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#bg2d.off { display: none; }
#bg2d svg { width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 2; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.scr-room { min-height: 100vh; min-height: 100dvh; }
#ui.pass { pointer-events: none; }
#ui.pass .ui-solid { pointer-events: auto; }
.scr { min-height: 100%; display: flex; flex-direction: column; padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; animation: scr-in .35s ease both; }
@keyframes scr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.spacer { flex: 1 1 auto; }

/* ── 구름과 비눗방울(집합 모티프) ── */
.sky-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sky-bg .cloud { position: absolute; width: 140px; height: 46px; border-radius: 40px; background: #fff; opacity: .9; box-shadow: 0 6px 14px rgba(42, 47, 74, .08); animation: cloud-drift 40s linear infinite; }
.sky-bg .cloud::before, .sky-bg .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.sky-bg .cloud::before { width: 60px; height: 60px; left: 22px; top: -30px; }
.sky-bg .cloud::after { width: 44px; height: 44px; left: 70px; top: -18px; }
@keyframes cloud-drift { from { transform: translateX(-160px); } to { transform: translateX(110vw); } }
.sky-bg b { position: absolute; border-radius: 50%; border: 2px solid rgba(46, 196, 214, .45); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .8), rgba(255, 255, 255, .05) 60%); animation: drift 14s ease-in-out infinite alternate; }
.sky-bg b.m { border-color: rgba(255, 111, 181, .45); }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(24px, -40px) scale(1.15); } }

/* ── 타일 버튼 ── */
.tile {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border: 0; border-radius: 16px;
  background: var(--cream); color: var(--ink); font-weight: 700; font-size: 1.02rem;
  box-shadow: 0 5px 0 var(--cream-shadow), 0 10px 18px rgba(42, 47, 74, .14);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease; text-align: center; overflow-wrap: anywhere; min-width: 0;
}
.tile:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--cream-shadow), 0 4px 10px rgba(42, 47, 74, .14); }
.tile:disabled { filter: saturate(.5) brightness(.96); color: #7a7f95; }
.tile.gold { background: linear-gradient(180deg, #FFE08A, var(--gold)); color: var(--ink); box-shadow: 0 6px 0 var(--gold-deep), 0 12px 24px rgba(245, 196, 81, .4); }
.tile.gold:active:not(:disabled) { box-shadow: 0 1px 0 var(--gold-deep), 0 4px 10px rgba(245, 196, 81, .3); }
.tile.big { min-height: 64px; font-size: 1.35rem; padding: 12px 36px; border-radius: 22px; font-family: var(--font-title); }
.tile.ghost { background: var(--glass); color: var(--ink); box-shadow: 0 4px 0 rgba(42, 47, 74, .18), inset 0 0 0 1.5px var(--glass-line); }
.tile.ghost:active:not(:disabled) { box-shadow: 0 1px 0 rgba(42, 47, 74, .18), inset 0 0 0 1.5px var(--glass-line); }
.tile.danger { background: #ffd2d3; color: #7a1c1f; box-shadow: 0 5px 0 #c98a8c, 0 10px 18px rgba(42, 47, 74, .14); }
.tile.sm { min-height: 44px; padding: 6px 14px; font-size: .95rem; border-radius: 12px; }
.tile.icon { width: 48px; padding: 0; font-size: 1.3rem; }
.tile.tog { white-space: nowrap; padding: 6px 10px; font-size: .85rem; min-width: 64px; }
.tile.tog[aria-pressed="false"] { color: #7a7f95; text-decoration: line-through; }
.tile.tog.ico { width: 44px; min-width: 44px; padding: 0; font-size: 1.15rem; }
.tile.tog.ico[aria-pressed="false"] { opacity: .5; text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--bad-text); }
#ui.cooldown, #ui.cooldown .ui-solid { pointer-events: none !important; }
.tile.chosen { outline: 3px solid var(--violet); outline-offset: 2px; }
.tile.on { background: linear-gradient(180deg, #d9d0ff, #b7a6ff); box-shadow: 0 5px 0 #7d63d9, 0 10px 18px rgba(155, 123, 255, .35); }

/* ── 제목 화면 ── */
.scr-title { justify-content: flex-end; align-items: center; text-align: center; padding-bottom: 28px; }
.logo { margin: 0 0 4px; font-size: clamp(2.3rem, 11vw, 4rem); line-height: 1.05; color: var(--ink); text-shadow: 0 3px 0 var(--gold), 0 10px 24px rgba(42, 47, 74, .2); }
.logo .l2 { display: block; color: var(--gold-dark); font-size: .62em; text-shadow: 0 2px 0 #fff; letter-spacing: .08em; }
.tagline { color: var(--muted); font-size: 1.02rem; margin: 6px 0 18px; }
.title-mascot { position: relative; margin-bottom: -6px; animation: float 3.6s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(42, 47, 74, .2)); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.title-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; max-width: 320px; }
.title-actions .tile { width: 100%; }
.title-row { display: flex; gap: 10px; width: 100%; }
.title-row .tile { flex: 1 1 0; }
.progress-dots { display: flex; gap: 6px; justify-content: center; margin: 8px 0 4px; }
.progress-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(42, 47, 74, .12); box-shadow: inset 0 0 0 1px rgba(42, 47, 74, .18); }
.progress-dots i.lit { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.title-foot { margin-top: 14px; color: var(--muted); font-size: .8rem; }
.foot-link { display: inline-block; color: var(--ink); text-decoration: underline; font-weight: 700; min-height: 44px; line-height: 44px; padding: 0 6px; }

/* ── 이야기/모달 ── */
.modal-back { position: fixed; inset: 0; z-index: 5; background: rgba(120, 160, 200, .45); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: scr-in .25s ease; }
.modal { width: 100%; max-width: 480px; max-height: 90vh; max-height: 90dvh; overflow: auto; }
.story p { margin: 8px 0; line-height: 1.65; }
.story .who { color: var(--gold-dark); font-family: var(--font-title); }

/* ── 금테 보드 ── */
.board {
  position: relative; border-radius: 24px; padding: 14px;
  background: linear-gradient(180deg, #FFFDF6, var(--cream));
  box-shadow: 0 0 0 4px var(--gold), 0 0 0 7px #FFF3C4, 0 24px 48px rgba(42, 47, 74, .22), inset 0 1px 0 #fff;
}
.board::before, .board::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2c0, var(--gold) 55%, var(--gold-deep)); }
.board::before { top: -6px; left: -6px; }
.board::after { top: -6px; right: -6px; }
.board-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.board-head h2 { margin: 0; font-size: 1.25rem; color: var(--gold-dark); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.board-head .sub { display: block; font-family: var(--font-body); font-size: .8rem; color: var(--muted); }
.board.shake { animation: shake .45s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-9px) rotate(-.6deg); } 35% { transform: translateX(8px) rotate(.5deg); } 55% { transform: translateX(-5px); } 75% { transform: translateX(4px); } }
.board.alarm::before, .board.alarm::after { animation: alarm-flash .5s ease 2; }
@keyframes alarm-flash { 0%, 100% { background: var(--gold); } 50% { background: var(--bad); box-shadow: 0 0 18px var(--bad); } }

/* HUD */
.hud { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.alarms { display: flex; gap: 6px; }
.alarms i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb3b5, var(--bad) 60%, #b83a3a); box-shadow: 0 0 10px rgba(255, 107, 107, .6), inset 0 -2px 3px rgba(0, 0, 0, .2); transition: all .3s; }
.alarms i.off { background: radial-gradient(circle at 35% 30%, #e6e2d8, #cfcabd 60%, #b2ad9f); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .15); }
.alarms i.blink { animation: alarm-blink .5s ease 3; }
@keyframes alarm-blink { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); transform: scale(1.25); } }
.gauge { flex: 1 1 120px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 16px; padding: 3px; border-radius: 8px; background: #EAE2D0; box-shadow: inset 0 1px 3px rgba(42, 47, 74, .2); }
.gauge i { border-radius: 3px; background: rgba(255, 255, 255, .6); transition: background .3s, box-shadow .3s; }
.gauge i.fill { background: linear-gradient(180deg, #7fe6f0, var(--cyan)); box-shadow: 0 0 8px rgba(46, 196, 214, .7); }
.gauge i.fill.pop { animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.6); filter: brightness(1.3); } 100% { transform: scale(1); } }
.gauge i.cur { box-shadow: inset 0 0 0 1.5px var(--gold-deep); }
.stage-badge { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--ink); white-space: nowrap; }
.stage-badge.lv1 { background: #A9F0D0; } .stage-badge.lv2 { background: #FFE08A; } .stage-badge.lv3 { background: #FFB4B4; }

/* 장치 본문 (게임 mount 호스트) */
.dev-body { position: relative; border-radius: 16px; padding: 12px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(42, 47, 74, .1); min-height: 160px; transition: box-shadow .25s; }
.dev-body.ok { box-shadow: inset 0 0 0 2px var(--ok), 0 0 24px rgba(52, 211, 153, .45); }
.dev-body.ok::after { content: "✓ 정답"; position: absolute; top: 8px; right: 10px; color: var(--ok-text); font-weight: 800; font-family: var(--font-title); font-size: 1.1rem; animation: pop .5s ease; z-index: 1; }
.sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 16px; }
.sparkles i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: spark .8s ease-out forwards; }
@keyframes spark { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }

.qcard { display: block; background: var(--white); color: var(--ink); border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; overflow-wrap: anywhere; box-shadow: 0 3px 0 #E8DFCB, 0 0 0 1px rgba(42, 47, 74, .06); }
.qlabel { display: block; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.qtext { font-size: 1.08rem; font-weight: 700; }
.prompt { font-weight: 700; margin: 10px 0; color: var(--ink); overflow-wrap: anywhere; }
.choices { display: grid; gap: 10px; grid-template-columns: 1fr; }
.choices.two { grid-template-columns: 1fr 1fr; }
.choice { text-align: left; }
.choices.two .choice { text-align: center; font-size: 1.05rem; }
.row { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.pickval { font-weight: 700; min-width: 120px; text-align: center; color: var(--ink); }

/* 장치별 테마 */
.conveyor { position: relative; height: 96px; margin: 6px 0 10px; border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(90deg, #B9C4D6 0 22px, #D5DDEA 22px 44px); box-shadow: inset 0 0 0 2px #8F9BB3, inset 0 -14px 0 #A3AEC4; animation: belt 1.4s linear infinite; }
@keyframes belt { from { background-position: 0 0; } to { background-position: 44px 0; } }
.conveyor .crate { position: absolute; top: 14px; left: 50%; width: 60px; height: 60px; margin-left: -30px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(180deg, #F2C67A, #D9A24A); color: #4a2a05; font-size: 1.5rem; font-weight: 800; box-shadow: inset 0 0 0 3px #A8742A, 0 6px 12px rgba(42, 47, 74, .3); animation: crate-in .7s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes crate-in { from { transform: translateX(-140px); } to { transform: translateX(0); } }
.baskets .choice { min-height: 60px; border-radius: 14px 14px 22px 22px; font-size: 1.1rem; }
.baskets .choice:first-child { background: linear-gradient(180deg, #D6F6FA, #9FE7EF); box-shadow: 0 5px 0 #4FB6C1; }
.baskets .choice:last-child { background: linear-gradient(180deg, #FFDCEE, #FFB4D8); box-shadow: 0 5px 0 #D8629C; }
.dev-1-2 .qcard { border-left: 8px solid var(--cyan); }
.dev-1-2 .qcard + .qcard { border-left-color: var(--magenta); margin-left: 14px; }
.venn-box { position: relative; padding: 8px; border-radius: 14px; background: #F4F9FF; box-shadow: inset 0 0 0 1px rgba(42, 47, 74, .1); }
.dev-2-1 .venn-box { background: radial-gradient(circle at 38% 50%, rgba(46, 196, 214, .2), transparent 40%), radial-gradient(circle at 62% 50%, rgba(255, 111, 181, .2), transparent 40%), #F4F9FF; }
.dev-2-2 .venn { border-radius: 14px; background: #F4F9FF; box-shadow: 0 0 0 5px #E9D39A, 0 0 0 8px var(--gold); padding: 6px; }
.region-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.rchip { padding: 6px 4px; font-size: .9rem; }
.lever .choice { min-height: 64px; font-size: 1.3rem; font-family: var(--font-title); }
.lever .choice::before { font-size: 1.5rem; margin-right: 6px; }
.lever .choice:first-child::before { content: "○"; color: var(--ok-text); }
.lever .choice:last-child::before { content: "✕"; color: var(--bad-text); }
.dev-3-2 .board, .dev-3-2 .nline { border-radius: 12px; background: rgba(52, 211, 153, .08); }
.dev-4-1 .slots { border-radius: 14px; padding: 8px; background: linear-gradient(135deg, rgba(168, 200, 255, .35), rgba(255, 255, 255, .5)); box-shadow: inset 0 0 0 2px rgba(120, 150, 220, .35); }
.dev-4-2 .choice { border-left: 6px solid var(--violet); }
.dev-5-1 .qcard:first-child { border-radius: 50px 14px 14px 50px; border-left: 8px solid var(--cyan); }
.dev-5-1 .qcard:nth-child(2) { border-radius: 14px 50px 50px 14px; border-right: 8px solid var(--magenta); }
.dev-5-2 .choice { background: linear-gradient(180deg, #FBE7BF, #EDCB8E); box-shadow: 0 5px 0 #B8863E; }

/* 그림(render.js) */
.venn { width: 100%; max-width: 340px; display: block; margin: 0 auto; }
.venn.small { max-width: 150px; }
.venn.pickable { cursor: pointer; }
.venn .outline { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.venn text { font-size: 13px; fill: var(--ink); text-anchor: middle; }
.venn text.lbl { font-weight: 700; }
.venn text.bad { fill: var(--bad-text); font-weight: 800; }
.venns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.venns figure { margin: 0; text-align: center; }
.venns figcaption { font-size: .85rem; color: var(--muted); }
.board-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cell { min-height: 44px; padding: 4px 0; border: 0; border-radius: 10px; background: var(--white); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-weight: 700; box-shadow: 0 3px 0 #E8DFCB, 0 0 0 1px rgba(42, 47, 74, .08); }
button.cell:active { transform: translateY(2px); box-shadow: 0 1px 0 #E8DFCB; }
.cell.mark { outline: 3px solid var(--bad); outline-offset: -3px; }
.cell.picked { background: var(--violet); color: #fff; box-shadow: 0 3px 0 #5d43c2; }
.bars { display: flex; gap: 2px; }
.bars i { width: 10px; height: 4px; border-radius: 2px; background: rgba(42, 47, 74, .12); }
.bars i.on.c0 { background: var(--c0); } .bars i.on.c1 { background: var(--c1); } .bars i.on.c2 { background: var(--c2); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .85rem; margin: 6px 0; color: var(--ink); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.lg.c0 i { background: var(--c0); } .lg.c1 i { background: var(--c1); } .lg.c2 i { background: var(--c2); }
.nline { width: 100%; display: block; }
.nline.pickable { cursor: pointer; }
.nline .seg { stroke-width: 4; stroke-linecap: round; }
.nline .c0 { stroke: var(--c0); fill: var(--c0); } .nline .c1 { stroke: var(--c1); fill: var(--c1); } .nline .c2 { stroke: var(--c2); fill: var(--c2); }
.nline text.rl { font-size: 12px; font-weight: 700; stroke: none; }
.nline .axis { stroke: var(--muted); stroke-width: 1.2; }
.nline .tick { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.nline .markTri { fill: var(--bad-text); }
.nline .pickDot { fill: var(--violet); }
.slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.slot { display: flex; flex-direction: column; gap: 4px; flex: 1 1 130px; min-width: 0; }
.slot-main { min-height: 56px; overflow-wrap: anywhere; border: 2px dashed rgba(42, 47, 74, .35); background: rgba(255, 255, 255, .8); color: var(--ink); border-radius: 12px; padding: 8px; }
.slot.active .slot-main { border-color: var(--gold-deep); border-style: solid; }
.neg { font-size: .88rem; padding: 4px; min-height: 44px; }
.joiner { font-weight: 700; color: var(--ink); }
.pool { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preview { min-height: 1.5em; color: var(--muted); overflow-wrap: anywhere; margin: 8px 0; }
.triple { width: 100%; border-collapse: collapse; font-size: .92rem; }
.triple th, .triple td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }
.triple td { overflow-wrap: anywhere; }
.triple th, .tv { white-space: nowrap; }
.tv { font-weight: 700; } .tv.t { color: var(--ok-text); } .tv.f { color: var(--bad-text); }
.setlist p { margin: 4px 0; overflow-wrap: anywhere; }
.setlist .mark { color: var(--bad-text); font-weight: 800; text-decoration: underline; }

/* 벤벤 말풍선 / 피드백 */
.benben-say { display: flex; gap: 10px; align-items: flex-start; }
.benben-avatar { flex: 0 0 auto; }
.bubble { position: relative; flex: 1 1 auto; min-width: 0; background: var(--white); color: var(--ink); border-radius: 16px; padding: 10px 14px; box-shadow: 0 4px 0 #E8DFCB, 0 0 0 1px rgba(42, 47, 74, .08); }
.bubble::before { content: ""; position: absolute; left: -10px; top: 26px; border: 8px solid transparent; border-right-color: var(--white); border-left: 0; }
.bubble p { margin: 2px 0; overflow-wrap: anywhere; }
.bubble p.lead { font-weight: 800; color: var(--bad-text); }
.fb-layer { margin-top: 12px; animation: scr-in .3s ease; }
.fb-answer { margin: 6px 0; overflow-wrap: anywhere; color: var(--ink); }
.fb-answer strong { color: var(--gold-dark); }
.fb-fig { margin: 10px 0; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(42, 47, 74, .08); }
.benben.happy .wing { animation: flap .6s ease 2; transform-origin: 50% 40%; }
@keyframes flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
.benben.worry { animation: wobble .6s ease; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 60% { transform: rotate(4deg); } }

/* 결과 / 연구노트 */
.result-card { text-align: center; }
.big-stars { font-size: 3rem; color: var(--star); margin: 0; letter-spacing: 6px; text-shadow: 0 2px 0 #fff, 0 0 20px rgba(245, 196, 81, .6); }
.big-stars .dim { color: rgba(42, 47, 74, .15); text-shadow: none; }
.big-stars span { display: inline-block; animation: star-in .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.big-stars span:nth-child(2) { animation-delay: .15s; } .big-stars span:nth-child(3) { animation-delay: .3s; }
@keyframes star-in { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.result-card h3 { margin: 6px 0; font-size: 1.4rem; color: var(--ink); }
.newrec { color: var(--ok-text); font-weight: 700; }
.note-card { margin: 14px 0; text-align: left; background: #FFFBEF; color: var(--ink); border-radius: 16px; padding: 12px 14px; box-shadow: 0 5px 0 var(--cream-shadow); background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(42, 47, 74, .07) 27px 28px); }
.note-card h4 { margin: 0 0 6px; font-family: var(--font-title); font-weight: 400; color: var(--gold-dark); font-size: 1.05rem; }
.note-card ul { margin: 0; padding-left: 18px; }
.note-card li { margin: 2px 0; overflow-wrap: anywhere; }
.big-score { font-size: 3rem; font-weight: 800; margin: 0; color: var(--gold-dark); font-family: var(--font-title); }
.tally { width: 100%; border-collapse: collapse; margin: 10px 0; }
.tally td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.tally td:last-child { text-align: right; white-space: nowrap; }
.tally tr.weak td { color: var(--bad-text); font-weight: 700; }
.acc-bar { height: 8px; border-radius: 4px; background: rgba(42, 47, 74, .1); overflow: hidden; }
.acc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); }

/* ── 탑 지도 ── */
.map-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.map-head { flex-wrap: wrap; }
.map-head h2 { margin: 0; font-size: 1.35rem; color: var(--ink); flex: 1 1 0; min-width: 0; text-shadow: 0 2px 0 #fff; overflow-wrap: anywhere; }
.scr-tut .map-head h2 { font-size: 1.15rem; }
.map-head .sub { display: block; font-family: var(--font-body); font-size: .8rem; color: var(--muted); text-shadow: none; }
.floor-list { display: grid; gap: 10px; }
.floor-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; background: var(--white); }
.floor-row .fno { font-family: var(--font-title); font-size: 1.15rem; color: var(--gold-dark); }
.floor-row .fname { font-weight: 800; font-size: 1.02rem; }
.floor-row .fdev { display: block; font-size: .82rem; color: var(--muted); font-weight: 500; overflow-wrap: anywhere; }
.floor-row .fstars { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; font-size: .85rem; color: var(--star); letter-spacing: 1px; }
.floor-row.roof { background: linear-gradient(180deg, #F1EAFF, #DCCFFF); box-shadow: 0 5px 0 #9B85E0; }
.floor-row.roof .fno { color: #5A3FB8; }
.floor-row.f1 { border-left: 8px solid #FFC7A3; } .floor-row.f2 { border-left: 8px solid #A9DDFF; } .floor-row.f3 { border-left: 8px solid #A9F0D0; } .floor-row.f4 { border-left: 8px solid #D4C4FF; } .floor-row.f5 { border-left: 8px solid #FFF0A0; }
.emblem { position: relative; width: 44px; height: 30px; }
.emblem i { position: absolute; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(42, 47, 74, .2); }
.emblem i:first-child { left: 0; } .emblem i:last-child { left: 14px; }
.emblem.lit i:first-child { border-color: var(--cyan); background: rgba(46, 196, 214, .35); box-shadow: 0 0 10px var(--cyan); }
.emblem.lit i:last-child { border-color: var(--magenta); background: rgba(255, 111, 181, .35); box-shadow: 0 0 10px var(--magenta); }
.emblem.lit::after { content: ""; position: absolute; left: 14px; top: 3px; width: 14px; height: 22px; border-radius: 50%; background: var(--violet); opacity: .7; }
.map-foot { margin-top: 16px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; min-height: 44px; }

/* ── 방(3D) 화면 ── */
.scr-room { padding: 0; max-width: none; justify-content: space-between; animation: none; }
.room-top { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 12px 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); }
.room-top h2 { margin: 0; font-size: 1.15rem; color: var(--ink); flex: 1 1 auto; min-width: 0; text-shadow: 0 1px 0 #fff, 0 2px 8px rgba(255, 255, 255, .8); }
.room-top .sub { display: block; font-family: var(--font-body); font-size: .78rem; color: var(--muted); }
.room-bottom { display: grid; gap: 8px; padding: 10px 12px max(14px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); }
.room-hint { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--ink); font-size: .9rem; text-shadow: 0 1px 0 #fff; min-height: 24px; }
.dev-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dev-btn { flex-direction: column; gap: 2px; padding: 8px 10px; min-height: 64px; line-height: 1.25; background: var(--white); }
.dev-btn .dname { font-size: 1rem; }
.dev-btn .dstar { font-size: .85rem; color: var(--star); letter-spacing: 1px; }
.dev-btn.done { background: linear-gradient(180deg, #E4FBF0, #B9F2D8); box-shadow: 0 5px 0 #4db58c; }
.door-btn { min-height: 44px; }
.door-btn.lit { background: linear-gradient(180deg, #fff1bd, var(--gold)); box-shadow: 0 5px 0 var(--gold-deep), 0 0 24px rgba(245, 196, 81, .6); }

/* 장치 패널(모달) */
.panel-back { position: fixed; inset: 0; z-index: 4; overflow-y: auto; overflow-x: hidden; background: rgba(160, 200, 235, .45); backdrop-filter: blur(3px); padding: max(12px, env(safe-area-inset-top)) 10px max(16px, env(safe-area-inset-bottom)); animation: panel-in .35s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes panel-in { from { opacity: 0; transform: scale(.94) translateY(20px); } to { opacity: 1; transform: none; } }
.panel-wrap { max-width: 640px; margin: 0 auto; }
.panel-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.panel-actions .tile { flex: 1 1 140px; }

/* ── 옥상(보스) ── */
.boss-hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 10px; }
.boss-hud .time { font-family: var(--font-title); font-size: 1.6rem; color: var(--ink); text-align: center; }
.boss-hud .time.low { color: var(--bad-text); animation: alarm-blink .6s ease infinite; }
.boss-hud .score { font-family: var(--font-title); font-size: 1.3rem; color: var(--gold-dark); }
.boss-hud .lvl { text-align: right; }
.boss-bar { height: 8px; border-radius: 4px; background: rgba(42, 47, 74, .1); overflow: hidden; margin-bottom: 10px; }
.boss-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--magenta), var(--violet), var(--cyan)); transition: width .25s linear; }
.beam { position: fixed; left: 50%; bottom: 20%; width: 6px; height: 45vh; margin-left: -3px; z-index: 3; pointer-events: none; transform-origin: bottom; background: linear-gradient(0deg, var(--cyan), #fff); box-shadow: 0 0 20px var(--cyan); animation: beam .45s ease-out forwards; }
@keyframes beam { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.guardian-2d { width: min(60vw, 220px); margin: 0 auto 6px; display: block; animation: float 2.6s ease-in-out infinite; }

/* ── 엔딩 ── */
.scr-ending { justify-content: center; align-items: center; text-align: center; }
.ending-text { font-family: var(--font-title); font-size: clamp(1.4rem, 6vw, 2.2rem); color: var(--ink); text-shadow: 0 2px 0 #fff, 0 6px 16px rgba(42, 47, 74, .15); margin: 8px 0; animation: scr-in 1.2s ease both; }
.ending-sub { color: var(--ink); max-width: 420px; line-height: 1.7; animation: scr-in 1.2s ease 1s both; background: rgba(255, 255, 255, .6); border-radius: 16px; padding: 10px 14px; }
.ending-emblems { display: flex; gap: 14px; justify-content: center; margin: 16px 0; }
.ending-emblems .emblem { transform: scale(1.3); animation: pop .7s ease both; }
.ending-emblems .emblem:nth-child(2) { animation-delay: .2s; } .ending-emblems .emblem:nth-child(3) { animation-delay: .4s; } .ending-emblems .emblem:nth-child(4) { animation-delay: .6s; } .ending-emblems .emblem:nth-child(5) { animation-delay: .8s; }
.ending .dawn-owl { animation: float 3s ease-in-out infinite; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: .8; } }

/* ── 닉네임 카드 ── */
.nick-card { overflow: hidden; }
.modal { overflow-x: hidden; }
.nick-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.nick-row .tile { flex: 1 0 auto; white-space: nowrap; }
.nick-input { flex: 1 1 170px; width: 0; min-width: 0; min-height: 48px; padding: 8px 14px; border-radius: 14px; border: 2px solid var(--cream-shadow); background: var(--white); color: var(--ink); font: inherit; font-weight: 700; font-size: 1.05rem; }
.nick-input:focus { outline: 3px solid var(--violet); outline-offset: 2px; border-color: var(--violet); }
.nick-hint { color: var(--muted); font-size: .88rem; }
.nick-hint.warn { color: var(--bad-text); font-weight: 700; }
.nick-note { color: var(--muted); font-size: .82rem; text-align: center; margin-top: 8px; }
.nick-card.shake { animation: shake .45s ease; }
.nick-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--glass-line); }
.nick-bar .nick-cur { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.nick-bar .nick-cur b { color: var(--ink); }

/* ── 순위판 ── */
.board-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px; }
.board-range { display: flex; gap: 6px; }
.board-content { min-height: 200px; }
.board-status { text-align: center; color: var(--muted); font-size: .82rem; margin: 10px 0 4px; }
.board-status.warn { color: var(--bad-text); font-weight: 700; }
.board-note { text-align: center; color: var(--muted); font-size: .78rem; }
.board-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px; text-align: center; color: var(--ink); background: rgba(255, 255, 255, .7); border-radius: 18px; }
.board-empty .small { color: var(--muted); font-size: .85rem; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgba(42, 47, 74, .15); border-top-color: var(--violet); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.medal-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 10px; border-radius: 18px; background: var(--white); box-shadow: 0 5px 0 var(--cream-shadow), 0 10px 18px rgba(42, 47, 74, .12); text-align: center; min-width: 0; }
.medal-card.gold { order: 2; background: linear-gradient(180deg, #FFF3C4, #FFE08A); box-shadow: 0 6px 0 var(--gold-deep), 0 12px 22px rgba(245, 196, 81, .4); transform: translateY(-8px); }
.medal-card.silver { order: 1; background: linear-gradient(180deg, #F4F6FA, #DDE3EE); box-shadow: 0 5px 0 #A9B3C4; }
.medal-card.bronze { order: 3; background: linear-gradient(180deg, #FCE6D2, #EBC3A0); box-shadow: 0 5px 0 #B98A5F; }
.medal { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-family: var(--font-title); font-size: 1.3rem; color: var(--ink); background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .15), inset 0 0 0 3px rgba(0, 0, 0, .08); }
.gold .medal { background: radial-gradient(circle at 35% 30%, #fff8d0, var(--gold) 60%, var(--gold-deep)); }
.silver .medal { background: radial-gradient(circle at 35% 30%, #ffffff, #cfd6e2 60%, #98a3b6); }
.bronze .medal { background: radial-gradient(circle at 35% 30%, #ffe4cc, #d9a06f 60%, #a5683f); }
.rk-nick { font-weight: 800; font-size: 1rem; max-width: 100%; overflow-wrap: anywhere; }
.rk-score { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .9rem; color: var(--ink); }
.rk-score b { color: var(--gold-dark); }
.emb5 { display: inline-flex; gap: 3px; }
.emb5 i { width: 11px; height: 11px; border-radius: 50%; background: rgba(42, 47, 74, .12); box-shadow: inset 0 0 0 1px rgba(42, 47, 74, .18); }
.emb5 i.lit { background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 6px rgba(155, 123, 255, .6); }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .8); box-shadow: 0 3px 0 #E8DFCB; }
.rank-row .rk-no { font-family: var(--font-title); color: var(--gold-dark); font-size: 1.1rem; text-align: center; }
.rank-row .rk-score { flex-direction: row; gap: 8px; }
.rank-row.me, .medal-card.me { outline: 3px solid var(--violet); outline-offset: 1px; }
.me-tag { position: absolute; top: -8px; right: -4px; background: var(--violet); color: #fff; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.rank-row { position: relative; }
.rank-row .me-tag { top: 50%; right: 100%; margin-right: -30px; transform: translateY(-50%); opacity: 0; }
.rank-row.me { background: #EEE8FF; }
.rank-row.me .rk-nick::after, .medal-card.me .rk-nick::after { content: " (나)"; color: var(--violet); font-weight: 700; }
.up { animation: rank-up .7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rank-up { 0% { transform: translateY(0); } 40% { transform: translateY(-10px) scale(1.04); box-shadow: 0 12px 24px rgba(155, 123, 255, .4); } 100% { transform: translateY(0); } }
.medal-card.gold.up { animation: rank-up-gold .7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rank-up-gold { 0% { transform: translateY(-8px); } 40% { transform: translateY(-20px) scale(1.05); } 100% { transform: translateY(-8px); } }
.scr-board.teacher { max-width: 1400px; font-size: 1.25rem; }
.scr-board.teacher .map-head h2 { font-size: 2rem; }
.scr-board.teacher .board-content { display: grid; gap: 16px; }
.scr-board.teacher .teacher-col h3 { margin: 6px 0 10px; font-size: 1.6rem; color: var(--gold-dark); text-align: center; }
.scr-board.teacher .rk-nick { font-size: 1.3rem; }
.scr-board.teacher .rank-row { padding: 10px 16px; grid-template-columns: 48px 1fr auto; }
.scr-board.teacher .medal { width: 52px; height: 52px; font-size: 1.7rem; }
@media (min-width: 1280px) { .scr-board.teacher .board-content { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .podium { gap: 5px; } .medal-card { padding: 12px 4px 8px; } .rk-nick { font-size: .92rem; } }

/* ── 튜토리얼(벤벤의 개념 수업) ── */
.scr-tut { max-width: 640px; }
.tut-dots { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin: 4px 0 12px; }
.tut-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(42, 47, 74, .15); }
.tut-dots i.done { background: var(--cyan); }
.tut-dots i.cur { background: var(--gold); transform: scale(1.35); box-shadow: 0 0 8px var(--gold); }
.tut-dots i.k-check.cur, .tut-dots i.k-try.cur { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.tut-card { min-height: 260px; animation: scr-in .3s ease; touch-action: pan-y; }
.tut-card .bubble { font-size: 1.02rem; line-height: 1.6; }
.tut-why { margin-top: 10px; }
.tut-hint { margin-top: 8px; color: var(--muted); font-size: .85rem; text-align: center; }
.tut-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 14px; }
.tut-nav .tile:last-child { justify-self: end; }
.tut-count { color: var(--muted); font-weight: 700; white-space: nowrap; }
.tut-done { font-size: .9em; }

/* ── 섬 카드(지도) ── */
.island-list { display: grid; gap: 10px; }
.island-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; text-align: left; background: var(--white); border-left: 8px solid #D9D6E4; }
.island-card.i1.lit { border-left-color: #FFC7A3; } .island-card.i2.lit { border-left-color: #A9DDFF; } .island-card.i3.lit { border-left-color: #A9F0D0; } .island-card.i4.lit { border-left-color: #D4C4FF; } .island-card.i5.lit { border-left-color: #FFF0A0; }
.island-card.lit { background: linear-gradient(90deg, #FFFDF3, #fff); }
.ic-top { display: flex; align-items: center; gap: 10px; }
.ic-name { font-family: var(--font-title); font-size: 1.2rem; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ic-devs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ic-dev { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 10px; background: rgba(42, 47, 74, .05); font-size: .82rem; font-weight: 500; color: var(--muted); min-width: 0; }
.ic-dev b { color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }
.ic-dev i { font-style: normal; color: var(--star); }
.ic-dev.on { background: rgba(52, 211, 153, .12); }
.island-card.lighthouse { background: linear-gradient(180deg, #F1EAFF, #DCCFFF); box-shadow: 0 5px 0 #9B85E0; border-left-color: #9B85E0; }
.ic-lh { font-size: 1.6rem; } .ic-boss { font-size: .85rem; color: #5A3FB8; font-weight: 800; white-space: nowrap; }
@media (min-width: 760px) { .island-list { grid-template-columns: 1fr 1fr; } .island-card.lighthouse { grid-column: 1 / -1; } }

/* ── 장치 HUD 추가 ── */
.combo { font-size: .8rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(42, 47, 74, .08); color: var(--muted); white-space: nowrap; }
.combo.on { background: linear-gradient(90deg, #FFE08A, #FFB4D8); color: var(--ink); animation: pop .4s ease; }
.score-tag { margin-left: auto; font-family: var(--font-title); color: var(--gold-dark); font-size: 1.05rem; white-space: nowrap; }
.score-pop { position: absolute; top: 18px; z-index: 3; font-family: var(--font-title); font-size: 1.3rem; color: var(--ok-text); text-shadow: 0 2px 0 #fff; pointer-events: none; animation: score-pop .9s ease-out forwards; }
.score-pop.big { color: #C0393E; font-size: 1.6rem; }
@keyframes score-pop { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-40px) scale(1); } }
.fb-slot { position: relative; }
.miss-bubble { margin-top: 10px; animation: scr-in .25s ease; }
.miss-bubble .bubble p { font-size: .92rem; }
.fb-fig.mini { padding: 4px; }
.fb-fig.mini .venn { max-width: 220px; } .fb-fig.mini .venn.small { max-width: 120px; }
.result-stats { color: var(--muted); font-size: .88rem; margin: 4px 0 8px; }
.miss-review { text-align: left; margin: 10px 0; background: rgba(255, 255, 255, .8); border-radius: 14px; padding: 8px 12px; }
.miss-review summary { cursor: pointer; font-weight: 800; color: var(--bad-text); min-height: 44px; display: flex; align-items: center; }
.miss-review ol { padding-left: 18px; margin: 6px 0 0; }
.miss-review li { margin: 8px 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.hp-bar { position: relative; height: 18px; border-radius: 9px; background: rgba(42, 47, 74, .12); overflow: hidden; margin-bottom: 8px; }
.hp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #FF6FB5, #FF6B6B); transition: width .3s; }
.hp-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: var(--ink); }
.boss-title { margin-top: 0; color: var(--gold-dark); }
.dragging { z-index: 5; opacity: .85; transition: none !important; }

.countdown { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; border-radius: 16px; background: rgba(255, 255, 255, .75); backdrop-filter: blur(2px); }
.countdown b { font-family: var(--font-title); font-size: 4rem; color: var(--gold-dark); text-shadow: 0 3px 0 #fff, 0 8px 20px rgba(42, 47, 74, .25); }
.countdown b.bump { animation: cd-bump .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes cd-bump { 0% { transform: scale(.4); opacity: 0; } 50% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
.board.hit { animation: hit-bump .22s ease-out; }
@keyframes hit-bump { 0% { transform: scale(1); } 40% { transform: scale(1.012) translateY(-2px); } 100% { transform: scale(1); } }
.newrec-badge { display: inline-block; padding: 4px 14px; border-radius: 999px; background: linear-gradient(90deg, #FFE08A, #FFB4D8); color: var(--ink); font-family: var(--font-title); font-size: 1rem; animation: pop .7s cubic-bezier(.2, 1.4, .4, 1); box-shadow: 0 3px 0 var(--gold-deep); }
.mirror-stand.flash { animation: mirror-flash .3s ease; }
@keyframes mirror-flash { 50% { filter: brightness(1.5); } }
.tile:active:not(:disabled), .frame:active, .gcell:active, .basket:active, .nbox:active { transition-duration: .05s; }
.nbox.dragging, .tile.plank.pick.dragging { box-shadow: 0 14px 24px rgba(42, 47, 74, .35), inset 0 0 0 3px #A8742A; transform-origin: center; }

/* 1-1 컨베이어 */
.belt-wrap { position: relative; }
.belt { position: relative; height: 92px; border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(90deg, #B9C4D6 0 22px, #D5DDEA 22px 44px); box-shadow: inset 0 0 0 2px #8F9BB3, inset 0 -14px 0 #A3AEC4; animation: belt 1.2s linear infinite; touch-action: pan-y; }
.belt-speed { position: absolute; right: 8px; top: 6px; font-size: .75rem; font-weight: 800; color: var(--ink); background: rgba(255, 255, 255, .8); padding: 2px 8px; border-radius: 999px; }
.crate { position: absolute; top: 12px; left: 8px; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(180deg, #F2C67A, #D9A24A); color: #4a2a05; font-size: 1.5rem; font-weight: 800; box-shadow: inset 0 0 0 3px #A8742A, 0 6px 12px rgba(42, 47, 74, .3); }
.crate.drop-in { animation: drop-in .38s ease-in forwards; } .crate.drop-out { animation: drop-out .38s ease-in forwards; }
@keyframes drop-in { to { transform: translate(-40px, 90px) rotate(-20deg); opacity: 0; } }
@keyframes drop-out { to { transform: translate(40px, 90px) rotate(20deg); opacity: 0; } }
.lever-sw { position: relative; display: block; width: 100%; max-width: 320px; min-height: 52px; margin: 10px auto; border: 0; border-radius: 26px; background: #2A2F4A; color: #fff; font-weight: 800; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4); }
.lever-sw .lever-l, .lever-sw .lever-r { position: absolute; top: 0; height: 100%; display: flex; align-items: center; padding: 0 18px; font-size: 1rem; }
.lever-sw .lever-l { left: 0; color: #7FE6F0; } .lever-sw .lever-r { right: 0; color: #FFB4D8; }
.lever-sw .lever-knob { position: absolute; top: 4px; width: 44%; height: calc(100% - 8px); border-radius: 22px; background: linear-gradient(180deg, #FFE08A, var(--gold)); box-shadow: 0 3px 0 var(--gold-deep); transition: left .18s cubic-bezier(.2, 1.2, .4, 1); left: 4px; }
.lever-sw.out .lever-knob { left: calc(56% - 4px); }
.baskets2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.basket { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 90px; padding: 8px; border: 0; border-radius: 14px 14px 24px 24px; font: inherit; color: var(--ink); box-shadow: 0 5px 0 rgba(42, 47, 74, .2); transition: transform .1s; }
.basket.in { background: linear-gradient(180deg, #D6F6FA, #9FE7EF); } .basket.out { background: linear-gradient(180deg, #FFDCEE, #FFB4D8); }
.basket.armed { outline: 4px solid var(--gold); outline-offset: 2px; transform: translateY(-3px); }
.basket-list { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.chip-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 8px; background: #fff; font-weight: 800; font-size: .85rem; box-shadow: 0 2px 0 #E8DFCB; }
.chip-num.bad { background: #FFD2D3; color: var(--bad-text); text-decoration: line-through; }

/* 1-2 포개진 상자 */
.nest-yard { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; min-height: 120px; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .5); }
.nbox { position: relative; display: inline-flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(180deg, #F2C67A, #D9A24A); box-shadow: inset 0 0 0 3px #A8742A, 0 4px 0 #8a5a1a; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; min-width: 0; }
.nbox.sel { outline: 4px solid var(--violet); outline-offset: 2px; }
.nbox.same { background: linear-gradient(180deg, #D6F6FA, #9FE7EF); }
.nbox.shelved { background: #E6E1F2; box-shadow: inset 0 0 0 3px #B9B4C4; }
.nbox.bounce { animation: shake .5s ease; }
.nbox-label { font-weight: 800; font-size: .9rem; color: #4a2a05; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 3px; }
.chips i { font-style: normal; font-weight: 800; font-size: .8rem; min-width: 22px; height: 22px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: 6px; background: #fff; }
.chips i.stick { background: var(--bad); color: #fff; animation: pop .5s ease; }
.chips i.empty { color: var(--muted); }
.nbox-inner { display: flex; flex-wrap: wrap; gap: 6px; }
.nbox-inner .nbox { transform: scale(.94); }
.shelf { display: block; width: 100%; min-height: 56px; margin-top: 10px; border: 2px dashed #8F9BB3; border-radius: 12px; background: rgba(230, 225, 242, .6); color: var(--muted); font: inherit; font-weight: 700; padding: 6px; }
.shelf .nbox { margin: 4px; }

/* 2-1 투광기 */
.lightwall { background: #1e2340; }
.lightwall .venn .outline { stroke: #fff; } .lightwall .venn text { fill: #fff; }
.light-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ltg { justify-content: flex-start; }
.ltg::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #cfcabd; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15); }
.ltg.on::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.ops-tag { font-size: .85rem; color: var(--muted); font-weight: 700; }

/* 2-2 스테인드글라스 */
.glass-sets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chute { position: relative; height: 150px; border-radius: 12px; background: linear-gradient(180deg, #E4F3FF, #C2E4FF); box-shadow: inset 0 0 0 2px rgba(42, 47, 74, .1); overflow: hidden; }
.shard { position: absolute; left: calc(50% - 22px); top: 0; width: 44px; height: 44px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: var(--ink); background: linear-gradient(135deg, #FFF9C4, #FFE066); clip-path: polygon(50% 0, 100% 40%, 80% 100%, 20% 100%, 0 40%); }
.shard.shatter { animation: shatter .4s ease-out forwards; }
@keyframes shatter { to { transform: scale(1.6) rotate(30deg); opacity: 0; } }
.glass-win { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 14px; background: #8A5A10; }
.gcell { min-height: 64px; border: 3px solid #C8952A; border-radius: 10px; font: inherit; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; }
.gcell b { font-size: .85rem; }
.gcell.r1 { background: rgba(46, 196, 214, .35); } .gcell.r2 { background: rgba(155, 123, 255, .4); } .gcell.r4 { background: rgba(255, 111, 181, .35); } .gcell.r8 { background: rgba(255, 255, 255, .7); grid-column: 1 / -1; }
.gcell.lit { box-shadow: 0 0 0 4px var(--gold), 0 0 18px var(--gold); }
.gcell.crack { animation: shake .5s ease; background: #FFD2D3; }
.gcell-fill { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.gcell-fill i { font-style: normal; font-weight: 800; font-size: .8rem; min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 6px; background: #fff; }

/* 3-1 레버 스위치반 */
.telegram { min-height: 96px; padding: 10px 14px; border-radius: 4px; background: #FFFBEF; box-shadow: 0 3px 0 #E8DFCB, 0 0 0 1px rgba(42, 47, 74, .1); font-family: "Noto Sans KR", monospace; }
.tg-head { display: block; font-size: .75rem; color: var(--muted); letter-spacing: .3em; }
.tg-text { display: block; font-size: 1.08rem; font-weight: 700; margin-top: 4px; min-height: 2.8em; overflow-wrap: anywhere; }
.tgauge { height: 12px; border-radius: 6px; background: rgba(42, 47, 74, .12); overflow: hidden; margin: 10px 0; }
.tgauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.tgauge.low i { background: var(--bad); }
.lever-v { display: grid; grid-template-rows: 1fr auto 1fr; gap: 6px; justify-items: center; width: min(100%, 260px); margin: 0 auto; padding: 8px; border-radius: 22px; background: #2A2F4A; }
.lever-v button { width: 100%; min-height: 56px; border: 0; border-radius: 16px; font: inherit; font-family: var(--font-title); font-size: 1.25rem; color: var(--ink); background: var(--cream); box-shadow: 0 4px 0 var(--cream-shadow); }
.lever-v .lv-up { background: linear-gradient(180deg, #E4FBF0, #B9F2D8); box-shadow: 0 4px 0 #4db58c; } .lever-v .lv-down { background: linear-gradient(180deg, #FFE0E0, #FFB4B4); box-shadow: 0 4px 0 #c98a8c; }
.lever-v .lever-knob { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3C4, var(--gold) 60%, var(--gold-deep)); box-shadow: 0 4px 0 var(--gold-deep); touch-action: none; cursor: grab; transition: transform .2s; }
.lever-v.up .lever-knob { transform: translateY(-16px); } .lever-v.down .lever-knob { transform: translateY(16px); }

/* 3-2 레일 탐지기 */
.rail { position: relative; height: 92px; margin: 10px 0; border-radius: 12px; background: linear-gradient(180deg, #E4F3FF, #D6E7F2); box-shadow: inset 0 0 0 2px rgba(42, 47, 74, .1); touch-action: none; cursor: pointer; }
.rail::before { content: ""; position: absolute; left: 4%; right: 4%; top: 62px; height: 6px; border-radius: 3px; background: #8F9BB3; }
.ticks i { position: absolute; top: 56px; width: 2px; height: 10px; margin-left: -1px; background: #2A2F4A; font-style: normal; font-size: .7rem; line-height: 1; text-indent: -0.3em; padding-top: 14px; color: var(--muted); }
.ticks i.int { height: 18px; top: 52px; }
.ticks i.found { top: 40px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); padding: 0; }
.detector { position: absolute; top: 6px; width: 64px; margin-left: -32px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: #5FB89A; box-shadow: 0 3px 0 #2f7a5f; transition: left .08s linear; pointer-events: none; }
.detector .lamp { font-style: normal; font-size: .75rem; font-weight: 800; width: 24px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: #2A2F4A; color: #8a8fa8; }
.detector.p-on .lamp.p { background: var(--cyan); color: #fff; box-shadow: 0 0 8px var(--cyan); }
.detector.q-on .lamp.q { background: var(--magenta); color: #fff; box-shadow: 0 0 8px var(--magenta); }
.detector.alarm { background: var(--bad); animation: alarm-blink .5s ease infinite; }
.detector b { color: #fff; font-size: .85rem; }

/* 4-1 큰 거울 */
.mirror-stand { padding: 12px; border-radius: 16px; background: linear-gradient(135deg, #C9DDFF, #EEF4FF); box-shadow: inset 0 0 0 4px var(--gold); text-align: center; }
.mcard { display: inline-grid; place-items: center; min-width: 56px; height: 56px; padding: 0 12px; border-radius: 12px; background: var(--white); font-family: var(--font-title); font-size: 1.4rem; box-shadow: 0 3px 0 #E8DFCB; margin: 0 6px; }
.mcard.neg { background: #EEE8FF; color: #5A3FB8; }
.mform { margin-top: 4px; font-weight: 800; color: var(--gold-dark); }
.mirror-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 6px; }

/* 4-2 쌍둥이 액자 */
.frames { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.frame { position: relative; min-height: 84px; border: 0; padding: 0; border-radius: 12px; background: transparent; perspective: 600px; font: inherit; }
.frame-back, .frame-face { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; border-radius: 12px; backface-visibility: hidden; transition: transform .4s; box-shadow: 0 0 0 4px var(--gold), 0 4px 0 var(--gold-deep); }
.frame-back { background: linear-gradient(135deg, #FFE08A, #F5C451); font-family: var(--font-title); font-size: 1.8rem; color: #8A5A10; }
.frame-face { background: var(--white); color: var(--ink); font-size: .82rem; font-weight: 700; transform: rotateY(180deg); overflow-wrap: anywhere; line-height: 1.3; }
.frame.open .frame-back, .frame.done .frame-back { transform: rotateY(180deg); }
.frame.open .frame-face, .frame.done .frame-face { transform: rotateY(0); }
.frame.done.t .frame-face { background: #D5FBE9; box-shadow: 0 0 0 4px var(--ok), 0 4px 0 #157A56; }
.frame.done.f .frame-face { background: #FFE0E0; box-shadow: 0 0 0 4px var(--bad), 0 4px 0 #C93D3D; }
@media (min-width: 560px) { .frames { grid-template-columns: repeat(4, 1fr); } }

/* 5-1 망원경 */
.scope { position: relative; height: 120px; margin: 8px 0; border-radius: 14px; background: #1e2340; overflow: hidden; touch-action: none; }
.lens-band { position: absolute; height: 26px; border-radius: 13px; }
.lens-band.q { top: 22px; background: rgba(255, 111, 181, .55); box-shadow: inset 0 0 0 2px var(--magenta); }
.lens-band.p { top: 56px; background: rgba(46, 196, 214, .55); box-shadow: inset 0 0 0 2px var(--cyan); }
.lens-band .end { position: absolute; top: 3px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #fff; background: #1e2340; left: -10px; }
.lens-band .end.r { left: auto; right: -10px; }
.lens-band .end.inc { background: #fff; }
.lens-axis { position: absolute; left: 0; right: 0; bottom: 4px; height: 20px; }
.lens-axis i { position: absolute; transform: translateX(-50%); font-style: normal; font-size: .7rem; color: #cfd6e2; }
.handle { position: absolute; top: 48px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3C4, var(--gold) 60%, var(--gold-deep)); box-shadow: 0 3px 0 var(--gold-deep); cursor: grab; touch-action: none; }
.lens-ctl .row { justify-content: flex-start; }
.lens-lab { min-width: 72px; font-weight: 800; }
.ring { min-width: 96px; }

/* 5-2 구름다리 */
.bridge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #E4F3FF, #fff); min-height: 72px; }
.bridge.complete { box-shadow: 0 0 0 3px var(--ok), 0 0 24px rgba(52, 211, 153, .5); }
.isle { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 12px; background: #8BD89B; font-weight: 700; font-size: .85rem; max-width: 45%; overflow-wrap: anywhere; text-align: center; }
.isle b { font-family: var(--font-title); font-size: 1.1rem; }
.plank { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 8px; background: linear-gradient(180deg, #F2C67A, #D9A24A); box-shadow: 0 3px 0 #8a5a1a; font-weight: 700; font-size: .88rem; overflow-wrap: anywhere; text-align: center; }
.plank.slot { background: rgba(255, 255, 255, .6); border: 2px dashed #8F9BB3; box-shadow: none; color: var(--muted); }
.plank.set { background: linear-gradient(180deg, #D5FBE9, #A9F0D0); box-shadow: 0 3px 0 #4db58c; }
.planks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tile.plank.pick { touch-action: none; }
.plank.fall { animation: fall-off .7s ease-in forwards; }
@keyframes fall-off { 40% { transform: translateY(10px) rotate(6deg); } 100% { transform: translateY(80px) rotate(25deg); opacity: 0; } }

/* ══ 전체 화면 게임 무대(stage) ══ */
.stage { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; background: linear-gradient(180deg, #9ED6F6, #FFF3D6); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); animation: stage-in .45s cubic-bezier(.2, .9, .3, 1.1) both; overflow: hidden; }
@keyframes stage-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.stage-hud { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(180deg, rgba(42, 47, 74, .92), rgba(42, 47, 74, .78)); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); flex: 0 0 auto; flex-wrap: wrap; }
.stage-hud .hud-btn { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.1rem; font-weight: 800; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.stage-hud .hud-btn:active { background: rgba(255, 255, 255, .3); }
.stage-hud .alarms i { width: 16px; height: 16px; }
.stage-hud .alarms i.off { background: radial-gradient(circle at 35% 30%, #6a6f8a, #3a3f5a 60%, #24283f); }
.hud-prog { flex: 1 1 90px; height: 12px; border-radius: 6px; background: rgba(0, 0, 0, .35); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); min-width: 60px; }
.hud-prog i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #7fe6f0, var(--cyan), var(--violet)); transition: width .35s cubic-bezier(.2, 1.2, .4, 1); box-shadow: 0 0 8px rgba(46, 196, 214, .7); }
.hud-combo { position: relative; min-width: 84px; height: 26px; border-radius: 13px; background: rgba(0, 0, 0, .35); overflow: hidden; font-size: .74rem; font-weight: 800; display: grid; place-items: center; white-space: nowrap; }
.hud-combo i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #FFE08A, #FF6FB5); transition: width .3s; }
.hud-combo b { position: relative; z-index: 1; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.hud-combo.on b { animation: pop .35s ease; }
.hud-score { font-family: var(--font-title); font-size: 1.15rem; color: #FFE08A; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); white-space: nowrap; min-width: 64px; text-align: right; }
.hud-stage { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: var(--ink); }
.stage-title { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px 0; color: var(--ink); font-family: var(--font-title); font-size: 1.05rem; text-shadow: 0 1px 0 #fff; flex: 0 0 auto; }
.stage-title small { font-family: var(--font-body); font-weight: 700; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.stage-scene { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 6px 10px 10px; }
.stage-scene > .scene { flex: 1 1 auto; min-height: 0; }
.stage .fb-slot { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; pointer-events: none; }
.stage .fb-slot .miss-bubble { pointer-events: auto; }
.stage .fb-slot .bubble { box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.stage .fb-slot .fb-fig.mini { display: none; }
.stage .score-pop { top: 28%; }
.stage .countdown { border-radius: 22px; inset: 6px 10px 10px; }
.stage.hit { animation: hit-bump .22s ease-out; }
.tut-scene { min-height: 320px; }
.stage.shake { animation: shake .45s ease; }
.stage.alarm .stage-hud { animation: hud-alarm .5s ease 2; }
@keyframes hud-alarm { 50% { background: linear-gradient(180deg, #a3323a, #7a1c22); } }
.stage .sparkles { position: fixed; inset: 0; z-index: 6; border-radius: 0; }
.stage .sparkles i { width: 12px; height: 12px; }
/* 방법 카드 */
.howto { position: absolute; inset: 6px 10px 10px; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-radius: 22px; background: rgba(255, 253, 246, .96); box-shadow: 0 0 0 4px var(--gold), 0 24px 48px rgba(42, 47, 74, .3); animation: panel-in .35s cubic-bezier(.2, .9, .3, 1.1) both; overflow: auto; }
.howto h3 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 1.4rem; color: var(--gold-dark); }
.howto-cuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 520px; }
.howto-cut { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 16px; background: var(--white); box-shadow: 0 4px 0 #E8DFCB; text-align: center; font-size: .82rem; font-weight: 700; color: var(--ink); }
.howto-cut svg { width: 64px; height: 64px; }
.howto-cut b { font-family: var(--font-title); font-weight: 400; color: var(--gold-dark); }
.howto p { color: var(--muted); font-size: .9rem; text-align: center; max-width: 480px; }
.howto-hint { position: absolute; top: 8px; right: 12px; z-index: 7; max-width: 300px; }
@media (max-width: 480px) { .howto-cuts { gap: 6px; } .howto-cut { font-size: .74rem; padding: 8px 4px; } .howto-cut svg { width: 52px; height: 52px; } }

/* ══ 장면(scene) 공통 ══ */
.scene { position: relative; border-radius: 22px; overflow: hidden; background: #dfe9f5; box-shadow: 0 12px 30px rgba(42, 47, 74, .25), inset 0 0 0 2px rgba(255, 255, 255, .5); min-height: 300px; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-ui { position: absolute; inset: 0; display: flex; flex-direction: column; }
.scene-top { flex: 0 0 auto; padding: 10px 12px 0; }
.scene-mid { flex: 1 1 auto; position: relative; min-height: 0; }
.scene-bot { flex: 0 0 auto; padding: 8px 10px 10px; }
.scene .qcard { margin: 0 0 6px; padding: 8px 12px; background: rgba(255, 253, 246, .92); box-shadow: 0 3px 0 rgba(120, 80, 30, .25); }
.scene .qtext { font-size: 1.02rem; }
.scene .qlabel { font-size: .74rem; }
.scene .prompt { margin: 4px 0; font-size: .9rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.scene.light .prompt { color: var(--ink); text-shadow: 0 1px 0 #fff; }
.scene .pickval { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.scene.light .pickval { color: var(--ink); text-shadow: none; }
.scene .tile.sm { min-height: 44px; }
/* 실물 조작부 */
.knob-btn { border: 0; border-radius: 16px; font: inherit; font-weight: 800; color: var(--ink); background: linear-gradient(180deg, #FFF3C4, #F5C451 60%, #D9A21B); box-shadow: 0 5px 0 #8A5A10, 0 8px 14px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .8); min-height: 48px; padding: 8px 16px; transition: transform .08s, box-shadow .08s; }
.knob-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #8A5A10, 0 3px 6px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .8); }
.knob-btn:disabled { filter: saturate(.4) brightness(.85); }
.knob-btn.round { width: 64px; height: 64px; border-radius: 50%; padding: 0; }
.knob-btn.red { background: linear-gradient(180deg, #FFB4B4, #FF6B6B 60%, #C93D3D); box-shadow: 0 5px 0 #7a1c22, 0 8px 14px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .6); color: #fff; }
.knob-btn.steel { background: linear-gradient(180deg, #F4F6FA, #CBD3E4 60%, #9AA9B8); box-shadow: 0 5px 0 #4a5568, 0 8px 14px rgba(0, 0, 0, .3), inset 0 2px 0 #fff; }
.toggle-sw { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #3a3f5a, #24283f); color: #fff; font: inherit; font-weight: 800; font-size: .82rem; box-shadow: 0 4px 0 #101326, inset 0 1px 0 rgba(255, 255, 255, .2); }
.toggle-sw i { width: 42px; height: 22px; border-radius: 11px; background: #55597a; position: relative; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); transition: background .2s; }
.toggle-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(180deg, #fff, #cfd6e2); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); transition: left .2s cubic-bezier(.2, 1.2, .4, 1); }
.toggle-sw.on i { background: var(--gold); } .toggle-sw.on i::after { left: 22px; }
.toggle-sw.cyan.on i { background: var(--cyan); } .toggle-sw.magenta.on i { background: var(--magenta); }
.toggle-sw.red.on i { background: var(--bad); }
.toggle-sw:active { transform: translateY(2px); box-shadow: 0 2px 0 #101326; }
.dial { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: transparent; color: #fff; font: inherit; font-weight: 800; font-size: .74rem; }
.dial i { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F4F6FA, #9AA9B8 70%, #4a5568); box-shadow: 0 4px 0 #2a2f4a, 0 6px 12px rgba(0, 0, 0, .4); position: relative; transition: transform .25s cubic-bezier(.2, 1.2, .4, 1); }
.dial i::after { content: ""; position: absolute; left: 50%; top: 5px; width: 5px; height: 18px; margin-left: -2.5px; border-radius: 3px; background: var(--ink); }
.dial.b i { transform: rotate(90deg); }

/* ── 1-1 컨베이어 장면 ── */
.sc-conv { background: linear-gradient(180deg, #F7E9CF 0%, #E8C9A6 55%, #C9A47C 100%); }
.sc-conv .track { position: absolute; left: 6%; right: 26%; top: 34%; height: 18%; }
.sc-conv .crate { position: absolute; top: -14px; left: 0; width: 56px; height: 56px; border-radius: 9px; background: linear-gradient(160deg, #F6D28E, #D9A24A 55%, #A8742A); box-shadow: inset 0 0 0 3px #8A5A10, inset 8px 8px 0 rgba(255, 255, 255, .25), 0 10px 14px rgba(60, 30, 0, .35); font-size: 1.45rem; color: #4a2a05; display: grid; place-items: center; font-weight: 800; }
.sc-conv .crate::before { content: ""; position: absolute; inset: 8px; border: 2px solid rgba(138, 90, 16, .5); border-radius: 4px; background: linear-gradient(45deg, transparent 47%, rgba(138, 90, 16, .5) 48%, rgba(138, 90, 16, .5) 52%, transparent 53%), linear-gradient(-45deg, transparent 47%, rgba(138, 90, 16, .5) 48%, rgba(138, 90, 16, .5) 52%, transparent 53%); }
.sc-conv .crate.drop-in { animation: drop-in .42s ease-in forwards; } .sc-conv .crate.drop-out { animation: drop-out .42s ease-in forwards; }
.sc-conv .lever-big { position: absolute; right: 8%; top: 8%; width: 84px; height: 110px; border: 0; background: transparent; padding: 0; touch-action: none; }
.sc-conv .lever-big svg { width: 100%; height: 100%; overflow: visible; }
.sc-conv .lever-arm { transform-origin: 42px 92px; transition: transform .22s cubic-bezier(.2, 1.3, .4, 1); transform: rotate(-32deg); }
.sc-conv .lever-big.out .lever-arm { transform: rotate(32deg); }
.sc-conv .basket-zone { position: absolute; bottom: 4%; width: 40%; height: 38%; border: 0; background: transparent; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.sc-conv .basket-zone.in { left: 8%; } .sc-conv .basket-zone.out { right: 6%; }
.sc-conv .basket-zone b { font-size: .8rem; color: #4a2a05; background: rgba(255, 248, 234, .9); padding: 2px 10px; border-radius: 999px; }
.sc-conv .basket-zone.armed b { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.sc-conv .basket-zone.armed { filter: drop-shadow(0 0 10px rgba(245, 196, 81, .8)); }
.sc-conv .basket-list { max-width: 100%; padding: 4px 8px; min-height: 30px; }
.sc-conv .chip-num { min-width: 22px; height: 22px; font-size: .78rem; }
.sc-conv .belt-speed { position: absolute; left: 12px; top: 10px; }

/* ── 1-2 상자 장면 ── */
.sc-nest { background: linear-gradient(180deg, #F1E3CC, #D9B98A 70%, #B98A5F); }
.sc-nest .nest-yard { background: transparent; align-content: flex-start; min-height: 56%; padding: 8px 10px 0; }
.sc-nest .nbox { background: linear-gradient(170deg, #E9C084, #C99552 55%, #9C6B2E); box-shadow: inset 0 0 0 3px #7A4F14, inset 0 6px 0 rgba(255, 255, 255, .28), 0 8px 12px rgba(60, 30, 0, .35); border-radius: 10px; padding: 12px 10px 8px; }
.sc-nest .nbox::before { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 6px; border-radius: 3px; background: rgba(122, 79, 20, .55); }
.sc-nest .nbox.dragging { transform: scale(1.06) rotate(-2deg); box-shadow: inset 0 0 0 3px #7A4F14, 0 22px 30px rgba(60, 30, 0, .45); }
.sc-nest .nbox-inner .nbox { animation: nest-in .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes nest-in { from { transform: scale(1.2) translateY(-16px); opacity: .6; } to { transform: scale(.94); opacity: 1; } }
.sc-nest .shelf { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; min-height: 64px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #8A5A2A, #6a4520); box-shadow: 0 6px 0 #3f2712, inset 0 3px 0 rgba(255, 255, 255, .2); color: #FFF3C4; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.sc-nest .shelf .nbox { transform: scale(.8); margin: -6px; }

/* ── 2-1 투광기 장면 ── */
.sc-light { background: radial-gradient(ellipse at 50% 30%, #2c3358, #12162c 70%); }
.sc-light .wall { position: absolute; left: 14%; right: 14%; top: 6%; height: 52%; display: grid; place-items: center; }
.sc-light .wall .venn { max-width: 100%; max-height: 100%; }
.sc-light .venn .outline { stroke: rgba(255, 255, 255, .7); } .sc-light .venn text { fill: #fff; }
.sc-light .cone { position: absolute; top: 12%; width: 30%; height: 46%; pointer-events: none; opacity: 0; transition: opacity .25s; mix-blend-mode: screen; }
.sc-light .cone.a { left: 2%; background: linear-gradient(80deg, rgba(46, 196, 214, .0), rgba(46, 196, 214, .35)); clip-path: polygon(0 55%, 100% 0, 100% 100%); }
.sc-light .cone.b { right: 2%; background: linear-gradient(-80deg, rgba(255, 111, 181, .0), rgba(255, 111, 181, .35)); clip-path: polygon(100% 55%, 0 0, 0 100%); }
.sc-light .cone.on { opacity: 1; }
.sc-light .rig { position: absolute; bottom: 30%; width: 22%; height: 22%; }
.sc-light .rig.a { left: 3%; } .sc-light .rig.b { right: 3%; }
.sc-light .rig svg { width: 100%; height: 100%; overflow: visible; }
.sc-light .rig .head { transition: fill .2s; }
.sc-light .ctl-row { position: absolute; left: 0; right: 0; bottom: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 0 10px; align-items: center; }
.sc-light .ctl-row .mid { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 14px; }
.sc-light .ops-tag { color: #cfd6e2; }

/* ── 2-2 스테인드글라스 장면 ── */
.sc-glass { background: radial-gradient(ellipse at 50% 20%, #3b3050, #1a1030 70%); }
.sc-glass .arch { position: absolute; left: 50%; top: 4%; width: min(72%, 300px); height: 60%; transform: translateX(-50%); border-radius: 50% 50% 8px 8px / 42% 42% 8px 8px; background: #2a2040; box-shadow: 0 0 0 10px #8A5A10, 0 0 0 14px #5a3a08, 0 20px 40px rgba(0, 0, 0, .6); overflow: hidden; }
.sc-glass .chute { position: absolute; inset: 0; height: 100%; background: transparent; box-shadow: none; }
.sc-glass .shard { width: 46px; height: 46px; background: linear-gradient(135deg, #FFFCE0, #FFE066 60%, #D9A21B); box-shadow: 0 6px 10px rgba(0, 0, 0, .5); }
.sc-glass .glass-win { position: absolute; left: 50%; bottom: 3%; width: min(96%, 420px); transform: translateX(-50%); margin: 0; background: linear-gradient(180deg, #7a4f14, #5a3a08); border-radius: 14px; box-shadow: 0 6px 0 #2e1c04; }
.sc-glass .gcell { border-color: #C8952A; background: rgba(255, 255, 255, .12); color: #fff; min-height: 58px; }
.sc-glass .gcell.r1.has { background: rgba(46, 196, 214, .55); } .sc-glass .gcell.r2.has { background: rgba(155, 123, 255, .6); } .sc-glass .gcell.r4.has { background: rgba(255, 111, 181, .55); } .sc-glass .gcell.r8.has { background: rgba(255, 224, 138, .5); }
.sc-glass .gcell-fill i { background: rgba(255, 255, 255, .85); color: var(--ink); }
.sc-glass .glass-sets { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 2; }
.sc-glass .glass-sets .qcard { padding: 4px 10px; } .sc-glass .glass-sets .qtext { font-size: .9rem; }
.sc-glass .info { position: absolute; left: 0; right: 0; top: 66%; text-align: center; color: #fff; font-size: .8rem; text-shadow: 0 1px 3px #000; }

/* ── 3-1 레버 스위치반 장면 ── */
.sc-lever { background: linear-gradient(180deg, #E4D2B4, #B98A5F 60%, #7a4f2a); }
.sc-lever .telegram { position: absolute; left: 6%; right: 34%; top: 8%; background: #FFFBEF; background-image: repeating-linear-gradient(180deg, transparent 0 22px, rgba(42, 47, 74, .08) 22px 23px); border-left: 8px solid #E8DFCB; box-shadow: 0 8px 14px rgba(0, 0, 0, .3); min-height: 40%; border-radius: 2px; }
.sc-lever .tg-text { font-size: 1rem; }
.sc-lever .gauge-dial { position: absolute; right: 6%; top: 8%; width: 26%; aspect-ratio: 1; }
.sc-lever .gauge-dial svg { width: 100%; height: 100%; overflow: visible; }
.sc-lever .needle { transform-origin: 50px 52px; transition: transform .2s linear; }
.sc-lever .lever-v { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: min(78%, 300px); background: linear-gradient(180deg, #5a3a1a, #3a2410); box-shadow: 0 8px 0 #1e1208, inset 0 3px 0 rgba(255, 255, 255, .15); border-radius: 26px; }
.sc-lever .lever-v .lever-knob { width: 62px; height: 62px; background: radial-gradient(circle at 35% 30%, #FFF3C4, #D9A21B 60%, #7a4f14); box-shadow: 0 5px 0 #4a2a05, 0 8px 12px rgba(0, 0, 0, .5); }
.sc-lever .lever-v button { font-size: 1.15rem; }
.sc-lever .title { position: absolute; left: 6%; top: 2%; font-size: .8rem; color: #4a2a05; font-weight: 800; }

/* ── 3-2 레일 탐지기 장면 ── */
.sc-rail { background: linear-gradient(180deg, #DDF7EA, #A9F0D0 60%, #6FB89A); }
.sc-rail .rail { position: absolute; left: 4%; right: 4%; top: 44%; height: 120px; margin: 0; border-radius: 10px; background: linear-gradient(180deg, #CBD3E4, #9AA9B8 60%, #6b7a8a); box-shadow: 0 8px 0 #3a4a58, inset 0 3px 0 rgba(255, 255, 255, .7); }
.sc-rail .rail::before { top: 70px; background: #2A2F4A; }
.sc-rail .ticks i { top: 64px; color: #2A2F4A; }
.sc-rail .ticks i.int { top: 60px; }
.sc-rail .ticks i.found { top: 48px; }
.sc-rail .detector { top: -34px; width: 80px; margin-left: -40px; background: linear-gradient(180deg, #7FCFB3, #4b9a80); box-shadow: 0 5px 0 #245a48, 0 10px 14px rgba(0, 0, 0, .35); border-radius: 14px 14px 8px 8px; }
.sc-rail .detector::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -14px; height: 14px; background: radial-gradient(circle at 12px 7px, #2A2F4A 6px, transparent 7px), radial-gradient(circle at calc(100% - 12px) 7px, #2A2F4A 6px, transparent 7px); }
.sc-rail .scan { position: absolute; left: 4%; right: 4%; top: 8%; height: 30%; }
.sc-rail .scan svg { width: 100%; height: 100%; }
.sc-rail .scan .wave { fill: none; stroke: #2EC4D6; stroke-width: 3; stroke-linecap: round; }
.sc-rail .scan.alarm .wave { stroke: #FF6B6B; }
.sc-rail .text-card { position: absolute; left: 4%; right: 4%; top: 4%; }
.sc-rail .ctl { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── 4-1 거울 장면 ── */
.sc-mirror { background: linear-gradient(180deg, #EBE3FF, #D4C4FF 60%, #9B85E0); }
.sc-mirror .mirror-stand { position: absolute; left: 50%; top: 6%; width: min(70%, 320px); height: 52%; transform: translateX(-50%); padding: 0; border-radius: 120px 120px 14px 14px; background: linear-gradient(160deg, #EAF2FF 0%, #C9DDFF 40%, #9fb8ff 100%); box-shadow: inset 0 0 0 10px var(--gold), inset 0 0 0 14px #8A5A10, 0 16px 30px rgba(42, 47, 74, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
.sc-mirror .mirror-stand::before { content: ""; position: absolute; left: -30%; top: -20%; width: 60%; height: 140%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: rotate(12deg); pointer-events: none; }
.sc-mirror .mcard { font-size: 1.6rem; min-width: 64px; height: 64px; box-shadow: 0 5px 0 #E8DFCB, 0 8px 14px rgba(42, 47, 74, .25); }
.sc-mirror .mirror-stand.flash .mcard { animation: mirror-dip .4s ease; }
@keyframes mirror-dip { 40% { transform: scale(.7) rotateY(90deg); opacity: .4; } }
.sc-mirror .preview { color: var(--ink); font-weight: 700; margin: 4px 10px; text-align: center; }
.sc-mirror .mform { font-size: .85rem; }
.sc-mirror .mirror-ops { position: absolute; left: 10px; right: 10px; top: 60%; margin: 0; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sc-mirror .mirror-ops .knob-btn { min-height: 56px; padding: 6px 4px; font-size: .78rem; display: flex; flex-direction: column; gap: 2px; }
.sc-mirror .mirror-ops .knob-btn i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b7a6ff 60%, #5d43c2); box-shadow: inset 0 0 0 2px #fff; }
.sc-mirror .lamps { position: absolute; left: 10px; right: 10px; bottom: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-mirror .ops-tag { position: absolute; left: 0; right: 0; top: 80%; text-align: center; color: var(--ink); }

/* ── 4-2 액자 장면 ── */
.sc-frames { background: #F1EAFF; background-image: radial-gradient(circle at 12px 12px, rgba(155, 123, 255, .25) 3px, transparent 4px), radial-gradient(circle at 36px 36px, rgba(255, 111, 181, .18) 3px, transparent 4px); background-size: 48px 48px; }
.sc-frames .frames { position: absolute; inset: 40px 8px 8px; align-content: start; gap: 8px; overflow: auto; grid-template-columns: repeat(3, 1fr); padding-top: 12px; }
.sc-frames .frame { min-height: 72px; }
@media (min-width: 560px) { .sc-frames .frames { grid-template-columns: repeat(4, 1fr); } }
.sc-frames .frame-back { background: linear-gradient(135deg, #FFE08A, #D9A21B 70%, #8A5A10); box-shadow: 0 0 0 5px var(--gold), 0 0 0 8px #8A5A10, 0 8px 14px rgba(42, 47, 74, .35); }
.sc-frames .frame-face { box-shadow: 0 0 0 5px var(--gold), 0 0 0 8px #8A5A10, 0 8px 14px rgba(42, 47, 74, .35); }
.sc-frames .frame.done .frame-face { box-shadow: 0 0 0 5px var(--gold), 0 0 0 8px #8A5A10, 0 0 30px 6px rgba(255, 224, 138, .8); }
.sc-frames .frame::before { content: ""; position: absolute; left: 50%; top: -14px; width: 2px; height: 14px; background: #8A5A10; }
.sc-frames .info { position: absolute; left: 10px; right: 10px; top: 8px; font-size: .85rem; font-weight: 800; color: var(--ink); text-align: center; }

/* ── 5-1 망원경 장면 ── */
.sc-scope { background: radial-gradient(circle at 50% 45%, #141c48 0%, #0b1024 60%, #05070f 100%); }
.sc-scope .scope { position: absolute; left: 50%; top: 4%; width: min(88%, 380px); height: 52%; transform: translateX(-50%); border-radius: 50% / 40%; margin: 0; background: radial-gradient(circle at 50% 50%, #1e2340, #0b1024 80%); box-shadow: inset 0 0 0 10px #4a5568, inset 0 0 0 16px #8A5A10, inset 0 0 40px rgba(0, 0, 0, .8), 0 0 0 4px #2a2f4a, 0 20px 40px rgba(0, 0, 0, .6); }
.sc-scope .lens-band { height: 34px; border-radius: 17px; }
.sc-scope .lens-band.q { top: 28%; background: rgba(255, 111, 181, .35); box-shadow: inset 0 0 0 2px var(--magenta), 0 0 16px rgba(255, 111, 181, .5); }
.sc-scope .lens-band.p { top: 52%; background: rgba(46, 196, 214, .35); box-shadow: inset 0 0 0 2px var(--cyan), 0 0 16px rgba(46, 196, 214, .5); }
.sc-scope .lens-band .end { top: 7px; }
.sc-scope .handle { top: calc(52% - 4px); width: 44px; height: 44px; margin-left: -22px; background: radial-gradient(circle at 35% 30%, #FFF3C4, #D9A21B 60%, #7a4f14); box-shadow: 0 4px 0 #4a2a05, 0 6px 12px rgba(0, 0, 0, .6), inset 0 0 0 4px rgba(255, 255, 255, .35); }
.sc-scope .lens-axis { bottom: 14%; }
.sc-scope .qcard { position: absolute; left: 10px; right: 10px; top: 58%; }
.sc-scope .goal { position: absolute; left: 10px; right: 10px; top: 68%; color: #FFE08A; font-weight: 800; font-size: .85rem; text-align: center; text-shadow: 0 1px 3px #000; }
.sc-scope .lens-ctl { position: absolute; left: 10px; right: 10px; bottom: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sc-scope .lens-ctl .row { margin: 0; gap: 4px; }
.sc-scope .lens-lab { min-width: 0; color: #fff; font-size: .75rem; }
.sc-scope .ring { min-width: 0; padding: 6px 8px; font-size: .8rem; }
.sc-scope .observe { position: absolute; right: 12px; top: 76%; }
.sc-scope .preview { position: absolute; left: 12px; top: 77%; color: #cfd6e2; font-size: .8rem; margin: 0; }

/* ── 5-2 구름다리 장면 ── */
.sc-bridge { background: linear-gradient(180deg, #BFE8FF 0%, #E4F3FF 45%, #9ED6F6 100%); }
.sc-bridge .bridge { position: absolute; left: 4%; right: 4%; top: 22%; max-height: 34%; overflow: auto; min-height: 0; padding: 0; background: transparent; display: flex; align-items: center; gap: 4px; z-index: 1; }
.sc-bridge .planks { z-index: 3; max-height: 40%; overflow: auto; gap: 6px; }
.sc-bridge .tile.plank.pick { min-height: 44px; padding: 6px 8px; font-size: .82rem; }
.sc-bridge .isle { background: linear-gradient(180deg, #8BD89B, #5FBF7A 70%, #A8742A); box-shadow: 0 8px 0 #7a4f2a, 0 12px 14px rgba(0, 0, 0, .25); border-radius: 14px 14px 6px 6px; min-width: 64px; padding: 8px 10px; }
.sc-bridge .plank.set, .sc-bridge .plank.slot { flex: 1 1 0; min-width: 0; background: linear-gradient(180deg, #E9C084, #C99552 60%, #9C6B2E); box-shadow: 0 5px 0 #6a4520; border-radius: 6px; min-height: 40px; font-size: .78rem; }
.sc-bridge .plank.slot { background: rgba(255, 255, 255, .5); border: 2px dashed #8F9BB3; box-shadow: none; }
.sc-bridge .bridge.complete .plank.set { box-shadow: 0 5px 0 #6a4520, 0 0 20px rgba(52, 211, 153, .8); }
.sc-bridge .planks { position: absolute; left: 10px; right: 10px; bottom: 8px; margin: 0; }
.sc-bridge .tile.plank.pick { background: linear-gradient(180deg, #E9C084, #C99552 60%, #9C6B2E); box-shadow: 0 5px 0 #6a4520, 0 8px 12px rgba(0, 0, 0, .25); color: #3a2205; font-weight: 800; border-radius: 8px; }
.sc-bridge .tile.plank.pick.dragging { transform: rotate(-4deg) scale(1.05); box-shadow: 0 16px 24px rgba(0, 0, 0, .35); }
.sc-bridge .info { position: absolute; left: 10px; right: 10px; top: 8px; color: var(--ink); font-weight: 800; font-size: .85rem; text-align: center; text-shadow: 0 1px 0 #fff; }
.sc-bridge .plank.fall { animation: plank-break .7s ease-in forwards; }
@keyframes plank-break { 30% { transform: translateY(6px) rotate(3deg); } 100% { transform: translateY(120px) rotate(28deg) scale(.7); opacity: 0; } }

/* 지도 설명판·가벼운 모드 스위치 */
.tagline.panel { background: rgba(255, 253, 246, .85); border-radius: 12px; padding: 8px 12px; color: var(--ink); box-shadow: 0 2px 0 #E8DFCB; }
.tile.tog.lite { gap: 6px; padding: 6px 10px; }
.tile.tog.lite[aria-pressed="false"] { text-decoration: none; color: var(--ink); }
.tile.tog.lite i { width: 30px; height: 16px; border-radius: 8px; background: #cfcabd; position: relative; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.tile.tog.lite i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .2s; }
.tile.tog.lite[aria-pressed="true"] i { background: var(--ok); } .tile.tog.lite[aria-pressed="true"] i::after { left: 16px; }
@media (min-width: 900px) { .stage-scene { max-width: 900px; width: 100%; margin: 0 auto; } .stage-title, .stage-hud { padding-left: max(10px, calc(50% - 450px)); padding-right: max(10px, calc(50% - 450px)); } }

/* 토스트 */
.toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 6; background: var(--white); color: var(--ink); padding: 8px 16px; border-radius: 12px; font-weight: 700; box-shadow: 0 4px 0 var(--cream-shadow), 0 10px 20px rgba(42, 47, 74, .2); animation: toast 2.4s ease forwards; max-width: calc(100vw - 32px); text-align: center; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* 접근성 */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 380px) {
  .region-chips { grid-template-columns: 1fr 1fr; }
  .floor-row { grid-template-columns: 44px 1fr auto; }
  .boss-hud .time { font-size: 1.35rem; }
}
@media (min-width: 900px) {
  .scr { max-width: 820px; }
  .room-bottom { max-width: 720px; margin: 0 auto; width: 100%; }
  .room-top { max-width: 720px; margin: 0 auto; width: 100%; }
}

/* ── 개념 수업 가독성 (2026-09-27 사용자 요청: "개념수업에서 글씨체가 너무 맘에 안들어, 가독성 높여줘") ──
   · 제목도 본문 글꼴(굵게): Jua 에는 ∈ ⊂ ᶜ 같은 기호가 없어 글꼴이 섞여 보였다
   · 벤벤은 위로 작게, 말풍선은 가로 전체: 줄 길이를 늘려 어색한 줄바꿈을 줄인다
   · 한국어는 낱말 단위로만 줄바꿈(keep-all), 글자·줄간격 키움 */
.tut-card .board-head h2 { font-family: var(--font-body); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--gold-dark); }
.tut-card .benben-say { flex-direction: column; align-items: stretch; gap: 6px; }
.tut-card .benben-avatar { align-self: flex-start; width: 56px; height: 56px; }
.tut-card .benben-avatar svg { width: 56px; height: 56px; }
.tut-card .bubble { font-size: 1.12rem; line-height: 1.8; font-weight: 500; letter-spacing: -0.005em; padding: 14px 16px; }
.tut-card .bubble::before { left: 22px; top: -10px; border: 8px solid transparent; border-bottom-color: var(--white); border-top: 0; }
.tut-card .bubble p { margin: 0 0 8px; }
.tut-card .bubble p:last-child { margin-bottom: 0; }
.tut-card .choices .choice, .tut-card .qcard, .tut-card .prompt { font-size: 1.08rem; line-height: 1.6; }
.tut-card .fb-fig { margin-top: 12px; }
/* 한국어 줄바꿈을 낱말 단위로 (게임 전체의 말풍선·문제 카드·선택지·해설) */
.bubble p, .qcard, .qtext, .prompt, .choice, .fb-reason p, .note-card, .story p, .triple td, .map-head .sub, .room-top .sub, .board-head h2 { word-break: keep-all; overflow-wrap: break-word; }
@media (max-width: 380px) { .tut-card .bubble { font-size: 1.05rem; } }