/* ==============================================
   기본 초기화
============================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

/* ==============================================
   바디 및 배경
============================================== */

body {
  font-family: sans-serif;
  background-image: url("assets/bgpattern.png"); 		/* 이미지 경로 */
  background-repeat: no-repeat;
  background-size: cover;       					/* 또는 contain */
  background-position: center;
  background-attachment: fixed;                 			/* 스크롤 시 고정 */
  color: white;                                 			/* 전체 글씨 흰색 (선택) */
  /* background-repeat: no-repeat; */
  /* background-position: center center; */
  /* background-attachment: fixed; */
  /* background-size: contain; */
}

/* ==============================================
   레이아웃 전체 구조
============================================== */

.wrapper {
  
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.grid {
  display: flex;                             /* Flexbox 시작 → 기본 가로 정렬 */
  flex-wrap: wrap;          		     /* 줄 바꿈 허용 */
  justify-content: center;      	     /* 좌우 여백을 포함해 아이템들 사이를 균등하게 정렬 */
  gap: 10px;                /* 아이템 간 간격 */
  padding: 10px;                          /* 위아래 40px, 좌우 20px 여백 */
  flex-grow: 1;                            /* 부모가 공간을 줄 때 비율에 따라 늘어남 (조건부로 작동) */

}

/* ==============================================
   카드 스타일
============================================== */

.card {
  width: 100%;  /* 120%와 비슷한 효과 */
  align-items: center !important;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0);
  height: 230px;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  max-width: none;  /* 너비 제한 없음 */
}

/* ==============================================
   카드 이미지 설정
============================================== */
.card-image {
    width: 100%;
  height: 300px;    			 	/* 카드 글씨 박스 높이 위치 조정 및 통일 */
  /* object-fit: contain; 				이미지가 찌그러지지 않고 최대한 맞춤 contain : 이미지 전체가 보이도록 비율 유지하며 맞춤 */
 object-fit: cover; 				/* 잘 맞도록 자르기 cover : 이미지를 화면에 꽉 채우도록 비율 유지하며 맞춤 (일부 잘릴 수 있음)*/
  /* object-position: 50% 20%;            /* 이미지의 위쪽을 기준으로 맞춤 */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-radius: 10px; 
  margin: 10px 0; 
  display: block; 
  						/* height: auto; 비율 유지 (기본) */
  						/* aspect-ratio: 16 / 9;      또는 4/3, 필요 시 */
  						/* max-width: 300px;  너비 제한 */
}


/* ==============================================
   카드 내부 텍스트 박스
============================================== */

.card-text {

  width: 100%;
  text-align: center;
  margin-top: auto;
  background-color: rgba(0, 0, 0, 0.3); /* 검은색 반투명 (투명도 50%) */
  padding: 10px 10px;                   /* 안쪽 여백 */
  border-radius: 8px;                    /* 모서리 둥글게 */
  /* color: blue; */
  /* margin-top: 40px; 80px → 40px으로 줄이면 상단 공간 줄어듬 */
  /* text-align: center;  텍스트 중앙 정렬 (원하는 경우) */
  /* margin-bottom: 10px; */
  /* flex-grow: 1;  		✅ 공간 균일하게 채우기 */
}

.card-text h2 {
  margin-bottom: 10px;  /* 메인제목 아래 여백 조정 줄이기 또는 늘리기 */
  color: white;	      /* HALCON 협의등 글씨색 변경 */	
  font-size: 21px;  /* 원하는 크기로 조절 */
}

.card-text ul {
  margin-top: 100px;      /* 목록 위 여백 줄이기 */
  list-style-type: none;    /* ● 제거 */
  padding-left: 10px;         /* 왼쪽 여백 제거 */
  margin: 0;                 /* 필요 시 여백도 제거 */
}

/* ==============================================
   링크 스타일 및 hover 효과
============================================== */

.card-text a {
  text-decoration: none;  /* 카드 글씨 밑줄 제거 */
  color: #58A899;  /* 예: 진한 파랑 (원하는 색상으로 변경 가능//검정색은 #000000, 회색은 #444, 하늘색은 #3399ff) */
  font-weight: bold;
  transition: all 0.2s ease; /* 부드러운 전환 효과 */
}

