/* ─────────────────────────────────────────────────────────────
   seminar.deviantce.com — 공통 스타일

   brief 와 같은 브랜드 토큰을 쓰되(Deviantce 실측값), 이쪽은
   **도해 중심**이다. brief 는 읽는 글, 여기는 보는 자료다.
   그래서 본문 폭을 넓게(980px) 잡고 그림이 글보다 크다.
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:oklch(25% .02 145);
  --ink-soft:oklch(45% .03 145);
  --ink-faint:oklch(58% .025 145);
  --bg:oklch(99% .01 95);
  --card:oklch(100% 0 0);
  --line:oklch(92% .02 145);
  --accent:oklch(55% .16 160);
  --accent-bright:oklch(65% .18 160);
  --mark:oklch(95% .05 160);
  --warn:oklch(58% .17 35);
  --warn-bg:oklch(96% .04 40);
  --good:oklch(58% .15 155);
  --good-bg:oklch(96% .04 160);
  --shadow:0 1px 2px oklch(25% .02 145/.04), 0 8px 24px oklch(25% .02 145/.06);
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:oklch(93% .01 145);
    --ink-soft:oklch(74% .02 145);
    --ink-faint:oklch(60% .02 145);
    --bg:oklch(17% .015 145);
    --card:oklch(21% .018 145);
    --line:oklch(30% .02 145);
    --accent:oklch(74% .16 160);
    --accent-bright:oklch(80% .17 160);
    --mark:oklch(28% .06 160);
    --warn:oklch(74% .15 40);
    --warn-bg:oklch(26% .05 40);
    --good:oklch(74% .14 158);
    --good-bg:oklch(25% .05 160);
    --shadow:0 1px 2px #0004, 0 8px 24px #0006;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Pretendard,"Pretendard Variable",-apple-system,BlinkMacSystemFont,
    "Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  font-size:17.5px; line-height:1.8; letter-spacing:-.017em;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:980px; margin:0 auto; padding:0 24px}
@media(max-width:640px){ body{font-size:16.5px} .wrap{padding:0 18px} }

a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px}

/* ── 머리말 ───────────────────────────── */
header.top{padding:56px 0 8px}
.kicker{
  font-size:.74rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
h1{
  font-size:clamp(1.9rem, 5vw, 2.9rem); line-height:1.24;
  letter-spacing:-.035em; font-weight:800; margin:0 0 16px;
}
.dek{
  font-size:clamp(1.02rem,2.4vw,1.2rem); color:var(--ink-soft);
  line-height:1.72; margin:0 0 20px; max-width:62ch;
}
.meta{
  font-size:.82rem; color:var(--ink-faint);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding-bottom:28px; border-bottom:1px solid var(--line);
}
.meta .dot{opacity:.4}

/* ── 본문 요소 ───────────────────────────── */
main{padding:8px 0 40px}
h2{
  font-size:clamp(1.35rem,3.4vw,1.75rem); line-height:1.34;
  letter-spacing:-.03em; font-weight:800;
  margin:68px 0 18px; padding-top:8px;
}
h2 .num{
  display:inline-grid; place-items:center;
  width:1.72em; height:1.72em; margin-right:.5em;
  border-radius:999px; background:var(--accent); color:#fff;
  font-size:.62em; font-weight:800; vertical-align:.14em;
  letter-spacing:0;
}
h3{
  font-size:1.08rem; font-weight:700; letter-spacing:-.022em;
  margin:40px 0 12px; color:var(--ink);
}
p{margin:0 0 1.35rem}
strong{font-weight:700}
em{font-style:normal; background:var(--mark); padding:.08em .3em; border-radius:4px}
code{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86em; background:var(--mark); padding:.12em .38em;
  border-radius:5px; letter-spacing:0; word-break:break-all;
}
ul,ol{margin:0 0 1.4rem; padding-left:1.35rem}
li{margin-bottom:.5rem}
li::marker{color:var(--accent)}
hr{border:0; border-top:1px solid var(--line); margin:52px 0}

blockquote{
  margin:0 0 1.5rem; padding:18px 22px;
  border-left:3px solid var(--accent);
  background:var(--card); border-radius:0 12px 12px 0;
  box-shadow:var(--shadow);
}
blockquote p:last-child{margin-bottom:0}

/* ── 그림 공통 ───────────────────────────── */
figure{
  margin:30px 0 34px; padding:26px 24px;
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow);
}
figure svg{display:block; width:100%; height:auto; overflow:visible}
figcaption{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-size:.84rem; line-height:1.68; color:var(--ink-faint);
}
figcaption b{color:var(--ink-soft); font-weight:700}
.fig-t{
  font-size:.72rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px;
}

