/*
  파일: common/css/components.css
  설명: 버튼 / 카드 / 칩 / CTA 등 공통 컴포넌트.
        콘텐츠 표면은 플랫(테두리+라운드), 그림자는 오버레이 전용.
*/

/* ── 버튼 ───────────────────────────────────────────── */
.btn { white-space: nowrap; font-weight: 500; border-radius: var(--radius-md); }
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background: color-mix(in srgb, var(--color-primary) 88%, #000);
  border-color: color-mix(in srgb, var(--color-primary) 88%, #000);
}
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── 기능 카드 (플랫) ───────────────────────────────── */
.feature-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: border-color .15s ease;
}
.feature-card:hover { border-color: var(--color-primary); }
.feature-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.feature-title { font-size: 1.1rem; margin-bottom: .5rem; }
.feature-desc { color: var(--color-muted); font-size: .95rem; }

/* ── 활용 분야 칩 ───────────────────────────────────── */
.usecase-chip {
  display: inline-block;
  padding: .6rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-weight: 500;
  background: var(--color-bg);
}

/* ── 최종 CTA ───────────────────────────────────────── */
.cta-section { padding: var(--section-py) 0; }
.cta-box {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
  border-radius: var(--radius-card);
  padding: 3rem 1.5rem;
}
.cta-title { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .75rem; }
.cta-lead { color: var(--color-muted); max-width: 52ch; margin: 0 auto 1.75rem; }

/* ── 브레드크럼 ─────────────────────────────────────── */
.breadcrumb-nav { padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.breadcrumb-nav a { color: var(--color-muted); }
.breadcrumb-nav .breadcrumb-item.active { color: var(--color-text); }

/* ── 아코디언(FAQ) 플랫 ─────────────────────────────── */
.accordion-item { border-color: var(--color-border); }
.accordion-button:not(.collapsed) {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: var(--color-primary); }