/* 강의안 모바일 가독성 레이어 (2026-09-27)
   강의안 299편은 편마다 <style> 을 따로 갖지만 같은 템플릿 계열이다(.sheet/.masthead/.sec-title/.tbl-wrap).
   build_all 이 public/ 정적 사본에만 이 파일을 주입한다. 원본 강의 HTML 은 바꾸지 않는다.
   선택자 앞의 `html` 은 편별 <style> 보다 한 단계 높은 특이도를 주려는 것이다. */

@media (max-width: 680px) {
  html body { font-size: 16.5px; line-height: 1.78; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html .body { padding: 22px 18px 8px; }
  html .masthead { padding: 22px 18px 24px; }
  html .mh-title { font-size: 27px; line-height: 1.2; text-wrap: balance; }
  html .mh-sub { font-size: 15.5px; }

  /* 제목 옆 영어 부제는 좁은 화면에서 한국어 제목 밑으로 어색하게 꺾였다. 한 줄 아래로 내린다. */
  html .sec-title { font-size: 19px; line-height: 1.35; text-wrap: balance; }
  html .sec-title .en { display: block; margin: 3px 0 0; font-size: 11px; }

  /* 본문 목록·두 단 구성의 작은 글씨(13.5~14.5px)를 본문 크기에 맞춘다 */
  html ul.clean > li, html ol.num > li { font-size: 15.5px; line-height: 1.7; }
  html .split ul { font-size: 15px; line-height: 1.65; }
  html .split .col { padding: 14px 14px; }
  html .def, html .lead { font-size: 16px; }
  html h3 { font-size: 16.5px; }
  html .toc li { font-size: 15px; padding: 7px 0; }
  html figure .cap { font-size: 12px; line-height: 1.55; padding: 9px 12px; }

  /* 표 — 카드로 펴지 못하는 넓은 표는 가로 스크롤로 두고, JS 가 표 아래에 안내 한 줄을 붙인다 */
  html .tbl-wrap { position: relative; -webkit-overflow-scrolling: touch; }
  html .tbl-hint { display: block; font-size: 12.5px; color: var(--muted, #5C6B78); margin: -8px 0 16px; }

  /* 표 — 3열 이하·병합 셀 없는 표는 lecture-mobile.js 가 .stack 을 붙여 행을 세로 카드로 편다 */
  html .tbl-wrap.stacked { overflow: visible; border: 0; }
  html table.stack { min-width: 0 !important; font-size: 15px; border: 0; }
  html table.stack thead { display: none; }
  html table.stack, html table.stack tbody, html table.stack tr, html table.stack td { display: block; width: auto !important; }
  html table.stack tr {
    border: 1px solid var(--line-2, #CBD5DD); border-radius: 6px; margin: 0 0 10px;
    padding: 10px 14px 8px; background: var(--paper, #fff);
  }
  html table.stack td { border: 0 !important; padding: 3px 0 !important; text-align: left !important;
    white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere; }
  html table.stack td:first-child { font-weight: 700; font-size: 15.5px; color: var(--ink, #16202B); padding-bottom: 6px !important; }
  html table.stack td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600;
    letter-spacing: .02em; color: var(--muted, #5C6B78); margin-bottom: 1px;
  }

  /* 도해 — 눌러서 크게 보기 */
  html figure.zoomable { cursor: zoom-in; position: relative; }
  html figure.zoomable .zoom-tag {
    display: block;
    position: absolute; right: 8px; bottom: 8px; font: 600 11.5px/1 var(--sans, sans-serif);
    color: #F2F7FA; background: rgba(22, 32, 43, .78); padding: 7px 10px; border-radius: 99px;
    pointer-events: none;
  }

  /* 도해 슬라이드(.figslide)의 SVG 는 가로 스크롤용으로 min-width 720px 이었다. 이제 눌러서 크게 볼 수 있으니 폭에 맞춘다. */
  html .fs-fig > svg, html .figslide .fs-cols .fs-fig > svg { min-width: 0 !important; width: 100% !important; }

  /* 떠 있던 「← 강의록」 버튼이 본문 첫 줄을 가렸다. 화면 맨 위 얇은 막대로 바꾼다. */
  html body > a[href="/lectures.html"][style*="position:fixed"] { display: none !important; }
  html .masthead { padding-top: 22px !important; }
}

/* 상단 막대·표 안내·확대 보기는 JS 가 만든다. 모바일에서만 보인다. */
/* 상단 막대는 2026-10-04 부터 모든 폭에서 보인다(아래 「강의 화면을 사이트와 같은 제품으로」) */
.tbl-hint, figure .zoom-tag { display: none; }
@media (max-width: 680px) {
  .lm-bar {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 9000;
    height: 48px; padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    background: rgba(22, 32, 43, .96); color: #EAF1F5;
    font: 600 14px/1 Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  }
  .lm-bar a, .lm-bar button {
    all: unset; cursor: pointer; display: inline-flex; align-items: center; height: 44px; padding: 0 10px;
    border-radius: 8px; color: #EAF1F5; white-space: nowrap;
  }
  .lm-bar a:active, .lm-bar button:active { background: rgba(255, 255, 255, .1); }
  .lm-bar .lm-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 500; font-size: 13px; color: #B7CDD9; opacity: 0; transition: opacity .2s; }
  .lm-bar.scrolled .lm-t { opacity: 1; }
  .lm-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #E8590C; }
}

.lm-zoom {
  position: fixed; inset: 0; z-index: 10000; background: #0A1016;
  display: flex; flex-direction: column;
}
.lm-zoom[hidden] { display: none; }
.lm-zoom .lz-top {
  display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  color: #D5E0E8; font: 500 13px/1.4 Pretendard, -apple-system, sans-serif;
}
.lm-zoom .lz-cap { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.lm-zoom button {
  all: unset; cursor: pointer; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 22px;
  background: #1F2E3A; color: #F2F7FA; font: 600 14px/44px Pretendard, -apple-system, sans-serif; text-align: center;
}
.lm-zoom .lz-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; }
.lm-zoom .lz-in { flex: none; margin: auto; background: #fff; padding: 10px; box-sizing: border-box; }
.lm-zoom .lz-in img, .lm-zoom .lz-in svg { display: block; width: 100% !important; min-width: 0 !important; height: auto; max-width: none; }
.lm-zoom .lz-hint { text-align: center; color: #7E93A6; font: 12px/1.4 Pretendard, sans-serif;
  padding: 8px 12px max(10px, env(safe-area-inset-bottom)); }

/* ── 전 화면 가독성 (2026-10-04 UX 평가) ─────────────────────────────────────
   강의 300편 전수 측정에서 기준(4.5:1) 미달 글자와 11px 안팎 한글 라벨이 편마다 같은 규칙에서 나왔다.
   원본 강의 HTML 은 바꾸지 않고 여기서 덮는다(주석 맨 위의 `html` 특이도 규칙 그대로). */

/* 도판 폭 — 편마다 <style> 에 두던 규칙이 EW-054 에만 없어 1500px 그림이 칸 밖으로 잘렸다 */
html img.fig-real { max-width: 100%; height: auto; }

/* 한글이 없는 고정폭 글꼴 다음에 본문 글꼴 — 라벨의 한글이 OS 대체 글꼴로 그려지던 것 */
html:root { --mono: 'IBM Plex Mono', 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', ui-monospace, monospace; }

/* 대비 — 주황(#E8590C) 글자·바탕은 3.3~3.6:1 이었다. 이미 있는 짙은 주황(--safety-deep)으로 */
html .toc li .n { color: var(--safety-deep, #C2410C); }
html .badge.hot, html .score .ic, html .sec-num.hot { background: var(--safety-deep, #C2410C); border-color: var(--safety-deep, #C2410C); }
html .ft-note { color: var(--muted, #5C6670); }
html .figslide .fs-ar, html .figslide .fs-n, html td.ar, html .flowfig .ff-ar,
html .figslide .fs-map td.ar, html .figslide .fs-map th.ar { color: #5C6B78; }
html .mh-sub .kw { color: #A8C5F9; }            /* 어두운 머리 영역 위의 강조어(2.3:1 이었다) */
html td .tag, html li .tag { color: var(--safety-deep, #194292); background: #E5F1FF; }

/* 한글 라벨은 본문 글꼴로 — 고정폭 글꼴의 넓은 띄어쓰기 때문에 「[그림 1]  화재손상의  3대」처럼 벌어졌다.
   숫자·영문만 쓰는 자리(목차 번호·절 번호·영문 부제)는 고정폭 그대로 둔다. */
html figure .cap, html .def .t, html .callout .co-h, html .kwbox .lbl, html .ft-h, html .badge, html .chip,
html .mh-kicker, html .qlinks .qsess, html td .tag, html li .tag { font-family: var(--sans, 'Pretendard Variable', Pretendard, sans-serif); }

/* 작은 한글 라벨 → 12px 이상, 한글에는 넓은 자간·대문자 변환이 의미가 없다 */
html .chip { font-size: 12.5px; }
html .badge { font-size: 12px; letter-spacing: .01em; }
html .callout .co-h { font-size: 12.5px; letter-spacing: .02em; }
html figure .cap { font-size: 12.5px; letter-spacing: 0; }
html .def .t { font-size: 12px; letter-spacing: .02em; }
html .mh-kicker { font-size: 12px; letter-spacing: .06em; }
html .kwbox .lbl { font-size: 12px; letter-spacing: .02em; }
html .ft-h { font-size: 12px; letter-spacing: .04em; }
html .ft-note { font-size: 12.5px; }
html .qlinks .qsess { font-size: 12.5px; }
html .qlinks .qtier { font-size: 12px; }
html td .tag, html li .tag { font-size: 12px; }


/* ── 강의 화면을 사이트와 같은 제품으로 (2026-10-04 UX 평가 G) ─────────────────────────────
   강의만 청록·주황·베이지 배경이라 다른 제품처럼 보였다. 편마다 같은 변수 이름을 쓰므로 변수만 사이트 남색 체계로 바꾼다.
   (--safety 는 이름과 달리 강의의 「강조색」 자리다 — 강조어·목차 번호·정의 상자·칩) */
html:root {
  --steel: #162C55; --steel-2: #234077; --steel-line: #2B4C8A;
  --safety: #3057A3; --safety-deep: #194292; --safety-soft: #F1F7FF;
  --paper-2: #F7F9FC; --paper-3: #F2F5F8; --insight-bg: #EDF4FF;
  --line: #DDE0E5; --line-2: #CDD1D9; --muted: #5D646F;
}
html .mh-title .accent { color: #A8C5F9; }       /* 남색 머리 위의 강조어 — 강조색 그대로면 묻힌다 */
html .mh-kicker { color: #A6B8D8; }
html .badge { border-color: #3A5A99; color: #DCE6F7; }
html .filmcta { background: #234077; border-color: #3A5A99; }
html .score { border-color: #C9D8F3; }

/* 한쪽 굵은 테두리(정의·통찰·채점·팁 상자) → 온 테두리 + 옅은 바탕 */
html .def { border: 1px solid #C9D8F3; border-radius: 8px; }
html .callout, html .insight, html .score, html .tip { border-left-width: 1px; border-radius: 10px; }

/* 상단 막대를 넓은 화면에도 — 「← 강의록」 떠 있는 버튼 대신 제목·목차·다음 강의가 있는 얇은 막대 */
html body > a[href="/lectures.html"][style*="position:fixed"] { display: none !important; }
.lm-bar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 9000;
  height: 48px; padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  background: rgba(22, 44, 85, .97); color: #EAF1F5; font: 600 14px/1 Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; }
.lm-bar a, .lm-bar button { all: unset; cursor: pointer; display: inline-flex; align-items: center; height: 44px; padding: 0 10px;
  border-radius: 8px; color: #EAF1F5; white-space: nowrap; }
.lm-bar a:hover, .lm-bar button:hover, .lm-bar a:focus-visible, .lm-bar button:focus-visible { background: rgba(255, 255, 255, .1); }
.lm-bar .lm-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 13px;
  color: #C9D6EC; opacity: 0; transition: opacity .2s; }
.lm-bar.scrolled .lm-t { opacity: 1; }
.lm-bar .lm-next { max-width: 34%; overflow: hidden; text-overflow: ellipsis; }
.lm-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #A8C5F9; }
@media (max-width: 680px) { .lm-bar .lm-next { display: none; } }

/* 다 읽음 알림 */
.pe-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9500; background: #162C55; color: #F2F6FC;
  font: 600 14px/1.45 Pretendard, -apple-system, sans-serif; padding: 12px 18px; border-radius: 12px; box-shadow: 0 8px 24px rgba(22, 44, 85, .25);
  max-width: calc(100% - 32px); }
.pe-toast a { color: #A8C5F9; margin-left: 8px; }


/* ── 보기 방식: 챕터(전부 펼침) / 목차(절 제목만, 눌러서 펼침) (2026-10-07) ─────────────────
   모든 강의가 <section> 안에 .sec-head(번호+제목) 를 갖는다. 「목차」 보기에서는 .sec-head 만 남기고
   나머지를 접는다. 절을 누르면 그 절만 펼친다. 고른 방식은 기기에 기억한다(lecture-mobile.js). */
html body.lv-toc .sheet section:not(.qlinks) > :not(.sec-head) { display: none; }
html body.lv-toc .sheet section:not(.qlinks).lv-open > :not(.sec-head) { display: revert; }
html body.lv-toc .sheet section:not(.qlinks) .sec-head { cursor: pointer; position: relative; user-select: none; }
html body.lv-toc .sheet section:not(.qlinks) .sec-head::after {
  content: "펼치기"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font: 600 12.5px/1 Pretendard, -apple-system, sans-serif; color: var(--muted, #5D646F); }
html body.lv-toc .sheet section:not(.qlinks).lv-open .sec-head::after { content: "접기"; }
html body.lv-toc .sheet section:not(.qlinks):not(.lv-open) { margin-bottom: 0; padding-bottom: 0; }
html body.lv-toc .sheet section:not(.qlinks):not(.lv-open) .sec-head { margin-bottom: 0; padding: 10px 0; border-bottom: 1px solid var(--line, #DDE0E5); }
.lm-bar .lm-view { gap: 0; padding: 0; }
.lm-bar .lm-view button { height: 32px; padding: 0 10px; font-size: 12.5px; border: 1px solid rgba(255,255,255,.28); }
.lm-bar .lm-view button:first-child { border-radius: 7px 0 0 7px; }
.lm-bar .lm-view button:last-child { border-radius: 0 7px 7px 0; border-left: 0; }
.lm-bar .lm-view button[aria-pressed="true"] { background: #F2F6FC; color: #162C55; }


/* ── 이 강의의 위치 (2026-10-07) — 학습 지도를 강의 옆에. 넓은 화면은 오른쪽 고정 패널, 좁으면 상단 막대 「지도」로 여는 시트 ── */
.lp { position: fixed; right: 16px; top: 64px; width: 300px; max-height: calc(100vh - 84px); overflow: auto; z-index: 8000;
  background: #fff; border: 1px solid #DDE0E5; border-radius: 14px; padding: 14px 16px 12px;
  font: 14px/1.55 Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; color: #16202B; box-shadow: 0 6px 24px rgba(22,44,85,.10); }
.lp[hidden] { display: none; }
.lp h3 { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; color: #5D646F; letter-spacing: .02em; display: block; }
.lp h3::before { content: none; }   /* 강의 쪽 h3::before(마름모)가 패널로 새지 않게 */
.lp .lp-where { font-size: 14.5px; font-weight: 800; color: #162C55; margin: 0 0 10px; }
.lp .lp-where small { font-weight: 600; color: #5D646F; margin-left: 6px; }
.lp .lp-nav { display: grid; gap: 6px; margin: 0 0 12px; }
.lp .lp-nav a, .lp .lp-rel a { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: baseline; padding: 7px 9px; border-radius: 9px;
  border: 1px solid #E5E8EE; color: #16202B; text-decoration: none; }
.lp .lp-nav a:hover, .lp .lp-rel a:hover { border-color: #3057A3; background: #F1F7FF; }
.lp .lp-nav a b, .lp .lp-rel a b { font-size: 12px; color: #194292; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp .lp-nav a span, .lp .lp-rel a span { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.lp .lp-rel a small { grid-column: 2; font-size: 12px; color: #5D646F; }
.lp .lp-rel { display: grid; gap: 6px; }
.lp .lp-foot { margin: 12px 0 0; font-size: 12.5px; }
.lp .lp-foot a { color: #194292; font-weight: 700; text-decoration: none; }
.lp .lp-x { display: none; }
/* 옆에 둘 자리: 실측 1440 에서 여유 260px(겹침), 1600 에서 340px → 1600 미만은 시트로 */
@media (max-width: 1599px) {
  .lp { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: 60vh;
    box-shadow: 0 10px 30px rgba(22,44,85,.22); }
  .lp:not(.on) { display: none; }
  .lp .lp-x { display: inline-flex; position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; align-items: center; justify-content: center;
    border: 0; background: transparent; font-size: 18px; color: #5D646F; cursor: pointer; }
}
@media (min-width: 1600px) { .lm-bar .lm-map { display: none; } }

/* ── 답안 뼈대 한 장 (2026-10-07) — 강의의 한 장 요약. 상단 막대 「뼈대」로 여닫는 패널: 넓으면 오른쪽 위(위치 패널을 덮음), 좁으면 아래 시트 ── */
.lo { position: fixed; right: 16px; top: 64px; width: 380px; max-height: calc(100vh - 84px); overflow: auto; z-index: 8100;
  background: #fff; border: 1px solid #DDE0E5; border-radius: 14px; padding: 14px 44px 12px 16px;
  font: 14px/1.55 Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; color: #16202B; box-shadow: 0 10px 30px rgba(22,44,85,.18); }
.lo:not(.on) { display: none; }
.lo h3 { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: #5D646F; letter-spacing: .02em; display: block; }
.lo h3::before, .lo h4::before { content: none; }
.lo .lo-lead { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #162C55; }
.lo .lo-secs { margin: 0; padding: 0 0 0 22px; display: grid; gap: 9px; }
.lo .lo-secs li::marker { color: #194292; font-weight: 700; font-variant-numeric: tabular-nums; }
.lo .lo-secs h4 { margin: 0 0 2px; font-size: 14px; font-weight: 800; color: #162C55; }
.lo .lo-secs p { margin: 0; font-size: 13.5px; color: #16202B; }
.lo .lo-secs .lo-fig { color: #5D646F; font-size: 12.5px; }
.lo .lo-cites { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #E5E8EE; font-size: 12.5px; color: #5D646F; }
.lo .lo-foot { margin: 10px 0 0; font-size: 12.5px; }
.lo .lo-foot a { color: #194292; font-weight: 700; text-decoration: none; }
.lo .lo-x { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; font-size: 18px; color: #5D646F; cursor: pointer; }
@media (max-width: 899px) {
  .lo { left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: 70vh; }
}