@charset "utf-8";
/* ============================================================
 *  공통 헤더 CSS (기본버전)
 *  YTN 서울투어마라톤 / 생명사랑 밤길걷기의 헤더 스타일을 통합·정리
 *  ── 사이트별 색상은 아래 :root 변수 5개만 바꾸면 됩니다.
 *  ── navbar·container 는 부트스트랩 없이 이 파일과 base.css 에서 직접 정의합니다.
 * ============================================================ */

:root {
	/* 헤더 높이 — 헤더가 absolute 라 뒤 내용이 그만큼 겹칩니다.
	   메인비주얼(main.css) · 서브비주얼(sub.css) 이 이 값만큼 내용을 내려 씁니다. */
	--hd-h:          103px;

	--hd-point:      #0076d7;              /* 대회 메인 컬러 (고정헤더 배경) */
	--hd-point-dark: #0076d7;              /* 드롭다운 hover 배경 */
	--hd-text:       #ffffff;              /* GNB 글자색 (메인비주얼 위) */
	--hd-text-sub:   #0076d7;              /* 드롭다운·모바일 메뉴 글자색 */
	--hd-bg:         #ffffff;              /* 드롭다운 배경 */
}

/* ------------------------------------------------------------
 * 0. 건너뛰기 링크 — ⚠ 지우지 마세요
 *    키보드·화면낭독기 사용자가 페이지에 들어서면 가장 먼저 닿는 링크입니다.
 *    누르면 반복되는 메뉴를 건너뛰고 본문(<main id="content">)으로 갑니다.
 *    평소에는 화면 밖(top:-100px)에 있다가 Tab 으로 초점이 오면 내려옵니다.
 * ------------------------------------------------------------ */
.skip_nav {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 99999;
	display: block;
	width: 100%;
	padding: 14px 0;
	background: #0076d7;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	transition: top .2s;
}

.skip_nav:focus,
.skip_nav:focus-visible {
	top: 0;
	color: #fff;
	outline-offset: -4px;
}

/* 건너뛰기 링크가 도착하는 본문(<main id="content">) 자체에는 테두리를 그리지 않습니다.
   tabindex="-1" 이 붙어 있어 그대로 두면 페이지 전체를 감싸는 굵은 테두리가 생깁니다.
   초점은 정상적으로 옮겨가므로 화면낭독기는 여기서부터 읽습니다. */
main#content:focus,
main#content:focus-visible {
	outline: none;
}


/* ------------------------------------------------------------
 * 1. 헤더 골격
 *    기본은 메인비주얼 위에 겹치는 absolute,
 *    250px 이상 스크롤하면 .fix_style + .fixed 가 붙어 상단 고정됩니다. (js/layout.js)
 * ------------------------------------------------------------ */
header {
	position: absolute;
	width: 100%;
	z-index: 99949;
	transition: .4s all;
	background: #031320;
	padding: 15px 0;
}

header .container { 
	padding: 0 100px;
	max-width: none !important;
 }

header.fix_style {
	position: fixed;
	top: 0;
	padding: 15px 0;
	background-color: color-mix(in srgb, #031320 90%, transparent);
	backdrop-filter: blur(5px);
	transition: none;
	opacity: 0;
	pointer-events: none;
}

header.fixed {
	opacity: 1;
	pointer-events: all;
	transition: .4s all;
}

header.fixed .navbar { padding: 0; }


/* ------------------------------------------------------------
 * 2. 네비게이션 바 / 로고
 *
 *    ※ 이 사이트는 부트스트랩을 쓰지 않습니다.
 *      헤더가 원래 부트스트랩에서 받던 레이아웃 규칙만 여기서 직접 정의합니다.
 *      (클래스명은 기존 사이트들과 맞추려고 그대로 유지했습니다)
 * ------------------------------------------------------------ */
.navbar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 0;
}

/* 부트스트랩 3 (bootstrap.min.css) 의 clearfix 가상요소를 끕니다. — 지우지 마세요.
 * 부트스트랩이 .navbar:before/:after 에 display:table 을 걸어두는데,
 * .navbar 가 flex 이다 보니 이 둘이 "보이지 않는 flex 아이템"으로 잡힙니다.
 * 그러면 space-between 이 남는 여백을 (로고|햄버거) 사이 한 군데가 아니라
 * 세 군데로 쪼개서, 모바일에서 로고와 햄버거가 양끝에 붙지 않고 안쪽으로 밀립니다. */
