/*
Theme Name: RenCompany Theme
Author: Kim ki beom
Description: A custom WordPress theme using itreform.
Version: 1.0
*/

/* ====================================
   기본 설정 (Variables, Base Styles)
   ==================================== */
:root {
  /* RenCompany New Theme Colors */
  --bs-primary: #344E41; /* A deep, forest green for the main theme color */
  --bs-secondary: #588157; /* A lighter green for secondary elements */
  --bs-success: #A3B18A; /* A light, muted green */
  --bs-warning: #F4A261; /* A soft orange for warnings or highlights */
  --bs-danger: #E63946; /* A red for danger */
  --bs-info: #E9C46A; /* A gold/yellow accent */
  --bs-body-color: #2C3E50; /* A dark gray for text */
  --bs-light: #F7F7F7; /* A light off-white */
  --bs-dark: #212F3D; /* A very dark blue-gray */
  --bs-orange: #F6A88B; /* #F6A88B, #FFA07A, #FF5722 */
  --bs-navy: #233251 /*추가*/
  
  /* Bootstrap default colors (retained if not redefined) */
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;

  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-bg: #fff;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans KR', sans-serif;
  scroll-behavior: smooth;
}

h1, h2, h3 {  
  margin: 0; 
  font-family: 'Noto Sans KR', sans-serif;
}

p {
  margin: 0 0 1rem;
}

a {
  text-decoration: none;
  color: var(--bs-secondary);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.img-fluid { max-width: 100%; height: auto; }

/* 상단 내비게이션바 색상 변경 */
.navbar.bg-dark {
	background-color: #FFFFFF !important;
}

/* ReNCompany 텍스트 색상 변경 */
.navbar-brand {
    color: #233251 !important; /* 텍스트 색상 변경 */
	font-size: 1.5rem; /* 기본 폰트 사이즈의 1.5배로 설정 */
    font-weight: bold; /* 폰트를 굵게 만듭니다 */
}

.navbar-brand img {
    height: auto;
    max-height: 80px; /* ✅ 이 값을 헤더 높이에 맞게 조절 */
    width: auto;
}

/* ====================================
   레이아웃 및 섹션
   ==================================== */
section {
  padding: 20px 20px;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease;
  background-color: #233251; /*#00582E; /* 연한 녹색 계열의 배경색 추가 */
}

section.show {
  opacity: 1;
  /*transform: translateY(0);*/
}

/* ===============================
   🟦 기본 (PC)
   =============================== */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 50vh;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  padding: 0 20px;
}

.hero-mobile-img {
  display: none; /* 기본적으로 숨김 */
}

.hero-content h1 {
  font-size: 48px;
  margin-bottom: 30px;
  line-height: 1.3;
  color: #fff;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* ===============================
   🟩 모바일 (≤768px)
   =============================== */
@media (max-width: 768px) {

  /* ✅ 배경 제거 + 섹션 높이 자동 */
  .hero {	
    background-size: cover;
    background-position: center;
    margin-top: 0;
    padding: 0;
    min-height: 30vh;
    height: auto; /* ✅ 이미지 높이에 맞게 섹션 자동 조정 */
  }

  /* ✅ 텍스트 숨김 */
  .hero-content h1 {
    display: none !important;
  }

  /* ✅ hero-content도 여백 없이 꽉 채움 */
  .hero-content {
    width: 100vw;
    max-width: 100vw;
    padding: 0;
    margin: 0;
  }

  /* ✅ 이미지 꽉 차게 (높이 자동) */
  .hero-mobile-img {
    display: block;
    width: 100vw;       /* 브라우저 가로폭 기준 */
    height: auto;       /* 세로 비율 유지 */
    object-fit: contain;/* ✅ 이미지 전체 보이게 */
    margin: 0;
    padding: 0;
    vertical-align: middle;
  }
}

/* ===============================
   🟥 초소형 모바일 (≤480px)
   =============================== */
@media (max-width: 480px) {
  .hero-mobile-img {
    width: 100vw;
    height: auto;
  }
}

/* 패럴랙스 효과 */
.parallax {
  height: 400px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ====================================
   섹션별 스타일 (Content, Landing)
   ==================================== */
/* SNS 로그인 버튼 */
.sns-login-buttons {
  margin-top: 20px;
}

.sns-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 10px auto;
  padding: 12px 20px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.sns-btn.naver {
  background-color: #03c75a;
}

.sns-btn.kakao {
  background-color: #fee500;
  color: #000;
}



/* ====================================
   회사 소개
   ==================================== */
.highlight {
  background-color: #233251;
  color: #FFFFFF; /* 필요에 따라 글자색도 조절 */
}

.highlight2 {
  background-color: #FFFFFF;
  color: #233251; /* 필요에 따라 글자색도 조절 */
}


#company {
	background-color: #FFFFFF !important;
}

#company .subject {
	font-family:"Noto Sans KR","AppleSDGothicNeo-Regular","Malgun Gothic","맑은 고딕","dotum","돋움","sans-serif";
	font-weight: 900;
	font-size: 2rem;
	color: #000;
	padding: 0px 0px 15px 0px;
	margin-top:20px;

}

#company .txt {
	font-weight: normal;
    font-size: 1.5rem;
	font-family: "Noto Sans KR", "AppleSDGothicNeo-Regular", "Malgun Gothic", "맑은 고딕", "dotum", "돋움", "sans-serif";
    font-weight: 900;
    color: #000;
    /*word-break: keep-all;
    word-wrap: break-word;*/
    text-align: center;
	margin-top:10px;
}


#company1 {
	background-color: #FFFFFF !important;
}

#company1 .subject {
	font-family:"Noto Sans KR","AppleSDGothicNeo-Regular","Malgun Gothic","맑은 고딕","dotum","돋움","sans-serif";
	font-weight: 900;
	font-size: 2rem;
	color: #000;
	padding: 0px 0px 15px 0px;
	margin-top:20px;

}

#company1 .txt {
	font-weight: normal;
    font-size: 1.5rem;
	font-family: "Noto Sans KR", "AppleSDGothicNeo-Regular", "Malgun Gothic", "맑은 고딕", "dotum", "돋움", "sans-serif";
    font-weight: 900;
    color: #000;
    /*word-break: keep-all;
    word-wrap: break-word;*/
    text-align: center;
	margin-top:10px;
}


#compny_bnk {
	height: 100px;
	background-color: #FFFFFF !important;
}

/* 기본 설정 (PC 환경: 768px 이상) */
.pc-content {
    /* PC에서는 텍스트를 보이게 합니다 (기본값) */
    display: block; 
}

#company .mobile-image-wrapper {
    /* PC에서는 모바일 전용 이미지를 숨깁니다. */
    display: none;
}

/* ---------------------------------------------------------------------- */
/* 🚨 모바일 환경 (화면 너비 768px 이하) 미디어 쿼리 */
/* ---------------------------------------------------------------------- */
@media (max-width: 768px) {
	#compny_bnk {
		height: 20px;
		background-color: #FFFFFF !important;
	}   
    #company {
        /* 모바일 전체 섹션 스타일 조정 (필요하다면) */
        padding: 10px; 
    }
    
    #company .pc-content {
        /* 모바일에서는 PC 텍스트 내용을 숨깁니다. */
        display: none;
    }

    #company .mobile-image-wrapper {
        /* 모바일에서는 모바일 전용 이미지를 보이게 합니다. */
        display: block;
        text-align: center; /* 이미지를 가운데 정렬 */
    }

    #company .mobile-image-wrapper img {
        /* 이미지 크기 조정 (화면에 꽉 차게) */
        max-width: 100%;
        height: auto;
    }
}

#company1 .mobile-image-wrapper {
    /* PC에서는 모바일 전용 이미지를 숨깁니다. */
    display: none;
}

/* ---------------------------------------------------------------------- */
/* 🚨 모바일 환경 (화면 너비 768px 이하) 미디어 쿼리 */
/* ---------------------------------------------------------------------- */
@media (max-width: 768px) {
    
    #company1 {
        /* 모바일 전체 섹션 스타일 조정 (필요하다면) */
        padding: 10px; 
    }
    
    #company1 .pc-content {
        /* 모바일에서는 PC 텍스트 내용을 숨깁니다. */
        display: none;
    }

    #company1 .mobile-image-wrapper {
        /* 모바일에서는 모바일 전용 이미지를 보이게 합니다. */
        display: block;
        text-align: center; /* 이미지를 가운데 정렬 */
    }

    #company1 .mobile-image-wrapper img {
        /* 이미지 크기 조정 (화면에 꽉 차게) */
        max-width: 100%;
        height: auto;
    }
}

/* ====================================
   [비즈브릿지를 찾는 대표님들께] 걱정 리스트 스타일
   ==================================== */


.sub_comm_tit {
    text-align: center; /* 내부 텍스트를 중앙에 정렬 */
    margin-bottom: 30px; /* 섹션 내용과 제목 아래 여백 */
    padding: 0 15px; /* 좌우 패딩을 주어 텍스트가 화면 끝에 붙지 않도록 방지 */
}

.sub_comm_tit {
    color: #28a745; /* 텍스트 기본색을 흰색으로 지정 */
}

/* 1. 강조 텍스트 (em 태그) 스타일 */
.sub_comm_tit em {
    display: block; /* 줄 바꿈을 위해 블록 요소로 만듦 */
    font-style: normal; /* 기본 기울임꼴 제거 */
    font-size: 1rem; /* 작은 크기 (예: 16px) */
    font-weight: 500;
    margin-bottom: 5px; /* 아래 h4와의 간격 */
    letter-spacing: 0.5px; /* 약간의 자간 조정 */
}

/* 2. 메인 제목 (h4 태그) 스타일 */
.sub_comm_tit h4 {
    font-size: 1.6rem; /* 메인 제목 크기 (모바일 기준) */
    font-weight: bold; /* 굵게 */
    margin: 0; /* 기본 마진 제거 */
    line-height: 1.4; /* 줄 높이 조정 */
}


/* 1. 강조 텍스트 (em 태그) 스타일 */
.worry_result {
    color: #28a745; /* 텍스트 기본색을 흰색으로 지정 */
}

.worry_result em {
    display: block; /* 줄 바꿈을 위해 블록 요소로 만듦 */
    font-style: normal; /* 기본 기울임꼴 제거 */
    font-size: 3rem; /* 작은 크기 (예: 16px) */
    font-weight: 500;
    margin-bottom: 5px; /* 아래 h4와의 간격 */
    letter-spacing: 0.5px; /* 약간의 자간 조정 */
}

/* 2. 메인 제목 (h4 태그) 스타일 */
.worry_result h4 {
    font-size: 1.6rem; /* 메인 제목 크기 (모바일 기준) */
    font-weight: bold; /* 굵게 */
    margin: 0; /* 기본 마진 제거 */
    line-height: 1.4; /* 줄 높이 조정 */
}


