/* ============================================================
   07-footer.css — 푸터 · 패밀리 사이트 띠

   원본: 01-common-global.css 안의 cf2 블록 + inc/06-footer-ui.php
        (PHP 파일 안에 CSS 가 섞여 있었습니다)
   ============================================================ */


/* ────────────────────────────────────────────
   1. 패밀리 사이트 로고 띠
   ──────────────────────────────────────────── */

/* 위쪽 여백을 아래쪽보다 크게 둡니다.
   위는 기사 목록과 맞닿아 있어 확실히 떼어놔야 하고,
   아래는 곧바로 검은 푸터가 시작되므로 그 자체가 경계 역할을 합니다.

   ⭐⭐ **좌우 여백이 여기 있습니다** (2026-08-20). 전에는 `0` 이었습니다.
   안쪽 wrapper 는 `max-width`(1260) 만 있어서, 화면이 **1356px 아래로
   내려가면 그 값이 안 걸려 띠만 화면 끝까지** 나갔습니다 —
   실측(고치기 전 · 창 1280): 띠 0~1241 · 기사 목록 48~1193 → 좌우 48px 씩 밖.
   ⚠ 폰에서도 같은 이유로 16px 씩 어긋나 있었습니다.

   ⛔⛔ **이 여백을 wrapper 로 옮기지 마세요.** `overflow: hidden` 은
   **padding 안쪽까지** 를 보이는 창으로 봅니다 — 로고가 그 여백 안으로
   흘러들어와 본문 축을 다시 넘습니다. **바깥 상자가 내야 합니다.**

   ⭐ 배경(흰 띠)은 그대로 **화면 끝까지**입니다. 여백은 이 상자 안쪽이라
   배경이 칠하는 범위와 무관합니다 — 규칙 7 의 *"색은 화면 끝, 내용은 1260"*
   그대로입니다.
   ⭐ 모바일 값을 따로 안 적습니다. `--gutter` 가 폰에서 16px 로 저절로
   내려가므로 **본문과 같은 식**이 됩니다(짝이 안 늘어납니다). */
.family-slider-section {
  padding: var(--space-11) var(--gutter) var(--space-9);
  overflow: hidden;
  background: var(--color-bg);
}

/* 로고 띠의 좌우 끝.
   화면 끝까지가 아니라 본문과 같은 폭(--width-body)에서 잘립니다.
   ⚠ 2026-08-18 에 `--width-container` 에서 바꿨습니다. 그 토큰은 여백까지
   포함한 바깥 상자 폭이라(08-19 기준 1356px) 그대로 두면 로고 띠만 혼자
   96px 넓어집니다. 위쪽 기사 목록의 왼쪽·오른쪽 끝과 나란히 맞습니다.

   ⚠⚠ **`padding` 을 여기에 주지 마세요** (2026-08-20). 좌우 여백은
   **감싸는 `.container` 가 냅니다**(parts/family-slider.php). `overflow: hidden`
   은 padding 안쪽까지를 보이는 창으로 보기 때문에, 여기에 여백을 주면
   **로고가 그 여백 안으로 흘러들어와** 본문 축을 넘습니다.
   ⛔ 그 `.container` 를 걷어내면 1356px 아래에서 띠만 화면 끝까지 갑니다 —
     08-20 에 고친 그 증상이 그대로 돌아옵니다. */
.family-slider-wrapper {
  overflow: hidden;
  width: 100%;
  max-width: var(--width-body);
  margin-inline: auto;

  /* ⭐⭐⭐ **위아래 여백은 괜찮습니다. 위 경고는 좌우 이야기입니다**
   *   (2026-09-09 — 헷갈리기 쉬워 여기 따로 적습니다).
   *
   *   위 44줄의 *"`padding` 을 주지 마세요"* 는 **좌우** 여백을 막는 것입니다.
   *   `overflow: hidden` 이 padding 안쪽까지를 보이는 창으로 보기 때문에,
   *   좌우에 여백을 주면 **로고가 그 여백으로 흘러들어와 본문 축을 넘습니다.**
   *   ⭐ **위아래는 그 문제가 없습니다** — 띠는 가로로만 흐릅니다.
   *
   * ⚠ 이 2px 이 하는 일: 호버로 로고가 1.06배가 되면 높이가 28 → 29.7px 이
   *   되는데, 상자가 28px 이면 위아래로 **0.85px 씩 깎입니다**(실측).
   *   여백 2px 이 그 자리를 만들어 줍니다.
   * ⚠ 토큰을 안 쓴 것은 `--space-*` 에 **2px 단계가 없어서**입니다. 값을
   *   늘리실 일이 생기면 그때 토큰으로 빼세요.
   * ⛔ 이 줄을 지우면 잘림이 조용히 돌아옵니다 — 아래 `scale(1.06)` 과 짝입니다. */
  padding-block: 2px;
}

/* 로고가 옆으로 흐르는 띠. */
.family-slider-track {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: max-content;
  /* ⚠ 시간의 원본은 `00-tokens.css` 의 `--family-marquee-dur` 입니다 —
     **왜 그 값인지**(로고 하나가 지나는 시간 · 하한)도 거기 있습니다.
     ⛔ 여기에 숫자를 다시 적지 마세요. */
  animation: withu-marquee var(--family-marquee-dur) linear infinite;
}

