/* ===========================
   메인페이지 전용 스타일
   main.css
=========================== */

/* =========================
   메인 비주얼 영역
========================= */
.main-visual {
  position: relative;
  height: 100vh;
  min-height:800px;
  overflow: hidden;
}

.visual-bg {
  position: relative;
  width: 100%;
  height: 100vh;

  background: linear-gradient(135deg, var(--point-color) 0%, var(--point-color2) 100%);
  background: url(https://img.freepik.com/free-photo/globe-digital-grid-gradient-wallpaper_53876-104056.jpg?t=st=1754085551~exp=1754089151~hmac=836596b0e6f4324194004423a42d9826cc6325b27cf294364ebcb5156d8e486e&w=1380) center no-repeat;
  background-size:cover;
  display: flex;
  align-items: center;
}

.visual-bg::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0.5;
  background:linear-gradient(180deg, #061a83 0%, #0c3ba9 100%);
}
.visual-content {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  position: relative;
  z-index: 2;
}

.visual-text {
  margin-top:50px;
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease-out;
}

.visual-title {
  font-size: 3rem;
  font-weight: 800;
  color: white;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-family: 'JalnanGothic';
  font-weight:500;
}

.visual-title span {color:#ffbf04;}
.visual-desc {
  display:none;
  font-size: 1.25rem;
  color: rgb(174 184 199);
  font-weight: 600;
}

/* 비주얼 슬라이더 */
.visual-slider {
  animation: fadeInUp 1s ease-out 0.3s both;
}

.main-swiper {
  padding-bottom: 3rem;
}

.slide-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}



.slide-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-speed);
}


.slide-content {
  padding: 1.5rem;
}

.slide-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.slide-date {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/*==========================
공통 스와이퍼 설정
==========================*/

.swiper {padding:20px 20px 40px 20px; margin:0 -20px; background:transparent !important;}
/* 메인비주얼 제외한 모든 스와이퍼 화살표 스타일 */
.swiper-button-prev,
.swiper-button-next {
  width: 50px !important;
  height: 50px !important;
  background: white !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  border: 1px solid #e0e0e0 !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 18px !important;
  font-weight: normal !important;
  color: #666666 !important;
}

.swiper-button-prev {
  left: -40px !important;
}

.swiper-button-next {
  right: -40px !important;
}

/* 각 섹션별 위치 조정 */
.support-section .swiper-button-prev, .support-section .swiper-button-next {
  top: 68%;
}

.expert-section .swiper-button-prev, .expert-section .swiper-button-next {
  top: 65%;
}

.facility-section .swiper-button-prev, .facility-section .swiper-button-next {
  top: 55%;
}

.news-section .swiper-button-prev, .news-section .swiper-button-next {
  top: 60%;
}

/* 메인비주얼 화살표는 기존 스타일 유지 (제외) */
.gvi-main-slider .swiper-button-prev,
.gvi-main-slider .swiper-button-next {
  width: 44px !important;
  height: 44px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  border: none !important;
}

.gvi-main-slider .swiper-button-prev::after,
.gvi-main-slider .swiper-button-next::after {
  font-size: 16px !important;
  color: #333 !important;
}


@media (max-width:1199px) {
  .swiper-button-prev {left:0px !important; width:40px !important; height:40px !important;}
  .swiper-button-next {right:0px !important; width:40px !important; height:40px !important;}
}

/* =========================
   메인 콘텐츠 영역
========================= */
.main-content {
  position: relative;
  background-color: var(--bg-primary);
  z-index: 3;
}

.content-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, var(--point-color) 0%, var(--point-color2) 100%);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* 섹션 공통 스타일 */
.section-header {
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 1rem;
  /*margin-left:76px;*/
  position:relative;

}
/*
.section-title::before {
  position:absolute;
  top:15px;
  left:-95px;
  width:100px;
  background:url('../../img/logo_mini.png') no-repeat center center;
  background-size:contain;
  content:'';
  margin-right:10px;
  vertical-align:middle;
  height:20px;
}
  */
.section-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
 
  margin-bottom: 1rem;
}

@media (max-width:1199px) {
  .section-title {font-size:1.8rem;}
  .section-desc {font-size:1rem;}
}

/* =========================
   지원사업 안내 섹션
========================= */


.support-section {
  padding: var(--section-padding);
  position:relative;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.support-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 2rem;
  transition: all 0.2s !important;
  box-shadow:0px 6px 16px 0px rgba(22, 54, 73, 0.07);
}

.support-card:hover {
  transform: translateY(-10px) !important;
  box-shadow:  0px 6px 12px 4px rgba(34, 81, 108, 0.15);
  border-color: var(--point-color);
}

