/* style.css */

/* 전체 문서 설정 (선택 사항: CSS 기반 부드러운 스크롤) */
/* html {
    scroll-behavior: smooth; 
} */

body {
    margin: 0;
    font-family: sans-serif;
	
}

.mo_br {display:none;}

/* 📌 헤더 고정 설정 */
#header {
    position: fixed; /* 화면 상단에 고정 */
    top: 0;         
    left: 0;        
    width: 100%;    
    background-color: #fff; 
    color: #333;
    padding: 15px 20px; /* 📌 좌우 패딩 추가 (PC 여백) */
    /* text-align: center; 🛑 기존 중앙 정렬 제거 */
    z-index: 100;   
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    
    /* 📌 PC 레이아웃의 핵심: 로고/메뉴/우측 요소 분리 */
    display: flex;
    justify-content: space-between; /* 양 끝 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
}

/* 메뉴 스타일 */
#header h1 {
    margin: 0; /* 📌 마진 초기화 (PC용) */
    flex-shrink: 0; /* 로고가 줄어들지 않도록 설정 */
}

/* 📌 메뉴 컨테이너 설정 (중앙 정렬을 위해 필요) */
#header nav {
    flex-grow: 1; /* 📌 메뉴가 중앙에 오도록 공간을 확보 */
    text-align: center; 
}

#header ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* 메뉴 항목 자체를 중앙 정렬 */
}

#header li {
    margin: 0 20px;
}

#header a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}



/* 📌 PC 우측 영역 스타일 추가 (index.php에 .header-right 클래스가 있다고 가정) */
.header-right {
    flex-shrink: 0; 
    font-size: 14px;
    margin-right: 35px; /* 📌 미세 조정: 링크 사이 간격으로 인해 발생하는 초과 여백을 상쇄 */
}
.header-right a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    margin: 0 5px; /* 📌 링크 사이 간격은 유지 */
}

/* 섹션 기본 스타일 (테스트 용) */
section {
    padding: 30px 20px 0px 20px;
    text-align: center;
}

#section1 {
    /* padding-top은 JS에서 동적으로 설정됩니다. */
    background-color: #ffffff;
	h2 {font-size:2.2em; margin-bottom:10px;}
}

#section2 {
    background-color: #ffffff;
	h2 {font-size:2.2em; margin-bottom:10px;}
}

#section3 {
    border:0px solid #333;