.navbar::before,
.navbar::after,
.navbar-collapse::before,
.navbar-collapse::after {
	display: none;
}

.navbar-brand { display: inline-block; }

.navbar-nav {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 모바일: 기본 접힘 → .show 가 붙으면 펼침 (js/layout.js) */
.navbar-collapse {
	display: none;
	flex-basis: 100%;
	flex-grow: 1;
}

.navbar-collapse.show { display: block; }

.navbar-toggler { display: inline-block; }

.ml-auto { margin-left: auto; }

/* 참가신청 버튼 */
header .apply-btn a {
	font-size: 20px;
	font-weight: bold;
	background: #7adf10;
	border-radius: 30px;
	padding: 10px 40px;
}
header .apply-btn a:hover {
	background: #8bf41e;
}

/* PC(992px 이상): 항상 펼친 가로 메뉴, 햄버거 숨김 */
@media (min-width: 992px) {
	.navbar-expand-lg { flex-wrap: nowrap; }

	.navbar-expand-lg .navbar-nav { flex-direction: row; }

	.navbar-expand-lg .navbar-collapse {
		display: flex !important;
		flex-basis: auto;
		justify-content: center;
	}

	.navbar-expand-lg .navbar-toggler { display: none; }
}

.navbar-brand {
	padding: 8px 15px !important;
	height: auto;
}

.navbar-brand img {
	width: auto;
	max-height: 60px;
}

.navbar-expand-lg .navbar-nav {
	align-items: center;
	justify-content: center;
	float: none;
}


/* ------------------------------------------------------------
 * 3. 1뎁스 메뉴
 * ------------------------------------------------------------ */
.navbar-expand-lg .navbar-nav .nav-link {
	display: block;
	padding: 10px 24px;
	font-size: 20px;
	font-weight: 500;
	color: var(--hd-text);
	background: none;
	white-space: nowrap;
}

.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .has_dropdown:hover > a,
.navbar-expand-lg .navbar-nav .has_dropdown:hover > .drp_btn {
	color: #efefef;
}

/* 현재 페이지 메뉴 */
.navbar-expand-lg .navbar-nav .nav-item.on > .nav-link { font-weight: 700; }


/* ------------------------------------------------------------
 * 4. 2뎁스 드롭다운 (PC: hover / 모바일: 화살표 클릭)
 * ------------------------------------------------------------ */
.navbar-expand-lg .navbar-nav .has_dropdown {
	display: flex;
	align-items: center;
	position: relative;
	transition: .4s all;
}

/* 2뎁스 열기 버튼 — 모바일 전용입니다.
   PC 는 hover / 초점으로 드롭다운이 열리므로 여기서는 숨깁니다.
   (안 숨기면 눈에 보이지도 않는 0px 버튼이 Tab 순서에 끼어듭니다) */
.navbar-expand-lg .navbar-nav .has_dropdown .drp_btn {
	display: none;
	position: relative;
	right: 15px;
	padding: 0;
	color: var(--hd-text);
	cursor: pointer;
}

.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 160px;
	max-width: 160px;
	margin-top: 15px;
	background-color: var(--hd-bg);
	border-radius: 0;
	opacity: 0;
	pointer-events: none;
	transition: .4s all;
}

/* :focus-within 이 꼭 필요합니다 — ⚠ 지우지 마세요.
   이 드롭다운은 visibility 가 아니라 opacity:0 으로 숨기고 있어서,
   숨어 있어도 안쪽 링크가 Tab 순서에 그대로 남아 있습니다.
   hover 만 있으면 키보드 사용자는 "보이지 않는 링크" 위를 지나가게 됩니다.
   1뎁스 링크에 초점이 닿는 순간 함께 열리도록 걸어 둡니다. */
.navbar-expand-lg .navbar-nav .has_dropdown:hover .sub_menu,
.navbar-expand-lg .navbar-nav .has_dropdown:focus-within .sub_menu {
	opacity: 1;
	pointer-events: all;
	margin-top: -1px;
}

/* 드롭다운 목록: 불릿(marker) 제거 */
.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul li {
	list-style: none;
	text-align: center;
}