/* ⛔⛔⛔ **멈추는 길이 `:hover` 하나뿐입니다 — 알고 그렇게 둔 것입니다**
 *   (2026-09-09 의뢰인 판단).
 *
 * ⚠⚠ **폰과 키보드에는 hover 가 없습니다. 그쪽에서는 멈출 방법이
 *   없습니다** — 표준 **6.2.2(정지 기능 제공) 미달**입니다.
 *
 * ⭐ 09-09 에 멈춤 버튼을 만들었다가 **같은 날 걷어냈습니다.** 근거는
 *   디자인입니다 — 어느 자리에 두어도 어색했습니다.
 * ⛔⛔ **「어쩔 수 없다」로 읽지 마세요. 할 수 있는데 안 한 것입니다.**
 *   경위와 되돌리는 법은 `작업기록/접근성.md` 의
 *   **「로고 띠 — 6.2.2 미달로 두기로 한 판단」** 에 있습니다.
 *
 * ⭐ 되돌리는 가장 쉬운 길은 버튼이 아니라 **흐름을 없애는 것**입니다
 *   (`animation: none` + 줄바꿈). 그러면 이 항목이 **해당 없음**이 되고
 *   버튼도 필요 없어집니다. 데스크탑에서는 오히려 나아집니다(실측). */
.family-slider-section:hover .family-slider-track {
  animation-play-state: paused;
}

@keyframes withu-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ⚠⚠ **벌 수를 줄이는 것은 JS 입니다** (`06-footer-ui.js` 의 `repeatCount`).
 * **둘이 짝입니다.** 여기는 흐름을 끄고 줄바꿈으로 바꾸기만 합니다.
 *
 * ⛔ 한쪽만 고치면 조용히 어긋납니다 —
 *   여기만 있으면 **열 벌이 그대로 줄바꿈**해서 같은 로고가 24줄로 깔리고
 *   (2026-09-10 아이폰에서 실제로 그랬습니다 · 높이 1,632px),
 *   JS 만 있으면 **한 벌이 계속 흐릅니다.** */