.card-text a:hover {
  color: #3399ff;            /* 마우스 선택 시 글씨 색상 변경올리면 오렌지색 */
  font-weight: bold;         /* 굵게 */
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);  /* 그림자 효과 */
  transform: scale(1.05);    /* 확대 효과 */
}

/* ==============================================
   섹션(바탕화면 다음 박스) 전체 레이아웃 설정
============================================== */

section {                                                          /* 바탕화면 앞의 기본 박스 구조 */
  background: rgba(255, 255, 255, 0.6) !important;                        /* 배경 투명 (흰색+0% 투명도) */
  padding: 0;                                                     /* 안쪽 여백 */
  border-radius: 10px;                                          /* 앞 기본 박스 모서리 둥글게 */
  width: 100%;                                                  /* height: 450px; 전체 CARD 박스(이미지포함) 길이 조절) */
  max-width: 350px; 						   /* 최대 너비도 제한 없이 */
  min-height: 400px;                                           /* ✅ 카드(이미지삽입) 최소 높이 지정 */
  height: auto;                                                  /* ✅ 자동 높이 */
  box-shadow: none;			                 /* 그림자 효과 (입체감) 0 4px 12px rgba(0,0,0,0.15) */
  transition: transform 0.3s ease;                             /* 호버 애니메이션 대비 부드러운 전환 */
  display: flex;                                                    /* 내부 요소 정렬용 Flex */
  flex-direction: column;                                        /* 위→아래 수직 정렬 */
  align-items: center;                                            /* 가운데 정렬 */
}

section:hover {
  transform: translateY(-10px);                                  /* 섹션 선택 시 -5px (위로 5픽셀 움직임) */
}

section img {
  width: 100%;			/* 부모 요소(section) 너비에 맞춰 이미지 가로 크기 100%로 맞춤 */				
  /* max-width: auto;		   최대 가로 크기를 300px로 제한 */	        
                                        /* max-height: 180px; 이미지 최대 높이 180px로 제한하는 옵션 */
  height: 300px;			/* 이미지 세로 크기를 자동으로 비율 맞춤 */
  border-radius: 16px;     		/* ✅ 모서리 둥글게 */
  object-fit: cover;			/* 이미지가 컨테이너 크기에 맞게 잘리고 채워짐 (비율 유지하면서 꽉 채움) */
  /* margin-top: 10px;		   이미지 위쪽에 10px 여백 */  
  /* margin-bottom: 10px;		   이미지 아래쪽에 10px 여백 */
  display: block;         		/* 공백 제거용 */
  
}

/* ==============================================
   카드 컨테이너(섹션 내부 이미지 및 텍스트 내용) 전체 레이아웃 설정
============================================== */
.card-container {
  display: flex;
  flex-wrap: wrap;             /* 줄 바꿈 금지 */
  justify-content: center;
  align-items: flex-start;  /* 세로 기준으로 상단 정렬 */
  margin-top: 50px; /* 화면 상단으로부터의 카드 간격 */
  gap: 30px;  /* 카드(흰색 배경)와 카드 사이 간격 조절 */
  flex-direction: row; /* 세로 배치로 전환 */
}

/* ==============================================
   카드 섹션(카드 내부 위치설정) 설정
============================================== */

.card-section {
  position: relative;
  width: 300px;
  height: 450px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer; 					/* 마우스 커서 바꾸기 */
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
  display: flex;				   플렉스 컨테이너로 만들어 내부 아이템을 배치 */
  flex-direction: row;			   아이템들을 세로(위→아래) 방향으로 정렬 */
  /* align-items: center;			   아이템들을 수평 중앙에 정렬 */
  /* justify-content: flex-start;		   아이템들을 위쪽부터 배치(기본값) */
  /* height: 100%;				   부모 요소의 높이를 100% 채움 */
  /* min-height: 100%; 			   최소 높이를 부모 높이만큼 설정하여 높이 통일 */
}




