html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* 가로 스크롤 방지 */
  font-family:'Pretendard', 'Noto Sans Korean', dotum, sans-serif;
  background-color: #f0f0f0  ;
}


/* 전체 컨테이너 */
.custom-layout-container {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    max-width: 920px; /* 전체 너비 고정 */
}

/* 왼쪽 칼럼 (300px) */
.left-column {
    width: 300px;
    margin-right: 20px;
    flex-shrink: 0; /* 너비 유지 */
}

.sticky-content {
    position: sticky;
    top: 20px;
}

/* 오른쪽 칼럼 (600px) */
.right-column {
    width: 600px;
    flex-shrink: 0;
    background-color: #ffffff;
    min-height: 500px; /* 내용이 적을 때를 대비한 최소 높이 */
}

/* 핵심: 화면이 920px 이하로 내려가면 즉시 왼쪽 숨김 */
@media screen and (max-width: 920px) {
    .left-column {
        display: none !important; /* 공간 부족 시 즉각 삭제 */
    }

    .custom-layout-container {
        display: block; /* 가로 배치 해제 */
        max-width: 600px; /* 모바일에서도 오른쪽 너비만큼만 중앙 정렬 */
    }

    .right-column {
        width: 100%; /* 화면에 꽉 차게 */
        margin: 0 auto;
    }
}

/* (선택사항) 600px보다 더 작은 찐 모바일 환경 대응 */
@media screen and (max-width: 600px) {
    .custom-layout-container {
        max-width: 100%;
        padding: 0 10px; /* 양옆 미세 여백 */
    }
}




/* 오른쪽 칸 이미지 스타일 */
.flag-container {
    display: flex;
    flex-wrap: nowrap; /* 가로로 강제 배치 */
    gap: 5px; /* 이미지 간격 */
    justify-content: space-start; /* 균등 배치 */
    width: 100%; /* 컨테이너 너비를 100%로 */
}
.flag-container img {
    width: calc(25% - 3.75px); /* 4등분, gap 고려 */
    height: auto; /* 비율 유지 */
    object-fit: cover; /* 이미지가 컨테이너를 꽉 채우도록 */
}

.swiper {width: 100%; margin:0 0px 0 0px;}
.swiper-slide {text-align: center; font-size: 18px; color: #fff; background: #fff; display: flex; justify-content: center; align-items: center; }
.swiper-slide img {display: block; width: 100%; object-fit: cover; border-radius: 10%;}
.swiper-slide {max-width: 150px;}