/* backend/public/site/site.css — 공개 SEO 가이드(서버 렌더링) 스타일. 값은 tokens.css 변수만 쓴다 (색 리터럴 금지, GuidePagesTest) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-family); font-size: var(--fs-body); line-height: var(--line-height);
  color: var(--color-text-primary); background: var(--color-bg-subtle); word-break: keep-all; overflow-wrap: anywhere;
}
a { color: var(--color-blue-primary); text-decoration: none; }
a:hover { color: var(--color-blue-strong); text-decoration: underline; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--color-blue-primary); outline-offset: 2px; border-radius: var(--radius-badge); }

.gd-wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--space-4); }

/* 헤더 */
.gd-header { background: var(--color-bg-default); border-bottom: 1px solid var(--color-line-default); position: sticky; top: 0; z-index: 10; }
.gd-header-row { display: flex; align-items: center; gap: var(--space-5); min-height: 60px; flex-wrap: wrap; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.gd-brand { font-weight: var(--fw-title-1); font-size: var(--fs-title-2); color: var(--color-text-primary); letter-spacing: var(--ls-title-2); }
.gd-brand:hover { color: var(--color-text-primary); text-decoration: none; }
.gd-brand span { color: var(--color-blue-primary); }
.gd-nav { display: flex; gap: var(--space-1); flex-wrap: wrap; flex: 1 1 auto; }
.gd-nav a { color: var(--color-text-secondary); font-size: var(--fs-label); font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); }
.gd-nav a:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); text-decoration: none; }
.gd-nav a[aria-current="page"] { color: var(--color-blue-primary); background: var(--color-blue-light); }

/* 버튼 (§3.3) */
.gd-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-control); font-weight: 700; font-size: var(--fs-label);
}
.gd-btn-primary { background: var(--color-blue-primary); color: var(--color-on-primary); }
.gd-btn-primary:hover { background: var(--color-blue-strong); color: var(--color-on-primary); text-decoration: none; }

/* 본문 */
.gd-main { padding-top: var(--space-6); padding-bottom: var(--space-9); }
.gd-crumbs { font-size: var(--fs-caption); color: var(--color-text-tertiary); margin-bottom: var(--space-4); }
.gd-crumbs a { color: var(--color-text-secondary); }
.gd-crumbs .sep { margin: 0 var(--space-2); }
.gd-article {
  background: var(--color-bg-default); border-radius: var(--radius-card-lg); box-shadow: var(--shadow-card);
  padding: var(--space-8) var(--space-7);
}
.gd-hero { border-bottom: 1px solid var(--color-line-default); padding-bottom: var(--space-6); margin-bottom: var(--space-6); }
.gd-hero h1 { font-size: var(--fs-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); line-height: 1.3; margin: 0 0 var(--space-3); }
.gd-lead { font-size: var(--fs-title-3); color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.gd-meta { font-size: var(--fs-caption); color: var(--color-text-tertiary); margin: 0; }

.gd-article h2 { font-size: var(--fs-title-1); font-weight: var(--fw-title-1); letter-spacing: var(--ls-title-1); margin: var(--space-8) 0 var(--space-4); line-height: 1.35; }
.gd-article h2:first-of-type { margin-top: 0; }
.gd-article h3 { font-size: var(--fs-title-2); font-weight: var(--fw-title-2); letter-spacing: var(--ls-title-2); margin: var(--space-6) 0 var(--space-3); }
.gd-article p, .gd-article li { color: var(--color-text-primary); }
.gd-article p { margin: 0 0 var(--space-4); }
.gd-article ul, .gd-article ol { padding-left: var(--space-6); margin: 0 0 var(--space-4); }
.gd-article li { margin-bottom: var(--space-2); }
.gd-article strong { font-weight: 700; }

/* 코드 예시 */
.gd-article code { font-size: 0.92em; background: var(--color-bg-subtle); border-radius: var(--radius-badge); padding: 1px var(--space-1); }
.gd-code { background: var(--color-bg-subtle); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-4); overflow-x: auto; font-size: var(--fs-caption); line-height: 1.6; }
.gd-code code { background: none; padding: 0; font-size: inherit; }

/* 요약 상자 · 정의 */
.gd-summary { background: var(--color-blue-light); border-radius: var(--radius-card); padding: var(--space-5) var(--space-6); margin: 0 0 var(--space-6); }
.gd-summary p:last-child, .gd-summary ul:last-child { margin-bottom: 0; }
.gd-summary-title { font-weight: 700; color: var(--color-blue-strong); margin-bottom: var(--space-2); }
.gd-note { background: var(--color-bg-subtle); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); font-size: var(--fs-label); color: var(--color-text-secondary); margin: 0 0 var(--space-4); }

