/* cmhong95.com 수업 자료실 (/learn/) — 소개 사이트(site.css)의 종이 느낌을 따른다. 2026-10-31 */
:root{--paper:#FBF7F0;--paper-2:#F3ECE0;--ink:#1E1A14;--ink-2:#4A4033;--muted:#6F6250;--rule:#E2D7C5;--accent:#D95F00;--accent-dark:#A84500;
  --serif:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo",Georgia,serif;--sans:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;--w:1080px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17.5px/1.85 var(--sans);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-dark)}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:6px 12px;border-radius:8px;z-index:10}
.skip:focus{left:12px}
:focus-visible{outline:3px solid #ffb36b;outline-offset:2px}
.lh{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:14px;max-width:var(--w);margin:0 auto;padding:12px 24px;background:rgba(251,247,240,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.mark{font:700 1.12rem/1 var(--serif);text-decoration:none;white-space:nowrap}
.mark span{font:500 .78rem var(--sans);color:var(--muted);margin-left:8px}
.lh nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.92rem}
.lh nav a{text-decoration:none;color:var(--ink-2);padding:6px 0}
.lh nav a[aria-current="page"]{color:var(--accent-dark);font-weight:700;border-bottom:2px solid var(--accent)}
.lw{max-width:var(--w);margin:0 auto;padding:0 24px 40px}
.crumbs{font-size:.86rem;color:var(--muted);padding:16px 0 4px}
.crumbs a{text-decoration:none}
.kicker{margin:0;color:var(--accent-dark);font-weight:700;font-size:.9rem}
.kicker a{text-decoration:none}
h1{font:700 clamp(1.7rem,3.6vw,2.5rem)/1.3 var(--serif);letter-spacing:-.01em;margin:.25em 0 .4em}
.sum{color:var(--ink-2);font-size:1.05rem;margin:0 0 .6em;max-width:46em}
.meta{color:var(--muted);font-size:.88rem;margin:0}
/* 글 */
.post{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:8px 44px}
.post-h{grid-column:1/-1;padding:8px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:12px}
.toc{grid-column:2;grid-row:2/span 6;position:sticky;top:72px;align-self:start;font-size:.9rem;border-left:2px solid var(--rule);padding:4px 0 4px 16px;max-height:calc(100vh - 100px);overflow:auto}
.toc b{display:block;margin-bottom:6px;font-size:.85rem;color:var(--muted)}
.toc ol{margin:0;padding-left:1.1em}
.toc li{margin:3px 0;line-height:1.5}
.toc a{text-decoration:none;color:var(--ink-2)}
.body,.try,.author,.related,.pn{grid-column:1}
.body{max-width:44em}
.body h2{font:700 1.4rem/1.4 var(--serif);margin:2.1em 0 .6em;padding-top:.3em;scroll-margin-top:80px}
.body h2:first-child{margin-top:.6em}
.body p{margin:0 0 1.05em}
.body ul,.body ol{padding-left:1.4em;margin:0 0 1.1em}
.body li{margin:.25em 0}
.body strong{font-weight:700}
.body code{font:.88em/1.5 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;background:var(--paper-2);padding:.1em .35em;border-radius:5px}
.body pre{margin:0 0 1.2em;padding:16px 18px;background:#1f1b16;color:#f3ece0;border-radius:12px;overflow-x:auto;font:.86rem/1.65 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.body pre code{background:none;padding:0;color:inherit;font:inherit}
.tw{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--rule);border-radius:10px;background:#fffdf8}
table{border-collapse:collapse;width:100%;font-size:.94rem;line-height:1.55}
th,td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
th{background:var(--paper-2);font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:0}
.bb{margin:4px 0 12px;padding:10px;background:#fffdf8;border:1px solid var(--rule);border-radius:12px}
.bb img{display:block;width:100%}
.bb figcaption{font-size:.86rem;color:var(--muted);margin-top:6px}
.steps{margin:0 0 1.4em;border:1px solid var(--rule);border-radius:10px;background:#fffdf8;padding:8px 14px}
.steps summary{cursor:pointer;font-weight:700;padding:4px 0}
.steps ol{font-size:.94rem;line-height:1.65;margin:8px 0 4px}
.try{margin:28px 0 10px;padding:16px 18px;border-radius:14px;background:#fff1df;border:1px solid #f3c9a0;max-width:44em}
.try b{font:700 1.05rem var(--serif)}
.try p{margin:6px 0}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px!important}
.btn{display:inline-block;padding:9px 16px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:.95rem}
.btn:hover{background:var(--accent-dark);color:#fff}
.author{margin:18px 0;padding:14px 18px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:.95rem;max-width:44em}
.author p{margin:4px 0 0;color:var(--ink-2)}
.related{max-width:44em}
.related b{font:700 1.05rem var(--serif)}
.related ul{padding-left:1.2em}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:18px;font-size:.92rem;max-width:44em}
.pn a{text-decoration:none;color:var(--ink-2);max-width:48%}
.pn .next{text-align:right}
/* 허브 */
.hub-h{padding:10px 0 20px;border-bottom:1px solid var(--rule)}
.hub-facts{margin:10px 0 14px;padding-left:1.2em;color:var(--ink-2);font-size:.95rem}
.jump{display:flex;flex-wrap:wrap;gap:8px}
.jump a{padding:6px 12px;border:1px solid var(--rule);border-radius:999px;background:#fffdf8;text-decoration:none;font-size:.9rem}
.jump a:hover{border-color:var(--accent)}
.how{padding:16px 0;border-bottom:1px solid var(--rule)}
.how h2,.cat h2{font:700 1.35rem/1.4 var(--serif);margin:.6em 0 .3em;scroll-margin-top:80px}
.how ol{margin:0;padding-left:1.3em}
.cat{padding:8px 0 18px}
.cat h2 small{font:500 .9rem var(--sans);color:var(--muted)}
.cat-note{margin:0 0 10px;color:var(--muted);font-size:.93rem}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.cards a{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 16px;border:1px solid var(--rule);border-radius:12px;background:#fffdf8;text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.cards a:hover{border-color:var(--accent);transform:translateY(-1px)}
.cards b{font:700 1.02rem/1.45 var(--serif)}
.cards span{color:var(--ink-2);font-size:.9rem;line-height:1.6}
.cards small{color:var(--muted);font-size:.82rem}
/* 연락 페이지 */
.plain{max-width:44em;padding-bottom:20px}
.plain h2{font:700 1.3rem/1.4 var(--serif);margin:1.6em 0 .5em}
.lf{max-width:var(--w);margin:0 auto;padding:22px 24px 40px;border-top:1px solid var(--rule);color:var(--ink-2);font-size:.92rem}
.lf .fine{color:var(--muted);font-size:.85rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cards a{transition:none}}
@media (max-width:900px){.post{display:block}.toc{position:static;border-left:0;border:1px solid var(--rule);border-radius:10px;padding:10px 14px;margin:0 0 16px;max-height:none;background:#fffdf8}}
@media (max-width:640px){body{font-size:16.5px}.lh{padding:10px 16px;flex-direction:column;align-items:flex-start;gap:4px}.lh nav{gap:2px 14px}.lh nav a{padding:6px 0;min-height:32px}
  .lw{padding:0 16px 32px}.lf{padding:20px 16px 32px}th,td{padding:8px 9px}.pn{flex-direction:column}.pn a{max-width:100%}.pn .next{text-align:left}}
@media print{.lh,.lf,.toc,.try,.related,.pn,.crumbs{display:none}body{background:#fff;font-size:11pt}.post{display:block}.body pre{background:#f4f4f4;color:#111}}