@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css");
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap");

:root{
  --ink:#1A1C20; --ink2:#2E3035; --muted:#62656A;
  --paper:#F2F5FA; --card:#FFFFFF; --line:#E3E5EA;
  --nest:#055CF5; --nest-d:#0447C2; --sprout:#C9DDFD; --sprout-l:#EFF7FF; --on:#FFFFFF; --on2:rgba(255,255,255,.78);
  --yolk:#F2B53A; --yolk-l:#FDF1D6;
  --bad:#B4432F; --bad-l:#F8E3DE;
  --serif:"Gowun Batang","Nanum Myeongjo",serif;
  --sans:"SUIT Variable","SUIT","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:14.5px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
a{color:var(--nest)}
:focus-visible{outline:2px solid var(--nest);outline-offset:2px;border-radius:6px}

/* ---------- 버튼·입력 ---------- */
button{font:inherit;font-weight:600;border:0;border-radius:10px;padding:9px 16px;background:var(--nest);color:#fff;cursor:pointer;transition:background .15s,transform .12s var(--ease)}
button:hover{background:var(--nest-d)}
button:active{transform:scale(.97)}
button:disabled{opacity:.5;cursor:default}
button.ghost{background:transparent;color:var(--ink2);border:1px solid var(--line)}
button.ghost:hover{background:var(--card);color:var(--ink)}
button.small{padding:5px 11px;font-size:12.5px;border-radius:8px}
input,select,textarea{font:inherit;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--card);color:var(--ink);transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--nest);box-shadow:0 0 0 3px var(--sprout-l)}
textarea{width:100%;min-height:96px;resize:vertical}

