/* ==============================================================
   1. 폰트, 리셋, 변수 및 기본 설정
   ============================================================== */
@font-face { font-family: 'Paperlogy'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Paperlogy'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {font-family: 'Paperlogy', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', sans-serif;color: #333;line-height: 1.5;background-color: #ffffff;-webkit-font-smoothing: antialiased;word-break: keep-all;max-width: 1920px;margin: auto;}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:root { --primary: #e6007e; --secondary: #1b2756; --program-bg: #384180; --light-blue: #eef5ff; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ==============================================================
   2. 헤더 및 네비게이션바 (GNB)
   ============================================================== */
.nav-wrap {position: fixed;top: 0;left: 0;right: 0;margin: auto;z-index: 1000;width: 1920px;height: 120px;background-color: #fff;padding: 0 40px;display: flex;justify-content: space-between;align-items: center;box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.logo { display: flex; flex-direction: row; align-items: center; }
.logo a { display: flex; flex-direction: row; align-items: center; }
.logo img { height: 78px; }
.gnb { display: flex; gap: 60px; }
.gnb a { color: #333; font-weight: 800; font-size: 21px; transition: color 0.3s; }
.gnb a:hover { color: var(--primary); }
.logo-right { display: flex; align-items: center; gap: 20px; }
.logo-right img { height: 30px; object-fit: contain; }
.mobile-gnb { display: none; position: fixed; top: 120px; left: 0; z-index: 999; width: 100%; background-color: #fff; overflow-x: auto; white-space: nowrap; padding: 10px 20px; text-align: center; -ms-overflow-style: none; scrollbar-width: none; border-bottom: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.mobile-gnb::-webkit-scrollbar { display: none; }
.mobile-gnb-inner { display: inline-flex; gap: 20px; justify-content: center; min-width: 100%; }
.mobile-gnb a { color: #333; font-weight: bold; font-size: 16px; }
.btn-nav-apply { background-color: var(--primary); color: white; font-weight: bold; font-size: 20px; padding: 6px 30px; border-radius: 50px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(230,0,126,0.3); transition: transform 0.3s, background-color 0.3s; }
.btn-nav-apply:hover { transform: translateY(-2px); color: white; }
.btn-nav-apply svg { width: 18px; height: 18px; }

/* ==============================================================
   3. 메인 히어로 영역
   ============================================================== */
/* 1. 본체: 직접 배경을 넣지 않고, 안의 내용물들이 묻히지 않게 z-index 기준점을 잡습니다. */
.hero { position: relative; width: 100%; height: auto; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: 120px; z-index: 100; /* 추가: 가상 요소들이 배경으로 깔리도록 스태킹 컨텍스트 생성 */ /* 기존 background 속성은 지워줍니다 */}
/* 기존 요소들 유지 */
.bg-top { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 350px); z-index: 0; }
.bg-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 350px; z-index: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 100%);}
/* 2. 주간 배경: ::before를 이용해 제일 바닥(-2)에 깝니다. */
.hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/common/bg_top_all.png') center top / cover no-repeat; z-index: -2; }
/* 3. 야간 배경: ::after를 이용해 주간 배경 위(-1)에 올리고 투명하게 만듭니다. */
.hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/common/bg_top_all_night.png') center top / cover no-repeat; opacity: 0; /* 기본적으로 숨김 */ transition: opacity 2s ease-in-out; /* 2초 동안 부드럽게 */ z-index: -1; }
/* 야간 모드 시 야간 배경 서서히 나타남 */
body.night-mode .hero::after { opacity: 1;}

/* ==============================================================
   타이틀 이미지 부드러운 전환 (기존과 동일)
   ============================================================== */
.main-title, .main-subtitle { position: relative;}
.main-title img, .main-subtitle img { transition: opacity 1s ease-in-out;}
/* 주간 이미지 (기본) */
.main-title .img-day, .main-subtitle .img-day { opacity: 1; position: relative; z-index: 1;}
/* 🌙 야간 이미지 (수정된 부분: left, right, margin 추가) */
.main-title .img-night, .main-subtitle .img-night { opacity: 0; position: absolute; top: 0; left: 0; right: 0; /* 추가: 오른쪽 끝도 0으로 잡아줌 */ margin: 0 auto; /* 추가: absolute 상태에서도 완벽하게 가운데 정렬 */ z-index: 2;}
/* 야간 모드 시 타이틀 이미지 전환 */
body.night-mode .main-title .img-day, body.night-mode .main-subtitle .img-day { opacity: 0;}
body.night-mode .main-title .img-night, body.night-mode .main-subtitle .img-night { opacity: 1;}
/* ==============================================================
   참가 코스 (base_info) 이미지 부드러운 전환
   ============================================================== */
/* 1. 이미지들을 감싸는 부모 요소 (여기에 최대 크기 지정) */
.base-img-wrap { position: relative; width: 100%; max-width: 800px; margin: 0 auto; }
/* 2. 공통 이미지 스타일 */
.base-img-wrap .base-img { width: 100%; max-width: 100%; display: block; margin: 0 auto; /* 주간/야간 모두 무조건 가운데 정렬 */ filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15)); transition: opacity 1s ease-in-out;}
/* 3. 주간 이미지 (기본) */
.base-img-wrap .img-day { opacity: 1; position: relative; z-index: 1;}
/* 4. 야간 이미지 (위치 겹치기) */
.base-img-wrap .img-night { opacity: 0; position: absolute; top: 0; left: 0; right: 0; z-index: 2;}
/* 5. 야간 모드 활성화 시 투명도 전환 */
body.night-mode .base-img-wrap .img-day { opacity: 0;}
body.night-mode .base-img-wrap .img-night { opacity: 1;}


