/* 테이블뚝딱 — /guide 문서 스타일
   base.css의 토큰을 그대로 쓰되, 이 사이트의 브랜드 색(주홍)으로 바꿔 끼운다.
   글 폭(760px)과 리듬은 사이트뚝딱 가이드와 같다 — 같은 회사가 쓴 글로 보이게. */
.gd{
  --brand:#DE4B1F; --brand-700:#a8371a; --brand-600:#c23f18;
  --brand-050:#fff1ec; --brand-100:#fbdccf;
}
.gd{max-width:760px;margin:0 auto;padding:30px 20px 96px}
.gd .crumb{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.gd .crumb a{color:var(--muted)}
.gd .crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.gd .crumb span{margin:0 6px;color:var(--faint)}
.gd .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  color:var(--brand-700);background:var(--brand-050);border:1px solid var(--brand-100);
  border-radius:999px;padding:5px 11px;letter-spacing:-.01em}
.gd h1{font-size:clamp(25px,5.2vw,34px);line-height:1.38;font-weight:900;color:var(--ink);
  letter-spacing:-.045em;margin:14px 0 12px}
.gd .meta{font-size:12.5px;color:var(--faint);margin-bottom:18px}
.gd .lead{font-size:15px;line-height:1.9;color:var(--body)}
.gd .lead b{color:var(--ink)}
.gd h2{font-size:21px;line-height:1.45;font-weight:900;color:var(--ink);letter-spacing:-.04em;
  margin:46px 0 14px;padding-top:6px}
.gd h2 .num{display:inline-block;min-width:26px;height:26px;line-height:26px;text-align:center;
  font-size:13px;font-weight:800;color:#fff;background:var(--brand);border-radius:8px;
  margin-right:9px;vertical-align:2px}
.gd h3{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.03em;margin:26px 0 8px}
.gd p,.gd li{font-size:14.5px;line-height:1.9;color:var(--body)}
.gd p+p{margin-top:12px}
.gd ul,.gd ol{padding-left:20px;margin:10px 0}
.gd li{margin-bottom:6px}
.gd li b,.gd p b{color:var(--ink);font-weight:700}
.gd a{color:var(--brand-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gd figure{margin:18px 0 22px}
.gd figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-sm);background:var(--surface-2)}
.gd figure.narrow img{max-width:380px;margin:0 auto}
.gd figcaption{font-size:12px;line-height:1.7;color:var(--muted);text-align:center;margin-top:9px}
.gd .toc{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px 14px;margin:26px 0 8px}
.gd .toc .ttl{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.02em;margin-bottom:8px}
.gd .toc ol{margin:0;padding-left:18px}
.gd .toc li{font-size:13.5px;margin-bottom:4px}
.gd .toc a{color:var(--body);text-decoration:none}
.gd .toc a:hover{color:var(--brand-700);text-decoration:underline}
.gd .tw{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:14px}
.gd table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:480px}
.gd th,.gd td{padding:11px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);
  line-height:1.6}
.gd th{background:var(--surface-2);font-size:12.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.gd tr:last-child td{border-bottom:0}
.gd td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.gd td b{color:var(--ink)}
.gd .note{border:1px solid var(--line);border-left:3px solid var(--brand);background:var(--surface-2);
  border-radius:0 14px 14px 0;padding:14px 16px;margin:16px 0;font-size:13.5px;line-height:1.8;color:var(--body)}
.gd .note b{color:var(--ink)}
.gd .warn{border:1px solid var(--warn-line);background:var(--warn-soft);border-radius:14px;
  padding:14px 16px;margin:16px 0;font-size:13.5px;line-height:1.8;color:#5e4205}
.gd .cta{margin:34px 0 10px;border:1px solid var(--brand-100);border-radius:20px;padding:24px 22px;
  background:linear-gradient(180deg,var(--brand-050),#fff)}
.gd .cta h2{margin:0 0 8px;font-size:19px}
.gd .cta p{font-size:13.5px;color:var(--body)}
.gd .cta .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.gd .cta small{display:block;margin-top:12px;font-size:11.5px;color:var(--faint);line-height:1.7}
.gd details{border:1px solid var(--line);border-radius:13px;padding:0;margin-bottom:9px;background:var(--surface)}
.gd summary{cursor:pointer;list-style:none;padding:14px 16px;font-size:14px;font-weight:800;color:var(--ink);
  line-height:1.6;position:relative;padding-right:38px}
.gd summary::-webkit-details-marker{display:none}
.gd summary:after{content:"+";position:absolute;right:15px;top:50%;transform:translateY(-50%);
  font-size:18px;font-weight:700;color:var(--faint);line-height:1}
.gd details[open] summary:after{content:"−"}
.gd details .body{padding:0 16px 15px;font-size:13.5px;line-height:1.85;color:var(--body)}
.gd details .body p+p{margin-top:9px}
.gd .src{font-size:11.5px;line-height:1.75;color:var(--faint);margin-top:22px}
.gd .src b{color:var(--muted)}
.gd .more{margin-top:34px;border-top:1px solid var(--line);padding-top:22px}
.gd .more .ttl{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:10px}
.gd .card{display:block;border:1px solid var(--line);border-radius:14px;padding:15px 16px;
  text-decoration:none;background:var(--surface);margin-bottom:9px}
.gd .card:hover{border-color:var(--brand-100);background:var(--brand-050)}
.gd .card b{display:block;font-size:14px;color:var(--ink);font-weight:800;margin-bottom:3px}
.gd .card span{font-size:12.5px;color:var(--muted);line-height:1.7}
@media(max-width:520px){
  .gd{padding:22px 18px 80px}
  .gd h1{letter-spacing:-.03em}
}