: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}}.template-btn{color:var(--toeic-blue);border:2px solid var(--toeic-blue);cursor:pointer;background:#fff;border-radius:50px;margin-top:15px;padding:12px 30px;font-size:1.1rem;font-weight:700;transition:all .2s}.template-btn:hover{background:var(--toeic-blue);color:#fff}.overview-modal-content{text-align:left!important;width:95%!important;max-width:800px!important}.overview-header{text-align:center;margin-bottom:25px}.overview-header h1{color:var(--toeic-blue);margin-bottom:10px;font-size:1.8rem}.accordion-container{flex-direction:column;gap:12px;display:flex}.accordion-item{background:#fff;border:1px solid #e0e0e0;border-radius:10px;transition:box-shadow .2s;overflow:hidden}.accordion-item:hover{box-shadow:0 4px 12px #0000000d}.accordion-header{cursor:pointer;color:#333;text-align:left;background:#f8f9fa;border:none;justify-content:space-between;align-items:center;width:100%;padding:18px 20px;font-size:1.1rem;font-weight:700;display:flex}.accordion-header:hover{background:#eef2f7}.accordion-item.active .accordion-header{background:var(--toeic-blue);color:#fff}.accordion-icon{font-size:1.2rem;transition:transform .2s}.accordion-item.active .accordion-icon{transform:rotate(180deg)}.accordion-content{max-height:0;padding:0;transition:max-height .3s ease-out,padding .3s;overflow:hidden}.accordion-item.active .accordion-content{max-height:2000px;padding:20px}.overview-section ul{padding-left:20px;line-height:1.8}.overview-section li{margin-bottom:8px}.part-grid{grid-template-columns:1fr 1fr;gap:15px;display:grid}.part-card{border-left:4px solid var(--toeic-blue);background:#f0f7ff;border-radius:4px;padding:15px}.part-card h3{color:var(--toeic-blue);margin:0 0 10px;font-size:1rem}.part-card p{margin:5px 0;font-size:.9rem}.table-wrap{width:100%;margin-top:10px;overflow-x:auto}.overview-table{border-collapse:collapse;width:100%;font-size:.9rem}.overview-table th,.overview-table td{text-align:center;border:1px solid #dee2e6;padding:12px}.overview-table th{background:#f1f3f5;font-weight:700}.overview-table td:first-child{text-align:left;background:#f8f9fa;font-weight:700}.level-table th:nth-child(2),.level-table td:nth-child(2){width:100px}@media (width<=600px){.part-grid{grid-template-columns:1fr}}.category-selector{flex-direction:column;gap:15px;margin-top:20px;display:flex}.category-btn{cursor:pointer;text-align:left;background:#f8f9fa;border:1px solid #ddd;border-radius:10px;padding:15px;font-size:1.1rem;font-weight:700;transition:all .2s}.category-btn:hover{border-color:var(--toeic-blue);background:#eef2f7}.sub-options{gap:10px;margin-top:10px;padding-left:20px;display:flex}.sub-option-btn{border:1px solid var(--toeic-blue);color:var(--toeic-blue);cursor:pointer;background:#fff;border-radius:5px;padding:8px 20px;font-size:.9rem;transition:all .2s}.sub-option-btn:hover{background:#f0f4f8}.sub-option-btn.active{background:var(--toeic-blue);color:#fff}.sub-option-btn.saved{color:#28a745;background:#f0fff4;border-color:#28a745}.sub-option-btn.saved.active{color:#fff;background:#28a745}.template-detail-container{text-align:left;border-top:1px dashed #ccc;margin-top:20px;padding-top:20px}.question-format-info{background:#f0f7ff;border-left:4px solid #007bff;border-radius:8px;margin-bottom:20px;padding:15px}.question-format-info h4{color:#0056b3;margin:0 0 5px;font-size:.9rem}.question-format-info p{color:#333;margin:0;font-size:1rem}.level-tabs{gap:5px;margin-bottom:15px;display:flex}.level-tab-btn{cursor:pointer;background:#eee;border:1px solid #ddd;border-radius:5px;flex:1;padding:10px;font-size:.85rem;font-weight:700;transition:all .2s}.level-tab-btn.active{color:#fff;background:#333;border-color:#333}.template-sentences-box{background:#fff;border:1px solid #ddd;border-radius:8px;min-height:150px;padding:20px;box-shadow:inset 0 2px 4px #0000000d}.custom-logic-list{flex-direction:column;gap:15px;max-height:400px;margin-top:15px;padding-right:10px;display:flex;overflow-y:auto}.custom-logic-item{background:#fff;border:1px solid #ddd;border-radius:8px;flex-direction:column;gap:8px;padding:15px;display:flex;position:relative}.custom-logic-input-group{flex-direction:column;gap:4px;display:flex}.custom-logic-input-group label{color:#888;font-size:.75rem;font-weight:700}.custom-logic-input{border:1px solid #eee;border-radius:4px;padding:8px 12px;font-size:.95rem}.custom-logic-input:focus{border-color:var(--toeic-blue);outline:none}.remove-custom-logic-btn{color:#ff4d4f;cursor:pointer;background:0 0;border:none;padding:0;font-size:1.2rem;line-height:1;position:absolute;top:10px;right:10px}.add-custom-logic-btn{background:var(--toeic-blue);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;margin:15px auto;font-size:1.5rem;transition:transform .2s;display:flex;box-shadow:0 2px 8px #0363}.add-custom-logic-btn:hover{transform:scale(1.1)}.custom-template-textarea{resize:vertical;border:1px solid #ddd;border-radius:8px;width:100%;min-height:150px;padding:15px;font-family:inherit;font-size:1rem;line-height:1.5;box-shadow:inset 0 2px 4px #0000000d}.custom-template-textarea:focus{border-color:var(--toeic-blue);outline:none}.template-actions{gap:10px;margin-top:20px;display:flex}.template-actions .save-template-btn{flex:2;margin-top:0}.clear-template-btn{color:#fff;cursor:pointer;background:#dc3545;border:none;border-radius:8px;flex:1;padding:15px;font-size:1.1rem;font-weight:700;transition:background .2s}.clear-template-btn:hover{background:#c82333}.template-sentence{margin-bottom:15px}.template-sentence:last-child{margin-bottom:0}.sentence-label{color:#888;margin-bottom:4px;font-size:.75rem;font-weight:700;display:block}.sentence-text{color:#222;border-left:2px solid #eee;padding-left:10px;font-size:1rem;line-height:1.5;display:block}.logic-template-list{flex-direction:column;gap:12px;max-height:400px;margin-top:15px;padding-right:10px;display:flex;overflow-y:auto}.logic-template-item{cursor:pointer;background:#f8f9fa;border:1px solid #ddd;border-radius:8px;align-items:flex-start;gap:12px;padding:12px;transition:all .2s;display:flex}.logic-template-item:hover{border-color:var(--toeic-blue);background:#eef2f7}.logic-template-item.selected{border-color:var(--toeic-blue);background:#e3f2fd;box-shadow:0 2px 8px #0033661a}.logic-checkbox{cursor:pointer;width:18px;height:18px;margin-top:3px}.saved-badge{color:#28a745;background:#e6fffa;border:1px solid #28a745;border-radius:3px;margin-left:8px;padding:1px 4px;font-size:.7rem;font-weight:700}.logic-info{flex:1}.custom-logic-entry-area{border:1px solid var(--toeic-blue);background:#f0f4f8;border-radius:8px;margin-bottom:20px;padding:15px}.add-logic-btn{background:var(--toeic-blue);color:#fff;cursor:pointer;border:none;border-radius:5px;width:100%;margin-top:10px;padding:10px;font-weight:700}.add-logic-btn:hover{background:#024}.logic-name{color:var(--toeic-blue);margin-bottom:4px;font-size:1rem;font-weight:700;display:block}.logic-example{color:#666;font-size:.9rem;font-style:italic;line-height:1.4;display:block}.save-template-btn{color:#fff;cursor:pointer;background:#28a745;border:none;border-radius:8px;width:100%;margin-top:20px;padding:15px;font-size:1.1rem;font-weight:700;transition:background .2s}.save-template-btn:hover{background:#218838}.save-template-btn:disabled{cursor:not-allowed;background:#ccc}.close-modal-btn{cursor:pointer;color:#999;background:0 0;border:none;font-size:1.5rem;position:absolute;top:15px;right:15px}.close-modal-btn:hover{color:#333}.template-note{color:#666;background:#fff8e1;border-left:4px solid #ffc107;border-radius:5px;margin-bottom:20px;padding:10px;font-size:.9rem}.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}.criteria-stars{background:#fff;border:1px solid #eee;border-radius:8px;margin:15px 0;padding:15px}.criterion-row{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.criterion-row:last-child{margin-bottom:0}.criterion-name{color:#555;font-size:.9rem;font-weight:700}.star-display{color:#ffc107;letter-spacing:2px;font-size:1.1rem}.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}