/* 전체 배경 색 설정 */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #bbfaff;
}

/* 상단 intro.png 이미지 배경 */
.intro-section {
    width: 100%;
    aspect-ratio: 16 / 9; /* 이미지의 가로:세로 비율을 설정 (예: 16:9) */
    background-image: url('../images/intro.png');
    background-size: contain; /* 이미지를 비율에 맞게 전체 표시 */
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    background-position: center; /* 이미지를 가운데 정렬 */
}

/* 폼 컨테이너 스타일 */
.form-container {
    background-color: #ffffff;
    margin: -200px auto 0;
    width: 70%;
    max-width: 900px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}


.result-container {
  background-color: #ffffff;
  margin: -200px auto 0;
  width: 90%;
  /*max-width: 900px;*/
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}



/* 폼 제목 스타일 */
.form-container h1 {
    text-align: center;
    margin-top: 0;
}

/* 폼 내부 요소 스타일 */
form {
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
}

select, textarea, button {
    margin-top: 5px;
    padding: 10px;
    font-size: 14px;
}

textarea {
    resize: vertical;
    min-height: 80px;
}

button {
    margin-top: 20px;
    background-color: #00aaff;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #0088cc;
}



/* 초록색 버튼 스타일 */
.green-button {
  background-color: #2ecc71; /* 기본 초록색 */
}

.green-button:hover {
  background-color: #27ae60; /* 어두운 초록색 */
}

/* 빨간색 버튼 스타일 */
.red-button {
  background-color: #e74c3c; /* 기본 빨간색 */
}

.red-button:hover {
  background-color: #c0392b; /* 어두운 빨간색 */
}

/* 노란색 버튼 스타일 */
.yellow-button {
  background-color: #f1c40f; /* 기본 노란색 */
  color: #333; /* 가독성을 위해 텍스트 색 변경 */
}

.yellow-button:hover {
  background-color: #d4ac0d; /* 어두운 노란색 */
}
















/* 미디어 쿼리 추가 */
@media screen and (max-width: 1024px) {
  .form-container {
      width: 80%;
      max-width: 700px;
  }
}

@media screen and (max-width: 768px) {
  .form-container {
      width: 90%;
      max-width: 600px;
      margin-top: -150px; /* 모바일에서 폼이 너무 위로 가는 문제 해결 */
  }

  .intro-section {
      aspect-ratio: 4 / 3; /* 모바일에서 더 보기 좋게 조정 */
      background-size: contain;
  }

  /* 모든 버튼을 전체 너비로 적용 */
  .txc-textbox button,
  .txc-textbox .green-button {
    width: 100% !important; /* 강제 적용 */
      margin-bottom: 10px;
  }
}

@media screen and (max-width: 480px) {
  .form-container {
      width: 95%;
      max-width: 100%;
      margin-top: -100px;
  }

  .intro-section {
      aspect-ratio: 1 / 1; /* 정사각형 비율로 변경 */
  }

  /* 모든 버튼을 전체 너비로 적용 */
  .txc-textbox button,
  .txc-textbox .green-button {
      font-size: 14px; /* 작은 화면에서 버튼 텍스트 크기 조정 */
  }
}

/* 기본 스타일: 1행 2열 (PC 환경) */
.txc-textbox table {
  width: 100%;
  border-collapse: collapse;
}

.txc-textbox tr {
  display: flex;
  flex-direction: row; /* 기본적으로 가로 정렬 */
}

.txc-textbox td {
  padding: 10px;
}

/* 화면이 좁아지면 2행 1열 (세로 정렬) */
@media screen and (max-width: 768px) {
  .txc-textbox tr {
      flex-direction: column; /* 세로 정렬 */
      align-items: center; /* 가운데 정렬 */
  }

  .txc-textbox td {
      width: 100% !important; /* 가로 너비 100% */
      text-align: center; /* 텍스트 중앙 정렬 */
  }

  .txc-textbox td img {
      max-width: 80%; /* 이미지 크기 조정 */
      height: auto;
  }
}













/*알람창*/
.alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  .alert-box {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /*max-width: 400px;*/
    width: 90%;
  }
  
  .alert-box p {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
  }
  
  .alert-buttons {
    display: flex;
    justify-content: space-around;
  }
  
  .alert-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    background-color: #2ecc71;
    color: white;
  }
  
  .alert-buttons button:hover {
    opacity: 0.9;
  }

  /* 화면 하단에 그라데이션 효과 */
.footer-gradient {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px; /* 원하는 높이 설정 */
  background: linear-gradient(to top, #bbfaff, rgba(255, 255, 255, 0));
  z-index: 5; /* 본문 위에 배치 */
  pointer-events: none; /* 클릭을 방해하지 않도록 설정 */
}

  /*닫기 버튼*/
  .close-buttons {
    position: fixed; /* 화면에 고정 */
    bottom: 50px;    /* 화면 하단에서 20px 위에 위치 */
    left: 50%;       /* 수평 중앙 정렬 */
    transform: translateX(-50%); /* 정확히 중앙으로 이동 */
    display: flex;
    justify-content: center; /* 버튼 중앙 정렬 */
    pointer-events: auto; /* 클릭 가능하도록 설정 */
}

.close-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    background-color: #cc2ea2;
    color: white;
}

.close-buttons button:hover {
    opacity: 0.9;
}



  /*설문조사 라디오 그룹*/
.radio-group {
  text-align: center;
  margin-top: 5px;/*문제-응답 간격*/
}
.radio-group label {
  display: inline-block;
  text-align: center;
  margin: 0 10px; /* 고정된 간격 */
 /* width: 70px; /* 고정된 너비 설정 */
}
.radio-group label span {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}
.radio-group input {
  margin-top: 5px;/*보기텍스트-응답 간격*/
}

.table-container {
  display: table;
  width: 100%; /* 표 전체 너비 */
  border-collapse: collapse; /* 테두리 겹침 제거 */
}

.table-row {
  display: table-row; /* 각 행을 테이블 행으로 처리 */
}

.table-cell {
  display: table-cell;
  text-align: center; /* 텍스트 중앙 정렬 */
  vertical-align: middle; /* 세로 중앙 정렬 */
  border: 0px solid #ccc; /* 셀 테두리 */
  padding: 5px; /* 셀 안쪽 여백 */
  background-color: #d7d7d7; /* 셀 배경색 추가 */
}

.table-cell label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 스티키 호버 */
#stickyHeader {
  position: relative;
  background-color: white;
  z-index: 1000;
}

#stickyHeader.sticky {
  position: fixed;
  top: 20px;
  /*중앙정렬*/
  left: 50%;
  transform: translateX(-50%);

  width: 70%;
  max-width: 900px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
}


/* 버튼 리스트 */

ul {
  list-style: none; /* 기본 리스트 스타일 제거 */
  padding: 0;
}

li {
  margin-bottom: 10px;
}