.card-category {
  display: inline-block;
  background-color: #fff;
  color: #0f5fc9;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.card-desc {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  font-size:1rem;
  color:#6b7b87;
}

.card-info {
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.card-info-box {
  display: block;
  margin-bottom:0.15rem;
}

.card-info-title {
  border-radius: 2px;
  background: #153548;
  color: #fff;
  font-weight: 500;
  text-align: center;
  font-size:0.8rem;
  padding:0.1rem 0.6rem;
  display:inline-block;
  margin-right:10px;
}

.card-info-detail {
  font-size: 0.9rem;
  color: #153548;
}

.card-host {
  font-weight: 600;
  color: var(--point-color);
}

.card-period {
  font-size: 0.9rem;
  color: var(--text-light);
}


@media (max-width:1199px) {
  .support-section {padding:var(--section-padding-mobile);}
  .support-section::before {width:27%;}
}


/* =========================
   새소식 섹션
========================= */
.news-section {
  padding: 6rem 0 10rem 0;
  position:relative;
}

.news-section .bg-back {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:25%;
  height:100%;
  border-radius: 5rem 0 0 0;
  background-color: #f4faff;
  overflow:hidden;
}

.news-section .bg-back::before {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  opacity:0.1;
  background:url('../../img/sec_news_bg.jpg') no-repeat center center;
}

.news-card {
  background-color: var(--bg-primary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.news-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-speed);
}

.news-card:hover .news-image img {
  transform: scale(1.05);
}

.news-content {
  padding: 1.5rem;
}

.news-category {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: var(--point-color);
  color: white;
  border-radius: 12px;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.news-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.news-date {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

@media (max-width:1199px) {
  .news-section {padding:0 0 7rem 0;}
}

/* =========================
   전문위원·협약기관 소개 섹션
========================= */
.expert-section {
  padding: var(--section-padding);
  background-color: var(--bg-primary);
  position:relative;
}


.ribbon-symbol-72 {
  position: absolute;
  right:0%;
  top:0%;
  width: 360px;
  height: 320px;
  overflow: hidden;
}

/* 두 띠에 공통으로 적용되는 스타일 */
.ribbon-symbol-72 .ribbon-top-72,
.ribbon-symbol-72 .ribbon-bottom-72 {
  position: absolute;
  width: 150px;    /* 띠의 가로 길이 */
  height: 180px;   /* 띠의 세로 길이 (굵기) */
  transform-origin: top right;
}

/* 위쪽(짙은 색) 띠 */
.ribbon-symbol-72 .ribbon-top-72 {
  background: #c4d0d9;
  transform: skewX(-40deg);
  top: 50px;
  right: -120px;
  z-index: 1;
}

/* 아래쪽(밝은 색) 띠 */
.ribbon-symbol-72 .ribbon-bottom-72 {
  background: linear-gradient(217deg, #023775, #023775, #0a65a9);
  transform: skewX(-40deg);
  top: 0px;
  right: -110px;
  z-index: 2;
}

.expert-section::before {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:20%;
  height:100%;
  border-radius: 0 0 0 5rem;
  background-color: #f4faff;
}

.expert-content {
  margin-top: 2rem;
}

.expert-card {
  background-color: var(--bg-primary);
  overflow: hidden;
  box-shadow: 0px 6px 16px 0px rgba(22, 54, 73, 0.07);
  transition: all 0.3s;
  border: 1px solid var(--border-color);
  height: 100%;
}

.expert-card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 4px 20px 0px rgba(34, 81, 108, 0.15);
  border-color: var(--point-color);
}

.expert-image {
  width: 100%;
  height: 300px;
  position:relative;
  overflow: hidden;
  background-color: var(--bg-secondary);
}

.expert-image img {
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%, 0);
	min-width:100%;
	width:auto;
	height: 100%;
	min-height:100%;
	object-fit: cover;
  top:-3.5%;
  transition: transform var(--transition-speed);
}

.org-content .expert-image, .expert-content[data-content="partner"] .expert-image  {height:200px; background:#fff; border-bottom:1px solid var(--border-color);}
.org-content .expert-image img, .expert-content[data-content="partner"] .expert-image img {top:50%; transform:translate(-50%,-50%); max-width:60%; max-height:60%; min-height:initial; min-width:70%; height:auto; object-fit:contain;}
#orgModal .modal-image img {padding:3rem 1rem;}

.expert-info {
  padding: 1rem 1.5rem;
}

.expert-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.expert-position {
  font-size:1rem;
  color: #8d8d8d;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

.expert-specialty, .expert-available {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.expert-specialty .label, .expert-available .label {
  font-weight: 600;
  color: var(--text-primary);
  display: inline-block;
  margin-right: 0.5rem;
  background-color: rgba(0, 102, 204, 0.1);
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.85rem;
}

.expert-specialty .value, .expert-available .value, .expert-specialty .value2, .expert-available .value2 {
  color: #656b72;
  font-weight: 600;
  font-size: 0.9rem;
}

.expert-specialty .value2, .expert-available .value2 {color:#a1a1a1; padding:0 0 0 20px; line-height:1.3; font-weight:500;}

/* 한 줄로 표시 */
.expert-specialty, .expert-available {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}

.expert-desc {
  display: none; /* 소개내용 숨김 */
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

/* 전문위원 카드 클릭 효과 */
.expert-card {
  cursor: pointer;
}

@media (max-width:1199px) {
  .ribbon-symbol-72 {width:50vw; height:50vw; top:-12%;}
  .ribbon-symbol-72 .ribbon-top-72, .ribbon-symbol-72 .ribbon-bottom-72 {width:65px; height:140px;}
  .ribbon-symbol-72 .ribbon-top-72 {top:25px;}
  .expert-section {padding:var(--section-padding-mobile);}
}

/* =========================
   전문위원 상세보기 모달
========================= */
.expert-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal);
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--bg-primary);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-speed);
  z-index: 1;
}

.modal-close:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--text-primary);
}

.modal-body {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
  padding: 2rem;
}

.modal-image {
  text-align: center;
}

.modal-image img {
  width: 100%;
  object-fit: cover;
border: 1px solid #ebebeb;

}

.modal-info {
  padding-left: 1rem;
}

.modal-name {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.modal-position {
  font-size: 1.1rem;
  color: #8d8d8d;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-color);
}

.modal-fields {
  margin-bottom: 2rem;
}

.modal-specialty, .modal-available {
  margin-bottom: 1.5rem;
}

.modal-fields .label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.85rem;
}

.modal-fields .values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.modal-fields .values .value {
  display: inline-block;
  background: linear-gradient(135deg, var(--point-color) 0%, var(--point-color2) 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.modal-description, .modal-contact {
  margin-bottom: 1.5rem;
}

.modal-description h4, .modal-contact h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.modal-description p, .modal-contact p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.modal-contact span {
  color: var(--point-color);
  font-weight: 500;
}

/* 모바일 모달 */
@media (max-width: 1199px) {
  .modal-content {
    width: 95%;
    max-height: 95vh;
  }
  
  .modal-body {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .modal-image img {
    width: 150px;
    height: initial;
	max-height:400px;
  }
  
  .modal-info {
    padding-left: 0;
  }
  
  .modal-name {
    font-size: 1.5rem;
  }
}

/* =========================
   시설대관 서비스
========================= */
.facility-section {
  padding: 2rem 0 4rem 0;
}

.facility-swiper {
  margin-top: 3rem;
  padding-bottom: 4rem;
}

.facility-card {
  background-color: var(--bg-primary);
  overflow: hidden;
  box-shadow: 0px 6px 16px 0px rgba(22, 54, 73, 0.07);
  transition: all var(--transition-speed);
  border: 1px solid var(--border-color);
}

.facility-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  border-color: var(--point-color);
}

.facility-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.facility-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-speed);
}

.facility-card:hover .facility-image img {
  transform: scale(1.15);
}

.facility-status {
  display:none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  z-index: 1;
}

.facility-status.available {
  background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.facility-status.unavailable {
  background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.facility-info {
  padding: 2rem;
}

.facility-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.facility-desc {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  height:50px;
  overflow:hidden;
   display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.facility-details {
  margin-bottom: 0rem;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 0px solid var(--border-color);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item .label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.detail-item .value {
  color: var(--point-color);
  font-weight: 500;
  font-size: 0.9rem;
}

.facility-btn {
  display:none;
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--point-color) 0%, var(--point-color2) 100%);
  color: white;
  border: none;
  border-radius: 0px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-speed);
  position: relative;
  overflow: hidden;
}

.facility-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.facility-btn:hover::before {
  left: 100%;
}

.facility-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
}

.facility-btn.disabled {
  background: linear-gradient(135deg, #9e9e9e 0%, #bdbdbd 100%);
  cursor: not-allowed;
  opacity: 0.7;
}

.facility-btn.disabled:hover {
  transform: none;
  box-shadow: none;
}

.facility-btn.disabled::before {
  display: none;
}

/* 모바일 시설대관 */
@media (max-width: 768px) {
  .facility-section .swiper-button-prev, .facility-section .swiper-button-next {top:52%;}

  .facility-info {
    padding: 1.5rem;
  }
  
  .facility-title {
    font-size: 1.3rem;
  }
}

/* =========================
   사업소개 섹션
========================= */
.business-section {
  padding: 2rem 0 6rem 0;
  position:relative;
  background:transparent;
}

.business-section .bg-back {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:40%;
  height:100%;
  background: linear-gradient(180deg, #fff 50%, #f3f3f3 100%);
  border-radius: 0 5rem 5rem 0;
  z-index: -1;
  overflow:hidden;
}

.business-section .bg-back::before {
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  width:100%;
  height:60%;
  opacity:0.05;
  background:url('../../img/sec_business_bg.jpg') no-repeat center center;
}

/* 기존 사업소개 (이제 없음) */
.business-container {
  margin-top: 2rem;
}

/* 새로운 지원서비스 안내 레이아웃 */
.business-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 3rem;
  margin-top: 3rem;
}

.business-tabs-vertical {
  position: sticky;
  top: 100px;
}

.vertical-tab-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

/* 움직이는 동그라미를 위한 컨테이너 */
.vertical-tab-list::before {
  content: '●';
  position: absolute;
  top: var(--circle-top, 50%);
  right: 1rem;
  transform: translateY(-50%) scale(1);
  color: var(--orange-color);
  font-size: 0.94rem;
  z-index: 2;
  transition: 
    top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.2s ease-out;
  pointer-events: none;
  will-change: top, transform;
  line-height: 1;
}

/* 탭 전환 시 동그라미 스케일 효과 */
.vertical-tab-list.animating::before {
  transform: translateY(-50%) scale(1.2);
}

.vertical-tab-item {
  position: relative;
  margin-bottom: 0.5rem;
}

.vertical-tab-item:after {
    content:'';
    position:absolute;
    right: 22px;
    top:10px;
    width:1px;
    height:150%;
    z-index:-1;
    background-color: #c7d9eb;
}

.vertical-tab-item button {
  width: 100%;
  padding:0;
  margin-bottom:0.5rem;
  text-align: left;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ccc;
  background-color: transparent;
  border: none;
  border-radius: 0;
  transition: all var(--transition-speed);
  position: relative;
}

.vertical-tab-item.active button {
  color: #111;
  border-left-color: var(--point-color);
}

/* 개별 탭의 동그라미는 숨김 */
.vertical-tab-item.active button::before {
  display: none;
}

.vertical-tab-item button:hover:not(.active) {
  border-left-color: #ccc;
}

.business-content-vertical {
  min-height: 500px;
}

/* 서비스 카드 그리드 */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.service-card {
  background-image: url('https://via.placeholder.com/400x300/667eea/ffffff?text=배경이미지');
  background-size: 205%;
  background-position: center;
  padding: 0;
  text-align: left;
  border: none;
  transition: all var(--transition-speed);
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  transition: background-size 0.5s ease-in-out; 
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:linear-gradient(45deg, rgb(26 27 62 / 60%), rgba(0, 0, 0, 0.2));
  opacity: 0.59;
  z-index: 1;
  transition: opacity 1s;
}

.service-card:hover {
  background-size: 225%;
}

.service-card:hover::before {
  opacity: 0.8;
  background: linear-gradient(45deg, rgb(26 27 62 / 40%), rgba(0, 0, 0, 0));
}

.service-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.service-icon {
  display: none; /* 아이콘 숨김 */
}

.service-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1.3;
}

.service-desc {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
  margin: 0;
  font-size: 1.1rem;
  font-weight:600;
  flex-grow: 1;
}

.service-link {
  display: inline-block;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 0.5rem 1.5rem;
  font-size:0.95rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: all var(--transition-speed);
  backdrop-filter: blur(10px);
  border: 0px solid rgba(255, 255, 255, 0.3);
  align-self: flex-start;
  margin-top:10px;
}

.service-link:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  color: white;
}

