/* KLCC Platform — Pulley Master Design Tokens 기반 공용 스타일 */
:root{
  --grey-0:#ffffff; --grey-5:#f9f9fb; --grey-10:#f2f3f6; --grey-20:#e5e6eb;
  --grey-30:#d1d3db; --grey-40:#bcbdc9; --grey-50:#9294a2; --grey-60:#6b6e84;
  --grey-70:#4e5068; --grey-80:#33354b; --grey-100:#020207;
  /* KSCA 상징색 — 기존 퍼플을 기관 블루로 교체 */
  --purple-5:#e9f3f7; --purple-50:#1586ac; --purple-60:#0f5c76;
  --red-5:#fde6e6; --red-50:#e42939;
  --green-5:#e3f8ef; --green-50:#03b26c; --green-60:#02a262;
  --orange-5:#fff2de; --orange-50:#fe9800;
  --lblue-5:#ecf7fc; --lblue-50:#3dc2ff; --lblue-60:#21aaea;

  --text-strong:var(--grey-100); --text-normal:var(--grey-80); --text-sub:var(--grey-60);
  --text-disable:var(--grey-30); --text-inverse:var(--grey-0);
  --text-success:var(--green-60); --text-danger:var(--red-50);
  --text-accent:var(--lblue-60); --text-primary:var(--purple-60); --text-secondary:var(--grey-70);

  --fill-primary:var(--purple-50); --fill-primary-weak:var(--purple-5);
  --fill-secondary:var(--grey-70); --fill-normal:var(--grey-5); --fill-hover:var(--grey-10);
  --fill-press:var(--grey-20); --fill-muted:var(--grey-20); --fill-disable:var(--grey-30);
  --fill-inverse:var(--grey-0); --fill-success:var(--green-50); --fill-success-weak:var(--green-5);
  --fill-danger:var(--red-50); --fill-danger-weak:var(--red-5);
  --fill-warning:var(--orange-50); --fill-warning-weak:var(--orange-5);
  --fill-accent:var(--lblue-50); --fill-accent-weak:var(--lblue-5);

  --line-primary:var(--purple-50); --line-normal:var(--grey-20); --line-danger:var(--red-50);
  --bg-body:var(--grey-0); --bg-card:var(--grey-5); --bg-alert:var(--grey-0);

  --shadow-card:0 1px 3px rgba(2,2,7,.06); --shadow-raised:0 4px 16px rgba(2,2,7,.10);
  --shadow-modal:0 12px 40px rgba(2,2,7,.18);
  --r-8:8px; --r-10:10px; --r-12:12px; --r-16:16px; --r-20:20px; --r-max:100px;
  --font-base:'Pretendard JP','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-body:#0b0b12; --bg-card:#15161f; --bg-alert:#181926;
    --text-strong:#f5f5f9; --text-normal:#cdd0e0; --text-sub:#9698ae; --text-disable:#454759;
    --line-normal:#2a2c3d;
    --fill-normal:#181926; --fill-hover:#1d1f2d; --fill-press:#262838; --fill-muted:#242637;
    --fill-disable:#3a3c4d; --fill-inverse:#1d1f2d; --fill-primary:#3aa6c6; --fill-primary-weak:#10323e;
    --fill-secondary:#3a3d55;
    --fill-success-weak:rgba(3,178,108,.16); --fill-danger-weak:rgba(228,41,57,.18);
    --fill-warning-weak:rgba(254,152,0,.16); --fill-accent-weak:rgba(61,194,255,.16);
    --text-success:#3ee0a4; --text-danger:#ff7a83; --text-accent:#5cd2ff; --text-primary:#7fcde3;
    --text-secondary:#c3c5da;
    --shadow-card:0 1px 3px rgba(0,0,0,.35); --shadow-raised:0 8px 24px rgba(0,0,0,.45);
    --shadow-modal:0 16px 48px rgba(0,0,0,.55);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-base);background:var(--bg-body);color:var(--text-normal);
  -webkit-font-smoothing:antialiased;min-height:100vh}