@media screen and (max-width: 768px) {

	#company .subject {
		font-family:"Noto Sans KR","AppleSDGothicNeo-Regular","Malgun Gothic","맑은 고딕","dotum","돋움","sans-serif";
		font-size: 1.2rem;
		color: #000;
		padding: 0px 0px 15px 0px;
		margin-top:20px;

	}

	#company .txt {
		font-weight: normal;
		font-size: 0.8rem;
		font-family: "Noto Sans KR", "AppleSDGothicNeo-Regular", "Malgun Gothic", "맑은 고딕", "dotum", "돋움", "sans-serif";
		color: #000;
		/*word-break: keep-all;
		word-wrap: break-word;*/
		text-align: center;
		margin-top:10px;
	}

	#company1 .subject {
		font-family:"Noto Sans KR","AppleSDGothicNeo-Regular","Malgun Gothic","맑은 고딕","dotum","돋움","sans-serif";
		font-size: 1.2rem;
		color: #000;
		padding: 0px 0px 15px 0px;
		margin-top:20px;

	}

	#company1 .txt {
		font-weight: normal;
		font-size: 0.8rem;
		font-family: "Noto Sans KR", "AppleSDGothicNeo-Regular", "Malgun Gothic", "맑은 고딕", "dotum", "돋움", "sans-serif";
		color: #000;
		/*word-break: keep-all;
		word-wrap: break-word;*/
		text-align: center;
		margin-top:10px;
	}

	#companyQ .subject {
		font-family:"Noto Sans KR","AppleSDGothicNeo-Regular","Malgun Gothic","맑은 고딕","dotum","돋움","sans-serif";
		font-size: 1.0rem;
		color: #000;
		padding: 0px 0px 15px 0px;
		margin-top:20px;

	}

	#companyQ .txt {
		font-weight: normal;
		font-size: 0.8rem;
		font-family: "Noto Sans KR", "AppleSDGothicNeo-Regular", "Malgun Gothic", "맑은 고딕", "dotum", "돋움", "sans-serif";
		color: #000;
		/*word-break: keep-all;
		word-wrap: break-word;*/
		text-align: center;
		margin-top:10px;
	}
	

}

/* ====================================
   컨설팅 유형 선택
   ==================================== */
#survey-select .survey-grid {
    display: grid;
    /* 카드를 300px 너비로 자동 배치 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

#survey-select .header-content-container {
    text-align: center; /* h2가 중앙 정렬되도록 */
    margin-bottom: 50px; /* 원하는 간격 (예: 50px) */
    padding-top: 20px; /* 필요하다면 섹션 상단에도 약간의 패딩을 추가 */
}

/* h2 태그 자체 스타일 (선택 사항) */
#survey-select .header-content-container h2 {
    font-size: 2.5rem; /* 제목 크기 설정 */
    color: #FFFFF; /* 제목 색상 설정 */
    /* margin-bottom은 .header-content-container에 주었으므로 0으로 두거나 필요에 따라 조정 */
    margin: 0; 
	margin-bottom: 50px; /* 원하는 간격 (예: 50px) */
    text-align: center; /* h2가 중앙 정렬되도록 */
}
#survey-select .survey-grid .card {
    /* 카드 자체에 주황색 배경, 흰색 텍스트 적용 */
    background-color: #ffffff/*#F6A88B;*/
    color: #000000;
    height: 100px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    /* Flexbox를 사용하여 카드 내용을 수직/수평 중앙에 배치 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#survey-select .survey-grid .card .card-link {
    /* 링크 기본 스타일 제거 및 폰트 크기 조정 */
    text-decoration: none;
    color: #000000;
    font-size: 1.8rem; /* 글씨 크기 키우기 */
    font-weight: bold;
    display: block;
    width: 100%;
    height: 100%;
    
    /* Flexbox를 상속받아 텍스트를 중앙에 배치 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* 마우스 오버(hover) 효과 */
#survey-select .survey-grid .card:hover {
    background-color: #ffffff; /* 배경을 흰색으로 변경 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px); /* 약간 위로 올라가는 효과 */
}

#survey-select .survey-grid .card:hover .card-link {
    color: #333333; /* 텍스트를 짙은 회색으로 변경 */
}

/* ====================================
   모바일 반응형 적용 (화면 너비 600px 이하)
   ==================================== */
@media screen and (max-width: 768px) {

    /* 설문 그리드 레이아웃 조정 */
    #survey-select .survey-grid {
        /*
         * 모바일 화면에서는 minmax(300px, 1fr) 대신
         * 카드의 최소 너비를 250px로 줄여 공간 확보
         */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        /* 좌우 패딩을 줄여서 화면 끝까지 사용 */
        padding: 15px; 
    }

    /* 카드 크기 및 스타일 조정 */
    #survey-select .survey-grid .card {
        height: 100px; /* 모바일에서 카드 높이 약간 줄이기 */
		weight: 150px;
    }

    /* 카드 링크(텍스트) 스타일 조정 */
    #survey-select .survey-grid .card .card-link {
        font-size: 1.4rem; /* 모바일에서 글씨 크기 줄이기 */
    }
    
    /* [선택 사항] 카드 호버 효과 제거 또는 단순화 */
    /* 모바일에서는 hover가 불편할 수 있으므로, hover 효과를 제거하려면 아래 주석을 해제하세요. */
    /*
    #survey-select .survey-grid .card:hover {
        transform: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #F6A88B; 
    }
    #survey-select .survey-grid .card:hover .card-link {
        color: #ffffff;
    }
    */
}

/* ====================================
   컨설팅 유형 상단에 위치한 섹션 선택
   ==================================== */
#survey-select-top .survey-grid {
    display: grid;
    /* 카드를 300px 너비로 자동 배치 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

#survey-select-top .header-content-container {
    text-align: center; /* h2가 중앙 정렬되도록 */
    margin-bottom: 50px; /* 원하는 간격 (예: 50px) */
    padding-top: 20px; /* 필요하다면 섹션 상단에도 약간의 패딩을 추가 */
}

/* h2 태그 자체 스타일 (선택 사항) */
#survey-select-top .header-content-container h2 {
    font-size: 2.5rem; /* 제목 크기 설정 */
    color: #FFFFF; /* 제목 색상 설정 */
    /* margin-bottom은 .header-content-container에 주었으므로 0으로 두거나 필요에 따라 조정 */
    margin: 0; 
	margin-bottom: 50px; /* 원하는 간격 (예: 50px) */
    text-align: center; /* h2가 중앙 정렬되도록 */
}

#survey-select-top .survey-grid .card {
    /* 카드 자체에 주황색 배경, 흰색 텍스트 적용 */
    background-color: #ffffff/*#F6A88B;*/
    color: #000000;
    height: 100px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    /* Flexbox를 사용하여 카드 내용을 수직/수평 중앙에 배치 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#survey-select-top .survey-grid .card .card-link {
    /* 링크 기본 스타일 제거 및 폰트 크기 조정 */
    text-decoration: none;
    color: #000000;
    font-size: 1.8rem; /* 글씨 크기 키우기 */
    font-weight: bold;
    display: block;
    width: 100%;
    height: 100%;
    
    /* Flexbox를 상속받아 텍스트를 중앙에 배치 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* 마우스 오버(hover) 효과 */
#survey-select-top .survey-grid .card:hover {
    background-color: #ffffff; /* 배경을 흰색으로 변경 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px); /* 약간 위로 올라가는 효과 */
}

#survey-select-top .survey-grid .card:hover .card-link {
    color: #333333; /* 텍스트를 짙은 회색으로 변경 */
}

#survey-select-top .survey-mobile-img {
  display: none; /* 기본은 숨김 */
}

#survey-select .survey-mobile-img {
  display: none; /* 기본은 숨김 */
}

#experts .survey-mobile-img {
  display: none; /* 기본은 숨김 */
}
/* ====================================
   모바일 반응형 적용 (화면 너비 600px 이하)
   ==================================== */
@media screen and (max-width: 768px) {

    /* 설문 그리드 레이아웃 조정 */
    #survey-select-top .survey-grid {
        /*
         * 모바일 화면에서는 minmax(300px, 1fr) 대신
         * 카드의 최소 너비를 250px로 줄여 공간 확보
         */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        /* 좌우 패딩을 줄여서 화면 끝까지 사용 */
        padding: 15px; 
    }

    /* 카드 크기 및 스타일 조정 */
    #survey-select-top .survey-grid .card {
        height: 100px; /* 모바일에서 카드 높이 약간 줄이기 */
		weight: 150px;
    }

    /* 카드 링크(텍스트) 스타일 조정 */
    #survey-select-top .survey-grid .card .card-link {
        font-size: 1.4rem; /* 모바일에서 글씨 크기 줄이기 */
    }
    
    /* [선택 사항] 카드 호버 효과 제거 또는 단순화 */
    /* 모바일에서는 hover가 불편할 수 있으므로, hover 효과를 제거하려면 아래 주석을 해제하세요. */
    /*
    #survey-select .survey-grid .card:hover {
        transform: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #F6A88B; 
    }
    #survey-select .survey-grid .card:hover .card-link {
        color: #ffffff;
    }
    */
	
	  #survey-select-top .header-content-container {
		text-align: center;
		padding: 0;
		margin-bottom: 0px;
	  }

	  #survey-select-top .header-content-container h2 {
		display: none; /* 텍스트 숨김 */
	  }

	  #survey-select-top .survey-mobile-img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain; /* 비율 유지, 잘리지 않게 */
	  }
	
	  #survey-select .header-content-container {
		text-align: center;
		padding: 0;
		margin-bottom: 0px;
	  }

	  #survey-select .header-content-container h2 {
		display: none; /* 텍스트 숨김 */
	  }

	  #survey-select .survey-mobile-img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain; /* 비율 유지, 잘리지 않게 */
	  }
	
	  #experts .header-content-container {
		text-align: center;
		padding: 0;
	  }

	  #experts h2 {
		display: none; /* 텍스트 숨김 */
	  }

	  #experts .survey-mobile-img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain; /* 비율 유지, 잘리지 않게 */
	  }}

/* ====================================
   설문 섹션 스타일 (최종 수정)
   ==================================== */

/* 설문 섹션 컨테이너 */
#survey-section {
    display: none; /* 🔥 초기에는 숨김 */
    padding: 100px 20px;
    background-color: #233251; /* 배경색 */

}

/* 🔥 JavaScript로 활성화될 때만 보이도록 설정 */
#survey-section.is-active {
    display: block !important;
}

/* 설문 카드 그리드 레이아웃 */
#survey-section .survey-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    justify-items: center;
    align-items: center;
}

