/* 공통 UI 컴포넌트 CSS — tokens.css 다음, 페이지 CSS 앞에 링크한다.
 *
 * 여기 있는 건 "모든 페이지가 똑같이 쓰던 것"만이다. 페이지 고유 변형은 페이지 CSS에서
 * 덮어쓴다(예: songbook studio는 토스트를 화면 위쪽에 띄우므로 자기 CSS에서 재정의한다).
 */

/* ---------- 토스트 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: var(--card-2); border: 1px solid var(--border); color: var(--text);
  padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  z-index: 100; box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-color: var(--green); }
.toast.error { border-color: var(--red); }

/* ---------- .btn 은 일부러 여기 없다 ----------
 * 10개 CSS가 .btn* 을 재선언하지만 셋으로 갈라져 있다:
 *   manage/admin  — gap 6px / padding 9px 14px / radius 9px
 *   mood/stats    — 위와 같되 transition 에 opacity .15s 추가
 *   welcome       — gap 7px / padding 11px 18px / radius 10px  (눈에 띄게 크다)
 * 하나로 합치면 중복 제거가 아니라 "버튼 크기를 바꾸는 디자인 결정"이 된다. 통일하려면
 * 어느 쪽에 맞출지 먼저 정하고 그때 옮길 것 — 지금은 각 페이지에 남겨 둔다.
 */