/* =====================================================================
   괴정제일교회 방문자 사이트 — 토큰 보완 v2
   tokens.css 바로 뒤에 불러옴. 기존 값은 바꾸지 않고 추가·용도 제한만 함.
   색 역할 · 상태 토큰
   ===================================================================== */

:root{
  /* ---------- 방문자 사이트에서 쓰지 않는 토큰(예비) ----------
     --c-ex-*  ('예시'), --c-chk-* ('교회 확인 필요'), --c-ph-* ('사진 준비 중')
     → 방문자 화면에서 사용 금지. 관리 데모 안내 띠만 --c-blossom-soft 사용 */

  /* ---------- 배치 ---------- */
  --header-h:      88px;   /* PC 머리글 */
  --header-h-t:    72px;   /* 태블릿 */
  --header-h-m:    64px;   /* 모바일 */
  --util-h:        48px;   /* PC 유틸 줄 */
  --read-max:      760px;  /* 상세 화면 본문·플레이어 최대 폭 */
  --list-max:      960px;  /* 목록 최대 폭 */
  --hero-side:     400px;  /* 홈 첫 화면 '주일 예배' 카드 폭(PC) */

  /* 반응형 기준(참고용, 미디어쿼리에는 숫자를 직접 씀)
     ≥1200 PC · 1024–1199 좁은 PC · 768–1023 태블릿 · 390–767 모바일 · 320–389 작은 모바일 */

  /* ---------- 이미지 상한 ---------- */
  --photo-max:     335px;  /* 행사앨범 사진 7장: 모든 폭에서 이 이하 */
  --bulletin-max:  463px;  /* 2026-10-04 주보 원본 폭 */
  --thumb-bulletin-home: 160px;
  --thumb-bulletin-list: 120px;
  /* 공식 이미지는 width/height 속성 = 원본 픽셀, CSS는 max-width:100%;height:auto 만 */

  /* ---------- 색면(사진 대체) ---------- */
  --c-panel:        var(--c-deep);     /* 설교 플레이어 표지·행사 카드 */
  --c-panel-ink:    var(--c-on-deep);  /* 흰 글자 11.6:1 */
  --c-panel-accent: var(--c-blossom);  /* 깊은 잎 위 회화꽃 8.5:1 */
  --c-card-rule:    var(--c-blossom);  /* 글 카드 왼쪽 4px 세로 띠 */
  --c-linkcard:     var(--c-shade);    /* 공식 원문 링크 카드 바탕 */

  /* ---------- 관리 데모 ---------- */
  --c-demo-bg:   var(--c-blossom-soft); /* 데모 안내 띠 바탕 */
  --c-demo-ink:  var(--c-ink);          /* 15:1 이상 */

  /* ---------- 대화상자(라이트박스·메뉴 시트) ---------- */
  --c-scrim:     rgba(23,33,28,.72);
  --lb-pad:      16px;
  --sheet-max:   420px;   /* 태블릿에서 오른쪽 시트 폭 */

  /* ---------- 쌓임 순서 ---------- */
  --z-header: 20;
  --z-tabbar: 30;
  --z-sheet:  40;
  --z-dialog: 50;
  --z-skip:   60;

  /* ---------- 숫자 ---------- */
  --num: tabular-nums;    /* 예배 시간·날짜 정렬 */
}

/* 사진·이미지 공통 상한 (구현 참고용 기본 규칙) */
.event-photo{ max-width: min(100%, var(--photo-max)); height: auto; border-radius: var(--r-photo); }
.official-img{ max-width: 100%; height: auto; } /* width/height 속성으로 원본 크기 이상 확대 금지 */

/* 화면이 낮을 때(가로 모드·200% 확대) 하단 빠른 메뉴 숨김 */
@media (max-height: 500px){ :root{ --tabbar-h: 0px; } }