@charset "UTF-8";

/* =========================================================
   1. 기본 레이아웃 및 다크모드/줌 설정
   ========================================================= */

/* 줌 확대 */
#contents.zoom .main_wrap { zoom: 110%; }

/* 다크모드 활성화 시 */
.dark_active {
    background-color: #1e1e20;
}
.dark_active .section {
    background-color: #333; 
}


/* 다크모드 비주얼 섹션 */
.dark_active .section.full_cont.active .desc h2, 
.dark_active .text_section_style .desc .category,
.dark_active .section.full_cont.active .desc .txt,
.dark_active #contents,
.dark_active .visual_wrap .desc h2, 
.dark_active .visual_wrap .desc .msg, 
.dark_active .visual_wrap .desc .msg span {
    color: #fff !important;
}

/* 다크모드 섹션 공통 강제 적용 */
.dark_active .section,
.dark_active .text_section_style {
    background-color: #333 !important; 
}

/* 다크모드 텍스트 박스 스타일 */
.dark_active .text_section_style .desc,
.dark_active .text_section_style .inner_box {
    background-color: #282828 !important;
}
.dark_active .text_section_style .container {
	background-color: #282828 !important;
}

/* 다크모드 Visual 섹션 색상 강제 변경 */
.dark_active .visual_wrap .desc .vol {
    color: #fff !important;
    border-color: #fff !important;
}
.dark_active .visual_wrap .desc h2 {
    color: #fff !important;
}
.dark_active .desc h2 {
    color: #fff;
}
.dark_active .visual_wrap .desc {
    color: #fff !important;
    background-color: #333 !important;
}
.dark_active .visual_wrap .desc .msg {
    color: #fff !important;
}


/* =========================================================
   2. 섹션 공통 구조 (.section)
   ========================================================= */
.section {
    position: relative; 
    z-index: 1;
    overflow: hidden;
}

.container {
    max-width: 1450px;
    height: 100%;
    margin: 0 auto;
}
.container:after {content:''; clear: both; display: block;}

section .container h2 {
    font-size: 30px;
    font-weight: bold;
}

/* =========================================================
   3. 메인 비주얼 (.visual_wrap)
   ========================================================= */
.visual_wrap {
    width: 100vw;
    height: 100vh;
    position: relative;
    clip-path: inset(0); 
    
    /* 기존 배경 설정 무력화 (가상 요소가 대신함) */
    background: none !important;
    z-index: 1;
}
.visual_wrap:before {
    content: '';
    
    /* [핵심] background-attachment: fixed 대신 position: fixed를 사용 */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* PHP에서 넘겨준 이미지 변수 사용 */
    background-image: var(--bg-img);
    
    /* 화면 꽉 채우기 (확대 현상 없음!) */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    
    /* 컨텐츠보다 뒤에 배치 */
    z-index: -1;
    
    /* 모바일 성능 최적화 */
    will-change: transform;
}

.visual_wrap .desc {
    width: 100%; max-width: 1450px; margin: 0 auto;
    position: relative;
    transform: translate(0, -50%);
    left: 0; top: 50%;
    z-index: 10;
    border-radius: 10px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.8);
}

.visual_wrap .desc {
	text-align: center;
}

