/* ROE 통합 플랫폼 — 병동 차트와 관찰 장비의 언어.
   서늘한 병동 흰색 위에 짙은 병동 크롬, 수술실 청록 강조, 찾은 것은 호박색 모서리 괄호, 고위험은 붉은색. */
:root{
  --bg:#EEF2F1; --paper:#F7F9F9; --surface:#FFFFFF; --sunk:#E2E9E8; --ink:#13232A; --ink-2:#2E4148; --muted:#5D6D71; --line:#D2DCDB; --line-2:#BBC8C7;
  --accent:#0A7C76; --accent-ink:#FFFFFF; --accent-soft:#D6EEEA; --sel:#E79A12; --sel-soft:#FBEBCB;
  --alert:#C93C3F; --alert-soft:#FBE1DF; --ok:#1F7A4B; --ok-soft:#DCEFE3; --warn:#8D5A06; --warn-soft:#F6EAD0;
  --chrome:#0E1D23; --chrome-2:#1A2E35; --chrome-3:#25404A; --chrome-ink:#ECF3F2; --chrome-muted:#97AEB2;
  --scene:#C9D4D4;
  --f-body:"Pretendard Variable",Pretendard,"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:8px; --r-lg:14px;
  --shadow:0 1px 0 rgba(19,35,42,.04),0 10px 30px -18px rgba(19,35,42,.35);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0B1418; --paper:#101C21; --surface:#132228; --sunk:#0D181C; --ink:#E4ECEB; --ink-2:#C2D0D0; --muted:#8FA3A6; --line:#22353C; --line-2:#2E464E;
  --accent:#3FD0C5; --accent-ink:#04201F; --accent-soft:#103633; --sel:#F2B23E; --sel-soft:#3A2C0E;
  --alert:#FF7D7A; --alert-soft:#3A1819; --ok:#5ACB8E; --ok-soft:#10301F; --warn:#E7B04E; --warn-soft:#33270F;
  --chrome:#060D10; --chrome-2:#0F1E23; --chrome-3:#1A2F36; --chrome-ink:#E4ECEB; --chrome-muted:#87A0A4;
  --scene:#16252A; --shadow:0 1px 0 rgba(0,0,0,.3),0 12px 32px -18px rgba(0,0,0,.7); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0B1418; --paper:#101C21; --surface:#132228; --sunk:#0D181C; --ink:#E4ECEB; --ink-2:#C2D0D0; --muted:#8FA3A6; --line:#22353C; --line-2:#2E464E;
  --accent:#3FD0C5; --accent-ink:#04201F; --accent-soft:#103633; --sel:#F2B23E; --sel-soft:#3A2C0E;
  --alert:#FF7D7A; --alert-soft:#3A1819; --ok:#5ACB8E; --ok-soft:#10301F; --warn:#E7B04E; --warn-soft:#33270F;
  --chrome:#060D10; --chrome-2:#0F1E23; --chrome-3:#1A2F36; --chrome-ink:#E4ECEB; --chrome-muted:#87A0A4;
  --scene:#16252A; --shadow:0 1px 0 rgba(0,0,0,.3),0 12px 32px -18px rgba(0,0,0,.7); color-scheme:dark }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;min-height:100vh}
[hidden]{display:none!important}
img{max-width:100%;display:block}
a{color:var(--accent)}
h1,h2,h3,h4{text-wrap:balance;margin:0;line-height:1.3;letter-spacing:-.01em}
h1{font-size:clamp(26px,3.4vw,38px);font-weight:700}
h2{font-size:19px;font-weight:700}
h3{font-size:16px;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sel);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:13px} .mt{margin-top:14px}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow.on-dark{color:var(--chrome-muted)}
.lede{color:var(--muted);max-width:62ch;margin-top:8px}
.lede.on-dark{color:var(--chrome-muted)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;z-index:99;background:var(--surface);padding:8px 12px;border-radius:8px}
.star{color:var(--alert);font-weight:700}

/* 상단 */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--chrome);color:var(--chrome-ink);border-bottom:1px solid var(--chrome-2)}
.topbar-in{max-width:1280px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;margin-right:auto}
.brand-mark{width:30px;height:30px;border-radius:7px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--f-mono);font-weight:500;font-size:13px;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.brand b{font-weight:700;font-size:15px}
.brand small{display:block;font-size:11px;color:var(--chrome-muted);line-height:1.2}
.nav{display:flex;gap:2px;flex-wrap:wrap}
.nav a{color:var(--chrome-muted);text-decoration:none;font-size:13.5px;padding:6px 12px;border-radius:6px}
.nav a:hover{color:var(--chrome-ink);background:var(--chrome-2)}
.nav a[aria-current="page"]{color:var(--chrome-ink);background:var(--chrome-3);font-weight:600}
.who{font-size:12.5px;color:var(--chrome-muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sync{font-family:var(--f-mono);font-size:11px;padding:2px 8px;border-radius:4px;border:1px solid var(--chrome-3);white-space:nowrap}
.sync[data-s="cloud"]{color:var(--accent);border-color:var(--accent)}
.sync[data-s="error"]{color:var(--alert);border-color:var(--alert)}
.iconbtn{background:transparent;border:1px solid var(--chrome-3);color:var(--chrome-ink);border-radius:6px;width:30px;height:30px;cursor:pointer;display:grid;place-items:center;font-size:14px}
.linkish{background:none;border:0;padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}
.topbar .linkish{color:var(--chrome-ink)}

.wrap{max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:28px 56px}
body[data-route="room"] .wrap{padding-block:16px 40px}
.notice{background:var(--sel-soft);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin-bottom:16px;font-size:14px}
.notice b{color:var(--warn);margin-right:6px}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-2);background:var(--surface);padding:9px 16px;border-radius:7px;cursor:pointer;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;line-height:1.2;transition:border-color .15s,background .15s,transform .1s}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--alert)}
.btn.on-dark{background:transparent;color:var(--chrome-ink);border-color:var(--chrome-3)}
.btn.small{padding:6px 11px;font-size:13px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.row.end{justify-content:flex-end;margin-top:18px}
.nowrap{flex-wrap:nowrap}
.stack{display:flex;flex-direction:column;gap:12px}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:4px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.pill.done{background:var(--ok-soft);color:var(--ok)}
.pill.doing{background:var(--accent-soft);color:var(--accent)}
.pill.wait{background:var(--sel-soft);color:var(--warn)}
.pill.lock{background:var(--sunk);color:var(--muted)}
.pill.err{background:var(--alert-soft);color:var(--alert)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);border-radius:6px;padding:5px 11px;font-size:13.5px;background:var(--surface)}
.chip.sel{cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.chip.sel:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}

/* 섹션·패널 */
.sect{margin-top:36px}
.sect-h{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sect-h p{max-width:60ch}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);min-width:0}
.panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px}
.page-h{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.page-h>div:first-child{min-width:0;flex:1 1 420px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.kv dt{color:var(--muted);font-size:13.5px}
.kv dd{margin:0;min-width:0}
.plain{padding-left:20px;display:grid;gap:6px}
.lockpanel{max-width:560px}

/* 히어로 */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);background:var(--chrome);color:var(--chrome-ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.hero-copy{padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:18px;justify-content:center}
.hero h1{font-size:clamp(28px,3.6vw,44px);line-height:1.18}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-img{margin:0;position:relative;min-height:280px}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img figcaption{position:absolute;left:12px;bottom:12px;font-size:11px;background:rgba(6,13,16,.72);color:#E4ECEB;padding:4px 8px;border-radius:4px}
.facts{display:grid;grid-template-columns:repeat(4,auto);gap:14px 22px;margin:4px 0 0;padding-top:16px;border-top:1px solid var(--chrome-3)}
.facts dt{font-size:11.5px;color:var(--chrome-muted)}
.facts dd{margin:0;font-weight:600}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero-img{order:-1;min-height:0;aspect-ratio:16/10}.facts{grid-template-columns:repeat(2,auto)}}

.journey{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.journey a{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 18px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .15s}
.journey a:hover{border-color:var(--accent)}
.journey .jn{font-size:11.5px;color:var(--accent);letter-spacing:.08em}
.journey span:last-child{color:var(--muted);font-size:14px}

.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px}
.room{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.room:hover{transform:translateY(-2px);border-color:var(--accent)}
.room-img{position:relative;aspect-ratio:16/10;background:var(--scene);overflow:hidden}
.room-img img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;left:10px;top:10px;background:rgba(6,13,16,.78);color:#E4ECEB;font-size:11px;padding:3px 8px;border-radius:4px}
.room-b{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;flex:1}
.room-b b{font-size:16px}
.skills{display:flex;flex-wrap:wrap;gap:5px}
.skills span{font-size:12px;background:var(--sunk);color:var(--ink-2);padding:2px 8px;border-radius:4px}
.room-f{margin-top:auto;display:flex;gap:6px;padding-top:4px}

.rubric{width:100%;border-collapse:collapse}
.rubric th{text-align:left;font-weight:600;padding:8px 10px 8px 0;white-space:nowrap;vertical-align:top;font-size:14px;border-top:1px solid var(--line)}
.rubric td{padding:8px 0;border-top:1px solid var(--line);vertical-align:top}
.rubric tr:first-child td,.rubric tr:first-child th{border-top:0}
.rubric td.num{padding-right:12px;font-weight:600;color:var(--accent)}
.prio{list-style:none;display:flex;flex-wrap:wrap;gap:6px;counter-reset:p}
.prio li{counter-increment:p;display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-weight:600;font-size:14px}
.prio li::before{content:counter(p);font-family:var(--f-mono);font-size:11px;background:var(--ink);color:var(--paper);width:18px;height:18px;border-radius:4px;display:grid;place-items:center}

/* 로그인 */
.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);max-width:960px;margin:0 auto}
.login-side{background:var(--chrome);color:var(--chrome-ink);padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:14px}
.login-side p,.login-side li{color:var(--chrome-muted)}
.login-side ul{padding-left:18px;display:grid;gap:6px;font-size:14px}
.login-form{background:var(--surface);padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:12px}
@media (max-width:760px){.login{grid-template-columns:1fr}}
.seg{display:inline-flex;background:var(--sunk);border-radius:8px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:6px;cursor:pointer;font-weight:600;font-size:14px;color:var(--muted)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg.small button{padding:4px 10px;font-size:12.5px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
input,select,textarea{border:1px solid var(--line-2);background:var(--paper);border-radius:7px;padding:9px 11px;width:100%;min-width:0}
textarea{resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
input:disabled,textarea:disabled{opacity:.75}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent)}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-err{color:var(--alert);font-size:13.5px}
.check{display:flex;gap:8px;align-items:center;cursor:pointer;font-size:14px}

/* 나의 학습 */
.next{background:var(--chrome);color:var(--chrome-ink);border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:240px}
.next .eyebrow{color:var(--chrome-muted)}
.stagetrack{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.stagetrack a{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:6px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink-2);font-size:13.5px;font-weight:600}
.stagetrack .dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--line-2)}
.stagetrack a.done .dot{background:var(--ok);border-color:var(--ok)}
.stagetrack .lk{font-size:11px}
table.mini{width:100%;border-collapse:collapse;font-size:14px}
.mini th{text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;padding:6px 8px;border-bottom:1px solid var(--line)}
.mini td{padding:8px;border-bottom:1px solid var(--line)}
.mini small{color:var(--muted);font-weight:400}

/* OT */
.tasks{display:flex;flex-direction:column;gap:16px}
.task{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow)}
.task .num{width:32px;height:32px;border-radius:8px;background:var(--sunk);display:grid;place-items:center;font-family:var(--f-mono);font-weight:500}
.task.done .num{background:var(--ok);color:#fff}
.task-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.task-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:560px){.task{grid-template-columns:1fr;padding:16px}}
.principles{padding-left:18px;display:grid;gap:4px}
.timeline{list-style:none;display:grid;border-left:2px solid var(--line);margin-left:6px}
.timeline li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:2px 12px;padding:8px 0 8px 16px;position:relative}
.timeline li::before{content:"";position:absolute;left:-7px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.timeline .t{font-size:12.5px;color:var(--accent);grid-row:span 2}
.timeline b{font-size:14.5px}
.timeline span:last-child{color:var(--muted);font-size:13.5px}
.timeline.wide{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 18px;margin-left:0}
.timeline.wide li{padding-left:0;border-top:1px solid var(--line)}
.timeline.wide li::before{display:none}
.timeline.wide li:first-child{border-top:0}
@media (max-width:520px){.timeline li{grid-template-columns:1fr}.timeline .t{grid-row:auto}}
.more summary{cursor:pointer;font-weight:600;color:var(--accent);font-size:14px}
.more[open] summary{margin-bottom:10px}
.quiz{display:flex;flex-direction:column;gap:12px}
.q{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0;display:flex;flex-direction:column;gap:6px;background:var(--paper);min-width:0}
.q legend{font-weight:600;padding:0 4px;font-size:14.5px}
.q label{display:flex;gap:8px;align-items:flex-start;cursor:pointer;font-size:14px}
.q label input{margin-top:5px}
.q.right{border-color:var(--ok)} .q.wrong{border-color:var(--alert)}
.ok-t{color:var(--ok)}
.why{font-size:13.5px;color:var(--ink-2);background:var(--sunk);padding:8px 10px;border-radius:6px}
.ot-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px}
.ot-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.inspect{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;min-height:150px}
.otlist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.otlist button{width:100%;text-align:left;display:flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:6px 9px;cursor:pointer;font-size:13.5px}
.otlist .ck{width:14px;height:14px;border-radius:4px;border:2px solid var(--line-2);flex:none}
.otlist button.ok .ck{background:var(--accent);border-color:var(--accent)}
.otlist button.on{border-color:var(--sel);background:var(--sel-soft)}
@media (max-width:900px){.ot-grid{grid-template-columns:1fr}}

/* 3D */
.scene-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--scene) center/cover no-repeat;aspect-ratio:16/10;min-height:300px;box-shadow:var(--shadow);max-width:100%}
.scene{touch-action:none;user-select:none;-webkit-user-select:none}
.scene canvas{display:block;width:100%;height:100%;cursor:grab}
.scene canvas:active{cursor:grabbing}
.scene-load{position:absolute;right:12px;bottom:56px;display:flex;align-items:center;gap:8px;background:rgba(6,13,16,.78);color:#E4ECEB;padding:7px 12px;border-radius:6px;font-size:13px}
.scene.failed .scene-load{background:#a3292c}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.scene-tip{position:absolute;left:12px;top:12px;background:rgba(6,13,16,.82);color:#fff;font-size:13px;padding:5px 10px;border-radius:5px;pointer-events:none}
.scene-views{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:2px;background:rgba(6,13,16,.72);padding:3px;border-radius:8px;max-width:calc(100% - 24px);overflow-x:auto;backdrop-filter:blur(6px)}
.scene-views button{border:0;background:transparent;color:#DDE7E6;font-size:12.5px;padding:6px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.scene-views button:hover{background:rgba(255,255,255,.12)}
.scene-tools{position:absolute;right:12px;top:12px;display:flex;gap:6px}
.sbtn{width:34px;height:34px;border-radius:7px;border:0;background:rgba(6,13,16,.72);color:#fff;cursor:pointer;font-size:16px}
.scene:fullscreen{border-radius:0}
.scene-fail{padding:20px;color:#fff;background:#a3292c;position:absolute;left:12px;bottom:12px;border-radius:6px}

/* 병실 화면 */
.room-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.room-h>div{flex:1 1 260px;min-width:0}
.room-h h1{font-size:clamp(22px,2.6vw,30px)}
.back{width:36px;height:36px;border-radius:8px;border:1px solid var(--line-2);display:grid;place-items:center;text-decoration:none;color:var(--ink);background:var(--surface);flex:none}
.steps{display:flex;gap:2px;background:var(--sunk);padding:3px;border-radius:9px;overflow-x:auto;max-width:100%}
.steps button{border:0;background:transparent;padding:7px 11px;border-radius:7px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;display:flex;gap:6px;align-items:center}
.steps button span{font-size:11px;opacity:.7}
.steps button[aria-current="step"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.steps button:disabled{opacity:.4;cursor:not-allowed}

.cardgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.cardgrid{grid-template-columns:1fr}}
.sitcard{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(18px,3vw,30px);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);border-top:5px solid var(--accent)}
.sitcard h2{font-size:20px}
.sitcard h3{font-size:13px;color:var(--muted);margin-top:8px;letter-spacing:.02em}
.sitcard ul{padding-left:18px;display:grid;gap:3px}
.sitcard .cue{background:var(--sel-soft);border-left:3px solid var(--sel);padding:10px 12px;border-radius:0 6px 6px 0}

.observe{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:stretch}
.scene-frame.big{aspect-ratio:auto;height:calc(100vh - 210px);min-height:420px}
.obs-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 210px);min-height:420px;box-shadow:var(--shadow);min-width:0}
@media (max-width:980px){.observe{grid-template-columns:1fr}.scene-frame.big{height:62vh;min-height:340px}.obs-side{max-height:none;min-height:0}}
.timer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 12px;background:var(--chrome);color:var(--chrome-ink);border-radius:var(--r);padding:10px 14px}
.timer .mono{font-size:28px;font-weight:500;grid-row:span 2;line-height:1}
.timer span:nth-child(2){font-size:12.5px;color:var(--chrome-muted)}
.timer .bar{height:4px;background:var(--chrome-3);border-radius:2px;overflow:hidden}
.timer .bar i{display:block;height:100%;background:var(--accent);transition:width 1s linear}
.timer.low .mono{color:var(--sel)} .timer.low .bar i{background:var(--sel)}
.obs-empty{background:var(--paper);border:1px dashed var(--line-2);border-radius:var(--r);padding:14px;display:grid;gap:4px}
.obs-form{background:var(--paper);border:1px solid var(--sel);border-radius:var(--r);padding:12px;display:grid;gap:9px;box-shadow:0 0 0 3px var(--sel-soft)}
.obs-list-h{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.obs-list{list-style:none;display:grid;gap:5px;overflow-y:auto;flex:1;min-height:60px;align-content:start;padding-right:2px}
.obs-list button{width:100%;text-align:left;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:7px 9px;cursor:pointer}
.obs-list button.on{border-color:var(--sel);background:var(--sel-soft)}
.obs-list .n{font-size:11.5px;color:var(--muted)}
.obs-list .t{display:flex;flex-direction:column;min-width:0}
.obs-list .t b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obs-list .t small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obs-list .empty{padding:8px}
.dotwarn{width:8px;height:8px;border-radius:50%;background:var(--sel)}
.obs-next{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}

.grid-top5,.grid-sbar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:900px){.grid-top5,.grid-sbar{grid-template-columns:1fr}}
.top5{list-style:none;display:grid;gap:8px}
.top5 li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:start;border:1px solid var(--line);border-radius:var(--r);padding:10px;background:var(--paper)}
.top5 li.empty{border-style:dashed;align-items:center;grid-template-columns:34px minmax(0,1fr)}
.top5 .rank{width:30px;height:30px;border-radius:7px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:500}
.top5 li.empty .rank{background:var(--sunk);color:var(--muted)}
.top5 .t{display:grid;gap:4px;min-width:0}
.top5 .t small{color:var(--muted)}
.ord{display:flex;flex-direction:column;gap:3px}
.ib{width:28px;height:26px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);cursor:pointer;font-size:13px}
.ib:disabled{opacity:.35}
.picklist{list-style:none;display:grid;gap:6px;max-height:620px;overflow-y:auto}
.picklist button{width:100%;text-align:left;display:grid;gap:2px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:9px 11px;cursor:pointer}
.picklist button:hover:not(:disabled){border-color:var(--accent)}
.picklist button.on{background:var(--accent-soft);border-color:var(--accent)}
.picklist button:disabled:not(.on){opacity:.55;cursor:default}
.picklist small{color:var(--ink-2)} .picklist .risk{font-size:12.5px;color:var(--muted)}

