@charset "utf-8";
:root {

	/* Pretendard (가장 빠르고 가벼운 Variable Dynamic Subset 적용) */
	--fonts1: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;

	/* Noto Serif KR (웹 표준 명조 + 시스템 명조 폴백) */
	--fonts2: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", Batang, serif;
	
  /* ==========================================
     1. Layout Breakpoints
     ========================================== */
  --min-width: 360px;
  --min-width-calc: 360px;
  --max-width: 1794px;
  --max-width-calc: 1794px;  
  --max-width2: 1480px;
  --max-width3: 1920px;

  /* ==========================================
     2. Color Palette
     ========================================== */
  /* Main Colors */
  --main-color: rgba(178, 123, 82, 1.0);

  /* Sub Colors */
  --sub-color-1: rgba(27, 27, 27, 1.0);
  --sub-color-2: rgba(85, 85, 85, 1.0);
  --sub-color-3: rgba(85, 85, 85, 0.9);
  --sub-color-4: rgba(85, 85, 85, 0.8);
  --sub-color-5: rgba(85, 85, 85, 0.7);
  --sub-color-6: rgba(85, 85, 85, 0.6);
  --sub-color-7: rgba(85, 85, 85, 0.5);
  --sub-color-8: rgba(85, 85, 85, 0.4);
  --sub-color-9: rgba(85, 85, 85, 0.3);
  --sub-color-10: rgba(85, 85, 85, 0.2);
  --sub-color-11: rgba(85, 85, 85, 0.1);
  --sub-color-12: rgba(255, 255, 255, 0.6);
  --sub-color-13: rgba(255, 255, 255, 0.8);
  
  /* Point Colors */
  --point-color: rgba(186, 43, 43, 1.0);
  
	/* 초대형 브랜드 타이틀 (360px: 32px ~ 1480px: 72px) */
	--font-size-32-72: clamp(2rem, 3.571vw + 1.196rem, 4.5rem);

	/* 대형 히어로 타이틀 (360px: 28px ~ 1480px: 64px) */
	--font-size-28-64: clamp(1.75rem, 3.214vw + 1.027rem, 4rem);

	/* 메인 제목용 (360px: 24px ~ 1480px: 55px) */
	--font-size-24-55: clamp(1.5rem, 2.768vw + 0.877rem, 3.438rem);
	
	/* 메인 제목용 (360px: 18px ~ 1480px: 55px) */
	--font-size-18-55: clamp(1.125rem, 3.304vw + 0.382rem, 3.438rem);
	
	/* 메인 제목용 (360px: 22px ~ 1480px: 48px) */
	--font-size-22-48: clamp(1.375rem, 2.321vw + 0.853rem, 3rem);

	/* 서브 제목용 (360px: 20px ~ 1480px: 36px) */
	--font-size-20-36: clamp(1.25rem, 1.429vw + 0.929rem, 2.25rem);
	
	/* 중간 강조 제목용 (360px: 19px ~ 1480px: 30px) */
	--font-size-19-30: clamp(1.188rem, 0.982vw + 0.967rem, 1.875rem);

	/* 2순위 서브 타이틀용 (360px: 18px ~ 1480px: 26px) */
	--font-size-18-26: clamp(1.125rem, 0.714vw + 0.964rem, 1.625rem);
	
	/* 2순위 서브 타이틀용 (360px: 14px ~ 1480px: 26px) */
	--font-size-14-26: clamp(0.875rem, 1.071vw + 0.634rem, 1.625rem);

	/* 카드 제목 / 3순위 소제목용 (360px: 18px ~ 1480px: 24px) */
	--font-size-18-24: clamp(1.125rem, 0.536vw + 1.004rem, 1.5rem);

	/* [추가] 18px ~ 23px (최대 23px) */
	--font-size-18-23: clamp(1.125rem, 0.446vw + 1.025rem, 1.4375rem);

	/* [추가] 18px ~ 22px (최대 22px) */
	--font-size-18-22: clamp(1.125rem, 0.357vw + 1.045rem, 1.375rem);

	/* [추가] 18px ~ 21px (최대 21px) */
	--font-size-18-21: clamp(1.125rem, 0.268vw + 1.065rem, 1.3125rem);

	/* [추가] 16px ~ 23px (최대 23px) */
	--font-size-16-23: clamp(1rem, 0.625vw + 0.859rem, 1.4375rem);

	/* [추가] 16px ~ 22px (최대 22px) */
	--font-size-16-22: clamp(1rem, 0.536vw + 0.879rem, 1.375rem);

	/* [추가] 16px ~ 21px (최대 21px) */
	--font-size-16-21: clamp(1rem, 0.446vw + 0.9rem, 1.3125rem);

	/* 강조 본문 / 대형 버튼 / 카테고리 태그용 (360px: 16px ~ 1480px: 20px) */
	--font-size-16-20: clamp(1rem, 0.357vw + 0.92rem, 1.25rem);

	/* 본문/설명글용 (360px: 15px ~ 1480px: 18px) */
	--font-size-15-18: clamp(0.938rem, 0.268vw + 0.878rem, 1.125rem);
	
	--font-size-15-17: clamp(0.938rem, 0.177vw + 0.895rem, 1.063rem);

	/* 캡션 / 각주 / 부연 설명용 (360px: 14px ~ 1480px: 16px) */
	--font-size-14-16: clamp(0.875rem, 0.179vw + 0.835rem, 1rem);

	/* 극소형 텍스트 / 각주 / 태그용 (360px: 13px ~ 1480px: 15px) */
	--font-size-13-15: clamp(0.813rem, 0.179vw + 0.772rem, 0.938rem);

	/* 초소형 텍스트 / 각주 / 저작권 표시용 (360px: 13px ~ 1480px: 14px) */
	--font-size-13-14: clamp(0.813rem, 0.089vw + 0.793rem, 0.875rem);

	/* 초소형 텍스트 고정용 (360px~1480px: 13px 고정) */
	--font-size-13-13: 0.813rem;
	
	/* 대형 간격 - 섹션/레이아웃 간 넓은 여백 (360px: 40px ~ 1480px: 120px) */
	--gap-40-120: clamp(2.5rem, 7.143vw + 0.893rem, 7.5rem);

	/* 대형 간격 - 섹션/레이아웃 간 넓은 여백 (360px: 40px ~ 1480px: 80px) */
	--gap-40-80: clamp(2.5rem, 3.571vw + 1.696rem, 5rem);
	
	/* 대형 간격 - 섹션/레이아웃 간 넓은 여백 (360px: 24px ~ 1480px: 60px) */
	--gap-24-60: clamp(1.5rem, 3.214vw + 0.777rem, 3.75rem);

	/* 중형 간격 - 카드/아이템 간 여백 (360px: 16px ~ 1480px: 32px) */
	--gap-16-32: clamp(1rem, 1.429vw + 0.679rem, 2rem);

	/* 기본/소형 간격 - 요소 간 촘촘한 여백 (360px: 10px ~ 1480px: 20px) */
	--gap-10-20: clamp(0.625rem, 0.893vw + 0.424rem, 1.25rem);

	/* 초소형 간격 - 태그/아이콘/작은 요소 간 여백 (360px: 5px ~ 1480px: 10px) */
	--gap-5-10: clamp(0.313rem, 0.446vw + 0.213rem, 0.625rem);
	
	/* 패딩 (360px: 90px ~ 1480px: 180px) */
	--padding-90-180: clamp(2.5rem, 3.571vw + 1.696rem, 5rem);
	
	/* 패딩 (360px: 80px ~ 1480px: 160px) */
	--padding-80-160: clamp(5rem, 7.143vw + 3.393rem, 10rem);
	
	/* 패딩 (360px: 40px ~ 1480px: 160px) */
	--padding-40-160: clamp(2.5rem, 10.714vw + 0.089rem, 10rem);
	
	/* 패딩 (360px: 50px ~ 1480px: 100px) */
	--padding-50-100: clamp(3.125rem, 4.464vw + 2.121rem, 6.25rem);
	
	/* 패딩 (360px: 40px ~ 1480px: 80px) */
	--padding-40-80: clamp(2.5rem, 3.571vw + 1.696rem, 5rem);
	
	/* 패딩 (360px: 40px ~ 1480px: 60px) */
	--padding-40-60: clamp(2.5rem, 1.786vw + 2.098rem, 3.75rem);
	
	/* 패딩 (360px: 30px ~ 1480px: 60px) */
	--padding-30-60: clamp(1.875rem, 2.679vw + 1.272rem, 3.75rem);
	
	/* 패딩 (360px: 35px ~ 1480px: 45px) */
	--padding-35-45: clamp(2.1875rem, 0.893vw + 1.987rem, 2.8125rem);
	
	/* 패딩 (360px: 25px ~ 1480px: 50px) */
	--padding-25-50: clamp(1.5625rem, 2.232vw + 1.06rem, 3.125rem);	
	
	/* 패딩 (360px: 15px ~ 1480px: 30px) */
	--padding-15-30: clamp(0.938rem, 1.339vw + 0.636rem, 1.875rem);
	
	/* 패딩 (360px: 20px ~ 1480px: 40px) */
	--padding-20-40: clamp(1.25rem, 1.786vw + 0.848rem, 2.5rem);
	
	/* 음수 패딩/마진 (360px: -20px ~ 1480px: -40px) */
	--padding-minus-20-40: clamp(-2.5rem, -1.786vw - 0.848rem, -1.25rem);
	
	/* 패딩 (360px: 5px ~ 1480px: 10px) */
	--padding-5-10: clamp(0.313rem, 0.446vw + 0.213rem, 0.625rem);
	
	/* 패딩 (360px: 6px ~ 1480px: 12px) */
	--padding-6-12: clamp(0.375rem, 0.446vw + 0.275rem, 0.75rem);
	
	/* 패딩 (360px: 8px ~ 1480px: 15px) */
	--padding-8-15: clamp(0.5rem, 0.625vw + 0.359rem, 0.938rem);

	/* 패딩 (360px: 10px ~ 1480px: 20px) */
	--padding-10-20: clamp(0.625rem, 0.893vw + 0.424rem, 1.25rem);

	/* 미세 패딩 (360px: 0px ~ 1480px: 5px) */
	--padding-0-5: clamp(0rem, 0.446vw - 0.101rem, 0.313rem);
	
	/* 패딩 (360px: 4px ~ 1480px: 8px) */
	--padding-4-8: clamp(0.25rem, 0.357vw + 0.17rem, 0.5rem);
	
	/* 패딩 (360px: 2px ~ 1480px: 4px) */
	--padding-2-4: clamp(0.125rem, 0.179vw + 0.085rem, 0.25rem);

	/* 너비 (360px: 300px ~ 1480px: 400px) */
	--width-300-400: clamp(18.75rem, 8.929vw + 16.741rem, 25rem);
	
	/* 너비 (뷰포트 768px: 220px ~ 뷰포트 1480px: 480px) */
	--width-220-480: clamp(13.75rem, 36.517vw - 3.778rem, 30rem);
	
	/* 너비 (뷰포트 768px: 190px ~ 뷰포트 1480px: 120px) */
	--width-190-120: clamp(7.5rem, -9.831vw + 16.594rem, 11.875rem);
	
	/* 너비 (뷰포트 1024px: 290px ~ 뷰포트 1480px: 480px) */
	--width-290-480: clamp(18.125rem, 41.667vw - 8.542rem, 30rem);
	
	/* 너비 (360px: var(--padding-80-160) ~ 1480px: 250px) */
	--width-160-250: clamp(10rem, 8.036vw + 8.192rem, 15.625rem);
	
	/* 너비 (뷰포트 360px: var(--padding-80-160) ~ 뷰포트 768px: 120px) */
	--width-160-120: clamp(7.5rem, -9.804vw + 12.206rem, 10rem);
	
	/* 너비 (뷰포트 360px: 140px ~ 뷰포트 1480px: 480px) */
	--width-140-480: clamp(8.75rem, 30.357vw + 1.92rem, 30rem);
	
	/* 너비 (360px: 80px ~ 1480px: 95px) */
	--width-80-95: clamp(5rem, 1.339vw + 4.699rem, 5.938rem);

	/* 너비 (1024px: 50px ~ 1480px: 350px) */
	--width-50-350: clamp(3.125rem, 65.789vw - 39.078rem, 21.875rem);

	/* 1480px 이상의 해상도에서는 350px(21.875rem)로 확실하게 고정 */
	@media (min-width: 1480px) {
		--width-50-350: 21.875rem; /* 350px */
	}
	
	--width-60-120: clamp(3.75rem, 5.357vw + 2.545rem, 7.5rem);
	--width-50-100: clamp(3.125rem, 4.464vw + 2.121rem, 6.25rem);
	--width-40-80: clamp(2.5rem, 3.571vw + 1.696rem, 5rem);
	
	/* 너비 (360px: 20px ~ 1480px: 30px) */
	--width-20-30: clamp(1.25rem, 0.893vw + 1.049rem, 1.875rem);
	
	/* 너비 (360px: 35px ~ 1480px: 51px) */
	--width-35-51: clamp(2.188rem, 0.982vw + 1.968rem, 3.188rem);
	
	/* 너비 (360px: 120px ~ 1480px: 197px) */
	--width-120-197: clamp(7.5rem, 6.875vw + 4.063rem, 12.313rem);
	
	/* 너비 (360px: 190px ~ 1480px: 270px) */
	--width-190-270: clamp(11.875rem, 7.143vw + 9.268rem, 16.875rem);
	
	/* 너비 (360px: 47px ~ 1480px: 77px) */
	--width-47-77: clamp(2.938rem, 2.679vw + 1.933rem, 4.813rem);
	
	/* 너비 (360px: 15px ~ 1480px: 20px) */
	--width-15-20: clamp(0.938rem, 0.446vw + 0.838rem, 1.25rem);
	
	/* 너비 (360px: 25px ~ 1480px: 30px) */
	--width-25-30: clamp(1.563rem, 0.446vw + 1.363rem, 1.875rem);
	
	/* 너비 (360px: 30px ~ 1480px: 40px) */
	--width-30-40: clamp(1.875rem, 0.893vw + 1.673rem, 2.5rem);

	/* 너비 (360px: 18px ~ 1480px: 25px) */
	--width-18-25: clamp(1.125rem, 0.625vw + 0.984rem, 1.563rem);	
	
	/* 너비 (뷰포트 360px: 72px ~ 뷰포트 1480px: 152px) */
	--width-72-152: clamp(4.5rem, calc(6.923vw + 2.942rem), 9.5rem);
	
	/* 너비 (뷰포트 360px: 114px ~ 뷰포트 1480px: 204px) */
	--width-114-204: clamp(7.125rem, calc(8.036vw + 4.3125rem), 12.75rem);
	
	/* 너비 (뷰포트 360px: 22px ~ 뷰포트 1480px: 45px) */
	--width-22-45: clamp(1.375rem, calc(2.054vw + 0.64rem), 2.8125rem);
	
	/* 너비 (뷰포트 360px: 27px ~ 뷰포트 1480px: 45px) */
	--width-27-45: clamp(1.6875rem, calc(1.607vw + 1.114rem), 2.8125rem);
	

	/* 360px에서 93px(5.8125rem) ~ 1480px에서 530px(33.125rem) */
	--height-93-530: clamp(5.8125rem, 39.018vw - 2.966rem, 33.125rem);
	
	/* 뷰포트 360px(70px/4.375rem) ~ 1480px(330px/20.625rem) */
	--height-70-330: clamp(4.375rem, 23.214vw - 0.848rem, 20.625rem);
	
	/* 뷰포트 360px에서 30px(1.875rem) ~ 1480px에서 300px(18.75rem) */
	--height-30-300: clamp(1.875rem, 24.107vw - 3.549rem, 18.75rem);
	
	/* 뷰포트 360px에서 30px(1.875rem) ~ 1480px에서 375px(23.4375rem) */
	--height-30-375: clamp(1.875rem, 30.804vw - 5.056rem, 23.4375rem);
		
	/* 음수변형 뷰포트 360px에서 130px(8.125rem) ~ 1480px에서 375px(23.4375rem) */	
	--height-130-375: clamp(-23.4375rem, calc(-23.482vw + 2.879rem), -8.125rem);
	
	/* 프레임 드랍 없이 부드럽게 감기는 고급 커스텀 이징 곡선 */
	--transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
	--transition-duration: 0.7s;
  
}
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* AOS 기본 이동 거리를 은은하게 축소 (기존 100px -> 30px) */
[data-aos="fade-up"] {
  transform: translate3d(0, 30px, 0);
}

