@charset "utf-8";
/* ============================================================
 *  서브페이지 공통 CSS (기본버전)
 *  YTN 서울투어마라톤 서브페이지의 공통 구조만 뽑아 정리했습니다.
 *   1) 서브비주얼 (.sub_visual)
 *   2) 컨텐츠 영역 (.sec_pd.sub)
 *  ── 사이트별 값은 아래 :root 변수만 바꾸면 됩니다.
 *  ── .container 는 base.css 에서 정의합니다. (부트스트랩 미사용)
 * ============================================================ */

:root {
	--sub-visual-gap:    118px;                         /* 헤더 아래 ~ 경로 사이 여백 */
	/* 상단 경로 글자색 — 저시력 사용자를 위해 명도를 낮춘 값입니다.
	   원래 #9aa3ad 였는데 흰 배경에서 2.56:1 로, 웹접근성 기준(작은 글자 4.5:1)에
	   한참 못 미쳤습니다. 색조는 그대로 두고 밝기만 낮춰 4.74:1 로 맞췄습니다.
	   ⚠ 다시 밝게 올리지 마세요. */
	--sub-path:          #6d747b;
	--sub-title:         #00000f;                       /* 본문 제목색 */
	--sub-text:          #222;                          /* 본문 글자색 */
}


/* ============================================================
 * 1. 서브비주얼  ── 모든 서브페이지 상단 공통
 *    배경 이미지 없이 흰 바탕에 "현재 위치(작게) + 페이지 제목(크게)" 만 놓습니다.
 *
 *    <div class="sub_visual">
 *        <div class="sub_visual_txt">
 *            <nav class="sub_path"><a href="/">홈</a><span>대회 안내</span><span>대회스토리</span></nav>
 *            <h1>대회스토리</h1>
 *        </div>
 *    </div>
 * ============================================================ */
.sub_visual {
	position: relative;
	width: 100%;
	background: #ffffff;
	text-align: center;

	/* 헤더가 position:absolute 라 이 영역 위에 겹칩니다. 그만큼 내용을 내려 줍니다.
	   ⚠ margin-top 으로 띄우면 안 됩니다 — body 에 padding/border 가 없어서
	     위쪽 margin 이 body 밖으로 빠져나가(margin collapsing) 페이지 전체가 밀립니다.
	   (--hd-h 는 css/header.css 에서 화면 크기별로 관리합니다) */
	padding: calc(var(--hd-h, 103px) + var(--sub-visual-gap)) 20px 62px;
}

.sub_visual .sub_visual_txt {
	position: relative;
	z-index: 10;
}

/* 현재 위치 — 홈 > 대회 안내 > 대회스토리 */
.sub_path {
	margin-bottom: 18px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--sub-path);
}

.sub_path a {
	color: inherit;
	transition: color .2s;
}

.sub_path a:hover { color: var(--sub-title); }

/* 항목 사이 ">" 구분자 — 테두리 두 변을 45도 돌려 그립니다 */
.sub_path > * + *::before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 11px 2px;
	border-top: 1px solid #c8cfd6;
	border-right: 1px solid #c8cfd6;
	transform: rotate(45deg);
	vertical-align: middle;
}

/* 마지막 = 현재 페이지 */
.sub_path > *:last-child {
	color: var(--sub-title);
	font-weight: 500;
}

/* 제목 위 한 줄 — sub_visual() 의 세 번째 값을 넣은 페이지에만 나옵니다 */
.sub_visual .sub_lead {
	margin: 4px 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #0076d7;
}

/* 페이지 제목 */
.sub_visual .sub_visual_txt h1 {
	margin: 0;
	font-size: 60px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: var(--sub-title);
}


/* ============================================================
 * 2. 컨텐츠 영역  ── 실제 내용이 들어가는 자리
 * ============================================================ */
.sec_pd { padding: 120px 0; }

.sec_pd.sub { padding: 40px 0 120px; }

.sec_pd .container { max-width: 1170px; }

/* 페이지 대제목 (국문) */
.sub_title {
	margin-bottom: 60px;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.03em;
	color: var(--sub-title);
	text-align: center;
}

/* 본문 소제목 */
.sub_con_title {
	margin-bottom: 25px;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--sub-title);
}

.sub_con_title + .con { margin-top: 0; }

/* 본문 블록 — 소제목 단위로 이 안에 내용을 담습니다
   base.css 의 body 기본값(--text-size)과 같은 18px 로 맞췄습니다. */
.con {
	font-size: 18px;
	line-height: 1.8;
	color: var(--sub-text);
}

.con + .sub_con_title { margin-top: 80px; }

.con img {
	max-width: 100%;
}

/* height 속성이 붙은 이미지(협찬 로고 등)는 height:auto 에서 뺍니다.
   여기서 height 를 걸면 <img height="26"> 표시 힌트를 CSS 가 이겨버려서
   로고가 원본 크기 그대로 튀어나옵니다. (메인 개요 표는 .con 안에 있습니다)
   ⚠ max-width 는 위에 따로 둡니다. :not() 이 붙으면 특이도가 (0,2,1) 로 올라가서
      main.css 의 .sec03 h2 img (0,1,2) 같은 규칙을 눌러버리기 때문입니다. */
.con img:not([height]) {
	height: auto;
}

.con > p { margin-bottom: 16px; }

.con > p:last-child { margin-bottom: 0; }


/* 준비중 이미지 자리 */
.con .img_ready {
	text-align: center;
	padding: 40px 0;
}


/* ============================================================
 * 3. 대회스토리 페이지 (info/index01.php) 전용
 * ============================================================ */

/* 이 페이지는 메인의 인트로 섹션을 그대로 쓰느라 <body class="main"> 이 붙어 있습니다.
   그러면 main.css 의 .main .container{max-width:1400px} 가 위 2번의
   .sec_pd .container{max-width:1170px} 와 특이도가 같아 이겨버립니다.
   서브 본문은 1170px 를 유지해야 하므로 한 단계 더 좁혀 잡아 둡니다.
   (.sec_pd.sub 로 한정해야 메인페이지 섹션까지 좁아지지 않습니다) */
.main .sec_pd.sub .container { max-width: 1170px; }

/* 인트로 하단 우측 라운드 제거 — 이 페이지에서만.
   main.css 의 .intro_wrap 에 border-radius: 0 0 300px 0 이 걸려 있는데,
   메인페이지는 그대로 두고 여기서만 없앱니다.
   (선택자가 한 단계 더 구체적이라 로드 순서와 상관없이 이깁니다) */
.story_page .intro_wrap { border-radius: 0; }

.story_page .sec_pd.sub {
	padding: 120px 0;
}

/* 드림팀이 되어주세요 ── 화면 전체 폭 통이미지 슬라이드 --------------
   그림 안에 글이 들어 있어서 CSS 로 글자를 얹지 않습니다.
   <li> 를 추가하기만 하면 페이지 하단 스크립트가 자동으로 돌립니다. (1장이면 정지) */
.story_team { position: relative; }

/* 원본이 1995x856 이라 그 비율로 자리를 미리 잡아 둡니다.
   그래야 그림이 늦게 떠도 아래 내용이 밀렸다 되돌아오지 않습니다. */
.story_team .team_slide {
	position: relative;
	width: 100%;
	aspect-ratio: 1995 / 856;
	overflow: hidden;

	/* 손가락으로 쓸어 넘길 수 있게 합니다.
	   pan-y = 세로로 미는 건 페이지 스크롤로 브라우저에 맡기고,
	           가로로 미는 것만 스크립트가 가져갑니다. */
	touch-action: pan-y;
	cursor: grab;
}

.story_team .team_slide:active { cursor: grabbing; }

/* 마우스로 끌 때 그림·글자가 선택되어 파랗게 잡히지 않도록 */
.story_team .team_slide img {
	user-select: none;
	-webkit-user-drag: none;
}

.story_team .team_slide ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.story_team .team_slide li {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .8s ease;
}

.story_team .team_slide li.on { opacity: 1; }

.story_team .team_slide li::marker { content: none; }

/* 상자 비율이 그림 비율과 같아서 cover 로 잘리는 부분이 없습니다 */
.story_team .team_slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.story_team .team_slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.story_team .team_slide li { transition: none; }
}


/* 점 인디케이터 — 그림 위 아래쪽에 얹습니다.
   버튼을 26px 로 크게 잡고 점은 ::before 로 그려서, 보이는 크기는 작아도
   손가락으로 누를 자리는 넉넉합니다. */
.story_team .team_dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	display: flex;
	justify-content: center;
	gap: 2px;
}

.story_team .team_dots button {
	position: relative;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.story_team .team_dots button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	transition: background-color .25s;
}

