/* 학습 초코랩 (learn.html · class.html) — 글씨 기준은 _shared/type.css (본문 17 · 버튼 16 · 안내 15 · 작은 글 13) */
body { background: #F6F7FB; margin: 0; }
.top .wrap { display: flex; align-items: center; gap: 14px; }
.spacer { flex: 1; }
.lk-nav { display: flex; gap: 4px; }
.lk-nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: #555; font-size: 16px; font-weight: 600; }
.lk-nav a[aria-current] { background: #241F1A; color: #fff; }
.lk-main { padding-top: 20px; padding-bottom: 60px; max-width: 860px; display: grid; gap: 18px; }
.lk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lk-head h1 { margin: 0 auto 0 0; font-size: var(--fs-title, 30px); }
.lk-credit { font-size: 15px; color: #7A4A12; font-weight: 700; }
.lk-card { padding: 20px 22px; }
.lk-card.warn { background: #FFF7E6; border-color: #F3D9A4; }
.lk-card h2, .lk-sec h2 { font-size: var(--fs-h2, 22px); margin: 0 0 8px; }
.lk-sec { display: grid; gap: 10px; }
.lk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lk-col { display: grid; gap: 8px; }
.lk-asg { padding: 14px 16px; display: grid; gap: 8px; }
.lk-asg small { display: block; color: #777; font-size: 15px; }
.lk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lk-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: #fff; border: 1px solid #ECECF2; border-radius: 14px; font-size: 16px; cursor: default; }
.lk-list li[data-sub] { cursor: pointer; }
.lk-list li span { flex: 1; min-width: 140px; }
.lk-list em { font-style: normal; color: #666; font-size: 15px; }
.lk-sw { font-size: 15px; display: inline-flex; gap: 6px; align-items: center; }
.tag.graded { background: #FFF1C9; color: #8A6A12; }
.tag.returned { background: #DDF5EC; color: #1B9773; }
.tag.failed { background: #FDE2DD; color: #B4432E; }
.tag.reading, .tag.uploaded { background: #E6F0FF; color: #2F6FE0; }
.lk-res pre { white-space: pre-wrap; background: #FAFAFC; border-radius: 12px; padding: 12px; font-size: 15px; max-height: 40vh; overflow: auto; }
.lk-score b { font-size: 34px; }
.lk-q { display: block; padding: 8px 0; border-bottom: 1px dashed #eee; font-size: 16px; }
.lk-exams { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lk-modal { border: 0; border-radius: 20px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: 86vh; }
.lk-modal::backdrop { background: rgba(20, 20, 30, .45); }
.lk-mh { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; font-size: 19px; border-bottom: 1px solid #eee; }
.lk-mh .x { border: 0; background: none; font-size: 26px; cursor: pointer; }
.lk-mb { padding: 16px 18px; overflow: auto; max-height: 62vh; }
.lk-ma { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; flex-wrap: wrap; }
.lk-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; background: #241F1A; color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 16px; max-width: calc(100vw - 32px); }
.lk-toast.err { background: #B4432E; } .lk-toast.warn { background: #8A6A12; }
.lk-busy { position: fixed; inset: 0; background: rgba(255,255,255,.8); display: grid; place-items: center; z-index: 90; text-align: center; font-size: 17px; }
.lk-busy .spin { display: inline-block; width: 36px; height: 36px; border: 4px solid #ddd; border-top-color: #241F1A; border-radius: 50%; animation: lkspin 1s linear infinite; }
@keyframes lkspin { to { transform: rotate(360deg); } }
.hint { color: #777; font-size: 15px; } .err { color: #B4432E; }
@media (max-width: 560px) { .lk-nav a { padding: 6px 8px; font-size: 15px; } .brand b { font-size: 19px; } }
.lk-sec > .pill { justify-self: start; }