/* 자료 페이지 공통 스타일 — 모델 지도 · 설치 · 배포 · 프롬프트 · 도움말
 *
 * 강의(_header.html)와 허브(index.html)는 각자 자기 CSS 를 갖고 있습니다.
 * 자료 페이지는 다섯 장이라, 같은 스타일을 다섯 번 복사하면 한 곳만 고쳐도
 * 나머지 넷이 어긋납니다. 그래서 여기 하나로 모았습니다.
 *
 * 색·간격 값은 직접 쓰지 않습니다. 전부 tokens.css 의 --ds-* 를 가리킵니다.
 * 규칙 하나: 네온(--ds-neon)은 '면'에만. 밝은 배경 위 초록 글자는 --ds-brand 입니다.
 */

*{box-sizing:border-box}
body{margin:0;background:var(--ds-bg);color:var(--ds-ink);
  font-family:var(--ds-font);line-height:var(--ds-lh-body);-webkit-font-smoothing:antialiased}
.shell{max-width:1080px;margin:0 auto;padding:0 28px}
a{color:var(--ds-brand)}

/* 본문 바로가기 — 평소엔 화면 밖에 있다가 Tab 한 번에 나타납니다.
   자료 페이지 상단에 링크가 넷씩 있어서, 키보드로 오는 사람은 매 페이지마다
   그걸 다 지나야 본문에 닿았습니다. 스크린리더도 같은 길을 걷습니다. */
.skip{position:absolute;left:12px;top:-56px;z-index:100;padding:10px 16px;border-radius:var(--ds-r-sm);
  background:var(--ds-ink-strong);color:#fff;font-size:13px;font-weight:700;text-decoration:none;
  transition:top .15s}
.skip:focus{top:12px;color:#fff}

/* ── 상단 ─────────────────────────────────────────────── */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 28px;border-bottom:1px solid var(--ds-line);background:var(--ds-surface)}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:14px;
  text-decoration:none;color:var(--ds-ink-strong);letter-spacing:var(--ds-ls-title)}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--ds-neon);color:var(--ds-ink-strong);
  display:grid;place-items:center;font:700 13px var(--ds-mono)}
.brand small{display:block;font:400 10px var(--ds-mono);color:var(--ds-muted);letter-spacing:var(--ds-ls-mono)}
.nav-actions{display:flex;align-items:center;gap:14px}
.ghost-link{text-decoration:none;font-size:12px;font-weight:700;color:var(--ds-muted);
  padding:9px 2px;white-space:nowrap}
.ghost-link:hover{color:var(--ds-brand)}
.portal-link{padding:9px 13px;border-radius:10px;background:var(--ds-ink-strong);color:#fff;
  text-decoration:none;font-size:12px;font-weight:700}

/* ── 히어로 ───────────────────────────────────────────── */
/* 허브(index.html)와 같은 크기·자간입니다. 자료 페이지만 작게 두면
   같은 사이트인데 목소리가 달라집니다 — 실제로 그렇게 어긋나 있었습니다. */
.eyebrow{font:700 12px var(--ds-mono);letter-spacing:.08em;
  color:var(--ds-brand);text-transform:uppercase}
.hero{padding:78px 0 44px}
.hero h1{margin:16px 0 0;font-size:clamp(42px,6vw,72px);line-height:1.02;
  letter-spacing:-.055em;color:var(--ds-ink-strong)}
.hero p{margin:22px 0 0;max-width:58ch;color:var(--ds-muted);font-size:18px}

/* ── 시그니처: 터미널 경로 ──────────────────────────────────────
   로고가 >_ 이고 강의 페이지에는 깜빡이는 커서가 있습니다. 자료 페이지에도
   같은 언어를 씁니다. 장식용 영문 라벨과 달리 '지금 어디에 있는지'를 실제로 알려줍니다. */
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.path{font:700 12px var(--ds-mono);letter-spacing:.06em;color:var(--ds-muted)}
.path b{color:var(--ds-brand)}
.path i{display:inline-block;width:7px;height:13px;margin-left:7px;vertical-align:-2px;
  background:var(--ds-neon);animation:blink 1.1s step-end infinite}
