* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'IBM Plex Sans KR', sans-serif !important;
}

/* HTML 및 BODY 기본 스타일 */
html, body {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
}

/* 메인 컨테이너 */
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================
   지도 섹션
   ============================================ */

.map-section {
    position: relative; /* 오버레이 기준점 */
    flex: 1; /* 컨테이너 안에서 남은 공간을 모두 사용 */
    width: 100%;
    height: 100%; /* 또는 height: 100vh; 로 고정 높이도 가능 */
}

#map {
    position: relative;
    width: 100%;
    height: 100%; /* 부모(map-section)가 이제 높이를 가지니 정상 동작 */
    border: none;
    overflow: hidden;
    background-color: #e0e0e0;
}

/* ============================================
   헤더 오버레이 (지도 위에 겹침)
   ============================================ */

.header-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 15vh; /* ← 확실하게 헤더 영역 길어짐 */
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);*/
}


/* 로고 반응형 */
.logo {
    max-width: 300px;
    min-width: 280px;
}

/* INFO 버튼: 로고 바로 오른쪽에 overlay */
.info-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 로고와 같은 세로 높이 */
    margin-left: 50px; /* 로고와의 간격 */
    left: calc(50% + (32vw / 2)); /* 화면 중앙 + 로고 너비의 절반 */
    /* 로고 max/min 반응형까지 정확히 대응 */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 20;
}

/* INFO 이미지 크기: 로고 대비 크게 */
.info-btn img {
    top: 1vh;
    width: 1vw;
    max-width: 40px;
    min-width: 40px;
    height: auto;
}

/* ============================================
   모달 스타일
   ============================================ */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;
    animation: fadeIn 0.3s ease;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 모달 콘텐츠 기본 스타일 */
.modal-content {
    background-color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 스크롤 가능 모달 (안내, 정보 모달) */
.modal-content-scrollable {
    width: 90%;
    max-width: 600px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 모달 바디 (스크롤 가능) */
.modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 32px;
    flex: 1;
}

/* 모달 닫기 버튼 */
.modal-close {
    width: 100%;
    padding: 16px 0;
    border: none;
    background: #707b92;
    color: white;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* 모달 제목 */
.modal-content h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #333;
    border-bottom: 2px solid #707b92;
    padding-bottom: 8px;
}

/* 모달 텍스트 */
.modal-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 12px;
}

/* 정보 섹션 */
.info-section {
    margin-bottom: 24px;
}

/* 모달 이미지 컨테이너 */
.info-section .logo-images {
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    align-items: center;
    gap: 16px; /* 이미지 간 간격 */
    margin-top: 16px;
    flex-wrap: wrap; /* 화면 좁을 때 자동 줄바꿈 */
}

/* 모달 이미지 스타일 */
.info-section .logo-images img {
    max-width: 200px; /* 너무 커지지 않도록 제한 */
    width: 40%; /* 비율 유지하며 반응형 */
    height: auto; /* 비율 자동 유지 */
    object-fit: contain;
    display: block;
}

.language-buttons {
    position: absolute;
    top: 12px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 200;
}

.language-buttons button {
    background: #ffffffdd;
    border: 1px solid #ccc;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}

.language-buttons button:hover {
    background: #f1f1f1;
}


/* ============================================
   3D 모델 뷰어
   ============================================ */

model-viewer {
    position: absolute;
    left: -9999999px;
}

/* ============================================
   하단 임시 버튼 3개
   ============================================ */

.ar-buttons {
    position: fixed;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    z-index: 50;
}

.ar-btn {
    padding: 12px 20px;
    background: #707b92;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ar-loader-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(3px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.ar-loader-container {
  width: 90%;
  max-width: 350px;
  color: white;
  text-align: center;
}

.ar-loading-title {
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.ar-progress-box {
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.ar-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #4fc3f7, #1976d2);
  transition: width 0.1s linear;
}

.ar-progress-percent {
  font-size: 1rem;
  margin-bottom: 15px;
}

.ar-loading-sub {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 모바일 반응형 */
@media (max-width: 480px) {
  .ar-loading-title { font-size: 1.1rem; }
  .ar-progress-percent { font-size: 0.9rem; }
  .ar-loading-sub { font-size: 0.8rem; }
}


/* ============================================
   반응형 디자인
   ============================================ */

@media (max-width: 768px) {
    .header-overlay {
        padding: 12px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .logo {
        max-width: 150px;
    }

    .info-btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    .modal-content-center {
        padding: 24px;
    }

    .modal-content-scrollable {
        max-height: 60vh;
    }

    .modal-body {
        padding: 24px;
    }

    .modal-content h2 {
        font-size: 24px;
    }

    .modal-content h3 {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .header-overlay {
        padding: 10px;
    }

    .logo {
        max-width: 120px;
    }

    .info-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .modal-content-center {
        width: 95%;
        padding: 20px;
    }

    .modal-content-scrollable {
        width: 95%;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-content h2 {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .modal-content p {
        font-size: 14px;
    }

    .modal-btn {
        padding: 10px 24px;
        font-size: 14px;
    }
}