/* 기본 초기화 */
body,html{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;background-color:#000;}
.container{display:flex;justify-content:center;min-height:100vh;}

/* [2025-01-15] 모바일 박스 중심 반응형 레이아웃 재설계 */
/* [2025-01-16] background-left와 mobile-box를 하나로 묶어 중앙 배치 */
.background{display:flex;flex-direction:row;justify-content:center;width:100%;min-height:100vh;}

/* [2025-01-16] 왼쪽 배경 - 고정 너비 400px, 좌측 패딩 제거 */
.background-left{width:400px;min-width:400px;background-color:#000;color:white;padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;}
.background-left .logo{position:absolute;top:60px;left:40px;}
.background-left .text{text-align:left;}
.background-left h1{font-size:42px;line-height:1.4;margin:0 0 20px 0;}
.background-left .badges{margin-bottom:10px;text-align:left;}
.background-left .badges span img{vertical-align:middle;}
.background-left .badges span{display:inline-block;padding:5px 8px;background:#000;border-radius:10px;color:white;line-height:25px;border:1px solid #fff;margin:3px;}
/* [2025-01-16] 결제 아이콘 하단 고정, 좌측 패딩에 맞춤 */
.background-left .icons{position:absolute;bottom:50px;left:40px;}

/* 중앙 모바일 박스 - 고정 너비, 레이아웃 기준점 */
.mobile-box{width:460px;min-width:460px;max-width:460px;height:100vh;background-color:white;box-shadow:0 10px 30px rgba(0,0,0,0.3);overflow:auto;z-index:10;position:relative;box-sizing:border-box;flex-shrink:0;display:flex;flex-direction:column;}
.mobile-box::-webkit-scrollbar{display:none;}
.mobile-box{-ms-overflow-style:none;scrollbar-width:none;}

/* [2025-01-15] 푸터 - 모든 페이지에서 하단 고정 */
.footer{position:sticky;bottom:0;left:0;width:100%;border-top:1px solid #ddd;padding-top:10px;background:#fff;box-sizing:border-box;margin-top:auto;}
.footer nav{display:flex;justify-content:space-around;padding:10px;}
.footer nav a{text-decoration:none;color:black;font-size:14px;text-align:center;}
.footer nav a img{display:block;margin:0 auto;}
.footer nav a.active{color:#ebc231;font-weight:bold;}

.header{display:flex;justify-content:space-between;align-items:center;}

/* [2025-01-16] 오른쪽 배경 - 중앙 정렬로 인해 숨김 처리 */
.background-right{display:none;}

/* 반응형: 대형 태블릿 이하 (1266px) - 좌우 배경 숨김 */
@media screen and (max-width:1266px){
    .background{justify-content:center;}
    .background-left{display:none;}
    .background-right{display:none;}
    .mobile-box{width:460px;min-width:460px;max-width:460px;margin:0 auto;}
}

/* [2025-01-15] 반응형: 모바일 (768px 이하) - 전체 너비 사용 */
@media screen and (max-width:768px){
    .mobile-box{width:100%;min-width:100%;max-width:100%;height:auto;min-height:100vh;padding-bottom:80px;}
    .footer{position:fixed;bottom:0;}
}