.card-section img.card-bg-img {
  filter: blur(0.5px) brightness(0.5) ;  /* 카드 이미지 흐리게 */
  transition: filter 0.3s ease; /* 부드럽게 전환 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0 !important;
  border-radius: 20px;
}

.card-section:hover img.card-bg-img {
  filter: blur(0px) brightness(1.3);
}

.card-bg {
  position: absolute;				/* 자식 요소의 절대 위치 지정 기준 */
  top: 0;
  left: 0;
  width: 100%;				/* 부모 컨테이너 너비에 꽉 채움 */
  height: 100%;				/* 부모 컨테이너 높이에 꽉 채움 */
  object-fit: cover;
  z-index: 0;
  border-radius: 16px;			/* 모서리를 둥글게 16px 반경 */
  /* background-color: black;		   배경색을 검은색으로 지정 (필요시 배경 이미지로 교체 가능) */        
  /* display: flex;				   플렉스 컨테이너로 설정 */
  /* justify-content: center;		   가로 중앙 정렬 */
  /* align-items: center;			   세로 중앙 정렬 */
  /* padding: 40px 20px;			   위아래 40px, 좌우 20px 내부 여백 */
  /* box-sizing: border-box;		   패딩과 보더를 포함한 크기 계산 방식 */

  /* background: rgba(255, 255, 255, 0);			완전 투명한 흰색 배경 (필요시 수정) */   
  /* border: 1px solid rgba(255, 255, 255, 0.2); */ 	흰색 반투명 테두리 (주석 처리 상태) */
  /* box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); 	흰색 빛나는 그림자 효과 */
  /* backdrop-filter: blur(10px);				배경 흐림 효과 (CSS 필터) */
  /* -webkit-backdrop-filter: blur(10px);			사파리 등 웹킷 브라우저용 배경 흐림 효과 */
}

.card-overlay {
  position: absolute;
  z-index: 2;
  opacity: 1 !important;
  color: white;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end; 			/* 하단 정렬 */
  justify-content: flex-end;
  padding: 20px;
  box-sizing: border-box;
}


/* ==============================================
   헤더 스타일
============================================== */

header {
  
  background: transparent;
  color: white;
  padding: 10px;
  text-align: left; /* 왼쪽 정렬 */
}

header h1 {
  margin-left: 10px; /* 왼쪽으로 여백 띄우기 */
}

.top-header {
  display: flex;					/* 헤더를 Flexbox 레이아웃으로 설정 → 내부 요소를 가로로 배치 */
  justify-content: flex-start;		       		/* 로고와 배너 텍스트를 좌우 양끝에 배치 */
  align-items: center;				/* 세로 정렬을 중앙에 맞춤 */
  padding: 15px 20px;				/* 상하 15px, 좌우 20px 여백 */
  background-color: transparent; 			/* 헤더 배경색: 흰색 (#ffffff) */
  flex-wrap: wrap; /* 줄바꿈 가능하게 */
  /* border-bottom: 1px solid #ddd;		   아래쪽에 연한 회색 테두리 추가 → 헤더 구분용 */
}

.logo {
  font-size: 28px;					/* 로고 텍스트 크기 설정 */
  font-weight: bold;					/* 굵은 글씨로 표시 */
  color: #222;						/* 로고 색상: 거의 검정에 가까운 짙은 회색 */
  margin: 0;						/* 기본 마진 제거 */
}

/* ✅ 배너 박스 주석부분 형태 배너 */
.banner-box {
  background-color: transparency; 	/* 배너 박스의 배경색 (연한 하늘색 계열 :#e3f0ff) */
  padding: 8px 16px;				/* 내부 여백: 위아래 8px, 좌우 16px */
  border-radius: 10px;				/* 박스 모서리를 둥글게 (10px 라운드) */
  margin-left: 80px;  				/* ✅ 로고와의 간격: 필요에 따라 30~60px 조절 가능 */
  width: 600px; 					/* ✅ 원하는 너비로 고정 */
  height : 40px
}

