.header-bar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;white-space:nowrap;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #0000001a;height:56px;padding:0 12px;overflow:hidden;gap:12px;position:relative;z-index:100}.header-title{font-size:20px;font-weight:700;white-space:nowrap;flex-shrink:0}.header-nav{display:flex;flex-direction:row;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;flex:1;justify-content:center}.nav-btn{padding:6px 12px;font-size:14px;font-weight:500;border:none;background:transparent;color:#ffffffd9;cursor:pointer;white-space:nowrap;flex-shrink:0;border-radius:6px;transition:all .2s}.nav-btn:hover{background:#ffffff1a;color:#fff}.nav-btn.active{background:#fff3;color:#fff;font-weight:600}.header-lang{display:flex;flex-direction:row;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0}.lang-btn{padding:4px 8px;font-size:14px;border:0;background:transparent;color:#ffffffd9;border-radius:10px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s;position:relative}.lang-btn:hover{background:#ffffff1a;color:#fff}.lang-btn.active{background:#ffffff40;color:#fff;font-weight:600}.lang-sep{opacity:.5;white-space:nowrap;flex-shrink:0}@media (max-width: 480px){.header-bar{padding:0 8px;gap:8px;height:56px}.header-title{font-size:18px}.nav-btn{font-size:12px;padding:5px 8px}.lang-btn{font-size:12px;padding:3px 6px}.lang-sep{font-size:12px}}.app-footer{position:fixed;bottom:0;left:0;right:0;width:100%;background:#fff;border-top:1px solid #e0e0e0;padding:.8vh 1.2vw;box-sizing:border-box;z-index:50;height:7vh;display:flex;align-items:center;justify-content:center}.footer-coupang{display:flex;flex-direction:column;align-items:center;gap:.4vh;max-width:400px;margin:0 auto;width:100%;height:100%;justify-content:center;position:relative;top:-38px}.footer-coupang-btn{width:100%;background:#fff;border:2px solid #2f5ea6;color:#0b55ff;border-radius:1vh;padding:.8vh 1vw;font-size:clamp(12px,1.6vh,16px);font-weight:600;cursor:pointer;transition:all .2s;text-align:center;text-decoration:none;display:block;flex-shrink:0;height:3.5vh;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.footer-coupang-btn:hover{background:#f5f5ff}.footer-coupang-btn:active{background:#e5e5ff}.footer-coupang-text{width:100%;font-size:clamp(9px,1.1vh,11px);color:#666;text-align:center;line-height:1.3;word-wrap:break-word;flex-shrink:0;height:2.5vh;display:flex;align-items:center;justify-content:center}@media (max-width: 768px){.app-footer{padding:10px 14px}.footer-coupang-btn{font-size:14px;padding:12px 10px}.footer-coupang-text{font-size:10px}}.home{padding:22px 18px 100px;box-sizing:border-box;display:flex;flex-direction:column;gap:18px;min-height:calc(100vh - 56px);justify-content:flex-start}.home__intro{text-align:center;margin-top:10px}.home__line{font-size:18px;font-weight:800;line-height:1.6;color:#333}.home__primary{margin:36px auto 0;width:78%;max-width:320px;background:#3f6fb6;border:2px solid #2f5ea6;color:#fff;border-radius:12px;padding:16px 10px;font-size:28px;font-weight:900;cursor:pointer;transition:all .2s}.home__primary:hover{background:#2f5ea6;transform:translateY(-2px);box-shadow:0 4px 12px #3f6fb64d}.home__secondary{margin:0 auto;width:78%;max-width:320px;background:#fff;border:2px solid #2f5ea6;color:#0b55ff;border-radius:12px;padding:14px 10px;font-size:22px;font-weight:900;cursor:pointer;transition:all .2s}.home__secondary:hover{background:#f5f5ff;transform:translateY(-2px)}.srOnly{position:absolute;left:-9999px;top:-9999px}@media (max-width: 768px){.home{padding:20px 16px 100px}.home__line{font-size:16px}.home__primary{font-size:24px;padding:14px 10px}.home__secondary{font-size:20px;padding:12px 10px}}.mapModal{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;z-index:10000;display:flex;align-items:center;justify-content:center;animation:mapModalFadeIn .2s ease-out}.mapModal__content{width:90vw;max-width:600px;height:70vh;max-height:600px;background:#fff;border-radius:1.5vh;box-shadow:0 8px 24px #0000004d;display:flex;flex-direction:column;overflow:hidden}.mapModal__header{display:flex;justify-content:space-between;align-items:center;padding:1.2vh 1.5vw;border-bottom:2px solid #e0e0e0;flex-shrink:0}.mapModal__title{display:flex;flex-direction:column;gap:.2vh}.mapModal__cityName{font-size:clamp(18px,2.2vh,22px);font-weight:900;color:#333;line-height:1.2}.mapModal__countryName{font-size:clamp(14px,1.6vh,16px);font-weight:700;color:#667eea;line-height:1.2}.mapModal__closeButton{background:transparent;border:none;font-size:clamp(24px,3vh,28px);color:#666;cursor:pointer;padding:.5vh 1vw;line-height:1;transition:color .2s ease}.mapModal__closeButton:hover{color:#333}.mapModal__closeButton:active{color:#000}.mapModal__map{flex:1;width:100%;min-height:0}.mapModal__map :global(.leaflet-container){width:100%;height:100%;border-radius:0 0 1.5vh 1.5vh}@keyframes mapModalFadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.mapModal__content{width:95vw;height:75vh}.mapModal__header{padding:1vh 1.2vw}.mapModal__cityName{font-size:clamp(16px,2vh,20px)}.mapModal__countryName{font-size:clamp(13px,1.5vh,15px)}.mapModal__closeButton{font-size:clamp(22px,2.8vh,26px)}}.quiz{padding:.5vh 1.2vw 8vh 1.2vw;box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow:hidden;gap:.4vh}.xpBar{display:flex;flex-direction:column;gap:.4vh;padding:.6vh 1vw;margin-top:.5vh;margin-bottom:.5vh;flex-shrink:0}.xpBar__info{display:flex;justify-content:space-between;align-items:center;font-size:clamp(14px,1.8vh,16px);font-weight:700}.xpBar__level{color:#667eea}.xpBar__xp{color:#333}.xpBar__progress{width:100%;height:1.2vh;background:#e0e0e0;border-radius:.6vh;overflow:hidden;position:relative}.xpBar__progressFill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:.6vh;transition:width .3s ease}.levelUpToast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;animation:levelUpToastFadeIn .3s ease-out}.levelUpToast__content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5vh 3vw;border-radius:1.5vh;box-shadow:0 4px 12px #0000004d;display:flex;align-items:center;gap:1vw;font-size:clamp(18px,2.4vh,22px);font-weight:900}.levelUpToast__icon{font-size:clamp(22px,2.8vh,26px)}.levelUpToast__text{white-space:nowrap}@keyframes levelUpToastFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.diffBar{border:2px solid #2f5ea6;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:.8vh 1.2vw;gap:2vw;flex-shrink:0;height:7.7vh;margin-top:1vh;margin-bottom:1vh;box-sizing:border-box}.diffBar__label{font-size:clamp(19.6px,3.08vh,28px);font-weight:900;white-space:nowrap;flex-shrink:0;line-height:1;display:flex;align-items:center}.diffBar__circles{display:flex;align-items:center;justify-content:center;gap:1.5vw;flex-shrink:0}.diffBar__circleBtn{position:relative;background:transparent;border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.diffBar__circle{width:clamp(44.8px,5.6vh,61.6px);height:clamp(44.8px,5.6vh,61.6px);border-radius:50%;border:3px solid;display:block;box-sizing:border-box;flex-shrink:0}.diffBar__circle--low{border-color:#4caf50}.diffBar__circle--mid{border-color:#2196f3}.diffBar__circle--high{border-color:#f44336}.diffBar__circle.filled{background-color:inherit}.diffBar__circle--low.filled{background-color:#4caf50}.diffBar__circle--mid.filled{background-color:#2196f3}.diffBar__circle--high.filled{background-color:#f44336}.quiz__prompt{margin:.2vh 0 1vh;text-align:center;font-size:clamp(14px,2vh,18px);font-weight:700;flex-shrink:0;line-height:1.3}.quiz__choices{display:flex;flex-direction:column;gap:.8vh;margin:.2vh 0;flex:1;min-height:0;justify-content:center}.choice{position:relative;width:100%;border:2px solid #2f5ea6;border-radius:1.2vh;background:#fff;padding:.8vh 1.2vw;padding-right:3.5vw;font-size:clamp(28px,3.92vh,39.2px);font-weight:900;height:10vh;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.choice.isCorrect{background:#a9d18e}.choice.isWrong{background:#8faadc}.choice__text{display:inline-block;text-align:center;flex:1}.choice__markO,.choice__markX{position:absolute;right:1.2vw;top:50%;transform:translateY(-50%);color:#d80000;font-size:clamp(28px,3.92vh,39.2px);font-weight:900;flex-shrink:0;width:auto;min-width:1.2em}.quiz__actions{display:flex;justify-content:center;align-items:center;height:6.5vh;flex-shrink:0;box-sizing:border-box}.quiz__actions.placeholder{visibility:hidden}.quiz__actions.visible{visibility:visible}.quiz__actions-placeholder{height:6.5vh;width:100%}.act{border:2px solid #2f5ea6;border-radius:1vh;padding:1vh 2vw;font-size:clamp(16px,2vh,20px);font-weight:900;line-height:1.2;white-space:nowrap}.actNext{background:#ffe699;width:65%;max-width:300px;height:6.5vh;box-sizing:border-box}.quiz__explanation-wrapper{flex-shrink:0;height:14vh;box-sizing:border-box;display:flex;align-items:center}.quiz__explanation-wrapper.placeholder{visibility:hidden}.quiz__explanation-wrapper.visible{visibility:visible}.quiz__explanation-placeholder{height:14vh;width:100%}.quiz__explanation{width:100%;padding:1vh 1vw .4vh 1vw;background:#f5f5f5;border:2px solid #2f5ea6;border-radius:1vh;height:14vh;box-sizing:border-box;display:flex;flex-direction:column;overflow-y:auto}.quiz__explanation-title{font-size:clamp(14px,1.8vh,16px);font-weight:900;color:#333;margin-bottom:.6vh;flex-shrink:0}.quiz__explanation-text{font-size:clamp(12px,1.5vh,14px);line-height:1.4;font-weight:700;color:#333;white-space:pre-wrap;overflow-y:auto;flex:1;padding-bottom:0;margin-bottom:0}.quiz__cityCard{flex-shrink:0;margin:.8vh 0;display:flex;align-items:center;justify-content:center}.cityCard{width:100%;background:#fff;border:2px solid #667eea;border-radius:1.2vh;padding:1.2vh 1.5vw;box-sizing:border-box;display:flex;flex-direction:column;gap:.8vh}.cityCard__header{display:flex;flex-direction:column;gap:.3vh}.cityCard__name{font-size:clamp(20px,2.5vh,24px);font-weight:900;color:#333;line-height:1.2}.cityCard__country{font-size:clamp(14px,1.8vh,16px);font-weight:700;color:#667eea;line-height:1.2}.cityCard__blurb{font-size:clamp(13px,1.6vh,15px);font-weight:500;color:#555;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin:.4vh 0}.cityCard__mapButton{width:100%;padding:.8vh 1.5vw;background:#667eea;color:#fff;border:none;border-radius:.8vh;font-size:clamp(15px,1.9vh,17px);font-weight:700;cursor:pointer;margin-top:.4vh;transition:background .2s ease}.cityCard__mapButton:hover{background:#5568d3}.cityCard__mapButton:active{background:#4457c2}.cityCard__actions{display:flex;flex-direction:column;gap:.4vh;margin-top:.4vh}.cityCard__adNote{font-size:clamp(11px,1.3vh,13px);color:#888;text-align:center;margin-top:.4vh;font-weight:400}.quiz__hintArea{display:flex;flex-direction:column;gap:.6vh;margin:.6vh 0;flex-shrink:0}.quiz__hintButton{width:100%;padding:.7vh 1.2vw;background:#f59e0b;color:#fff;border:none;border-radius:.8vh;font-size:clamp(14px,1.8vh,16px);font-weight:700;cursor:pointer;transition:background .2s ease}.quiz__hintButton:hover{background:#d97706}.quiz__hintButton:active{background:#b45309}.quiz__hintText{padding:.8vh 1.2vw;background:#fef3c7;border:2px solid #f59e0b;border-radius:.8vh;font-size:clamp(14px,1.7vh,16px);font-weight:600;color:#92400e;text-align:center;animation:hintFadeIn .3s ease-out}@keyframes hintFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.quiz{gap:.3vh;padding:.4vh 1vw 8vh 1vw}.diffBar{height:6.3vh;padding:.6vh .8vw;margin-top:.8vh;margin-bottom:.8vh;gap:1.2vw}.diffBar__label{font-size:clamp(16.8px,2.52vh,22.4px)}.diffBar__circle{width:clamp(39.2px,4.9vh,50.4px);height:clamp(39.2px,4.9vh,50.4px)}.quiz__prompt{font-size:clamp(13px,1.8vh,16px);margin:.15vh 0 .8vh}.quiz__choices{gap:.6vh;margin:.15vh 0}.choice{height:9.5vh;font-size:clamp(25.2px,3.5vh,33.6px);padding:.6vh 1vw;padding-right:3vw}.choice__markO,.choice__markX{font-size:clamp(25.2px,3.5vh,33.6px)}.quiz__actions,.quiz__actions-placeholder{height:5.5vh}.actNext{height:5.5vh;font-size:clamp(14px,1.8vh,18px)}.quiz__explanation-wrapper,.quiz__explanation-placeholder{height:12vh}.quiz__explanation{height:12vh;padding:.8vh .8vw .3vh .8vw}.quiz__explanation-title{font-size:clamp(13px,1.6vh,15px);margin-bottom:.4vh}.quiz__explanation-text{font-size:clamp(11px,1.4vh,13px)}.cityCard{padding:1vh 1.2vw;gap:.6vh}.cityCard__name{font-size:clamp(18px,2.2vh,22px)}.cityCard__country{font-size:clamp(13px,1.6vh,15px)}.cityCard__blurb{font-size:clamp(12px,1.5vh,14px);margin:.3vh 0}.cityCard__mapButton{padding:.7vh 1.2vw;font-size:clamp(14px,1.7vh,16px)}.cityCard__adNote{font-size:clamp(10px,1.2vh,12px)}.quiz__hintArea{margin:.5vh 0;gap:.5vh}.quiz__hintButton{padding:.6vh 1vw;font-size:clamp(13px,1.6vh,15px)}.quiz__hintText{padding:.7vh 1vw;font-size:clamp(13px,1.6vh,15px)}}.stats-page{flex:1;display:flex;flex-direction:column;padding:22px 18px 100px;box-sizing:border-box;min-height:calc(100vh - 56px)}.stats-content{max-width:800px;margin:0 auto;width:100%;display:flex;flex-direction:column}.stats-title{font-size:24px;font-weight:700;color:#333;text-align:center;margin:0 0 20px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}.stat-card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 8px #0000001a;text-align:center}.stat-card.highlight{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.stat-label{font-size:12px;color:#666;margin-bottom:6px;font-weight:500}.stat-card.highlight .stat-label{color:#ffffffe6}.stat-value{font-size:24px;font-weight:700;color:#333}.stat-card.highlight .stat-value{color:#fff}.difficulty-stats{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 8px #0000001a;flex:1}.section-title{font-size:18px;font-weight:600;color:#333;margin:0 0 16px}.difficulty-stat-item{padding:12px 0;border-bottom:1px solid #f0f0f0}.difficulty-stat-item:last-child{border-bottom:none}.difficulty-stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.difficulty-name{font-size:15px;font-weight:600;color:#333}.difficulty-count{font-size:13px;color:#666}.difficulty-accuracy{font-size:13px;color:#667eea;font-weight:500}@media (max-width: 768px){.stats-page{padding:20px 16px 100px}.stats-title{font-size:22px;margin-bottom:16px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}.stat-card{padding:14px}.stat-value{font-size:20px}.stat-label{font-size:11px}.difficulty-stats{padding:14px}.section-title{font-size:16px;margin-bottom:12px}.difficulty-stat-item{padding:10px 0}.difficulty-name{font-size:14px}.difficulty-count,.difficulty-accuracy{font-size:12px}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5;color:#333;background:#f5f5f5}#root,.app{min-height:100vh;display:flex;flex-direction:column}.main-nav{background:#fff;border-bottom:1px solid #e0e0e0;padding:0 20px;display:flex;justify-content:flex-end;gap:8px;overflow-x:hidden;-webkit-overflow-scrolling:touch;margin-top:8px}.main-nav::-webkit-scrollbar{display:none}.main-nav{-ms-overflow-style:none;scrollbar-width:none}.nav-button{padding:12px 16px;font-size:14px;font-weight:500;border:none;background:transparent;color:#666;cursor:pointer;transition:all .2s;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}.nav-button:hover{color:#667eea;background:#f5f5ff}.nav-button.active{color:#667eea;border-bottom-color:#667eea;font-weight:600}.app-main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;height:calc(100vh - 56px);position:relative}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width: 768px){body{font-size:15px}.main-nav{padding:0 12px}.nav-button{padding:10px 12px;font-size:13px}}