*{margin:0;padding:0;box-sizing:border-box}body{font-family:Nanum Myeongjo,Georgia,Times New Roman,serif;background:linear-gradient(135deg,#8b7355,#5d4e37);background-image:linear-gradient(135deg,#8b7355,#5d4e37),url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-attachment:fixed;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:20px;overflow-y:auto}#root{width:100%;display:flex;justify-content:center;align-items:flex-start;margin:auto 0}.container{background:linear-gradient(to bottom,#f4e9d8,#e8dcc8);border-radius:8px;padding:40px;box-shadow:0 0 0 2px #8b7355,0 0 0 6px #f4e9d8,0 0 0 8px #8b7355,0 20px 60px #0006;max-width:800px;width:100%;border:3px solid #5d4e37;position:relative}.container:before{content:"✟";position:absolute;top:15px;left:50%;transform:translate(-50%);font-size:1.5em;color:#8b7355;opacity:.3}h1{color:#5d4e37;text-align:center;margin-bottom:30px;font-size:2.5em;font-weight:400;letter-spacing:2px;text-shadow:1px 1px 2px rgba(0,0,0,.1);border-bottom:2px solid #8b7355;padding-bottom:15px;margin-top:20px}h2{color:#5d4e37;margin-bottom:20px;font-size:1.5em;font-weight:400}.leaderboard{background:#ebe0d0;border-radius:8px;padding:30px;margin-bottom:30px;border:2px solid #8b7355;box-shadow:inset 0 2px 4px #0000001a}.leaderboard-filter{display:flex;gap:10px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}.leaderboard-filter button{flex:1;min-width:80px;padding:10px 15px;font-size:.95em;opacity:.6;transition:opacity .3s,transform .2s}.leaderboard-filter button.active{opacity:1;transform:scale(1.05);box-shadow:0 5px 20px #5d4e3799}.leaderboard-filter button:hover{opacity:.9}#leaderboard-list{display:flex;flex-direction:column;gap:10px}.leaderboard-item{background:#f9f4ed;padding:15px 20px;border-radius:6px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px #5d4e3733;border:1px solid #d4c4a8}.leaderboard-rank{font-weight:700;color:#8b7355;font-size:1.2em;min-width:40px}.leaderboard-name{flex:1;margin-left:15px;font-size:1.1em;color:#5d4e37}.leaderboard-score{color:#8b7355;font-weight:700;font-size:1.1em}.start-section{text-align:center}.difficulty-section{margin:30px 0}.difficulty-section h2{margin-bottom:15px;text-align:center}.difficulty-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.difficulty-btn{flex:1;min-width:150px;padding:15px 20px;opacity:.6;transition:opacity .3s,transform .2s}.difficulty-btn.active{opacity:1;transform:scale(1.05);box-shadow:0 5px 20px #5d4e3799}.difficulty-btn:hover{opacity:.9}.start-btn{width:100%;padding:20px;font-size:1.3em;margin-top:10px;background:linear-gradient(135deg,#4caf50,#2e7d32);border-color:#2e7d32}.start-btn:hover{background:linear-gradient(135deg,#66bb6a,#388e3c)}input[type=text]{width:100%;padding:15px 20px;border:2px solid #8b7355;border-radius:6px;font-size:1.1em;margin-bottom:20px;transition:border-color .3s;background:#f9f4ed;color:#5d4e37;font-family:Nanum Myeongjo,Georgia,serif}input[type=text]:focus{outline:none;border-color:#5d4e37;box-shadow:0 0 8px #5d4e374d}button{background:linear-gradient(135deg,#8b7355,#5d4e37);color:#f4e9d8;border:2px solid #5d4e37;padding:15px 40px;border-radius:6px;font-size:1.1em;cursor:pointer;transition:transform .2s,box-shadow .2s;font-weight:700;font-family:Nanum Myeongjo,Georgia,serif;letter-spacing:1px}button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #5d4e3780;background:linear-gradient(135deg,#9d8465,#6d5e47)}button:active{transform:translateY(0)}.quiz-container{max-width:900px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap}.user-info{display:flex;flex-direction:column;align-items:flex-end;gap:5px}#username-display{font-weight:700;color:#5d4e37;font-size:1.2em}#score-display{color:#8b7355;font-size:1.1em}.quiz-section{display:flex;flex-direction:column;gap:20px}.verse-reference{background:linear-gradient(135deg,#8b7355,#5d4e37);color:#f4e9d8;padding:25px;border-radius:8px;text-align:center;border:3px solid #5d4e37;box-shadow:inset 0 2px 4px #0000004d;position:relative}.verse-reference:before,.verse-reference:after{content:"※";position:absolute;top:50%;transform:translateY(-50%);font-size:1.5em;opacity:.3;color:#f4e9d8}.verse-reference:before{left:20px}.verse-reference:after{right:20px}.verse-reference h2{color:#f4e9d8;margin:0;font-size:2em;font-weight:400;letter-spacing:3px}.hint-text{background:#ebe0d0;border:2px solid #8b7355;border-radius:6px;padding:20px;font-size:1.2em;line-height:1.8;color:#5d4e37;text-align:center;box-shadow:inset 0 2px 4px #0000001a;font-family:Nanum Myeongjo,Georgia,serif;letter-spacing:2px}.input-section{display:flex;gap:15px;align-items:flex-start;width:100%}textarea{flex:1;width:100%;padding:15px;border:2px solid #8b7355;border-radius:6px;font-size:1.1em;font-family:Nanum Myeongjo,Georgia,serif;resize:vertical;min-height:100px;background:#f9f4ed;color:#5d4e37;line-height:1.6;box-sizing:border-box}textarea:focus{outline:none;border-color:#5d4e37;box-shadow:0 0 8px #5d4e374d}#check-button{padding:15px 30px;white-space:nowrap}.result-message{padding:15px;border-radius:6px;text-align:center;font-weight:700;font-size:1.1em;min-height:50px;display:flex;align-items:center;justify-content:center;font-family:Nanum Myeongjo,Georgia,serif}.result-message.correct{background:#e8f5e9;color:#2e7d32;border:2px solid #81c784;box-shadow:0 2px 8px #2e7d3233}.result-message.incorrect{background:#ffebee;color:#c62828;border:2px solid #e57373;box-shadow:0 2px 8px #c6282833}.result-message.fade-out{animation:fadeOut .5s ease-out forwards}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.navigation{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.navigation button{flex:1;min-width:150px}#home-button{background:linear-gradient(135deg,#6d5e47,#4a3f30);border-color:#4a3f30}.progress{text-align:center;color:#5d4e37;font-size:1.2em;font-weight:700;padding:15px;background:#ebe0d0;border-radius:6px;border:2px solid #8b7355;box-shadow:inset 0 2px 4px #0000001a}@media(max-width:768px){body{padding:10px}.container{padding:25px 20px;box-shadow:0 0 0 2px #8b7355,0 0 0 4px #f4e9d8,0 0 0 6px #8b7355,0 10px 30px #0006;margin:20px auto}.container:before{font-size:1.2em;top:10px}h1{font-size:1.6em;letter-spacing:1px;margin-top:15px;padding-bottom:10px}h2{font-size:1.3em}.leaderboard{padding:20px}.leaderboard-filter{gap:8px}.leaderboard-filter button{min-width:60px;padding:8px 12px;font-size:.85em}.leaderboard-item{padding:12px 15px}.leaderboard-rank{font-size:1em;min-width:30px}.leaderboard-name{font-size:1em;margin-left:10px}.leaderboard-score{font-size:1em}input[type=text]{padding:12px 15px;font-size:1em}button{padding:12px 30px;font-size:1em}.header{flex-direction:column;align-items:center;text-align:center;margin-bottom:20px}.user-info{align-items:center;margin-top:10px}#username-display{font-size:1.1em}#score-display{font-size:1em}.quiz-section{gap:15px}.verse-reference{padding:20px 15px}.verse-reference:before,.verse-reference:after{font-size:1.2em}.verse-reference:before{left:10px}.verse-reference:after{right:10px}.verse-reference h2{font-size:1.5em;letter-spacing:2px}.input-section{flex-direction:column;gap:10px}textarea{font-size:1em;min-height:80px;padding:12px}#check-button{width:100%;padding:15px}.result-message{font-size:1em;padding:12px;min-height:45px}.navigation{gap:10px}.navigation button{min-width:120px;flex:1}.progress{font-size:1.1em;padding:12px}.difficulty-section{margin:20px 0}.difficulty-buttons{flex-direction:column;gap:10px}.difficulty-btn{min-width:auto;width:100%}.start-btn{font-size:1.1em;padding:15px}.hint-text{font-size:1em;padding:15px}}@media(max-width:480px){body{padding:15px}.container{padding:20px 15px;margin:10px auto}h1{font-size:1.4em}.verse-reference h2{font-size:1.3em;letter-spacing:1px}.leaderboard{padding:15px}.navigation button{min-width:100px;font-size:.95em;padding:12px 20px}.progress{font-size:1em}textarea{min-height:70px}.difficulty-section h2{font-size:1.2em}.start-btn{font-size:1em}.hint-text{font-size:.95em;padding:12px}}@media(max-height:700px){body{padding:15px}.container{margin:15px auto}h1{margin-bottom:20px;font-size:2em}.quiz-section{gap:15px}textarea{min-height:80px}.verse-reference{padding:20px}}@media(max-height:600px){body{padding:10px}.container{padding:25px;margin:10px auto}h1{font-size:1.8em;margin-bottom:15px}.quiz-section{gap:12px}textarea{min-height:70px}.verse-reference{padding:15px}.result-message{min-height:40px;padding:10px}}