.story_team .team_dots button.on::before { background: #ffffff; }

.story_team .team_dots button:focus-visible::before {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}


/* 어떤 꿈을 달고 달릴까요? ── 아이들 그림 카드 4장 --------------------
   본문 폭(.sec_pd.sub .container = 1170px) 안에 4등분으로 놓습니다.
   카드 폭 = (1170 - 26x3) / 4 = 273px 이고, 그림 원본이 245x180 이라
   안쪽 여백 14px 를 주면 원본 크기 그대로 딱 맞습니다. */
.story_dream {
	/* 카드 열 수와 가로 간격 — 아래 .dream_note 의 폭 계산에도 같은 값을 씁니다.
	   반응형에서는 이 두 값만 바꾸면 카드 배치와 안내문구 위치가 함께 따라갑니다. */
	--dream-cols:     4;
	--dream-col-gap:  26px;
	--dream-row-gap:  26px;
}

.story_dream .sub_title b { color: #0076d7; }

.story_dream .dream_list {
	display: grid;
	grid-template-columns: repeat(var(--dream-cols), 1fr);
	gap: var(--dream-row-gap) var(--dream-col-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.story_dream .dream_list > li {
	text-align: center;
	list-style: none;
	background: #eaf2fb;
	border-radius: 20px;
	padding: 20px 20px 40px;
}

.story_dream .dream_list > li::marker { content: none; }

/* 그림 */
.story_dream .dream_list .pic {
	margin-bottom: 20px;
	border-radius: 14px;
}

.story_dream .dream_list .pic img {
	display: block;
	width: 100%;
	height: auto;
}

/* 이름 알약 */
.story_dream .dream_list .name {
	display: inline-block;
	margin-bottom: 14px;
	padding: 2px 40px;
	border-radius: 30px;
	background: #0076d7;
	color: #ffffff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.story_dream .dream_list .name small {
	font-size: 20px;
	font-weight: 400;
}

/* 꿈 내용 */
.story_dream .dream_list p {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--sub-text);
}

/* 우하단 안내 문구 */
/* 우하단 안내 문구 — 한채연 어린이에 대한 설명이라 마지막 카드 바로 아래에 둡니다.
   폭을 "카드 한 칸"과 똑같이 잡고 오른쪽 끝에 붙이면(margin-left:auto)
   마지막 열과 정확히 겹칩니다. 열 수·간격이 바뀌어도 위 변수만 따라가면 됩니다. */
.story_dream .dream_note {
	width: calc((100% - var(--dream-col-gap) * (var(--dream-cols) - 1)) / var(--dream-cols));
	margin: 20px 0 0 auto;
	font-size: 16px;
	line-height: 1.6;
	color: #0076d7;
	text-align: center;
}


/* 하단 참가신청 배너 ── 파란 라운드 박스 (좌: 문구 / 우: 버튼) ---------- */
.story_cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-top: 50px;
	padding: 42px 60px;

	/* 참가신청 버튼과 같은 알약 모양.
	   높이의 절반보다 큰 값을 주면 브라우저가 알아서 반원으로 깎아 주므로,
	   문구가 늘어 높이가 달라져도 항상 완전히 둥글게 유지됩니다. */
	border-radius: 999px;

	/* 좌 → 우 그라데이션 */
	background: linear-gradient(to right, #0076d7, #005898);
}

.story_cta p {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: -0.02em;
	color: #ffffff;
}

/* 버튼 — 흰 알약 + 오른쪽 원형 화살표 */
.story_cta .cta_btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 70px;
	padding: 10px 18px 10px 34px;
	border-radius: 50px;
	background: #ffffff;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #0076d7;
	white-space: nowrap;
	transition: background-color .2s, transform .2s;
}

.story_cta .cta_btn:hover {
	background: #f2f8ff;
	transform: translateY(-2px);
}

.story_cta .cta_btn .ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #0076d7;
	color: #ffffff;
}

.story_cta .cta_btn .ico svg {
	width: 16px;
	height: 16px;
}


/* ============================================================
 * 4. 대회요강 페이지 (info/index02.php) 전용
 * ============================================================ */

/* 상단 리드 — 문구 + 초록 버튼 */
.rally_lead {
	margin-bottom: 60px;
	text-align: center;
}

.rally_lead h2 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.03em;
	color: var(--sub-title);
}

.rally_lead h2 b { color: #0076d7; }

.rally_lead p {
	margin-top: 14px;
	font-size: 22px;
	line-height: 1.6;
	color: #555555;
}

.rally_lead .lead_btn {
	display: inline-flex;
	align-items: center;
	gap: 34px;
	margin-top: 32px;
	padding: 15px 36px;
	border-radius: 50px;
	background: #7adf10;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #111111;
	transition: background-color .2s, transform .2s;
}

.rally_lead .lead_btn:hover {
	background: #8bf41e;
	transform: translateY(-2px);
}

.rally_lead .lead_btn svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}


/* 대회요강 표 — 좌측 라벨 셀 + 가로 구분선 */
.rally_table {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	border-top: 1px solid #dfe6ec;
	border-collapse: collapse;
}

.rally_table th,
.rally_table td {
	border-bottom: 1px solid #dfe6ec;
	vertical-align: middle;
}

.rally_table th {
	width: 170px;
	padding: 24px 12px;
	background: #f2f8fd;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #0076d7;
	text-align: center;
}

.rally_table td {
	padding: 20px 30px;
	font-size: 22px;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--sub-text);
}

.rally_table td b { font-weight: 700; }

/* 참가비 아래 작은 안내 */
.rally_table td small {
	display: block;
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: #0076d7;
}

/* 로고가 들어가는 칸 — td 에 직접 flex 를 걸면 표 칸에서 빠져나가 열이 어긋나므로,
   안쪽에 상자를 하나 두고 거기에 flex 를 겁니다. (gap 으로 간격이 고르게 잡힙니다) */
.rally_table td.spon .spon_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

/* 로고 크기는 각 <img> 의 height 속성으로 정합니다. (info/index02.php)
   ⚠ 여기서 CSS 로 height 나 낮은 max-height 를 걸지 마세요.
     로고마다 원본 비율이 달라서, 한 값으로 묶으면 납작한 로고(HONDA)와
     각진 로고(NEXON)의 크기 균형이 깨집니다.
   ※ 파일은 메인페이지와 같은 고해상도 로고를 쓰고 화면에만 작게 그립니다.
     그래야 고해상도 화면(휴대폰)에서 흐릿하지 않습니다. */
.rally_table td.spon img {
	width: auto;
	max-width: 100%;
	max-height: 30px;      /* 안전장치 — 실제 크기는 height 속성이 정합니다 */
}


/* ============================================================
 * 5. 유의사항 페이지 (info/index05.php) 전용
 *    기존 .sub_con_title / .con 구조를 그대로 쓰고 목록 스타일만 더합니다.
 * ============================================================ */

/* 번호 붙은 소제목 — "01 참가 자격" */
.notice_page .sub_con_title em {
	margin-right: 10px;
	font-style: normal;
	font-weight: 800;
	color: #0076d7;
}

/* 본문 목록 — 가운뎃점 불릿 */
.notice_page .notice_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.notice_page .notice_list > li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 15px;
	list-style: none;
}

.notice_page .notice_list > li::marker { content: none; }

.notice_page .notice_list > li::before {
	content: '';
	position: absolute;
	top: .72em;
	left: 2px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #9aa3ad;
}

.notice_page .notice_list > li:last-child { margin-bottom: 0; }

.notice_page .notice_list b { font-weight: 700; }

/* 별표(*)로 시작하는 부가 설명 — 한 단계 들여쓰고 작게 */
.notice_page .notice_list .note {
	display: block;
	margin-top: 6px;
	padding-left: 10px;
	font-size: .9em;
	line-height: 1.7;
	color: #6b7683;
}

/* 강조 문구 */
.notice_page .notice_list .point {
	font-weight: 700;
	color: #0076d7;
}

/* 보험 보상한도 표 */
.notice_page .notice_table {
	width: 100%;
	max-width: 720px;
	margin-top: 20px;
	border-top: 2px solid #0076d7;
	border-collapse: collapse;
}

.notice_page .notice_table th,
.notice_page .notice_table td {
	padding: 14px 16px;
	border-bottom: 1px solid #dfe6ec;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
	vertical-align: middle;
}

.notice_page .notice_table thead th {
	background: #f2f8fd;
	font-weight: 700;
	color: #0076d7;
}

.notice_page .notice_table tbody th {
	width: 30%;
	background: #f8fbfe;
	font-weight: 600;
	color: var(--sub-title);
}


/* ============================================================
 * 6. 약관 페이지 (etc/information.php · etc/privacy_terms.php) 공통
 *    조문이 많아 촘촘하게 잡았습니다. 번호는 CSS 카운터로 자동 매깁니다.
 *      ol.num → 1. 2. 3.
 *      ol.sub → 부모 번호와 묶어 4-1. 4-2. …  (li 를 넣고 빼도 번호가 자동 정리)
 * ============================================================ */
.terms_page .terms_lead {
	margin-bottom: 50px;
	padding-bottom: 26px;
	border-bottom: 1px solid #dfe6ec;
	font-size: 17px;
	line-height: 1.75;
	color: #4a5560;
}

.terms_page .terms_lead p + p { margin-top: 12px; }

/* 조문 한 덩어리 */
.terms_page .art { margin-bottom: 42px; }

.terms_page .art:last-child { margin-bottom: 0; }

.terms_page .art > h2 {
	margin-bottom: 14px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--sub-title);
}

