/* 학생 화면. 1280×720(16:9)으로 그리고 화면 크기에 맞춰 확대·축소합니다(태블릿 4:3은 위아래 여백). */
#viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: 1280px; height: 720px; flex: none; transform-origin: center center; overflow: hidden; }
.screen { position: absolute; inset: 0; }

/* 타이틀 B1 */
.title-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-text { position: absolute; left: 0; right: 0; top: 70px; text-align: center; }
.title-text h1 {
  font-family: var(--font-title);
  font-size: 118px;
  font-weight: 400;
  margin: 0;
  color: var(--gold);
  text-shadow: 0 8px 0 var(--orange), 6px 0 0 var(--purple), -6px 0 0 var(--purple), 0 6px 0 var(--purple), 0 -6px 0 var(--purple);
  letter-spacing: 4px;
}
.title-text .sub { font-size: 34px; color: var(--sky); margin-top: 22px; text-shadow: 3px 3px 0 #000; }
.title-start { position: absolute; left: 0; right: 0; top: 420px; text-align: center; }
.press { font-family: var(--font-pixel); font-size: 22px; color: var(--gold); margin-bottom: 28px; text-shadow: 3px 3px 0 #000; }
.title-foot { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 20px; color: var(--sky); text-shadow: 2px 2px 0 #000; }
.float-note { animation: floaty 3s ease-in-out infinite; }
.float-note:nth-of-type(2n) { animation-delay: -1.5s; }
@keyframes floaty { 50% { transform: translateY(-3px); } }

/* 입장 B2 */
.entry-top { position: absolute; left: 40px; right: 40px; top: 24px; }
.mission-head { font-family: var(--font-pixel); font-size: 16px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.mission-head b { font-family: var(--font-body); font-weight: 400; font-size: 30px; color: var(--text); margin-left: 8px; }
.era-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 16px; width: 760px; }
.era-tile { height: 112px; border: 5px solid var(--ink); background: var(--blue); box-shadow: 5px 5px 0 #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 22px; color: var(--sky); }
.era-tile.open { background: var(--gold); color: var(--ink); }
.era-tile small { font-size: 16px; }
.caption { margin-top: 14px; font-size: 22px; color: var(--sky); width: 760px; }
.entry-form { position: absolute; right: 40px; top: 24px; width: 420px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.entry-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.entry-form .err { min-height: 30px; color: #ffb0a6; font-size: 21px; }
.entry-form .actions { display: flex; flex-direction: column; gap: 14px; margin-top: auto; }

/* 도리 대화창 */
.dialog { position: absolute; left: 40px; bottom: 28px; width: 760px; min-height: 170px; display: flex; gap: 18px; align-items: flex-start; }
.dialog.wide { left: 80px; right: 80px; width: auto; }
.dialog .portrait { flex: none; width: 112px; height: 112px; background: var(--blue); border: 5px solid var(--ink); box-shadow: 4px 4px 0 #000; }
.dialog .body { flex: 1; position: relative; }
.dialog .name { display: inline-block; background: var(--gold); color: var(--ink); padding: 2px 14px; font-size: 22px; border: 4px solid var(--ink); margin-bottom: 8px; }
.dialog .line { font-size: 30px; line-height: 1.4; min-height: 84px; }
.dialog .more { position: absolute; right: 4px; bottom: -6px; color: var(--gold); font-size: 22px; }
.dialog.clickable { cursor: pointer; }

/* 언제나 보이는 버튼(HUD) */
.hud { position: absolute; top: 16px; right: 20px; display: flex; gap: 12px; align-items: center; z-index: 20; }
.hud .vol { display: flex; align-items: center; gap: 6px; font-size: 18px; color: var(--sky); }
.hud .vol input { width: 110px; min-height: 0; padding: 0; box-shadow: none; border: 0; background: transparent; accent-color: var(--gold); }
.hud .save { font-size: 18px; color: var(--grey); min-width: 70px; text-align: right; }
.help-on { animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { filter: brightness(1.4); } }

/* 홈 */
.home-top { position: absolute; left: 30px; top: 16px; display: flex; gap: 14px; }
.stat { background: rgba(26, 16, 51, 0.9); border: 4px solid var(--ink); box-shadow: 4px 4px 0 #000; padding: 6px 14px; font-size: 20px; color: var(--sky); }
.stat b { color: var(--gold); font-weight: 400; font-size: 26px; margin-left: 6px; }
.gauge { display: inline-block; width: 120px; height: 16px; border: 3px solid var(--ink); background: var(--blue); vertical-align: middle; margin-left: 8px; }
.gauge i { display: block; height: 100%; background: var(--gold); }
.places { position: absolute; left: 60px; right: 60px; top: 150px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.place { height: 330px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; padding-bottom: 22px; font-size: 34px; color: var(--text); background: rgba(38, 57, 154, 0.55); border: 6px solid var(--ink); box-shadow: 8px 8px 0 #000; }
.place:hover, .place:focus-visible { outline: 5px solid var(--gold); }
.place svg { width: 180px; height: 180px; }
.lamps { position: absolute; left: 0; right: 0; bottom: 210px; display: flex; justify-content: center; gap: 14px; }
.lamp { width: 22px; height: 22px; background: #2a2f55; border: 3px solid var(--ink); }
.lamp.on { background: var(--gold); box-shadow: 0 0 14px var(--gold); }

/* 지도와 차시 목록 */
.screen-title { position: absolute; left: 40px; top: 22px; font-family: var(--font-title); font-size: 46px; color: var(--gold); text-shadow: 0 4px 0 var(--orange), 3px 0 0 var(--purple), -3px 0 0 var(--purple); }
.back-btn { position: absolute; left: 40px; bottom: 28px; }
.doors { position: absolute; left: 50px; right: 50px; top: 140px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.door { height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 6px 18px; cursor: pointer; border: 6px solid var(--ink); background: #1d2560; box-shadow: 6px 6px 0 #000; font-size: 26px; color: var(--grey); position: relative; }
.door.open { background: var(--blue); color: var(--text); }
.door.open:hover { outline: 5px solid var(--gold); }
.door svg { width: 120px; height: 160px; }
.door .state { font-size: 18px; }
.door.unlocking svg .lock { animation: drop 1.2s ease-in forwards; }
.door.unlocking { animation: shake 0.4s steps(2) 3; }
@keyframes drop { to { transform: translateY(60px); opacity: 0; } }
@keyframes shake { 50% { transform: translateX(4px); } }
.lessons { position: absolute; left: 60px; right: 60px; top: 130px; display: flex; flex-direction: column; gap: 14px; }
.lesson { display: flex; align-items: center; gap: 18px; padding: 12px 20px; min-height: 76px; border: 5px solid var(--ink); background: var(--blue); box-shadow: 5px 5px 0 #000; cursor: pointer; font-size: 28px; }
.lesson .num { font-family: var(--font-pixel); font-size: 16px; color: var(--gold); width: 90px; }
.lesson .st { margin-left: auto; font-size: 20px; color: var(--sky); }
.lesson.locked { background: #1d2560; color: var(--grey); cursor: not-allowed; }
.lesson.done .st { color: var(--green); }

/* 겹쳐 뜨는 창, 알림 */
.overlay { position: absolute; inset: 0; background: rgba(5, 8, 25, 0.78); display: flex; align-items: center; justify-content: center; z-index: 50; }
.overlay .panel { width: 760px; max-height: 620px; overflow: auto; }
.overlay h2 { margin: 0 0 12px; font-family: var(--font-title); font-weight: 400; color: var(--gold); font-size: 40px; }
.overlay ul { margin: 0 0 18px; padding-left: 26px; line-height: 1.6; font-size: 25px; }
.overlay .btns { display: flex; gap: 16px; justify-content: flex-end; }
.toast { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); z-index: 60; background: var(--gold); color: var(--ink); border: 5px solid var(--ink); box-shadow: 6px 6px 0 #000; padding: 10px 24px; font-size: 26px; }
.placeholder { position: absolute; left: 120px; right: 120px; top: 170px; text-align: center; font-size: 30px; line-height: 1.6; }
.preview-badge { position: fixed; left: 12px; bottom: 6px; font-size: 14px; color: var(--grey); z-index: 70; }
.preview-badge a { color: var(--sky); }

/* ---------- 4단계: 미션 화면 공통 (4.6절) ---------- */
.m-top { position: absolute; left: 30px; right: 420px; top: 20px; display: flex; align-items: center; gap: 14px; }
.m-step { font-size: 22px; color: var(--gold); white-space: nowrap; }
.m-bar { flex: 0 0 180px; height: 18px; border: 3px solid var(--ink); background: #1d2560; }
.m-bar i { display: block; height: 100%; background: var(--gold); }
.m-title { font-size: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-bubble { position: absolute; left: 30px; right: 30px; top: 86px; display: flex; gap: 14px; align-items: center; }
.m-bubble .portrait { flex: none; width: 76px; height: 76px; background: var(--blue); border: 4px solid var(--ink); box-shadow: 3px 3px 0 #000; }
.m-say { flex: 1; background: #fff8e0; color: var(--ink); border: 4px solid var(--ink); box-shadow: 4px 4px 0 #000; padding: 10px 18px; font-size: 27px; min-height: 64px; display: flex; align-items: center; position: relative; }
.m-say::before { content: ''; position: absolute; left: -16px; top: 22px; border: 8px solid transparent; border-right-color: var(--ink); }
.m-area { position: absolute; left: 60px; right: 60px; top: 190px; bottom: 110px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.m-bottom { position: absolute; left: 30px; right: 30px; bottom: 22px; display: flex; gap: 16px; align-items: center; }
.m-bottom .spacer { flex: 1; }

/* 감상 플레이어 */
.player { display: flex; gap: 22px; align-items: center; background: rgba(26, 16, 51, 0.92); border: 5px solid var(--ink); outline: 4px solid var(--blue-2); box-shadow: 6px 6px 0 #000; padding: 18px 22px; }
.play-btn { flex: none; width: 110px; height: 110px; background: var(--gold); border: 6px solid var(--ink); box-shadow: inset -6px -6px 0 var(--gold-dark), inset 6px 6px 0 var(--gold-light), 6px 6px 0 #000; cursor: pointer; position: relative; }
.play-btn::after { content: ''; position: absolute; left: 40px; top: 28px; border-left: 38px solid var(--ink); border-top: 22px solid transparent; border-bottom: 22px solid transparent; }
.play-btn.playing::after { left: 32px; top: 28px; width: 12px; height: 44px; border: 0; background: var(--ink); box-shadow: 22px 0 0 var(--ink); }
.play-btn:disabled { filter: grayscale(0.6); cursor: wait; }
.p-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.p-title { font-size: 28px; }
.p-title small { font-size: 18px; color: var(--grey); }
.p-bar { height: 14px; background: #1d2560; border: 3px solid var(--ink); }
.p-pos { display: block; height: 100%; background: var(--sky); }
.p-row { display: flex; justify-content: space-between; align-items: center; font-variant-numeric: tabular-nums; color: var(--sky); }
.p-need { display: flex; gap: 12px; align-items: center; font-size: 22px; color: var(--gold); }
.p-gauge { flex: 0 0 260px; height: 22px; border: 3px solid var(--ink); background: #2a2f55; }
.p-gauge i { display: block; height: 100%; background: var(--green); }
.m-listen.mini .player { padding: 8px 14px; }
.m-listen.mini .play-btn { width: 64px; height: 64px; border-width: 4px; }
.m-listen.mini .play-btn::after { left: 21px; top: 14px; border-left-width: 24px; border-top-width: 14px; border-bottom-width: 14px; }
.m-listen.mini .play-btn.playing::after { left: 16px; top: 14px; width: 8px; height: 28px; box-shadow: 14px 0 0 var(--ink); }
.m-listen.mini .p-title, .m-listen.mini .p-need { display: none; }

/* 보기 */
.q-prompt { font-size: 34px; text-align: center; }
.q-prompt mark { background: var(--gold); color: var(--ink); padding: 0 6px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice { position: relative; font-family: var(--font-body); font-size: 28px; min-height: 84px; color: var(--ink); background: #fff8e0; border: 5px solid var(--ink); box-shadow: 5px 5px 0 #000; cursor: pointer; padding: 8px 56px; }
.choice:hover:not(:disabled) { outline: 4px solid var(--gold); }
.choice:disabled { cursor: not-allowed; color: var(--ink); }
/* 오답: 흐리게 하지 않고 원래 밝기 그대로, 빨간 ✕와 테두리 (4.8절) */
.choice.wrong { border-color: #d6281a; box-shadow: 0 0 0 4px #d6281a, 5px 5px 0 #000; }
.choice.wrong::after { content: '✕'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #d6281a; font-size: 40px; }
.choice.right { background: #8fe3a8; }
.choice.right::after { content: '✓'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 40px; }
/* 힌트로 지운 보기 */
.choice.removed { background: #2a2f55; color: #8a90b0; text-decoration: line-through; box-shadow: none; }

/* 음악 조각 획득 */
.overlay.fragment .panel { text-align: center; width: 640px; }
.frag-gem { width: 96px; height: 96px; margin: 0 auto 8px; background: var(--gold); transform: rotate(45deg); border: 6px solid var(--ink); box-shadow: 0 0 30px var(--gold); animation: gem 1.6s ease-in-out infinite; }
@keyframes gem { 50% { box-shadow: 0 0 60px var(--gold); } }
.stars { font-size: 64px; letter-spacing: 8px; color: #3a3f6a; }
.stars .on { color: var(--gold); text-shadow: 3px 3px 0 #000; }
.got-cards b { color: var(--gold); font-weight: 400; }
.muted-note { color: var(--grey); font-size: 20px; }

/* 이탈 경고·성찰문 (다른 창보다 위) */
.leave-layer .overlay { z-index: 80; }
.overlay.leave .panel { width: 720px; text-align: center; }
.overlay.leave h2 { color: #ff8a7a; font-size: 46px; }
.leave-body { font-size: 28px; line-height: 1.5; }
.overlay.leave .btns { justify-content: center; }
.overlay.leave textarea { width: 100%; font-family: var(--font-body); font-size: 26px; padding: 12px; border: 4px solid var(--ink); background: #fff8e0; color: var(--ink); resize: none; -webkit-user-select: text; user-select: text; }
.overlay.leave textarea::placeholder { color: #9a9a9a; }
.refl-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: var(--sky); font-size: 22px; }
@media (prefers-reduced-motion: reduce) { .frag-gem, .float-note, .blink, .help-on { animation: none; } }

/* ---------- 5단계: 차시 화면(허브) ---------- */
.hub { position: absolute; left: 50px; right: 50px; top: 120px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.hub-step { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; min-height: 190px; padding: 12px 8px; font-family: var(--font-body); color: var(--text); background: #1d2560; border: 5px solid var(--ink); box-shadow: 5px 5px 0 #000; cursor: pointer; }
.hub-step.next { background: var(--blue); outline: 5px solid var(--gold); }
.hub-step.done { background: var(--blue-2); }
.hub-step:disabled { cursor: not-allowed; color: var(--grey); }
.hs-label { font-size: 20px; color: var(--gold); }
.hs-title { font-size: 22px; text-align: center; line-height: 1.25; }
.hs-state { font-size: 20px; color: var(--gold); min-height: 26px; }
.hub-special { position: absolute; left: 50px; right: 50px; top: 345px; font-size: 22px; color: var(--sky); display: flex; gap: 14px; align-items: center; }
.sp-dots { display: inline-flex; gap: 6px; }
.sp-dots i { width: 18px; height: 18px; border: 3px solid var(--gold); background: transparent; display: inline-block; }
.sp-dots i.on { background: var(--gold); }
.hub-go { position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; top: 430px; }

/* 소리 A/B, 작은 문제 글씨 */
.snd-row { display: flex; gap: 20px; justify-content: center; }
.snd { font-family: var(--font-body); font-size: 30px; min-width: 220px; min-height: 80px; color: var(--ink); background: var(--sky); border: 5px solid var(--ink); box-shadow: 5px 5px 0 #000; cursor: pointer; }
.snd.playing { background: var(--gold); }
.q-prompt.small { font-size: 26px; }

/* 음악 탐정 단서 */
.clues { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.clue { min-height: 96px; padding: 8px 10px; border: 4px solid var(--ink); background: #1d2560; color: var(--grey); font-size: 20px; line-height: 1.35; display: flex; flex-direction: column; gap: 4px; }
.clue b { font-weight: 400; color: var(--gold); font-size: 18px; }
.clue.open { background: #fff8e0; color: var(--ink); }
.clue.open b { color: var(--orange); }
.m-area:has(.clues) .choices { grid-template-columns: repeat(3, 1fr); }

/* 설명 장면 */
.slide { display: flex; gap: 30px; align-items: center; }
.slide-art { flex: 0 0 480px; border: 5px solid var(--ink); box-shadow: 6px 6px 0 #000; }
.slide-art svg { width: 100%; height: auto; }
.slide-text h3 { font-family: var(--font-title); font-weight: 400; color: var(--gold); font-size: 40px; margin: 6px 0 10px; }
.slide-text p { font-size: 28px; line-height: 1.5; margin: 0; }
.slide-n { color: var(--sky); font-size: 20px; }

/* 짝 맞추기, 귀도의 손 */
.match { display: flex; gap: 40px; justify-content: center; align-items: center; }
.m-col { display: flex; flex-direction: column; gap: 12px; }
.m-card { font-family: var(--font-body); font-size: 26px; min-width: 180px; min-height: 64px; color: var(--ink); background: #fff8e0; border: 5px solid var(--ink); box-shadow: 4px 4px 0 #000; cursor: pointer; }
.m-card.sel { background: var(--gold); outline: 4px solid #fff; }
.m-card.done, .joint.done { background: #8fe3a8; }
.m-card.hinted, .joint.hinted { outline: 4px dashed var(--gold); }
.hand { position: relative; flex: none; width: 340px; height: 400px; }
.hand-art { width: 100%; height: 100%; }
.joint { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-body); font-size: 17px; line-height: 1.1; min-width: 50px; min-height: 48px; padding: 2px 4px; color: var(--ink); background: #fff8e0; border: 4px solid var(--ink); box-shadow: 3px 3px 0 #000; cursor: pointer; }
.shake { animation: shake 0.4s steps(2) 2; border-color: #d6281a !important; }

/* 순서 맞추기 */
.slots { display: flex; gap: 8px; align-items: center; justify-content: center; }
.slots .arrow { font-size: 30px; color: var(--gold); }
.slot { position: relative; width: 230px; min-height: 96px; font-family: var(--font-body); font-size: 24px; color: var(--ink); background: rgba(255, 248, 224, 0.15); border: 4px dashed var(--sky); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.slot.full { background: #fff8e0; border-style: solid; border-color: var(--ink); box-shadow: 4px 4px 0 #000; }
.slot.fixed { outline: 4px solid var(--gold); }
.slot-n { position: absolute; left: 6px; top: 2px; font-size: 16px; color: var(--sky); }
.slot.full .slot-n { color: var(--orange); }
.slot small, .o-card small { font-size: 17px; color: var(--orange); }
.pool { display: flex; gap: 14px; justify-content: center; min-height: 90px; }
.o-card { width: 230px; min-height: 80px; font-family: var(--font-body); font-size: 24px; color: var(--ink); background: #fff8e0; border: 5px solid var(--ink); box-shadow: 4px 4px 0 #000; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.o-card.sel { background: var(--gold); outline: 4px solid #fff; }
.o-msg { text-align: center; font-size: 22px; color: #ffb0a6; min-height: 28px; }
.band { text-align: center; font-size: 22px; color: var(--ink); background: var(--sky); border: 3px solid var(--ink); padding: 4px; }

/* 시간 제한 */
.timer { position: relative; height: 26px; border: 4px solid var(--ink); background: #2a2f55; }
.timer i { display: block; height: 100%; background: var(--gold); transition: width 0.2s linear; }
.timer span { position: absolute; right: 8px; top: -2px; color: var(--ink); font-size: 20px; }
.timed-score { text-align: center; font-family: var(--font-pixel); font-size: 64px; color: var(--gold); }

/* 피타고라스의 현 */
.mono { position: relative; display: flex; flex-direction: column; gap: 10px; }
.mono-art { width: 100%; height: auto; border: 5px solid var(--ink); background: #2a1a3a; box-shadow: 5px 5px 0 #000; }
.mono.ringing #vib { animation: vib 0.08s steps(2) infinite; }
@keyframes vib { 50% { transform: translateY(0.5px); } }
.mono input[type=range] { padding: 0; min-height: 44px; background: transparent; border: 0; box-shadow: none; accent-color: var(--gold); width: 93.1%; margin: 0 0 0 2.7%; }
.mono-info { display: flex; gap: 16px; align-items: center; font-size: 24px; color: var(--sky); }
.mono-info span { flex: 1; }
.hidden-star-btn { position: absolute; right: 6%; top: 0; }
.targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.target { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 4px solid var(--ink); background: #1d2560; font-size: 22px; }
.target b { font-family: var(--font-pixel); font-size: 15px; font-weight: 400; color: var(--gold); }
.target i { margin-left: auto; font-style: normal; color: var(--grey); }
.target.done { background: var(--blue-2); }
.target.done i { color: var(--green); }

/* 음악회 */
.concert-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.m-area.concert::before { content: ''; position: absolute; inset: -10px 0 auto; height: 40px; background: radial-gradient(var(--gold) 2px, transparent 3px) 0 0 / 40px 20px; opacity: 0.6; animation: floaty 3s ease-in-out infinite; }
.note-box { display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-family: var(--font-body); font-size: 24px; min-height: 52px; padding: 4px 18px; color: var(--ink); background: #fff8e0; border: 4px solid var(--ink); cursor: pointer; }
.chip.on { background: var(--gold); box-shadow: inset 0 0 0 3px #fff; }
.note-box textarea { font-family: var(--font-body); font-size: 26px; padding: 10px; border: 4px solid var(--ink); background: #fff8e0; color: var(--ink); resize: none; -webkit-user-select: text; user-select: text; }
.note-count { color: var(--sky); font-size: 20px; text-align: right; }

/* 액자 복원 */
.boss-intro { display: flex; justify-content: center; }
.boss-intro svg { width: 220px; height: 220px; opacity: 0.6; }
.frames { position: absolute; left: 0; right: 0; top: 150px; display: flex; gap: 60px; justify-content: center; }
.frame { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.frame-in { width: 220px; height: 220px; padding: 16px; background: #1a1033; border: 14px solid #8a5a2b; outline: 5px solid var(--ink); box-shadow: 8px 8px 0 #000; }
.frame-in svg { width: 100%; height: 100%; }
.frame.lit .frame-in { background: #fff0b8; border-color: var(--gold); box-shadow: 0 0 40px var(--gold), 8px 8px 0 #000; transition: all 0.6s; }
.frame-name { font-size: 30px; }

/* 수료증 */
.cert-wrap { position: absolute; left: 40px; right: 40px; top: 110px; bottom: 30px; display: flex; gap: 24px; }
.cert { flex: 1; background: #fff8e0; color: var(--ink); border: 14px solid var(--blue); outline: 6px solid var(--gold); outline-offset: -26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.cert-h { font-family: var(--font-title); font-size: 64px; color: var(--purple); }
.cert-era { font-size: 34px; color: var(--orange); }
.cert-who { font-size: 34px; }
.cert-line { font-size: 26px; }
.cert-sign { font-size: 24px; color: var(--purple); }
.cert-side { width: 320px; display: flex; flex-direction: column; gap: 12px; }
.cert-note { font-size: 18px; color: var(--sky); margin: 0; }
.cert-title-get { color: var(--gold); margin: 0; }
@media print {
  body.printing-cert * { visibility: hidden; }
  body.printing-cert .cert, body.printing-cert .cert * { visibility: visible; }
  body.printing-cert .cert { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; }
  @page { size: A4 landscape; margin: 10mm; }
}

/* 도감 책장 */
.col-head { position: absolute; left: 380px; top: 34px; display: flex; gap: 16px; align-items: center; font-size: 24px; color: var(--sky); }
.badge { background: var(--gold); color: var(--ink); padding: 4px 12px; border: 3px solid var(--ink); }
.era-tabs { position: absolute; left: 40px; right: 40px; top: 100px; display: flex; gap: 8px; }
.era-tabs button { font-family: var(--font-body); font-size: 22px; min-height: 48px; padding: 0 18px; color: var(--text); background: var(--blue); border: 4px solid var(--ink); cursor: pointer; }
.era-tabs button.on { background: var(--gold); color: var(--ink); }
.cards { position: absolute; left: 40px; right: 40px; top: 170px; bottom: 100px; overflow-y: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-content: start; padding: 4px; }
.card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 196px; padding: 10px 6px; font-family: var(--font-body); color: var(--ink); background: #fff8e0; border: 5px solid var(--ink); box-shadow: 4px 4px 0 #000; cursor: pointer; }
.card.locked { background: #2a2f55; color: var(--grey); cursor: default; }
.card.gold { border-color: #e5a92e; box-shadow: 0 0 0 4px var(--gold), 4px 4px 0 #000; }
.c-art { width: 96px; height: 96px; }
.c-art svg { width: 100%; height: 100%; }
.c-name { font-size: 21px; text-align: center; line-height: 1.2; }
.c-rar { color: #e59a2e; font-size: 18px; }
.c-hint { font-size: 16px; text-align: center; color: var(--sky); }
.card-back { width: 760px; }
.cb-top { display: flex; gap: 20px; align-items: center; }
.card-back .c-art { width: 120px; height: 120px; flex: none; background: #fff8e0; border: 4px solid var(--ink); }
.c-note { color: var(--gold); font-size: 20px; }
/* 손 마디는 가운데 맞춤에 transform을 쓰므로 흔들기도 그에 맞춰 */
.joint.shake { animation: jshake 0.4s steps(2) 2; }
@keyframes jshake { 50% { transform: translate(calc(-50% + 4px), -50%); } }
/* 귀도의 손: 안내는 도리 말풍선에 있으므로 문제 글씨는 숨기고 손을 크게 */
.m-area:has(.layout-hand) .q-prompt { display: none; }

/* ---------- 테스트 도구(미리보기 전용) ---------- */
.dev-toggle { position: fixed; left: 420px; bottom: 2px; z-index: 201; font-family: var(--font-body); font-size: 15px; padding: 6px 12px; color: #1a1033; background: #8fe3a8; border: 3px solid #1a1033; cursor: pointer; }
.dev-toggle.on { background: #fff; }
.dev-panel { position: fixed; right: 10px; top: 10px; bottom: 58px; z-index: 200; width: 320px; overflow-y: auto; font-family: var(--font-body); font-size: 15px; color: #1a1033; background: #f4fff6; border: 3px solid #1a1033; box-shadow: 4px 4px 0 #000; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.dev-panel[hidden] { display: none; }
.dev-h { font-size: 18px; }
.dev-h small { color: #4a6a50; font-size: 13px; margin-left: 6px; }
.dev-sec { display: flex; flex-direction: column; gap: 6px; border-top: 2px solid #cde8d2; padding-top: 8px; }
.dev-sec b { font-weight: 400; color: #2a7a3a; }
.dev-panel button { font-family: var(--font-body); font-size: 15px; min-height: 34px; padding: 4px 8px; text-align: left; color: #1a1033; background: #fff; border: 2px solid #1a1033; cursor: pointer; }
.dev-panel button:hover { background: #e2f7e6; }
.dev-panel button.danger { color: #b32a1e; }
.dev-panel select { font-size: 15px; min-height: 34px; padding: 2px 6px; border-width: 2px; box-shadow: none; }
.dev-grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
.dev-check { display: flex; gap: 6px; align-items: center; font-size: 15px; color: #1a1033; margin: 0; }
.dev-check input { width: auto; min-height: 0; }
.dev-note { color: #4a6a50; font-size: 13px; }
.dev-msg { min-height: 18px; color: #2a7a3a; }
/* 정답 표시(테스트 도구에서 켰을 때만 붙는 표시) */
.choice.dev-answer { outline: 4px dashed #2fbf5a; outline-offset: -10px; }
.dev-tag { display: inline-block; margin-left: 4px; padding: 0 4px; font-size: 13px; color: #fff; background: #2fbf5a; border-radius: 2px; vertical-align: middle; }
body.dev-open #viewport { right: 340px; }
body.dev-open .preview-badge { display: none; }
body.dev-open .dev-toggle { left: auto; right: 16px; bottom: 16px; }

/* ---------- 6단계: 리듬 따라 치기 ---------- */
.rhythm { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.r-head { display: flex; gap: 20px; font-size: 22px; color: var(--gold); }
.r-head #rtries { color: var(--sky); }
.r-notation { width: 760px; height: 130px; justify-content: center; background: #fff8e0; border: 5px solid var(--ink); box-shadow: 5px 5px 0 #000; padding: 6px 14px; display: flex; align-items: center; }
.r-notation svg { height: 110px; width: auto; max-width: 100%; }
.ch-score svg { height: 84px; width: auto; max-width: 100%; }
.r-pad { width: 460px; height: 120px; font-family: var(--font-body); font-size: 28px; color: var(--ink); background: var(--sky); border: 6px solid var(--ink); box-shadow: 6px 6px 0 #000; cursor: pointer; touch-action: manipulation; }
.r-pad.hit { background: var(--gold); transform: translate(3px, 3px); box-shadow: 3px 3px 0 #000; }
.r-pad.flash { outline: 6px solid var(--gold); }
.r-status { font-size: 30px; color: var(--gold); min-height: 38px; }
.r-result { font-size: 22px; color: var(--text); min-height: 28px; }

/* 달라진 점 찾기: A·B 플레이어 */
.ab { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-label { font-size: 22px; color: var(--gold); margin-bottom: 4px; }
.ab .player { padding: 8px 12px; gap: 12px; }
.ab .play-btn { width: 64px; height: 64px; border-width: 4px; }
.ab .play-btn::after { left: 21px; top: 14px; border-left-width: 24px; border-top-width: 14px; border-bottom-width: 14px; }
.ab .play-btn.playing::after { left: 16px; top: 14px; width: 8px; height: 28px; box-shadow: 14px 0 0 var(--ink); }
.ab .p-title { display: none; }
.ab .p-gauge { flex-basis: 120px; }
.ab .p-need { font-size: 18px; }

/* 작곡가 인터뷰 */
.iv { display: grid; grid-template-columns: 150px 1fr 150px; gap: 20px; align-items: center; }
.iv-face { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.45; font-size: 22px; }
.iv-face.on { opacity: 1; }
.iv-face svg { width: 130px; height: 130px; background: var(--blue); border: 5px solid var(--ink); }
.iv-bubble { background: #fff8e0; color: var(--ink); border: 5px solid var(--ink); box-shadow: 5px 5px 0 #000; padding: 14px 20px; min-height: 140px; }
.iv-bubble b { color: var(--orange); font-weight: 400; font-size: 22px; }
.iv-bubble p { font-size: 30px; line-height: 1.45; margin: 6px 0 0; }
.iv-q { font-size: 30px; text-align: center; }

/* 블록 작곡 엔진 */
.blocks { display: flex; flex-direction: column; gap: 10px; }
.b-sections { display: grid; margin-left: 70px; gap: 0; }
.b-sections span { text-align: center; font-size: 20px; color: var(--gold); border-bottom: 3px solid var(--gold); }
.b-grid { display: grid; gap: 2px; }
.b-row-label { font-size: 17px; color: var(--sky); display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; }
.b-row-label.off { opacity: 0.35; }
.b-cell { min-height: 28px; background: #1d2560; border: 0; cursor: pointer; padding: 0; }
.b-cell.bar { box-shadow: inset 3px 0 0 #6f8ae0; }
.b-cell.alt { background: #232d70; }
.b-cell.on { background: var(--gold); box-shadow: inset 0 0 0 3px var(--ink); }
.b-cell.now { outline: 3px solid #fff; outline-offset: -3px; }
.b-cell.now2 { outline: 3px dashed #8fe3a8; outline-offset: -3px; }
.b-cell:disabled { background: #10153a; cursor: not-allowed; }
.b-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.b-ctl { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 20px; color: var(--sky); }
.b-ctl select { width: auto; font-size: 20px; min-height: 48px; }
.b-conds { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; justify-content: center; font-size: 21px; color: var(--sky); flex-wrap: wrap; }
.b-conds li.ok { color: var(--green); }
.acc-rows { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.acc-row { display: flex; gap: 8px; align-items: center; }
.acc-row.playing .acc-label { color: var(--gold); }
.acc-label { width: 80px; font-size: 22px; color: var(--sky); text-align: right; }
.acc { width: 84px; height: 84px; font-family: var(--font-pixel); font-size: 18px; color: var(--sky); background: #1d2560; border: 5px solid var(--ink); cursor: pointer; }
.acc.on { background: var(--orange); color: #fff; box-shadow: inset 0 -10px 0 #8a3a14; }
.acc.now { outline: 5px solid #fff; outline-offset: -5px; }
.acc:disabled { cursor: default; opacity: 0.85; }

/* 우연성 음악 */
.chance { display: flex; flex-direction: column; gap: 10px; }
.ch-note { font-size: 19px; color: var(--sky); text-align: center; }
.chance .b-conds { font-size: 18px; gap: 12px; }
.ch-score { background: #fff8e0; border: 5px solid var(--ink); padding: 2px 12px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.ch-dice { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.die { display: flex; flex-direction: column; align-items: center; font-size: 16px; color: var(--sky); background: #1d2560; border: 4px solid var(--ink); padding: 4px; }
.die b { font-weight: 400; font-size: 20px; color: var(--grey); }
.die.on b { color: var(--gold); }
.die.fixed b { color: var(--sky); }
.note-box input { font-size: 26px; }

/* ---------- 2차시 인쇄소 → 배송 ---------- */
.rhythm.with-scene { display: grid; grid-template-columns: 1fr 360px; grid-template-areas: "scene scene" "head head" "nota pad" "status result"; gap: 6px 16px; align-items: center; }
.rhythm.with-scene .ps-scene { grid-area: scene; }
.rhythm.with-scene .r-head { grid-area: head; justify-content: center; font-size: 20px; }
.rhythm.with-scene .r-notation { grid-area: nota; width: auto; height: 100px; }
.rhythm.with-scene .r-notation svg { height: 88px; }
.rhythm.with-scene .r-pad { grid-area: pad; width: 100%; height: 100px; font-size: 24px; }
.rhythm.with-scene .r-status { grid-area: status; font-size: 24px; min-height: 30px; }
.rhythm.with-scene .r-result { grid-area: result; font-size: 18px; }
.ps-scene { position: relative; display: grid; grid-template-columns: 4fr 2fr 4fr; height: 150px; padding-bottom: 22px; border: 5px solid var(--ink); background: #1a2a52; box-shadow: 5px 5px 0 #000; }
.ps-shop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; background: #3a2a52; border-right: 4px solid var(--ink); }
.ps-shop b, .ps-village span { font-weight: 400; font-size: 18px; color: var(--gold); }
.ps-press { width: 120px; height: 70px; }
.ps-press.working .ps-plate { animation: press 0.4s steps(2) infinite; }
@keyframes press { 50% { transform: translateY(4px); } }
.ps-types { display: flex; gap: 3px; min-height: 14px; }
.ps-types i { width: 14px; height: 14px; background: #2a2f55; border: 2px solid var(--ink); }
.ps-types i.on { background: var(--gold); }
.ps-hidden { position: absolute; right: 4px; bottom: 2px; }
.ps-road { background: #24315e; }
.ps-way { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: repeating-linear-gradient(90deg, #6b5a8e 0 14px, #5a4a7a 14px 28px); border-top: 3px solid var(--ink); pointer-events: none; }
.ps-mover { position: absolute; left: 24%; bottom: 4px; width: 112px; height: 59px; opacity: 0; pointer-events: none; z-index: 2; }
.ps-mover svg { width: 100%; height: 100%; }
.ps-mover .leg-b { display: none; }
.ps-mover.go svg { animation: bump .26s steps(2) infinite; }
.ps-mover.go .leg-a { animation: legA .26s steps(1) infinite; }
.ps-mover.go .leg-b { display: inline; animation: legB .26s steps(1) infinite; }
@keyframes bump { 50% { transform: translateY(-2px); } }
@keyframes legA { 50% { visibility: hidden; } }
@keyframes legB { 0% { visibility: hidden; } 50% { visibility: visible; } }
.ps-villages { display: grid; grid-template-columns: repeat(3, 1fr); background: #2a3a6a; border-left: 4px solid var(--ink); }
.ps-village { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; opacity: 0.5; border-right: 2px solid #1a2a52; }
.ps-village.now { opacity: 1; background: #3a4a80; }
.ps-village.done { opacity: 1; }
.ps-village.done span { color: var(--green); }
.ps-village svg { width: 48px; height: 48px; }
.ps-village .ps-people { width: 66px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .ps-mover.go svg { animation: none; } .ps-press.working .ps-plate { animation: none; } }

/* ---------- 3차시: 나만의 계절 꾸미기 ---------- */
.seasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.season-card { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 8px; font-family: var(--font-body); font-size: 24px; color: var(--text); background: #1d2560; border: 5px solid var(--ink); box-shadow: 5px 5px 0 #000; cursor: pointer; }
.season-card.done { background: var(--blue-2); }
.season-card.done span { color: var(--green); }
.season-card svg { width: 100%; height: auto; border: 3px solid var(--ink); }
.season-edit { display: grid; grid-template-columns: 560px 1fr; gap: 20px; align-items: start; }
.se-left { display: flex; flex-direction: column; gap: 8px; }
.se-scene svg { width: 100%; height: auto; border: 5px solid var(--ink); box-shadow: 5px 5px 0 #000; }
.se-scene { position: relative; }
.se-hidden { position: absolute; left: 92%; top: 48%; transform: translate(-50%, -50%); }
.se-right { display: flex; flex-direction: column; gap: 8px; }
.se-right b { font-weight: 400; color: var(--gold); font-size: 22px; }
.se-right .chip:disabled { opacity: 0.4; cursor: not-allowed; }
.se-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.m-listen.clip .player { padding: 8px 16px; gap: 14px; }
.m-listen.clip .play-btn { width: 70px; height: 70px; border-width: 4px; }
.m-listen.clip .play-btn::after { left: 23px; top: 16px; border-left-width: 26px; border-top-width: 15px; border-bottom-width: 15px; }
.m-listen.clip .play-btn.playing::after { left: 18px; top: 16px; width: 9px; height: 30px; box-shadow: 15px 0 0 var(--ink); }
.m-listen.clip .p-title { font-size: 22px; }
.m-listen.clip .p-body { gap: 4px; }

/* 나누어 놓기(짝 맞추기 multi): 오른쪽 칸이 크고, 놓은 카드 이름이 쌓임 */
.match.multi { align-items: stretch; }
.match.multi .m-card.l { font-size: 22px; min-width: 300px; min-height: 52px; }
.match.multi .m-card.r { min-width: 320px; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px; font-size: 30px; }
.m-got { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; width: 100%; }
/* 나누어 놓을 칸이 3개 이상이면 칸을 가로로 나란히(세로로 쌓으면 화면을 넘침) */
.match.multi.wide { gap: 24px; align-items: center; }
.match.multi.wide > .m-col:last-child { flex-direction: row; gap: 14px; }
.match.multi.wide .m-card.l { min-width: 280px; min-height: 46px; font-size: 20px; }
.match.multi.wide .m-card.r { min-width: 230px; max-width: 250px; min-height: 260px; }
.m-got i { font-style: normal; font-size: 18px; background: #8fe3a8; border: 3px solid var(--ink); padding: 2px 6px; }

/* 설명 그림 속 숨은 요소(H) */
.slide-art { position: relative; }
.slide-hidden { position: absolute; transform: translate(-50%, -50%); }

/* 피타고라스의 현: 눈금 숫자, 목표 카드의 작은 설명 */
.mono-num { font: 4px var(--font-body); fill: #fff0b8; text-anchor: middle; }
.target span { display: flex; flex-direction: column; }
.target small { font-size: 16px; color: var(--sky); }
.target b { font-size: 22px; font-family: var(--font-title); }
.art-label { font: 3px var(--font-body); fill: #fff0b8; }
.art-big { font: 9px var(--font-title); }
.greek { font: 2.3px serif; fill: #3a2a1a; letter-spacing: 0.1px; }
.slide-img { display: block; width: 100%; height: 330px; object-fit: contain; background: #140f28; }
.slide-credit { font-size: 15px !important; color: var(--grey); margin-top: 10px !important; }

/* 미션 앞 설명: 들어 보기 버튼, 다시 보기 겹침 화면 */
.slide-demos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.learn-layer .learn-panel { width: 1120px; max-height: 600px; background: var(--navy, #0e1240); border: 5px solid var(--ink); box-shadow: 6px 6px 0 #000; padding: 24px; }
.learn-layer .btns { margin-top: 18px; align-items: center; }
.learn-layer .spacer { flex: 1; }
.learn-layer .slide-art { flex-basis: 420px; }
.art-person { display: flex; justify-content: center; align-items: center; aspect-ratio: 2 / 1; background: #3a2a4a; }
.art-person svg { height: 88%; width: auto; border: 6px solid #c9962b; background: #2a3a6a; }
.slide-art .hand-art { display: block; height: 240px; width: 100%; background: #2a1a3a; }
.card { position: relative; }
.c-level { position: absolute; top: 6px; right: 6px; font-size: 15px; padding: 1px 6px; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); }

/* 푸가 숨바꼭질: 성부 칸 */
.fugue { display: flex; flex-direction: column; gap: 5px; }
.f-lane { position: relative; display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 14px; border: 3px solid var(--ink); background: #1d2560; transition: background 0.2s; }
.f-lane.on { background: #2a3a8a; }
.f-name { flex: 0 0 150px; font-size: 22px; color: var(--sky); }
.f-track { position: relative; flex: 1; height: 100%; }
.f-subj { position: absolute; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 16px; line-height: 1; color: var(--ink); background: var(--gold); padding: 3px 8px; border: 3px solid var(--ink); white-space: nowrap; z-index: 2; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.f-cont { position: absolute; top: 50%; height: 6px; transform: translateY(-50%); background: #8fe3a8; }
.f-head { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #fff; opacity: 0.8; }
.f-legend { font-size: 18px; color: var(--sky); text-align: center; }
.fugue.blind .f-lane { background: #1d2560; }
.f-hidden { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 3; }
@keyframes pop { from { transform: scale(0.4); } to { transform: scale(1); } }
.m-area:has(.fugue) { gap: 10px; top: 180px; }
.m-area:has(.fugue) .choices { grid-template-columns: repeat(4, 1fr); }
.m-area:has(.fugue) .choice { min-height: 60px; }
.m-area:has(.fugue) .q-prompt { font-size: 26px; margin: 0; }
.m-area:has(.fugue) .f-name { font-size: 19px; }

/* 화음을 풀어서 */
.arp { display: flex; flex-direction: column; gap: 14px; }
.arp-measures { display: flex; gap: 24px; }
.arp-m { flex: 1; display: flex; gap: 10px; }
.arp-chord { flex: 0 0 96px; display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 6px; border: 4px solid var(--ink); background: #3a2a52; }
.arp-chord b { font-size: 24px; color: var(--gold); }
.arp-chord span { width: 100%; text-align: center; font-size: 18px; color: var(--ink); background: #fff8e0; border: 2px solid var(--ink); }
.arp-chord .btn { margin-top: 4px; padding: 4px 6px; font-size: 15px; min-height: 0; }
.arp-grid { flex: 1; display: grid; gap: 4px; }
.arp-cell { min-height: 52px; padding: 0; background: #1d2560; border: 3px solid var(--ink); cursor: pointer; }
.arp-cell.on { background: var(--gold); }
.arp-bar { display: flex; gap: 20px; align-items: flex-start; }
.arp-bar .conds { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; font-size: 19px; color: var(--sky); }
.arp-bar .conds li.ok { color: var(--green); }

/* 문제 번호, 듣고 고르기 문제 글자 조금 크게(1.1배) */
.q-no { display: inline-block; margin-right: 14px; padding: 2px 14px; font-size: 0.7em; vertical-align: middle; color: var(--ink); background: var(--gold); border: 4px solid var(--ink); box-shadow: 3px 3px 0 #000; }
.q-prompt.big { font-size: 37px; line-height: 1.3; }
/* 다음 차시·다음 시대 */
.go-next { position: absolute; right: 40px; bottom: 28px; }
#oPlay { align-self: center; }

/* 열람실 */
.lib-tiles { position: absolute; left: 60px; right: 60px; top: 140px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.lib-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 420px; padding: 22px; text-align: center; font-family: var(--font-body); color: var(--text); background: #1d2560; border: 5px solid var(--ink); box-shadow: 6px 6px 0 #000; }
button.lib-tile { cursor: pointer; background: #2a3a8a; }
button.lib-tile:hover { background: #34479e; }
.lib-tile b { font-family: var(--font-title); font-weight: 400; font-size: 36px; color: var(--gold); }
.lib-tile span { font-size: 21px; color: var(--sky); line-height: 1.4; }
.lib-tile svg { width: 150px; height: auto; }
.lib-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; width: 100%; }
.lib-games ul { list-style: none; padding: 0; margin: 10px 0 0; text-align: left; font-size: 20px; color: var(--grey); line-height: 1.7; }
/* 감상실 */
.room { position: absolute; left: 40px; right: 40px; top: 120px; bottom: 90px; display: grid; grid-template-columns: 560px 1fr; gap: 24px; }
.room-list { overflow-y: auto; padding-right: 8px; display: flex; flex-direction: column; gap: 14px; }
.room-g h4 { margin: 0 0 6px; font-weight: 400; font-size: 20px; color: var(--gold); }
.room-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; margin-bottom: 6px; padding: 8px 14px; text-align: left; font-family: var(--font-body); color: var(--text); background: #1d2560; border: 4px solid var(--ink); cursor: pointer; }
.room-item.on { background: var(--gold); color: var(--ink); }
.room-item:disabled { opacity: 0.45; cursor: not-allowed; }
.ri-t { font-size: 21px; } .ri-c { grid-column: 1; font-size: 16px; color: var(--sky); } .room-item.on .ri-c { color: var(--ink); }
.ri-n { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 16px; color: var(--green); }
.room-item.on .ri-n { color: var(--ink); }
.room-player { padding: 22px; background: #141a4a; border: 5px solid var(--ink); box-shadow: 6px 6px 0 #000; }
.room-player h3 { margin: 0 0 6px; font-family: var(--font-title); font-weight: 400; font-size: 36px; color: var(--gold); }
.room-meta { font-size: 20px; color: var(--sky); margin-bottom: 18px; }
.room-empty, .room-tip { font-size: 21px; color: var(--sky); line-height: 1.5; }
/* 미니게임 목록 */
.game-list { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; overflow-y: auto; max-height: 330px; }
.game-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; font-family: var(--font-body); font-size: 19px; color: var(--ink); background: #fff8e0; border: 3px solid var(--ink); cursor: pointer; text-align: left; }
.game-item.locked { background: #3a3a5a; color: var(--grey); cursor: default; }
.gi-s { font-size: 14px; color: #6a4a2a; white-space: nowrap; } .game-item.locked .gi-s { color: var(--grey); }
.game-result { text-align: center; } .gr-score { font-family: var(--font-title); font-size: 72px; color: var(--gold); } .gr-best { font-size: 28px; color: var(--sky); }
/* 12음 줄 세우기 */
.tw { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.tw-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; width: 100%; }
.tw-slot { min-height: 56px; font-family: var(--font-body); font-size: 20px; color: var(--grey); background: #1d2560; border: 3px solid var(--ink); cursor: pointer; }
.tw-slot.full { background: var(--gold); color: var(--ink); }
.tw-keys { position: relative; display: flex; width: 640px; height: 190px; }
.tw-key.white { flex: 1; position: relative; height: 100%; background: #fff8e0; border: 3px solid var(--ink); cursor: pointer; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-family: var(--font-body); font-size: 18px; color: var(--ink); }
.tw-key.black { position: absolute; top: 0; width: 52px; height: 115px; transform: translateX(-50%); background: #1d1d2a; border: 3px solid var(--ink); z-index: 2; cursor: pointer; color: #fff8e0; font-family: var(--font-body); font-size: 14px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.tw-key.used { opacity: 0.45; } .tw-key.white.unused { box-shadow: inset 0 0 0 4px var(--green); } .tw-key.black.unused { box-shadow: inset 0 0 0 3px var(--green); }
.tw-key.warn, .tw-key.wrong-k { background: #ff8a7a !important; } .tw-key.right { background: var(--green) !important; }
.tw-key.dev-answer { outline: 4px dashed var(--green); }
.tw-bar { display: flex; gap: 20px; align-items: center; font-size: 20px; color: var(--sky); }

/* ---------- 엔딩 (2.8절) ---------- */
.end-door { position: absolute; left: 50%; top: 524px; transform: translateX(-50%); width: 560px; height: 78px; display: flex; align-items: center; justify-content: center; gap: 16px; border: 6px solid var(--ink); background: #1d2560; box-shadow: 6px 6px 0 #000; color: var(--grey); font-size: 26px; cursor: pointer; }
.end-door svg { width: 34px; height: 34px; }
.end-door .state { font-size: 18px; }
.end-door.open { color: var(--text); }
.end-door.ready { background: linear-gradient(90deg, #3a2a10, #7a5a12, #3a2a10); color: var(--gold-light); animation: endGlow 2.4s ease-in-out infinite; }
.end-door.ready:hover { outline: 5px solid var(--gold); }
@keyframes endGlow { 50% { box-shadow: 6px 6px 0 #000, 0 0 34px var(--gold); } }
.ending { position: absolute; inset: 0; overflow: hidden; background: #070a24; }
.en-stage { position: absolute; inset: 0; }
.en-skip { position: absolute; right: 24px; top: 96px; z-index: 5; }
.ending .en-dori { z-index: 4; }
.en-hall { position: absolute; inset: 0; padding: 70px 70px 0; transition: background 2s; }
.en-hall.bright { background: radial-gradient(circle at 50% 30%, #3a3a7a, #070a24 70%); }
.en-lamps { display: flex; justify-content: center; gap: 120px; margin-bottom: 26px; }
.en-lamp { width: 26px; height: 26px; background: #2a2f55; border: 3px solid var(--ink); transition: all .6s; }
.en-lamp.on { background: var(--gold); box-shadow: 0 0 22px var(--gold); }
.en-frames { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; }
.en-frame { height: 104px; border: 5px solid #5a4a2a; background: #14183f; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15px; color: var(--grey); transition: all .5s; }
.en-frame svg { width: 56px; height: 62px; }
.en-frame.lit { border-color: var(--gold); background: #2a3480; color: var(--gold-light); box-shadow: 0 0 16px rgba(255, 211, 107, .55); }
.en-party { position: absolute; inset: 0; }
.en-party canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.en-roll { position: absolute; left: 0; right: 0; top: 40px; bottom: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.en-roll-in { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: enRoll 30s linear forwards; }
@keyframes enRoll { to { transform: translateY(calc(-100% - 480px)); } }
.en-item { display: flex; align-items: center; gap: 14px; font-size: 34px; color: var(--gold-light); text-shadow: 0 3px 0 #000; }
.en-item.t-person { color: var(--gold); font-size: 40px; }
.en-ic svg { width: 44px; height: 44px; }
.en-silence { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 160px; }
.en-score { display: flex; width: 1080px; height: 150px; background: #fff8e0; border: 6px solid var(--ink); background-image: repeating-linear-gradient(#fff8e0 0 22px, #3a1a52 22px 24px); background-position: 0 25px; }
.en-bar { flex: 1; border-right: 4px solid var(--ink); display: flex; align-items: center; justify-content: space-around; }
.en-bar i { width: 18px; height: 14px; background: var(--ink); border-radius: 50%; transform: rotate(-20deg); }
.en-bar i:nth-child(2) { margin-top: -40px; }
.en-bar i:nth-child(3) { margin-top: 30px; }
.en-bar.empty { background: rgba(255, 211, 107, .15); }
.en-bar.glow { animation: emptyGlow 2s ease-in-out infinite; }
@keyframes emptyGlow { 50% { background: rgba(255, 211, 107, .55); } }
.en-fog { position: absolute; inset: 0; background: radial-gradient(circle, rgba(200, 205, 230, .85), rgba(140, 145, 180, .95)); opacity: 1; transition: opacity 12s ease-out; pointer-events: none; }
.en-fog.clear { opacity: 0; }
.en-journal { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 92px; }
.en-page { width: 820px; background: #fff8e0; color: var(--ink); display: flex; flex-direction: column; gap: 6px; transition: transform 1.4s, opacity 1.4s; }
.en-page h3 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 40px; color: var(--purple); }
.en-page .muted { color: #5a4a6a; font-size: 20px; margin: 0; }
.en-page textarea { font: inherit; font-size: 26px; padding: 10px; border: 4px solid var(--ink); background: #fff; resize: none; }
.en-page .btn { align-self: center; }
.en-page.attached { transform: translateY(-30px) scale(.86) rotate(-2deg); box-shadow: 0 0 40px var(--gold); }
.en-433 { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding-bottom: 120px; }
.en-433-t { font-family: var(--font-title); font-size: 60px; color: var(--gold); }
.en-433 canvas { width: 1100px; height: 220px; }
.en-433-time { font-size: 34px; color: var(--sky); }
.en-secret { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 60px; padding-bottom: 180px; }
.en-note { font-size: 140px; color: var(--gold); text-shadow: 0 0 30px var(--gold); transition: transform 2.5s ease-in-out; }
.en-letter { font-size: 36px; color: var(--sky); max-width: 700px; }
.en-letter b { font-size: 90px; color: var(--gold-light); transition: text-shadow 2s; }
.en-secret.join .en-note { transform: translateX(120px) scale(.6); }
.en-secret.join .en-letter b { text-shadow: 0 0 30px var(--gold); }
.en-reward { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.en-reward h3 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 36px; color: var(--gold); }
.en-reward p { font-size: 26px; margin: 0; }
.en-card { width: 150px; height: 150px; background: var(--blue); border: 6px solid var(--gold); box-shadow: 0 0 30px var(--gold); }
.cert-honor { font-size: 28px; color: var(--blue); }
.cert.cert-ending { border-color: var(--purple); }
.c-titles { font-size: 20px; color: var(--gold); }
.en-page .note-count { color: #5a4a6a; }
/* 리듬 예비박: 큰 버튼 안에 4·3·2·1 → 시-작! */
.r-pad.counting span { font-family: var(--font-title); font-size: 64px; color: var(--purple); }
.r-pad.counting.go { background: var(--gold); }
.r-pad.counting.go span { font-size: 52px; color: var(--orange); }
.rhythm.with-scene .r-pad.counting span { font-size: 54px; }
.r-pad.beat span { display: inline-block; animation: countPop .3s ease-out; }
@keyframes countPop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .r-pad.beat span { animation: none; } }

/* ---------- 튜토리얼 "도리와 첫 만남" (4.13절) ---------- */
.tut { position: absolute; left: 40px; right: 40px; top: 20px; bottom: 214px; }
.tut-head { display: flex; align-items: center; gap: 14px; max-width: 700px; font-size: 26px; color: var(--gold); }
.tut-head b { font-weight: 400; font-family: var(--font-title); font-size: 34px; }
.tut-no { font-size: 18px; color: var(--ink); background: var(--gold); padding: 2px 10px; border: 3px solid var(--ink); }
.tut-dots { display: flex; gap: 6px; }
.tut-dots i { width: 14px; height: 14px; background: #2a2f55; border: 2px solid var(--ink); }
.tut-dots i.on { background: var(--gold); }
.tut-body { position: absolute; left: 0; right: 0; top: 70px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.tut-card { width: 900px; max-width: 100%; background: #1d2560; border: 6px solid var(--ink); box-shadow: 6px 6px 0 #000; padding: 18px 26px; font-size: 24px; text-align: center; }
.tut-card h3 { margin: 0 0 10px; color: var(--gold); font-weight: 400; font-size: 28px; }
.tut-card p { margin: 6px 0; }
.tut-card input { font: inherit; font-size: 22px; width: 100%; margin-top: 10px; }
.tut-card .chips { justify-content: center; }
.tut-ear { font-size: 64px; line-height: 1; }
.tut-btns { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }
.tut-list { text-align: left; margin: 0; padding-left: 28px; font-size: 21px; line-height: 1.5; }
.tut-rules { text-align: left; display: flex; flex-direction: column; gap: 8px; font-size: 22px; }
.tut-ic { display: inline-block; width: 40px; color: var(--gold); }
.tut-stars { font-size: 64px; color: var(--gold); letter-spacing: 6px; }
.tut-shelf { position: relative; width: 760px; padding: 16px; background: #3a2a1a; border: 6px solid var(--ink); box-shadow: 6px 6px 0 #000; display: flex; flex-direction: column; gap: 14px; }
.tut-books { display: flex; align-items: flex-end; gap: 4px; height: 76px; border-bottom: 8px solid #6b4a2a; }
.tut-books i { flex: 1; border: 2px solid var(--ink); }
.tut-hidden { position: absolute; right: 118px; top: 100px; width: 34px; height: 34px; padding: 0; font-size: 22px; color: #e6c27a; background: transparent; border: 0; cursor: pointer; opacity: .7; animation: tutTwinkle 2.4s ease-in-out infinite; }
.tut-hidden.got { color: var(--gold); opacity: 1; text-shadow: 0 0 12px var(--gold); animation: none; transform: scale(1.6); }
@keyframes tutTwinkle { 50% { opacity: 1; } }
.tut-tip { font-size: 20px; color: var(--sky); margin: 0; }
.tut-conds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; text-align: left; font-size: 21px; }
.tut-conds b { display: inline-block; width: 32px; margin-right: 8px; text-align: center; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); }
.tut-try { color: var(--gold); font-size: 22px; margin-top: 10px !important; }
.tut-arrow { margin-top: 8px; font-size: 26px; color: var(--red); text-align: right; animation: tutBob 1s ease-in-out infinite; }
@keyframes tutBob { 50% { transform: translateY(-8px); } }
#hud .tut-glow { animation: tutGlow 1s ease-in-out infinite; position: relative; z-index: 30; }
@keyframes tutGlow { 50% { box-shadow: 0 0 0 6px var(--gold), 0 0 30px var(--gold); } }
.tut-reward { perspective: 900px; }
.tut-cardflip { position: relative; width: 240px; height: 300px; transform-style: preserve-3d; transition: transform .9s; }
.tut-cardflip.flip { transform: rotateY(180deg); }
.tut-front, .tut-back { position: absolute; inset: 0; backface-visibility: hidden; border: 6px solid var(--ink); box-shadow: 6px 6px 0 #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.tut-front { background: repeating-linear-gradient(45deg, #26399a 0 12px, #3a56b0 12px 24px); font-size: 90px; color: var(--gold); font-family: var(--font-title); }
.tut-back { transform: rotateY(180deg); background: #fff8e0; color: var(--ink); padding: 14px; text-align: center; border-color: var(--gold); }
.tut-back b { font-family: var(--font-title); font-weight: 400; font-size: 32px; color: var(--purple); }
.tut-back span { font-size: 16px; line-height: 1.35; }
.tut-portrait { width: 120px; height: 120px; background: var(--blue); border: 4px solid var(--ink); }
@media (prefers-reduced-motion: reduce) { .tut-hidden, .tut-arrow, #hud .tut-glow { animation: none; } .tut-cardflip { transition: none; } }
/* 액자가 5개 이상이면(예: 12차시 작곡가 5명) 작게 해서 한 줄에 */
.frames:has(> .frame:nth-child(5)) { gap: 20px; }
.frames:has(> .frame:nth-child(5)) .frame-in { width: 170px; height: 170px; padding: 12px; border-width: 10px; }
.frames:has(> .frame:nth-child(5)) .frame-name { font-size: 22px; }

/* ---------- 미니게임: 두더지잡기 · 소리 낚시 ---------- */
.m-area:has(.mole-game), .m-area:has(.fish-game) { top: 170px; bottom: 96px; gap: 0; }
.mole-game, .fish-game { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.mg-top { display: flex; align-items: center; gap: 16px; }
.mg-q { flex: 1; font-size: 26px; line-height: 1.3; background: #fff8e6; color: var(--ink); border: 4px solid var(--ink); padding: 8px 14px; }
.mg-score { font-size: 20px; color: #fff; white-space: nowrap; }
.mg-score em { font-style: normal; color: var(--gold); margin-left: 6px; }
.mole-field { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px 30px; background: #5f9b45; border: 4px solid var(--ink); padding: 6px 40px 0; }
.hole { position: relative; overflow: hidden; }
.hole .dirt { position: absolute; left: 6%; right: 6%; bottom: 4px; height: 34px; background: #3b2a1c; border-radius: 50%; box-shadow: inset 0 6px 0 #22170f; z-index: 2; pointer-events: none; }
.mole { position: absolute; left: 50%; bottom: 14px; width: 150px; height: 112px; margin-left: -75px; transform: translateY(110%); transition: transform 0.18s ease-out; border: 4px solid var(--ink); border-radius: 60px 60px 10px 10px; background: #9a6b45; cursor: pointer; padding: 0; z-index: 1; font: inherit; }
.hole.up .mole { transform: translateY(0); }
.mole .m-face { position: absolute; left: 50%; top: 12px; width: 56px; height: 20px; margin-left: -28px; background: radial-gradient(circle at 10px 8px, var(--ink) 5px, transparent 6px), radial-gradient(circle at 46px 8px, var(--ink) 5px, transparent 6px); }
.mole .m-face::after { content: ''; position: absolute; left: 20px; top: 14px; width: 16px; height: 10px; background: #f2a3a3; border: 3px solid var(--ink); border-radius: 50%; }
.mole .m-name { position: absolute; left: -12px; right: -12px; bottom: 26px; background: #fff; color: var(--ink); border: 3px solid var(--ink); font-size: 19px; line-height: 1.15; padding: 3px 2px; word-break: keep-all; }
.hole.hit .mole { background: #f2c94c; transform: translateY(0) scale(1.08); }
.hole.dizzy .mole { background: #7b7b8f; animation: dizzy 0.4s linear 2; }
.hole.dizzy .m-face { background: none; }
.hole.dizzy .m-face::before { content: '× ×'; position: absolute; inset: -8px 0 0; text-align: center; font-size: 22px; color: var(--ink); }
@keyframes dizzy { 0%, 100% { rotate: 0deg; } 25% { rotate: -8deg; } 75% { rotate: 8deg; } }

.sea { flex: 1; position: relative; overflow: hidden; border: 4px solid var(--ink); background: linear-gradient(#9ad3ef 0 24%, #2e78b8 24% 26%, #1f5f99 26% 70%, #164778 70%); }
.boat { position: absolute; left: calc(50% - 90px); top: 0; width: 180px; height: 96px; z-index: 3; animation: bob 3s ease-in-out infinite; }
.bt-dori { position: absolute; left: 50px; top: 0; width: 64px; height: 64px; }
.hull { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: #8a5a35; border: 4px solid var(--ink); border-radius: 0 0 60px 60px; }
.rod { position: absolute; left: 104px; top: 40px; width: 70px; height: 5px; background: #5b3a1f; transform-origin: left center; rotate: 20deg; }
.sea .line { position: absolute; left: calc(50% + 76px); top: 64px; bottom: 14px; width: 2px; background: #fff; z-index: 2; pointer-events: none; transform-origin: top; transition: transform 0.35s ease-in; }
.sea .line.up { transform: scaleY(0.12); transition-duration: 0.3s; }
.sea .hook { position: absolute; left: -7px; bottom: -4px; width: 12px; height: 14px; border: 3px solid #dfe3ea; border-top: 0; border-radius: 0 0 8px 8px; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
.fish { position: absolute; left: 0; display: flex; align-items: center; gap: 0; opacity: 0; pointer-events: none; animation: swim-ltr linear infinite; animation-play-state: paused; z-index: 1; }
.fish.rtl { animation-name: swim-rtl; }
.sea.swim .fish { opacity: 1; pointer-events: auto; animation-play-state: running; transition: opacity 0.4s; }
.f-body { background: var(--c); color: var(--ink); border: 4px solid var(--ink); border-radius: 40px 60px 60px 40px; padding: 8px 18px; font-size: 20px; white-space: nowrap; }
.fish.rtl .f-body { border-radius: 60px 40px 40px 60px; }
/* 꼬리지느러미: 뾰족한 쪽이 몸통에 붙고 넓은 쪽이 바깥(뒤)으로 펼쳐짐 */
.f-tail { width: 0; height: 0; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-left: 26px solid var(--ink); margin-right: -4px; order: -1; }
.fish.rtl .f-tail { border-left: 0; border-right: 26px solid var(--ink); margin: 0 0 0 -4px; order: 1; }
.fish.ltr .f-tail { order: -1; }
.sea.swim .fish.hooked { animation-play-state: paused; transition: top 0.35s ease-in, opacity 0.3s 0.3s; }
.fish.hooked .f-body { outline: 4px dashed #fff; }
.sea { cursor: pointer; }
.btn.reel { font-size: 20px; padding: 8px 16px; }
.sea .fish.gone { opacity: 0; pointer-events: none; }
@keyframes swim-ltr { from { transform: translateX(-110%); } to { transform: translateX(1180px); } }
@keyframes swim-rtl { from { transform: translateX(1180px); } to { transform: translateX(-110%); } }
.catch { position: absolute; right: 14px; top: 10px; z-index: 4; }
.caught { display: inline-block; background: #fff8e6; color: var(--ink); border: 4px solid var(--ink); padding: 6px 12px; font-size: 22px; animation: pop 0.3s ease-out; }
.caught.boot { background: #d9d9e3; }

.hole:not(.up) .mole { visibility: hidden; transition: transform 0.18s ease-out, visibility 0s 0.18s; }
.entry-note { align-self: end; font-size: 18px; line-height: 1.35; color: var(--muted, #5b6080); padding-bottom: 10px; }

/* 휴대폰 세로 화면 안내: 폭이 좁은 세로 화면에서만 보임(태블릿 세로는 그대로 할 만해서 제외) */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  .rotate-hint { display: flex; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; background: rgba(11, 16, 48, 0.96); padding: 24px; }
}
.rh-box { text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 320px; }
.rh-box p { font-size: 28px; margin: 0; color: var(--gold); }
.rh-box small { font-size: 17px; line-height: 1.45; opacity: 0.85; }
.rh-phone { width: 56px; height: 96px; border: 5px solid #fff; border-radius: 10px; animation: rh-turn 2.4s ease-in-out infinite; }
@keyframes rh-turn { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }

/* 숨은 음표(스페셜 조건 H): 모든 차시에서 튜토리얼과 똑같은 금색 ♪ 하나로 통일(2026-11-08 선생님 요청).
   그림과 어울리지 않는 표시라 '찾는 것'임을 알 수 있게, 은은하게 깜빡임 */
.hidden-star-btn, .ps-hidden, .se-hidden, .slide-hidden, .f-hidden {
  width: 34px; height: 34px; padding: 0; font-size: 22px; line-height: 1; color: #e6c27a; background: transparent; border: 0;
  cursor: pointer; opacity: .75; animation: tutTwinkle 2.4s ease-in-out infinite; font-family: inherit;
}
.hidden-star-btn.got, .ps-hidden.got, .slide-hidden.got { color: var(--gold); opacity: 1; text-shadow: 0 0 10px var(--gold); animation: none; }
@media (prefers-reduced-motion: reduce) { .hidden-star-btn, .ps-hidden, .se-hidden, .slide-hidden, .f-hidden { animation: none; } }