/* =========================================================
   [ rb.page.font.css ]
   rb.page 전용 폰트 & 폰트 사이즈 관리 파일
   
   ★ 이 파일은 폰트명, 폰트 크기, 폰트 색상만 관리합니다.
   ★ 레이아웃, 여백 등은 각 PHP 파일의 <style>에서 관리합니다.
   ★ 폰트를 변경하려면 :root 안의 변수 값만 수정하세요.
   ★ 모바일 폰트 크기를 조절하려면 하단 @media 섹션을 수정하세요.
   
   사용 폰트: Pretendard (rb.fonts/Pretendard/)
     - font-H: Pretendard Black (900) — 대형 제목용
     - font-B: Pretendard Bold (700)  — 제목/강조용
     - font-R: Pretendard Regular (400) — 본문용

   ─────────────────────────────────────────────
   커스텀 태그 사용법:
   
   제목용 (Bold 폰트, 큰 → 작은 순):
     <t1>대형 제목</t1>
     <t2>중형 제목</t2>
     <t3>소형 제목</t3>
     <t4>강조 소제목</t4>
     <t5>미니 제목/라벨</t5>
   
   본문용 (Regular 폰트, 작은 → 큰 순):
     <p1>본문 소 (부가설명, 캡션)</p1>
     <p2>본문 중소 (보조 텍스트)</p2>
     <p3>본문 중 (기본 본문)</p3>
     <p4>본문 중대 (강조 본문)</p4>
     <p5>본문 대 (배너 텍스트 등)</p5>
   ─────────────────────────────────────────────
   ========================================================= */


/* ==============================================
   [1] CSS 변수 정의
   ▸ 이 변수들을 수정하면 전체 페이지에 일괄 적용됩니다.
   ============================================== */

:root {

  /* ── 폰트명 ── */
  /* 폰트를 변경하고 싶다면 아래 값만 바꾸세요 */
  --font-heading: 'Pretendard', sans-serif;
  /* 대형 제목용 (Black 900) */
  --font-bold: 'Pretendard', sans-serif;
  /* 제목/강조용 (Bold 700) */
  --font-regular: 'Pretendard', sans-serif;
  /* 본문용 (Regular 400) */

  /* ── 제목 태그 PC 크기 (t1이 가장 크고, t5가 가장 작음) ── */
  --t1-size: 34px;
  /* <t1> 대형 제목 */
  --t2-size: 28px;
  /* <t2> 중형 제목 */
  --t3-size: 22px;
  /* <t3> 소형 제목 */
  --t4-size: 18px;
  /* <t4> 강조 소제목 */
  --t5-size: 14px;
  /* <t5> 미니 제목/라벨 */

  /* ── 본문 태그 PC 크기 (p1이 가장 작고, p5가 가장 큼) ── */
  --p1-size: 13px;
  /* <p1> 본문 소 */
  --p2-size: 14px;
  /* <p2> 본문 중소 */
  --p3-size: 16px;
  /* <p3> 본문 중 */
  --p4-size: 18px;
  /* <p4> 본문 중대 */
  --p5-size: 20px;
  /* <p5> 본문 대 */

  /* ── 제목 태그 색상 ── */
  --t1-color: #0f1923;
  --t2-color: #0f1923;
  --t3-color: #0f1923;
  --t4-color: #1a1a1a;
  --t5-color: #1a1a1a;

  /* ── 본문 태그 색상 ── */
  --p1-color: #888;
  --p2-color: #555;
  --p3-color: #333;
  --p4-color: #222;
  --p5-color: #ffffff;

  /* ── 모바일 제목 태그 크기 (768px 이하) ── */
  --m-t1-size: 26px;
  /* 모바일 <t1> */
  --m-t2-size: 22px;
  /* 모바일 <t2> */
  --m-t3-size: 18px;
  /* 모바일 <t3> */
  --m-t4-size: 16px;
  /* 모바일 <t4> */
  --m-t5-size: 13px;
  /* 모바일 <t5> */

  /* ── 모바일 본문 태그 크기 (768px 이하) ── */
  --m-p1-size: 13px;
  /* 모바일 <p1> */
  --m-p2-size: 14px;
  /* 모바일 <p2> */
  --m-p3-size: 15px;
  /* 모바일 <p3> */
  --m-p4-size: 16px;
  /* 모바일 <p4> */
  --m-p5-size: 18px;
  /* 모바일 <p5> */

  /* ── 기존 클래스 호환용 PC 크기 ── */
  --size-title: 32px;
  /* .ab-title */
  --size-section-title: 28px;
  /* .ab-section-title */
  --size-banner-title: 30px;
  /* 배너 h3 */
  --size-desc: 16px;
  /* .ab-desc */
  --size-card-title: 18px;
  /* 카드 h4 */
  --size-card-text: 14px;
  /* 카드 p */
  --size-tag: 11px;
  /* .ab-tag */
  --size-tab: 16px;
  /* .ab-tab-item */
  --size-tl-year: 18px;
  /* 연혁 연도 */
  --size-tl-title: 18px;
  /* 연혁 제목 */
  --size-tl-desc: 18px;
  /* 연혁 설명 */
  --size-dept-title: 16px;
  /* 분과명 (strong) */
  --size-dept-desc: 16px;
  /* 분과 설명 (span) */

  /* ── 기존 클래스 호환용 모바일 크기 ── */
  --m-size-title: 26px;
  --m-size-section-title: 20px;
  --m-size-banner-title: 20px;
  --m-size-desc: 15px;
  --m-size-card-title: 17px;
  --m-size-card-text: 14px;
  --m-size-tag: 12px;
  --m-size-tab: 14px;
  --m-size-tl-year: 14px;
  --m-size-tl-title: 15px;
  --m-size-tl-desc: 13px;
  --m-size-dept-title: 15px;
  --m-size-dept-desc: 14px;
}