.visual_wrap .desc h2 {
	font-size: 6rem;
	font-weight: bold;
	color: #e84052;
}
.visual_wrap .desc .vol {
    font-size: 3rem; font-weight: normal; color: #954F98;
    display: inline-block;
    border-top: 1px solid #954F98; border-bottom: 1px solid #954F98;
    line-height: 2;
}
.visual_wrap .desc .msg { font-size: 3rem; font-weight: 400; color: #954F98; line-height: 1.4; text-align: center;}
.visual_wrap .desc .msg span { font-size: 20px; font-weight: 400; color: #e84052; }

.visual_wrap .scroll {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 3rem; padding: 2rem;
    text-transform: capitalize; color: #000; letter-spacing: 0; font-size: 1.5rem;
}
.visual_wrap .scroll:before, .visual_wrap .scroll:after {
    position: absolute; left: 50%; transform: translateX(-50%);
    content: ''; border: 6px solid transparent; border-top: 6px solid #000;
}
.visual_wrap .scroll:before { bottom: 1rem; animation: scroll_opacity 1s 0s alternate infinite; }
.visual_wrap .scroll:after { bottom: 0; animation: scroll_opacity 1s .5s normal infinite; }

@keyframes scroll_opacity {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* =========================================================
   4. 텍스트형 섹션 (.text_section_style)
   ========================================================= */
.text_section_style {
    position: relative;
    /* 섹션 높이를 내용물 + 여백만큼 자동으로 늘리거나, 최소 높이 지정 */
    min-height: 100vh; /* 화면 꽉 차게 (선택사항) */
    display: flex;     /* 내용물(.desc)을 정중앙에 놓기 위함 */
    align-items: center;
    justify-content: center;
    padding: 100px 0 0 0;
    box-sizing: border-box;
}
.text_section_style .container {
    margin: 10rem auto 0;
    border-radius: 25px;
}
/* [1] .bg는 배경이 보일 '창문' 역할만 합니다 (이미지 없음) */
.text_section_style .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;

    /* [핵심] 고정된 자식요소(::before)가 이 영역 밖으로 넘치지 않게 자름 */
    clip-path: inset(0);

    /* 기존의 배경 관련 속성은 모두 제거하거나 무력화 */
    background: none !important;
}

/* [2] .bg::before 가상요소가 실제 '고정된 배경' 역할을 합니다 */
.text_section_style .bg::before {
    content: '';
    display: block;

    /* [핵심] background-attachment: fixed 대신 position: fixed 사용 */
    /* 이렇게 하면 모바일에서도 확대되지 않고 화면에 딱 고정됩니다 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;  /* 화면 전체 너비 */
    height: 100%; /* 화면 전체 높이 */

    /* 배경 설정 이동 */
    /* (이미지 주소는 PHP 파일의 <style> 태그에서 덮어씌워집니다) */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: -1;
    will-change: transform; /* 모바일 성능 최적화 */
}
.text_section_style .desc {
    position: relative;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    
    padding: 6rem;
    
    border-radius: 20px; /* 바깥쪽 둥글게 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
}
.text_section_style .inner_box {
    width: 100%;
    height: 100%;
    
    background-color: white;
    padding: 4rem; 
    
    box-sizing: border-box;
    /* 안쪽 상자도 둥글게 할지 선택 */
    border-radius: 10px; 
}
.text_section_style .desc::after {
    content: ''; display: block;
    width: 80px; height: 80px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    position: absolute;
    left: 50%; transform: translate(-50%, -50%);
    top: 12%; 
    /* 혹시 모를 마진 초기화 */
    margin: 0;
}
.text_section_style .desc .category {  font-weight: bold; font-size: 58px; text-align: center;}
.text_section_style .desc h2 {
	font-size: 2.5em;
	color: #353535;
	text-align: center;
	
	display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄까지만 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    line-height: 1.4; 
    max-height: calc(1.4em * 2); /* line-height * 줄수 */
}
.text_section_style .desc .txt { 
	font-size: 1.4em;
	margin-top: 2rem;
	font-weight: 400;
	text-align: justify;
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    line-height: 1.4; 
    max-height: calc(1.4em * 3); /* line-height * 줄수 */
}

.text_section_style .detail_link:hover .category {
    text-decoration: underline;
    text-underline-offset: 12px; /* 글자와 밑줄 사이 간격 */
    text-decoration-thickness: 3px;
}


/* =========================================================
   5. 갤러리 섹션 (.gallery_type_style)
   ========================================================= */
.gallery_type_style {
    position: relative; 
}
.gallery_type_style strong {
    font-size: 22px; margin-bottom: 50px; display: inline-block; font-weight: 500;
}
.gallery_type_style strong img { margin-right: 20px; vertical-align: middle; }
.gallery_type_style h2 {
    color: #333;
    margin-bottom: 30px;
}

/* 갤러리 아이템 박스 */
.container .imgwrap { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-start; }
.container .imgwrap > div { width: 32%; box-sizing: border-box; margin-bottom: 20px; }

.gallery_item_box {
    border-radius: 20px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s;
    min-height: 300px; padding-bottom: 20px;
}
.gallery_item_box:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.gallery_item_box a { display: block; height: 100%; }
.gallery_item_box figure { margin: 0; padding: 20px 20px 0 20px; width: 100%; height: 200px; overflow: hidden; position: relative; }
.gallery_item_box img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }


.gallery_type_style,
.pdf_type_style {
	padding: 60px 40px 75px;
}


/* =========================================================
   6. PDF 다운로드 섹션 (.pdf_type_style) - [ID 제거됨]
   ========================================================= */
/* 기존 #section5 -> .pdf_type_style 로 변경 */
.pdf_type_style { overflow: hidden; background-color: #f9f9f9; }
.pdf_type_style h3 {
    font-size: 35px; font-weight: 400; display: inline-block;
    border-top: 1px solid #000; padding-top: 10px; margin-bottom: 40px;
}
.pdf_type_style .pdf_wrap {
    display: flex; align-items: center; justify-content: space-between;
    height: 85vh; position: relative;
}
.pdf_type_style .pdf_wrap .link {
    font-size: 20px; border: 1px solid #000; padding: 4px 8px;
    display: inline-block; background: #fff; transition: all 0.4s;
}
.pdf_type_style .pdf_wrap .link:hover { background-color: #2098D1; color: white; border-color: #2098D1; }
.pdf_type_style .pdf_wrap .pdf_img img { max-width: 40vw; box-shadow: 10px 10px 20px rgba(0,0,0,0.2); transition: transform 0.5s; }
.pdf_type_style .pdf_wrap .pdf_img:hover img { transform: scale(1.05); }


.dark_active .section h2,
.dark_active .section h3,
.dark_active .section h3,
.dark_active .text_section_style .desc h2,
.dark_active .text_section_style .desc .txt,
.dark_active .gallery_type_style h2 {
    color: #fff !important;
}

.dark_active .section h3 {
	border-color: #fff !important;
}


@keyframes pdf_float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); } /* 위로 15px 이동 */
    100% { transform: translateY(0px); }
}

