/* WeeklyPick 디자인 토큰 + 베이스 스타일
   상세: docs/03-design.md */

:root {
  /* Primary 보라 ramp */
  --color-primary-50:  #EEEDFE;
  --color-primary-200: #CECBF6;
  --color-primary-400: #7F77DD;
  --color-primary-600: #534AB7;
  --color-primary-800: #3C3489;
  --color-primary-900: #26215C;

  /* 포인트 골드/앰버 ramp */
  --color-amber-50:  #FAEEDA;
  --color-amber-200: #EF9F27;
  --color-amber-600: #BA7517;
  --color-amber-800: #633806;

  /* 시맨틱 컬러 */
  --color-success: #1D9E75;
  --color-danger:  #791F1F;
  --color-info:    #0C447C;
  --color-korea:   #C04828;

  /* 중립 (라이트 모드) */
  --color-bg:         #FFFFFF;
  --color-bg-soft:    #F7F6F2;
  --color-text:       #2C2C2A;
  --color-text-soft:  #5F5E5A;
  --color-text-mute:  #888780;
  --color-border:     rgba(0, 0, 0, 0.15);
}

html, body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
               'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 모바일 전용 — 페이지 컨테이너에 하단 탭바 가림 여유 확보.
   탭바 ~56px + iOS safe-area-inset (홈 인디케이터 영역 0~34px) 합산.
   PC(>= md/768px) 에서는 상단 헤더에 nav 가 있어 하단 탭바 미렌더 → 패딩 불필요. */
@media (max-width: 767px) {
  main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* 포커스 링: primary 톤 */
:focus-visible {
  outline: 2px solid var(--color-primary-600);
  outline-offset: 2px;
}

a {
  color: var(--color-primary-600);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}