/* ────────────────────────────────────────────────
   프레이즈 랩 공통 스타일
   테마: 힐링캠프 밤 숲 캠프파이어 감성
   ──────────────────────────────────────────────── */

:root {
  --bg:          #0D1117;
  --surface:     #1A1F2E;
  --surface2:    #222836;
  --border:      rgba(255,255,255,0.07);
  --fire-orange: #FF6B2E;
  --fire-yellow: #FFB347;
  --forest:      #4CAF80;
  --text:        #E8EAF0;
  --text-sub:    #8892A4;
  --text-dim:    rgba(232,234,240,0.45);
  --radius:      14px;
  --radius-sm:   8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo',
               'Noto Sans KR', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

/* ── 공통 레이아웃 ── */
.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── 공통 헤더 ── */
.site-header {
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--border);
}
.site-header .brand {
  font-size: 13px;
  color: var(--text-sub);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-header .brand:hover { color: var(--fire-orange); }

/* ── 공통 푸터 ── */
.site-footer {
  padding: 40px 0 32px;
  border-top: 1px solid var(--border);
  margin-top: 60px;
}
.site-footer p {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.8;
}
.site-footer a { color: var(--text-sub); text-decoration: none; }
.site-footer a:hover { color: var(--fire-orange); }

/* ── 카드 ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}
.card-sm {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 10px;
}

/* ── 배지 ── */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,107,46,0.15);
  color: var(--fire-orange);
  border: 1px solid rgba(255,107,46,0.3);
}
.badge-green {
  background: rgba(76,175,128,0.12);
  color: var(--forest);
  border-color: rgba(76,175,128,0.3);
}
.badge--soon {
  background: rgba(180,180,180,0.1);
  color: var(--text-sub);
  border-color: rgba(180,180,180,0.2);
}
.app-card--soon {}
.app-icon--soon {
  background: rgba(180,180,180,0.07);
  border-color: rgba(180,180,180,0.15);
  box-shadow: none;
}

/* ── 구분선 ── */
hr.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}

/* ── 링크 ── */
a.link {
  color: var(--fire-orange);
  text-decoration: none;
}
a.link:hover { text-decoration: underline; }

/* ── 반응형 ── */
@media (max-width: 480px) {
  .card { padding: 18px; }
  html { font-size: 15px; }
}