@media (prefers-reduced-motion: reduce) {
  .family-slider-track {
    animation: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* ⭐ 호버로 커지는 것도 뺍니다 (2026-09-09, 의뢰인 지시 — 버튼을 감춘 것과
     같은 판단입니다). 색이 바뀌는 것이 아니라 **움직임**이라 이 설정의
     대상입니다.
     ⚠ 로고는 원색 그대로입니다 — 없애는 것은 움직임뿐입니다. */
  .family-circle:hover img { transform: none; }
}

/* 로고 한 칸.
   자바스크립트가 <a class="family-circle"><img></a> 모양으로 그립니다
   (assets/JS/06-footer-ui.js). 클래스 이름에 circle 이 남아 있는 것은
   자바스크립트 쪽 이름이라 그대로 둔 것입니다. 동그라미는 없습니다.

   원본 사이트는 흰 동그라미(120px) 안에 로고(75px)를 넣는 디자인이었습니다.
   그대로 옮겨봤더니 동그라미 테두리가 도드라져 보인다는 의견이 있어,
   동그라미 없이 로고만 흐르는 쪽으로 정했습니다. (2026-07-28 결정)
   되살리려면 reference/kale-pro-child/assets/CSS/01-common-global.css 475~497줄. */
.family-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ⛔⛔ 여기에 **회색(`grayscale`)이 잠깐 있었습니다** (2026-08-19 오후 →
 * 같은 날 되돌림). *"계열사 로고는 원색으로 되돌려줘"* (의뢰인)
 *
 * 넣었던 이유는 *"푸터에서 제일 눈에 띄는데 그 자리에 맞는 무게가 아니다"*
 * 였고, 되돌린 이유는 **원색이 맞다**는 의뢰인 판단입니다.
 * ⛔ 다시 넣지 마세요. 되살리시려면 `filter: grayscale(1)` 한 줄과
 *   아래 되돌리는 규칙에 `filter: grayscale(0)` 을 더하면 됩니다.
 *
 * ⭐⭐⭐ **흐림(`opacity: 0.75`)도 2026-09-09 에 걷어냈습니다.**
 *
 *   ⚠⚠ **폰에는 호버가 없어서 로고가 영영 흐린 채였습니다.** 되살아나는
 *     길이 `:hover` 뿐이었고, 08-19 에 더한 `:active` · `:focus-visible` 도
 *     **09-07 에 링크를 `tabindex="-1"` 로 만들면서 죽었습니다.** 조건이
 *     바뀐 것을 규칙이 못 따라간 자리였습니다 — 그 두 줄은 지웠습니다.
 *
 *   ⭐ 08-19 결정(*"계열사 로고는 원색으로"*)과 **방향이 같습니다.** 회색만
 *     걷어내고 흐림은 남아 있어서 그 결정이 반만 이뤄진 상태였습니다.
 *
 *   ⚠ 로고는 **명도 대비 기준 대상이 아닙니다**(로고 · 장식 텍스트 · 비활성
 *     컨트롤은 제외). 그래도 재봤고, **실측값은
 *     `접근성-규칙-KWCAG22.md` 1절**에 있습니다 — 여기 옮겨 적지 않습니다.
 *
 * ⭐ 이제 표시는 **크기**로 냅니다(아래 `:hover`). 로고 색을 안 건드리므로
 *   브랜드 규정에 안 걸리고, 흐림처럼 "평소 상태"를 깎지도 않습니다. */
.family-circle img {
  width: auto;
  max-height: var(--family-logo);
  object-fit: contain;
  transition: transform var(--transition);
}

/* ⚠ 1.06 배인 이유 — 실측으로 정했습니다. 옆 로고와 간격이 80 → 77.4px 라
   **겹치지 않고**, `transform` 은 배치에 영향을 주지 않아 **띠 높이도 안
   바뀝니다**(28px 그대로). 잘림은 위 상자의 `padding-block: 2px` 이 막습니다.
   ⚠ 토큰이 아닌 것은 `00-tokens.css` 에 **배율 항목이 없어서**입니다.
   ⛔ 크게 키우지 마세요 — 1.1 을 넘으면 위 2px 으로 못 막습니다. */
.family-circle:hover img { transform: scale(1.06); }


/* ────────────────────────────────────────────
   2. 푸터
   ──────────────────────────────────────────── */

.cf2 {
  padding: var(--space-10) 0 var(--space-9);
  background: var(--c-gray-950);
  color: var(--color-text-invert);
}

.cf2 a { color: inherit; }

/* ⭐⭐⭐ 푸터 안쪽을 **본문 폭(1260px)** 으로 (2026-08-20, 의뢰인 지적 —
 * *"푸터와 로고 띠의 축이 어긋나 보인다"*).
 *
 * ⛔⛔ **푸터는 1260 이 아니었습니다.** 이 문서(CLAUDE.md 규칙 7)가
 * *"푸터는 1260"* 이라고 적어둔 지 이틀이 지났는데 **코드는 한 번도 그런
 * 적이 없었습니다.** 푸터에는 `.main-column` 이 없어서 `.container` 안쪽
 * (**1496 = 홈 슬라이더 폭**)을 그대로 쓰고 있었습니다.
 *
 * 실측 (헤드리스 Edge · 2026-08-20 · 고치기 전):
 *
 *   창 1920 │ 기사 목록 311~1571 (1260) │ **푸터 193~1689 (1496)** ⛔ 118px 씩 밖
 *   창 1440 │ 기사 목록  71~1331 (1260) │ **푸터  48~1353 (1305)** ⛔  23px 씩 밖
 *
 * ⭐⭐ **즉 푸터가 슬라이더의 예외 폭을 무단으로 같이 쓰고 있었습니다.**
 * 규칙 7 의 1496 은 *"홈 메인 슬라이더 **하나만**"* 이고, 그 근거는
 * **넘어가도 되는 것은 사진뿐**이라는 것입니다. 푸터 안쪽은 메뉴 ·
 * FAMILY SITE · SNS · 약관 — **전부 링크**라 정반대 편에 섭니다.
 * (이 문서의 *"푸터 글자를 화면 끝까지 — 접었습니다"* 절이 같은 논거입니다)
 *
 * ⚠⚠ **`.main-column` 을 쓰지 마세요.** 그 이름을 푸터에 씌우면
 * `03-article.css` 의 `.single .main-column { max-width: 1080px }` 이
 * 함께 걸려서 **기사 화면에서만 푸터가 1080 으로 좁아집니다.**
 * 목록 화면에서는 멀쩡해 보여 알아채기 어려운 자리입니다.
 *
 * ⚠ 그래서 `.container` 의 **바깥 상자 폭**만 좁힙니다. 좌우 여백
 * (`padding-inline: --gutter`)은 공용 규칙 것을 그대로 씁니다 — 그래야
 * 1356px 아래에서 본문과 **정확히 같은 식**이 되어 폭이 안 튑니다.
 * ⛔ 여기에 `padding` 을 다시 적지 마세요. 두 곳이 짝이 됩니다.
 *
 * ⭐ `--width-container`(1592 = 슬라이더 + 여백)와 **같은 방식의 계산**입니다.
 *   숫자를 적지 않았으므로 폭 토큰을 바꾸면 저절로 따라옵니다(규칙 2). */
.cf2 .container { max-width: calc(var(--width-body) + var(--gutter) * 2); }

.cf2-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.cf2-menus {
  display: flex;
  gap: var(--space-10);
}

.cf2-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cf2-col a {
  font-size: var(--fs-base);
  transition: color var(--transition);
}

/* ⛔⛔⛔ **이름에 `col-` 을 넣지 마세요** (2026-08-19에 실제로 밟은 함정).
 *
 * 처음에 `.cf2-col-main` · `.cf2-col-sub` 로 지었더니 **왼쪽이 16px 밀렸습니다.**
 * `01-layout.css` 에 부트스트랩 격자 잔재가 있기 때문입니다:
 *
 *     [class*="col-"] { width: 100%; padding-inline: var(--space-4); }
 *
 * ⭐ 원래 이름 `cf2-col` 은 `col-` 이 아니라 안 걸렸는데, **뒤에 `-main` 을
 * 붙이는 순간 `col-` 이 생겨** 걸렸습니다. 그래서 푸터 메뉴만 16px 안으로
 * 들어가고 FAMILY SITE · 워드마크와 축이 어긋났습니다(의뢰인 지적).
 *
 * ⚠⚠ **`width: 100%` 도 함께 걸립니다.** 데스크탑에서는 두 칸이 각각 100% 를
 * 요구해 칸 폭이 뒤틀립니다 — 눈에 덜 띄어서 더 위험합니다.
 *
 * ⭐ 지금 이름은 `.cf2-main` · `.cf2-sub` 입니다. ⛔ `col` 을 도로 넣지 마세요.
 * ⭐ 이 격자 잔재는 `.col-sm-6` · `.col-md-4`(부트스트랩 마크업)가 아직
 *   쓰이고 있어 못 지웁니다 — **이름을 피하는 쪽이 맞습니다.**
 *
 * ⭐⭐⭐ 주 메뉴와 부가 정보를 **색으로 가릅니다** (2026-08-19, 의뢰인 요청 —
 * 신세계 뉴스룸 참고: *"위가 흰색, 아래가 회색"*).
 *
 * ⚠⚠ 전에는 **둘 다 `--c-gray-300`(#ddd)** 이라 구별이 없었습니다.
 * 데스크탑에서는 두 칸이 좌우로 떨어져 있어 그럭저럭 읽혔지만,
 * **폰에서 세로 한 줄로 합치면**(아래 모바일 규칙) 일곱 줄이 똑같은
 * 회색으로 이어져 **어디까지가 주 메뉴인지 알 수 없습니다.**
 *
 * ⭐ 그래서 색 위계는 **폰·데스크탑 둘 다** 겁니다. 배치는 화면마다 다르지만
 * *"무엇이 주 메뉴인가"* 는 화면과 무관한 이야기입니다.
 *
 * 대비(배경 #111 기준) — 둘 다 본문 기준 4.5:1 을 넘습니다:
 *   주 메뉴 #fff  → 18.9 : 1
 *   부가 정보 #999 → 6.6 : 1
 * ⛔ 부가 정보를 `--c-gray-600`(#888) 아래로 내리지 마세요. 더 내리면
 *   4.5:1 에 가까워지는데, **이건 장식이 아니라 누르는 링크**입니다
 *   (08-11 의 *"#999 를 누를 수 있는 것에 쓰지 마세요"* 는 **흰 배경**
 *   이야기입니다 — 검은 배경에서는 같은 #999 가 6.6:1 로 넉넉합니다).
 *
 * ⭐ 마우스를 올리면 **둘 다 흰색**이 됩니다. 부가 정보는 그때 위계가
 *   잠깐 사라지는데, '지금 이걸 가리키고 있다' 는 신호가 더 급합니다. */
.cf2-main a { color: var(--color-text-invert); }
.cf2-sub  a { color: var(--c-gray-500); }

.cf2-col a:hover { color: var(--color-text-invert); }


/* ⭐ 오른쪽 칸 — FAMILY SITE 와 SNS 를 세로로 쌓습니다 (2026-08-19).
   ⚠ 마크업 순서가 곧 화면 순서입니다(footer.php) — CSS 로 안 바꿉니다. */
.cf2-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}


