/* ==========================================================================
 * footer.css — 푸터 v3 전용 손질 (2026-08-30 채린 요청)
 * ==========================================================================
 * · 푸터에 닿으면 지면이 **검정**으로 반전된다(원래는 --color-accent 갈색).
 *   반전 자체는 js/mod-transition.js 가 body 에 .is-footer-inview 를 붙여 일으킨다 —
 *   여기서는 그 색만 바꾼다.
 * · 큰 글자 안을 채우는 사진은 마크업의 data-title-mask-src 가 정한다
 *   (지금 assets/img/title-mask-pixel.jpg — 파란 픽셀 하프톤, 2026-08-30 교체.
 *   그전 title-mask.jpg(파란 바탕에 숫자·π)는 남겨 뒀다 — 되돌리려면 마크업의 src 두 곳만 바꾸면 된다).
 * · ★ 서체 ★ 푸터 전체가 **--boot-body**(css/boot.css :root)를 쓴다 — 지금 값은 TeX Gyre Heros.
 *   내력: Helvetica Neue(맥에만 있어 다른 기기는 Arial 로 떨어졌다) → Inter(2026-08-30)
 *        → **Heros**(2026-09-01, 파일을 함께 배포해 어느 기기에서나 같다).
 *   ⚠ 여기 있던 `--footer-font`(Inter 스택) 선언은 **2026-09-01 에 지웠다** — 푸터도 카드 머리줄도
 *     전부 --boot-body 로 옮겨 가 쓰는 데가 없어졌는데, 검사창에 계속 보여서 헷갈렸다(채린 지적).
 *     Inter 는 --boot-body 스택 **뒤쪽 대비**로 남아 있다(Heros 파일을 못 받았을 때).
 *     되돌릴 일이 있으면 그 스택을 그대로 적으면 된다:
 *       "Inter", "Helvetica Neue", Helvetica, "Pretendard Variable", Arial, sans-serif
 * ========================================================================== */

