/* ════════════════════════════════════════════════════════════════
 * dentpt.ai — 공통 디자인 토큰
 *   landing.html 의 :root 팔레트 + 한국어 가독성 우수한 Pretendard 통일.
 *   본문/UI 라벨/헤딩 모두 var(--sans) Pretendard 사용.
 *   문서 헤더(consent_view/consent_notice)만 var(--serif) 명조 유지.
 * ════════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root {
  /* 텍스트 */
  --ink:  #0e0d0b;
  --ink2: #3a3830;
  --ink3: #7a7870;

  /* 배경 톤 — Cream 시리즈 */
  --cream:  #f7f4ee;
  --cream2: #ede9e0;
  --cream3: #e0dbd0;

  /* 강조색 — Accent 그린 */
  --accent:       #1a6b4a;
  --accent2:      #2d9b6e;
  --accent-light: #e8f5ef;

  /* 보조색 */
  --warm:        #c8622a;
  --warm-light:  #fdf0e8;
  --gold:        #b89a4e;

  /* 폰트 — Pretendard 통일 (한국어 가독성 + 모던 톤). 시스템 폴백 포함 */
  --sans:  'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', 'Malgun Gothic', sans-serif;
  --serif: 'Pretendard Variable', Pretendard, Georgia, 'Apple SD Gothic Neo', 'Malgun Gothic', serif;
}

/* ────────── 공통 컴포넌트 ────────── */

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: #fff; border: none;
  padding: 14px 32px; border-radius: 100px;
  font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; transition: all .2s; text-decoration: none;
}
.btn-primary:hover {
  background: #155a3c;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(26,107,74,0.25);
}

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--ink2); border: none;
  padding: 14px 24px; border-radius: 100px;
  font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; transition: color .2s; text-decoration: none;
}
.btn-ghost:hover { color: var(--accent); }

.card {
  background: #fff;
  border: 1px solid var(--cream3);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* dentpt.ai 로고 — `<span class="brand-logo">dentpt<em>.ai</em></span>` 형태로 사용
   em 부분만 accent 컬러로 강조 */
.brand-logo {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-logo em { color: var(--accent); font-style: normal; }

/* ────────── 계정 등급 — 공통 컬러 매핑 ──────────
 * form 우상단 fixed 뱃지 / consent_view 푸터 / SMS 푸터 등 모든 등급 표시는
 * 아래 클래스 중 하나만 붙이면 톤이 일치한다.
 *   .grade-tag       — 박스형 뱃지 (그라디언트 + 흰 글자)
 *   .grade-text-on-light — 라이트 배경 인라인 텍스트 색
 *   .grade-text-on-dark  — 다크 배경 인라인 텍스트 색
 */
.grade-tag {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  border-radius: 999px;
  text-transform: uppercase;
  font-family: inherit;
}
.grade-tag--UNREGISTERED { background: linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow: 0 4px 12px rgba(245,158,11,0.4); }
.grade-tag--TRIAL        { background: linear-gradient(135deg,#60a5fa,#2563eb); box-shadow: 0 4px 12px rgba(37,99,235,0.4); }
.grade-tag--PRO          { background: linear-gradient(135deg,#a78bfa,#7c3aed); box-shadow: 0 4px 12px rgba(124,58,237,0.4); }
.grade-tag--MAX          { background: linear-gradient(135deg,#f472b6,#db2777); box-shadow: 0 4px 12px rgba(219,39,119,0.4); }
.grade-tag--ADMIN        { background: linear-gradient(135deg,#1f2937,#111827); box-shadow: 0 4px 12px rgba(17,24,39,0.55); }

.grade-text-on-light { font-weight: 700; letter-spacing: 1px; }
.grade-text-on-light--UNREGISTERED { color: #b45309; }
.grade-text-on-light--TRIAL        { color: #1d4ed8; }
.grade-text-on-light--PRO          { color: #6d28d9; }
.grade-text-on-light--MAX          { color: #be185d; }
.grade-text-on-light--ADMIN        { color: #0f172a; }

.grade-text-on-dark { font-weight: 700; letter-spacing: 1px; }
.grade-text-on-dark--UNREGISTERED { color: #fbbf24; }
.grade-text-on-dark--TRIAL        { color: #93c5fd; }
.grade-text-on-dark--PRO          { color: #c4b5fd; }
.grade-text-on-dark--MAX          { color: #f9a8d4; }
.grade-text-on-dark--ADMIN        { color: #fde68a; }