:root { color: #22242a; background: #f7f8fa; font-family: system-ui, 'Malgun Gothic', sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.site-nav { position: fixed; inset: 0 auto 0 0; z-index: 400; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 96px; padding: 13px 12px; border-right: 1px solid #dcdfe4; background: #fff; }
.site-nav-logo { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #22242a; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -.8px; text-decoration: none; }
.site-nav .site-menu { display: grid; gap: 8px; }
.site-nav .site-menu a { display: grid; width: 72px; height: 40px; min-width: 0; min-height: 0; place-items: center; overflow: hidden; border-radius: 9px; color: #69707c; font-size: 11px; font-weight: 800; letter-spacing: -.03em; line-height: 1; text-decoration: none; white-space: nowrap; }
.site-nav .site-menu a:hover, .site-nav .site-menu a:focus-visible, .site-nav .site-menu a[href='/'] { background: #eef3ff; color: #2f6df6; outline: none; }
.site-lang-pick { position: fixed; z-index: 500; top: 22px; right: 28px; min-width: 112px; padding: 9px 10px; border: 1px solid #d3d7de; border-radius: 7px; background: #fff; color: #565b64; font: inherit; font-size: 14px; font-weight: 700; }
html:not([data-site-nav-ready]) .site-nav .site-menu { visibility: hidden; }
html:not([data-site-content-ready]) .site-layout .content-wrap { visibility: hidden; }
.site-layout { display: grid; grid-template-columns: 96px minmax(0, 1fr); min-height: 100vh; }
.site-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; height: 100vh; padding: 13px 12px; border-right: 1px solid #dcdfe4; background: #fff; }
.site-logo { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #22242a; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -.8px; text-decoration: none; }
.site-menu { display: grid; gap: 8px; }
html:not([data-site-nav-ready]) .site-menu { visibility: hidden; }
.site-menu a { display: grid; width: 72px; height: 40px; min-width: 0; min-height: 0; place-items: center; overflow: hidden; border-radius: 9px; color: #69707c; font-size: 11px; font-weight: 800; letter-spacing: -.03em; line-height: 1; text-decoration: none; white-space: nowrap; }
.site-menu a:hover, .site-menu a:focus-visible, .site-menu a[aria-current='page'] { background: #eef3ff; color: #2f6df6; outline: none; }
.site-menu a[aria-current='page'] { background: #2f6df6; color: #fff; }

/* 후원 링크. 메뉴의 다른 칸과 크기는 같게 두고, 잔 아이콘만 색으로 남긴다. */
.site-menu a.site-support, .site-nav .site-menu a.site-support { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 2px; }
.site-menu a.site-support:hover, .site-menu a.site-support:focus-visible { background: #fff1f0; color: #e14b48; }
.site-support-icon { flex: none; color: #ff5e5b; }
.site-support-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.content-wrap { width: min(100%, 1120px); margin: 0 auto; padding: 72px 48px 96px; }
.eyebrow { margin: 0 0 12px; color: #2f6df6; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.05em; line-height: 1.16; }
h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; line-height: 1.3; }
p, li { color: #4f5661; font-size: 16px; line-height: 1.8; }
.lead { max-width: 720px; margin: 22px 0 0; font-size: 18px; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 56px; margin-top: 56px; }
.page-grid:not(:has(.ad-rail)) { grid-template-columns: minmax(0, 760px); }
.article { min-width: 0; }
.section { margin-top: 48px; }
.section h2 { margin-bottom: 10px; }
.card-list { display: grid; gap: 14px; margin-top: 24px; }
.card-list-title { margin: 56px 0 0; font-size: 18px; }
.card { display: block; padding: 22px; border: 1px solid #dde1e7; border-radius: 14px; background: #fff; text-decoration: none; }
.card:hover { border-color: #9bbafc; box-shadow: 0 8px 22px rgb(47 109 246 / 10%); }
.card strong { display: block; color: #22242a; font-size: 17px; }
.card span { display: block; margin-top: 6px; color: #69707c; font-size: 14px; line-height: 1.6; }
.ad-rail { align-self: start; min-height: 600px; padding: 12px; border: 1px dashed #c8ced8; border-radius: 10px; color: #8b929d; font-size: 11px; line-height: 1.5; text-align: center; }
.ad-rail strong { display: block; margin-bottom: 8px; color: #69707c; font-size: 11px; letter-spacing: .06em; }
.page-footer { margin-top: 72px; padding-top: 20px; border-top: 1px solid #dde1e7; color: #7a818d; font-size: 13px; }
.page-footer a { margin-right: 16px; }
@media (max-width: 900px) { .content-wrap { padding: 52px 28px 76px; } .page-grid { grid-template-columns: 1fr; gap: 32px; } .ad-rail { display: none; } }
/* 좁은 화면. 언어 고르개는 fixed 라 자리를 차지하지 않아 오른쪽을 비워두고,
   메뉴는 남는 폭 안에서만 논다 — 넘치면 문서 전체가 가로로 밀려 본문
   오른쪽이 잘린다. */
@media (max-width: 767px) { .site-layout { grid-template-columns: 1fr; } .site-sidebar { position: sticky; z-index: 10; flex-direction: row; gap: 8px; justify-content: flex-start; width: 100%; height: 58px; padding: 8px 100px 8px 12px; border-right: 0; border-bottom: 1px solid #dcdfe4; } .site-menu { display: flex; flex: 1; gap: 3px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .site-menu::-webkit-scrollbar { display: none; } .site-menu a { flex: none; width: auto; height: 36px; padding: 0 7px; font-size: 11px; } .site-menu a.site-support { margin-top: 0; } .site-lang-pick { top: 10px; right: 12px; min-width: 76px; font-size: 11px; } .content-wrap { padding: 42px 20px 64px; } p, li { font-size: 15px; } .lead { font-size: 17px; } }

/* 가이드 글 — 목차로 돌아가는 길, 규격 목록과 표 */
.crumb { margin: 18px 0 0; color: #7a818d; font-size: 13px; }
.crumb a { color: #2f6df6; }
/* 대문의 '편집기 열기'. 읽다가 도구로 넘어가는 단 하나의 길이라 눈에 띄게 둔다. */
.cta { display: inline-block; margin-top: 8px; padding: 13px 26px; border-radius: 10px; background: #2f6df6; color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; }
.cta:hover, .cta:focus-visible { background: #1f57d0; outline: none; }

.spec-list { margin: 16px 0 0; padding-left: 20px; }
.spec-list li { margin-top: 10px; line-height: 1.7; }
.spec-table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 15px; }
.spec-table th, .spec-table td { padding: 11px 12px; border-bottom: 1px solid #e4e7ec; text-align: left; vertical-align: top; line-height: 1.6; }
.spec-table th { background: #f6f8fb; color: #4a505a; font-size: 13px; font-weight: 800; }
.spec-table td:first-child { width: 26%; color: #22242a; font-weight: 700; white-space: nowrap; }
/* 대문에 넣는 그림. 도구가 무엇을 만드는 물건인지 글로만 말해선 전해지지 않는다. */
.shot { margin: 26px 0 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid #dde1e7; border-radius: 12px; background: #fff; }
.shot figcaption { margin-top: 10px; color: #69707c; font-size: 14px; line-height: 1.6; }
/* 완성 인포는 세로로 길다. 폭을 묶지 않으면 한 화면을 통째로 차지한다. */
.shot-tall img { max-width: 360px; margin: 0 auto; }
.shot-tall figcaption { max-width: 360px; margin-left: auto; margin-right: auto; text-align: center; }

/* 글의 작성·수정일. 관리되는 글이라는 표시라 눈에 띌 필요는 없다. */
.meta { margin: 10px 0 0; color: #8a909b; font-size: 13px; }

.example { margin-top: 16px; padding: 12px 14px; border-left: 3px solid #9bbafc; background: #f6f9ff; color: #4a505a; font-size: 15px; }
.example em { color: #22242a; font-style: normal; font-weight: 700; }
/* 좁은 화면에서는 표가 가로로 흐르지 않게 첫 칸의 줄바꿈을 푼다. */
@media (max-width: 640px) {
  .spec-table td:first-child { width: auto; white-space: normal; }
  .spec-table th, .spec-table td { padding: 9px 8px; }
}