/*
 * footer.css — 블로그 띠 배너 + 푸터
 *
 * 로고 기하는 header.css 의 .c4-logo 규칙을 그대로 쓰고 여기서는 색만 덮는다.
 * 구분선은 없다(PC·모바일 모두) — 색 대비로만 구분하며 --c4-color-border-dark 를 만들지 않는다.
 */

/* ─────────────────────────────────────────────────────────
   띠 배너 (footer_topbar)
   ───────────────────────────────────────────────────────── */

.c4-topbar {
	background: var(--c4-color-accent);
	/* 좌우 패딩은 푸터와 같은 값이다 — 문구가 가운데 정렬이라 좁은 화면에서 가장자리에 닿지 않게 한다. */
	padding: var(--c4-topbar-pad-y) var(--c4-gutter-pc-chrome);
}

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

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

/* ─────────────────────────────────────────────────────────
   푸터
   ───────────────────────────────────────────────────────── */

.c4-footer {
	background: var(--c4-color-footer-bg);
	padding: var(--c4-footer-pad-y) var(--c4-gutter-pc-chrome);
	color: var(--c4-color-white);
}

.c4-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: var(--c4-container-chrome);
	margin-inline: auto;
}

/*
 * 내부 세로 간격 셋은 값이 서로 다르다 — 한 값으로 묶지 말 것.
 * 앞 요소가 없으면(약관 링크 줄을 렌더하지 않은 경우) 그 간격도 함께 사라져
 * 로고가 맨 위로 올라오고 아래 간격은 그대로 유지된다.
 */
.c4-footer__terms + * {
	margin-top: var(--c4-footer-gap-terms-logo);
}

.c4-logo--footer + * {
	margin-top: var(--c4-footer-gap-logo-company);
}

.c4-footer__company + * {
	margin-top: var(--c4-footer-gap-company-copy);
}

/* ── 약관 링크 줄 — 푸터 맨 위, 로고보다 앞 ───────────────── */

.c4-footer__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--c4-footer-terms-gap);
}

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

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

/* ── 로고 — 어두운 배경이라 기본 색이 흰색이다 ─────────────── */

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

/* ── 회사 정보 ──────────────────────────────────────────── */

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

/* PC 에서 한 줄이 넘치면 <span> 을 통째로 넘긴다(항목 안에서 끊기지 않게). */
.c4-footer__company-item {
	display: inline-block;
}

/*
 * 구분자는 CSS 의사요소로 붙인다 — PHP 로 문자열을 이어 붙이지 않는다.
 *
 * ★ 앞 항목의 ::after 에 단다(뒤 항목의 ::before 가 아니라).
 *   ::before 로 달면 그 항목이 줄바꿈될 때 구분자가 함께 넘어가 "줄 처음에 구분자"가 된다.
 *   ::after 면 구분자가 앞 줄 끝에 남아 시안대로 보인다.
 *   빈 항목은 <span> 자체가 출력되지 않으므로 줄 처음이나 끝에 구분자가 남는 일이 원리적으로 없다.
 */
.c4-footer__company-item:not(:last-child)::after {
	content: '|';
	margin-inline: var(--c4-footer-company-sep-gap);
}

/* ── 카피라이트 — 대비 확정 예외이므로 상향하지 말 것 ──────── */

.c4-footer__copyright {
	color: var(--c4-color-text-meta);
	font-size: var(--c4-fz-body4);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-regular);
}

/* ─────────────────────────────────────────────────────────
   768 미만
   ───────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
	.c4-topbar {
		padding-inline: var(--c4-gutter-mobile-chrome);
	}

	/* 모바일은 세로 2줄. 간격도 2 로 줄어든다(토큰이 미디어 쿼리에서 바뀐다). */
	.c4-topbar__inner {
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.c4-footer {
		padding-inline: var(--c4-gutter-mobile-chrome);
	}

	/*
	 * 같은 DOM 이 다섯 줄로 떨어진다 — 항목을 블록으로 바꾸고 구분자 의사요소를 없앤다.
	 * 뷰포트별로 다른 HTML 을 찍거나 JS 로 바꾸지 않는다.
	 */
	.c4-footer__company-item {
		display: block;
	}

	.c4-footer__company-item:not(:last-child)::after {
		content: '';
		margin-inline: 0;
	}
}