@import url('/user/new/css/font/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/* =========================================
   메인
========================================= */
.main-visual{position:relative; width:100%; height:920px; margin-top:85px; background:#cad3dc; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.visual-bg{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
.visual-bg::after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.05);}
.bg-img{width:100%; height:100%; object-fit:cover; object-position:center;}
.visual-container{position:relative; z-index:2; max-width:1200px; width:100%; padding:0 70px; margin:0 auto; display:flex; justify-content:center;}


/* =========================================
   메인 - 소개
========================================= */
.intro-section{position:relative; padding:70px 0; width:100%; background:#fff;}
.intro-container{position:relative; min-height:800px;}
.intro-title-box{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; z-index:5; width:100%; max-width:900px;}
.intro-title-box h2{font-size:42px; font-weight:700; color:#584FA1; line-height:1.5; letter-spacing:-0.02em;}
.intro-title-box h2 strong{font-weight:800;}
.floating-cards{position:relative; width:100%; height:800px;}
.card{position:absolute; z-index:2;}
.card-inner{position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden; z-index:2;}
.card-inner img{width:100%; height:100%; object-fit:cover;}
.card-decor{position:absolute; background:#584FA1; border-radius:20px; z-index:1;}
.card-decor.s1{width:200px; height:200px;}
.card-decor.s2{width:108px; height:108px;}
.card-decor.s3{width:109px; height:109px;}
.card-decor.s4{width:110px; height:110px;}
.card-decor.s5{width:241px; height:241px;}
.card-1{width:300px; height:300px; top:15%; left:-15px;}
.card-1 .card-decor{bottom:-30px; right:-40px;}
.card-2{width:185px; height:185px; top:0; left:42%;}
.card-2 .card-decor{bottom:-40px; right:-40px;}
.card-3{width:185px; height:185px; top:20%; right:60px;}
.card-3 .card-decor{top:-60px; right:-30px;}
.card-4{width:185px; height:185px; bottom:5%; left:20%;}
.card-4 .card-decor{bottom:-25px; left:-25px;}
.card-5{width:260px; height:260px; bottom:0%; right:15%;}
.card-5 .card-decor{top:-30px; left:-30px;}

@media screen and (max-width:1024px){
	.main-visual{height:700px;}
	.card-3{right:2%;}
	.card-4{left:15%;} 
	.card-5{right:10%;}
}

@media screen and (max-width:768px){
	.main-visual{height:500px;} 
	.intro-section{padding:60px 0;} 
	.intro-container{display:flex; flex-direction:column; align-items:center; min-height:auto;} 
	.intro-title-box{position:static; transform:none; margin-bottom:40px;} 
	.intro-title-box h2{font-size:24px;}
	.floating-cards{position:static; height:auto; display:grid; grid-template-columns:repeat(2, 1fr); gap:40px; width:100%; justify-items:center;}
	.card{position:relative; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:140px; height:140px;}
	.card-3 .card-decor{top:-5px; left:-10px;}
	.card-5{grid-column:span 2;}
	.card-decor.s1, .card-decor.s2, .card-decor.s3, .card-decor.s4, .card-decor.s5{width:100px; height:100px;}
}





/* =========================================
   공지
========================================= */
.news-section {position: relative;width: 100%;background: #4d4090;padding: 80px 0; overflow: hidden; font-family: 'Pretendard', -apple-system, sans-serif;}
.news-bg-heart {position: absolute;top: 50%;right: -5%;transform: translateY(-50%);width: 800px;height: 800px;background: url('/user/new/images/main/notice_bg.png') no-repeat center center;background-size: contain;z-index: 1;}
.news-inner {position: relative;z-index: 2;max-width: 1200px;margin: 0 auto;padding: 0 20px;display: flex;justify-content: space-between;align-items: center;gap: 50px;}

/* -----------------------------------------
   좌측 텍스트 영역
----------------------------------------- */
.news-text-area {flex: 1;color: #fff;}
.news-label {display: flex;align-items: center;gap: 8px;margin-bottom: 20px;}
.news-label > span{font-family: "Montserrat" !important; font-optical-sizing: auto; font-style: normal;font-size: 14px; font-weight: 700;}
.heart-icon {width:20px; height:20px; background:url('/user/new/images/main/ico_title_wh.svg') no-repeat center center;background-size: contain;}
.news-title {font-size:36px;line-height: 1.4;font-weight: 700;letter-spacing: -0.02em;	text-align:left;}

/* -----------------------------------------
   우측 카드 영역
----------------------------------------- */
.news-card-area {flex: 1;display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;max-width: 600px;text-align:left;}
.news-card-area .news-card:nth-child(odd) {transform: translateY(50px);}
.news-card {position: relative;background: #fff;border-radius: 20px;padding: 30px 24px;display: flex;flex-direction: column;min-height: 240px;transition: transform 0.3s ease, box-shadow 0.3s ease;overflow: hidden;}
.news-card:hover {box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);}
.news-card-area .news-card:nth-child(odd) {transform: translateY(80px);}
.news-card-area .news-card:nth-child(even) {transform: translateY(-80px);}
.news-card-area .news-card:nth-child(odd):hover {transform: translateY(75px);}
.news-card-area .news-card:nth-child(even):hover {transform: translateY(-85px);}
.card-watermark {position: absolute;bottom:10px;right:20px;width:50px;height:45px;background: url('/user/new/images/main/ico_notice_sm1.svg') no-repeat center right;background-size: contain;z-index: 1;}
.watermark-green {background: url('/user/new/images/main/ico_notice_sm2.svg') no-repeat center right;background-size: contain;}
.badge {align-self: flex-start;padding: 4px 12px;border-radius: 4px;font-size: 12px;font-weight: 700;color: #fff;margin-bottom: 16px;}
.badge-purple { background:#5A52C3;}
.badge-green { background:#26A986;}
.card-title {font-size: 16px;font-weight: 600;color: #333333;line-height: 1.5; margin-bottom: autoword-break: keep-all;z-index: 2;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;max-height: 72px;}
.card-date {font-size: 13px;color: #999999;margin-top: 20px;z-index: 2;}

@media screen and (min-width: 1025px) {
	.news-card-area .news-card:nth-of-type(2){border-radius:0 0 20px 20px;}
	.news-card-area .news-card:nth-of-type(3){border-radius:20px 20px 0 0;}
}

@media screen and (max-width: 1024px) {
	.news-section{padding-bottom:120px;}
	.news-inner {flex-direction: column; align-items: flex-start; gap: 60px;}
	.news-text-area {width: 100%;}.news-card-area {width: 100%; max-width: 100%;}
}

@media screen and (max-width: 768px) {.news-section {padding: 60px 0;}
	.news-card-area {grid-template-columns: 1fr; gap: 16px;}
	.news-card-area .news-card:nth-child(odd),.news-card-area .news-card:nth-child(even) {transform: none;}
	.news-card-area .news-card:nth-child(odd):hover,.news-card-area .news-card:nth-child(even):hover {transform: translateY(-5px);}
}





/* =========================================
   PURPLE HEART SUPPORT
========================================= */
.support-banner {position: relative; width: 100%; height:700px; background: url('/user/new/images/main/cont03_bg.png') no-repeat center center; background-size: cover; display: flex; align-items: center;}
.support-banner::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 1;}
.banner-inner {position: relative; z-index: 2; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 20px; color: #fff;}
.banner-label {display: flex; align-items: center; gap: 8px; margin-bottom: 20px;}
.banner-label > span{font-family: "Montserrat" !important; font-optical-sizing: auto; font-style: normal;font-size: 14px; font-weight: 700;}
.banner-title {font-size:36px;line-height: 1.4;font-weight: 700;letter-spacing: -0.02em;	text-align:left;}

/* -----------------------------------------
   슬라이드
----------------------------------------- */
.support-split-section {width: 100%; background: linear-gradient(to right, #f8f9fa 50%, #43337a 50%);}
.support-inner {max-width: 1200px; margin: 0 auto; display: flex; min-height:650px;}
.split-left-content, .split-right-content {flex: 1; display: flex; align-items: center; padding-left:20px; padding-right:20px; text-align:left;}
.split-right-content {justify-content: flex-end; color: #fff;}

/* -----------------------------------------
   좌측: 이미지 프레임
----------------------------------------- */
.img-slider-frame {position: relative; width: 100%; max-width: 380px; aspect-ratio: 1 / 1;}
.imgSwiper {width: 100%; height: 100%; overflow: hidden; border-radius: 4px;}
.imgSwiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.decor-icon {position: absolute; top: -20px; left: -30px; width:50px; height:50px; background: url('/user/new/images/main/ico_deco.svg') no-repeat center center; background-size: contain; z-index: 10;}

/* -----------------------------------------
   우측: 텍스트 프레임
----------------------------------------- */
.text-slider-frame {width: 100%; max-width: 480px;}
.textSwiper {width: 100%; overflow: hidden;}
.textSwiper .swiper-slide {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%;}

/* 01 / 05 숫자 영역 (고정) */
.custom-pagination {font-size: 14px; font-weight: 600; margin-bottom: 30px; opacity: 0.8; letter-spacing: 2px;}
.custom-pagination .swiper-pagination-current {color: #fff;}
.custom-pagination .swiper-pagination-total {color: rgba(255, 255, 255, 0.5); }
.slide-title {margin-bottom: 24px; font-size: 36px; line-height: 1.4; font-weight: 400; letter-spacing: -0.02em; text-align: left;}
.slide-desc {font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); word-break: keep-all;}

@media screen and (max-width: 768px) {
    .support-split-section {background: linear-gradient(to bottom, #f8f9fa 50%, #43337a 50%);}
    .support-inner {flex-direction: column;}    
    .split-left-content{justify-content: center; padding:60px 40px;}
	.split-right-content{justify-content: center; padding:0 20px 60px}
    .text-slider-frame {text-align: center;}
	.textSwiper .swiper-slide {align-items: center;}
}





/* =========================================
   WITH PURPLE HEART
========================================= */
.donation-banner {position: relative; width: 100%; height:700px; background: url('/user/new/images/main/cont04_bg.png') no-repeat center center; background-size: cover; display: flex; align-items: center;}
.donation-banner::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: 1;}

/* -----------------------------------------
   버튼 그룹 스타일
----------------------------------------- */
.banner-btn-group {display: flex; gap: 16px; margin-top:45px;}
.banner-btn {display: inline-flex; justify-content: center; align-items: center; min-width: 160px; height: 54px; padding: 0 32px; border-radius: 50px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; transition: all 0.25s ease;}
.btn-purple {background: #5549d6; color: #fff;}
.btn-purple:hover {background: #4337b8; transform: translateY(-2px);}
.btn-translucent {background: rgba(255, 255, 255, 0.25); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px);}
.btn-translucent:hover {background: rgba(255, 255, 255, 0.4); transform: translateY(-2px);}


@media screen and (max-width: 768px) {
    .donation-banner {height: 500px;}
    .banner-title {font-size: 26px; margin-bottom: 30px;}    
    .banner-btn-group {gap: 12px;}
    .banner-btn {min-width: 130px; height: 48px; font-size: 15px; padding: 0 20px;}
}

@media screen and (max-width: 375px) {
    .banner-btn-group {width: 100%;}
    .banner-btn {flex: 1; min-width: auto;}
}





/* =========================================
   PURPLE HEART STORY
========================================= */
.story-section {width: 100%; padding:120px 0; background: #fff; overflow: hidden;}
.story-header-container {max-width: 1200px; margin: 0 auto; padding: 0 20px; margin-bottom: 40px;}
.story-label {display: flex; align-items: center; gap: 8px; margin-bottom: 20px;}
.story-label > span{font-family: "Montserrat" !important; font-optical-sizing: auto; font-style: normal;font-size: 14px; font-weight: 700; color: #333;}
.story-label .heart-icon {width:20px; height:20px; background:url('/user/new/images/main/ico_title_bk.svg') no-repeat center center;background-size: contain;}
.story-title {font-size: 32px; font-weight: 700; color: #111111; letter-spacing: -0.02em; text-align:left;}
.story-slider-outer {width: 100%; position: relative;}
.storySwiper {width: 100%; overflow: visible !important;}
.story-card {border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 2.7; background: #f5f5f5;}
.story-card img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease;}
.story-card:hover img {transform: scale(1.04);}
.story-controls {max-width: 1200px; margin: 40px auto 0; padding: 0 20px;}
.swiper-pagination-progressbar-custom {position: relative; width: 240px; height: 4px; background: #eaeaea; border-radius: 2px; overflow: hidden;}
.swiper-pagination-progressbar-custom .swiper-pagination-progressbar-fill {background: #5549d6 !important;}

@media screen and (max-width: 768px) {
    .story-section {padding: 50px 0;}
    .story-title {font-size: 24px; line-height: 1.3;}
    .story-header-container {margin-bottom: 24px;}
    .story-controls {margin-top: 24px;}
    .swiper-pagination-progressbar-custom {width: 150px;}
}