/* 개별 카드 스타일 */
#survey-section .survey-grid .card {
    background-color: #ffffff;
    color: #000000 !important;
    border: none;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color: #233251;
    width: 100%;
    min-height: 100px;
    
    display: flex; /* 내부 텍스트 중앙 정렬을 위해 flexbox 사용 */
    justify-content: center;
    align-items: center;
}

/* 카드 내 링크 스타일 */
#survey-section .survey-grid .card a {
    display: block;
	color: #000000 !important;
    text-align: center;
    padding: 20px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
}

/* 호버 효과 */
#survey-section .survey-grid .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
}

/* 호버 시 글자색 변경 */
#survey-section .survey-grid .card:hover a {
    color: #333333;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    #survey-section {
        padding: 50px 15px;
        min-height: 80vh;
    }
    #survey-section .survey-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    #survey-section .survey-grid .card {
        min-height: 150px;
    }
    #survey-section .survey-grid .card a {
        font-size: 1.4rem;
    }
}

/* ====================================
   설문 선택
   ==================================== */
/* =========================================================
   최종 설문 폼 (#survey-form) 스타일
   (체크박스 및 약관 버튼 스타일 포함)
   ========================================================= */
#survey-form {
    min-height: 500px;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 80px;
}
#survey-form .card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
#survey-form .card-body {
    padding: 2rem !important;
}
#survey-form .card-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--bs-primary);
    margin-bottom: 2rem !important;
}
/* 폼 그룹 및 라벨 스타일 */
#survey-form .form-group {
    margin-bottom: 1.5rem;
}

/* 약관 동의 그룹의 레이아웃 */
#survey-form .form-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

/* 체크박스와 라벨을 묶어주는 요소가 필요합니다. */
.form-check > input[type="checkbox"],
.form-check > .form-check-label {
    flex-shrink: 0;
    margin-right: 5px; /* 체크박스와 라벨 사이 간격 */
}


/* 체크박스 라벨에 대한 스타일 */
#survey-form .form-check-label {
    flex: 1;
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-left: 0.5rem;
}

/* 🔥 체크박스 디자인 */
#survey-form .form-check-input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    /* 테두리 색상을 청록색으로 변경 */
    border: 2px solid #00BCD4;
}

#survey-form .form-check-input:checked {
    /* 체크되었을 때 배경색을 초록색으로 변경 */
    background-color: #A3B18A;
    border-color: #A3B18A;
    transform: scale(1.1);
    box-shadow: 0 0 0 0.25rem rgba(163, 177, 138, 0.25);
}

#survey-form .form-check-input:focus {
    border-color: #A3B18A;
    box-shadow: 0 0 0 0.25rem rgba(163, 177, 138, 0.25);
}

/* 약관보기 버튼 스타일 */
#survey-form .terms-button {
    flex-shrink: 0;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid #233251;
    border-radius: 5px;
    color: #ffffff;
    background-color: #233251;
    transition: all 0.3s ease;
}

#survey-form .terms-button:hover {
    background-color: #344E41; /* 메인보다 약간 밝은 포인트 */
    border-color: #344E41;
    color: #fff;
    box-shadow: 0 4px 10px rgba(35, 50, 81, 0.3);
}

/* 제출 버튼 (#submitBtn) 스타일 */
#survey-form #submitBtn {
    font-size: 1.25rem;
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    background-color: #576076;
    border-color: #576076;
    transition: all 0.3s ease;
}
#survey-form #submitBtn:hover {
    background-color: #233251;
    border-color: #233251;
    box-shadow: 0 8px 16px rgba(255, 87, 34, 0.2);
}

/* ====================================
   맞춤형 솔루션 섹션 최종 스타일
   ==================================== */
#survey-result-section {
  /* ✅ 완전 불투명한 진한 네이비 배경 (rgba 제거) */
  background: #233251 !important;           /* 단일 배경 지정 */
  background-color: #233251 !important;     /* 백업용 */
  background-image: none !important;        /* 혹시 남아있는 이미지 제거 */

  /* ✅ 배경 정렬 및 반복 처리 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* ✅ 기본 레이아웃 유지 (기존 내용 그대로) */
  flex-direction: column;
  justify-content: flex-start;
  padding: 30px 0 50px 0;
  position: relative;
}

#survey-result-section .overlay {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    
    /* 💡 반투명 색상 설정 (0.7 대신 0.2로 지정되어 있어 이미 반투명 역할은 하고 있습니다.) */
    background: rgba(52, 78, 65, 0.8); 
    
    /* 오버레이가 배경 이미지를 덮도록 Z-인덱스 설정 */
    z-index: 1; 
}

/* 💡 모든 내용물(div)이 오버레이 위에 선명하게 보이도록 z-index를 설정합니다. */
#survey-result-section > div {
    position: relative;
    z-index: 2; 
}

#survey-result-section > section {
    position: relative;
    z-index: 2; 
}

#survey-result-section.is-active {
    display: flex;
}
#survey-result-section .header-content-container {
    width: 100%;
    text-align: center;
    color: #ffffff;
}
#survey-result-section .header-content-container h2 {
    font-size: 3.5rem !important;
    font-weight: bold !important;
    margin-bottom: 20px !important;
    letter-spacing: -1px;
    text-align: center;
}
.section-subtitle-container {
  display: flex; /* Flexbox 활성화 */
  flex-direction: column; /* 내용을 세로로 정렬 */
  justify-content: center; /* 세로 중앙 정렬 (선택 사항이지만 안전함) */
  align-items: center; /* 가로 중앙 정렬 (텍스트 중앙 정렬과 유사) */
  
  /* 사용자 요청 사항 적용 시작 */
  width: 100%; /* 너비 고정 */
  max-width: 900px;
  margin: 0 auto; /* 중앙 정렬 추가 */
  text-align: center;
  color: #000000;
  border-color: #233251; /* 요청된 배경색 적용 */
  padding: 15px 0; /* 요청된 패딩 적용 */

  /* Flexbox 부모와의 충돌 방지 및 너비 600px 보장 */
  flex-basis: auto; /* width가 우선하도록 auto로 변경 */
  flex-shrink: 0;
  /* 사용자 요청 사항 적용 끝 */
  
  /* 기존 스타일 일부 재조정 */
  border-radius: 8px;
}

.section-subtitle-container h1,
.section-subtitle-container h2,
.section-subtitle-container h3,
.section-subtitle-container p {
    /* 기본 마진을 초기화하거나 줄입니다. */
    margin: 0; 
    padding: 10;
	color: #ffffff;
	margin-bottom:20px;
}

.section-subtitle-container h3 {
	color: #ffc107;
}

.section-subtitle-container .mobile-solution-img {
  display: none;
}

.section-description {
    font-size: 1.1em;
    font-weight: 500;
}

.section-subtitle-container .section-subtitle {
    font-size: 1.8rem !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
    text-align: center;
}
#survey-result-section .result-cards-container {
    width: 100%;
    margin-top: 50px !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}
#survey-result-section .result-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 900px;
}
#survey-result-section .result-section h3 {
    text-align: center;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0;
}
#survey-result-section .result-card {
    background-color: #FFFFFF !important;
	color: #000000 !important;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    min-width: 250px;
    width: 250px;
    min-height: 80px;
    padding: 10px;
    cursor: pointer;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
#survey-result-section .result-card .card-title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}
#survey-result-section .result-card .card-title h4 {
    font-size: 1.5rem !important;
    font-weight: bold;
    margin: 0;
}
#survey-result-section .result-card .card-link {
    width: 100%;
    margin-top: auto;
    padding-bottom: 1px;
}
#survey-result-section .result-card .card-link p {
    margin: 0;
}
#survey-result-section .result-card .card-link p a {
    display: inline-block;
    font-weight: 600;
    text-decoration: none !important;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
}
#survey-result-section .result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    background-color: #ffffff !important;
}
#survey-result-section .result-card:hover .card-title h4,
#survey-result-section .result-card:hover .card-link p a {
    color: #333333 !important;
}
/* 두 개의 카드를 나란히 배치하기 위한 CSS 규칙 */
#result-type-B-down,
#result-type-C-down {
    flex-direction: column; /*flex-direction: row;*/
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 650px;
}
#result-type-B-down.is-active {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
#result-type-C-down.is-active {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
/* 카드들을 수평으로 정렬합니다. */
.result-cards-wrapper {
    display: flex;
    justify-content: center; /* 카드들을 중앙에 정렬하고 싶을 경우 */
    gap: 20px; /* 카드 사이 간격 */
	margin: 20px 0; 
    width: 100%;
}
@media (max-width: 768px) {
	#survey-form .form-check-label {
		font-size: 0.8rem !important;
	}
    /* 1. 섹션 전체 설정 */
    #survey-result-section {
        height: auto;
        min-height: 1000px;
        padding: 50px 0 30px 0;
    }

    /* 2. 제목 글씨 크기 조정 */
    .header-content-container h2 {
        font-size: 1.5rem !important;
    }

	#experts h2 {
		color: #000000; 
		font-size: 1.5rem !important; /* 필요하다면 크기 조정 */
		margin-bottom: 20px;
	}

    /* 3. 부제 컨테이너 중앙 정렬 및 너비 고정 (요청 사항) */
    .section-subtitle-container {
        max-width: 100% !important;
		width: 100% !important;
		padding: 10px 0;
        margin: 0 auto; /* 좌우 마진 자동 설정으로 중앙 정렬 */
        text-align: center; /* 텍스트 자체 중앙 정렬 */
    }
    .section-subtitle-container .section-subtitle {
        font-size: 1.2rem !important;
    }

    /* 4. 주요 결과 섹션 컨테이너 세로 정렬 */
    #survey-result-section .result-section {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    /* 5. 카드 래퍼 컨테이너 세로 정렬 */
    /* .result-cards-wrapper가 두 개의 카드 세트를 나란히 배치하는 역할이라면,
       이 컨테이너도 세로로 변경합니다. (기존 코드에는 없었으나, 일반적인 모바일 레이아웃에 맞게 추가) */
    .result-cards-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        /* 모바일에서는 최대 너비를 제거하거나 100%로 설정하여 유연하게 대응 */
        max-width: 100%; 
    }

    /* 6. 결과 유형 컨테이너 내부의 카드들을 세로로 정렬 (요청 사항) */
    /* 이 부분이 두 개의 카드를 수직으로 쌓는 역할을 합니다. */
    #result-type-B-down,
    #result-type-C-down {
        flex-direction: column; /* 세로 정렬 적용 완료 */
        align-items: center;
        gap: 15px;
        /* max-width도 모바일에서는 100%로 유연하게 변경하는 것을 고려할 수 있습니다. */
        max-width: 90%; 
    }

    /* 7. 개별 카드 스타일 조정 */
    #survey-result-section .result-card {
        /* 카드가 컨테이너의 전체 너비를 차지하도록 width: 100% 추가 */
        width: 90%;
        min-height: 80px;
        padding: 15px;
    }
    #survey-result-section .result-card .card-title h4 {
        font-size: 1.3rem !important;
    }
	
	  .section-subtitle-container h1 {
		display: none !important;
	  }

	  .section-subtitle-container .mobile-solution-img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain; /* 비율 유지, 잘림 방지 */
		margin: 0 auto;
	  }
}