/* ==========================================
     hero-section
========================================== */	 
/* 배너 섹션 스타일 */
#hero-section.hero-section {
    position: relative;
    width: calc(100% - 30px);
    max-width: var(--max-width);
    height: 100vh;
    max-height: 790px;
    display: flex;
    flex-direction: column; /* 세로 정렬이 필요한 경우 추가 */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    
    /* 패딩 및 박스 모델 설정 */
    padding: 0;
    box-sizing: border-box; /* 패딩이 width에 포함되도록 설정 (필수) */
    
    border-radius: 50px;
    overflow: hidden; /* 영역 밖으로 확대된 이미지가 나가지 않도록 방지 */
}

/* 배경 이미지 및 애니메이션 적용 (가상 요소) */
#hero-section.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/backwnsan-main-hero.webp');
    background-size: cover;
    background-position: center;
    border-radius: inherit; /* 부모의 border-radius 50px 계승 */
    z-index: 1;
    
    /* 애니메이션 설정: 2.5초 동안 scale(1.1) -> scale(1)로 변경 */
    animation: bgZoomOut 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 텍스트 및 콘텐츠가 배경 위에 올라오도록 z-index 설정 */
#hero-section.hero-section > * {
    position: relative;
    z-index: 2;
}

/* 배경 축소 키프레임 */
@keyframes bgZoomOut {
    0% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1.0);
    }
}