.hero-content { position: relative; z-index: 20; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 1000px; padding: 0 20px; margin-top: 40px; }
.main-title { font-size: 0; margin-bottom: 15px; }
.main-title img { max-width: 100%; width: 816px; }
.main-title .sub { font-size: 0; display: block; }
.main-title .sub img { height: 60px; max-width: 100%; object-fit: contain; margin: 0 auto; }
.main-subtitle { font-size: 0; margin-top: 15px; }
.main-subtitle img { max-width: 100%; width: 765px; margin: 0 auto; }
.btn-apply { margin: 60px auto; display: inline-block; background: linear-gradient(90deg, #FF2894 0%, #E50072 100%); color: white; font-weight: bold; font-size: 1.8rem; padding: 18px 0; width: 100%; max-width: 800px; border-radius: 50px; box-shadow: 0 10px 20px rgba(230,0,126,0.3); transition: transform 0.3s, background-color 0.3s; text-align: center; }
.btn-apply:hover { transform: translateY(-5px); }
.base-img { width: 100%; max-width: 800px; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15)); }
.characters { column-gap: 100px; position: relative; display: flex; z-index: 10; width: 100%; max-width: 1240px; pointer-events: none; align-items: center; justify-content: center; margin-bottom: 100px; padding: 0 20px; }
.char-left { height: 267px; }
.char-right { height: 409px; }

/* ==============================================================
   4. 공통 섹션 및 컨텐츠 박스
   ============================================================== */
