:root{
  --bg-body:#F4F6FA;
  --white:#fff;
  --text-dark:#202532;
  --text-muted:#667085;
  --border:#E3E8F2;
  --primary:#6C5CE7;
  --primary-dark:#5546D6;
  --primary-soft:#F1EEFF;
  --success:#12B886;
  --danger:#F04438;
  --warning:#F59F00;
  --shadow:0 14px 40px rgba(25,33,61,.08);
  --radius:24px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Pretendard',sans-serif;background:var(--bg-body);color:var(--text-dark);}
#app-wrapper{display:flex;min-height:100vh;width:100vw;}
#loading-overlay{position:fixed;inset:0;background:rgba(255,255,255,.82);display:none;align-items:center;justify-content:center;z-index:9999;}
.spinner{width:42px;height:42px;border:4px solid #E6E9F3;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;}@keyframes spin{to{transform:rotate(360deg)}}
.unlock-main{flex:1;min-width:0;padding:32px 42px;overflow:auto;}
.unlock-page{max-width:1180px;margin:0 auto;}
.unlock-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px;padding:22px 24px;border:1px solid var(--border);border-radius:28px;background:linear-gradient(135deg,#fff 0%,#F8F7FF 100%);box-shadow:var(--shadow);}
.unlock-kicker{margin:0 0 8px;font-size:.78rem;font-weight:950;letter-spacing:.08em;color:var(--primary);}
.unlock-header h1{margin:0;font-size:2rem;letter-spacing:-.05em;font-weight:950;}
.unlock-header p{margin:8px 0 0;color:var(--text-muted);font-size:.96rem;font-weight:700;}
.unlock-header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.btn-primary,.btn-subtle,.btn-danger{border:0;border-radius:14px;padding:12px 16px;font-weight:950;letter-spacing:-.02em;cursor:pointer;transition:.18s ease;white-space:nowrap;}
.btn-primary{background:var(--primary);color:white;box-shadow:0 10px 20px rgba(108,92,231,.18);}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);}
.btn-primary:disabled,.btn-subtle:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-subtle{background:#F3F5FA;color:#3A4151;border:1px solid #E2E7F0;}
.btn-subtle:hover{background:#ECEFFC;}
.btn-danger{background:#FFF1F0;color:var(--danger);border:1px solid #FFD8D5;}
.unlock-status-grid{display:grid;grid-template-columns:1.2fr 1.2fr .9fr .9fr;gap:14px;margin-bottom:14px;}
.unlock-status-card{background:var(--white);border:1px solid var(--border);border-radius:22px;padding:18px 20px;box-shadow:0 8px 24px rgba(25,33,61,.045);}
.unlock-status-card.primary{border-color:#D7D0FF;background:linear-gradient(180deg,#fff 0%,#FAF9FF 100%);}
.unlock-status-card span{display:block;font-size:.78rem;font-weight:950;color:#7A8294;margin-bottom:8px;}
.unlock-status-card b{display:block;font-size:1.55rem;font-weight:950;letter-spacing:-.045em;}
.unlock-status-card small{display:block;margin-top:6px;color:var(--text-muted);font-size:.85rem;font-weight:700;line-height:1.45;}
.unlock-admin-card,.unlock-test-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;}
.unlock-admin-card{padding:20px;}
.unlock-admin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;}
.unlock-admin-head strong{font-size:1.08rem;font-weight:950;}
.unlock-admin-head p{margin:5px 0 0;color:var(--text-muted);font-size:.9rem;font-weight:700;}
.unlock-course-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.unlock-course-tabs a{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:#F8FAFE;color:#4B5567;text-decoration:none;font-size:.86rem;font-weight:900;}
.unlock-course-tabs a.active{background:var(--primary-soft);border-color:#D9D2FF;color:var(--primary-dark);}
.unlock-single-route{display:inline-flex;align-items:center;padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:#F8FAFE;color:#4B5567;font-size:.86rem;font-weight:900;}
.unlock-admin-grid{display:grid;grid-template-columns:180px 1fr 1.1fr;gap:12px;margin-bottom:12px;}
.unlock-field{display:flex;flex-direction:column;gap:7px;font-size:.82rem;font-weight:950;color:#525A6B;}
.unlock-field.wide{grid-column:auto;}
.unlock-field input,.unlock-field select,.unlock-field textarea{width:100%;border:1px solid #DDE3EE;border-radius:14px;background:#FBFCFF;padding:12px 13px;font:inherit;font-weight:700;color:var(--text-dark);outline:none;}
.unlock-field textarea{min-height:170px;resize:vertical;line-height:1.7;white-space:pre-wrap;}
.unlock-field input:focus,.unlock-field select:focus,.unlock-field textarea:focus{border-color:#C7BCFF;box-shadow:0 0 0 4px rgba(108,92,231,.1);background:#fff;}
.unlock-admin-files,.unlock-admin-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.unlock-admin-files input[type=file]{display:none;}
.file-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #DDE3EE;background:#F8FAFE;border-radius:14px;padding:11px 14px;font-weight:950;cursor:pointer;}
#unlockAdminAudioName,#unlockAdminEditorialAudioName{font-size:.86rem;font-weight:800;color:var(--text-muted);}
.unlock-subject-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;}
.unlock-subject-admin-card{border:1px solid #E4E9F4;background:#FBFCFF;border-radius:20px;padding:16px;}
.unlock-subject-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.unlock-subject-title b{font-size:1rem;font-weight:950;color:#202532;}
.unlock-subject-title span{font-size:.82rem;font-weight:850;color:var(--text-muted);}
.unlock-test-card{overflow:hidden;}
.unlock-test-ready{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:28px;min-height:160px;}
.unlock-lock-icon{width:66px;height:66px;border-radius:22px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:2rem;box-shadow:inset 0 0 0 1px #DDD6FF;}
.unlock-test-ready h2,.unlock-live-top h2{margin:0;font-size:1.4rem;font-weight:950;letter-spacing:-.04em;}
.unlock-test-ready p,.unlock-live-top p{margin:8px 0 0;color:var(--text-muted);font-weight:750;line-height:1.55;}
.btn-start{padding:14px 22px;font-size:1rem;}
.unlock-live-panel{padding:24px;}
.unlock-live-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px;}
.live-badge{display:inline-flex;margin-bottom:8px;border-radius:999px;background:#E9FBF4;color:#087F5B;border:1px solid #C3F3DF;padding:6px 10px;font-size:.78rem;font-weight:950;}
.unlock-timer{font-size:1.5rem;font-weight:950;background:#101828;color:#fff;border-radius:16px;padding:10px 14px;min-width:94px;text-align:center;}
.unlock-subject-work{display:block;}
.unlock-audio-display{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;border:1px solid #E4E9F4;border-radius:20px;background:#F9FAFE;padding:16px;margin-bottom:10px;}
.audio-wave{display:flex;align-items:center;gap:4px;width:46px;height:34px;}
.audio-wave i{display:block;width:5px;border-radius:999px;background:var(--primary);animation:wave 1s ease-in-out infinite;}
.audio-wave i:nth-child(1){height:16px;animation-delay:.05s}.audio-wave i:nth-child(2){height:28px;animation-delay:.12s}.audio-wave i:nth-child(3){height:20px;animation-delay:.18s}.audio-wave i:nth-child(4){height:32px;animation-delay:.25s}.audio-wave i:nth-child(5){height:14px;animation-delay:.32s}@keyframes wave{0%,100%{transform:scaleY(.55);opacity:.55}50%{transform:scaleY(1);opacity:1}}
.unlock-audio-display strong{display:block;font-size:1rem;font-weight:950;}
.unlock-audio-display small{display:block;margin-top:4px;color:var(--text-muted);font-size:.84rem;font-weight:750;}
.unlock-audio-time{font-weight:950;color:#3C4354;}
.unlock-progress{height:8px;border-radius:999px;background:#E9EDF5;overflow:hidden;margin-bottom:16px;}
.unlock-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#9B8CFF);border-radius:999px;transition:width .2s ease;}
#unlockTypingArea{width:100%;min-height:340px;border:1px solid #DCE2EE;border-radius:22px;background:#fff;padding:22px;font-size:1.12rem;font-family:'Pretendard',sans-serif;font-weight:650;line-height:1.85;resize:vertical;outline:none;}
#unlockTypingArea:focus{border-color:#C7BCFF;box-shadow:0 0 0 5px rgba(108,92,231,.09);}
.unlock-submit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;}
.unlock-submit-row span{color:var(--text-muted);font-weight:900;}
.unlock-break-panel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;border:1px solid #E5DEFF;background:linear-gradient(135deg,#fff 0%,#F6F3FF 100%);border-radius:24px;padding:24px;margin-top:8px;}
.unlock-break-icon{width:58px;height:58px;border-radius:20px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:1.8rem;}
.unlock-break-panel h3{margin:0 0 6px;font-size:1.22rem;font-weight:950;letter-spacing:-.04em;}
.unlock-break-panel p{margin:0;color:var(--text-muted);font-weight:800;line-height:1.55;}
#unlockBreakTimer{color:var(--primary);font-weight:950;}
.unlock-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.46);z-index:9998;padding:18px;}
.unlock-modal-box{position:relative;width:min(440px,100%);background:#fff;border-radius:28px;padding:34px 30px;text-align:center;box-shadow:0 28px 80px rgba(15,23,42,.26);}
.modal-close{position:absolute;right:16px;top:14px;border:0;background:transparent;font-size:1.6rem;cursor:pointer;color:#737B8C;}
.unlock-result-mark{font-size:2.4rem;margin-bottom:8px;}
.unlock-modal-box h2{margin:0 0 12px;font-size:1.55rem;font-weight:950;letter-spacing:-.04em;}
.unlock-result-label{display:inline-flex;margin:0 auto 4px;padding:5px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-size:.78rem;font-weight:950;}
.unlock-result-score{font-size:3.5rem;font-weight:950;color:var(--primary);letter-spacing:-.06em;margin:4px 0 10px;}
.unlock-result-details{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px;}
.unlock-result-details span{border:1px solid #E4E9F4;background:#F9FAFE;border-radius:16px;padding:10px 8px;color:#667085;font-size:.82rem;font-weight:900;}
.unlock-result-details b{display:block;margin-top:3px;color:#202532;font-size:1.05rem;font-weight:950;}
.unlock-modal-box p{margin:0 0 22px;color:var(--text-muted);font-weight:800;line-height:1.6;}
body.unlock-active .sidebar,body.unlock-active .mobile-menu-btn{pointer-events:none;filter:saturate(.8);}
@media(max-width:980px){.unlock-main{padding:22px 16px}.unlock-header,.unlock-live-top{flex-direction:column}.unlock-status-grid{grid-template-columns:1fr}.unlock-admin-grid,.unlock-subject-admin-grid{grid-template-columns:1fr}.unlock-test-ready{grid-template-columns:1fr;text-align:left}.unlock-audio-display,.unlock-break-panel{grid-template-columns:1fr}.unlock-audio-time{text-align:left}.unlock-result-details{grid-template-columns:1fr}}


/* 20260601 승급 평가 과목별 점수 표시 */
.unlock-subject-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
}
.unlock-subject-score-card {
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px 14px;
  text-align: left;
}
.unlock-subject-score-card span {
  display: block;
  color: #64748b;
  font-size: .82rem;
  font-weight: 900;
  margin-bottom: 4px;
}
.unlock-subject-score-card b {
  display: block;
  color: #111827;
  font-size: 1.25rem;
  font-weight: 950;
}
.unlock-subject-score-card small {
  display: block;
  color: #64748b;
  font-size: .78rem;
  margin-top: 4px;
}
@media (max-width: 560px) {
  .unlock-subject-score-grid { grid-template-columns: 1fr; }
}