/* 기존 가로 탭 스타일 (사용 안함) */
.business-tabs {
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 3rem;
  padding-bottom: 1rem;
}

.business-tabs .tab-item button {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.business-tabs .tab-item.active button {
  background: linear-gradient(135deg, var(--point-color) 0%, var(--point-color2) 100%);
  border-color: var(--point-color);
  /*box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);*/
}

.business-tabs .tab-item button:hover {
  background: linear-gradient(135deg, var(--point-color) 0%, var(--point-color2) 100%);
  border-color: var(--point-color);
  /*box-shadow: 0 4px 15px rgba(0, 102, 204, 0.2);*/
}

.business-content {
  position: relative;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

@media (max-width:1199px) {
  .business-layout {
    grid-template-columns: 1fr;
    gap:1rem;
  }

  .business-tabs-vertical {
    top: var(--menu-height-mobile);
    background: #fff;
    z-index: 90;
    margin:0 -20px;
    padding: 10px 20px 0 20px;
  }

  .vertical-tab-list {display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:1rem;}
  .vertical-tab-list::before {display:none;}
  .vertical-tab-item::after {
   display:none;
  }
  .vertical-tab-item.active::after {color:var(--orange-color);}
  .vertical-tab-item button {font-size:1rem;}
  .vertical-tab-item.active button {color:var(--orange-color);}

  .service-card {min-height:280px;}
}
/* 지원사업 탭 콘텐츠 */
.support-tab-content {
  display: none;
  margin-top: 2rem;
}

.support-tab-content.active {
  display: block;
}

/* 센터소식 탭 콘텐츠 */
.news-tab-content {
  display: none;
  margin-top: 2rem;
}

.news-tab-content.active {
  display: block;
  animation: fadeIn 0.5s ease-out;
}

.content-header {
  margin-bottom: 2rem;
  margin-top:-0.35rem;
}

.content-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.content-copy {
  font-size: 1.1rem;
  color: #999;
  font-weight:600;
}

.business-swiper {
  padding: 1rem 0 3rem;
}

.business-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 300px;
  cursor: pointer;
}

.card-image {
  width: 100%;
  height: 100%;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-speed);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
  color: white;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background var(--transition-speed);
}