/* 상단 좌우 아이콘(배지) 영역 스타일 */
#hero-section .hero-badges {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 3;
}

/* 개별 아이콘(배지) 디자인 공통 스타일 */
#hero-section .hero-badges .left-badge {
    display: flex;
    position: relative;
    top: var(--width-27-45);
    left: var(--width-22-45);
}
#hero-section .hero-badges .left-badge img {
	width: var(--width-114-204);
}

/* 우측 아이콘 그룹 (두 개일 때 간격 조절) */
#hero-section .hero-badges .right-badges img {
    width: var(--width-72-152)
}

/* 텍스트 콘텐츠 영역 */
#hero-section .hero-content {
    max-width: 1200px;
    width: 100%;
    margin-top: -5%;
}

/* 주요 타이틀 스타일 */
#hero-section .main-title {
  font-size: var(--font-size-28-64);
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: -1px;
}

/* 오렌지색 강조 텍스트 */
#hero-section .main-title .highlight {
  color: #cca47e; /* 이미지의 부드러운 오렌지/브라운 톤 반영 */
}

/* 부제목 스타일 */
#hero-section .sub-title {
  font-size: var(--font-size-28-64);
  font-weight: 700;
  margin-bottom: 30px;
  letter-spacing: -1px;
}

/* 하단 작은 설명 텍스트 */
#hero-section .description {
  font-size:  var(--font-size-18-24);
  font-weight: 400;
  color: #e0e0e0;
  letter-spacing: -0.5px;
}

@media (max-width: 768px) {

}

/* ==========================================
     story-section
========================================== */		 
/* 배너 섹션 스타일 */
#story-section.story-section {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-80-160) 0 var(--padding-50-100) 0; 
    overflow: hidden; /* 영역 밖으로 확대된 이미지가 나가지 않도록 방지 (필수) */
}
/* 전체 섹션 컨테이너 */
#story-section .story-content {
    width: 100%;
    text-align: center;
    position: relative;
    padding: 0 15px;
}

/* 상단 헤더 영역 */
#story-section .sub-title {
    color: var(--main-color);
    font-size: var(--font-size-18-24);
    font-weight: 600;
    margin-bottom: var(--padding-20-40);
}

#story-section .main-title {
    font-size: var(--font-size-22-48);
    font-weight: 700;
    color: var(--sub-color-1);
    margin-bottom: var(--padding-10-20);
}

#story-section .description {
    font-size: var(--font-size-15-18);
    color: var(--sub-color-2);
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: var(--padding-20-40);
	word-break: keep-all;
}

/* Swiper 전체 감싸는 박스 */
#story-section .swiper-container-wrapper {
	position: relative;
	width: 100%;
}

#story-section .swiper {
    width: 100%;
    visibility: hidden;
}

#story-section .swiper.swiper-initialized {
	visibility: visible;
}

/* 🔥 [핵심 1] Swiper 슬라이드 자체에는 스케일을 주지 않고 GPU 가속만 부여 (위치 이동용) */
#story-section .swiper-slide {
	border-radius: 24px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0); /* GPU 가속 레더링 레이어 분리 */
}

/* 🔥 [핵심 2] 내부 카드에서 크기변화/필터 애니메이션 처리하여 떨림 현상 완전 방지 */
#story-section .story-card {
	width: 100%;
	background-color: transparent;
	position: relative;
	border-radius: 24px;
	opacity: 0.35;
	filter: grayscale(100%);
	transform: scale(0.9) translateZ(0);
	will-change: transform, opacity, filter;
	-webkit-font-smoothing: subpixel-antialiased;
}

/* Swiper 작동 실행 후 부드러운 고급 트랜지션 적용 */
#story-section .swiper-initialized .story-card {
	transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1),
				opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1),
				filter 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 🔥 활성화된 메인 슬라이드 내부 카드만 원본 크기 & 컬러 복원 */
#story-section .swiper-slide-active .story-card {
	opacity: 1;
	filter: grayscale(0%);
	transform: scale(1) translateZ(0);
}

/* 상단 이미지 영역 */
#story-section .card-image-box {
	width: 100%;
	height: var(--width-300-400);
	position: relative;
	background-size: cover;
	background-position: center top;
	border-radius: var(--padding-15-30);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

/* 이미지 하단 우측 뱃지 */
#story-section .badge-label {
    position: absolute;
    bottom: var(--padding-20-40);
    right: var(--padding-40-80);
    background-color: #c38343;
    color: #ffffff;
    padding: var(--padding-5-10) var(--padding-10-20);
    border-radius: var(--padding-5-10) var(--padding-5-10) 0 0;
    font-size: var(--font-size-15-18);
    font-weight: 600;
    z-index: 1;
}

/* 이미지 위로 오버랩되는 하단 정보 카드 */
#story-section .card-info-box {
	position: relative;
	margin-top: var(--padding-minus-20-40);
	margin-left: var(--padding-40-80);
	margin-right: var(--padding-40-80);
	padding: var(--padding-20-40);
	background-color: #ffffff;
	box-shadow: 0 -30px 30px rgba(0, 0, 0, 0.08);
	text-align: left;
	z-index: 2;
	transition: box-shadow 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

#story-section .info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--padding-10-20);
    gap: 10px;
}

#story-section .info-title {
    font-size: var(--font-size-19-30);
    font-weight: 700;
    color: var(--main-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

#story-section .info-title span {
    white-space: nowrap;
    color: var(--sub-color-1);
}