.terms_page .art > h2 span { color: #0076d7; }

.terms_page .art > p {
	font-size: 17px;
	line-height: 1.8;
	letter-spacing: -0.02em;
	color: #4a5560;
}

.terms_page .art > p + p { margin-top: 8px; }


/* 번호 목록 ------------------------------------------------- */
.terms_page ol.num,
.terms_page ol.sub,
.terms_page ul.dash {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.terms_page ol.num { counter-reset: n; }

.terms_page ol.num > li,
.terms_page ol.sub > li,
.terms_page ul.dash > li {
	position: relative;
	margin-bottom: 7px;
	padding-left: 27px;
	font-size: 17px;
	line-height: 1.8;
	letter-spacing: -0.02em;
	color: #4a5560;
	list-style: none;
}

.terms_page ol.num > li::marker,
.terms_page ol.sub > li::marker,
.terms_page ul.dash > li::marker { content: none; }

.terms_page ol.num > li { counter-increment: n; }

.terms_page ol.num > li::before {
	content: counter(n) ".";
	position: absolute;
	left: 0;
	color: #0076d7;
	font-weight: 600;
}

/* 부모 번호를 물려받는 하위 목록 — 4-1. 4-2. … */
.terms_page ol.sub {
	counter-reset: s;
	margin-top: 8px;
}

/* 여백은 두 자리 번호(4-10.)까지 들어가는 폭으로 잡았습니다 */
.terms_page ol.sub > li {
	counter-increment: s;
	padding-left: 47px;
	font-size: 16px;
}

.terms_page ol.sub > li::before {
	content: counter(n) "-" counter(s) ".";
	position: absolute;
	left: 0;
	color: #8b95a1;
	font-weight: 600;
}

/* 가운뎃줄(-) 목록 */
.terms_page ul.dash > li {
	padding-left: 16px;
	font-size: 16px;
}

.terms_page ul.dash > li::before {
	content: '';
	position: absolute;
	top: .82em;
	left: 0;
	width: 7px;
	height: 1px;
	background: #a9b3bd;
}

/* 소제목 — 1) 2) 3) 단계 */
.terms_page .art h3 {
	margin: 26px 0 10px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--sub-title);
}

/* 소제목 — (1) (2) (3) 단계 */
.terms_page .art h4 {
	margin: 18px 0 8px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: #33404d;
}

.terms_page .art h3 + h4 { margin-top: 10px; }

/* 기호를 직접 적는 목록 — ① ㉮ (1) 1) 처럼 자동 번호로 못 만드는 기호용
       <ul class="mk"><li><span class="mk">①</span> 내용</li></ul>
   기호가 길어 글자에 닿으면 그 목록에만 style="--mk-w:34px" 로 폭을 넓히세요. */
.terms_page ul.mk {
	--mk-w: 26px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.terms_page ul.mk > li {
	position: relative;
	margin-bottom: 7px;
	padding-left: var(--mk-w);
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: -0.02em;
	color: #4a5560;
	list-style: none;
}

.terms_page ul.mk > li::marker { content: none; }

.terms_page ul.mk > li:last-child { margin-bottom: 0; }

/* span 으로 좁혀 잡아야 합니다. .mk 로만 잡으면 li 안에 중첩된 ul.mk 까지
   같이 걸려서 하위 목록이 통째로 흐름에서 빠져 겹쳐 보입니다. */
.terms_page ul.mk > li > span.mk {
	position: absolute;
	left: 0;
	color: #0076d7;
	font-weight: 600;
}

.terms_page ul.mk ul.mk,
.terms_page ul.mk ul.dash { margin-top: 6px; }


/* 표 — 폭이 좁아지면 표만 옆으로 밀어서 봅니다 */
.terms_page .table_wrap {
	margin-top: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.terms_page .terms_table {
	width: 100%;
	min-width: 640px;
	border-top: 2px solid var(--sub-title);
	border-collapse: collapse;
}

.terms_page .terms_table th,
.terms_page .terms_table td {
	padding: 14px 16px;
	border-bottom: 1px solid #e4eaef;
	border-left: 1px solid #eef2f5;
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: -0.02em;
	color: #4a5560;
	text-align: left;
	vertical-align: top;
}

.terms_page .terms_table th:first-child,
.terms_page .terms_table td:first-child { border-left: 0; }

.terms_page .terms_table thead th {
	background: #f5f8fa;
	font-weight: 600;
	color: var(--sub-title);
	white-space: nowrap;
}

.terms_page .terms_table tbody th {
	background: #fafcfd;
	font-weight: 600;
	color: #33404d;
	white-space: nowrap;
}

.terms_page .terms_table td b { display: block; margin-bottom: 2px; color: #33404d; }

.terms_page .terms_table td b + b,
.terms_page .terms_table td ul + b { margin-top: 10px; }

.terms_page .terms_table ul.dash { margin-top: 0; }

.terms_page .terms_table ul.dash > li { margin-bottom: 2px; font-size: 15px; line-height: 1.7; }

/* 본문 링크 */
.terms_page a {
	color: #0076d7;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 목록 안의 부연 설명 */
.terms_page .note {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.7;
	color: #6b747e;
}

/* 부칙 · 시행일 */
.terms_page .terms_foot {
	margin-top: 56px;
	padding-top: 30px;
	border-top: 1px solid #dfe6ec;
}

.terms_page .terms_foot > p {
	font-size: 17px;
	line-height: 1.8;
	letter-spacing: -0.02em;
	color: #4a5560;
}


/* ============================================================
 * 7. 코스도 페이지 (course/index01.php) 전용
 *    코스를 위아래로 나열합니다.
 *    코스 한 덩어리 = .course_item  (이름표 + 지도 + 코스 순서)
 * ============================================================ */

/* 코스도 원본이 1400x477 이라 서브 기본 폭(1170px)에 넣으면 지명이 작아집니다.
   이 페이지만 메인페이지와 같은 폭을 씁니다. */
.course_page .container { max-width: 1400px; }

.course_page .course_item { text-align: center; }

.course_page .course_item + .course_item { margin-top: 110px; }

.course_page .course_label {
	position: relative;
	/* display: inline-flex; */
	align-items: center;
	justify-content: center;
	/* min-width: 200px; */
	margin: 0 0 30px;
	/* padding: 12px 34px; */
	border-radius: 50px;
	/* background: #7adf10; */
	font-size: 36px;
	font-weight: 800;
	/* font-style: italic; */
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #111111;
}
.course_page .course_label::before {
	position: absolute;
	content: '';
	width: 30px;
	height: 5px;
	background: #7adf10;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
}
.course_page .course_label span {
	color: #0076d7;
}

.course_page .course_map img {
	display: block;
	width: 100%;
	height: auto;
}

/* 좌우 스크롤 안내 — 지도가 실제로 넘칠 때만 스크립트가 .is_on 을 붙입니다 */
.course_page .scroll_hint {
	display: none;
	margin-top: 10px;
	font-size: 14px;
	color: #6b747e;
	text-align: center;
}

.course_page .scroll_hint.is_on { display: block; }

/* 코스 순서 */
.course_page .course_route {
	margin-top: 46px;
	text-align: center;
}

.course_page .course_route p {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: -0.02em;
	color: #33404d;
	background: #e9f4fd;
	padding: 20px;
	border-radius: 20px;
}

.course_page .course_route b {
	font-weight: 700;
	color: #0076d7;
}

.course_page .course_route span { margin: 0 6px; color: #a9b3bd; }


/* ============================================================
 * 8. 이벤트 페이지 (event/index01.php) 전용
 *    큰 이벤트 하나 = .ev_group
 *      머리(.sec_head) + 안내문구(.sec_note) + 내용상자(.ev_card)
 * ============================================================ */

.event_page .ev_group + .ev_group { margin-top: 110px; }

/* 머리 — 번호(초록) 위, 제목 아래, 제목 오른쪽으로 가는 선이 이어집니다 */
.event_page .sec_head .num {
	display: block;
	margin-bottom: 6px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	color: #7adf10;
}

/* 선은 ::after 가 남는 폭을 다 차지하는 방식이라
   제목 글자수가 바뀌어도 길이가 알아서 맞습니다. */
.event_page .sec_head h2 {
	display: flex;
	align-items: center;
	gap: 22px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--sub-title);
	white-space: nowrap;
}

.event_page .sec_head h2::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: #dfe6ec;
}

/* 머리 아래 작은 안내문구 */
.event_page .sec_note {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.event_page .sec_note > li {
	margin-bottom: 4px;
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: #0076d7;
	list-style: none;
}

.event_page .sec_note > li::marker { content: none; }

.event_page .sec_note > li:last-child { margin-bottom: 0; }

/* 연한 파랑 내용상자 */
.event_page .ev_card {
	margin-top: 34px;
	padding: 60px 40px;
	border-radius: 20px;
	background: #e9f4fd;
}

/* 같은 머리띠 아래에 상자가 여러 개 이어질 때 */
.event_page .ev_card + .ev_card { margin-top: 40px; }

/* 아이콘과 글자를 flex 로 나란히 놓습니다.
   vertical-align 으로 맞추면 글자 크기가 바뀔 때마다 값을 다시 잡아야 합니다. */
.event_page .ev_card > h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--sub-title);
	text-align: center;
}

/* 아이콘 원본 비율이 서로 달라 높이로 맞춥니다 (클로버 43x51 · 반짝임 51x49) */
.event_page .ev_card > h3 .ico {
	flex: none;
	width: auto;
	height: 43px;
}

.event_page .ev_card > .lead {
	margin-top: 14px;
	font-size: 24px;
	line-height: 1.7;
	letter-spacing: -0.02em;
	color: #0076d7;
	text-align: center;
}


/* 경품 목록 — 흰 동그라미 + 이름 --------------------------- */
.event_page .gift_list {
	display: flex;
	justify-content: center;
	gap: 36px;
	margin: 46px 0 0;
	padding: 0;
	list-style: none;
}

.event_page .gift_list > li {
	width: 300px;
	max-width: 100%;
	text-align: center;
	list-style: none;
}

.event_page .gift_list > li::marker { content: none; }

/* aspect-ratio 로 정원을 만듭니다. 폭이 줄면 지름도 같이 줄어듭니다. */
/* .event_page .gift_thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #ffffff;
	overflow: hidden;
} */

/* 상품 사진마다 비율이 달라서 폭·높이를 함께 제한합니다 */
.event_page .gift_thumb img {
	width: auto;
	height: auto;
	object-fit: contain;
}

/* 동그라미 하나에 사진 두 장 — 살짝 겹쳐 놓습니다 */
.event_page .gift_thumb.two img {
	max-width: 46%;
	max-height: 46%;
}

.event_page .gift_thumb.two img + img { margin-left: -6%; }

.event_page .gift_list .name {
	margin-top: 24px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--sub-title);
}
.event_page .gift_list .name small {
	font-weight: normal;
}

/* "그 외 선물이 추가됩니다!" 처럼 강조하는 문구 */
.event_page .gift_list .name.point { color: #0076d7; }


/* 파란 안내 박스 ------------------------------------------- */
.event_page .ev_msg {
	margin: 40px auto 0;
}

.event_page .ev_msg p {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: -0.02em;
	color: #0076d7;
	text-align: center;
}


/* 시상 목록 — 흰 카드 ------------------------------------- */
.event_page .prize_list {
	display: flex;
	gap: 20px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.event_page .prize_list > li {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: 30px 20px;
	border-radius: 16px;
	background: #ffffff;
	list-style: none;
	text-align: center;
}

.event_page .prize_list > li::marker { content: none; }

/* 등수 이름표 */
.event_page .prize_list .rank {
	display: inline-block;
	width: 230px;
	padding: 3px 0;
	border-radius: 30px;
	background: #0076d7;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #ffffff;
}

/* 사진 높이를 맞춰 세 카드의 글자 줄이 나란히 오게 합니다 */
.event_page .prize_thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 180px;
	margin: 22px 0 18px;
}

.event_page .prize_thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.event_page .prize_list .name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--sub-title);
}

.event_page .prize_list .name .sub {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 400;
	color: #6b747e;
}


/* 참가방법 · 유의사항 — 흰 상자 하나에 함께 담습니다 ------- */
.event_page .ev_info {
	margin-top: 30px;
	padding: 34px 36px;
	border-radius: 16px;
	background: #ffffff;
}

.event_page .ev_info h4 {
	margin-bottom: 12px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #0076d7;
}

/* 상자 안에서 제목이 이어질 때 위 목록과 띄웁니다 */
.event_page .ev_info ul + h4 { margin-top: 26px; }

.event_page ul.dot {
	margin: 0;
	padding: 0;
	list-style: none;
}

.event_page ul.dot > li {
	position: relative;
	padding-left: 14px;
	font-size: 22px;
	line-height: 1.75;
	letter-spacing: -0.02em;
	color: #4a5560;
	list-style: none;
}

.event_page ul.dot > li::marker { content: none; }

.event_page ul.dot > li::before {
	content: '';
	position: absolute;
	top: .72em;
	left: 2px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #9aa6b2;
}

.event_page ul.dot > li:last-child { margin-bottom: 0; }


/* SNS 사전 댓글 이벤트 — 왼쪽 이미지 + 오른쪽 글 2단 ------- */
.event_page .sns_wrap {
	display: flex;
	align-items: center;
	gap: 50px;
	margin-top: 40px;
}

.event_page .sns_img { flex: 0 0 34%; }

.event_page .sns_img img {
	display: block;
	width: 100%;
	height: auto;
}

.event_page .sns_txt {
	flex: 1 1 0;
	min-width: 0;
}

.event_page .sns_txt .tag {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--sub-title);
}

