/* ============================================================
   Smartix Common Components — 안전한 공통 컴포넌트 CSS
   사용: <link rel="stylesheet" href="/assets/components.css">
        (tokens.css 다음, site-chrome.css 다음, 페이지 inline 직전)

   원칙:
   - 이 CSS는 베이스로만 작동. 페이지 inline이 우선되어 시각 변화 0.
   - 신규 페이지 작성 시 이 파일 link만 걸면 표준 컴포넌트 사용 가능.
   - 위험 큰 컴포넌트(Hero·card 등)는 페이지별 의도된 디자인 보존을 위해 미포함.
   ============================================================ */

/* === Section Head (섹션 제목 + 부제 + 키커) === */
.section-head{
  max-width: var(--max-narrow, 1180px);
  margin: 0 auto 26px;
  padding: 0 28px;
}
.section-head .kicker,
.kicker{
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--purple-600, #6c3bff);
  margin-bottom: 12px;
}
.section-head h2{
  font-size: 32px;
  line-height: 1.12;
  margin: 0 0 8px;
  letter-spacing: -.055em;
}
.section-head p{
  max-width: 1120px;
  margin: 0;
  color: var(--muted, #66708a);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 650;
}
@media(max-width: 1100px){
  .section-head h2{ font-size: 28px; }
}
@media(max-width: 640px){
  .section-head{ padding: 0 20px; }
  .section-head h2{ font-size: 26px; }
}

/* === Eyebrow Chip (히어로/섹션 상단 작은 라벨) === */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  background: var(--purple-100, #f0eaff);
  border: 1px solid var(--purple-200, #ded2ff);
  color: var(--purple-700, #5b28f3);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* === Standard Buttons === */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  padding: 15px 22px;
  font-weight: 950;
  border: 1px solid var(--line, #e7e0ff);
  transition: .2s;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.02em;
}
.btn.primary{
  background: linear-gradient(135deg, var(--purple-600, #6c3bff), var(--purple-800, #5525e7));
  color: #fff;
  box-shadow: var(--shadow-cta, 0 18px 40px rgba(108,59,255,.25));
  border-color: transparent;
}
.btn.secondary{
  background: #fff;
  color: var(--purple-600, #6c3bff);
}
.btn.ghost{
  background: rgba(108,59,255,.06);
  color: var(--purple-700, #5b28f3);
  border-color: transparent;
}
.btn:hover{
  transform: translateY(-2px);
}

/* === Standard CTA Section (큰 보라 박스) === */
.cta{
  border-radius: 32px;
  padding: 38px;
  background: var(--grad-deep, linear-gradient(135deg, #2b0f5f, #5728d8));
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  box-shadow: var(--shadow, 0 24px 70px rgba(28,18,80,.14));
  max-width: 1124px;
  margin: 0 auto;
}
.cta h2{
  margin: 0 0 10px;
  font-size: 30px;
  letter-spacing: -.055em;
  color: #fff;
}
.cta p{
  margin: 0;
  color: rgba(232, 225, 255, .9);
  line-height: 1.75;
  font-weight: 700;
}
@media(max-width: 1100px){
  .cta{ grid-template-columns: 1fr; }
}

/* === Wrap Helper === */
.wrap{
  max-width: var(--max-narrow, 1180px);
  margin: 0 auto;
  padding: 0 28px;
}
@media(max-width: 640px){
  .wrap{ padding: 0 20px; }
}

/* ============================================================
   가이드:
   - 이 파일은 모든 페이지에서 link로 참조 가능
   - 페이지 inline CSS의 동일 셀렉터가 더 강한 specificity → 시각 변화 0
   - 신규 페이지는 이 파일만 link하면 표준 컴포넌트 적용
   - 추후 단계: 페이지 inline에서 동일 컴포넌트 정의 제거 → 외부 표준 자동 적용
   ============================================================ */