/* =========================================
   사전등록 메인 카드 스타일 (모던 & 라이트 버전)
========================================= */

.reg-type-wrap {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 40px 0 60px;
}

.reg-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8f0; /* 테두리를 조금 더 연하고 얇게 */
  border-radius: 20px;
  padding: 50px 30px 40px;
  width: 100%;
  max-width: 380px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 더 부드러운 애니메이션 */
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); /* 평상시에도 아주 연한 그림자 부여 */
}

/* 카드 호버 효과 */
.reg-type-card:hover {
  transform: translateY(-10px);
  border-color: #B8F400; /* 호버 시 산뜻하게 라임색 테두리 */
  box-shadow: 0 20px 40px rgba(28, 33, 59, 0.08); /* 그림자를 부드럽게 퍼뜨림 */
}

/* 1. 아이콘 영역 (가볍게 변경) */
.reg-type-icon {
  width: 90px;
  height: 90px;
  background: #f1f5f9; /* 무거운 남색 대신 아주 연한 회파란색 배경 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.reg-type-icon i {
  font-size: 40px;
  color: #1C213B; /* 아이콘 자체를 진한 네이비로 설정하여 뼈대만 남김 */
  transition: all 0.3s ease;
}

/* 카드 호버 시 아이콘 반전 효과 */
.reg-type-card:hover .reg-type-icon {
  background: #1C213B; /* 호버 시에만 네이비로 변경 */
}
.reg-type-card:hover .reg-type-icon i {
  color: #B8F400; /* 호버 시 아이콘은 라임색으로 */
}

/* 2. 배지 영역 (산뜻하게 변경) */
.reg-type-badge {
  display: inline-block;
  background: rgba(184, 244, 0, 0.15); /* 라임색을 아주 투명하게 깐 배경 */
  color: #5c7a00; /* 텍스트는 가독성을 위해 톤다운된 그린 */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.reg-type-card:hover .reg-type-badge {
  background: #B8F400;
  color: #1C213B;
}

/* 3. 텍스트 영역 */
.reg-type-title {
  font-size: 24px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 12px;
}

.reg-type-desc {
  font-size: 15px;
  color: #64748b; /* 기존보다 살짝 더 부드러운 회색 */
  line-height: 1.6;
  margin-bottom: 35px;
  flex-grow: 1;
}

/* 4. 하단 버튼 영역 */
.reg-type-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* 메인 등록 버튼: 기본을 라임색으로 주어 경쾌한 느낌 부여 */
a.btn-reg-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #B8F400; 
  color: #1C213B; 
  font-size: 16px;
  font-weight: 700;
  padding: 16px 0;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.reg-type-card:hover a.btn-reg-primary {
  background: #1C213B; /* 마우스 올렸을 때 묵직하게 잡아줌 */
  color: #ffffff;
}

/* 서브 확인 버튼: 더 연하고 심플하게 */
a.btn-reg-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 0;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  transition: all 0.3s ease;
}

.reg-type-card:hover a.btn-reg-secondary {
  background: #f8fafc;
  color: #1e293b;
  border-color: #cbd5e1;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .reg-type-wrap {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
  }
  .reg-type-card {
    max-width: 100%;
    padding: 40px 24px 30px;
  }
}


/* =========================================
   폼 레이아웃 컨테이너 및 하단 버튼 스타일
========================================= */

/* --- 1. 전체 폼 배경 및 여백 --- */
.content-section {
  padding: 60px 0;
  background-color: #f8fafc; /* 폼 컨테이너가 돋보이도록 아주 연한 회파란색 배경 */
}

/* --- 2. 폼 본문 겉박스 (카드 느낌) --- */
.section-body {
  background-color: #ffffff;
  padding: 50px;
  border-radius: 20px;
  /* 부드럽고 고급스러운 네이비톤 그림자 */
  box-shadow: 0 10px 40px rgba(28, 33, 59, 0.08); 
}

/* --- 3. 버튼 영역 래퍼 --- */
.btn-container {
  text-align: center;
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid #e2e8f0; /* 긴 폼과 버튼 영역을 시각적으로 분리 */
}

/* --- 4. 메인 제출 버튼 (라임 그린 포인트) --- */
.btn-primary.btn-wide {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 360px; /* PC에서는 너무 길어지지 않게 너비 제한 */
  padding: 18px 30px;
  background-color: #B8F400; /* 시그니처 라임 그린 */
  color: #1C213B; /* 텍스트는 대비가 잘 되도록 다크 네이비 */
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  /* 버튼 아래에 은은한 라임색 발광 효과 */
  box-shadow: 0 4px 15px rgba(184, 244, 0, 0.3); 
}