button,input,select,textarea{font-family:inherit}
a{color:var(--text-primary)}
::selection{background:var(--fill-primary-weak);color:var(--text-primary)}

.t-title-2{font-size:28px;font-weight:700;line-height:1.5}
.t-title-3{font-size:24px;font-weight:700;line-height:1.5}
.t-heading-2{font-size:20px;font-weight:600;line-height:1.5}
.t-heading-3{font-size:18px;font-weight:600;line-height:1.5}
.t-body-2{font-size:16px;font-weight:400;line-height:1.5}
.t-body-3{font-size:14px;font-weight:400;line-height:1.5}
.t-label-1{font-size:14px;font-weight:600;line-height:1.5}
.t-label-2{font-size:13px;font-weight:600;line-height:1.5}
.t-caption-1{font-size:12px;font-weight:600;line-height:1.3}
.t-sub{color:var(--text-sub)} .t-strong{color:var(--text-strong)}
.tabular{font-variant-numeric:tabular-nums}
@media (max-width:767px){.t-title-2{font-size:24px}.t-title-3{font-size:22px}}

.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}
.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.between{justify-content:space-between}.wrap{flex-wrap:wrap}
.grid{display:grid;gap:20px}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-2{grid-template-columns:1.6fr 1fr}
@media (max-width:1023px){.grid-2{grid-template-columns:1fr}}
.hr{height:1px;background:var(--line-normal);border:none;margin:0}
.hidden{display:none!important}

.card{background:var(--bg-card);border:1px solid var(--line-normal);border-radius:var(--r-16);box-shadow:var(--shadow-card)}
.card-pad{padding:20px}

.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-max);font-size:12px;font-weight:700;white-space:nowrap}
.chip-success{background:var(--fill-success-weak);color:var(--text-success)}
.chip-danger{background:var(--fill-danger-weak);color:var(--text-danger)}
.chip-warning{background:var(--fill-warning-weak);color:var(--orange-50)}
.chip-accent{background:var(--fill-accent-weak);color:var(--text-accent)}
.chip-neutral{background:var(--fill-muted);color:var(--text-sub)}
.chip-primary{background:var(--fill-primary-weak);color:var(--text-primary)}

.progress{height:8px;border-radius:var(--r-max);background:var(--fill-muted);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--fill-primary);border-radius:var(--r-max)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-weight:700;line-height:1;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--line-primary);outline-offset:2px}
.btn[disabled]{background:var(--fill-disable)!important;color:var(--text-disable)!important;cursor:not-allowed}
.btn-lg{height:48px;padding:0 20px;border-radius:var(--r-12);font-size:15px}
.btn-md{height:40px;padding:0 16px;border-radius:var(--r-10);font-size:14px}
.btn-sm{height:32px;padding:0 12px;border-radius:var(--r-8);font-size:13px}
.btn-primary{background:var(--fill-primary);color:var(--text-inverse)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{background:var(--fill-secondary);color:var(--text-inverse)}
.btn-primary-weak{background:var(--fill-primary-weak);color:var(--text-primary)}
.btn-line{background:var(--fill-inverse);color:var(--text-secondary);border:1px solid var(--line-normal)}
.btn-line:hover{background:var(--fill-hover)}
.btn-danger{background:var(--fill-danger);color:var(--text-inverse)}
.btn-danger-weak{background:var(--fill-danger-weak);color:var(--text-danger)}
.btn-text{background:transparent;color:var(--text-sub);height:auto;padding:0}
.btn-text:hover{color:var(--text-normal)}

.input{background:var(--fill-normal);border:1px solid var(--line-normal);color:var(--text-normal);
  border-radius:var(--r-12);height:48px;padding:0 16px;font-size:14px;width:100%}
textarea.input{height:auto;padding:12px 16px;resize:vertical;line-height:1.5}
select.input{appearance:auto}
.input::placeholder{color:var(--text-sub)}
.input:focus{outline:none;border-color:var(--line-primary)}
label.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text-sub)}