body.is-footer-inview {
  background-color: var(--footer-bg, #000000);
}

/* ★ 푸터 전체 서체 ★ 캡션·간지 머리글과 같은 --boot-body (2026-09-01 채린 "푸터 문구도").
   지금 그 값은 TeX Gyre Heros — 선언과 @font-face 는 css/boot.css 의 :root 에 있다.
   내력: Inter(2026-08-30) → **Heros**(2026-09-01).
   ⚠ 이제 사이트의 영문 서체는 **--boot-body 한 곳**이 정한다 — 푸터·캡션·간지 머리글·카드 머리줄.
   ⚠ Heros 는 **400·700 두 굵기뿐**이다. 아래 문구의 500 은 브라우저가 400 으로 맞춘다
     (합성 볼드는 안 생긴다). 더 굵게 하려면 그 값을 700 으로 올릴 것. */
.site-footer,
.site-footer__quote,
.site-footer__credits {
  font-family: var(--boot-body);
}

/* ── 큰 글자 "DJ Bank" ──
 * 2026-08-30 채린 요청 "스트로크 끝에 얼라인" 뒤로는 **화면에 그려지는 크기를 여기서 안 정한다.**
 * index.html 의 viewBox 가 글자의 **획 상자와 똑같이** 잡혀 있고 상자가 지면 폭에 맞춰
 * 늘어나므로, 아래 font-size 는 그 viewBox 안의 좌표 단위일 뿐이다
 * (1000 → 상자 3590×740. 둘은 한 짝이라 **따로 바꾸면 글자가 상자를 넘거나 붕 뜬다**).
 * ⚠ 서체·굵기·자간을 바꾸면 획 상자를 다시 재서 viewBox 와 x·y 를 함께 고칠 것 —
 *   재는 법은 index.html 의 마스크 머리말에 적어 뒀다.
 * ★ 크기 ★ --footer-mask-size (viewBox 좌표계) */
.site-footer__mask-text {
  /* ★ 서체 ★ 푸터 전체와 같은 --boot-body(지금 TeX Gyre Heros).
     ⚠ **이 한 줄을 지우면 안 된다.** css/layout.css 의 `.site-footer__mask-text` 가
       `font-family: var(--font-display)`(프리텐다드)를 같은 특정성으로 들고 있어서,
       여기서 선언을 빼면 **상속이 아니라 그 규칙이 이긴다** — 실제로 그래서 한 번 떨어졌다.
     ⚠ **서체를 바꾸면 index.html 의 viewBox 와 x·y 를 다시 재야 한다**(마스크 머리말에 재는 법).
       지금 값은 **Heros 600**(= 700 파일) · 자간 -0.05em 으로 잰 것이다. */
  font-family: var(--boot-body);
  font-weight: 600;   /* 2026-08-30 채린 지정 (전 400) */
  font-size: var(--footer-mask-size, 1000px);
}

/* ── 큰 글자 아래 틈 = **1rem** ── (2026-08-30 채린 지정. 내력: 0 → 1rem)
 * 재는 기준은 **획의 아래끝**이다. index.html 의 viewBox 가 획 상자와 똑같이 잡혀 있어서
 * (0 0 3590 740) SVG 상자 아래끝 = 획 아래끝이고, 그래서 이 padding 이 그대로 틈이 된다.
 * ⚠ viewBox 를 글자 상자로 되돌리면 밑선 아래 빈 자리가 더해져 틈이 이 값보다 커진다.
 * ⚠ 이 프로젝트의 1rem 은 화면 폭을 따라 자란다(15~22px) — 1440 에서 17.6px · 1821 에서 18.8px. */
.site-footer,
[data-footer] {
  padding-bottom: 1rem;
}
.site-footer__mask svg { display: block; }

/* 푸터 문구(DYNAMIC JOURNEY / THE FIRST ERP BANKING) — 2026-08-30 채린 지정 5rem.
   ⚠ 이 프로젝트의 1rem 은 화면 폭을 따라 자란다(15~22px). 1440 에서 5rem ≈ 88px. */
.site-footer__quote {
  font-size: 5rem;
}

/* 푸터 문구 — 굵기 500 · 자간 -0.05em (2026-08-30 채린 지정. 굵기 내력 600 → 500) */
.site-footer__quote {
  font-weight: 500;
  letter-spacing: -0.05em;
}

/* ── 크레딧 줄(Made by DJ Bank …) ── (2026-08-30 채린 요청)
 * · 자간을 더 좁혔다(--tracking-ui −0.001em → −0.03em). */
.site-footer__credits {
  letter-spacing: -0.03em;
}

/* ── 준법감시인 심의필 ── (2026-09-03 채린)
 * 내력: "Made by 위, 흰 50%" → "프리텐다드, 더 작게, 묶지 말고" → "0.8rem, 행간 1.3"
 *       → "같은 줄 오른쪽 끝" 으로 옮겨 봤다가 **원복** (지금 = 세 번째 상태).
 * · 서체  : --font-display(Pretendard). 크레딧 줄(Heros)과 다르다.
 * · 크기  : 0.8rem · 행간 1.3. Made by 는 --text-base(1rem) — 그보다 작다.
 * · 색    : 흰색 **50%** (2026-09-03 채린, 50 → 60 → 40 → 50). opacity 가 아니라 color 의 알파다 — reveal 이 투명도를 타도 더 흐려지지 않는다.
 * · 자리  : .site-footer__meta 의 직계 자식으로, .site-footer__credits **앞**에 따로 선다(왼쪽).
 *          크레딧 묶음 안에 넣으면 그 묶음이 가로 flex(space-between)라 Made by 가 오른쪽으로
 *          튕겨 나가고(실측), 서체·크기도 딸려간다 — 그래서 묶지 않는다.
 * · 틈    : 아래 Made by 와 **0.2rem** (2026-09-03 채린 지정, 0.75 → 0.4 → 0.2). .site-footer__meta 는 gap 0 이라 여기서 직접 준다. */
.site-footer__notice {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.2rem;
  word-break: keep-all;   /* 폰에서 괄호 문구가 넘어갈 때 낱말 중간("목적으/로")이 아니라 띄어쓰기에서 끊기게 (2026-09-04) */
}
/* 둘째 줄 끝 괄호 문구 "(유효기간 이후에는 …)" — 2026-09-04 채린. 처음엔 한 단 작게(0.8em) 했다가
   같은 날 "**같은 크기로**" 라 해서 1em. <small> 태그는 남겨 뒀다(브라우저 기본 smaller 를 여기서 덮는다).
   폰 크기는 아래 ⑤ 에서 따로 잡는다(한 줄에 넣으려고 vw 로 줄인다). */
.site-footer__notice-sub {
  font-size: 1em;
  /* ⚠ **줄을 따로 잡지 않는다**(2026-09-04 채린 "유효기간 옆에 붙여줘, 줄바꿈 하지 말고").
     한때 inline-block 으로 통째로 셋째 줄에 내렸었는데 원복. 그냥 인라인이라 "유효기간 …" 바로 뒤에 이어지고,
     폰(11px)에서는 폭이 모자라 괄호 안에서 자연스럽게 다음 줄로 넘어간다(390: "… 관리 기록" / "목적으로 유지됩니다.)").
     PC(1440, 14px) 는 둘째 줄에 다 들어간다. */
  display: inline;
  /* ⚠ <small> 이 다른 규칙에서 line-height 1.4 를 받아(실측 15.4px) 둘째·셋째 줄만 벌어졌다 → 부모 행간을 따르게. */
  line-height: inherit;
}

/* ── 크레딧 · 구분선 · 큰 글자 사이 틈 ── (2026-08-30 채린 지정)
 * **위아래가 다른 값**이라 묶음의 gap 으로는 안 된다(gap 은 한 값뿐).
 * 그래서 gap 은 0 으로 두고 **구분선 자신의 바깥여백**으로 위아래를 따로 준다.
 *   크레딧 ↕ 구분선 : 0.35rem  — "붙여" 달라는 쪽
 *   구분선 ↕ DJ Bank : 1.5rem  — "틈을 줘" 라는 쪽
 * ⚠ 아래쪽 틈은 **획 위끝까지의 거리**가 그대로다 — viewBox 가 획 상자라 상자 위끝 = 획 위끝.
 * ⚠ 1rem 은 화면 폭을 따라 자란다(15~22px). */
.site-footer__meta {
  gap: 0;
}
.site-footer__meta .divider {
  margin-top: 0.35rem;
  margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   모바일 푸터 (2026-08-31 채린 요청)
   ══════════════════════════════════════════════════════════════════════════
   ① 윗쪽 영문 타이틀(DYNAMIC JOURNEY / THE FIRST ERP BANKING) **3rem**
   ② 검정이 **화면을 꽉 채우지 않고 푸터 영역만** 덮는다
   ⚠ 원래는 `body.is-footer-inview { background-color: #000 }` 이라 **지면 전체**가 검게 반전됐다.
     그래서 푸터 위 빈 공간까지 검게 보였다. 모바일에서는 그 반전을 끄고
     **`.site-footer` 자신에게** 배경을 준다 — 그러면 딱 푸터 높이만 검정이다.
   ⚠ `is-footer-inview` 클래스 자체는 그대로 둔다 — 글자색 반전 등 다른 규칙이 함께 본다.
   ⚠ 데스크톱은 예전 그대로(지면 전체 반전)다. */
@media (max-width: 767px) {
  .site-footer__quote {
    /* ★ 폭이 좁으면 함께 줄어든다 ★ (2026-09-01 채린 "320 에서 반응형이 안 먹는 것 같다")
       ⚠ 원인은 **rem 의 하한**이다. 이 프로젝트의 1rem 은 `clamp(15px, 12.96px + 0.319vw, 22px)`
         인데 **430px 아래에서는 계속 15px** 라, 2.3rem 이 320 에서도 390 에서도 똑같이 34.5px 였다.
         그 크기로는 320 에서 "DYNAMIC JOURNEY" 가 한 줄에 안 들어가 네 줄로 접혔다.
       → vw 를 함께 걸어 **좁아지면 따라 줄게** 했다. 8.85vw 는 390 에서 34.5px = 지금과 같은 값이라
         390 이상에서는 보이는 게 하나도 안 바뀐다. 320 에서는 28.3px 이 된다.
       ★ 조절하는 곳 ★ 아래 두 값 중 작은 쪽이 이긴다. 390 기준 크기를 바꾸려면
         `원하는px ÷ 3.9 = vw` 로 계산해 8.85vw 자리를 고친다. */
    font-size: min(2.2rem, 8.85vw);   /* 2026-09-01 채린 지정 (5rem → 3 → 2.5 → 2.3 → 2.2rem) */
    line-height: 1.15;   /* 2026-08-31 채린 "행간 좀 주고" — 데스크톱(0.95)보다 넉넉하게 */
  }

  /* ③ 검정 영역 높이 자체를 줄인다 (2026-08-31 채린)
     ⚠ 푸터 높이는 `--footer-height`(min-height)가 잡는다 — 지금 1063px 인데
       안에 든 내용은 **문구 180 + 크레딧 125** 뿐이라 800px 넘게 비어 있었다.
       내용이 늘면 알아서 커지므로 min-height 만 낮추면 된다.
     ★ 조절 ★ --footer-height */
  .site-footer {
    --footer-height: 470px;   /* 2026-08-31 채린 지정 (1063 → 620 → 470) */
  }

  /* ④ 카피라이트 두 줄 — 행간 좁히고, 선(divider) 위 여백을 준다 (2026-08-31 채린) */
  .site-footer__credits,
  .site-footer__credits p {
    line-height: 1.25;
  }
  .site-footer__credits {
    margin-top: 0.6rem;
  }
  /* ⑤ 심의필 — 모바일도 데스크톱처럼 **Made by 위, 두 줄** (2026-09-03 채린, 최종)
     · 틈: 위 ④의 크레딧 margin-top 0.6rem 이 심의필↔Made by 사이에 끼어 0.2rem 이 0.8rem 으로
       늘어난다(.site-footer__meta 가 flex 라 여백이 안 겹친다). 그래서 그 0.6rem 은 심의필이
       이어받고(제목↔심의필), 크레딧 쪽은 0 으로 되돌린다. 심의필 ↔ Made by = 0.2rem.
     · 내력(같은 날): Made by 아래·한 줄 → 위·한 줄 → 큰 글자 "DJ Bank" 아래 맨 끝·한 줄(바닥 10px)
       → **원래대로**. 되살릴 때 참고 —
         한 줄:   <br class="br-desktop"> + white-space:nowrap
                  + font-size: clamp(9px, calc((100vw - 32px) / 31.5), 0.8rem)
                  (12px 이면 390 에서 376px 라 지면 폭 360 을 넘쳐 화면 폭에서 역산한 것)
         맨 끝:   .site-footer__notice { order:1; margin:0.5rem 0 0 }
                  + .site-footer { padding-bottom:10px }
                  + .site-footer__inner { min-height: calc(var(--footer-height) - var(--space-6) - 10px) }
                  (inner 의 min-height 가 위아래 패딩 22.5 를 가정해 잡혀 있어 패딩만 줄이면 안 내려간다) */
  /* ★ 2026-09-04 채린(스크린샷 시안) — 폰은 자리가 바뀐다 ★
     제목 → **Made by**(바로 아래) → (빈 공간) → **심의필** → 구분선 → DJ Bank.
     · 마크업 순서(심의필 → Made by)는 PC 와 같이 두고, 여기서 order 로만 바꾼다.
     · 심의필을 맨 아래로 미는 건 margin-top:auto — 그러려면 .site-footer__meta 가 남은 높이를
       차지해야 해서 flex:1 을 준다(.site-footer__inner 가 세로 flex + min-height 라 남는 높이가 있다).
       내용이 --footer-height(470) 를 넘으면 auto 여백은 0 이 되고 그냥 차례로 쌓인다.
     · 제목 ↔ Made by 틈 = 상자 0.6rem(글자 사이 약 19px) — 크레딧 margin-top 이 inner 의 gap 60px 을 도로 당긴다.
     · 심의필 ↔ 구분선 = 아래 margin-bottom + 구분선 margin-top 0.35rem.
     ⚠ PC 는 이 블록 밖이라 그대로(심의필이 Made by 위). */
  .site-footer__meta {
    flex: 1 1 auto;
  }
  .site-footer__credits {
    order: -1;
    /* ★ 제목 ↔ Made by 틈 ★ (2026-09-04 채린, 시안 "이정도 되게끔")
       .site-footer__inner 의 gap(--space-16 = 4rem, 폰 60px)이 먼저 벌려 놓으므로 그걸 도로 당기고 **0.6rem** 만 남긴다.
       기준은 상자가 아니라 **글자(잉크) 사이**다 — 시안을 픽셀로 재면 "ERP BANKING" 밑 ↔ "Made by" 위가
       제목 캡높이의 0.95배 ≈ 390 에서 **23px**. 상자 틈 + 제목 줄상자의 행간 여유(약 10px)가 글자 사이가 된다(0.9rem 일 때 실측 24px).
       내력(같은 날): 60 에서 0.6rem 만 뺀 51px → 0.6rem → -0.6rem(글자가 겹쳤다, 실측) → 0.9rem(글자 사이 24px)
       → **0.6rem**(채린 "좀만 더" — 글자 사이 약 19px).
       ★ 조절 ★ 앞의 0.6rem 만 바꾼다. 0.1rem = 1.5px. */
    margin-top: calc(0.6rem - var(--space-16));
  }
  .site-footer__notice {
    margin: auto 0 0.4rem;
    /* ★ 폰 크기 **11px** ★ (2026-09-04 채린 지정)
       내력(같은 날): 시안대로 둘째 줄을 한 줄에 넣으려고 vw 로 줄였었다 — 괄호 0.8em 일 때 2.65vw(390 에서 10.3px),
       괄호를 같은 크기로 하니 2.37vw(9.2px)까지 내려가서 → "11px" 로 확정.
       11px 이면 둘째 줄이 462×11/12 = 423px > 지면 360 이라 한 줄엔 안 든다 — 괄호 문구가 유효기간 뒤에 이어지다
       괄호 안에서 다음 줄로 넘어간다(폰은 세 줄). 767 위는 0.8rem 그대로. */
    font-size: 11px;
    line-height: 1.2;   /* 2026-09-04 채린 지정 (폰만. PC 는 위 기본값 1.3 그대로) */
  }

  body.is-footer-inview {
    background-color: transparent;
  }
  .site-footer {
    background-color: var(--footer-bg, #000000);
  }
}