@charset "utf-8";

/**
 * ZZAN Stylish 레이아웃 메인 스타일시트
 * 제작: ZZAN Studio (wsl@zzan.me)
 */

/* 1. 기본 초기화 (Reset) */
* { margin:0; padding:0; box-sizing:border-box; }
body { 
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    font-size:16px; line-height:1.6; color:#333; background:#fff; overflow-x:hidden; transition:background 0.3s, color 0.3s;
    /* 삼성 인터넷 등 모바일 브라우저 강제 다크모드 방지 */
    color-scheme: light only;
    forced-color-adjust: none;
}
a { text-decoration:none; color:inherit; transition:0.3s; }
ul, li { list-style:none; }
img { max-width:100%; height:auto; vertical-align:middle; }
button { cursor:pointer; background:none; border:none; outline:none; }

/* 2. 테마 색상 정의 (Theme Color) */
:root {
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-800: #343a40;
    --gray-900: #212529;
}

/* 3. 다크 테마 스타일 (Dark Theme) */
:root {
    --dark-bg: #121212;
    --dark-surface: #1a1a1a;
    --dark-border: #333333;
    --dark-text: #e0e0e0;
}

body.theme-dark {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.logo span, 
.gnb > ul > li > a,
.slide-content h2,
.slide-text h2,
.slide-text .cate,
.sub-title-area h2,
.m-logo,
.m-btn-login,
.section-title,
.map-info-box .info-item .text strong,
body.theme-dark .logo span, 
body.theme-dark .gnb > ul > li > a,
body.theme-dark .slide-content h2,
body.theme-dark .slide-text h2,
body.theme-dark .slide-text .cate,
body.theme-dark .sub-title-area h2,
body.theme-dark .m-logo,
body.theme-dark .m-btn-login,
body.theme-dark .section-title,
body.theme-dark .map-info-box .info-item .text strong { font-family: var(--title-font) !important; }

/*// 다크 테마 시 모든 섹션의 배경색 강제 적용 (라이트 모드 !important 우회) */
body.theme-dark .container,
body.theme-dark .sub-wrapper-outer,
body.theme-dark .sub-content,
body.theme-dark .sub-navigation,
body.theme-dark .main-concept-section,
body.theme-dark .main-news-section,
body.theme-dark .main-link-section,
body.theme-dark .main-map-section { background-color: var(--dark-bg) !important; color: var(--dark-text) !important; }

body.theme-dark .header { background:rgba(18, 18, 18, 0.9) !important; border-bottom:1px solid var(--dark-border) !important; }
body.theme-dark .header.scrolled { background:rgba(18, 18, 18, 0.95) !important; border-bottom-color: var(--dark-border) !important; }
body.theme-dark .gnb > ul > li > a { color:#fff !important; }
body.theme-dark .user-menu, 
body.theme-dark .user-menu a { color:#bbb !important; }
body.theme-dark .login-item a, 
body.theme-dark .logout-item a { border-color: #444 !important; color: #fff !important; }
body.theme-dark .login-item a:hover, 
body.theme-dark .logout-item a:hover { background: #fff !important; color: #111 !important; border-color: #fff !important; }

/*// 다크 테마 시 카드 및 박스 요소 제어 */
body.theme-dark .quick-list { border-color: var(--dark-border) !important; }
body.theme-dark .quick-list li { border-color: var(--dark-border) !important; }
body.theme-dark .quick-list li a .name { color: #fff !important; }
body.theme-dark .concept-item .text-box { background: var(--dark-surface) !important; border-color: var(--dark-border) !important; box-shadow: -10px 20px 50px rgba(0,0,0,0.5) !important; }
body.theme-dark .concept-desc { color: #aaa !important; }
body.theme-dark .concept-tit { color: #fff !important; }
body.theme-dark .news-item { background: var(--dark-surface) !important; border-color: var(--dark-border) !important; }
body.theme-dark .news-tit { color: #fff !important; }
body.theme-dark .news-thumb { border-bottom-color: var(--dark-border) !important; }
body.theme-dark .news-item:hover { border-color: var(--point-color) !important; }
body.theme-dark .btn-concept { border-color: #fff !important; color: #fff !important; }
body.theme-dark .btn-concept:hover { background: #fff !important; color: #111 !important; }
body.theme-dark .link-list-wrap .widgetContent .box .title { color: #fff !important; }
body.theme-dark .link-list-wrap .widgetContent .box .content { color: #aaa !important; }
body.theme-dark .map-info-box { background: var(--dark-surface) !important; }
body.theme-dark .map-info-box .info-item .text p { color: #fff !important; }
body.theme-dark .footer { background: #000 !important; border-top-color: var(--dark-border) !important; }

/*// 다크 테마 시 추가 요소 제어 (이미지 썸네일, 날짜 등) */
body.theme-dark .news-date { color: #888 !important; }
body.theme-dark .link-stars { color: #ffc107 !important; }
body.theme-dark .info-item .text strong { color: var(--point-color) !important; }
body.theme-dark .copyright { color: #666 !important; }
body.theme-dark .footer-gnb a { color: #aaa !important; }
body.theme-dark .footer-logo span { color: #fff !important; }

/* 4. 헤더 영역 (Header) */
.header { position:fixed; top:0; left:0; width:100%; height:80px; background:rgba(255, 255, 255, 0); z-index:2000; transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1); border-bottom:1px solid rgba(0,0,0,0.05); }
.header.scrolled { height: 60px; background:rgba(255, 255, 255, 0.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color: #eee; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
body.theme-dark .header.scrolled { background:rgba(18, 18, 18, 0.95); border-bottom-color: #333; }

.header-inner { max-width:1440px; margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 40px; gap:20px; transition: padding 0.4s; }
.header.scrolled .header-inner { padding: 0 40px; }

.logo { flex-shrink:0; min-width:150px; position: relative; transition: transform 0.4s; }
.header.scrolled .logo { transform: scale(0.9); }
.logo a { display: block; position: relative; height: 35px; }
.logo img { height:35px; position: absolute; top: 0; left: 0; transition: opacity 0.4s ease; opacity: 0; visibility: hidden; }
.logo span { font-family: 'Syne', sans-serif; font-size:24px; font-weight:800; letter-spacing:-2px; color:var(--point-color); display: block; height: 35px; line-height: 35px; text-transform: uppercase; }

/*// 기본 로고 가시성 제어 (전환 애니메이션) */
.header .logo-light { opacity: 1; visibility: visible; }
.header .logo-dark { opacity: 0; visibility: hidden; }
body.theme-dark .header .logo-light { opacity: 0 !important; visibility: hidden !important; }
body.theme-dark .header .logo-dark { opacity: 1 !important; visibility: visible !important; }

/*// 메인 풀페이지 배너 시 로고 제어 */
body.site-main .zzan-slider + .main-content, 
body.site-main .header:not(.scrolled) { /* 메인페이지 상단 투명 상태 */ }

body:has(.zzan-slider) .header:not(.scrolled) .logo-light,
body:has(.zzan-slider) .header:not(.scrolled) .logo-dark { opacity: 0 !important; visibility: hidden !important; }
body:has(.zzan-slider) .header:not(.scrolled) .logo-banner { opacity: 1 !important; visibility: visible !important; }

/*// 배너 전용 로고가 없을 경우 대비 (텍스트 로고 색상) */
body:has(.zzan-slider) .header:not(.scrolled) .logo span { color: #fff !important; }

/* 5. 네비게이션 (GNB) */
.gnb { flex:1; display:flex; justify-content:center; height: 100%; }
.gnb > ul { display:flex; gap:5px; height: 100%; }
.gnb > ul > li { position:relative; height: 100%; display: flex; align-items: center; }
.gnb > ul > li > a { 
    font-family: 'Syne', sans-serif;
    font-size:14px; 
    font-weight:700; 
    color:#111; 
    padding:0 20px; 
    height: 100%;
    display:flex; 
    align-items: center;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
    z-index: 1;
}

.gnb > ul > li > a span { position: relative; z-index: 2; }

/*// 미니멀 사각 포인트 바 애니메이션 */
.gnb > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 25px; /* 기본 상태 바닥에서 25px */
    left: 50%;
    width: 0;
    height: 4px;
    background: var(--point-color);
    transform: translateX(-50%);
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
    z-index: 1;
}
.header.scrolled .gnb > ul > li > a::after { bottom: 15px; }

.gnb > ul > li:hover > a::after,
.gnb > ul > li.active > a::after {
    width: 25px; /* 짧고 굵은 사각 바 */
}

.gnb > ul > li:hover > a,
.gnb > ul > li.active > a { 
    color: var(--point-color) !important; 
}

/*// 투명 헤더 스타일 (배너 위) */
body:has(.zzan-slider) .header:not(.scrolled) .gnb > ul > li > a,
body:has(.sub-visual) .header:not(.scrolled) .gnb > ul > li > a { color: #fff !important; }

body:has(.zzan-slider) .header:not(.scrolled) .gnb > ul > li:hover > a,
body:has(.sub-visual) .header:not(.scrolled) .gnb > ul > li:hover > a,
body:has(.zzan-slider) .header:not(.scrolled) .gnb > ul > li.active > a,
body:has(.sub-visual) .header:not(.scrolled) .gnb > ul > li.active > a { color: var(--point-color) !important; }

/*// 서브페이지 비주얼 상단 겹침 처리 */
body:has(.sub-visual) .header { border-bottom: none; }
body:has(.sub-visual:not(.type-content_only)) .sub-visual { margin-top: -80px; }

/*// 서브페이지 비주얼 없을 때 (컨텐츠만 사용 시) 상단 여백 보정 (헤더 80px 높이만큼만 띄움) */
body[data-sub-visual='content_only'] .sub-wrapper-outer { padding-top: 80px !important; }
@media screen and (max-width: 1024px) {
    body[data-sub-visual='content_only'] .sub-wrapper-outer { padding-top: 60px !important; }
}

/* 5-1. PC 서브 메뉴 (Dropdown) */
.sub-menu { position:absolute; top:100%; left:0; width:220px; background:#fff; box-shadow:0 15px 40px rgba(0,0,0,0.12); padding:15px 0; display:none; border-radius:0; border-top: 2px solid var(--point-color); }
body.theme-dark .sub-menu { background: var(--dark-surface) !important; box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important; }
.gnb > ul > li:hover .sub-menu { display:block; animation: m-fadeInUp 0.3s ease forwards; }

@keyframes m-fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.sub-menu li a { display:block; padding:12px 20px; font-size:15px; color:#555; }
body.theme-dark .sub-menu li a { color:#bbb !important; }
.sub-menu li:hover > a { background:var(--gray-100); color:var(--point-color); }
body.theme-dark .sub-menu li:hover > a { background: #222 !important; color: var(--point-color) !important; }

/* 3차 메뉴 (Side to Sub) */
.sub-sub-menu { position:absolute; top:0; left:100%; width:200px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,0.1); padding:10px 0; display:none; border-radius:0; border-left:1px solid #eee; }
body.theme-dark .sub-sub-menu { background: var(--dark-surface) !important; border-left-color: #333 !important; }
.sub-menu li:hover .sub-sub-menu { display:block; }

/* 6. 헤더 우측 유틸리티 (Login, Profile) */
.header-right { display:flex; align-items:center; gap:20px; flex-shrink:0; justify-content:flex-end; }
.user-menu { display:flex; align-items: center; gap:20px; font-size:13px; color:#666; }

/*// LOGIN / LOGOUT Button (Square) */
.login-item a, .logout-item a { 
    display: inline-block; padding: 6px 16px; border: 1px solid #111; 
    font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #111; 
    transition: all 0.3s; border-radius: 0; 
}
/*// 스크롤 후/일반 상태 롤오버: 배경 검정, 글자 흰색 */
.login-item a:hover, .logout-item a:hover { background: #111 !important; color: #fff !important; border-color: #111 !important; }

/*// Transparent Header Mode (메인 배너 / 서브 비주얼 위) */
body:has(.zzan-slider) .header:not(.scrolled) .login-item a,
body:has(.zzan-slider) .header:not(.scrolled) .logout-item a,
body:has(.sub-visual.type-image) .header:not(.scrolled) .login-item a,
body:has(.sub-visual.type-image) .header:not(.scrolled) .logout-item a,
body:has(.sub-visual.type-media) .header:not(.scrolled) .login-item a,
body:has(.sub-visual.type-media) .header:not(.scrolled) .logout-item a { border-color: rgba(255,255,255,0.6); color: #fff; }

/*// 스크롤 전 투명상태 롤오버: 배경 흰색, 글자 검정 */
body:has(.zzan-slider) .header:not(.scrolled) .login-item a:hover,
body:has(.zzan-slider) .header:not(.scrolled) .logout-item a:hover,
body:has(.sub-visual.type-image) .header:not(.scrolled) .login-item a:hover,
body:has(.sub-visual.type-image) .header:not(.scrolled) .logout-item a:hover,
body:has(.sub-visual.type-media) .header:not(.scrolled) .login-item a:hover,
body:has(.sub-visual.type-media) .header:not(.scrolled) .logout-item a:hover { background: #fff !important; color: #111 !important; border-color: #fff !important; }

/*// Profile Layout (Post-Login) */
.profile-item { position: relative; display: flex; align-items: center; }
.btn-profile-toggle { display: flex; align-items: center; gap: 10px; padding: 0; color: inherit; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.3s; }
.btn-profile-toggle:hover { color: var(--point-color); }

.profile-img, .m-profile-img { width: 32px; height: 32px; background: #f0f0f0; border: 1px solid #eee; overflow: hidden; position: relative; flex-shrink: 0; border-radius: 0; }
.profile-img img, .m-profile-img img { width: 100%; height: 100%; object-fit: cover; }
.profile-default { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ccc; }
.profile-default svg { width: 20px; height: 20px; }

/*// Profile Floating Layer (Square) */
.profile-layer { 
    position: absolute; top: 100%; right: 0; width: 180px; 
    background: #fff !important; border: 1px solid #ddd; box-shadow: 0 15px 35px rgba(0,0,0,0.2); 
    z-index: 1000; padding: 10px 0; border-radius: 0;
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s;
}
body.theme-dark .profile-layer { background: var(--dark-surface) !important; border-color: #333 !important; box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important; }

/*// 투명 헤더일 때 레이어 가시성 보강을 위해 위치 살짝 조정 */
body:has(.zzan-slider) .header:not(.scrolled) .profile-layer { margin-top: 10px; border-color: #fff; }
body.theme-dark:has(.zzan-slider) .header:not(.scrolled) .profile-layer { border-color: #444; }

.profile-item.active .profile-layer { opacity: 1; visibility: visible; transform: translateY(0); }

/*// 레이어 내부 텍스트 색상 강제 지정 (흰색 배경에 검정 글자) */
.profile-layer ul li a { display: block !important; padding: 12px 20px !important; font-size: 13px !important; color: #111 !important; font-weight: 600 !important; transition: 0.2s !important; text-align: left; }
body.theme-dark .profile-layer ul li a { color: #eee !important; }

.profile-layer ul li a:hover { background: var(--gray-100) !important; color: var(--point-color) !important; }
body.theme-dark .profile-layer ul li a:hover { background: #222 !important; color: var(--point-color) !important; }

/*// 메인페이지 상단/서브 비주얼 투명 상태에서 레이어 내부 글씨가 흰색으로 변하는 문제 해결 */
body:has(.zzan-slider) .header:not(.scrolled) .profile-layer ul li a,
body:has(.sub-visual.type-image) .header:not(.scrolled) .profile-layer ul li a,
body:has(.sub-visual.type-media) .header:not(.scrolled) .profile-layer ul li a { color: #111 !important; }
body.theme-dark:has(.zzan-slider) .header:not(.scrolled) .profile-layer ul li a,
body.theme-dark:has(.sub-visual.type-image) .header:not(.scrolled) .profile-layer ul li a,
body.theme-dark:has(.sub-visual.type-media) .header:not(.scrolled) .profile-layer ul li a { color: #eee !important; }

body:has(.zzan-slider) .header:not(.scrolled) .profile-layer ul li a:hover,
body:has(.sub-visual.type-image) .header:not(.scrolled) .profile-layer ul li a:hover,
body:has(.sub-visual.type-media) .header:not(.scrolled) .profile-layer ul li a:hover { color: var(--point-color) !important; }
body.theme-dark:has(.zzan-slider) .header:not(.scrolled) .profile-layer ul li a:hover,
body.theme-dark:has(.sub-visual.type-image) .header:not(.scrolled) .profile-layer ul li a:hover,
body.theme-dark:has(.sub-visual.type-media) .header:not(.scrolled) .profile-layer ul li a:hover { color: var(--point-color) !important; background: #222 !important; }

/* 7. 메인 비주얼 영역 (Main Visual) */
.main-visual { width:100%; height:100vh; min-height:600px; overflow:hidden; position:relative; background:#111; margin-top:0; padding-top:0; }
.main-visual .swiper-container { width:100%; height:100%; position:relative; }
.main-visual .swiper-slide { width:100vw; height:100vh; background-size:cover; background-position:center; background-repeat:no-repeat; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.main-visual .swiper-slide::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:2; }


.slide-content { position:relative; z-index:20; text-align:center; color:#fff; max-width:1100px; padding:0 20px; width:100%; display: flex !important; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; }

.slide-content .badge { display:inline-block; padding:8px 20px; background:var(--point-color); color:#fff; font-size:14px; border-radius:0; margin-bottom:25px; text-transform:uppercase; font-weight:700; letter-spacing:1px; box-shadow: 0 4px 15px rgba(var(--point-color-rgb), 0.3); }
.slide-content h2 { font-family: 'Syne', sans-serif; font-size:80px; font-weight:800; line-height:1.1; margin-bottom:30px; letter-spacing:-4px; opacity:1; transform:translateY(0); transition:all 0.8s cubic-bezier(0.2, 1, 0.3, 1); word-break: keep-all; }
.slide-content p { font-size:22px; margin-bottom:45px; opacity:1; transform:translateY(0); transition:all 0.8s 0.2s cubic-bezier(0.2, 1, 0.3, 1); font-weight:300; }
.slide-content .badge { opacity:1; transform:translateY(0); transition:all 0.8s cubic-bezier(0.2, 1, 0.3, 1); }
.slide-content .btn-more { display:inline-block; padding:18px 50px; border:1px solid #fff; color:#fff; font-size:16px; font-weight:600; opacity:1; transform:translateY(0); transition:opacity 0.8s 0.4s cubic-bezier(0.2, 1, 0.3, 1), transform 0.8s 0.4s cubic-bezier(0.2, 1, 0.3, 1); border-radius: 0; }
.slide-content .btn-more:hover { background:#fff; color:#000; transition: 0.3s !important; }

/* Active Slide Animation */
.swiper-slide-active .slide-content h2,
.swiper-slide-active .slide-content p,
.swiper-slide-active .slide-content .badge,
.swiper-slide-active .slide-content .btn-more { opacity:1; transform:translateY(0); }

/* Slider Controls */
.swiper-controls-wrap { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); z-index:110; display:flex; align-items:center; }
.swiper-controls-inner { display:flex; align-items:center; background:rgba(0,0,0,0.5); backdrop-filter:blur(15px); padding:12px 30px; border-radius:0; border:1px solid rgba(255,255,255,0.2); gap:25px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }

.btn-swiper-prev, .btn-swiper-next { width:40px; height:40px; color:#fff; display:flex !important; align-items:center; justify-content:center; transition:0.3s; font-size:18px; cursor:pointer; opacity:0.7; }
.btn-swiper-prev:hover, .btn-swiper-next:hover { opacity:1; transform:scale(1.1); }
.btn-swiper-prev.swiper-button-lock, .btn-swiper-next.swiper-button-lock { display: flex !important; }
.btn-swiper-prev::before { content:'\e93c'; font-family:'xeicon'; }
.btn-swiper-next::before { content:'\e93f'; font-family:'xeicon'; }
/* If xeicon is not loaded, use simple arrows as fallback */
.btn-swiper-prev::before { content:'\2190'; } /* Unicode Left Arrow */
.btn-swiper-next::before { content:'\2192'; } /* Unicode Right Arrow */

.swiper-pagination-bullets.swiper-pagination-horizontal { position:static; width:auto; display:flex !important; gap:10px; align-items:center; }
.swiper-pagination-bullets.swiper-pagination-horizontal.swiper-pagination-lock { display: flex !important; }
.swiper-pagination-bullet { width:8px; height:8px; background:#fff; opacity:0.3; margin:0 !important; transition:0.3s; border-radius: 0; }
.swiper-pagination-bullet-active { width:24px; border-radius:0; background:var(--point-color); opacity:1; }

.swiper-pagination-fraction { color:#fff; font-size:16px; font-weight:600; font-family:'Montserrat', sans-serif; letter-spacing:1px; display: flex !important; align-items: center; gap: 5px; }
.swiper-pagination-fraction.swiper-pagination-lock { display: flex !important; }
.swiper-pagination-fraction .swiper-pagination-current { color: var(--point-color); font-size: 20px; font-weight: 800; }

.btn-swiper-toggle { width:40px; height:40px; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0.7; transition:0.3s; }
.btn-swiper-toggle:hover { opacity:1; transform:scale(1.1); }
.btn-swiper-toggle.pause::before { content:'\e9a1'; font-family:'xeicon'; font-size:16px; }
.btn-swiper-toggle.play::before { content:'\e9a2'; font-family:'xeicon'; font-size:16px; }
/* Fallback if no xeicon */
.btn-swiper-toggle.pause::before { content:'||'; font-family:sans-serif; font-size:12px; font-weight:bold; }
.btn-swiper-toggle.play::before { content:'\25B6'; font-family:sans-serif; font-size:14px; }

/* Time Progress Bar (ZZAN_NEONLIME 이식) */
.swiper-time-progress, .zzan-slider-progress { position:absolute; bottom:0; left:0; width:100%; height:4px; background:rgba(255,255,255,0.2); z-index:100; overflow:hidden; }
.swiper-time-progress .progress-bar, .zzan-slider-progress .progress-bar { height:100%; background:var(--point-color); width:0; transition-property: width; transition-timing-function: linear; }

/* 8. 서브페이지 비주얼 (Sub Visual) */
.sub-visual { width:100%; height:400px; position:relative; display:flex; align-items:center; justify-content:center; background:#111 !important; overflow:hidden; }
.sub-visual-inner { width:100%; height:100%; background-size:cover; background-position:center; position:relative; display:flex; align-items:center; justify-content:center; overflow: hidden; }
.sub-visual-inner::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); pointer-events: none; }
.sub-title-area { position:relative; z-index:10; color:#fff; text-align:center; padding-top:100px; pointer-events: none; }

/* 서브페이지 미디어 백그라운드 */
.sub-visual-media { position:absolute; top:50%; left:50%; width:100vw; height:56.25vw; min-width:100%; min-height:100%; transform:translate(-50%, -50%) scale(1.15); pointer-events:none; z-index:0; }
.sub-visual-media iframe { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.sub-title-area h2 { font-family: 'Syne', sans-serif; font-size:48px; font-weight:800; margin-bottom:10px; }
.sub-title-area p { font-size:18px; opacity:0.8; font-weight:300; }

/* Sub Content Area Background & Min-height Fix */
.container { 
    position:relative; width:100%; z-index:1; 
    background-color: #ffffff; 
}

/* 서브페이지 전체 래퍼 강력 배경 고정 */
.sub-wrapper-outer {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 1;
    isolation: isolate; /* 렌더링 레이어 분리 */
    overflow: hidden; /* 마진 겹침 방지 및 렌더링 영역 명확화 */
}

.sub-content { 
    padding:80px 0; min-height:800px; 
    background-color: #ffffff; 
}
/*// 서브페이지 비주얼 없을 때 본문 상단 여백 축소 */
body[data-sub-visual='content_only'] .sub-content { 
    padding-top: 40px; 
    position: relative; z-index: 2;
    /* 하드웨어 가속 힌트로 렌더링 누락 방지 */
    will-change: background-color;
}
body.theme-dark .sub-content { background-color: #121212 !important; }
.sub-inner { max-width:1200px; margin:0 auto; padding:0 20px; }

/* Sub Navigation (Breadcrumb & LNB) */
.sub-navigation { border-bottom: 1px solid #eee; background: #ffffff; position: relative; z-index: 10; transition: top 0.4s; }
body.theme-dark .sub-navigation { border-bottom-color: #333 !important; }
/*// 헤더가 줄어들 때(scrolled) LNB도 같이 상단으로 이동하여 밀착 */
/* .header.scrolled ~ #container .sub-navigation, */
/* .header.scrolled ~ .container .sub-navigation { top: 60px !important; } */
.sub-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 60px; }

/* 9. 서브 네비게이션 (Breadcrumb & LNB) */
.breadcrumb ol { display: flex; align-items: center; gap: 10px; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { font-size: 13px; color: #888; display: flex; align-items: center; gap: 10px; }
.breadcrumb li:not(:last-child)::after { content: '>'; font-size: 10px; color: #ccc; }
.breadcrumb li a { color: #888; font-weight: 500; }
.breadcrumb li a:hover { color: var(--point-color); }
.breadcrumb li:last-child { color: var(--point-color); font-weight: 700; }

/* Sub LNB */
.sub-lnb-wrap { height: 100%; }
.lnb-container { height: 100%; display: flex; align-items: center; }
.lnb-list { display: flex; height: 100%; align-items: center; gap: 30px; }
.lnb-list li { height: 100%; display: flex; align-items: center; position: relative; }
.lnb-list li a { font-size: 15px; font-weight: 600; color: #666; transition: 0.3s; height: 100%; display: flex; align-items: center; padding: 0 5px; }
.lnb-list li:hover a, .lnb-list li.active a { color: var(--point-color); }
.lnb-list li::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--point-color); transition: 0.3s; }
.lnb-list li.active::after { width: 100%; }

/* LNB Mobile */
.pc-hidden { display: none; }
@media screen and (max-width: 1024px) {
    .sub-navigation { top: 60px; }
    .sub-nav-inner { height: auto; padding: 0; flex-direction: column; }
    .breadcrumb { display: none !important; } /* 모바일에서는 브레드크럼 숨김 (공간 부족) */
    
    .sub-lnb-wrap { width: 100%; }
    .lnb-container { width: 100%; display: block; }
    .pc-hidden { display: flex; }
    
    .btn-lnb-m { width: 100%; height: 50px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #eee; font-size: 16px; font-weight: 700; color: #111; }
    body.theme-dark .btn-lnb-m { background: #1a1a1a; border-bottom-color: #333; color: #fff; }
    .btn-lnb-m .arrow { width: 10px; height: 10px; border-right: 2px solid #999; border-bottom: 2px solid #999; transform: rotate(45deg); margin-top: -5px; transition: 0.3s; }
    .btn-lnb-m.active .arrow { transform: rotate(-135deg); margin-top: 5px; }

    .lnb-list { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-top: 1px solid #eee; padding: 10px 0; height: auto; flex-direction: column; gap: 0; }
    body.theme-dark .lnb-list { background: #1a1a1a; border-top-color: #333; }
    .lnb-list li { width: 100%; height: auto; }
    .lnb-list li a { padding: 12px 20px; width: 100%; font-size: 15px; }
    .lnb-list li.active a { background: rgba(var(--point-color-rgb), 0.05); }
    .lnb-list li::after { display: none; }
}

/* 10. 푸터 영역 (Footer) */
.footer { background:#111; color:#999; padding:80px 0; border-top:1px solid #222; }
.footer-inner { max-width:1440px; margin:0 auto; padding:0 40px; }
.footer-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:40px; border-bottom:1px solid #222; padding-bottom:40px; }
.footer-logo img { height:30px; margin-bottom:20px; filter:brightness(0) invert(1); }
.footer-logo span { color:#fff; font-size:20px; font-weight:bold; }

.footer-gnb ul { display:flex; gap:30px; }
.footer-gnb a { font-size:15px; color:#ccc; }
.footer-gnb a:hover { color:#fff; }

.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; font-size:14px; opacity:0.6; }
.footer-admin-login { display:flex; align-items:center; gap:15px; }
.footer-admin-login .btn-footer-login { font-size:12px; color:#555; text-decoration:none; transition:0.3s; }
.footer-admin-login .btn-footer-login:hover { color:#999; }
.footer-admin-login .admin-status { font-size:12px; color:#888; }
.footer-admin-login .btn-footer-logout { font-size:12px; color:#666; transition:0.3s; text-decoration:underline; }
.footer-admin-login .btn-footer-logout:hover { color:#fff; }
.footer-admin-login .btn-footer-admin { display:flex; align-items:center; justify-content:center; color:#555; transition:0.3s; width:20px; height:20px; }
.footer-admin-login .btn-footer-admin svg { width:100%; height:100%; }
.footer-admin-login .btn-footer-admin:hover { color:#fff; transform:rotate(90deg); }

body.theme-dark .footer-admin-login .btn-footer-login { color:#444; }
body.theme-dark .footer-admin-login .btn-footer-login:hover { color:#777; }
body.theme-dark .footer-admin-login .admin-status { color:#666; }
body.theme-dark .footer-admin-login .btn-footer-logout { color:#555; }

/* 11. 반응형 스타일 (Responsive) */
@media screen and (min-width: 1025px) {
    .m-only { display:none !important; }
    .sidebar-mobile { display:none !important; }
}

@media screen and (max-width: 1024px) {
    .pc-only { display:none !important; }
    .user-menu { display:none !important; }
    .header { height:60px; }
    .header-inner { padding:0 20px; }
    .slide-content h2 { font-size:40px; }
    .slide-content p { font-size:16px; }

    /* Mobile Hamburger */
    .btn-menu { width:30px; height:24px; position:relative; display:flex; flex-direction:column; justify-content:space-between; z-index:1100; padding: 0; }
    .btn-menu span { display:block; width:100%; height:2px; background:#111; transition:0.3s; }
    body.theme-dark .btn-menu span { background:#fff; }
    .btn-menu.active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .btn-menu.active span:nth-child(2) { opacity: 0; }
    .btn-menu.active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

    /* Sidebar Mobile */
    .sidebar-mobile { position:fixed; top:0; right:0; width:85%; max-width:400px; height:100%; background:#fff; z-index:2000; transform:translateX(100%); transition:0.4s cubic-bezier(0.16, 1, 0.3, 1); padding:0; overflow-y:auto; visibility: hidden; }
    .sidebar-mobile.active { visibility: visible; transform:translateX(0); }
    body.theme-dark .sidebar-mobile { background:#1a1a1a; }

    .sidebar-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1900; opacity:0; visibility:hidden; transition:0.3s; }
    .sidebar-overlay.active { opacity:1; visibility:visible; }

    .m-header { display:flex; justify-content:space-between; align-items:center; padding: 30px 20px; border-bottom: 1px solid #eee; }
    body.theme-dark .m-header { border-bottom-color: #333; }
    .m-logo { font-size:20px; font-weight:800; color:var(--point-color); }
    .m-header-btns { display: flex; align-items: center; gap: 15px; }
    .btn-m-admin { color: #666; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
    .btn-m-admin svg { width: 20px; height: 20px; }
    .btn-close-menu { font-size:24px; color:#666; padding: 0; line-height: 1; }

    .m-user-info { padding:30px 20px; background:#fff; border-radius:0; border-bottom: 1px solid #eee; }
    body.theme-dark .m-user-info { background:#1a1a1a; border-bottom-color: #333; }
    
    .m-profile-wrap { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
    .m-profile-img { width: 48px; height: 48px; }
    .m-nick { display:block; font-size:18px; font-weight:700; color: #111; }
    body.theme-dark .m-nick { color: #fff; }

    .m-auth-btns { display:flex; gap:10px; }
    .m-auth-btns a { font-size:13px; padding:10px 15px; background:#f8f9fa; border:1px solid #eee; border-radius:0; font-weight: 600; flex: 1; text-align: center; color: #333; }
    body.theme-dark .m-auth-btns a { background:#333; border-color:#444; color:#fff; }
    .m-auth-btns .m-btn-login { background: #111; color: #fff !important; border-color: #111; padding: 15px; font-size: 15px; letter-spacing: 1px; }

    .m-gnb { padding: 10px 20px; }

    .m-depth1 { border-bottom:1px solid #eee; }
    body.theme-dark .m-depth1 { border-color:#333; }
    .m-link-wrap { display:flex; justify-content:space-between; align-items:center; }
    .m-link-wrap a { display:block; padding:15px 0; font-size:16px; font-weight:600; font-family: var(--title-font) !important; }
    .m-arrow { width:40px; height:40px; font-size:10px; color:#999; }

    .m-depth2-wrap { display:none; padding-left:15px; background:rgba(0,0,0,0.02); }
    .m-depth2 a { font-size:15px; padding:12px 0; color:#666; }
    .m-depth3-wrap { display:none; padding-left:15px; }
    .m-depth3 a { font-size:14px; padding:10px 0; color:#888; }
    
    .m-depth1.open > .m-depth2-wrap,
    .m-depth2.open > .m-depth3-wrap { display:block; }
}

/* 12. 퀵메뉴 플로팅 */

.quick-menu { position:fixed; right:30px; bottom:30px; z-index:100; display:flex; flex-direction:column; gap:10px; }
.quick-item { width:60px; height:60px; border-radius:0; background:var(--point-color); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px rgba(0,0,0,0.2); transition:0.3s; }
.quick-item:hover { transform:translateY(-5px); }

/* 슬라이더 1개일 때 강제 노출 설정 보강 */
.main-visual .swiper-button-lock, 
.main-visual .swiper-pagination-lock { display: flex !important; }

/*// 스크롤 등장 애니메이션 (Scroll Reveal) */
.reveal-up { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); }
.reveal-up.active { opacity: 1; transform: translateY(0); }

/*// 메인 섹션 공통 스타일 */
.container > .main-quick-section,
.container > .main-concept-section,
.container > .main-news-section,
.container > .main-link-section,
.container > .main-map-section { padding: 100px 0; max-width: 1440px; margin: 0 auto; width: 100%; overflow: hidden; }

.section-title-area { text-align: center; margin-bottom: 60px; }
.section-title { font-family: 'Syne', sans-serif; font-size: 42px; font-weight: 800; text-transform: uppercase; letter-spacing: -1px; color: #111; position: relative; display: inline-block; padding-bottom: 15px; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: var(--point-color); }
body.theme-dark .section-title { color: #fff; }

/*// 퀵 메뉴 섹션 (플랫 그리드 분할 스퀘어) */
.main-quick-section { background: transparent; margin-top: 0 !important; padding: 50px 0 !important; }
body.theme-dark .main-quick-section { background: transparent; }
.main-quick-inner { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.quick-list { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; border: 1px solid #eee; }
body.theme-dark .quick-list { border-color: #333; }
.quick-list li { flex: 0 0 25%; max-width: 25%; border-right: 1px solid #eee; border-bottom: none; }
body.theme-dark .quick-list li { border-right-color: #333; }
.quick-list li:last-child { border-right: none; }
.quick-list li a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; padding: 50px 20px; transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1); overflow: hidden; }
.quick-list li a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--point-color); z-index: 0; transition: opacity 0.4s cubic-bezier(0.2, 1, 0.3, 1); opacity: 0; }
.quick-list li a:hover::before { opacity: 0.08; }
.quick-list li a > * { position: relative; z-index: 1; }
.quick-list li a .icon-box { width: 60px; height: 60px; color: var(--point-color); margin-bottom: 20px; transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1); display: flex; justify-content: center; align-items: center; }
.quick-list li a:hover .icon-box { transform: scale(1.1); color: var(--point-color); }
.quick-list li a .name { font-size: 18px; font-weight: 700; color: #111; letter-spacing: -0.5px; transition: all 0.4s; }
body.theme-dark .quick-list li a .name { color: #fff; }
.quick-list li a:hover .name { color: var(--point-color); }

/*// 컨셉 소개 섹션 (편집 디자인 오버랩 스타일) */
.main-concept-section { background: #fff; }
body.theme-dark .main-concept-section { background: #121212; }
.concept-slider-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.concept-item { display: flex; align-items: center; gap: 0; position: relative; padding: 40px 0; }
.concept-item .img-box { flex: 1.5; overflow: hidden; height: 550px; position: relative; z-index: 1; }
.concept-item .img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1); }
.concept-item:hover .img-box img { transform: scale(1.05); }
.concept-item .text-box { flex: 1; text-align: left; background: #fff; padding: 60px; position: relative; z-index: 2; margin-left: -100px; box-shadow: -10px 20px 50px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; border-radius: 0; }
body.theme-dark .concept-item .text-box { background: #1a1a1a; box-shadow: -10px 20px 50px rgba(0,0,0,0.5); border-color: #333; }
.concept-tit { font-size: 36px; font-weight: 800; margin-bottom: 25px; line-height: 1.2; word-break: keep-all; position: relative; }
.concept-tit::after { content: ''; display: block; width: 40px; height: 2px; background: var(--point-color); margin-top: 20px; }
.concept-desc { font-size: 16px; line-height: 1.8; color: #666; margin-bottom: 40px; word-break: keep-all; font-weight: 300; }
body.theme-dark .concept-desc { color: #aaa; }

/* 얇은 선 라인 형태의 세련된 버튼 */
.btn-concept { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; background: transparent; color: #111; font-weight: 600; font-size: 15px; border-radius: 0; transition: 0.3s; border: 1px solid #111; letter-spacing: 1px; }
.btn-concept::after { content: '\2192'; font-family: sans-serif; font-size: 16px; transition: 0.3s; }
.btn-concept:hover { background: #111; color: #fff; }
.btn-concept:hover::after { transform: translateX(5px); }
body.theme-dark .btn-concept { border-color: #fff; color: #fff; }
body.theme-dark .btn-concept:hover { background: #fff; color: #111; }

.concept-slider .swiper-pagination { position: relative; margin-top: 40px; bottom: 0 !important; display: flex; justify-content: center; align-items: center; gap: 8px; }
.concept-slider .swiper-pagination-bullet { width: 10px; height: 10px; background: #ccc; opacity: 1; margin: 0 !important; border-radius: 50%; transition: 0.3s; }
.concept-slider .swiper-pagination-bullet-active { width: 20px; background: var(--point-color); border-radius: 10px; }
body.theme-dark .concept-slider .swiper-pagination-bullet { background: #444; }
body.theme-dark .concept-slider .swiper-pagination-bullet-active { background: var(--point-color); }

/*// 최근 소식 섹션 */
.main-news-section { background: #f8f9fa; }
body.theme-dark .main-news-section { background: #1a1a1a; }
.news-list-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 최신 뉴스 (예술적 스퀘어 흑백 필터 효과) */
.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.news-item { background: #fff; border: 1px solid #eee; overflow: hidden; transition: 0.4s cubic-bezier(0.2, 1, 0.3, 1); position: relative; border-radius: 0; }
body.theme-dark .news-item { background: #222; border-color: #333; }
.news-item:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: var(--point-color); }
.news-thumb { width: 100%; height: 220px; overflow: hidden; position: relative; border-bottom: 1px solid #eee; }
body.theme-dark .news-thumb { border-bottom-color: #333; }
/* 뉴스 썸네일 스타일 (컬러 유지) */
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s cubic-bezier(0.2, 1, 0.3, 1); }
.news-item:hover .news-thumb img { transform: scale(1.08); }
.news-info { padding: 25px 20px; }
.news-tit { font-size: 18px; font-weight: 700; height: 50px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; color: #111; margin-bottom: 10px; transition: color 0.3s; }
body.theme-dark .news-tit { color: #fff; }
.news-item:hover .news-tit { color: var(--point-color); }
.news-date { font-size: 14px; color: #999; display: block; }

/*// 링크 게시판 섹션 (고객 리뷰 - 사각 디자인) */
.main-link-section { background: #fff; }
body.theme-dark .main-link-section { background: #121212; }
.link-list-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 레이아웃 직접 출력용 (link-grid) 및 위젯 출력용 (widgetContent) 공통 적용 */
.link-grid,
.link-list-wrap .widgetContent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* PC(3열)에서는 4번째 아이템 숨김 처리 */
.link-item:nth-child(4),
.link-list-wrap .widgetContent .box:nth-child(4) { display: none; }

/* 리뷰 아이템 카드 스타일 */
.link-item,
.link-list-wrap .widgetContent .box { 
    position: relative; cursor: pointer; background: #fff; border: 1px solid #eee; 
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1); border-radius: 0; overflow: hidden;
}
body.theme-dark .link-item,
body.theme-dark .link-list-wrap .widgetContent .box { background: #1a1a1a; border-color: #333; }

.link-item:hover,
.link-list-wrap .widgetContent .box:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); 
    border-color: var(--point-color); 
}
body.theme-dark .link-item:hover,
body.theme-dark .link-list-wrap .widgetContent .box:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.4); }

/* 썸네일 영역 */
.link-thumb,
.link-list-wrap .widgetContent .box .thumbnail { 
    border-radius: 0; overflow: hidden; height: 260px; position: relative; 
    border-bottom: 1px solid #eee; margin-bottom: 0; 
}
body.theme-dark .link-thumb,
body.theme-dark .link-list-wrap .widgetContent .box .thumbnail { border-bottom-color: #333; }

.link-thumb img,
.link-list-wrap .widgetContent .box .thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s; }
.link-item:hover .link-thumb img,
.link-list-wrap .widgetContent .box:hover .thumbnail img { transform: scale(1.1); }

/* 정보 영역 */
.link-info,
.link-list-wrap .widgetContent .box .news-info { padding: 30px 25px; } /* 위젯 클래스 대응 포함 */

/* 별점 스타일 */
.link-stars,
.review-star-wrap { margin-bottom: 15px; color: #ffc107; font-size: 14px; display: flex; gap: 2px; }

/* 제목 및 내용 */
.link-tit,
.link-list-wrap .widgetContent .box .title { 
    font-size: 20px; font-weight: 800; margin-bottom: 15px; color: #111; 
    transition: color 0.3s; line-height: 1.4; height: 56px; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body.theme-dark .link-tit,
body.theme-dark .link-list-wrap .widgetContent .box .title { color: #fff; }
.link-item:hover .link-tit,
.link-list-wrap .widgetContent .box:hover .title { color: var(--point-color); }

.link-desc,
.link-list-wrap .widgetContent .box .content { 
    font-size: 15px; color: #666; line-height: 1.6; 
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; 
}
body.theme-dark .link-desc,
body.theme-dark .link-list-wrap .widgetContent .box .content { color: #aaa; }

/*// 찾아오는 길 섹션 */
.main-map-section { background: #fff; }
body.theme-dark .main-map-section { background: #121212; }
.map-content-wrap { display: flex; height: 600px; border: 1px solid #eee; }
body.theme-dark .map-content-wrap { border-color: #333; }
.map-area { flex: 2; background: #eee; position: relative; }
.map-area.embed-map iframe { width: 100% !important; height: 100% !important; border: 0; }
.map-info-box { flex: 1; background: #111; color: #fff; padding: 60px 40px; display: flex; flex-direction: column; justify-content: center; gap: 40px; }

.map-info-box .info-item { display: flex; gap: 20px; }
.map-info-box .info-item .icon { width: 32px; height: 32px; color: var(--point-color); flex-shrink: 0; }
.map-info-box .info-item .text strong { display: block; font-family: 'Syne', sans-serif; font-size: 14px; color: var(--point-color); margin-bottom: 8px; letter-spacing: 1px; }
.map-info-box .info-item .text p { font-size: 18px; font-weight: 500; line-height: 1.5; color: #fff; }

/*// 반응형 대응 */
@media screen and (max-width: 1024px) {
    .container > section { padding: 60px 0; }
    .section-title { font-size: 32px; }
    
    /* 퀵 메뉴 모바일 2x2 그리드 */
    .quick-list { gap: 0; border: none; }
    .quick-list li { flex: 0 0 50%; max-width: 50%; border: 1px solid #eee; margin: -1px 0 0 -1px; } /* 선 겹침 방지 */
    body.theme-dark .quick-list li { border-color: #333; }
    .quick-list li:last-child { border-right: 1px solid #eee; }
    body.theme-dark .quick-list li:last-child { border-right-color: #333; }
    .quick-list li a { padding: 40px 15px; }
    
    /* 모바일 컨셉 아이템 레이아웃 최적화 */
    .concept-item { flex-direction: column; gap: 0; padding: 20px 0; }
    .concept-item .img-box { width: 100%; height: auto; aspect-ratio: 4/3; }
    /* PC 겹침 디자인(margin-left) 해제, 이미지 약간 아래로 겹치게 위쪽으로 이동 */
    .concept-item .text-box { margin-left: 0; margin-top: -50px; padding: 40px 30px; width: 90%; align-self: center; }

    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news-list-wrap .widgetContent { grid-template-columns: repeat(2, 1fr); }
    
    /* 태블릿(2열)에서는 4개 노출 (2x2 배치) */
    .link-grid,
    .link-list-wrap .widgetContent { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .link-item:nth-child(4),
    .link-list-wrap .widgetContent .box:nth-child(4) { display: block; }
    
    /* 태블릿 썸네일 높이 최적화 */
    .link-thumb,
    .link-list-wrap .widgetContent .box .thumbnail { height: 200px; }

    .map-content-wrap { flex-direction: column; height: auto; }
    .map-area { height: 400px; }
    .map-info-box { padding: 40px 20px; }

    .sub-title-area { padding-top: 80px; }
    .sub-title-area h2 { font-size: 32px; margin-bottom: 10px; }
    .sub-title-area p { font-size: 15px; }
}

@media screen and (max-width: 640px) {
    /* 모바일 최소 해상도에서도 2x2 유지 */
    .quick-list li { flex: 0 0 50%; max-width: 50%; }
    .quick-list li a { padding: 30px 10px; }
    
    .news-grid { grid-template-columns: 1fr; }
    .news-list-wrap .widgetContent { grid-template-columns: 1fr; }
    
    /* 모바일(1열)에서는 다시 3개만 노출하여 피로도 감소 */
    .link-grid,
    .link-list-wrap .widgetContent { grid-template-columns: 1fr; gap: 20px; }
    .link-item:nth-child(4),
    .link-list-wrap .widgetContent .box:nth-child(4) { display: none; }
    
    /* 모바일 썸네일 높이 최적화 */
    .link-thumb,
    .link-list-wrap .widgetContent .box .thumbnail { height: 220px; }

    .concept-item .text-box { width: 95%; padding: 30px 20px; margin-top: -30px; }
    .concept-tit { font-size: 28px; margin-bottom: 15px; }
    .concept-desc { font-size: 15px; }
}

/*// =========================================================================
// ZZAN 메인 슬라이더 전용 스타일
// ========================================================================= */

/*// 폰트 설정 */
.zzan-slider * {
    font-family: 'Pretendard', sans-serif !important;
}
.zzan-slider .slide-text h2,
.zzan-slider .slide-text .cate,
.zzan-slider .swiper-pagination,
.zzan-slider .swiper-total-count {
    font-family: 'Syne', sans-serif !important;
}

/*// 슬라이더 컨테이너 */
.zzan-main-visual.zzan-slider { 
    width: 100%; 
    height: 100vh !important; /* 높이 100% (화면 꽉 채움) */
    background: #000; 
    display: flex; 
    justify-content: center; 
    padding-top: 0 !important; 
    padding-bottom: 0 !important; 
    position: relative;
    z-index: 1;
    margin-bottom: 0 !important;
    margin-top: -80px; /* 헤더와 겹치게 상단 배치 (헤더 높이 80px 기준) */
}

/*// GNB 투명화 처리 (메인 & 서브 비주얼 공통) */
body:has(.zzan-slider) .header:not(.scrolled),
body:has(.sub-visual) .header:not(.scrolled) {
    background-color: transparent !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/*// 메인/서브 비주얼 배경 시 공통 제어 */
body:has(.zzan-slider) .header:not(.scrolled) .logo-light,
body:has(.sub-visual) .header:not(.scrolled) .logo-light { opacity: 0 !important; visibility: hidden !important; }
body:has(.zzan-slider) .header:not(.scrolled) .logo-banner,
body:has(.sub-visual) .header:not(.scrolled) .logo-banner { opacity: 1 !important; visibility: visible !important; }
body:has(.zzan-slider) .header:not(.scrolled) .logo span,
body:has(.sub-visual) .header:not(.scrolled) .logo span { color: #fff !important; }

/*// 메인 풀페이지 배너 / 서브 비주얼 시 GNB & 유저 메뉴 텍스트 색상 (흰색) */
body:has(.zzan-slider) .header:not(.scrolled) .gnb > ul > li > a,
body:has(.sub-visual.type-image) .header:not(.scrolled) .gnb > ul > li > a,
body:has(.sub-visual.type-media) .header:not(.scrolled) .gnb > ul > li > a { color: #fff !important; }

body:has(.zzan-slider) .header:not(.scrolled) .user-menu,
body:has(.sub-visual.type-image) .header:not(.scrolled) .user-menu,
body:has(.sub-visual.type-media) .header:not(.scrolled) .user-menu { color: rgba(255,255,255,0.8) !important; }

body:has(.zzan-slider) .header:not(.scrolled) .user-menu a,
body:has(.sub-visual.type-image) .header:not(.scrolled) .user-menu a,
body:has(.sub-visual.type-media) .header:not(.scrolled) .user-menu a { color: #fff !important; }

body:has(.zzan-slider) .header:not(.scrolled) .btn-menu span,
body:has(.sub-visual.type-image) .header:not(.scrolled) .btn-menu span,
body:has(.sub-visual.type-media) .header:not(.scrolled) .btn-menu span { background: #fff !important; }

/*// 서브페이지 미디어 배경(image/media) 시 투명 헤더 햄버거 버튼 가시성 확보 */
body:has(.sub-visual.type-image) .header:not(.scrolled) .btn-menu span,
body:has(.sub-visual.type-media) .header:not(.scrolled) .btn-menu span,
.header.has-sub-visual:not(.scrolled) .btn-menu span { 
    background: #ffffff !important; 
}

/* 모바일 대응 강화 */
@media screen and (max-width: 1024px) {
    body:has(.sub-visual.type-image) .header:not(.scrolled) .btn-menu span,
    body:has(.sub-visual.type-media) .header:not(.scrolled) .btn-menu span,
    .header.has-sub-visual:not(.scrolled) .btn-menu span { 
        background: #ffffff !important; 
    }
}

.zzan-slider .main-slider { 
    width: 100% !important; 
    max-width: 100%; 
    height: 100% !important; 
    overflow: hidden; 
    position: relative; 
    border-radius: 0; 
}

.zzan-slider .swiper-slide { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100% !important;
    overflow: hidden;
    background-color: #000;
}

/*// Ken Burns Effect (더욱 안정적인 방식) */
.zzan-slider .swiper-slide .slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 10s ease-out;
    transform: scale(1.1); /* 기본 상태 살짝 크게 시작하여 우측 쏠림 방지 */
    z-index: 1;
}

.zzan-slider .swiper-slide-active .slide-bg {
    transform: scale(1.2); /* 활성화 시 줌인 */
}

/*// Swiper Fade 시 슬라이드 겹침 안정화 */
.zzan-slider .swiper-slide {
    opacity: 0 !important;
    transition-property: opacity;
}
.zzan-slider .swiper-slide-active {
    opacity: 1 !important;
}

.zzan-slider .slide-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    /* 더욱 고급스러운 비네팅 및 그라데이션 오버레이 */
    background: radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.6) 100%),
                linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.8) 100%);
    pointer-events: none; 
    z-index: 5;
}

/*// 슬라이더 텍스트 */
.zzan-slider .slide-inner-box {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center; 
    align-items: center; 
    height: 100%;
    padding-top: 100px;
}

.zzan-slider .slide-text {
    position: relative;
    z-index: 10;
    color: #fff;
    padding: 0 20px !important; 
    max-width: 900px;
    width: 100%;
    text-align: center; 
}

.zzan-slider .slide-text .cate { 
    display: inline-block; padding: 6px 20px; 
    background: var(--point-color); color: #000; 
    font-weight: 700 !important; font-size: 14px; border-radius: 0; margin-bottom: 25px;
    text-transform: uppercase;
}
.zzan-slider .slide-text h2 { font-size: 64px; font-weight: 800 !important; line-height: 1.1; margin-bottom: 20px; word-break: keep-all; opacity: 0; transform: translateY(30px); transition: all 0.8s 0.3s cubic-bezier(0.2, 1, 0.3, 1); }
.zzan-slider .slide-text p { font-size: 20px; font-weight: 500 !important; opacity: 0; word-break: keep-all; line-height: 1.6; margin-bottom: 40px; transform: translateY(30px); transition: all 0.8s 0.5s cubic-bezier(0.2, 1, 0.3, 1); }
.zzan-slider .slide-text .btn-more { display: inline-block; padding: 15px 40px; border: 1px solid #fff; border-radius: 0; font-weight: 600; font-size: 16px; color: #fff; transition: 0.3s; opacity: 0; transform: translateY(30px); transition: all 0.8s 0.7s cubic-bezier(0.2, 1, 0.3, 1), background 0.3s, color 0.3s; }
.zzan-slider .slide-text .cate { opacity: 0; transform: translateY(30px); transition: all 0.8s 0.1s cubic-bezier(0.2, 1, 0.3, 1); }

/*// 활성화 시 순차적 등장 */
.zzan-slider .swiper-slide-active .slide-text h2,
.zzan-slider .swiper-slide-active .slide-text p,
.zzan-slider .swiper-slide-active .slide-text .btn-more,
.zzan-slider .swiper-slide-active .slide-text .cate { opacity: 1; transform: translateY(0); }
.zzan-slider .slide-text .btn-more:hover { background: #fff; color: #000; }

/*// 슬라이더 화살표 네비게이션 (중앙 양끝) */
.zzan-slider .main-side-btn {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
    margin: 0 !important;
}

.zzan-slider .swiper-button-prev { left: 40px; }
.zzan-slider .swiper-button-next { right: 40px; }

.zzan-slider .main-side-btn:hover {
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.zzan-slider .main-side-btn svg {
    width: 48px;
    height: 48px;
    stroke: currentColor;
}

.zzan-slider .main-side-btn::after {
    display: none !important; /* swiper 기본 아이콘 제거 */
}

/*// 하단 타임바 연동 페이지네이션 (thesharp 스타일) */
.zzan-slider .slider-bottom-controller {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    z-index: 100;
}

.zzan-slider .slider-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
}

.zzan-slider .swiper-pagination {
    position: static !important;
    width: auto !important;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
}

.zzan-slider .swiper-total-count {
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
}

.zzan-slider .zzan-slider-progress {
    position: relative !important;
    flex: 1; /* 남은 공간 모두 차지 (가로로 긴 바) */
    max-width: 400px; /* 너무 길어지지 않게 제한 */
    height: 2px;
    background: rgba(255,255,255,0.3);
    overflow: hidden;
}

.zzan-slider .zzan-slider-progress .progress-bar {
    height: 100%;
    background: #fff; /* 포인트 컬러 대신 흰색 사용 (더샵 스타일) */
    width: 0;
    transition-property: width;
    transition-timing-function: linear;
}

/*// 모바일 대응 */
@media screen and (max-width: 768px) {
    .zzan-main-visual.zzan-slider { height: 100vh !important; min-height: 600px !important; margin-bottom: 0px !important; margin-top: -60px; }
    .zzan-slider .slide-inner-box { padding-top: 60px; }
    .zzan-slider .slide-text h2 { font-size: 38px; }

    /* 모바일 화살표 */
    .zzan-slider .swiper-button-prev { left: 10px; }
    .zzan-slider .swiper-button-next { right: 10px; }
    .zzan-slider .main-side-btn svg { width: 32px; height: 32px; }

    /* 모바일 하단 타임바 */
    .zzan-slider .slider-bottom-controller { bottom: 30px; }
    .zzan-slider .zzan-slider-progress { max-width: 100%; }
}