/* ==========================================================
   components/glance.css — 한눈에 보기 (기획서 12.3)
   답 한 문장 + "어떤 데이터인가요?" + "알아둘 점"
   마크업은 tools/lib/layout.js 의 glance()
   ========================================================== */

.glance {
  display: grid; gap: 14px; padding: 18px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.glance-k { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--brand-deep); }
.glance-k .ico { color: var(--brand); }
.glance-answer { margin-top: 6px; font-size: 16.5px; font-weight: 700; line-height: 1.55; letter-spacing: -.03em; color: var(--ink); }
.glance-answer b { font-weight: 900; }
.glance-answer a { color: inherit; text-decoration: underline; text-decoration-color: var(--brand-line); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.glance-answer a:hover { text-decoration-color: var(--brand); }

.glance-sub { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line); }
.glance-sub dt { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.glance-sub dd { margin-top: 2px; font-size: 13px; line-height: 1.65; color: var(--ink-3); }
.glance-sub a { font-weight: 700; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }

@media (min-width: 768px) {
  .glance { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; padding: 22px 24px; }
  .glance-answer { font-size: 18px; }
  .glance-sub { padding-top: 0; padding-left: 24px; border-top: 0; border-left: 1px dashed var(--line); }
}