/* ── 패밀리 사이트 드롭다운 ── */

.cf2-family { position: relative; }

.cf2-family-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  min-width: 200px;
  border: 0;
  border-bottom: 1px solid var(--c-gray-700);
  background: none;
  color: var(--c-gray-300);
  font-size: var(--fs-sm);

  /* 패밀리 사이트 버튼 — 글자가 라틴(FAMILY SITE)이라 --ls-label 입니다.
     ⚠ 이 칸에 한글을 넣게 되면 --ls-body 로 바꾸세요 (광고 라벨과 같은 사정). */
  letter-spacing: var(--ls-label);

  justify-content: space-between;
}

.cf2-family-btn .material-symbols-outlined {
  font-size: 20px;
  color: inherit;
  transition: rotate var(--transition);
}

.cf2-family.open .cf2-family-btn .material-symbols-outlined { rotate: 180deg; }

/* ⭐⭐⭐ 여는 방향이 **화면마다 다릅니다** — 데스크탑 아래 · 폰 **위**
   (데스크탑 2026-08-06 · 폰 2026-08-19, 둘 다 의뢰인 요청).

   ⚠⚠ **08-06 결정을 폰에서만 뒤집은 것입니다.** 그때 위로 열던 것을
   아래로 바꿨고, 이유는 *"'FAMILY SITE ⌄' 를 눌렀는데 목록이 반대쪽에
   나온다"* 였습니다. ⭐ **그 지적은 방향이 아니라 화살표 이야기였습니다** —
   폰에서는 화살표도 같이 뒤집었으므로(아래 규칙) 그 문제가 없습니다.
   ⛔ 08-06 주석을 근거로 폰 규칙을 지우지 마세요.

   ⭐⭐ **실측이 정반대로 갈립니다**(2026-08-19 · 목록은 260px 필요):

      | | 위로 열 자리 | 아래로 열 자리 | 맨 아래 스크롤 시 버튼 아래 화면 |
      |---|---|---|---|
      | 데스크탑 | 80px ⛔ 180px 넘침 | **322px** ✅ | 322px |
      | 폰      | **344px** ✅ | 124px ⛔ 137px 넘침 | **123px 뿐** |

   ⛔⛔ **데스크탑을 위로 바꾸지 마세요.** 버튼이 푸터 **맨 위**에 있어서
   위로 열면 푸터를 벗어나 **흰 바탕 계열사 로고 띠** 위로 180px 튀어나갑니다.
   ⭐ 폰은 버튼이 푸터 **맨 아래**라 사정이 정반대입니다.

   ⭐ 곁들여 — 폰에서 위로 열면 **푸터 밖으로 나가는 일이 아예 없어집니다**
   (넘침 137 → 0). 아래 "펼쳤을 때는 넘칩니다" 경고는 **데스크탑에만**
   해당하는 이야기가 됐고, 데스크탑은 원래 안 넘칩니다.

   ⭐ **폰에서 넘쳐도 눈에 안 띕니다.** 넘친 부분이 푸터 아래로 나가는데,
   거기는 `html` 배경이고 그 값이 **푸터와 같은 `--c-gray-950`** 입니다
   (01-layout.css 62줄 — 08-18 에 "푸터 아래 흰 여백" 을 고치면서 맞춰둔 값).
   그래서 푸터가 그냥 이어진 것처럼 보입니다.

   ⚠⚠ **그 두 색이 짝입니다.** `html` 배경을 다른 색으로 바꾸면 **그날부터
   폰에서 이 목록이 푸터 밖으로 튀어나온 것처럼 보입니다.** 그때는 여기
   `max-height` 를 120px 쯤으로 내리세요(폰만).

   ⚠ 2026-08-19 에 SNS 를 `.cf2-side`(버튼 아래)로 옮겼습니다. 목록이 펼쳐지면
   SNS 아이콘 위를 덮는데, `z-index` 가 있어 정상 동작합니다. */