#experts-container h2 {
	color:#FFFFFF;
}

/* 전문가 섹션 그리드 */
.expert-grid {
    display: grid;
    /* 4개 카드가 나란히 나오도록, 필요에 따라 반응형으로 조절 */
    grid-template-columns: repeat(auto-fit, 250px);
	justify-content: center;
    gap: 30px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 전문가 카드 스타일 */
#experts-container .exp-card {
    position: relative; /* 자식 요소의 위치 기준이 됩니다. */
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease-in-out, border 0.3s ease-in-out;
    height: 350px; /* 카드의 높이를 고정하여 이미지가 꽉 차게 만듭니다. */
    border: 3px solid transparent; /* 기본 투명 테두리 */
}

#experts-container .exp-card:hover {
    transform: translateY(-10px);
    border-color: #F4A261; /* 호버 시 눈에 띄는 주황색 테두리 */
}

#experts-container .exp-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 카드 영역을 꽉 채우도록 설정 */
    display: block;
    filter: brightness(90%); /* 이미지를 어둡게 만드는 효과 */
    transition: filter 0.3s ease-in-out;
    position: absolute; /* 텍스트 아래에 깔리도록 절대 위치 설정 */
    top: 0;
    left: 0;
	background-color: var(--bs-orange); /* #FFA07A, #F4A261*/
}

#experts-container .exp-card:hover img {
    filter: brightness(100%); /* 호버 시 밝게 */
}

#experts-container .exp-card .card-info {
    position: absolute;
    bottom: 20px;
    right: 20px; /* 오른쪽 아래에 배치 */
    color: #fff; /* 흰색 텍스트 */
    z-index: 10;
    text-align: right; /* 텍스트를 오른쪽 정렬 */
}

#experts-container .exp-card .card-info h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

#experts-container .exp-card .card-info p {
    margin: 5px 0 0;
    font-size: 1rem;
    font-weight: 400;
}

/* ====================================
   법인 회생
   ==================================== */
#corporate-revival-section {
    background-color: #ffffff !important; /* 흰색 배경색을 지정합니다 */
    opacity: 1 !important;
    visibility: visible !important;
}

#corporate-revival-section{
	padding: 0px 0px;
	margin: -50px 0px 0px 0px;
}
#corporate-revival-section .tt{
	font-family:"Noto Sans KR","AppleSDGothicNeo-Regular","Malgun Gothic","맑은 고딕","dotum","돋움","sans-serif";
	font-weight: 900;
	font-size: 2.6rem;
	color: #000;
	text-align: center;
	padding: 0px;
	margin: auto;
}
#corporate-revival-section .tt2{
	font-family:"Noto Sans KR","AppleSDGothicNeo-Regular","Malgun Gothic","맑은 고딕","dotum","돋움","sans-serif";
	font-weight: 500;
	font-size: 0.9rem;
	color: #898989;
	text-align: center;
	padding: 5px 0px 30px 0px;
	margin: auto;
}
#corporate-revival-section .info{
	padding: 30px 0px;
	margin: 0px;
}
#corporate-revival-section .info li{
	float: left;
	padding: 0px;
	margin: 0px;
}
#corporate-revival-section .info .pic{
	text-align: right;
}
#corporate-revival-section .info .pic img{
	width: 85%;
}
#corporate-revival-section .info .subject{
	font-family:"Noto Sans KR","AppleSDGothicNeo-Regular","Malgun Gothic","맑은 고딕","dotum","돋움","sans-serif";
	font-weight: 900;
	font-size: 1.6rem;
	color: #000;
	padding: 0px 0px 15px 0px;
}
#corporate-revival-section .info .subject span{
	background-image: url('./assets/images/step/line_green.png');
	background-position: left bottom;
	background-repeat: repeat-x;
}
#corporate-revival-section .info .txt{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 500;
	font-size: 0.95rem;
	color: #373737;
	word-break:keep-all;
	word-wrap:break-word;
	text-align: left;
}
#corporate-revival-section .item_box{
	padding: 30px 0px;
	margin: 0px;
}
#corporate-revival-section .item_box .subject{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 300;
	font-size: 1.8rem;
	color: #000;
	letter-spacing: -1px;
	padding: 0px 0px 10px 0px;
}
#corporate-revival-section .item_box .subject strong{
	font-weight: 900;
}
#corporate-revival-section .item_box ul {
    list-style-type: none; /* Removes the bullet points */
    padding-left: 0; /* Aligns text to the left by removing default list padding */
    margin-left: 0; /* Ensures the list items are flush with the container */
}
#corporate-revival-section .item_box li{
    width: 100%;
    font-size: 0.9rem;
    color: #343434;
    line-height: 1.2;
    word-break: keep-all;
    word-wrap: break-word;
    padding: 5px 0px 5px 20px;
	background-image: url('./assets/images/step/arrow_dot.png');
	background-position: left 11px;
	background-repeat: no-repeat;
	text-align: left;
}
#corporate-revival-section .box {
	padding: 0px;
	margin: 0px;
}
#corporate-revival-section .item_box .t2{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 700;
	font-size: 0.9rem;
	text-align: center;
	padding: 15px 10px;
	margin: 0px 0px 10px 0px;
  border-radius: 5px;
  background-color: #233251;
  color: #FFFFFF;
}
/*
#corporate-revival-section .step_arrow_right{
	position: relative;
	text-align: center;
	vertical-align: bottom !important;
	background-image: url('./assets/images/step/step_arrow_right.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding: 0px;
	margin: 0px;
}
#corporate-revival-section .step_arrow_right span{
	position: absolute;
	width: 100%;
	left: 0px;
	bottom: 10px;
	font-size: 0.7rem;
	text-align: center;
}*/
#corporate-revival-section .step_arrow_down{
	height: 30px;
	vertical-align: bottom !important;
	background-image: url('./assets/images/step/step_arrow_down.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	padding: 0px;
	margin: 0px;
}
#corporate-revival-section .step{
	height: 80px;
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 700;
	font-size: 1.4rem;
	color: #233251;
	line-height: 60px;
	text-align: center;
	word-break:keep-all;
	word-wrap:break-word;
	border-radius: 40px;
	border: 1px solid #233251;
	padding: 10px 0px;
}
#corporate-revival-section .step_blue{
	height: 80px;
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 300;
	color: rgba(255, 255, 255, .9);
	text-align: center;
	word-break:keep-all;
	word-wrap:break-word;
	border-radius: 40px;
	background-color: #233251;
	padding: 10px 0px;
}
#corporate-revival-section .step_blue strong{
	font-weight: 700;
	font-size: 1.4rem;
	color: rgba(255, 255, 255, 1);
}
#corporate-revival-section .txt1{
	line-height: 1.3;
}
#corporate-revival-section .point{
	color: red;
	font-size:1.0rem;
}
#corporate-revival-section small{
	font-weight: 400;
	font-size: 0.95rem;
}
#corporate-revival-section table {
	width: 100%;
}
#corporate-revival-section table th{
	color: #fff;
	text-align: center;
	padding: 10px 20px;
	background-color: #233251;
	border-left: 1px solid #FFFFFF;
}
#corporate-revival-section table th:first-child{
	border-left: none;
}
#corporate-revival-section table td{
	padding: 10px 40px;
	word-break:keep-all;
	word-wrap:break-word;
	border-bottom: 1px solid #eaeaea;
	border-left: 1px solid #eaeaea;
}
#corporate-revival-section table td:first-child{
	border-left: none;
}
@media (max-width: 767px) {
	#corporate-revival-section{
		padding: 30px 10px;
		margin: 0px 0px 0px 0px;
	}
	#corporate-revival-section .tt{
		font-size: 2.2rem;
	}
	#corporate-revival-section .tt2{
		padding: 5px 0px 10px 0px;
	}
	#corporate-revival-section .info{
		padding: 20px 0px;
	}
	#corporate-revival-section .info .pic{
		padding: 10px 0px;
	}
	#corporate-revival-section .info .pic img{
		width: 100% !important;
	}
	#corporate-revival-section .info .txt{
		font-weight: 700;
		line-height: 1.3;
		color: #615f5f;
		text-align: left;
	}
	#corporate-revival-section .step_blue{
		font-size: 0.7rem;
		padding-top: 20px;
	}
	#corporate-revival-section .step,
	#corporate-revival-section .step_blue strong{
		font-size: 1.0rem;
	}
	#corporate-revival-section .txt1,
	#corporate-revival-section .txt2{
		line-height: 1.7;
	}
	#corporate-revival-section small{
		font-size: 0.8rem;
	}
	#corporate-revival-section .point{
		display: block;
		font-size:0.9rem;
	}
	#corporate-revival-section table th{
		padding: 10px 10px;
	}
	#corporate-revival-section table td{
		padding: 10px 20px;
	}
}

/* ====================================
   법인 회생
   ==================================== */
#corporate-funding-section {
    background-color: #ffffff !important; /* 흰색 배경색을 지정합니다 */
    opacity: 1 !important;
    visibility: visible !important;
}

#corporate-funding-section .tt{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 900;
	font-size: 2.6rem;
	color: #000;
	text-align: center;
	padding: 10px 0 0 0;
	margin: auto;
}
#corporate-funding-section .tt2{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 500;
	font-size: 0.9rem;
	color: #898989;
	text-align: center;
	padding: 5px 0px 30px 0px;
	margin: auto;
}

#corporate-funding-section table {
	width: 100%;
}
#corporate-funding-section table th{
	color: #fff;
	text-align: center;
	padding: 10px 20px;
	background-color: #233251;
	border-left: 1px solid #FFFFFF;
}
#corporate-funding-section table th:first-child{
	border-left: none;
}
#corporate-funding-section table td{
	padding: 10px 40px;
	word-break:keep-all;
	word-wrap:break-word;
	border-bottom: 1px solid #eaeaea;
	border-left: 1px solid #eaeaea;
}
#corporate-funding-section table td:first-child{
	border-left: none;
}


#corporate-funding-section table th.th-header {
  background-color: var(--bs-orange); /* 원하는 배경색 코드로 변경 */
  color: #FFFFFF; /* 글자색 변경 (선택사항) */
}

