*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0F1113;--panel:#16181B;--line:#262A2E;--ink:#E9ECEF;--ink2:#A8B0B6;--ink3:#767E85;--lime:#D4FF00;--no:#E5484D}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
 font-size:15px;line-height:1.7;-webkit-text-size-adjust:100%}
.wrap{max-width:880px;margin:0 auto;padding:20px 16px 64px}
header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);
 position:sticky;top:0;background:var(--bg);z-index:5}
header .brand{font-weight:800;letter-spacing:-.4px}
header .brand i{display:inline-flex;width:22px;height:22px;border-radius:6px;background:var(--lime);color:#0B0C0E;
 align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:900;margin-right:7px}
header nav{margin-left:auto;display:flex;gap:14px;font-size:13.5px}
header nav a{color:var(--ink2);text-decoration:none}
header nav a:hover,header nav a[aria-current]{color:var(--lime)}
h1{font-size:24px;font-weight:800;letter-spacing:-.6px;margin:22px 0 6px}
h2{font-size:17px;font-weight:800;margin:26px 0 10px}
p.sub{color:var(--ink2);font-size:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:12px}
label{display:block;font-size:13px;color:var(--ink2);margin:12px 0 6px;font-weight:700}
input{width:100%;padding:13px 14px;border-radius:9px;border:1.5px solid var(--line);background:transparent;
 color:inherit;font:inherit}
input:focus{outline:none;border-color:var(--lime)}
button{width:100%;padding:13px;border:0;border-radius:9px;background:var(--lime);color:#0B0C0E;
 font:inherit;font-weight:800;cursor:pointer;margin-top:16px}
button.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink2);font-weight:700}
.err{color:var(--no);font-size:13.5px;margin-top:10px;min-height:19px}
.list{display:grid;gap:10px;margin-top:14px}
.item{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
 text-decoration:none;color:inherit}
.item:hover{border-color:var(--lime)}
.item b{display:block;font-size:15.5px;font-weight:800}
.item .meta{color:var(--ink3);font-size:12.5px;margin-top:4px}
.tag{display:inline-block;background:#1C2024;border-radius:5px;padding:2px 7px;font-size:11.5px;color:var(--ink2);margin-right:5px}
.player{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000;margin-top:14px}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
th,td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--ink3);font-size:12.5px;font-weight:700}
footer{border-top:1px solid var(--line);margin-top:44px;padding:20px 16px 40px;color:var(--ink3);font-size:12px;line-height:1.9}
footer b{color:var(--ink2)}
footer a{color:var(--ink2)}
.note{color:var(--ink3);font-size:13px;margin-top:10px}

/* 내 강의 — 단원 → 마디 → 강의 (2026-08-19 개념스캐닝 수학Ⅰ 32강) */
.unit{margin:26px 0 0}
.unit h2{font-size:17px;font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:9px;
 padding-bottom:9px;border-bottom:2px solid #1f4fd8}
.unit h2 .cnt{font-size:12px;font-weight:700;color:#5a6b8c;background:#eef2fb;border-radius:20px;padding:2px 10px}
.madi{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid #eceff5;flex-wrap:wrap}
.madi .mt{flex:1;min-width:190px;font-weight:600;font-size:15px}
.madi .vids{display:flex;gap:7px;flex-wrap:wrap}
.vid{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;text-decoration:none;
 color:#1f4fd8;background:#eef2fb;border:1px solid #d6e0f5;border-radius:8px;padding:6px 13px}
.vid:hover{background:#e2eafc}
.vid.done{color:#0a7d5a;background:#e9f6f1;border-color:#c8e8dc}
.vid i{font-style:normal;font-size:11px;font-weight:600;opacity:.75}
@media (max-width:520px){ .madi{align-items:flex-start;flex-direction:column;gap:7px} }