.banner-text {
  font-size: 20px;					/* 배너 텍스트 크기 설정 */
  color: #007BFF;  					/* 텍스트 색상: 파란색 (부트스트랩의 대표색 계열) */
  font-weight: 600;					/* 반굵은 글씨체 (bold보단 살짝 얇음) */
  /* margin-left: 40px;  				✅ 로고와의 간격: 필요에 따라 30~60px 조절 가능 */
 animation: blinkColor 1.5s infinite;			/* 3번만 깜박임 */


}
@keyframes blinkColor {
  0%, 100% {
    color: #1E90FF; /* 딥 티얼(청록) */
    text-shadow: 0 0 10px #008080;
  }
  50% {
    color: #32CD32; /* 밝은 그린 (Lime Green) */
    text-shadow: 0 0 10px violet;
  }
  50% {
    color: #FF8C00; /* 짙은 오렌지색 (Dark Orange) */
    text-shadow: 0 0 10px #FF8C00;
  }
}

/* ==============================================
   푸터 스타일 (좌측 하단 회사정보)
============================================== */

footer {
  position: relative;   /* ⭐️ 반드시 필요 */
  display: flex;				/* 플렉스 컨테이너로 만들어 내부 아이템을 가로 배치 */
  justify-content: space-between;		/* 아이템들을 좌우 끝으로 배치하여 양 끝 정렬 */
  align-items: center;			/* 아이템들을 수직으로 가운데 정렬 */
  background-color: rgba(0, 0, 0, 0);	/* 배경색: 완전 투명한 검은색 (불투명도 0%) */
  padding: 20px;				/* 내부 여백을 사방 20px씩 줌 */
  font-size: 14px;				/* 글자 크기를 14픽셀로 지정 */
  color: #ffffff;				/* 글자 색상을 흰색으로 지정 */
}

.footer-logo {
  width: 150px !important;   /* teknix(테크닉스) 로고 원하는 크기로 조절 */
  height: auto !important;   /* 비율 유지 */
}

.left p {					/* 글자 줄 사이의 간격 조절 */
  margin: 4px 0;
}

footer::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;      /* 삼각형의 가로 크기 */
  height: 300px;     /* 삼각형의 세로 크기 */
  background: white;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: -1;
}

/* ==============================================
   폼(form)은 사용자가 입력할 수 있는 영역에 대한 것이며, 서버 전송을 위해 작성
============================================== */

.meeting-form {
  width: 700px;			/* 폼 전체 너비를 700px로 고정 */
  padding: 40px;			/* 폼 안쪽 여백을 상하좌우 40px씩 줌 */
  border-radius: 20px;		/* 폼 테두리를 부드럽게 둥글게 만듦 */
  margin: 0 auto;                   /* 화면 가로 가운데 정렬 */
  /*background-color: rgba(0, 0, 0, 0.6);  검정색+60% 불투명 */
  background-color: transparent;     /*  배경색 추가 */
  box-shadow: none; /* 부드러운 그림자 */

}


.meeting-form textarea {
  resize: none;			/* textarea 크기 조절 기능 비활성화 (사용자가 모서리를 못 드래그함) */

}

.meeting-form input[type="text"],
.meeting-form input[type="email"],
.meeting-form textarea {
  width: 100%;	 			/* 입력창의 너비를 부모(.meeting-form)의 100%로 설정 */
  box-sizing: border-box;			/* 패딩과 보더를 width에 포함시켜 너비가 정확히 맞도록 함 */
  background-color: rgba(255, 255, 255, 1) !important;  /* ✅ 이 줄 추가 */
  color: #000 !important;
  border: 1px solid rgba(255, 255, 255, 1);

}

.meeting-form input[type="text"]:focus,
.meeting-form input[type="email"]:focus,
.meeting-form textarea:focus {
  /* background-color: transparent !important; */
  color: #000 !important;
  border-color: rgba(255, 255, 255, 0.5);  /* 선택 상태일 때 테두리 강조(Optional) */
  outline: none;  /* 기본 파란 테두리 제거 */

}

.meeting-text {
  margin-top: 10px;				/* 위쪽 요소와의 간격을 10px 띄워서 여백을 줍니다 */
}