/* 버튼 마우스 오버 효과 */
.btn-primary.btn-wide:hover {
  background-color: #a8e000; /* 살짝 진한 라임색으로 변경 */
  transform: translateY(-2px); /* 살짝 위로 떠오르는 애니메이션 */
  box-shadow: 0 6px 20px rgba(184, 244, 0, 0.45);
}

/* 버튼 클릭 시 효과 */
.btn-primary.btn-wide:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(184, 244, 0, 0.3);
}

/* --- 5. 모바일 반응형 조절 --- */
@media (max-width: 768px) {
  .content-section {
    padding: 30px 0;
  }
  .section-body {
    padding: 30px 20px; /* 모바일에서는 여백을 약간 줄임 */
    border-radius: 16px;
  }
  .btn-primary.btn-wide {
    max-width: 100%; /* 모바일에서는 화면 너비에 꽉 차게 */
  }
}

/* =========================================
   사전등록 폼 스타일
========================================= */

/* --- 1. 개인정보 처리방침 (약관 동의) --- */
.card.bg-light.mb-3 {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
}

.card-header {
  background-color: #1C213B; /* 메인 네이비 컬러 */
  color: #ffffff;
  padding: 15px 20px;
  font-weight: 600;
  font-size: 16px;
}

.card-body.agreebox {
  background-color: #f8fafc;
  padding: 20px;
  height: 160px;
  overflow-y: auto;
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
}

.agreeboxbtn {
  margin: 15px 0 40px;
  font-size: 15px;
  font-weight: 600;
  color: #1C213B;
}

/* 동의 체크박스는 라임 그린으로 포인트 */
.agreeboxbtn input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #B8F400; 
  vertical-align: middle;
  margin-right: 6px;
  cursor: pointer;
}

/* --- 2. 폼 섹션 공통 --- */
.form-section {
  margin-bottom: 50px;
}

.form-section-header {
  font-size: 20px;
  font-weight: 700;
  color: #1C213B;
  padding-bottom: 12px;
  border-bottom: 2px solid #1C213B;
  margin-bottom: 20px;
}

.form-section-header .required {
  color: #ff3b30;
  font-size: 18px;
  margin-left: 4px;
}

/* --- 3. 기본 항목 레이아웃 (Grid 적용) --- */
.form-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PC에서는 2단 배열 */
  gap: 12px 20px;
}

.form-list > li {
  width: 100%;
}

/* 인풋, 셀렉트 공통 디자인 */
.form-list input[type="text"],
.form-list input[type="email"],
.form-list input[type="number"],
.form-list select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  color: #333;
  box-sizing: border-box;
  background-color: #fff;
  transition: all 0.2s ease-in-out;
}

.form-list input::placeholder {
  color: #94a3b8;
}

/* --- 셀렉트 박스(Select) 화살표 커스텀 --- */
.form-list select,
.mobile-wrap select {
  /* 기본 브라우저 화살표는 확실히 숨김 */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  
  /* 다크 네이비(#1C213B) 색상의 깔끔한 화살표(SVG) 배경으로 삽입 */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C213B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important; /* 오른쪽 끝에서 15px 띄우고 세로 중앙 정렬 */
  background-size: 16px !important; /* 화살표 크기 */
  
  padding-right: 40px !important; /* 글씨가 화살표 밑으로 파고들지 않게 우측 여백 확보 */
  background-color: #fff !important;
}

/* 구형 IE 브라우저용 기본 화살표 숨김 */
.form-list select::-ms-expand,
.mobile-wrap select::-ms-expand {
  display: none;
}

/* --- 숫자 입력칸(type="number") 위아래 화살표(스피너) 제거 --- */

/* 크롬, 사파리, 엣지, 오페라 등 Webkit 기반 브라우저 */
.form-list input[type="number"]::-webkit-outer-spin-button,
.form-list input[type="number"]::-webkit-inner-spin-button,
.mobile-wrap input[type="number"]::-webkit-outer-spin-button,
.mobile-wrap input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* 파이어폭스(Firefox) 브라우저 */
.form-list input[type="number"],
.mobile-wrap input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}


/* 포커스 효과 (네이비 테두리) */
.form-list input:focus,
.form-list select:focus {
  outline: none;
  border-color: #1C213B;
  box-shadow: 0 0 0 3px rgba(28, 33, 59, 0.1);
}