/* ⛔⛔⛔ **닫혀 있을 때 상자를 접습니다** (2026-08-19, 의뢰인 지적 —
 * *"로고 아래 빈 공간이 여전히 있어. 푸터 아래에 뭔가 더 있는지 봐줘"*).
 *
 * ⚠⚠⚠ **`position: absolute` 는 '자리를 안 차지한다' 이지 '없다' 가
 * 아닙니다.** 부모 높이에는 안 들어가지만 **문서의 스크롤 영역은 늘립니다.**
 * 그래서 닫혀 있는데도(`visibility: hidden`) 260px 짜리 상자가 푸터 아래로
 * 뻗어, **푸터가 끝난 뒤에도 137px 을 더 스크롤할 수 있었습니다.**
 * 그 자리는 `html` 배경(푸터와 같은 검정)이라 **로고 아래 빈 공간**으로
 * 보였습니다 — 여백을 아무리 줄여도 안 없어지던 이유입니다.
 *
 * ⭐ 실측(2026-08-19 · 폰): 문서 높이 4625 → 이 목록만 `display:none` 하면
 *   **4504** 로 121px 줄었습니다. 그걸로 범인이 확정됐습니다.
 *
 * ⭐⭐ **`visibility: hidden` 은 스크롤 영역을 안 줄여줍니다.** 이 프로젝트가
 * 여러 번 적어둔 *"감춘 것은 없앤 것이 아니다"* 가 **레이아웃에서도** 그대로
 * 통하는 자리입니다.
 *
 * 고친 방법 — **닫히면 높이와 안쪽 여백을 0 으로** 접습니다. 그러면 상자가
 * 사실상 사라져(테두리 2px 만 남음) 스크롤 영역을 안 늘립니다.
 * ⚠ **`padding` 도 같이 접어야 합니다.** `max-height: 0` 만 두면 안쪽 여백
 *   16px 이 그대로 남아 절반만 고쳐집니다.
 * ⭐ 곁들여 여닫는 모양이 **흐려지기 → 미끄러져 내려오기** 로 바뀝니다.
 *   드롭다운에는 이쪽이 더 자연스럽습니다.
 * ⛔ `display: none` 으로 바꾸지 마세요 — 그러면 여닫는 움직임이 통째로
 *   사라집니다(`display` 는 중간 단계가 없습니다).
 *
 * ⚠ **펼쳤을 때는 여전히 푸터 밖으로 나갑니다**(폰에서 137px). 그건 사람이
 *   직접 연 상태이고 `html` 배경이 같은 색이라 이상하지 않습니다. */
.cf2-family-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-header);

  max-height: 0;
  overflow: hidden;
  padding: 0;

  background: var(--c-gray-900);
  border: 1px solid var(--c-gray-700);
  border-radius: var(--radius);

  /* 파이어폭스 · 표준. 손잡이색 · 바탕색 순서입니다.
     아래 ::-webkit-scrollbar 와 짝입니다 — 한쪽만 고치면 브라우저마다
     다른 스크롤바가 나옵니다. */
  scrollbar-width: thin;
  scrollbar-color: var(--c-gray-700) transparent;

  opacity: 0;
  visibility: hidden;

  /* ⚠ `max-height` · `padding` 이 목록에 있어야 접히는 움직임이 보입니다.
     빼면 툭 나타났다 툭 사라집니다. */
  transition: opacity var(--transition), visibility var(--transition),
              max-height var(--transition), padding var(--transition);
}

