/* =====================================================================
   괴정제일교회 — 디자인 토큰
   기준본(gch-renewal.html)의 회화나무 팔레트·함렛 제목을 계승하고,
   합격 기준표(qa/acceptance.md) T·A·M·RM 항목을 토큰 단계에서 지키도록 정리.
   대비 수치는 WCAG 2.x 상대휘도로 계산한 값(바탕 --c-paper 기준).
   ===================================================================== */

:root{
  /* ---------- 색: 바탕 ---------- */
  --c-paper:      #FBFAF6;  /* 종이. 기본 바탕 */
  --c-shade:      #EEF2EA;  /* 잎그늘. 구획 바탕(예배 안내·나눔지 띠) */
  --c-surface:    #FFFFFF;  /* 카드·입력칸 */
  --c-deep:       #1D3F31;  /* 깊은 잎. 유틸 띠·바닥글 바탕 */

  /* ---------- 색: 글자 ---------- */
  --c-ink:        #17211C;  /* 먹. 본문 15.8:1 (paper) / 14.6:1 (shade) */
  --c-muted:      #435048;  /* 보조 글자. 8.1:1 (paper) / 7.5:1 (shade) */
  --c-on-deep:    #FFFFFF;  /* 깊은 잎 위 글자 11.6:1 */
  --c-on-deep-2:  #EBDD94;  /* 깊은 잎 위 강조(회화꽃) 8.5:1 */

  /* ---------- 색: 브랜드 ---------- */
  --c-leaf:       #2B5945;  /* 회화나무 잎. 링크·주 버튼. 글자로 7.7:1, 흰 글자 얹으면 8.0:1 */
  --c-leaf-hover: #1D3F31;
  --c-blossom:    #EBDD94;  /* 회화꽃. 면·밑줄 강조 전용(글자색으로 쓰지 않음, 단 --c-deep 위는 예외) */
  --c-blossom-soft:#F6EFCB;

  /* ---------- 색: 선 ---------- */
  --c-line:       #D3DBD3;  /* 구분선(장식). 정보 경계로 쓰지 않음 */
  --c-line-strong:#7C8A81;  /* 입력칸 테두리·자리표시 점선 3.5:1 (비텍스트 3:1 충족) */

  /* ---------- 색: 상태 표시 ---------- */
  /* '예시' = 우리가 지어 넣은 견본 문구. 교체 대상 */
  --c-ex-bg:      #F8F0C8;
  --c-ex-ink:     #5A4606;  /* 7.9:1 */
  --c-ex-line:    #8C710C;  /* 점선 4.1:1 */
  /* '교회 확인 필요' = 조사로 찾았지만 교회가 확정하지 않은 사실 */
  --c-chk-bg:     #FBEADF;
  --c-chk-ink:    #7E3412;  /* 7.5:1 */
  --c-chk-line:   #A3461A;  /* 실선 5.2:1 */
  /* 사진 준비 중 자리표시 */
  --c-ph-bg:      #E4E9E1;
  --c-ph-ink:     #2F3D35;  /* 9.3:1 */
  --c-ph-guide:   rgba(47,61,53,.28);

  /* ---------- 색: 초점·비활성 ---------- */
  --c-focus:        #A86E00;  /* 밝은 바탕 위 4.1:1 */
  --c-focus-on-dark:#EBDD94;  /* 깊은 잎 위 8.5:1 */
  --c-disabled-ink: #6E7A73;  /* 4.3:1 — 비활성도 읽힘(T8) */
  --c-disabled-bg:  #E7EBE6;

  /* ---------- 글꼴 ---------- */
  /* 자체 호스팅 전제. @font-face는 이 파일 맨 아래 주석 블록을 테마 fonts.css로 옮겨 사용.
     굵기 3개만: 함렛 600 / Noto Sans KR 400·700 (기준 P8 '4개 이하') */
  --f-display: "Hahmlet", "Noto Serif KR", "Noto Serif CJK KR", "AppleMyungjo", serif;
  --f-body:    "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fw-regular: 400;
  --fw-bold:    700;
  --fw-display: 600;

  --lh-body:  1.7;
  --lh-read:  1.85;
  --lh-head:  1.25;
  --lh-mast:  1.02;
  --ls-head:  -0.015em;
  --ls-mast:  -0.035em;
  --measure:  34em;   /* 한 줄 길이 상한(한글 약 34자) */

  /* ---------- 간격 (4 단위) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --gutter:    clamp(16px, 4vw, 40px);  /* 좌우 여백. 390폭 16px */
  --container: 1200px;
  --section-y: clamp(56px, 8vw, 112px);

  /* ---------- 터치 ---------- */
  --tap:        48px;  /* 모든 조작 요소 최소 */
  --tap-inline: 44px;  /* 문장 속 링크만 */
  --tap-gap:    8px;
  --tabbar-h:   64px;  /* 모바일 하단 빠른 메뉴(+ safe-area) */

  /* ---------- 모서리 (위계별로 다르게) ---------- */
  --r-tag:   4px;    /* 꼬리표 */
  --r-input: 8px;    /* 입력칸·작은 버튼 */
  --r-photo: 12px;   /* 사진·자리표시 */
  --r-card:  16px;   /* 카드 */
  --r-sheet: 20px;   /* 바닥 시트 윗모서리 */
  --r-pill:  999px;  /* 주 버튼·글씨 크기 선택 */

  /* ---------- 그림자 (먹색 기반, 2단계만) ---------- */
  --sh-1: 0 1px 2px rgba(23,33,28,.06);                       /* 카드 */
  --sh-2: 0 12px 32px -8px rgba(23,33,28,.22), 0 2px 6px rgba(23,33,28,.08); /* 사진 위에 뜬 빠른 카드·시트 */

  /* ---------- 초점 ---------- */
  --focus-w: 3px;
  --focus-offset: 3px;

  /* ---------- 모션 (잔잔하게) ---------- */
  --dur-1: 120ms;    /* 누름·색 변화 */
  --dur-2: 200ms;    /* 메뉴·토스트 */
  --dur-3: 280ms;    /* 시트 열림. UI 상한 300ms(M4) */
  --dur-fade: 1000ms;/* 사진 겹쳐 바뀜. 상한 1.2s(M3) */
  --dur-drift: 24s;  /* 첫 사진 확대. 20s 이상(M3) */
  --drift-scale: 1.04; /* 상한 1.06 */
  --move: 8px;       /* 이동량 상한. 이보다 크게 움직이지 않음 */
  --autoplay: 8s;    /* 자동 넘김 간격(JS가 읽음). 7s 이상(M1) */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-io:  cubic-bezier(.45,0,.25,1);
}

