@media (min-width: 640px) {
	.container {
		max-width: var(--container-sm);
  }
}

@media (min-width: 768px) {
	.container {
		max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
	.container {
		max-width: var(--container-lg);
  }
}

@media (min-width: 1280px) {
	.container {
		max-width: var(--container-xl);
  }
}

/* 모바일 반응형 개선: max-width 768px */
@media (max-width: 768px) {
	.hero-stats { 
		grid-template-columns: 1fr; 
		gap: var(--space-16); 
	}

	/* 1. 3열 배열 강제 규칙 (충돌 방지) */
	.services-grid,
	.about-grid,
	.staff-grid,
	.staff-gallery,
	.partnership-list { 
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important; /* ⭐️ 가로 3열 강제 적용 ⭐️ */
		gap: var(--space-4) !important; 
		/* 모바일에서 과도하게 옆으로 스크롤되는 것을 방지하기 위해 padding: 0 !important; 를 추가할 수 있습니다. */
		padding: 0 10px !important;
	}

	/* 2. 임직원 카드 스타일 (작은 사진 포함 레이아웃) */
	.staff-card {
		margin: 0 !important;
		padding: 10px 5px !important; /* 패딩 조정 */
		box-shadow: 0 4px 8px rgba(0,0,0,0.05) !important; 
		border: 1px solid var(--color-border) !important; 
		border-radius: 8px !important;
		text-align: center;
		min-height: auto !important; /* 높이를 내용에 맞게 조정 */
	}

	/* 3. 사진 요소 스타일 (작은 크기, 원형) */
	.staff-card .staff-photo {
		display: flex !important; /* 사진을 다시 보이게 함 */
		width: 60px !important;
		height: 60px !important;
		margin: 0 auto 5px auto !important; 
		border-radius: 50% !important; 
		overflow: hidden !important;
		background: #f8f9fa !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* 4. 이름과 직책 정보 컨테이너 스타일 */
	.staff-card .staff-info {
		padding: 5px 0 !important; 
		text-align: center;
		min-height: 40px; /* 이름/직책 공간 확보 */
		display: flex;
		flex-direction: column;
		justify-content: center; 
		align-items: center;    
	}

	/* 5. 이름 스타일 (글꼴 크기 줄임) */
	.staff-card .staff-name {
		font-size: 0.9rem !important; 
		font-weight: 700 !important;
		margin-bottom: 0px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	/* 6. 직책 스타일 (글꼴 크기 줄임) */
	.staff-card .staff-position {
		font-size: 0.75rem !important; 
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		color: var(--color-primary) !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	/* 7. 상세 내용은 숨김 */
	.staff-card .staff-greeting,
	.staff-card .staff-career {
		display: none !important;
	}

	/* 8. 임직원 갤러리 자체의 레이아웃 조정 (필요 시) */
	.staff-gallery {
		gap: var(--space-8) !important; /* 갤러리 그리드 간격도 줄여 3열 공간 확보 */
	}

	.hidden-desktop {
		display: block;
    }
	/* 모바일에서 더보기 버튼 숨기기 */
    .hidden-mobile {
        display: none !important;
    }
    







    /* 1. 컨테이너 패딩 조정 */
	.testimonials-section .container {
        /* 1. 콘텐츠의 최대 너비를 지정합니다. (데스크톱/태블릿 등 넓은 화면 대비) */
		max-width: 1200px; 
		
		/* 2. 블록 요소를 화면 중앙으로 정렬합니다. */
		margin-left: auto;
		margin-right: auto;
		
		/* 3. 모바일/작은 화면에서 화면 가장자리에 붙지 않도록 좌우 패딩을 줍니다. */
		/* 1rem은 16px 정도의 여백입니다. */
		padding-left: 1rem;
		padding-right: 1rem;
		
		/* 너비가 항상 100%를 사용하되, max-width를 넘지 않도록 설정 */
		width: 100%;
		box-sizing: border-box; /* 패딩이 너비에 포함되도록 설정 (권장) */
	}


	.modal-image-container img {
		max-width: 100% !important;
		max-height: 100% !important;
		width: auto !important;
		height: auto !important;
		
		/* ⭐️ 이 부분이 이미지 잘림을 방지합니다. */
		object-fit: contain !important; /* 이미지가 비율을 유지하며 컨테이너에 맞게 축소 */
		
		object-position: center;
		display: block;
	}

	.testimonial-list {
        grid-template-columns: repeat(1, 1fr) !important;
        display: grid !important;
    }

	.testimonial-list > .testimonial-item {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* 성혼후기 섹션 */
    .testimonials-section {
        padding: 40px 0;
    }

    /* ➡️ 슬라이더 화살표: 모바일에서 강제로 보이도록 설정 */
    .slider-wrapper .nav-arrow {
        display: block !important;
    }
    .testimonials-grid-wrapper {
        position: relative !important; /* 화살표 위치의 기준점 */
        overflow: hidden !important; /* 슬라이더 영역 밖으로 나가는 아이템 숨기기 */
        /* 화살표가 갤러리를 가리지 않도록 좌우 여백 확보 */
        padding: 0 !important; 
    }

	    /* 성혼 후기 슬라이더 설정 */
    .testimonials-slider {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 0 20px;
    }

    .testimonials-slider::-webkit-scrollbar {
        display: none;
    }


    /* ➡️ 성혼후기 그리드를 가로 스크롤 가능한 1열 슬라이더로 만듭니다. */
    .testimonials-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory !important;
        padding: 0 0 !important; /* 화살표 공간 확보 */
		-webkit-overflow-scrolling: touch;
		
		/* ⭐️ 갤러리와 동일하게, 화살표 공간을 위해 좌우 패딩을 50px로 설정 ⭐️ */
		padding: 0 0 !important; /* 좌우 패딩 제거 */
        gap: 15px;

		-ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    /* 스크롤바 숨김 (선택 사항) */
    .testimonials-grid::-webkit-scrollbar {
        display: none; 
    }


    /* ➡️ 각 성혼후기 카드를 100% 너비로 설정하여 1개씩 보이게 합니다. */
	 .testimonial-card {
		/* ⭐️ 이 부분이 핵심입니다. 100% 너비로 고정 */
		flex: 0 0 100% !important; 
		width: 100% !important;
		
		/* 아이템 간 간격 처리 (gap: 15px이 제대로 작동하지 않을 경우) */
		margin-right: 15px !important; 
		
		scroll-snap-align: start !important; 
		max-width: none !important;
		box-sizing: border-box !important;
	}

	.testimonial-content {
		/* 텍스트 줄 수 제한 (6줄) */
		display: -webkit-box;
		-webkit-line-clamp: 6;      /* 6줄로 제한 */
		-webkit-box-orient: vertical;
		overflow: hidden;           /* 넘치는 텍스트 숨김 */
		text-overflow: ellipsis;    /* 말줄임표(...) 표시 */
		
		/* 필요 시 내용 컨테이너의 최대 높이를 고정할 수 있습니다. */
		/* max-height: 8em; (예시: 1.3em * 6줄 = 7.8em) */
	}



    /* 6. 화살표 위치 */
    .testimonials-grid-wrapper .nav-arrow.left-arrow {
        left: 5px; 
    }

    .testimonials-grid-wrapper .nav-arrow.right-arrow {
        right: 5px; 
    }


    /* 갤러리 슬라이더 설정 */
	.gallery-grid::-webkit-scrollbar {
        display: none;
    }

    .gallery-more-btn-container {
        display: none;
    }

	.gallery-info {
		padding: 12px 14px;            /* 흰색 영역 패딩 */
		border-top: 1px solid rgba(0,0,0,0.06);
	 }

	.gallery-title { 
		font-size: 15px; 
		line-height: 1.4; 
	}

	.gallery-date { 
	  margin-top: 4px; 
	  font-size: 12px; 
	  color: var(--color-text-secondary); 
	}

	.gallery-modal-content {
        /* 모달 높이에 맞춰 콘텐츠의 최대 높이를 계산 (예: 90vh - 상단 여백, 제목 등) */
        max-height: 80vh; 
        overflow-y: auto; /* 내용이 넘칠 경우 스크롤 허용 */
        
        /* 패딩을 추가하여 내용이 가장자리에 붙지 않도록 합니다. */
        padding: 15px;
    }

    /* B. 갤러리/모달 본문 레이아웃 수정 (문의하신 내용 반영) */
    .gallery-modal-body {
        /* 좌우 분할(flex-direction: row) 대신 상하 분할로 변경 */
        flex-direction: column !important; 
        height: auto;
        /* 넘치는 내용이 있다면 스크롤되도록 auto로 변경을 권장합니다. */
        overflow-y: auto; 
    }

  /* 다른 규칙을 모두 이겨야 하므로 범위+!important */
	.gallery-slider-wrapper {
        position: relative !important; /* 화살표 위치의 기준점 */
        overflow: hidden !important; /* 슬라이더 영역 밖으로 나가는 아이템 숨기기 */
        /* 화살표가 갤러리를 가리지 않도록 좌우 여백 확보 */
        padding: 0 !important;
    }

	.gallery-grid {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow: auto !important;
		scroll-snap-type: x mandatory;
		gap: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		transform: none !important;

        /* 스크롤바 숨기기 (선택 사항) */
        -ms-overflow-style: none;
        scrollbar-width: none; 
    }

    /* 3. 각 갤러리 아이템이 화면 너비에 딱 맞도록 설정 */
    .gallery-grid > .gallery-item {
		/* box-sizing을 border-box로 설정하여 padding이나 border가 width 100%를 넘지 않도록 보장 */
        box-sizing: border-box !important; 
        /* 아이템이 늘어나거나 줄어들지 않고, 너비를 100%로 고정 */
        flex: 0 0 100% !important; 
        width: 100% !important; 
        scroll-snap-align: start; 
        margin: 0 !important; /* 마진 제거 강제 */
        padding: 0 !important; /* 혹시 모를 아이템 자체의 패딩 제거 */
    }

	.gallery-item .gallery-image {
		flex: 0 0 100% !important;
		width: 100% !important;
		margin: 0 auto !important;
		padding: 0 !important;
		scroll-snap-align: start !important;
	  }

	/* 갤러리 이미지 자체의 너비도 강제 설정 */
    .gallery-item .gallery-image img {
        flex: 0 0 calc(100% - 100px); /* 뷰포트 너비 - 좌우 패딩 */
        scroll-snap-align: start;
        max-width: none;
        box-sizing: border-box;
    }

	.gallery-slider-wrapper .nav-arrow {
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        display: flex !important;
        justify-content: center;
        align-items: center;

        /* 화살표 기본 스타일 */
        background: rgba(0, 0, 0, 0.6); 
        color: white; 
        border: none;
        padding: 10px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: opacity 0.3s;
    }

    .gallery-slider-wrapper .left-arrow {
        left: 0; /* 왼쪽 끝에 배치 */
    }

    .gallery-slider-wrapper .right-arrow {
        right: 0; /* 오른쪽 끝에 배치 */
    }


    .modal-image-container {
		height: 60vh;          /* 필요 시 50~60vh로 조절 */
		min-height: 320px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

    .modal-nav-btn {
        font-size: 1.2rem;
        padding: 5px 8px;
    }

    .modal-info {
		max-height: 22vh !important; /* 글 약간 더 보이게 */
		padding: 12px 16px;
    }

    .modal-info h3 {
        font-size: 1.3rem;
    }

    .modal-info p {
        font-size: 0.85rem;
    }

    .modal-slider {
        /* 모바일에서는 높이를 제한하여 스크롤이 되도록 함 */
        height: 50vh; 
        max-height: 50vh;
        overflow-y: auto; /* 이미지가 너무 길면 스크롤되도록 */
    }


		/* 2. 슬라이더 래퍼: 화살표를 위한 공간 확보는 그리드가 담당합니다. */
	.nav-arrow{
		display: flex !important;
		overflow-x: auto !important;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 0 50px; /* 화살표 공간 */
		gap: 20px;
	}

    /* 5. 화살표 스타일링 및 표시 */
    .nav-arrow.hidden-desktop {
        display: flex !important; 
        position: absolute; !important;
        top: 50%;
        transform: translateY(-50%);
        
        /* ➡️ 이 값을 높여 화살표가 모든 콘텐츠 위로 나오도록 합니다. */
        z-index: 100; !important; 
        
        /* 스타일링 */
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        border-radius: 50%;
        font-size: 1.5rem;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
    }


    
    /* 갤러리 섹션 */

	#staffDetailModal,
    #gallery-modal-overlay { 
        /* 화면 너비의 90%만 사용 (좌우 여백 확보) */
        width: 90%; 
        /* 화면 높이의 80%만 사용 (상하 여백 확보) */
        max-height: 80vh; 
        
        /* 모달을 화면 정중앙에 위치 고정 */
        position: fixed; 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* 테두리 둥글게 처리 (선택 사항) */
        border-radius: 12px;
    }

    /* ⭐️ 모달 내부 콘텐츠 스크롤 활성화 */
    /* 모달 내용(이미지, 텍스트)이 넘칠 경우 스크롤되도록 설정 */
    #staffDetailModal .modal-body-content,
    #gallery-modal-overlay .modal-body-content {
        /* 모달 자체의 높이보다 약간 작게 설정 */
        max-height: calc(90vh - 80px); /* 90vh에서 제목, 버튼 등 여백 제외 */
        overflow-y: auto; 
        /* 스크롤 가능한 콘텐츠를 위해 flex 컨테이너에서 높이 제약 해제 */
        flex: 1 1 auto; 
    }



    /* 2-1. 햄버거 메뉴 버튼 스타일 (모바일에서만 표시) */
    .nav-toggle {
        display: flex;
		position: absolute; /* 메뉴 컨테이너(#nav-menu) 기준 위치 지정 */
        top: 15px;      /* 상단에서 띄우는 간격 */
        right: 20px;    /* 오른쪽에서 띄우는 간격 */
        z-index: 1001;  /* 메뉴 내용보다 위에 위치 */
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .nav-toggle .bar {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--color-text); /* 텍스트 색상 변수 사용 */
        border-radius: 1px;
        transition: all var(--duration-fast) linear; /* 애니메이션 변수 사용 */
    }


	/* 네비게이션 바 고정 (로고와 버튼 고정) */
    .navbar {
        position: fixed; /* 화면에 고정 */
        top: 0; 
        right: 0; 
        width: 100%;
        z-index: 1002;
    }


    /* 2-2. 모바일 메뉴 컨테이너 (#nav-menu) 스타일 */
    .nav-menu {
        /* 오른쪽에서 왼쪽으로 슬라이드 인을 위한 설정 */
        position: fixed;
        top: 0;
        right: 0; /* 오른쪽 끝에 고정 */
		left: auto; 
        width: 75%; /* 메뉴 폭 설정 */
        max-width: 300px;
        height: 100vh;
        background-color: var(--color-surface); /* 배경색 변수 사용 */
        padding: 20px 20px 20px;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        overflow-y: auto; /* 내용이 길면 스크롤 가능하도록 */
        
        /* 메뉴 숨김: X축으로 100% 이동 (화면 밖 오른쪽) */
        transform: translateX(100%); 
        /* 부드러운 애니메이션 적용 */
        transition: transform 0.3s ease;
        
        /* 모바일 메뉴 레이아웃 */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* 2-3. 메뉴 활성화 시 (.active 클래스 적용) */
    .nav-menu.active {
        right: 0; /* 제자리로 이동 (슬라이드 인) */
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
    }

    /* 2-4. 오버레이 스타일 */
    .nav-overlay {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        /* 기본적으로 숨겨야 하지만, active 상태를 위해 display: none 대신 opacity를 사용하고 JS에서 display를 제어합니다. */
        display: none; 
        transition: opacity 0.3s ease;
    }

    .nav-overlay.active {
        display: block; /* 활성화 시 표시 */
        opacity: 1;
    }

	.nav-item {
		padding: var(--space-16);
		border-bottom: 1px solid var(--color-border);
		text-align: center;
		border-radius: 0;
		width: 100%;
	}

	/* 모바일 메뉴 오버레이 */
	.mobile-menu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(var(--color-slate-900-rgb), 0.5);
		z-index: 999;
		display: none;
	}

	.mobile-menu-overlay.active {
		display: block;
	}

	.hero-stats {
		flex-direction: column;
		gap: var(--space-16);
	}

	.services-grid {
		grid-template-columns: 1fr;
	}

	.admin-layout {
		flex-direction: column;
	}

	.admin-sidebar {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--color-border);
	}

	.sidebar-nav {
		flex-direction: row;
		overflow-x: auto;
		padding-bottom: var(--space-8);
	}

	.sidebar-item {
		white-space: nowrap;
		min-width: 120px;
	}

	.modal-content {
		width: 95%;
		margin: var(--space-16);
	}

	.staff-detail {
		flex-direction: column;
	}

	.membership-info {
		grid-template-columns: 1fr;
	}

}

/* 데스크탑 기본(모바일 이외의 구간) */
@media (min-width: 769px) {
	  .navbar .container {
		display: flex;
		align-items: center;
	  }
	  /* 브랜드는 왼쪽, 메뉴는 오른쪽 끝으로 */
	  .nav-brand {
		margin-right: auto;
	  }
	  .nav-menu {
		margin-left: auto;          /* 핵심: 메뉴를 오른쪽 끝으로 밀기 */
		position: static;  /* 모바일 고정 포지션 무력화 */
		transform: none;
		box-shadow: none;
		padding: 0;
		height: auto;
	  }
	  .nav-menu ul {
		display: flex;
		gap: var(--space-16);
		align-items: center;
		justify-content: flex-end;  /* 오른쪽 정렬 보강 */
	  }
	  /* 데스크탑에서는 햄버거 숨김 */
	  .nav-toggle,
	  .nav-overlay {
		display: none !important;
	  }
}

/* style.css 파일의 미디어 쿼리 섹션 (@media (max-width: 768px)) */

@media (max-width: 768px) {
    
    /* 1. 모달 오버레이 자체에 상단 패딩 부여 */
    .gallery-modal-overlay.active {
        /* 수직 정렬을 다시 flex-start로 변경 */
        align-items: flex-start;
        /* ⭐️ 모달 콘텐츠를 화면 상단에서 크게 내리도록 패딩 증가 ⭐️ */
        padding-top: 50px; 
        padding-bottom: 20px; 
    }
    
    /* 2. 모달 콘텐츠 너비 조정 */
    #cert-modal-overlay .gallery-modal-content,
    #gallery-modal-overlay .gallery-modal-content {
        max-width: 95vw; /* 모바일에서 너비 최대로 사용 */
        max-height: 95vh;
        
        /* ⭐️ 상하좌우 마진을 추가하여 화면 테두리에서 띄움 ⭐️ */
        margin: 0 10px; 
        
        /* content에 padding-top을 추가하지 않고, overlay에 padding-top을 사용합니다. */
        padding: 15px; 
    }
}

/* 인증서 그리드 모바일 스타일 수정 */
@media (max-width: 768px) {
    /* 인증서 슬라이더 래퍼 */
    #certifications-wrapper {
        position: relative !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    
    /* 인증서 그리드 - 갤러리와 동일한 스타일 */
    .certifications-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding: 0 50px !important;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
        grid-template-columns: none !important;
        transform: none !important;
    }
    
    /* 스크롤바 숨기기 */
    .certifications-grid::-webkit-scrollbar {
        display: none;
    }
    
    /* 인증서 아이템 스타일 */
    .certification-item {
        flex: 0 0 80vw !important;
        width: 80vw !important;
        min-width: 280px !important;
        max-width: none !important;
        margin: 0 !important;
        scroll-snap-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* 인증서 화살표 버튼 */
    .cert-slider-arrow {
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        display: flex !important;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        border: none;
        padding: 10px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        font-size: 1.2rem;
    }
    
    .cert-slider-arrow.left { left: 10px; }
    .cert-slider-arrow.right { right: 10px; }
}

/* 인증서 그리드 모바일 스타일 수정 */
@media (max-width: 768px) {
	/* ====================================
	   파트너사 목록 스타일 (모바일)
	   ==================================== */
/* 임직원 카드와 유사한 기본 스타일 */
.partnership-card {
    background-color: #ffffff !important; 
    border: 1px solid #e0e0e0 !important; 
    border-radius: 8px !important; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; 
    text-align: center;
    /* 스태프 카드가 정사각형 비율을 유지하거나, 이미지와 텍스트가 세로로 쌓이는 형태일 경우에 맞춥니다. */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px; /* 내부 여백 조정 */
    height: 100%; /* 그리드 셀 높이에 맞추기 */
}

/* 로고 영역 스타일 (스태프 이미지처럼) */
.partnership-card .logo-wrapper {
    /* 스태프 이미지와 비슷한 크기 및 모양으로 조정 */
    width: 100%; 
    padding-top: 100%; /* 정사각형 비율 유지 (스태프 카드에 흔함) */
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
}

.partnership-card .logo-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 로고는 잘리지 않게 'contain' */
    /* 스태프 이미지가 둥근 모양이라면 여기에 border-radius: 50%; 추가 */
}

/* 카드 텍스트 내용 */
.partnership-card .card-content {
    padding: 5px 0 0 0;
    text-align: center;
}

.partnership-card .card-title {
    font-size: 0.9rem;
    font-weight: bold;
    margin: 3px 0;
    white-space: nowrap; /* 제목이 한 줄에 표시되도록 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.partnership-card .card-description {
    display: none; /* 모바일 3열에서는 설명이 너무 길어 생략하는 경우가 많습니다. */
}
	
}