@charset "utf-8";
:root{
  --title_pc_size: 38px;
  --title_m_size: 32px;
  --decs_pc_size: 18px;
  --decs_m_size: 16px;
  }


/*이달의 센터 소식====================================================================================*/
.center-news { width:100%; text-align:center; margin: clamp(60px, 8vw, 140px) 0; }
.news-inner { max-width:1400px; margin:0 auto; }
.news-title h2 { color:#514E4E; font-family:"Ria Sans"; font-size:var(--title_pc_size); font-weight:700; line-height:100%; }
.news-title p { color:#999; font-family:Pretendard; font-size:var(--decs_pc_size); font-weight:500; margin-top:10px; }
.news-cards-wrapper { margin-top:40px; position:relative; }

@media (max-width: 1200px) {
    .news-title h2 {
        font-size: var(--title_m_size) !important;
    }
    .news-title p {
        font-size: var(--decs_m_size) !important;
    }
}

/* ✅ flex → grid 변경 */
.news-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 36px;
    justify-items: center;
  }
.news-card { 
  flex:1 1 calc(33.3% - 72px); 
  border-radius:12px; 
  box-shadow:0 4px 12px rgba(0,0,0,0.1); 
  aspect-ratio: 300/300;
  overflow:hidden; 
}
.news-card img { width:100%; aspect-ratio: 300/300; object-fit:cover; }

@media (max-width: 1024px) {
  .news-cards{flex-wrap: wrap;}
  
  .news-card {
    flex:1 1 calc(50% - 36px);
  }

  /* 세 번째 카드만 반 높이 */
  .news-cards .news-card:nth-child(3) {
      flex:1 1 calc(100%);
      aspect-ratio: 300/150; /* 기존 300/300의 절반 높이 */
  }

  /* 이미지도 동일하게 맞춤 */
  .news-cards .news-card:nth-child(3) img {
      aspect-ratio: 300/150;
      object-fit: cover;
  }
}



.progress_slider { position:relative; width:100%; margin-top:40px; }
.progress_bar { width:88%; height:2px; background:#eee; position:relative; overflow:hidden; margin:0 auto; }
.progress_fill { width:20%; height:100%; background:#333; transition:width 0.3s ease; }
.slider_controls { position:absolute; right:0; top:-18px; display:flex; gap:8px; align-items:center; }
.slider_btn { width:32px; height:32px; border-radius:50%; border:1px solid #ddd; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; }
.slider_btn:hover { background:#f5f5f5; }
.slider_add { width:32px; height:32px; border-radius:50%; border:none; background:#58b9f5; color:#fff; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; }
.slider_add:hover { background:#3fa8e6; }


/*프로그램 신청====================================================================================*/
.program { width:100%; padding: clamp(60px, 10vw, 140px) 0; text-align:center; background:url("/img/bg02.png") no-repeat center top; background-size:cover; }
.program-inner { max-width:1400px; margin:0 auto; }
.program-title h2 { color:#514E4E; text-align:center; font-family:"Ria Sans"; font-size:var(--title_pc_size); font-weight:700; line-height:100%; margin-bottom:12px; }
.program-title p { color:#999; font-family:Pretendard; font-size:var(--decs_pc_size); font-weight:500; margin-bottom: clamp(32px, 5vw, 72px); }
.program-cards { display:flex; flex-wrap:wrap; gap:24px; justify-content:flex-start; }
.program-card { flex:1 1 calc(50% - 12px); max-width:calc(50% - 12px); border-radius:16px; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.1); display:flex; flex-direction:column; overflow:hidden; }
.card-img { padding:18px; background:#fff; padding-bottom:0; }
.card-img img { width:100%; object-fit:cover; display:block; border-radius:12px; }
.card-body { padding:16px; text-align:left; padding-top:0; }
.card-body h3 { color:#2A2A2A; font-family:Pretendard; font-size:24px; font-weight:500; line-height:normal; padding:9px 0; }
.card-body p { color:#999; font-family:Pretendard; font-size:18px; font-weight:300; line-height:normal; }
.card-link { margin-top:12px; margin-left:auto; width:45px; height:45px; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.program-btn { margin-top:40px; }
.program-btn button { padding:12px 32px; border:1px solid #ddd; border-radius:30px; background:#fff; font-size:16px; cursor:pointer; transition:all 0.2s ease; width:250px; }
.program-btn button:hover { background:#f5f5f5; }

/* ----------- 반응형 ----------- */
@media (max-width:1200px) {
  .program-card { flex:1 1 calc(50% - 12px) !important; max-width:calc(50% - 12px) !important; }
  .program-title h2 { font-size:var(--title_m_size) !important; }
  .program-title p { font-size:var(--decs_m_size) !important; }
}

@media (max-width:768px) {
  .program { padding:60px 0 !important; }
  .program-cards { gap:16px !important; }
  .program-card { flex:1 1 calc(50% - 8px) !important; max-width:calc(50% - 8px) !important; }
  .card-body h3 { font-size:22px !important; }
  .card-body p { font-size:16px !important; }
  .program-btn { margin-top:30px !important; }
  .program-btn button { width:200px; font-size:15px !important; }
}

@media (max-width:480px) {
  .program { padding:40px 0 !important; }
  .program-cards { gap:12px !important;  }
  .program-card { flex:1 1 calc(50% - 6px) !important; max-width:calc(50% - 6px) !important; }
  .card-body h3 { font-size:20px !important; }
  .card-body p { font-size:14px !important; }
  .program-btn button { width:180px !important; font-size:14px !important; padding:10px 24px !important; }
}

@media (max-width:344px) {
  .program { padding:30px 0 !important; }
  .program-card { flex:1 1 calc(50% - 4px) !important; max-width:calc(50% - 4px) !important; }
  .card-body h3 { font-size:18px !important; }
  .card-body p { font-size:13px !important; }
  .program-btn button { width:160px !important; font-size:13px !important; padding:8px 20px ; }
}




/*센터 갤러리====================================================================================*/
.center-story { width:100%; background:#f9f9f9; font-family:"Noto Sans KR",sans-serif; }
.center-story__inner { max-width:1400px; margin:0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.center-story__header { text-align:center; margin-bottom:40px; }
.center-story__title { color:#514E4E; text-align:center; font-family:"Ria Sans"; font-size:38px; font-weight:700; line-height:100%; }
.center-story__subtitle { color:#999; font-family:Pretendard; font-size:20px; font-weight:500; line-height:normal; margin-top:18px; }
.center-story__tabs { display:flex; justify-content:center; background:#cbcbcb; border-radius:30px; padding:6px; margin-bottom:50px; box-shadow:0 4px 8px rgba(0,0,0,0.06); width:535px;}
.center-story__tabs .tab { padding:10px 28px; border-radius:25px; font-size:20px; font-weight:600; color:#666; background:transparent; border:none; cursor:pointer; transition:all 0.3s;  flex:1 1 calc(50% - 50px); }
.center-story__tabs .tab.active { background:#BDB2FF; color:#fff; box-shadow:0 4px 8px rgba(167,139,250,0.4); }
.center-story__content { width:100%; }
.center-story__list { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:40px; }
.tab-content { display:none; }
.tab-content.active { display:grid; }
.story-card { background:#fff; border-radius:16px; padding:24px; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; box-shadow:0 4px 12px rgba(0,0,0,0.08); transition:transform 0.2s,box-shadow 0.2s; min-height:230px; }
.story-card:hover { transform:translateY(-4px); box-shadow:0 6px 16px rgba(0,0,0,0.12); }
.story-card__text { text-align:left; max-width:calc(100% - 40px); height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.story-card__title { color:#2A2A2A; font-family:Pretendard; font-size:24px; font-weight:500; line-height:normal; padding-top:18px; }
.story-card__desc { color:#999; font-family:Pretendard; font-size:18px; font-weight:300; line-height:normal; padding-top:9px; }
.story-card__date { color:#999; font-family:Pretendard; font-size:18px; font-weight:300; line-height:normal; }
.story-card__icon { width:100%; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:flex-end; flex-shrink:0; }
.story-card__icon img { width:45px; height:45px; }
.center-story__footer { text-align:center; padding-bottom: clamp(2rem, 3vw, 140px);}
.btn-view-all { padding:12px 36px; border:none; border-radius:30px; font-size:20px; font-weight:600; color:#555; background:#fff; cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,0.08); transition:all 0.3s; width:250px; aspect-ratio: 250/45;}
.btn-view-all:hover { background:#a78bfa; color:#fff; box-shadow:0 4px 12px rgba(167,139,250,0.4); }

/* 장식 이미지 */
.deco_img__top { width:100%; display:flex; justify-content:flex-end; }
.deco_img__top img:nth-child(2) { margin-top:-50px; margin-right:100px; }
.deco_img__top img:nth-child(1) { margin-top:-50px; margin-right:50px; }
.deco_img__middle { display:flex; align-items:flex-end; width:450px; justify-content:space-between; }
.middle_left_img, .middle_right_img { display:flex; align-items:flex-end; gap:10px; }
.deco_img__bottom { display:flex; align-items:flex-end; gap:10px; background: #f9f9f9;}
.deco_img__bottom img:first-child { margin-left:100px; }

/* ----------- 반응형 ----------- */
@media (max-width:1200px) {
  .center-story__title { font-size:32px; }
  .center-story__subtitle { font-size:18px; }
  .center-story__list { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:1024px) {
  .center-story__list { grid-template-columns:repeat(2,1fr); }
  .center-story__tabs { width:100%; max-width:400px; }
}

@media (max-width:768px) {
  .center-story { padding:60px 0; }
  .center-story__title { font-size:28px; }
  .center-story__subtitle { font-size:16px; }
  .story-card__title { font-size:20px; }
  .story-card__desc, .story-card__date { font-size:15px; }
  .deco_img__top img:nth-child(2), .deco_img__top img:nth-child(1) { margin:0; }
  .deco_img__middle { width:100%; justify-content:center; gap:10px; }
  .deco_img__bottom { justify-content:center; }
}

@media (max-width:600px) {
  .center-story__list { grid-template-columns:1fr; }
  .center-story__tabs { width:100%; max-width:300px; }
  .center-story__tabs .tab { font-size:14px; padding:8px 0; }
  .btn-view-all { width:200px; font-size:14px; }
}

@media (max-width:400px) {
  .center-story__title { font-size:22px; }
  .center-story__subtitle { font-size:14px; }
  .story-card { padding:16px; min-height:180px; }
  .story-card__title { font-size:18px; }
  .story-card__desc, .story-card__date { font-size:13px; }
  .btn-view-all { width:160px; font-size:13px; padding:10px 0; }
}



/* 센터 갤러리 */
.center-gallery { width:100%; text-align:center; padding: clamp(60px, 10vw, 140px) 0; }
.gallery-inner { max-width:1400px; margin:0 auto; }
.gallery-title h2 { color:#514E4E; font-size:var(--title_pc_size); font-weight:700; }
.gallery-title p { color:#999; font-size:var(--decs_pc_size); font-weight:500; margin-top:10px; }

/* 슬라이드 */
.gallery-slider { margin-top:72px;}
.gallery-track { display:flex; gap:36px; transition:transform 0.4s ease; flex-wrap:nowrap;} /* gap 사용 */
.gallery-card { flex:0 0 calc((100% - 72px) / 3); height:318px; box-sizing:border-box; overflow: hidden;} 
.gallery-card img { width:100%; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.1); object-fit:cover; aspect-ratio: 16/9;}

/* 진행바 + 버튼 */
.gallery-progress { position:relative; margin-top: clamp(20px, 2vw, 36px); display: flex; align-items: center; gap: 36px; }
.gallery-progress-bar { width:100%; height:2px; background:#eee; margin:0 auto; position:relative; }
.gallery-progress-fill { width:0%; height:100%; background:#333; transition:width 0.3s ease; }
.gallery-controls { top:-16px; right:0; display:flex; gap:18px; }
.gallery-btn { width:45px; aspect-ratio: 1/1; border-radius:50%; border:1px solid #ddd; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; }
.gallery-btn:hover { background:#f5f5f5; }
.gallery-add { width:45px; aspect-ratio: 1/1; border-radius:50%; border:none; background:#95D0F6; color:#fff; font-size:14px; cursor:pointer; }
.gallery-add:hover { background:#95D0F6; }

/* ----------- 반응형 ----------- */
@media (max-width:1200px) {
  .gallery-card { flex:0 0 calc((100% - 36px) / 2); height:330px; }
  .gallery-title h2 { font-size:32px; }
  .gallery-title p { font-size:18px; }
}

@media (max-width:1000px) {
  .gallery-card { height:280px; }
}

@media (max-width:768px) {
  .center-gallery { padding:40px 0; }
  .gallery-card { flex:0 0 calc((100% - 36px) / 2); height:210px; }
  .gallery-title h2 { font-size:28px; }
  .gallery-title p { font-size:16px; }
}

@media (max-width:600px) {
  .gallery-card { height:170px; }
}

@media (max-width:480px) {
  .gallery-card { height:130px; }
  .gallery-title h2 { font-size:24px; }
  .gallery-title p { font-size:14px; }
  .gallery-controls { top:-12px; }
}

@media (max-width:344px) {
  .gallery-card { height:180px; }
  .gallery-title h2 { font-size:20px; }
  .gallery-title p { font-size:13px; }
  .gallery-btn, .gallery-add { width:28px; height:28px; font-size:12px; }
}


/* 공통 타이틀 폰트 */

.main_title { text-align:center;}
.main_title h2 { color:#514E4E; font-size:var(--title_pc_size); font-weight:700; }
.main_title p { color:#999; font-size:var(--decs_pc_size); font-weight:500; margin-top:10px; }
/* ----------- 반응형 ----------- */
@media (max-width:1200px) {
  .main_title h2 { font-size:32px; }
  .main_title p { font-size:18px; }
}

@media (max-width:768px) {
  .main_title h2 { font-size:28px; }
  .main_title p { font-size:16px; }
}

@media (max-width:480px) {
  .main_title h2 { font-size:24px; }
  .main_title p { font-size:14px; }
}

@media (max-width:344px) {
  .main_title h2 { font-size:20px; }
  .main_title p { font-size:13px; }
}


/* 20251027 추가 */

.text_over_01 {
  overflow: hidden !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient:
    vertical !important;
  word-break: break-word;
}

.text_over_02 {
  overflow: hidden !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient:
    vertical !important;
  word-break: break-word;
}