/* course_html — 화면용 강의 사이트 스타일 */
:root{
  --accent:#1f6feb; --accent-soft:#e7f0ff; --ink:#1c1c1e; --muted:#5b6b7b;
  --line:#d9dde3; --code-bg:#f6f8fa; --sidebar:#0f1b2d; --sidebar-acc:#4493f8;
  --mono:"D2Coding","Nanum Gothic Coding","NanumGothicCoding","Sarasa Mono K","Noto Sans Mono CJK KR","SFMono-Regular",Consolas,"Courier New",monospace;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:#eef2f6;
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR",-apple-system,sans-serif;
  color:var(--ink); line-height:1.75; font-size:16px;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* 상단바 */
.topbar{
  position:sticky; top:0; z-index:10; background:var(--sidebar); color:#fff;
  padding:12px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.topbar .home{ color:#fff; font-weight:800; }
.topbar .ch{ color:var(--sidebar-acc); font-weight:600; }
.topbar .meta{ margin-left:auto; color:#9fb3c8; font-size:13px; }
.topbar .nav-btns{ display:flex; gap:6px; }
.topbar .brand{ color:#fff; font-weight:700; font-size:14px; letter-spacing:.2px; white-space:nowrap; }
.topbar .btn{ padding:5px 13px; border:1px solid #33475f; border-radius:8px; color:#dbe7f5;
              font-size:13px; font-weight:600; white-space:nowrap; }
.topbar .btn:hover{ border-color:var(--sidebar-acc); color:#fff; text-decoration:none; }
.topbar .btn.disabled{ opacity:.32; pointer-events:none; }

/* 본문 래퍼 */
.wrap{ max-width:980px; margin:0 auto; padding:0 0 70px; background:#fff;
       box-shadow:0 0 30px rgba(0,0,0,.06); min-height:100vh; }
.content{ padding:26px 44px 10px; }

/* 절 이동(이전/다음) */
.pager{ display:flex; gap:10px; padding:18px 44px 30px; }
.pager > a, .pager > span{
  flex:1; border:1px solid var(--line); border-radius:10px; padding:12px 16px;
  background:#fbfdff; color:#234; font-size:14px;
}
.pager a:hover{ border-color:var(--accent); text-decoration:none;
                box-shadow:0 4px 14px rgba(31,111,235,.12); }
.pager .nxt{ text-align:right; }
.pager .lbl{ display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
.pager .off{ opacity:.4; }

/* 이 장의 다른 절(칩 네비) */
.chip-nav{ background:#f3f7fb; border:1px solid #dce6f0; border-radius:10px;
           padding:12px 16px; margin:0 0 22px; }
.chip-nav b{ display:block; color:#1f6feb; font-size:13px; margin-bottom:6px; }
.chip-nav a{ display:inline-block; margin:3px 8px 3px 0; padding:4px 10px;
             background:#fff; border:1px solid #cfe0f0; border-radius:14px;
             font-size:13px; color:#234; }
.chip-nav a:hover{ background:var(--sidebar-acc); color:#fff; text-decoration:none; }
.chip-nav a.cur{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; }

/* 마크다운 본문 요소 */
.md h1{ font-size:27px; color:var(--accent); border-bottom:3px solid var(--accent);
        padding-bottom:8px; margin:6px 0 18px; }
.md h2{ font-size:21px; margin:1.5em 0 .6em; padding:6px 12px;
        border-left:5px solid var(--accent); background:var(--accent-soft); }
.md h3{ font-size:17.5px; color:#20303f; margin:1.3em 0 .5em; }
.md h4{ font-size:15.5px; color:var(--muted); }
.md .chapter-name{ color:var(--muted); font-size:14px; font-weight:600; margin:0 0 2px; }
.md p,.md li{ font-size:16px; }
.md pre{ position:relative; background:var(--code-bg); border:1px solid var(--line); border-radius:8px;
         padding:14px 16px; font-size:13.5px; line-height:1.6; overflow-x:auto; }
.md code{ font-family:var(--mono); }
.md :not(pre)>code{ background:var(--code-bg); border:1px solid var(--line);
        border-radius:4px; padding:1px 6px; font-size:13.5px; color:#b3261e; }
.md table{ border-collapse:collapse; width:100%; margin:14px 0; font-size:14.5px; }
.md th,.md td{ border:1px solid var(--line); padding:7px 10px; text-align:left; vertical-align:top; }
.md th{ background:var(--accent-soft); }
.md tr:nth-child(even) td{ background:#fafbfc; }
.md .table-scroll{ overflow-x:auto; }
.md blockquote{ margin:14px 0; padding:10px 16px; border-left:4px solid #f0b400;
        background:#fff8e1; color:#5c4400; border-radius:0 8px 8px 0; }
.md hr{ border:none; border-top:1px dashed var(--line); margin:22px 0; }
.md ul,.md ol{ padding-left:24px; }
.md img{ max-width:100%; height:auto; display:block; margin:18px auto; }
.md details{ margin:10px 0 18px; border:1px solid #dce6f0; border-radius:8px;
             background:#f8fbff; padding:8px 16px; }
.md details summary{ cursor:pointer; font-weight:700; color:var(--accent); }
.md details[open] summary{ margin-bottom:6px; }

/* 터미널 프롬프트($) — 보이기만 하고 선택·복사되지 않는다 */
.md pre .prompt{ color:#8a97a6; user-select:none; -webkit-user-select:none; }

/* 코드 복사 버튼 */
.copy-btn{ position:absolute; top:8px; right:8px; border:1px solid var(--line);
           background:#fff; color:var(--muted); border-radius:6px; padding:2px 9px;
           font-size:12px; font-family:inherit; cursor:pointer; opacity:0; transition:opacity .15s; }
.md pre:hover .copy-btn, .copy-btn:focus-visible{ opacity:1; }
.copy-btn:hover{ color:var(--accent); border-color:var(--accent); }

/* ASCII 도식 — 박스/화살표 문자로 그린 도식을 도식 패널로 표시 */
.ascii-diagram{ margin:20px 0; padding:18px 20px; border:1px solid #cdd9e5;
  border-radius:10px; background:#f7fbff; overflow-x:auto; text-align:center;
  box-shadow:inset 0 0 0 1px #fff, 0 1px 3px rgba(15,27,45,.05); }
.md .ascii-diagram pre{ display:inline-block; text-align:left; margin:0; padding:0;
  background:none; border:none; white-space:pre; color:#23425f;
  font-family:var(--mono); font-size:13px; line-height:1.5; }

/* index */
.cover{ padding:34px 2px 28px; border-bottom:3px solid var(--sidebar); }
.cover h1{ font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1.25; margin:0;
           color:var(--sidebar); border:none; padding:0; }
.cover .sub{ color:var(--muted); font-size:17px; margin-top:14px; }
.cover .meta{ color:var(--muted); font-size:14px; margin-top:16px; }
.part{ margin:34px 0 4px; padding:0 2px; }
.part .no{ color:var(--accent); font-weight:800; font-size:13px; letter-spacing:.04em; }
.part .t{ font-size:20px; font-weight:800; }
.lesson{ border:1px solid #dce6f0; border-radius:12px; margin:12px 0; overflow:hidden; }
.lesson-head{ background:#f3f7fb; padding:12px 18px; border-bottom:1px solid #dce6f0; }
.lesson-head .no{ color:var(--accent); font-weight:800; font-size:13px; }
.lesson-head .t{ font-size:18px; font-weight:700; }
.lesson-head .t a{ color:inherit; }
.sec-list{ list-style:none; margin:0; padding:8px 10px; display:grid;
           grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:4px; }
.sec-list a{ display:block; padding:8px 12px; border-radius:8px; color:#1c2733; font-size:14.5px; }
.sec-list a:hover{ background:var(--accent-soft); text-decoration:none; }
.sec-list a .sno{ color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; margin-right:6px; }

/* 푸터 */
.foot{ margin:26px 44px 0; padding:26px 0 8px; border-top:1.5px solid var(--line); text-align:center;
       color:var(--muted); font-size:13px; line-height:1.7; }
.foot b{ display:block; font-weight:800; color:var(--sidebar); letter-spacing:.04em; }
.foot a{ color:var(--muted); }
/* 왼쪽 끝 저자 표기 — 모든 페이지, 작고 은은하게 */
.byline{ position:fixed; left:9px; bottom:26px; writing-mode:vertical-rl; transform:rotate(180deg);
         font-size:11px; letter-spacing:.1em; color:#98a1ac; white-space:nowrap; z-index:4; pointer-events:none; }
.byline b{ font-weight:700; color:#7c8592; }

/* 도어락 잠금 화면 (index 전용) */
#doorlock{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
           background:radial-gradient(1200px 600px at 50% 20%,#1c2a44,#0b1220 70%); }
#doorlock.open{ display:none; }
.lock-body{ width:300px; padding:26px 24px 28px; border-radius:28px; text-align:center;
  background:linear-gradient(180deg,#2b2f36,#14171c);
  box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08); }
.lock-brand{ font-size:12px; letter-spacing:.3em; color:#8e9aab; margin-bottom:10px; }
.lock-icon{ margin:2px 0 10px; color:#8e9aab; line-height:1; }
.lock-icon svg{ width:36px; height:36px; }
.lock-screen{ margin-bottom:16px; height:54px; border-radius:12px; background:#0a0f14; border:1px solid #2a3340;
  box-shadow:inset 0 0 18px rgba(0,200,255,.15); display:flex; align-items:center; justify-content:center; gap:14px; }
.lock-screen .dot{ width:14px; height:14px; border-radius:50%; background:#1d2a36; box-shadow:inset 0 0 4px #000; }
.lock-screen .dot.on{ background:#5be3ff; box-shadow:0 0 10px #5be3ff; }
.lock-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; justify-items:center; }
.lock-pad button{ width:58px; height:58px; border-radius:50%; border:1px solid #46505c; cursor:pointer;
  font-size:20px; font-weight:700; font-family:inherit;
  background:radial-gradient(circle at 35% 30%,#4a525d,#20252c); color:#eaf2ff;
  box-shadow:0 6px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12); }
.lock-pad button:active{ transform:translateY(2px); box-shadow:0 2px 6px rgba(0,0,0,.5); }
.lock-pad button:focus-visible{ outline:2px solid #5be3ff; outline-offset:2px; }
.lock-pad button.fn{ color:#5be3ff; }
.lock-body.shake{ animation:lockshake .35s; }
@keyframes lockshake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.lock-body.ok .lock-screen{ box-shadow:inset 0 0 18px rgba(108,255,154,.35); }
.lock-body.ok .lock-screen .dot.on{ background:#6cff9a; box-shadow:0 0 10px #6cff9a; }
body.locked{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .lock-body.shake{ animation:none; } }

@media (max-width:640px){
  .content{ padding:20px 16px; } .pager{ padding:14px 16px; flex-direction:column; }
  .topbar{ padding:10px 16px; gap:8px; } .topbar .meta, .topbar .ch{ display:none; }
  .topbar .nav-btns{ margin-left:auto; }
  .topbar .meta + .brand{ margin-left:auto; } .topbar .brand{ font-size:13px; }
  .sec-list{ grid-template-columns:1fr; } .cover h1{ font-size:30px; }
  .foot{ margin:20px 16px 0; } .byline{ display:none; }
}
@media print{ .topbar,.pager,.chip-nav,.copy-btn,.byline,#doorlock{ display:none; } }