를 2개 넘게 연달지 않는다 ·
를 쓰지 않는다 — 식은 그림 안에 (level3 의 식 풀이는 예외)
· 그림 → 요점(.key) 사이에 아무것도 끼우지 않는다
══════════════════════════════════════════════════════════════════════════ */
:root{
--fg:#1c1c1e; --bg:#ffffff; --dim:#6e6e73; --line:#d9d9de;
--box:#f7f7f9; --boxline:#c9c9d0; --accent:#0a5dc2; --accentbg:#eef4fc;
--loop:#c22a2a; --warn:#a86b00; --warnbg:#fff6e0;
--fix:#6b3fb5; --fixbg:#f4effc; --ok:#1a7a3c; --okbg:#eaf6ee;
--nav:264px;
}
@media (prefers-color-scheme: dark){
:root{
--fg:#e8e8ea; --bg:#1b1b1e; --dim:#98989f; --line:#3a3a3f;
--box:#232327; --boxline:#4a4a52; --accent:#6aa5e8; --accentbg:#1e2735;
--loop:#e06c6c; --warn:#d9a13d; --warnbg:#2e2a1c;
--fix:#a887e0; --fixbg:#2a2333; --ok:#5cc084; --okbg:#1e2b22;
}
/* 다크모드 팔레트는 밝은 색이라 그 위의 흰 글자는 대비가 2.3~3.2:1 밖에 안 된다.
배지 글자만 어두운색으로 뒤집는다 (팔레트 자체는 본문 글자색으로도 쓰이므로). */
.no, .lv-pill{color:#17171a}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
font-size:17px;line-height:1.8;
word-break:keep-all;overflow-wrap:break-word} /* 한국어는 단어 단위로 줄바꿈 */
/* ── 뼈대 ─────────────────────────────────────────────────────────────── */
#wrap{display:flex;max-width:1520px;margin:0 auto}
nav{width:var(--nav);flex:none;position:sticky;top:0;align-self:flex-start;
height:100vh;overflow-y:auto;padding:22px 12px 50px 20px;
border-right:1px solid var(--line);font-size:15px}
nav a{display:block;color:var(--dim);text-decoration:none;padding:3px 8px;
border-radius:6px;line-height:1.45}
nav a:hover{background:var(--box);color:var(--fg)}
nav a.lv1{font-weight:700;color:var(--fg);margin-top:12px}
nav a.lv2{padding-left:20px;font-size:14.5px}
nav a.here{background:var(--accentbg);color:var(--accent);font-weight:700}
nav .navtitle{font-weight:700;font-size:15.5px;margin:0 0 8px;padding:0 8px}
main{flex:1;min-width:0;padding:28px 34px 120px;max-width:1180px}
@media (max-width:1000px){ nav{display:none} main{padding:20px 16px 90px} }
/* 읽기 폭 — 한 줄이 길면 눈이 다음 줄을 못 찾는다. 그림·표는 넓게, 글만 좁힌다. */
main > p, .sec > p, .sec > .key, .sec > .warnbox, .sec > .note,
.foldbody > p, .figcap, .pills{max-width:54em}
/* ── 제목 ─────────────────────────────────────────────────────────────── */
h1{font-size:1.55em;margin:0}
h2{font-size:1.26em;margin:0 0 4px;padding-top:6px}
.sub{color:var(--dim);margin:4px 0 0;font-size:16px}
.no{display:inline-block;background:var(--accent);color:#fff;border-radius:8px;
font-weight:700;font-size:14.5px;padding:2px 10px;margin-bottom:2px}
.sec{border:1px solid var(--line);border-radius:14px;padding:19px 26px;margin:24px 0}
.sec[id]{scroll-margin-top:14px}
/* ── 문서 사이 이동 막대 ──────────────────────────────────────────────── */
.docbar{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 0}
.docbar a{flex:1;min-width:200px;display:block;text-decoration:none;color:var(--fg);
background:var(--box);border:1px solid var(--line);border-radius:12px;padding:9px 14px}
.docbar a:hover{border-color:var(--accent);background:var(--accentbg)}
.docbar a.here{border-color:var(--accent);background:var(--accentbg)}
.docbar b{display:block;font-size:15.5px}
.docbar a > span{font-size:14.5px;color:var(--dim);line-height:1.42;display:block}
/* ↑ 직계 자식만: 제목 안의 .lv-pill 딱지까지 block 이 되어 카드 폭 막대로 늘어나는 것을 막는다 */
/* ── 깊이 딱지 ────────────────────────────────────────────────────────── */
.lv-pill{display:inline-block;border-radius:999px;font-weight:700;font-size:13.5px;
padding:1px 11px;margin-left:7px;vertical-align:2px}
.lv1-pill{background:var(--ok);color:#fff}
.lv2-pill{background:var(--accent);color:#fff}
.lv3-pill{background:var(--fix);color:#fff}
/* ── 색상자 ───────────────────────────────────────────────────────────── */
.key{background:var(--accentbg);border-left:4px solid var(--accent);
padding:10px 16px;border-radius:0 10px 10px 0;margin:13px 0}
.warnbox{background:var(--warnbg);border-left:4px solid var(--warn);
padding:10px 16px;border-radius:0 10px 10px 0;margin:13px 0}
.okbox{background:var(--okbg);border-left:4px solid var(--ok);
padding:10px 16px;border-radius:0 10px 10px 0;margin:13px 0}
.note{background:var(--box);border:1px solid var(--line);border-radius:10px;
padding:9px 14px;font-size:15px;color:var(--dim);margin:12px 0}
.subnote{display:block;color:var(--dim);font-size:.94em;margin-top:2px}
/* ── 입력/식/출력 삼단 ────────────────────────────────────────────────── */
.io{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.io > div{flex:1;min-width:210px;background:var(--box);border:1px solid var(--line);
border-radius:10px;padding:9px 14px;font-size:15.5px}
.io b{display:block;color:var(--dim);font-size:14px;font-weight:600;margin-bottom:2px}
/* ── 카드 ─────────────────────────────────────────────────────────────── */
.cards{display:flex;gap:14px;flex-wrap:wrap;margin:13px 0}
.card{flex:1;min-width:230px;background:var(--box);border:1px solid var(--line);
border-radius:12px;padding:12px 16px;font-size:15.5px}
.card b.t{display:block;font-size:1.02em;margin-bottom:4px}
/* ── 표 ───────────────────────────────────────────────────────────────── */
table{border-collapse:collapse;margin:12px 0;font-size:15.5px;width:100%;
display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:6px 11px;text-align:left;vertical-align:top}
th{background:var(--box)}
td.c,th.c{text-align:center}
table.terms td:first-child{white-space:nowrap;font-weight:700;background:var(--box)}
table.limits td:first-child{white-space:nowrap;background:var(--warnbg)}
table.tight{font-size:15px}
table.tight th,table.tight td{padding:4px 9px}
/* ── 코드·식 ──────────────────────────────────────────────────────────── */
code{font-family:"Cascadia Code",Consolas,monospace;font-size:.93em;
background:var(--box);padding:1px 5px;border-radius:4px}
pre{background:var(--box);border:1px solid var(--line);border-radius:10px;
padding:12px 16px;overflow-x:auto;line-height:1.6;font-size:16px}
pre code{background:none;padding:0;font-size:inherit} /* .93em 상속을 끊는다 */
/* ── 접기 (깊이 층) ───────────────────────────────────────────────────── */
details.fold{border:1px solid var(--line);border-radius:12px;background:var(--box);margin:15px 0}
details.fold > summary{cursor:pointer;list-style:none;padding:10px 16px;font-weight:700;
display:flex;align-items:center;gap:9px;flex-wrap:wrap}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::before{content:"▸";color:var(--accent);font-weight:700}
details.fold[open] > summary::before{content:"▾"}
details.fold[open] > summary{border-bottom:1px solid var(--line)}
details.fold > summary .hint{margin-left:auto;font-weight:600;font-size:15px;color:var(--dim)}
.foldbody{background:var(--bg);border-radius:0 0 12px 12px;padding:6px 18px 16px}
.foldbody > .figwrap:first-child{margin-top:12px}
/* 통합본의 심화 그림은 접기 본문의 글 여백만큼 폭을 되찾아 1020 px SVG가
넓은 화면에서 불필요하게 가로 스크롤되지 않게 한다. 좁은 화면의 스크롤은 유지한다. */
body.allinone .foldbody > .figwrap{
width:calc(100% + 36px);margin-left:-18px;margin-right:-18px
}
/* ── 딱지 알약 — 한계·경고를 문단 대신 한 줄로 ────────────────────────── */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.pills span{font-size:15px;border-radius:999px;padding:3px 14px;
border:1px solid var(--warn);background:var(--warnbg);color:var(--warn)}
.pills span.r{border-color:var(--loop);color:var(--loop)}
.pills span.b{border-color:var(--accent);background:var(--accentbg);color:var(--accent)}
/* ── 그림 (색·글자를 CSS 로 → 다크모드 자동 대응) ─────────────────────── */
.figwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;padding:6px;margin:13px 0}
svg{display:block} /* max-width:100% 를 걸면 .figwrap 의 가로 스크롤이 죽는다 */
.fig text{font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;fill:var(--fg)}
.fig .t-lg{font-size:16.5px;font-weight:700}
.fig .t-md{font-size:15px}
.fig .t-sm{font-size:14px;fill:var(--dim)}
.fig .t-mono{font-family:"Cascadia Code",Consolas,monospace;font-size:14px}
.fig .bx{fill:var(--box);stroke:var(--boxline);stroke-width:1.8}
.fig .bx-acc{fill:var(--accentbg);stroke:var(--accent);stroke-width:2.3}
.fig .bx-warn{fill:var(--warnbg);stroke:var(--warn);stroke-width:2.1}
.fig .bx-ok{fill:var(--okbg);stroke:var(--ok);stroke-width:2.1}
.fig .ln{stroke:var(--fg);stroke-width:2.1;fill:none}
.fig .ln-thin{stroke:var(--boxline);stroke-width:1.6;fill:none}
.fig .ln-dash{stroke:var(--dim);stroke-width:1.4;fill:none;stroke-dasharray:5 4}
.fig .ln-acc{stroke:var(--accent);stroke-width:2.5;fill:none}
.fig .ln-loop{stroke:var(--loop);stroke-width:2.3;fill:none}
.fig.process-map .ln-acc,.fig.process-map .ln-loop,.fig.process-map .ln-ok{
stroke-linecap:round;stroke-linejoin:round}
.fig.process-map .ln-acc{stroke-width:2.2}
.fig.process-map .ln-loop,.fig.process-map .ln-ok{stroke-width:2}
.fig .f-acc{fill:var(--accent)} .fig .f-loop{fill:var(--loop)}
.fig .f-warn{fill:var(--warn)} .fig .f-dim{fill:var(--dim)} .fig .f-ok{fill:var(--ok)}
/* 격자선·곡선 위에 글자를 얹을 때 뒤에 까는 바탕 (글자를 선이 관통하는 것을 막는다) */
.fig .plate{fill:var(--bg);stroke:none;opacity:.92}
.fig .m-fg{fill:var(--fg)} .fig .m-acc{fill:var(--accent)} .fig .m-loop{fill:var(--loop)}
/* 외부 유체 (배가스·냉각수) — 냉매의 파랑·빨강과 구분되는 출입 표시용 */
.fig .ln-warn{stroke:var(--warn);stroke-width:2.3;fill:none}
.fig .ln-ok{stroke:var(--ok);stroke-width:2.3;fill:none}
.fig .m-warn{fill:var(--warn)} .fig .m-ok{fill:var(--ok)}
.fig [marker-end],.fig [marker-start]{stroke-linecap:round;stroke-linejoin:round}
.figcap{font-size:15px;color:var(--dim);margin:7px 2px 0}
/* ── 심화편 전용 ──────────────────────────────────────────────────────── */
/* 심화편은 참조 문서라 소제목()을 쓴다 — "한 화면" 규칙은 입문·표준편의 것이다. */
h3{font-size:1.03em;margin:20px 0 4px;color:var(--accent)}
h3::before{content:"— ";color:var(--dim)}
.lead{font-size:1.03em;color:var(--dim);margin:2px 0 10px}
.badge{display:inline-block;background:var(--accent);color:#fff;border-radius:7px;
font-weight:700;font-size:14px;padding:1px 9px;margin-right:6px}
.badge.k{background:var(--loop)} .badge.g{background:var(--warn)}
.badge.i{background:var(--ok)} .badge.c{background:var(--dim)}
.tag{font-size:.95em}
.fig .bx-loop{fill:var(--bg);stroke:var(--loop);stroke-width:2.1}
@media (prefers-color-scheme: dark){ .badge{color:#17171a} }
/* ── 신뢰 등급 색 ─────────────────────────────────────────────────────── */
.grade1{color:var(--ok);font-weight:700}
.grade2{color:var(--warn);font-weight:700}
.grade3{color:var(--loop);font-weight:700}
a{color:var(--accent)}
/* ── 쪽 넘김 ──────────────────────────────────────────────────────────── */
.pagenav{display:flex;justify-content:space-between;gap:12px;margin:26px 0 0;font-size:15.5px}
.pagenav a{text-decoration:none;background:var(--box);border:1px solid var(--line);
border-radius:10px;padding:8px 15px}
.pagenav a:hover{border-color:var(--accent);background:var(--accentbg)}
@media print{
nav,.docbar,.pagenav{display:none}
#wrap{display:block} main{max-width:none;padding:0}
details.fold{border:none} details.fold > summary{display:none}
.foldbody{padding:0} body{font-size:10pt}
}