#corporate-funding-section .item_box{
	padding: 10px 0px;
	margin: 0px;
}
#corporate-funding-section .item_box .subject{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 300;
	font-size: 1.8rem;
	color: #000;
	letter-spacing: -1px;
	padding: 0px 0px 10px 0px;
}
#corporate-funding-section .item_box .subject strong{
	font-weight: 900;
}
#corporate-funding-section .item_box ul {
    list-style-type: none; /* Removes the bullet points */
    padding-left: 0; /* Aligns text to the left by removing default list padding */
    margin-left: 0; /* Ensures the list items are flush with the container */
}
#corporate-funding-section .item_box li{
    width: 100%;
    font-size: 0.9rem;
    color: #343434;
    line-height: 1.2;
    word-break: keep-all;
    word-wrap: break-word;
    padding: 5px 0px 5px 20px;
	background-image: url('./assets/images/step/arrow_dot.png');
	background-position: left 11px;
	background-repeat: no-repeat;
	text-align: left;
}
#corporate-funding-section .box {
	padding: 0px;
	margin: 0px;
}
#corporate-funding-section .item_box .t2{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 700;
	font-size: 0.9rem;
	text-align: center;
	padding: 15px 10px;
	margin: 0px 0px 10px 0px;
  border-radius: 5px;
  background-color: #233251;
  color: #FFFFFF;
}

#corporate-funding-section .info{
	padding: 30px 0px;
	margin: 0px;
}
#corporate-funding-section .info li{
	float: left;
	padding: 0px;
	margin: 0px;
}
#corporate-funding-section .info .pic{
	text-align: right;
}
#corporate-funding-section .info .pic img{
	width: 85%;
}
#corporate-funding-section .info .subject{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 900;
	font-size: 1.6rem;
	color: #000;
	padding: 0px 0px 15px 0px;
}
#corporate-funding-section .info .subject span{
	background-image: url('./assets/images/step/line_green.png');
	background-position: left bottom;
	background-repeat: repeat-x;
}
#corporate-funding-section .info .txt{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 500;
	font-size: 0.95rem;
	color: #373737;
	word-break:keep-all;
	word-wrap:break-word;
	text-align: left;
}

@media (max-width: 767px) {
	#corporate-funding-section{
		padding: 30px 10px;
		margin: 0px 0px 0px 0px;
	}
	#corporate-funding-section .tt{
		font-size: 2.2rem;
	}
	#corporate-funding-section .tt2{
		padding: 5px 0px 10px 0px;
	}
	#corporate-funding-section .info{
		padding: 20px 0px;
	}
	#corporate-funding-section .info .pic{
		padding: 10px 0px;
	}
	#corporate-funding-section .info .pic img{
		width: 100%;
	}
	#corporate-funding-section .info .txt{
		font-weight: 700;
		line-height: 1.3;
		color: #615f5f;
		text-align: left;
	}
	#corporate-funding-section .step_blue{
		font-size: 0.7rem;
		padding-top: 20px;
	}
	#corporate-funding-section .step,
	#corporate-funding-section .step_blue strong{
		font-size: 1.0rem;
	}
	#corporate-funding-section .txt1,
	#corporate-funding-section .txt2{
		line-height: 1.7;
	}
	#corporate-funding-section small{
		font-size: 0.8rem;
	}
	#corporate-funding-section .point{
		display: block;
		font-size:0.9rem;
	}
	#corporate-funding-section table th{
		padding: 10px 10px;
	}
	#corporate-funding-section table td{
		padding: 10px 20px;
	}
}

/* ====================================
   창업 준비
   ==================================== */
#startup-section {
    background-color: #ffffff !important; /* 흰색 배경색을 지정합니다 */
    opacity: 1 !important;
    visibility: visible !important;
}

#startup-section .tt{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 900;
	font-size: 2.6rem;
	color: #000;
	text-align: center;
	padding: 10px 0 0 0;
	margin: auto;
}
#startup-section .tt2{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 500;
	font-size: 0.9rem;
	color: #898989;
	text-align: center;
	padding: 5px 0px 30px 0px;
	margin: auto;
}

#startup-section table {
	width: 100%;
}
#startup-section table th{
	color: #fff;
	text-align: center;
	padding: 10px 20px;
	background-color: #233251;
	border-left: 1px solid #FFFFFF;
}
#startup-section table th:first-child{
	border-left: none;
}
#startup-section table td{
	padding: 10px 40px;
	word-break:keep-all;
	word-wrap:break-word;
	border-bottom: 1px solid #eaeaea;
	border-left: 1px solid #eaeaea;
}
#startup-section table td:first-child{
	border-left: none;
}

#startup-section .item_box{
	padding: 10px 0px;
	margin: 0px;
}
#startup-section .item_box .subject{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 300;
	font-size: 1.8rem;
	color: #000;
	letter-spacing: -1px;
	padding: 0px 0px 10px 0px;
}
#startup-section .item_box .subject strong{
	font-weight: 900;
}
#startup-section .item_box ul {
    list-style-type: none; /* Removes the bullet points */
    padding-left: 0; /* Aligns text to the left by removing default list padding */
    margin-left: 0; /* Ensures the list items are flush with the container */
}
#startup-section .item_box li{
    width: 100%;
    font-size: 0.9rem;
    color: #343434;
    line-height: 1.2;
    word-break: keep-all;
    word-wrap: break-word;
    padding: 5px 0px 5px 20px;
	background-image: url('./assets/images/step/arrow_dot.png');
	background-position: left 11px;
	background-repeat: no-repeat;
	text-align: left;
}
#startup-section .box {
	padding: 0px;
	margin: 0px;
}
#startup-section .item_box .t2{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 700;
	font-size: 0.9rem;
	text-align: center;
	padding: 15px 10px;
	margin: 0px 0px 10px 0px;
  border-radius: 5px;
  background-color: #233251;
  color: #FFFFFF;
}

#startup-section .info{
	padding: 30px 0px;
	margin: 0px;
}
#startup-section .info li{
	float: left;
	padding: 0px;
	margin: 0px;
}
#startup-section .info .pic{
	text-align: right;
}
#startup-section .info .pic img{
	width: 85%;
}
#startup-section .info .subject{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 900;
	font-size: 1.6rem;
	color: #000;
	padding: 0px 0px 15px 0px;
}
#startup-section .info .subject span{
	background-image: url('./assets/images/step/line_green.png');
	background-position: left bottom;
	background-repeat: repeat-x;
}
#startup-section .info .txt{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 500;
	font-size: 0.95rem;
	color: #373737;
	word-break:keep-all;
	word-wrap:break-word;
	text-align: left;
}

@media (max-width: 767px) {
	#startup-section{
		padding: 30px 10px;
		margin: 0px 0px 0px 0px;
	}
	#startup-section .tt{
		font-size: 2.2rem;
	}
	#startup-section .tt2{
		padding: 5px 0px 10px 0px;
	}
	#startup-section .info{
		padding: 20px 0px;
	}
	#startup-section .info .pic{
		padding: 10px 0px;
	}
	#startup-section .info .pic img{
		width: 100%;
	}
	#startup-section .info .txt{
		font-weight: 700;
		line-height: 1.3;
		color: #615f5f;
		text-align: left;
	}
	#startup-section .step_blue{
		font-size: 0.7rem;
		padding-top: 20px;
	}
	#startup-section .step,
	#startup-section .step_blue strong{
		font-size: 1.0rem;
	}
	#startup-section .txt1,
	#startup-section .txt2{
		line-height: 1.7;
	}
	#startup-section small{
		font-size: 0.8rem;
	}
	#startup-section .point{
		display: block;
		font-size:0.9rem;
	}
	#startup-section table th{
		padding: 10px 10px;
	}
	#startup-section table td{
		padding: 10px 20px;
	}
	    /* 1. 테이블 컨테이너 및 헤더 숨기기 */
    #startup-section .table-responsive {
        border: none; /* 기본 테이블 테두리 제거 */
    }
    
    #startup-section table.table {
        width: 100%;
        border-collapse: collapse;
        display: block; /* 테이블을 블록 요소처럼 다루어 레이아웃 전환 */
    }

    #startup-section thead {
        display: none; /* 테이블 헤더(종류, 조건, 지원 내용) 숨기기 */
    }

    /* 2. 각 행(row)을 하나의 카드처럼 보이게 설정 */
    #startup-section tbody,
    #startup-section tr {
        display: block; /* tbody와 tr을 세로로 쌓이게 만듦 */
        border: 1px solid #ddd;
        margin-bottom: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    #startup-section tr {
        padding: 10px;
    }

    /* 3. 각 셀(td)을 세로로 쌓이게 하고 헤더 역할을 추가 */
    #startup-section td {
        display: flex; /* 셀 내부를 flex로 만들어 레이블과 내용을 나란히 표시 */
        border: none; /* 셀 테두리 제거 */
        padding: 10px 15px;
        font-size: 1rem;
        border-bottom: 1px dashed #eee; /* 각 데이터 항목 구분선 */
    }
    
    #startup-section td:last-child {
        border-bottom: none; /* 마지막 셀 구분선 제거 */
    }

    /* 4. 가상 요소(::before)를 사용하여 데스크톱 헤더 내용을 레이블로 추가 */
    #startup-section td::before {
        content: attr(data-label); /* HTML에서 data-label 속성값을 가져와 표시 */
        font-weight: bold;
        width: 100px; /* 레이블 너비 고정 */
        min-width: 100px; 
        margin-right: 10px;
        color: #555;
    }
    
    /* 기존 Bootstrap의 table-responsive 클래스가 생성하는 가로 스크롤을 방지 */
    .table-responsive {
        overflow-x: hidden !important; 
    }
}

/* ====================================
   개인회생
   ==================================== */
#policy-revival-section {
    background-color: #ffffff !important; /* 흰색 배경색을 지정합니다 */
    opacity: 1 !important;
    visibility: visible !important;
}