text-align:center;
padding:100px 0;
background: #fede63;
background: -moz-linear-gradient(-45deg, #fede63 0%, #f8dd76 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, #fede63), color-stop(100%, #f8dd76));
background: -webkit-linear-gradient(-45deg, #fede63 0%, #f8dd76 100%);
background: -o-linear-gradient(-45deg, #fede63 0%, #f8dd76 100%);
background: -ms-linear-gradient(-45deg, #fede63 0%, #f8dd76 100%);
background: linear-gradient(135deg, #fede63 0%, #f8dd76 100%);
}




/* 1. 데스크톱 기본 레이아웃 (가로 4개) */
.responsive-cards-container {
    display: flex; 
    flex-wrap: wrap; 
    
    /* 📌 [수정] space-between 대신 flex-start를 사용하여 왼쪽 정렬 유지 */
    justify-content: flex-start; 
    
    /* 📌 [추가] Flexbox의 gap 속성을 사용하여 항목 간의 간격을 일정하게 설정 */
    gap: 20px; /* 카드 사이의 가로 및 세로 간격 (20px은 예시) */
    
    padding: 20px 0;
}

.card {
    /* 📌 [수정] 카드 너비 계산을 gap에 맞게 조정 (총 3개의 갭이 필요) */
    /* (100% - 3 * 20px) / 4 */
    width: calc((100% - 60px) / 4); 
    
    /* 기존 margin-bottom: 20px; 은 gap으로 대체되므로 제거 */
    margin-bottom: 0;
    
    /* 카드 디자인 */
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
}


/* 메인 비주얼 */
.main_visual {position:relative; width:100%; height:60vh;border:0px solid #333; overflow:hidden; }
.main_visual::before {content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; opacity:.32; background:#000;}
.main_visual::after {content:''; position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; opacity:0; background:linear-gradient(180deg, #007EC3 4.93%, #0F35B0 89.3%); transition:opacity .4s ease;}

.main_visual.bgchange::before {opacity:0; transition:opacity .5s ease-out;}
.main_visual.bgchange::after {opacity:.9; background:linear-gradient(180deg, #007EC3 4.93%, #0F35B0 89.3%);}

.main_visual .full {width:100%; height:100%;}
.main_visual .full video {position:relative; z-index:-1; top:50%; left:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; width:auto; height:100%; object-fit:cover;}

.main_visual .txt {position:absolute; z-index:3; top:25%; left:50%; transform:translate(-50%,-50%); width:1500px; text-align:center;}
.main_visual .txt > em {display:block; position:relative; z-index:1; margin:0 auto; text-indent:-9999px; background-repeat:no-repeat; background-size:contain; background-position:center;}
.main_visual .txt > h3 {position:relative; z-index:5; margin-bottom:30px; color:#fff; font-size:72px; font-weight:600; word-break:keep-all;text-shadow:0px 0px 10px rgba(0,0,0,0.5),0px 0px 14px rgba(0,0,0,0.5),0px 0px 10px rgba(0,0,0,0.5); -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; transition-duration: 0.3s; transition-timing-function: ease;}
.main_visual .txt > h3 span {font-weight:600;}
.main_visual .txt > p {color:#fff; font-size:36px; line-height:1.4; font-weight:500;word-break:keep-all;text-shadow:0px 0px 10px rgba(0,0,0,0.5),0px 0px 14px rgba(0,0,0,0.5),0px 0px 10px rgba(0,0,0,0.5); -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; transition-duration: 0.3s; transition-timing-function: ease;}

.main_visual .txt01 > em {top:34px; width:315px; height:280px; background-image:url(../images/pic/pic_new_visual_txt01.png);}
.main_visual .txt01 > h3 span {color:#fede63;}
.main_visual .txt01 > p span {color:#fede63;}
.main_visual .txt02 > em {top:120px; width:929px; height:250px; background-image:url(../images/pic/pic_new_visual_txt02.png);}



/* 2. 반응형 미디어 쿼리 (모바일 환경) */
/* 화면 너비가 768px 이하일 때 적용 */
@media (max-width: 768px) {


.mo_br {display:block !important;}

    
    /* 컨테이너의 정렬 방식 변경 */
    .responsive-cards-container {
        flex-direction: column; /* 카드를 세로 방향으로 쌓음 */
        gap: 20px; /* 카드 간의 간격 설정 (세로 간격) */
        padding: 20px 0; /* 모바일에서도 패딩 유지 */
    }

    .card {
        /* 📌 수정: 모바일에서는 가로 폭 전체 사용 (100%)을 !important로 강제 적용 */
        width: 100% !important; 
        
        /* 📌 수정: flexbox 내에서 늘어나지 않도록 기본값 설정 */
        flex-shrink: 0; 
        flex-basis: auto; 
        
        margin-bottom: 0; /* 세로로 쌓을 때 하단 여백 제거 (gap으로 대체) */
    }

    /* 📌 주요 수정: 가격 표시도 전체 너비를 사용하도록 설정 */
    .price-display {
        /* margin: 0 auto; 제거하여 좌측 정렬 유지 */
        text-align: left;
    }

    /* 📌 메인 비주얼 모바일 스타일 추가 (선택 사항: 텍스트 크기 축소) */
    .main_visual {
        height: 40vh; /* 모바일에서 높이 줄임 */
    }

    .main_visual .txt > h3 {
        font-size: 36px;
        margin-bottom: 15px;
    }
    .main_visual .txt > p {
        font-size: 18px;
    }
    /* 텍스트 위치도 중앙으로 이동 */
    .main_visual .txt {
        top: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
    }
	
	
	
	
		/* 메인 비주얼 */
	.main_visual .txt > h3 {font-size:36px;}
	.main_visual .txt > p {font-size:20px;}

	.main_visual .txt01 > em {width:160px; height:92px;}
	.main_visual .txt02 > em {top:24px; width:260px; height:70px;}
	
	
	
	
	
	
	
	/* 📌 [추가] 모바일 헤더: 다시 중앙 정렬로 변경 */
    #header {
        flex-direction: column; /* 요소를 세로로 쌓음 */
        justify-content: center;
        align-items: center;
        padding: 15px 0; /* 좌우 패딩 제거, 상하 패딩만 유지 */
        height: auto;
    }

    /* 📌 [추가] nav와 우측 영역을 로고 아래로 이동 */
    #header nav {
        flex-grow: 0; /* 공간 확보 역할 해제 */
        width: 100%; 
        margin-top: 10px;
    }
    
    .header-right {
        margin-top: 10px; /* 메뉴 아래 간격 확보 */
        text-align: center;
    }

    /* 메뉴 항목을 가운데 정렬 */
    #header ul {
        justify-content: center;
    }
	
	
	

	
	
}




/* ============================================== */
/* 07. 폼 스타일 (Form) */
/* ============================================== */

.contact-form {
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0;
}

/* 2열 필드 그룹 */
.form-row {
    display: flex; 
    gap: 20px; 
    margin-bottom: 20px;
}

/* 입력 필드 공통 스타일 */
.form-row input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
    font-size: 16px;
    transition: border-color 0.3s;
}

/* 2열 필드는 균등 너비 */
.form-row input {
    flex-grow: 1;
}

/* 텍스트 영역 */
.contact-form textarea {
    margin-bottom: 20px;
    resize: vertical; 
}

/* 제출 버튼 */
.submit-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.submit-btn:hover {
    background-color: #0056b3;
}

/* 기존 #close-contact-btn 스타일을 X 버튼용으로 완전히 대체/수정합니다. */
#close-contact-btn {
    position: absolute;
    top: 30px; /* 팝업의 최상단 */
    right: 30px; /* 팝업의 최우측 */
    
    background-color: transparent; /* 배경색 제거 */
    color: #fff; /* X 버튼 색상 (배경색과 대비되도록 흰색으로 설정) */
    font-size: 40px; /* 버튼 크기 */
    font-weight: 300;
    line-height: 1;
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    z-index: 1020; /* 모달 내용보다 위에 표시 */
}

#close-contact-btn:hover {
    color: #e74c3c;
}






/* 📌 지도 모달 (전체 화면을 덮는 반투명 배경) */
#kakao-map-modal, #contact-form-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 검은색 배경 */
    z-index: 1000; /* 헤더보다 위에 표시 */
    display: none; /* 초기에는 숨김 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
}

/* 지도 컨테이너 (실제 지도가 들어갈 박스) */
#map-container {
    width: 90%; /* 모달 너비 */
    max-width: 800px; 
    height: 80%; /* 모달 높이 */
    max-height: 650px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    padding: 10px;
    position: relative;
    box-sizing: border-box;
}

/* 실제 지도가 표시될 영역 */
#map-display {
    width: 100%;
    height: calc(100% - 40px); /* 닫기 버튼을 위한 공간 확보 */
    border-radius: 5px;
}

/* 닫기 버튼 */
#close-map-btn {
    position: absolute;
    bottom: 10px;
    right: 20px;
    padding: 8px 15px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 모달 표시용 클래스 */
.is-visible {
    display: flex !important;
}


/* style.css 파일의 .modal 및 .modal-content 스타일 수정 */
/* 📌 [수정/추가] #privacy-modal의 Z-Index를 더 높게 설정 */
#privacy-modal {
    z-index: 1020; /* 기존 모달(.modal: 1010)보다 높게 설정 */
}

/* 📌 .modal: Flexbox 정렬 및 전체 화면 고정 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px); /* 닫기 버튼을 위한 공간 확보 */
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 1010; 
    display: none; 
    
    /* ✅ 현재 설정: 수직/수평 중앙 정렬 */
    align-items: center;    /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    
    /* 내용이 길어도 중앙 정렬을 유지하도록 설정 */
    overflow-y: auto; 
}

/* ---------------------------------------------------- */
/* 📌 .modal-content: 모달 내부 박스 (X 버튼 공간 확보) */
/* ---------------------------------------------------- */

/* #contact-form-modal에 사용된 .modal-content 클래스 */
.modal-content {
    /* 기존 스타일 유지 */
    background-color: white;
    padding: 10px; /* 폼 내용이 꽉 차도록 패딩은 0으로 유지 (제목 영역에서 간격 확보) */
    border-radius: 25px;
    width: 90%;
    max-width: 900px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: relative;
    
    margin: auto; 
    margin-top: 20px;
    margin-bottom: 20px;
}

/* 📌 .modal-content2: 모달 내부 박스 수정 */
.modal-content2 {
    background-color: white;
    /* 📌 [수정] 닫기 버튼을 위한 상단 패딩 추가 */
    padding: 20px 20px 20px 20px; 
    /* 닫기 버튼이 겹치지 않도록 상단 패딩을 늘릴 수 있습니다. */
    /* 예: padding: 40px 20px 20px 20px; */ 

    border-radius: 25px;
    width: 90%;
    max-width: 600px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: relative;
    
    /* 🎁 수직 중앙 정렬 시 필요한 핵심 속성 */
    margin: 0 auto; 
    
    /* 모바일 환경에서 상하 여백 확보 (모바일 화면이 작을 때 필수) */
    margin-top: 20px;
    margin-bottom: 20px;
}

/* 📌 [추가] 모달 내용 텍스트 영역 스타일 */
.policy-text {
    max-height: 400px; /* 내용 영역 최대 높이 */
    overflow-y: auto; /* 내용이 넘칠 경우 스크롤 */
    padding: 10px;
    border: 1px solid #eee;
    margin-bottom: 20px;
}

/* 📌 [추가] 모달 닫기 버튼 공통 스타일 */
.close-modal-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.close-modal-btn:hover {
    background-color: #0056b3;
}



/* 카드 내부에 버튼 정렬을 위한 Flexbox 추가 */
.card {
/* 기존 스타일 유지 */
   /* (100% / 4) - 여백 */
    width: calc(25% - 15px);
    margin-bottom: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; 
	position: relative; 
    overflow: hidden;
	h3 {font-size:1.8em; margin-bottom:10px;}
    
    /* 📌 주요 수정: 카드 내부 콘텐츠를 세로로 정렬하지만, 버튼만 가로 정렬을 위해 div로 묶음 */
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
}

/* ---------------------------------- */
/* 🏅 배지 (메달/리본) 스타일 시작 */
/* ---------------------------------- */

/* 1. 배지 기본 스타일 및 배치 */
.card-label {
    position: absolute;
    top: 0; /* 우측 상단 모서리 시작 */
    right: 0;
    
    /* 디자인 */
    padding: 8px 15px; 
    font-size: 13px;
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 1;
    z-index: 50; 
}

/* ---------------------------------------------------- */
/* 📌 1. 애니메이션 정의 (파일 상단 또는 별도 CSS 블록에 추가) */
/* ---------------------------------------------------- */
@keyframes blink {
    0% {
        opacity: 1; /* 완전히 불투명 */
    }
    50% {
        opacity: 0.3; /* 반투명 */
    }
    100% {
        opacity: 1; /* 다시 불투명 */
    }
}


/* ---------------------------------------------------- */
/* 📌 2. 'SALE' 라벨 스타일 수정 */
/* ---------------------------------------------------- */
.sale-label {
    background-color: #ff555f; /* 선명한 빨간색 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    /* 💥 핵심: 깜빡이 애니메이션 적용 */
    animation: blink 1.5s infinite alternate; /* blink 애니메이션을 1.5초 주기로 무한 반복, 왕복 모드로 적용 */
}

/* 리본 꼬리 모양 구현을 위한 가상 요소 (변경 없음) */
.sale-label::before {
    content: "";
    position: absolute;
    bottom: -10px; /* 라벨 아래로 돌출 */
    left: 0;
    width: 0;
    height: 0;
    /* 꼬리 부분의 삼각형 모양 */
    border-top: 10px solid #ff555f; /* 배경색과 동일 */
    border-left: 10px solid transparent; /* 좌측은 투명 */
}

/* 3. 'NEW' 라벨 스타일 (원형 메달 형태) */
.new-label {
    background-color: #3498db; /* 선명한 파란색 */
    top: 10px; /* 상단에서 조금 띄움 */
    right: 10px; /* 우측에서 조금 띄움 */
    width: 45px; /* 원형 지름 */
    height: 45px; /* 원형 지름 */
    line-height: 45px; /* 텍스트를 수직 중앙 정렬 */
    border-radius: 50%; /* 원형 메달로 변환 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    padding: 0; /* 원형으로 만들었으므로 패딩 제거 */
    
    /* 원형은 꼬리 (::before)를 제거 */
}
.new-label::before {
    display: none; 
}

/* ---------------------------------- */
/* 🏅 배지 스타일 끝 */
/* ---------------------------------- */


/* -------------------------------------- */
/* 📌 가격 표시 영역 스타일 */
/* -------------------------------------- */
.price-display {
    padding: 15px 0;
    margin-top: 10px;
    border-top: 1px solid #eee;
}

.price-group {
    display: flex;
    justify-content: space-between; /* 항목을 양 끝으로 배치 */
    align-items: center;
    padding: 8px 0;
}

/* 6개월/12개월 기간 표시 */
.price-group .term {
    font-size: 15px;
    color: #000;
    font-weight: 500;
}

/* 가격 글자 그룹 */
.price-group .price {
    display: flex;
    align-items: center;
}

/* 최종 가격 강조 */
.price-group .final-price1 {
    font-size: 18px;
    font-weight: 500;
    color: #ff555f; /* 강조 색상 */
    margin-left: 8px;
}
/* 최종 가격 강조 */
.price-group .final-price {
    font-size: 18px;
    font-weight: 800;
    color: #ff555f; /* 강조 색상 */
    margin-left: 8px;
}

/* 할인/특가 라벨 */
.discount-label {
    display: inline-block;
    padding: 3px 6px;
    background-color: #007bff; /* 기본 특가 배경색 */
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 5px;
}

/* 12개월 초특가 강조 라벨 */
.discount-label.sale {
    background-color: #ff555f; /* 초특가 배경색 (빨간색 계열) */
}
/* 12개월 그룹 강조 (선택 사항: 배경색이나 테두리 추가) */
.price-group.highlighted1 {
    background-color: #fff; /* 연한 노란색 배경 */
    border-radius: 4px;
    padding: 8px;
    margin: 1px 0;
    border: 1px dashed #fff;
}
/* 12개월 그룹 강조 (선택 사항: 배경색이나 테두리 추가) */
.price-group.highlighted {
    background-color: #fff7e6; /* 연한 노란색 배경 */
    border-radius: 4px;
    padding: 8px;
    margin: 8px 0;
    border: 1px dashed #ffcc00;
}

/* 구분선 (두 가격 사이) */
.price-divider {
    border: 0;
    border-top: 1px dashed #ddd; /* 점선 구분선 */
    margin: 5px 0;
}


/* -------------------------------------- */
/* 📌 부가세 및 월 실질 비용 정보 스타일 */
/* -------------------------------------- */
.sub-price-info {
    font-size: 11px; /* 글꼴 크기를 작게 설정 */
    color: #888;     /* 회색 톤으로 설정하여 보조 정보임을 표시 */
    text-align: right;
    margin-top: -5px; /* 가격 그룹과 간격 조절 */
    margin-bottom: 10px;
}

/* 12개월 강조 그룹의 보조 정보 스타일 */
.sub-price-info.highlighted-info {
    color: #333; /* 강조된 그룹에서는 조금 더 진한 색 사용 */
    font-weight: 500;
}





/* 📌 버튼들을 담을 새로운 컨테이너 스타일 추가 */
.button-group {
    display: flex; /* Flexbox로 가로 정렬 */
    gap: 10px; /* 버튼 간격 설정 */
    margin-top: 15px; /* 내용과 버튼 그룹 사이 간격 */
}

/* 버튼 스타일 수정 */
.action-btn {
    padding: 8px 10px;
    /* margin-top: 10px; -> button-group의 margin-top으로 대체 */
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    width: 50%; /* 📌 수정: 버튼이 가로 공간을 반씩 나누어 갖도록 설정 */
    box-sizing: border-box;
}

/* 문의 버튼 스타일 */
.contact-btn {
    background-color: #fede63;
    color: #3c1e1e;
    border: 1px solid #3c1e1e;
    order: 2; /* 버튼 순서 조정 (선택 사항) */
}

/* 지도 버튼 스타일 */
.map-btn {
    background-color: #f8f9fa;
    color: #333;
    border: 1px solid #ced4da;
    order: 1;
}

.contact-btn:hover {
    background-color: #3c1e1e;
    color: #fede63;
}

.map-btn:hover {
    background-color: #e2e6ea;
}




.privacy-agreement {
    margin-top: 10px; 
    margin-bottom: 10px; 
    text-align: left; 
    
    /* 📌 [핵심 수정] Flexbox를 사용하여 내부 요소 수직 정렬 */
    display: flex;
    align-items: center; /* 모든 자식 요소를 수직 중앙 정렬 */
    
    /* 폰트 크기 및 색상 재설정 (여기서 설정하면 토글 버튼 옆 텍스트에 적용됨) */
    font-size: 14px; 
    color: #555;
}

/* 토글 버튼 옆 텍스트의 간격을 위한 스타일 (필요하다면 추가) */
.privacy-agreement .agreement-text-container {
    margin-left: 10px; /* 토글 버튼과 텍스트 사이 간격 */
    display: flex; /* 텍스트 컨테이너 내의 링크/텍스트 정렬 */
    align-items: center; 
}

/* 토글 버튼 레이블 (.tgl-btn)은 이미 높이가 25px로 고정되어 있습니다. */

/* 링크 스타일은 그대로 유지 */
.privacy-agreement a {
    color: #007bff;
    text-decoration: underline;
    /* <strong> 태그가 포함되어 있으므로, <strong>에도 폰트 사이즈가 상속되도록 보장 */
    font-size: 14px; 
}

/* -------------------------------------- */
/* 📌 고정 하단 버튼 스타일 */
/* -------------------------------------- */
.fixed-contact-button {
    position: fixed; /* 뷰포트에 고정 */
    bottom: 5px;      /* 화면 하단에 위치 */
    left: 0;
    width: 100%;    /* 화면 전체 너비 사용 */
    padding: 10px 15px; /* 내부 여백 */
    /* 기존 버튼 스타일과 일치하도록 조정 (예시) */
    box-sizing: border-box;
    z-index: 1000;  /* 다른 요소 위에 표시 */
    /*background: rgba(255, 255, 255, 0.5); /* 반투명 배경 */
    /*box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);*/
    text-align: center; /* 버튼을 중앙에 배치 */
}

/* 📌 버튼 스타일 (스크립트에서 이미 사용 중인 .action-btn을 사용하지만, 크기를 키웁니다) */
.fixed-contact-button .action-btn {
    width: 100%; /* 버튼이 부모(fixed-contact-button) 너비를 꽉 채우도록 */
    max-width: 500px; /* 데스크톱에서 너무 커지지 않도록 최대 너비 제한 */
    height: 80px; /* 버튼 높이 증가 */
    font-size: 18px; /* 글꼴 크기 증가 */
    font-weight: bold;
    /* 기존 버튼 스타일과 일치하도록 조정 (예시) */
    background-color: #333; 
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px; /* 내부 여백 */
    cursor: pointer;
    transition: background-color 0.3s;
}

/* 호버 효과 (데스크톱용) */
.fixed-contact-button .action-btn:hover {
    color: #e6b800;
}

/* 모바일 환경에서만 버튼이 보이고 싶다면 (선택 사항) */
/*
@media (min-width: 768px) {
    .fixed-contact-button {
        display: none; 
    }
}
*/