@font-face{font-family:"Hakgyoansim Sangjang";src:url("assets/fonts/Hakgyoansim_SangjangR.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Noto Serif KR";src:url("assets/fonts/NotoSerifKR-VariableFont_wght.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
:root{--navy:#17345d;--coral:#e95f55;--jade:#2e8b78;--gold:#f3bd3f;--cream:#fff9e9;--paper:#fffdf4;--fall-duration:2400ms}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:"Noto Serif KR","Malgun Gothic",serif;font-weight:600;color:var(--navy);background:#dff5ff}button{font:inherit;color:inherit;cursor:pointer;border:0}h1,h2,.title-ribbon span,.primary,.finish-shout,#countdown-number,.name-card,.instruction,.timer strong,.legend-item strong,.difficulty strong,.start-difficulty button{font-family:"Hakgyoansim Sangjang","Malgun Gothic",sans-serif;font-weight:400}.app-shell,.screen{position:relative;width:100%;height:100%}.screen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#78d6f1aa,#fff6),url("assets/gyeongbokgung-bg.png") center/cover no-repeat}.screen[hidden],[hidden]{display:none!important}.screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 35%,#17345d14)}
.start-screen{gap:1.4vh}.title-ribbon{text-align:center;background:#fffdf4ef;border:6px solid var(--navy);border-radius:32px;padding:1.5vh 6vw;box-shadow:0 12px 0 #17345d35,0 0 0 7px #f3bd3f;z-index:1}.title-ribbon span{display:block;color:var(--coral);font-size:clamp(26px,4vw,56px)}h1{font-size:clamp(40px,6vw,82px);margin:.05em 0;letter-spacing:-.04em}.start-copy{z-index:1;margin:0;background:#17345dd9;color:white;padding:.55em 1.5em;border-radius:99px;font-size:clamp(18px,2vw,30px)}.symbol-preview,.finish-symbols{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,28px);z-index:1}.symbol{display:block;background-size:contain;background-position:center;background-repeat:no-repeat}.symbol-preview .symbol{width:clamp(75px,9vw,132px);height:clamp(75px,9vw,132px);filter:drop-shadow(0 7px 2px #17345d35)}.mugunghwa{background-image:url("assets/mugunghwa.png")}.kimchi{background-image:url("assets/kimchi.png")}.hanbok{background-image:url("assets/hanbok.png")}.hangul{background-image:url("assets/hangul.png")}.primary{position:relative;z-index:2;background:var(--coral);color:white;border-radius:999px;padding:.55em 1.5em;font-size:clamp(24px,3vw,42px);box-shadow:0 7px 0 #9f3f39;transition:.15s}.primary:hover{transform:translateY(-2px)}.primary:active{transform:translateY(5px);box-shadow:0 2px 0 #9f3f39}.gear{position:absolute;z-index:3;right:3vw;top:3vh;width:64px;height:64px;border-radius:50%;background:#fffdf4;font-size:34px;box-shadow:0 5px 0 #17345d55}
.start-difficulty{z-index:2;display:flex;align-items:center;gap:8px;background:#fffdf4ed;border:3px solid var(--navy);border-radius:22px;padding:8px 10px;box-shadow:0 6px 0 #17345d2e}.start-difficulty>span{padding:0 8px;color:var(--coral);font-size:20px}.start-difficulty button{min-width:100px;border:3px solid transparent;border-radius:14px;padding:7px 12px;background:#eee6d8;font-size:20px;line-height:1.05}.start-difficulty button small{display:block;margin-top:4px;font-size:13px;font-weight:500}.start-difficulty button.selected{border-color:var(--coral);background:#fff1e9;color:#a33b35;transform:translateY(-2px)}
.paper-card{position:relative;z-index:1;text-align:center;background:#fffdf4f5;border:5px solid var(--navy);border-radius:34px;padding:4vh 6vw;box-shadow:14px 14px 0 #17345d2d}.eyebrow{margin:0;color:var(--coral);font-size:clamp(20px,2vw,30px)}h2{font-size:clamp(34px,4.5vw,66px);line-height:1.1;margin:.25em 0}.paper-card h2 strong{color:var(--jade)}.rule-demo{display:flex;align-items:center;justify-content:center;height:20vh;gap:2vw}.rule-demo .symbol{width:150px;height:150px}.fall-arrow{font-size:70px;color:var(--coral);animation:bob 1s infinite}.footprints{font-size:70px}.safety{font-size:clamp(17px,2vw,25px);background:#fff1c4;padding:.5em 1em;border-radius:15px}.countdown-screen p{font-size:clamp(28px,4vw,54px);margin:0}.countdown-screen strong{font-size:clamp(130px,22vw,300px);color:var(--coral);text-shadow:8px 8px 0 white;line-height:1}.countdown-screen span{font-size:clamp(22px,3vw,40px);background:white;padding:.35em 1em;border-radius:99px}
.play-screen{justify-content:flex-start}.top-bar{z-index:3;width:100%;display:grid;grid-template-columns:1fr 2fr 1fr;gap:2vw;align-items:center;padding:2vh 3vw;background:#fffdf4ee;border-bottom:4px solid var(--navy)}.timer,.instruction{border-radius:18px;padding:.6em 1em;text-align:center}.timer{background:var(--navy);color:white}.timer span{display:block}.timer strong{font-size:clamp(22px,3vw,38px);color:#ffe06c}.instruction{font-size:clamp(18px,2.2vw,32px);background:#d9f2e9}.top-bar button{justify-self:end;background:#eee5d4;border-radius:99px;padding:.7em 1.2em}.progress{z-index:3;width:100%;height:12px;background:#d9d0bf}.progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--jade),var(--gold),var(--coral));transition:width .2s linear}.legend{z-index:3;position:absolute;left:2vw;top:18vh;display:flex;flex-direction:column;gap:8px}.legend-item{display:flex;align-items:center;gap:8px;background:#fffdf4dc;border:3px solid transparent;border-radius:16px;padding:4px 12px 4px 4px;font-size:18px;transition:.2s}.legend-item .symbol{width:54px;height:54px}.legend-item.active{border-color:var(--coral);transform:scale(1.08);background:white}.play-lane{position:relative;width:min(60vw,720px);height:calc(100vh - 110px);z-index:2}.guide-line{position:absolute;left:50%;top:4%;bottom:14%;border-left:5px dashed #fff9;transform:translateX(-50%)}.falling-symbol{position:absolute;left:50%;top:2%;width:min(32vh,300px);height:min(32vh,300px);transform:translate(-50%,0);filter:drop-shadow(0 12px 5px #17345d55);animation:fall var(--fall-duration) cubic-bezier(.32,.04,.62,1) forwards}.falling-symbol.landed{animation:none;top:54%;transform:translate(-50%,0) scale(.96)}.landing-glow{position:absolute;left:50%;bottom:18%;width:340px;transform:translateX(-50%);display:flex;justify-content:space-around;font-size:52px;color:var(--gold);opacity:0}.landing-glow.visible{animation:spark .8s infinite alternate}.name-card{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);background:white;border:4px solid var(--navy);padding:.35em 1.4em;border-radius:99px;font-size:clamp(24px,3vw,42px);white-space:nowrap}
.finish-screen{gap:1vh;text-align:center}.finish-shout{z-index:3;margin:0;color:var(--coral);font-size:clamp(56px,9vw,120px);text-shadow:5px 5px 0 white;animation:pop .8s infinite alternate}.finish-screen h2,.finish-screen>p{z-index:3}.finish-symbols .symbol{width:clamp(80px,12vw,160px);height:clamp(80px,12vw,160px);filter:drop-shadow(0 8px 3px #17345d44)}.finish-screen>p:not(.finish-shout){font-size:clamp(24px,3vw,38px);margin:0;background:white;border-radius:99px;padding:.25em 1em}.finish-actions{display:flex;gap:20px;z-index:4}.finish-actions>button:not(.primary){background:white;border:3px solid var(--navy);border-radius:99px;padding:.6em 1.4em;font-size:clamp(20px,2.3vw,32px)}.confetti{position:absolute;inset:0;opacity:.38;background-image:radial-gradient(circle,#e95f55 0 4px,transparent 5px),radial-gradient(circle,#2e8b78 0 4px,transparent 5px),radial-gradient(circle,#f3bd3f 0 4px,transparent 5px);background-size:280px 260px,340px 300px,310px 360px;animation:confetti 8s linear infinite}.hansam-ribbons{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none}.ribbon{position:absolute;display:block;width:48vw;height:150px;border-radius:50%;filter:drop-shadow(0 5px 2px #17345d2d);opacity:.88}.ribbon:after{content:"";position:absolute;width:90%;height:110px;border-radius:50%}.ribbon-left-red{left:-14vw;top:18%;border-top:24px solid #e85d55;transform:rotate(18deg);animation:hansam-left 3.6s ease-in-out infinite alternate}.ribbon-left-blue{left:-18vw;bottom:16%;border-bottom:20px solid #315e9b;transform:rotate(-12deg);animation:hansam-left 4.2s ease-in-out -.8s infinite alternate}.ribbon-right-yellow{right:-16vw;top:22%;border-top:22px solid #f3bd3f;transform:rotate(-16deg) scaleX(-1);animation:hansam-right 3.9s ease-in-out -.4s infinite alternate}.ribbon-right-white{right:-18vw;bottom:18%;border-bottom:22px solid #fffdf1;transform:rotate(14deg) scaleX(-1);animation:hansam-right 4.5s ease-in-out -1.1s infinite alternate}
.settings-backdrop{position:fixed;z-index:20;inset:0;background:#17345dcc;display:grid;place-items:center;padding:20px}.settings-panel{position:relative;width:min(760px,95vw);background:var(--paper);border-radius:34px;border:6px solid var(--gold);padding:4vh 4vw;text-align:center;box-shadow:0 0 0 6px white}.close{position:absolute;right:18px;top:12px;background:transparent;font-size:42px}.fixed-time{font-size:22px;background:#e1f4ef;border-radius:16px;padding:.55em}.difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}.difficulty button{display:flex;flex-direction:column;align-items:center;gap:4px;background:#f1eadc;border:4px solid transparent;border-radius:20px;padding:18px 10px;font-size:23px}.difficulty button span{font-size:38px}.difficulty button small{font-family:"Gowun Dodum"}.difficulty button.selected{border-color:var(--coral);background:#fff1e9;transform:translateY(-4px)}
@keyframes fall{0%{top:2%;transform:translate(-50%,0) scale(.85) rotate(-4deg)}70%{transform:translate(-50%,0) scale(1.04) rotate(3deg)}100%{top:54%;transform:translate(-50%,0) scale(.96) rotate(0)}}@keyframes spark{to{opacity:1;transform:translateX(-50%) scale(1.15)}}@keyframes bob{50%{transform:translateY(14px)}}@keyframes pop{to{transform:scale(1.08)}}@keyframes confetti{to{background-position:0 420px,0 350px,0 500px}}@keyframes hansam-left{0%{translate:-3vw -10px;scale:.96 1;rotate:-3deg}55%{translate:4vw 24px;scale:1.08 .9;rotate:4deg}100%{translate:8vw -18px;scale:1 1.08;rotate:-2deg}}@keyframes hansam-right{0%{translate:3vw 10px;scale:.98 1;rotate:3deg}50%{translate:-4vw -22px;scale:1.08 .92;rotate:-4deg}100%{translate:-8vw 20px;scale:1 1.08;rotate:2deg}}
@media(max-width:700px){.top-bar{grid-template-columns:1fr 1.5fr}.top-bar button{display:none}.legend{top:auto;left:50%;bottom:1%;transform:translateX(-50%);flex-direction:row}.legend-item{padding:3px}.legend-item strong{display:none}.legend-item .symbol{width:42px;height:42px}.play-lane{width:94vw}.falling-symbol{width:min(30vh,250px);height:min(30vh,250px)}.name-card{bottom:6%}.difficulty{grid-template-columns:1fr}.difficulty button{flex-direction:row;justify-content:center}.difficulty button span{font-size:26px}.start-difficulty{gap:4px}.start-difficulty>span{display:none}.start-difficulty button{min-width:76px;font-size:16px;padding:6px}.symbol-preview .symbol{width:68px;height:68px}}

.site-home{position:absolute;z-index:4;left:3vw;top:3vh;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fffdf4;color:var(--navy);font-family:"Hakgyoansim Sangjang","Malgun Gothic",sans-serif;font-size:42px;line-height:1;text-decoration:none;box-shadow:0 5px 0 #17345d55;transition:.15s}.site-home:hover{transform:translateY(-2px)}.site-home:active{transform:translateY(4px);box-shadow:0 1px 0 #17345d55}
.duration-setting{margin:2vh auto 3vh;padding:24px;width:min(560px,90%);background:#e1f4ef;border:4px solid var(--navy);border-radius:24px}.duration-setting output{display:block;margin-bottom:18px;color:var(--coral);font-family:"Hakgyoansim Sangjang","Malgun Gothic",sans-serif;font-size:clamp(40px,6vw,72px)}.duration-setting input{width:100%;accent-color:var(--coral);cursor:pointer}.duration-range{display:flex;justify-content:space-between;margin-top:8px;font-size:18px}.duration-setting p{margin:18px 0 0;font-size:20px}
.settings-volume{margin:-1vh auto 3vh;padding:18px 24px;width:min(560px,90%);border:4px solid var(--navy);border-radius:24px;background:#fff1e9}.settings-volume label{display:flex;justify-content:space-between;align-items:center;font-size:20px}.settings-volume label strong{color:var(--coral);font-family:"Hakgyoansim Sangjang","Malgun Gothic",sans-serif;font-size:26px}.settings-volume input{display:block;width:100%;margin:12px 0 5px;accent-color:var(--coral);cursor:pointer}.volume-labels{display:flex;justify-content:space-between;font-size:14px;color:#65748a}
@media(max-width:700px){.site-home{width:52px;height:52px;font-size:34px}.duration-setting{padding:18px}.duration-setting p{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* 가을 테마 */
:root{--navy:#70402d;--coral:#e7653b;--jade:#7f8d35;--gold:#f2b23d;--cream:#fff5df;--paper:#fffaf0}
html,body{background:#e8f3d9}
.screen{background:linear-gradient(#fff4,#fff2),url("assets/autumn-bg.png") center/cover no-repeat}
.screen:after{background:radial-gradient(circle at center,transparent 38%,#70402d16)}
.cosmos{background-image:url("assets/cosmos.png")}
.ginkgo{background-image:url("assets/ginkgo.png")}
.chestnut{background-image:url("assets/chestnut.png")}
.maple{background-image:url("assets/maple.png")}
.start-difficulty button.selected{background:#fff0d8;color:#9c4228}
.instruction,.duration-setting{background:#eff0ca}
.settings-volume{background:#fff0d8}
.falling-leaves{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none}
.falling-leaves i{position:absolute;top:-15%;font-style:normal;font-size:clamp(34px,5vw,70px);filter:drop-shadow(0 5px 3px #70402d33);animation:leaf-fall 5.8s linear infinite}
.falling-leaves i:nth-child(1){left:7%;animation-delay:-1.2s}.falling-leaves i:nth-child(2){left:22%;animation-delay:-4.1s;animation-duration:7s}.falling-leaves i:nth-child(3){left:39%;animation-delay:-2.8s;animation-duration:6.4s}.falling-leaves i:nth-child(4){left:61%;animation-delay:-5.2s;animation-duration:7.4s}.falling-leaves i:nth-child(5){left:78%;animation-delay:-.7s;animation-duration:6.8s}.falling-leaves i:nth-child(6){left:92%;animation-delay:-3.5s;animation-duration:7.2s}
@keyframes leaf-fall{0%{translate:0 -10vh;rotate:0deg}45%{translate:4vw 48vh;rotate:180deg}100%{translate:-3vw 118vh;rotate:390deg}}