/* 강의 자료 — 읽는 화면이므로 공개 사이트보다 본문 폭·행간을 넉넉히 잡는다. */

.lec { max-width:760px; }
.lec-wide { max-width:940px; margin:0 auto; padding:0 28px; }

.lec-head { padding:28px 0 0; }
.lec-head .kicker { font-size:11px; letter-spacing:.09em; text-transform:uppercase;
                    color:var(--mut); }
/* 상단 breadcrumb 링크는 터치 타깃을 확보한다 */
.lec-head .kicker a { display:inline-block; padding:11px 0; margin:-11px 0; }
.lec-head h1 { font-size:24px; margin:5px 0 6px; }
.lec-head .en { color:var(--mut); font-size:13.5px; }

/* 진도 막대 */
.prog { display:flex; align-items:center; gap:11px; margin:18px 0 6px; }
.prog .bar { flex:1; height:6px; border-radius:3px; background:var(--rule); overflow:hidden; }
.prog .bar i { display:block; height:100%; background:var(--accent); width:0;
               transition:width .25s ease; }
.prog .n { font-size:12.5px; color:var(--mut); font-variant-numeric:tabular-nums;
           white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .prog .bar i { transition:none; } }

/* 목차 */
.chs { list-style:none; margin:22px 0 0; padding:0; }
.ch { border-top:1px solid var(--rule); padding:16px 0; }
.ch > h2 { font-size:15px; margin:0 0 3px; }
.ch > .en { font-size:12.5px; color:var(--mut); margin:0 0 10px; }
.secs { list-style:none; margin:0; padding:0; display:grid;
        grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:2px 16px; }
.secs a { display:flex; gap:9px; align-items:baseline; padding:6px 8px; margin-left:-8px;
          border-radius:5px; color:inherit; text-decoration:none; font-size:13.5px; }
.secs a:hover { background:var(--panel); }
.secs .no { color:var(--mut); font-variant-numeric:tabular-nums; flex:0 0 34px;
            font-size:12.5px; }
.secs .done .no::after { content:"✓"; color:var(--accent); margin-left:4px; }
.secs .done { color:var(--mut); }
.secs .pb { font-size:10.5px; color:var(--accent); border:1px solid var(--accent-soft);
            background:var(--accent-soft); border-radius:3px; padding:0 4px; margin-left:auto; }

/* 본문 */
.lec-body { font-size:16px; line-height:1.75; padding-top:6px; }
.lec-body h2 { font-size:19px; margin:34px 0 10px; letter-spacing:-.015em; }
.lec-body h3 { font-size:16px; margin:24px 0 7px; }
.lec-body p { margin:0 0 14px; }
.lec-body ul, .lec-body ol { margin:0 0 14px; padding-left:22px; }
.lec-body li { margin-bottom:5px; }
.lec-body strong { font-weight:660; }
.lec-body code { font-family:var(--mono); font-size:.88em; background:var(--panel);
                 padding:1px 5px; border-radius:4px; }
.lec-body hr { border:0; border-top:1px solid var(--rule); margin:28px 0; }

/* 강조 상자 4종 */
.box { border:1px solid var(--rule); border-left:3px solid var(--mut); border-radius:6px;
       padding:13px 16px; margin:18px 0; background:var(--panel); font-size:15px; }
.box-label { font-size:11px; letter-spacing:.07em; text-transform:uppercase;
             color:var(--mut); font-weight:650; margin-bottom:7px; }
.box p:last-child, .box ul:last-child { margin-bottom:0; }
.box-why     { border-left-color:var(--accent); }
.box-why     .box-label { color:var(--accent); }
.box-prereq  { border-left-color:#7c8896; }
.box-formula { border-left-color:#4a6fa5; }
.box-formula .box-label { color:#4a6fa5; }
.box-pitfall { border-left-color:var(--flag); }
.box-pitfall .box-label { color:var(--flag); }
@media (prefers-color-scheme:dark){
  .box-formula { border-left-color:#7ba3d8; }
  .box-formula .box-label { color:#7ba3d8; }
}

/* 문제·풀이 */
.prob-q { border:1px solid var(--rule); border-radius:6px; padding:13px 16px; margin:18px 0 0;
          background:var(--paper); }
.prob-q p:last-child { margin-bottom:0; }
details.sol { border:1px solid var(--rule); border-top:0; border-radius:0 0 6px 6px;
              margin:0 0 20px; background:var(--panel); }
details.sol > summary { cursor:pointer; padding:9px 16px; font-size:13.5px; font-weight:600;
                        color:var(--accent); list-style:none; }
details.sol > summary::-webkit-details-marker { display:none; }
details.sol > summary::before { content:"▸ "; }
details.sol[open] > summary::before { content:"▾ "; }
details.sol .sol-body { padding:2px 16px 14px; font-size:15px; }
details.sol .sol-body p:last-child { margin-bottom:0; }

/* 표 — 가로 스크롤은 자기 컨테이너 안에서만 */
.tbl-wrap { overflow-x:auto; margin:18px 0; }
.tbl-wrap table { border-collapse:collapse; font-size:14px; min-width:100%; }
.tbl-wrap th, .tbl-wrap td { border:1px solid var(--rule); padding:7px 11px; text-align:left; }
.tbl-wrap th { background:var(--panel); font-weight:640; }

/* 수식 — KaTeX 가 렌더하기 전에는 원문이 잠깐 보인다. 폭 넘침만 막아 둔다. */
.math-b { overflow-x:auto; overflow-y:hidden; margin:16px 0; text-align:center; }
.math-i { white-space:nowrap; }
.katex-display { margin:0; }

/* 하단 이동 */
.lec-nav { display:flex; gap:12px; justify-content:space-between; margin:36px 0 0;
           padding-top:18px; border-top:1px solid var(--rule); font-size:13.5px; }
.lec-nav a { color:inherit; text-decoration:none; max-width:46%; }
.lec-nav a:hover { color:var(--accent); }
.lec-nav .lbl { display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
                color:var(--mut); margin-bottom:2px; }
.lec-nav .r { text-align:right; margin-left:auto; }

.done-btn { display:flex; align-items:center; gap:10px; margin-top:26px; }
.done-btn .hint { font-size:12.5px; color:var(--mut); }

@media (max-width:640px){
  .lec-wide { padding:0 18px; }
  .lec-body { font-size:15.5px; }
  .secs { grid-template-columns:1fr; }
}

@media (max-width:640px){
  /* 완료 버튼은 폭을 채우고, 안내 문구는 아래로 */
  .done-btn{ flex-direction:column; align-items:stretch; gap:8px; }
  .done-btn .hint{ text-align:center; }
  /* 디스플레이 수식이 길면 컨테이너 안에서만 가로 스크롤 */
  .math-b{ -webkit-overflow-scrolling:touch; }
}