/* ═══════════════════════════════════════════════════════════════
   디자인 토큰 — 이 파일이 규칙입니다.

   여기 정의된 값 밖의 크기·자간·여백은 쓰지 않습니다.
   하나씩 눈대중으로 맞추면 화면마다 어긋납니다.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── 색 ────────────────────────────────────────────────────
     images/Title/화려한 잡지스타일 메인.jpg 에서 뽑았습니다. */
  --bg:      #E9E4D6;   /* 바탕 — 포스터 크림 */
  --paper:   #F4F0E6;   /* 카드, 입력창 */
  --sunk:    #DED8C7;   /* 살짝 눌린 면 */
  --ink:     #15120F;   /* 본문 글자 */
  --muted:   #5E574C;   /* 보조 글자 */
  --faint:   #6E6555;   /* 옅은 글자 — 이보다 밝게 하지 마세요 */
  --accent:  #B01133;   /* 포인트 — 크림슨 */
  --deep:    #7E0C24;   /* 눌린 크림슨 */
  --line:    #CFC7B4;   /* 구분선 */

  /* ── 글꼴과 역할 ───────────────────────────────────────────
     역할을 섞으면 같은 줄에서 두 글꼴이 서로 싸웁니다.

     Prata      영문 레이블(LOCATION 같은) · 표시용 큰 숫자(날짜)
     고운바탕    한글 제목 · 이름 · 인사말
     Pretendard 한글 본문 · 표 안의 숫자(버스번호 · 시각 · 인원)     */
  --serif:    'Prata', 'Times New Roman', serif;
  --myeongjo: 'Gowun Batang', 'Nanum Myeongjo', serif;
  --sans:     'Pretendard Variable', Pretendard, -apple-system,
              'Apple SD Gothic Neo', system-ui, sans-serif;

  /* ── 글자 크기 ─────────────────────────────────────────────
     11 · 13 · 15 · 18 · 22 · 27 · 34   (약 1.2배씩)
     본문은 15px. 어르신 하객을 생각해 13px 아래로 내리지 마세요. */
  --t-xs:   11px;   /* 역할 표시, 알약 안 글자 */
  --t-sm:   13px;   /* 보조 설명, 캡션 */
  --t-md:   15px;   /* 본문 — 기준 */
  --t-lg:   18px;   /* 인사말, 소제목 */
  --t-xl:   22px;   /* 화면 제목 */
  --t-2xl:  27px;   /* 큰 제목 */
  --t-3xl:  34px;   /* 가장 큰 것 */

  /* ── 자간 ──────────────────────────────────────────────────
     한글은 살짝 좁게, 영문 레이블만 넓게. 그 사이 값은 없습니다. */
  --ls-ko:      -0.01em;   /* 한글 본문 */
  --ls-ko-lg:   -0.02em;   /* 한글 제목 — 클수록 좁게 */
  --ls-label:    0.26em;   /* 영문 트래킹 레이블 */
  --ls-num:      0.01em;   /* 숫자 */

  /* ── 줄간격 ─────────────────────────────────────────────── */
  --lh-tight: 1.45;   /* 표, 데이터 */
  --lh-body:  1.75;   /* 본문 */
  --lh-poem:  1.9;    /* 인사말 */

  /* ── 여백 ── 4의 배수만 씁니다 ───────────────────────────── */
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* ── 화면 ────────────────────────────────────────────────── */
  --page:   500px;   /* 본문 최대 너비 */
  --gutter: 26px;    /* 좌우 여백 */
  --sec-y:  var(--s5);   /* 카카오톡 인앱 브라우저는 위아래가 짧습니다 */
  --nav-h:  48px;    /* 아래 막대 — 칸이 여섯이라 낮게 */

  --ease: cubic-bezier(.22, .61, .36, 1);
}