/* ===== Font ===== */
@font-face {
  font-family: 'Paperlogy';
  src: url('/fonts/Paperlogy-5Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('/fonts/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Reset & tokens ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #e6007e;
  --secondary: #1b2756;
  --program-bg: #384180;
  --light-blue: #eef5ff;
  --text: #333333;
  --dark: #111111;
  --header-h: 64px;
}
html {
  scroll-behavior: smooth;
  scrollbar-color: #38bdf8 #f1f1f1;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #38bdf8; border-radius: 999px; border: 2px solid #f1f1f1; }
::-webkit-scrollbar-thumb:hover { background: #0ea5e9; }
body {
  font-family: 'Paperlogy', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', sans-serif;
  color: var(--text);
  line-height: 1.5;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  max-width: 1920px;
  margin: auto;
}
body.transparent-header { max-width: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ===== Header / Nav ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
}
/* 메인페이지 전용 — 헤더가 배경 이미지 위에 투명하게 떠 있고, 그 아래로 이미지가 화면 맨 위부터 시작한다 */
body.transparent-header .site-header {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: none;
}
.header-inner {
  width: 100%;
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: flex-start; gap: 24px; flex-wrap: wrap;
  padding: 10px 20px;
}
.logo { display: flex; align-items: center; height: 58px; }
.logo img { height: 100%; width: auto; }
@media (min-width: 901px) {
  .site-header { --header-h: 84px; } /* 웹(데스크톱)에서만 로고 1.5배 확대, 모바일은 유지 */
  .logo { height: 88px; }
}

/* 카테고리 내비게이션 — 로고와 같은 줄, 남는 공간에서 오른쪽 정렬. 클릭하면 그 아래로 하위 목록이 뜬다 */
.site-nav { flex: 1; }
.nav-list {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 8px 36px;
}
/* 너비 측정용 복제본 — 화면 밖에 항상 한 줄로 띄워서, 카테고리 전체가 필요로 하는 실제 너비를 잰다.
   .site-nav 자손 선택자로 걸린 글씨 크기 등을 그대로 적용받도록 .site-nav 안에 넣어서 잰다 */
.nav-ruler-host { position: absolute; top: -9999px; left: -9999px; visibility: hidden; pointer-events: none; }
.nav-ruler-host .nav-ruler { flex-wrap: nowrap !important; }
.site-nav .nav-item { position: relative; text-align: center; }
.site-nav .nav-toplevel {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 21px; font-weight: 700; line-height: 1.4;
  background: none; border: 0; margin: 0; cursor: pointer;
  color: #4c1d95; padding: 8px 4px; vertical-align: middle;
}
.site-nav .nav-toplevel[aria-current="page"] { color: var(--primary); }
.site-nav .nav-toplevel:hover { color: var(--primary); }

/* 카테고리 맨 오른쪽 참가신청 버튼 이미지 */
.nav-apply-btn { display: flex; align-items: center; height: 60px; margin-left: 8px; flex: none; }
.nav-apply-btn img { height: 100%; width: auto; }
.nav-apply-btn:hover { opacity: .88; }

/* 하위 목록은 아래 콘텐츠를 밀어내지 않도록 떠 있는 형태로 표시 — 카테고리 줄 자체는 움직이지 않는다 */
.site-nav .nav-dropdown { display: none; }
.site-nav .nav-item.open .nav-dropdown,
.site-nav.hoverable .nav-item.has-dropdown:hover .nav-dropdown {
  display: flex; flex-direction: column; align-items: stretch;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 0; min-width: 150px;
  background: #fff; border: 1px solid #eaeaea; border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12); padding: 12px 0 8px; z-index: 20;
}
/* 버튼과 하위목록 사이에 빈틈이 없어야 마우스가 그 사이를 지날 때 목록이 안 사라진다 */
.site-nav .nav-item.has-dropdown { padding-bottom: 6px; margin-bottom: -6px; }
.site-nav .nav-dropdown a {
  display: block; padding: 10px 16px; font-size: 15px; font-weight: 500; color: var(--muted, #6b7280);
  white-space: nowrap; text-align: center;
}
.site-nav .nav-dropdown a:hover,
.site-nav .nav-dropdown a[aria-current="page"] { background: #f9f9f9; color: var(--primary); font-weight: 700; }

/* 햄버거 버튼 — 카테고리 줄이 다 들어갈 때는 숨기고, 하나라도 접힐 만큼 좁아지면(JS가 판단) 보인다 */
.nav-toggle {
  display: none; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--primary); border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }
.nav-drawer-head { display: none; }
.nav-backdrop { display: none; }

/* 카테고리 줄이 한 줄에 다 안 들어가는 순간(JS가 .nav-compact를 붙임) 카테고리 줄 대신 햄버거 버튼만 보이고,
   누르면 왼쪽에서 카테고리 목록판이 나온다. 참가신청 버튼은 햄버거 왼쪽에 그대로 남는다. */
.site-header.nav-compact .nav-toggle { display: flex; order: 2; }
.site-header.nav-compact .nav-apply-btn { order: 1; margin-left: auto; }
/* 모바일(카테고리가 햄버거로 접힌 상태)에서는 로고·참가신청·햄버거를 한 줄에 유지 — 줄바꿈되면 참가신청이 로고 아래로 내려간다 */
@media (max-width: 700px) {
  .site-header.nav-compact .header-inner { flex-wrap: nowrap; gap: 8px; }
  .site-header.nav-compact .logo { height: 50px; }
  .site-header.nav-compact .nav-apply-btn { height: 42px; }
}

.site-header.nav-compact .site-nav {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
  width: min(320px, 84vw); background: #fff;
  box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
  transform: translateX(-100%);
  overflow-y: auto;
}
/* 줄이는(리사이즈) 도중 화면 폭 기준을 넘어 카테고리 줄 → 서랍 모드로 막 바뀌는 순간에는
   애니메이션 없이 바로 화면 밖에 자리잡아야 한다(없으면 잠깐 나타났다 슬라이드 아웃되는 것처럼 보임).
   실제로 사용자가 햄버거를 눌러 열고 닫을 때만 JS가 transition을 켜준다. */
.site-header.nav-compact .site-nav.nav-transition { transition: transform .25s ease; }
.site-header.nav-compact .site-nav.nav-open { transform: translateX(0); }

.site-header.nav-compact .nav-drawer-head { display: flex; justify-content: flex-end; padding: 8px 12px; }
.nav-close { background: none; border: 0; font-size: 30px; line-height: 1; color: var(--text); cursor: pointer; padding: 6px 10px; }

.site-header.nav-compact .site-nav .nav-list { display: block; gap: 0; }
.site-header.nav-compact .site-nav .nav-item { width: auto; text-align: left; border-bottom: 1px solid #eee; }
.site-header.nav-compact .site-nav .nav-toplevel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 16px 20px; font-size: 17px;
}
.site-header.nav-compact .nav-toplevel-icon { position: relative; width: 14px; height: 14px; flex: none; }
.site-header.nav-compact .nav-toplevel-icon::before,
.site-header.nav-compact .nav-toplevel-icon::after {
  content: ""; position: absolute; background: var(--text); border-radius: 1px;
}
.site-header.nav-compact .nav-toplevel-icon::before { left: 0; top: 6px; width: 14px; height: 2px; }
.site-header.nav-compact .nav-toplevel-icon::after { left: 6px; top: 0; width: 2px; height: 14px; transition: transform .2s ease; }
.site-header.nav-compact .nav-item.open .nav-toplevel-icon::after { transform: scaleY(0); }

.site-header.nav-compact .site-nav .nav-item.has-dropdown { padding-bottom: 0; margin-bottom: 0; }
.site-header.nav-compact .site-nav .nav-item.open .nav-dropdown,
.site-header.nav-compact .site-nav.hoverable .nav-item.has-dropdown:hover .nav-dropdown {
  position: static; transform: none; display: block;
  box-shadow: none; border: 0; border-radius: 0; margin: 0;
  background: #f9fafb; padding: 4px 0 10px;
}
.site-header.nav-compact .site-nav .nav-dropdown a { text-align: left; padding: 12px 20px 12px 32px; }

.site-header.nav-compact .nav-backdrop.show { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .4); }

body.nav-open-lock { overflow: hidden; }

/* ===== Hero ===== */
.hero { text-align: center; padding: 24px 0 40px; position: relative; }
.main-title { display: block; width: 100%; height: auto; margin: 0 auto 16px; } /* 콘텐츠 영역(최대 1200px) 가로 꽉 채움 */

/* 메인페이지 전용 — 헤더 바로 밑에 여백 없이 붙고, 1200px 제한 없이 화면 가로 전체(최대 1920px)를 꽉 채운다 */
.hero-full-bleed { max-width: none; width: 100%; margin: 0; padding: 0; }
.hero-full-bleed .main-title {
  margin-bottom: 0; position: relative; z-index: 2; /* 겹치는 부분에서 두번째 배경 이미지보다 항상 위에 그려지게 */
}

.hero-image-wrap { position: relative; }

/* 첫번째 배경 이미지 밑에 이어붙이는 두번째 배경 — 아래 이어지는 소개/공지사항/사진영상 섹션까지 전부
   이 이미지 위에 얹혀서 보이도록, 이미지를 배경으로 깔고 그 위에 콘텐츠를 쌓는 방식(hero-overlay와 동일한 원리) */
/* 사진 맨 아래쪽과 같은 색을 배경색으로 깔아둬서, 내용이 사진 원본 비율보다 길어지면
   사진을 억지로 늘리거나 잘라내지 않고 이 색으로 자연스럽게 이어지게 한다 */
.page-bg-wrap {
  position: relative; margin-top: 0; min-height: calc(100vw * 1674 / 940); background: rgb(124, 210, 142);
  display: flex; flex-direction: column;
}
.page-bg-img {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 100%; height: auto;
}
.page-bg-wrap > section { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }

/* 어둡게 깐 배경 이미지 위에서는 남색/회색 글씨 대신 흰색 + 그림자로 확실하게 띄운다 */
.page-bg-wrap h2, .page-bg-wrap .page-header h1 { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.page-bg-wrap .page-header p { color: #fff; opacity: .9; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }

/* 사진 위에서도 기존 흰 배경 콘텐츠(표, 안내 목록 등)를 그대로 읽기 쉽게 보여주기 위한 흰 카드 */
.on-photo-card {
  background: #fff; border-radius: 24px; padding: 40px 32px;
  max-width: 1160px; margin: 40px auto; box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
}
.on-photo-card h2 { color: var(--secondary); text-shadow: none; }
.page-bg-wrap > .draw-run-overview-card,
.page-bg-wrap > .draw-run-program-card,
.page-bg-wrap > .accept-guide,
.page-bg-wrap > .event-list,
.page-bg-wrap > .course-group-card { flex: none; }
.page-bg-wrap.accept-bg { min-height: 0; overflow: hidden; }
.page-bg-wrap.notice-bg, .page-bg-wrap.photo-bg { min-height: calc(100vh - var(--header-h, 64px)); overflow: hidden; }
.page-bg-wrap.directions-bg { min-height: 0; overflow: hidden; background: rgb(134, 207, 136); }
.notice-list, .page-bg-wrap > .notice-list,
.photo-gallery, .page-bg-wrap > .photo-gallery {
  width: 100%; min-height: 55vh;
  display: flex; flex-direction: column; justify-content: center;
}
.draw-run-overview-card { width: 100%; max-width: 1200px; padding: 48px 40px; background: #ffedd5; }
/* 이 페이지는 내용이 이미 충분히 길어서 사진 비율에 맞춘 최소 높이가 필요 없다 — 그 여백만큼 밑에 남던
   배경색 여분을 없앤다 */
.page-bg-wrap.draw-run-overview-bg { min-height: 0; overflow: hidden; }
/* 프로그램 안내 전용 배경 — 세로로 훨씬 긴 이미지(940×3346)라 이 페이지만 별도 비율로 최소 높이를 잡는다 */
.page-bg-wrap.draw-run-program-bg { min-height: 0; overflow: hidden; background: rgb(134, 207, 136); }
.site-bottom-logos.draw-run-overview-logo { padding-top: 0; margin-top: 40px; margin-bottom: 40px; }
.site-bottom-logos.draw-run-program-logo { padding-top: 0; margin-top: 64px; margin-bottom: 40px; }

/* 배경 이미지 위에 글씨를 얹는 페이지용 (예: 뽑기런 행사개요) — 내용이 배경 이미지 원래 비율보다 길어지면
   배경은 뒤에서 그 길이만큼 늘어나서 채우고(object-fit: cover), 글씨/이미지 내용은 문서 흐름을 따라 아래로 계속
   이어진다. (예전엔 글씨 부분이 position:absolute라서 내용이 많아지면 화면 스크롤 영역 밖으로 잘렸었음) */
.hero-overlay-text {
  position: relative; z-index: 1;
  width: 100%; padding: 3% 20px 60px; text-align: center;
}
.page-bg-wrap > .hero-overlay-text { flex: none; }
/* 서브페이지들은 첫번째 배경 이미지 없이 이 배경 이미지가 페이지 맨 위(투명 헤더 바로 밑)부터 시작하므로,
   내용이 떠 있는 헤더(로고/카테고리)와 겹치지 않도록 헤더 높이만큼 위쪽 여백을 띄운다 */
.page-bg-wrap > .hero-overlay-text,
.page-bg-wrap > .page-header {
  padding-top: 140px; /* JS가 실제 헤더 높이를 재서 정확한 값으로 곧 덮어씀 */
}
.hero-overlay-center { justify-content: center; }
.hero-overlay-label {
  font-size: 28px; font-weight: 800; color: #0a3d8f;
  text-shadow: 0 2px 8px rgba(255,255,255,.5);
  margin-bottom: 14px;
}
.hero-overlay-label-white { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.hero-overlay-label.hero-overlay-label-white,
.page-header h1.hero-overlay-label-white { font-size: 56px; font-weight: 800; margin: 0 0 14px; }
@media (max-width: 700px) {
  .hero-overlay-label.hero-overlay-label-white,
  .page-header h1.hero-overlay-label-white { font-size: 40px; }
}
.notice-page-subtitle { font-size: 22px; }
@media (max-width: 700px) { .notice-page-subtitle { font-size: 17px; } }

/* 뽑기런 서브페이지 이동용 가로 알약 버튼 4개 */
.sub-tabs {
  display: flex; gap: 16px; max-width: 900px; width: 100%;
  margin: 24px auto 8px; flex-wrap: wrap; justify-content: center;
}
.sub-tab {
  flex: 1; min-width: 120px; text-align: center;
  padding: 12px 10px; border-radius: 999px;
  background: rgba(30, 86, 49, .85); color: #fff;
  font-weight: 700; font-size: 19px; text-decoration: none;
  border: 2px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.sub-tab:hover { background: rgba(30, 86, 49, 1); }
.sub-tab.active { background: #e6007e; border-color: #fff; }
@media (max-width: 600px) {
  .sub-tabs { gap: 10px; }
  .sub-tab { min-width: calc(50% - 5px); font-size: 16px; padding: 11px 8px; }
}

.hero-overlay-title {
  font-size: 42px; font-weight: 800; line-height: 1.35;
  color: #fff;
  -webkit-text-stroke: 3px #0b5ed7;
  paint-order: stroke fill;
  text-shadow: 0 4px 12px rgba(0,0,0,.25);
}
@media (max-width: 700px) {
  .hero-overlay-label { font-size: 20px; margin-bottom: 8px; }
  .hero-overlay-title { font-size: 24px; -webkit-text-stroke: 2px #0b5ed7; }
}
.hero-overlay-title-solid {
  font-size: 52px; font-weight: 800; line-height: 1.4;
  color: #0a3d8f; margin-top: 160px;
  text-shadow: 0 2px 10px rgba(255,255,255,.6);
}
@media (max-width: 700px) {
  .hero-overlay-title-solid { font-size: 30px; }
}
.hero-overlay-feature {
  display: block; margin: 24px auto 0;
  width: calc(100% - 120px); height: auto;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
@media (max-width: 700px) {
  .hero-overlay-feature { width: calc(100% - 40px); margin-top: 14px; border-radius: 16px; }
}
.hero-overlay-feature-bordered { border: 8px solid #fff; }
@media (max-width: 700px) {
  .hero-overlay-feature-bordered { border-width: 5px; }
}
.hero-sub { font-size: 20px; font-weight: 700; color: var(--secondary); padding: 0 20px; }

/* 메인 이미지(타이틀/태그라인 바로 밑 하늘 부분) 위에 얹는 참가신청 버튼 — top%는 이미지 비율 기준이라 화면 폭이 바뀌어도 같은 자리에 붙는다 */
.hero-mini-cta {
  position: absolute; left: 50%; top: 41%; transform: translateX(-50%);
  display: inline-block; white-space: nowrap;
  padding: 17px 76px;
  border-radius: 999px;
  background: #ec4899;
  color: #fff;
  font-size: 27px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(236, 72, 153, .35);
  transition: transform .15s ease, box-shadow .15s ease;
  z-index: 3;
}
.hero-mini-cta:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 8px 20px rgba(236, 72, 153, .45); }
@media (max-width: 700px) {
  .hero-mini-cta { font-size: 20px; padding: 12px 48px; }
}
.char-runners, .char-seagull { display: none; } /* 데코 요소 — 데스크톱 대형 화면에서만 노출 예정 (레이아웃 미세조정 필요) */

/* ===== Sections (공통) ===== */
main > section, section.page-header, .page-bg-wrap > section {
  max-width: 1200px; margin: 0 auto; padding: 40px 20px;
}
section h2 { font-size: 27px; color: var(--secondary); margin-bottom: 20px; }
/* 소개 카드는 화면 폭에 따라 계속 늘고 줄게, 다른 섹션과 달리 1200px 제한을 두지 않는다
   (".page-bg-wrap > section"의 상세도(0,1,1)를 넘어서야 해서 태그+클래스로 지정) */
.page-bg-wrap > section.course-preview { max-width: none; }
.course-preview h2 { text-align: center; font-size: 40.5px; }
.section-intro {
  background: rgba(30, 86, 49, .82);
  color: #fff; font-size: 20px; line-height: 1.75;
  max-width: none; margin: 0 -20px 140px; padding: 40px 56px;
  border-radius: 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .4);
  column-count: 2; column-gap: 48px;
}
.section-intro p { margin-bottom: 16px; break-inside: avoid; }
@media (max-width: 800px) {
  .section-intro { column-count: 1; padding: 28px 22px; border-radius: 18px; }
}
.page-bg-wrap > section.course-preview { padding-top: 110px; }
.course-preview { padding-bottom: 24px; }

/* 프로그램 소개 카드 4개 */
.program-subtitle {
  text-align: center; color: #fff; font-size: 20px; line-height: 1.6; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5); margin-bottom: 32px;
}
.program-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 280px)); gap: 24px;
  justify-content: center;
}
@media (max-width: 900px) {
  .program-grid { grid-template-columns: repeat(2, minmax(0, 280px)); }
}
@media (max-width: 520px) {
  .program-grid { grid-template-columns: minmax(0, 280px); }
}
.program-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  justify-content: space-between;
  background: #ffedd5; border-radius: 20px; padding: 48px 20px 36px;
  aspect-ratio: 3 / 5;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  color: var(--text); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.program-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, .25); }
@media (max-width: 520px) {
  .program-card { aspect-ratio: auto; }
}
.program-icon {
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: 50%; margin-bottom: 24px;
}
.program-icon-green { background: rgba(16, 185, 129, .14); }
.program-icon-pink { background: rgba(236, 72, 153, .14); }
.program-icon-blue { background: rgba(56, 189, 248, .14); }
.program-icon-orange { background: rgba(245, 158, 11, .14); }
.program-card h3 { font-size: 22px; font-weight: 800; color: var(--secondary); margin-bottom: 10px; }
.program-card p { font-size: 14px; color: var(--muted, #6b7280); line-height: 1.5; margin-bottom: 24px; }
.program-view-more {
  display: inline-block; width: 100%; padding: 14px 0; border-radius: 999px;
  color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .5px;
  transition: background .15s ease;
}
.program-card:hover .program-view-more { background: #000; }
.program-view-more-green { background: #10b981; }
.program-view-more-pink { background: #ec4899; }
.program-view-more-blue { background: #38bdf8; }
.program-view-more-orange { background: #f59e0b; }
/* 공지사항 미리보기 */
.notice-section {
  margin-top: 150px; width: 100%; max-width: 1192px; margin-left: auto; margin-right: auto;
  text-align: center;
}
.notice-section h2 { text-align: center; }
.notice-subtitle {
  color: #fff; font-size: 19px; font-weight: 700; opacity: .95; margin-bottom: 32px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.notice-list-new { border-top: 1px solid rgba(255, 255, 255, .35); text-align: left; }
.notice-list-new li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 4px; border-bottom: 1px solid rgba(255, 255, 255, .35);
  color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.notice-list-new li a { color: #fff; font-size: 19px; font-weight: 700; text-decoration: none; }
.notice-list-new li a:hover { text-decoration: underline; }
.notice-list-new .notice-date { flex: none; color: rgba(255, 255, 255, .85); font-size: 15px; font-weight: 600; }
.notice-list-new .notice-empty {
  justify-content: center; color: #fff; font-size: 18px; font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.notice-viewmore {
  display: inline-block; margin-top: 32px; padding: 14px 48px;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
  color: #fff; font-weight: 700; letter-spacing: .5px; text-decoration: none;
  transition: background .15s ease;
}
.notice-viewmore:hover { background: rgba(255, 255, 255, .15); }

/* 문의/SNS 카드 3개 */
.contact-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px;
  margin-top: 120px; width: 100%; max-width: 1192px; margin-left: auto; margin-right: auto;
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-card {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  justify-content: center; min-height: 320px;
  border-radius: 20px; padding: 32px 28px; text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, .25); }
.contact-card-phone { background: #fed7aa; color: #7c2d12; }
.contact-card-instagram { background: #fbcfe8; color: #86198f; align-items: center; text-align: center; }
.contact-card-youtube { background: #fecaca; color: #991b1b; align-items: center; text-align: center; }
.contact-icon {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%; margin-bottom: 20px;
  background: rgba(0, 0, 0, .06);
}
.contact-label { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.contact-phone { font-size: 32px; font-weight: 800; margin-bottom: 10px; }
.contact-hours { font-size: 18px; line-height: 1.6; opacity: .9; }
.contact-note { font-size: 15px; line-height: 1.7; opacity: .85; margin-top: 10px; }
.contact-title { font-size: 30px; font-weight: 800; margin-bottom: 8px; }
.contact-sub { font-size: 15px; margin-bottom: 24px; opacity: .9; }
.contact-handle {
  display: inline-block; color: #fff; font-weight: 800;
  padding: 12px 28px; border-radius: 999px; font-size: 16px;
}
.contact-card-instagram .contact-handle { background: #a21caf; }
.contact-card-youtube .contact-handle { background: #dc2626; }

.site-bottom-logos {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px;
  position: relative; z-index: 1; margin: auto auto 0; padding-top: 60px;
}
.site-bottom-logos img { display: block; width: 100%; max-width: 320px; height: auto; }
.site-bottom-logos .sports-logo-img { max-width: 260px; }
@media (max-width: 700px) {
  .site-bottom-logos { gap: 16px; }
  .site-bottom-logos img { max-width: 135px; }
  .site-bottom-logos .sports-logo-img { max-width: 110px; }
}

.notice-preview { padding-top: 24px; }
.more-link { display: inline-block; padding: 10px 4px; font-weight: 500; } /* 터치 타겟 최소 24px 확보 */
.page-header { width: 100%; text-align: center; padding-top: 48px; }
.page-header h1 { font-size: 34px; color: var(--secondary); margin: 8px 0; }
.page-header p { font-size: 18px; color: var(--muted, #6b7280); line-height: 1.6; }
.program-img {
  display: block; width: 100%; height: auto; margin: 24px 0 0;
}

/* ===== Program info / dl =====
   라벨(공원명)마다 길이가 제각각이라 옆으로 나란히 두면 뒤에 오는 내용이 줄마다 삐뚤빼뚤 시작돼 지저분해 보인다.
   그래서 "아이콘+제목"을 한 줄로, 내용은 그 아래 한 단 내려서 정리하고, 항목 사이는 구분선으로 분리한다. */
.program-info, .runbase-info dl { background: var(--light-blue); border-radius: 12px; padding: 4px 24px; }
.program-info > div, .runbase-info dl > div {
  padding: 18px 0; border-bottom: 1px solid rgba(27, 39, 86, .1);
}
.program-info > div:last-child, .runbase-info dl > div:last-child { border-bottom: none; }
.program-info div .sched-head, .runbase-info dl div .sched-head { display: flex; align-items: center; gap: 10px; }
.program-info div svg { flex-shrink: 0; }
.program-info dt, .runbase-info dt {
  font-weight: 700;
  font-size: var(--sched-label-size, 16px); color: var(--sched-label-color, var(--secondary));
} /* 원래 primary(핑크)였으나 연한 배경 위 대비율 4.1:1로 접근성 기준(4.5:1) 미달 → secondary로 교체 (기본값 기준) */
.program-info dd {
  margin-top: 6px; padding-left: 30px; line-height: 1.7;
  font-size: var(--sched-content-size, 16px); color: var(--sched-content-color, #1f2937);
}
/* 장소처럼 여러 항목이 연달아 나올 땐 한 줄로 쭉 나열하지 않고 2단으로 배치해 좌우 빈 공간을 줄인다 */
.program-info > .sched-grid { border-bottom: none; padding: 4px 0; }
.sched-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.sched-grid > div { padding: 14px 0; border-bottom: 1px solid rgba(27, 39, 86, .1); }
@media (max-width: 700px) {
  .sched-grid { grid-template-columns: 1fr; }
}
.park-list { display: grid; gap: 14px; list-style: none; }

/* ===== 운영 일정 상세 이미지(공원별 프로그램표) ===== */
.schedule-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.schedule-detail-grid img { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 700px) {
  .schedule-detail-grid { grid-template-columns: 1fr; }
}

/* ===== 참가자 준비물 및 유의사항 ===== */
.notice-box ul {
  font-size: var(--prec-size, 15px);
  letter-spacing: var(--prec-letter-spacing, 0px);
  line-height: var(--prec-line-height, 1.8);
}
.notice-box li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.notice-box li svg, .accept-guide li svg { flex-shrink: 0; }

/* ===== Cards / grids ===== */
.course-cards, .features ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.features ul { grid-template-columns: repeat(3, 1fr); }
.course-cards li, .features li {
  background: #eef3fb; border-radius: 12px; padding: 20px; overflow: hidden;
}
.course-cards li img { border-radius: 8px; margin-bottom: 12px; aspect-ratio: 16/10; object-fit: cover; }
@media (max-width: 700px) {
  .course-cards, .features ul { grid-template-columns: 1fr; }
}

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.photo-grid li a { display: block; background: #f8f9fa; border-radius: 10px; overflow: hidden; }
.photo-grid .thumb {
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  background: linear-gradient(135deg, var(--light-blue), #fff); /* 로딩 전/실패 시 대체 배경 */
}
.photo-grid .caption { display: block; padding: 10px 12px 4px; font-size: 14px; font-weight: 500; }
.photo-grid .date { display: block; padding: 0 12px 12px; font-size: 12px; color: #6b7280; } /* #9ca3af는 흰 배경에서 대비율 2.54:1로 미달 → 4.83:1로 통과하는 색으로 조정 */
@media (max-width: 700px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Notice list ===== */
.notice-list ul, ul.notice-list { border-top: 2px solid var(--secondary); }
.notice-list #notice-mount > p { text-align: center; }
.notice-item {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 12px;
  padding: 16px 4px; border-bottom: 1px solid #eaeaea; flex-wrap: wrap;
}
.notice-item a { font-weight: 500; }
.badge {
  display: inline-block; font-size: 12px; font-weight: 700; color: #ad0059; /* primary(#e6007e)는 이 배경 위에서 대비율 4.01:1로 미달 → 6.41:1로 통과하는 색으로 조정 */
  background: #fdeef5; border-radius: 999px; padding: 3px 10px;
}
.notice-item .date, .notice-item .hit, .notice-item .author { font-size: 13px; color: #6b7280; }
.empty-msg { text-align: center; padding: 60px 0; color: #6b7280; }

/* ===== 뽑기런 행사개요: 일시/장소/내용 + 표 ===== */
.draw-run-info { display: inline-block; padding-top: 0; padding-bottom: 8px; text-align: left; }
.draw-run-info p { font-size: 21px; line-height: 2; color: var(--text); }
.draw-run-info strong { color: var(--secondary); margin-right: 4px; }
.draw-run-table-wrap { overflow-x: auto; }
.draw-run-schedule-card { justify-content: center; }
/* 일정표 표 위 안내 이미지 — 표와 같은 폭, 비율 유지(세로도 같이 늘어남), 모서리 라운드, 표와 20px 간격 */
.draw-run-schedule-img { display: block; width: 100%; height: auto; border-radius: 16px; margin: 0 0 36px; }
.draw-run-schedule-heading { position: relative; z-index: 1; text-align: center; font-size: 38px; font-weight: 800; margin: 28px 0 20px; }
.draw-run-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px rgba(27, 39, 86, .12);
}
.draw-run-table th, .draw-run-table td {
  border-bottom: 1px solid rgba(27, 39, 86, .1); padding: 14px 16px; text-align: center; font-size: 19px;
}
.draw-run-table thead th { background: var(--secondary); color: #fff; font-weight: 700; border-bottom: none; }
.draw-run-table tbody tr:last-child td { border-bottom: none; }
.draw-run-table tbody tr:nth-child(even) { background: #fdf6ec; }

.draw-run-program-card, .page-bg-wrap > .draw-run-program-card {
  width: 100%; max-width: 920px; background-color: #ffedd5;
  background-image: repeating-linear-gradient(45deg, rgba(27, 39, 86, .05) 0, rgba(27, 39, 86, .05) 1px, transparent 1px, transparent 26px);
}
.draw-run-program-card h2 { margin-top: 32px; }
.draw-run-program-heading, .on-photo-card h2.draw-run-program-heading {
  font-size: 48px; font-weight: 800; line-height: 1.35; text-align: center;
  margin: 0 0 32px;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.draw-run-program-heading-text {
  background: linear-gradient(to right, #e6007e, #4a0f7a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.draw-run-program-heading-mascot { height: 90px; width: auto; }
@media (max-width: 600px) {
  .draw-run-program-heading-mascot { height: 56px; }
}
@media (max-width: 600px) {
  .draw-run-program-heading { font-size: 28px; gap: 8px; margin-bottom: 20px; }
}
.draw-run-event-block {
  position: relative; text-align: center; padding: 40px 0;
}
.draw-run-event-block:not(:last-child)::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 80%; height: 5px; border-radius: 999px;
  background: linear-gradient(to right, var(--primary), var(--secondary));
}
.draw-run-event-time {
  display: inline-block; background: var(--secondary); color: #fff;
  padding: 12px 32px; border-radius: 999px; font-size: 19px; font-weight: 700; margin-bottom: 20px;
}
.draw-run-event-title {
  display: table; background: #fff; color: var(--secondary);
  font-size: 26px; font-weight: 800; line-height: 1.4;
  padding: 14px 28px; border-radius: 16px; margin: 0 auto 28px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
.draw-run-event-photo {
  display: block; width: 100%; max-width: 720px; margin: 0 auto;
  aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
.draw-run-mc-bio-card {
  background: #fff; border-radius: 16px; padding: 24px 28px;
  max-width: 640px; margin: 24px auto 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
.draw-run-mc-bio { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.draw-run-mc-bio li {
  list-style: none; display: flex; align-items: flex-start; gap: 8px;
  flex: 0 1 calc(50% - 12px); font-size: 17px; line-height: 1.5; color: #333; text-align: left;
}
.draw-run-mc-bio li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
@media (max-width: 600px) {
  .draw-run-event-block { padding: 28px 0; }
  .draw-run-event-time { font-size: 16px; padding: 9px 24px; }
  .draw-run-event-title { font-size: 19px; padding: 10px 20px; border-radius: 12px; margin-bottom: 20px; }
  .draw-run-event-photo { max-width: 320px; }
  .draw-run-mc-bio-card { padding: 20px; }
  .draw-run-mc-bio { gap: 10px; }
  .draw-run-mc-bio li { flex: 1 1 100%; font-size: 15px; }
}

/* ===== Pagination ===== */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
.pagination a {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 14px; color: var(--text);
}
.pagination a.active { background: var(--primary); color: #fff; font-weight: 700; }

/* ===== 공지사항 검색바 / 구분선 / 새 페이지네이션 ===== */
.notice-search-bar { display: flex; justify-content: flex-end; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 4px; }
.notice-category-select {
  border: none; border-bottom: 1px solid #d5d8de; background: transparent;
  padding: 8px 22px 8px 2px; font-size: 15px; color: #333; cursor: pointer;
}
.notice-search-input-wrap {
  display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #d5d8de;
  padding: 6px 4px; min-width: 220px;
}
.notice-search-input-wrap input {
  border: none; outline: none; background: transparent; font-size: 15px; flex: 1; color: #333;
}
.notice-search-input-wrap button {
  border: none; background: none; cursor: pointer; display: flex; color: #333; padding: 0;
}
.notice-divider { border: none; border-top: 1px solid #e5e7eb; margin: 20px 0; }
.notice-pagination-new { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 8px 0; }
.notice-pager-arrow { border: none; background: none; font-size: 18px; color: #9ca3af; cursor: pointer; padding: 4px; }
.notice-pager-arrow:disabled { opacity: .35; cursor: default; }
.notice-pager-circle {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--secondary);
  display: flex; align-items: center; justify-content: center; color: var(--secondary); font-weight: 700; font-size: 15px;
}

/* ===== 사진&영상 갤러리 (runbusancrew.com/photo.html UI 이식) ===== */
.photo-search-bar { justify-content: space-between; }
.notice-search-controls { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.gallery-total { font-size: 15px; color: #333; }
.gallery-total strong { color: var(--primary); }
.notice-divider-bold { border-top: 2px solid var(--secondary); margin-top: 16px; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; margin-top: 28px; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-item { display: block; }
.gal-thumb { width: 100%; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: #f1f2f5; margin-bottom: 12px; }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-type { font-size: 13px; color: #9ca3af; margin-bottom: 6px; }
.gal-type span { margin-left: 2px; }
.gal-title {
  font-size: 18px; font-weight: 800; color: var(--dark, #1f2937); margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gal-tags { font-size: 13px; color: #9ca3af; display: flex; flex-wrap: wrap; gap: 6px; }

.gallery-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 40px; }
.gallery-page-circle {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #d5d8de; background: #fff;
  color: #333; font-size: 15px; font-weight: 600; cursor: pointer;
}
.gallery-page-circle.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.gallery-page-arrow { border: none; background: none; font-size: 14px; color: #9ca3af; cursor: pointer; padding: 6px; }

/* ===== Detail pages ===== */
.notice-detail, .photo-detail { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
.notice-detail h1, .photo-detail h1 { font-size: 22px; margin: 12px 0; color: var(--dark); }
.notice-detail .meta, .photo-detail .meta { color: #6b7280; font-size: 13px; margin-bottom: 24px; }
.content { font-size: 15px; line-height: 1.8; }
.content img { width: 100%; margin-bottom: 12px; border-radius: 8px; }
.content iframe { width: 100%; aspect-ratio: 16/9; height: auto; border-radius: 8px; margin-bottom: 12px; }
.back-link { margin-top: 32px; }
.todo-note {
  background: #fff8e1; border: 1px dashed #e0c060; border-radius: 8px;
  padding: 12px 16px; font-size: 13px; color: #7a5c00;
}

/* 공원 소개 페이지는 메인 페이지와 동일한 .course-cards 카드 스타일을 그대로 재사용한다 */
.route-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.route-list img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.map-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 700px) { .map-gallery { grid-template-columns: repeat(2, 1fr); } }

/* ===== Accept / events ===== */
.accept-guide, .event-list { width: 100%; background: #ffedd5; }
.event-list, .page-bg-wrap > .event-list { margin-top: 64px; }
.accept-guide-title { text-align: center; color: var(--secondary); font-size: 32px; margin-bottom: 20px; }
/* 참가자 유의사항 제목 아래 안내 이미지 — 아래 흰색 목록과 같은 폭, 같은 20px 간격 */
.accept-guide-img { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto 20px; }
/* 러닝 페스티벌 참가신청 전용 — 베이지 카드 크기에 맞게 이미지를 꽉 채워서 더 크게 */
.accept-guide-img.festival-apply-img { max-width: none; }
.accept-guide ul {
  background: #fff; border-radius: 12px; padding: 24px;
  font-size: var(--guide-size, 15px);
  letter-spacing: var(--guide-letter-spacing, 0px);
  line-height: var(--guide-line-height, 1.8);
}
.accept-guide li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.accept-guide li svg { margin-top: 2px; }
.accept-guide li svg { width: 24px; height: 24px; flex-shrink: 0; }

/* ===== 월별 탭 ===== */
.month-tabs {
  display: flex; overflow-x: auto; gap: 0; margin: 28px 0 0; border-bottom: 2px solid #d5dae3;
  -webkit-overflow-scrolling: touch;
}
.month-tab {
  flex: 0 0 auto; min-width: 33.33%; padding: 16px 12px; text-align: center;
  font-size: 17px; font-weight: 700; color: var(--muted, #6b7280);
  background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer;
}
.month-tab.active { color: #fff; background: var(--primary); border-radius: 6px 6px 0 0; }
@media (max-width: 700px) { .month-tab { min-width: 45%; } }

/* ===== 장소(공원) 선택 버튼 — 누르면 아래 표가 그 장소의 행사로 바뀐다 ===== */
.location-btn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0 4px; }
.location-btn {
  padding: 16px 12px; border-radius: 10px; border: 2px solid var(--secondary);
  background: #fff; color: var(--secondary); font-size: 16px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.location-btn:hover { background: rgba(27, 39, 86, .06); }
.location-btn.active { background: var(--secondary); color: #fff; }
@media (max-width: 700px) {
  .location-btn-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .location-btn { font-size: 14px; padding: 14px 8px; }
}

/* ===== 참가신청 표 (공원 · 행사명+썸네일 · 일시 · 신청버튼) ===== */
.apply-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 24px; border-top: 2px solid #b0b7c3; border-bottom: 2px solid #b0b7c3; }
.apply-table th {
  background: var(--light-blue); color: var(--secondary); font-size: 17px; font-weight: 800;
  padding: 16px 10px; text-align: center; border-top: 1px solid #b0b7c3; border-bottom: 1px solid #b0b7c3;
}
.apply-table td { padding: 18px 10px; text-align: center; vertical-align: middle; border-top: 1px solid #b0b7c3; border-bottom: 1px solid #b0b7c3; font-size: 17px; }
.apply-table th:nth-child(1), .apply-table td:nth-child(1) { width: 34%; }
.apply-table th:nth-child(2), .apply-table td:nth-child(2) { width: 20%; }
.apply-table th:nth-child(3), .apply-table td:nth-child(3) { width: 26%; }
.apply-table th:nth-child(4), .apply-table td:nth-child(4) { width: 20%; }
.apply-loc-cell { vertical-align: middle; }
.apply-loc-name { font-size: 18px; font-weight: 400; color: #000; }
.apply-ev-cell { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.apply-ev-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; cursor: zoom-in; }
.apply-ev-cell-text { min-width: 0; text-align: center; }
.apply-ev-title { font-size: 22px; font-weight: 800; color: #000; }
.apply-ev-desc { font-size: 13px; color: var(--muted, #6b7280); margin-top: 2px; white-space: pre-line; }
.apply-ev-capacity { font-size: 13px; color: var(--primary); font-weight: 700; margin-top: 4px; }
.apply-date { color: #333; }
.apply-date b { color: var(--primary); }
.apply-time { font-weight: 700; margin-left: 4px; }
.apply-date-legacy { color: #333; font-weight: 600; }
.apply-btn-cell { vertical-align: middle; }
.apply-btn {
  display: inline-block; min-width: 120px; padding: 13px 14px; border-radius: 6px;
  font-size: 16px; font-weight: 700; text-align: center; border: none; cursor: pointer;
}
.apply-btn-on { background: var(--primary); color: #fff; }
.apply-btn-on:hover { opacity: .9; }
.apply-btn-off { background: #9ca3af; color: #fff; cursor: not-allowed; }
.apply-table-wrap { overflow-x: auto; margin-top: 24px; }
.apply-table-wrap .apply-table { margin-top: 0; min-width: 620px; }
@media (max-width: 700px) {
  .apply-btn { min-width: 100px; font-size: 12px; padding: 10px; }
}

/* ===== 행사 이미지 확대(라이트박스) ===== */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lightbox-overlay img { max-width: 100%; max-height: 90vh; border-radius: 8px; margin: 0 auto; }
.lightbox-close {
  position: absolute; top: 18px; right: 22px; background: none; border: 0; color: #fff;
  font-size: 32px; cursor: pointer; line-height: 1;
}

/* ===== 내 예약 확인 결과 ===== */
.apply-lookup-result {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--light-blue); border-radius: 12px; padding: 16px; margin-bottom: 12px; text-align: left;
}
.apply-lookup-info { min-width: 0; }
.apply-lookup-qr { flex-shrink: 0; border-radius: 8px; border: 1px solid #eaeaea; }

/* ===== 참가신청 모달 ===== */
.apply-modal-overlay {
  position: fixed; inset: 0; background: rgba(17,17,17,.55); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
}
.apply-modal {
  background: #fff; border-radius: 16px; padding: 36px 30px; max-width: 480px; width: 100%;
  position: relative; box-shadow: 0 18px 56px rgba(0,0,0,.3); max-height: 90vh; overflow-y: auto;
}
.apply-modal-close {
  position: absolute; top: 14px; right: 16px; background: none; border: 0;
  font-size: 24px; cursor: pointer; color: var(--muted, #6b7280); line-height: 1;
}
.apply-modal-title { font-size: 18px; color: var(--secondary); margin-bottom: 4px; }
.apply-modal-sub { font-size: 13px; color: var(--muted, #6b7280); margin-bottom: 20px; }
.apply-field { margin-bottom: 14px; }
.apply-field label { display: block; font-size: 13px; color: var(--muted, #6b7280); margin-bottom: 4px; }
.apply-field input {
  width: 100%; padding: 10px 12px; font-size: 15px; border: 1px solid #d5dae3; border-radius: 8px;
  font-family: inherit;
}
.apply-consent { margin-bottom: 12px; font-size: 13px; }
.apply-consent label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.apply-consent input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; }
.apply-consent summary { cursor: pointer; color: var(--primary); font-size: 12px; margin: 4px 0 0 25px; }
.apply-consent-detail { font-size: 12px; color: #6b7280; line-height: 1.6; margin: 6px 0 0 25px; }
.apply-modal-error { color: #dc2626; font-size: 13px; margin: 4px 0 12px; }
.apply-alert-overlay {
  position: absolute; inset: 0; z-index: 10; border-radius: 16px;
  background: rgba(17,17,17,.5); display: flex; align-items: center; justify-content: center; padding: 24px;
}
.apply-alert-box {
  background: #fff; border-radius: 14px; padding: 26px 22px; max-width: 320px; width: 100%;
  text-align: center; box-shadow: 0 10px 32px rgba(0,0,0,.25);
}
.apply-alert-msg { font-size: 15px; color: #1f2937; line-height: 1.6; margin-bottom: 18px; }
.apply-modal-submit { margin-top: 8px; padding: 14px 16px; font-size: 16px; }

.apply-done { text-align: center; }
.apply-done-check { font-size: 40px; margin-bottom: 4px; }
.apply-done h3 { font-size: 19px; color: var(--secondary); margin-bottom: 18px; }
.apply-done-qr { display: block; margin: 0 auto 14px; border-radius: 12px; border: 1px solid #eaeaea; } /* 전역 img { display:block } 때문에 text-align만으론 안 가운데 정렬돼서 margin auto로 직접 중앙정렬 */
.apply-done-code { font-size: 20px; font-weight: 800; letter-spacing: 1px; color: var(--primary); margin-bottom: 6px; }
.apply-done-note { font-size: 12px; color: var(--muted, #6b7280); margin-bottom: 16px; }
.apply-done-info { background: var(--light-blue); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; text-align: left; }
.apply-done-info-row { display: flex; justify-content: space-between; font-size: 14px; color: #1f2937; padding: 4px 0; }
.apply-done-info-row span { color: var(--muted, #6b7280); }
.apply-done-actions { display: flex; gap: 10px; }
.btn {
  display: inline-block; padding: 10px 20px; border-radius: 8px;
  background: var(--secondary); color: #fff; font-weight: 700; font-size: 14px;
  border: none; cursor: pointer; text-align: center;
}
.btn-sm { padding: 6px 14px; font-size: 13px; }
.lookup-open-btn { padding: 16px 32px; font-size: 19px; border-radius: 10px; }
.btn-primary { background: var(--primary); }
.btn-outline { background: #fff; color: var(--muted, #6b7280); border: 1px solid #d7dbe3; }
.cta { text-align: center; padding: 40px 20px 60px; }
.cta .btn {
  font-size: 27px; padding: 24px 60px; border-radius: 999px;
  background: linear-gradient(90deg, #ff5fa8, var(--primary) 55%, #c2005f);
  box-shadow: 0 10px 28px rgba(230, 0, 126, .35);
}
/* 메인페이지가 아닌 다른 페이지(행사개요 등)의 신청 버튼은 좀 더 차분한 크기로 */
.program-cta .btn { font-size: 17px; padding: 14px 36px; }

.floating-bottom-bar {
  position: fixed; left: 0; right: 0; bottom: -100px; z-index: 90;
  background: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  padding: 12px 20px; text-align: center;
  transition: bottom .25s ease;
}
.floating-bottom-bar.show { bottom: 0; }
.floating-bottom-bar .btn {
  width: 100%; max-width: 480px; font-size: 27px; padding: 24px 30px; border-radius: 999px;
  background: linear-gradient(90deg, #ff5fa8, var(--primary) 55%, #c2005f);
  box-shadow: 0 10px 28px rgba(230, 0, 126, .35);
}

/* ===== 긴급 공지 배너 (관리자 발행) ===== */
.site-banner-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px;
  background: var(--primary); color: #fff; padding: 14px 44px; text-align: center;
  font-size: 17px; font-weight: 700; position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.site-banner-bar .site-banner-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff;
  font-size: 22px; cursor: pointer; line-height: 1;
}
.site-banner-bar .site-banner-dismiss-row { color: #fff; opacity: .9; }
.site-banner-modal-overlay {
  position: fixed; inset: 0; background: rgba(17,17,17,.6); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.site-banner-modal {
  background: #fff; border-radius: 16px; padding: 36px 28px 30px; max-width: 480px; width: 100%;
  position: relative; box-shadow: 0 18px 56px rgba(0,0,0,.3); border-top: 7px solid var(--primary);
}
.site-banner-modal .site-banner-content { font-size: 17px; line-height: 1.7; font-weight: 600; white-space: pre-line; }
.site-banner-modal .site-banner-content img { width: 100%; border-radius: 10px; margin-bottom: 14px; }
.site-banner-modal .site-banner-dismiss-row { justify-content: center; margin-top: 18px; color: var(--muted, #6b7280); }
.site-banner-modal .site-banner-close {
  position: absolute; top: 12px; right: 16px; background: none; border: 0;
  font-size: 24px; cursor: pointer; color: var(--muted, #6b7280);
}
.site-banner-dismiss-row {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  cursor: pointer; user-select: none;
}
.site-banner-dismiss-row input[type="checkbox"] { width: 15px; height: 15px; }

/* ===== Footer ===== */
.site-footer { background: #1e5631; color: #cbd5e1; margin-top: 60px; border-top: 1px solid rgba(255, 255, 255, .4); }
/* 메인페이지 전용 — 배경 이미지가 흰 여백 없이 바로 밑 푸터까지 이어지게 */
body.transparent-header .site-footer { margin-top: 0; }
.footer-inner { max-width: 1200px; margin: auto; padding: 32px 20px; }
.footer-name { color: #fff; font-weight: 700; font-size: 24px; margin-bottom: 8px; }
.footer-contact li { font-size: 18px; padding: 2px 0; }
.footer-copyright { font-size: 16px; margin-top: 16px; opacity: .8; }

/* ===== Back-to-top button ===== */
.btn-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--secondary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.btn-top.show { opacity: 1; pointer-events: auto; }

/* ===== 뽑기런 오시는 길 — 온천천 코스 안내 (runbusanslow.com/course 콘텐츠 이식) ===== */
.course-group-card, .page-bg-wrap > .course-group-card { width: 100%; max-width: 920px; background: #ffedd5; }
.subcourse-detail { max-width: 760px; margin: 0 auto; }
/* 러닝 페스티벌 오시는 길 전용 — 참가신청 카드/이미지와 같은 크기로 맞춤 */
.course-group-card.festival-directions-card, .page-bg-wrap > .course-group-card.festival-directions-card { max-width: 1200px; }
.subcourse-detail.festival-directions-detail { max-width: none; }
.festival-directions-detail .subcourse-apply-btn { max-width: 280px; margin-top: 24px; }
.subcourse-detail img { width: 100%; height: auto; display: block; border-radius: 14px; margin-bottom: 16px; }
.subcourse-desc { font-size: 20px; color: #444; line-height: 1.7; margin-bottom: 24px; text-align: center; }
.subcourse-apply-btn { display: block; max-width: 220px; width: 100%; margin: 0 auto; }
.subcourse-apply-btn img { display: block; width: 100%; height: auto; }
.subcourse-btn {
  display: inline-block; background: var(--primary); color: #fff; font-weight: 700;
  padding: 12px 36px; border-radius: 999px; text-decoration: none; font-size: 16px;
}

.home-logos-over { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; }
.home-logos-over .site-bottom-logos { padding-top: 0; }
.draw-run-promo { display: inline-block; padding-top: 48px; text-align: left; }
.draw-run-promo p { font-size: 21px; line-height: 2; color: var(--text); margin-bottom: 16px; }
.draw-run-promo strong { color: var(--secondary); }
.draw-run-promo-intro { text-align: center; }
.draw-run-promo .draw-run-promo-intro { font-size: 24px; margin-bottom: 36px; }
.draw-run-promo .draw-run-promo-intro.draw-run-promo-title { font-size: 28px; }
.draw-run-promo .draw-run-promo-intro.draw-run-promo-sub { font-size: 21px; }
/* 러닝 페스티벌 행사개요 전용 — 신청방법/소식/일시/장소/내용 글씨를 서로 동일하게, 조금 더 크게 */
.draw-run-promo span.festival-info-text, .draw-run-info span.festival-info-text { font-size: 23px; }
.festival-runner-icon { font-size: 30px; vertical-align: middle; }
/* 일정표 밑 "즐기는 팁" 카드 — 위 카드와의 간격. .page-bg-wrap > section의 margin:0 auto 규칙이 더 구체적이라 그냥 margin으론 안 먹혀서 같은 수준으로 맞춤 */
.page-bg-wrap > section.festival-tips-card { margin-top: 40px; }
/* 러닝 페스티벌 프로그램 안내 카드 — 행사개요/일정표 카드와 같은 가로 폭(1200px)으로 맞춤 */
.page-bg-wrap > .draw-run-program-card.festival-program-card { max-width: 1200px; }
.festival-program-card .draw-run-event-photo.draw-run-event-photo-wide { max-width: none; }
/* 러닝 페스티벌 프로그램 안내 이미지 사이 그라데이션 바 — 행운 미션런(핑크→남색)과 달리 파란색→연한 하늘색 */
.festival-program-card .draw-run-event-block { padding: 56px 0; }
.festival-program-card .draw-run-event-block:not(:last-child)::after { background: linear-gradient(to right, #1d4ed8, #bae6fd); height: 10px; }
/* 러닝 페스티벌 행사개요 소개 문단 사이 간격을 행운 미션런보다 조금 좁게 */
.festival-overview-promo .draw-run-promo-intro { margin-bottom: 24px; }
.draw-run-event-photo.draw-run-event-photo-wide { aspect-ratio: auto; height: auto; object-fit: contain; }
.draw-run-event-photo.draw-run-event-photo-wide { max-width: 840px; }
.draw-run-event-photo.draw-run-event-photo-wide { box-shadow: none; border-radius: 0; }