/* ---------- 글자 단계 ----------
   사용자 속성은 선언된 요소에서 값이 굳으므로, --ts가 바뀌는 요소([data-text])에서도 다시 선언함 */
:root{ --ts: 1; }
:root,[data-text]{
  /* --ts = 글씨 크기 배율. 보통 1 / 크게 1.15 / 더 크게 1.3 (나눔지 화면은 1.45까지 4단계) */
  --fs-meta:   calc(14px * var(--ts)); /* 하한. 꼬리표·사진 캡션·모바일 탭 글자 */
  --fs-small:  calc(16px * var(--ts)); /* 날짜·설명(T3) */
  --fs-body:   calc(18px * var(--ts)); /* 본문 */
  --fs-read:   calc(20px * var(--ts)); /* 구역나눔지·주보 읽기 본문 */
  --fs-lead:   calc(20px * var(--ts)); /* 표어·도입문 */
  --fs-h4:     calc(20px * var(--ts)); /* 카드 제목(고딕 700) */
  --fs-h3:     calc(24px * var(--ts));
  --fs-h2:     calc(32px * var(--ts)); /* 구획 제목(함렛) */
  --fs-h1:     calc(40px * var(--ts)); /* 하위 페이지 제목(함렛) */
  --fs-mast-m: calc(46px * var(--ts)); /* 모바일 제호 */
  --fs-mast:   clamp(64px, 8.4vw, 120px); /* PC 제호. 배율 미적용(이미 충분히 큼) */

}

/* 글씨 크기 단계: 상위 요소에 data-text 속성 */
[data-text="1"]{ --ts: 1; }
[data-text="2"]{ --ts: 1.15; }
[data-text="3"]{ --ts: 1.3; }
[data-text="4"]{ --ts: 1.45; } /* 구역나눔지 읽기 화면 전용 */

/* 움직임 줄이기: 모든 지속시간 0.01ms, 확대·이동 없음, 자동 넘김 끔(RM1·RM2) */
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-1: .01ms; --dur-2: .01ms; --dur-3: .01ms;
    --dur-fade: .01ms; --drift-scale: 1; --move: 0px;
    --autoplay: 0s; /* 0이면 JS는 자동 넘김을 시작하지 않음 */
  }
  html{ scroll-behavior: auto !important; }
  *,*::before,*::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 교회 사이트는 밝은 바탕 하나로 고정(다크 모드 미제공: 사진·주보 인쇄물과 같은 인상 유지).
   단, 바탕을 명시해 브라우저 기본색에 기대지 않음. */
html{ color-scheme: light; background: var(--c-paper); }

/* ---------------------------------------------------------------------
   자체 호스팅 @font-face 견본 — 글꼴 파일을 직접 둘 때의 경로 예시
   · Hahmlet: SIL OFL 1.1, Reserved Font Name 없음 → 직접 서브셋 가능
   · Noto Sans KR: SIL OFL 1.1, RFN은 'Source'뿐(google/fonts OFL.txt, 2026-10-06 확인)
     → 'Noto Sans KR' 이름을 유지한 서브셋 가능. 'Source'라는 이름만 쓰지 않음
   · IBM Plex Sans KR·Pretendard는 쓰지 않음(RFN 문제 회피)
   · 한글은 unicode-range 조각(약 100개)으로 나눠 쓰인 글자만 받게 함 → 첫 화면 글꼴 합 ≤300KB(P8)
   · 첫 화면 제호용 함렛 조각 1~2개만 preload, 나머지는 swap

@font-face{
  font-family:"Hahmlet"; font-weight:600; font-style:normal; font-display:swap;
  src:url("fonts/hahmlet-600.[n].woff2") format("woff2");
  unicode-range: ...;  (조각마다 한 블록)
}
@font-face{
  font-family:"Noto Sans KR"; font-weight:400; font-display:swap;
  src:url("fonts/notosanskr-400.[n].woff2") format("woff2"); unicode-range: ...;
}
@font-face{
  font-family:"Noto Sans KR"; font-weight:700; font-display:swap;
  src:url("fonts/notosanskr-700.[n].woff2") format("woff2"); unicode-range: ...;
}
--------------------------------------------------------------------- */