.business-card:hover .card-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.3) 100%);
}

.business-card:hover .card-image img {
  transform: scale(1.1);
}

.card-overlay h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.card-overlay p {
  margin-bottom: 1rem;
  opacity: 0.9;
}

.card-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--point-color);
  color: white;
  border-radius: 25px;
  font-weight: 500;
  transition: background-color var(--transition-speed);
  align-self: flex-start;
}

.card-link:hover {
  background-color: var(--point-color3);
}

/* =========================
   애니메이션
========================= */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   고객지원 레이아웃
========================= */
.support-layout {
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: 3rem;
}

/* 왼쪽: 최근게시물 리스트 */
.recent-posts {
  flex: 1;
  background: white;
  border-radius: 0;
  padding: 2rem;
  /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);*/
  border:1px solid #e3e3e3;
}

.posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.post-item:last-child {
  border-bottom: none;
}

.post-title {
  margin: 0;
  flex: 1;
}

.post-title a {
  color: #111;
  font-weight: 700;
  line-height: 1.5;
  transition: color var(--transition-speed);
  font-size: 1.14rem;
}

.post-title a:hover {
  color: var(--point-color);
}

.post-date {
  font-size: 0.85rem;
  color: #999;
  margin-left: 1rem;
  flex-shrink: 0;
}

