body{font-family:Spoqa Han Sans Neo,Pretendard Variable,Noto Sans KR,sans-serif;margin:0;padding:0}.Main-Logo{width:20.25rem;cursor:pointer;margin-right:8vh;margin-top:10rem}.Main-div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;position:relative;z-index:0;padding-bottom:0}.Main-Title span:nth-child(1){color:#e9a5a5;opacity:.6}.Main-Title span:nth-child(2){color:#e9d4a6;opacity:.65}.Main-Title span:nth-child(3){color:#a5dcc8;opacity:.7}.Main-Title span:nth-child(4){color:#b5d9f4;opacity:.75}.Main-Title span:nth-child(5){color:#f4b5e0;opacity:1}.Main-Title span:nth-child(6){color:#c5aad9;opacity:1}.Main-Title{font-size:5.375rem}.Login-Btn{background-color:transparent;border:.125rem solid #ffffff;cursor:pointer;height:3.825rem;font-size:1.5rem;border-radius:.5rem;padding:0 1.8rem;transition:all .3s ease;border:.125rem solid #A5DCC8;animation:rainbow-border 8s linear infinite}@keyframes rainbow-border{0%{border-color:#ff8b94}16%{border-color:#ffbd88}32%{border-color:#fff088}48%{border-color:#53c3c0}64%{border-color:#b0e8c8}80%{border-color:#c589ff}to{border-color:#d9bfa8}}.Login-Btn span:nth-child(1){color:#f5313f;opacity:.6;font-weight:1000}.Login-Btn span:nth-child(2){color:#0b71cf;opacity:.65;font-weight:1000}.Login-Btn:hover{box-shadow:0 .5rem .625rem #0000001a;transform:translateY(-.125rem)}.Login-Btn:active{transform:translateY(-.375rem);box-shadow:0 .3125rem .625rem #0003}.M{background:linear-gradient(to right,#f2b24b 30%,#53c3c0 45%);-webkit-background-clip:text;color:transparent;font-weight:1000}.section{background:none;position:relative;z-index:10;padding:4rem 2rem;min-height:100vh;margin-top:5rem}.Introduction{margin:0 0 4rem;font-size:3em;color:#494949;text-align:center}.info-section{max-width:1000px;margin:0 auto 6rem;text-align:center;padding:2rem 1rem;background:linear-gradient(135deg,#71d3af33,#b5d9f433);border-radius:1.5rem}.info-title{font-size:3.5rem;color:#333;margin-bottom:1.5rem}.info-text{font-size:1.2rem;color:#555;line-height:1.8;margin-bottom:1rem;text-align:left;padding-left:4rem}.info-title span:nth-child(1){color:#e9a5a5;opacity:.6}.info-title span:nth-child(2){color:#e9d4a6;opacity:.65}.info-title span:nth-child(3){color:#a5dcc8;opacity:.7}.info-title span:nth-child(4){color:#b5d9f4;opacity:.75}.info-title span:nth-child(5){color:#f4b5e0;opacity:1}.info-title span:nth-child(6){color:#c5aad9;opacity:1}.info-title span:nth-child(7){color:#a9a9a9;opacity:1}.Spectrum-icon{margin-right:2rem;margin-bottom:3rem}.Quiz-icon{width:8rem;margin-bottom:4rem}.Ranking-icon{width:18rem;margin-bottom:1rem}.intro-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:1200px;margin:0 auto 6rem;padding:0 1rem}.intro-card{background:#fffc;border-radius:1rem;padding:2.5rem 2rem;text-align:center;transition:all .3s ease;box-shadow:0 4px 6px #0000001a}.intro-card:hover{transform:translateY(-10px);box-shadow:0 12px 24px #00000026}.intro-icon{font-size:4rem;margin-bottom:1rem}.intro-title{font-size:2rem;color:#747474;margin-bottom:1rem;font-weight:700}.intro-description{font-size:1rem;color:#666;line-height:1.6;margin:0}.feature-container{display:flex;flex-direction:column;gap:3rem;margin:0 auto 1rem;max-width:1200px;padding:0 2rem}.feature-card{display:flex;align-items:center;background:#fffc;border-radius:1.5rem;padding:2rem;gap:2rem;transition:all .3s ease;box-shadow:0 4px 6px #0000001a}.feature-card:nth-child(2n){flex-direction:row-reverse}.card-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f1f2f4;border-radius:1rem;padding:2rem;min-height:300px}.feature-content{flex:1;display:flex;flex-direction:column;justify-content:center}.feature-icon{font-size:4rem;margin-bottom:1rem}.feature-title{font-size:1.8rem;color:#666;margin-bottom:.5rem;font-weight:700;text-align:center}.feature-subtitle{font-size:1.2rem;color:#666;margin-bottom:1rem;text-align:left}.feature-description{font-size:1.05rem;color:#666;line-height:1.8;margin:0;text-align:left}.intro-table,.intro-quiz{width:35em}.intro-ranking{width:25em}.Ranking-icon1{width:20rem;padding-bottom:1rem}.Quiz-icon1{width:12em;padding-bottom:1rem}.end-section{text-align:center;padding:4rem 2rem;max-width:800px;margin:0 auto}.end-title{font-size:2.5rem;color:#333;margin-bottom:1rem;font-weight:700;background:linear-gradient(to right,#f2b24b,#53c3c0);-webkit-background-clip:text;background-clip:text;color:transparent}.end-description{font-size:1.3rem;color:#666;margin:0}.Login-Btn1{background-color:transparent;border:.125rem solid #ffffff;cursor:pointer;height:3.825rem;font-size:1.5rem;border-radius:.5rem;padding:0 1.8rem;transition:all .3s ease;border:.125rem solid #A5DCC8;color:#666;margin-top:3rem;animation:rainbow-border1 8s linear infinite}.Login-Btn1 span:nth-child(1){color:#f5313f;opacity:.6;font-weight:1000}.Login-Btn1 span:nth-child(2){color:#0b71cf;opacity:.65;font-weight:1000}.Login-Btn1:hover{box-shadow:0 .5rem .625rem #0000001a;transform:translateY(-.125rem)}.Login-Btn1:active{transform:translateY(-.375rem)}.footer{background-color:#5a657726;padding:3rem 0;color:#70798f;margin:0;width:100%}.title{color:#707070;font-weight:700}.title-container{padding:0 0 5rem 15rem;margin:0}.ytube-icon{width:2rem;padding-right:1rem}.github-icon{width:1.7rem;margin-bottom:.1rem}.periodic-table-page{padding:3rem 2rem;min-height:100vh;background-color:#fff}.icon-container{position:absolute;top:2rem;right:2rem;display:flex;gap:1rem;align-items:center;z-index:100}.icon-wrapper{position:relative;display:inline-block}.icon-container img{cursor:pointer;transition:transform .2s ease}.quiz-icon{width:6rem;height:4rem}.ranking-icon{width:7rem;height:5rem}.icon-container img:hover{transform:scale(1.1)}.tooltip{position:absolute;bottom:-2.5rem;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:.5rem 1rem;border-radius:.5rem;font-size:.9rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:101}.tooltip:before{content:"";position:absolute;top:-.4rem;left:50%;transform:translate(-50%);border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid #333}.icon-wrapper:hover .tooltip{opacity:1}.ExclamationMark{position:absolute;top:17rem;right:3rem;width:2rem;cursor:pointer;transition:transform .2s ease}.ExclamationMark:hover{transform:scale(1.1)}.page-title{text-align:center;font-size:4rem;margin-bottom:2rem;margin-top:10rem}.page-title span:nth-child(1){color:#e9a5a5;opacity:.6}.page-title span:nth-child(2){color:#e9d4a6;opacity:.65}.page-title span:nth-child(3){color:#a5dcc8;opacity:.7}.page-title span:nth-child(4){color:#b5d9f4;opacity:.75}.periodic-table{display:grid;grid-template-columns:repeat(18,7rem);grid-template-rows:repeat(10,8rem);gap:.25rem;max-width:130rem;margin:0 auto;padding:2rem 2rem 2rem 6rem;background-color:#f6f6f600;border-radius:1rem;box-shadow:0 .25rem 1rem #0000001a}.element{border:.125rem solid #ddd;border-radius:.5rem;padding:.5rem;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.element:hover{transform:translateY(-.25rem);box-shadow:0 .5rem 1rem #0003}.atomic-number{font-size:.75rem;color:#666;margin-bottom:.25rem}.symbol{font-size:1.5rem;font-weight:700;margin-bottom:.25rem}.name{font-size:.55rem;color:#666}.nonmetal{background-color:#feffc3;border-color:#e9e9e9}.noble-gas{background-color:#fce4bc;border-color:#e9e9e9}.alkali-metal{background-color:#fdc5c4;border-color:#e9e9e9}.alkaline-earth{background-color:#d3d2fc;border-color:#e9e9e9}.metalloid{background-color:#e2eebf;border-color:#e9e9e9}.halogen{background-color:#feffc3;border-color:#e9e9e9}.post-transition{background-color:#b9ffba;border-color:#e9e9e9}.transition-metal{background-color:#bbdefb;border-color:#e9e9e9}.lanthanide{background-color:#b8ffff;border-color:#e9e9e9}.actinide{background-color:#c6ffeb;border-color:#e9e9e9}@media (max-width: 1600px){.periodic-table{grid-template-columns:repeat(18,4rem);grid-template-rows:repeat(10,5rem)}}@media (max-width: 1200px){.periodic-table{grid-template-columns:repeat(18,3rem);grid-template-rows:repeat(10,4rem);gap:.25rem}.symbol{font-size:1.2rem}.name{font-size:.6rem}}.modal-overlay{position:fixed;inset:0;background-color:#e6e6e6b3;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{background-color:#f8f8f8;border-radius:1rem;max-width:50rem;width:90%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 .5rem 2rem #0000004d;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(3rem);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:2rem;cursor:pointer;color:#666;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s;z-index:1}.modal-close:hover{background-color:#f0f0f0;color:#333}.modal-header{padding:2rem;border-bottom:.125rem solid #eee;display:flex;justify-content:center;align-items:center}.modal-element-box{border:.125rem solid #ddd;border-radius:.5rem;padding:1.5rem;text-align:center;min-width:10rem}.modal-atomic-number{font-size:.9rem;color:#666;margin-bottom:.5rem}.modal-symbol{font-size:3rem;font-weight:700;color:#333;margin:.5rem 0}.modal-name{font-size:1.2rem;color:#666}.modal-body{padding:2rem}.modal-body h2{font-size:1.5rem;margin-bottom:1.5rem;color:#333}.modal-body h3{font-size:1.2rem;margin-bottom:1rem;color:#333}.element-info{background-color:#f9f9f9;border-radius:.5rem;padding:1.5rem;margin-bottom:2rem}.info-row{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:.0625rem solid #e0e0e0}.info-row:last-child{border-bottom:none}.info-label{font-weight:600;color:#555}.info-value{color:#333}.spectrum-section{margin-top:2rem}.spectrum-placeholder{background-color:#f0f0f0;border:.125rem dashed #ccc;border-radius:.5rem;padding:3rem;text-align:center;color:#999;min-height:15rem;display:flex;align-items:center;justify-content:center}.spectrum-image{width:40rem;display:block;margin:0 auto;padding:2rem;border-radius:.5rem;box-shadow:0 .25rem 1rem #00000026}.precautions-container{background-color:#fff;border-radius:1rem;max-width:40rem;width:90%;position:relative;box-shadow:0 .5rem 2rem #0000004d;animation:slideUp .3s ease}.precautions{padding:2rem 2.5rem;text-align:center}.precautions p{text-align:left;margin:0;font-size:1.1rem;line-height:1.8;color:#333;word-break:keep-all}.quiz-container{min-height:90vh;display:flex;justify-content:center;align-items:center;padding:20px;background-color:#fff}.difficulty-badge{color:gray}.difficulty-btn img{width:3rem}.difficulty-selection{background:#fff;border-radius:20px;padding:50px 40px;box-shadow:0 20px 60px #0000004d;text-align:center;max-width:600px;width:100%}.quiz-title{font-size:2.5rem;font-weight:700;color:#333;margin-bottom:10px}.difficulty-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.difficulty-btn{background:#fff;border:3px solid #e0e0e0;border-radius:15px;padding:30px 20px;width:150px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px #0000001a}.difficulty-btn:hover{transform:translateY(-5px);box-shadow:0 8px 15px #0003}.difficulty-btn.easy{border:3px solid transparent;background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,#ffd56b,#ffa85c);background-origin:border-box;background-clip:padding-box,border-box}.difficulty-btn.easy:hover{background:linear-gradient(135deg,#ffa85c);color:#fff}.difficulty-btn.medium{border:3px solid transparent;background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,#b8f3d8,#a8d8ea);background-origin:border-box;background-clip:padding-box,border-box}.difficulty-btn.medium:hover{background:linear-gradient(135deg,#a8d8ea);color:#fff}.difficulty-btn.hard{border:3px solid transparent;background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,#ffe8a3,#ffb6d9);background-origin:border-box;background-clip:padding-box,border-box}.difficulty-btn.hard:hover{background:linear-gradient(135deg,#ffb6d9);color:#fff}.btn-icon{font-size:3rem;margin-bottom:10px}.btn-text{font-size:1.8rem;font-weight:700;margin-bottom:5px}.btn-desc{font-size:.9rem;color:#666}.result-screen{background:#fff;border-radius:20px;padding:50px 40px;box-shadow:0 20px 60px #0000004d;text-align:center;max-width:600px;width:100%}.result-title{font-size:2.5rem;font-weight:700;color:#333;margin-bottom:30px}.result-score{margin:30px 0}.score-circle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:200px;height:200px;border-radius:50%;color:#fff;box-shadow:0 10px 30px #667eea4d}.score-circle.상{background:linear-gradient(135deg,#ffe8a3,#ffb6d9)}.score-circle.중{background:linear-gradient(135deg,#b8f3d8,#a8d8ea)}.score-circle.하{background:linear-gradient(135deg,#ffd56b,#ffa85c)}.score-number{font-size:4rem;font-weight:700}.score-total{font-size:1.5rem;opacity:.9}.result-percentage{font-size:2rem;font-weight:700;margin:20px 0}.result-percentage.상{color:#ffb6d9}.result-percentage.중{color:#a8d8ea}.result-percentage.하{color:#ffa85c}.result-message{font-size:1.3rem;color:#666;margin-bottom:40px}.result-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.ranking-btn,.home-btn{padding:15px 30px;border:none;border-radius:25px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease}.ranking-btn{color:#fff}.ranking-btn.상{background:linear-gradient(135deg,#ffe8a3,#ffb6d9)}.ranking-btn.중{background:linear-gradient(135deg,#b8f3d8,#a8d8ea)}.ranking-btn.하{background:linear-gradient(135deg,#ffd56b,#ffa85c)}.ranking-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px #667eea66}.home-btn{background:#fff}.home-btn.상{border:2px solid #FFB6D9;color:#ffb6d9}.home-btn.중{border:2px solid #A8D8EA;color:#a8d8ea}.home-btn.하{border:2px solid #FFA85C;color:#ffa85c}.home-btn:hover{background:#f5f5ff;transform:translateY(-3px)}.quiz-container.kahoot-style{background:#fff;min-height:100vh;padding:0;display:flex;flex-direction:column;position:relative}.quiz-info-bar{display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:700;font-size:1.1rem;max-width:1200px;margin:0 auto;width:100%}.question-number{background:#fff3;padding:8px 16px;border-radius:20px}.kahoot-question-section{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px;max-width:1200px;margin:0 auto;width:100%}.kahoot-question{color:#666;font-size:2.5rem;font-weight:700;text-align:center;text-shadow:none;line-height:1.4}.kahoot-answers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:20px;max-width:1200px;margin:0 auto;width:100%}.kahoot-answer-btn{position:relative;min-height:180px;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding:20px;font-size:1.2rem;font-weight:700;color:#fff;overflow:hidden;box-shadow:0 4px 12px #0000004d}.kahoot-answer-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 8px 20px #0006}.kahoot-answer-btn:disabled{cursor:not-allowed;opacity:.8}.kahoot-answer-btn.red{background:linear-gradient(135deg,#ffe8a3,#ffb6d9)}.kahoot-answer-btn.blue{background:linear-gradient(135deg,#b8f3d8,#a8d8ea)}.kahoot-answer-btn.yellow{background:linear-gradient(135deg,#ffd56b,#ffa85c)}.kahoot-answer-btn.green{background:linear-gradient(135deg,#667eea,#764ba2)}.answer-shape{font-size:4rem;line-height:1;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.answer-text{text-align:center;line-height:1.4;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.answer-result-icon{position:absolute;top:15px;right:15px;font-size:2.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.kahoot-answer-btn.correct-answer{animation:correctPulse .6s ease}.kahoot-answer-btn.wrong-answer{animation:wrongShake .5s ease}@keyframes correctPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes wrongShake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.kahoot-result-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.kahoot-result-popup{background:#fff;border-radius:20px;padding:50px;text-align:center;min-width:400px;animation:popupSlide .4s ease}@keyframes popupSlide{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.result-icon{font-size:5rem;margin-bottom:20px}.kahoot-result-popup.correct .result-icon{color:#667eea}.kahoot-result-popup.incorrect .result-icon{color:#ffb6d9}.result-message{font-size:2rem;font-weight:700;margin-bottom:30px;color:#333}.kahoot-next-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:15px 50px;border-radius:30px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease}.kahoot-next-btn:hover{transform:scale(1.05);box-shadow:0 8px 20px #667eea66}.kahoot-quit-btn{position:absolute;top:20px;right:20px;background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.4);padding:10px 20px;border-radius:20px;font-weight:700;cursor:pointer;transition:all .3s ease;z-index:100}.kahoot-quit-btn:hover{background:#ffffff4d;border-color:#fff9}@media (max-width: 768px){.kahoot-question{font-size:1.8rem}.kahoot-answers-grid{grid-template-columns:1fr;gap:15px}.kahoot-answer-btn{min-height:120px}.answer-shape{font-size:3rem}.answer-text{font-size:1rem}.kahoot-result-popup{min-width:300px;padding:30px}.result-icon{font-size:3.5rem}.result-message{font-size:1.5rem}.quiz-info-bar{font-size:.9rem;flex-wrap:wrap;gap:10px}}.ranking-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:40px 20px;background:#fff;color:#333}.ranking-title{font-size:3rem;margin-bottom:50px;text-align:center;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.podium-container{display:flex;align-items:flex-end;justify-content:center;gap:20px;margin-bottom:60px;flex-wrap:wrap}.podium-item{display:flex;flex-direction:column;align-items:center;position:relative}.crown{font-size:2.5rem;margin-bottom:10px}.rank-badge{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;margin-bottom:15px;box-shadow:0 4px 8px #0000004d}.rank-badge.gold{background:linear-gradient(135deg,#ffe8a3,#ffb6d9);color:#8b6914}.rank-badge.silver{background:linear-gradient(135deg,#b8f3d8,#a8d8ea);color:#4a4a4a}.rank-badge.bronze{background:linear-gradient(135deg,#ffd56b,#ffa85c);color:#5c3a1a}.user-info{background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;border-radius:15px;text-align:center;min-width:150px;margin-bottom:15px;border:2px solid rgba(255,255,255,.2)}.user-name{font-size:1.3rem;font-weight:700;margin-bottom:8px}.user-score{font-size:1.1rem;opacity:.9}.podium-base{width:150px;padding:15px;border-radius:10px 10px 0 0;text-align:center;font-size:1.2rem;font-weight:700;box-shadow:0 -4px 8px #0003;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.first-base{height:200px;background:linear-gradient(180deg,#ffe8a3,#ffb6d9);color:#8b6914}.second-base{height:150px;background:linear-gradient(180deg,#b8f3d8,#a8d8ea);color:#4a4a4a}.third-base{height:120px;background:linear-gradient(180deg,#ffd56b,#ffa85c);color:#5c3a1a}.podium-item.first{order:2}.podium-item.second{order:1}.podium-item.third{order:3}.ranking-table-container{width:100%;max-width:800px}.ranking-table{width:100%;border-collapse:collapse;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:15px;overflow:hidden;box-shadow:0 8px 32px #0003}.ranking-table thead{background:#fff3}.ranking-table th{padding:18px;text-align:center;font-size:1.2rem;font-weight:700;border-bottom:2px solid rgba(255,255,255,.3)}.ranking-table td{padding:15px;text-align:center;font-size:1.1rem;border-bottom:1px solid rgba(255,255,255,.1)}.ranking-table tbody tr{transition:background .3s ease}.ranking-table tbody tr:hover{background:#ffffff26}.ranking-table tbody tr:last-child td{border-bottom:none}.First{width:4rem;position:relative;top:-90px}.Second{width:4rem;position:relative;top:-145px}.Third{width:4rem;position:relative;top:-60px}