@media(prefers-reduced-motion:reduce){.path i{animation:none}}
.stamp{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:7px 13px;
  border-radius:var(--ds-r-pill);background:var(--ds-surface);border:1px solid var(--ds-line-strong);
  font:700 11px var(--ds-mono);letter-spacing:var(--ds-ls-mono);color:var(--ds-ink-strong)}
.stamp i{width:7px;height:7px;border-radius:50%;background:var(--ds-neon)}

/* ── 공통 블록 ────────────────────────────────────────── */
section{padding:34px 0}
/* 섹션 위의 영문 라벨(Money · Sources · Common …)을 전부 걷어냈습니다.
   정보가 없는 장식이었고, 다섯 장이 같은 리듬으로 읽히는 원인이었습니다.
   대신 짧은 초록 선 하나 — 섹션이 시작된다는 것만 말합니다. */
h2{position:relative;padding-top:24px;font-size:clamp(26px,3vw,33px);line-height:1.16;
  letter-spacing:-.035em;color:var(--ds-ink-strong);margin:0 0 8px}
h2::before{content:'';position:absolute;top:0;left:0;width:36px;height:2px;background:var(--ds-brand)}
h3{font-size:17px;line-height:var(--ds-lh-title);color:var(--ds-ink-strong);margin:0 0 6px}
.lead{color:var(--ds-muted);margin:0 0 22px;max-width:64ch}
.panel{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:20px;
  padding:28px;box-shadow:var(--ds-sh-sm)}
.panel + .panel{margin-top:16px}
.warn{background:var(--ds-amber-soft);border:1px solid var(--ds-amber-line);
  border-radius:var(--ds-r-lg);padding:18px 20px;font-size:14px}