/* ---------- 로그인 (첫인상) ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);background:var(--card)}
.login-hero{background:var(--nest);color:var(--on);padding:56px clamp(28px,6vw,88px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.wordmark{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.wordmark svg{flex:none;color:var(--nest)}.login-hero .wordmark svg{color:#fff}
.login-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4.6vw,58px);line-height:1.22;letter-spacing:-.02em;margin:0 0 18px;max-width:12em}
.login-hero p.lead{font-size:16px;color:var(--on2);max-width:30em;margin:0}
.journey{width:100%;height:auto;margin:36px 0 8px;overflow:visible}
.journey .track{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2}
.journey .draw{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round}
.journey .node{fill:var(--nest);stroke:#fff;stroke-width:2}
.journey .yolk{fill:var(--yolk)}
.journey text{fill:var(--on2);font-size:12.5px;font-family:var(--sans)}
.journey text.big{fill:#fff;font-weight:700}
.login-form{display:grid;align-content:center;padding:48px clamp(24px,5vw,64px)}
.login-form form{display:grid;gap:14px;max-width:360px;width:100%}
.login-form h2{font-family:var(--serif);font-size:24px;margin:0}
.login-form label{display:grid;gap:6px;font-size:13px;color:var(--ink2);font-weight:600}
.login-form button{padding:12px;font-size:15px;margin-top:4px}
.err{color:var(--bad);min-height:1.2em;margin:0;font-size:13px}
.muted{color:var(--muted)}
@media (max-width:860px){.login{grid-template-columns:1fr}.login-hero{padding:36px 24px}.journey{margin-top:24px}}

/* ---------- 상단 ---------- */
.top{display:flex;align-items:center;gap:20px;padding:0 28px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;min-height:60px;flex-wrap:wrap}
.top .wordmark{color:var(--ink)}
#nav{display:flex;gap:2px;flex-wrap:wrap;flex:1;align-self:stretch}
#nav button{background:transparent;color:var(--ink2);border-radius:0;padding:0 12px;font-weight:600;position:relative;min-height:60px}
#nav button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--nest);transform:scaleX(0);transition:transform .25s var(--ease)}
#nav button:hover{color:var(--ink);background:transparent}
#nav button.on{color:var(--ink)}
#nav button.on::after{transform:scaleX(1)}
.who{display:flex;align-items:center;gap:10px;font-size:13px}
.badge{background:var(--sprout-l);color:var(--nest-d);padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700}
.viewas{background:var(--yolk-l);color:#7A5410;padding:8px 28px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;border-bottom:1px solid #F0DDB0}
.viewas button.ghost{background:#fff}

/* ---------- 본문 ---------- */
main{padding:28px;max-width:1240px;margin:0 auto}
main.swap{animation:swap .28s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
body.embed main{padding:14px;max-width:none}
h2{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
h2 + .sub{color:var(--muted);margin:0 0 20px}
h3{font-size:15px;font-weight:700;margin:0 0 12px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.stat .v{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{color:var(--ink2);font-size:12.5px;font-weight:600}
.stat .s{color:var(--muted);font-size:12px}
.note{font-size:12.5px;color:var(--muted)}
.empty{color:var(--muted);padding:28px;text-align:center}

/* ---------- 흐름 띠 (대시보드) ---------- */
.funnel{background:var(--nest);color:var(--on);border-radius:20px;padding:24px 24px 18px;margin-bottom:18px}
.funnel h3{color:#fff;font-family:var(--serif);font-size:19px;font-weight:700;margin:0}
.funnel .sub{color:var(--on2);font-size:13px;margin:2px 0 14px}
.funnel svg{width:100%;height:auto;display:block}
.funnel .band{fill:#fff}
.funnel .band.last{fill:var(--yolk)}
.funnel .cnt{fill:#fff;font-weight:800;font-size:26px;font-family:var(--sans)}
.funnel .lab{fill:var(--on2);font-size:12.5px;font-family:var(--sans)}
.funnel .rate{fill:#fff;font-size:12px;font-family:var(--sans);font-weight:700}

/* ---------- 표 ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:12.5px;background:var(--card);position:sticky;top:0;z-index:1}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
.scroll{overflow:auto;max-height:70vh}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--sprout-l)}
.bar{height:6px;background:#E8EEEB;border-radius:99px;overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:var(--nest);border-radius:99px;transform-origin:left;animation:grow .7s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:#EDF1EF;color:var(--ink2)}
.pill.ok{background:var(--sprout-l);color:var(--nest-d)}
.pill.bad{background:var(--bad-l);color:var(--bad)}
.pill.warn{background:var(--yolk-l);color:#8A5D0B}
.cell-ok{background:var(--sprout-l)}
.cell-mid{background:var(--yolk-l)}
.cell-bad{background:var(--bad-l)}

/* ---------- 모니터링 카드 ---------- */
.list{display:grid;gap:12px}
.mon{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card);display:grid;gap:8px;border-left:4px solid var(--sprout)}
.mon.fail{border-left-color:var(--bad)}
.mon .head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}
.mon .checks{display:flex;gap:6px;flex-wrap:wrap}
.mon .comment{white-space:pre-wrap;background:var(--paper);border-radius:10px;padding:10px 12px;font-size:13.5px;max-height:5.6em;overflow:hidden;position:relative;transition:max-height .35s var(--ease)}
.mon .comment.long::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.2em;background:linear-gradient(transparent,var(--paper))}
.mon .comment.open{max-height:60em}
.mon .comment.open::after{display:none}
.mon .more{background:none;color:var(--nest);padding:0;font-size:12.5px;justify-self:start}
.ack-done{display:inline-flex;align-items:center;gap:6px;color:var(--nest-d);font-weight:700;font-size:13px;animation:pop .35s var(--ease)}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:none;opacity:1}}

/* ---------- 인사이트·폼 ---------- */
.insight{padding:12px 16px;background:var(--card);border-radius:12px;border:1px solid var(--line)}
.insight b{font-size:15px}
.insight .meta{color:var(--muted);font-size:12px;margin-top:4px}
.insight .body{white-space:pre-wrap;color:var(--ink2);margin-top:4px}
.form{display:grid;gap:10px}
.form .row{display:flex;gap:8px;flex-wrap:wrap}
.form .row>*{flex:1;min-width:150px}

/* ---------- 상세 패널 ---------- */
#detail .card{animation:open .35s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- 커리큘럼 (시간표) ---------- */
.legend{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.cur-card{padding:0;overflow:hidden;margin-bottom:20px;border:0;box-shadow:0 1px 0 var(--line),0 8px 24px -16px rgba(5,92,245,.35)}
.cur-head{display:flex;align-items:baseline;gap:14px;padding:18px 22px 16px;background:linear-gradient(100deg,var(--nest) 0%,#3C82FF 100%);color:#fff;position:relative;overflow:hidden}
.cur-head::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
.cur-head h3{font-family:var(--serif);font-size:30px;margin:0;line-height:1;color:#fff}
.cur-head .note{color:rgba(255,255,255,.8)}
.cur-card .scroll{max-height:none;padding:6px 10px 14px}
.cur{border-collapse:separate;border-spacing:6px 3px;width:100%;table-layout:fixed}
.cur th{background:transparent;color:var(--ink2);font-weight:700;font-size:13px;text-align:left;padding:10px 6px 6px;position:sticky;top:0}
.cur th:first-child,.cur td.time{width:46px}
.cur th.today{color:var(--nest)}
.cur th.today::before{content:"오늘";display:block;font-size:11px;color:#fff;background:var(--nest);border-radius:99px;padding:0 8px;width:max-content;margin-bottom:3px}
.cur td{border:0;padding:0;font-size:12.5px;vertical-align:top;height:26px}
.cur td.time{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;padding-top:2px;text-align:right;padding-right:6px}
.cur td.blank{background:transparent}
.cur td.lunch{background:repeating-linear-gradient(-45deg,#F4F6FA 0 6px,#EEF1F6 6px 12px);border-radius:8px;color:var(--muted);font-size:11.5px;text-align:center;vertical-align:middle}
.cur td.sess{height:100%}
.sbtn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;gap:6px;width:100%;height:100%;min-height:48px;padding:9px 10px 8px 12px;border-radius:12px;background:var(--bg);color:var(--fg);position:relative;
  box-shadow:inset 4px 0 0 var(--fg);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.sbtn:hover{transform:translateY(-2px);box-shadow:inset 4px 0 0 var(--fg),0 10px 18px -12px var(--fg)}
.sbtn:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.sbtn .st{font-weight:700;line-height:1.35;color:var(--fg)}
.sbtn .has{font-size:11px;opacity:.7}
.sbtn .inst{font-size:11.5px;color:var(--ink2);opacity:.85}
.sbtn .inst:not(:empty)::before{content:attr(data-x);}
.cur td.today .sbtn{outline:2px solid var(--nest);outline-offset:1px}
td.sess[style*="#8A5D0B"] .sbtn{background:repeating-linear-gradient(135deg,var(--bg) 0 10px,#FBE7B8 10px 12px)}

/* ---------- 교육자료 창 ---------- */
#drawer{position:fixed;inset:0;z-index:30;pointer-events:none}
#drawer .dr-back{position:absolute;inset:0;background:rgba(10,20,40,.35);opacity:0;transition:opacity .25s}
#drawer .dr{position:absolute;top:0;right:0;bottom:0;width:min(720px,100vw);background:#fff;padding:20px 24px;display:flex;flex-direction:column;gap:10px;transform:translateX(100%);transition:transform .32s var(--ease);box-shadow:-20px 0 40px -20px rgba(10,20,40,.35);border-top:6px solid var(--fg)}
#drawer.on{pointer-events:auto}
#drawer.on .dr-back{opacity:1}
#drawer.on .dr{transform:none}
#drawer header{display:flex;justify-content:space-between;align-items:center}
#drawer h3{font-family:var(--serif);font-size:24px;margin:4px 0 0}
#drawer iframe{flex:1;width:100%;min-height:320px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
#drawer a{align-self:flex-start}
/* ---------- 교육생 첫 화면 ---------- */
.welcome{background:var(--nest);color:var(--on);border-radius:20px;padding:28px 28px 20px;margin-bottom:20px;overflow:hidden}
.welcome h2{color:#fff;font-size:clamp(24px,3vw,32px);margin:0 0 6px}
.welcome p{color:var(--on2);margin:0}
.welcome .journey{margin:20px 0 0}
.today-list{display:grid;gap:8px}
.today-item{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.today-item:last-child{border-bottom:0}
.today-item .t{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700}
.today-item.test .s{font-weight:700}
.today-item.test .s::after{content:"시험";margin-left:8px;font-size:11.5px;padding:1px 7px;border-radius:99px;background:var(--yolk-l);color:#8A5D0B;vertical-align:2px}

/* ---------- 출결 ---------- */
.att td.y{background:var(--sprout-l);text-align:center;color:var(--nest-d)}
.att td.n{background:var(--bad-l);text-align:center;color:var(--bad)}

@media (max-width:720px){main{padding:18px}.top{padding:0 16px}#nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}#nav button{min-height:44px;white-space:nowrap}.g2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.journey .draw{stroke-dashoffset:0!important}}

/* ---------- 로고·로그인 탭·지각 ---------- */
.wordmark .logo{height:22px;width:auto;display:block}
.login-hero .wordmark .logo{filter:brightness(0) invert(1)}
.wordmark .wm-sep{width:1px;height:16px;background:currentColor;opacity:.3}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border-radius:12px;padding:4px;gap:4px}
.seg button{background:transparent;color:var(--ink2);padding:8px;border-radius:9px;margin:0;font-size:14px}
.seg button:hover{background:#fff}
.seg button[aria-selected="true"]{background:#fff;color:var(--nest);box-shadow:0 1px 3px rgba(5,92,245,.15)}
#loginForm[data-mode="cohort"] .only-staff,#loginForm[data-mode="staff"] .only-cohort{display:none}
.att td{text-align:center;font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.att td:first-child{text-align:left}
.att td.l{background:var(--yolk-l);color:#8A5D0B}
.att sup{color:var(--bad);font-weight:700}
.att .note{font-size:11px}

/* ---------- 훈련 과정 ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.tabs button{background:#fff;color:var(--ink2);border:1px solid var(--line);border-radius:99px;padding:8px 16px}
.tabs button[aria-selected="true"]{background:var(--nest);color:#fff;border-color:var(--nest)}
.guide-hero{background:linear-gradient(110deg,var(--nest) 0%,#3C82FF 100%);color:#fff;border-radius:20px;padding:26px 26px 22px;position:relative;overflow:hidden}
.guide-hero::after{content:"";position:absolute;right:-60px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08)}
.guide-hero h3{font-family:var(--serif);font-size:24px;margin:0 0 6px;color:#fff}
.guide-hero p{margin:0;color:rgba(255,255,255,.85);max-width:46em}
.flow{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;counter-reset:f}
.flow li{counter-increment:f;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:14px;display:grid;gap:4px;animation:rise .45s var(--ease) both;animation-delay:calc(var(--i) * 90ms)}
.flow li::before{content:counter(f);width:26px;height:26px;border-radius:50%;background:#fff;color:var(--nest);font-weight:800;display:grid;place-items:center;font-size:13px}
.flow li b{font-size:15px}.flow li span{font-size:13px;color:rgba(255,255,255,.85)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quad div{background:var(--paper);border-radius:12px;padding:12px;display:grid;gap:3px}
.quad b{color:var(--nest)}.quad span{font-size:13px;color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--sprout-l);color:var(--nest-d);border-radius:99px;padding:5px 6px 5px 12px;font-size:13px;font-weight:600}
.chip i{font-style:normal;background:#fff;border-radius:99px;padding:0 7px;font-size:11.5px;color:var(--nest)}
.steps{display:grid;gap:8px}
.step.sbtn{flex-direction:row;align-items:center;gap:12px;min-height:0;padding:12px 14px 12px 16px}
.step .n{width:26px;height:26px;flex:none;border-radius:50%;background:#fff;color:var(--fg);font-weight:800;display:grid;place-items:center;font-size:12.5px}
.step > span:nth-child(2){flex:1;display:grid;gap:2px}
.step .go{font-size:12px;font-weight:700;color:var(--fg);white-space:nowrap}
.scen{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff}
.scen summary{cursor:pointer;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.scen dl{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin:12px 0 4px;font-size:13.5px}
.scen dt{color:var(--muted);font-weight:700}.scen dd{margin:0}
/* ---------- 내 성취도 ---------- */
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:18px}
.meter{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:14px}
.meter .mt{font-size:13px;color:rgba(255,255,255,.85);font-weight:600}
.meter .mv{font-size:30px;font-weight:800;letter-spacing:-.02em}
.meter .mbar{height:8px;background:rgba(255,255,255,.2);border-radius:99px;position:relative;margin:6px 0}
.meter .mbar i{display:block;height:100%;background:#fff;border-radius:99px;transform-origin:left;animation:grow .8s var(--ease) both}
.meter .mbar b{position:absolute;top:-4px;width:3px;height:16px;background:var(--yolk);border-radius:2px;transform:translateX(-1px)}
.meter .ms{font-size:12px;color:rgba(255,255,255,.75)}
@media (max-width:720px){.quad{grid-template-columns:1fr}.scen dl{grid-template-columns:1fr}}
.res td:nth-child(-n+3),.res th:nth-child(-n+3){white-space:nowrap;word-break:keep-all}
.res td:nth-child(n+4){min-width:220px}
.quad b small{font-weight:600;color:var(--muted);margin-left:4px}

/* 커리큘럼 칸 정렬: 날짜 칸 같은 너비, 30분 = 36px, 수업 블록이 칸을 꽉 채움 */
.cur{table-layout:fixed;border-spacing:6px 0}
.cur col.c-time{width:52px}
.cur tbody tr{height:36px}
.cur td{height:36px;padding:0}
.cur td.sess{position:relative;padding:2px 0}
.cur td.sess .sbtn{position:absolute;inset:2px 0;min-height:0;overflow:hidden}
.cur td.lunch{height:30px}
.sbtn .st{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cur td.sess[rowspan="1"] .sbtn{flex-direction:row;align-items:center;padding:4px 10px 4px 12px}
.cur td.sess[rowspan="1"] .st{-webkit-line-clamp:1}
.cur td.sess[rowspan="1"] .inst{display:none}

/* 로그인 화면: 영문 제목 + 상담 대화 모션 */
.login-hero h1.en{font-family:var(--sans);font-weight:800;font-size:clamp(48px,6.4vw,88px);line-height:.98;letter-spacing:-.045em;max-width:none;margin:0 0 20px}
.lm{position:relative;margin:34px 0 6px;height:270px;max-width:560px}
.lm .orbit{position:absolute;left:-8%;top:-6%;width:116%;height:112%;overflow:visible;pointer-events:none}
.lm .ring ellipse{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.4}
.lm .ring.r2 ellipse{stroke-dasharray:3 9}
.lm .ring.r3 ellipse{stroke:rgba(255,255,255,.12)}
.lm .ring{transform-box:view-box;transform-origin:300px 150px}
.lm .r1{animation:lmSpin 46s linear infinite}
.lm .r2{animation:lmSpin 70s linear infinite reverse}
.lm .r3{animation:lmSpin 34s linear infinite}
.lm .sat{fill:var(--yolk)}
@keyframes lmSpin{to{transform:rotate(360deg)}}
.lm .chat{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:0 6%}
.lm .chat.out{animation:lmOut .55s ease forwards}
@keyframes lmOut{to{opacity:0;transform:translateY(-14px)}}
.lm .bub{max-width:72%;padding:10px 16px;border-radius:18px;font-size:15px;line-height:1.4;opacity:0;transform:translateY(14px) scale(.94);animation:lmIn .5s cubic-bezier(.3,1.35,.5,1) forwards}
.lm .bub.c{align-self:flex-start;background:rgba(255,255,255,.15);color:#fff;border-bottom-left-radius:6px;backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.lm .bub.a{align-self:flex-end;background:#fff;color:var(--nest);font-weight:600;border-bottom-right-radius:6px;transform-origin:right bottom}
.lm .bub.c{transform-origin:left bottom}
.lm .bub.t{align-self:flex-end;background:#fff;display:flex;gap:5px;padding:14px 16px;border-bottom-right-radius:6px}
.lm .bub.t i{width:7px;height:7px;border-radius:50%;background:var(--nest);animation:lmDot 1s ease-in-out infinite}
.lm .bub.t i:nth-child(2){animation-delay:.15s}.lm .bub.t i:nth-child(3){animation-delay:.3s}
@keyframes lmDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-4px)}}
.lm .bub.done{align-self:center;background:var(--yolk);color:#3b2a00;font-size:13px;font-weight:700;border-radius:99px;padding:6px 14px;margin-top:4px}
@keyframes lmIn{to{opacity:1;transform:none}}
@media (max-width:860px){.lm{height:240px;margin-top:22px}.lm .bub{font-size:14px}}

/* 메인 화면 환영 배너: 왼쪽 글, 오른쪽 대화 모션 */
.welcome.wm-motion{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);align-items:center;gap:24px;overflow:hidden}
.welcome .wk{display:block;font-weight:800;font-size:15px;letter-spacing:-.01em;color:rgba(255,255,255,.7);margin-bottom:10px}
.welcome .lm{margin:0;height:230px}
@media (max-width:860px){.welcome.wm-motion{grid-template-columns:1fr}.welcome .lm{height:210px}}
/* 고리는 한 바퀴 돌지 않고 살짝 흔들리게 (제목·글 위로 넘어오지 않도록) */
.lm .r1{animation:lmSway 18s ease-in-out infinite alternate}
.lm .r2{animation:lmSway 26s ease-in-out infinite alternate-reverse}
.lm .r3{animation:lmSway 14s ease-in-out infinite alternate}
@keyframes lmSway{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}

/* 수업 창: 옆 서랍 → 가운데에서 앞으로 튀어나오는 카드. 뒤 화면은 파랗게 덮지 않고 살짝 흐리게 */
#drawer{display:grid;place-items:center;padding:4vh 4vw}
#drawer .dr-back{background:rgba(246,248,252,.55);backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);transition:opacity .3s}
#drawer.closing .dr-back{opacity:0}
#drawer .dr{position:relative;inset:auto;width:min(980px,100%);height:min(88vh,860px);border-radius:22px;border-top:0;padding:22px 26px 24px;transform:none;transition:none;visibility:hidden;overflow:hidden;
  box-shadow:0 2px 0 0 var(--fg) inset,0 40px 90px -30px rgba(5,40,110,.45),0 12px 30px -12px rgba(5,40,110,.25)}
#drawer.on .dr{visibility:visible}
#drawer .dr::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--fg)}
#drawer .dr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 48%,transparent 60%);transform:translateX(-120%)}
#drawer.on:not(.closing) .dr::after{animation:drShine .9s .35s cubic-bezier(.4,0,.2,1) both}
@keyframes drShine{to{transform:translateX(120%)}}
.sbtn.glow{animation:tileGlow .7s ease-out}
@keyframes tileGlow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fg) 55%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@media (max-width:700px){#drawer{padding:0}#drawer .dr{height:100%;border-radius:0}}

/* 수업 칸에 커서: 파랗게 덮지 않고 제 색 그대로 살짝 떠오름 */
button.sbtn:hover{background:var(--bg);color:var(--fg);transform:translateY(-3px);filter:saturate(1.15) brightness(1.02);
  box-shadow:inset 4px 0 0 var(--fg),0 0 0 1.5px color-mix(in srgb,var(--fg) 35%,transparent),0 14px 22px -14px var(--fg)}
.sbtn{transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s,filter .18s}
/* 날짜 옆 일차 */
.cur thead th .dn{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--nest-l,#E8F0FF);color:var(--nest);font-size:11.5px;font-weight:700;vertical-align:1px}
.cur thead th.today .dn{background:var(--nest);color:#fff}

/* 교육 확인서 */
.confirm{display:flex;flex-direction:column;gap:16px;max-width:820px}
.cf-info{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px 16px}
.cf-info label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink2)}
.confirm .doc h3{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.confirm .doc h3 .dn{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--nest);color:#fff;font-size:13px;font-family:var(--sans)}
.confirm .doc ul{margin:0 0 14px;padding-left:20px;line-height:1.7}
.sig{position:relative;height:150px;border:1.5px dashed #B9C7E6;border-radius:14px;background:#FAFCFF;transition:border-color .2s,background .2s}
.sig canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sig-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#9AA8C4;font-size:14px;pointer-events:none;transition:opacity .2s}
.sig.signed{border-style:solid;border-color:var(--nest);background:#fff}
.sig.signed .sig-hint{opacity:0}
.sig-clear{position:absolute;right:8px;top:8px}
.agree{display:flex;align-items:center;gap:8px;font-weight:600}
.agree input{width:18px;height:18px}
.cf-submit{align-self:flex-start;padding:12px 28px}
.confirm-done{text-align:center;padding:48px 24px;max-width:560px;margin:24px auto}
.cd-check svg{width:72px;height:72px}
.cd-check circle{fill:none;stroke:var(--nest);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:cdDraw .6s ease-out forwards}
.cd-check path{fill:none;stroke:var(--nest);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:cdDraw .35s .5s ease-out forwards}
@keyframes cdDraw{to{stroke-dashoffset:0}}
.cf-nudge{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 18px;padding:14px 18px;border-radius:14px;background:#FFF6E0;border:1px solid #F2D58A;color:#5A4100;text-decoration:none}
.cf-nudge span{font-weight:700;color:var(--nest)}
.cf-nudge:hover{background:#FFEFC7}

/* ---------- 로그인 구분 (교육생 / 교육팀) ---------- */
.who-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.who-tabs button{background:transparent;color:var(--muted);border:0;border-radius:9px;padding:9px 0;font-weight:700;transition:background .2s,color .2s,box-shadow .2s}
.who-tabs button:hover{background:rgba(5,92,245,.06);color:var(--ink)}
.who-tabs button[aria-selected="true"]{background:#fff;color:var(--nest);box-shadow:0 1px 0 var(--line),0 4px 12px -6px rgba(5,92,245,.45)}
#loginForm[data-type="trainee"] .f-staff,#loginForm[data-type="staff"] .f-trainee{display:none}

/* ---------- 교육팀 화면 ---------- */
.gen-bar{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin:0 0 14px;scrollbar-width:thin}
.gen-bar button{flex:none;display:grid;justify-items:center;gap:1px;background:#fff;color:var(--ink2);border:1px solid var(--line);border-radius:12px;padding:7px 14px;font-weight:700;position:relative}
.gen-bar button small{font-weight:500;font-size:11px;color:var(--muted)}
.gen-bar button i{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:#2DB37A}
.gen-bar button:hover{background:var(--sprout-l);color:var(--nest-d)}
.gen-bar button[aria-selected="true"]{background:var(--nest);border-color:var(--nest);color:#fff}
.gen-bar button[aria-selected="true"] small{color:rgba(255,255,255,.8)}
.cohort-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.cohort-head h2{margin:0 0 4px}
.kpis{display:flex;gap:10px}
.kpis div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 16px;min-width:108px}
.kpis b{display:block;font-size:22px;font-variant-numeric:tabular-nums}
.kpis b small{font-size:13px;color:var(--muted);font-weight:600}
.kpis span{font-size:12px;color:var(--muted)}
.roster tbody tr{cursor:pointer;transition:background .15s}
.roster tbody tr:hover,.roster tbody tr:focus-visible{background:var(--sprout-l);outline:none}
.roster td.go{color:var(--nest);font-size:12px;white-space:nowrap;opacity:0;transition:opacity .15s}
.roster tr:hover td.go,.roster tr:focus-visible td.go{opacity:1}
.roster td,.roster th{white-space:nowrap}
.back{margin-bottom:14px}.card.scroll:has(.roster){max-height:none;padding:6px 8px}
.res.roster td:nth-child(n+4){min-width:0}
.res.roster th.num,.res.roster td.num{width:88px}
.res.roster td:first-child{width:90px}
/* ---------- 커리큘럼 표 (교수자별 색 · 30분 칸 · 점심 한 줄) ---------- */
.cur-notice{margin:-4px 0 10px}
.cur.sched{border-spacing:0;border-collapse:collapse}
.cur.sched col.c-time{width:92px}
.cur.sched th,.cur.sched td{border:1px solid var(--line)}
.cur.sched thead th{background:#FBF4DE;text-align:center;padding:8px 6px;color:#4B5563;font-size:13.5px}
.cur.sched thead th.wk{font-size:12.5px;color:var(--muted)}
.cur.sched thead th .dn{display:block;margin:0 0 2px;padding:0;background:none;color:#B08A1E;font-size:12px;letter-spacing:.3px}
.cur.sched thead th .dd{display:block}
.cur.sched thead th.today{background:#EAF1FF}
.cur.sched thead th.today .dn{background:none;color:var(--nest)}
.cur.sched thead th.today::before{margin:0 auto 3px}
.cur.sched td.time{background:#F8FAFC;text-align:center;padding:0 2px;font-size:11.5px;white-space:nowrap;vertical-align:middle}
.cur.sched td.lunch{background:#F1F3F7;border-radius:0;font-weight:700;color:#8A93A3;font-size:13px;height:34px}
.cur.sched td.sess{padding:0}
.cur.sched td.sess .sbtn{inset:0;border-radius:0;background:var(--bg);color:var(--ink);border-left:4px solid var(--line);align-items:center;justify-content:center;text-align:center;gap:3px;padding:6px 8px}
.cur.sched .sbtn .st{color:var(--ink);font-size:13px;word-break:keep-all}
.cur.sched .sbtn .inst{font-size:11.5px;color:#5B6472;opacity:1}
.cur.sched .sbtn .mat{font-size:10.5px;font-weight:700;color:var(--nest-d)}
.cur.sched .sbtn .mat::before{content:"▸ "}
.cur.sched td.sess[rowspan="1"] .sbtn{flex-direction:column;padding:2px 8px}
.cur.sched td.sess[rowspan="1"] .mat{display:none}
.cur.sched button.sbtn:hover{background:var(--bg);color:var(--ink);transform:none;filter:brightness(.96);box-shadow:inset 0 0 0 2px var(--line)}
.cur.sched td.today .sbtn{outline:2px solid var(--nest);outline-offset:-2px}

/* ---------- 궤도 모션 (대화 말풍선 없이) ---------- */
.lm .sat.s2{fill:#fff;opacity:.85}
.welcome .lm .sat.s2{fill:var(--nest)}

/* ---------- 교육 확인서 (원본 서류 양식) ---------- */
.confirm{max-width:880px;margin:0 auto}
.steps3{list-style:none;display:flex;justify-content:space-between;max-width:520px;margin:4px auto 22px;padding:0;position:relative}
.steps3::before{content:"";position:absolute;left:16%;right:16%;top:19px;height:3px;background:var(--line)}
.steps3 li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;font-size:12px;color:var(--muted);font-weight:600}
.steps3 .dot{width:40px;height:40px;border-radius:50%;padding:0;background:#E3E8F0;color:#5B6472;font-weight:800;border:0}
.steps3 li.on .dot{background:var(--nest);color:#fff;box-shadow:0 6px 14px -6px var(--nest)}
.steps3 li.on{color:var(--nest)}
.steps3 li.done .dot{background:#2DB37A;color:#fff}
.steps3 li.done{color:#1E8A5A}
.cf-alert{background:#FFF8E6;border-left:4px solid #F2B53A;border-radius:12px;padding:12px 16px;margin-bottom:18px}
.cf-alert b{font-size:13.5px;color:#7A5300}.cf-alert p{margin:4px 0 0;font-size:12.5px;color:#8A6510}
.paper{background:#fff;border:1px solid var(--line);border-radius:18px;padding:48px 56px;box-shadow:0 18px 40px -28px rgba(15,23,42,.35);line-height:1.8;color:#1F2937}
.paper-title{text-align:center;font-size:26px;font-weight:800;letter-spacing:.08em;margin:0 auto 32px;padding:0 32px 12px;border-bottom:3px solid #0F172A;width:max-content;max-width:100%}
.paper-lead{text-align:justify;margin:0 0 22px}
.paper u.fill{text-decoration:none;border-bottom:2px solid #0F172A;padding:0 8px;font-weight:700}
.paper .fill-in{border:0;border-bottom:2px solid #94A3B8;border-radius:0;padding:2px 6px;font:inherit;font-weight:700;background:transparent;width:auto;max-width:180px;text-align:center}
.paper .fill-in[type=number]{width:70px}
.paper .fill-in:focus{outline:none;border-color:var(--nest)}
.terms{padding-left:22px;margin:0;display:grid;gap:12px}
.terms li p{margin:2px 0 0 4px;color:#374151}
.paper-box{background:#F8FAFC;border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:20px}
.paper-box p{margin:6px 0 0}
.paper h3{font-size:16px;margin:0 0 6px}
.paper-list{padding-left:20px;color:#374151}.paper-list p{margin:2px 0}
.paper-agree{font-weight:700;text-align:center;margin:24px 0}
.nda h4{margin:16px 0 4px;font-size:14.5px}.nda p,.nda li{font-size:13.5px;color:#374151}.nda ol{padding-left:20px;margin:4px 0}
.nda.scrolly{max-height:440px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:#F8FAFC;padding:6px 20px 12px}
.paper-date{text-align:center;font-weight:700;font-size:17px;margin:36px 0 26px}
.paper-sign{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:1px solid var(--line);padding-top:22px;flex-wrap:wrap}
.signer{display:grid;gap:10px}.signer span{display:inline-block;min-width:76px;color:#5B6472;font-weight:600}
.sig-box{display:flex;flex-direction:column;align-items:center;gap:6px}
.sig-label{font-size:13px;font-weight:700;color:#5B6472}
.sig-box .sig{width:260px;height:130px}
.sig-img{width:220px;height:110px;object-fit:contain;border:1px dashed var(--line);border-radius:8px;background:#FAFCFF}
.wiz{display:flex;justify-content:space-between;align-items:center;margin:22px 0 40px}
.wiz #send{background:#1E9E6A;padding:14px 26px;font-size:15px}
.confirm .err{min-height:1.2em;margin:12px 0 0}
.receipt-wrap{max-width:660px;margin:0 auto}
.receipt{text-align:center;padding:36px 34px}
.receipt dl{text-align:left;background:#F8FAFC;border:1px solid var(--line);border-radius:12px;padding:6px 18px;margin:22px 0}
.receipt dl div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.receipt dl div:last-child{border:0}.receipt dt{color:var(--muted)}.receipt dd{margin:0;font-weight:700}.receipt dd.ok{color:#1E9E6A}
.receipt h3{text-align:left;font-size:13px;color:var(--muted)}
.receipt ul.got{list-style:none;padding:0;text-align:left;display:grid;gap:8px;margin:0 0 18px}
.receipt ul.got li{border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-weight:700}
.receipt ul.got li::before{content:"✓";color:#1E9E6A;margin-right:10px}
.receipt .small{font-size:11.5px}
.next-h{margin:26px 0 10px}.next-steps h4{margin:0 0 4px}.center{text-align:center}
.missing{display:flex;gap:12px;align-items:baseline;margin-bottom:12px;background:#FFF6F6;border-color:#F3D0D0}
.missing b{color:#B83232;white-space:nowrap}.missing span{font-size:13px;color:var(--ink2)}
.doc-actions{display:flex;gap:8px}
#cfq{min-width:220px}
@media (max-width:700px){.paper{padding:28px 20px}.sig-box .sig{width:100%}.paper-sign{flex-direction:column;align-items:stretch}}

/* ---------- 성취도 ---------- */
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:800px){.ach-grid{grid-template-columns:1fr}}
.ach-round{border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.ach-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}.ach-h .pill{margin-left:auto}
.ach-t{font-size:13px}.ach-t th,.ach-t td{padding:6px 8px}.ach-t tfoot td{border-bottom:0;padding-top:10px}
.bad-t{color:#B83232;font-weight:700}
.ach-total{margin:14px 0 0;font-size:15px}.ach-total b{font-size:20px}.ach-total .note{display:block;margin-top:2px}

/* ---------- 인쇄 / PDF 저장: #printArea 만 ---------- */
#printArea{display:none}
@media print{
  body > *:not(#printArea){display:none !important}
  #printArea{display:block}
  #printArea .paper{border:0;box-shadow:none;padding:0 6mm;break-after:page}
  #printArea .paper:last-child{break-after:auto}
  #printArea .paper-sign{break-inside:avoid}
  #printArea .receipt{border:0;box-shadow:none}
  @page{size:A4;margin:14mm}
}
.confirm{display:block}
.steps3{width:100%}
.steps3 li span{white-space:nowrap}

/* ---------- 훈련·시험 프로그램(원본) ---------- */
.study-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.study-head h2{margin:0}.study-head .tabs{margin:0}.study-head .note{flex-basis:100%;margin:-4px 0 0}
.study-frame{display:block;width:100%;height:calc(100vh - 170px);min-height:620px;border:1px solid var(--line);border-radius:16px;background:#fff}
/* ================= 훈련 과정 · 시험 (learn.js, 2026-11-07) ================= */
.lx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.lx-head .sub{margin-bottom:18px}
/* 차수 선택 */
.phase-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;margin:0 0 16px}
.phase-switch button{display:grid;justify-items:start;gap:0;background:#fff;color:var(--ink2);border:1px solid var(--line);border-radius:14px;padding:12px 16px;text-align:left}
.phase-switch button b{font-size:18px;font-family:var(--serif)}.phase-switch button span{font-size:12.5px;font-weight:500;color:var(--muted)}
.phase-switch button:hover{background:var(--sprout-l);color:var(--ink)}
.phase-switch button[aria-selected="true"]{background:var(--nest);border-color:var(--nest);color:#fff;box-shadow:0 10px 22px -14px var(--nest)}
.phase-switch button[aria-selected="true"] span{color:rgba(255,255,255,.82)}
/* 통과 기준 띠 */
.gate{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1.6fr) auto;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 22px;margin-bottom:16px}
.gate-txt{display:grid;gap:2px}.gate-txt b{font-size:14px}.gate-txt span{font-size:13.5px;color:var(--ink2)}.gate-txt em{font-style:normal;font-weight:800;color:var(--nest)}.gate-txt small{color:var(--muted);font-size:12px;margin-top:2px}
.gate-bar{display:flex;gap:6px}
.gseg{display:grid;gap:6px;min-width:0}.gseg span{font-size:12px;font-weight:700;color:var(--ink2);white-space:nowrap}.gseg small{font-weight:600;color:var(--muted)}
.gtrack{height:10px;border-radius:99px;background:#E8EEF8;position:relative;overflow:visible}
.gtrack i{display:block;height:100%;border-radius:99px;background:var(--nest);transform-origin:left;animation:grow .8s var(--ease) both}
.gtrack b{position:absolute;left:60%;top:-3px;width:2px;height:16px;background:var(--yolk);border-radius:2px}
.gate-sum{display:grid;justify-items:end;gap:4px;text-align:right}.gate-sum b{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}.gate-sum b small{font-size:13px;color:var(--muted);font-weight:600}
/* TEST 카드 */
.tcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;animation:rise .45s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
.tcard.s-open{border-color:var(--nest);box-shadow:0 0 0 3px var(--sprout-l)}
.tc-top{display:flex;justify-content:space-between;align-items:center}
.tc-no{font-family:var(--serif);font-weight:700;color:var(--sprout);font-size:22px;line-height:1}
.tcard h3{font-size:18px;margin:6px 0 0}.tc-what{margin:0;font-weight:700;color:var(--nest-d)}
.tcard .note{margin:0 0 4px;font-size:13px;color:var(--ink2)}
.tc-meta{display:grid;gap:4px;margin:4px 0 0;padding:10px 0 0;border-top:1px dashed var(--line);font-size:13px}
.tc-meta div{display:flex;justify-content:space-between;gap:10px}.tc-meta dt{color:var(--muted)}.tc-meta dd{margin:0;font-weight:600;text-align:right}
.tc-foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.tc-foot>button{margin-left:auto}
.tc-score{display:grid}.tc-score b{font-size:26px;font-weight:800;line-height:1}.tc-score small{font-size:12px;color:var(--muted)}.tc-score span{font-size:11.5px;color:var(--muted)}
.lx-rules ul{margin:0;padding-left:18px;display:grid;gap:4px;color:var(--ink2);font-size:13.5px}
@media (max-width:960px){.tcards{grid-template-columns:1fr}.gate{grid-template-columns:1fr}.gate-sum{justify-items:start;text-align:left}}
/* 확인 창 */
.lx-modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px}
.lx-back{position:absolute;inset:0;background:rgba(246,248,252,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lx-box{position:relative;background:#fff;border-radius:18px;padding:22px 24px;width:min(440px,100%);box-shadow:0 30px 70px -30px rgba(5,40,110,.45);animation:rise .25s var(--ease)}
.lx-box h3{font-family:var(--serif);font-size:20px;margin:0 0 8px}.lx-box p{margin:0 0 18px;color:var(--ink2)}
.lx-act{display:flex;justify-content:flex-end;gap:8px}
/* 시험 화면 */
.exam{display:grid;gap:14px}
.exam-bar{position:sticky;top:60px;z-index:4;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 14px;box-shadow:0 10px 24px -20px rgba(5,40,110,.5)}
.eb-t{display:grid;flex:1;min-width:0}.eb-t b{font-size:15px}.eb-t span{font-size:12px;color:var(--muted)}
.eb-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.eb-save{font-size:12px;color:var(--muted)}
.eb-timer{font-variant-numeric:tabular-nums;font-weight:800;background:var(--sprout-l);color:var(--nest-d);border-radius:99px;padding:5px 12px;font-size:13.5px}
.eb-timer.low{background:var(--bad-l);color:var(--bad);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.6}}
.exam-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;align-items:start}
.qnav{position:sticky;top:132px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px}
.qn-h{font-weight:700;font-size:13px}.qn-h small{color:var(--muted);font-weight:600;margin-left:4px}
.qn-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.qn-grid button{padding:0;height:34px;border-radius:9px;background:var(--paper);color:var(--ink2);font-variant-numeric:tabular-nums}
.qn-grid button.done{background:var(--sprout-l);color:var(--nest-d)}
.qn-grid button.on{background:var(--nest);color:#fff}
.qn-list{display:grid;gap:4px}
.qn-list button{display:flex;align-items:center;gap:8px;text-align:left;background:transparent;color:var(--ink2);padding:7px 8px;border-radius:9px;font-weight:600;font-size:13px}
.qn-list button span{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--paper);font-size:11.5px}
.qn-list button em{font-style:normal;flex:1}.qn-list button i{font-style:normal;font-size:11.5px;color:var(--muted)}
.qn-list button:hover{background:var(--paper)}
.qn-list button.done span{background:var(--sprout-l);color:var(--nest-d)}
.qn-list button.on{background:var(--sprout-l);color:var(--nest-d)}.qn-list button.on span{background:var(--nest);color:#fff}
.qn-tip{margin:0;font-size:11.5px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;display:grid;gap:14px;animation:rise .3s var(--ease)}
.q-head{display:flex;align-items:center;gap:10px}
.q-no{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--nest);line-height:1}
.q-title{font-size:16px;flex:1}.q-head .note{margin-left:auto}
.q-text{font-size:16.5px;font-weight:600;margin:0;line-height:1.55}
.opts{display:grid;gap:8px}.opts.ox{grid-template-columns:1fr 1fr;max-width:360px}
.opt{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--sprout);background:#FAFCFF}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .om{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink2);font-weight:700;font-size:13px}
.opt:has(input:checked){border-color:var(--nest);background:var(--sprout-l)}
.opt:has(input:checked) .om{background:var(--nest);color:#fff}
.opt:has(input:focus-visible){outline:2px solid var(--nest);outline-offset:2px}
.opt.sm{padding:9px 12px;font-size:13.5px}
.opt.sm::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;border:1.5px solid #B9C3D3;border-radius:50%;background:#fff}
.opt.sm:has(input[type=checkbox])::before{border-radius:4px}
.opt.sm:has(input:checked)::before{border-color:var(--nest);background:var(--nest);box-shadow:inset 0 0 0 3px #fff}
.q-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:4px}
.q-body p{margin:0 0 6px;font-weight:600}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 14px;margin:10px 0 0;background:var(--paper);border-radius:12px;padding:12px 14px;font-size:13px}
.facts div{display:grid;gap:0}.facts dt{color:var(--muted);font-size:11.5px;font-weight:700}.facts dd{margin:0;font-weight:600}
.stg-hint{display:grid;gap:2px;border-left:4px solid var(--yolk);background:var(--yolk-l);border-radius:10px;padding:10px 14px;font-size:13px}.stg-hint span{color:#6B4D0E}
.fields{display:grid;gap:12px}
.fld{display:grid;gap:6px}.fl{font-size:13px;font-weight:700;color:var(--ink2)}.fl small{font-weight:500;color:var(--muted)}
.fld input{max-width:340px}
.seg2{display:inline-flex;gap:4px;background:var(--paper);padding:4px;border-radius:11px;width:max-content}
.seg2 button{background:transparent;color:var(--ink2);padding:7px 14px;border-radius:8px}
.seg2 button[aria-checked="true"]{background:#fff;color:var(--nest);box-shadow:0 1px 3px rgba(5,92,245,.2)}
@media (max-width:860px){.exam-body{grid-template-columns:1fr}.qnav{position:static}.qn-grid{grid-template-columns:repeat(10,1fr)}.exam-bar{top:0;flex-wrap:wrap}.qcard{padding:16px}}
/* 커뮤니케이션: 상담 정보 + 대화 */
.cx{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:14px;align-items:start}
.cx-info{position:sticky;top:132px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:10px}
.cx-tag{display:flex;align-items:center;gap:8px;justify-content:space-between}.cx-tag b{flex:1}
.cx-bg{margin:0;font-size:13.5px;color:var(--ink2)}
.cx-info .facts{grid-template-columns:1fr;margin:0}
.cx-info .note{margin:0;font-size:11.5px}
.cx-main{display:grid;gap:14px;min-width:0}
.turn{display:grid;gap:10px}
.bub{max-width:min(620px,92%);padding:12px 16px;border-radius:18px;font-size:14.5px;white-space:pre-wrap;animation:rise .3s var(--ease)}
.bub .who{display:block;font-size:11.5px;font-weight:700;opacity:.7;margin-bottom:2px}
.bub.c{justify-self:start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
.bub.a{justify-self:end;background:var(--nest);color:#fff;border-bottom-right-radius:6px}
.judge{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:12px}
.slot{border:0;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.slot legend,.slot .lg{font-weight:700;font-size:13.5px;padding:0;margin-bottom:2px}
.slot legend small,.slot .lg small{font-weight:500;color:var(--muted);margin-left:4px}
.slot[disabled] .opt{cursor:default;opacity:.85}
.send-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.jsum{justify-self:end;max-width:min(620px,92%);font-size:12.5px}
.jsum summary{cursor:pointer;color:var(--muted);text-align:right}
.jsum[open]{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;gap:8px}
.hist{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}
@media (max-width:860px){.cx{grid-template-columns:1fr}.cx-info{position:static}}
/* 제출 완료 */
.lx-done{max-width:620px;margin:24px auto;text-align:center;display:grid;gap:10px;justify-items:center;padding:36px 28px}
.lx-done h2{margin:6px 0 0}.lx-done p{margin:0}
.lx-score{display:flex;gap:14px;margin:10px 0 8px;flex-wrap:wrap;justify-content:center}
.lx-score div{display:grid;background:var(--paper);border-radius:14px;padding:12px 22px;min-width:150px}
.lx-score b{font-size:30px;font-weight:800;line-height:1.1}.lx-score small{font-size:12.5px;color:var(--muted)}.lx-score span{font-size:12px;color:var(--ink2)}
/* 훈련: 단계 */
.track{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:t}
.track button{width:100%;height:100%;display:grid;justify-items:start;align-content:start;gap:2px;text-align:left;background:#fff;color:var(--ink2);border:1px solid var(--line);border-radius:16px;padding:14px 16px;position:relative}
.track li:not(:last-child) button::after{content:"";position:absolute;right:-11px;top:26px;width:12px;height:2px;background:var(--line)}
.track .tn{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--paper);font-weight:800;font-size:13px;margin-bottom:4px}
.track b{font-size:15px;color:var(--ink)}.track button>span:last-child{font-size:12.5px;font-weight:500;color:var(--muted)}
.track button:hover{background:var(--sprout-l)}
.track button[aria-selected="true"]{border-color:var(--nest);box-shadow:0 0 0 3px var(--sprout-l)}
.track button[aria-selected="true"] .tn{background:var(--nest);color:#fff}
@media (max-width:860px){.track{grid-template-columns:1fr 1fr}.track li button::after{display:none}}
.tgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:860px){.tgrid{grid-template-columns:1fr}}
.grp{font-size:12.5px;color:var(--muted);margin:14px 0 8px}.grp small{font-weight:600;margin-left:4px}
.card.soon,.card.sim{display:grid;gap:8px;align-content:start}.card.soon h3,.card.sim h3{margin:4px 0 0}.card.soon p,.card.sim p{margin:0;font-size:13.5px;color:var(--ink2)}
.card.soon{background:repeating-linear-gradient(-45deg,#fff 0 12px,#FAFBFD 12px 24px)}
.card .pill{justify-self:start}
.mini{margin:0;padding-left:18px;font-size:13px;color:var(--ink2);display:grid;gap:2px}
.lx-legacy{margin-top:18px}
/* 연습 */
.lvl{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.lvl button{display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink2);border:1px solid var(--line);border-radius:99px;padding:7px 14px 7px 8px}
.lvl button span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--paper);font-size:12px}
.lvl button[aria-selected="true"]{background:var(--nest);color:#fff;border-color:var(--nest)}.lvl button[aria-selected="true"] span{background:#fff;color:var(--nest)}
.pk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.pk{display:grid;gap:3px;text-align:left;background:var(--paper);color:var(--ink);border:1px solid transparent;border-radius:14px;padding:12px 14px;font-weight:500}
.pk b{font-size:14px}.pk span{font-size:12.5px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pk i{font-style:normal;font-size:11.5px;color:var(--nest-d);font-weight:700}
.pk:hover{background:var(--sprout-l);border-color:var(--sprout);color:var(--ink)}
.prun{display:grid;gap:12px}.prun>.ghost{justify-self:start}
.fb{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:grid;gap:10px}
.fb h4{margin:0;font-size:13px;color:var(--muted)}
.flags{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.flags li{display:grid;gap:2px;background:var(--bad-l);border-radius:10px;padding:8px 12px;font-size:13px}.flags b{color:var(--bad)}.flags small{color:var(--ink2)}
.ok-line{margin:0;font-size:13px;color:var(--nest-d);font-weight:600}
.exp,.rw{background:var(--paper);border-radius:12px;padding:10px 12px}.exp b,.rw b,.coach b{font-size:12.5px}.exp p,.rw p,.coach p{margin:2px 0 0;font-size:13.5px}
.coach{display:grid;gap:8px}.coach>div:not(.rw):not(.cflags){border-left:3px solid var(--sprout);padding-left:10px}
.cflags{display:grid;gap:4px}.cflags p{margin:0;font-size:13px}
/* 진도표 · KMS 검색 기록 (2026-11-07) */
.pmap{margin-bottom:14px}.pm-h{display:grid;gap:2px;margin-bottom:10px}.pm-h h3{margin:0}.pm-h .note{margin:0}
.pm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pm{width:100%;min-width:560px;border-collapse:separate;border-spacing:6px;table-layout:fixed}
.pm th{font-size:12.5px;font-weight:700;color:var(--ink2);text-align:left;vertical-align:middle}
.pm thead th,.pm tr:first-child th{text-align:center}.pm tr:first-child th:first-child{text-align:left;width:150px}
.pm th[scope=row]{display:table-cell}.pm th[scope=row] b{display:block;font-size:13.5px;color:var(--ink)}.pm th[scope=row] small{font-weight:500;color:var(--muted)}
.pm .lvn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--paper);font-size:11px;margin-right:5px}
.pm .cell{height:54px;border-radius:12px;text-align:center;vertical-align:middle;font-size:12.5px;padding:0}
.pm .cell button{width:100%;height:100%;display:grid;place-content:center;gap:1px;background:transparent;color:inherit;border:0;border-radius:12px;padding:4px}
.pm .cell b{font-size:14px}.pm .cell small{font-size:11px;color:var(--muted)}
.pm .s-soon{background:repeating-linear-gradient(-45deg,#fff 0 8px,#F5F7FA 8px 16px);color:var(--muted);border:1px dashed var(--line)}
.pm .s-none{background:var(--paper);color:var(--ink2)}
.pm .s-some{background:var(--sprout-l);color:var(--nest-d)}
.pm .cell button:hover{box-shadow:inset 0 0 0 2px var(--sprout)}
.pm-now th[scope=row] b{color:var(--nest-d)}
.pm-people tr:first-child th:first-child{width:110px}.pm-people .cell{height:36px}
.pm-know{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:10px;align-items:center}
.pm-know>div{display:grid;gap:3px;justify-items:start;background:var(--paper);border-radius:12px;padding:10px 14px;font-size:12.5px;color:var(--ink2)}
.pm-know>div b{font-size:20px;color:var(--ink)}.pm-know>div:last-child{background:transparent;padding:0}
@media (max-width:860px){.pm-know{grid-template-columns:1fr 1fr}}
.kms-btn{white-space:nowrap}.cx-info .kms-btn{justify-self:start;margin-top:6px}
.kl-note{grid-template-columns:1fr}
.kl-filter{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 12px}.kl-filter label{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:600}
.kl{margin-bottom:10px}.kl summary{cursor:pointer;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.kl-tl{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
.kl-tl li{display:grid;grid-template-columns:96px 104px minmax(0,1fr) minmax(0,220px);gap:10px;align-items:baseline;font-size:13px;padding:6px 8px;border-radius:8px}
.kl-tl li:nth-child(odd){background:var(--paper)}.kl-tl time{color:var(--muted);font-variant-numeric:tabular-nums}.kl-tl .pill{justify-self:start}
.kl-w{overflow-wrap:anywhere}.kl-c{text-align:right}
@media (max-width:860px){.kl-tl li{grid-template-columns:80px 1fr}.kl-w,.kl-c{grid-column:1/-1;text-align:left}}
/* 수업 세트 = 슬라이드 + 영상 + 퀴즈 (2026-11-07) */
.sets-sum{text-align:right;white-space:nowrap}.sets-sum b{font-size:26px}.sets-sum small{color:var(--muted);font-weight:600}
.set-list{display:grid;gap:6px}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;background:var(--paper);color:var(--ink);border:1px solid transparent;border-radius:14px;padding:10px 14px;font-weight:500}
.set-row:hover{background:var(--sprout-l);border-color:var(--sprout)}
.sr-t{display:grid;gap:1px;min-width:0}.sr-t b{font-size:14px}.sr-t small{color:var(--muted);font-size:12px}
.sr-c{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.sr-c i{font-style:normal;font-size:11.5px;padding:2px 8px;border-radius:99px;border:1px dashed var(--line);color:var(--muted)}
.sr-c i.on{border:1px solid var(--sprout);color:var(--nest-d);background:#fff}
.set-row.s-done{background:#fff;border-color:var(--line)}
.set-one{display:grid;gap:12px}.set-one>.ghost{justify-self:start}
.so-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.so-h h3{margin:6px 0 2px}.so-h .note{margin:0}
.so-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.so-steps>li{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}.so-steps>li>b{font-size:14px}
.so-video{position:relative;width:100%;max-width:880px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}.so-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.qz-q{display:grid;gap:6px;padding:10px 0}.qz-q p{margin:0}
.qz-done{display:flex;gap:10px;align-items:center;font-size:13.5px}
.qz-a{list-style:none;margin:0;padding:0;display:grid;gap:4px}.qz-a li{font-size:13.5px;padding:6px 10px;border-radius:10px;background:var(--paper)}
.qz-a li.right{background:var(--sprout-l);color:var(--nest-d);font-weight:600}.qz-a li.mine{background:var(--bad-l);color:var(--bad)}.qz-a small{font-weight:700;margin-left:4px}
.qz-x{margin:0;font-size:13.5px;background:var(--paper);border-radius:10px;padding:8px 12px}.qz-x b{font-size:12.5px;margin-right:6px}
.sets-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.sets-kpi>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:grid}.sets-kpi b{font-size:22px}.sets-kpi span{font-size:12.5px;color:var(--muted)}
@media (max-width:860px){.sets-kpi{grid-template-columns:1fr 1fr}.set-row{flex-direction:column;align-items:flex-start}.sr-c{justify-content:flex-start}}
.sets-tbl{width:100%;min-width:720px}.sets-tbl td,.sets-tbl th{padding:8px 10px;text-align:left;font-size:13px;border-bottom:1px solid var(--line)}
.qz-ed{display:grid;gap:6px;background:var(--paper);border-radius:14px;padding:12px;margin-bottom:10px}.qe-h{display:flex;justify-content:space-between;align-items:center}
.qz-ed textarea,.qe-o input[data-o]{width:100%;box-sizing:border-box}
.qe-o{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center}
.qe-act>span:last-child{display:flex;gap:6px;flex-wrap:wrap}

/* =====================================================================
   KMS 디자인 맞추기 (2026-11-07 사용자 요청: 레이아웃·디자인을 KMS 와 비슷하게, 사이트 전체)
   KMS 기준: Pretendard · 바탕 #f5f7fb · 진한 파랑 상단 바(#0a3fa8) + 메뉴 줄 · 카드 반경 12px · 왼쪽 파란 테두리 목록 · 왼쪽 목록 + 본문
   ===================================================================== */
/* (Pretendard 불러오기는 파일 맨 위) */
:root{
  --ink:#2e3035; --ink2:#4a4d52; --muted:#62656a; --ink3:#a3a7ae;
  --paper:#f5f7fb; --card:#fff; --line:#e3e7f0; --line2:#c7cedc;
  --nest:#055cf5; --nest-d:#0a3fa8; --sprout:#9db8f5; --sprout-l:#eef4ff;
  --band:#0a3fa8; --on-band:#fff; --on-band2:rgba(255,255,255,.74); --band-line:rgba(255,255,255,.14); --band-fill:rgba(255,255,255,.12);
  --bad:#c42b2e; --bad-l:#fdecec; --good:#11823b; --good-l:#eaf7ef;
  --sans:"Pretendard Variable",Pretendard,"Noto Sans KR",-apple-system,"Malgun Gothic",sans-serif;
  --serif:var(--sans);
  --r:12px; --float:0 12px 32px rgba(5,92,245,.12),0 2px 6px rgba(13,33,97,.06);
}
body{font-size:14.5px;letter-spacing:-.005em}
h2{font-size:24px;font-weight:800;letter-spacing:-.02em}
h3{font-weight:700}
.card{border-radius:var(--r);border-color:var(--line);box-shadow:none}
button{border-radius:9px}
.pill.ok{background:var(--good-l);color:var(--good)}

/* 상단: KMS 처럼 진한 파랑 2단(로고·사용자 / 메뉴 줄) */
.top{background:var(--band);border-bottom:0;padding:0 28px;gap:0 20px;min-height:0;color:var(--on-band)}
.top .wordmark{min-height:60px;color:#fff}
.top .wordmark .logo{filter:brightness(0) invert(1);height:22px;width:auto}
.top .wordmark::after{content:"러닝허브";font-size:15px;font-weight:600;color:var(--on-band2);margin-left:2px}
.top .who{margin-left:auto;min-height:60px}
.top .badge{background:var(--band-fill);color:#fff}
.top button.ghost{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
.top button.ghost:hover{background:var(--band-fill);color:#fff}
#nav{order:3;flex:0 0 calc(100% + 56px);margin:0 -28px;padding:0 20px;border-top:1px solid var(--band-line);background:var(--nest-d);gap:0}
#nav button{color:var(--on-band2);min-height:46px;padding:0 14px;font-size:14.5px}
#nav button:hover{color:#fff}
#nav button.on{color:#fff;font-weight:700}
#nav button::after{background:#fff;left:10px;right:10px;height:3px}
.viewas{padding:8px 28px}

/* 본문 */
main{max-width:1320px;padding:24px 28px 40px}
.lx-head h2,.study-head h2{margin-bottom:4px}
.note{color:var(--muted)}

/* 왼쪽 목록 + 본문 (KMS 서비스 화면과 같은 배치) */
.kx{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}
.kx-side{position:sticky;top:122px;max-height:calc(100vh - 140px);overflow:auto;display:grid;gap:4px;padding-right:4px}
.kx-side .ks-h{font-size:12px;font-weight:700;color:var(--muted);margin:14px 6px 4px}
.kx-side .ks-h:first-child{margin-top:0}
.kx-side button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;background:transparent;color:var(--ink);border:1px solid transparent;border-radius:10px;padding:8px 12px;font-weight:600;text-align:left;font-size:14px}
.kx-side button small{color:var(--muted);font-weight:500;font-size:12px}
.kx-side button:hover{background:var(--card);border-color:var(--line)}
.kx-side button[aria-current="true"]{background:var(--card);border-color:var(--line);box-shadow:inset 3px 0 0 var(--nest);color:var(--nest-d)}
.kx-main{min-width:0}
.kx-main>.lx-head{margin-bottom:14px}
@media (max-width:960px){.kx{grid-template-columns:1fr}.kx-side{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:6px}.kx-side .ks-h{flex-basis:100%;margin:6px 0 0}.kx-side button{width:auto}}

/* 왼쪽 파란 테두리 목록 카드(KMS 공지 목록) */
.kcard{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--nest);border-radius:var(--r);padding:4px 0;margin-bottom:16px}
.kcard>.kc-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 20px 8px}
.kcard>.kc-h h3{margin:0;font-size:16px}
.krow{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;background:transparent;color:var(--ink);border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 20px;text-align:left;font-weight:500}
.krow:hover{background:var(--sprout-l)}
.krow .kd{display:grid;line-height:1.15}.krow .kd b{color:var(--nest-d);font-size:15px;font-weight:800}.krow .kd small{color:var(--muted);font-size:11.5px}
.krow .kt{display:grid;gap:1px;min-width:0}.krow .kt b{font-size:14.5px;font-weight:700}.krow .kt small{color:var(--muted);font-size:12px}
.krow .kr{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:700px){.krow{grid-template-columns:56px minmax(0,1fr)}.krow .kr{grid-column:2;justify-content:flex-start}}
.sets-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:-4px 0 14px}.sets-top .note{margin:0}
.kcard{scroll-margin-top:130px}
.set-one .card{border-left:3px solid var(--nest)}
#kxSub .ks-h{margin-top:14px}
/* 교수자 권한(2026-11-07): 뷰어는 보기만 */
.perm-viewer .qz-ed input,.perm-viewer .qz-ed textarea,.perm-viewer input[data-video]{pointer-events:none;background:var(--paper)}
.perm-viewer [data-del]{display:none}
/* 커리큘럼 편집(curedit.js) */
.ce-card{margin:12px 0 16px;border-left:3px solid var(--nest)}
.ce-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ce-act{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.ce-st{margin-right:6px}
.ce-week{margin-top:14px}.ce-week h4{margin:0 0 8px;font-size:13px;color:var(--muted)}
.ce-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.ce-day{background:var(--paper);border:1px dashed transparent;border-radius:12px;padding:8px;display:grid;gap:6px;align-content:start;min-height:120px}
.ce-day.over{border-color:var(--nest);background:var(--sprout-l)}
.ce-dh{display:flex;justify-content:space-between;align-items:center}
.ce-s{background:#fff;border:1px solid var(--line);border-left:3px solid var(--c);border-radius:10px;padding:7px 9px;display:grid;gap:1px;cursor:grab;font-size:13px}
.ce-s.drag{opacity:.4}.ce-s b{font-size:13px;line-height:1.35}.ce-s small{color:var(--muted);font-size:11.5px}
.ce-t{font-size:11.5px;font-weight:700;color:var(--c)}
.ce-sb{display:flex;gap:4px;margin-top:4px}.ce-sb button{padding:2px 8px;font-size:11.5px}
.ce-add{justify-self:start}
.ce-box{max-width:520px;width:calc(100vw - 32px)}.ce-form{display:grid;gap:10px}
.ce-row{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:8px}
.ce-form .fld{display:grid;gap:4px}.ce-form .fl{font-size:12.5px;font-weight:700;color:var(--ink2)}.ce-form input,.ce-form select{width:100%}
.ce-del{margin-right:auto;color:var(--bad)!important;border-color:var(--bad-l)!important}
.ce-form input:not([type=radio]),.ce-form select{width:100%;box-sizing:border-box}
/* 상단 바로가기(교육용 스테이징 · KMS) */
.top .hdr-link{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;border-radius:9px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:13px;font-weight:700;text-decoration:none}
.top .hdr-link:hover{background:var(--band-fill);color:#fff}
@media (max-width:700px){.top .hdr-link{padding:0 8px;font-size:12px}}
/* 관리(admin.js) */
.adm-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.adm-bar input[type=search]{width:220px}.adm-act{margin-left:auto;display:flex;gap:6px}
#adm td input{width:100%;min-width:70px;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:6px}#adm td input:focus{border-color:var(--nest);background:#fff}
.adm-msg{margin:0 0 8px}
/* 기록 화면(records.js) */
.sim-t td{vertical-align:middle}.sim-x td{background:var(--paper)}
.sim-d{display:grid;gap:12px;padding:6px 2px}.sim-k{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.sim-k>div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:grid}.sim-k b{font-size:18px}.sim-k small{color:var(--muted);font-size:11.5px}
.sim-c h4{margin:0 0 6px;font-size:13px;color:var(--muted)}.sim-c p{margin:2px 0;font-size:13px}
.sim-chat{max-height:260px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px}.sim-chat p.c b{color:var(--nest-d)}.sim-chat p.a b{color:var(--good)}
@media (max-width:860px){.sim-k{grid-template-columns:1fr 1fr}}
/* 화면 전환(관리자) */
.top .hdr-switch{height:32px;border-radius:9px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:13px;font-weight:700;padding:0 8px}.top .hdr-switch option{color:var(--ink)}
.viewas{justify-content:space-between}.viewas span{flex:1}
.btn-link{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:9px;background:var(--nest);color:#fff;font-weight:700;text-decoration:none}.btn-link:hover{background:var(--nest-d)}
.kx-side .kx-link{display:flex;justify-content:space-between;align-items:center;gap:8px;border-radius:10px;padding:8px 12px;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;border:1px solid transparent}.kx-side .kx-link small{color:var(--muted);font-weight:500;font-size:12px}.kx-side .kx-link:hover{background:var(--card);border-color:var(--line)}
/* 커리큘럼 이수 보드 · 이수 스티커 (2026-11-07) */
.stk{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4f8bff,var(--nest) 60%,var(--nest-d));color:#fff;font-weight:800;font-size:13px;letter-spacing:-.02em;transform:rotate(-12deg);box-shadow:0 3px 0 rgba(10,63,168,.35),0 6px 14px rgba(5,92,245,.25);border:3px solid #fff;outline:2px dashed rgba(255,255,255,.55);outline-offset:-7px;flex:none;animation:stk-in .45s var(--ease) both}
.stk.sm{width:26px;height:26px;font-size:12px;border-width:2px;outline:none;box-shadow:0 2px 6px rgba(5,92,245,.25)}
.stk.big{width:68px;height:68px;font-size:16px}
@keyframes stk-in{0%{transform:scale(.3) rotate(-40deg);opacity:0}70%{transform:scale(1.12) rotate(-8deg);opacity:1}100%{transform:scale(1) rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.stk{animation:none}}
.cb-head{display:grid;gap:8px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--nest);border-radius:var(--r);padding:16px 20px;margin-bottom:14px}
.cb-head>div:first-child{display:flex;align-items:baseline;gap:10px}.cb-n{font-size:30px;font-weight:800}.cb-n small{font-size:15px;color:var(--muted)}.cb-head .note{margin:0}
.pb-bar{height:8px;background:var(--paper);border-radius:99px;overflow:hidden;margin-top:6px}.pb-bar i{display:block;height:100%;background:var(--nest);border-radius:99px;transition:width .6s var(--ease)}.pb-bar.big{height:12px}
.cb-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cb-day{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;display:grid;gap:8px;align-content:start}
.cb-day h4{margin:0 0 2px;font-size:13.5px;display:flex;gap:8px;align-items:baseline}.cb-day h4 span{color:var(--nest-d);font-weight:800}
.cb-s{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:64px;text-align:left;background:var(--paper);color:var(--ink);border:1px solid transparent;border-left:3px solid var(--cc);border-radius:10px;padding:8px 10px;font-weight:500}
.cb-s:hover{border-color:var(--sprout);background:var(--sprout-l)}
.cb-s.st-done{background:#fff;border-color:var(--line);border-left-color:var(--cc)}
.cb-t{display:grid;gap:1px;min-width:0}.cb-t b{font-size:13.5px;line-height:1.35}.cb-t small{color:var(--muted);font-size:11.5px}
.cb-st{font-size:11.5px;color:var(--muted);white-space:nowrap}.cb-s.st-quiz .cb-st{color:#8a5d0b;font-weight:700}
.cb-people th span{display:block;max-width:90px;white-space:normal;font-size:11.5px}.cb-people th small{display:block;font-weight:500}.cb-people td{text-align:center;vertical-align:middle}.cb-people td:first-child,.cb-people td:nth-child(2){text-align:left}
.so-r{display:flex;align-items:center;gap:10px}
.so-slide{aspect-ratio:16/10}
.so-steps>li.ok>b{color:var(--good)}
/* 홈(home.js): 환영 · 전체 흐름 */
.hm-hero{background:linear-gradient(120deg,var(--nest-d),var(--nest) 60%,#4f8bff);color:#fff;border-radius:var(--r);padding:28px 30px;margin-bottom:16px;position:relative;overflow:hidden}
.hm-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;border:2px solid rgba(255,255,255,.18)}
.hm-tag{display:inline-block;font-size:12px;font-weight:700;background:rgba(255,255,255,.16);padding:3px 10px;border-radius:99px}
.hm-hero h2{color:#fff;font-size:26px;margin:10px 0 6px}.hm-hero p{margin:0;color:rgba(255,255,255,.86);max-width:46em}.hm-hero p b{color:#fff}
.hm-vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.hm-vals>div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:12px 14px;display:flex;gap:8px;align-items:center}.hm-vals span{font-size:20px}.hm-vals b{font-size:13.5px}
.hm-steps{list-style:none;margin:0;padding:6px 20px 18px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.hm-steps li{position:relative;display:grid;gap:4px;align-content:start;background:var(--paper);border-radius:12px;padding:12px;border-top:4px solid var(--line2)}
.hm-steps li.past{opacity:.6;border-top-color:var(--sprout)}.hm-steps li.now{background:var(--sprout-l);border-top-color:var(--nest);box-shadow:inset 0 0 0 1px var(--sprout)}
.hm-steps li.test{border-top-color:#f2b53a}.hm-steps li.test.now{border-top-color:#f2b53a}
.hm-steps b{font-size:14.5px}.hm-steps small{color:var(--muted);font-size:12px;line-height:1.45}.hm-d{font-size:11.5px;font-weight:800;color:var(--nest-d)}
.hm-steps em{position:absolute;top:8px;right:8px;font-style:normal;font-size:11px;font-weight:800;background:var(--nest);color:#fff;border-radius:99px;padding:1px 8px}
.hm-steps a,.linkish{justify-self:start;background:none;border:0;padding:0;color:var(--nest);font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none}
.hm-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.hm-grid .kcard{margin-bottom:0}.hm-grid+.hm-grid{margin-top:16px}
.hm-todo{padding:0 20px 14px;display:grid;gap:10px}
.hm-alert{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:var(--yolk-l,#fdf1d6);color:#7a5410;border:1px solid #f0ddb0;border-radius:10px;padding:10px 12px}
.hm-today{list-style:none;margin:0;padding:0;display:grid;gap:6px}.hm-today li{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:baseline;font-size:13.5px}.hm-today time{color:var(--nest-d);font-weight:800}.hm-today small{color:var(--muted)}
.hm-me{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;padding:0 20px 10px}.hm-me>div{background:var(--paper);border-radius:12px;padding:12px 14px;display:grid;gap:2px}.hm-me b{font-size:24px}.hm-me b small{font-size:13px;color:var(--muted)}.hm-me span{font-size:12.5px;color:var(--muted)}
.hm-att{padding:0 20px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.hm-att>div{background:var(--paper);border-radius:12px;padding:12px 14px}.hm-att p{margin:4px 0;font-size:13px}.hm-att small{color:var(--muted)}.hm-att .note{grid-column:1/-1;margin:0}
.hm-rules{padding:0 20px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.hm-rules>div{background:var(--paper);border-radius:12px;padding:12px 14px}.hm-rules span{font-size:18px}.hm-rules b{display:block;font-size:13.5px;margin:2px 0}.hm-rules p{margin:0;font-size:12.5px;color:var(--ink2)}
@media (max-width:960px){.hm-steps{grid-template-columns:repeat(3,1fr)}.hm-grid,.hm-vals{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hm-steps,.hm-grid,.hm-att,.hm-rules{grid-template-columns:1fr}.hm-vals{grid-template-columns:1fr 1fr}}
.ct-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}.ct-kv>div{background:var(--paper);border-radius:10px;padding:8px 10px;font-size:13px}.ct-kv small{display:block;color:var(--muted);font-size:11.5px}
.ct-res{display:grid;gap:6px}.ct-res p{margin:0;font-size:13px}
@media (max-width:860px){.ct-kv{grid-template-columns:1fr 1fr}}