.meeting-text ul li {
  margin-bottom: 5px;			/* 미팅 텍스트 항목의 아래쪽 여백을 줍니다 */
}


/* ==============================================
   폼(form) 하단의 사용자가 버튼 입력을 설정할 때 사용되는 부분
============================================== */

.footer-btn {
  text-align: right;
  margin-top: -80px; /* ✅ 아래로 밀기 위한 여백 */
  max-width: 100%;     /* 부모 너비 넘어가지 않도록 */
  box-sizing: border-box; /* 패딩, 테두리 포함해서 크기 계산 */
  padding-right: 10px; /* 오른쪽 공간 확보 */
}

.footer-btn button:last-child {
  background-color: #007BFF; [next 박스 색상]
  color: white !important;
}

.footer-btn button:last-child * {
  color: white !important;  /* 내부 span 등도 흰색으로 강제 */
}

.previous-button {
  background: #e0e0e0 !important; /* 연회색 배경 */
  color: #000000 !important;      /* 검정 글씨 */
}

/* ==============================================
   폼(form) 하단의 라디오 선택 버튼 입력을 설정할 때 사용되는 부분
============================================== */

.radio-wrapper {
  display: flex;				/* 내부 요소들을 가로 방향(행)으로 배치하는 플렉스 컨테이너 */
  align-items: center;			/* 세로 방향(수직)으로 요소들을 중앙 정렬 */
  padding-left: 0px; 				/* 왼쪽 안쪽 여백을 0으로 설정, 이메일 입력란 시작 위치와 맞춤 */
  gap: 20px; 					/* 자식 요소들(예: 라디오 버튼들) 사이를 20px 간격으로 띄움 */
}

.radio-label {
  color: gray;           			/* 연한 회색 텍스트 색상, 이메일 예시와 비슷한 느낌 (#999) */
  /* font-weight: bold; */                   /* 폰트 사이즈 : 볼드체 */
  font-size: 15px;				/* 글자 크기를 15px로 설정 */
  font-family: 'Arial', sans-serif;		/* Arial 폰트를 기본으로, 없으면 시스템 기본 산세리프체 사용 */
  margin-left: 5px;				/* 왼쪽 여백 5px 추가 — 라디오 버튼과 텍스트 사이 간격 */
}		


input[type="radio"] {
  transform: scale(1.1);			/* 라디오 버튼 크기를 10% 키움 */
  vertical-align: middle;			/* 텍스트와 라디오 버튼 수직 중앙 정렬 */
}

/* ==============================================
   폼(form) 하단의 제품 버전 선택 버튼 입력을 설정할 때 사용되는 부분
============================================== */

.hidden {
  display: none;				/* 요소를 화면에서 숨김 (초기 상태에서 안 보이게 하기 위해 사용됨) */
}

/* 버전 선택 영역의 스타일 */

#version {
  width: 300px;      /* 너비 키우기 */
  height: 40px;      /* 높이 키우기 */
  color: gray;             /* 글씨 색상 */
  background-color: #f0f0f0; /* 박스 배경색 */
  border: 1px solid #999;   /* 테두리 색 */
  padding: 5px 10px; /* 내부 여백 (상하, 좌우) */
  font-size: 16px;   /* 글씨 크기 키우기 */
  border-radius: 5px;       /* 테두리 둥글게 */
}

#versionSelector {
  margin-top: 1rem;				 /* 위쪽 여백 */
  padding: 10rem;				/* 내부 여백 */
  border: 1px solid #ccc;			/* 테두리 (연한 회색) */
  width: 200px;				/* 고정된 가로 너비 */
  background: #f9f9f9;			 /* 연한 회색 배경 */
}

/* 버전 항목 하나하나의 스타일 */
.version-option {
  padding: 0.5rem;				/* 항목 안쪽 여백 */
  cursor: pointer;				/* 마우스를 올리면 포인터(손모양)로 변경 */
}