/* 바로가기 버튼 그룹 */
#story-section .btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#story-section .btn-expert {
    display: flex;
    align-items: center;
    background-color: #03a94d;
    color: #ffffff;
    padding: 6px 6px 6px 12px;
    border-radius: 4px;
    font-size: var(--font-size-13-13);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;   
	letter-spacing: -0.02em;
}

#story-section .btn-youtube {
    display: flex;
    align-items: center;
	background-color: #ff0000;
	color: #ffffff;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: var(--font-size-13-13);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: -0.02em;
}
#story-section .btn-expert img,
#story-section .btn-youtube img {
    width: 100%;
    max-width: var(--width-18-25);
    padding-right: var(--padding-0-5);
}

/* 학력 & 자격면허 리스트 */
#story-section .credentials-section {
	border-top: 1px solid #f0f0f0;
	padding-top: 16px;
}

#story-section .credentials-title {
	font-size: var(--font-size-16-20);
	font-weight: 700;
	color: var(--main-color);
	margin-bottom: 12px;
}

#story-section .credentials-grid {
    display: grid;
    /* 최소 250px 너비를 확보하되, 공간이 부족하면 자동으로 1열로 전환 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px 10px;
    font-size: var(--font-size-13-15);
    color: var(--sub-color-1);
    line-height: 1.5;
	letter-spacing: -0.02em;
}
#story-section .credentials-grid .dot-item::before {
  content: "• "; /* 불릿 점 문자 추가 */
  margin-right: 4px; /* 점과 글자 사이 여백 */
  color: inherit; /* 글자 색상 따라가기 (필요시 특정 색상 지정 가능) */
}

/* 1. 슬라이더 레이아웃 기본 */
#story-section .swiper-container-wrapper {
  position: relative;
  width: 100%;
}

#story-section .swiper {
  overflow: visible !important;
}

#story-section .swiper-slide {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

#story-section .swiper-slide-active {
  opacity: 1 !important;
}

/* 2. 카드 이미지 박스 기준 설정 */
#story-section .card-image-box {
  position: relative;
}

/* 3. 화살표 버튼 (이미지 내부 절대 좌표 조절) */
#story-section .swiper-slide .swiper-button-prev,
#story-section .swiper-slide .swiper-button-next {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  z-index: 10 !important;
  color: var(--main-color, #a86e3d) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}
#story-section .swiper-button-next:after, .swiper-button-prev:after {
    font-size: var(--font-size-20-36) !important;
}
#story-section .swiper-slide-active .swiper-button-prev,
#story-section .swiper-slide-active .swiper-button-next {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#story-section .swiper-slide .swiper-button-prev {
  left: -70px !important;
  right: auto !important;
}

#story-section .swiper-slide .swiper-button-next {
  left: auto !important;
  right: -70px !important;
}

#story-section .swiper-button-next:after, 
#story-section .swiper-button-prev:after {
  font-size: 36px;
  font-weight: 700;
}
/*모바일 가로, 타블렛 세로*/
@media screen and (max-width: 1024px) {
	#story-section .swiper-slide .swiper-button-prev {
	  left: -45px !important;
	  right: auto !important;
	}

	#story-section .swiper-slide .swiper-button-next {
	  left: auto !important;
	  right: -45px !important;
	}
}	  

/*모바일 가로, 타블렛 세로*/
@media screen and (max-width: 768px) {
	#story-section .swiper-slide .swiper-button-prev {
	  left: 15px !important;
	  right: auto !important;
	}

	#story-section .swiper-slide .swiper-button-next {
	  left: auto !important;
	  right: 15px !important;
	}
	#story-section .card-info-box {
		margin-left: 20px;
		margin-right: 20px;
	}
	#story-section .info-header {
		align-items: flex-start;
		flex-direction: column-reverse;
	}
	#story-section .btn-group {
		flex-direction: row;
		flex-wrap: nowrap;
	}
	#story-section .badge-label {
		right: 20px;
	}
}	  

/* ==========================================
     services-section
========================================== */	
/* 배너 섹션 스타일 */
#services-section.services-section {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-80-160) 0;    
    background-image: url('../img/backwnsan-main-services-bg.webp');
    background-size: cover;
    background-position: center;
} 
/* 메인 컨테이너 */
#services-section .services-content {
    display: flex;
    width: 100%;
    max-width: var(--max-width2);
    box-sizing: border-box;
    align-items: center;
    gap: var(--gap-40-80);
}

/* 왼쪽 이미지 영역 */
#services-section .image-section {
	flex: 1.1; /* 가용한 공간 차지 */
}

#services-section .image-section img {
    width: 100%;
    height: auto;
    border-radius: var(--padding-15-30);
    display: block;
}

/* 오른쪽 텍스트 영역 */
#services-section .text-section {
	flex: 0.9; /* 가용한 공간 차지 */
	display: flex;
	flex-direction: column;
}

/* 서브 타이틀 */
#services-section .subtitle {
    color: var(--main-color);
    font-size: var(--font-size-18-24);
    font-weight: 700;
    margin-bottom: var(--padding-10-20);
}

/* 메인 타이틀 */
#services-section .main-title {
    font-size: var(--font-size-22-48);
    font-weight: 800;
    margin-bottom: var(--padding-20-40);
}

/* 상세 설명 텍스트 */
#services-section .description-text {
    color: var(--sub-color-2);
    font-size: var(--font-size-15-18);
    margin-bottom: var(--padding-15-30);
    line-height: 1.7;
	word-break: keep-all;
}

/* 버튼 */
#services-section .btn-more {
    display: flex;
    width: fit-content;
    padding: var(--padding-10-20) var(--padding-20-40);
    border: 1px solid var(--sub-color-1);
    border-radius: 60px;
    text-decoration: none;
    color: var(--sub-color-1);
    font-size: var(--font-size-14-16);
    font-weight: 500;
    margin-bottom: var(--padding-20-40);
    transition: background-color 0.3s, color 0.3s;
    align-items: center;
    gap: var(--gap-10-20);
}

#services-section .btn-more:hover,
#services-section .btn-more svg:hover{
	background-color: #333;
	color: #fff;
}

/* 하단 하이라이트 박스 영역 */
#services-section .highlight-container {
	position: relative;
	margin-top: 20px;
}

/* 하이라이트 박스 앞의 선 */
#services-section .highlight-line {
    position: absolute;
    left: -80px;
    top: 30%;
    transform: translateY(-50%);
    width: 80px;
    height: 2px;
    background-color: var(--main-color);
}

/* 하이라이트 박스 */
#services-section .highlight-box {
    display: inline-block;
    background-color: var(--main-color);
    color: #fff;
    padding: var(--padding-5-10) var(--padding-20-40);
    border-radius: 50px;
    font-size: var(--font-size-18-24);
    font-weight: 700;
    margin-bottom: var(--padding-15-30);
}

/* 하단 텍스트 */
#services-section .footer-text {
    color: var(--sub-color-2);
    font-size: var(--font-size-16-22);
    line-height: 1.6;
	word-break: keep-all;
}
/* Swiper 컨테이너 */
#services-section .services-swiper {
    position: relative;   
	padding: 0px 15px;
    padding-bottom: var(--padding-40-80);
    max-width: var(--max-width2);
    width: 100%;
}

/* 페이징 사각 박스 */
#services-section .custom-square-pagination {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

#services-section .custom-square-pagination .swiper-pagination-bullet {
    width: var(--width-40-80);
    height: 6px;
    background-color: #ccc;
    border-radius: 0px;
    opacity: 1;
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0 !important;
}

