/* 기본 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    object-fit: contain;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(#1c2333, #32394a);
}

.container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 20px 20px 20px;
}

header {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 25px;
}

.logo {
    width: 100%;
    max-width: 195px;
    height: auto;
}

/* 슬라이드 */
.slider-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 3%;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    text-align: center;
}

.banner-image {
    width: 100%;
    height: auto; /* 비율 유지 */
    position: relative;  /* 슬라이드 내부에서 버튼 위치 고정 */
}

.dots-container {
    position: absolute;
    bottom: 14%;
    left: 96%;
    transform: translateX(-50%);
    display: flex;
    /* text-align: center; */
}

.dot {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #717171;
}

.btn-container {
    position: absolute;
    bottom: 30px; /* 배너 아래쪽에 고정된 위치 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 578px;
    text-align: center;
}

.btn {
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.btn-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.text-container {
    text-align: center;
    margin-top: 20px;
}

.banner-text {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.sub-text {
    font-size: 14px;
    color: #666;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn {
    width: 100%;
    max-width: 100%;  /* 고정된 폭 */
    height: auto;
    margin-bottom: 2%;
    position: relative;
    overflow: hidden;
}

.btn-image {
    width: 100%;
    height: auto;  /* 원본 비율 유지 */
    object-fit: contain;  /* 이미지 비율 유지 */
}

.btn span {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;  /* 버튼 내 텍스트 크기 */
    font-weight: bold;
    color: white;
    text-align: center;
}

.extra-info {
    font-size: 14px;
    color: #666;
    margin-top: 20px;
    text-align: center;
}

.info-link {
    display: inline-block;
    margin-top: 30px; /* 여백 추가 */
    color: #0078e7;
    text-decoration: none;
    font-size: 14px;
    width: 80%;
    text-align: center;
}

footer {
    margin-top: 3%;
}

.footer-background {
    background-color: #333;
    text-align: center;
    padding: 43px 0;
}

.footer-background p {
    color: #fff;
    font-size: 14px;
}

@media (max-width: 768px) {
    .banner-image {
        max-width: 100%; /* 이미지 비율 유지 */
        height: auto;
    }

    .btn-container {
        bottom: 5%;  /* 버튼 위치 조정 */
        max-width: 90%; /* 화면 크기에 맞게 버튼 너비를 조정 */
    }

    .btn {
        padding: 0;
        font-size: 14px;  /* 버튼 내 텍스트 크기 */
    }

    .banner-text {
        font-size: 18px;
    }

    .sub-text {
        font-size: 12px;
    }

    .info-link {
        font-size: 12px;
        margin-top: 5%; /* 여백 조정 */
        width: 80%;
    }
}

@media (max-width: 480px) {
    .banner-text {
        font-size: 16px;  /* 모바일 화면에서 텍스트 크기 줄이기 */
    }

    .sub-text {
        font-size: 12px;
    }

    .btn {
		width: 100%;
		padding: 0;
		font-size: 14px;  /* 버튼 내 텍스트 크기 */
		margin-bottom: 3%; /* 버튼 간격을 조금 더 좁힘 */
		}
	
    .extra-info {
        font-size: 12px;
        margin-top: 5%;
    }

    .info-link {
        font-size: 12px;
        margin-top: 5%; /* 여백 조정 */
        width: 80%;
        text-align: center;
    }
	
	.slider-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 3%;
     /* 배너 전체 둥글기 */
 }

	.banner-image {
    width: 100%;
    height: auto; /* 비율 유지 */
    position: relative;
    border-radius: 20px; /* 이미지 자체의 둥글기 */
	}

	.btn-container {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 578px;
    text-align: center;
	}

	.btn-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0; /* 버튼 이미지의 둥글기 */
	}

}

/* 1) iOS 자동 글자확대 방지 (모바일에서 버튼이 커지며 간격 벌어지는 현상 완화) */
html { -webkit-text-size-adjust: 100%; }

/* 2) 모든 요소 박스계산 통일 */
*, *::before, *::after { box-sizing: border-box; }

/* 3) 버튼/링크 기본 여백과 줄높이 정리 */
a, button { line-height: 1.2; }
a.btn, button.btn {margin: 0;display: inline-block;margin-bottom: 3%;} /* 프로젝트 클래스명에 맞게 조정 */

/* 4) 버튼을 세로로 쌓는 래퍼가 있다면 gap을 안전한 단위로 고정/클램프 */
.btn-wrap { 
  display: flex; 
  flex-direction: column; 
  gap: clamp(8px, 2.5vw, 16px);  /* 너무 커지지 않도록 상한선 */
}

/* 5) 버튼 사이 간격을 margin으로 제어 중이라면 과한 %/vh를 픽셀/클램프로 교체 */
.btn + .btn {/* margin-top: clamp(8px, 2.5vw, 16px); */}

/* 6) 이미지 버튼일 경우: 줄 사이 공백 제거 및 가로폭 대응 */
.btn img, .link img {
  display: block;
  width: 100%;
  height: auto;
}

/* 7) 작은 화면 전용 미세 조정 */
@media  {
  .btn-wrap { gap: 12px; }
  .btn, a.btn, button.btn {
           /* iOS 15+에서 자동확대 회피 기준 */
  }
}

/* 8) 혹시 vh로 간격을 주고 있다면 모바일에서만 픽셀로 덮어쓰기 */
@media (max-width: 768px) {
  .btn, .section {
    margin-top: 12px;
    margin-bottom: 12px;   /* 예: 기존 margin-top: 5vh 같은 값 무력화 */
  }
}
/* ===== Kakao Modal ===== */
.modal{ position:fixed; inset:0; display:none; z-index:9999; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }

.modal__dialog{
  position:absolute;
  left:50%;
  top: 48%;
  transform:translate(-50%,-50%);
  width:clamp(300px, 90vw, 560px);
  max-height:calc(100vh - 32px);
  border-radius: 20px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* 전역 * 규칙 영향 제거 (모달 내부만) */
.modal *{width:auto;height:auto;object-fit:initial;}
.modal__image{width:100%;height:auto;display:block;}

.modal__close{
  position:absolute;
  top:8px;
  right:8px;
  appearance:none;
  border:0;
  cursor:pointer;
  width:32px;
  height:32px;
  line-height:32px;
  text-align:center;
  border-radius:50%;
  font-size:20px;
  color:#fff;
  background:rgba(0,0,0,.55);
}

/* 시안의 '닫기' 버튼 위치(대략) 클릭영역 */
.modal__fake-close{
  position:absolute; left:10%; right:10%; bottom:16px;
  height:48px; background:transparent; border:0; cursor:pointer;
}

body.no-scroll{ overflow:hidden; }

@media (max-width: 480px){
  .modal__dialog{border-radius:12px;width: 90%;/* top: 8%; */}
  .modal__close{width:28px;height:28px;font-size:18px;top:6px;right:6px;}
}

@media (max-width: 768px){
	  .modal__dialog{width: 83%;top: 43%;}
	  .logo{width: 45%;margin-top: -2%;}
}