/* 마우스를 항목 위에 올렸을 때의 스타일 (hover 효과) */
.version-option:hover {
  background-color: #dbeafe;		/* 연한 파란 배경으로 하이라이트 */
}



/* ==============================================
   테이블 스타일
============================================== */

tr.detail-row td {
  padding-bottom: 50px;  			/* 특정 테이블 행의 셀 하단 여백만 크게 줌 */
}

.data-text ul li {
  margin-bottom: 5px;			/* 리스트 항목 간 간격 */
}

.license-text ul li {
  margin-bottom: 5px;
}

.data-text {
  margin-top: 10px;  			/* 두 블록 모두 위쪽 여백 10px */
}

.license-text {
  margin-top: 10px;
}

/* ==============================================
   개인정보 처리 방침 화면의 화면 위치 정렬 등에 쓰임 사용되는 부분
============================================== */

/* 전체 중앙 정렬 */

body {
  /*  display: flex; */
  /*  flex-direction: column; ✅ 세로 방향 정렬로 변경 */
  /*  justify-content: center; */
  /*  align-items: center; */
  height: 100vh;
  margin: 0;
  font-family: 'Arial', sans-serif;
}

.body.gradient-bg, .privacy-wrapper {
  display: flex;				/* 두 요소 모두 플렉스 컨테이너로 설정 */
  justify-content: center;			/* 가로 방향(주축) 중앙 정렬 */
  align-items: center;			/* 세로 방향(교차축) 중앙 정렬 */
  min-height: 100vh;			/* 뷰포트(viewport) 높이 100% 이상 확보, 즉 화면 전체 높이 */
}

.container {
  background: rgba(0,0,0,0.7) !important; /* 교육신청등 폼의 전체 투명도 및 색상 관리반투명 흰색 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.3);
}

.container-box {
  background-color: rgba(255, 255, 255, 0.6);		/* 반투명 흰색 배경 */
  backdrop-filter: blur(10px);				/* 배경 흐림 효과 적용 */
  padding: 40px;						/* 내부 여백 40px */
  border-radius: 30px;					/* 둥근 모서리 반경 30px */
  max-width: 800px;						/* 최대 너비 800px */
  max-height: 90vh;   					/* 최대 높이 화면 높이의 90% (스크롤 방지용) */
  width: 90%;							/* 너비는 부모의 90% */
  margin: auto;
  color: #fff;							/* 글자 색상을 흰색으로 설정 */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);		/* 부드러운 그림자 효과 */
  text-align: left;						/* 텍스트 왼쪽 정렬 */
}

.form-title {
  text-align: center;						/* 제목 텍스트를 가로 가운데 정렬 */
  margin-bottom: 20px;					/* 제목 아래쪽에 20px 여백 추가 */
  font-size: 28px;						/* 글자 크기를 28px로 크게 설정 */
  color: white;						/* 텍스트 색상을 흰색으로 지정 */
}

.privacy-content {
  font-size: 16px;						/* 글자 크기를 16픽셀로 설정 */
  line-height: 1.6;						/* 줄 높이를 글자 크기의 1.6배로 설정하여 가독성 향상 */
}
.privacy-content ol,
.privacy-content ul {
  margin-left: 20px;						/* ul 요소의 왼쪽 여백을 20px만큼 들여쓰기 */
}

.button-row {
  display: flex;						/* 버튼들을 가로 한 줄로 배치하는 플렉스 컨테이너 */
  justify-content: center;					/* 버튼들을 가로 방향 중앙 정렬 */
  gap: 30px;							/* 버튼 사이에 30px 간격 부여 */
  margin-top: 30px;						/* 위쪽 요소와 버튼 행 사이에 30px 여백 추가 */
}

.submit-button, .reject-button {
  background-color: #ffffff;					/* 버튼 배경색을 흰색으로 설정 */
  color: #333;							/* 글자색은 짙은 회색 (#333) */
  border: none;						/* 테두리 제거 */
  padding: 24px 32px !important;					/* 상하 12px, 좌우 24px 패딩으로 버튼 크기 조절 */
  border-radius: 12px;					/* 둥근 모서리 반경 12px */
  font-size: 18px !important;						/* 글자 크기 16px */
  cursor: pointer;						/* 마우스 오버 시 포인터(손가락) 모양으로 변경 */
  transition: all 0.3s ease;					/* 상태 변화(hover 등) 시 0.3초 부드러운 애니메이션 효과 */
}