.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul li::marker { content: none; }

.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul li a {
	display: block;
	padding: 5px 10px;
	font-size: 15px;
	font-weight: 300;
	line-height: 35px;
	color: var(--hd-text-sub);
	position: relative;
	transition: .3s all;
}

.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul li a:hover,
.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul li a.on {
	color: #fff;
	background-color: var(--hd-point-dark);
}


/* ------------------------------------------------------------
 * 5. 모바일 햄버거 버튼
 * ------------------------------------------------------------ */
.navbar-toggler {
	padding-right: 0;
	line-height: 1.7;
	border: 0;
	background: none;
}

.toggle-wrap {
	padding: 10px;
	position: relative;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.toggle-bar,
.toggle-bar::before,
.toggle-bar::after,
.toggle-wrap.active .toggle-bar,
.toggle-wrap.active .toggle-bar::before,
.toggle-wrap.active .toggle-bar::after {
	transition: all .2s ease-in-out;
}

.toggle-bar {
	display: block;
	width: 25px;
	margin: 10px 0;
	position: relative;
	border-top: 4px solid var(--hd-text);
}

.toggle-bar::before,
.toggle-bar::after {
	content: "";
	display: block;
	position: absolute;
	top: -12px;
	right: 0;
	width: 30px;
	height: 4px;
	background: var(--hd-text);
	transform: rotate(0deg);
	transform-origin: 13%;
}

.toggle-bar::after { top: 4px; }

.toggle-wrap.active .toggle-bar          { border-top: 6px solid transparent; }
.toggle-wrap.active .toggle-bar::before  { transform: rotate(45deg); }
.toggle-wrap.active .toggle-bar::after   { transform: rotate(-45deg); }


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

/* ---- 태블릿 이하: GNB를 접이식 패널로 ---- */
@media screen and (max-width: 992px) {

	:root { --hd-h: 82px; }

	header {
		padding: 0;
	}

	header.fix_style { padding: 5px 0; }

	header .container {
		padding: 0;
	}

	/* 로고(.navbar-brand 의 좌측 padding 15px)와 좌우 여백을 맞춥니다.
	 * 0 으로 두면 햄버거가 화면 끝에 딱 붙어서 답답해 보입니다. */
	.navbar-toggler { padding-right: 15px; }

	.navbar-toggler-icon {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: var(--hd-text-sub);
	}

	/* 펼친 메뉴 패널 ─────────────────────────────────────────
	   배경을 따로 칠하지 않고 비워 둡니다. 그러면 header 의 배경(#031320)이
	   그대로 비쳐서 헤더와 색이 "항상" 정확히 일치합니다.
	   (스크롤해서 헤더가 반투명해지는 .fix_style 상태에서도 자동으로 같이 따라갑니다) */
	.navbar-collapse {
		padding: 0 15px 22px;
		background-color: transparent;
		backdrop-filter: none;
	}

	.navbar-expand-lg .navbar-nav {
		align-items: stretch;
		padding: 4px 0 0;
		background-color: transparent;
		border-radius: 0;
	}

	/* 1뎁스 — 항목 사이를 옅은 가로선으로 나눕니다 */
	.navbar-expand-lg .navbar-nav .nav-item {
		border-top: 1px solid rgba(255, 255, 255, .12);
	}

	.navbar-expand-lg .navbar-nav .nav-item:first-child { border-top: 0; }

	/* 1뎁스 글자 — 크고 밝게 (2뎁스와 크기·굵기·밝기로 단차를 줍니다)
	   width:100% — 부모가 align-items:flex-start 인 세로 플렉스라 그냥 두면
	   <a> 가 글자 폭만큼만 잡힙니다. 줄 어디를 눌러도 반응하도록 폭을 채웁니다.
	   (모바일에서는 이 글자를 누르면 하위 메뉴가 펼쳐집니다 — js/layout.js) */
	.navbar-expand-lg .navbar-nav .nav-link {
		width: 100%;
		padding: 15px 50px 15px 4px;     /* 오른쪽은 화살표 버튼 자리 */
		font-size: 17px;
		font-weight: 600;
		color: var(--hd-text);
	}

	/* 터치 기기는 한 번 탭하면 hover 가 그대로 남습니다.
	   PC 용 hover 색(#efefef)을 그대로 두면 탭한 항목만 계속 흐려 보입니다. */
	.navbar-expand-lg .navbar-nav .nav-link:hover,
	.navbar-expand-lg .navbar-nav .has_dropdown:hover > a {
		color: var(--hd-text);
	}

	.navbar-expand-lg .navbar-nav .has_dropdown:hover > .drp_btn {
		color: rgba(255, 255, 255, .6);
	}

	.navbar-expand-lg .navbar-nav .has_dropdown {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		box-shadow: none;
	}

	/* 2뎁스 열기 화살표 ────────────────────────────────────
	   .drp_btn 은 내용이 없는 빈 <span> 이라, 크기를 주지 않으면 높이가 0 이 됩니다.
	   (padding 만으로는 가로 20px · 세로 0px → 화면에 보이지도 않고 손가락으로 누를 수도 없음)
	   그래서 하위 메뉴가 열리지 않았습니다. 누를 수 있는 크기와 화살표를 넣어 줍니다. */
	.navbar-expand-lg .navbar-nav .has_dropdown .drp_btn {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 52px;                    /* 손가락 터치 영역 확보 */
		padding: 0;
		color: rgba(255, 255, 255, .6);
	}

	.navbar-expand-lg .navbar-nav .has_dropdown .drp_btn::before {
		content: '';
		width: 9px;
		height: 9px;
		margin-top: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s, margin-top .2s;
	}

	.navbar-expand-lg .navbar-nav .has_dropdown.open .drp_btn::before {
		margin-top: 4px;
		transform: rotate(-135deg);
	}
	.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu,
	.navbar-expand-lg .navbar-nav .has_dropdown:hover .sub_menu {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		margin-top: 0;
		margin-left: 5px;
		padding-left: 15px;

		opacity: 1;
		pointer-events: all;
		background-color: transparent;
		border-radius: 0;
		box-shadow: none;

		display: grid;
		grid-template-rows: 0fr;
		border-bottom: 0;
		transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1);
	}

	.navbar-expand-lg .navbar-nav .has_dropdown.open .sub_menu {
		grid-template-rows: 1fr;
	}

	/* 접힌 하위 메뉴는 "높이 0" 으로만 숨기고 있어서, 화면에는 안 보여도
	   화면낭독기와 Tab 순서에는 링크가 그대로 남아 있었습니다.
	   (버튼은 aria-expanded="false" 로 "접혀 있다" 고 알리는데 내용은 읽히는 상태)
	   visibility 로 확실히 빼 줍니다. — ⚠ 지우지 마세요.
	   닫을 때는 접히는 동작(.3s)이 끝난 뒤 감춰야 내용이 툭 사라지지 않습니다. */
	.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu > ul {
		overflow: hidden;
		min-height: 0;
		padding: 2px 0 14px;
		visibility: hidden;
		transition: visibility 0s linear .3s;
	}

	.navbar-expand-lg .navbar-nav .has_dropdown.open .sub_menu > ul {
		visibility: visible;
		transition: visibility 0s;
	}

	@media (prefers-reduced-motion: reduce) {
		.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu { transition: none; }
	}

	.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul {
		list-style: none;
		padding: 0;
		margin-top: 0;
	}

	.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul li { text-align: left; }

	/* 2뎁스 글자 — 1뎁스(17px/600/흰색)보다 작고 가늘고 어둡게 */
	.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul li a {
		display: block;
		padding: 0;
		font-size: 15px;
		font-weight: 400;
		line-height: 34px;
		color: rgba(255, 255, 255, .6);
	}

	/* PC 는 hover 시 파란 블록이 깔리지만, 모바일에서는 글자색만 바뀌게 합니다.
	   (터치 기기는 탭 후 hover 가 남아 파란 블록이 계속 붙어 있게 됩니다) */
	.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul li a:hover,
	.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul li a.on {
		color: #ffffff;
		background-color: transparent;
	}

	header .apply-btn {display: none;} 
}

/* ---- 모바일 ---- */
@media screen and (max-width: 768px) {

	:root { --hd-h: 76px; }

	.navbar { padding-top: 10px; }

	.navbar-brand img { max-height: 44px; }

	.toggle-wrap { padding: 20px 0; }

}