/* 사전등록 번호 텍스트 스타일 */
.reg-number {
  display: block;
  padding: 13px 15px;
  background-color: #f1f5f9;
  border-radius: 8px;
  font-weight: 600;
  color: #1C213B;
}

/* 전화번호 3칸 분할 */
.mobile-wrap {
  display: flex;
  gap: 10px;
}
.mobile-wrap select { flex: 1; }
.mobile-wrap input { flex: 1.5; }

/* 주소 및 우편번호 영역 (전체 너비 차지) */
.form-list li.addr-wrap,
.form-list li:has(#addr1),
.form-list li:has(#addr2) {
  grid-column: span 2;
}

.addr-wrap {
  display: flex;
  gap: 10px;
}
.addr-wrap input {
  flex: 1;
}
.addr-wrap button {
  background-color: #1C213B;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.addr-wrap button:hover {
  background-color: #2a3156; /* 마우스 오버 시 살짝 밝은 네이비 */
}

/* --- 4. 기타 항목 (체크박스 그룹) --- */
.form-list.form-list--check {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 각 질문 세트(직업구분, 관심분야 등) 사이의 간격 */
}

/* 겉을 감싸는 박스 (테두리 적용) */
.form-list.form-list--check > li {
  border: 1px solid #dcdcdc; /* 전체 테두리 */
  border-radius: 4px; /* 모서리 살짝 둥글게 */
  overflow: hidden; /* 헤더 배경색이 밖으로 삐져나가지 않게 */
  display: block;
}

/* 회색 타이틀 바 ("직업구분", "관심분야" 등) */
.check-group-label {
  display: block;
  background-color: #e2e2e2; /* 스크린샷과 유사한 회색 배경 */
  color: #555555;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px; /* 타이틀 바 상하좌우 여백 */
  border-bottom: 1px solid #dcdcdc; /* 타이틀 바 아래 선 */
  margin-bottom: 0; 
}

/* 체크박스들이 들어가는 하얀/연회색 바탕 영역 */
.check-group {
  background-color: #f9f9f9; /* 아주 연한 회색 바탕 */
  padding: 25px 20px;
  
  /* 핵심: 5단 정렬 그리드 적용 */
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 무조건 5칸으로 균일하게 분할 */
  gap: 15px 10px; /* 줄바꿈 시 세로 15px, 가로 10px 간격 */
  
  border: none;
  border-radius: 0;
}

/* 마지막 전시인지경로 4단 배열 */
.check-group.last {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* 개별 체크박스 글자 스타일 */
.check-group label {
  display: flex;
  align-items: center;
  color: #666666;
  cursor: pointer;
  margin: 0;
}

/* 체크박스 아이콘 크기 및 강제 노출 설정 */
.check-group input[type="checkbox"],
.agreeboxbtn input[type="checkbox"] {
  /* 기존 스타일 초기화 덮어쓰기 */
  -webkit-appearance: auto !important;
  appearance: auto !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  /* 체크박스 크기 고정 및 찌그러짐 방지 */
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important; /* 글씨가 길어져도 체크박스 크기 유지 */
  margin-right: 8px !important;
  
  cursor: pointer;
}

/* 직업구분/관심분야 체크박스는 네이비색 포인트 */
.check-group input[type="checkbox"] {
  accent-color: #1C213B !important; 
}

/* 상단 개인정보 동의 체크박스는 라임색 포인트 유지 */
.agreeboxbtn input[type="checkbox"] {
  accent-color: #B8F400 !important;
}


/* --- 5. 모바일 반응형 처리 --- */
/* 화면이 작아지면 5단 -> 3단 -> 2단으로 자연스럽게 줄어들게 설정 */

@media (max-width: 1024px) {
  .check-group {
    grid-template-columns: repeat(4, 1fr); /* 태블릿/작은 PC: 4단 */
  }
}

@media (max-width: 768px) {
  .check-group,
  .check-group.last {
    grid-template-columns: repeat(2, 1fr); /* 모바일: 2단 */
    padding: 15px;
  }
  .form-list {
    grid-template-columns: 1fr; /* 상단 기본항목 1단으로 변경 (이전 코드 유지) */
  }
  .form-list li.addr-wrap,
  .form-list li:has(#addr1),
  .form-list li:has(#addr2) {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .check-group,
  .check-group.last {
    grid-template-columns: 1fr; /* 아주 작은 스마트폰: 1단 (세로 나열) */
  }
}

/* --- 단체 등록 폼 추가 스타일 (라디오 버튼, 텍스트) --- */

/* 텍스트 영역(비고란) 공통 디자인 */
.form-list input[type="tel"],
.form-list textarea {
  width: 100% !important;
  padding: 13px 15px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  color: #333 !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
  transition: all 0.2s ease-in-out;
  font-family: inherit;
}

/* 포커스 시 네이비 테두리 효과 */
.form-list input[type="tel"]:focus,
.form-list textarea:focus {
  outline: none !important;
  border-color: #1C213B !important;
  box-shadow: 0 0 0 3px rgba(28, 33, 59, 0.1) !important;
}

/* 비고란(textarea)은 세로로만 늘어나게 설정 */
.form-list textarea {
  resize: none;
  min-height: 120px;
}

/* 2칸을 전부 차지해야 하는 항목 (이메일, 라디오 그룹 등) */
.form-list li.full-width,
.radio-group-wrap {
  grid-column: span 2;
}

/* 라디오 버튼 그룹 겉박스 */
.radio-group-wrap {
  background-color: #f8fafc;
  padding: 15px 20px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.radio-group-title {
  display: block;
  font-weight: 600;
  color: #1C213B;
  margin-bottom: 12px;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.radio-group label {
  display: flex;
  align-items: center;
  font-size: 14.5px;
  color: #475569;
  cursor: pointer;
}

/* --- 라디오 버튼(동그라미) 숨김 방지 및 노출 --- */
.form-list input[type="radio"],
.radio-group input[type="radio"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  width: 20px !important;
  height: 20px !important;
  margin: 0 8px 0 0 !important;
  accent-color: #1C213B !important; 
  cursor: pointer;
  vertical-align: middle;

  background-color: transparent !important; /* 배경을 투명하게 */
  box-shadow: none !important; /* 네모난 그림자 제거 */
  outline: none !important; /* 포커스 시 생기는 네모 테두리 제거 */
}

/* 라디오 버튼을 감싸는 라벨(글씨) 정렬 */
.form-list label {
  display: inline-flex;
  align-items: center;
  margin-right: 15px; /* 각 라디오 항목 사이의 간격 */
  color: #475569;
  cursor: pointer;
}

/* --- 신청내역 1열(세로) 강제 배치 --- */
.form-list.form-list--single {
  grid-template-columns: 1fr;
}

/* 1단 그리드 안에서는 span 2 속성 초기화 (레이아웃 꼬임 방지) */
.form-list.form-list--single > li,
.form-list.form-list--single > li.full-width,
.form-list.form-list--single .radio-group-wrap {
  grid-column: span 1 !important;
}

/* --- 폼 내 질문/소제목 스타일 --- */
.form-list li.question-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1C213B !important; /* 다크 네이비 텍스트 */
  
  /* 왼쪽에 라임색 포인트 선 추가 */
  border-left: 4px solid #B8F400 !important; 
  padding: 2px 0 2px 12px !important; /* 선과 글씨 사이 간격 */
  
  margin: 15px 0 5px 0 !important; /* 위아래 여백 조정 */
  background: transparent !important;
  list-style: none !important;
}

/* 모바일 화면 처리 */
@media (max-width: 768px) {
  .form-list li.full-width,
  .radio-group-wrap {
    grid-column: span 1;
  }
}


/* =========================================
   사전등록 확인 페이지
========================================= */

/* =========================================
   사전등록 확인 - 안내 박스 스타일 (심플 버전)
========================================= */

/* 1. 박스 테두리 제거 및 폼과의 구분선 추가 */
.notice-box {
  background-color: transparent; /* 칙칙한 배경색 제거 */
  border: none; /* 거슬리는 테두리 제거 */
  padding: 0 0 35px 0; /* 하단 여백만 남김 */
  margin: 0 auto 35px;
  max-width: 600px;
  /* 텍스트 영역과 아래 입력 폼을 분리해 주는 깔끔한 가로선 */
  border-bottom: 1px solid #e2e8f0; 
}

/* 2. 리스트 스타일 유지 (좌측 정렬이 읽기 편함) */
.notice-box .chk-notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notice-box .chk-notice-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  color: #334155;
  font-size: 15px;
  line-height: 1.6;
}

.notice-box .chk-notice-list li strong {
  color: #1C213B;
  font-weight: 700;
}

.notice-box .chk-notice-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background-color: #1C213B;
  border-radius: 50%;
}

/* 3. 문의처 영역을 테두리 없는 '면'으로 처리 */
.notice-box .chk-contact-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* 가운데로 정렬하여 시선 집중 */
  gap: 12px;
  background-color: #f8fafc; /* 테두리 없이 아주 연한 회파란색 면만 남김 */
  border: none; /* 테두리 제거 */
  padding: 16px 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.notice-box .contact-label {
  background-color: #1C213B;
  color: #B8F400; 
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

.notice-box .contact-email,
.notice-box .contact-tel {
  font-size: 14.5px;
  font-weight: 600;
  color: #1C213B;
  text-decoration: none;
}

.notice-box .contact-divider {
  color: #cbd5e1;
  font-size: 12px;
}

.notice-box .contact-email:hover {
  text-decoration: underline;
}

/* 4. 모바일 화면 최적화 */
@media (max-width: 768px) {
  .notice-box {
    border-bottom: none; /* 모바일에서는 구분선도 답답할 수 있어 제거 */
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .notice-box .chk-contact-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background-color: transparent; /* 모바일은 좁아서 면도 없애고 심플하게 */
    padding: 10px 0;
  }
  .notice-box .contact-divider {
    display: none;
  }
}

/* 문의처 텍스트 강조 */
.chk-contact { 
  margin-bottom: 40px; 
  text-align: center; 
  font-weight: 700; 
  color: #1C213B;
  font-size: 16px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #e2e8f0; /* 문의처 아래에 점선으로 시각적 분리 */
}

.chk-contact a { 
  color: #1C213B; 
  text-decoration: none;
  transition: color 0.2s ease;
}

.chk-contact a:hover {
  color: #B8F400; /* 이메일 주소에 마우스 올리면 라임색으로 변경 */
}

/* --- 2. 입력 폼 (Table) 모던 디자인 --- */
.chk-form-table { 
  width: 100%; 
  max-width: 500px; /* 너무 넓어지지 않게 너비 제한 */
  margin: 0 auto; 
  border-collapse: separate; /* 테두리를 둥글게 만들기 위해 separate 사용 */
  border-spacing: 0;
  border-radius: 12px; /* 표 전체 모서리를 둥글게 */
  border: 1px solid #cbd5e1; /* 연하고 세련된 테두리 색상 */
  overflow: hidden; /* 둥근 모서리 밖으로 배경이 삐져나가지 않게 */
  box-shadow: 0 4px 10px rgba(28, 33, 59, 0.03); /* 아주 약한 입체감 */
}

/* 왼쪽 항목 이름 영역 */
.chk-form-table th { 
  width: 130px; 
  background-color: #f1f5f9; /* 기존 칙칙한 회색보다 훨씬 밝고 모던한 색 */
  border-right: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1; /* 중간 가로선 */
  padding: 18px 20px; 
  font-weight: 700; 
  color: #1C213B;
  text-align: center; 
  white-space: nowrap; 
}

/* 오른쪽 입력칸 영역 */
.chk-form-table td { 
  border-bottom: 1px solid #cbd5e1; /* 중간 가로선 */
  padding: 0; /* td 자체의 패딩을 없애고 input을 꽉 채움 */
  background-color: #ffffff;
}

/* 표의 마지막 줄은 밑줄 제거 */
.chk-form-table tr:last-child th,
.chk-form-table tr:last-child td {
  border-bottom: none; 
}

/* 입력 필드(input) 투명하게 융화시키기 */
.chk-form-table input { 
  width: 100%; 
  height: 100%; /* td 영역을 꽉 채우도록 설정 */
  border: none; 
  outline: none; 
  font-size: 15px; 
  padding: 18px 20px;
  box-sizing: border-box; 
  color: #333;
  background-color: transparent;
}

/* 인풋 선택 시 배경색 살짝 변경 (피드백) */
.chk-form-table input:focus {
  background-color: #f8fafc;
}

.chk-form-table input::placeholder {
  color: #94a3b8; /* 플레이스홀더 색상을 부드럽게 */
}

/* --- 3. 모바일 반응형 처리 --- */
@media (max-width: 768px) {
  .chk-notice-list {
    text-align: left; /* 모바일에서는 좌측 정렬이 읽기 편함 */
    font-size: 14px;
  }
  .chk-contact {
    font-size: 15px;
    margin-bottom: 30px;
    padding-bottom: 20px;
  }
}