/* =======================
   기본 스타일 리셋
======================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* 배경색, 폰트 설정 등 */
  body {
    font-family: "Inter", sans-serif;
    background-color: #fff;
    color: #333;
    margin-top: 80px;
    font-family: 'Noto Sans KR', sans-serif;
  }
  
  /* =======================
     페이지 공통
  ======================= */
  .booking-page {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* 큰 섹션 제목 스타일 */
  .survey-title {
    font-size: 2.5rem;
    font-weight: bolder;
    margin-top: 120px;
    margin-bottom: 16px;
    text-align: center;
  }
  
  /* ===== 상단 소개 섹션 ===== */
.intro-section {
    max-width: 1200px;
    max-height: 200px;
    margin: 2rem auto;     /* 가운데 정렬을 위해 auto 마진 */
    display: flex;         /* 플렉스 컨테이너로 설정 */
    flex-direction: row;   /* 가로 배치 */
    justify-content: center; 
    gap: 2rem;             /* 카드들 사이 간격 */
    padding: 0 1.5rem;
    
  }
  
  .intro-block {
    width: 500px;
    display: flex;
    flex-direction: column;  
    align-items: left;      /* 아이콘, 텍스트 모두 중앙 정렬 */
    text-align: left;       
    gap: 0.5rem;              
    background-color: #fff;
    padding: 1rem;
        
  }
  
  /* 아이콘 */
  .intro-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }
  
  /* 텍스트 설명 */
  .intro-text h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
  }
  
  .intro-text p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
  }
  
  
  /* ===== 설문조사 폼 ===== */
  .survey-container {
    max-width: 600px;
    margin: 2rem 230px;
    padding: 2rem;
    background-color: #fff;
    border-radius: 8px;
    /* 얕은 그림자 (옵션) */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    
  }
  
  /* 질문 하나를 감싸는 fieldset 스타일 */
  .survey-question {
    border: none;
    margin-bottom: 2rem;
    padding: 0;
    border-bottom: 1px solid #eee; /* 구분선 */
  }
  .survey-question:last-of-type {
    border-bottom: none; /* 마지막 질문은 구분선 제거 */
    margin-bottom: 1.5rem;
  }
  
  /* 질문 제목 (legend) */
  .survey-question legend {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
  }
  
  /* 라디오/체크박스 선택지 */
  .survey-question label {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    cursor: pointer;
    line-height: 1.4;
  }
  
  /* 텍스트 입력창 */
  .survey-question input[type="text"] {
    width: 100%;
    max-width: 100%;
    padding: 0.8rem;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 6px;
  }
  .survey-question input[type="text"]:focus {
    outline: none;
    border-color: #666;
  }
  
  /* 오류 메시지 스타일 */
  .error-message {
    font-size: 0.85rem;
    color: red;
    margin-top: 5px;
    display: none; /* 기본적으로 숨김 */
  }
  .error-message.visible {
    display: block;
  }
  
  /* ===== 제출 버튼 스타일 ===== */
  .submit-button {
    display: block;
    width: 500px;
    margin: 2rem 250px; /* 위쪽 여백 2rem */
    font-family: 'Noto Sans KR', sans-serif;
    padding: 1rem 0;
    border: none;
    border-radius: 30px;
    background-color: #000;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .submit-button:hover {
    background-color: #333;
  }
  
  /* ===== 푸터 ===== */
  footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.9rem;
    color: #666;
    background-color: #fff;
    margin-top: 2rem;
  }
  
  /* ============================
   반응형 스타일 (max-width: 480px)
============================ */
@media (max-width: 480px) {
  /* 페이지 공통 */
  .booking-page {
      padding: 10px;
  }
  
  /* 섹션 제목 */
  .survey-title {
      font-size: 1.75rem;
      margin-top: 80px;
      margin-bottom: 10px;
  }
  
  /* 상단 소개 섹션 */
  .intro-section {
    gap: 0.75rem;
    margin: 1rem auto;
    padding: 0 0.5rem;
  }
  .intro-block {
      width: 100%;
      padding: 0.75rem;
  }
  .intro-text h2 {
      font-size: 0.95rem;
  }
  .intro-text p {
      font-size: 0.85rem;
  }
  
  /* 설문조사 폼 */
  .survey-container {
      max-width: 100%;
      margin: 1rem auto;
      padding: 1rem;
  }
  
  /* 질문 제목 및 선택지 */

  .survey-container {
    width: 90%;
    padding: 10px;
  }
  .survey-question {
    margin-bottom: 15px;
  }
  .survey-question legend {
    font-size: 16px;
  }
  .survey-question input,
  .survey-question label {
    font-size: 14px;
  }
  .submit-button {
    position: relative;
    margin: 20px auto;  /* 위 아래 20px 여백, 좌우는 auto로 중앙 정렬 */
    display: block;
    width: 90%;         /* 버튼 너비를 화면의 90%로 지정 (필요 시 조정) */
    font-size: 16px;
    padding: 12px;
  }
  
  /* 푸터 */
  footer {
      padding: 0.75rem;
      font-size: 0.8rem;
  }
}
@media (max-width: 900px) {
  #loginNotice {
    margin-top: 80px; /* 모바일 화면에서는 여백을 더 줄 수 있음 */
  }
}