#services-section .custom-square-pagination .swiper-pagination-bullet-active {
    width: var(--width-40-80);
    background-color: var(--main-color);
}
#services-section .responsive-arrow {
	width: 30px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
	#services-section .container {
		flex-direction: column; /* 세로 배치 */
		gap: 20px;
	}

	#services-section .image-section, .text-section {
		flex: none;
		width: 100%;
	}

	#services-section .highlight-line {
		display: none; /* 모바일에서는 선 숨기기 */
	}
	#services-section .services-content {
		flex-direction: column;
	}	
	#services-section .responsive-arrow {
		width: 20px; /* 모바일에서 더 작게 조정 */
	}
}
/* 모바일 대응 */
@media (max-width: 480px) {
	#services-section .highlight-box {
		font-size: 15px;
		letter-spacing: -0.2px;
	}	
}

/* ==========================================
     services-section
========================================== */	
/* 배너 섹션 스타일 */
#reviews-section.reviews-section {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-80-160) 0;  
	box-shadow: 0 -15px 25px -5px rgba(0, 0, 0, 0.04), 0 15px 25px -5px rgba(0, 0, 0, 0.04);  
} 
/* 메인 컨테이너 */
#reviews-section .reviews-content {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    flex-direction: column;
    gap: var(--gap-40-80);
    padding: 0 15px;
}

/* 타이틀 영역 */
#reviews-section .header {
    display: flex;
    width: 100%;
    max-width: var(--max-width2);
    height: 100%;
    margin: 0 auto;
    align-items: flex-end;
    padding: 0 15px;
}
#reviews-section .header .header-area {
    display: flex;
	width: 50%;
    height: 100%;
    margin: 0 auto;
    flex-direction: column;
}

#reviews-section .brand-name {
    color: var(--main-color);
    font-size: var(--font-size-18-24);
    font-weight: 700;
    margin-bottom: var(--padding-20-40);
}

#reviews-section .main-title {
    font-size: var(--font-size-22-48);
    font-weight: 700;
    margin-bottom: var(--padding-5-10);
}

#reviews-section .sub-title {
    font-size: var(--font-size-22-48);
    font-weight: 700;
    margin-bottom: var(--padding-15-30);
}
#reviews-section .main-title .highlight {
    color: var(--main-color);
}

#reviews-section .notice-text {
	font-size: var(--font-size-15-18);
    color: var(--sub-color-2);
    line-height: 1.6;
    font-weight: 500;
}

/* 컨트롤러 및 인디케이터 */
#reviews-section .slider-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
	width: 50%;
}

#reviews-section .slider-controls > *:last-child {
    margin-left: -10px; /* 기존 gap 20px 중 10px를 줄여서 결과적으로 10px 간격 유지 */
}

#reviews-section .page-indicator {
    font-size: var(--font-size-15-18);
    color: var(--sub-color-1);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 15px;
}

#reviews-section .progress-bar {
	width: var(--width-60-120);
	height: 4px;
	background-color: #e0e0e0;
	position: relative;
}

#reviews-section .progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background-color: var(--main-color);
    transition: width 0.3s ease;
}

#reviews-section .control-btn {
	width: var(--padding-35-45);
	height: var(--padding-35-45);
	border: 1px solid #e0e0e0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666666;
	transition: all 0.2s ease;
}

#reviews-section .control-btn.sizes-2 {
	width: var(--padding-40-60);
	height: var(--padding-40-60);
}

#reviews-section .control-btn:hover {
	border-color: #333333;
	color: #111111;
}
#toggle-icon {
  display: block;
  /* CSS로 크기를 조절하고 싶은 경우 아래 주석을 해제하여 사용하세요 */
  width: 16px;
  height: 16px;
}
/* 기본 상태에서는 SVG 내부 path를 모두 숨김 */
#toggle-icon .svg-pause,
#toggle-icon .svg-play {
  display: none;
}

/* fa-pause 클래스가 있을 때는 일시정지 path 노출 */
#toggle-icon.svg-pause .svg-pause {
  display: block;
}

/* fa-play 클래스가 있을 때는 재생 path 노출 */
#toggle-icon.svg-play .svg-play {
  display: block;
}

/* 슬라이드 영역 (위아래 교차 위치 공간 확보를 위해 padding 조정) */
#reviews-section .slider-wrap {
	width: 100%;
	overflow: hidden;
	padding: 40px 0; /* 위아래 이동 여유 공간 추가 */
}

#reviews-section .card-track {
	display: flex;
	gap: 30px;
	align-items: center;
	will-change: transform;
}

/* 카드 기본 규격 */
#reviews-section .review-card {
	flex: 0 0 calc((100% - 80px) / 5);
	border-radius: 20px;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
	transition: transform 0.4s ease, box-shadow 0.3s ease;
	cursor: pointer;
	user-select: none;
}

.review-card .card-link {   
	padding: var(--padding-20-40) var(--padding-15-30);
    display: flex;
    width: 100%;
    /* height: 100%; 대신 flex: 1을 사용하여 부모의 남은 공간을 모두 채우도록 변경 */
    flex: 1; 
    text-decoration: none;
    color: inherit;
    flex-direction: column;
    justify-content: space-between;
}

/* 
   [핵심] 위 / 아래 교차 배치 규칙
   - 홀수 번째 카드: 위로 -25px 이동
   - 짝수 번째 카드: 아래로 +25px 이동
*/
#reviews-section .review-card:nth-child(odd) {
	transform: translateY(-25px);
}

#reviews-section .review-card:nth-child(even) {
	transform: translateY(25px);
}

/* 마우스 호버 시 원래 지그재그 위치 유지하면서 약간 더 이동 */
#reviews-section .review-card:nth-child(odd):hover {
	transform: translateY(-32px);
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

#reviews-section .review-card:nth-child(even):hover {
	transform: translateY(18px);
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

/* 카드 테마별 배경색 */
#reviews-section .card-type-1 { 
    background-image: url('../img/backwnsan-main-reviews-bg-01.webp');
    background-size: cover;
    background-position: center;
}

#reviews-section .card-type-2 {
    background-image: url('../img/backwnsan-main-reviews-bg-02.webp');
    background-size: cover;
    background-position: center;
}

#reviews-section .card-type-3 {
    background-image: url('../img/backwnsan-main-reviews-bg-03.webp');
    background-size: cover;
    background-position: center;
}
#reviews-section .card-type-4 { 
    background-image: url('../img/backwnsan-main-reviews-bg-04.webp');
    background-size: cover;
    background-position: center;
}

#reviews-section .card-type-5 {
    background-image: url('../img/backwnsan-main-reviews-bg-05.webp');
    background-size: cover;
    background-position: center;
}

#reviews-section .card-type-6 {
    background-image: url('../img/backwnsan-main-reviews-bg-06.webp');
    background-size: cover;
    background-position: center;
}

#reviews-section .card-type-7 { 
    background-image: url('../img/backwnsan-main-reviews-bg-01.webp');
    background-size: cover;
    background-position: center;
}

#reviews-section .card-type-8 {
    background-image: url('../img/backwnsan-main-reviews-bg-02.webp');
    background-size: cover;
    background-position: center;
}

#reviews-section .card-type-9 {
    background-image: url('../img/backwnsan-main-reviews-bg-03.webp');
    background-size: cover;
    background-position: center;
}
#reviews-section .card-type-0 { 
    background-image: url('../img/backwnsan-main-reviews-bg-04.webp');
    background-size: cover;
    background-position: center;
}

#reviews-section .card-category {
    font-size: var(--font-size-16-20);
    font-weight: 600;
    margin-bottom: var(--padding-10-20);
    text-decoration: underline;
    text-underline-offset: 4px;
}

#reviews-section .card-type-1 .card-category { 
	color: #555555; 
}
#reviews-section .card-type-2 .card-category { 
	color: #333333; 
}
#reviews-section .card-type-3 .card-category,
#reviews-section .card-type-9 .card-category { 
	color: #ffffff; 
}

#reviews-section .card-content {
	font-size: var(--font-size-15-18);
	line-height: 1.6;
	font-weight: 500;
	flex-grow: 1;
	word-break: keep-all;
	
	/* 3줄 이상 넘어갈 때 말줄임표 처리 추가 */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* 보여줄 최대 줄 수 (3줄) */
	-webkit-box-orient: vertical;
}