/* ==============================================
   [2] 커스텀 태그 정의 (t1~t5, p1~p5)
   ▸ HTML에서 <t1>제목</t1>, <p3>본문</p3> 형태로 사용
   ▸ 크기·색상·폰트만 지정하며 레이아웃에 영향 없음
   ============================================== */

/* ── 제목 태그 (t1 ~ t5) ── */

t1,
.t1 {
  display: block;
  font-size: var(--t1-size);
  color: var(--t1-color);
  font-family: var(--font-bold);
  font-weight: 700;
  line-height: 1.3;
  margin: 5px 0;
}

t2,
.t2 {
  display: block;
  font-size: var(--t2-size);
  color: var(--t2-color);
  font-family: var(--font-bold);
  font-weight: 700;
  line-height: 1.35;
  margin: 5px 0;
}

t3,
.t3 {
  display: block;
  font-size: var(--t3-size);
  color: var(--t3-color);
  font-family: var(--font-bold);
  font-weight: 700;
  line-height: 1.4;
  margin: 5px 0;
}

t4,
.t4 {
  display: block;
  font-size: var(--t4-size);
  color: var(--t4-color);
  font-family: var(--font-bold);
  font-weight: 700;
  line-height: 1.45;
  margin: 4px 0;
}

t5,
.t5 {
  display: block;
  font-size: var(--t5-size);
  color: var(--t5-color);
  font-family: var(--font-bold);
  font-weight: 700;
  line-height: 1.5;
  margin: 3px 0;
}

/* ── 본문 태그 (p1 ~ p5) ── */

p1,
.p1 {
  display: block;
  font-size: var(--p1-size);
  color: var(--p1-color);
  font-family: var(--font-regular);
  font-weight: 400;
  line-height: 1.6;
  margin: 5px 0;
}

p2,
.p2 {
  display: block;
  font-size: var(--p2-size);
  color: var(--p2-color);
  font-family: var(--font-regular);
  font-weight: 400;
  line-height: 1.7;
  margin: 5px 0;
}

p3,
.p3 {
  display: block;
  font-size: var(--p3-size);
  color: var(--p3-color);
  font-family: var(--font-regular);
  font-weight: 400;
  line-height: 1.8;
  margin: 5px 0;
}

p4,
.p4 {
  display: block;
  font-size: var(--p4-size);
  color: var(--p4-color);
  font-family: var(--font-regular);
  font-weight: 400;
  line-height: 1.8;
  margin: 5px 0;
}

p5,
.p5 {
  display: block;
  font-size: var(--p5-size);
  color: var(--p5-color);
  font-family: var(--font-regular);
  font-weight: 400;
  line-height: 1.8;
  margin: 5px 0;
}


/* ==============================================
   [3] 기존 클래스 호환 (ab-title, ab-desc 등)
   ▸ 기존 PHP 파일에서 사용 중인 클래스에 변수 연결
   ============================================== */

.ab-wrap {
  font-family: var(--font-regular);
}

.ab-title {
  font-size: var(--size-title);
  font-family: var(--font-bold);
}

.ab-section-title {
  font-size: var(--size-section-title);
  font-family: var(--font-bold);
}

