/* 2학기 과학 게임(반짝수리·불꽃탈출) 첫 화면, 전체 스테이지, 위 띠 모양에 맞춘 덮어쓰기. 2026-11-13 */
:root{--night:#13213d;--night2:#1f3460;--paper:#fffaf0;--volt:#facc15;--volt2:#f59e0b}
h1,h2,h3,.big,.tkick,.sbar h2,.scard b,.scard .n,.mission-title,#play .question,.result-title,.reward-number,.rv-unit-head h3{font-family:'Jua','Malgun Gothic',sans-serif;font-weight:400}

/* 밤하늘 배경(첫 화면·전체 스테이지) */
body[data-screen=title],body[data-screen=stages]{min-height:100vh;color:#1f2937;background-color:var(--night);background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 33% 9%,#fff6 50%,transparent 51%),radial-gradient(2px 2px at 58% 22%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 77% 12%,#fff7 50%,transparent 51%),radial-gradient(1.5px 1.5px at 91% 30%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 6% 44%,#fff5 50%,transparent 51%),radial-gradient(2px 2px at 46% 38%,#fff5 50%,transparent 51%),radial-gradient(ellipse at 50% 0%,#2a4580,var(--night) 70%);background-attachment:fixed}
body[data-screen=title] main,body[data-screen=stages] main{max-width:none;margin:0;padding:0}
body[data-screen=stages] #account{display:none}

/* 첫 화면: 가운데 카드, 큰 시작 단추와 사용설명서 */
.rv-title{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:16px}
.rv-title .tcard{width:min(560px,100%);background:rgba(255,250,240,.97);border-radius:22px;padding:22px 26px 16px;box-shadow:0 18px 50px rgba(0,0,0,.4);text-align:center}
.tkick{color:#b45309;font-size:16px}
.rv-title h1{margin:2px 0 12px;font-size:38px;line-height:1.25;color:var(--night)}
.rv-title h1 span{font-size:.5em;white-space:nowrap}
.rv-account .account{margin:0 0 12px;justify-content:center;background:#f3ead7;color:#4b3b1c;font-size:14px}
.rv-account .account.error{background:#fff0e5}
.rv-account .account button{min-height:36px;padding:5px 10px;font-size:13px}
.big{border:0;border-radius:12px;padding:10px 22px;font-size:20px}
body[data-screen=title] .big.go,#play .big.go{background:var(--volt);color:#3b2a00;box-shadow:0 3px 0 var(--volt2)}
body[data-screen=title] .big.go:hover,#play .big.go:hover:not(:disabled){filter:brightness(.96);background:var(--volt)}
#play .big.go:disabled{background:#e5e7eb;color:#9ca3af;box-shadow:none}
#btnStart{width:100%;font-size:23px;min-height:54px}
.tourp{margin:10px 0 2px}
.tourlink{display:inline-block;min-height:0;border:2px solid #f3c88a;background:#fff;color:#92400e;border-radius:99px;padding:5px 18px;font-size:15px;font-weight:400}
.tourlink:hover{background:#fff7e6}
.rv-sum{margin:8px 0 4px;font-size:14px;color:#6b7280}
.rv-sum b{color:#92400e}
.rv-title .link{display:inline-block;color:#94a3b8;font-size:14px;padding:4px 8px}

/* 전체 스테이지 */
.rv-stages{padding-bottom:28px}
.sbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 16px;color:#fff;background:rgba(19,33,61,.94);backdrop-filter:blur(4px)}
.sbar h2{margin:0;font-size:24px;flex:1;color:#fff}
.sbar button,.sbar .sbtn{min-height:40px;border:1px solid #3b5a96;background:rgba(15,26,52,.88);color:#fff;border-radius:10px;padding:7px 12px;font-size:15px;font-weight:400;text-decoration:none;display:inline-flex;align-items:center}
.sbar button:hover,.sbar .sbtn:hover{background:#24396b}
.sbar span{color:#fde68a;font-size:15px;white-space:nowrap}
.rv-unit{padding:6px 0 4px;scroll-margin-top:64px}
.rv-unit-head{display:flex;align-items:baseline;gap:10px;padding:8px 18px 6px;color:#fff}
.rv-unit-head h3{margin:0;font-size:22px}
.rv-unit-head small{color:#c7d2fe;font-size:13px;flex:1}
.rv-unit-n{color:#fde68a;font-size:14px}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:4px 16px}
.scard{position:relative;border-radius:16px;background:var(--paper);text-align:left;padding:12px 14px 10px;min-height:150px;display:flex;flex-direction:column;gap:3px;border-top:5px solid var(--accent,#b45309)}
.scard .n{font-size:15px;color:#b45309}
.scard-go{all:unset;cursor:pointer;display:block}
.scard-go:active:not(:disabled),.scard-go:hover{transform:none;background:none}
.scard-go::after{content:'';position:absolute;inset:0;border-radius:16px}
.scard-go:focus-visible::after{outline:3px solid var(--volt2);outline-offset:2px}
.scard-go b{font-size:21px;line-height:1.3;color:#1f2937}
.scard small{color:#6b7280;font-size:13px;line-height:1.45}
.scard .st{margin-top:auto;font-size:14px;color:#374151}
.scard.done{background:#fffbeb;box-shadow:inset 0 0 0 3px #facc15}
.scard:hover{box-shadow:0 0 0 3px #fde68a}
.scard.done:hover{box-shadow:inset 0 0 0 3px #facc15,0 0 0 3px #fde68a}
.scard .course-dots{position:relative;z-index:1;display:flex;gap:6px;margin:8px 0 4px}
.scard .course-dots button{min-height:0;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid #d7ceb9;background:#f5efe2;color:#715e3b;font-size:12px;font-weight:700}
.scard .course-dots button:first-child{width:auto;border-radius:99px;padding:0 10px}
.scard .course-dots button.done{background:#dfedda;border-color:#8bb47f;color:#2f613c}
.scard .course-dots button:hover{background:#fde68a}
.snote{color:#c7d2fe;font-size:14px;text-align:center;margin:18px 16px 0}

/* 게임 화면 위 띠: 나가기 왼쪽, 오른쪽 끝 오류 제보 */
#play .pbar button{border:2px solid #f3c88a;background:#fff;color:#1f2937;font-weight:400}
#play .pbar button:hover{background:#fff7e6}
#play #exit{order:-1}
#play .pbar .prog{flex:0 1 160px;min-width:60px;height:10px;background:#fde7c7;border-radius:99px;overflow:hidden}
#play .pbar .prog i{display:block;height:100%;background:linear-gradient(90deg,#fbbf24,#f97316);transition:width .4s}
#play .pbar h2{color:#7c2d12}
#playReport{margin-left:2px}
.credit{font-size:13px;color:#6b7280}

@media(max-width:1100px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){
 #play .pbar .prog,#playTb{display:none}
 .sbar{position:static;flex-wrap:wrap;gap:6px 8px;padding:8px 12px}
 .sbar h2{font-size:20px;flex:1 0 auto}
 .sbar span{order:5;flex-basis:100%;font-size:13px}
 .sbar button,.sbar .sbtn{min-height:38px;padding:5px 10px;font-size:14px}
}
@media(max-width:520px){
 .sgrid{grid-template-columns:1fr}
 .rv-title h1{font-size:30px}
 .rv-title .tcard{padding:18px 16px 12px}
 .rv-unit-head{flex-wrap:wrap;padding:8px 14px 4px}
 #play .pbar{gap:6px;padding:6px 8px}
 #play .pbar button{padding:6px 8px;font-size:13px}
}

/* 오류 제보 창(반짝수리처럼 제보하면 건너뛰고 다음으로) */
#reportDialog .rp-skip{background:#fff7e6;border:1px solid #f3c88a;border-radius:10px;padding:8px 12px;font-size:14px;color:#7c2d12}
.rchk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;margin:10px 0}
.rchk label{display:flex;gap:7px;align-items:flex-start;font-size:14px;line-height:1.45;padding:6px 8px;border:1px solid #e7dcc4;border-radius:10px;background:#fffdf7;cursor:pointer}
.rchk input{width:18px;height:18px;margin:1px 0 0;flex:none}
#rpText{width:100%;font:inherit;font-size:15px;border:2px solid #d6c9a8;border-radius:10px;padding:8px 10px;resize:vertical}
.rp-msg{min-height:22px;margin:6px 0 0;color:#a63f36;font-size:14px}
.rp-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:6px}
.rp-btns button{min-height:44px;font-size:15px}
#rpSend{background:var(--volt);border-color:var(--volt2);color:#3b2a00;box-shadow:0 3px 0 var(--volt2)}
#rpSend:disabled{opacity:.6}
.rv-flash{background:#fff7e6;border:2px solid #f3c88a;color:#7c2d12;border-radius:12px;padding:9px 12px;font-size:14px;line-height:1.5;margin:0 0 12px}
.scard .course-dots button.skip{background:#ffedd5;border-color:#f59e0b;color:#9a3412}
@media(max-width:520px){.rchk{grid-template-columns:1fr}.rp-btns button{flex:1 1 100%}}
#reportDialog{line-height:1.6}
#reportDialog h2{margin:0 0 6px}
#reportDialog>p{margin:4px 0}
#reportDialog .rp-btns{position:sticky;bottom:-28px;margin:6px -28px -28px;padding:10px 28px 14px;background:#fff;border-top:1px solid #eee3cc}
@media(max-width:520px){
 #reportDialog{padding:16px;max-height:calc(100dvh - 20px)}
 #reportDialog .rp-btns{bottom:-16px;margin:6px -16px -16px;padding:8px 16px 10px}
 .rchk label{padding:4px 8px;font-size:13px}
 .rp-btns button{flex:1 1 auto;min-height:42px;padding:6px 10px;font-size:14px}
 #rpPhoto{order:3;flex-basis:100%}
}