.sbar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.sbar{grid-template-columns:1fr}}
.sb label{display:flex;gap:8px;align-items:center}
.sbl{width:24px;height:24px;border-radius:5px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:13px}
.rehearse{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;padding:14px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.rehearse>div:first-child{flex:1 1 260px}
.clock{display:flex;align-items:center;gap:12px}
.clock .big{font-size:30px}
.clock .over{color:var(--alert)}
.checklist{list-style:none;display:grid;gap:6px;font-size:14px}
.checklist li{display:flex;gap:8px;align-items:center}
.checklist li::before{content:"";width:16px;height:16px;border-radius:4px;border:2px solid var(--line-2);flex:none}
.checklist li.ok::before{background:var(--ok);border-color:var(--ok)}

.scorebar{display:grid;grid-template-columns:auto repeat(6,minmax(0,1fr));gap:10px;background:var(--chrome);color:var(--chrome-ink);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:14px;align-items:center}
.scorebar .big{display:flex;align-items:baseline;gap:6px;padding-right:12px;border-right:1px solid var(--chrome-3)}
.scorebar .big span{font-size:40px;line-height:1}
.scorebar .big small{color:var(--chrome-muted);font-size:12.5px}
.scorebar .sc{display:flex;flex-direction:column;min-width:0}
.scorebar .sc small{font-size:11.5px;color:var(--chrome-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scorebar .sc b{font-size:19px}
.scorebar .sc i{font-style:normal;font-size:12px;color:var(--chrome-muted)}
.scorebar .sc em{font-style:normal;font-size:11px;color:var(--sel)}
@media (max-width:900px){.scorebar{grid-template-columns:repeat(3,minmax(0,1fr))}.scorebar .big{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--chrome-3);padding-bottom:8px}}
.db-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:start}
.db-grid .scene-frame{aspect-ratio:4/3;position:sticky;top:70px}
@media (max-width:900px){.db-grid{grid-template-columns:1fr}.db-grid .scene-frame{position:relative;top:0}}
.db-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;border:2px solid}
.sw.miss{border-color:#e5484d}.sw.mark{border-color:#1fb3a9}
.answers{list-style:none;display:grid;gap:5px}
.answers li{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.answers li>button{width:100%;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:10px;align-items:center;border:0;background:transparent;padding:8px 11px;cursor:pointer;text-align:left}
.answers .code{font-size:13px}
.answers .area{font-size:14px;font-weight:600}
.answers .st{font-size:12px;font-weight:600;padding:2px 8px;border-radius:4px}
.answers li.hit .st{background:var(--ok-soft);color:var(--ok)}
.answers li.part .st{background:var(--sel-soft);color:var(--warn)}
.answers li.miss .st{background:var(--alert-soft);color:var(--alert)}
.answers li.miss{border-left:3px solid var(--alert)}
.answers li.on{border-color:var(--sel)}
.ans{margin:0;padding:10px 12px 12px;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13.5px;border-top:1px solid var(--line)}
.ans dt{color:var(--muted);font-weight:600;white-space:nowrap}
.ans dd{margin:0}
.causes{border:0;padding:0;margin:0;display:flex;gap:16px;flex-wrap:wrap}
.causes legend{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;padding:0}

/* 팀 */
.copyrow{display:flex;gap:8px;flex-wrap:wrap}
.copychip{display:inline-flex;gap:8px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:13.5px}
.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.module{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer}
.module input{margin-top:5px}
.module span{display:flex;flex-direction:column}
.module small{color:var(--muted)}
.module:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}

/* 종합 */
.bars{display:grid;gap:8px}
.bar{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:13.5px}
.bars.wide .bar{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 44px}
.bar>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track{height:8px;background:var(--sunk);border-radius:4px;overflow:hidden;display:block}
.fill{display:block;height:100%;background:var(--accent);border-radius:4px}
.fill.low{background:var(--alert)}
.bar .v{text-align:right}
.cert{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:20px;background:var(--paper);display:flex;flex-direction:column;gap:6px}
.cert.on{border:2px solid var(--accent);background:var(--accent-soft)}

/* 교수자 콘솔 */
.keyform{max-width:420px;display:flex;flex-direction:column;gap:12px}
.ops{margin-bottom:18px}
.opsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
.toggles{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.toggles label{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:5px 10px;font-size:13.5px;cursor:pointer;background:var(--paper)}
.toggles label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.toggles label.rev:has(input:checked){border-color:var(--alert);background:var(--alert-soft);color:var(--alert);font-weight:600}
.roomtabs{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch;margin-bottom:14px}
.roomtabs button{display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:700}
.roomtabs button small{font-weight:400;color:var(--muted);font-size:12px}
.roomtabs button[aria-selected="true"]{background:var(--chrome);color:var(--chrome-ink);border-color:var(--chrome)}
.roomtabs button[aria-selected="true"] small{color:var(--chrome-muted)}
.roomtabs select{width:auto;margin-left:auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column}
.kpi small{color:var(--muted);font-size:12px}
.kpi b{font-size:22px}
.kpi i{font-style:normal;font-size:13px;color:var(--muted)}
.fb{list-style:none;display:grid;gap:10px;font-size:14px}
.fb small{display:block;color:var(--accent);font-weight:600;font-size:12.5px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table.grade{width:100%;border-collapse:collapse;font-size:13.5px;min-width:1040px}
.grade th{background:var(--paper);text-align:left;font-weight:600;font-size:12.5px;color:var(--muted);padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.grade th i{font-style:normal;font-weight:400;margin-left:3px;opacity:.7}
.grade td{padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.grade td.num{text-align:right}
.grade tr.dim td{color:var(--muted)}
.gin{width:64px;padding:5px 7px;text-align:right;font-family:var(--f-mono)}
.gin::placeholder{color:var(--muted);opacity:.6}
.checks{list-style:none;display:grid;gap:5px;font-size:14px}
.detail h3{margin:6px 0}
.dlist{list-style:none;display:grid;gap:6px;max-height:520px;overflow-y:auto}
.dlist li{border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:6px;padding:8px 10px;font-size:13.5px;display:grid;gap:2px}
.dlist li.hit{border-left-color:var(--ok)} .dlist li.part{border-left-color:var(--sel)} .dlist li.fp{border-left-color:var(--alert)}
.tag2{font-size:11.5px;color:var(--muted)}

/* 도입 */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.metric{background:var(--chrome);color:var(--chrome-ink);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:6px}
.metric b{font-size:24px}
.metric span{color:var(--chrome-muted);font-size:13.5px}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:8px}
.tier.feat{border:2px solid var(--accent)}
.tier ul{padding-left:18px;display:grid;gap:4px;font-size:14px}

.foot{max-width:1280px;margin:0 auto;padding:20px 16px 36px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--chrome);color:var(--chrome-ink);padding:10px 16px;border-radius:8px;font-size:14px;z-index:60;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
/* 권한별 콘솔 */
.ctabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:18px}
.ctabs button{border:0;background:none;padding:10px 14px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:6px;align-items:center}
.ctabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.badge{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--alert);color:#fff;font-size:11.5px;font-weight:700;text-align:center;font-family:var(--f-mono)}
.gin.wide{width:120px;text-align:left;font-family:inherit}
.linkish.danger{color:var(--alert)}
.linkish+.linkish,.btn+.linkish{margin-left:10px}
.notice.demo{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border-color:var(--warn)}
.notice.demo .row{gap:8px}
table.mini tr.on td{background:var(--sel-soft)}
.keyform .seg{align-self:flex-start}
/* Unity 걷기 탐색 — 조작 도구는 반투명, 손대지 않으면 더 흐려진다 */
.unity-frame{position:relative;background:#1d2a2f;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.unity-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.u-cross{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;pointer-events:none;border-radius:50%;border:2px solid rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.unity-frame.aim .u-cross{border-color:#5be0b3;transform:scale(1.3)}
.unity-frame:not(.touch):not(.u-center) .u-cross{display:none}
.unity-frame:not(.touch):not(.u-center) .u-label{left:10px;top:10px;transform:none;font-size:13px;padding:4px 10px}
.u-label{position:absolute;left:50%;top:calc(50% + 16px);transform:translateX(-50%);pointer-events:none;background:rgba(15,25,28,.72);color:#fff;font-size:12.5px;padding:3px 9px;border-radius:6px;white-space:nowrap;max-width:80%;overflow:hidden;text-overflow:ellipsis}
.u-top{position:absolute;right:8px;top:8px;display:flex;gap:4px;align-items:center;z-index:3;transition:opacity .4s}
.u-stat{color:#dfe8ea;font-size:11px;background:rgba(15,25,28,.5);padding:3px 7px;border-radius:5px}
.u-stat:empty{display:none}
.u-mini{border:0;background:rgba(15,25,28,.55);color:#e8f0f2;font-size:12px;padding:5px 9px;border-radius:6px;cursor:pointer;min-width:30px}
.u-mini[aria-expanded="true"],.u-mini[aria-pressed="true"]{background:rgba(79,179,164,.85);color:#fff}
.u-views{position:absolute;right:8px;top:42px;display:flex;flex-direction:column;gap:2px;background:rgba(15,25,28,.78);padding:4px;border-radius:8px;z-index:3}
.u-views button{border:0;background:transparent;color:#dfe8ea;font-size:12.5px;padding:7px 12px;border-radius:5px;cursor:pointer;text-align:left}
.u-views button:hover{background:rgba(255,255,255,.12)}
.u-help{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;background:rgba(15,25,28,.72);color:#e8f0f2;font-size:12px;padding:8px 12px;border-radius:8px;cursor:pointer;z-index:2}
.u-help b{color:#9fe3cf}
.unity-frame.touch .u-help{bottom:auto;top:44px}
/* 휴대폰 조작 */
.u-pad{position:absolute;inset:0;z-index:1;touch-action:none}
.u-joy{position:absolute;left:18px;bottom:18px;width:112px;height:112px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.35);z-index:2;touch-action:none;transition:opacity .4s}
.u-knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 1px 4px rgba(0,0,0,.3);pointer-events:none}
.u-acts{position:absolute;right:16px;bottom:22px;display:flex;flex-direction:column;gap:12px;align-items:center;z-index:2;transition:opacity .4s}
.u-btn{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(15,25,28,.45);color:#fff;font-size:13px;font-weight:700;touch-action:none}
.u-btn.u-pick{width:68px;height:68px;background:rgba(31,140,120,.62);border-color:rgba(160,240,220,.6);font-size:14px}
.u-btn.on{transform:scale(.92);background:rgba(79,179,164,.9)}
.unity-frame.idle .u-joy,.unity-frame.idle .u-acts{opacity:.32}
.unity-frame.idle .u-top{opacity:.45}
/* 크게 보기: 화면 전체(기록할 때는 자동으로 원래 크기로) */
.unity-frame.u-big{position:fixed!important;inset:0;z-index:60;border-radius:0;height:auto!important;max-height:none;aspect-ratio:auto;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
html.u-big-on,html.u-big-on body{overflow:hidden}
@media (max-width:600px){.u-joy{width:96px;height:96px;left:12px;bottom:12px}.u-acts{right:12px;bottom:14px}.u-btn{width:50px;height:50px}.u-btn.u-pick{width:60px;height:60px}}
.walkmode{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.walkmode .muted{font-size:12.5px}
.obs-scene,.ot-scene{display:flex;flex-direction:column;gap:6px;min-width:0}
.obs-scene .scene-frame.big{height:calc(100vh - 250px)}
@media (max-width:980px){.obs-scene .scene-frame.big{height:62vh}}
.db-grid > div > .scene-frame{aspect-ratio:4/3;position:sticky;top:70px}
/* 내 계정 */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:start;max-width:820px}
.acct-grid form{min-width:0}
.acct-grid h2{margin:0;font-size:1.05rem}

/* ───── 3D 조작 도구 (모든 3D 화면) ───── */
.scene-tip{left:0;top:0;transform:translate(12px,12px);max-width:260px;z-index:4;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.scene-load{flex-wrap:wrap;max-width:min(340px,calc(100% - 24px))}
.scene-bar{flex-basis:100%;height:3px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden}
.scene-bar i{display:block;height:100%;width:0;background:#5be0d3;transition:width .3s}
.scene-pad{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;background:rgba(6,13,16,.62);padding:5px;border-radius:11px;backdrop-filter:blur(6px);z-index:3}
.scene-pad .sbtn{width:38px;height:38px;font-size:17px;border-radius:8px;background:transparent;touch-action:none;line-height:1}
.scene-pad .sbtn:hover{background:rgba(255,255,255,.14)}
.scene-pad .sbtn:active{background:rgba(91,224,211,.3)}
.scene-pad .sbtn[aria-expanded="true"]{background:rgba(242,178,62,.35)}
.scene-pad .sep{height:1px;background:rgba(255,255,255,.16);margin:2px 4px}
.scene-help{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);background:rgba(6,13,16,.88);color:#E4ECEB;border-radius:10px;padding:12px 16px;display:grid;gap:4px;font-size:13px;z-index:4;width:max-content;max-width:calc(100% - 24px);cursor:pointer}
.scene-help kbd{font-family:var(--f-mono);font-size:11px;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:0 5px;margin:0 1px}
.scene-views{z-index:3}
@media (max-width:620px){.scene-pad .sbtn{width:34px;height:34px}.scene-pad [data-act="up"],.scene-pad [data-act="dn"]{display:none}}

/* ───── 관찰 · 게임처럼 화면 전체를 쓰는 탐색 ───── */
body.obs-mode{overflow:hidden}
body.obs-mode .topbar,body.obs-mode .foot,body.obs-mode .room-h,body.obs-mode #app > .notice{display:none}
.observe.immersive{--pw:min(380px,calc(100vw - 24px));position:fixed;inset:0;z-index:60;display:block;background:#0b1418;color:#E4ECEB}
.observe.immersive .obs-scene{position:absolute;inset:0;display:block}
.observe.immersive .obs-scene .scene-frame.big{position:absolute;inset:0;height:100%;min-height:0;border-radius:0;aspect-ratio:auto;box-shadow:none}
.observe.immersive .scene-load{right:auto;left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);padding:12px 16px;font-size:14px}
.observe.immersive .scene-views{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.observe.immersive.panel-on .scene-pad{right:calc(var(--pw) + 24px)}
.observe.immersive.panel-on .scene-views,.observe.immersive.panel-on .scene-help{left:calc((100% - var(--pw) - 12px) / 2)}
.hud-top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 18px;background:linear-gradient(rgba(6,13,16,.82),rgba(6,13,16,0));pointer-events:none}
.hud-top > *{pointer-events:auto}
.hud-btn{border:1px solid rgba(255,255,255,.16);background:rgba(10,20,24,.74);color:#E4ECEB;border-radius:9px;padding:7px 12px;font-size:13.5px;cursor:pointer;backdrop-filter:blur(8px);white-space:nowrap;line-height:1.3}
.hud-btn:hover{background:rgba(32,52,58,.92)}
.hud-btn[aria-expanded="true"]{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel) inset}
.hud-btn b{color:#5be0d3;margin-left:2px}
.hud-title{display:flex;flex-direction:column;line-height:1.25;margin-right:auto;min-width:0;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hud-title b{font-size:11.5px;color:#8fe3da;letter-spacing:.1em}
.hud-title span{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-seg{background:rgba(10,20,24,.74);border:1px solid rgba(255,255,255,.16)}
.hud-seg button{color:#B4C6C8}
.hud-seg button[aria-selected="true"]{background:#E4ECEB;color:#0e1d23}
.timer.hud-timer{min-width:210px;background:rgba(10,20,24,.8);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);padding:6px 12px;gap:1px 10px}
.timer.hud-timer .mono{font-size:23px}
.timer.paused .mono{opacity:.5}
.timer.paused .bar i{background:var(--chrome-muted)}
.timer.paused span:nth-child(2){color:#F2B23E}
.hud-card{position:absolute;left:12px;top:70px;z-index:5;width:min(440px,calc(100vw - 24px));max-height:calc(100% - 150px);overflow:auto;background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:14px 16px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);display:grid;gap:8px;font-size:14px}
.hud-card h4{font-size:13.5px;margin-top:4px}
.hud-card ul{padding-left:18px;display:grid;gap:2px}
.hud-x{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.observe.immersive .obs-side{position:absolute;top:70px;right:12px;bottom:12px;width:var(--pw);max-height:none;min-height:0;z-index:4;background:var(--surface);color:var(--ink);transform:translateX(calc(100% + 30px));transition:transform .25s ease;box-shadow:0 18px 44px -18px rgba(0,0,0,.7)}
.observe.immersive.panel-on .obs-side{transform:none}
@media (prefers-reduced-motion:reduce){.observe.immersive .obs-side{transition:none}}
/* 살펴본 물체 · 판단 */
.obs-form .ins-h{display:grid;gap:2px}
.obs-form .ins-h h3{font-size:16.5px}
.obs-form .ins-h input{border:1px solid var(--line-2);border-radius:7px;padding:7px 9px;background:var(--surface)}
.ins-state{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:7px;padding:10px 12px;font-size:14.5px;line-height:1.6}
.judge{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.judge button{border:1.5px solid var(--line-2);background:var(--surface);border-radius:9px;padding:10px 8px;font-weight:700;font-size:15px;cursor:pointer;color:var(--ink-2)}
.judge button:disabled{opacity:.45;cursor:not-allowed}
.judge [data-judge="err"][aria-pressed="true"]{background:var(--alert);border-color:var(--alert);color:#fff}
.judge [data-judge="ok"][aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:#fff}
.obs-form.j-err{border-color:var(--alert);box-shadow:0 0 0 3px var(--alert-soft)}
.obs-form.j-ok{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.obs-list button{grid-template-columns:24px minmax(0,1fr) auto auto}
.jchip{font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:4px}
.jchip.err{background:var(--alert-soft);color:var(--alert)} .jchip.ok{background:var(--ok-soft);color:var(--ok)} .jchip.none{background:var(--sunk);color:var(--muted)}
.dlist li.okj{border-left-color:var(--ok)}
@media (max-width:760px){
  .observe.immersive{--pw:auto}
  .hud-top{gap:6px;padding-inline:8px;flex-wrap:wrap}
  .hud-title span,.hud-lab{display:none}
  .timer.hud-timer{min-width:0;order:9;flex:1 1 100%;grid-template-columns:auto 1fr}
  .timer.hud-timer .mono{font-size:19px}
  .hud-seg{display:none}
  .observe.immersive .obs-side{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:min(60vh,540px);transform:translateY(calc(100% + 30px))}
  .observe.immersive.panel-on .scene-pad{right:12px;top:30%}
  .observe.immersive.panel-on .scene-views{display:none}
  .observe.immersive.panel-on .scene-views,.observe.immersive.panel-on .scene-help{left:50%}
  .hud-card{top:110px;max-height:calc(100% - 130px)}
}
.side-x{display:none}
@media (max-width:760px){
  .side-x{display:block;align-self:center;border:0;background:var(--sunk);color:var(--muted);border-radius:999px;padding:3px 14px;font-size:12.5px;cursor:pointer;margin:-4px 0 -2px}
  .observe.immersive .obs-side{height:min(54vh,520px)}
  .observe.immersive.panel-on .scene-pad{display:none}
}
/* ───────── 확대 창(물체를 누르면 뜨는 자세히 보기) ───────── */
.side-x{display:block;border:0;background:var(--sunk);color:var(--muted);border-radius:999px;padding:4px 12px;font-size:12.5px;cursor:pointer}
.side-x:hover{color:var(--ink)}
.side-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.obs-help{background:var(--paper);border:1px dashed var(--line-2);border-radius:var(--r);padding:12px 14px;display:grid;gap:4px}
.dmodal{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:64px 16px 16px}
.dmodal.fixed{position:fixed;z-index:60;padding:16px}
.dmodal[hidden]{display:none}
.dm-back{position:absolute;inset:0;background:rgba(4,10,12,.55);backdrop-filter:blur(2px)}
.dm-box{position:relative;width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border-radius:var(--r-lg);box-shadow:0 30px 70px -20px rgba(0,0,0,.75);overflow:hidden}
.dm-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.dm-ht{display:grid;gap:1px;min-width:0}.dm-ht h3{font-size:18px;text-wrap:balance}
.dm-x{border:1px solid var(--line-2);background:var(--paper);color:var(--ink);border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.dm-x:hover{background:var(--sunk)}
.dm-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);min-height:0;overflow:auto}
.dm-media{padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0;border-right:1px solid var(--line);background:var(--paper)}
.dm-media.empty{justify-content:center}
.dm-info{padding:14px 16px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:auto}
.dm-tabs{display:flex;flex-wrap:wrap;gap:6px}
.dm-tabs button{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer}
.dm-tabs button[aria-selected="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.dm-pane{display:grid;gap:6px;min-width:0}
.dm-cap,.dm-zh{margin:0}
.dm-none{padding:30px 10px;text-align:center}
.zoom{position:relative;overflow:hidden;border-radius:10px;background:#0c1417;height:min(54vh,520px);touch-action:none;cursor:zoom-in;user-select:none}
.zoom.zoomed{cursor:grab}.zoom.zoomed:active{cursor:grabbing}
.zoom-in{width:100%;height:100%;transform-origin:0 0;display:grid;place-items:center}
.zoom-in img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.zoom-in.dm-docs{place-items:start center;align-content:start;gap:14px;padding:14px;overflow:visible;background:#d9d6cc}
.zoom:has(.dm-docs){background:#d9d6cc}
.zoom-bar{position:absolute;right:8px;bottom:8px;display:flex;gap:4px}
.zoom-bar button{width:32px;height:32px;border-radius:8px;border:0;background:rgba(10,20,24,.78);color:#fff;font-size:17px;cursor:pointer}
.dm-mon{background:#000;border-radius:10px;padding:10px;border:6px solid #2b3236}
.dm-mon-cv{width:100%;height:auto;display:block;border-radius:4px}
.dm-sub{font-size:14px}
.dm-facts{display:grid;gap:6px;padding-left:18px;font-size:15px;line-height:1.6}
.dm-cmp{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.dm-cmp summary{cursor:pointer;font-weight:700;font-size:13.5px}
.dm-cmp ul{padding-left:18px;display:grid;gap:2px;margin-top:6px}
.dm-info .obs-form{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:10px}
body.dm-open{overscroll-behavior:contain}
/* 기록 원본(병실 속 종이·화면을 그대로 옮김) — 종이와 화면은 실제 물건의 색을 따른다 */
.rec{margin:0;width:min(560px,100%);display:grid;gap:4px}
.rec figcaption{font-size:12px;font-weight:700;color:#3a4447;letter-spacing:.02em}
.rec-face{border-radius:6px;padding:14px 16px;display:grid;gap:6px;box-shadow:0 6px 16px -8px rgba(0,0,0,.45);font-size:17px;line-height:1.45}
.rec-face p{margin:0;min-height:1.3em}
.rec .red{color:#c0261c}.rec .blue{color:#1f4fb2}
.rec .blank{display:inline-block;width:70%;border-bottom:1px dashed #9a9a92;height:1em}
.rec-paper .rec-face,.rec-tag .rec-face,.rec-card .rec-face,.rec-note .rec-face{background:#fbfaf3;color:#1b1f20;border:1px solid #cfccbf}
.rec-paper .rec-face{background-image:repeating-linear-gradient(#fbfaf3 0 30px,#e3e7ee 30px 31px)}
.rec-tag .rec-face{background:#fffbe6;font-size:16px}
.rec-note .rec-face{background:#eef1f1;font-size:15px;color:#2a3437}
.rec-card .rec-face{border:4px solid #e8e8e4;border-radius:10px}
.rec-card .big{font-size:30px;font-weight:800;letter-spacing:.04em}
.rec-sign .rec-face{background:#fffefa;color:#1b1f20;border:1px solid #cfccbf;font-size:20px;font-weight:700;text-align:center}
.rec-sign.tone-yellow .rec-face{background:#fbe26b}
.rec-sign .h{color:#1b1f20}
.rec-screen .rec-face{background:#0e2230;color:#e8f1f5;border:8px solid #2f3a40;font-family:var(--mono,ui-monospace),"IBM Plex Sans KR",sans-serif}
.rec-screen .h{font-weight:800;color:#9fd4ff}.rec-screen .red{color:#ff6a5e}
.rec-board .rec-face{background:#fdfdfb;color:#1d3c8f;border:8px solid #b9bdc0;font-size:19px;font-weight:600}
.rec-pump .rec-face{background:#cfe0c9;color:#132a12;border:8px solid #3c4549;font-size:15px}
.rec-pump .lab{font-size:13px;opacity:.75}.rec-pump .num{font-size:40px;font-weight:800;letter-spacing:.02em}
.rec-table .rec-scroll{overflow-x:auto;background:#fbfaf3;border:1px solid #cfccbf;border-radius:6px;box-shadow:0 6px 16px -8px rgba(0,0,0,.45)}
.rec-table table{border-collapse:collapse;width:100%;color:#1b1f20;font-size:16px}
.rec-table th,.rec-table td{border:1px solid #c9c7bb;padding:8px 10px;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.rec-table th{background:#ecebe2;font-size:13px}
.rec-table td{height:2.1em}
.rec-table .blank{width:2.5em;border:0}
@media (max-width:860px){
  .dmodal{padding:8px;align-items:end}
  .dm-box{max-height:calc(100% - 8px)}
  .dm-body{grid-template-columns:1fr}
  .dm-media{border-right:0;border-bottom:1px solid var(--line)}
  .zoom{height:min(40vh,360px)}
  .dm-facts{font-size:14.5px}
}
.zoom.docs{height:auto;max-height:min(58vh,560px);overflow-y:auto;touch-action:pan-y;cursor:default}
.zoom.docs.zoomed{overflow:hidden;touch-action:none;cursor:grab;height:min(58vh,560px)}
.zoom.docs .zoom-in{height:auto;min-height:100%}
.zoom.docs .zoom-bar{position:sticky;bottom:8px;margin:-40px 8px 8px auto;width:max-content}
@media (max-width:860px){.zoom.docs{max-height:min(44vh,420px)}}
@media (max-width:860px){.dm-info{overflow:visible}.rec-table th,.rec-table td{padding:6px 7px}.rec-table table{font-size:14.5px}.dm-h{padding:10px 12px}}

/* 실사 화면: 3D 장면 위로 사진이 떠오르고, 누르고 있는 동안 3D로 돌아가 견줘 본다 */
.dm-realz .zoom-in{display:block}
.dm-real{position:relative;width:100%;height:100%}
.dm-real img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.dm-real img.dm-real-bg{object-fit:cover;filter:blur(18px) brightness(.55) saturate(1.1);transform:scale(1.12);opacity:0;transition:opacity 1s ease .2s}
.dm-real.on .dm-real-bg{opacity:1}
.dm-real.on.peek .dm-real-bg{opacity:.35}
.dm-real-ph{opacity:0;transform:scale(1.035);transition:opacity .9s ease .2s,transform 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.dm-real.on .dm-real-ph{opacity:1;transform:none}
.dm-real.on.peek .dm-real img.dm-real-bg{object-fit:cover;filter:blur(18px) brightness(.55) saturate(1.1);transform:scale(1.12);opacity:0;transition:opacity 1s ease .2s}
.dm-real.on .dm-real-bg{opacity:1}
.dm-real.on.peek .dm-real-bg{opacity:.35}
.dm-real-ph{opacity:0;transition:opacity .18s ease}
.dm-real-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.dm-real-bar .muted{flex:1 1 220px;min-width:0}
.dm-peek{flex:none;border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dm-peek[aria-pressed="true"]{background:#0f4c5c;color:#fff;border-color:#0f4c5c}
@media (prefers-reduced-motion:reduce){.dm-real-ph{transition:opacity .2s;transform:none}}

.upd-bar{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:calc(100% - 32px);background:var(--chrome);color:var(--chrome-ink);padding:10px 12px 10px 16px;border-radius:10px;box-shadow:var(--shadow);font-size:14px}

/* 사진 속 모니터 화면에 겹친 실시간 파형 */
.zoom-in{position:relative}
.scr-ov{position:absolute;pointer-events:none;overflow:hidden}
.zoom-in:not(.dm-docs) > .scr-ov{z-index:1}
.scr-cv{position:absolute;left:0;top:0;width:640px;height:400px;transform-origin:0 0;opacity:.94;filter:saturate(1.05) blur(.25px);box-shadow:0 0 18px rgba(80,255,170,.12)}
.dm-real .scr-ov{opacity:0;transition:opacity .9s ease .2s}
.dm-real.on .scr-ov{opacity:1}
.dm-real.on.peek .scr-ov{opacity:0;transition:opacity .18s}

.pinform{max-width:640px}
.pinrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.pinrow{grid-template-columns:1fr}}
/* 2.5D 병실 그림 보기 */
.scene.iso{position:relative;overflow:hidden;background:var(--scene)}
.iso-vp{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline:none}
.iso-vp.drag{cursor:grabbing}
.iso-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.iso-img,.iso-ov{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.iso-ov{pointer-events:none}
.seqlist{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}
.seqlist li{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seqtog{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:13.5px}
/* 사전 학습(주제별 그림·표·확인 문제) */
.learn{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:18px;align-items:start}
.learn-nav{position:sticky;top:70px;display:grid;gap:10px}
.learn-prog{height:8px;border-radius:6px;background:var(--sunk);overflow:hidden}
.learn-prog span{display:block;height:100%;background:var(--accent);transition:width .3s}
.learn-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.learn-list button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r);padding:9px 10px;font:inherit;font-size:14px;cursor:pointer}
.learn-list button[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.learn-list .lok{margin-left:auto;color:var(--ok);font-weight:700}
.lic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--sunk);font-size:16px;flex:none}
.lic.big{width:44px;height:44px;font-size:24px;margin-right:10px;vertical-align:middle}
.learn-topic{display:grid;gap:16px;min-width:0}
.learn-t{margin:0;display:flex;align-items:center;font-size:24px;text-wrap:balance}
.learn-lead{margin:0;font-size:16px;color:var(--ink-2);max-width:68ch}
.lf-h{margin:0 0 6px;font-weight:700;font-size:13.5px;letter-spacing:.02em}
.lf-flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.lf-flow li{position:relative;flex:1 1 140px;min-width:0;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r);padding:10px 12px;display:grid;gap:2px}
.lf-flow li span:not(.lf-n){font-size:13px;color:var(--muted)}
.lf-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:12px}
.lf-flow li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--accent);font-weight:700;z-index:1}
.lf-cycle{position:relative;width:min(100%,420px);aspect-ratio:1;margin:0 auto;border-radius:50%;background:radial-gradient(circle,var(--accent-soft) 0 30%,transparent 30.5%),conic-gradient(from 0deg,var(--sunk),var(--paper),var(--sunk));border:1px dashed var(--line-2)}
.lf-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:700;font-size:15px;color:var(--accent);text-align:center}
.lf-node{position:absolute;transform:translate(-50%,-50%);background:var(--surface);border:1.5px solid var(--accent);border-radius:999px;padding:6px 10px;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow)}
@media (max-width:480px){.lf-node{white-space:normal;max-width:34%;text-align:center;font-size:11.5px;padding:5px 7px}}
.lf-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lf-cmp>div{border-radius:var(--r);padding:12px 14px;min-width:0}
.lf-cmp .bad{background:var(--alert-soft);border:1px solid color-mix(in srgb,var(--alert) 30%,transparent)}
.lf-cmp .good{background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.lf-cmp .bad .lf-h{color:var(--alert)}.lf-cmp .good .lf-h{color:var(--ok)}
.lf-cmp ul{margin:0;padding-left:18px;font-size:14px;display:grid;gap:3px}
.lf-photo{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--sunk)}
.lf-photo img{display:block;width:100%;max-height:360px;object-fit:cover}
.lf-photo figcaption,.lf-ecg figcaption{padding:8px 12px;font-size:13px;color:var(--muted)}
.lf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.lf-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:grid;gap:3px;justify-items:start}
.lf-card .lf-ic{font-size:22px;font-weight:800;color:var(--accent);line-height:1.1;font-family:var(--f-mono)}
.lf-card span:last-child{font-size:12.5px;color:var(--muted)}
.lf-calc{background:var(--chrome);color:var(--chrome-ink);border-radius:var(--r-lg);padding:14px 16px;display:grid;gap:6px}
.lf-calc>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(255,255,255,.15);padding-bottom:5px;flex-wrap:wrap}
.lf-calc>div span{color:var(--chrome-muted);font-size:13px}
.lf-res{margin:4px 0 0;color:#F2B23E;font-weight:700}
.lf-bands{display:grid;gap:6px}
.lf-bar{display:flex;border-radius:10px;overflow:hidden;min-height:58px}
.lf-bar>span{display:grid;align-content:center;justify-items:center;padding:6px 4px;color:#fff;text-align:center;min-width:0}
.lf-bar b{font-size:13px}.lf-bar small{font-size:11px;opacity:.9}
.b-ok{background:#2E8B57}.b-lo{background:#7CA83A}.b-mid{background:#D79A1E}.b-hi2{background:#D9612B}.b-hi{background:#C93C3F}
.lf-ecg{margin:0 auto;max-width:300px;text-align:center}
.lf-ecg svg{width:100%;height:auto}
.lf-table table{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface)}
.lf-table th{background:var(--sunk);text-align:left;font-size:12.5px;letter-spacing:.02em}
.lf-table th,.lf-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.lf-cap{margin:0 0 6px;font-weight:700;font-size:13.5px}
.lf-tips{background:var(--sel-soft);border-radius:var(--r);padding:12px 14px}
.lf-tips ul{margin:0;padding-left:18px;display:grid;gap:3px;font-size:14px}
.lf-quiz{border:2px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;background:var(--paper)}
.lf-quiz.right{border-color:var(--ok)}.lf-quiz.wrong{border-color:var(--sel)}
.lf-q{margin:0 0 10px;font-weight:600}
.lf-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.lf-opts button{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:var(--r);padding:10px 12px;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.lf-opts button:hover:not(:disabled){border-color:var(--accent)}
.lf-opts button.is-right{border-color:var(--ok);background:var(--ok-soft);font-weight:600}
.lf-opts button.is-wrong{border-color:var(--sel);background:var(--sel-soft)}
.lf-opts button:disabled{cursor:default}
.lf-why{margin:10px 0 0;font-size:14px}
@media (max-width:900px){.learn{grid-template-columns:1fr}.learn-nav{position:relative;top:0}}
@media (max-width:560px){.lf-cmp{grid-template-columns:1fr}.lf-flow li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-15px;transform:translateX(-50%)}.lf-flow li{flex-basis:100%}}
/* 2.5D 보는 방향 바꾸기(◀ ▲ ▼ ▶) */
.iso-rotbar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:rgba(6,13,16,.62);padding:5px 6px;border-radius:11px;backdrop-filter:blur(6px);z-index:3}
.iso-rot{width:36px;height:34px;border:0;border-radius:8px;background:transparent;color:#fff;font-size:15px;cursor:pointer;line-height:1}
.iso-rot:hover:not(:disabled){background:rgba(255,255,255,.14)}
.iso-rot.on{background:rgba(91,224,211,.32)}
.iso-rot:disabled:not(.on){opacity:.4;cursor:default}
.iso-rotlab{color:rgba(255,255,255,.78);font-size:12px;padding:0 6px;white-space:nowrap}
.iso-stage{transition:opacity .18s}
.iso-stage.swap{opacity:.55}
.observe.immersive.panel-on .iso-rotbar{left:calc((100% - var(--pw) - 24px) / 2)}
@media (max-width:620px){.iso-rotlab{display:none}.iso-rot{width:40px;height:38px}}
.observe.immersive .iso-rotbar{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
@media (max-width:760px){.observe.immersive.panel-on .iso-rotbar{left:50%}}

/* ───────── v18 홈: 인트로 영상 히어로 · 표식(모서리 괄호) 언어 ───────── */
body{overflow-x:clip}
h1,h2,h3{letter-spacing:-.022em}
body[data-route="home"] .wrap{padding-top:0}
.btn.big{padding:13px 22px;font-size:15.5px;border-radius:9px}

.hx{--hx-s:244,248,248;--hx-ink:#0C1B21;--hx-sub:#34484E;--hx-mute:#5B6D72;--hx-line:rgba(12,27,33,.13);position:relative;margin-inline:calc(50% - 50vw);color:var(--hx-ink);background:rgb(var(--hx-s));min-height:min(calc(100svh - 58px),900px);display:grid;grid-template-rows:1fr auto;isolation:isolate;overflow:hidden}
.hx-media{position:absolute;inset:0;z-index:-1}
.hx-video{width:100%;height:100%;object-fit:cover;display:block;background:rgb(var(--hx-s))}
.hx-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--hx-s),.96) 0%,rgba(var(--hx-s),.92) 36%,rgba(var(--hx-s),.55) 50%,rgba(var(--hx-s),0) 66%),linear-gradient(0deg,rgba(var(--hx-s),.94) 0%,rgba(var(--hx-s),0) 24%)}
.hx-in{width:100%;max-width:1280px;margin:0 auto;padding:clamp(56px,10vh,120px) 16px 28px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:end}
.hx-title{font-size:clamp(42px,6.6vw,96px);line-height:1.02;letter-spacing:-.032em;font-weight:800;text-wrap:initial}
.hx-title span{display:block}
.hx-lede{font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--hx-sub);max-width:38ch;margin-top:26px;word-break:keep-all}
.hx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hx .btn.on-dark{border-color:var(--hx-line);background:rgba(var(--hx-s),.6);backdrop-filter:blur(6px);color:var(--hx-ink)}
.hx .btn.on-dark:hover{border-color:var(--accent)}
.hx-log{position:relative;color:#EEF5F4;box-shadow:0 18px 40px -20px rgba(6,20,26,.55);background:rgba(9,24,29,.84);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 20px 12px}
.hx-log::before{content:"";position:absolute;inset:-7px;pointer-events:none}
.hx-log-h{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(236,244,243,.72);min-height:20px}
.hx-rec{width:8px;height:8px;border-radius:50%;background:#FF5C50;opacity:.5}
.hx.playing .hx-rec{opacity:1;animation:hxrec 1.6s ease-in-out infinite}
@keyframes hxrec{50%{opacity:.25}}
.hx-count{display:flex;align-items:baseline;gap:10px;margin:8px 0 6px}
.hx-count b{font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:60px;line-height:1;font-weight:700;color:#FFB830;letter-spacing:-.03em}
.hx-count span{font-size:14px;color:rgba(236,244,243,.8)}
.hx-list{list-style:none;min-height:40px}
.hx-list:empty::before{content:"영상에서 표식이 잡히면 여기에 쌓입니다.";display:block;font-size:13px;color:rgba(236,244,243,.6);padding:9px 0;border-top:1px solid rgba(255,255,255,.1)}
.hx-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:rgba(236,244,243,.86)}
.hx-list li .mono{color:#FFB830;font-weight:600;font-size:13px;min-width:44px}
.hx-list li.hi .mono{color:#FF7A6E}
.hx-list li em{font-style:normal;font-size:11.5px;font-weight:700;color:#fff;background:#E5483D;border-radius:99px;padding:2px 8px;margin-left:auto}
.hx-list li.new{animation:hxnew .7s cubic-bezier(.2,.8,.2,1)}
@keyframes hxnew{from{opacity:0;transform:translateY(-8px);background:rgba(255,184,48,.18)}to{opacity:1;transform:none;background:transparent}}
.hx-foot{width:100%;max-width:1280px;margin:0 auto;padding:18px 16px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--hx-line)}
.hx-facts{display:flex;flex-wrap:wrap;gap:12px 44px;margin:0}
.hx-facts dt{font-size:12.5px;color:var(--hx-mute)}
.hx-facts .mono{font-family:var(--f-body);font-variant-numeric:tabular-nums}
.hx-facts dd{margin:2px 0 0;font-size:16px;font-weight:600}
.hx-play{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--hx-line);color:var(--hx-ink);border-radius:99px;padding:7px 14px;font-size:13px;cursor:pointer;flex:none}
.hx-play:hover{border-color:var(--accent)}
.hx-play svg{fill:currentColor}
.hx-play .i-play,.hx-play[aria-pressed="true"] .i-pause{display:none}
.hx-play[aria-pressed="true"] .i-play{display:inline}
.hx-title span,.hx-lede,.hx-cta,.hx-log{animation:hxin .9s cubic-bezier(.2,.75,.15,1) both}
.hx-title span:nth-child(2){animation-delay:.08s}.hx-title span:nth-child(3){animation-delay:.16s}
.hx-lede{animation-delay:.3s}.hx-cta{animation-delay:.38s}.hx-log{animation-delay:.6s}
@keyframes hxin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hx-title span,.hx-lede,.hx-cta,.hx-log,.hx-list li.new,.hx.playing .hx-rec{animation:none}}
@media (max-width:900px){
  .hx{min-height:0;display:flex;flex-direction:column}
  .hx-media{position:relative;inset:auto;z-index:0;aspect-ratio:16/9}
  .hx-in{grid-template-columns:1fr;gap:24px;padding-top:28px}
  .hx-log{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;padding:12px 16px}
  .hx-log-h{grid-column:1/-1}
  .hx-count{margin:2px 0 0}
  .hx-list li:first-child{border-top:0}
  .hx-list:empty::before{border-top:0}
  .hx-scrim{display:none}
  .hx-log{max-width:420px}
  .hx-list{min-height:0}.hx-list li:nth-child(n+2){display:none}
  .hx-count b{font-size:44px}
}
@media (max-width:560px){.hx-foot{flex-direction:column;align-items:flex-start}.hx-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}}

.hsec{margin-top:clamp(56px,7vw,96px)}
.hsec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px 32px;align-items:end;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.hsec-h h2{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.035em;line-height:1.15}
.hsec-h p{color:var(--muted);max-width:56ch;word-break:keep-all}
@media (max-width:760px){.hsec-h{grid-template-columns:1fr}}
.hsec.grid2{display:grid}

.hsteps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.hsteps li{position:relative}
.hsteps li::before{content:"";position:absolute;left:0;right:0;top:17px;height:2px;background:var(--line-2)}
.hsteps li:last-child::before{display:none}
.hsteps a{position:relative;display:flex;flex-direction:column;gap:5px;padding:0 22px 6px 0;text-decoration:none;color:var(--ink);border-radius:8px}
.hsteps .st-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--line-2);font-weight:600;font-size:14px;margin-bottom:12px;transition:background .15s,border-color .15s,color .15s}
.hsteps .st-k{font-size:13px;color:var(--accent);font-weight:600}
.hsteps b{font-size:19px;letter-spacing:-.025em;line-height:1.3}
.hsteps .st-d{color:var(--muted);font-size:14px;line-height:1.62;word-break:keep-all}
.hsteps a:hover .st-n,.hsteps a:focus-visible .st-n{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
@media (max-width:980px){
  .hsteps{grid-template-columns:1fr;gap:4px}
  .hsteps li::before{left:17px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .hsteps li:first-child::before{top:18px}.hsteps li:last-child::before{bottom:auto;height:18px;width:2px}
  .hsteps a{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px;padding:0 0 18px}
  .hsteps .st-n{grid-row:1/span 3;margin:0}
}

.room:hover{transform:none}
.room-img::after{content:"";position:absolute;inset:12px;pointer-events:none;opacity:0;transform:scale(1.07);transition:opacity .16s,transform .28s cubic-bezier(.2,.8,.2,1)}
.room-img::after{--c:#FFB830;--l:22px;--w:3px;
  background:linear-gradient(var(--c),var(--c)) top left/var(--l) var(--w),linear-gradient(var(--c),var(--c)) top left/var(--w) var(--l),
  linear-gradient(var(--c),var(--c)) top right/var(--l) var(--w),linear-gradient(var(--c),var(--c)) top right/var(--w) var(--l),
  linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--w),linear-gradient(var(--c),var(--c)) bottom left/var(--w) var(--l),
  linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--w),linear-gradient(var(--c),var(--c)) bottom right/var(--w) var(--l);
  background-repeat:no-repeat}
.room:hover .room-img::after,.room:focus-visible .room-img::after{opacity:1;transform:none}
.room-img img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.room:hover .room-img img{transform:scale(1.035)}
.room-b b{font-size:17px;letter-spacing:-.025em}
.hx-log::before{--c:#FFB830;--l:18px;--w:2px;
  background:linear-gradient(var(--c),var(--c)) top left/var(--l) var(--w),linear-gradient(var(--c),var(--c)) top left/var(--w) var(--l),
  linear-gradient(var(--c),var(--c)) top right/var(--l) var(--w),linear-gradient(var(--c),var(--c)) top right/var(--w) var(--l),
  linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--w),linear-gradient(var(--c),var(--c)) bottom left/var(--w) var(--l),
  linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--w),linear-gradient(var(--c),var(--c)) bottom right/var(--w) var(--l);
  background-repeat:no-repeat}
@media (prefers-reduced-motion:reduce){.room-img::after,.room-img img{transition:none}}

@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hx{--hx-s:7,18,22;--hx-ink:#EEF5F4;--hx-sub:#C2D2D2;--hx-mute:#8FA3A6;--hx-line:rgba(255,255,255,.14)} }
:root[data-theme="dark"] .hx{--hx-s:7,18,22;--hx-ink:#EEF5F4;--hx-sub:#C2D2D2;--hx-mute:#8FA3A6;--hx-line:rgba(255,255,255,.14)}

/* v19 걷기 모드: 마우스용 이동 버튼(누르는 동안 이동) */
.u-mpad{position:absolute;left:14px;bottom:14px;z-index:3;display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px);gap:4px;transition:opacity .4s}
.u-mpad button{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.28);background:rgba(8,22,27,.62);color:#EEF5F4;display:grid;place-items:center;cursor:pointer;padding:0;touch-action:none;backdrop-filter:blur(6px)}
.u-mpad button svg{width:18px;height:18px;fill:currentColor}
.u-mpad button:hover{background:rgba(10,124,118,.8)}
.u-mpad button.on{background:#0A7C76;border-color:#3FD0C5}
.u-mpad .mp-f{grid-column:2;grid-row:1}.u-mpad .mp-l{grid-column:1;grid-row:2}.u-mpad .mp-b{grid-column:2;grid-row:2}.u-mpad .mp-r{grid-column:3;grid-row:2}
.unity-frame.idle .u-mpad{opacity:.45}
.unity-frame.idle .u-mpad:hover{opacity:1}

/* ── v19 조별 과제 · 조별 채점 ── */
.tm-prog{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);min-width:140px}
.tm-prog b{font-size:28px;line-height:1;color:var(--accent)} .tm-prog span{font-size:12px;color:var(--muted)}
.tm-tabs{margin-bottom:16px}
.tm-tabs button small{display:block}
#tmBody{display:flex;flex-direction:column;gap:16px}
.tm-mem{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.tm-mem li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.tm-mem li.me{border-color:var(--accent);background:var(--accent-soft)}
.tm-mem li b{flex:1 1 100%} .tm-mem li span:not(.pill){font-size:13px;color:var(--muted)}
.tm-obs td{vertical-align:top} .tm-obs tr.on td{background:var(--ok-soft)}
.tm-obs td:nth-child(4){text-align:center;width:56px} .tm-obs input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.tm-in{width:100%;min-width:0;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.tm-in:disabled,.tm-top select:disabled{opacity:.7;background:var(--sunk)}
.tm-add{display:grid;grid-template-columns:minmax(140px,1fr) 2fr auto;gap:8px;margin-top:12px}
.tm-top{list-style:none;display:flex;flex-direction:column;gap:8px}
.tm-top li{display:grid;grid-template-columns:28px minmax(160px,1fr) 2fr;gap:8px;align-items:center}
.tm-top li>.mono{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--chrome);color:var(--chrome-ink);font-size:13px}
.tm-top select{padding:8px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.tm-empty{padding:14px;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--muted);font-size:14px}
.chip.tiny{padding:1px 8px;font-size:12px}
.tm-chk{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.tm-chk li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;padding:10px 12px;border-radius:var(--r);background:var(--sunk)}
.tm-chk li.ok{background:var(--ok-soft)} .tm-chk li.ok>span{color:var(--ok);font-weight:700}
.tm-chk small{flex:1 1 100%;color:var(--muted);font-size:12px}
.tm-grade{border-color:var(--accent)} .tm-grade .big{font-size:30px;font-weight:700;color:var(--accent)} .tm-grade .big small{font-size:14px;color:var(--muted)}
.tm-gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tm-gr>div,.tm-gr>label{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.tm-gr b{font-size:20px} .tm-gr b i{font-style:normal;font-size:12px;color:var(--muted);margin-left:2px} .tm-gr small{color:var(--muted);font-size:12px}
.tm-gr .gin{width:100%}
.tm-gpanel{margin-top:16px;scroll-margin-top:80px} .tm-gpanel h3{margin:6px 0 8px}
.tm-glist{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
ol.tm-glist{list-style:decimal;padding-left:20px}
.tm-glist li small{display:block;color:var(--muted);font-size:12.5px}
.tm-ok{color:var(--ok);font-family:var(--f-mono);font-size:12.5px;font-weight:600}
.tm-no{color:var(--alert);font-family:var(--f-mono);font-size:12.5px;font-weight:600}
.tm-score{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
table.grade tr.sel td{background:var(--sel-soft)}
@media (max-width:720px){
  .tm-add{grid-template-columns:1fr}
  .tm-top li{grid-template-columns:28px 1fr}
  .tm-top li .tm-in{grid-column:2}
  .tm-prog{align-items:flex-start}
}
.tm-ctl{flex-wrap:wrap;justify-content:flex-end} .tm-ctl select{width:auto;min-width:130px}

/* ───────── v20 차트 색(검증된 범주 4색 · 파랑 7단계) ───────── */
:root{--c1:#2a78d6;--c2:#eb6834;--c3:#1baf7a;--c4:#eda100;--s1:#cde2fb;--s2:#9ec5f4;--s3:#6da7ec;--s4:#3987e5;--s5:#256abf;--s6:#184f95;--s7:#0d366b}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c1:#3987e5;--c2:#d95926;--c3:#199e70;--c4:#c98500;--s1:#16304a;--s2:#1c4470;--s3:#245a96;--s4:#2f72bd;--s5:#4a8ad3;--s6:#78a9e3;--s7:#b5d1f3}}
:root[data-theme="dark"]{--c1:#3987e5;--c2:#d95926;--c3:#199e70;--c4:#c98500;--s1:#16304a;--s2:#1c4470;--s3:#245a96;--s4:#2f72bd;--s5:#4a8ad3;--s6:#78a9e3;--s7:#b5d1f3}
[data-ri="0"]{--rc:var(--c1)} [data-ri="1"]{--rc:var(--c2)} [data-ri="2"]{--rc:var(--c3)} [data-ri="3"]{--rc:var(--c4)}

/* ───────── v20 조별 과제(학생) ───────── */
.tm-head{align-items:center}
.tm-prog{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);min-width:0}
.tm-prog span{font-size:12px;color:var(--muted)} .tm-prog svg{width:96px}
.tm-tdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--line-2)}
.tm-tdot[data-s="req"]{background:transparent;box-shadow:inset 0 0 0 2px var(--sel)} .tm-tdot[data-s="sub"]{background:var(--sel)} .tm-tdot[data-s="graded"]{background:var(--accent)}
.tm-layout{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:18px;align-items:start}
.tm-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.tm-rail{position:sticky;top:74px}
.tm-railbox{display:flex;flex-direction:column;gap:14px;padding:16px}
.tm-steps{list-style:none;display:flex;flex-direction:column;gap:2px;position:relative}
.tm-steps a{display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:7px 8px;border-radius:8px;text-decoration:none;color:var(--ink)}
.tm-steps a:hover{background:var(--sunk)}
.tm-steps .n{grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);font-size:12px;color:var(--muted);background:var(--surface)}
.tm-steps li.ok .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tm-steps b{font-size:13.5px;line-height:1.3} .tm-steps small{font-size:11.5px;color:var(--muted);line-height:1.3}
.tm-railm{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:12px} .tm-railm .eyebrow{margin:0} .tm-railm b{font-size:24px;line-height:1} .tm-railm small{font-size:11.5px}
.tm-railm svg{width:auto;max-width:100%}
.tm-sec{scroll-margin-top:80px}
.tm-sec h2,.tm-submit h2{display:flex;align-items:center;gap:10px}
.tm-num{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:13px;background:var(--chrome);color:var(--chrome-ink);font-size:12px;font-family:var(--f-mono);font-weight:600;letter-spacing:0}
/* 역할 보드 */
.tm-roleboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.tm-role{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.tm-role::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--rc)}
.tm-role.mine{border-color:var(--rc);box-shadow:0 0 0 1px var(--rc) inset;background:var(--surface)}
.tm-role header{display:flex;gap:10px;align-items:flex-start}
.tm-rico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--rc)}
.tm-role header b{display:block;font-size:15px} .tm-role header small{display:block;font-size:12px;color:var(--muted);line-height:1.45;word-break:keep-all}
.tm-holders{display:flex;flex-wrap:wrap;gap:6px}
.tm-hold{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--line)} .tm-hold.me{border-color:var(--rc);font-weight:600} .tm-hold i{font-style:normal;color:var(--muted);font-size:11px}
.tm-hold.empty{border-style:dashed;color:var(--muted)}
.tm-duties{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.45;flex:1}
.tm-duties label{display:flex;gap:8px;align-items:flex-start;cursor:pointer} .tm-duties input{margin-top:2px;accent-color:var(--accent);flex:none}
.tm-duties li.ro{display:flex;gap:8px;color:var(--muted)}
.tm-rfoot{font-size:12px;color:var(--ink-2);margin:0}
.tm-warn{color:var(--warn)} p.tm-warn{margin-top:10px;padding:8px 12px;border-radius:8px;background:var(--warn-soft)}
.tm-rchip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 7px;border-radius:999px;font-size:12.5px;border:1px solid var(--line);background:var(--surface);white-space:nowrap}
.tm-rchip .tm-ri{color:var(--rc)} .tm-rchip.sm{font-size:11.5px;padding:1px 7px 1px 5px} .tm-rchip.none{color:var(--muted);border-style:dashed}
.tm-rot{margin-top:12px} .tm-rottab th.cur,.tm-rottab td.cur{background:var(--accent-soft)} .tm-rottab td{white-space:nowrap}
/* 관찰 종합 시각화 */
.tm-funnel{display:flex;align-items:stretch;gap:8px;margin:6px 0 12px}
.tm-fstep{flex:1;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;background:var(--sunk)}
.tm-fstep small{font-size:11.5px;color:var(--muted)} .tm-fstep b{font-size:22px;line-height:1.1} .tm-fstep b i{font-style:normal;font-size:12px;color:var(--muted);margin-left:2px}
.tm-fbar{height:6px;border-radius:3px;background:var(--surface);overflow:hidden} .tm-fbar span{display:block;height:100%;border-radius:3px;background:var(--line-2)} .tm-fbar span[data-i="2"]{background:var(--accent)}
.tm-farr{align-self:center;color:var(--muted)}
.tm-contrib{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tm-cm{display:inline-flex;gap:6px;align-items:baseline;padding:3px 10px;border-radius:999px;border:1px solid var(--line);font-size:12.5px} .tm-cm i{font-style:normal;color:var(--accent);font-weight:600} .tm-cm.off{opacity:.6} .tm-cm small{color:var(--muted);font-size:11px}
.tm-who{display:flex;flex-direction:column;gap:3px} .tm-who svg{width:auto} .tm-who small{font-size:11.5px;color:var(--muted)}
.tm-prio{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px} .tm-prio li{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;background:var(--sunk);font-size:12.5px}
.tm-prio li span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface);font-size:11px}
.tm-top li.on>.mono{background:var(--accent);color:var(--accent-ink)}
.tm-meter{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-top:4px} .tm-mfill{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .25s}
.tm-cc{margin-left:auto;font-size:11px;color:var(--muted);font-weight:400} .field.sb label{display:flex;align-items:center;gap:6px}
/* 동료평가 */
.tm-peers{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:10px}
.tm-peer{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.tm-pn{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tm-pq{display:flex;justify-content:space-between;align-items:center;gap:8px} .tm-pq small{font-size:12px;color:var(--ink-2)}
.tm-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.tm-seg button{width:30px;height:28px;border:0;background:var(--surface);font-family:var(--f-mono);font-size:12.5px;cursor:pointer;color:var(--ink-2)}
.tm-seg button+button{border-left:1px solid var(--line)} .tm-seg button:hover{background:var(--sunk)}
.tm-seg button[aria-checked="true"]{background:var(--accent);color:var(--accent-ink);font-weight:700}
.tm-gcom{padding:10px 12px;border-radius:8px;background:var(--accent-soft)}
/* ───────── v20 조별 채점(교수자) ───────── */
.tm-kpis{margin:12px 0}
.tm-dash{gap:14px} .tm-dash .panel{min-width:0}
.tm-heat{overflow-x:auto} .tm-heat svg{width:auto;max-width:none}
.tm-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;color:var(--muted)} .tm-legend span{display:inline-flex;align-items:center;gap:6px}
.tm-legend i{display:inline-block;width:14px;height:12px;border-radius:3px} .lg-sub{border:1.5px solid var(--accent);background:var(--surface)} .lg-wip{background:var(--accent-soft)} .lg-seq{background:linear-gradient(90deg,var(--s1),var(--s4),var(--s7))}
.tm-gsum{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:6px 0 16px;padding:12px;border-radius:12px;background:var(--sunk)}
.tm-gsum svg{width:92px} .tm-gsk{display:flex;flex-direction:column;padding:8px 14px;border-radius:10px;background:var(--surface);min-width:120px} .tm-gsk small{font-size:11.5px;color:var(--muted)} .tm-gsk b{font-size:22px} .tm-gsk b i{font-style:normal;font-size:12px;color:var(--muted)}
.tm-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.tm-mcard{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.tm-mhead{display:flex;justify-content:space-between;align-items:center;gap:6px}
.tm-mrow{display:grid;grid-template-columns:62px 1fr 30px;align-items:center;gap:8px} .tm-mrow small{font-size:11.5px;color:var(--muted)} .tm-mrow i{font-style:normal;font-size:12px;text-align:right}
.tm-mbar{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden} .tm-mbar span{display:block;height:100%;background:var(--accent);border-radius:3px}
.tm-mscore{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:8px;margin-top:2px} .tm-mscore .gin{width:84px}
/* ───────── v20 결과 리포트 ───────── */
.rp .sect-h{align-items:flex-end}
.rp-export{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.rp-export .eyebrow{margin-right:4px}
.rp-kpis{display:grid;grid-template-columns:1.4fr repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.rp-kpi{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.rp-kpi small{font-size:12px;color:var(--muted)} .rp-kpi b{font-size:28px;line-height:1.1;letter-spacing:-.02em} .rp-kpi b i{font-style:normal;color:var(--muted);font-size:18px;margin:0 4px} .rp-kpi span{font-size:12px;color:var(--muted)}
.rp-kpi.hero{background:var(--chrome);border-color:var(--chrome);color:var(--chrome-ink)} .rp-kpi.hero b{font-size:52px;color:#fff} .rp-kpi.hero small,.rp-kpi.hero span{color:var(--chrome-muted)}
.rp-kpi.ringk{flex-direction:row;align-items:center;gap:12px} .rp-kpi.ringk svg{width:88px;flex:none} .rp-kpi.ringk div{display:flex;flex-direction:column}
.rp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rp-fig{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0} .rp-fig figcaption{display:flex;flex-direction:column;gap:2px} .rp-fig.wide{grid-column:1/-1}
.rp-table td{white-space:nowrap} .rp-h{text-align:center;font-family:var(--f-mono);font-weight:600}
.rp-h[data-s="0"]{background:var(--s1)} .rp-h[data-s="1"]{background:var(--s2)} .rp-h[data-s="2"]{background:var(--s3)} .rp-h[data-s="3"]{background:var(--s4)}
.rp-h[data-s="4"]{background:var(--s5);color:#fff} .rp-h[data-s="5"]{background:var(--s6);color:#fff} .rp-h[data-s="6"]{background:var(--s7);color:#fff}
:root[data-theme="dark"] .rp-h[data-s="4"],:root[data-theme="dark"] .rp-h[data-s="5"],:root[data-theme="dark"] .rp-h[data-s="6"]{color:#04121f}
.rp-h0{text-align:center;color:var(--muted)}
@media (max-width:1100px){ .tm-roleboard{grid-template-columns:repeat(2,minmax(0,1fr))} .rp-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} .rp-kpi.hero{grid-column:1/-1} }
@media (max-width:980px){ .tm-layout{grid-template-columns:1fr} .tm-rail{position:static;order:-1} .tm-steps{flex-direction:row;overflow-x:auto} .tm-steps a{grid-template-columns:22px auto} .tm-railm{display:none} .rp-grid{grid-template-columns:1fr} }
@media (max-width:640px){ .tm-roleboard{grid-template-columns:1fr} .tm-funnel{flex-direction:column} .tm-farr{display:none} .rp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ───────── v21 조가 추가한 역할(범주 색 5~8번 · 검증 순서 그대로) ───────── */
:root{--c5:#e87ba4;--c6:#008300;--c7:#6250d6;--c8:#e34948}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c5:#d55181;--c6:#008300;--c7:#9085e9;--c8:#e66767}}
:root[data-theme="dark"]{--c5:#d55181;--c6:#008300;--c7:#9085e9;--c8:#e66767}
[data-ri="4"]{--rc:var(--c5)} [data-ri="5"]{--rc:var(--c6)} [data-ri="6"]{--rc:var(--c7)} [data-ri="7"]{--rc:var(--c8)}
.tm-role.custom{background:var(--surface)}
.tm-rtag{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;font-size:10.5px;font-weight:600;color:var(--ink-2);background:var(--sunk);vertical-align:2px}
.tm-ract{display:flex;justify-content:flex-end;gap:12px;border-top:1px dashed var(--line);padding-top:8px;margin-top:-2px}
.tm-rform{margin:12px 0 4px;border:1px solid var(--accent);background:var(--surface);display:flex;flex-direction:column;gap:10px}
.tm-rform .panel-h{margin:0} .tm-rform h3{font-size:15px}
.tm-rpre{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .tm-rpre .chip{cursor:pointer} .tm-rpre .chip:hover{border-color:var(--accent);color:var(--accent)}
.tm-rgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px}
.tm-rform .field{margin:0} .tm-rform .mt-s{margin-top:6px}
@media (max-width:640px){ .tm-rgrid{grid-template-columns:1fr} }

/* ───────── v22 나의 학습: 여정 지도 ───────── */
.notice.demo{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 14px;border:1px solid color-mix(in srgb,var(--sel) 45%,var(--line));background:linear-gradient(90deg,var(--sel-soft),var(--surface) 70%);border-radius:12px}
.notice.demo .dm-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--sel);color:#2B1B00}
.notice.demo .dm-t{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0} .notice.demo .dm-t b{margin:0;color:var(--ink);font-size:14px} .notice.demo .dm-t span{font-size:12.5px;color:var(--ink-2)}
.lj-hero{display:grid;grid-template-columns:minmax(0,1.25fr) auto minmax(300px,1fr);gap:16px;align-items:stretch;margin:6px 0 18px}
.lj-who{display:flex;gap:16px;align-items:center;padding:22px 24px;border:1px solid var(--line);border-radius:16px;background:var(--surface);min-width:0}
.lj-av{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,var(--accent),#0E4F4B);color:#fff;font-size:28px;font-weight:800;box-shadow:0 10px 24px -14px var(--accent)}
.lj-who h1{font-size:clamp(24px,2.6vw,32px);margin:2px 0 8px}
.lj-chips{display:flex;flex-wrap:wrap;gap:6px} .lj-chips span{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--sunk);font-size:12.5px;color:var(--ink-2)}
.lj-chips .lj-save{background:transparent;color:var(--muted);padding-left:2px} .lj-chips .lj-save svg{color:var(--ok)}
.lj-prog{display:grid;place-items:center;padding:12px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)} .lj-prog svg{width:104px}
.lj-next{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:18px 20px;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff;background:var(--chrome);isolation:isolate}
.lj-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.lj-next:hover img{transform:scale(1.04)}
.lj-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,18,22,.05) 0%,rgba(6,18,22,.55) 45%,rgba(6,18,22,.9) 100%)}
.lj-nt{display:flex;flex-direction:column;gap:3px;padding-right:96px} .lj-nt .eyebrow{color:#9FE6DF} .lj-nt b{font-size:19px;line-height:1.3} .lj-nt small{color:rgba(236,244,243,.8);font-size:12.5px}
.lj-go{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.lj-next.all{background:linear-gradient(135deg,var(--accent),#0E4F4B)}
.lj-map{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:10px;margin-bottom:26px}
.lj-grp{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:10px 12px 12px;min-width:0}
.lj-gt{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin:0 0 8px 4px}
.lj-row{display:flex;gap:6px;position:relative}
.lj-row::before{content:"";position:absolute;left:22px;right:22px;top:21px;height:2px;background:var(--line);z-index:0}
.lj-node{position:relative;z-index:1;flex:1;min-width:72px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 4px 6px;border-radius:10px;text-decoration:none;color:var(--ink);text-align:center}
.lj-node:hover{background:var(--sunk)}
.lj-dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2);color:var(--muted);margin-bottom:3px}
.lj-node b{font-size:13px} .lj-node small{font-size:11px;color:var(--muted);line-height:1.3;word-break:keep-all}
.lj-node[data-st="done"] .lj-dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lj-node[data-st="doing"] .lj-dot{border-color:var(--sel);color:var(--warn);background:var(--sel-soft)}
.lj-node[data-st="lock"]{opacity:.55} .lj-node[data-st="lock"] .lj-dot{border-style:dashed}
.lj-node[aria-current="step"] .lj-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--sel) 30%,transparent);animation:ljp 2.2s ease-in-out infinite}
.lj-node[aria-current="step"] b{color:var(--warn)}
@keyframes ljp{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--sel) 8%,transparent)}}
@media (prefers-reduced-motion:reduce){.lj-node[aria-current="step"] .lj-dot{animation:none}}
.lj-res{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.lj-tiles{display:flex;flex-direction:column;gap:10px}
.lj-tile{display:flex;flex-direction:column;gap:2px;padding:14px 16px} .lj-tile small{font-size:12px;color:var(--muted)} .lj-tile b{font-size:28px;line-height:1.15} .lj-tile b i{font-style:normal;color:var(--muted);font-size:18px;margin:0 4px} .lj-tile span{font-size:12.5px;color:var(--ink-2)}
.pinbox summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none} .pinbox summary::-webkit-details-marker{display:none}
.pinbox[open] summary{margin-bottom:12px}
@media (max-width:1100px){ .lj-hero{grid-template-columns:1fr auto} .lj-next{grid-column:1/-1} .lj-map{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .lj-hero{grid-template-columns:1fr} .lj-prog{display:none} .lj-map{grid-template-columns:1fr} .lj-row{overflow-x:auto} .lj-res{grid-template-columns:1fr} .notice.demo{flex-wrap:wrap} }

.lj-nt .eyebrow,.next .eyebrow{letter-spacing:.04em}

/* ── v23 홈: 학습 순서 카드 여정 ── */
.hj{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;padding:0;margin:0}
.hj-i{position:relative;min-width:0}
.hj-i:not(:last-child)::after{content:"";position:absolute;top:46px;right:-22px;width:22px;height:2px;background:linear-gradient(90deg,var(--line-2),var(--accent));opacity:.7}
.hj a{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 20px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.hj a::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent);opacity:calc(.28 + var(--i) * .17)}
.hj a:hover,.hj a:focus-visible{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 1px 0 rgba(19,35,42,.04),0 18px 36px -20px rgba(10,124,118,.55)}
.hj-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.hj-ico{flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.hj-n{margin-left:auto;font-size:34px;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--line-2)}
.hj-badge{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--sel);color:#2a1a00;letter-spacing:.01em}
.hj-k{font-size:12.5px;font-weight:700;color:var(--accent);letter-spacing:.01em}
.hj b{font-size:19px;letter-spacing:-.025em;line-height:1.3}
.hj-d{flex:1;color:var(--muted);font-size:14px;line-height:1.62;word-break:keep-all}
.hj-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.hj-meta span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.hj-go{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--accent);opacity:.0;transform:translateX(-4px);transition:opacity .18s,transform .18s}
.hj a:hover .hj-go,.hj a:focus-visible .hj-go{opacity:1;transform:none}
.hj-i.is-key a{background:linear-gradient(160deg,var(--chrome-2),var(--chrome));border-color:var(--chrome-3);color:var(--chrome-ink)}
.hj-i.is-key .hj-ico{background:rgba(255,255,255,.08);color:#5FD6CC}
.hj-i.is-key .hj-k,.hj-i.is-key .hj-go{color:#5FD6CC}
.hj-i.is-key .hj-d{color:var(--chrome-muted)}
.hj-i.is-key .hj-n{color:rgba(255,255,255,.2)}
.hj-i.is-key .hj-meta{border-top-color:rgba(255,255,255,.14)}
.hj-i.is-key .hj-meta span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--chrome-ink)}
@media (max-width:1180px){.hj{grid-template-columns:repeat(3,minmax(0,1fr))}.hj-i::after{display:none}}
@media (max-width:760px){.hj{grid-template-columns:1fr;gap:12px}.hj-go{opacity:1;transform:none}
  .hj-i:not(:last-child)::after{display:block;top:auto;bottom:-12px;left:44px;right:auto;width:2px;height:12px;background:var(--line-2)}}
@media (prefers-reduced-motion:reduce){.hj a,.hj-go{transition:none}.hj a:hover{transform:none}}

/* ── v23 홈: 우선순위 사다리·조별 역할 카드 ── */
.pl-panel{display:flex;flex-direction:column}
.pl-legend{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.pl-legend i{width:28px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--alert),var(--sel))}
.pl{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;margin:4px 0 0}
.pl li{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(70px,26%);align-items:center;gap:14px;padding:10px 14px 10px 10px;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.pl li:first-child{border-color:color-mix(in srgb,var(--alert) 45%,var(--line));background:color-mix(in srgb,var(--alert-soft) 55%,var(--paper))}
.pl-n{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--ink);color:var(--paper)}
.pl li:first-child .pl-n{background:var(--alert);color:var(--surface)}
.pl-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.pl-t b{font-size:16px;letter-spacing:-.02em}
.pl-t span{font-size:13px;color:var(--muted);word-break:keep-all;line-height:1.45}
.pl-bar{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden}
.pl-bar i{display:block;height:100%;width:var(--w);border-radius:4px;background:linear-gradient(90deg,var(--alert),var(--sel))}
.pl-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--accent-soft);color:var(--ink-2);font-size:13.5px;line-height:1.55;word-break:keep-all}
.pl-note svg{flex:none;margin-top:2px;color:var(--accent)}
.rl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rl-c{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);border-left:4px solid var(--rc,var(--accent))}
.rl-ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--rc,var(--accent));background:color-mix(in srgb,var(--rc,var(--accent)) 13%,transparent)}
.rl-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.rl-t b{font-size:15px}
.rl-t span{font-size:13px;color:var(--muted);line-height:1.45;word-break:keep-all}
@media (max-width:520px){.rl{grid-template-columns:1fr}.pl li{grid-template-columns:34px minmax(0,1fr)}.pl-bar{grid-column:1/-1}}
/* ── v23 홈: 평가 기준 시각화 ── */
.rb-panel{display:flex;flex-direction:column}
.rb-total{display:inline-flex;align-items:baseline;gap:2px;font-size:13px;color:var(--muted)}
.rb-total b{font-size:26px;color:var(--ink);letter-spacing:-.03em}
.rb-stack{display:flex;gap:3px;height:44px;margin:6px 0 16px;border-radius:10px;overflow:hidden}
.rb-stack span{display:flex;align-items:center;justify-content:center;background:var(--rc);min-width:0}
.rb-stack b{font-size:14px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.rb-list{list-style:none;display:flex;flex-direction:column;padding:0;margin:0}
.rb-list li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 2px;border-top:1px solid var(--line)}
.rb-list li:first-child{border-top:none;padding-top:4px}
.rb-dot{width:12px;height:12px;border-radius:4px;background:var(--rc);margin-top:4px}
.rb-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.rb-t b{font-size:15px}
.rb-t span{font-size:13px;color:var(--muted);line-height:1.5;word-break:keep-all}
.rb-p{font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--rc);min-width:2ch;text-align:right}
.rb-note{margin-top:auto;padding:10px 12px;border-radius:10px;background:var(--paper);border:1px solid var(--line);font-size:13px;color:var(--muted);word-break:keep-all}
[data-ri="4"]{--rc:var(--c5)} [data-ri="5"]{--rc:var(--c6)}
/* ── v26 히어로 제목: 야간 라운딩 손전등 — 어두운 병실을 불빛이 훑으며 숨은 글자를 찾고, '위험을'에서 멈춰 표시한 뒤 불이 켜진다 ── */
@property --fx{syntax:'<length>';inherits:true;initial-value:0px}
@property --fy{syntax:'<length>';inherits:true;initial-value:0px}
@property --fr{syntax:'<length>';inherits:true;initial-value:0px}
.hx-risk{position:relative;display:inline-block;font-style:normal;color:var(--alert)}
.hx-risk::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.075em;border-radius:.04em;background:var(--alert);transform-origin:left center}
.hx-dark,.hx-torch,.hx-night{display:none}
.hx.night-run .hx-dark{display:block;position:absolute;inset:0;z-index:30;pointer-events:none;background:#060E11;
  -webkit-mask-image:radial-gradient(circle at var(--fx) var(--fy),transparent 0,transparent var(--fr),rgba(0,0,0,.6) calc(var(--fr) + 22px),#000 calc(var(--fr) + 58px));
          mask-image:radial-gradient(circle at var(--fx) var(--fy),transparent 0,transparent var(--fr),rgba(0,0,0,.6) calc(var(--fr) + 22px),#000 calc(var(--fr) + 58px))}
.hx.night-run .hx-torch{display:block;position:absolute;inset:0;z-index:31;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--fx) var(--fy),rgba(255,214,140,.6) 0,rgba(255,214,140,0) calc(var(--fr) + 60px))}
.hx.night-run .hx-night{display:block;position:absolute;right:clamp(16px,4vw,48px);top:clamp(16px,3vw,32px);z-index:32;margin:0;font-size:12px;letter-spacing:.12em;color:#9DB3B6;animation:hxNight 4.4s forwards}
.hx.night-run .hx-risk{animation:hxNRisk .45s 1.95s both}
.hx.night-run .hx-risk::after{animation:hxNLine .55s 2.1s cubic-bezier(.2,.75,.15,1) both}
@keyframes hxNight{0%,82%{opacity:1}100%{opacity:0}}
@keyframes hxNRisk{from{color:var(--hx-ink)}to{color:var(--alert)}}
@keyframes hxNLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}


/* ═════════ v30 · 사전학습실 (pr-*) · 강의 장면 (ps-*) · 헤더 로그인 상자 ═════════ */
/* 헤더: 로그인 전에는 로그인 버튼, 로그인 후에는 이름·저장 상태·로그아웃을 한 상자에 */
.who-login{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:7px;padding:5px 12px;font-size:13px;font-weight:700;text-decoration:none;line-height:1.2}
.who-login:hover{filter:brightness(1.08)}
.who-box{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--chrome-3);background:var(--chrome-2);border-radius:9px;padding:4px 6px 4px 12px;flex-wrap:wrap}
.who-box .who-name{color:var(--chrome-ink);font-weight:600}
.who-box .sync{border-color:var(--chrome-3)}
.who-out{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--chrome-ink);border:1px solid var(--chrome-3);border-radius:6px;padding:4px 10px;font-size:12.5px;font-weight:600;cursor:pointer;line-height:1.2;font-family:inherit}
.who-out:hover{border-color:var(--alert);color:#fff;background:rgba(201,60,63,.35)}
.who-box .linkish{font-size:12px;color:var(--chrome-muted)}
@media (max-width:640px){.who-box{padding:4px 6px 4px 10px;gap:8px}.who-box .sync{display:none}}

/* 공통 조각 */
.pr-bar{display:block;height:6px;border-radius:99px;background:var(--sunk);overflow:hidden;min-width:60px}
.pr-bar i{display:block;height:100%;border-radius:inherit;background:var(--cc,var(--accent));transition:width .4s}
.pr-bar.thin{height:4px}
.pr-ring-bg{fill:none;stroke:var(--sunk);stroke-width:9}
.pr-ring-fg{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .6s}
.pr-ring text{fill:var(--ink);font:700 21px var(--f-mono)}
.pr-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.pr-pill.done{background:var(--ok-soft);color:var(--ok)}
.pr-pill.doing{background:var(--accent-soft);color:var(--accent)}
.pr-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pr-facts span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px 12px}
.pr-facts svg{color:var(--accent)}
.pr-guest{display:flex;gap:10px;align-items:flex-start;background:var(--sel-soft);color:var(--ink-2);border:1px solid color-mix(in srgb,var(--sel) 35%,transparent);border-radius:var(--r);padding:10px 14px;font-size:13.5px;margin:0 0 18px}
.pr-guest svg{color:var(--warn);flex:none;margin-top:2px}
.pr-guest a{color:var(--accent);font-weight:700}
.pr-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap}
.pr-crumb a{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);text-decoration:none;font-weight:600}
.pr-crumb a:hover{color:var(--accent)}

/* 썸네일(영상 표지) */
.pr-thumb{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:10px;overflow:hidden;color:#fff;flex:none;
  background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--cc) 85%,#fff 0%) 0%,transparent 60%),linear-gradient(150deg,color-mix(in srgb,var(--cc) 70%,#06141a) 0%,#0B1A20 100%)}
.pr-thumb::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:18px 18px;mask-image:linear-gradient(160deg,#000 20%,transparent 85%)}
.pr-thumb-ic{position:relative;opacity:.95;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.pr-thumb-no{position:absolute;left:10px;top:8px;font-size:11px;font-weight:600;letter-spacing:.12em;opacity:.85}
.pr-thumb-play{position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#0B1A20;transition:transform .2s}
.pr-thumb-play svg{margin-left:2px}
.pr-thumb.sm{width:112px;border-radius:8px}
.pr-thumb.sm .pr-thumb-no{left:7px;top:5px;font-size:9.5px}
.pr-thumb.sm .pr-thumb-play{width:22px;height:22px;right:6px;bottom:6px}
.pr-thumb.sm::before{background-size:12px 12px}

/* 사전학습실 첫 화면 */
body[data-route="pre"] .wrap{word-break:keep-all}
.pr-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:28px 30px;border-radius:var(--r-lg);border:1px solid var(--line);margin-bottom:18px;
  background:radial-gradient(90% 140% at 100% 0%,var(--accent-soft) 0%,transparent 60%),var(--surface);box-shadow:var(--shadow)}
.pr-hero h1{margin-top:6px}
.pr-hero-p{display:grid;justify-items:center;gap:10px;min-width:220px;padding:18px 20px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.pr-hero-s{display:grid;justify-items:center;gap:1px;font-size:13px;color:var(--muted)}
.pr-hero-s b{color:var(--ink);font-size:14px}
.pr-resume{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:18px;align-items:center;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--cc);border-radius:var(--r-lg);padding:14px 18px 14px 14px;margin-bottom:22px;box-shadow:var(--shadow);transition:border-color .2s,transform .2s}
.pr-resume:hover{transform:translateY(-1px);border-color:var(--cc)}
.pr-resume:hover .pr-thumb-play{transform:scale(1.1)}
.pr-resume-t{display:grid;gap:4px;min-width:0}
.pr-resume-t b{font-size:18px}
.pr-resume-t .pr-bar{margin-top:6px;max-width:360px}
.pr-resume-go{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--cc);color:#fff}
.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:1020px){.pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pr-grid{grid-template-columns:minmax(0,1fr)}}
.pr-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.pr-card:hover{transform:translateY(-2px);border-color:var(--cc)}
.pr-card:hover .pr-thumb-play{transform:scale(1.12)}
.pr-card .pr-thumb{border-radius:0}
.pr-card-b{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.pr-card-k{font-size:10.5px;letter-spacing:.14em;color:var(--cc);font-weight:600}
.pr-card-b b{font-size:17px;line-height:1.35}
.pr-card-m{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:10px}
.pr-card-p{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:12px;color:var(--ink-2)}

/* 강좌 화면 */
.pr-chead{display:grid;grid-template-columns:240px minmax(0,1fr) auto;gap:24px;align-items:center;margin-bottom:20px}
.pr-chead .pr-thumb{width:240px}
.pr-chead h1{margin-top:4px}
.pr-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pr-list a{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:16px;align-items:center;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 16px 10px 10px;transition:border-color .2s,transform .2s}
.pr-list a:hover{border-color:var(--cc);transform:translateX(2px)}
.pr-list-t{display:grid;gap:3px;min-width:0}
.pr-list-t b{font-size:15.5px}
.pr-list-t .pr-bar{margin-top:4px;max-width:280px}
.pr-list-exam a{border-style:dashed;border-color:color-mix(in srgb,var(--cc) 55%,var(--line))}
.pr-exam-ic{width:112px;aspect-ratio:16/9;border-radius:8px;display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 12%,var(--surface))}

/* 강의 화면 */
.pr-lesson{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.pr-main{min-width:0;display:grid;gap:18px}
.pr-lhead h1{font-size:clamp(22px,2.6vw,30px);margin-top:4px}
.pr-lhead-p{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.pr-lhead-p .pr-bar{width:200px;--cc:var(--accent)}
.pr-side{position:sticky;top:76px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;max-height:calc(100vh - 96px);overflow:auto}
.pr-chap,.pr-mini{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.pr-chap button,.pr-mini a{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:7px 8px;font:inherit;font-size:13.5px;color:var(--ink-2);cursor:pointer;text-decoration:none}
.pr-mini a{grid-template-columns:22px minmax(0,1fr) auto}
.pr-chap button:hover,.pr-mini a:hover{background:var(--sunk)}
.pr-chap button[aria-current],.pr-mini a[aria-current]{background:var(--accent-soft);color:var(--ink);font-weight:700}
.pr-chap .mono,.pr-mini .mono{font-size:11.5px;color:var(--muted)}
.pr-seen{color:var(--ok)}

/* 플레이어 */
.pr-player{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#071116;container-type:inline-size;box-shadow:0 18px 40px -22px rgba(0,0,0,.55);outline:none}
.pr-player:focus-visible{box-shadow:0 0 0 3px var(--accent)}
.pr-video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.pr-stage{position:relative;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:#0A161B}
.pr-cap{position:absolute;left:50%;bottom:calc(48px + 2.2cqw);transform:translateX(-50%);width:min(88%,980px);text-align:center;font-size:clamp(12.5px,1.75cqw,22px);line-height:1.55;color:#fff;background:rgba(3,10,13,.78);padding:.45em .9em;border-radius:6px;pointer-events:none;text-wrap:balance;opacity:0;transition:opacity .3s}
.pr-player.started .pr-cap{opacity:1}
.pr-player.nocc .pr-cap{display:none}
.pr-big{position:absolute;inset:0 0 48px 0;display:grid;place-content:center;justify-items:center;gap:10px;border:0;cursor:pointer;color:#fff;font:inherit;text-align:center;padding:20px;
  background:radial-gradient(60% 70% at 50% 45%,rgba(4,12,16,.55),rgba(4,12,16,.9));-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.pr-big svg{width:clamp(56px,9cqw,96px);height:clamp(56px,9cqw,96px);padding:clamp(16px,2.4cqw,26px);padding-left:clamp(20px,2.8cqw,30px);border-radius:50%;background:var(--cc);box-shadow:0 0 0 10px color-mix(in srgb,var(--cc) 30%,transparent);transition:transform .2s}
.pr-big:hover svg{transform:scale(1.06)}
.pr-big span{font-size:clamp(17px,2.6cqw,30px);font-weight:700;margin-top:6px;text-wrap:balance}
.pr-big small{font-size:clamp(12px,1.4cqw,15px);opacity:.8}
.pr-player.started .pr-big{display:none}
.pr-ctrl{display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;background:#0B171C;color:#DDE8E7;border-top:1px solid rgba(255,255,255,.06)}
.pr-btn{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border:0;border-radius:6px;background:none;color:inherit;cursor:pointer;font:600 12.5px var(--f-mono)}
.pr-btn:hover{background:rgba(255,255,255,.1)}
.pr-btn[aria-pressed="false"]{opacity:.6}
.pr-btn:focus-visible,.pr-track:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pr-track{position:relative;flex:1;height:22px;margin:0 8px;cursor:pointer;touch-action:none;min-width:80px}
.pr-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:99px;background:rgba(255,255,255,.18)}
.pr-track-fill{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:99px;background:var(--cc);width:0}
.pr-track-fill::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 50%,transparent)}
.pr-track-mark{position:absolute;top:50%;width:2px;height:8px;margin-top:-4px;background:rgba(255,255,255,.45);border-radius:1px}
.pr-track-mark:first-of-type{display:none}
.pr-time{font-size:12px;color:#A9BCBD;white-space:nowrap;padding:0 4px}
.pr-player.fs{display:flex;flex-direction:column;justify-content:center;background:#000;border-radius:0}
.pr-player.fs .pr-stage{width:min(100%,calc((100vh - 48px) * 16 / 9));margin:auto}
.pr-player.fs .pr-ctrl{width:100%}
@media (max-width:640px){
  .pr-ctrl{flex-wrap:wrap;height:auto;padding:6px 6px 4px;row-gap:0}
  .pr-track{order:-1;flex:1 0 100%;margin:0 6px}
  .pr-time{margin-left:auto}
  #plPrev,#plNext{display:none}
  .pr-big{inset:0 0 auto 0;aspect-ratio:16/9}
  .pr-cap{position:static;transform:none;width:auto;border-radius:0;background:#0E1B21;font-size:13.5px;padding:10px 14px;text-align:left;min-height:4.6em;opacity:1}
  .pr-player:not(.started) .pr-cap{display:none}
  .ps-body{padding-bottom:1cqw}
}
/* 좁은 무대(휴대폰)에서는 보조 설명을 줄이고 제목을 키운다 — 자세한 내용은 자막으로 */
@container (max-width:560px){
  .ps-k{display:none}
  .ps h3{font-size:4.8cqw}
  .ps-pt span:last-child,.ps-step span:last-child{display:none}
  .ps-pt b{font-size:3.3cqw}
  .ps-pt{padding:1.8cqw 2.2cqw}
  .ps-n{font-size:2cqw}
  .ps-step b{font-size:3cqw}
  .ps-step .ps-n{width:6.5cqw;height:6.5cqw;font-size:3cqw}
  .ps-step:not(:last-child)::after{top:3.25cqw;left:calc(50% + 4.2cqw)}
  .ps-li p{font-size:2.7cqw}
  .ps-col-h{font-size:3.2cqw}
  .ps-li:nth-child(n+4){display:none}
  .ps-title h2{font-size:6.6cqw}
  .ps-title p{font-size:3cqw}
  .ps-big-h{font-size:3.2cqw}
  .ps-big-l{font-size:3.4cqw}
  .ps-key-k{font-size:2.6cqw}
  .ps-key-t{font-size:4.6cqw}
  .ps-z b{font-size:2.6cqw}
  .ps-z small,.ps-gscale{font-size:2cqw}
  .ps-foot{font-size:2cqw}
  .ps-think-k{font-size:2.6cqw}
  .ps-think-q{font-size:5cqw}
  .ps-think-a p{font-size:3.8cqw}
}

/* 강의 장면(16:9 무대). 글자 크기는 무대 너비(cqw)에 맞춘다 */
.ps{position:absolute;inset:0;display:flex;flex-direction:column;word-break:keep-all;overflow-wrap:anywhere;text-align:left;padding:3.6cqw 6cqw 3cqw;color:#EAF3F2;
  background:radial-gradient(70% 90% at 92% 0%,color-mix(in srgb,var(--cc) 42%,transparent) 0%,transparent 62%),radial-gradient(60% 70% at 0% 100%,color-mix(in srgb,var(--cc) 16%,transparent),transparent 60%),linear-gradient(160deg,#10252C 0%,#0A161B 70%)}
.ps::before{content:"";position:absolute;inset:-10%;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:4cqw 4cqw;mask-image:radial-gradient(70% 70% at 70% 30%,#000,transparent 75%);animation:psDrift var(--sd,10s) linear both;pointer-events:none}
.ps::after{content:"";position:absolute;left:0;top:0;height:.35cqw;min-height:2px;background:var(--cc);animation:psProg var(--sd,10s) linear both;opacity:.9}
@keyframes psDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3cqw,2cqw,0)}}
@keyframes psProg{from{width:0}to{width:100%}}
.ps-k{position:relative;font-size:clamp(9px,1.05cqw,13px);letter-spacing:.16em;color:color-mix(in srgb,var(--cc) 55%,#fff);margin:0;opacity:.9}
.ps-foot{position:relative;display:flex;justify-content:space-between;font-size:clamp(9px,1cqw,12px);letter-spacing:.12em;color:rgba(234,243,242,.5);margin:0}
.ps-body{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:2.6cqw;min-height:0;padding-bottom:6.5cqw}
.pr-player.nocc .ps-body{padding-bottom:1cqw}
.ps h3{font-size:3.3cqw;line-height:1.25;font-weight:800;letter-spacing:-.02em;color:#fff;margin:0}
.ps p{margin:0}
.ps-in{animation:psIn .75s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(.25s + var(--i) * .5s)}
.ps-in.pop{animation-name:psPop;animation-duration:.9s}
@keyframes psIn{from{opacity:0;transform:translateY(1.8cqw)}to{opacity:1;transform:none}}
@keyframes psPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
.pr-stage.paused .ps-in,.pr-stage.paused .ps::before,.pr-stage.paused .ps::after,.pr-stage.paused .ps-line{animation-play-state:paused}
.pr-player:not(.started) .ps-in,.pr-player:not(.started) .ps::after,.pr-player:not(.started) .ps-line{animation:none}
.pr-player:not(.started) .ps::after{width:0}
.ps-n{font-size:1.25cqw;font-weight:600;letter-spacing:.1em;color:color-mix(in srgb,var(--cc) 60%,#fff)}

.ps-title{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.6cqw}
.ps-title-ic{display:grid;place-items:center;width:10cqw;height:10cqw;border-radius:50%;background:color-mix(in srgb,var(--cc) 30%,transparent);border:.25cqw solid color-mix(in srgb,var(--cc) 70%,#fff);color:#fff}
.ps-title-ic svg{width:5.4cqw;height:5.4cqw}
.ps-title h2{font-size:5.2cqw;line-height:1.18;font-weight:800;letter-spacing:-.03em;color:#fff;text-wrap:balance;max-width:80%}
.ps-line{display:block;height:.4cqw;width:9cqw;border-radius:99px;background:var(--cc);animation:psLine 1s .9s cubic-bezier(.2,.75,.2,1) both}
@keyframes psLine{from{width:0}to{width:9cqw}}
.ps-title p{font-size:2.2cqw;color:rgba(234,243,242,.78)}

.ps-pts{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:1.6cqw}
.ps-pt{display:flex;flex-direction:column;gap:.5cqw;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-top:.35cqw solid var(--cc);border-radius:1cqw;padding:1.6cqw 1.8cqw}
.ps-pt b{font-size:2.15cqw;line-height:1.3;color:#fff}
.ps-pt span:last-child{font-size:1.55cqw;line-height:1.5;color:rgba(234,243,242,.78)}

.ps-flow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2.4cqw}
.ps-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7cqw}
.ps-step .ps-n{display:grid;place-items:center;width:5cqw;height:5cqw;border-radius:50%;background:var(--cc);color:#fff;font-size:2cqw;letter-spacing:0;box-shadow:0 0 0 .7cqw color-mix(in srgb,var(--cc) 25%,transparent)}
.ps-step:not(:last-child)::after{content:"";position:absolute;top:2.5cqw;left:calc(50% + 3.4cqw);right:calc(-50% + 1cqw);height:.25cqw;background:linear-gradient(90deg,var(--cc),rgba(255,255,255,.2))}
.ps-step b{font-size:2cqw;line-height:1.3;color:#fff;margin-top:.6cqw}
.ps-step span:last-child{font-size:1.45cqw;line-height:1.5;color:rgba(234,243,242,.75)}

.ps-cmp{display:grid;grid-template-columns:1fr 1fr;gap:2cqw}
.ps-col{display:flex;flex-direction:column;gap:.9cqw;border-radius:1.2cqw;padding:1.8cqw 2.2cqw;border:1px solid rgba(255,255,255,.08)}
.ps-col.ok{background:rgba(27,175,122,.14)}
.ps-col.no{background:rgba(227,73,72,.13)}
.ps-col-h{display:flex;align-items:center;gap:.8cqw;font-size:2.2cqw;font-weight:800;color:#fff;margin-bottom:.3cqw!important}
.ps-col.ok .ps-col-h svg{color:#4FD6A0}
.ps-col.no .ps-col-h svg{color:#FF8A86}
.ps-col-h svg{width:2.8cqw;height:2.8cqw;flex:none}
.ps-li p{position:relative;padding-left:2cqw;font-size:1.75cqw;line-height:1.5;color:rgba(234,243,242,.88)}
.ps-li p::before{content:"";position:absolute;left:.3cqw;top:.7em;width:.7cqw;height:.7cqw;border-radius:50%;background:currentColor;opacity:.5}

.ps-big{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6cqw}
.ps-big-h{font-size:2.1cqw;color:rgba(234,243,242,.75);font-weight:600}
.ps-big-n{font-size:11cqw;line-height:1.05;font-weight:800;letter-spacing:-.04em;color:color-mix(in srgb,var(--cc) 45%,#fff);text-shadow:0 1cqw 4cqw color-mix(in srgb,var(--cc) 45%,transparent)}
.ps-big-l{font-size:2.3cqw;color:#fff;font-weight:600;max-width:75%;text-wrap:balance}

.ps-key{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.8cqw}
.ps-key-k{display:inline-flex;align-items:center;gap:.8cqw;font-size:1.6cqw;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--cc);padding:.6cqw 1.6cqw;border-radius:99px}
.ps-key-k svg{width:2cqw;height:2cqw}
.ps-key-t{font-size:3.5cqw;line-height:1.4;font-weight:700;color:#fff;max-width:82%;text-wrap:balance}

.ps-gauge{display:flex;flex-direction:column;gap:1.2cqw;padding-top:2cqw}
.ps-gbar{position:relative;height:7cqw;border-radius:1cqw;overflow:hidden;background:rgba(255,255,255,.06)}
.ps-z{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2cqw;border-right:.2cqw solid #0A161B;color:#fff;text-align:center}
.ps-z.ok{background:rgba(27,175,122,.55)}
.ps-z.mid{background:rgba(229,160,26,.6)}
.ps-z.hi{background:rgba(227,73,72,.62)}
.ps-z b{font-size:1.6cqw;line-height:1.2}
.ps-z small{font-size:1.1cqw;opacity:.85}
.ps-gscale{display:flex;justify-content:space-between;font-size:1.3cqw;color:rgba(234,243,242,.65)}

/* 실사 배경 영상 · 표지 사진 */
.ps-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;filter:saturate(.85) contrast(1.05)}
.ps.has-bg{background:#081217}
.ps.has-bg::before{background-image:linear-gradient(180deg,rgba(6,15,19,.55) 0%,rgba(6,15,19,.35) 40%,rgba(6,15,19,.85) 100%),radial-gradient(70% 90% at 92% 0%,color-mix(in srgb,var(--cc) 40%,transparent) 0%,transparent 62%);background-size:auto;inset:0;mask-image:none;animation:none}
.ps.has-bg .ps-title h2,.ps.has-bg .ps-title p{text-shadow:0 .3cqw 2cqw rgba(0,0,0,.55)}
.pr-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.pr-thumb.has-media{background:linear-gradient(150deg,color-mix(in srgb,var(--cc) 75%,#06141a),#0B1A20)}
.pr-thumb.has-media::before{z-index:1;background-image:linear-gradient(160deg,color-mix(in srgb,var(--cc) 55%,transparent) 0%,rgba(7,17,22,.25) 45%,rgba(7,17,22,.7) 100%);background-size:auto;mask-image:none}
.pr-thumb.has-media>:not(.pr-thumb-img){z-index:2}

/* 생각해 보기: 질문 → 잠깐 생각할 시간(막대) → 답 공개 */
.ps-think{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2cqw}
.ps-think-k{display:inline-flex;align-items:center;gap:.8cqw;font-size:1.6cqw;font-weight:700;letter-spacing:.08em;color:color-mix(in srgb,var(--cc) 55%,#fff);border:.15cqw solid color-mix(in srgb,var(--cc) 60%,transparent);padding:.5cqw 1.5cqw;border-radius:99px}
.ps-think-k svg{width:2.2cqw;height:2.2cqw}
.ps-think-q{font-size:3.8cqw;line-height:1.35;font-weight:800;color:#fff;max-width:84%;text-wrap:balance}
.ps-think-a{display:grid;justify-items:center;gap:1.4cqw;min-height:8cqw;width:100%}
.ps-think-t{display:block;width:24cqw;height:.45cqw;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;animation:psFade .4s calc(var(--sd,10s) * .45) both reverse}
.ps-think-t i{display:block;height:100%;width:100%;background:var(--cc);transform-origin:left;animation:psTimer calc(var(--sd,10s) * .45 - 1s) 1s linear both}
.ps-think-a p{display:inline-flex;align-items:center;gap:1cqw;font-size:2.7cqw;font-weight:700;color:#06231D;background:#7FE3C0;padding:1cqw 2.2cqw;border-radius:1.2cqw;max-width:86%;text-align:left;animation:psPop .7s calc(var(--sd,10s) * .45) cubic-bezier(.2,.75,.2,1) both}
.ps-think-a p svg{flex:none;width:2.8cqw;height:2.8cqw}
@keyframes psTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes psFade{from{opacity:0}to{opacity:1}}
.pr-stage.paused .ps-think-t,.pr-stage.paused .ps-think-t i,.pr-stage.paused .ps-think-a p{animation-play-state:paused}
.pr-player:not(.started) .ps-think-t,.pr-player:not(.started) .ps-think-t i,.pr-player:not(.started) .ps-think-a p{animation:none}

/* 문제(확인문제·자가평가) */
.pr-quiz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow)}
.pr-qh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pr-qh svg{color:var(--accent)}
.pr-qs{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pr-q{padding-top:16px;border-top:1px solid var(--line)}
.pr-q:first-child{border-top:0;padding-top:4px}
.pr-q-t{display:flex;gap:10px;font-weight:700;font-size:15.5px;line-height:1.5;margin:0 0 10px}
.pr-q-t .mono{flex:none;color:var(--accent);font-size:13px;padding-top:2px}
.pr-q.ok .pr-q-t .mono{color:var(--ok)}
.pr-q.no .pr-q-t .mono{color:var(--alert)}
.pr-opts{display:grid;gap:7px}
.pr-opt{position:relative;display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:var(--paper);cursor:pointer;font-size:14.5px;line-height:1.5;transition:border-color .15s,background .15s}
.pr-opt:hover{border-color:var(--line-2)}
.pr-opt input{position:absolute;opacity:0;pointer-events:none}
.pr-opt-n{flex:none;color:var(--muted);font-size:15px;line-height:1.4}
.pr-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.pr-opt:has(input:checked) .pr-opt-n{color:var(--accent);font-weight:700}
.pr-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pr-opt:has(input:disabled){cursor:default}
.pr-quiz .pr-opt.ans{border-color:var(--ok);background:var(--ok-soft)}
.pr-quiz .pr-opt.ans .pr-opt-n{color:var(--ok)}
.pr-quiz .pr-opt.wrong{border-color:var(--alert);background:var(--alert-soft)}
.pr-quiz .pr-opt.wrong .pr-opt-n{color:var(--alert)}
.pr-opt em{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:12px;font-weight:700;white-space:nowrap}
.pr-opt.ans em{color:var(--ok)}
.pr-opt.wrong em{color:var(--alert)}
.pr-exp{margin-top:10px;padding:12px 14px;border-radius:9px;background:var(--sunk);border-left:3px solid var(--ok);font-size:14px;line-height:1.65;color:var(--ink-2)}
.pr-q.no .pr-exp{border-left-color:var(--alert)}
.pr-exp b{color:var(--ink)}
.pr-qfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.pr-score{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:15px}
.pr-score b{font-size:30px;color:var(--accent);line-height:1}
.pr-pn{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}
.pr-pn .btn{max-width:100%}

/* 교수자 콘솔 · 사전학습 현황 */
.pr-con{display:grid;gap:18px}
.pr-con .panel-h{margin-bottom:0}
.pr-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pr-kpis div{display:grid;gap:2px;padding:14px 16px;border-radius:10px;background:var(--paper);border:1px solid var(--line)}
.pr-kpis b{font-size:26px;line-height:1.1;color:var(--ink)}
.pr-kpis span{font-size:12.5px;color:var(--muted)}
.pr-con-g{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px}
.pr-con-g h3{margin-bottom:10px}
.pr-cbars{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pr-cbars li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(60px,1fr) 42px 104px;gap:10px;align-items:center;font-size:13px}
.pr-cb-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-cb-t b{font-family:var(--f-mono);color:var(--cc);margin-right:4px}
.pr-cb-b{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}
.pr-cb-b i{display:block;height:100%;background:var(--cc);border-radius:inherit}
.pr-cbars .mono{font-size:12px;text-align:right}
.pr-miss{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pr-miss li{display:grid;grid-template-columns:62px minmax(0,1fr) 44px;gap:10px;align-items:baseline;font-size:13px;padding:8px 10px;border-radius:8px;background:var(--paper);border:1px solid var(--line)}
.pr-miss b{color:var(--alert);text-align:right}
table.pr-ctable{min-width:860px}
.pr-cell{min-width:64px}
.pr-cell-b{display:block;height:5px;border-radius:99px;background:var(--sunk);overflow:hidden;margin-bottom:3px}
.pr-cell-b i{display:block;height:100%}
.pr-cell .mono{font-size:12px}
.pr-cell small{display:block;font-size:11px;color:var(--muted)}

/* 반응형 */
@media (max-width:1020px){
  .pr-lesson{grid-template-columns:minmax(0,1fr)}
  .pr-side{position:static;max-height:none}
  .pr-con-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pr-hero{grid-template-columns:minmax(0,1fr);padding:22px 18px}
  .pr-hero-p{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;min-width:0}
  .pr-hero-p .btn,.pr-hero-p>.pr-pill{grid-column:1/-1;justify-self:stretch}
  .pr-hero-s{justify-items:start}
  .pr-resume{grid-template-columns:120px minmax(0,1fr);padding:10px}
  .pr-resume-go{display:none}
  .pr-resume-t b{font-size:15.5px}
  .pr-chead{grid-template-columns:minmax(0,1fr) auto;gap:14px}
  .pr-chead .pr-thumb{display:none}
  .pr-list a{grid-template-columns:84px minmax(0,1fr);padding:8px 10px 8px 8px;gap:12px}
  .pr-list a>.pr-pill{grid-column:2;justify-self:start}
  .pr-thumb.sm,.pr-exam-ic{width:84px}
  .pr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-cbars li{grid-template-columns:minmax(0,1fr) 60px 40px;row-gap:2px}
  .pr-cbars li>.mono.muted{grid-column:1/-1;text-align:left}
  .pr-quiz{padding:16px}
  .pr-pn .btn{flex:1 1 100%}
}

/* 나의 학습 → 사전학습실 바로가기 */
.lj-pre{display:grid;grid-template-columns:auto minmax(0,1fr) 200px auto;gap:16px;align-items:center;text-decoration:none;color:inherit;margin:18px 0 6px;padding:14px 18px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(100deg,var(--accent-soft) 0%,var(--surface) 55%);box-shadow:var(--shadow);transition:border-color .2s,transform .2s}
.lj-pre:hover{border-color:var(--accent);transform:translateY(-1px)}
.lj-pre-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.lj-pre-ic svg{margin-left:2px}
.lj-pre-t{display:grid;gap:2px;min-width:0}
.lj-pre-t b{font-size:16px}
.lj-pre-t small{color:var(--muted);font-size:12.5px}
.lj-pre-p{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font-size:12.5px}
.lj-pre-go{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--accent);white-space:nowrap}
@media (max-width:760px){.lj-pre{grid-template-columns:auto minmax(0,1fr)}.lj-pre-p{grid-column:1/-1}.lj-pre-go{display:none}}

/* v32 · 정렬 바로잡기: 가운데 정렬 장면은 각 줄 상자를 무대 폭 전체로 펴고, 폭 제한은 무대 기준(cqw)으로 둔다
   (이전에는 % 폭 제한이 줄어든 상자 기준으로 계산돼 제목·문장이 왼쪽으로 밀리고 밑줄과 어긋났다) */
.ps-title>.ps-in,.ps-big>.ps-in,.ps-key>.ps-in,.ps-think>.ps-in{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.ps-title h2{max-width:76cqw;margin-inline:auto}
.ps-title p{max-width:70cqw;margin-inline:auto}
.ps-big-l{max-width:66cqw;margin-inline:auto}
.ps-big-h{max-width:70cqw;margin-inline:auto}
.ps-key-t{max-width:74cqw;margin-inline:auto}
.ps-think-q{max-width:76cqw;margin-inline:auto}
.ps-think-a p{max-width:78cqw}
.ps-line{margin-inline:auto}
.ps-title,.ps-big,.ps-key,.ps-think{width:100%}
.ps h2,.ps h3,.ps p,.ps b{word-break:keep-all;overflow-wrap:break-word}
.ps-think-a p{justify-content:center;text-align:center;text-wrap:balance}
.ps-think-a p>span{text-align:center}
.ps-key-t,.ps-title h2,.ps-think-q,.ps-big-l{text-wrap:balance}
@media (max-width:640px){.pr-cap{text-align:center;text-wrap:balance}}

/* v33 · 결과 화면: 가상 데이터 표시, 학생 줄 펼치기 */
.pr-demo{display:inline-flex;align-items:center;vertical-align:middle;margin-left:8px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.02em;background:var(--sel-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--sel) 45%,transparent)}
.pr-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.pr-kpis .warn b{color:var(--alert)}
.pr-row{cursor:pointer;transition:background .15s}
.pr-row:hover,.pr-row:focus-visible{background:var(--accent-soft);outline:none}
.pr-row.open{background:var(--accent-soft)}
.pr-row .pr-nm{font-weight:600;border-bottom:1px dashed var(--line-2)}
.pr-detail>td{background:var(--paper);padding:14px!important}
.pr-det{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.pr-det-c{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--cc);border-radius:10px;padding:10px 12px;display:grid;gap:6px;min-width:0}
.pr-det-h{display:flex;align-items:baseline;gap:8px;margin:0;font-size:13.5px}
.pr-det-h .mono:first-child{color:var(--cc);font-weight:700}
.pr-det-h b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-det-c ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.pr-det-c li{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);padding:3px 6px;border-radius:5px}
.pr-det-c li span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-det-c li .mono{flex:none;font-size:11.5px}
.pr-det-c li.ok{color:var(--ink-2);background:var(--ok-soft)}
.pr-det-c li.ok .mono{color:var(--ok)}
.pr-det-c li.ing{color:var(--ink-2);background:var(--accent-soft)}
.pr-det-x{margin:2px 0 0;font-size:12.5px;color:var(--ink-2);padding-top:6px;border-top:1px dashed var(--line)}
.pr-det-x.ok b{color:var(--ok)}
.pr-det-x.none{color:var(--muted)}
.pr-det-x .mono{color:var(--alert)}
.pd-demo .sect-h{align-items:flex-end}
.pd-demo .sect-h>p{max-width:62ch}
@media (max-width:760px){.pr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.pr-kpis>div:last-child{grid-column:1/-1}}
.pr-cbars li{grid-template-columns:minmax(0,1.3fr) minmax(60px,1fr) 42px 126px}
.pr-cbars .mono.muted{white-space:nowrap}
.pr-det-c li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.pr-det-c li span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-detail>td{white-space:normal}
.pr-det{max-width:100%}

/* SafeRound header: selected open-room symbol and balanced wordmark. */
.brand{gap:12px;min-width:0}
.brand-mark{width:52px;height:52px;flex:none;border-radius:12px;background:#F5FAF7;box-shadow:none}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.brand-copy{display:flex;flex-direction:column;justify-content:center;gap:5px}
.brand b{display:flex;align-items:baseline;gap:8px;font-weight:750;font-size:22px;letter-spacing:-.65px;line-height:1.15}
.brand-ko{font-size:13px;font-weight:600;letter-spacing:-.35px}
.brand small{display:block;margin:0;font-size:11.5px;line-height:1.35;letter-spacing:.1px;color:var(--chrome-muted)}
@media(max-width:600px){
  .brand{gap:10px}
  .brand-mark{width:46px;height:46px;border-radius:11px}
  .brand-copy{gap:4px}
  .brand b{font-size:20px;gap:7px}
  .brand-ko{font-size:12px}
  .brand small{font-size:11px}
}
/* Task-centered learning and teaching workspaces */
.ux-entry{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px;margin-bottom:28px}
.ux-entry-head h1{font-size:clamp(25px,3vw,35px);margin:8px 0 12px}.ux-entry-head>p{color:var(--muted)}
.ux-entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.ux-entry-card{display:flex;align-items:center;gap:16px;padding:24px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);background:var(--paper)}
.ux-entry-card.learner{background:var(--accent-soft);border-color:var(--accent)}.ux-entry-card:hover{outline:2px solid var(--accent);outline-offset:2px}.ux-entry-card>span:nth-child(2){flex:1}.ux-entry-card small{color:var(--muted);font-size:12px}.ux-entry-card h2{font-size:22px;margin:3px 0 8px}.ux-entry-card p{font-size:13px;color:var(--muted)}.ux-entry-card>b{font-size:24px;color:var(--accent)}.ux-entry-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--surface);color:var(--accent);flex:none}
.ux-entry-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:13px}.ux-entry-links a{padding:5px 0}
.ux-trail{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.ux-trail span{color:var(--muted);flex:1}
.ux-dash-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.ux-dash-head h1{font-size:clamp(24px,3vw,32px);margin:6px 0 8px}
.ux-next{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:16px;padding:26px}.ux-next h2{font-size:25px;margin:7px 0}.ux-next p{color:var(--muted);font-size:14px}.ux-next .btn{flex:none;min-height:46px}
.ux-progress{display:flex;align-items:center;gap:18px;margin:18px 0 28px;font-size:13px}.ux-progress label{display:flex;gap:12px;flex:none}.ux-progress progress{flex:1;width:100%;min-width:30px;height:10px;accent-color:var(--accent)}.ux-progress strong{color:var(--accent)}
.ux-learner-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:start}.ux-course-list{display:grid;gap:20px}.ux-course-group{border:1px solid var(--line);background:var(--surface);border-radius:14px;overflow:hidden}.ux-course-group>header{display:flex;gap:14px;padding:20px;border-bottom:1px solid var(--line);background:var(--paper)}.ux-course-group>header>span{font:500 14px var(--f-mono);color:var(--accent);padding-top:3px}.ux-course-group header p{font-size:12px;color:var(--muted);margin-top:4px}.ux-course-group ul{list-style:none}
.ux-stage{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line)}.ux-stage:last-child{border-bottom:0}.ux-stage>div{flex:1;min-width:0}.ux-stage b{font-size:14px;display:block}.ux-stage small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.ux-stage-icon{color:var(--accent);flex:none}.ux-stage-status{font-size:11px;padding:3px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}.ux-stage[data-st=lock] .ux-stage-status{background:var(--sunk);color:var(--muted)}.ux-stage[data-st=lock] .ux-stage-icon{color:var(--muted)}.ux-stage-action{font-size:12px;min-width:75px;text-align:center}
.ux-help{padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.ux-help h2{font-size:17px}.ux-help>a{display:block;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none}.ux-help small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.ux-help details{font-size:13px;margin-top:16px}.ux-help details p{margin-top:8px;color:var(--muted)}.ux-help>p{margin-top:20px}
.ux-results{margin-top:24px}.ux-results summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:44px;gap:12px}.ux-results[open]>p{margin:10px 0 18px}
.ux-console-layout{display:grid;grid-template-columns:196px minmax(0,1fr);gap:24px;align-items:start}.ux-side{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}.ux-side>div+div{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}.ux-side p{font-size:11px;color:var(--muted);padding:5px 10px}.ux-side button{width:100%;display:block;text-align:left;border:0;border-radius:8px;padding:12px 10px;background:transparent;font-size:13px;cursor:pointer;min-height:44px}.ux-side button:hover{background:var(--paper)}.ux-side button[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:700}.ux-console-body{min-width:0}.ux-console-body .sect:first-child{margin-top:0}.ux-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 28px}.ux-stat-grid>div{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:14px}.ux-stat-grid small{color:var(--muted);display:block}.ux-stat-grid strong{font-size:34px;display:block;color:var(--accent);margin-top:8px}.ux-stat-grid strong span{font-size:13px;font-weight:400;margin-left:7px;color:var(--muted)}
.ux-tasks{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:24px}.ux-tasks h2{margin-bottom:14px}.ux-tasks button{width:100%;border:0;border-top:1px solid var(--line);background:transparent;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;padding:20px 0;cursor:pointer}.ux-tasks button:hover b{text-decoration:underline}.ux-tasks button small{display:block;font-size:12px;color:var(--muted);margin-top:6px}.ux-tasks button>span:last-child{color:var(--accent);font-size:12px;white-space:nowrap}.ux-guide{padding-left:22px;margin-top:15px;line-height:2;font-size:14px}
.ux-search{display:flex;align-items:center;flex-wrap:wrap;gap:12px;background:var(--surface);padding:16px;border:1px solid var(--line);border-radius:12px;margin-bottom:20px}.ux-search label{font-weight:600;font-size:13px}.ux-search input{flex:1;min-width:160px;min-height:44px;padding:9px 12px;background:var(--paper);border:1px solid var(--line-2);border-radius:7px}.ux-save-error{display:flex;align-items:center;justify-content:space-between;gap:16px}.ux-save-error button{flex:none}
button,input,select{scroll-margin-top:140px}.nav a,.ctabs button{min-height:44px;display:inline-flex;align-items:center}.topbar-in{row-gap:6px}
@media(max-width:1100px){.topbar-in .nav{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px}.topbar-in .nav a{white-space:nowrap}.topbar-in>.who{margin-left:auto}.ux-console-layout{grid-template-columns:170px minmax(0,1fr)}.ux-learner-layout{grid-template-columns:minmax(0,1fr) 230px}}
@media(max-width:800px){.ux-entry{padding:24px}.ux-entry-grid{grid-template-columns:1fr}.ux-learner-layout,.ux-console-layout{grid-template-columns:1fr}.ux-side{display:flex;gap:14px;overflow-x:auto;padding:10px}.ux-side>div{display:flex;align-items:center;gap:4px;flex:none}.ux-side>div+div{border:0;border-left:1px solid var(--line);margin:0;padding:0 0 0 10px}.ux-side p{padding:0 6px}.ux-side button{white-space:nowrap;width:auto;padding:10px}.ux-help{display:grid;gap:0}.ux-next{align-items:flex-start}.ux-stat-grid>div{padding:18px}.ux-console-body .roomtabs{flex-wrap:wrap}}
@media(max-width:560px){.ux-entry{padding:20px}.ux-entry-card{padding:18px;gap:12px}.ux-entry-icon{width:38px;height:38px}.ux-entry-card h2{font-size:20px}.ux-dash-head{align-items:flex-start;flex-direction:column}.ux-next{padding:20px;flex-direction:column;gap:16px}.ux-next .btn{width:100%}.ux-progress{flex-wrap:wrap;gap:10px}.ux-progress label{width:100%;justify-content:space-between}.ux-stage{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;padding:16px}.ux-stage>.btn,.ux-stage-action{grid-column:2/-1;width:100%;min-height:40px}.ux-stage-status{font-size:10px}.ux-course-group>header{padding:16px}.ux-stat-grid{gap:8px}.ux-stat-grid>div{padding:14px 10px}.ux-stat-grid small{font-size:11px}.ux-stat-grid strong{font-size:27px}.ux-tasks{padding:18px}.ux-tasks button{align-items:flex-start;flex-direction:column;gap:9px}.ux-trail{gap:8px;font-size:12px}.ux-trail span{flex-basis:50%}.ux-save-error{flex-direction:column;align-items:flex-start}.brand b{font-size:19px}.brand-ko{font-size:11px}}
/* Saving must remain visible on mobile as well. */
.who-box .sync{display:inline-flex}
@media(max-width:600px){.who-box{font-size:11px;gap:6px}.who-box .sync{font-size:10px;padding:1px 5px}.who-name{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* Individual student accounts, objective grading and visual portfolios. */
.cp-fields{display:grid;grid-template-columns:1.1fr 1fr .8fr .6fr;gap:12px;margin:16px 0}.cp-fields label,.cp-portfolio form label,.cp-delete label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}.cp-fields input,.cp-fields select,.cp-portfolio input,.cp-portfolio textarea,.cp-delete input,.cp-auto-tools select{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:10px;background:var(--surface);color:var(--ink);min-height:44px}.cp-account-list{display:grid;gap:16px;margin-top:16px}.cp-account{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:22px}.cp-account>header{display:flex;justify-content:space-between;gap:12px;align-items:center}.cp-delete{margin-top:18px;border-top:1px solid var(--line);padding-top:12px;font-size:12px}.cp-delete summary{color:var(--alert);cursor:pointer}.cp-delete p{margin:12px 0;color:var(--muted)}.cp-delete input{max-width:260px;margin-bottom:10px}.cp-register{margin:20px 0}.cp-register summary{cursor:pointer}.cp-register form{padding-top:12px}.cp-register form>p{margin-bottom:16px}.cp-auto-tools{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:20px 0}.cp-auto-tools label{display:flex;flex-direction:column;gap:8px;font-size:12px}.cp-profile-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0}.cp-profile-kpis>div{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px}.cp-profile-kpis>div>strong{font:600 32px var(--f-mono);color:var(--accent)}.cp-profile-kpis>div>strong small{font-size:12px;margin-left:3px}.cp-profile-kpis span>b{display:block;font-size:13px}.cp-profile-kpis span>small{display:block;font-size:11px;color:var(--muted);margin-top:6px}.cp-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start;margin:22px 0}.cp-radar{width:100%;max-height:260px;margin:12px auto}.cp-next-actions ul{list-style:none;display:grid;gap:10px;margin:18px 0 26px}.cp-next-actions li{border-left:3px solid var(--sel);padding:9px 12px;background:var(--paper);font-size:13px}.cp-course-evidence{margin:22px 0}.cp-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.cp-course-grid>div{border:1px solid var(--line);border-top:3px solid var(--course);border-radius:9px;padding:16px}.cp-course-grid b{font-size:13px;display:block}.cp-course-grid progress{display:block;width:100%;height:9px;margin:14px 0 8px;accent-color:var(--course)}.cp-course-grid span,.cp-course-grid small{display:block;font-size:11px;color:var(--muted)}.cp-timeline{list-style:none;margin-top:22px}.cp-timeline li{display:flex;gap:12px;border-left:1px solid var(--line);margin-left:5px;padding:0 0 24px 16px;position:relative}.cp-timeline-dot{position:absolute;left:-5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--accent)}.cp-timeline b{font-size:13px}.cp-timeline small,.cp-timeline p{display:block;font-size:11px;color:var(--muted);margin-top:5px}.cp-portfolio form{margin-top:20px}.cp-portfolio textarea{min-height:85px;resize:vertical}.cp-feedback-list article{border-left:3px solid var(--accent);padding:14px;margin-top:18px;background:var(--paper);border-radius:0 8px 8px 0}.cp-feedback-list article>b{font-size:11px;color:var(--muted)}.cp-feedback-list article p{font-size:13px;white-space:pre-wrap;margin-top:10px}.cp-requests{margin-bottom:24px}.cp-requests article{border-top:1px solid var(--line);padding:20px 0}.cp-requests fieldset{border:1px solid var(--line);padding:14px;margin:14px 0;display:flex;flex-wrap:wrap;gap:12px}.cp-requests legend{font-size:12px;color:var(--muted)}
@media(max-width:1100px){.cp-profile-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.cp-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.cp-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.cp-profile-grid{grid-template-columns:1fr}.cp-auto-tools{align-items:stretch;flex-direction:column}.cp-profile-kpis>div{padding:14px}.cp-profile-kpis>div>strong{font-size:28px}.cp-profile-kpis svg{max-width:72px}.cp-course-grid{grid-template-columns:1fr 1fr}.cp-account{padding:18px}}
@media(max-width:420px){.cp-profile-kpis{grid-template-columns:1fr}.cp-course-grid{grid-template-columns:1fr}.cp-fields{grid-template-columns:1fr}.cp-account>header{align-items:flex-start;flex-direction:column}}
@media print{.topbar,.ux-side,.cp-portfolio button,.cp-portfolio form{display:none!important}.cp-profile-grid{grid-template-columns:1fr 1fr}.cp-portfolio .panel{break-inside:avoid}.cp-course-grid{grid-template-columns:repeat(3,1fr)}}
.li-plan,.li-instructor{margin:24px 0;padding:24px}.li-plan>header,.li-instructor>header,.li-outcome>header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.li-plan h2,.li-instructor h2{font-size:1.2rem;margin:3px 0 12px}.li-evidence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.li-evidence>div{padding:18px;background:color-mix(in srgb,var(--teal,#14857c) 8%,transparent);border-radius:14px;display:grid;gap:5px}.li-evidence b{font-size:1.8rem;font-variant-numeric:tabular-nums}.li-evidence b small{font-size:.75rem;font-weight:500}.li-evidence span{font-size:.8rem}.li-actions{display:grid;gap:10px}.li-actions>a{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid var(--line,#d6e2df);border-radius:12px;text-decoration:none;color:inherit}.li-actions>a:hover{border-color:var(--teal,#14857c)}.li-actions>a>span:nth-child(2){flex:1}.li-actions small{display:block;margin-top:5px;line-height:1.5}.li-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#12776f;color:white;flex-shrink:0}.li-outcome{margin-top:22px;border-top:1px solid var(--line,#d6e2df);padding-top:18px}.li-tag{font-size:.75rem;background:color-mix(in srgb,var(--teal,#14857c) 10%,transparent);padding:6px 10px;border-radius:20px}.li-score{display:grid;grid-template-columns:80px 1fr 80px;gap:12px;align-items:center;margin:14px 0;font-size:.85rem}.li-score meter{width:100%;height:16px;accent-color:#14857c}.li-instructor td small{display:block;margin-top:5px}.scene-quality{position:absolute;left:14px;top:14px;z-index:6;display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:11px;background:rgba(22,35,38,.84);color:#fff;font-size:12px;box-shadow:0 2px 12px #0002}.scene-quality select{border:1px solid #819895;border-radius:6px;background:#243b3c;color:white;padding:4px;min-height:30px}.scene-quality-state{opacity:.8;font-size:11px}body[data-route="room"] .obs-stage .scene-quality,.obs-stage .scene-quality,#obsStage .scene-quality{top:68px}.scene-quality:focus-within{outline:2px solid #56d2c1;outline-offset:2px}@media(max-width:650px){.li-plan,.li-instructor{padding:17px}.li-evidence{gap:7px}.li-evidence>div{padding:12px 9px}.li-evidence b{font-size:1.4rem}.li-evidence span{font-size:.73rem}.li-score{grid-template-columns:65px 1fr 70px;gap:7px}.scene-quality-state{display:none}}
.scene-quality{top:80px;white-space:nowrap;width:max-content;max-width:calc(100% - 28px)}#obsStage .scene-quality,.obs-stage .scene-quality{top:80px}

.workflow-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:12px 0}.workflow-tools label{display:grid;gap:5px;font-size:12px;flex:1;min-width:125px}.workflow-tools input,.workflow-tools select{width:100%;min-height:40px}.grade td>small{display:block;font-size:11px;color:var(--muted)}.obs-side .workflow-tools{padding:0 14px}.grade tr[hidden]{display:none!important}

.home-help{margin-top:20px;border-top:1px solid var(--line,#d9e4e2);padding-top:15px;font-size:14px}.home-help summary,.home-reference>summary{cursor:pointer;font-weight:600}.home-help p{color:var(--muted,#61777c);font-size:13px}.home-help a{display:inline-block;margin:4px 24px 4px 0}.home-reference{margin:32px 0;padding:20px;border:1px solid var(--line,#d9e4e2);border-radius:14px}.home-reference>.grid2{margin-top:20px}

/* Spotlight controls remain reachable while the intro is dark. */
.hx{--fx:0px;--fy:0px;--fr:0px}
.hx-controls{position:relative;z-index:33;display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0}
.hx-replay{display:inline-flex;align-items:center;min-height:40px;padding:7px 14px;border:1px solid var(--hx-line);border-radius:99px;background:#0e1d23;color:#eaf5f3;font:inherit;font-size:13px;cursor:pointer}
.hx-replay:hover{border-color:var(--accent)}
@media(max-width:760px){.hx-foot{flex-wrap:wrap}.hx-controls{max-width:100%}}

.hx.night-run .hx-controls .hx-play{color:#eaf5f3;background:#0e1d23;border-color:#6d9398}
.hx.night-run .hx-replay{border-color:#6d9398}

.hx-autoplay{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 12px;border:1px solid #6d9398;border-radius:99px;background:#0e1d23;color:#eaf5f3;font-size:13px;cursor:pointer;white-space:nowrap}.hx-autoplay input{width:18px;height:18px;min-height:0;margin:0;accent-color:#85d6bf}.hx-controls{justify-content:flex-end}.hx-foot{flex-wrap:wrap}@media(max-width:560px){.hx-controls{justify-content:flex-start}}