/* SVG 안의 글자 — 폰트를 CSS 로 상속시킨다 */
svg text{
  font-family:Pretendard,"Pretendard Variable",-apple-system,
    "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  letter-spacing:-.02em;
}
.s-ink{fill:var(--ink)}
.s-soft{fill:var(--ink-soft)}
.s-faint{fill:var(--ink-faint)}
.s-acc{fill:var(--accent)}
.s-white{fill:#fff}
.b-card{fill:var(--card)}
.b-line{stroke:var(--line)}
.b-acc{stroke:var(--accent)}
.b-soft{stroke:var(--ink-faint)}

/* ── 카드 격자 ───────────────────────────── */
.grid{display:grid; gap:14px; margin:26px 0 32px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:20px 18px; box-shadow:var(--shadow);
}
.card .n{
  display:inline-grid; place-items:center; width:30px; height:30px;
  border-radius:9px; background:var(--mark); color:var(--accent);
  font-weight:800; font-size:.92rem; margin-bottom:12px;
}
.card h4{
  margin:0 0 7px; font-size:1rem; font-weight:700; letter-spacing:-.022em;
}
.card p{margin:0; font-size:.9rem; line-height:1.66; color:var(--ink-soft)}
.card.warn{border-color:var(--warn); background:var(--warn-bg)}
.card.warn .n{background:oklch(100% 0 0/.5); color:var(--warn)}
.card.good{border-color:var(--good); background:var(--good-bg)}
.card.good .n{background:oklch(100% 0 0/.5); color:var(--good)}

/* ── 숫자 강조 ───────────────────────────── */
.stats{
  display:grid; gap:1px; margin:28px 0 34px;
  grid-template-columns:repeat(auto-fit,minmax(142px,1fr));
  background:var(--line); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
}
.stat{background:var(--card); padding:20px 16px; text-align:center}
.stat .v{
  font-size:clamp(1.5rem,4.4vw,2.05rem); font-weight:800;
  letter-spacing:-.04em; line-height:1.1; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.stat .k{
  font-size:.78rem; color:var(--ink-faint); margin-top:6px; line-height:1.5;
}

/* ── 경고/강조 띠 ───────────────────────────── */
.note{
  margin:26px 0; padding:18px 20px; border-radius:13px;
  background:var(--card); border:1px solid var(--line);
  border-left:4px solid var(--accent);
  font-size:.94rem; line-height:1.74;
}
.note.warn{border-left-color:var(--warn); background:var(--warn-bg)}
.note.good{border-left-color:var(--good); background:var(--good-bg)}
.note .lb{
  display:block; font-size:.72rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:7px; color:var(--accent);
}
.note.warn .lb{color:var(--warn)}
.note.good .lb{color:var(--good)}
.note p:last-child{margin-bottom:0}

/* ── 표 ───────────────────────────── */
.tw{overflow-x:auto; margin:24px 0 32px; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:460px}
th,td{
  border-bottom:1px solid var(--line); padding:12px 12px;
  text-align:left; vertical-align:top;
}
th{
  font-weight:800; font-size:.73rem; letter-spacing:.06em;
  color:var(--ink-faint); text-transform:uppercase;
  background:var(--mark);
}
tbody tr:last-child td{border-bottom:0}
td code{font-size:.8rem}

/* ── 체크리스트 ───────────────────────────── */
.check{list-style:none; padding:0; margin:24px 0 32px}
.check li{
  position:relative; padding:14px 16px 14px 52px; margin-bottom:9px;
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; font-size:.94rem; line-height:1.68;
  box-shadow:var(--shadow);
}
.check li::before{
  content:""; position:absolute; left:17px; top:19px;
  width:17px; height:17px; border-radius:5px;
  border:2px solid var(--accent); background:var(--mark);
}
.check li.on::before{
  content:"✓"; background:var(--accent); border-color:var(--accent);
  color:#fff; font-size:12px; font-weight:800;
  display:grid; place-items:center; line-height:1;
}
.check li b{display:block; margin-bottom:3px; font-size:.97rem}
.check li span{color:var(--ink-soft); font-size:.89rem}

/* ── 단계 목록 ───────────────────────────── */
.steps{counter-reset:s; list-style:none; padding:0; margin:28px 0 34px}
.steps>li{
  counter-increment:s; position:relative;
  padding:0 0 26px 54px; margin:0;
}
.steps>li::before{
  content:counter(s); position:absolute; left:0; top:-2px;
  width:34px; height:34px; border-radius:999px;
  background:var(--accent); color:#fff;
  display:grid; place-items:center;
  font-weight:800; font-size:.92rem;
}
.steps>li::after{
  content:""; position:absolute; left:16.5px; top:36px; bottom:-2px;
  width:1px; background:var(--line);
}
.steps>li:last-child{padding-bottom:0}
.steps>li:last-child::after{display:none}
.steps h4{margin:3px 0 7px; font-size:1.04rem; font-weight:700}
.steps p{margin:0 0 .7rem; font-size:.93rem; color:var(--ink-soft)}
.steps .cmd{
  display:block; margin:10px 0 0; padding:12px 14px;
  background:var(--mark); border-radius:10px;
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-size:.8rem; line-height:1.7; letter-spacing:0;
  color:var(--ink); overflow-x:auto; white-space:pre;
}

/* ── 목차 ───────────────────────────── */
.toc{
  margin:34px 0 10px; padding:22px 24px;
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow);
}
.toc .lb{
  font-size:.72rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.toc ol{margin:0; padding-left:1.3rem; font-size:.94rem}
.toc li{margin-bottom:.42rem}
.toc a{color:var(--ink-soft); text-decoration:none}
.toc a:hover{color:var(--accent); text-decoration:underline}

/* ── 꼬리말 ───────────────────────────── */
footer.bot{
  margin-top:64px; padding:26px 0 56px; border-top:1px solid var(--line);
  font-size:.84rem; color:var(--ink-faint); line-height:1.74;
}
footer.bot ol{font-size:.84rem; padding-left:1.3rem}
footer.bot a{color:var(--ink-soft)}
.home{display:inline-block; margin-bottom:14px; font-size:.86rem}

@media print{
  body{font-size:11pt; background:#fff}
  figure,.card,.note,.toc{box-shadow:none; break-inside:avoid}
  h2{break-after:avoid}
}