#policy-revival-section{
	padding: 0px 0px;
	margin: -50px 0px 0px 0px;
}
#policy-revival-section .tt{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 900;
	font-size: 2.6rem;
	color: #000;
	text-align: center;
	padding: 0px;
	margin: auto;
}
#policy-revival-section .tt2{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 500;
	font-size: 0.9rem;
	color: #898989;
	text-align: center;
	padding: 5px 0px 30px 0px;
	margin: auto;
}
#policy-revival-section .info{
	padding: 30px 0px;
	margin: 0px;
}
#policy-revival-section .info li{
	float: left;
	padding: 0px;
	margin: 0px;
}
#policy-revival-section .info .pic{
	text-align: right;
}
#policy-revival-section .info .pic img{
	width: 85%;
}
#policy-revival-section .info .subject{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 900;
	font-size: 1.6rem;
	color: #000;
	padding: 0px 0px 15px 0px;
}
#policy-revival-section .info .subject span{
	background-image: url('./assets/images/step/line_green.png');
	background-position: left bottom;
	background-repeat: repeat-x;
}
#policy-revival-section .info .txt{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 500;
	font-size: 0.95rem;
	color: #373737;
	word-break:keep-all;
	word-wrap:break-word;
	text-align: left;
}
#policy-revival-section .item_box{
	padding: 30px 0px;
	margin: 0px;
}
#policy-revival-section .item_box .subject{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 300;
	font-size: 1.8rem;
	color: #000;
	letter-spacing: -1px;
	padding: 0px 0px 10px 0px;
}
#policy-revival-section .item_box .subject strong{
	font-weight: 900;
}
#policy-revival-section .item_box ul {
    list-style-type: none; /* Removes the bullet points */
    padding-left: 0; /* Aligns text to the left by removing default list padding */
    margin-left: 0; /* Ensures the list items are flush with the container */
}
#policy-revival-section .item_box li{
    width: 100%;
    font-size: 0.9rem;
    color: #343434;
    line-height: 1.2;
    word-break: keep-all;
    word-wrap: break-word;
    padding: 5px 0px 5px 20px;
	background-image: url('./assets/images/step/arrow_dot.png');
	background-position: left 11px;
	background-repeat: no-repeat;
	text-align: left;
}
#policy-revival-section .box {
	padding: 0px;
	margin: 0px;
}
#policy-revival-section .item_box .t2{
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 700;
	font-size: 0.9rem;
	text-align: center;
	padding: 15px 10px;
	margin: 0px 0px 10px 0px;
  border-radius: 5px;
  background-color: #233251;
  color: #FFFFFF;
}

#policy-revival-section .step_arrow_right{
	position: relative;
	text-align: center;
	vertical-align: bottom !important;
	background-image: url('./assets/images/step/step_arrow_right.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding: 0px;
	margin: 0px;
}
#policy-revival-section .step_arrow_right span{
	position: absolute;
	width: 100%;
	left: 0px;
	bottom: 10px;
	font-size: 0.7rem;
	text-align: center;
}
#policy-revival-section .step_arrow_down{
	height: 30px;
	vertical-align: bottom !important;
	background-image: url('./assets/images/step/step_arrow_down.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	padding: 0px;
	margin: 0px;
}
#policy-revival-section .step{
	height: 80px;
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 700;
	font-size: 1.4rem;
	color: #233251;
	line-height: 60px;
	text-align: center;
	word-break:keep-all;
	word-wrap:break-word;
	border-radius: 40px;
	border: 1px solid #233251;
	padding: 10px 0px;
}
#policy-revival-section .step_blue{
	height: 80px;
	font-family:'Noto Sans KR','AppleSDGothicNeo-Regular','Malgun Gothic','맑은 고딕','dotum','돋움','sans-serif';
	font-weight: 300;
	color: rgba(255, 255, 255, .9);
	text-align: center;
	word-break:keep-all;
	word-wrap:break-word;
	border-radius: 40px;
	background-color: #233251;
	padding: 10px 0px;
}
#policy-revival-section .step_blue strong{
	font-weight: 700;
	font-size: 1.4rem;
	color: rgba(255, 255, 255, 1);
}
#policy-revival-section .txt1{
	line-height: 1.3;
}
#policy-revival-section .point{
	color: red;
	font-size:1.0rem;
}
#policy-revival-section small{
	font-weight: 400;
	font-size: 0.95rem;
}
#policy-revival-section table {
	width: 100%;
}
#policy-revival-section table th{
	color: #fff;
	text-align: center;
	padding: 10px 20px;
	background-color: #233251;
	border-left: 1px solid #FFFFFF;
}
#policy-revival-section table th:first-child{
	border-left: none;
}
#policy-revival-section table td{
	padding: 10px 40px;
	word-break:keep-all;
	word-wrap:break-word;
	border-bottom: 1px solid #eaeaea;
	border-left: 1px solid #eaeaea;
}
#policy-revival-section table td:first-child{
	border-left: none;
}
@media (max-width: 767px) {
	#policy-revival-section{
		padding: 30px 10px;
		margin: 0px 0px 0px 0px;
	}
	#policy-revival-section .tt{
		font-size: 2.2rem;
	}
	#policy-revival-section .tt2{
		padding: 5px 0px 10px 0px;
	}
	#policy-revival-section .info{
		padding: 20px 0px;
	}
	#policy-revival-section .info li.pic{
		padding: 10px 0px;
	}
	#policy-revival-section .info li.pic img{
		width: 100%;
	}
	#policy-revival-section .info .txt{
		font-weight: 700;
		line-height: 1.3;
		color: #615f5f;
	}
	#policy-revival-section .step_blue{
		font-size: 0.7rem;
		padding-top: 20px;
	}
	#policy-revival-section .step,
	#policy-revival-section .step_blue strong{
		font-size: 1.0rem;
	}
	#policy-revival-section .txt1,
	#policy-revival-section .txt2{
		line-height: 1.7;
	}
	#policy-revival-section small{
		font-size: 0.8rem;
	}
	#policy-revival-section .point{
		display: block;
		font-size:0.9rem;
	}
	#policy-revival-section table th{
		padding: 10px 10px;
	}
	#policy-revival-section table td{
		padding: 10px 20px;
	}
}

/* ====================================
   개인 정책자금
   ==================================== */

#policy-funding-section {
    background-color: #ffffff !important; /* 흰색 배경색을 지정합니다 */
	color: #000000
}

#policy-funding-section .content {
    text-align: left;
}

#policy-funding-section .table_scroll {
    overflow-x: auto;
    max-width: 1000px;
    margin: 0 auto;
}
#policy-funding-section .cont_title {
    max-width: 1000px;
    margin: 0 auto;
}

#policy-funding-section .p-table {
    max-width: 100%;
    /* 필요에 따라 추가적인 테이블 스타일을 여기에 넣을 수 있습니다. */
}

#policy-funding-section .cont_title h2 {  
  font-size: 24px;  
  font-weight: bold;  
  color: var(--bs-dark);  
  margin-bottom: 20px;  
}

#policy-funding-section .cont_title span {  
  color: var(--bs-secondary);  
}

#policy-funding-section .ul_type01 {  
  list-style: none;  
  padding-left: 0;  
  margin-bottom: 20px;  
}

#policy-funding-section .ul_type01 li {  
  position: relative;  
  padding-left: 1.5em;  
  margin-bottom: 10px;  
}

#policy-funding-section .ul_type01 li:before {  
  content: '·';  
  position: absolute;  
  left: 0;  
  color: var(--bs-dark);  
}

#policy-funding-section .table_scroll {  
  overflow-x: auto;  
  margin-bottom: 20px;  
}

#policy-funding-section .p-table {  
  width: 100%;  
  border-collapse: collapse;  
  border: 1px solid var(--bs-gray-300);  
}

#policy-funding-section .p-table th, .p-table td {
  padding: 10px;
  border: 1px solid var(--bs-gray-300);
  text-align: left;
}

#policy-funding-section .p-table thead th {
  background-color: var(--bs-primary);
  font-weight: bold;
  color: #fff;
}

#policy-funding-section .p-table tbody tr:nth-child(even) {
  background-color: var(--bs-light);
}



/* ====================================
   유튜브
   ==================================== */
.youtube-section {
  padding: 40px 0;
  background-color: #233251;
}

.youtube-section h2 {
  margin-bottom: 30px;
  font-size: 2rem;
  color: #FFFFFF;
}

.youtube-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.youtube-slider {
  display: flex;
  gap: 20px;
  animation: slide-left 30s linear infinite;
}

.youtube-item {
 flex: 0 0 300px;
 height: 180px;
 border-radius: 10px;
 overflow: hidden; /* 이미지나 내용이 넘치는 것을 숨김 */
 background: #000;
 box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  /* position: relative; (필요한 경우) */
}

/* 🚀 새로 추가할 썸네일 이미지 스타일 */
.youtube-item img {
 /* 이미지가 부모 요소(.youtube-item)의 크기를 꽉 채우도록 설정 */
 width: 100%;
 height: 100%;
    
 /* 비율을 유지하면서 공간을 채우고, 넘치는 부분은 잘라냄 */
 object-fit: cover; 
}

.youtube-item iframe {
 width: 100%;
 height: 100%;
 display: block;
}

@keyframes slide-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.youtube-slider:hover {
  animation-play-state: paused;
}

/* 🎬 유튜브 모달 전체 배경 */
#youtube-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  justify-content: center;
  align-items: center;
}

/* 🎞️ 모달 내부 박스 */
.youtube-modal-content {
  position: relative;
  width: 80%;
  max-width: 700px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding-bottom: 20px;
  animation: fadeIn 0.4s ease;
}

/* ❌ 닫기(X) 버튼 */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 38px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  z-index: 10;
}
.close-btn:hover {
  background-color: #ff4d4d;
  color: #fff;
}

/* 🎥 영상 영역 */
#youtube-iframe {
  width: 100%;
  height: 400px;
}

/* 📱 모바일 대응 */
@media (max-width: 768px) {
  .youtube-modal-content {
    width: 90%;
    max-width: 95%;
  }
  #youtube-iframe {
    height: 220px;
  }
}

/* ⏹ 하단 닫기 버튼 */
.modal-footer {
  margin-top: 10px;
  text-align: center;
}
.modal-close-btn {
  background-color: #233251;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}
.modal-close-btn:hover {
  background-color: #2f446e;
}

/* ✨ 등장 애니메이션 */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ====================================
   전문가 
   ==================================== */
#experts h2 {
	color:#FFFFFF;
}

/* 전문가 섹션 그리드 */
#experts .experts-grid {
    display: grid;
    /* 4개 카드가 나란히 나오도록, 필요에 따라 반응형으로 조절 */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 전문가 카드 스타일 */
#experts .expert-card {
    position: relative; /* 자식 요소의 위치 기준이 됩니다. */
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease-in-out, border 0.3s ease-in-out;
    height: 350px; /* 카드의 높이를 고정하여 이미지가 꽉 차게 만듭니다. */
    border: 3px solid transparent; /* 기본 투명 테두리 */
}

#experts .expert-card:hover {
    transform: translateY(-10px);
    border-color: #F4A261; /* 호버 시 눈에 띄는 주황색 테두리 */
}

#experts .expert-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 카드 영역을 꽉 채우도록 설정 */
    display: block;
    filter: brightness(90%); /* 이미지를 어둡게 만드는 효과 */
    transition: filter 0.3s ease-in-out;
    position: absolute; /* 텍스트 아래에 깔리도록 절대 위치 설정 */
    top: 0;
    left: 0;
	background-color: var(--bs-orange); /* #FFA07A, #F4A261*/
}