/* 단계 · 격자 카드 */
.gd-steps { list-style: none; padding: 0 !important; counter-reset: step; display: grid; gap: var(--space-3); }
.gd-steps > li { counter-increment: step; position: relative; padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 40px); background: var(--color-bg-subtle); border-radius: var(--radius-card); margin: 0; }
.gd-steps > li::before {
  content: counter(step); position: absolute; left: var(--space-4); top: var(--space-4); width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--color-blue-primary); color: var(--color-on-primary); font-weight: 700; font-size: var(--fs-caption);
  display: flex; align-items: center; justify-content: center;
}
.gd-steps > li > strong { display: block; margin-bottom: var(--space-1); }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.gd-tile { background: var(--color-bg-subtle); border-radius: var(--radius-card); padding: var(--space-5); }
.gd-tile h3 { margin-top: 0 !important; font-size: var(--fs-title-3) !important; }
.gd-tile p { font-size: var(--fs-label); color: var(--color-text-secondary); margin: 0; }
.gd-tag { display: inline-block; font-size: var(--fs-small); font-weight: var(--fw-small); letter-spacing: var(--ls-small); color: var(--color-blue-primary); margin-bottom: var(--space-2); }

/* 표 */
.gd-table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); border-radius: var(--radius-card); border: 1px solid var(--color-line-default); }
.gd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-label); min-width: 520px; }
.gd-table th, .gd-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line-strong); }
.gd-table thead th { background: var(--color-bg-subtle); color: var(--color-text-tertiary); font-size: var(--fs-caption); font-weight: 600; }
.gd-table tbody tr:last-child td { border-bottom: 0; }

/* FAQ */
.gd-faq { border-bottom: 1px solid var(--color-line-default); padding: var(--space-4) 0; }
.gd-faq summary { cursor: pointer; font-weight: 700; list-style-position: outside; }
.gd-faq p { margin: var(--space-3) 0 0; color: var(--color-text-secondary); }

/* 하단: 다른 가이드 · CTA */
.gd-section { margin-top: var(--space-8); }
.gd-main > .gd-section h2 { font-size: var(--fs-title-2); font-weight: var(--fw-title-2); margin: 0 0 var(--space-4); }
.gd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.gd-card { display: block; background: var(--color-bg-default); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-5); color: var(--color-text-primary); }
.gd-card:hover { box-shadow: var(--shadow-float); text-decoration: none; color: var(--color-text-primary); }
.gd-card-title { display: block; font-weight: 700; margin-bottom: var(--space-2); }
.gd-card-desc { display: block; font-size: var(--fs-label); color: var(--color-text-secondary); }
.gd-cta { margin-top: var(--space-8); background: var(--color-bg-default); border-radius: var(--radius-card-lg); box-shadow: var(--shadow-card); padding: var(--space-7); text-align: center; }
.gd-cta h2 { font-size: var(--fs-title-1); font-weight: var(--fw-title-1); margin: 0 0 var(--space-2); }
.gd-cta p { color: var(--color-text-secondary); margin: 0 0 var(--space-5); }

.gd-footer { border-top: 1px solid var(--color-line-default); background: var(--color-bg-default); padding: var(--space-6) 0; font-size: var(--fs-caption); color: var(--color-text-tertiary); }

/* 공개 메인 (Plan 3A) */
.gd-nav-link { color: var(--color-text-secondary); font-size: var(--fs-label); font-weight: 600; }
.hm-main { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.hm-hero { text-align: center; max-width: 720px; margin: 0 auto; }
.hm-hero h1 { font-size: var(--fs-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); line-height: 1.3; margin: 0 0 var(--space-4); }
.hm-form { display: flex; gap: var(--space-2); margin: var(--space-6) auto 0; max-width: 560px; background: var(--color-bg-default);
  border-radius: var(--radius-card-lg); box-shadow: var(--shadow-float); padding: var(--space-2); }
.hm-form input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; font: inherit; font-size: var(--fs-title-3); padding: var(--space-3) var(--space-4); background: transparent; color: var(--color-text-primary); }
.hm-form input:focus-visible { outline: 2px solid var(--color-blue-primary); border-radius: var(--radius-control); }
.hm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hm-msg { margin: var(--space-3) auto 0; max-width: 560px; background: var(--notice-error-bg); color: var(--notice-error-text); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); font-size: var(--fs-label); }
.hm-hint { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--color-text-tertiary); }
.hm-rules { background: var(--color-bg-default); }
.hm-rules td:first-child { font-weight: 600; white-space: nowrap; }
.hm-rules-cta { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; font-size: var(--fs-label); }

@media (max-width: 640px) {
  .gd-header { position: static; }
  .gd-header-cta { display: none; }
  .gd-article { padding: var(--space-6) var(--space-4); border-radius: var(--radius-card); }
  .gd-hero h1 { font-size: var(--fs-title-1); }
  .gd-article h2 { font-size: var(--fs-title-2); }
  .gd-cta { padding: var(--space-6) var(--space-4); }
  .hm-main { padding-top: var(--space-7); }
  .hm-hero h1 { font-size: var(--fs-title-1); }
  .hm-form { flex-direction: column; }
}