.more-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: #f8f9fa;
  color: var(--text-color);
  border-radius: 25px;
  font-weight: 500;
  transition: all var(--transition-speed);
  border: 1px solid #e9ecef;
}

.more-btn:hover {
  background-color: var(--point-color);
  color: white;
  border-color: var(--point-color);
}

/* 오른쪽: 삼단 배너 */
.service-banners {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top:-84px;
}

.banner-item {
  display: flex;
  align-items: center;
  padding: 2rem;
  background: white;
  border-radius: 0;
  border: 1px solid #fff;
  color: var(--text-color);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  position: relative;
  overflow: hidden;
  box-shadow: 4px 15px 30px rgba(6,6,125,0.11);
}

.banner-item:hover {
  box-shadow: 4px 20px 40px rgba(6,6,125,0.2);
}

.banner-icon {
  flex: 0 0 auto;
  margin-right: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(45deg, var(--point-color) 0%, var(--point-color2) 100%);
  border-radius: 50%;
  box-shadow:4px 4px 10px rgba(21,79,189,0.25);
}

.banner-icon i {
  font-size: 24px;
  color: white;
}

.banner-content {
  flex: 1;
}

.banner-content h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.2rem 0;
  color: var(--text-color);
}

.banner-content p {
  font-size: 1rem;
  margin: 0;
  color: #a7adb3;
  line-height: 1.4;
}

@media (max-width:1199px) {
  .support-layout {
    grid-template-columns:1fr;
    gap: 2rem;
  }
  
  .service-banners {
    flex: none;
    width: 100%;
    margin-top:0px;
  }
  
  .recent-posts {
    padding: 1.5rem;
  }
  
  .banner-item {
    padding: 1.25rem;
  }
  .banner-content h4 {font-size:1.25rem;}
  .banner-content p {font-size:0.9rem;}
}