#experts .expert-card:hover img {
    filter: brightness(100%); /* 호버 시 밝게 */
}

#experts .expert-card .card-info {
    position: absolute;
    bottom: 20px;
    right: 20px; /* 오른쪽 아래에 배치 */
    color: #fff; /* 흰색 텍스트 */
    z-index: 10;
    text-align: right; /* 텍스트를 오른쪽 정렬 */
}

#experts .expert-card .card-info h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

#experts .expert-card .card-info p {
    margin: 5px 0 0;
    font-size: 1rem;
    font-weight: 400;
}
/* ====================================
    전문가 소개 섹션 (#experts) 스타일 수정
    ==================================== */
#experts {
    /* 1. 배경색을 흰색으로 변경 */
    background-color: #ffffff; 
    
    /* 2. 섹션 내 기본 폰트 색상을 검정색으로 변경 */
    color: #333333; /* 완전 검정색 (#000000) 대신 부드러운 검정색을 권장합니다. */
}

/* 3. h2 제목의 폰트 색상을 검정색으로 명시적으로 지정 */
#experts h2 {
    color: #000000; 
    font-size: 2.5rem; /* 필요하다면 크기 조정 */
    margin-bottom: 20px;
}

/* 4. h2 제목 안의 하이라이트 부분 (선택 사항) */
#experts h2 .highlight {
    color: #FFFFFF; /* 하이라이트 부분만 원래의 청남색으로 유지하여 포인트를 줄 수도 있습니다. */
    font-weight: bold;
}
/* ====================================
   전문가 섹션 - 도입 이미지 스타일
   ==================================== */
.experts-intro-image {
    text-align: center; /* 이미지를 중앙에 정렬 */
    margin: 40px auto; /* 상하 여백 40px, 좌우 자동 마진으로 중앙 정렬 */
    max-width: 1100px; /* 이미지 컨테이너의 최대 너비 */
    padding: 0 15px; /* 모바일 대응을 위한 좌우 패딩 */
}

.experts-intro-image img {
    display: block; /* 이미지 자체를 블록 요소로 만들어 margin: auto 적용 가능하게 함 */
    max-width: 100%; /* 부모(experts-intro-image) 너비 1100px에 맞추되, 그보다 작으면 100% */
    height: auto; /* 이미지의 원래 비율을 유지하면서 높이 자동 조절 */
    border-radius: 10px; /* (선택 사항) 이미지 모서리 둥글게 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* (선택 사항) 그림자 효과 */
}

/* ====================================
   반응형: 모바일 환경에서 패딩 조정 (선택 사항)
   ==================================== */
@media screen and (max-width: 768px) {
    #experts .experts-intro-image {
        margin: 30px auto; /* 모바일에서 상하 여백 줄이기 */
        padding: 0 10px; /* 모바일에서 좌우 패딩 줄이기 */
    }
}

/* ====================================\
   전문가 모달 팝업 스타일
   ==================================== */
/* ====================================
   1. 팝업 모달 컨테이너 (전체 화면 오버레이)
   ==================================== */
.expert-modal-container {
    /* JavaScript로 토글되므로, 초기에는 none으로 설정하고,
       Flexbox를 중앙 정렬에 사용하기 위해 다시 display: flex를 정의합니다. */
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 중앙 정렬을 위한 Flexbox */
    justify-content: center !important; 
    align-items: center !important; 

    background-color: rgba(0, 0, 0, 0.8); /* 어두운 배경 오버레이 */
    z-index: 9999; /* 다른 모든 요소 위에 표시 */
    overflow-y: auto; /* 모달 내용이 길어질 경우 스크롤 가능하게 설정 */
}

/* ====================================
   2. 팝업 모달 콘텐츠 박스 (실제 팝업 창)
   ==================================== */
.expert-modal-content {
    background-color: #233251 !important; /* 군청색 배경 */
    border: 3px solid #00BCD4; /* 청록색 테두리 */
    border-radius: 10px;
    
    width: 90%; /* 모바일 대응을 위해 너비는 90%로 유연하게 설정 */
    max-width: 350px; /* 최대 너비는 350px로 제한 (원래 300px보다 약간 키움) */
    height: auto; /* 내용에 따라 높이 자동 조절 */
    max-height: 90vh; /* 화면 높이를 넘지 않도록 제한 */
    
    position: relative;
    padding: 0;
    overflow: hidden;
    
    /* 화면 진입 애니메이션 (선택 사항) */
    transform: scale(1);
    transition: transform 0.3s ease-out;
}

/* 닫기 버튼 */
.expert-modal-content .close {
    color: #000; /* 색상 명확하게 변경 */
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    z-index: 20;
    background-color: white;
    padding: 0 8px; /* 패딩을 약간 늘려 클릭 영역 확보 */
    border-radius: 50%; /* 원형 버튼 */
    line-height: 1;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s;
}

.expert-modal-content .close:hover,
.expert-modal-content .close:focus {
    background-color: #eee;
    color: #333;
}

/* ====================================
   3. 모달 내부 요소
   ==================================== */

/* 모달을 꽉 채우는 배경 이미지 컨테이너 */
.expert-modal-content .modal-body {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 450px; /* 최소 높이 지정 (원래 팝업 높이) */
    
    background-size: cover;
    background-position: center;
}

/* 이미지 위에 겹쳐서 보일 텍스트 오버레이 */
.expert-modal-content .modal-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 흰색 배경과 청록색 테두리 박스 */
.expert-modal-content .modal-info-box {
    background-color: #fff;
    border: 2px solid #00BCD4; /* 청록색 테두리 */
    border-radius: 8px;
    padding: 15px; /* 내부 패딩 증가 */
    color: #2C3E50;
}

.expert-modal-content .modal-info-box h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #233251; /* 전문가 이름 색상 강조 */
}

.expert-modal-content .modal-info-box p {
    margin: 5px 0 0;
    font-size: 0.95rem; /* 크기 약간 조정 */
    color: #588157; /* 전문 분야 색상 */
}

/* 전문가 상세 설명 */
.expert-modal-content .modal-info-box .expert-description {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd; /* 설명 구분을 위한 점선 추가 */
    line-height: 1.5;
    font-size: 0.9rem;
    color: #333;
    max-height: 100px; /* 높이 약간 줄임 */
    overflow-y: auto; /* 내용이 길면 스크롤 */
    /* 모바일 환경에서만 작동하는 스크롤바 스타일링 (선택 사항) */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
/* Chrome, Safari and Opera에서 스크롤바 숨기기 */
.expert-modal-content .modal-info-box .expert-description::-webkit-scrollbar {
    display: none;
}
/* ====================================
   기타 콘텐츠 스타일
   ==================================== */
#go-to-top-btn {
    display: none; /* 초기에는 버튼을 숨깁니다 */
    position: fixed; /* 스크롤에 상관없이 화면에 고정 */
    bottom: 20px;
    right: 20px;
    z-index: 99; /* 다른 요소보다 위에 표시 */
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #576076; /* 배경색 */
    color: #fff; /* 글자색 */
    border-radius: 50%; /* 둥근 원 모양 */
    text-decoration: none; /* 밑줄 제거 */
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

#go-to-top-btn:hover {
    transform: scale(1.1); /* 호버 시 약간 커지게 */
    background-color: #233251;
}

/* ===============================
   📄 약관보기 모달 (privacy-modal)
   =============================== */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: auto; /* ✅ 전체 스크롤 가능 */
}

/* 모달 본문 */
.modal-content {
  background-color: #ffffff;
  width: 450px;
  max-width: 90%;
  margin: 80px auto;
  border-radius: 12px;
  border: 3px solid #233251;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  color: #233251;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 0.9rem; /* ✅ 폰트 크기 살짝 줄임 */
  line-height: 1.6;

  /* ✅ 내부 스크롤 영역 확보 */
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 스크롤이 생기는 본문 컨텐츠 */
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 25px;
}

/* 제목 */
.modal-content h3 {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #233251;
  color: #233251;
}

/* 닫기 버튼이 항상 아래 고정되도록 */
.modal-footer {
  border-top: 1px solid #e0e0e0;
  padding: 12px 0;
  text-align: center;
  background-color: #f8f9fa;
}

/* 닫기 버튼 */
.modal-footer button {
  background-color: #233251;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 25px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.modal-footer button:hover {
  background-color: #344E41;
}

/* 반응형 */
@media (max-width: 480px) {
  .modal-content {
    width: 90%;
    font-size: 0.85rem;
    margin: 60px auto;
    max-height: 85vh;
  }
}
/* 로딩 오버레이 */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1050;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: .75s linear infinite spinner-border;
}

@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

/* ====================================
   Bootstrap 유틸리티 클래스 (재정의)
   ==================================== */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col-md-8, .col-md-4 {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .mx-auto { margin-left: auto !important; margin-right: auto !important; }
}

/* Spacing */
.m-0 { margin: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-6 { margin-top: 4.5rem !important; }
.mt-7 { margin-top: 6rem !important; }
.p-4 { padding: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.w-50 { width: 50% !important; }
.w-100 { width: 100% !important; }


/* 개인정보 레이어팝업 테두리 및 닫기 버튼 스타일 수정 */
#personal-info-modal .modal-content {
    max-width: 600px;
    padding: 30px;
    border: 2px solid #233251; /* 테두리 색상 녹색으로 변경 */
}

#personal-info-modal .modal-title {
    text-align: left;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

#personal-info-modal .modal-body ul {
    list-style: none; /* 글머리 기호 제거 */
    padding-left: 0; /* 좌측 패딩 제거 */
    margin-bottom: 20px;
}

#personal-info-modal .modal-body ul li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* 개인정보 레이어팝업 닫기 버튼 스타일 */
#personal-info-modal .close-btn {
    color: #fff; /* 글자색을 흰색으로 변경 */
    background-color: var(--bs-orange); /* 배경색을 주황색으로 변경 */
    font-size: 35px;
    font-weight: bold;
    position: absolute;
    top: -15px;
    right: -15px;
    cursor: pointer;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    z-index: 1010;
}

/* 결과 섹션 */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.result-card {
  background: #fff !important;
  color: #000000 !important;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1),
              inset 0 1px 1px #fff,  /* 상단 및 좌측 하이라이트 */
              inset 0 -1px 1px rgba(0,0,0,0.1); /* 하단 및 우측 그림자 */
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
}

.result-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25), /* 더 강한 그림자 효과 */
              inset 0 1px 1px #fff,
              inset 0 -1px 1px rgba(0,0,0,0.1);
}

.result-card img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-bottom: 10px;
}

.result-card .card-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* PC 기본 (마우스 아이콘) */
.result-card .card-icon {
  background-image: url('./assets/images/icons/mouse-icon.png'); /* 🖱️ 실제 경로로 수정 */
}

