/* ==========================================================================
   sections/footer.css — 띠 배너 + 푸터
   --------------------------------------------------------------------------
   위에서부터: 띠 배너 → 약관 링크 줄 → 로고 → 회사 정보 → 카피라이트.
   ★ 약관 링크 줄이 로고보다 앞에 온다(시안 실측).
   ★ 구분선 없음(PC·모바일 모두) — 색 대비로만 구분한다.
     --c4-color-border-dark 같은 토큰을 만들지 말 것.
   ========================================================================== */

/* ---------- 블로그 띠 배너 ---------- */

.c4-topbar {
	flex-shrink: 0;
	background: var(--c4-color-accent);
	padding: var(--c4-topbar-pad-y) var(--c4-container-pad);
}

.c4-topbar__inner {
	display: flex;
	align-items: flex-end;              /* PC 는 밑선 정렬 */
	justify-content: center;
	gap: var(--c4-topbar-gap);
	text-align: center;
}

/* 두 조각은 굵기·크기가 같고 구분 문자도 없다. 굵기를 다르게 주지 말 것. */
.c4-topbar__part {
	font-size: var(--c4-fs-caption);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-caption);
	color: var(--c4-color-white);
}

/* 모바일은 두 줄. 전환은 768. */
@media (max-width: 767.98px) {
	.c4-topbar { padding-inline: var(--c4-gutter-mobile-chrome); }

	.c4-topbar__inner {
		flex-direction: column;
		align-items: center;
		gap: var(--c4-topbar-gap-m);
	}
}

/* ---------- 푸터 ---------- */

.c4-footer {
	flex-shrink: 0;
	background: var(--c4-color-footer-bg);
	padding: var(--c4-footer-pad-y) var(--c4-container-pad);
	color: var(--c4-color-white);
}

/* 키보드 포커스 링 — 어두운 푸터 바탕에서는 흰색(포커스 색 = 메인 컬러가 어두우면 바탕과 구분이 안 된다 · 2026-10-13 리뷰 · 팝업 닫기 버튼과 같은 방식) */
.c4-footer :focus-visible { outline-color: var(--c4-color-white); }

.c4-footer__inner {
	position: relative;   /* 오른쪽 아래 김시효TV 로고의 기준(2026-10-16) */
	width: 100%;
	max-width: var(--c4-container-w);
	margin-inline: auto;
}

/* 김시효TV 유튜브 채널 로고 — 오른쪽 아래(저작권 줄과 같은 바닥) · 원래 색 그대로 작은 흰 칸 안에(어두운 푸터) · 휴대폰은 저작권 줄 아래(2026-10-16 사용자 지시) */
.c4-footer__channel {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--c4-color-white);   /* 원래 색 로고를 흰 칸에 — 어두운 푸터에서 반전하면 원장님 그림이 필름처럼 뒤집혔다 */
	line-height: 0;
	transition: opacity .2s ease;
}

.c4-footer__channel:hover { opacity: .88; }

.c4-footer__channel:focus-visible { outline: var(--c4-focus-ring-w) solid var(--c4-color-white); outline-offset: 4px; }

.c4-footer__channel-img {
	display: block;
	width: auto;
	height: 32px;
}

/* 약관 링크 줄 — 푸터 맨 위. 새 창으로 열지 않는다(target 옵션 없음). */
.c4-footer__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--c4-footer-terms-gap);
	margin-bottom: var(--c4-footer-gap-terms);
}

.c4-footer__terms-link {
	font-size: var(--c4-fs-body1);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-white);
}

.c4-footer__terms-link:hover { text-decoration: underline; }

/* 로고 — 헤더와 같은 규격. 푸터는 어두운 배경이라 기본 텍스트 색이 밝은 색이다. */
.c4-footer__logo { margin-bottom: var(--c4-footer-gap-logo); }

.c4-footer .c4-logo__text { color: var(--c4-color-white); }

/* 회사 정보 */
.c4-company {
	margin-bottom: var(--c4-footer-gap-company);
	font-size: var(--c4-fs-body1);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-white);
}

/*
 * ★★ 마크업은 한 벌이고 CSS 로만 전환한다.
 *    PC 두 줄(줄 안의 항목을 '|' 로 이음) / 모바일 항목마다 한 줄(여섯 줄 — 이메일을 비우면 시안의 다섯 줄 · 구분자 없음).
 *
 * 구분자는 **의사요소**로 붙인다 — PHP 로 문자열을 이어 붙이지 않는다.
 * 그래야 빈 항목이 빠져도 구분자가 줄 처음이나 끝에 남는 일이 원리적으로 없다.
 */
.c4-company__item { display: inline; }

.c4-company__item + .c4-company__item::before {
	content: "|";
	/* 공백은 시안 실측 그대로 — 구분자 앞뒤로 두 칸씩 */
	margin-inline: 0.5em;
	white-space: pre;
}

/* PC 에서 한 줄이 넘치면 '|' **뒤**에서만 접힌다('|' 는 뒤에서 끊기는 글자 · 라벨과 값 사이는   — template-tags.php) —
   구분자가 줄 처음에 오지 않고, 라벨과 값이 두 줄로 갈리지 않는다. 띄어쓰기 없는 아주 긴 값만 아래 anywhere 가 칸 안에서 접는다. */
.c4-company__line {
	display: block;
	overflow-wrap: anywhere;
}

/* 한글 라벨 · 값이 글자 단위로 접히지 않게 — 모든 폭(2026-10-12 리뷰: 768 ~ 791 에서 '이메일' 항목이 라벨과 값으로 갈렸고,
   768 이상에만 걸었더니 모바일에서 긴 메일 주소가 라벨 '이메|일' 을 쪼갰다). 띄어쓰기가 있는 긴 값(주소)은 띄어쓰기에서,
   띄어쓰기 없는 긴 값(메일 주소)은 위 overflow-wrap: anywhere 가 칸 안에서 접는다. */
.c4-company__item { word-break: keep-all; }

.c4-footer__copyright {
	font-size: var(--c4-fs-body4);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	/* 어두운 배경 위 3.9:1 — 확정 예외다. 대비를 이유로 상향하지 말 것. */
	color: var(--c4-color-text-muted);
}

@media (max-width: 767.98px) {
	.c4-footer {
		padding: var(--c4-footer-pad-y-m) var(--c4-gutter-mobile-chrome);
	}

	.c4-footer__channel { position: static; display: inline-block; margin-top: 20px; }
	.c4-footer__channel-img { height: 26px; }

	.c4-footer__terms { margin-bottom: var(--c4-footer-gap-terms-m); }
	.c4-footer__logo  { margin-bottom: var(--c4-footer-gap-logo-m); }
	.c4-company       { margin-bottom: var(--c4-footer-gap-company-m); }

	/* 같은 DOM 이 항목마다 한 줄(여섯 줄)로 떨어진다 — 항목을 block 으로, 구분자를 제거. */
	.c4-company__item { display: block; }

	.c4-company__item + .c4-company__item::before { content: ""; margin-inline: 0; }
}