@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
}

        /* 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: 24px;
            font-weight: 700;
            color: #333;
            margin-bottom: 30px;
			font-family:'NanumSquareNeo', sans-serif;
        }

        /* 약관 내용 박스 스타일 (고급스러움 강조) */
        .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: 16px;
            color: #1a1a1a;
            margin-bottom: 15px;
            font-weight: 600;
			font-family:'NanumSquareNeo', sans-serif;
        }

        .terms-content p {
            font-size: 14px;
            color: #555;
            margin-bottom: 25px;
			font-family:'NanumSquareNeo', sans-serif;
        }

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

        .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: 15px;
            font-weight: 600;
            color: #333;
			font-family:'NanumSquareNeo', sans-serif;
        }

        /* 예약 신청서 작성하기 버튼 스타일 */
        .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);
			font-family:'NanumSquareNeo', sans-serif;
        }

        /* 버튼 마우스 오버/활성 시 특별한 효과 */
        .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: 16px;
            color: #494949; /* 경고색도 버튼 색상과 통일 */
            margin-bottom: 15px;
			font-family:'NanumSquareNeo', sans-serif;
        }

        .modal-content p {
            font-size: 14px;
            color: #333;
            margin-bottom: 20px;
			line-height: 150%;
			font-family:'NanumSquareNeo', sans-serif;
        }

        .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: 20px;
            }
            .terms-box {
                padding: 20px;
            }
            .terms-content strong {
                font-size: 14px;
            }
            .submit-button {
                padding: 12px 25px;
                font-size: 16px;
            }
        .terms-content h2 {
            font-size: 15px;
        }
        .terms-content p {
            font-size: 13px;
        }		

        .agreement-checkbox label {
            font-size: 13px;
        }
            .agreement-section {
                padding: 0 20px; /* 모바일에서 더 확실한 좌우 여백 */
            }
        }