/* guides 공용 스타일 (세션77, D2 파일럿) — 정적 콘텐츠 페이지 전용.
   토큰은 DESIGN-SPEC 기준(bg #FBFAF7 · ink #16140F · muted #6B655A · 보더 #E3DED3 · 액센트 #D6361F). */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #FBFAF7; color: #16140F; font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; line-height: 1.7; }
.serif { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }

.g-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 6vw, 80px); border-bottom: 1.5px solid #16140F; position: sticky; top: 0; background: rgba(251, 250, 247, .92); backdrop-filter: blur(8px); z-index: 40; }
.g-nav .brand { display: flex; align-items: center; text-decoration: none; color: #16140F; font-weight: 800; font-size: 15px; } /* gap 제거 — 'atspreview .com' 틈 사고(세션88) */
.g-nav .brand .dot { color: #D6361F; }
.g-nav .cta { text-decoration: none; background: #16140F; color: #FBFAF7; font-weight: 700; font-size: 13px; padding: 10px 16px; }

.g-wrap { max-width: 840px; margin: 0 auto; padding: 52px clamp(20px, 5vw, 40px) 80px; }
.g-wrap.g-hub { max-width: 1000px; } /* 허브(목록)만 넓게 — 본문 12편은 읽기 폭 840 유지(세션88) */
.g-crumbs { font-size: 12px; color: #A8A192; margin-bottom: 18px; }
.g-crumbs a { color: #6B655A; text-decoration: none; }
.g-kicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #6B655A; margin-bottom: 10px; }
h1 { font-family: 'Newsreader', Georgia, serif; font-size: clamp(30px, 4.6vw, 42px); font-weight: 600; line-height: 1.15; margin-bottom: 14px; }
.g-meta { font-size: 12.5px; color: #A8A192; margin-bottom: 34px; padding-bottom: 22px; border-bottom: 1px solid #E3DED3; }
.g-lead { font-size: 17px; line-height: 1.75; color: #3A352C; margin-bottom: 34px; }
h2 { font-family: 'Newsreader', Georgia, serif; font-size: 25px; font-weight: 600; margin: 44px 0 12px; line-height: 1.25; }
p { font-size: 15px; color: #3A352C; margin: 12px 0; }
ul, ol { margin: 12px 0 12px 22px; font-size: 15px; color: #3A352C; }
li { margin: 6px 0; }
strong { color: #16140F; }

.g-example { border: 1.5px solid #16140F; background: #fff; margin: 20px 0; }
.g-example .cap { padding: 9px 14px; background: #16140F; color: #FBFAF7; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.g-example pre { padding: 14px 16px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: #3A352C; overflow-x: auto; }
.g-example .bad { color: #8A4A3E; }

.g-note { border-left: 3px solid #D6361F; padding: 2px 0 2px 14px; margin: 18px 0; font-size: 14.5px; color: #3A352C; }

.g-cta { border: 1.5px solid #16140F; background: #16140F; color: #FBFAF7; padding: 26px 26px; margin: 44px 0; }
.g-cta h3 { font-family: 'Newsreader', Georgia, serif; font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.g-cta p { color: #C9C3B6; font-size: 14px; margin: 0 0 16px; }
.g-cta a { display: inline-block; background: #D6361F; color: #FBFAF7; text-decoration: none; font-weight: 700; font-size: 14px; padding: 12px 20px; }
.g-cta .sub { font-size: 12px; color: #A8A192; margin-top: 10px; }

.g-faq { border: 1.5px solid #16140F; background: #fff; margin: 40px 0; }
.g-faq .head { padding: 13px 18px; background: #16140F; color: #FBFAF7; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.g-faq .qa { padding: 16px 18px; border-top: 1px solid #E3DED3; }
.g-faq .qa:first-of-type { border-top: none; }
.g-faq h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.g-faq p { font-size: 13.5px; margin: 0; }

.g-related { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid #E3DED3; }
.g-related .label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6B655A; margin-bottom: 12px; }
.g-related a { display: block; color: #16140F; text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 0; border-bottom: 1px solid #F0ECE3; }
.g-related a span { color: #D6361F; }

.g-footer { padding: 26px clamp(20px, 6vw, 80px); border-top: 1.5px solid #16140F; font-size: 12px; color: #A8A192; display: flex; gap: 18px; flex-wrap: wrap; }
.g-footer a { color: #6B655A; text-decoration: none; }

/* 허브 인덱스 */
.g-list { display: grid; gap: 0; border: 1.5px solid #16140F; background: #fff; }
.g-card { display: block; padding: 24px 24px; text-decoration: none; color: #16140F; border-top: 1px solid #E3DED3; }
.g-card:first-child { border-top: none; }
.g-card .num { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 15px; color: #D6361F; }
.g-card h2 { margin: 6px 0 8px; font-size: 22px; }
.g-card p { font-size: 14px; color: #6B655A; margin: 0; }