body{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none}.home-screen{width:100vw;height:100vh;overflow:hidden;background-image:url(/assets/BackGrundPage.svg);background-size:cover;background-repeat:no-repeat;background-position:center bottom;display:flex;justify-content:center;align-items:center}.content-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;width:90%;max-width:400px;padding:20px;box-sizing:border-box}.main-title-svg{width:100%;max-width:300px;height:auto;margin-bottom:40px;display:block;margin-left:auto;margin-right:auto}.main-button{border-radius:15px;padding:15px 30px;font-size:24px;font-weight:700;cursor:pointer;transition:background-color .3s ease,transform .1s ease;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;width:100%;max-width:280px;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.main-button:hover{filter:brightness(1.1);transform:translateY(-2px)}.main-button:active{transform:translateY(0)}.start-button{background-color:#f7e657;color:#fff}.setting-btn{background-color:#72b1ed;color:#fff}.contact-button{background-color:#92e071;color:#fff}.start-button-group{margin-bottom:20px;width:100%;display:flex;justify-content:center}.sub-button-group{display:flex;flex-direction:row;gap:15px;width:100%;justify-content:center}@media (max-width: 768px){.content-wrapper{width:95%;padding:15px}.main-title-svg{max-width:250px;margin-bottom:30px}.main-button{max-width:240px;padding:12px 20px;font-size:20px}.start-button-group{margin-bottom:15px}.sub-button-group{gap:10px}}@media (max-width: 480px){.main-title-svg{max-width:200px;margin-bottom:25px}.main-button{max-width:200px;padding:10px 15px;font-size:18px}.start-button-group{margin-bottom:10px}.sub-button-group{gap:8px}}.start-button-group a,.sub-button-group a{text-decoration:none;color:inherit}.NotFoundPage-screen{width:100vw;height:100vh;overflow:hidden;background-image:url(/svg/BackGrundPage.svg);background-size:cover;background-repeat:no-repeat;background-position:center bottom;display:flex;justify-content:center;align-items:center}@media (max-width: 768px){.NotFoundSVG{max-width:250px}}@media (max-width: 480px){.NotFoundSVG{max-width:200px}}html,body,#root{width:100vw;height:100vh;overflow:hidden;background-image:url(/svg/BackGrundPage.svg);background-size:cover;background-repeat:no-repeat;background-position:center bottom;display:flex;justify-content:center;align-items:center}.settings-page-view{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.phone-frame{width:100%;max-width:375px;aspect-ratio:375 / 812;border-radius:40px;display:flex;justify-content:center;align-items:center}.settings-card{width:90%;background:#fff;border-radius:32px;box-shadow:0 10px 20px #00000026;display:flex;flex-direction:column;overflow:hidden}.card-header{position:relative;height:56px}.back-btn{position:absolute;left:16px;top:50%;transform:translateY(-50%);border:none;background:none;font-size:24px;cursor:pointer}.card-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:20px;font-weight:700;margin:0}.card-content{padding:16px;background:#fff;flex:1}.setting-group{margin-bottom:32px}.setting-label{margin-bottom:8px;display:block;font-size:14px;color:#333}.setting-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:#ddd;outline:none;--value: 50%}.setting-range.bgm{background:linear-gradient(to right,#007AFF var(--value),#DDD var(--value))}.setting-range.effect{background:linear-gradient(to right,#6200EE var(--value),#DDD var(--value))}.setting-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#eee;border:2px solid transparent;cursor:pointer;margin-top:-6px}.setting-range.bgm::-webkit-slider-thumb{border-color:#007aff}.setting-range.effect::-webkit-slider-thumb{border-color:#6200ee}.setting-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#eee;border:2px solid transparent;cursor:pointer}.setting-range.bgm::-moz-range-thumb{border-color:#007aff}.setting-range.effect::-moz-range-thumb{border-color:#6200ee}.card-footer{padding:16px;background:#fff}.inquiry-btn{display:flex;justify-content:center;align-items:center;width:100%;height:48px;padding:0;background:#007aff;color:#fff;font-size:16px;font-weight:500;text-decoration:none;border:none;border-radius:12px;cursor:pointer}@media (max-width: 768px){.phone-frame{width:95%;padding:15px}.settings-card{max-width:250px}}@media (max-width: 480px){.phone-frame{width:90%;padding:10px}.settings-card{max-width:200px}}html,body,#root{width:100vw;height:100vh;overflow:hidden;background-image:url(/svg/BackGrundPage.svg);background-size:cover;background-repeat:no-repeat;background-position:center bottom;display:flex;justify-content:center;align-items:center}.inquiry-wrapper{width:100vh;max-width:375px;height:100vh;margin:auto;padding:16px;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.inquiry-card{position:relative;width:100%;background:#fff;border-radius:16px;box-shadow:0 4px 8px #0000001a;padding:24px 16px;box-sizing:border-box}.back-button{position:absolute;top:16px;left:16px;background:none;border:none;cursor:pointer}.inquiry-title{margin:8px 0 0;font-size:20px;font-weight:700;text-align:center}.inquiry-text{margin-top:60px;font-size:16px;line-height:1.5;text-align:center;white-space:pre-wrap}.inquiry-email{display:inline-block;margin:8px 0;font-size:18px;font-weight:700;text-decoration:none;color:#000}@media (max-width: 768px){.inquiry-wrapper{width:95%;padding:15px}.inquiry-card{max-width:250px}}@media (max-width: 480px){.inquiry-wrapper{width:90%;padding:10px}.inquiry-card{max-width:200px}.inquiry-email{font-size:90%;font-weight:700}}html,body,#root{width:100vw;height:100vh;overflow:hidden;background-image:url(/svg/BackGrundPage.svg);background-size:cover;background-repeat:no-repeat;background-position:center bottom;display:flex;justify-content:center;align-items:center}.nickname-card{background-color:#fff;padding:40px 30px;border-radius:15px;box-shadow:0 4px 12px #0000001a;max-width:400px;margin:auto;position:relative;text-align:center}.nickname-back-button{position:absolute;top:20px;left:20px;background:none;border:none;font-size:24px;cursor:pointer}.nickname-title{font-size:24px;font-weight:700;margin-bottom:15px}.nickname-card input[type=text]{width:100%;padding:12px 15px;font-size:16px;border:1px solid #ccc;border-radius:8px;margin-bottom:20px;box-sizing:border-box}.nickname-button{width:100%;padding:12px 0;background-color:#007bff;color:#fff;font-size:16px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s ease}.nickname-button:hover{background-color:#0056b3}@media (max-width: 768px){.nickname-card{max-width:250px}}@media (max-width: 480px){.nickname-card{max-width:200px}}.errorMSG{color:red;margin-top:0;padding-top:0}.quiz-container{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:clamp(16px,4vw,32px);box-sizing:border-box}.quiz-card{width:100%;max-width:900px;background-color:#fff;border-radius:20px;padding:clamp(20px,5vw,32px);box-sizing:border-box;text-align:center;box-shadow:0 6px 16px #00000026}.quiz-title{font-weight:900;font-size:clamp(20px,5.6vw,28px);margin-bottom:clamp(6px,1.2vw,8px)}.quiz-subtitle{font-size:clamp(16px,4.6vw,20px);font-weight:700;margin-bottom:clamp(14px,3vw,20px)}.quiz-image{display:block;margin:16px auto 28px;height:auto;border-radius:20px;object-fit:contain;width:clamp(260px,32vw,440px);max-width:100%}.quiz-options{display:flex;flex-direction:column;gap:clamp(10px,3vw,16px)}.option-button{transition:all .1s ease-in-out;display:flex;align-items:center;gap:clamp(10px,3vw,14px);padding:clamp(14px,3.8vw,18px) clamp(16px,4.2vw,22px);border-radius:clamp(12px,3.6vw,16px);font-weight:800;font-size:clamp(16px,4.8vw,20px);border:2px solid #000;cursor:pointer;box-shadow:2px 2px #00000080;width:100%;min-height:clamp(52px,13vw,64px);box-sizing:border-box}.option-button:active{transform:scale(.97);box-shadow:none}.pink{background-color:#f7c3c3}.lightyellow{background-color:#f8f6b2}.lightblue{background-color:#b9c7ff}.lightgreen{background-color:#c7f7c7}.radio-circle{width:clamp(16px,4.6vw,20px);height:clamp(16px,4.6vw,20px);border-radius:50%;border:2px solid #000;background-color:#fff}.option-text{font-weight:800;line-height:1.2}.help-button-container{margin-top:clamp(16px,4vw,24px);text-align:right}.btn-help{background-color:#f4cf48;color:#000;font-weight:900;font-size:clamp(14px,4.2vw,16px);padding:clamp(8px,2.6vw,10px) clamp(14px,3.4vw,20px);border:none;border-radius:12px;cursor:pointer;box-shadow:2px 2px 4px #0000004d;transition:all .1s ease-in-out}.btn-help:active{transform:scale(.96);box-shadow:none}@media (min-width: 1024px){.quiz-card{max-width:720px}}@media (max-width: 360px){.quiz-container{padding:12px}.quiz-card{padding:16px}}@media (max-width: 768px){.quiz-image{width:min(70vw,400px)}}@media (max-width: 480px){.quiz-image{width:min(86vw,420px)}}.quiz-card img.quiz-image{display:block;margin:16px auto 28px;height:auto;object-fit:contain;width:min(86vw,420px);max-width:100%}.help-container{min-height:100vh;background-color:#6bc2da;display:flex;justify-content:center;align-items:center;font-family:Noto Sans KR,sans-serif;padding:16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));box-sizing:border-box}.help-card{width:min(900px,96vw);background-color:#fff;border-radius:18px;padding:clamp(20px,3vw,32px);text-align:center;box-shadow:0 6px 16px #00000026;box-sizing:border-box}.help-title{font-weight:900;font-size:clamp(26px,4.5vw,40px);line-height:1.2;margin-bottom:clamp(12px,2vw,18px);letter-spacing:-.2px}.help-image{width:100%;max-width:560px;height:auto;max-height:58vh;object-fit:contain;border-radius:18px;display:block;margin:clamp(6px,2vw,16px) auto clamp(12px,2.5vw,20px);background:#f5f7fb}.section-title{font-weight:800;font-size:clamp(18px,3.2vw,26px);margin-top:clamp(16px,2.6vw,22px)}.section-box{background-color:#d5e3f0;padding:clamp(12px,2.4vw,18px);margin-top:8px;border-radius:20px;font-size:clamp(15px,2.8vw,20px);font-weight:600;color:#333;line-height:1.65}.btn-back{margin-top:clamp(18px,3vw,26px);background-color:#70b7f1;padding:clamp(10px,2.6vw,16px) clamp(18px,3.2vw,28px);font-size:clamp(16px,3.6vw,22px);font-weight:900;border:none;border-radius:14px;cursor:pointer;color:#000;box-shadow:inset 0 4px 2px #fff9,0 6px 14px #0000002e;transition:transform .12s ease-in-out,box-shadow .12s ease-in-out;min-height:52px;min-width:180px}.btn-back:active{transform:scale(.97);box-shadow:none}@media (max-width: 768px){.help-card{width:94vw}}@media (max-width: 380px){.help-card{border-radius:16px}.help-image{border-radius:16px;max-height:60vh}.btn-back{min-height:50px}}html,body{height:100%;margin:0;background:#6ec5e9;overflow:hidden}#name-id{position:absolute;z-index:10;width:500px;height:50px;transform:translate(-50%,-50%);left:50%;top:10%;font-size:70px;font-weight:900;text-align:center;line-height:75px;color:#fff;text-shadow:3px 0px black,-3px 0px black,0px -3px black,0px 3px black,3px 3px black,3px -3px black,-3px 3px black,-3px -3px black}#mention{position:absolute;z-index:10;width:500px;height:50px;transform:translate(-50%,-50%);left:50%;top:20%;font-size:70px;font-weight:900;text-align:center;line-height:75px;color:#fff;text-shadow:3px 0px black,-3px 0px black,0px -3px black,0px 3px black,3px 3px black,3px -3px black,-3px 3px black,-3px -3px black}.score-one-line{position:absolute;z-index:10;left:50%;top:31%;transform:translate(-50%,-50%);display:flex;align-items:baseline;gap:8px;white-space:nowrap}#now-score{display:inline-block;font-weight:900;font-size:clamp(56px,12vw,120px);line-height:1;color:#000}#basic-score{display:inline-block;font-weight:900;font-size:clamp(28px,6vw,60px);line-height:1;color:#000}.image{position:absolute;transform:translate(-50%,-50%);z-index:10;width:280px;height:auto;top:50%;left:50%}.retry-button{transform:translate(-50%,-50%);text-decoration:none;position:absolute;z-index:10;width:300px;height:80px;background-color:#f4b938;border-radius:20px;top:74%;left:50%;box-shadow:inset 0 4px 2px #fff58c,0 4px 2px #d68619;font-weight:900;font-size:40px;text-align:center;line-height:85px;color:#fff;text-shadow:3px 0px black,-3px 0px black,0px -3px black,0px 3px black,3px 3px black,3px -3px black,-3px 3px black,-3px -3px black}.home-button{text-decoration:none;position:absolute;z-index:10;width:140px;height:80px;background-color:#38acf4;border-radius:20px;top:81%;left:39%;box-shadow:inset 0 4px 2px #c6ebff,0 4px 2px #256bae;font-weight:900;font-size:40px;text-align:center;line-height:85px;color:#fff;text-shadow:3px 0px black,-3px 0px black,0px -3px black,0px 3px black,3px 3px black,3px -3px black,-3px 3px black,-3px -3px black}.setting-button{text-decoration:none;position:absolute;z-index:10;width:140px;height:80px;background-color:#82c75e;border-radius:20px;top:81%;left:51%;box-shadow:inset 0 4px 2px #d8f8c9,0 4px 2px #4b882c;font-weight:900;font-size:40px;text-align:center;line-height:85px;color:#fff;text-shadow:3px 0px black,-3px 0px black,0px -3px black,0px 3px black,3px 3px black,3px -3px black,-3px 3px black,-3px -3px black}.back-rectangle{position:absolute;z-index:5;inset:23px;background-color:#fff;border-radius:10px}@media (max-width: 768px){.back-rectangle{inset:23px;border-radius:10px}#name-id{width:500px;top:70px;transform:translate(-50%,-50%);left:50%;font-size:50px;line-height:60px}#mention{transform:translate(-50%,-50%);left:50%;top:120px;width:500px;margin:0 auto;font-size:50px;line-height:65px}.score-one-line{top:27%}.image{position:absolute;transform:translate(-50%,-50%);z-index:10;width:40%;height:auto;top:52%;left:50%}.retry-button{transform:translate(-50%,-50%);top:77%;left:50%;width:80vw;height:10vh;font-size:50px;line-height:80px;border-radius:2.5vw}.home-button,.setting-button{width:38vw;height:10vh;font-size:50px;line-height:85px}.home-button{top:83vh;left:10vw}.setting-button{top:83vh;left:50vw}}@media (max-width: 480px){.back-rectangle{inset:23px;border-radius:10px}#name-id,#mention{display:flex;justify-content:center;align-items:center;font-size:40px;line-height:35px}#mention{top:120px;width:300px}#name-id{top:70px;width:300px}.score-one-line{top:25%}.image{position:absolute;transform:translate(-50%,-50%);z-index:10;width:70%;height:auto;top:50%;left:50%}.retry-button{width:80vw;height:10vh;top:75%;left:50%;font-size:40px;line-height:80px}.home-button,.setting-button{width:38vw;height:10vh;font-size:40px;line-height:80px}.home-button{top:82vh;left:10vw}.setting-button{top:82vh;left:52vw}}@media (min-width: 770px) and (max-width: 1024px){#name-id,#mention{font-size:60px;line-height:50px}.score-one-line{top:29%}.home-button{left:35%}}.answer-container{width:100vw;min-height:100vh;background-color:#6bc2da;display:flex;justify-content:center;align-items:center;font-family:Noto Sans KR,sans-serif;padding:0 16px;box-sizing:border-box}.answer-card{width:100%;max-width:1000px;background-color:#fff;border-radius:20px;text-align:center;padding:clamp(20px,3.5vw,36px) clamp(16px,3vw,28px);box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;scrollbar-width:none}.answer-card::-webkit-scrollbar{display:none}.ox-symbol{font-size:clamp(60px,9vw,96px);font-weight:900;margin:8px auto 0}.ox-symbol.circle{color:#2f00ff}.ox-symbol.cross{color:#e60000}.result-text{color:#000;font-size:clamp(22px,4vw,34px);font-weight:900;margin-top:-8px;margin-bottom:10px}.quiz-image{width:clamp(120px,28vw,220px);height:clamp(120px,28vw,220px);border-radius:20px;object-fit:cover;margin:8px auto 16px}.answer-label{font-size:clamp(18px,3.6vw,26px);font-weight:800;margin-top:10px}.answer-text{font-size:clamp(26px,5.5vw,42px);font-weight:900;margin-bottom:12px}.section-title{font-size:clamp(18px,3.5vw,26px);font-weight:800;margin-top:12px}.section-box{background-color:#d5e3f0;border-radius:20px;padding:clamp(12px,3.6vw,18px);margin:8px auto;font-size:clamp(16px,3.7vw,22px);font-weight:700;color:#333;line-height:1.55;width:100%;box-sizing:border-box}.button-group{display:flex;flex-wrap:wrap;gap:clamp(10px,3.5vw,18px);justify-content:center;align-items:center;margin-top:auto;padding-top:20px;padding-bottom:6px;max-width:680px;margin-inline:auto}.btn{flex:1 1 45%;min-width:clamp(140px,45%,280px);height:clamp(56px,7.2vh,68px);border:none;border-radius:16px;font-size:clamp(18px,4.2vw,22px);font-weight:800;box-shadow:inset 0 4px 2px #fff9,0 6px 14px #0000002e;cursor:pointer;color:#000;transition:transform .08s ease-in-out,box-shadow .08s ease-in-out}.btn:active{transform:scale(.97);box-shadow:none}.btn.home{background-color:#f4b938}.btn.next{background-color:#38acf4}.btn.explain{background-color:#82c75e}@media (min-width: 1024px){.btn{flex:0 0 220px}}.explain-container{min-height:100vh;background-color:#6bc2da;display:flex;justify-content:center;align-items:center;font-family:Noto Sans KR,sans-serif;padding:0 16px;box-sizing:border-box}.explain-card{width:100%;max-width:1000px;background-color:#fff;border-radius:20px;padding:40px;text-align:center;box-shadow:0 4px 16px #00000026}.explain-title{font-size:28px;font-weight:900;margin-bottom:32px}.explain-item{margin-bottom:28px}.explain-option{font-size:20px;font-weight:700;text-align:left;margin-left:16px}.explain-bubble{background-color:#d5e3f0;padding:16px 20px;margin-top:6px;border-radius:20px;font-size:17px;font-weight:600;text-align:left;color:#333;width:fit-content;max-width:92%;margin-left:auto;margin-right:auto}.btn-back{background-color:#38acf4;color:#000;font-weight:700;font-size:18px;padding:12px 28px;border:none;border-radius:14px;cursor:pointer;margin-top:20px;box-shadow:2px 2px 4px #0000004d;transition:all .1s ease-in-out}.btn-back:active{transform:scale(.96);box-shadow:none}@media (max-width: 1199px){.explain-card{max-width:800px;padding:36px}}@media (max-width: 768px){.explain-card{max-width:100%;padding:24px;border-radius:16px}.explain-title{font-size:22px}.explain-option{font-size:17px;margin-left:12px}.explain-bubble{font-size:15px;padding:14px 16px;border-radius:16px;max-width:98%}.btn-back{font-size:16px;padding:10px 20px}}@media (max-width: 480px){.explain-card{padding:20px}.explain-title{font-size:20px}.explain-option{font-size:16px;margin-left:10px}.explain-bubble{font-size:14px;padding:12px 14px;border-radius:14px;max-width:100%}.btn-back{font-size:15px;padding:9px 16px}}