.section { padding: 96px 20px; background-color: white; }
.sec-header { text-align: center; margin-bottom: 48px; }
.sec-title { font-size: 4rem; font-weight: 900; margin-bottom: 8px; letter-spacing: 0.05em; }
.sec-subtitle { color: #6b7280; font-size: 1rem; }
.btn-more { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 2px solid var(--primary); color: var(--primary); font-weight: bold; padding: 10px 60px; border-radius: 50px; font-size: 1rem; transition: all 0.3s; max-width: 300px; width: 100%; text-align: center; }
.btn-more:hover { background-color: var(--primary); color: white; }
.btn-more::after { content: '\276F'; font-size: 0.9em; font-weight: bold; margin-left: 5px; transition: transform 0.3s; }
.btn-more:hover::after { transform: translateX(4px); }
.line { padding-bottom: 48px; border-bottom: 1px solid #dedede; }
.line_none { padding-bottom: unset; border-bottom: 0; }

/* ==============================================================
   5. 메인: 프로그램 & 코스 소개
   ============================================================== */
.program-section { position: relative; z-index: 100; padding: 0 20px; margin-top: -100px; display: flex; justify-content: center; }
.program-box-wrap { background-color: transparent; box-shadow: none; max-width: 100%; margin: 0 auto; }
.program-box { background-color: white; border-radius: 60px; display: flex; flex-direction: row; align-items: center; padding: 80px 80px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); border: none; gap: 80px; }
.program-img { width: 380px; height: 380px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.program-img img { width: 100%; height: 100%; object-fit: cover; }
.program-info { flex: 1; display: flex; flex-direction: column; }
.pi-sub { font-size: 24px; color: #6b7280; margin-bottom: 5px; }
.pi-title { font-size: 64px; font-weight: 900; color: #111; margin-bottom: 10px; letter-spacing: -0.05rem; }
.pi-desc { font-size: 20px; color: #4b5563; margin-bottom: 30px; line-height: 1.2; }
.pi-desc strong { color: #34308F; font-weight: 800; }
.pi-details { display: flex; flex-direction: column; gap: 6px; }
.desc-item { display: flex; align-items: center; }
.badge { background-color: var(--secondary); color: white; font-weight: bold; padding: 4px 16px 4px 10px; font-size: 18px; border-radius: 0 0 50px; margin-right: 16px; min-width: 90px; text-align: center; flex-shrink: 0; }
.desc-text { font-weight: 600; font-size: 24px; letter-spacing: -0.05rem; }
.desc-text strong { font-weight: bold; color: #1f2937; }
.text-pink { color: #34308F; font-size: 30px; }
.text-sm-gray { font-size: 16px; font-weight: normal; }
.course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; max-width: 1200px; margin: 0 auto; }
.course-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.course-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; margin-bottom: 24px; box-shadow: 0 10px 15px rgba(0,0,0,0.1); transition: transform 0.5s; }
.course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-item:hover .course-thumb { transform: translateY(-10px); box-shadow: 0 15px 25px rgba(0,0,0,0.15); }
.course-name { font-size: 2rem; font-weight: bold; margin-bottom: 10px; }
.course-addr { color: #6b7280; font-size: 1rem; line-height: 1.5; }

/* ==============================================================
   6. 메인: 공지사항 & 갤러리 섹션
   ============================================================== */
.notice-wrap { max-width: 1200px; margin: 0 auto; }
.notice-item { display: flex; justify-content: space-between; align-items: center; padding: 30px 20px; border-top: 1px solid #1f2937; border-bottom: 1px solid #1f2937; margin-bottom: 32px; transition: background-color 0.3s; }
.notice-item:hover { background-color: #f9fafb; }
.notice-title-wrap { display: flex; align-items: center; gap: 16px; flex: 1; }
.notice-badge { font-size: 0.75rem; font-weight: bold; border: 1px solid #d1d5db; color: #6b7280; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; }
.notice-title { font-weight: bold; color: #1f2937; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 600px; font-size: 20px; }
.notice-title:hover { text-decoration: underline; }
.notice-info { display: flex; gap: 20px; font-size: 0.875rem; color: #9ca3af; flex-shrink: 0; margin-left: 20px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto 48px; }
.gallery-item { display: block; cursor: pointer; }
.gal-thumb { overflow: hidden; border-radius: 8px; margin-bottom: 16px; aspect-ratio: 16 / 9; background-color: #f3f4f6; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery-item:hover .gal-thumb img { transform: scale(1.1); }
.gal-type { font-size: 0.75rem; color: #9ca3af; margin-bottom: 4px; }
.gal-type span { float: right; }
.gal-title { font-weight: bold; font-size: 1.125rem; margin-bottom: 4px; /*white-space: nowrap;*/ overflow: hidden; text-overflow: ellipsis; transition: color 0.3s; }
.gallery-item:hover .gal-title { color: var(--primary); }
.gal-tags { font-size: 0.875rem; color: #6b7280; /*white-space: nowrap;*/ overflow: hidden; text-overflow: ellipsis; }

/* ==============================================================
   7. 서브페이지: 참가신청 레이아웃
   ============================================================== */
.apply-page-main { position: relative; width: 100%; min-height: 100vh; background: url('../images/common/bg_top_all2.png') center top / cover no-repeat; padding-top: 70px; padding-bottom: 100px; display: flex; flex-direction: column; align-items: center;  background-size: 100%;}
.apply-bg-top { text-align: center; margin-bottom: 40px; }
.apply-page-title { font-size: 1.5rem; font-weight: bold; color: #111; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.apply-page-title img { max-width: 100%; width: 420px; }
.apply-page-title span { color: var(--primary); }
.apply-box { background-color: #fff; border-radius: 40px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); max-width: 1200px; width: 100%; padding: 60px 80px; position: relative;}
.apply-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.apply-title-wrap { flex: 1; }
.apply-title-wrap .title { font-size: 64px; font-weight: 900; color: var(--secondary); display: flex; align-items: baseline; gap: 15px; letter-spacing: -0.03em; margin-bottom: 40px; border-bottom: #222 solid 2px; }
.apply-title-wrap .title span { font-size: 24px; font-weight: 600; letter-spacing: 0; }
.apply-character { width: 120px; flex-shrink: 0; margin-top: -20px; position: absolute; right: 50px; }
.info-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.info-list li { position: relative; padding-left: 28px; font-size: 18px; font-weight: 500; color: #333; line-height: 1.4; word-break: keep-all; }
.info-list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6007e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") no-repeat center/contain; }
.apply-table { width: 100%; border-collapse: collapse; text-align: center; margin-bottom: 20px; }
.apply-table th { border-top: 2px solid #111; border-bottom: 1px solid #111; padding: 15px 10px; font-weight: bold; color: #333; font-size: 18px; background-color: #F6FBFF; }
.apply-table td { padding: 16px 10px; vertical-align: middle; }
.apply-table tbody tr:not(:last-child) td:not(.td-base) { border-bottom: 1px solid #eaeaea; }
.apply-table tbody tr:last-child td { border-bottom: 1px solid #111; }
.apply-table td strong { font-weight: bold; color: #111; }
.td-base { border-right: 1px solid #eaeaea; border-bottom: 1px solid #111 !important; }
.base-name {font-size: 1.5rem;font-weight: 900;color: #333;letter-spacing: 0.05em;margin-bottom: 5px;}
.base-name span {color: var(--primary);font-size: 2rem;}
.base-desc {font-size: 0.95rem;color: #6b7280;word-break: keep-all;margin-top: 10px;padding: 10px 24px;border-radius: 6px;width: fit-content;justify-content: center;border: 1px solid #a1a1a1;display: inline-flex;align-items: center;gap: 0;flex-direction: column;}
.base-desc p {font-size: 1.8rem;display: inline-flex;align-items: center;gap: 6px;/* background-color: #454545; */color: #000000;font-weight: bold;width: fit-content;justify-content: center;}
.col-place { width: 35%; }
.col-date { width: 40%; }
.col-btn { width: 25%; }
.btn-sm-apply { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background-color: #d83b7f; color: white; font-size: 16px; font-weight: bold; padding: 10px 24px; border-radius: 6px; transition: background-color 0.2s, transform 0.2s; }
.btn-sm-apply:hover { background-color: var(--primary); transform: translateY(-2px); color: white; }
.icon-link { display: inline-block; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center/contain; }
.apply-divider { text-align: center; font-size: 1.5rem; font-weight: 900; color: #e5e7eb; letter-spacing: 0.5em; margin: 40px 0; }

/* ==============================================================
   8. 서브페이지: 프로그램 & 코스 안내
   ============================================================== */
.program-wrap { width: 100%; }
.prog-sub-title { font-size: 1.8rem; font-weight: 900; color: var(--secondary); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.05em; border-left: 5px solid var(--primary); padding-left: 15px; }
.prog-visual-placeholder { width: 100%; background-color: #f8f9fa; border-radius: 20px; overflow: hidden; margin-bottom: 30px; border: 1px solid #eee; }
.prog-visual-placeholder img.full-img { width: 100%; height: auto; display: block; }

.runbase {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: auto;
    text-align: center;
    background-color: transparent;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 30px;
    border: 0;
}

.prog-text-box { margin-bottom: 50px; }
.prog-text-box .main-text { font-size: 1.25rem; font-weight: 600; color: #111; margin-bottom: 15px; word-break: keep-all; }
.prog-text-box .main-text strong { color: var(--primary); }
.prog-text-box .sub-text { font-size: 1.05rem; color: #666; line-height: 1.7; word-break: keep-all; }
.program-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0; }
.feature-item { background-color: #fdf2f8; padding: 30px 20px; border-radius: 20px; text-align: center; transition: transform 0.3s; }
.feature-item:hover { transform: translateY(-5px); }
.feature-item .f-icon { font-size: 2.5rem; margin-bottom: 15px; }
.feature-item h4 { font-size: 1.2rem; font-weight: bold; color: #111; margin-bottom: 10px; }
.feature-item p { font-size: 0.95rem; color: #666; word-break: keep-all; }
.program-notice-box { background-color: #f8f9fa; padding: 40px; border-radius: 20px; margin-top: 60px; }
.program-notice-box h4 { font-size: 1.3rem; font-weight: bold; color: #111; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.program-notice-box h4::before { content: '⚠️'; font-size: 1.2rem; }
.course-wrap { width: 100%; }
.course-detail-item { margin-bottom: 60px; }
.course-header { margin-bottom: 25px; text-align: center; }
.course-title { font-size: 3rem; font-weight: 900; color: #111; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 15px; }
.base-badge { display: inline-block; color: white; font-size: 1.4rem; font-weight: bold; padding: 6px 20px; border-radius: 50px; }
.base-badge.tag-1 { background-color: #e6007f; }
.base-badge.tag-2 { background-color: #b537e9; }
.course-address { font-size: 1.1rem; color: #6b7280; font-weight: 500; }
.course-map-placeholder { width: 100%; background-color: #f3f4f6; border-radius: 20px; overflow: hidden; margin-bottom: 30px; border: 1px solid #e5e7eb; position: relative; min-height: 400px; display: flex; align-items: center; justify-content: center; }
.course-map-placeholder img.full-img { width: 100%; height: auto; display: block; position: absolute; top: 0; left: 0; object-fit: cover; }
.map-overlay-text { position: relative; z-index: 10; font-size: 1.2rem; color: #9ca3af; font-weight: bold; background: rgba(255,255,255,0.8); padding: 10px 20px; border-radius: 10px; }
.course-description { background-color: #f8f9fa; padding: 30px 40px; border-radius: 15px; font-size: 1.1rem; color: #4b5563; line-height: 1.7; word-break: keep-all; text-align: center; }
.course-divider { border: none; border-top: 1px dashed #d1d5db; margin: 60px 0; }
.course-tabs { display: flex; width: 100%; margin-bottom: 30px; border-bottom: 2px solid #e0e0e0; }
.tab-btn { flex: 1; padding: 15px 10px; border: none; background: none; font-size: 18px; font-weight: 700; cursor: pointer; color: #888; position: relative; text-align: center; transition: color 0.3s ease; }
.tab-btn:hover { color: #333; }
.tab-btn.active { color: #111; }
.tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px; background-color: #111; }
.tab-content { display: none; animation: fadeIn 0.5s; }
.tab-content.active { display: block; }
.course-map-img { width: auto; height: auto; max-height: 842px; border-radius: 10px; display: block; margin: 0 auto; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.course-info { margin-top: 15px; font-size: 20px; line-height: 1.6; color: #333; }
.course-info p { margin-bottom: 5px; }
.info-label { font-weight: 700; color: #000; margin-right: 5px; }
.course-features { list-style: none; padding: 30px; margin: 20px auto 30px; background-color: #f8f9fa; border-radius: 20px; width: max-content; }
.course-features li { position: relative; padding-left: 25px; margin-bottom: 4px; font-size: 18px; color: #444; line-height: 1.5; text-align: left; }
.course-features li:last-child { margin-bottom: 0; }
.course-features li::before { content: '✓'; position: absolute; left: 0; color: #111; font-weight: 900; }
.course-route { text-align: center; color: #222; margin: 15px auto 30px; padding: 12px; background-color: #f1f1f1; border-radius: 6px; word-break: keep-all; }

/* ==============================================================
   9. 게시판 (목록, 보기, 쓰기) 및 검색, 페이징
   ============================================================== */
.board-top-info { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0; padding-bottom: 15px; border-bottom: 2px solid #111; }
.total-count { font-size: 1rem; color: #333; }
.total-count strong { font-weight: bold; }
.search-wrap { display: flex; gap: 15px; align-items: center; }
.search-select { border: none; border-bottom: 1px solid #ccc; padding: 5px 25px 5px 5px; outline: none; font-size: 1rem; color: #333; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 5px center; }
.search-input-box { display: flex; align-items: center; border-bottom: 1px solid #ccc; padding: 0 5px; transition: border-color 0.3s; }
.search-input-box:focus-within { border-color: #111; }
.search-input-box input { border: none; outline: none; padding: 8px 5px; font-size: 1rem; width: 220px; color: #333; background: transparent; }
.search-input-box input::placeholder { color: #aaa; font-weight: 300; }
.btn-search { background: none; border: none; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; }
.btn-search:hover { opacity: 0.6; }
.notice-list { border-top: none; border-bottom: 1px solid #111; margin-bottom: 40px; }
.notice-list .notice-item { border-top: none; border-bottom: 1px solid #eaeaea; margin-bottom: 0; padding: 20px 10px; }
.notice-list .notice-item:last-child { border-bottom: none; }
.empty-msg { text-align: center; padding: 50px 0; color: #999; font-size: 1.1rem; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; }
.btn-page { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; border: 1px solid #d1d5db; border-radius: 50%; color: #6b7280; font-size: 0.95rem; font-weight: 500; transition: all 0.2s; background-color: #fff; }
.btn-page:hover { background-color: #f3f4f6; color: #111; border-color: #9ca3af; }
.btn-page.active { background-color: var(--primary); color: white; border-color: var(--primary); font-weight: bold; }
.btn-page.prev, .btn-page.next { font-size: 0.8rem; color: #9ca3af; }
.btn-page.prev:hover, .btn-page.next:hover { color: var(--primary); border-color: var(--primary); background-color: #fff; }
.board-btn-wrap { display: flex; justify-content: flex-end; margin-top: 20px; padding-bottom: 20px; }
.btn-write { display: inline-block; background-color: #111; color: #fff; padding: 10px 40px; font-size: 1rem; font-weight: bold; border-radius: 50px; transition: background-color 0.3s; }
.btn-write:hover { background-color: var(--primary); color: #fff; }
.board-view-wrap { width: 100%; border-top: 2px solid #111; padding-top: 30px; }
.view-header { border-bottom: 1px solid #eaeaea; padding-bottom: 20px; margin-bottom: 40px; }
.view-title { font-size: 2.2rem; font-weight: 800; color: #111; margin-bottom: 15px; letter-spacing: -0.03em; word-break: keep-all; }
.view-meta { display: flex; align-items: center; gap: 15px; font-size: 0.95rem; color: #6b7280; flex-wrap: wrap; }
.view-meta span { position: relative; }
.view-meta span:not(:last-child)::after { content: '|'; position: absolute; right: -9px; color: #d1d5db; }
.view-content { min-height: 350px; font-size: 1.1rem; color: #333; line-height: 1.6; padding-bottom: 50px; }
.view-content p img { margin: auto}

.view-attachment { display: flex; align-items: center; gap: 10px; background-color: #f8f9fa; padding: 20px 25px; border-radius: 0; font-size: 0.95rem; color: #333; }
.view-attachment svg { color: #6b7280; }
.view-btn-wrap { text-align: center; margin: 60px 0; }
.btn-list { display: inline-block; border: 1px solid #111; border-radius: 50px; padding: 12px 50px; font-size: 1.05rem; font-weight: bold; color: #111; transition: all 0.3s; background-color: #fff; cursor: pointer; }
.btn-list:hover { background-color: #111; color: #fff; }
.view-nav { border-top: 1px solid #111; }
.nav-item { display: flex; align-items: center; padding: 20px 10px; border-bottom: 1px solid #eaeaea; font-size: 1rem; }
.nav-label { font-weight: bold; color: #111; width: 80px; flex-shrink: 0; position: relative; }
.nav-label::after { content: '|'; position: absolute; right: 20px; color: #e5e7eb; font-weight: normal; }
.nav-link { color: #333; transition: color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.nav-link:hover { color: var(--primary); text-decoration: underline; }
.nav-empty { color: #999; }
.board-write-wrap { width: 100%; border-top: 2px solid #111; }
.write-table { width: 100%; border-collapse: collapse; }
.write-table th { width: 150px; padding: 25px 20px; background-color: #fcfcfc; border-bottom: 1px solid #eaeaea; text-align: left; font-weight: bold; color: #333; font-size: 1.05rem; }
.write-table td { padding: 15px 20px; border-bottom: 1px solid #eaeaea; }
.input-full { width: 100%; height: 45px; border: 1px solid #ddd; padding: 0 15px; border-radius: 4px; outline: none; font-size: 1rem; transition: border-color 0.3s; }
.input-half { width: 300px; height: 45px; border: 1px solid #ddd; padding: 0 15px; border-radius: 4px; background-color: #f5f5f5; color: #666; outline: none; }
.input-full:focus { border-color: var(--primary); }
.textarea-content { width: 100%; min-height: 400px; border: 1px solid #ddd; padding: 15px; border-radius: 4px; outline: none; font-size: 1rem; line-height: 1.6; resize: vertical; transition: border-color 0.3s; }
.textarea-content:focus { border-color: var(--primary); }
.file-upload-wrap { display: flex; align-items: center; gap: 15px; }
.hidden-file { display: none; }
.btn-file { display: inline-block; background-color: #666; color: white; padding: 8px 20px; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: background-color 0.2s; }
.btn-file:hover { background-color: #333; }
.file-name { color: #999; font-size: 0.9rem; }
.write-btn-wrap { display: flex; justify-content: center; gap: 15px; margin-top: 50px; }
.btn-cancel { display: inline-block; border: 1px solid #ddd; border-radius: 50px; padding: 12px 60px; font-size: 1.05rem; font-weight: bold; color: #666; background-color: #fff; transition: all 0.3s; }
.btn-cancel:hover { background-color: #f5f5f5; color: #333; }
.btn-submit { display: inline-block; border: none; border-radius: 50px; padding: 12px 60px; font-size: 20px; font-weight: bold; color: #fff; background: linear-gradient(90deg, #FF2894 0%, #E50072 100%); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(230,0,126,0.2); }
.btn-submit:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(230,0,126,0.3); }
.select-category { width: 200px; height: 45px; border: 1px solid #ddd; padding: 0 15px; border-radius: 4px; outline: none; font-size: 1rem; color: #333; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 15px center; appearance: none; -webkit-appearance: none; cursor: pointer; }
.select-category:focus { border-color: var(--primary); }
.view-category { display: inline-block; background-color: var(--primary); color: #fff; padding: 2px 12px; border-radius: 4px; font-size: 0.85rem; font-weight: bold; margin-bottom: 10px; }
.view-img-area { width: 100%; margin-bottom: 30px; border-radius: 10px; overflow: hidden; text-align: center; }
.view-img-area img { width: auto; max-width: 100%; height: auto; display: inline-block; }
.view-text { margin-bottom: 40px; word-break: break-all; }
.view-text p img { margin: auto; padding-bottom: 30px;}
.view-text p iframe { max-width: 100%;}

.view-tags { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 20px; border-top: 1px dashed #eaeaea; }
.view-tags span { color: #6b7280; font-size: 1rem; font-weight: 500; }

/* ==============================================================
   10. 푸터, 하단 버튼, 플로팅
   ============================================================== */
.footer { border-top: 1px solid #e8e8e8; padding: 60px 0 120px; position: relative; text-align: center; display: flex; justify-content: center; flex-direction: column; gap: 40px;  }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: 20px; }
.footer-logos img { height: 60px; object-fit: contain; }
.footer-info { display: flex; width: fit-content; justify-content: center; margin: auto; align-items: center; gap: 90px; font-size: 1rem; color: #666; padding: 10px 60px; flex-wrap: wrap; border: #EFEFEF solid 2px; border-radius: 30px; background-color: #fff; }
.footer-info span { position: relative; }
.footer-info span:not(:last-child)::after { content: '|'; position: absolute; right: -45px; color: #d1d5db; }
.copy { font-size: 1rem; color: #666; font-weight: 500; }
.btn-top { position: fixed; right: 32px; bottom: 15px; z-index: 1000; width: 60px; height: 60px; background-color: #e6067e; border: none; border-radius: 50%; color: white; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: background-color 0.3s; }
.btn-top:hover { background-color: #c8056e; }
.btn-top svg { width: 24px; height: 24px; }
.floating-bottom-bar { position: fixed; bottom: -120px; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); box-shadow: 0 -5px 15px rgba(0,0,0,0.08); padding: 15px 20px; z-index: 999; display: flex; justify-content: center; transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.floating-bottom-bar.show { bottom: 0; }
.btn-floating { display: inline-block; background: linear-gradient(90deg, #FF2894 0%, #E50072 100%); color: white; font-weight: bold; font-size: 1.5rem; padding: 14px 0; width: 100%; max-width: 600px; border-radius: 50px; box-shadow: 0 5px 15px rgba(230,0,126,0.3); text-align: center; transition: transform 0.2s; }
.btn-floating:hover { transform: translateY(-3px); }

/* ==============================================================
   11. 반응형 미디어 쿼리 (Tablet)
   ============================================================== */
@media (max-width: 1024px) {
    .gnb { gap: 40px; }
    .gnb a { font-size: 18px; }
    .characters { column-gap: 50px; }
    .char-left { height: 200px; }
    .char-right { height: 300px; }
    .sec-title { font-size: 4rem; }
}

/* ==============================================================
   12. 반응형 미디어 쿼리 (Mobile)
   ============================================================== */
@media (max-width: 768px) {
    .hero { padding-top: 80px; padding-bottom: 60px; }
    .bg-top { height: calc(100% - 200px); }
    .bg-bottom { height: 200px; }
    .nav-wrap { height: 70px; padding: 0 15px 0 20px; }
    .logo img { height: 38px; }
    .logo-right img { height: 20px; }
    .btn-nav-apply { font-size: 16px; padding: 6px 30px; border-radius: 50px; gap: 8px; box-shadow: none; }
    .gnb { display: none; }
    .mobile-gnb { display: block; top: 70px; padding-top: 10px; z-index: 1000; border-top: #ebebeb solid 1px; }
    .hero-content { margin-top: 70px; }
    .main-title img { max-width: 90%; margin: auto; }
    .main-title .sub img { height: 40px; margin-top: 10px; }
    .main-subtitle img { max-width: 85%; }
    .btn-apply { font-size: 1.3rem; padding: 15px 0; margin: 40px auto; width: 90%; max-width: 400px; }
    .base-img { max-width: 95%; }
    .characters { height: auto; column-gap: 20px; margin-bottom: 50px; align-items: flex-end; justify-content: flex-end;}
    .char-left { height: auto; }
    .char-right { height: 200px; }
    .program-section { margin-top: -60px; padding: 0 15px; }
    .program-box { flex-direction: column; padding: 30px 20px; gap: 30px; border-radius: 28px; }
    .program-img { width: 200px; height: 200px; }
    .pi-sub { font-size: 16px; }
    .pi-title { font-size: 1.6rem; }
    .pi-desc { font-size: 16px; margin-bottom: 20px; }
    .desc-item { align-items: flex-start; flex-direction: column; gap: 8px; }
    .badge { font-size: 15px; min-width: 70px; padding: 4px 10px 4px 0; margin-right: 0; }
    .desc-text { font-size: 16px; line-height: 1.4; }
    .text-pink { font-size: 1.1rem; }
    .text-sm-gray { display: block; margin-top: 4px; font-size: 14px; }
    .section { padding: 70px 20px; }
    .sec-header { margin: 30px 30px; }
    .sec-title { font-size: 2.0rem; }
    .sec-subtitle { font-size: 0.8rem; }
    .course-grid { grid-template-columns: 1fr; gap: 30px; }
    .course-name { font-size: 1.4rem; }
    .course-addr { font-size: 0.8rem; }
    .notice-item { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 10px; }
    .notice-title-wrap { align-items: flex-start; }
    .notice-title { max-width: 100%; white-space: normal; font-size: 16px; line-height: 1.4; }
    .notice-info { width: 100%; justify-content: space-between; margin-left: 0; margin-top: 5px; }
    .gallery-grid { grid-template-columns: 1fr; gap: 24px; }
    .btn-more { width: 100%; padding: 8px; font-size: 1rem; }
    .floating-bottom-bar { padding: 12px 15px; }
    .btn-floating { font-size: 1.2rem; padding: 12px 0; max-width: 100%; }
    .footer { padding: 60px 0 120px; gap: 40px; }
    .footer-logos img { height: 32px; }
    .footer-info { flex-direction: column; gap: 8px; font-size: 12px; padding: 15px; border-radius: 0; }
    .footer-info span:not(:last-child)::after { display: none; }
    .copy { font-size: 11px; font-weight: 500; }
    .apply-page-main { padding: 70px 15px;  background-size: 200%;}
    .apply-box { padding: 40px 20px; border-radius: 24px; }
    .apply-header { flex-direction: column; align-items: center; text-align: center; }
    .apply-title-wrap .title { flex-direction: column; font-size: 2rem; gap: 5px; }
    .apply-title-wrap .title span { font-size: 18px; }
    .apply-character { margin-top: -20px; width: 80px; right: 10px; }
    .apply-bg-top { max-width: 90%; }
    .info-list li { text-align: left; font-size: 0.95rem; }
    .apply-table, .apply-table thead, .apply-table tbody, .apply-table th, .apply-table td, .apply-table tr { display: block; width: 100%; text-align: center; }
    .apply-table thead { display: none; }
    .td-base { border-right: none; border-bottom: 2px dashed #eaeaea !important; padding: 30px 10px 20px !important; }
    .apply-table tbody tr { border-bottom: 1px solid #eaeaea; padding: 15px 0; }
    .apply-table tbody tr td:not(.td-base) { display: flex; justify-content: space-between; align-items: center; border-bottom: none; padding: 10px 15px; }
    .apply-table tbody tr td:not(.td-base)::before { content: '일시 : '; font-weight: bold; color: #666; font-size: 0.9rem; }
    .apply-table tbody tr td:last-child::before { display: none; }
    .apply-table tbody tr td:last-child { justify-content: center; padding-top: 0; }
    .btn-sm-apply { width: 100%; padding: 12px 0; font-size: 1rem; }
    .apply-divider { font-size: 1.1rem; margin: 30px 0; letter-spacing: 0.3em; }
    .board-top-info { flex-direction: column; align-items: flex-start; gap: 15px; padding-bottom: 20px; }
    .search-wrap { width: 100%; justify-content: space-between; gap: 10px; }
    .search-input-box { flex: 1; }
    .search-input-box input { width: 100%; }
    .view-title { font-size: 1.6rem; }
    .view-content { min-height: 200px; font-size: 1rem; }
    .nav-item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px 5px; }
    .nav-label { width: 100%; }
    .nav-label::after { display: none; }
    .nav-link { white-space: normal; word-break: keep-all; }
    .write-table th { width: 100%; display: block; padding: 15px 10px 5px; background: none; border: none; }
    .write-table td { width: 100%; display: block; padding: 5px 10px 15px; }
    .input-half { width: 100%; }
    .write-btn-wrap { flex-direction: column; gap: 10px; }
    .btn-cancel, .btn-submit { width: 100%; padding: 12px 0; text-align: center; }
    .select-category { width: 100%; }
    .view-category { font-size: 0.75rem; }
    .view-tags span { font-size: 0.9rem; }
    .prog-sub-title { font-size: 1.4rem; }
    .program-feature-grid { grid-template-columns: 1fr; }
    .prog-text-box .main-text { font-size: 1.1rem; }
    .program-notice-box { padding: 30px 20px; }
    .course-title { font-size: 1.6rem; flex-direction: column; gap: 10px; }
    .course-map-placeholder { min-height: 250px; }
    .course-description { padding: 20px; font-size: 1rem; }
    .course-address { font-size: 0.95rem; }
    .tab-btn { font-size: 15px; padding: 12px 5px; }
    .course-features { width: auto; }
    .course-features li { font-size: 14px; }
    .course-route { font-size: 13px; }
    .course-info { font-size: 16px; }
    
    
    .btn-top {     right: 10px;
    bottom: 90px;     width: 40px;
    height: 40px;}
    
    .view-text p img {padding-bottom: 15px;}
    
    .view-text p iframe { max-width: 100%;}
    
}



/* 탑 버튼 기본 상태 (숨김) */
.btn-top {
    /* 기존 스타일 (위치, 색상 등)은 그대로 두시고 아래 속성만 추가/수정하세요 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out; /* 부드럽게 나타나는 효과 */
    pointer-events: none; /* 숨겨져 있을 때 클릭 방지 */
    /* 예시: 부드럽게 위로 올라오게 하려면 아래 margin도 활용 가능 */
    /* margin-bottom: -20px; */ 
}

/* 스크롤 후 나타나는 상태 */
.btn-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* 나타났을 때 클릭 허용 */
    /* margin-bottom: 0; */
}


/* =========================================
   이미지 제어 유틸리티 클래스
   ========================================= */

/* 1. 반응형 기본 (가장 추천) - 부모 요소 크기에 맞춰 자동으로 줄어듦 */
.img-fluid {
    max-width: 720px;
    height: auto;
    display: block;
    margin: auto;
}


@media (max-width: 768px) {
    .img-fluid { max-width:100%;}
}


/* 2. 가로폭(Width) 퍼센트(%) 기반 조절 */
.img-w25 { width: 25%; height: auto; }
.img-w33 { width: 33.3333%; height: auto; }
.img-w50 { width: 50%; height: auto; }
.img-w75 { width: 75%; height: auto; }
.img-w100 { width: 100%; height: auto; }

/* 3. 고정 픽셀(px) 기반 조절 (수치는 필요에 따라 수정하세요) */
.img-sm { width: 150px; height: auto; }
.img-md { width: 300px; height: auto; }
.img-lg { width: 600px; height: auto; }

/* 4. 영역 맞춤 (object-fit) - 주로 정해진 박스 안에 이미지를 넣을 때 사용 */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율을 유지하면서 박스를 꽉 채움 (일부 잘릴 수 있음) */
}
.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 비율을 유지하면서 박스 안에 모두 들어옴 (여백 생길 수 있음) */
}

/* 5. 꾸밈 요소 (옵션) */
.img-rounded { border-radius: 12px; } /* 모서리 둥글게 */
.img-shadow { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } /* 가벼운 그림자 */