@charset "UTF-8";
/* 팔자마을 디자인 토큰 - 색/글꼴/모서리/그림자는 여기서만 정의하고 다른 CSS는 변수만 쓴다 */
:root {
  /* 색 */
  --pm-ink: #43352d;
  --pm-sub: #86705f;          /* 보조 잉크: 큰 글자/장식용. 작은 본문은 --pm-sub-text */
  --pm-sub-text: #6f5b4c;     /* 크림 위 AA 대비 */
  --pm-cream: #fffdf9;
  --pm-soft: #fbefe2;
  --pm-soft2: #f6e4d2;
  --pm-card: rgba(255, 251, 245, .88);
  --pm-line: #ead8c4;
  --pm-wood: #8cc97a;
  --pm-fire: #f4846b;
  --pm-earth: #f2c14e;
  --pm-metal: #e6e1d6;
  --pm-water: #6f8fd8;
  --pm-fire-deep: #b8472d;    /* 코랄 계열 글자/링크용 (밝은 배경 AA) */
  --pm-error: #b3412b;
  --pm-error-bg: #fde8e2;
  --pm-info-bg: #e8effb;
  --pm-info-ink: #2f4a8a;
  --pm-sky-top: #bfe3f2;
  --pm-sky-bottom: #fdf3e4;
  --pm-focus: #6f8fd8;
  --pm-focus-ring: rgba(111, 143, 216, .35);
  --pm-fire-hover: #f69a83;

  /* 글꼴 */
  --pm-font-head: 'Jua', 'Pretendard Variable', system-ui, sans-serif;
  --pm-font-body: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Malgun Gothic', sans-serif;

  /* 모서리 */
  --pm-r-panel: 30px;
  --pm-r-card: 22px;
  --pm-r-input: 14px;
  --pm-r-pill: 999px;
  --pm-r-check: 9px;
  --pm-r-panel-sm: 26px;

  /* 그림자 */
  --pm-shadow: 0 18px 48px rgba(120, 80, 40, .20);
  --pm-shadow-sm: 0 6px 16px rgba(120, 80, 40, .16);

  /* 크기 */
  --pm-tap: 44px;
  /* 콘텐츠 열 폭: 모든 팔자마을 페이지의 단일 기준(2026-10-07). 카드 바깥 틀은 --pm-page-w 로 같고,
     입력 폼·긴 글은 카드 안쪽만 --pm-read-w 로 좁힌다. 상세는 docs/palja/specs/design-rules.md §1 */
  --pm-page-w: 960px;
  --pm-read-w: 720px;
  /* 간격 토큰(2026-10-08): 영역 사이 세로 간격의 단일 기준. design-rules.md §2-2 */
  --pm-gap-section: 16px; /* .pm-page 직계 자식(머리 카드·카드·격자·보조 영역) 사이 */
  --pm-gap-card: 12px;    /* 카드 안 하위 카드·격자 칸 사이 */
  --pm-gap-item: 8px;     /* 칩·타일·작은 칸 사이 최소(이보다 좁히지 않는다) */
  --pm-auth-w: 520px;            /* 단일 목적 화면(로그인·가입·계정 찾기 등 .pm-page--auth)의 카드 폭. 알림 대화상자(alert.css)도 같은 폭 */
  --pm-w-form: var(--pm-auth-w); /* 옛 이름 별칭(알림 대화상자 폭) */
  --pm-w-wide: var(--pm-page-w); /* 옛 이름 별칭 */
}