/* 홈 하단 정적 콘텐츠 섹션 전용 스타일 (크롤러가 읽을 수 있는 본문) */
/* 전역 선택자를 절대 쓰지 않는다. legal-style.css의 `* { margin:0 }`이 Tailwind
   .container의 auto 마진을 죽여 PC 레이아웃이 왼쪽으로 쏠린 적이 있다. */

.home-static {
  --hs-gold: #c9a84c;
  --hs-gold-light: #e8c870;
  --hs-bg: #0a0d1a;
  --hs-bg2: #0f1528;
  --hs-text: #e8e0cc;
  --hs-muted: rgba(232, 224, 204, 0.62);
  --hs-border: rgba(201, 168, 76, 0.2);

  background: var(--hs-bg);
  color: var(--hs-text);
  font-family: 'Noto Serif KR', 'Noto Sans KR', serif;
  padding: 72px 24px 88px;
  border-top: 1px solid var(--hs-border);
}

.home-static .hs-inner { max-width: 860px; margin: 0 auto; }

.home-static .hs-label {
  display: block; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .22em;
  color: var(--hs-gold); margin-bottom: 10px; text-transform: uppercase;
}

/* h1은 크롤러가 읽을 페이지 제목 역할. React 히어로의 h1은 마운트 후에야 생긴다 */
.home-static h1,
.home-static h2 {
  font-size: clamp(22px, 4vw, 30px); font-weight: 700; line-height: 1.45;
  color: var(--hs-text); margin: 0 0 18px;
}

.home-static h3 {
  font-size: clamp(16px, 2.6vw, 19px); font-weight: 600; line-height: 1.5;
  color: var(--hs-gold-light); margin: 30px 0 10px;
}

.home-static p {
  font-size: 15px; line-height: 2; color: var(--hs-muted); margin: 0 0 14px;
}

.home-static strong { color: var(--hs-text); font-weight: 600; }

.home-static a {
  color: var(--hs-gold); text-decoration: none; border-bottom: 1px solid rgba(201, 168, 76, .35);
}
.home-static a:hover { color: var(--hs-gold-light); }

.home-static section { margin-bottom: 52px; }
.home-static section:last-child { margin-bottom: 0; }

/* 세 체계 카드 */
.home-static .hs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px;
}
.home-static .hs-card {
  background: var(--hs-bg2); border: 1px solid var(--hs-border);
  border-radius: 12px; padding: 22px 20px;
}
.home-static .hs-card h3 { margin-top: 0; }
.home-static .hs-card p { font-size: 14px; line-height: 1.9; }
.home-static .hs-card p:last-child { margin-bottom: 0; }

/* 자주 묻는 질문 */
.home-static .hs-faq {
  border-top: 1px solid var(--hs-border); padding: 18px 0 4px;
}
.home-static .hs-faq h3 { margin: 0 0 8px; color: var(--hs-text); font-size: 16px; }
.home-static .hs-faq p:last-child { margin-bottom: 10px; }

.home-static .hs-note {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hs-border);
  font-size: 13px; line-height: 1.9; color: rgba(232, 224, 204, 0.45);
}

@media (max-width: 720px) {
  .home-static { padding: 52px 20px 64px; }
  .home-static .hs-grid { grid-template-columns: 1fr; }
}