/* 2. PDF 이미지에 애니메이션 적용 */
.pdf_type_style .pdf_wrap .pdf_img img {
    /* 기존 그림자 효과 유지 */
    box-shadow: 10px 10px 30px rgba(0,0,0,0.3);
    
    /* [핵심] 애니메이션 적용: 3초 동안 부드럽게 무한 반복 */
    animation: pdf_float 3s ease-in-out infinite;
    
    /* 호버 시 확대 효과 등을 위해 트랜지션 유지 */
    transition: transform 0.3s; 
}




/* =========================================
   안내견 프로그레스 바 스타일
   ========================================= */
#guide_progress_wrap {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 60px;
    z-index: 999;
    pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #eee;
}

#guide_progress_wrap.active {
    opacity: 1; visibility: visible;
}

#guide_progress_wrap .progress_track {
    position: absolute; bottom: 0; left: 0;
    height: 5px; background: #2d8acd;
    width: 0%; transition: width 0.1s linear;
}

/* 안내견 아이콘 스타일 */
#guide_progress_wrap .walking_dog {
    position: absolute; bottom: 8px; /* 바닥 위치 조정 */
    left: 0;
    font-size: 30px; 
    color: #2d8acd;
    z-index: 10;
    transform: translateX(-50%); /* 중심점 맞춤 */
}
/* 강아지 걷는 애니메이션 */
@keyframes dog_walk {
    0%, 100% { transform: translateY(0) translateX(-50%); }
    50% { transform: translateY(-5px) translateX(-50%); }
}
#guide_progress_wrap.active .walking_dog {
	min-width: 35px;
    display: inline-block;
    animation: dog_walk 0.5s infinite;
}


/* =========================================
   [NEW] 헤더 사이드바 변신 스타일
   ========================================= */
/* =========================================
   [수정] 헤더 스타일 및 애니메이션 (오른쪽 기준)
   ========================================= */
#main_header {
    white-space: nowrap; overflow: hidden;
    position: fixed; top: 0; right: 0; left: auto;
    width: 100%; height: 80px; z-index: 1000;
    background: transparent;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    background: rgba(0, 0, 0, 0.2);
}
#main_header .header {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1450px; margin: 0 auto; height: 100%; padding: 0 20px; width: 100%;
}

/* --- 사이드바 모드 --- */
#main_header.side_mode {
    top: 50%; right: 15px; left: auto !important;
    width: 60px; height: auto;
    transform: translateY(-50%);
    background: #fff; border-radius: 30px;
    box-shadow: -5px 5px 20px rgba(0,0,0,0.15);
    padding: 10px 0; border: 1px solid #eee;
}
#main_header.side_mode .header { flex-direction: column; padding: 0; height: auto; }
#main_header.side_mode .header__tit,
#main_header.side_mode .webzine_issue { display: none; }
#main_header.side_mode .header__util {
    display: flex; flex-direction: column; gap: 15px;
    align-items: center; justify-content: center;
    width: 100%; margin: 10px 0;
    transition: background 0.2s;
}



/* 솔리드 기어 본체 */
.btn_admin_gear .txt {
    display: inline-block;
}

.btn_admin_gear svg {
    display: none; /* 아이콘 숨김 */
}
#main_header.side_mode .btn_admin_gear .txt {
    display: none; /* 텍스트 숨김 */
}

#main_header.side_mode .btn_admin_gear svg {
    display: block; /* 아이콘 보임 */
    width: 17px;
    height: 17px;
    
    margin: 0; /* 텍스트가 없으니 여백 제거 */
}

