:root{font-family:system-ui,-apple-system,'Noto Sans KR',sans-serif;color:#183254;background:#eaf2fc}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}#app{max-width:920px;min-height:100dvh;margin:auto;background:linear-gradient(180deg,#e9f3ff,#f9fbff);padding-bottom:94px}.top{background:linear-gradient(145deg,#102c68,#235bb8);padding:23px 19px 17px;color:white;border-radius:0 0 28px 28px;box-shadow:0 8px 30px #274b9136}.top .small{font-size:12px;color:#d8e7ff}.toprow{display:flex;align-items:center;justify-content:space-between;gap:12px}.top h1{font-size:23px;letter-spacing:-1px;margin:3px 0}.logo{font-size:24px;margin-right:6px}.stars{border-radius:20px;background:#ffffff25;padding:8px 12px;font-weight:800;color:#fff2b5}.container{padding:16px;display:grid;gap:14px}.card{background:white;border:1px solid #dce9fa;border-radius:20px;padding:17px;box-shadow:0 6px 20px #1c50950d}.card h2{margin:0 0 12px;font-size:18px}.muted{font-size:12px;color:#69809e}.hstack{display:flex;align-items:center;gap:9px}.split{display:flex;justify-content:space-between;align-items:center;gap:10px}.pill{border-radius:20px;background:#e8f1ff;color:#2458a4;padding:6px 10px;font-size:12px;font-weight:750}.primary{border:0;background:#245dbe;color:#fff;border-radius:12px;padding:12px 15px;font-weight:800}.secondary{background:#eaf2ff;border:1px solid #cbdcf5;color:#244f92;border-radius:12px;padding:11px 13px;font-weight:800}.danger{background:#ffedf0;color:#c13953;border:0;border-radius:12px;padding:11px 13px}.wide{width:100%}.tiny{font-size:12px}.progress{height:10px;background:#e7eef8;border-radius:20px;overflow:hidden;margin:10px 0}.bar{height:100%;border-radius:20px;background:linear-gradient(90deg,#52c9d9,#457be8)}.avatars{display:flex;gap:8px;margin:12px 0}.avatar{min-width:0;flex:1;overflow:hidden;border-radius:16px;border:2px solid #e5f0ff;background:white}.avatar img{width:100%;aspect-ratio:1.08;object-fit:cover;display:block}.avatar span{display:block;font-size:12px;text-align:center;padding:5px;font-weight:800}.intro{background:linear-gradient(135deg,#dcecff,#f0fcfa);padding:13px;border-radius:16px;line-height:1.65;font-size:13px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{background:#f0f6ff;border-radius:13px;padding:11px 7px;text-align:center}.stat strong{display:block;font-size:18px;color:#1f559f}.stat span{font-size:10px;color:#68809f}.nav{position:fixed;z-index:9;bottom:0;left:50%;transform:translateX(-50%);max-width:920px;width:100%;background:white;border-top:1px solid #e1e8f5;display:grid;grid-template-columns:repeat(5,1fr);padding:9px 4px calc(9px + env(safe-area-inset-bottom));box-shadow:0 -5px 18px #1a3c6c15}.nav button{border:0;background:none;color:#7b91af;font-size:11px;padding:5px 0}.nav button b{display:block;font-size:23px}.nav button.active{color:#1c5bb7;font-weight:800}.field{display:grid;gap:5px;margin:10px 0}.field label{font-size:12px;font-weight:800;color:#587292}input,select,textarea{width:100%;border:1px solid #d0def0;background:#fcfdff;border-radius:11px;padding:12px;color:#233d62}textarea{resize:vertical;min-height:72px}.cols{display:grid;grid-template-columns:1fr 1fr;gap:9px}.task{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #edf2fa}.task:last-child{border:0}.task input[type=checkbox]{width:20px;height:20px;accent-color:#2875d6}.task .grow{flex:1}.task.done .grow{text-decoration:line-through;color:#a2aec2}.timer{text-align:center;background:linear-gradient(160deg,#e2f2ff,#f9faff);border-radius:21px;padding:23px 8px}.clock{font-variant-numeric:tabular-nums;font-size:clamp(42px,11vw,72px);font-weight:850;letter-spacing:-2px;color:#173f91;margin:12px 0}.timerbuttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.town{position:relative;height:330px;overflow:hidden;background:linear-gradient(180deg,#c3e9ff 0%,#e3f5ff 35%,#b7e3b4 36%,#88c988 100%);border-radius:18px;border:3px solid #f6fbff}.town:before{content:'☁️             ☁️';position:absolute;top:18px;left:10px;font-size:29px;letter-spacing:28px;opacity:.7}.town:after{content:'';position:absolute;inset:59% 0 12% 0;transform:skewY(-13deg);border-top:17px solid #dfd2b6;border-bottom:15px solid #dfd2b6;pointer-events:none;opacity:.6}.building{position:absolute;z-index:2;border:2px solid #ffffffb9;background:linear-gradient(145deg,#ffffffed,#dbeaff);box-shadow:0 10px 15px #34613c55;border-radius:13px;padding:8px 5px;text-align:center;width:94px;min-height:72px;font-size:11px;font-weight:800;color:#254573}.building .emoji{display:block;font-size:30px}.building small{display:block;font-size:10px;color:#5b7291}.b1{top:90px;left:3%}.b2{top:185px;left:33%}.b3{top:73px;right:3%}.b4{top:221px;right:3%}.b5{top:170px;left:2%}.b6{top:160px;right:35%}.locked{filter:grayscale(.9);opacity:.65}.building .new{display:inline-block;background:#fff2ad;border-radius:9px;padding:2px 4px}.chapter{display:flex;justify-content:space-between;border-bottom:1px solid #edf3fb;padding:12px 0;gap:10px}.chapter:last-child{border:0}.result{padding:13px;background:#e9f8ee;border-radius:12px;font-weight:700;color:#287047}.quizOption{display:block;text-align:left;width:100%;border:1px solid #d4e3f6;background:#f6faff;padding:12px;margin:7px 0;border-radius:12px;color:#193a69}.quizOption.selected{background:#d8e9ff;border:2px solid #3475d0}.quizOption.correct{background:#d6f4e2;border:2px solid #36ad70}.quizOption.wrong{background:#ffe3e8;border:2px solid #e07189}.heading{font-weight:800;font-size:20px;margin:5px 0}.toast{position:fixed;bottom:86px;left:50%;transform:translateX(-50%);max-width:90%;background:#183f78;color:white;border-radius:12px;padding:12px 18px;z-index:11;font-size:13px;box-shadow:0 8px 25px #182d4d44}.warn{padding:11px;border-radius:12px;background:#fff6e8;color:#85612e;font-size:12px;line-height:1.5}.hr{height:1px;background:#e5eefa;margin:12px 0}.barline{display:flex;align-items:center;gap:10px;margin:10px 0}.barline .progress{flex:1}.barline span{width:45px;font-size:12px}.empty{padding:25px 12px;text-align:center;color:#7288a5}.badge{background:#e6f3e7;color:#2c854c;border-radius:20px;padding:4px 8px;font-size:11px}.mapbuttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}@media(min-width:700px){.container{grid-template-columns:1fr 1fr;align-items:start}.full{grid-column:1/-1}.town{height:450px}.b1{left:13%}.b2{left:42%}.b3{right:12%}.b4{right:16%}.b5{left:16%}.b6{right:40%}}