/* hover 시 살짝 강조 */
.result-card:hover .card-icon {
  opacity: 1;
}

/* 모바일(768px 이하)에서는 손가락 아이콘으로 변경 */
@media (max-width: 768px) {
  .result-card .card-icon {
    background-image: url('./assets/images/icons/finger-icon.png'); /* ☝️ 실제 경로로 수정 */
    width: 28px;
    height: 28px;
    bottom: 8px;
    right: 8px;
  }
}


.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25), /* 더 강한 그림자 효과 */
              inset 0 1px 1px #fff,
              inset 0 -1px 1px rgba(0,0,0,0.1);
}

.card img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-bottom: 10px;
}

.card .card-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* PC 기본 (마우스 아이콘) */
.card .card-icon {
  background-image: url('./assets/images/icons/mouse-icon.png'); /* 🖱️ 실제 경로로 수정 */
}

/* hover 시 살짝 강조 */
.card:hover .card-icon {
  opacity: 1;
}

/* 모바일(768px 이하)에서는 손가락 아이콘으로 변경 */
@media (max-width: 768px) {
  .card .card-icon {
    background-image: url('./assets/images/icons/finger-icon.png'); /* ☝️ 실제 경로로 수정 */
    width: 28px;
    height: 28px;
    bottom: 8px;
    right: 8px;
  }
}


/* ====================================
   컴포넌트 및 요소
   ==================================== */
.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-primary {
  color: #fff;
  background-color: var(--bs-orange);
  border-color: var(--bs-orange);
}

.btn-primary:hover {
  background-color: #E0481F;
  border-color: #CC411D;
}

.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

.card-img-top {
  border-radius: 8px 8px 0 0;
  height: auto;
  object-fit: cover;
}

.card-body {
  padding: 1rem;
}

.form-group {
  margin-bottom: 1rem;
  text-align: left;
}

.form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  appearance: none;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* ================================================= */
/* 1. 메인 컨테이너 및 배경 설정 (요청 사항 반영) */
/* ================================================= */

/* 섹션 전체 배경 설정 및 텍스트 가독성 확보 */
.review-page-container {
    background-color: #233251; /* 요청된 배경색 */
    color: #ffffff; /* 기본 텍스트 색상 (밝은 색) */
    padding: 40px 0; 
}

/* 콘텐츠 최대 너비 (1000px) 및 중앙 정렬 */
.review-content-wrapper { 
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px; 
}

/* 제목 스타일 (배경색에 맞춰 강조) */
.review-page-container h2,
.review-page-container h3 {
    color: #f7d354; /* 강조색 (밝은 노란색/금색) */
    text-align: center;
    margin-bottom: 30px;
    font-weight: 700;
}

/* =======================================
 * 2. View 전환을 위한 핵심 CSS
 * ======================================= */
.review-view-section {
    display: none; /* 기본적으로 모든 섹션 숨김 */
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.05); /* 약간 투명한 흰색 (어두운 배경에 맞춤) */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 밝은 테두리 */
    border-radius: 8px;
    min-height: 400px; 
    margin-bottom: 50px; /* 요청된 하단 마진 50px */
}

.review-view-section.active {
    display: block; 
}


/* =======================================
 * 3. 목록 스타일 및 3단 가로 배치 (View 1)
 * ======================================= */

/* 3단 가로 배치를 위한 Flex 컨테이너 */
.review-list-group-wrapper {
    display: flex; /* 가로 배치 활성화 */
    gap: 20px; /* 그룹 간 간격 */
    margin-top: 30px;
    flex-wrap: wrap; /* 반응형 대비 */
    justify-content: space-between; /* 그룹들이 양쪽으로 잘 퍼지도록 */
}

/* 개별 카테고리 그룹 스타일 */
.category-review-group {
    /* 3분의 1 크기 - flex-grow: 1, flex-shrink: 1, basis 계산 */
    flex: 1 1 calc(33.333% - 14px); 
    min-width: 280px; /* 최소 너비 설정 */
    box-sizing: border-box;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03); /* 그룹별 배경 */
    border-radius: 6px;
}

/* 그룹별 제목 스타일 */
.category-review-group .category-group-title {
    color: #f7d354; /* 강조색으로 제목 통일 */
    font-size: 1.2em;
    text-align: center;
    margin-top: 0; /* 그룹 시작 시 상단 마진 제거 */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #5ac8fa; /* 파란색 구분선 */
    font-weight: 700;
}

.review-list {
    list-style: none;
    padding: 0;
}

.review-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    padding: 10px 0; 
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1); /* 점선 구분선 */
    font-size: 0.95em;
}
.review-item:last-child {
    border-bottom: none;
}

/* 카테고리 태그 - 요청에 따라 View 1에서 숨김 */
.review-item .review-category-tag {
    display: none; 
}
/* 전체 목록 (View 2)에서는 유지할 수 있도록 예외처리: */
#all-reviews .review-item .review-category-tag {
    display: inline;
}


/* 후기 제목 링크 */
.review-link {
    flex-grow: 1;
    margin-right: 10px;
    font-weight: 500;
    text-decoration: none;
    color: #ffffff; 
    transition: color 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 3단 배치에서는 제목이 길면 줄바꿈을 허용하여 텍스트 손실을 줄이는 것이 좋습니다. */
    white-space: normal; 
    word-break: break-word; 
	text-align: left;
}
.review-link:hover {
    color: #5ac8fa; 
}

/* 날짜 */
.review-date {
    font-size: 0.8em; 
    color: #cccccc; 
    flex-shrink: 0;
    text-align: right;
    min-width: 60px; /* 날짜가 최소한의 너비를 가지도록 */
}


/* =======================================
 * 4. 버튼 스타일 (기존 코드 유지)
 * ======================================= */
.review-more-area {
    text-align: center; 
    margin-top: 40px;
}

.review-action-btn {
    background-color: #f7d354;
    color: #233251; 
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    transition: background 0.2s;
}

.review-action-btn:hover:not(:disabled) {
    background: #ffe082;
}

/* 뒤로가기/목록으로 버튼 */
#all-reviews .back-to-recent-btn,
#review-detail #back-to-list-btn {
    background: none;
    border: 1px solid #f7d354;
    color: #f7d354;
    margin-bottom: 20px;
    padding: 5px 15px;
    font-weight: 500;
    display: inline-block;
    float: left; 
}

/* =======================================
 * 5. 상세 보기 섹션 스타일 (기존 코드 유지)
 * ======================================= */
#review-detail {
    clear: both; 
}

#review-detail h3 {
    border-bottom: 2px solid #f7d354;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.8em;
    color: #ffffff; 
    text-align: left; 
    clear: both;
    padding-top: 40px; 
}

.modal-views-info {
    font-size: 0.9em;
    color: #999999; 
    margin-bottom: 10px;
    text-align: right; 
}

.review-media-container {
    margin: 30px 0;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; 
    border-radius: 8px; 
    overflow: hidden;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; 
}

.review-content-text {
    line-height: 1.7;
    color: #e0e0e0; 
    margin-top: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 5px;
    font-size: 1em;
}

/* =======================================
 * 6. 반응형 디자인 (Media Query)
 * ======================================= */
@media (max-width: 900px) {
    /* 900px 이하에서는 3단 가로 배치를 해제하고 세로로 배치 */
    .review-list-group-wrapper {
        flex-direction: column; 
    }
    .category-review-group {
        flex: 1 1 100%;
        margin-bottom: 20px;
        min-width: auto;
    }
    /* 상세 목록 제목 처리 */
    .review-item {
        flex-wrap: wrap;
    }
    .review-link {
        order: 1; /* 제목을 위로 */
        width: 100%;
        margin-top: 5px;
    }
    .review-date {
        order: 2; /* 날짜를 아래 줄로 이동 (선택 사항) */
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .review-category-tag, .review-date {
        font-size: 13px;
    }
	#expert p {
		font-size: 1rem !important;
	}
}

/* 페이지네이션 버튼을 가로 한 줄에 배치하고 가운데 정렬 */
#pagination-controls {
    /* Flexbox를 사용하여 내부 요소(버튼들)를 가로(row)로 배치 */
    display: flex;
    /* 버튼들을 가운데 정렬 */
    justify-content: center;
    /* 버튼 사이의 간격을 지정 (선택 사항) */
    gap: 5px; 
}

/* ✅ 전문가 섹션 하단 안내 문구 스타일 */
#expert p {
  font-size: 1.9rem;       /* ✅ 폰트 크기 키움 (약 21px 정도) */
  font-weight: 700;        /* ✅ 굵게 표시 */
  color: #ffffff;          /* ✅ 섹션 배경(#233251)에 대비되도록 흰색 글씨 */
  text-align: center;      /* ✅ 중앙 정렬 */
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.6;
}

/* 🔹 솔루션 바로가기 버튼 */
.solution-link {
  background-color: #233251;
  color: #ffffff !important;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
  margin-left: 20px; /* 로고와의 간격 */
  white-space: nowrap; /* ✅ 텍스트 줄바꿈 방지 */
}

.solution-link:hover {
  background-color: #2f446e;
  color: #fff;
  text-decoration: none;
}

/* ✅ 모바일에서도 나란히 유지 */
@media (max-width: 768px) {
  #mainNav .container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 왼쪽 정렬 */
  }
  .navbar-brand img {
    height: 32px; /* 작은 화면에서 로고 크기 축소 */
  }
  .solution-link {
    margin-left: 12px;
    padding: 6px 12px;
    font-size: 14px;
  }
}

/* 🔹 SVG 텍스트 (모바일 전용) */
.svg-text {
  display: none;
}

.solution-svg {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .svg-non-text {
    display: none !important;
  }
  .svg-text {
    display: block !important;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  .svg-text svg {
    width: 100%;
    height: auto;
  }

  .solution-svg {
    margin: 0 auto;
  }
  
   /* h2 기본 마진 제거 + 원하는 간격 부여 */
  .header-content-container h2 {
    margin: 0 0 20px !important;
  }

  /* 컨테이너 자체 여백 리셋 (혹시 padding/margin이 있었으면 제거) */
  .header-content-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 다음 블록에서 밀어내는 상단 마진 제거 (여백 원인 1순위) */
  .result-cards-container,
  .result-cards-container > .result-section:first-child,
  .section-subtitle-container:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 결과 문장 영역 자체의 상/하 여백도 축소 */
  .section-subtitle-container {
    margin: 0 0 20px !important;
    padding: 10px 0 !important;
	width: 100vw !important;  /* 브라우저 가로폭 전체 */
    max-width: 100vw !important; /* 최대 너비 제한 해제 */
  }

  /* SVG 타이틀 사용 시 추가 여백 제거 */
  .header-content-container .svg-text {
    margin: 0 !important;
  }
}