/* ── 스크롤바 (2026-08-06, 의뢰인 요청) ──
 *
 * 한 번 감춰봤다가 되돌렸습니다. "아래에 더 있다"는 신호가 없어져서
 * 회사 여덟 중 다섯만 있는 것처럼 보였습니다. 감추는 대신 **색을 낮춥니다.**
 *
 * 기본 스크롤바가 눈에 걸린 이유는 굵기가 아니라 **색**이었습니다 —
 * 브라우저가 밝은 회색으로 그려서, 검은 패널 위에서 회사 이름보다 밝았습니다.
 * 위치를 알려주는 보조 표시가 주인공보다 세면 안 됩니다.
 * (홈 SERIES 스크롤 막대 손잡이를 검정 → 회색으로 낮춘 것과 같은 판단입니다)
 *
 *   바탕  투명 — 패널 배경이 그대로 비칩니다. 안 쓸 때는 홈이 없는 것과 같습니다
 *   손잡이 #555 (--c-gray-700) — 패널 배경 #222 보다 밝아 보이되
 *          회사 이름 #ddd 보다 확실히 어둡습니다. 패널 테두리와 같은 색입니다
 *   올렸을 때 #888 — 잡을 수 있다는 것을 알려줍니다
 */
.cf2-family-list::-webkit-scrollbar {
  /* 6px — 기본값(약 15px)보다 얇습니다. 더 얇으면 마우스로 집기 어렵고,
     더 굵으면 글자 옆에서 존재감이 커집니다. */
  width: 6px;
}

.cf2-family-list::-webkit-scrollbar-track {
  background: transparent;
}

.cf2-family-list::-webkit-scrollbar-thumb {
  background: var(--c-gray-700);
  border-radius: var(--radius-pill);
}

.cf2-family-list::-webkit-scrollbar-thumb:hover {
  background: var(--c-gray-600);
}

/* ⚠⚠ **펼칠 때 되돌려야 하는 값이 넷입니다.** 위에서 접어둔 `max-height` ·
   `padding` · `overflow` 를 여기서 다시 열어줍니다 — 하나라도 빠뜨리면
   목록이 안 보이거나(높이 0) 스크롤이 안 됩니다(overflow hidden).
   ⭐ 260px 은 원래 값 그대로입니다. */
.cf2-family.open .cf2-family-list {
  max-height: 260px;
  overflow-y: auto;
  padding: var(--space-2) 0;
  opacity: 1;
  visibility: visible;
}

.cf2-family-list a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--c-gray-300);
}

.cf2-family-list a:hover {
  background: var(--c-gray-800);
  color: var(--color-text-invert);
}


/* ── 하단: 워드마크 + SNS ── */

.cf2-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
}

/* ⭐⭐ 워드마크 — **"여기가 끝" 이라는 마침표** (2026-08-19, 의뢰인 요청으로 키움).
 *
 * 72 → **88px** (폰은 44 → 64px, 아래 모바일 규칙).
 *
 * ⭐ 2026-08-19 에 SNS 를 위 `.cf2-side` 로 옮기면서 **이 줄에 워드마크만
 * 남았습니다.** 혼자 있으니 크기를 키운 만큼 그대로 마침표가 됩니다 —
 * 전에는 옆(폰에서는 아래)에 SNS 아이콘이 붙어 있어서 그 역할이 흐렸습니다.
 *
 * ⚠ 숫자를 직접 적습니다(규칙 2 예외). 이 값은 **이 자리 하나뿐**이고
 *   `--fs-*` 사다리의 어느 칸도 아닙니다 — 사다리에 넣으면 본문 글자가
 *   따라 움직입니다. 08-11 에 `.custom-logo { width: 300px }` 를 그대로 둔 것과
 *   같은 판단입니다. */
.cf2-brand {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 900;          /* Coolvetica 대신 굵기로 존재감을 냅니다 */
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text-invert);

  /* ⭐⭐⭐ 글자 밑에 남는 **폰트 자리**를 걷어냅니다 (2026-08-19, 의뢰인 지적 —
   * *"로고 아래에 빈 공간이 생겨"*).
   *
   * ⚠⚠ **여백을 준 적이 없는데 생기는 자리입니다.** 줄 상자는 글자 크기만큼
   * (`line-height: 1`)인데, 그 안에서 글자는 **베이스라인 위**에 놓이고
   * 아래쪽은 **내려가는 글자(g · y · p)를 위한 자리**로 비워둡니다.
   * "WithU" 에는 내려가는 글자가 없어서 그 자리가 **그대로 빈 채** 남습니다.
   *
   * 실측(2026-08-19 · 폰 64px): 글자 밑 → 상자 밑 **8.5px** = **0.133em**.
   * ⭐ `em` 이라 데스크탑(88px)에서도 저절로 맞습니다 — 폰트가 남기는 자리는
   *   글자 크기에 비례하기 때문입니다. ⛔ px 로 적지 마세요(두 곳이 짝이 됩니다).
   *
   * ⚠ 이건 **여백 조절이 아니라 폰트 보정**입니다. 푸터 아래 여백은 따로
   *   있습니다(`.cf2` 의 padding) — 그쪽은 아래 모바일 규칙에서 줄였습니다.
   * ⭐ 글꼴(`--font-display`)을 바꾸면 이 숫자를 다시 재세요. 폰트마다 다릅니다. */
  margin-bottom: -0.133em;
}