#reviews-section .card-type-1 .card-content { 
	color: #222222; 
}
#reviews-section .card-type-2 .card-content { 
	color: #222222; 
}
#reviews-section .card-type-3 .card-content,
#reviews-section .card-type-9 .card-content { 
	color: #ffffff; 
}

#reviews-section .card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-size-13-14);
	margin-top: var(--padding-10-20);
}

#reviews-section .card-type-1 .card-footer { 
	color: #555555; 
}
#reviews-section .card-type-2 .card-footer { 
	color: #777777; 
}
#reviews-section .card-type-3 .card-footer,
#reviews-section .card-type-9 .card-footer { 
	color: #FFFFFF; 
}

#reviews-section .author { font-weight: 600; }


#reviews-section .responsive-arrow {
	width: 30px;
}
#toggle-icon.responsive-arrow {
	width: 20px;
}

#reviews-section .date img {
    font-weight: 600;
    width: var(--padding-20-40); 
	opacity: 0.4;
}

/* 반응형 Breakpoints */
@media (max-width: 1280px) {
	#reviews-section .review-card {
		flex: 0 0 calc((100% - 60px) / 4);
	}
}

@media (max-width: 1024px) {
	#reviews-section .header { padding: 0;flex-direction: column; }
	#reviews-section .slider-controls { padding: 0 20px;width: 100%;justify-content: center; }
	#reviews-section .main-title,
	#reviews-section .sub-title { font-size: 28px; }
	#reviews-section .review-card {
		flex: 0 0 calc((100% - 40px) / 3);
	}
	#reviews-section .header .header-area {
		width: 100%;
	}
	#reviews-section .notice-text {
		margin-bottom: var(--padding-25-50);
	}
	#reviews-section .reviews-content {
		gap: var(--padding-20-40);
	}
}

@media (max-width: 640px) {
    #reviews-section .main-title,
    #reviews-section .sub-title { font-size: 22px; }
    #reviews-section .slider-controls { justify-content: center; width: 100%; }
    
    /* 감싸는 상위 컨테이너 */
    #reviews-section .slider-wrap {
        width: 100%;
        overflow: hidden;
        padding: 0; /* 상하 여백 제거 */
    }

    /* 카드 트랙 간격 제거 */
    #reviews-section .card-track {
        gap: 0 !important;
    }

    /* 슬라이드 카드: 가로 100% 채움 */
    #reviews-section .review-card {
        flex: 0 0 100% !important;
        max-width: 100%;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 위아래 지그재그 교차 효과 제거 (중앙 정렬에 필수) */
    #reviews-section .review-card:nth-child(odd),
    #reviews-section .review-card:nth-child(even) {
        transform: none !important;
    }
	#reviews-section .responsive-arrow {
		width: 20px;
	}
	#toggle-icon.responsive-arrow {
		width: 10px;
	}

	#reviews-section .date img {
		width: 30px; 
	}
	
}


/* ==========================================
     services-section
========================================== */	
/* 배너 섹션 스타일 */
#history-section.history-section {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-80-160) 0;    
} 
/* 메인 컨테이너 */
#history-section .history-content {
    max-width: var(--max-width2);
    width: 100%;
    text-align: center;
    padding: 0 15px;
}

#history-section .subtitle {
    color: var(--main-color);
    font-size: var(--font-size-18-24);
    font-weight: 700;
    margin-bottom: var(--padding-20-40);
}

#history-section .title {
	font-size: var(--font-size-22-48);
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--padding-15-30);
}

#history-section .description {
    font-size: var(--font-size-15-18);
    color: var(--sub-color-2);
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: var(--padding-25-50);
	word-break: keep-all;
}

#history-section .card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

#history-section .card {
	text-align: left;
}

#history-section .image-wrapper {
    width: 100%;
    height: 100%;
    max-height: 310px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
}

#history-section .image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#history-section .card-title {
	font-size: var(--font-size-18-26);
	font-weight: 700;
	color: var(--sub-color-1);
	margin-bottom: var(--padding-5-10);
}

#history-section .card-desc {
	font-size: var(--font-size-15-18);
	color: var(--sub-color-2);
	line-height: 1.5;
}

/* Play icon overlay for video card */
#history-section .play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ffffff;
}

#history-section .play-button::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #ffffff;
	margin-left: 2px;
}

@media (max-width: 900px) {
	#history-section .card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	#history-section .card-grid {
		grid-template-columns: 1fr;
	}
}


/* ==========================================
     news-section
========================================== */	
/* 배너 섹션 스타일 */
#news-section.news-section {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-80-160) 0;    
    background-image: url('../img/backwnsan-main-news-bg.webp');
    background-size: cover;
    background-position: center;
} 
/* 메인 컨테이너 */
#news-section .news-content {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    width: 100%;
    overflow: hidden;
    padding: 0 15px;
}
    /* 헤더 컨테이너 (1200px 중앙 정렬) */
#news-section .header-container {
    width: 100%;
    max-width: var(--max-width2);
    margin: 0 auto;
}

#news-section .section-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: var(--padding-20-40);
    }

#news-section .sub-title {
    color: var(--main-color);
    font-size: var(--font-size-18-24);
    font-weight: 700;
    margin-bottom: var(--padding-20-40);
    }

#news-section .main-title {
    font-size: var(--font-size-22-48);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: var(--padding-15-30);
    }

#news-section .description {
    font-size: var(--font-size-15-18);
    color: var(--sub-color-2);
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: var(--padding-25-50);
    }

    /* 컨트롤 버튼 */
#news-section .controls-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
    }

#news-section .nav-btn {
      width: var(--padding-40-60);
      height: var(--padding-40-60);
      border-radius: 50%;
      border: 1px solid #ccc;
      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

#news-section .nav-btn:hover {
      border-color: #333;
      background-color: rgba(0,0,0,0.05);
    }

#news-section .more-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-5-10);
    width: var(--padding-80-160);
    height: 60px;
    border-radius: 30px;
    border: 1px solid var(--sub-color-1);
    background-color: transparent;
    font-size: var(--font-size-14-16);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    justify-content: center;
}

#news-section .more-btn:hover {
      background-color: #333;
      color: #fff;
    }

    /* 슬라이더 영역 - 전체 100% 폭 사용 */
#news-section .swiper-section {
      width: 100%;
      position: relative;
    }

#news-section .swiper {
      width: 100%;
      overflow: visible; /* 양옆 카드가 잘리지 않도록 설정 */
      padding-bottom: 60px;
    }

#news-section .swiper-slide {
      display: flex;
      flex-direction: column;
    }

    /* 카드 이미지 */
#news-section .card-item {
      position: relative;
      width: 100%;
      height: 300px;
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      background-color: #e5e5e5;
    }

#news-section .card-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 뱃지 */
#news-section .badge {
    position: absolute;
    background-color: var(--main-color);
    color: #ffffff;
    font-size: var(--font-size-16-20);
    font-weight: 500;
    padding: var(--padding-5-10) var(--padding-15-30);
    border-radius: 20px 0 20px 0;
    z-index: 2;
}

    /* 카드 타이틀 */
#news-section .card-title {
      font-size: var(--font-size-18-26);
      font-weight: 700;
      color: #111;
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ==========================================
       ✨ 하단 커스텀 프로그레스 막대바 전용 스타일
       ========================================== */
#news-section .custom-pagination-container {
    max-width: var(--max-width2);
    margin: var(--padding-40-80) auto 0 auto;
}

    /* 막대바 전체 베이스 트랙 */
#news-section .swiper-pagination-progressbar {
      position: relative !important;
      height: 4px !important;
      background: rgba(0, 0, 0, 0.08) !important;
      border-radius: 2px !important;
      overflow: hidden;
      top: auto !important;
      bottom: auto !important;
      left: auto !important;
      width: 100% !important;
    }

    /* 채워지는 프로그레스바 트랙 */
