/* ============================================================
   page-spec-glossary.css
   규격 항목 해설 — 용어사전(dl) 중심 단일 컬럼 레퍼런스 페이지
   Title: Nanum Gothic 800 / Body: Nanum Gothic 400
   Layout signature: 앵커 인덱스 + 세로 스택 용어사전 카드
   Animation: hover만 사용 (스크롤 리빌 없음)
   ============================================================ */

:root {
  --cta-primary: #78350F;
  --cta-secondary: #FFFBEB;
  --sg-accent: #B45309;
  --sg-ink: #451A03;
  --sg-line: #FDE68A;
  --sg-r-card: 14px 4px;
  --sg-r-pill: 999px;
  --sg-pad-y: 60px;
}

body { font-family: 'Nanum Gothic', -apple-system, sans-serif; font-weight: 400; background: #FFFDF7; color: var(--sg-ink); }
h1, h2, h3 { font-family: 'Nanum Gothic', sans-serif; font-weight: 800; color: var(--sg-ink); letter-spacing: -.01em; }

/* ---- divider: solid rule with square tick (distinct from other pages' dashed/dot dividers) ---- */
.sg-divider { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sg-pad-y); }
.sg-divider::before,
.sg-divider::after { content: ""; flex: 1; height: 2px; background: var(--sg-line); }
.sg-divider span { width: 9px; height: 9px; background: var(--cta-primary); flex-shrink: 0; }

/* ---- intro ---- */
.sg-intro { max-width: 780px; margin: 0 auto; padding: 52px 20px 34px; text-align: center; }
.sg-intro__eyebrow { color: var(--sg-accent); font-weight: 700; font-size: .9rem; letter-spacing: .06em; margin-bottom: 8px; }
.sg-intro h1 { font-size: clamp(1.7rem, 4.2vw, 2.4rem); margin-bottom: 16px; }
.sg-intro p { color: #57330F; line-height: 1.85; margin-bottom: 10px; text-align: left; }

/* ---- anchor index ---- */
.sg-index {
  max-width: 780px; margin: 0 auto 48px; padding: 20px 22px;
  background: var(--cta-secondary); border: 1px solid var(--sg-line); border-radius: var(--sg-r-card);
}
.sg-index__title { font-weight: 700; color: var(--sg-accent); margin-bottom: 12px; font-size: .95rem; }
.sg-index ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.sg-index a {
  display: inline-block; padding: 7px 14px; background: #fff; border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-pill); font-size: .85rem; font-weight: 700; color: var(--cta-primary);
}
.sg-index a:hover { background: var(--cta-primary); color: #fff; border-color: var(--cta-primary); }

/* ---- section shell ---- */
.sg-section { max-width: 860px; margin: 0 auto; padding: 0 20px var(--sg-pad-y); }
.sg-section h2 { font-size: 1.4rem; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 3px solid var(--cta-primary); display: inline-block; }
.sg-section > p { margin-bottom: 16px; line-height: 1.85; color: #57330F; }

/* ---- glossary dl as stacked cards ---- */
.sg-glossary-list { display: flex; flex-direction: column; gap: 14px; }
.sg-glossary-list dt {
  scroll-margin-top: 90px;
  font-size: 1.15rem; font-weight: 800; color: #fff; background: var(--cta-primary);
  padding: 10px 18px; border-radius: var(--sg-r-card);
}
.sg-glossary-list dd {
  margin: -8px 0 0; padding: 22px 20px 4px;
  border: 1px solid var(--sg-line); border-top: none; border-radius: 0 0 var(--sg-r-card);
  background: #fff;
}
.sg-glossary-list dd p { line-height: 1.85; color: #57330F; margin-bottom: 12px; }
.sg-glossary-list dd p:last-child { margin-bottom: 4px; }
.sg-why { padding: 12px 14px; background: var(--cta-secondary); border-left: 4px solid var(--sg-accent); border-radius: 0 8px 8px 0; }
.sg-why strong { color: var(--cta-primary); }

/* ---- checklist cards (hover animation lives here) ---- */
.sg-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; }
.sg-check-card {
  padding: 20px 18px; border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sg-check-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(120, 53, 15, .16);
  border-color: var(--cta-primary);
}
.sg-check-card svg { color: var(--sg-accent); margin-bottom: 10px; }
.sg-check-card h3 { font-size: 1rem; margin-bottom: 8px; }
.sg-check-card p { font-size: .88rem; line-height: 1.7; color: #57330F; }

@media (prefers-reduced-motion: reduce) {
  .sg-check-card { transition: none; }
  .sg-check-card:hover { transform: none; }
}

/* ---- comparison table ---- */
.sg-table-wrap { overflow-x: auto; border-radius: var(--sg-r-card); border: 1px solid var(--sg-line); }
.sg-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.sg-table th, .sg-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--sg-line); }
.sg-table thead th { background: var(--sg-ink); color: #FFFBEB; font-weight: 700; }
.sg-table tbody th { background: var(--cta-secondary); color: var(--cta-primary); font-weight: 700; white-space: nowrap; }
.sg-table tbody tr:last-child td, .sg-table tbody tr:last-child th { border-bottom: none; }
.sg-note { font-size: .85rem; color: var(--sg-accent); margin-top: 10px; }

/* ---- misconception accordion ---- */
.sg-faq { display: flex; flex-direction: column; gap: 10px; }
.sg-faq details { border: 1px solid var(--sg-line); border-radius: var(--sg-r-card); padding: 4px 18px; background: #fff; }
.sg-faq summary { padding: 14px 0; font-weight: 700; color: var(--sg-ink); font-size: 1rem; position: relative; padding-right: 28px; }
.sg-faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.3rem; color: var(--cta-primary); font-weight: 400; }
.sg-faq details[open] summary::after { content: "\2212"; }
.sg-faq .sg-faq-a { padding: 0 0 16px; color: #57330F; line-height: 1.8; }

@media (max-width: 480px) {
  .sg-section h2 { font-size: 1.2rem; }
  .sg-glossary-list dt { font-size: 1.02rem; }
  .sg-index { padding: 16px 16px; }
}