@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap");*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;overflow-x:hidden}body{font-family:Noto Sans KR,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#fff;color:#1f2937;line-height:1.6}.kordle-container{display:flex;flex-direction:column;min-height:100vh;max-width:500px;margin:0 auto;padding:0 16px;position:relative}.streak-display{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,#ff6b35,#ff8e35);color:#fff;padding:8px 16px;border-radius:20px;font-size:1.1rem;font-weight:700;box-shadow:0 4px 12px rgba(255,107,53,.3);z-index:1000;animation:streakGlow 1.5s ease-in-out infinite alternate;display:flex;align-items:center;gap:6px}@keyframes streakGlow{0%{box-shadow:0 4px 12px rgba(255,107,53,.3)}to{box-shadow:0 6px 20px rgba(255,107,53,.5)}}.debug-answer{position:absolute;top:10px;right:10px;background-color:rgba(255,0,0,.9);color:#fff;padding:8px 12px;border-radius:4px;font-size:.7rem;font-weight:700;z-index:1000;line-height:1.2;max-width:200px}.error-message{background-color:rgba(255,0,0,.1);border:1px solid #f44;color:#f44;padding:8px 16px;border-radius:4px;text-align:center;margin:10px 0;font-weight:700;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes invalidShake{0%,to{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}.modal-content{background-color:#fff;border-radius:8px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.2);border:1px solid #e5e7eb}.modal-header{display:flex;justify-content:between;align-items:center;padding:20px 24px 0;margin-bottom:16px}.modal-header h2{font-size:1.5rem;font-weight:700;color:#1f2937;margin:0;flex:1 1;text-align:center}.modal-close-button{background:none;border:none;color:#6b7280;font-size:1.5rem;cursor:pointer;padding:0;position:absolute;right:20px;top:20px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.modal-close-button:hover{color:#1f2937}.modal-body{padding:0 24px 24px}.tutorial-description{color:#4b5563;line-height:1.6;margin-bottom:24px;font-size:.95rem}.tutorial-example{margin-bottom:20px}.tutorial-row{gap:2px;margin-bottom:8px}.tutorial-cell,.tutorial-row{display:flex;justify-content:center}.tutorial-cell{width:36px;height:36px;border:2px solid #d1d5db;border-radius:4px;align-items:center;font-size:1.1rem;font-weight:700;color:#1f2937;background-color:transparent}.tutorial-cell.correct{background-color:#22c55e;border-color:#22c55e;color:#fff}.tutorial-cell.present{background-color:#eab308;border-color:#eab308;color:#fff}.tutorial-cell.absent{background-color:#94a3b8;border-color:#94a3b8;color:#fff}.tutorial-cell.invalid{background-color:rgba(255,68,68,.3);border-color:#f44;color:#f44}.tutorial-cell.decomposed{background-color:transparent;border-color:#d1d5db;color:#ec4899}.tutorial-explanation{color:#4b5563;font-size:.9rem;text-align:center;margin:0}.tutorial-footer{color:#6b7280;font-size:.85rem;text-align:center;margin-top:20px;margin-bottom:0;font-style:italic}.stats-modal{max-width:400px}.stats-summary{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:16px;gap:16px;margin-bottom:24px;text-align:center}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-number{font-size:2rem;font-weight:700;color:#1f2937;line-height:1;margin-bottom:4px}.stat-label{font-size:.7rem;color:#6b7280;text-align:center;line-height:1.2}.distribution-section h3{color:#1f2937;font-size:1rem;margin-bottom:16px;text-align:center}.distribution-chart{display:flex;flex-direction:column;gap:4px}.distribution-row{display:flex;align-items:center;gap:8px}.attempt-number{width:12px;color:#1f2937;font-weight:700;text-align:center;font-size:.9rem}.bar-container{flex:1 1;height:20px;background-color:#e5e7eb;border-radius:2px;overflow:hidden}.bar{height:100%;background-color:#22c55e;display:flex;align-items:center;justify-content:flex-end;padding-right:4px;transition:width .3s ease;position:relative}.bar-count{color:#fff;font-size:.7rem;font-weight:700}.kordle-header{text-align:center;padding:20px 0;border-bottom:1px solid #e5e7eb;margin-bottom:30px}.title-container{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.kordle-title{font-size:2rem;font-weight:700;color:#1f2937;margin:0;letter-spacing:-.05em}.header-buttons{display:flex;align-items:center;gap:8px;margin-top:-4px}.help-button,.stats-button{width:32px;height:32px;border-radius:50%;border:2px solid #000;background-color:transparent;color:#000;font-size:1.2rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.help-button:hover,.stats-button:hover{border-color:#000;color:#000;background-color:rgba(0,0,0,.1)}.stats-button{font-size:1rem}.stats-icon{display:flex;align-items:flex-end;justify-content:center;gap:2px;width:16px;height:12px}.stats-icon .bar{background-color:currentColor;border-radius:1px;width:3px;transition:background-color .2s ease}.stats-icon .bar1{height:4px}.stats-icon .bar2{height:7px}.stats-icon .bar3{height:10px}.stats-icon .bar4{height:6px}.kordle-subtitle{font-size:1rem;color:#6b7280;font-weight:400}.kordle-game{display:flex;flex-direction:column;align-items:center;gap:30px;flex:1 1;padding-bottom:30px}.game-board{display:grid;grid-template-rows:repeat(6,1fr);grid-gap:5px;gap:5px;padding:10px 0}.game-row{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:5px;gap:5px}.game-cell{width:52px;height:52px;border:2px solid #d1d5db;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#1f2937;transition:all .2s ease-in-out}.game-cell,.game-cell.empty{background-color:transparent}.game-cell.empty{border-color:#d1d5db}.game-cell.filled{border-color:#9ca3af;background-color:transparent;animation:pop .1s ease-in-out}.game-cell.current{border-color:#6b7280}.game-cell.correct{background-color:#22c55e;border-color:#22c55e}.game-cell.correct,.game-cell.present{color:#fff;animation:flip-in .6s ease-in-out}.game-cell.present{background-color:#eab308;border-color:#eab308}.game-cell.absent{background-color:#94a3b8;border-color:#94a3b8;color:#fff;animation:flip-in .6s ease-in-out}.game-cell.invalid{background-color:rgba(255,68,68,.2);border:2px solid #f44;color:#f44;animation:invalidShake .5s ease-in-out}.korean-keyboard{flex-direction:column;gap:8px;width:100%;max-width:484px}.keyboard-row,.korean-keyboard{display:flex;align-items:center}.keyboard-row{gap:6px}.key-button{height:58px;border-radius:4px;border:none;font-family:inherit;font-weight:700;font-size:.9rem;color:#1f2937;background-color:#e5e7eb;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:43px;flex:1 1}.key-button:hover{background-color:#d1d5db}.key-button:active{transform:scale(.96)}.delete-key,.enter-key{flex:1.5 1;font-size:.75rem;min-width:65px}.key-button.correct{background-color:#22c55e;color:#fff}.key-button.present{background-color:#eab308;color:#fff}.key-button.absent{background-color:#94a3b8;color:#fff}.key-button.unused{background-color:#e5e7eb;color:#1f2937}.game-result{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#121213;border:2px solid #3a3a3c;border-radius:8px;padding:30px;text-align:center;z-index:1000;min-width:300px;box-shadow:0 10px 30px rgba(0,0,0,.5)}.lose-message h2,.win-message h2{margin-bottom:15px;font-size:1.5rem}.lose-message p,.win-message p{margin-bottom:10px;color:#818384}.restart-button{background-color:#22c55e;color:#fff;border:none;border-radius:4px;padding:12px 24px;font-size:1rem;font-weight:600;cursor:pointer;margin-top:20px;transition:background-color .2s ease}.restart-button:hover{background-color:#16a34a}.restart-section{margin-top:24px;padding-top:24px;border-top:1px solid #e5e7eb;text-align:center}.key-management-modal{max-width:600px;max-height:85vh}.user-id-section{margin-bottom:32px;padding:16px;background-color:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.user-id-section h3{color:#1f2937;font-size:1.1rem;margin-bottom:8px;font-weight:600}.user-id-display{margin:8px 0}.user-id-display code{background-color:#fff;color:#374151;padding:8px 12px;border-radius:4px;font-family:Courier New,monospace;font-size:.9rem;border:1px solid #d1d5db;display:inline-block}.user-id-description{font-size:.85rem;color:#6b7280;margin-top:4px}.export-section,.import-section{margin-bottom:32px}.export-section h3,.import-section h3{color:#1f2937;font-size:1.1rem;margin-bottom:8px;font-weight:600}.section-description{color:#6b7280;font-size:.9rem;margin-bottom:16px}.export-button,.import-button{background-color:#22c55e;color:#fff;border:none;border-radius:6px;padding:10px 20px;font-size:.95rem;font-weight:600;cursor:pointer;transition:background-color .2s ease}.export-button:hover,.import-button:hover{background-color:#16a34a}.export-result{margin-top:16px}.export-result label{display:block;color:#374151;font-weight:500;margin-bottom:8px}.key-display{position:relative}.key-textarea{width:100%;padding:12px;border:2px solid #d1d5db;border-radius:6px;font-family:Courier New,monospace;font-size:.8rem;resize:vertical;min-height:80px;line-height:1.4;color:#1f2937;background-color:#fff}.key-textarea:focus{outline:none;border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.1)}.key-textarea::placeholder{color:#9ca3af}.copy-button{position:absolute;top:8px;right:8px;background-color:#6b7280;color:#fff;border:none;border-radius:4px;padding:6px 10px;font-size:.8rem;cursor:pointer;transition:background-color .2s ease}.copy-button:hover{background-color:#4b5563}.key-info{color:#f59e0b;font-size:.85rem;margin-top:8px;padding:8px 12px;background-color:#fef3c7;border-radius:4px;border-left:4px solid #f59e0b}.import-input{margin-bottom:16px}.import-input label{display:block;color:#374151;font-weight:500;margin-bottom:8px}.message{padding:12px 16px;border-radius:6px;margin:16px 0;font-weight:500}.message.success{background-color:#d1fae5;color:#065f46;border:1px solid #a7f3d0}.message.error{background-color:#fee2e2;color:#991b1b;border:1px solid #fecaca}.info-section{margin-top:24px;padding:16px;background-color:#f0f9ff;border-radius:8px;border:1px solid #bae6fd}.info-section h4{color:#1e40af;font-size:1rem;margin-bottom:12px;font-weight:600}.info-section ul{color:#1e40af;font-size:.9rem;line-height:1.5;margin-left:20px}.info-section li{margin-bottom:4px}.backup-button{width:32px;height:32px;border-radius:50%;border:2px solid #000;background-color:transparent;color:#000;font-size:1.2rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.backup-button:hover{border-color:#000;color:#000;background-color:rgba(0,0,0,.1)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes flip-in{0%{transform:rotateX(0deg)}50%{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@media (max-width:480px){.kordle-container{padding:0 12px}.kordle-title{font-size:1.8rem}.game-cell{width:45px;height:45px;font-size:1.2rem}.key-button{height:50px;font-size:.8rem;min-width:35px}.delete-key,.enter-key{min-width:55px;font-size:.7rem}.game-result{margin:0 20px;min-width:auto;width:calc(100% - 40px)}}@media (max-width:360px){.game-cell{width:40px;height:40px;font-size:1rem}.key-button{height:45px;font-size:.75rem;min-width:30px}}.toast-popup{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;padding:16px 24px;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.15);font-weight:600;font-size:.95rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.3);min-width:280px;max-width:400px;word-wrap:break-word;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.toast-popup.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}.toast-popup.hide{opacity:0;transform:translateX(-50%) translateY(-10px);pointer-events:none}.toast-popup.success{background:linear-gradient(135deg,rgba(34,197,94,.95),rgba(22,163,74,.95));color:#fff}.toast-popup.error{background:linear-gradient(135deg,rgba(239,68,68,.95),rgba(220,38,38,.95));color:#fff}.toast-popup.info{background:linear-gradient(135deg,rgba(59,130,246,.95),rgba(37,99,235,.95));color:#fff}.toast-content{display:flex;align-items:center;justify-content:center}.toast-message{line-height:1.4;text-align:center}@media (max-width:768px){.toast-popup{top:16px;left:16px;right:16px;max-width:none;min-width:auto;font-size:.9rem;padding:14px 20px}.toast-popup,.toast-popup.show{transform:none}.toast-popup.hide{transform:translateY(-10px)}}.solution-section{margin:20px 0;text-align:center}.solution-section h3{margin:0 0 12px;color:#374151;font-size:1rem;font-weight:500}.solution-display{display:flex;justify-content:center;align-items:center}.solution-text{font-size:1rem;color:#374151;line-height:1.5}.solution-text strong{color:#dc2626;font-weight:600;font-size:1.1rem}