.submit-button:hover {
  background-color: #d0f0ff;				/* 마우스가 버튼 위에 있을 때 배경색을 연한 하늘색으로 변경 */
}

.reject-button:hover {
  background-color: #ffe0e0;				/* 마우스 오버 시 배경색을 연한 분홍색으로 변경 */
}

.privacy-wrapper {
  display: flex;
  flex-direction: column;  /* ✅ 세로 정렬 */
  align-items: center;
  width: 800px !important;
  height: 650px !important;
}

.privacy-box {
  background: rgba(0, 0, 0, 0.7) !important;  /* 투명 배경 */
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  width: 800px !important;
  height: 650px !important;
  min-height: unset;
  max-height: unset;
  overflow: hidden;
}

.privacy-buttons {

  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.btn-next, .btn-cancel {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}


input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.9) inset !important;  /* 흰 배경 제거 */
  box-shadow: none !important;          /* 호환용 */
  -webkit-text-fill-color: #000 !important;                      /* 글자만 검은색 */
  background-color: rgba(255,255,255,0.6) !important;                       /* 배경 투명 유지 */
  transition: background-color 9999s ease-out 0s !important;      /* 배경 표시 지연 트릭 */
}

/* ==============================================
   메일 내용 박스 스타일
============================================== */
.mail-wrapper {
  width: 100%;
  max-width: 600px;  /* 최대 너비를 600px로 설정 */
  background: #e8f3fc; /* 연한 파랑 배경색 (#e8f3fc 추천) */
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  padding: 40px 50px;
  text-align: left;
  box-sizing: border-box; /* 여백 및 테두리 포함해서 전체 너비 계산 */
  margin: 0 auto;  /* 중앙 정렬 */
}

/* ==============================================
   모바일대응 미디어쿼리
============================================== */