/* 사이드 모드일 때 버튼 모양 미세 조정 (선택사항: 원형에 가깝게) */
#main_header.side_mode .btn_admin_gear {
    padding: 0;      /* 패딩을 줄여서 */
    width: 30px;     /* 정사각(원형) 비율 유지 */
    border-radius: 50%;
}



/* 텍스트 숨김 */
#main_header.side_mode .icon_btn .txt { display: none; }

/* 공통 버튼 모양 */
#main_header.side_mode .icon_btn {
    width: 40px; height: 40px;
    border-radius: 50%; border: 1px solid #ddd;
    display: flex; align-items: center; justify-content: center;
    background-color: #fff; transition: background 0.3s;
    position: relative; /* CSS 그림을 위해 필수 */
}
#main_header.side_mode .icon_btn:hover { background: #f5f5f5; }

/* 1. 명암반전 아이콘 */
#main_header.side_mode .dark::before {
    content: ''; display: block;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid #333;
    /* 그라디언트로 반반 색칠 */
    background: linear-gradient(90deg, #333 50%, #fff 50%);
}

/* 2. 홈 버튼 아이콘 (CSS로 집 그리기) */
#main_header.side_mode .nav_btn::before {
    content: ''; display: block;
    width: 0; height: 0;
    /* 지붕 (삼각형) */
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 10px solid #333;
    position: absolute; top: 9px; left: 50%;
    transform: translateX(-50%);
}
#main_header.side_mode .nav_btn::after {
    content: ''; display: block;
    width: 12px; height: 9px;
    background: #333; /* 몸통 (네모) */
    position: absolute; bottom: 10px; left: 50%;
    transform: translateX(-50%);
}

/* 3. 맨 위로(TOP) 버튼 아이콘 (화살표 그리기) */
#main_header.side_mode .top_btn::before {
    content: ''; display: block;
    width: 0; height: 0;
    /* 화살표 머리 (세모) */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #333;
    position: absolute; top: 11px; left: 50%;
    transform: translateX(-50%);
}
#main_header.side_mode .top_btn::after {
    content: ''; display: block;
    width: 2px; height: 10px;
    background: #333; /* 화살표 기둥 */
    position: absolute; bottom: 11px; left: 50%;
    transform: translateX(-50%);
}

/* 평소 상단 헤더일 때는 TOP 버튼 숨기기 */
#main_header:not(.side_mode) .top_btn {
    display: none;
}



/* =========================================================
   반응형
   ========================================================= */
@media (max-width: 1450px) {
    .visual_wrap .desc { width: 80%; padding: 40px; text-align: center; }
    .text_section_style .desc {
		width: 80%;
	}
    html {
		font-size: 9px;
	}
}

@media (max-width: 1100px) {
    .text_section_style { padding: 40rem 0 3rem; }
    .text_section_style .inner_box { padding: 4rem 1.5rem; }
    .text_section_style .desc { padding: 4rem; }
    .text_section_style .desc h2 { font-size: 1.8em; }
    .text_section_style .desc .category {
		font-size: 2.5em;
	}
	.text_section_style .desc .txt {
		font-size: 1.25em;
	}
    .text_section_style .desc:before { width: 100%; transform: none; }
    html {
		font-size: 8px;
	}
	.text_section_style .desc::after {
		width: 70px;
		height: 70px;
	}
}

@media (max-width: 850px) {
    .container .imgwrap > div { width: 48%; }
    .visual_wrap .desc { padding:15px; transform: translate(-50%, 0); left: 50%; margin: 0;}
    .visual_wrap .desc h2 {
		font-size: 4rem;
	}
    .visual_wrap .desc .msg { display: none; }
    .pdf_type_style .pdf_wrap { flex-direction: column-reverse; height: auto; }
    .pdf_type_style .pdf_wrap .pdf_img { margin-bottom: 30px; }
    html {
		font-size: 7px;
	}
	#main_header.side_mode {
		top: 83%;
	}
	.text_section_style .desc::after {
		width: 60px;
		height: 60px;
		top: 10%;
	}
}

@media (max-width: 540px) {
    .container .imgwrap > div { width: 100%; }
    .text_section_style .desc h2 { font-size: 1.2em; }
    .visual_wrap .desc h2 {
		font-size: 3rem;
	}
	.text_section_style .inner_box { padding: 3rem 1rem; }
    .text_section_style .desc { padding: 3rem; }
	
    .text_section_style .desc .category,
    section .container h2 {
		font-size: 1.65em;
	}
	
	.gallery_type_style strong {
		margin-bottom: 20px;
		font-size: 2rem;
	}
	
	.text_section_style .desc .txt {
		font-size: 1.1em;
	}
	
	.text_section_style .desc::after {
		width: 50px;
		height: 50px;
		top: 9%
	}
	
    html {
		font-size: 6px;
	}
}