/* =============================================================
   JSEED Money — 공유 디자인 토큰 (단일 소스)
   -------------------------------------------------------------
   "존 유지 + 토큰 통일" 전략:
   - 기본(:root) = 화이트 존 (마케팅/인증: seedmoney, login, signup)
   - .zone-cream = 크림 존 (챌린지룸): 배경/라인만 웜으로 override
   - 색(fg/accent/danger/success/info/coral)·반경·그림자·타이포·포커스링은 전 화면 공유

   사용법: 각 페이지 <head>에서 페이지별 <style>보다 "먼저" 링크.
     <link rel="stylesheet" href="/tokens.css">
   컴포넌트 CSS에서는 안전을 위해 폴백을 둔다: color: var(--fg, #0A0A0A);
   ============================================================= */

:root {
  /* 브랜드 색 — 전 화면 공유 (값은 기존 팔레트와 동일) */
  --fg: #0A0A0A;          /* ink */
  --muted: #6B6B6B;
  --accent: #FFD600;
  --danger: #FF3B30;      /* red */
  --success: #1F9D55;     /* green */
  --info: #2F7DF6;        /* blue */
  --coral: #FF6B57;

  /* 존 색 — 기본(화이트 존) */
  --bg: #FFFFFF;
  --surface: #FFFFFF;     /* 카드/패널 표면 */
  --line: #E5E5E5;        /* 쿨 그레이 */
  --card: #FAFAFA;

  /* 카카오 채널 버튼 */
  --kakao: #FEE500;
  --kakao-fg: #3C1E1E;

  /* 반경 */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* 그림자 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .08);

  /* 타이포 */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;

  /* 포커스 링 — 전 화면 공유 (키보드 가시성) */
  --focus-ring-color: #0A0A0A;
  --focus-ring: 2px solid var(--focus-ring-color);
  --focus-ring-offset: 2px;
}

/* 크림 존(챌린지룸): 배경/라인만 웜으로 교체, 나머지 토큰은 :root 상속 */
.zone-cream {
  --bg: #FFFCF1;          /* paper */
  --surface: #FFFFFF;
  --line: #E5E1D6;        /* 웜 그레이 */
  --card: #FFFFFF;
  --paper: #FFFCF1;
  --cream: #FFF8D8;
}

/* 전역 키보드 포커스 가시성 — 전 화면 공통(마우스 클릭에는 미표시) */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* =============================================================
   배치0 — 시각 토대(정의만). 기존 화면 사용처가 없으므로 무해.
   ============================================================= */

:root {
  /* 6단 타입스케일 — 크기 + 적정 line-height/weight */
  --fs-display: 40px;
  --fs-h1: 30px;
  --fs-h2: 22px;
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-cap: 13px;

  --lh-display: 1.06;
  --lh-h1: 1.12;
  --lh-h2: 1.2;
  --lh-h3: 1.32;
  --lh-body: 1.55;
  --lh-cap: 1.45;

  --fw-display: 900;
  --fw-h1: 900;
  --fw-h2: 900;
  --fw-h3: 800;
  --fw-body: 400;
  --fw-cap: 700;

  /* 8배수 리듬 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* .ui-btn — 버튼 컴포넌트(폴백 포함). 전역 :focus-visible 규칙을 활용 */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg, 12px);
  background: var(--surface, #FFFFFF);
  color: var(--fg, #0A0A0A);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--fs-body, 15px);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .06s ease, background-color .12s ease, border-color .12s ease;
}
.ui-btn:active { transform: translateY(1px); }

/* 변형 */
.ui-btn.primary {
  background: var(--fg, #0A0A0A);
  color: var(--surface, #FFFFFF);
  border-color: var(--fg, #0A0A0A);
}
.ui-btn.yellow {
  background: var(--accent, #FFD600);
  color: var(--fg, #0A0A0A);
  border-color: var(--fg, #0A0A0A);
}
.ui-btn.ghost {
  background: transparent;
  color: var(--fg, #0A0A0A);
  border-color: var(--line, #E5E5E5);
}

/* 사이즈 */
.ui-btn.sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-cap, 13px); }
.ui-btn.md { min-height: 44px; padding: 0 16px; font-size: var(--fs-body, 15px); }
.ui-btn.lg { min-height: 52px; padding: 0 22px; font-size: var(--fs-h3, 17px); }

/* .ui-status — 점(dot) + pill 묶음(폴백 포함) */
.ui-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  border: 1px solid var(--line, #E5E5E5);
  border-radius: var(--radius-pill, 999px);
  padding: 5px 10px;
  background: var(--surface, #FFFFFF);
  color: var(--fg, #0A0A0A);
  font-size: var(--fs-cap, 13px);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.ui-status .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--muted, #6B6B6B);
  flex: 0 0 auto;
}
.ui-status.success .dot { background: var(--success, #1F9D55); }
.ui-status.coral .dot { background: var(--coral, #FF6B57); }
.ui-status.amber .dot { background: var(--accent, #FFD600); }
.ui-status.neutral .dot { background: var(--muted, #6B6B6B); }

/* =============================================================
   배치🅴 — 모션·스켈레톤 토대(정의만, 추가 전용).
   원칙: 모션은 "절제". 과한 애니메이션 금지.
   prefers-reduced-motion 무조건 존중(전역 안전망 포함).
   기존 토큰/규칙은 변경하지 않고 추가만 한다.
   ============================================================= */

:root {
  /* 모션 토큰 — 이징(자연스러운 감속) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);     /* 부드러운 감속(진입/등장) */
  --ease-standard: cubic-bezier(.2, 0, .2, 1);  /* 표준(상태 전환) */

  /* 모션 토큰 — 지속시간(절제된 3단) */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* 전역 안전망 — 모션 민감 사용자 전역 보호.
   페이지별 개별 가드와 무관하게 모든 애니메이션/트랜지션을 무력화. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* .skeleton — 로딩 플레이스홀더(shimmer). 색은 --line/--card 톤. */
@keyframes ui-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  position: relative;
  background-color: var(--card, #FAFAFA);
  background-image: linear-gradient(
    90deg,
    var(--card, #FAFAFA) 0%,
    var(--line, #E5E5E5) 50%,
    var(--card, #FAFAFA) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  border-radius: var(--radius-sm, 8px);
  animation: ui-shimmer var(--dur-slow, 360ms) linear infinite;
  /* 텍스트가 비치지 않도록 */
  color: transparent;
  user-select: none;
  pointer-events: none;
}
.skeleton-line {
  display: block;
  height: 12px;
  border-radius: var(--radius-sm, 8px);
}
.skeleton-line + .skeleton-line { margin-top: var(--space-2, 8px); }
.skeleton-block {
  display: block;
  height: 96px;
  border-radius: var(--radius-md, 10px);
}
/* reduced-motion: 전역 안전망으로 무력화되지만 shimmer를 명시적으로 정지 */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background-position: 50% 0; }
}

/* .hover-lift — 절제된 호버 상승(transform + 그림자). 폴백 포함. */
.hover-lift {
  transition:
    transform var(--dur-fast, 120ms) var(--ease-out, ease),
    box-shadow var(--dur-fast, 120ms) var(--ease-out, ease);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, .08));
}
