<link href="https://fonts.googleapis.com/css?family=DM+Serif+Text:400,400i&display=swap&subset=latin-ext" rel="stylesheet">

  /* 일반 태블릿 및 소형 데스크톱 */
@media (max-width: 1199px) {
  #s_blank {
    height: 100px;
  }
}

/* 모바일 기기 (스마트폰) */
@media (max-width: 767px) {
  #s_blank {
    height: 100px;
  }
}

/* 데스크톱 */
@media (min-width: 1200px) {
  #s_blank {
    height: 100px;
  }
}

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4); /* 어두운 반투명 오버레이 */
      z-index: 1;
    }

    .banner {
      position: relative;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      z-index: 2;
    }

    .banner-text h1 {
      font-size: 35px;
      color: white;
      margin-bottom: 10px;	  
	  font-family:'Cal Sans', sans-serif;
	   letter-spacing: 0.1em;
    }

    .banner-text p {
      font-size: 18px;
      color: white;
	  font-family:'NanumSquareNeo', sans-serif;
    }

    @media (max-width: 1024px) {
      .banner {
        height: 120px;
        padding: 20px;
      }

      .banner-text h1 {
        font-size: 25px;
      }

      .banner-text p {
        font-size: 14px;
      }
    } 


        /* 1. Wrapper (가로 100%, 바탕색 #fff) */
        .wrapper4 {
            width: 100%;
            background-color: #ffffff;
            padding: 0px 0; /* 상하 여백 추가 */
        }

        /* 2. Container (반응형 설정) */
        .container4 {
            background-color: #ffffff; /* PC/모바일 모두 배경색은 흰색 */
            margin: 0 auto; /* 가운데 정렬 */
            padding: 0 10px; /* 모바일/태블릿 기본 좌우 여백 10px */
            max-width: 100%; /* 기본값 */
        }

        /* PC (min-width 1240px: 1200px 내용 + 20px 패딩) */
        @media (min-width: 1240px) {
            .container4 {
                width: 1200px;
                padding: 0; /* PC에서는 1200px 고정 폭이므로 좌우 여백 제거 */
            }
        }

        /* 태블릿/모바일 (max-width 1239px)에서는 이미 기본 스타일에서 좌우 여백 10px이 적용됨 */
        /* @media (max-width: 1239px) { ... } */


        /* 이용약관 제목 스타일 */
        .header-title {
            text-align: center;
            font-size: 32px;
            font-weight: 700;
            color: #333;
            margin-bottom: 30px;
        }

        /* 약관 내용 박스 스타일 (고급스러움 강조) */
        .terms-box {
            border: 1px solid #ddd;
            border-radius: 12px; /* 둥근 형태 */
            padding: 40px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* 은은한 그림자 */
            background-color: #fff;
            margin-bottom: 40px;
        }

        /* 약관 내용 전체 스타일 */
        .terms-content h2 {
            font-size: 20px;
            color: #1a1a1a;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .terms-content p {
            font-size: 15px;
            color: #555;
            margin-bottom: 25px;
        }

        .terms-content strong {
            display: block;
            font-size: 17px;
            color: #333;
            margin-top: 20px;
            margin-bottom: 10px;
            font-weight: 700;
            border-left: 4px solid #494949; /* 요청된 색상 (#494949) */
            padding-left: 10px;
        }

        .terms-content ul {
            list-style: none;
            padding-left: 15px;
            margin-top: 5px;
            font-size: 14px;
            color: #666;
        }

        .terms-content ul li {
            text-indent: -15px;
            margin-bottom: 5px;
        }

        .terms-content ul li::before {
            content: '※';
            color: #494949; /* 세로바와 동일한 색상으로 통일 */
            margin-right: 5px;
        }

        /* 동의 섹션 */
        .agreement-section {
            display: flex;
            flex-direction: column;
            align-items: center; /* 가운데 정렬로 변경 */
            padding: 0 10px; /* 모바일 여백 유지 */
        }

        @media (min-width: 1240px) {
            .agreement-section {
                padding: 0; /* PC에서는 컨테이너 폭에 맞춤 */
            }
        }

        .agreement-checkbox {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            cursor: pointer;
        }

        .agreement-checkbox input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        .agreement-checkbox label {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }

        /* 예약 신청서 작성하기 버튼 스타일 */
        .submit-button {
            background-color: #494949; /* 요청된 색상 (#494949) */
            color: #fff;
            padding: 15px 30px;
            border: none;
            border-radius: 8px; /* 살짝 둥근 테두리 */
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease; /* 마우스 오버 효과를 위한 트랜지션 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        /* 버튼 마우스 오버/활성 시 특별한 효과 */
        .submit-button:hover {
            background-color: #3a3a3a; /* 조금 더 어두운 색상으로 변경 */
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* 그림자 강화 */
            transform: translateY(-2px); /* 살짝 위로 이동하는 효과 */
        }

        .submit-button:active {
            transform: translateY(0);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        /* 모달 (커스텀 메시지 박스) 스타일 */
        .modal-overlay {
            display: none; /* 초기에는 숨김 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            max-width: 350px;
            width: 90%;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        .modal-content h3 {
            font-size: 20px;
            color: #494949; /* 경고색도 버튼 색상과 통일 */
            margin-bottom: 15px;
        }

        .modal-content p {
            font-size: 16px;
            color: #333;
            margin-bottom: 20px;
        }

        .modal-content button {
            background-color: #494949;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s;
        }

        .modal-content button:hover {
            background-color: #3a3a3a;
        }

        /* 해상도에 따른 글자 크기 조정 (선택적) */
        @media (max-width: 768px) {
            body {
                font-size: 14px;
            }
            .header-title {
                font-size: 26px;
            }
            .terms-box {
                padding: 20px;
            }
            .terms-content strong {
                font-size: 15px;
            }
            .submit-button {
                padding: 12px 25px;
                font-size: 16px;
            }
            .agreement-section {
                padding: 0 20px; /* 모바일에서 더 확실한 좌우 여백 */
            }
        }