.event_page .sns_txt .head {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: var(--sub-title);
}

.event_page .sns_txt .head b {
	font-size: 30px;
	color: #0076d7;
	font-size: 42px;
}
.event_page .sns_txt .head span {
	font-size: 42px;
}

/* 참여방법 상자 */
.event_page .sns_how {
	margin-top: 26px;
	padding: 28px 30px;
	border-radius: 12px;
	background: #e9f4fd;
}

.event_page .sns_how h4 {
	margin-bottom: 12px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #0076d7;
}

.event_page .sns_how ol {
	counter-reset: sns;
	margin: 0;
	padding: 0;
	list-style: none;
}

.event_page .sns_how ol > li {
	position: relative;
	counter-increment: sns;
	margin-bottom: 6px;
	padding-left: 28px;
	font-size: 20px;
	line-height: 1.7;
	letter-spacing: -0.02em;
	color: #4a5560;
	list-style: none;
}

.event_page .sns_how ol > li::marker { content: none; }

/* 번호를 파란 동그라미 안에 넣습니다.
   글줄 높이가 바뀌어도 첫 줄에 붙어 있도록 top 을 em 으로 잡았습니다. */
.event_page .sns_how ol > li::before {
	content: counter(sns);
    position: absolute;
    top: .40em;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0076d7;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
}

.event_page .sns_how ol > li b {
	font-weight: 700;
	color: #0076d7;
}

.event_page .sns_how .emo { font-style: normal; }

/* 예시 문장 — 번호 글줄 아래에 한 칸 들여 붙입니다 */
.event_page .sns_how .ex {
	display: block;
	margin-top: 2px;
	padding-left: 14px;
}

.event_page .sns_note {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.event_page .sns_note > li {
	font-size: 20px;
	line-height: 1.75;
	letter-spacing: -0.02em;
	color: #0076d7;
	list-style: none;
}

.event_page .sns_note > li::marker { content: none; }


/* ============================================================
 * 9. 시각장애인 참가 신청 (apply/index04.php) 전용
 *    안내 문구만 있는 페이지라 가운데 정렬 한 단으로 잡았습니다.
 *    시각장애인 참가자가 직접 읽는 페이지라, 색으로만 강조하지 않고
 *    굵기(b)를 함께 써서 화면낭독기에서도 뜻이 남게 했습니다.
 * ============================================================ */

/* 한 줄이 너무 길면 가운데 정렬 글은 읽기 어려워서 폭을 좁혔습니다 */
.guide_page .guide_wrap {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.guide_page .guide_wrap > p {
	margin-bottom: 30px;
	font-size: 22px;
	line-height: 1.9;
	letter-spacing: -0.02em;
	color: #4a5560;
}

.guide_page .guide_wrap > p b {
	font-weight: 700;
	color: var(--sub-title);
}
.guide_page .guide_wrap > p small {
	color: #0076d7;
}

/* 첫 인사말 — 한 단계 크고 진하게 */
.guide_page .guide_wrap > p.lead {
	margin-bottom: 40px;
	font-size: 26px;
	font-weight: 600;
	color: var(--sub-title);
}
.guide_page .guide_wrap > p.lead b {
	color: #0076d7;
}

/* 입금 계좌 상자 */
.guide_page .acc_box {
	margin-bottom: 44px;
	padding: 32px 26px;
	border-radius: 16px;
	background: #e9f4fd;
}

.guide_page .acc_box .acc {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--sub-title);
}

.guide_page .acc_box .acc b {
	font-weight: 700;
	color: #0076d7;
}

.guide_page .acc_box .acc_note {
	margin-top: 12px;
	font-size: 20px;
	line-height: 1.75;
	letter-spacing: -0.02em;
	color: #4a5560;
}

.guide_page .acc_box .acc_note b {
	font-weight: 700;
	color: #33404d;
}

/* 취소 문의 */
.guide_page .guide_wrap > p.tel {
	margin-bottom: 0;
	font-weight: 600;
	color: var(--sub-title);
}

.guide_page .guide_wrap > p.tel a {
	color: #0076d7;
	transition: color .2s;
}

.guide_page .guide_wrap > p.tel a:hover { text-decoration: underline; }

/* 참가신청 버튼 — 사이트 공통 초록 알약 */
.guide_page .guide_btn { margin-top: 56px; }

.guide_page .apply_btn {
	display: inline-flex;
	align-items: center;
	gap: 34px;
	padding: 16px 40px;
	border-radius: 50px;
	background: #7adf10;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #111111;
	transition: background-color .2s, transform .2s;
}

.guide_page .apply_btn:hover {
	background: #8bf41e;
	transform: translateY(-2px);
}

.guide_page .apply_btn svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}


/* ============================================================
 * 10. 넥슨 히어로 30 페이지 (community/index04.php) 전용
 * ============================================================ */

/* 이 페이지는 제목을 글자 대신 로고 그림으로 보여 줍니다.
   sub_visual() 이 만든 <h1> 은 화면낭독기·검색엔진을 위해 남기고 눈에만 안 보이게 합니다.
   (지우면 페이지에 제목이 하나도 없는 문서가 됩니다) */
.hero_body .sub_visual h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 제목 자리를 아래 로고가 대신하므로 그만큼 여백을 줄입니다 */
.hero_body .sub_visual { padding-bottom: 12px; }

.hero_page .hero_top { padding: 0 0 76px; }

/* 제목 대신 들어가는 로고 */
.hero_page .hero_logo {
	margin-bottom: 54px;
	text-align: center;
}

.hero_page .hero_logo img {
	display: inline-block;
	width: 304px;                       /* 원본 크기 그대로 */
	max-width: 62%;
	height: auto;
}

.hero_page .hero_char { text-align: center; }

.hero_page .hero_char img {
	display: inline-block;
	width: 360px;                       /* 원본 크기 그대로 */
	max-width: 62%;
	height: auto;
}


/* 참여 게임 로고 흐름 --------------------------------------
 * 같은 목록 두 벌을 나란히 놓고 track 을 정확히 -50% 밀어 이음매를 없앱니다.
 * 두 벌 사이 간격도 목록 안 간격과 같아야 하므로,
 * 각 목록의 좌우 안쪽 여백을 간격의 절반씩으로 잡았습니다.
 * ---------------------------------------------------------- */
.hero_page .logo_marquee {
	--lg-gap:  70px;                    /* 로고 사이 간격 */
	--lg-time: 60s;                     /* 한 바퀴 도는 시간 — 클수록 느립니다 */
	margin-top: 78px;
	overflow: hidden;                   /* 흘러나간 로고가 가로 스크롤을 만들지 않게 */
}

.hero_page .marquee_track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: hero_marquee var(--lg-time) linear infinite;
}

.hero_page .logo_list {
	display: flex;
	align-items: center;
	gap: var(--lg-gap);
	margin: 0;
	padding: 0 calc(var(--lg-gap) / 2);
	list-style: none;
}

.hero_page .logo_list > li {
	flex: none;
	list-style: none;
}

.hero_page .logo_list > li::marker { content: none; }

/* 원본이 이미 서로 크기가 맞춰져 있어 그대로 씁니다 (높이를 일괄로 맞추면
   가로로 긴 로고가 지나치게 커집니다). 흐르는 띠라 화면을 넘어도 괜찮습니다. */
.hero_page .logo_list img {
	display: block;
	width: auto;
	height: auto;
	max-height: 74px;
}

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

@media (prefers-reduced-motion: reduce) {
	.hero_page .marquee_track { animation: none; }
}


/* 넥슨 히어로 30 기금 — 좌: 글 / 우: 로고, 화면 전체 폭 --- */
.hero_page .hero_fund {
	padding: 100px 0;
	background: #eff7ff;
}

/* 마크업은 로고가 먼저지만 넓은 화면에서는 좌우를 뒤집어 글을 왼쪽에 둡니다.
   (그래야 좁은 화면에서 세로로 쌓일 때 로고가 위로 옵니다) */
.hero_page .hero_fund .container {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 70px;
}

.hero_page .fund_logo {
	text-align: left;
}

.hero_page .fund_logo img {
	display: block;
	width: 464px;                       /* 원본 크기 그대로 */
	max-width: 100%;
	height: auto;
}

/* 파란 알약 버튼 */
.hero_page .fund_btn {
	display: inline-flex;
	width: 320px;
	align-items: center;
	justify-content: center;
	gap: 26px;
	margin-top: 30px;
	padding: 10px 30px;
	border-radius: 50px;
	background: #0076d7;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #ffffff;
	transition: background-color .2s, transform .2s;
}

.hero_page .fund_btn:hover {
	background: #0068c0;
	transform: translateY(-2px);
}

.hero_page .fund_btn svg {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
}

.hero_page .fund_txt {
	flex: 1 1 0;
	min-width: 0;
}

.hero_page .fund_txt h2 {
	margin-bottom: 24px;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: #0076d7;
}

.hero_page .fund_txt p {
	margin-bottom: 30px;
	font-size: 22px;
	line-height: 1.85;
	letter-spacing: -0.02em;
	color: #33404d;
}

.hero_page .fund_txt p:last-child { margin-bottom: 0; }

.hero_page .fund_txt b {
	font-weight: 700;
	color: var(--sub-title);
}


/* ============================================================
 * 11. 푸르메재단 페이지 (community/index03.php) 전용
 *    소개 한 덩어리 = .pm_sec  (사진 + 글 2단)
 *      .pm_sec.blue → 파란 배경(화면 전체 폭), .pm_row.rev → 좌우 반전
 *    맨 아래 정기기부 = .pm_cta (하늘 배경, 가운데 정렬)
 * ============================================================ */

.purme_page .pm_sec { padding: 120px 0; }
.purme_page .pm_row {
	display: flex;
	align-items: flex-start;
	gap: 50px;
}
.purme_page .pm_row.rev { flex-direction: row-reverse; }

.purme_page .pm_img { flex: 0 0 46%; margin-top: 20px; }