#news-section .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
      background: #a46b4d !important;
      border-radius: 2px;
    }
	
#news-section .responsive-arrow {
	width: 30px;
}
@media only screen and (max-width : 768px) {
	#news-section .section-header {
		flex-direction: column;
		align-items: flex-start;
	}
	
	#news-section .responsive-arrow {
		width: 20px;
	}
	#news-section .more-btn {
		width: fit-content;
        height: 40px;
        padding: 0 20px;
	}
}



/* ==========================================
     community-section
========================================== */	
/* 배너 섹션 스타일 */
#community-section.community-section {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-80-160) 0;    
} 
/* 메인 컨테이너 */
#community-section .community-content {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    width: 100%;
    align-items: center;
    padding: 0 15px;
}
/* 상단 헤더 영역 */
#community-section .community-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--padding-20-40);
    width: 100%;
    max-width: var(--max-width2);
}

#community-section .sub-title {
    color: var(--main-color);
    font-size: var(--font-size-18-24);
    font-weight: 700;
    margin-bottom: var(--padding-20-40);
}

#community-section .main-title {
    font-size: var(--font-size-22-48);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: var(--padding-15-30);
}

#community-section .description {
    font-size: var(--font-size-15-18);
    color: var(--sub-color-2);
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: var(--padding-25-50);
	word-break: keep-all;
}

/* 오른쪽 컨트롤러 버튼들 */
#community-section .header-controls {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* 오른쪽 컨트롤러 버튼들 */
#community-section .tab-group {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* 오른쪽 컨트롤러 버튼들 */
#community-section .action-group {
	display: flex;
	align-items: center;
	gap: 12px;
}

#community-section .tab-btn {
	width: var(--padding-80-160);
    height: var(--padding-40-60);
	border-radius: 30px;
	font-size: var(--font-size-16-20);
	border: none;
	cursor: pointer;
	background: none;
	color: #888;
	font-weight: 500;
	transition: all 0.2s;
}

#community-section .tab-btn:hover {
	background-color: var(--main-color);
	color: #fff;
}

#community-section .tab-btn.active {
	background-color: var(--main-color);
	color: #fff;
}

/* 커스텀 네비게이션 화살표 */
#community-section .nav-btn {
	width: var(--padding-40-60);
    height: var(--padding-40-60);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    border-image: initial;
    transition: 0.2s;
}

#community-section .nav-btn:hover {
      border-color: #333;
      background-color: rgba(0,0,0,0.05);
    }

#community-section .more-btn {
    display: inline-flex;
    align-items: center;
    width: var(--padding-80-160);
    height: var(--padding-40-60);
    background-color: transparent;
    font-size: var(--font-size-14-16);
    font-weight: 500;
    justify-content: center;
    gap: var(--gap-5-10);
    border-radius: 30px;
    border: 1px solid var(--sub-color-1);
    text-decoration: none;
    transition: 0.2s;
}

#community-section .more-btn:hover {
      background-color: #333;
      color: #fff;
    }

/* 탭 콘텐츠 및 Swiper 여백 제어 */
#community-section .tab-content {
	display: none; /* 기본 숨김 */
}

#community-section .tab-content.active {
    width: 100%;
    display: flex;
    overflow: hidden;
    justify-content: center;
}

#community-section .swiper {
    width: calc(var(--max-width2) + 30px);
    overflow: hidden;
    padding: 15px 15px 30px 15px !important;
    margin: -15px -15px -30px -15px !important;
}

/* Swiper 기본 카드 스타일링 */
#community-section .swiper-slide {
    background-color: #f8f8f7;
    border-radius: 20px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid transparent;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.swiper-slide .slide-link-wrap {   
	padding: var(--padding-20-40) var(--padding-15-30);
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    flex-direction: column;
    justify-content: space-between;
}

/* 첫 번째 활성 슬라이더 및 Hover 카드 효과 */
#community-section .swiper-slide-active, 
#community-section .swiper-slide:hover {
    border-color: #a3724e !important;
    background-color: #ffffff !important;
    box-shadow: 8px 8px 10px rgba(100, 70, 40, 0.2) !important;
    transform: translateY(-4px);
    margin: 4px 0 16px 0;
}

#community-section .card-category {
    font-size: var(--font-size-16-20);
    color: var(--main-color);
    font-weight: 600;
    margin-bottom: var(--padding-10-20);
}

#community-section .card-title {
    font-size: var(--font-size-18-22);
    font-weight: 600;
    color: var(--sub-color-1);
    line-height: 1.5;
    word-break: keep-all;
    
    /* 2줄 이상 넘어갈 때 말줄임표 처리 추가 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 보여줄 최대 줄 수 */
    -webkit-box-orient: vertical;
}

#community-section .card-date {
    font-size: var(--font-size-13-15);
    color: var(--sub-color-2);
}
#community-section .responsive-arrow {
	width: 30px;
}


@media only screen and (max-width : 768px) {
	#community-section .community-header {
		flex-direction: column;
		align-items: flex-start;
	}
	#community-section .swiper {
		padding: 0 !important;
		margin: 0 !important;
	}
	#community-section .swiper-slide-active, #community-section .swiper-slide:hover {
		box-shadow: 0px 0px 0px rgba(100, 70, 40, 0.0) !important;
	}
	#community-section .responsive-arrow {
        width: 20px;
    }
	.header-controls {
	  display: flex;
	  flex-wrap: wrap; /* 줄바꿈 허용 */
	  gap: 10px; /* 버튼 간격 */
	  align-items: center;
	  justify-content: center; /* 전체 요소를 중앙 정렬 */
	  width: 100%;
	}

	/* 1. 위쪽 줄 (탭 버튼 2개 - 중앙 정렬 및 가변 폭) */
	.header-controls .tab-btn {
	  /* calc(50% - 5px)로 두 버튼이 첫 줄(100%)을 채우고 중앙 정렬됨 */
		flex: 0 1 calc(125% - 5px);
        width: 100% !important;
        text-align: center;
        padding: 0 20px;
        white-space: nowrap;
	}

	/* 2. 아래쪽 줄 (버튼 3개 - 중앙 정렬) */
	/* Swiper 네비게이션 버튼 2개 */
	.header-controls .nav-btn {
	  flex: 0 0 auto;
	}

	/* 자세히보기 버튼 */
	.header-controls .more-btn {
		width: 100% !important;
		padding: 20px;
		margin-left: 0;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		white-space: nowrap;
	}
}


/* ==========================================
     direct-section
========================================== */	
/* 배너 섹션 스타일 */
#direct-section.direct-section {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-80-160) 0; 
    background-image: url('../img/backwnsan-main-direct-bg.webp');
    background-size: cover;
    background-position: center;
} 
/* 메인 컨테이너 */
#direct-section .direct-content {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    width: 100%;
    align-items: center;
    padding: 0 15px;
}

#direct-section .container {
    max-width: var(--max-width2);
}

#direct-section .header {
	text-align: center;
	margin-bottom: 35px;
}

#direct-section .header .sub {
	color: var(--main-color);
    font-size: var(--font-size-18-24);
    font-weight: 700;
    margin-bottom: var(--padding-20-40);
}

#direct-section .header h1, #direct-section .header h2 {
    font-size: var(--font-size-22-48);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: var(--padding-15-30);
}

#direct-section .header p {
    font-size: var(--font-size-15-18);
    color: var(--sub-color-2);
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: var(--padding-25-50);
	word-break: keep-all;
}

/* 레이아웃 */
#direct-section .grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: var(--padding-15-30);
}

/* 슬라이더 */
#direct-section .slider-card {
	position: relative;
	border-radius: var(--padding-10-20);
	overflow: hidden;
	/*height: 400px;*/
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

