:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}#root{width:100%}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}}.landing-container{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);justify-content:center;align-items:center;height:100vh;display:flex}.hero-section{text-align:center;background:#fff;border-radius:20px;padding:60px;box-shadow:0 10px 25px #0000001a}.hero-section h1{color:#2c3e50;margin-bottom:20px;font-size:3rem}.hero-section p{color:#7f8c8d;margin-bottom:40px;font-size:1.2rem}.start-btn-large{color:#fff;cursor:pointer;background:#007bff;border:none;border-radius:50px;padding:18px 40px;font-size:1.5rem;font-weight:700;transition:transform .2s,background .2s}.start-btn-large:hover{background:#0056b3;transform:scale(1.05)}:root{--toeic-blue:#036;--toeic-light-gray:#f2f2f2;--toeic-border:#ccc;--toeic-red:#c00}.practice-container{text-align:center;color:#333;flex-direction:column;max-width:1000px;height:100vh;margin:0 auto;padding:0;font-family:Arial,sans-serif;display:flex}.test-header{background-color:var(--toeic-blue);color:#fff;justify-content:space-between;align-items:center;height:50px;padding:10px 20px;font-weight:700;display:flex}.test-header h2{text-transform:uppercase;letter-spacing:1px;margin:0;font-size:1.1rem}.test-status{background-color:#e0e0e0;border-bottom:2px solid #bbb;justify-content:center;align-items:center;height:60px;padding:8px 30px;display:flex;position:relative}.timer-box{border:2px solid var(--toeic-blue);background:#fff;border-radius:5px;flex-direction:column;align-items:center;padding:5px 20px;display:flex}.timer-label{color:var(--toeic-blue);text-transform:uppercase;font-size:.7rem;font-weight:700}.timer{color:var(--toeic-red);font-size:1.8rem;font-weight:800;line-height:1}.question-box{background-color:#fff;flex-direction:column;flex:1;justify-content:flex-start;align-items:center;padding:40px;display:flex;overflow-y:auto}.directions-view{text-align:center;max-width:800px}.directions-view h3{color:var(--toeic-blue);margin-bottom:30px;font-size:2rem;text-decoration:underline}.direction-text{color:#222;font-size:1.4rem;line-height:1.8}.chart-box{border:2px solid var(--toeic-blue);white-space:pre-wrap;background:#f0f4f8;font-family:monospace}.p3-display{width:100%;max-width:850px}.scenario-text{color:#555;text-align:left;border-left:5px solid var(--toeic-blue);background:#f0f0f0;border-radius:6px;margin-bottom:20px;padding:15px 20px;font-size:1.1rem;line-height:1.5}.p4-display{width:100%}.chart-container{text-align:center;width:100%;min-height:auto;box-shadow:none;background:#fff;border:none;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;padding:10px;display:flex;overflow:visible}.chart-container table{border-collapse:collapse;table-layout:auto;width:100%;max-width:1000px;font-size:1.1rem}.chart-container th,.chart-container td{text-align:center;border:1px solid #444;padding:8px 12px}.chart-container th{background-color:#f4f4f4;font-weight:700}.chart-line{margin-bottom:10px;font-family:Courier New,Courier,monospace;font-size:1.3rem;font-weight:700}.audio-visual-note{color:#999;font-size:.9rem;font-style:italic}.saving-view{text-align:center;max-width:600px}.saving-title{color:var(--toeic-red);border-bottom:3px solid var(--toeic-red);margin-bottom:20px;padding-bottom:10px;font-size:2.5rem;font-weight:900}.saving-content{color:#444;font-size:1.2rem;line-height:1.6}.responsive-img{object-fit:contain;border-radius:4px;max-width:100%;max-height:56vh}.image-container{border:4px solid var(--toeic-blue);background:#eee;justify-content:center;width:100%;max-height:67.5vh;margin-bottom:20px;padding:5px;display:flex}.system-check-overlay{z-index:2000;color:#fff;background:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.system-check-modal{color:#333;text-align:center;background:#fff;border-radius:20px;width:90%;max-width:450px;padding:40px;box-shadow:0 10px 30px #0000004d}.system-check-modal h2{color:var(--toeic-blue);margin-top:0}.status-item{background:#f8f9fa;border:1px solid #ddd;border-radius:10px;justify-content:space-between;align-items:center;margin:10px 0;padding:15px;display:flex}.status-label{font-size:1.1rem;font-weight:700}.status-indicator{border-radius:20px;padding:5px 12px;font-size:.9rem;font-weight:700}.status-indicator.pending{color:#856404;background:#ffeeba}.status-indicator.ok{color:#155724;background:#d4edda}.status-indicator.error{color:#721c24;background:#f8d7da}.sub-modal-overlay{z-index:3000;background:#000000e6;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.sub-modal{text-align:center;background:#fff;border-radius:15px;width:350px;padding:30px}.visualizer-container{background:#eee;border-radius:10px;justify-content:center;align-items:flex-end;gap:4px;height:100px;margin:20px 0;padding:10px;display:flex}.volume-bar{background:var(--toeic-blue);border-radius:2px 2px 0 0;width:20px;transition:height .1s}.audio-animation{justify-content:center;align-items:center;gap:5px;width:100%;height:60px;display:flex}.audio-bar{background:#c00;width:6px;height:20px;animation:1s ease-in-out infinite wave}@keyframes wave{0%,to{height:10px}50%{height:40px}}.audio-bar:nth-child(2){animation-delay:.1s}.audio-bar:nth-child(3){animation-delay:.2s}.audio-bar:nth-child(4){animation-delay:.3s}.audio-bar:nth-child(5){animation-delay:.4s}.check-instruction{color:#666;margin-top:20px;font-size:.95rem;line-height:1.5}.check-btn{background:var(--toeic-blue);color:#fff;cursor:pointer;border:none;border-radius:5px;margin-top:20px;padding:10px 25px}.check-btn:hover{background:#024}.results-container{text-align:center;max-width:1100px;margin:40px auto;padding:20px}.results-table{border-collapse:collapse;background:#fff;border-radius:10px;width:100%;margin:30px 0;overflow:hidden;box-shadow:0 4px 15px #0000001a}.results-table th{background-color:var(--toeic-blue);color:#fff;padding:15px;font-size:1.1rem}.results-table td{text-align:left;vertical-align:middle;border-bottom:1px solid #eee;padding:15px}.results-table tr:hover{background-color:#f9f9f9}.results-table .q-num{text-align:center;width:80px;font-weight:700}.results-table .audio-cell{width:300px}.results-table audio{width:250px;height:35px}.transcription-text{color:#444;white-space:pre-wrap;font-size:.95rem;line-height:1.5}.saving-overlay{z-index:1000;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.saving-modal{text-align:center;background:#fff;border-radius:15px;max-width:500px;padding:40px;box-shadow:0 5px 15px #0000004d}.results-grid{text-align:left;grid-template-columns:1fr 1fr;gap:30px;margin:30px 0;display:grid}.questions-list{border:1px solid #eee;border-radius:10px;max-height:600px;overflow-y:auto}.selected-row{border-left:5px solid var(--toeic-blue);background-color:#e3f2fd!important}.transcription-text-truncated{white-space:nowrap;text-overflow:ellipsis;color:#666;max-width:250px;font-size:.9rem;overflow:hidden}.evaluation-panel{background:#f8f9fa;border:1px solid #dee2e6;border-radius:10px;min-height:400px;padding:25px}.evaluation-panel h3{color:var(--toeic-blue);border-bottom:2px solid var(--toeic-blue);margin-top:0;padding-bottom:10px}.detail-view h4{color:#333;margin-bottom:20px}.feedback-section{margin-bottom:20px}.feedback-section h5{color:#555;margin:0 0 10px;font-size:1rem}.user-transcription{color:#444;background:#fff;border-left:4px solid #ccc;border-radius:5px;padding:15px;font-style:italic}.modified-answer{color:#1b5e20;background:#e8f5e9;border-left:4px solid #2e7d32;border-radius:5px;padding:20px;font-weight:500;line-height:1.6}.empty-selection{color:#999;justify-content:center;align-items:center;height:300px;font-style:italic;display:flex}.loading-feedback,.loading-report{color:var(--toeic-blue);text-align:center;padding:20px;font-weight:700;animation:1.5s infinite pulse}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.overall-report{text-align:center;background:#fff;border-radius:15px;margin-top:40px;padding:40px;box-shadow:0 10px 30px #0000001a}.overall-report h2{color:var(--toeic-blue);margin-bottom:30px}.report-content{flex-direction:column;align-items:center;gap:30px;display:flex}.score-box{background:var(--toeic-blue);color:#fff;border-radius:15px;flex-direction:column;gap:5px;padding:20px 40px;display:flex}.score-label{text-transform:uppercase;letter-spacing:1px;font-size:.9rem}.score-value{font-size:2.5rem;font-weight:900}.feedback-box{text-align:left;background:#fff3e0;border-top:5px solid #ff9800;border-radius:10px;width:100%;max-width:800px;padding:30px}.feedback-box h3{color:#e65100;margin-top:0}.feedback-box p{color:#4e342e;font-size:1.1rem;line-height:1.7}