.purme_page .pm_img img {
	display: block;
	width: 100%;
	height: auto;
}

.purme_page .pm_txt {
	flex: 1 1 0;
	min-width: 0;
}

.purme_page .pm_txt h2 {
	margin-bottom: 24px;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.03em;
	color: var(--sub-title);
}

.purme_page .pm_txt h2 b { color: #0076d7; }

.purme_page .pm_txt p {
	font-size: 19px;
	line-height: 1.9;
	letter-spacing: -0.02em;
	color: #4a5560;
}

.purme_page .pm_txt p b {
	font-weight: 700;
	color: #33404d;
}

.purme_page .pm_txt .note {
	margin-top: 10px;
	font-size: 18px;
	font-weight: 600;
	color: #0076d7;
}

/* 초록 알약 버튼 — 사이트 공통 모양 */
.purme_page .pm_btn {
	display: inline-flex;
	align-items: center;
	gap: 26px;
	margin-top: 30px;
	padding: 14px 30px;
	border-radius: 50px;
	background: #7adf10;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #111111;
	transition: background-color .2s, transform .2s;
}

.purme_page .pm_btn:hover {
	background: #8bf41e;
	transform: translateY(-2px);
}

.purme_page .pm_btn svg {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
}


/* 파란 배경 구간 — 배경 그림이 안 떠도 파란 바탕은 깔립니다 */
.purme_page .pm_sec.blue {
	padding: 100px 0;
	background-color: #0f86e8;
	background-image: url(/img/sub/purme-bg1.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.purme_page .pm_sec.blue .eyebrow {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.purme_page .pm_sec.blue h2 { color: #ffffff; }

.purme_page .pm_sec.blue h2 b { color: #7adf10; }

.purme_page .pm_sec.blue p { color: rgba(255, 255, 255, .9); }

.purme_page .pm_sec.blue p b { color: #ffffff; }


/* 정기기부 — 하늘 배경, 가운데 정렬 --------------------------- */
.purme_page .pm_cta {
	padding: 96px 0 110px;
	background-color: #0f86e8;
	background-image: url(/img/sub/purme-bg2.webp);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	text-align: center;
}

.purme_page .pm_cta .cta_img { margin-bottom: 52px; }

.purme_page .pm_cta .cta_img img {
	display: inline-block;
	width: 900px;
	max-width: 100%;
	height: auto;
}

.purme_page .pm_cta h2 {
	margin-bottom: 30px;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.03em;
	color: #ffffff;
}

.purme_page .pm_cta h2 b { color: #7adf10; }

.purme_page .pm_cta p {
	font-size: 22px;
	line-height: 1.9;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.purme_page .pm_cta p + p { margin-top: 26px; }

.purme_page .pm_cta p b { font-weight: 700; }

/* 흰 알약 + 파란 원형 화살표 (대회스토리 CTA 와 같은 모양) */
.purme_page .cta_btn {
	display: inline-flex;
	align-items: center;
	gap: 30px;
	margin-top: 40px;
	padding: 12px 14px 12px 34px;
	border-radius: 50px;
	background: #ffffff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #0076d7;
	transition: background-color .2s, transform .2s;
}

.purme_page .cta_btn:hover {
	background: #f2f8ff;
	transform: translateY(-2px);
}

.purme_page .cta_btn .ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #0076d7;
	color: #ffffff;
}

.purme_page .cta_btn .ico svg {
	width: 15px;
	height: 15px;
}


/* ============================================================
 * 12. 기념품 페이지 (info/index03.php) 전용
 *    기념품 묶음 하나 = .gift_group   (연한 파랑 상자)
 *      제목(.group_title) + 내용
 *    기념품 한 칸    = figure.gift_fig
 *      흰 카드(.gift_card) + 이름(figcaption)
 *
 *  ▶ 품목을 늘리고 줄일 때는 <figure class="gift_fig"> 한 덩어리를 통째로
 *    복사하거나 지우면 간격이 알아서 맞습니다.
 * ============================================================ */

.gift_page .gift_group {
	padding: 60px 40px;
	border-radius: 20px;
	background: #e9f4fd;
}

.gift_page .gift_group + .gift_group { margin-top: 60px; }

.gift_page .group_title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 40px;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--sub-title);
	text-align: center;
}

/* 그림 + 이름 한 덩어리 (figure)
   figure 는 브라우저 기본 좌우 여백이 40px 이라 반드시 0 으로 눌러 줍니다. */
/* 제목 왼쪽 선물 아이콘 (souvenir-icon.webp, 원본 42x45)
   글자 크기에 묶어 두면 화면이 좁아져 제목이 작아질 때 아이콘도 같은 비율로 따라옵니다.
   ⚠ px 로 고정하지 마세요. 모바일에서 아이콘만 커 보입니다. */
.gift_page .group_title .ico {
	width: auto;
	height: 1em;
}

.gift_page .gift_fig { margin: 0; }

/* 간격 — 묶음 상자 바로 아래 놓인 칸끼리만 margin 으로 띄웁니다.
   ⚠ .gift_grid 안쪽 칸에는 주면 안 됩니다. 그리드는 gap 이 간격을 맡는데
     margin 까지 붙으면 "첫 칸만" margin 이 없어 그 칸 하나만 위로 올라갑니다. */
.gift_page .gift_group > .gift_fig + .gift_fig,
.gift_page .gift_grid { margin-top: 60px; }

/* 흰 카드 — 그림이 놓이는 자리 */
.gift_page .gift_card {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 카드 "바로 아래" 그림에만 폭을 줍니다.
   .snack_list 안쪽 그림까지 걸리면 간식 사진이 칸을 꽉 채워 버립니다.

   ⚠ width:100% 로 두지 마세요. 그림이 원본보다 커질 때까지 늘어납니다.
     (메달 원본이 711x497 인데 1060px 까지 부풀어 흐릿하게 나왔습니다)
     width:auto + max-width:100% 면 원본 크기로 놓이고, 칸이 더 좁을 때만 줄어듭니다.
     티셔츠(1110)·반다나(541) 처럼 칸보다 큰 그림은 지금까지와 똑같이 칸에 맞춰집니다. */
.gift_page .gift_card > img {
	width: auto;
	max-width: 100%;
	height: auto;
}

/* 완주 간식 칸에만 흰 바탕을 깝니다.
   다른 품목 사진(티셔츠·반다나·선크림·메달)은 이미지 안에 이미 흰 배경이 들어 있어
   카드가 필요 없지만, 간식 사진은 제품만 잘려 있어 파랑 위에 그냥 두면 떠 보입니다. */
.gift_page .snack_card {
	padding: 40px 30px;
	border-radius: 14px;
	background: #ffffff;
}

.gift_page .gift_fig figcaption {
	margin-top: 18px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--sub-title);
	text-align: center;
}

/* 이름 아래 작은 조건 안내
   ⚠ 색을 #0076d7 로 올리지 마세요. 연한 파랑 상자 위에서는 대비가 4.5:1 에 못 미쳐
     저시력 사용자가 읽기 어렵습니다. (흰 배경이라면 #0076d7 도 괜찮습니다) */
.gift_page .gift_note {
	display: block;
	margin-top: 6px;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: #0069bf;
}

/* 사전 발송 품목 — 두 칸씩 나열
   align-items:start 를 줘야 이름 줄 수가 다른 칸끼리 카드 높이가 늘어나지 않습니다. */
.gift_page .gift_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px 34px;
	align-items: start;
}

/* 사이즈 표 — 표와 "단위" 글자의 오른쪽 끝을 맞추려고 같은 폭을 씁니다 */
.gift_page .unit,
.gift_page .table_scroll {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.gift_page .unit {
	margin-bottom: 8px;
	font-size: 20px;
	color: #0069bf;
	text-align: right;
}

/* 좁은 화면에서 표가 넘칠 때만 좌우로 밀 수 있게 합니다 */
.gift_page .table_scroll { overflow-x: auto; }

.gift_page .gift_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 20px;
}

.gift_page .gift_table th,
.gift_page .gift_table td {
	padding: 12px 10px;
	border: 1px solid #cfe2f5;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

.gift_page .gift_table thead th {
	border-color: #0076d7;
	background: #0076d7;
	font-weight: 700;
	color: #ffffff;
}

.gift_page .gift_table tbody th {
	background: #dbeaf8;
	font-weight: 700;
	color: #0069bf;
}

.gift_page .gift_table tbody td {
	background: #ffffff;
	color: var(--sub-text);
}

/* 완주 간식 — 한 카드 안에 여러 품목
 *
 *  ▶ 한 줄에 몇 칸을 놓을지는 --snack-cols 한 값만 바꾸면 됩니다.
 *    품목이 몇 개든 마지막 줄은 가운데로 모입니다.
 *      5개 → 3 + 2 (가운데)      7개 → 3 + 3 + 1 (가운데)
 *
 *  ⚠ grid 로 되돌리지 마세요. grid 는 칸 수가 고정이라 품목이 늘면
 *    마지막 줄이 왼쪽에 홀로 붙습니다. (5개일 때 4 + 1 로 어색했던 이유)
 *    flex + justify-content:center 여야 남는 칸이 가운데로 모입니다.
 */
.gift_page .snack_list {
	--snack-cols: 3;
	--snack-gap: 24px;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px var(--snack-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 칸 하나의 폭 = (전체폭 - 칸 사이 간격 합) ÷ 칸 수
   flex-basis 와 max-width 를 함께 줘야 글자가 길어져도 칸이 밀리지 않습니다. */
.gift_page .snack_list > li {
	flex: 0 0 calc((100% - (var(--snack-cols) - 1) * var(--snack-gap)) / var(--snack-cols));
	max-width: calc((100% - (var(--snack-cols) - 1) * var(--snack-gap)) / var(--snack-cols));
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
}

.gift_page .snack_list > li::marker { content: none; }

/* 그림 높이를 맞춰 두면 품목마다 사진 비율이 달라도 이름 줄이 가지런합니다 */
.gift_page .snack_list .pic {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 130px;
}

.gift_page .snack_list .pic img {
	width: auto;
	max-width: 100%;
	max-height: 130px;
}

.gift_page .snack_list .name {
	margin-top: 14px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--sub-title);
	text-align: center;
}

.gift_page .snack_list .name small { font-size: 18px; font-weight: 400; }

/* 맨 아래 안내 — 파랑 상자 밖(흰 배경)이라 #0076d7 로도 대비가 충분합니다 */
.gift_page .gift_foot {
	margin-top: 40px;
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: #0076d7;
	text-align: center;
}


/* ============================================================
 * 13. 프로그램 페이지 (info/index04.php) 전용
 *    프로그램 한 칸 = li.pg_card
 *      머리띠(.pg_head) + 내용(.pg_body: 그림 + 제목 + 설명)
 *
 *  ▶ 칸을 늘리거나 줄일 때는 <li> 한 덩어리를 통째로 복사·삭제하면
 *    2칸 배치와 간격이 알아서 맞습니다.
 * ============================================================ */

/* 머리 문구 — 클로버 아이콘 + 한 줄
   ⚠ flex 로 만들지 마세요. 문구 안에 <span>·<b> 를 넣으면 그 조각이 저마다
     flex 아이템이 되어 gap(간격)이 글자 사이에 끼어듭니다.
     실제로 "어린이의 꿈" 을 <span> 으로 감쌌더니 "꿈" 과 "을" 사이가 14px 벌어졌습니다.
     글자는 그냥 흐르게 두고, 아이콘만 아래에서 inline-block 으로 띄웁니다. */
.program_page .pg_lead {
	margin: 0 0 56px;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--sub-title);
	text-align: center;
}
.program_page .pg_lead span {
	color: #0076d7;
}

/* 클로버 아이콘 (program-icon.webp, 원본 45x50)
   글자 크기에 묶어 두면 화면이 좁아져 문구가 작아질 때 아이콘도 같은 비율로 따라옵니다.
   ⚠ px 로 고정하지 마세요. 모바일에서 아이콘만 커 보입니다. */
.program_page .pg_lead .ico {
	display: inline-block;
	width: auto;
	height: 1.05em;
	margin-right: 12px;
	vertical-align: -0.16em;
}

.program_page .pg_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* overflow:hidden 이 있어야 파란 머리띠가 카드의 둥근 모서리를 넘지 않습니다 */
.program_page .pg_card {
	overflow: hidden;
	border-radius: 20px;
	background: #e9f4fd;
	list-style: none;
}

.program_page .pg_card::marker { content: none; }

.program_page .pg_head {
	margin: 0;
	padding: 8px 20px;
	background: #0076d7;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: #ffffff;
	text-align: center;
}

.program_page .pg_body { padding: 30px 25px 40px; }

/* 그림 자리 — 사진은 모서리를 둥글게, 그림형(흰 배경 포함) 은 그대로 놓입니다 */
.program_page .pg_pic {
	overflow: hidden;
}

.program_page .pg_pic img {
	display: block;
	width: 100%;
	height: auto;
}

.program_page .pg_tit {
	margin: 28px 0 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--sub-title);
	text-align: center;
}

.program_page .pg_txt {
	margin: 8px 0 0;
	font-size: 20px;
	line-height: 1.7;
	letter-spacing: -0.02em;
	color: var(--sub-text);
	text-align: center;
}


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

@media all and (max-width: 992px) {

	/* 프로그램 */
	.program_page .pg_lead { margin-bottom: 42px; font-size: 32px; }
	.program_page .pg_list { gap: 40px 26px; }
	.program_page .pg_head { padding: 13px 16px; font-size: 24px; }
	.program_page .pg_body { padding: 26px 22px 32px; }
	.program_page .pg_tit { margin-top: 22px; font-size: 22px; }
	.program_page .pg_txt { margin-top: 12px; font-size: 16px; }

	/* 기념품 */
	.gift_page .gift_group { padding: 44px 24px; border-radius: 16px; }
	.gift_page .gift_group + .gift_group { margin-top: 44px; }
	.gift_page .group_title { margin-bottom: 30px; font-size: 32px; }
	.gift_page .snack_card { padding: 30px 22px; }
	.gift_page .gift_group > .gift_fig + .gift_fig,
	.gift_page .gift_grid { margin-top: 26px; }
	.gift_page .gift_grid { gap: 26px; }
	.gift_page .gift_fig figcaption { margin-top: 14px; font-size: 18px; }
	.gift_page .snack_list { --snack-gap: 20px; gap: 26px var(--snack-gap); }
	.gift_page .snack_list .pic { height: 100px; }
	.gift_page .snack_list .pic img { max-height: 100px; }
	.gift_page .snack_list .name { margin-top: 12px; font-size: 15px; }

	/* 푸르메재단 */
	.purme_page .pm_sec { padding: 66px 0; }
	.purme_page .pm_sec.blue { padding: 76px 0; }
	.purme_page .pm_row { gap: 44px; }
	.purme_page .pm_img { flex: 0 0 40%; }
	.purme_page .pm_txt h2 { margin-bottom: 18px; font-size: 28px; }
	.purme_page .pm_txt p { font-size: 16px; line-height: 1.85; }
	.purme_page .pm_sec.blue .eyebrow { font-size: 17px; }
	.purme_page .pm_btn { margin-top: 24px; gap: 20px; padding: 12px 24px; font-size: 16px; }
	.purme_page .pm_cta { padding: 70px 0 80px; }
	.purme_page .pm_cta .cta_img { margin-bottom: 40px; }
	.purme_page .pm_cta h2 { margin-bottom: 22px; font-size: 27px; }
	.purme_page .pm_cta p { font-size: 16px; }
	.purme_page .cta_btn { margin-top: 32px; gap: 22px; padding: 10px 12px 10px 26px; font-size: 17px; }
	.purme_page .cta_btn .ico { width: 30px; height: 30px; }


	/* 넥슨 히어로 30 */
	.sub_visual .sub_lead { font-size: 18px; }
	.hero_page .hero_top { padding-bottom: 60px; }
	.hero_page .hero_logo { margin-bottom: 42px; }
	.hero_page .logo_marquee { --lg-gap: 54px; margin-top: 60px; }
	.hero_page .hero_fund { padding: 76px 0; }
	.hero_page .hero_fund .container { gap: 40px; }
	.hero_page .fund_logo { flex: 0 0 38%; }
	.hero_page .fund_btn { margin-top: 24px; gap: 20px; padding: 12px 24px; font-size: 16px; }
	.hero_page .fund_txt h2 { margin-bottom: 18px; font-size: 27px; }
	.hero_page .fund_txt p { margin-bottom: 24px; font-size: 16px; }


	/* 시각장애인 참가 신청 */
	.guide_page .guide_wrap > p { margin-bottom: 30px; font-size: 17px; }
	.guide_page .guide_wrap > p.lead { margin-bottom: 34px; font-size: 18px; }
	.guide_page .acc_box { margin-bottom: 34px; padding: 26px 20px; }
	.guide_page .acc_box .acc { font-size: 19px; }
	.guide_page .acc_box .acc_note { font-size: 15px; }
	.guide_page .guide_btn { margin-top: 44px; }
	.guide_page .apply_btn { gap: 26px; padding: 14px 32px; font-size: 19px; }


	/* 이벤트 */
	.event_page .ev_group + .ev_group { margin-top: 80px; }
	.event_page .sec_head h2 { gap: 16px; font-size: 24px; }
	.event_page .sec_head .num { font-size: 15px; }
	.event_page .sec_note > li { font-size: 15px; }
	.event_page .ev_card { margin-top: 28px; padding: 44px 30px; }
	.event_page .ev_card > h3 { font-size: 27px; }
	.event_page .ev_card > .lead { font-size: 16px; }
	.event_page .gift_list { gap: 24px; margin-top: 36px; }
	.event_page .gift_list .name { margin-top: 18px; font-size: 16px; }
	.event_page .ev_card + .ev_card { margin-top: 30px; }
	.event_page .ev_msg { margin-top: 28px; }
	.event_page .ev_msg p { font-size: 16px; }
	.event_page .prize_list { gap: 14px; margin-top: 36px; }
	.event_page .prize_list > li { padding: 24px 14px; }
	.event_page .prize_list .rank { padding: 7px 14px; font-size: 15px; }
	.event_page .prize_thumb { height: 150px; margin: 18px 0 14px; }
	.event_page .prize_list .name { font-size: 15px; }
	.event_page .prize_list .name .sub { font-size: 13px; }
	.event_page .ev_info { margin-top: 24px; padding: 26px 24px; }
	.event_page .ev_info h4 { font-size: 17px; }
	.event_page ul.dot > li { font-size: 15px; }
	.event_page .ev_card > h3 .ico { height: 28px; }
	.event_page .sns_wrap { gap: 30px; margin-top: 32px; }
	.event_page .sns_img { flex: 0 0 36%; }
	.event_page .sns_txt .tag { font-size: 15px; }
	.event_page .sns_txt .head { font-size: 15px; }
	.event_page .sns_txt .head b { font-size: 24px; }
	.event_page .sns_txt .head span { font-size: 24px; }
	.event_page .sns_how { margin-top: 20px; padding: 22px 20px; }
	.event_page .sns_how h4 { font-size: 17px; }
	.event_page .sns_how ol > li { font-size: 15px; }
	.event_page .sns_note > li { font-size: 14px; }



	/* 코스도 */
	.course_page .course_item + .course_item { margin-top: 80px; }
	.course_page .course_label { min-width: 170px; margin-bottom: 28px; padding: 11px 28px; font-size: 22px; }
	.course_page .course_route { margin-top: 34px; }
	.course_page .course_route p { font-size: 19px; padding: 10px; border-radius: 10px;}



	/* 약관 */
	.terms_page .terms_lead { margin-bottom: 40px; padding-bottom: 22px; font-size: 16px; }
	.terms_page .art { margin-bottom: 34px; }
	.terms_page .art > h2 { font-size: 19px; }
	.terms_page .art > p,
	.terms_page .terms_foot > p,
	.terms_page ol.num > li { font-size: 16px; }
	.terms_page ol.sub > li,
	.terms_page ul.dash > li,
	.terms_page ul.mk > li { font-size: 15px; }
	.terms_page .art h3 { margin-top: 22px; font-size: 17px; }
	.terms_page .art h4 { font-size: 16px; }
	.terms_page .terms_table th,
	.terms_page .terms_table td { padding: 12px 12px; font-size: 14px; }


	/* 유의사항 */
	.notice_page .notice_table { max-width: 100%; }
	.notice_page .notice_table th,
	.notice_page .notice_table td { padding: 12px 12px; font-size: 15px; }


	/* 대회요강 */
	.rally_lead { margin-bottom: 56px; }
	.rally_lead h2 { font-size: 24px; }
	.rally_lead p { margin-top: 12px; font-size: 17px; }
	.rally_lead .lead_btn { margin-top: 26px; padding: 13px 28px; gap: 24px; font-size: 17px; }

	.rally_table th { width: 130px; padding: 18px 10px; font-size: 16px; }
	.rally_table td { padding: 18px 22px; font-size: 16px; }
	.rally_table td small { font-size: 14px; }
	.rally_table td.spon .spon_row { gap: 10px 16px; }
	.rally_table td.spon img { max-height: 30px; }

	:root { --sub-visual-gap: 78px; }

	.sub_visual { padding-bottom: 46px; }
	.sub_visual .sub_visual_txt h1 { font-size: 38px; }
	.sub_path { margin-bottom: 14px; font-size: 14px; }

	.sec_pd,
	.sec_pd.sub { padding: 60px 0 80px; }

	/* 꿈 카드 — 4열을 2열로 */
	/* 꿈 카드 — 4열을 2열로 (안내문구 폭도 이 변수를 따라 자동으로 2등분됩니다) */
	.story_dream { --dream-cols: 2; --dream-col-gap: 24px; --dream-row-gap: 30px; }

	/* 참가신청 배너 */
	.story_cta { margin-top: 56px; padding: 34px 40px; gap: 28px; }
	.story_cta p { font-size: 17px; }
	.story_cta .cta_btn { padding: 12px 14px 12px 26px; font-size: 17px; gap: 12px; }
	.story_cta .cta_btn .ico { width: 30px; height: 30px; }

	.sub_title { font-size: 30px; margin-bottom: 40px; }

	.sub_con_title { font-size: 24px; }

	.con + .sub_con_title { margin-top: 60px; }
}

@media all and (max-width: 768px) {

	/* 프로그램 — 두 칸을 그대로 두면 한 칸이 170px 남짓이라
	   사진도 글도 다 뭉개집니다. 한 칸씩 세로로 쌓습니다. */
	.program_page .pg_lead { margin-bottom: 28px; font-size: 24px; }
	.program_page .pg_lead .ico { margin-right: 8px; }
	.program_page .pg_list { grid-template-columns: 1fr; gap: 26px; }
	.program_page .pg_card { border-radius: 16px; }
	.program_page .pg_head { padding: 12px 14px; font-size: 20px; }
	.program_page .pg_body { padding: 20px 16px 26px; }
	.program_page .pg_pic { border-radius: 12px; }
	.program_page .pg_tit { margin-top: 18px; font-size: 19px; }
	.program_page .pg_txt { margin-top: 10px; font-size: 15px; }

	/* 그림 안 안내는 alt 로 읽히므로, 좁은 화면에서 줄바꿈이 어색해지지 않게
	   설명문의 <br> 은 그대로 두되 글자만 줄입니다. */

	/* 기념품 */
	.gift_page .gift_group { padding: 30px 16px; }
	.gift_page .gift_group + .gift_group { margin-top: 30px; }
	.gift_page .group_title { gap: 6px; margin-bottom: 22px; font-size: 24px; }
	.gift_page .snack_card { padding: 22px 16px; border-radius: 12px; }
	.gift_page .gift_group > .gift_fig + .gift_fig,
	.gift_page .gift_grid { margin-top: 20px; }
	.gift_page .gift_grid { gap: 20px 12px; }
	.gift_page .gift_fig figcaption { margin-top: 12px; font-size: 16px; }
	.gift_page .gift_note { font-size: 13px; }
	.gift_page .unit { margin-top: 20px; font-size: 13px; }
	.gift_page .gift_table { font-size: 13px; }
	.gift_page .gift_table th,
	.gift_page .gift_table td { padding: 9px 5px; }

	.gift_page .snack_list { --snack-gap: 14px; gap: 22px var(--snack-gap); }
	.gift_page .snack_list .pic { height: 90px; }
	.gift_page .snack_list .pic img { max-height: 90px; }
	.gift_page .snack_list .name { font-size: 14px; }
	.gift_page .snack_list .name small { font-size: 13px; }
	.gift_page .gift_foot { margin-top: 26px; font-size: 14px; }

	/* ============================================================
	 *  서브페이지 섹션 위아래 여백 — 여기 한곳에서 통일합니다.
	 *  값을 바꾸려면 아래 두 변수만 고치세요. 페이지별로 따로 잡지 마세요.
	 *
	 *    --sec-mo-first : 제목(.sub_visual) 바로 아래 첫 블록의 위쪽
	 *                     제목 영역이 이미 아래 여백을 갖고 있어 좁게 잡습니다.
	 *    --sec-mo       : 그 밖의 모든 블록 위아래 공통값
	 * ============================================================ */
	:root {
		--sec-mo-first: 20px;
		--sec-mo:       60px;
	}

	/* 일반 서브페이지 (약관·유의사항·대회요강·코스도·이벤트·게시판 등) */
	.sec_pd,
	.sec_pd.sub { padding: var(--sec-mo-first) 0 var(--sec-mo); }

	/* 대회스토리 — 인트로 섹션 뒤에 오는 블록이라 위아래를 같게.
	   (넓은 화면용 120px 규칙을 이 폭에서만 덮어씁니다) */
	.story_page .sec_pd.sub { padding: var(--sec-mo) 0; }

	/* 푸르메재단 — 전체폭 색 블록들 */
	.purme_page .pm_sec,
	.purme_page .pm_sec.blue,
	.purme_page .pm_cta { padding: var(--sec-mo) 0; }

	.purme_page .pm_sec:first-child { padding-top: var(--sec-mo-first); }

	/* 넥슨 히어로 30 */
	.hero_page .hero_top { padding: var(--sec-mo-first) 0 var(--sec-mo); }
	.hero_page .hero_fund { padding: var(--sec-mo) 0; }


	/* 좁은 화면에서는 줄맞춤용 줄바꿈을 없애고 글이 자연스럽게 흐르게 합니다.
	   (꼭 줄을 나눠야 하는 곳은 class 없는 <br> 을 그대로 씁니다) */
	.pc_br { display: none; }

	/* 드림팀 — 세로형 그림(720x1366)으로 바뀝니다.
	   ⚠ 이 폭은 info/index01.php 의 <source media="(max-width: 768px)"> 와 같아야 합니다.
	     한쪽만 바꾸면 상자 비율과 그림 비율이 어긋나 잘리거나 여백이 생깁니다. */
	.story_team .team_slide { aspect-ratio: 720 / 1366; }
	.story_team .team_dots { bottom: 16px; }

	/* 푸르메재단 — 2단으로는 글이 너무 좁아져서 사진을 위로 올립니다.
	   .rev 도 row-reverse 를 풀어 사진이 먼저 오게 합니다.
	   (위아래 여백은 이 블록 맨 위 "섹션 위아래 여백"에서 함께 잡습니다) */
	.purme_page .pm_row,
	.purme_page .pm_row.rev {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
	}
	.purme_page .container {
		padding: 0 20px;
	}

	.purme_page .pm_img { flex: none; width: 100%; }
	.purme_page .pm_txt h2 { font-size: 22px; text-align: center; }
	.purme_page .pm_txt p { font-size: 14px; line-height: 1.8; text-align: center; }
	.purme_page .pm_txt .note { font-size: 14px; }
	.purme_page .pm_sec.blue .eyebrow { font-size: 16px; }
	/* 버튼은 맨 아래 정기기부 버튼처럼 가운데로 놓습니다.
	   .pm_txt 에 text-align:center 를 주면 본문 글까지 가운데로 몰리므로,
	   버튼만 fit-content 폭으로 잡고 좌우 margin 을 auto 로 둡니다. */
	.purme_page .pm_btn {
		display: flex;
		width: fit-content;
		margin: 20px auto 0;
		gap: 16px;
		padding: 11px 20px;
		font-size: 15px;
	}
	.purme_page .pm_cta .cta_img { margin-bottom: 30px; }
	.purme_page .pm_cta h2 { margin-bottom: 18px; font-size: 21px; }
	.purme_page .pm_cta p { font-size: 14px; line-height: 1.8; }
	.purme_page .pm_cta p + p { margin-top: 20px; }
	.purme_page .cta_btn { margin-top: 26px; gap: 16px; padding: 9px 10px 9px 22px; font-size: 15px; }
	.purme_page .cta_btn .ico { width: 28px; height: 28px; }
	.purme_page .cta_btn .ico svg { width: 13px; height: 13px; }

	/* 넥슨 히어로 30 */
	.sub_visual .sub_lead { margin-bottom: 0; font-size: 15px; }
	.hero_page .hero_logo { margin-bottom: 30px; }
	.hero_page .logo_marquee { --lg-gap: 40px; --lg-time: 45s; margin-top: 44px; }
	.hero_page .logo_list img { max-height: 56px; }

	/* 2단으로는 글이 너무 좁아져서 로고를 위로 올립니다.
	   row-reverse 를 풀어야 마크업 순서대로 로고가 먼저 옵니다. */
	.hero_page .hero_fund .container {
		flex-direction: column;
		align-items: center;
		gap: 34px;
	}

	.hero_page .fund_logo { flex: none; text-align: center; }
	.hero_page .fund_logo img { width: 260px; margin: 0 auto; margin-left: 80px; }
	.hero_page .fund_btn { margin-top: 20px; gap: 16px; padding: 11px 20px; font-size: 15px; width: 220px; }
	.hero_page .fund_txt { width: 100%; }
	.hero_page .fund_txt h2 { font-size: 26px; text-align: center; }
	.hero_page .fund_txt p { margin-bottom: 20px; font-size: 14px; line-height: 1.8; text-align: center; }

	.guide_page .guide_wrap > p { margin-bottom: 24px; font-size: 15px; line-height: 1.85; }
	.guide_page .guide_wrap > p.lead { margin-bottom: 28px; font-size: 16px; }
	.guide_page .acc_box { margin-bottom: 28px; padding: 20px 16px; border-radius: 12px; }
	.guide_page .acc_box .acc { font-size: 17px; }
	.guide_page .acc_box .acc_note { margin-top: 10px; font-size: 14px; }
	.guide_page .guide_btn { margin-top: 34px; }
	.guide_page .apply_btn { gap: 18px; padding: 13px 26px; font-size: 17px; }

	/* 이벤트 */
	.event_page .ev_group + .ev_group { margin-top: 60px; }
	.event_page .sec_head h2 { gap: 12px; font-size: 19px; }
	.event_page .sec_head .num { font-size: 13px; }
	.event_page .sec_note { margin-top: 12px; }
	.event_page .sec_note > li { font-size: 14px; }
	.event_page .ev_card { margin-top: 22px; padding: 34px 20px; border-radius: 16px; }
	.event_page .ev_card > h3 { font-size: 24px; }
	.event_page .ev_card > .lead { margin-top: 10px; font-size: 16px; }
	.event_page .gift_list { gap: 16px; margin-top: 28px; }
	.event_page .gift_list .name { margin-top: 14px; font-size: 14px; }
	.event_page .ev_card + .ev_card { margin-top: 22px; }
	.event_page .ev_msg { margin-top: 22px;}
	.event_page .ev_msg p { font-size: 14px; line-height: 1.7; }
	.event_page .prize_list { gap: 8px; margin-top: 28px; }
	.event_page .prize_list > li { padding: 20px 8px; border-radius: 12px; }
	.event_page .prize_list .rank { padding: 6px 8px; font-size: 13px; border-radius: 6px; }
	.event_page .prize_thumb { height: 110px; margin: 14px 0 10px; }
	.event_page .prize_list .name { font-size: 13px; }
	.event_page .prize_list .name .sub { font-size: 12px; }
	.event_page .ev_info { margin-top: 20px; padding: 20px 16px; border-radius: 12px; }
	.event_page .ev_info ul + h4 { margin-top: 20px; }
	.event_page .ev_info h4 { font-size: 15px; }
	.event_page ul.dot > li { padding-left: 12px; font-size: 14px; line-height: 1.7; }
	.event_page ul.dot > li::before { top: .68em; left: 1px; width: 3px; height: 3px; }
	.event_page .ev_card > h3 { gap: 7px; }
	.event_page .ev_card > h3 .ico { height: 22px; }

	/* SNS — 2단으로는 글이 너무 좁아져서 이미지를 위로 올립니다 */
	.event_page .sns_wrap {
		flex-direction: column;
		align-items: center;
		gap: 26px;
		margin-top: 24px;
	}

	.event_page .sns_img { flex: none; width: 100%; max-width: 300px; }
	.event_page .sns_txt { width: 100%; }
	.event_page .sns_txt .tag { font-size: 14px; }
	.event_page .sns_txt .head { font-size: 14px; }
	.event_page .sns_txt .head b { font-size: 20px; }
	.event_page .sns_txt .head span { font-size: 20px; }
	.event_page .sns_how { margin-top: 18px; padding: 18px 16px; border-radius: 10px; }
	.event_page .sns_how h4 { font-size: 15px; margin-bottom: 10px; }
	.event_page .sns_how ol > li { padding-left: 18px; font-size: 14px; line-height: 1.7; }
	.event_page .sns_how .ex { padding-left: 10px; }
	.event_page .sns_note { margin-top: 12px; }
	.event_page .sns_note > li { font-size: 13px; }
	.event_page .sns_how ol > li::before {
		font-size: 11px;
		width: 16px;
		height: 16px;
	}

	/* 코스도 — 원본이 1400x477(약 2.9:1)이라 폭에 맞춰 줄이면 높이가 110px 남짓이 되어
	   지명·거리 표기를 읽을 수 없습니다. 높이를 고정하고 가로로 넘겨 보게 합니다. */
	.course_page .course_item + .course_item { margin-top: 60px; }
	.course_page .course_label { min-width: 140px; margin-bottom: 22px; padding: 10px 24px; font-size: 19px; }

	.course_page .course_wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.course_page .course_map { width: max-content; }

	.course_page .course_map img {
		width: auto;
		max-width: none;
		height: 240px;
	}

	.course_page .course_route { margin-top: 26px; }
	.course_page .course_route p { font-size: 16px; }
	.course_page .course_route span { margin: 0 3px; }
	.course_page .mt40 .t_center {font-size: 14px;}

	/* 약관 */
	.terms_page .terms_lead { margin-bottom: 30px; padding-bottom: 18px; font-size: 14px; }
	.terms_page .art { margin-bottom: 26px; }
	.terms_page .art > h2 { margin-bottom: 10px; font-size: 16px; }
	.terms_page .art > p,
	.terms_page .terms_foot > p,
	.terms_page ol.num > li { font-size: 14px; line-height: 1.75; }
	.terms_page ol.num > li { padding-left: 22px; }
	.terms_page ol.sub > li { padding-left: 38px; font-size: 13px; }
	.terms_page ul.dash > li { padding-left: 13px; font-size: 13px; }
	.terms_page ul.mk { --mk-w: 22px; }
	.terms_page ul.mk > li { font-size: 13px; line-height: 1.75; }
	.terms_page .art h3 { margin-top: 18px; font-size: 15px; }
	.terms_page .art h4 { font-size: 14px; }
	.terms_page .terms_table { min-width: 560px; }
	.terms_page .terms_table th,
	.terms_page .terms_table td { padding: 10px 10px; font-size: 13px; }
	.terms_page .terms_table ul.dash > li { font-size: 13px; }
	.terms_page .note { font-size: 13px; }
	.terms_page .terms_foot { margin-top: 36px; padding-top: 22px; }


	/* 유의사항 */
	.notice_page .notice_list > li { margin-bottom: 10px; padding-left: 12px; }
	.notice_page .notice_list > li::before { top: .68em; width: 3px; height: 3px; }
	.notice_page .sub_con_title em { margin-right: 7px; }
	.notice_page .notice_table th,
	.notice_page .notice_table td { padding: 10px 8px; font-size: 13px; }


	/* 대회요강 */
	.rally_lead { margin-bottom: 40px; }
	.rally_lead h2 { font-size: 19px; }
	.rally_lead p { font-size: 14px; }
	.rally_lead .lead_btn { margin-top: 22px; padding: 11px 22px; gap: 16px; font-size: 15px; }
	.rally_lead .lead_btn svg { width: 13px; height: 13px; }

	.rally_table th { width: 88px; padding: 14px 6px; font-size: 13px; }
	.rally_table td { padding: 14px 14px; font-size: 14px; }
	.rally_table td small { margin-top: 8px; font-size: 12px; }
	.rally_table td.spon .spon_row { gap: 10px 14px; }
	.rally_table td.spon img { max-height: 30px; }

	:root { --sub-visual-gap: 54px; }

	.sub_visual { padding-bottom: 34px; }
	.sub_visual .sub_visual_txt h1 { font-size: 30px; }
	.sub_path { margin-bottom: 12px; font-size: 13px; }
	.sub_path > * + *::before { margin: 0 8px 2px; }

	/* 꿈 카드 */
	.story_dream { --dream-col-gap: 16px; --dream-row-gap: 24px; }
	.story_dream .dream_list .pic { margin-bottom: 14px; border-radius: 10px; }
	.story_dream .dream_list .name { margin-bottom: 10px; padding: 5px 16px; font-size: 14px; }
	.story_dream .dream_list p { font-size: 14px; }
	.story_dream .dream_note { margin-top: 14px; font-size: 12px; }
	.story_dream .dream_list > li {
		padding: 10px 10px 20px;
	}
	.story_dream .dream_list .name small {
		font-size: 14px;
	}

	/* 참가신청 배너 — 좁은 화면에서는 문구 아래에 버튼을 놓고 가운데로 */
	.story_cta {
		flex-direction: column;
		align-items: center;
		gap: 22px;
		margin-top: 40px;
		padding: 30px 24px;
		/* 세로로 쌓이면 박스가 거의 정사각형이라, 완전 알약(999px)으로 두면
		   곡선이 글자 영역을 파고듭니다. 이 구간만 둥근 사각형으로 둡니다. */
		border-radius: 26px;
		text-align: center;
	}

	.story_cta p { font-size: 15px; }
	.story_cta .cta_btn { padding: 11px 12px 11px 22px; font-size: 15px; gap: 60px; }
	.story_cta .cta_btn .ico { width: 27px; height: 27px; }
	.story_cta .cta_btn .ico svg { width: 14px; height: 14px; }

	/* (.sec_pd 위아래 여백은 이 블록 맨 위 "섹션 위아래 여백"에서 함께 잡습니다) */
	.sec_pd .container { padding-left: 20px; padding-right: 20px; }

	.sub_title { font-size: 24px; margin-bottom: 30px; }

	.sub_con_title { font-size: 20px; margin-bottom: 16px; }

	.con { font-size: 14px; }

	.con + .sub_con_title { margin-top: 45px; }

	/* 참가신청 */
	.apply_form .layer_box2 {
		top: 50%;
	}
}

@media all and (max-width: 480px) {
	:root { --sub-visual-gap: 44px; }

	/* 프로그램 */
	.program_page .pg_lead { font-size: 20px; }
	.program_page .pg_head { font-size: 18px; }
	.program_page .pg_tit { font-size: 18px; }
	.program_page .pg_txt { font-size: 14px; margin-top: 5px; }

	/* 기념품 */
	.gift_page .gift_group { padding: 24px 12px; }
	.gift_page .group_title { font-size: 20px; }
	.gift_page .snack_card { padding: 18px 10px; }
	.gift_page .gift_fig figcaption { font-size: 15px; }
	.gift_page .gift_table { font-size: 12px; }
	.gift_page .gift_table th,
	.gift_page .gift_table td { padding: 8px 3px; }
	/* 480px 아래에서는 세 칸이면 한 칸이 100px 남짓이라 이름이 세 줄로 깨집니다 */
	.gift_page .snack_list { --snack-cols: 2; --snack-gap: 12px; gap: 22px var(--snack-gap); }
	.gift_page .snack_list .name { font-size: 13px; }
	.gift_page .gift_foot { font-size: 13px; }

	.sub_visual .sub_visual_txt h1 { font-size: 26px; }
	.sub_path { font-size: 12px; }

	/* 코스도 */
	.course_page .course_map img { height: 210px; }
	.course_page .course_route p { font-size: 15px; }

	/* 이벤트 — 동그라미가 3개 나란히 있기엔 너무 작아져서 세로로 쌓습니다 */
	.event_page .gift_list {
		flex-direction: column;
		align-items: center;
		gap: 28px;
	}

	.event_page .gift_list > li { width: 220px; }

	/* 시상 카드도 3장이 나란히 있기엔 너무 좁아져서 세로로 쌓습니다 */
	.event_page .prize_list {
		flex-direction: column;
		gap: 14px;
	}

	.event_page .prize_list > li { padding: 24px 16px; }
	.event_page .prize_list .rank { font-size: 15px; }
	.event_page .prize_thumb { height: 150px; }
	.event_page .prize_list .name { font-size: 15px; }
}