@media (max-width: 768px) {
  .card-section {
    display: flex;
    align-items: center;
    width: 90%;
    height: auto;
    min-height: 450px;
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .card-section img.card-bg-img {
    filter: blur(0px) brightness(1.3) !important;
  }

 .grid {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .card-container {
    width: 100%;
    gap: 20px;
    margin-top: 20px;
    align-items: center;
    flex-direction: column;

  }

  .card {
    width: 90%;
    left: 0;
    transform: none;
    margin: 0 auto;
    max-width: 400px;
    margin-left: auto !important;
    margin-right: auto !important;
}

  .card-overlay {
    align-items: center;
    padding: 20px;
    justify-content: flex-end;
  }

  .banner-box {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

@media (max-width: 768px) {
  .meeting-form {
    width: 90%;
    padding: 20px;
    max-height: 300px !important; /* 모바일에선 높이 제한 */
    overflow-y: auto !important;  /* 넘치면 스크롤 가능 */
    padding: 10px 15px !important;   /* ✅ 스크롤바 공간 확보 */
    margin-bottom: 10px !important; /* 버튼과 겹치지 않도록 여백 */
  }

  .footer-btn {
    margin-top: 10px !important; /* 모바일에선 버튼이 너무 위로 안 가게 조절 */
    position: sticky;      /* 스크롤 시 버튼이 화면 아래쪽에 고정 */
    bottom: 0;
    background: #000;      /* 배경색(검은색)과 통일 */
    padding: 10px 0;
    z-index: 10;           /* 위에 표시되도록 */

  }

  footer::after {
    width: 100px;    /* 모바일에서는 절반 크기로 */
    height: 100px;
  }

  .privacy-wrapper,
  .privacy-box {
    width: 98% !important;     /* 화면 너비의 90%로 줄임 */
    height: auto !important;   /* 높이는 내용에 맞게 자동 조절 */
    max-height: 80vh !important; /* 최대 높이는 화면 높이 80%로 제한 */
    overflow-y: auto !important; /* 내용 넘치면 세로 스크롤 */
    padding: 20px !important;  /* 모바일에 맞게 패딩 줄이기 */
    margin: 0 auto !important; /* 좌우 중앙 정렬 */
    font-size: 12px;  /* 기본 텍스트 크기 줄임 (기본이 16px 정도면) */
  }

  .btn-next, .btn-cancel {
    min-width: 100px;  /* 최소 가로 넓이 지정, 필요에 따라 숫자 조절 */
    white-space: nowrap; /* 줄바꿈 방지 */
  }

  .privacy-buttons {
    display: flex !important; /* flex 강제 적용 */
    gap: 100px !important;     /* 간격 줄임 */
  }

  .privacy-buttons button {
    margin: 0 !important;     /* 버튼에 margin 있으면 제거 */
  }

table {
    width: 100%;
    table-layout: auto !important; /* 자동 레이아웃으로 */
  }

  table tr {
    display: block;
    margin-bottom: 15px;
  }

  table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    padding: 5px 0 !important;
    border: none !important;
  }

  table td:first-child {
    color: white;
    font-weight: 600;
    margin-bottom: 5px;
  }

input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    width: 100% !important;
    min-width: 0 !important;
  }

.radio-wrapper {
    display: flex;
    gap: 10px;   /* 간격 줄이기, 기본 20px 이상일 수 있음 */
    flex-wrap: wrap;  /* 좁은 화면에서 줄 바꿈 가능 */
  }

  .radio-wrapper label {
    margin-right: 8px;  /* 라벨 우측 마진 축소 */
    font-size: 14px;    /* 필요하면 폰트 크기도 줄임 */
  }

  /* 라디오 입력 및 텍스트 크기 조정 */
  .radio-wrapper input[type="radio"] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }

  .radio-label {
    vertical-align: middle;
  }
 .container {
    max-height: 90vh;      /* 화면 높이 대비 최대 90%로 제한 */
    overflow-y: auto;      /* 넘칠 경우 세로 스크롤 가능 */
    padding-bottom: 10px;  /* 아래쪽 여백 조절 */
  }

 textarea[name="details"] {
    min-height: 150px;               /* 최소 높이 유지 */
    height: auto !important;         /* 높이 자동 조절 */
    max-height: 250px;               /* 최대 높이 지정 (필요 시) */
    overflow-y: auto;                /* 넘칠 때 스크롤 가능 */
    resize: vertical;                /* 사용자가 세로 크기 조절 가능 */
    box-sizing: border-box;          /* 패딩 포함 크기 계산 */
  }
 .privacy-buttons button {
    margin: 0 !important;     /* 버튼에 margin 있으면 제거 */
  }

}

@media (max-width: 600px) {
  header h1 {
    font-size: 24px;  /* 헤더 글자 작게 */
  }

  .card-text h2 {
    font-size: 18px;  /* 카드 제목 작게 */
  }

  .card-text ul li {
    font-size: 14px;  /* 리스트 글자 작게 */
  }
}

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

  .card-text {
    background-color: rgba(0, 0, 0, 0.8); /* 모바일에선 더 어둡게 */
  }

  .top-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .banner-box {
    margin-top: 8px; /* 제목 아래 여백 */
    margin-left: 0px;        /* 좌측 여백 (또는 padding-left 사용 가능) */
    align-self: stretch; /* 너비 맞춤 */
    text-align: left;
    font-size: 14px;
  }

  .mobile-banner {
    display: block;
    background-color: #e3f0ff;
    color: #003366;
    padding: 8px 12px;
    font-size: 0.95rem;
    border-left: 4px solid #007bff;
    margin-top: 8px;
    border-radius: 4px;
  }
}

@media (max-width: 480px) {
  .footer-logo {
   position: absolute;
    bottom: 10px;
    right: 10px;
    width: 60px !important;
}
footer::after {
    width: 100px;    /* 모바일에서는 절반 크기로 */
    height: 100px;
  }
}

body.mobile .card-section { flex-direction: column; }
body.desktop .card-section { flex-direction: row; }