.cf2-sns {
  display: flex;
  gap: var(--space-3);
}

.cf2-sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-gray-700);
  border-radius: var(--radius-circle);
  transition: border-color var(--transition), background var(--transition);
}

.cf2-sns a:hover {
  border-color: var(--color-text-invert);
  background: var(--c-gray-800);
}

.cf2-sns i {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* 아이콘 모양.
 *
 * 글꼴(Font Awesome) 대신 모양을 직접 넣습니다. 원본은 아이콘 세 개를 쓰려고
 * 아이콘 글꼴 한 벌(수백 KB)을 통째로 받아오고 있었습니다.
 *
 * 방법: 위 .cf2-sns i 가 currentColor 로 칠한 네모를 만들고, 아래 그림 모양대로
 * 오려냅니다. 그래서 색은 CSS 가 정합니다 — 푸터 글자색을 바꾸면 같이 따라옵니다.
 *
 * **이 칸이 없으면 까만 네모가 나옵니다.** 오려낼 모양이 없어서
 * 칠해둔 네모가 그대로 보이기 때문입니다.
 *
 * SNS 를 하나 더 넣는다면 inc/06-footer-ui.php 의 withu_sns_channels() 에
 * 한 줄, 여기에 한 칸을 넣으세요. 두 곳이 짝입니다.
 *
 * 출처: Simple Icons (CC0). 상표는 각 회사 소유입니다. */

.cf2-sns-instagram {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E");
}

.cf2-sns-youtube {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.cf2-sns-x {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932zM17.61 20.644h2.039L6.486 3.24H4.298z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932zM17.61 20.644h2.039L6.486 3.24H4.298z'/%3E%3C/svg%3E");
}



/* ════════════════════════════════════════════
   모바일 (≤767px)
   ════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* 로고 띠의 여백·높이·간격은 00-tokens.css 가 모바일에서 알아서
     줄여줍니다(--space-11 · --space-9 · --space-10 · --family-logo).
     여기서 따로 지정하지 않습니다. */

  /* ⭐ 아래 여백을 줄였습니다 — `--space-7`(32px) → **`--space-5`(20px)**
   *   (2026-08-19, 의뢰인 지적 — *"로고 아래에 빈 공간이 생겨"*).
   *
   * ⚠⚠ **빈 자리는 둘로 이뤄져 있었습니다**(실측 40.5px):
   *     폰트가 남기는 자리  8.5px  → 위 `.cf2-brand` 의 `margin-bottom` 이 걷어냄
   *     푸터 아래 여백     32.0px  → 여기서 20px 으로
   *   ⭐ **둘 중 하나만 고치면 티가 안 납니다.** 폰트 자리만 걷으면 32px 이
   *   그대로 남고, 여백만 줄이면 8.5px 이 남아 여전히 떠 보입니다.
   *
   * ⛔ **0 으로 만들지 마세요.** 워드마크가 화면 맨 아래 끝에 닿아서
   *   '끝났다' 가 아니라 '잘렸다' 로 보입니다. 20px 이 그 사이입니다.
   * ⭐ 더 붙이고 싶으시면 `--space-4`(16px)까지가 한계선입니다.
   *
   * ⚠ 위 여백(`--space-8`)은 그대로입니다 — 로고 띠와 푸터를 떼어놓는 자리라
   *   성격이 다릅니다. ⛔ 같이 줄이지 마세요.
   * ⚠ 데스크탑 여백도 그대로입니다(`--space-9` 60px) — 폰만 손봤습니다. */
  .cf2 { padding: var(--space-8) 0 var(--space-5); }

  .cf2-top {
    flex-direction: column;
    gap: var(--space-7);
    margin-bottom: var(--space-8);
  }

  /* ⭐⭐⭐ 메뉴를 **세로 한 줄**로 (2026-08-19, 의뢰인 요청 — 신세계 뉴스룸 참고).
   *
   * 전에는 좁은 폰에서도 2단이었습니다. 한 칸이 화면의 절반이라
   * '真の父母様のみ言' · '개인정보 처리 방침' 같은 긴 항목이 접혔고,
   * **두 칸의 줄 수가 달라 아래쪽이 들쭉날쭉**했습니다.
   *
   * ⭐ 데스크탑은 **2단 그대로**입니다 — 거기는 가로로 자리가 넉넉하고,
   *   한 줄로 세우면 푸터가 이유 없이 길어집니다. ⛔ 같이 바꾸지 마세요.
   *
   * ⚠⚠ **묶음 간격이 이 변경의 핵심입니다.** 세로로 합치면 일곱 줄이
   * 이어지므로, 주 메뉴와 부가 정보 **사이**가 안쪽보다 확실히 넓어야
   * 두 덩어리로 읽힙니다.
   *
   *   안쪽(항목 ↔ 항목)  12px   `.cf2-col` 의 gap
   *   바깥(묶음 ↔ 묶음)  40px   여기 `.cf2-menus` 의 gap  → **3.3배**
   *
   * ⛔ `--space-8`(폰 28px)로 내리지 마세요 — 2.3배로 떨어지면 묶음이 풀립니다.
   * ⚠ 이 사이트의 묶음 공식입니다(08-16 게시판 8:40 · 08-18 카드 8:60). */
  .cf2-menus {
    flex-direction: column;
    gap: var(--space-9);
  }

  .cf2-col { gap: var(--space-3); }

  /* ⭐ 주 메뉴만 15px 로 올립니다 — 부가 정보는 13px 그대로.
   *
   * ⚠⚠ 전에는 **둘 다 13px** 이었습니다. 세로로 합치면 색만으로는
   * 약해서, 크기까지 갈라야 한눈에 두 덩어리가 됩니다(데스크탑은 두 칸이
   * 좌우로 떨어져 있어 색만으로 충분합니다 — 그래서 **폰만** 갈랐습니다).
   *
   * ⭐ 15px 은 이 사이트에서 **'읽는 글' 의 아래끝**입니다(08-16 에 정함).
   * 주 메뉴는 실제로 눌러서 옮겨가는 길이라 그 선 위에 있어야 하고,
   * 부가 정보(약관 · 처방침)는 **필요할 때 찾아가는 것**이라 라벨 크기(13px)가
   * 맞습니다. ⛔ 주 메뉴를 13px 로 되돌리지 마세요. */
  .cf2-main a { font-size: var(--fs-base); }
  .cf2-sub  a { font-size: var(--fs-sm); }

  .cf2-family { width: 100%; }

  .cf2-family-btn { width: 100%; }

  /* ⭐⭐⭐ 폰에서는 목록이 **위로** 열립니다 (2026-08-19, 의뢰인 요청 —
   * *"푸터 아래쪽이라 펼치면 화면 밖으로 나가는데, 위로 열리면 보고 있던
   * 자리에서 바로 보여"*).
   *
   * ⭐ 실측이 그대로 뒷받침합니다 — 맨 아래로 스크롤했을 때 버튼 **아래**
   * 화면에 남는 자리가 **123px 뿐**이고 **위**에는 637px 있습니다.
   * 근거 표는 위 `.cf2-family-list` 주석에 있습니다.
   *
   * ⚠⚠ **`top: auto` 를 빠뜨리지 마세요.** `bottom` 만 주면 위쪽 규칙의
   *   `top: 100%` 가 그대로 남아 **위아래로 늘어난 상자**가 됩니다.
   *
   * ⭐ 접었다 펴는 장치(`max-height`)는 그대로 돕니다 — `bottom` 이
   *   붙박이라 상자가 **위로 자랍니다.** 손댈 것이 없습니다.
   * ⛔ 데스크탑은 아래로 열립니다. 이 규칙을 모바일 블록 밖으로 꺼내지 마세요. */
  .cf2-family-list {
    top: auto;
    bottom: 100%;
  }

  /* ⭐⭐ 화살표도 같이 뒤집습니다 (의뢰인 지적 — *"지금 아래를 가리키는데
   * 위로 열리면 방향이 어긋나잖아"*).
   *
   * ⚠⚠ **아이콘 이름은 안 바꿉니다.** 마크업의 `expand_more` 를 그대로 두고
   * **돌려서** 씁니다. 이름을 바꾸면 `inc/01-enqueue.php` 의
   * `icon_names=` 목록에도 새 아이콘을 넣어야 하고, 빠뜨리면 화살표 자리에
   * **`expand_less` 라는 영어 글자**가 그대로 보입니다(08-06 에 아이콘 폰트를
   * 7개로 줄이면서 생긴 규칙). 돌리는 쪽이 짝이 안 늘어납니다.
   *
   *   닫힘 → 180° (위를 가리킴 = "위로 열립니다")
   *   펼침 →   0° (아래를 가리킴 = "닫습니다")
   *
   * ⚠ 위쪽 데스크탑 규칙과 **정확히 반대**입니다. 무게가 같아 나중에 실리는
   *   이 블록이 이깁니다 — ⛔ 선택자를 줄이지 마세요(줄이면 무게에서 집니다). */
  .cf2-family-btn .material-symbols-outlined { rotate: 180deg; }
  .cf2-family.open .cf2-family-btn .material-symbols-outlined { rotate: 0deg; }

  /* 예전에는 여기서 '모바일에서는 아래로 열림' 을 따로 적었습니다.
     2026-08-06 부터 데스크탑도 아래로 열리므로 이 되돌리기가 필요 없어졌습니다.
     방향은 위 .cf2-family-list 한 곳에서만 정합니다. */

  /* ⚠ 이 줄에는 이제 워드마크만 있습니다(SNS 는 `.cf2-side` 로 옮겼습니다).
     `flex-direction` · `gap` 은 나중에 저작권 문구 같은 것이 들어올 때를
     위해 남겨둡니다 — 지금은 자식이 하나라 아무 일도 안 합니다. */
  .cf2-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  /* 44 → 64px (2026-08-19, 의뢰인 요청 — *"여기가 끝이라는 마침표가 분명하게"*).
     ⭐ 폰 폭 445px 에서 약 190px 이라 넉넉히 한 줄에 들어갑니다(실측).
     ⚠ 데스크탑 값(88px)은 이 파일 위쪽에 있습니다 — **두 곳이 짝입니다.** */
  .cf2-brand { font-size: 64px; }
}