#direct-section .slides-wrapper {
	display: flex;
	height: 100%;
}

#direct-section .slide {
	min-width: 100%;
	height: 100%;
	position: relative;
	padding: var(--padding-25-50) var(--padding-40-80);
	color: #fff;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#direct-section .slide::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
	z-index: 1;
}

#direct-section .slide-content,
#direct-section .btn-more {
	position: relative;
	z-index: 2;
}

#direct-section .slide-tag {
    font-size: var(--font-size-24-55);
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: var(--padding-0-5);
}

#direct-section .slide-title {
    font-size: var(--font-size-20-36);
    font-weight: 700;
    margin-bottom: var(--padding-10-20);
}

#direct-section .slide-desc {
    font-size: var(--font-size-15-18);
    line-height: 1.6;
    color: var(--sub-color-12);
    font-weight: 300;
}

#direct-section .btn-more {
    display: flex;
    width: fit-content;
    height: auto;
    padding: var(--padding-8-15) var(--padding-20-40);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    gap: var(--gap-5-10);
    font-size: var(--font-size-14-16);
    transition: 0.3s;
    align-items: center;
    justify-content: center;
}

#direct-section .btn-more:hover {
    background: rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 1.0)
}

/* 슬라이드 화살표 버튼 */
#direct-section .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    transition: 0.3s;
    background: transparent;
    opacity: 0.6;
}

#direct-section .prev {
	left: 15px;
}

#direct-section .next {
	right: 15px;
}

/* 우측 카드가 배치되는 컨테이너 */
#direct-section .right-content {
    display: flex;
    flex-direction: column;
    gap: var(--padding-5-10);
}

/* 퍼플 카드 */
#direct-section .card-purple {
    color: #fff;
    border-radius: 20px;
    height: 185px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#direct-section .card-purple a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--padding-10-20);
}

#direct-section .consulting-banner {
    position: relative;
    width: 100%;
    border-radius: var(--padding-10-20);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: var(--padding-35-45) var(--padding-20-40);
    background-image: url(../img/consulting-banner-bg.webp);
    background-size: cover;
    background-position: center;
}

        /* 텍스트 영역 스타일 */
#direct-section .banner-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 2;
        }

#direct-section .banner-subtitle {
    font-size: var(--font-size-14-16);
    color: var(--main-color);
    margin-bottom: var(--padding-4-8);
    font-weight: 500;
}

#direct-section .banner-title {
    font-size: var(--font-size-19-30);
    color: #ffffff;
    font-weight: 700;
    margin-bottom: var(--padding-8-15);
    letter-spacing: -0.5px;
}

#direct-section .banner-link {
    font-size: var(--font-size-13-15);
    color: rgb(178 123 82 / 66%);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--padding-5-10);
    font-weight: 500;
    transition: color 0.2s ease;
}

#direct-section .banner-link:hover {
            color: #bfa17c;
        }

        /* 인물 이미지 영역 스타일 */
#direct-section .banner-image-wrap {
    position: absolute;
    right: var(--padding-20-40);
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

#direct-section .banner-image-wrap img {
    height: 90%;
    border-radius: var(--padding-10-20);
    object-fit: contain;
    object-position: right bottom;
}
		

/* 하단 서브 카드 */
#direct-section .sub-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-5-10);
}

#direct-section .card-small {
    position: relative;
    background: #f4e9e1;
    border-radius: var(--padding-10-20);
    padding: var(--padding-10-20) var(--padding-15-30);
    /*height: 185px;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#direct-section .card-small h4 {
    display: flex;
    font-size: var(--font-size-18-24);
    font-weight: 600;
    color: var(--main-color);
    justify-content: space-between;
    align-items: center;
}

#direct-section .card-small p {
    font-size: var(--font-size-15-17);
    color: var(--sub-color-2);
    margin-top: var(--padding-8-15);
    font-weight: 500;
    line-height: 1.4;
}

#direct-section .card-small .icon {
    width: var(--padding-35-45);
    height: var(--padding-35-45);
    position: absolute;
    right: 30px;
    bottom: 20px;
}

#direct-section .card-small .icon img {
    position: relative;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width : 768px) {
	#direct-section .grid {
		grid-template-columns: 1fr;
	}
	#direct-section .card-purple {
		height: 100%;
	}
	#direct-section .prev {
		left: 0px;
	}
	#direct-section .next {
		right: 0px;
	}
}


/* ==========================================
     location-section
========================================== */	
/* 배너 섹션 스타일 */
#location-section.location-section {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-80-160) 0;    
} 
/* 메인 컨테이너 */
#location-section .location-content {
    display: flex;
    background-color: #ffffff;
    border-radius: 12px;
    max-width: var(--max-width2);
    width: 100%;
    overflow: hidden;
    padding: 0 15px;
}

/* Left Info Section */
#location-section .info-section {
    flex: 1.2;
    padding: 0 var(--padding-20-40) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#location-section .info-group {
    padding-bottom: var(--padding-10-20);
    border-bottom: 1px solid var(--sub-color-10);
    margin-bottom: var(--padding-10-20);
    white-space: nowrap;
}

#location-section .info-group:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

#location-section .title-row {
    display: flex;
    align-items: center;
}

#location-section .tel-label {
    font-size: var(--font-size-18-24);
    font-weight: 700;
    width: var(--width-60-120);
}

#location-section .map-label {
    font-size: var(--font-size-19-30);
    font-weight: 500;
}

#location-section .phone-number {
    font-size: var(--font-size-24-55);
    font-weight: 800;
    color: var(--main-color);
    letter-spacing: 0;
}

#location-section .hours-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--padding-5-10);
    font-size: var(--font-size-15-18);
}

#location-section .hours-label {
    width: var(--width-60-120);
	font-weight: 600;
}

#location-section .hours-time {
    color: var(--sub-color-2);
}

#location-section .sub-note {
    font-size: var(--font-size-15-18);
    color: var(--sub-color-2);
    margin-top: var(--padding-5-10);
}

#location-section .address-text {
    font-size: var(--font-size-16-20);
    color: var(--sub-color-2);
    line-height: 1.5;
}

#location-section .ars-label {
    font-size: var(--font-size-19-30);
	font-weight: 500;
	margin-right: 8px;
}

#location-section .ars-number {
    font-size: var(--font-size-19-30);
    font-weight: 500;
    color: var(--main-color);
}

#location-section .ars-sub {
    font-size: var(--font-size-19-30);
	font-weight: 500;
    color: var(--main-color);
}

/* Right Map Section */
#location-section .map-section {
    flex: 1.8;
    position: relative;
    border: solid 1px var(--sub-color-10);
    border-radius: 20px;
    overflow: hidden;
    min-height: 550px;
}

#location-section .map-section img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 지도 크기 및 스타일 설정 */
#map {
	width: 100%;
	height: 550px;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 인포윈도우 커스텀 스타일 */
#location-section .info-window {
	padding: 10px;
	font-size: 13px;
	line-height: 1.4;
	color: #333;
}
#location-section .info-title {
	font-weight: bold;
	margin-bottom: 4px;
	color: #000;
}

/* Responsive styling */
@media (max-width: 768px) {
	#location-section .info-section {
		padding: 0 0 30px 0;
	}
	#location-section .location-content {
		flex-direction: column;
	}
	#location-section .map-section {
		height: 350px;
		min-height: 350px;
	}
	#map, .map_wrap, .daummap {
		width: 100% !important;
		height: 350px !important; 
		min-height: 350px;
	}
	#location-section .tel-label {
		width: 100px;
		padding-right: 20px;
	}
	#location-section .hours-label {
		width: 100px;
		padding-right: 20px;
	}
	#story-section .story-content,
	#history-section .history-content,
	#direct-section .header {
		text-align: left;
	}
}
@media(max-width:767px){#hero-section.hero-section::before{background-image:url(../img/responsive-960-backwnsan-main-hero.webp);}}