/* v2.3.36 사용자 메뉴얼 (manual.html) — XGRIDS 문서처럼 왼쪽 목차 · 가운데 본문 · 오른쪽 '이 페이지' 목차. 색 · 글꼴은 mse.css 변수 그대로 */
:root { --man-head: 92px; --man-side: 288px; --man-toc: 236px; }
@media (max-width: 640px) { :root { --man-head: 106px; } }
/* 머리줄 안쪽 폭을 설명서 폭에 맞춘다 (로고 · 목차 왼쪽 끝이 한 줄) */
.site-head-inner { width: calc(100% - 56px); max-width: 1584px; }
@media (max-width: 900px) { .site-head-inner { width: calc(100% - 40px); } }
body { background: radial-gradient(ellipse at 18% -12%, #06322c55, transparent 42%), var(--bg); }
/* v2.3.41 그림 크게 보기 동안 뒤 페이지는 스크롤하지 않고(막대도 없음), 막대 자리는 늘 비워 두어 열고 닫을 때 본문이 옆으로 튀지 않게 */
html { scrollbar-gutter: stable; }
html:has(dialog.man-lightbox[open]) { overflow: hidden; }
/* 로그인 전(손님)에는 TOOLS 를 숨긴다 — 관리자만 (회원은 mse.css 에서) */
html:not(.mse-role-admin) .nav-tools { display: none; }

.man-shell {
  display: grid; grid-template-columns: var(--man-side) minmax(0, 1fr) var(--man-toc);
  width: 100%; max-width: 1640px; margin: 0 auto; padding: 0 28px; box-sizing: border-box;
}
.man-shell:has(.man-toc[hidden]) { grid-template-columns: var(--man-side) minmax(0, 1fr); }
.man-scrim { display: none; } /* v2.3.41 좁은 화면(980 px 아래)에서만 — 넓은 화면은 격자 칸을 차지하지 않게 */

/* ---- 왼쪽 목차 */
.man-side {
  position: sticky; top: var(--man-head); align-self: start; height: calc(100vh - var(--man-head)); box-sizing: border-box;
  display: flex; flex-direction: column; padding: 26px 18px 18px 0; border-right: 1px solid var(--line);
}
.man-side-head { position: relative; flex: none; }
.man-side-title { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.man-side-title svg { width: 19px; height: 19px; color: var(--accent); }
.man-search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--field);
  transition: border-color .25s, box-shadow .25s;
}
.man-search:focus-within { border-color: #54d9bb; box-shadow: 0 0 0 3px #54d9bb26; }
.man-search svg { flex: none; width: 17px; height: 17px; color: var(--dim); }
.man-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 14px; }
.man-search input::placeholder { color: var(--dim); }
.man-search input::-webkit-search-cancel-button { filter: invert(.7); }
.man-search kbd { flex: none; }
.man-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: min(60vh, 520px); overflow: auto; padding: 6px;
  border: 1px solid var(--line-2); border-radius: 11px; background: #0b1117; box-shadow: 0 18px 50px #000a; /* v2.3.39 불투명 (밑의 목차 글이 비치지 않게) */
}
.man-results a { display: block; padding: 9px 11px; border-radius: 8px; color: var(--text); text-decoration: none; transition: background-color .15s; }
.man-results a:hover, .man-results a.is-active { background: #2fd3a81a; }
.man-results .r-path { display: block; color: var(--accent); font-size: 11.5px; font-weight: 600; }
.man-results .r-title { display: block; font-size: 14px; font-weight: 600; margin-top: 1px; }
.man-results .r-text { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.man-results mark { background: #2fd3a83d; color: #e9fff8; border-radius: 3px; padding: 0 1px; }
.man-results .r-empty { margin: 0; padding: 12px; color: var(--dim); font-size: 13px; }

.man-tree { flex: 1; min-height: 0; overflow: auto; margin-top: 18px; padding-right: 4px; scrollbar-width: thin; }
.man-group + .man-group { margin-top: 6px; }
.man-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; transition: background-color .2s, color .2s;
}
.man-group-head:hover { background: #ffffff0a; }
.man-group-head svg { flex: none; width: 14px; height: 14px; color: var(--dim); transition: transform .25s; }
.man-group.is-open .man-group-head svg { transform: rotate(90deg); }
.man-group.has-current .man-group-head { color: var(--accent); }
.man-group ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 10px; display: grid; gap: 2px; }
/* v2.3.41 접힌 묶음은 ul[hidden] (manual.js slideShow 가 높이와 함께 부드럽게) */
.man-group a {
  position: relative; display: block; padding: 8px 12px; border-radius: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.5; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.man-group a:hover { background: #ffffff0a; color: var(--text); }
.man-group a[aria-current="page"] { background: #2fd3a81c; color: #8ff3d7; font-weight: 600; }
.man-group a[aria-current="page"]::before { content: ''; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--accent); }
.man-group .is-soon { display: block; padding: 8px 12px; color: var(--dim); font-size: 13px; }
.man-side-foot { flex: none; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; line-height: 1.6; }

/* ---- 가운데 본문 */
.man-main { min-width: 0; padding: 22px 56px 90px; }
.man-bar { display: flex; align-items: center; gap: 10px; max-width: 900px; margin: 0 auto 6px; min-height: 36px; }
.man-grow { flex: 1; }
.man-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; color: var(--dim); font-size: 12.5px; }
.man-crumbs li + li::before { content: '›'; margin-right: 6px; color: var(--dim); }
.man-crumbs a { color: var(--muted); }
.man-crumbs [aria-current] { color: var(--text); }
.man-tool, .man-menu-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff06;
  color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.man-tool:hover, .man-menu-btn:hover { background: #ffffff10; color: var(--text); border-color: var(--line-2); }
.man-tool svg, .man-menu-btn svg { width: 15px; height: 15px; }
.man-menu-btn { display: none; }

.man-doc { max-width: 900px; margin: 0 auto; font-size: 15.5px; line-height: 1.85; color: #dfe6ee; word-break: keep-all; overflow-wrap: anywhere; }
.man-doc.is-in { animation: man-in .35s ease both; }
@keyframes man-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .man-doc.is-in { animation: none; } }
.man-loading, .man-error { color: var(--dim); padding: 60px 0; text-align: center; }
.man-error { color: #ffb8c6; }
.man-doc h1 { margin: 14px 0 14px; color: var(--text); font-size: 34px; line-height: 1.35; letter-spacing: -.045em; }
.man-doc .lead { margin: 0 0 30px; color: var(--muted); font-size: 16.5px; line-height: 1.8; }
.man-doc h2 {
  margin: 56px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 25px; line-height: 1.4; letter-spacing: -.035em;
  scroll-margin-top: calc(var(--man-head) + 20px);
}
.man-doc h3 { margin: 34px 0 12px; color: var(--text); font-size: 18.5px; line-height: 1.5; letter-spacing: -.02em; scroll-margin-top: calc(var(--man-head) + 20px); }
.man-doc h4 { margin: 24px 0 8px; color: var(--text); font-size: 16px; }
.man-doc h2 .man-anchor, .man-doc h3 .man-anchor {
  margin-left: 8px; color: var(--dim); font-weight: 400; text-decoration: none; opacity: 0; transition: opacity .2s;
}
.man-doc h2:hover .man-anchor, .man-doc h3:hover .man-anchor, .man-anchor:focus-visible { opacity: 1; }
.man-doc p { margin: 0 0 14px; }
.man-doc a { color: #6fe9c8; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #6fe9c866; }
.man-doc a:hover { text-decoration-color: currentColor; }
.man-doc strong, .man-doc b { color: var(--text); font-weight: 700; }
.man-doc ul, .man-doc ol:not(.callouts) { margin: 0 0 16px; padding-left: 22px; }
.man-doc li { margin: 4px 0; }
.man-doc li::marker { color: var(--accent); }
.man-doc ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
.man-doc ol.steps > li { position: relative; counter-increment: step; margin: 10px 0; padding-left: 40px; min-height: 28px; }
.man-doc ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: #2fd3a81f; border: 1px solid #2fd3a855; color: #8ff3d7; font-size: 13px; font-weight: 700; line-height: 1;
}
.man-doc code { padding: 2px 6px; border-radius: 6px; background: #ffffff12; color: #e6edf5; font-size: .9em; }
.man-doc kbd, .man-search kbd {
  display: inline-block; min-width: 22px; padding: 1px 7px; border: 1px solid #ffffff2e; border-bottom-width: 2px; border-radius: 6px; background: #ffffff0d;
  color: var(--text); font: 600 12px/1.6 var(--font); text-align: center; white-space: nowrap;
}
.man-search kbd { color: var(--dim); }
.man-doc hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }

/* v2.4.5 명령, 설정 글 (복사 단추는 manual.js 가 붙인다) */
.man-doc .cmd-wrap { position: relative; margin: 12px 0 18px; }
/* 긴 한 줄도 접어 보인다 — 가로 스크롤이면 글이 오른쪽 위 '복사' 단추 밑으로 지나간다 (복사는 원래 글 그대로) */
.man-doc pre.cmd { margin: 0; padding: 14px 84px 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #0a0e13; white-space: pre-wrap; overflow-wrap: anywhere; }
.man-doc pre.cmd code { padding: 0; border-radius: 0; background: none; color: #d6e2ee; font: 13px/1.7 ui-monospace, Consolas, 'D2Coding', monospace; white-space: inherit; }
.man-doc .cmd-copy {
  position: absolute; top: 9px; right: 9px; height: 28px; padding: 0 12px; border: 1px solid #ffffff26; border-radius: 8px; background: #ffffff0a;
  color: var(--text); font: 600 12px/1 var(--font); cursor: pointer; transition: border-color .2s, background-color .2s;
}
.man-doc .cmd-copy:hover { border-color: #ffffff4d; background: #ffffff14; }

/* v2.4.5 흐름 그림 (앱 방식 연결) */
.man-doc .flow { display: flex; align-items: stretch; margin: 16px 0 22px; }
.man-doc .flow-box { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; align-content: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff06; }
.man-doc .flow-box b { font-size: 14px; }
.man-doc .flow-box span { color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.man-doc .flow-arrow { flex: none; width: 28px; display: grid; place-items: center; color: var(--accent); }
.man-doc .flow-arrow::before { content: ''; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
@media (max-width: 720px) {
  .man-doc .flow { flex-direction: column; }
  .man-doc .flow-arrow { width: auto; height: 24px; }
  .man-doc .flow-arrow::before { transform: rotate(135deg); }
}

/* 표 */
.man-doc .table-wrap { margin: 16px 0 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.man-doc table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.man-doc th, .man-doc td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.man-doc th { background: #ffffff08; color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; }
.man-doc tr:last-child td { border-bottom: 0; }
.man-doc td:first-child { color: var(--text); font-weight: 600; }
.man-doc table.plain td:first-child { color: inherit; font-weight: inherit; }

/* 도움말 · 주의 · 알림 (XGRIDS 의 Tip · Note) */
.man-doc .note { margin: 18px 0 22px; padding: 14px 18px 4px; border-radius: 11px; border: 1px solid; font-size: 14.5px; line-height: 1.75; }
.man-doc .note-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; font-size: 13.5px; font-weight: 700; }
.man-doc .note-title::before { content: ''; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--note-icon) center / contain no-repeat; mask: var(--note-icon) center / contain no-repeat; }
.man-doc .note p { margin-bottom: 10px; }
.man-doc .note.tip { background: #10b98117; border-color: #10b98140; }
.man-doc .note.tip .note-title { color: #5ff0bd; --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2h5c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.man-doc .note.warn { background: #f59e0b14; border-color: #f59e0b45; }
.man-doc .note.warn .note-title { color: #ffd27a; --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 20h20L12 3zM12 10v4M12 17h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.man-doc .note.info { background: #3b82f614; border-color: #3b82f645; }
.man-doc .note.info .note-title { color: #9cc3ff; --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7.5h.01' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---- 화면 그림 + 번호 표시 */
.man-doc figure.shot { margin: 22px 0 10px; }
.shot-frame {
  position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #0a0f14;
  box-shadow: 0 16px 40px #0008; cursor: zoom-in; aspect-ratio: 16 / 9;
}
.shot-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot-frame:focus-visible { outline: 2px solid #55e6c6; outline-offset: 3px; }
.shot-frame .shot-missing { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: 13px; }
.man-doc figcaption { margin-top: 10px; color: var(--dim); font-size: 13px; text-align: center; line-height: 1.6; }
.shot-zoom {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 7px; background: #000a;
  color: #e9f2fb; font-size: 11.5px; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.shot-frame:hover .shot-zoom, .shot-frame:focus-visible .shot-zoom { opacity: 1; }
.shot-box {
  position: absolute; box-sizing: border-box; border: 2px solid #2fd3a8cc; border-radius: 6px; box-shadow: 0 0 0 1px #0007, inset 0 0 0 1px #0005;
  pointer-events: none; transition: box-shadow .2s, border-color .2s, background-color .2s;
}
/* v2.3.39 번호 크기는 --mark 하나로 (manual.js placeMarks 가 이 값을 읽어 겹침 · 가장자리를 화면 px 로 잰다).
   v2.3.41 사용자 요청: 번호가 커서 더 작게 — 26 → 20 px, 작은 그림 20 → 16 px (휴대폰 18 → 15 px) */
.shot-frame { --mark: 20px; --mark-font: 11px; }
.shot-frame.is-small { --mark: 16px; --mark-font: 9.5px; }
.shot-mark {
  position: absolute; z-index: 2; display: grid; place-items: center; width: var(--mark); height: var(--mark); margin: calc(var(--mark) / -2) 0 0 calc(var(--mark) / -2); border-radius: 50%;
  background: #12c99a; color: #04110d; font: 800 var(--mark-font)/1 var(--font); box-shadow: 0 0 0 2px #04110dcc, 0 4px 12px #000a; pointer-events: none;
  transition: transform .2s, background-color .2s;
}
.shot-box.is-hot { z-index: 1; border-color: #ffd27a; background: #ffd27a1a; box-shadow: 0 0 0 1px #0008, 0 0 22px #ffd27a66; }
.shot-mark.is-hot { z-index: 3; background: #ffd27a; transform: scale(1.18); }
.man-doc ol.callouts { list-style: none; counter-reset: co; margin: 14px 0 26px; padding: 0; display: grid; gap: 4px; }
.man-doc ol.callouts > li {
  position: relative; counter-increment: co; margin: 0; padding: 8px 12px 8px 44px; border-radius: 9px; font-size: 14.5px; line-height: 1.7; transition: background-color .2s;
}
.man-doc ol.callouts > li::before {
  content: counter(co); position: absolute; left: 10px; top: 9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #12c99a; color: #04110d; font: 800 12px/1 var(--font); transition: background-color .2s;
}
.man-doc ol.callouts > li:hover, .man-doc ol.callouts > li.is-hot { background: #ffffff0a; }
.man-doc ol.callouts > li.is-hot::before { background: #ffd27a; }
.man-doc ol.callouts > li b:first-child { margin-right: 4px; }

/* 이전 · 다음 */
.man-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 900px; margin: 60px auto 0; }
.man-pager a {
  display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; transition: border-color .2s, background-color .2s;
}
.man-pager a:hover { border-color: #2fd3a877; background: #2fd3a80d; }
.man-pager .p-dir { display: block; color: var(--dim); font-size: 12px; }
.man-pager .p-title { display: block; margin-top: 3px; font-size: 15px; font-weight: 700; }
.man-pager .is-next { grid-column: 2; text-align: right; }
.man-updated { max-width: 900px; margin: 22px auto 0; color: var(--dim); font-size: 12.5px; text-align: right; }

/* ---- 오른쪽 '이 페이지' */
.man-toc { position: sticky; top: var(--man-head); align-self: start; max-height: calc(100vh - var(--man-head)); overflow: auto; padding: 30px 0 24px 22px; box-sizing: border-box; scrollbar-width: thin; }
.man-toc-title { margin: 0 0 10px; color: var(--text); font-size: 13px; font-weight: 700; }
.man-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.man-toc li a {
  position: relative; display: block; padding: 5px 0 5px 14px; color: var(--dim); font-size: 12.5px; line-height: 1.55; text-decoration: none; transition: color .2s;
}
.man-toc li.lv3 a { padding-left: 26px; }
.man-toc li a:hover { color: var(--text); }
.man-toc li a.is-active { color: #8ff3d7; }
.man-toc li a.is-active::before { content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--accent); }

/* 맨 위로 — v2.3.41 내려가면 아래에서 서서히 떠오르고 올라가면 서서히 사라진다 (manual.js .is-shown, 예전엔 hidden 으로 바로) */
.man-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 30; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%;
  background: #0f1922ee; color: var(--text); box-shadow: 0 10px 30px #0008; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background-color .2s;
}
.man-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, visibility 0s, background-color .2s; }
.man-top.is-shown:hover { background: #17303a; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .man-top, .man-top.is-shown { transition: none; } }
.man-top svg { width: 20px; height: 20px; }

/* 그림 크게 보기 — v2.3.41 다른 팝업(dialog.modal — mse.css 표면 · 떠오르는 움직임 · motion.js 닫기)과 같게. 크기는 그림 비율(--lb-w : --lb-h)대로
   화면의 94 % 폭 · 92 % 높이(머리줄 포함) 안에 맞춘다 — 그림 전체가 보이고 창 안 · 페이지 모두 스크롤이 없다 */
dialog.modal.man-lightbox {
  --lb-bar: 56px; --lb-w: 16; --lb-h: 9;
  width: min(94vw, calc((92vh - var(--lb-bar)) * var(--lb-w) / var(--lb-h)));
  width: min(94vw, calc((92dvh - var(--lb-bar)) * var(--lb-w) / var(--lb-h)));
  max-width: none; max-height: none; height: fit-content; overflow: hidden; /* fit-content — auto 면 모달 창이 위아래로 늘어난다 */
}
dialog.modal.man-lightbox[open] { display: flex; flex-direction: column; }
.man-lb-bar { flex: none; display: flex; align-items: center; gap: 12px; height: var(--lb-bar); box-sizing: border-box; padding: 0 10px 0 18px; border-bottom: 1px solid var(--line); }
.man-lb-bar p { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--muted); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.man-lb-close {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 9px; background: #ffffff0a; color: var(--text); cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.man-lb-close:hover { background: #ffffff16; border-color: #ffffff38; }
.man-lb-close svg { width: 18px; height: 18px; }
.man-lb-stage { flex: none; overflow: hidden; }
.man-lb-stage .shot-frame { width: 100%; aspect-ratio: var(--lb-w) / var(--lb-h); border: 0; border-radius: 0; box-shadow: none; cursor: default; }
.man-lb-stage .shot-frame img { width: 100%; height: 100%; object-fit: contain; }

/* ---- 좁은 화면: 1280 px 아래는 오른쪽 목차를 빼고, 980 px 아래는 왼쪽 목차를 서랍으로 */
@media (max-width: 1280px) {
  .man-shell, .man-shell:has(.man-toc[hidden]) { grid-template-columns: var(--man-side) minmax(0, 1fr); }
  .man-toc { display: none; }
  .man-main { padding-inline: 40px; }
}
@media (max-width: 980px) {
  .man-shell, .man-shell:has(.man-toc[hidden]) { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .man-side {
    position: fixed; left: 0; top: 0; z-index: 60; width: min(320px, 86vw); height: 100vh; padding: 22px 16px 16px; border-right: 1px solid var(--line-2);
    background: #070b0f; box-shadow: 20px 0 60px #000a; transform: translateX(-105%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s;
  }
  .man-side.is-open { transform: none; visibility: visible; transition: transform .28s ease, visibility 0s; }
  /* v2.3.41 덮개도 서랍과 함께 서서히 (manual.js .is-open, 예전엔 hidden 으로 바로) */
  .man-scrim {
    display: block; position: fixed; inset: 0; z-index: 55; background: #000a;
    opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s;
  }
  .man-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .28s ease, visibility 0s; }
  .man-menu-btn { display: inline-flex; }
  .man-main { padding: 16px 20px 70px; }
  .man-doc h1 { font-size: 28px; }
  .man-doc h2 { font-size: 22px; margin-top: 44px; }
  .man-tool span { display: none; }
  .man-crumbs { display: none; }
}
@media (max-width: 560px) {
  .man-pager { grid-template-columns: 1fr; }
  .man-pager .is-next { grid-column: 1; }
  .man-doc { font-size: 15px; }
  .shot-frame.is-small { --mark: 15px; --mark-font: 9px; } /* v2.3.39 예전 .shot-mark 규칙은 is-small(20 px) 에 져서 안 먹었다 · v2.3.41 18 → 15 px */
  .man-top { right: 14px; bottom: 14px; }
}

/* 인쇄 (PDF 로 저장): 머리줄 · 목차 · 단추를 빼고 본문만 */
@media print {
  body { background: #fff; color: #111; }
  .site-head, .man-side, .man-toc, .man-bar, .man-pager, .man-top, .man-scrim { display: none !important; }
  .man-shell { display: block; padding: 0; }
  .man-main { padding: 0; }
  .man-doc, .man-doc h1, .man-doc h2, .man-doc h3, .man-doc strong, .man-doc b, .man-doc td:first-child { color: #111; }
  .man-doc .lead, .man-doc figcaption { color: #444; }
  .man-doc a { color: #075e4a; }
  .man-doc h2 { border-color: #ccc; break-after: avoid; }
  .man-doc figure.shot, .man-doc .note, .man-doc table { break-inside: avoid; }
  .shot-frame { box-shadow: none; border-color: #bbb; }
  .man-doc th { background: #f2f4f6; color: #111; }
  .man-doc th, .man-doc td, .man-doc .table-wrap { border-color: #ccc; }
  .man-doc .note { color: #222; }
}