.ab-tag {
  font-size: var(--size-tag);
}

.ab-desc {
  font-size: var(--size-desc);
}

.ab-tab-item {
  font-size: var(--size-tab);
  font-family: var(--font-bold);
}

.ab-value-card h4 {
  font-size: var(--size-card-title);
  font-family: var(--font-bold);
}

.ab-value-card p {
  font-size: var(--size-card-text);
}

.ab-banner-overlay h3 {
  font-size: var(--size-banner-title);
  font-family: var(--font-bold);
}

.org-node {
  font-family: var(--font-bold);
}

.ab-tl-year {
  font-size: var(--size-tl-year);
  font-family: var(--font-bold);
}

.ab-tl-content strong {
  font-size: var(--size-tl-title);
  font-family: var(--font-bold);
}

.ab-tl-content p {
  font-size: var(--size-tl-desc);
}

.q-text {
  font-family: var(--font-bold);
}

.ab-contact-hours {
  font-family: var(--font-bold);
}

.donor-year {
  font-family: var(--font-bold);
}

/* --- 분과 리스트 (business 페이지) --- */
.ab-dept-items li strong {
  font-size: var(--size-dept-title);
  font-family: var(--font-bold);
  color: #2563c0;
}

.ab-dept-items li span {
  font-size: var(--size-dept-desc);
  font-family: var(--font-regular);
  color: #555;
  line-height: 1.6;
}

/* 어두운 배경(배너, 이미지 카드 등) 내부에서는 커스텀 태그 색상을 흰색으로 강제 */
.ab-banner-overlay t1,
.ab-banner-overlay t2,
.ab-banner-overlay t3,
.ab-banner-overlay t4,
.ab-banner-overlay t5,
.ab-banner-overlay p1,
.ab-banner-overlay p2,
.ab-banner-overlay p3,
.ab-banner-overlay p4,
.ab-banner-overlay p5,
.ab-bg-card-content t1,
.ab-bg-card-content t2,
.ab-bg-card-content t3,
.ab-bg-card-content t4,
.ab-bg-card-content t5,
.ab-bg-card-content p1,
.ab-bg-card-content p2,
.ab-bg-card-content p3,
.ab-bg-card-content p4,
.ab-bg-card-content p5 {
  color: #ffffff;
}


/* ==============================================
   [4] 모바일 폰트 크기 (768px 이하)
   ▸ 커스텀 태그 + 기존 클래스 모두 모바일 대응
   ============================================== */

@media (max-width: 768px) {

  /* ── 모바일 제목 태그 ── */
  t1,
  .t1 {
    font-size: var(--m-t1-size);
  }

  t2,
  .t2 {
    font-size: var(--m-t2-size);
  }

  t3,
  .t3 {
    font-size: var(--m-t3-size);
  }

  t4,
  .t4 {
    font-size: var(--m-t4-size);
  }

  t5,
  .t5 {
    font-size: var(--m-t5-size);
  }

  /* ── 모바일 본문 태그 ── */
  p1,
  .p1 {
    font-size: var(--m-p1-size);
  }

  p2,
  .p2 {
    font-size: var(--m-p2-size);
  }

  p3,
  .p3 {
    font-size: var(--m-p3-size);
  }

  p4,
  .p4 {
    font-size: var(--m-p4-size);
  }

  p5,
  .p5 {
    font-size: var(--m-p5-size);
  }

  /* ── 모바일 기존 클래스 호환 ── */
  .ab-title {
    font-size: var(--m-size-title);
    word-break: keep-all;
  }

  .ab-section-title {
    font-size: var(--m-size-section-title);
  }

  .ab-banner-overlay h3 {
    font-size: var(--m-size-banner-title);
  }

  .ab-tag {
    font-size: var(--m-size-tag);
  }

  .ab-desc {
    font-size: var(--m-size-desc);
  }

  .ab-tab-item {
    font-size: var(--m-size-tab);
  }

  .ab-value-card h4 {
    font-size: var(--m-size-card-title);
  }

  .ab-value-card p {
    font-size: var(--m-size-card-text);
  }

  .ab-tl-year {
    font-size: var(--m-size-tl-year);
  }

  .ab-tl-content strong {
    font-size: var(--m-size-tl-title);
  }

  .ab-tl-content p {
    font-size: var(--m-size-tl-desc);
  }

  .ab-dept-items li strong {
    font-size: var(--m-size-dept-title);
  }

  .ab-dept-items li span {
    font-size: var(--m-size-dept-desc);
  }
}