.warn b{color:#8A5A0F}
.tip{background:var(--ds-mint-soft);border:1px solid var(--ds-mint-line);
  border-radius:var(--ds-r-lg);padding:18px 20px;font-size:14px}
.tip b{color:var(--ds-mint)}
.note{font-size:12.5px;color:var(--ds-muted);margin:14px 0 0}

/* ── 표 ───────────────────────────────────────────────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px}
table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:var(--ds-lh-ui);min-width:620px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--ds-line);vertical-align:top}
th{font:700 10.5px var(--ds-mono);letter-spacing:var(--ds-ls-mono);color:var(--ds-muted);
  text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--ds-line-strong)}
tbody tr:last-child td{border-bottom:none}
td.name{font-weight:700;color:var(--ds-ink-strong);white-space:nowrap}
td.num{font:700 13px var(--ds-mono);white-space:nowrap;color:var(--ds-ink-strong)}
tr.top td{background:var(--ds-brand-soft)}
tr.top td.name::after{content:'추천';margin-left:8px;padding:2px 7px;border-radius:var(--ds-r-pill);
  background:var(--ds-neon);color:var(--ds-ink-strong);font:700 9.5px var(--ds-mono);
  letter-spacing:var(--ds-ls-mono);vertical-align:middle}

code{font:400 12px var(--ds-mono);background:var(--ds-surface-2);border:1px solid var(--ds-line);
  border-radius:6px;padding:2px 6px;color:var(--ds-ink-strong);white-space:nowrap}
/* 터미널에 그대로 칠 줄. 길면 가로로 스크롤되게 두고, 줄바꿈으로 깨지지 않게 합니다. */
.cmd{display:block;margin:11px 0 0;padding:13px 15px;background:var(--ds-ink-strong);color:#EBEBE7;
  border-radius:var(--ds-r-sm);font:400 13px var(--ds-mono);line-height:1.6;
  overflow-x:auto;white-space:pre;-webkit-overflow-scrolling:touch}
.cmd::before{content:'$ ';color:var(--ds-on-dark)}
.cmd.plain::before{content:''}
kbd{font:700 11.5px var(--ds-mono);background:var(--ds-surface-2);border:1px solid var(--ds-line-strong);
  border-bottom-width:2px;border-radius:6px;padding:2px 7px;color:var(--ds-ink-strong);white-space:nowrap}

/* ── 카드 그리드 ──────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards article{background:var(--ds-surface);border:1px solid var(--ds-line);
  border-radius:16px;padding:22px}
.cards .when{font:700 10.5px var(--ds-mono);letter-spacing:var(--ds-ls-mono);color:var(--ds-muted);
  text-transform:uppercase;display:block;margin-bottom:9px}
.cards b{display:block;font-size:15px;color:var(--ds-ink-strong);margin-bottom:6px}
.cards p{margin:0;font-size:13.5px;color:var(--ds-muted);line-height:var(--ds-lh-ui)}

/* ── 번호가 붙은 단계 ─────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps > li{counter-increment:step;position:relative;padding:0 0 26px 52px;margin:0}
.steps > li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:1px;
  width:34px;height:34px;border-radius:10px;background:var(--ds-ink-strong);color:var(--ds-on-dark);
  display:grid;place-items:center;font:700 12px var(--ds-mono)}
/* 세로선은 단계가 이어진다는 뜻입니다. 마지막 항목에는 그리지 않습니다. */
.steps > li:not(:last-child)::after{content:'';position:absolute;left:17px;top:42px;bottom:8px;
  width:1px;background:var(--ds-line-strong)}
.steps h3{margin:6px 0 8px}
.steps p{margin:0;color:var(--ds-muted);font-size:14px}
.steps p + p{margin-top:9px}
.steps > li:last-child{padding-bottom:0}

/* ── 두 갈래 (Mac / Windows) ──────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.split > div{background:var(--ds-surface-2);border:1px solid var(--ds-line);
  border-radius:var(--ds-r-md);padding:16px 18px}
.split h4{margin:0 0 4px;font:700 11px var(--ds-mono);letter-spacing:var(--ds-ls-mono);
  color:var(--ds-ink-strong);text-transform:uppercase}
.split p{margin:8px 0 0;font-size:12.5px;color:var(--ds-muted);line-height:var(--ds-lh-ui)}

/* ── 붙여넣기용 문장 ──────────────────────────────────── */
.say{margin:0 0 16px;padding:16px 18px;background:var(--ds-surface);border:1px solid var(--ds-line);
  border-radius:var(--ds-r-md)}
.say h4{margin:0 0 8px;font-size:14.5px;color:var(--ds-ink-strong)}
.say p{margin:0;font-size:13.5px;color:var(--ds-muted);line-height:var(--ds-lh-ui)}
/* 예전에는 이 칸이 거의 검정(--ds-ink-strong)이었습니다. 밝은 종이색 바탕에서 대비가
   최대치라 시선을 세게 뺏었고, 한 페이지에 스물 몇 개가 이어지니 산만했습니다.
   무엇보다 이건 터미널에 치는 게 아니라 채팅창에 붙여넣는 문장입니다 —
   터미널의 시각 언어를 엉뚱한 데 빌려 쓰고 있었습니다. (.cmd 는 진짜 터미널이라 검게 둡니다)
   대신 한 톤 눌러 앉힌 종이색 + 테두리로, 입력칸처럼 조용히 구분되게 합니다.

   오른쪽을 비워두는 건 복사 버튼 자리입니다(copy.js). 글이 버튼 밑으로 들어가면 안 됩니다. */
.quote{position:relative;display:block;margin-top:11px;padding:12px 76px 12px 14px;
  background:var(--ds-surface-2);color:var(--ds-ink);border:1px solid var(--ds-line-strong);
  border-radius:var(--ds-r-sm);font-size:13.5px;line-height:var(--ds-lh-ui)}
/* '붙여넣기용' 라벨을 뗐습니다. 복사 버튼이 붙기 전에는 이 칸이 뭔지 알려주는 유일한 단서였지만,
   버튼이 생긴 뒤로는 같은 말을 두 번 하는 셈이 됐습니다. 한 페이지에 마흔여덟 번 반복되니
   그 자체가 읽는 걸 방해했습니다. 뜻이 담긴 두 종류만 라벨을 남깁니다. */
.quote.bad::before,.quote.ex::before{display:block;font:700 9.5px var(--ds-mono);
  letter-spacing:var(--ds-ls-mono);margin-bottom:6px}
.quote.bad{background:var(--ds-red-soft);color:var(--ds-red);border:1px solid #E8CFC7}
.quote.bad::before{content:'이렇게 말하면 안 됩니다';color:var(--ds-red)}
/* 예시 — 그대로 쓸 문장이 아니라 "이런 식"을 보여주는 것. 복사 버튼이 붙지 않습니다. */
.quote.ex::before{content:'예를 들면';color:var(--ds-muted)}
/* 버튼이 안 붙는 것들은 오른쪽 여백도 필요 없습니다. */
.quote.bad,.quote.ex{padding-right:14px}

/* 밝은 칸 위의 버튼이 기본입니다. 검은 칸(.cmd)에서만 뒤집습니다. */
.quote-copy{position:absolute;top:9px;right:10px;font:700 9.5px var(--ds-mono);
  letter-spacing:var(--ds-ls-mono);padding:5px 10px;border-radius:var(--ds-r-pill);
  border:1px solid var(--ds-line-strong);background:var(--ds-surface);color:var(--ds-ink-strong);
  cursor:pointer;transition:background .13s,color .13s,border-color .13s}
/* 쉰여섯 개가 진하게 떠 있으면 그 자체로 시끄럽습니다. 눈에는 띄되 뒤로 물러나 있다가
   가까이 가면 또렷해집니다. 아예 감추지는 않습니다 — 감추면 복사할 수 있다는 걸 모릅니다.
   불투명도로 흐리게 하지 않는 이유: 9.5px 굵은 글씨라 대비가 기준 아래로 떨어집니다.
   테두리와 글자색만 한 단계 물립니다(#66665F 는 5:1 을 넘습니다). */
.quote-copy{color:var(--ds-muted);border-color:var(--ds-line)}
.quote:hover .quote-copy,.quote-copy:hover,.quote-copy:focus-visible{
  color:var(--ds-ink-strong);border-color:var(--ds-line-strong)}
.quote-copy:hover{border-color:var(--ds-brand);color:var(--ds-brand)}
.quote-copy:focus-visible{outline:2px solid var(--ds-brand);outline-offset:2px}
.quote-copy.done{background:var(--ds-neon);border-color:var(--ds-neon);color:var(--ds-ink-strong)}
.copy-wrap > .quote-copy{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:#EBEBE7}
.copy-wrap > .quote-copy:hover{background:rgba(255,255,255,.19);color:#fff;border-color:rgba(255,255,255,.4)}
.copy-wrap > .quote-copy:focus-visible{outline-color:var(--ds-neon)}
/* 터미널 명령의 복사 버튼. .cmd 자체가 가로 스크롤되므로
   스크롤되지 않는 겉포장에 버튼을 답니다(copy.js 가 씌웁니다). */
.copy-wrap{position:relative}
.copy-wrap > .cmd{margin-top:11px}
.cmd.has-copy{padding-right:78px}
.copy-wrap > .quote-copy{top:11px;right:10px}

@media print{.quote-copy{display:none}.quote{padding-right:14px}.cmd.has-copy{padding-right:15px}}

/* ── 증상 → 원인 → 처치 ──────────────────────────────── */
.sos{border:1px solid var(--ds-line);border-radius:var(--ds-r-lg);background:var(--ds-surface);
  padding:20px 22px;margin-bottom:12px}
.sos > b{display:block;font-size:15px;color:var(--ds-ink-strong);margin-bottom:10px}
.sos .why{font-size:13.5px;color:var(--ds-muted);margin:0 0 10px;line-height:var(--ds-lh-ui)}
.sos .do{font-size:14px;margin:0;color:var(--ds-ink)}
.sos .do::before{content:'→';color:var(--ds-brand);font-weight:700;margin-right:8px}

/* ── 용어 ─────────────────────────────────────────────── */
.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px;margin:0}
.terms dt{font-weight:700;color:var(--ds-ink-strong);font-size:14.5px;
  padding-top:16px;border-top:1px solid var(--ds-line)}
.terms dd{margin:5px 0 16px;font-size:13.5px;color:var(--ds-muted);line-height:var(--ds-lh-ui)}

/* ── 출처 ─────────────────────────────────────────────── */
.src{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:18px}
.src a{display:block;padding:13px 15px;background:var(--ds-surface);border:1px solid var(--ds-line);
  border-radius:var(--ds-r-md);text-decoration:none;font-size:13px;font-weight:700;color:var(--ds-ink-strong)}
.src a span{display:block;font:400 11px var(--ds-mono);color:var(--ds-muted);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis}
.src a:hover{border-color:var(--ds-brand-line);background:var(--ds-brand-soft)}

/* ── 다음 자료로 ──────────────────────────────────────── */
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.jump a{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:var(--ds-r-pill);
  background:var(--ds-surface);border:1px solid var(--ds-line-strong);text-decoration:none;
  font-size:13px;font-weight:700;color:var(--ds-ink-strong)}
.jump a:hover{border-color:var(--ds-brand-line);background:var(--ds-brand-soft);color:var(--ds-brand-strong)}

footer{border-top:1px solid var(--ds-line);margin-top:40px;background:var(--ds-surface)}
footer .foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:26px 0;font-size:12.5px;color:var(--ds-muted)}

@media(max-width:860px){
  .cards,.cards.two,.split,.terms{grid-template-columns:1fr}
  .shell{padding:0 18px}
  .hero{padding:38px 0 22px}
  .terms dd{margin-bottom:14px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.nav-actions,.jump{display:none}}

/* 원문 병기 — 공식 문서의 영어 문장을 한글 아래에 작게 답니다.
   번역만 실으면 "정말 저렇게 쓰여 있나"를 확인할 방법이 없습니다. */
.orig{display:block;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.14);
  font:400 11.5px var(--ds-mono);color:#A9A9A2;line-height:1.6;white-space:normal}
.say .from{display:inline-block;margin-bottom:8px;font:700 9.5px var(--ds-mono);
  letter-spacing:var(--ds-ls-mono);color:var(--ds-brand);text-transform:uppercase}

/* ── 모델 목록 (모델 지도) ────────────────────────────── */
.dgroup{margin-bottom:20px}
.dgroup-h{font:700 10.5px var(--ds-mono);letter-spacing:var(--ds-ls-mono);color:var(--ds-muted);
  text-transform:uppercase;margin-bottom:10px}
.dchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:10px}
.dchip{position:relative;display:block;padding:16px 18px;border-radius:var(--ds-r-md);
  background:var(--ds-surface);border:1px solid var(--ds-line);text-decoration:none;
  transition:border-color .18s,transform .18s}
.dchip:hover{border-color:var(--ds-brand-line);transform:translateY(-2px)}
.dchip.hot{border-color:var(--ds-brand-line);background:var(--ds-brand-soft)}
.dchip b{display:block;font-size:15px;color:var(--ds-ink-strong);margin-bottom:5px}
.dchip span{display:block;font-size:12.5px;color:var(--ds-muted);line-height:var(--ds-lh-ui)}
.dchip i{position:absolute;top:14px;right:14px;font:700 9px var(--ds-mono);font-style:normal;
  letter-spacing:var(--ds-ls-mono);padding:3px 7px;border-radius:var(--ds-r-pill);
  background:var(--ds-neon);color:var(--ds-ink-strong)}
.cgroup{margin-top:18px}
.cgroup-h{font:700 10.5px var(--ds-mono);letter-spacing:var(--ds-ls-mono);color:var(--ds-brand);
  text-transform:uppercase;margin-bottom:6px}
.maker-head .ghost-link{margin-left:auto}
td.name a{color:var(--ds-ink-strong);text-decoration:none;border-bottom:2px solid var(--ds-brand-line)}
td.name a:hover{color:var(--ds-brand);border-color:var(--ds-brand)}

/* ── 로고 ─────────────────────────────────────────────── */
.logo{display:inline-block;vertical-align:-2px;flex:0 0 auto}
.maker-head .logo{vertical-align:-3px;margin-right:2px}

/* ── 비교 막대 ────────────────────────────────────────── */
/* 색은 하나뿐입니다. 회사 구분은 왼쪽 로고가 합니다 —
   네 회사를 색으로 나누면 적록색각이상에서 초록과 주황이 붙습니다. */
.bars{display:grid;gap:2px}
.bar{display:grid;grid-template-columns:minmax(120px,150px) 1fr 58px;align-items:center;gap:12px;
  padding:5px 8px;border-radius:8px}
.bar:hover{background:var(--ds-surface-2)}
.bar-n{display:flex;align-items:center;gap:7px;min-width:0;color:var(--ds-ink);
  font-size:12.5px;font-weight:700;line-height:var(--ds-lh-ui)}
.bar-n span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-t{height:15px;background:var(--ds-surface-3);border-radius:4px;overflow:hidden}
.bar-t > i{display:block;height:100%;background:var(--ds-brand);border-radius:0 4px 4px 0;
  min-width:3px;transition:width .5s ease}
.bar-v{font:700 12.5px var(--ds-mono);color:var(--ds-ink-strong);text-align:right;white-space:nowrap}
@media(max-width:620px){
  .bar{grid-template-columns:minmax(96px,110px) 1fr 50px;gap:8px}
  .bar-n{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){.bar-t > i{transition:none}}

/* 출처 한 줄 — 페이지 맨 아래에 작게. */
.credit{margin-top:26px;padding-top:16px;border-top:1px solid var(--ds-line);
  font-size:11.5px;color:var(--ds-muted);line-height:var(--ds-lh-ui)}
.mhead .tag,.maker-head .tag,.dgroup-h{display:inline-flex;align-items:center;gap:7px}
.makerline{display:flex;align-items:center;gap:9px;margin:18px 0 0;padding:12px 15px;
  border-radius:var(--ds-r-md);background:var(--ds-surface-2);border:1px solid var(--ds-line);
  font-size:13px;color:var(--ds-muted);max-width:56ch}
.pricepos{margin-top:18px;padding-top:18px;border-top:1px solid var(--ds-line)}
.pricepos-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;
  margin-bottom:9px}
.pricepos-h b{font-size:13px;color:var(--ds-ink-strong)}
.pricepos-h span{font-size:12px;color:var(--ds-muted)}
.pricepos-s{display:flex;justify-content:space-between;gap:8px;margin-top:7px;
  font:400 11px var(--ds-mono);color:var(--ds-muted)}
.pricepos-s span:nth-child(2){color:var(--ds-brand);font-weight:700}

/* ── 체크리스트 ───────────────────────────────────────── */
/* 카드 여섯 장으로 두면 "카드가 여섯 개"로 읽힙니다. 체크리스트는
   체크리스트처럼 생겨야 합니다 — 위에서 아래로, 네모 칸을 하나씩 지우며. */
.check{list-style:none;margin:0;padding:0}
.check li{position:relative;padding:17px 0 17px 40px;border-bottom:1px solid var(--ds-line)}
.check li:last-child{border-bottom:none;padding-bottom:0}
.check li::before{content:'';position:absolute;left:0;top:20px;width:18px;height:18px;
  border-radius:5px;border:2px solid var(--ds-line-strong)}
.check li:hover::before{border-color:var(--ds-brand)}
.check b{display:block;font-size:15.5px;color:var(--ds-ink-strong);margin-bottom:5px;
  letter-spacing:-.01em}
.check p{margin:0;font-size:13.5px;color:var(--ds-muted);line-height:var(--ds-lh-ui)}

/* 한글 어절이 줄 끝에서 쪼개지지 않게 합니다("끝납니/다" 방지). 자료 페이지 전체에 적용.
   긴 영문 주소·코드는 overflow-wrap 이 받아서 칸 밖으로 넘치지 않습니다.
   코드블록(pre)은 각 페이지가 break-word 로 따로 지정합니다. */
body{word-break:keep-all;overflow-wrap:break-word}