@charset "utf-8";
/* ============================================================
 *  공통 푸터 CSS (기본버전)
 *  "더 레이스 대구" 방식 — 운영사무국 정보 중심, SNS 블록 없음.
 *  ── 사이트별 색상은 아래 :root 변수만 바꾸면 됩니다.
 *  ── .container 는 base.css 에서 정의합니다. (부트스트랩 미사용)
 * ============================================================ */

:root {
	--ft-bg:     #031320;              /* 푸터 배경 */
	--ft-title:  #ededed;              /* 운영사무국명 */
	/* 본문 · 링크 · 저작권 — ⚠ 더 어둡게 내리지 마세요.
	   푸터 배경(#031320) 위에서 원래 #4d5f6e 는 2.84:1 로,
	   웹접근성 기준(작은 글자 4.5:1)에 한참 못 미쳐 저시력·고령 사용자가
	   주소·연락처를 읽기 어려웠습니다. 색조는 그대로 두고 밝기만 올려 5.14:1 로 맞췄습니다. */
	--ft-text:   #6f899e;
	--ft-point:  #0d1170;              /* 로고 섹션 모바일 라벨 배경 */

	--ft-top-bg:   #0076d7;            /* 맨 위로 버튼 배경 */
	--ft-top-icon: #ffffff;            /* 맨 위로 버튼 화살표 */
}


/* ------------------------------------------------------------
 * 1. 주최 · 주관 · 후원 로고 섹션 (푸터 바로 위)
 * ------------------------------------------------------------ */
.logo_section {
	padding: 50px 0;
	background: #ffffff;
	border-top: solid 1px #e3e3e3;
}

.logo_wrap {
	display: flex;
	flex-direction: column;
	gap: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.logo_wrap li {
	display: flex;
	align-items: center;
}

.logo_wrap h3 {
	width: 90px;
	margin: 0;
	font-size: 18px;
	font-weight: bold;
	color: #363636;
	display: inline-block;
}

.logo_wrap .logo_list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.logo_wrap .logo_list a,
.logo_wrap .logo_list span {
	display: inline-block;
	vertical-align: middle;
}

.logo_wrap img {
	width: auto;
	height: auto;
	max-height: 46px;
}


/* ------------------------------------------------------------
 * 2. 푸터 본체
 *    .top   → 운영사무국명(좌) ─── 약관 링크(우)
 *    p      → 사업자정보 · FAX · 운영시간 · 저작권
 *    .human → 우하단 제작 크레딧
 * ------------------------------------------------------------ */
.footer {
	height: auto;
	min-height: auto;
}

.footer .copy {
	width: 100%;
	height: auto;
	padding: 48px 0;
	background-color: var(--ft-bg);
}

.footer .copy .wrap {
	margin: 0 auto;
	position: relative;
}

/* 윗줄 — 로고 + 사이트정보 + 약관 링크 (flex 3칸)
 *
 *  ⚠ 여기서 gap 이나 space-between 으로는 "로고↔사이트정보"만 조절할 수 없습니다.
 *    · space-between 은 남는 공간을 두 틈(로고↔정보, 정보↔링크)에 똑같이 나눠 줍니다.
 *    · gap 도 모든 칸 사이에 똑같이 들어갑니다.
 *    그래서 원하는 틈에만 margin 을 주고, 약관 링크는 margin-left:auto 로
 *    오른쪽 끝에 밀어붙이는 방식으로 바꿨습니다. (auto 가 남는 공간을 다 먹습니다)
 */
.footer .copy .wrap .top {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 10px;
}

/* ▼ 로고 ↔ 사이트정보 간격 — 이 값만 바꾸면 됩니다 */
.footer .copy .wrap .top > p { margin-left: 80px; }

/* 약관 링크는 계속 오른쪽 끝에 */
.footer .copy .wrap .top .link { margin-left: auto; }

.footer .copy .wrap .top .ft_logo {
	font-size: 28px;
	font-weight: 900;
	color: var(--ft-title);
}

/* 본문 — 본문 영역(18px)보다 한 단계 작게 */
.footer .copy .wrap p {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--ft-text);
}

.footer .copy .link a {
	color: #fff;
}
.footer .copy .link a:nth-child(2) {
	color: #52a3e5;
}


/* ------------------------------------------------------------
 * 3. 맨 위로 버튼
 *    본문을 300px 만 내려도 나타납니다. (기준값은 js/layout.js 의 TOP_BTN_FROM)
 *    숨김 상태에서는 visibility 로 완전히 빼서, 안 보이는 버튼이
 *    우측 하단 클릭을 가로채지 않도록 했습니다.
 * ------------------------------------------------------------ */
/* 맨 위로 — <button> 입니다. (예전에는 <div> 라 키보드로 누를 수 없었습니다)
   버튼 기본 여백을 지워야 예전 <div> 일 때와 위치가 같습니다. */
.go_top {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 100;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .3s, visibility .3s, transform .3s;
}

.go_top.on {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.go_top.on:hover { transform: translateY(-6px); }

/* 기본 버튼 — 이미지 없이 SVG 화살표로 그립니다 */
.go_top span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ft-top-bg);
	color: var(--ft-top-icon);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.go_top svg {
	width: 22px;
	height: 22px;
}

/* 디자인된 이미지를 넣은 경우 */
.go_top img {
	width: 56px;
	height: auto;
}

.go_top span:has(img) {
	width: auto;
	height: auto;
	background: none;
	box-shadow: none;
}


/* ============================================================
 *  반응형
 * ============================================================ */

@media (max-width: 768px) {

	/* 로고 섹션 */
	.logo_section { padding: 40px 0; }

	.logo_wrap li {
		display: block;
		margin-right: 0;
		margin-bottom: 30px;
		text-align: center;
	}

	.logo_wrap li:last-child { margin-bottom: 0; }

	.logo_wrap h3 {
		width: auto;
		font-size: 16px;
		line-height: 35px;
		color: #ffffff;
		background: var(--ft-point);
		border-radius: 30px;
		padding: 0 20px;
		margin-bottom: 15px;
	}

	.logo_wrap .logo_list { justify-content: center; }

	.logo_wrap img { height: 40px; }

	/* 푸터 본체 — 전체 가운데 정렬로 전환 */
	.footer .copy {
		height: auto;
		padding: 48px 20px;
	}

	.footer .copy .wrap {
		width: 100%;
		text-align: center;
	}

	.footer .copy .wrap .top {
		flex-direction: column;
		gap: 10px;
		align-items: center;
	}

	/* 세로로 쌓이는 구간이라 위 가로 간격/우측 밀기는 되돌립니다.
	   (안 되돌리면 80px 만큼 왼쪽이 비고, 링크가 오른쪽으로 붙어 가운데정렬이 깨집니다) */
	.footer .copy .wrap .top > p,
	.footer .copy .wrap .top .link { margin-left: 0; }

	.footer .copy .wrap .top .ft_logo { font-size: 20px; }

	.footer .copy .wrap p { font-size: 14px; }

	.footer .copy .wrap .human {
		position: static;
		font-size: 14px;
		text-align: center;
	}

	.go_top { right: 15px; bottom: 15px; }

	.go_top span { width: 46px; height: 46px; }

	.go_top svg { width: 18px; height: 18px; }

	.go_top img { width: 46px; }
}