.table-wrap{overflow-x:auto;border-radius:var(--r-16);border:1px solid var(--line-normal)}
table.table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.table th{text-align:left;color:var(--text-sub);font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;padding:12px 16px;background:var(--fill-normal);border-bottom:1px solid var(--line-normal);white-space:nowrap}
table.table td{padding:13px 16px;border-bottom:1px solid var(--line-normal);vertical-align:middle}
table.table tr:last-child td{border-bottom:none}
table.table tbody tr:hover td{background:var(--fill-hover)}

.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;height:64px;
  padding:0 24px;background:var(--bg-alert);border-bottom:1px solid var(--line-normal)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text-strong);white-space:nowrap}
.brand .mark{width:32px;height:32px;border-radius:var(--r-8);background:var(--fill-primary);
  color:var(--text-inverse);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none}
.topbar .spacer{flex:1}

.shell{max-width:1600px;margin:0 auto;display:flex;min-height:calc(100vh - 64px)}
.sidebar{width:230px;flex:none;padding:20px 12px;border-right:1px solid var(--line-normal);display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-10);
  color:var(--text-sub);font-size:14px;font-weight:600;cursor:pointer;border:none;background:none;text-align:left;width:100%}
.nav-item:hover{background:var(--fill-hover);color:var(--text-normal)}
.nav-item.active{background:var(--fill-primary-weak);color:var(--text-primary)}
.nav-item:focus-visible{outline:2px solid var(--line-primary);outline-offset:-1px}
.content{flex:1;min-width:0;padding:28px 32px 80px;display:flex;flex-direction:column;gap:24px}
.page{display:none;flex-direction:column;gap:24px}
.page.active{display:flex}
@media (max-width:1023px){
  .shell{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line-normal);padding:10px 16px;gap:8px}
  .nav-item{white-space:nowrap;width:auto}
  .content{padding:20px}
}

.toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:var(--r-12);font-size:14px;font-weight:600;box-shadow:var(--shadow-raised)}
.toast.ok{background:var(--fill-success-weak);color:var(--text-success)}
.toast.err{background:var(--fill-danger-weak);color:var(--text-danger)}

.modal-dim{position:fixed;inset:0;background:rgba(78,80,104,.35);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bg-alert);border-radius:var(--r-20);box-shadow:var(--shadow-modal);
  padding:24px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:16px}

.video-slot{aspect-ratio:16/9;border-radius:var(--r-16);border:1.5px dashed var(--line-normal);
  background:var(--fill-normal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-sub)}
video.player{width:100%;aspect-ratio:16/9;border-radius:var(--r-16);background:#000;display:block}

.empty{padding:40px 20px;text-align:center;color:var(--text-sub);font-size:14px}
.badge-role{font-size:11px;font-weight:800;padding:3px 10px;border-radius:var(--r-max);
  background:var(--fill-primary-weak);color:var(--text-primary)}

.site-footer{padding:32px 20px 40px;text-align:center;font-size:12px;color:var(--text-sub);
  border-top:1px solid var(--line-normal);margin-top:auto}

/* 강의 이수 도장 — 시청 완료 + 확인 퀴즈 통과 */
.pass-stamp{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 14px;border-radius:var(--r-max);
  background:var(--fill-success);color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:.06em;
  box-shadow:0 1px 4px rgba(3,178,108,.35);
}

/* 퀴즈 선택지 — 긴 문장도 줄바꿈되도록 (.btn의 nowrap 무효화) */
.quiz-opt{
  display:flex;align-items:flex-start;gap:10px;width:100%;
  white-space:normal;word-break:keep-all;overflow-wrap:anywhere;
  text-align:left;line-height:1.55;height:auto;
  padding:14px 18px;font-size:15px;font-weight:500;
}
.quiz-opt .num{flex:none;font-weight:800;color:var(--text-primary)}
.quiz-q{word-break:keep-all;line-height:1.5}