:root{color:#202124;font-synthesis:none;text-rendering:optimizelegibility;background:#fffdf5;font-family:Inter,Pretendard,Apple SD Gothic Neo,Noto Sans KR,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(#fffffff0,#fffaebe6),radial-gradient(circle at 40% 20%,#ffca282e,#0000 30%);min-width:320px;min-height:100vh;margin:0}button{font:inherit}button:focus-visible{outline-offset:4px;outline:4px solid #10b98161}.app-shell{min-height:100vh;padding:clamp(18px,2.6vw,34px)}.app-header{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:clamp(18px,2vw,28px);display:flex}.eyebrow{color:#17803c;margin:0 0 6px;font-size:clamp(.86rem,1.1vw,1rem);font-weight:800}h1{color:#1f1f1f;letter-spacing:0;text-shadow:0 3px #00000014;flex-wrap:wrap;align-items:baseline;gap:.18em .32em;margin:0;font-size:clamp(2.1rem,4.2vw,4.8rem);font-weight:950;line-height:1;display:flex}.title-green{color:#16a34a}.title-orange{color:#f05a28}.header-badge{background:#fff;border:2px solid #18803c29;border-radius:8px;align-items:center;gap:12px;min-width:max-content;padding:14px 18px;display:flex;box-shadow:0 10px 24px #1d4e2414}.header-badge span{color:#207941;font-weight:800}.header-badge strong{color:#fff;background:#16a34a;border-radius:999px;place-items:center;min-width:56px;min-height:40px;display:grid}.classroom-board{grid-template-columns:minmax(180px,250px) minmax(360px,.95fr) minmax(300px,420px);align-items:stretch;gap:clamp(16px,1.6vw,26px);display:grid}.status-panel,.mission-display,.teacher-controls,.teacher-editor{background:#ffffffe0;border:2px solid #16a34a33;border-radius:8px;box-shadow:0 14px 32px #1d4e241a}.status-panel{align-self:start;overflow:hidden}.status-block,.history-block{padding:18px}.status-block{background:#eff9ee;border-bottom:1px solid #16a34a29}.panel-label,.control-label{color:#21733f;margin-bottom:9px;font-size:.88rem;font-weight:900;display:block}.status-block strong{margin-bottom:8px;font-size:1.12rem;line-height:1.25;display:block}.status-block p,.empty-history{color:#52605a;margin:0;line-height:1.45}.mission-history{gap:10px;margin:0;padding:0;list-style:none;display:grid}.mission-history li{border-bottom:1px solid #20212414;grid-template-columns:30px 1fr;align-items:center;gap:10px;min-height:44px;padding-bottom:10px;display:grid}.mission-history li:last-child{border-bottom:0;padding-bottom:0}.mission-history span{color:#1f1f1f;background:#f6c90e;border-radius:999px;place-items:center;width:30px;height:30px;font-weight:900;display:grid}.mission-history strong{font-size:.98rem;line-height:1.3}.center-stage{align-content:start;justify-items:center;min-width:0;padding-top:clamp(4px,1.2vw,18px);display:grid}.roulette-area{aspect-ratio:1;width:min(100%,590px);min-width:0;max-width:100%;position:relative}.roulette-area:before{content:"";background:#fff;border:8px solid #f7f6ed;border-radius:50%;position:absolute;inset:-3.5%;box-shadow:inset 0 0 0 2px #20212414,0 20px 48px #1f1f1f29}.roulette-pointer{z-index:5;background:#ef3d2f;border:5px solid #fff;border-radius:50% 50% 50% 0;width:44px;height:64px;position:absolute;top:-2.5%;left:50%;transform:translate(-50%)rotate(-45deg);box-shadow:0 8px 18px #a01c1652}.roulette-pointer:after{content:"";background:#fff;border-radius:999px;width:12px;height:12px;position:absolute;top:13px;left:13px}.roulette-wheel{transform-origin:50%;transition:transform var(--spin-duration) cubic-bezier(.14, .82, .18, 1);will-change:transform;border:6px solid #fff;border-radius:50%;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 0 2px #2021241f,inset 0 0 0 54px #ffffff14}.roulette-wheel:after{content:"";pointer-events:none;background:radial-gradient(circle,#fff 0 56%,#0000 57%),#ffffffdb;border:12px solid #2faa50;border-radius:50%;position:absolute;inset:29%;box-shadow:0 0 0 10px #ffffffdb}.wheel-labels{z-index:3;transform-origin:50%;transition:transform var(--spin-duration) cubic-bezier(.14, .82, .18, 1);will-change:transform;pointer-events:none;position:absolute;inset:0}.wheel-label-slot{transform:rotate(var(--angle));transform-origin:50%;position:absolute;inset:0}.wheel-label-face{color:#fff;text-align:center;text-shadow:0 2px 4px #00000047;width:92px;min-height:74px;transform:translateX(-50%) rotate(var(--counter-angle));transform-origin:50%;transition:transform var(--spin-duration) cubic-bezier(.14, .82, .18, 1);align-content:center;justify-items:center;font-weight:950;line-height:1.08;display:grid;position:absolute;top:8.5%;left:50%}.wheel-label-face strong{color:#1f8d44;width:34px;height:34px;text-shadow:none;background:#fff;border:3px solid #ffffffb8;border-radius:999px;place-items:center;margin-bottom:6px;font-size:1rem;display:grid}.wheel-label-face span{word-break:keep-all;font-size:clamp(.92rem,1.2vw,1.26rem)}.wheel-label-face.is-selected strong{color:#fff;background:#ef3d2f}.start-button{z-index:6;aspect-ratio:1;color:#1f1f1f;cursor:pointer;background:#fff;border:8px solid #2faa50;border-radius:50%;place-items:center;width:30%;min-width:132px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 24px #15803d38,inset 0 -8px #14532d12}.start-button:disabled{cursor:not-allowed;opacity:.74}.start-button span{font-size:clamp(1.8rem,3vw,3.4rem);font-weight:950;line-height:1}.start-button small{color:#248043;font-weight:900}.quick-actions{grid-template-columns:minmax(160px,260px) minmax(140px,220px);gap:16px;width:min(100%,560px);margin-top:22px;display:grid}.quick-actions button,.ready-button{color:#fff;cursor:pointer;background:#16a34a;border:0;border-radius:8px;min-height:58px;font-size:1.1rem;font-weight:950;box-shadow:0 10px 22px #16a34a38}.quick-actions button+button{color:#2f3632;background:#fff;border:2px solid #2021241f}.quick-actions button:disabled{cursor:not-allowed;filter:grayscale(.15);opacity:.58}.right-rail{align-content:start;gap:18px;display:grid}.teacher-controls{gap:10px;padding:14px;display:grid}.control-group{gap:6px;display:grid}.segmented-control,.duration-control{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.segmented-control button,.duration-control button,.sound-toggle{color:#2f3632;cursor:pointer;word-break:keep-all;background:#fff;border:2px solid #2021241a;border-radius:8px;min-height:38px;font-size:.88rem;font-weight:850;line-height:1.22}.segmented-control button.is-active,.duration-control button.is-active,.sound-toggle.is-active{color:#fff;background:#16a34a;border-color:#16a34a}.segmented-control button:disabled,.duration-control button:disabled{cursor:not-allowed;opacity:.52}.sound-toggle{justify-self:start;min-width:150px;padding:0 16px}.teacher-editor{margin-top:clamp(16px,2vw,26px);overflow:hidden}.editor-toggle{color:#1f6f3d;cursor:pointer;background:#eff9ee;border:0;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:0 16px;font-weight:950;display:flex}.editor-toggle:after{content:"⌄";font-size:1.2rem;line-height:1}.editor-toggle[aria-expanded=true]:after{transform:rotate(180deg)}.editor-panel{gap:14px;padding:14px;display:grid}.editor-header{gap:4px;display:grid}.editor-header strong{color:#202124;font-size:1.05rem;font-weight:950}.editor-header span{color:#52605a;word-break:keep-all;font-size:.9rem;font-weight:750;line-height:1.4}.mission-editor-list{gap:10px;max-height:min(54vh,620px);padding-right:4px;display:grid;overflow:auto}.mission-editor-row{background:#fff;border:1px solid #2021241a;border-radius:8px;grid-template-columns:minmax(110px,.7fr) minmax(160px,.9fr) minmax(260px,1.4fr);gap:10px;min-width:0;margin:0;padding:12px;display:grid}.mission-editor-row legend{color:#17803c;padding:0 4px;font-size:.86rem;font-weight:950}.mission-editor-row label{gap:5px;min-width:0;display:grid}.mission-editor-row label span{color:#52605a;font-size:.78rem;font-weight:900}.mission-editor-row input,.mission-editor-row textarea{color:#202124;width:100%;min-width:0;font:inherit;background:#fffdf5;border:2px solid #2021241a;border-radius:8px;font-size:.9rem;font-weight:750}.mission-editor-row input{min-height:38px;padding:0 10px}.mission-editor-row textarea{resize:vertical;min-height:58px;padding:9px 10px;line-height:1.35}.mission-editor-row input:focus,.mission-editor-row textarea:focus{border-color:#16a34a;outline:3px solid #16a34a2e}.editor-wide-field{grid-column:auto}.editor-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.editor-actions button{color:#fff;cursor:pointer;background:#16a34a;border:0;border-radius:8px;min-height:44px;font-weight:950}.editor-actions button+button{color:#2f3632;background:#fff;border:2px solid #2021241f}.editor-actions button:disabled,.mission-editor-row:disabled{cursor:not-allowed;opacity:.58}.editor-message{color:#21733f;min-height:1.35em;margin:0;font-size:.9rem;font-weight:900}.mission-display{align-content:center;justify-items:center;min-height:390px;padding:56px 24px 28px;display:grid;position:relative}.mission-display-header{color:#fff;text-align:center;background:#16a34a;border-radius:0 0 8px 8px;min-width:min(72%,270px);padding:14px 22px;font-size:clamp(1.2rem,1.9vw,2rem);font-weight:950;position:absolute;top:-2px;left:50%;transform:translate(-50%)}.mission-display-ring{aspect-ratio:1;border-radius:50%;place-items:center;width:min(68%,270px);display:grid}.mission-display-ring-inner{aspect-ratio:1;background:#fffdf5;border-radius:50%;place-items:center;width:76%;display:grid;box-shadow:inset 0 0 0 1px #2021240f}.mission-display-ring strong{color:#1f1f1f;font-size:clamp(3.2rem,7vw,6.3rem);font-weight:950;line-height:.9}.mission-display-ring span{color:#21733f;margin-top:-28px;font-weight:950}.mission-display-copy{text-align:center;border-top:2px solid #2021241f;width:100%;margin-top:22px;padding-top:20px}.mission-display-copy h2{word-break:keep-all;margin:0 0 12px;font-size:clamp(1.8rem,3vw,3.2rem);font-weight:950;line-height:1.05}.mission-display-copy p{color:#55615a;word-break:keep-all;max-width:31rem;margin:0 auto;font-size:clamp(1rem,1.15vw,1.18rem);font-weight:750;line-height:1.5}.mission-overlay{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffdf5e6;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.mission-overlay-panel{text-align:center;background:#fff;border:4px solid #16a34a;border-radius:8px;justify-items:center;width:min(92vw,920px);padding:clamp(26px,5vw,64px);display:grid;box-shadow:0 26px 70px #0f41203d}.overlay-kicker{color:#16813e;margin:0 0 10px;font-size:clamp(1rem,1.6vw,1.4rem);font-weight:950}.mission-overlay h2{word-break:keep-all;margin:0;font-size:clamp(2.6rem,7vw,6.8rem);font-weight:950;line-height:1.02}.overlay-instruction{color:#3f4a44;word-break:keep-all;max-width:44rem;margin:18px 0 24px;font-size:clamp(1.1rem,2vw,1.65rem);font-weight:800;line-height:1.45}.timer-ring{aspect-ratio:1;border-radius:50%;place-items:center;width:min(52vw,360px);min-width:220px;display:grid}.timer-ring-inner{aspect-ratio:1;background:#fffdf5;border-radius:50%;place-items:center;width:78%;display:grid}.timer-ring-inner strong{color:#1f1f1f;font-size:clamp(4rem,11vw,9rem);font-weight:950;line-height:.9}.timer-ring-inner span{color:#21733f;margin-top:-18px;font-weight:950}.timer-ring-inner .complete-mark{color:#16a34a;margin:0;font-size:clamp(1rem,2vw,1.4rem)}.mission-overlay-complete .timer-ring-inner strong{word-break:keep-all;max-width:92%;font-size:clamp(2.2rem,4.5vw,3.8rem);line-height:1.02}.overlay-note{color:#607068;margin:20px 0 0;font-size:1rem;font-weight:750}.ready-button{min-width:210px;margin-top:24px;padding:0 28px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@media (width<=1180px){.classroom-board{grid-template-columns:minmax(0,1fr)}.status-panel{order:3}.right-rail{order:2}.center-stage{order:1}.mission-display{min-height:420px}}@media (width<=720px){.app-shell{padding:14px}.app-header{display:grid}.header-badge{justify-content:space-between;width:100%}.roulette-area{width:min(94vw,520px);min-width:0}.wheel-label-face{width:76px;min-height:62px;top:7%}.wheel-label-face strong{width:26px;height:26px;font-size:.82rem}.wheel-label-face span{font-size:.82rem}.start-button{border-width:6px;min-width:108px}.quick-actions,.segmented-control,.mission-editor-row{grid-template-columns:1fr}.editor-wide-field{grid-column:1/-1}.duration-control{grid-template-columns:repeat(3,1fr)}.mission-display{min-height:380px;padding-inline:18px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important}.roulette-wheel{transition-duration:.9s}}
