@charset "utf-8";
/* =========================================
   [0. 폰트 임포트 (Google Fonts)]
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Nanum+Myeongjo:wght@400;700&family=Noto+Sans+KR:wght@300;400;500;700&family=Noto+Serif+KR:wght@400;700&family=JetBrains+Mono:wght@700&display=swap');

/* =========================================
   [문 열리는 이펙트 (Portal / Door Effect)]
   ========================================= */
.door-opening-effect {
    position: relative;
    overflow: hidden;
    pointer-events: none; /* 이펙트 진행 중 중복 클릭 방지 */
}

/* 문 틈에서 빛이 새어나오며 확장되는 애니메이션 */
.door-opening-effect::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 100%; height: 100%;
    background: #fff;
    transform: translateX(-50%) scaleX(0);
    box-shadow: 0 0 50px 30px rgba(255, 255, 255, 0.9), 0 0 100px 50px var(--gold);
    animation: doorOpenGlow 0.6s ease-in-out forwards;
    z-index: 50;
}

@keyframes doorOpenGlow {
    0% { transform: translateX(-50%) scaleX(0.01); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: translateX(-50%) scaleX(1.5); opacity: 1; }
}

/* =========================================
   [관 이동 로딩 스크린 (블랙 & 발바닥 그림자)]
   ========================================= */
#page-transition-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    background: #000;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

/* active 클래스가 붙으면 화면을 덮음 */
#page-transition-loader.active {
    opacity: 1;
    pointer-events: all;
}

/* 👣 발바닥 컨테이너 (위로 걸어가는 세로 공간 확보) */
.footprint-container {
    position: relative;
    width: 60px; 
    height: 180px; /* 6걸음이 들어갈 세로 공간 */
    margin-bottom: 30px;
}

/* 🌟 발바닥 공통 스타일 (마스크 기법으로 검은색 이미지를 황금색으로 칠함) */
.foot {
    position: absolute;
    width: 25px; 
    height: 50px;
    background-color: var(--gold, #d4af37);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    opacity: 0; /* 초기엔 안 보임 */
    animation: walkFootprint 3s infinite; /* 3초 주기로 무한반복 */
}

/* 왼쪽/오른쪽 이미지 지정 및 좌우 위치 설정 */
.foot.left {
    -webkit-mask-image: url('../img/loading/left_foot.png');
    mask-image: url('../img/loading/left_foot.png');
    left: 0;
}
.foot.right {
    -webkit-mask-image: url('../img/loading/right_foot.png');
    mask-image: url('../img/loading/right_foot.png');
    right: 0;
}

/* 6걸음의 세로 위치(bottom) 및 나타나는 시간(delay) 0.5초 간격 설정 */
.step-1 { bottom: 0px;   animation-delay: 0.0s; }
.step-2 { bottom: 25px;  animation-delay: 0.3s; }
.step-3 { bottom: 60px;  animation-delay: 0.6s; }
.step-4 { bottom: 85px;  animation-delay: 0.9s; }
.step-5 { bottom: 120px; animation-delay: 1.2s; }
.step-6 { bottom: 145px; animation-delay: 1.5s; }

/* 발자국이 바닥에 찍히고 서서히 사라지는 애니메이션 */
@keyframes walkFootprint {
    0%   { opacity: 0; transform: translateY(10px) scale(0.8); }
    10%  { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6)); }
    40%  { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.3)); }
    70%  { opacity: 0; transform: translateY(0) scale(1); }
    100% { opacity: 0; }
}

.loader-text {
    color: var(--gold, #d4af37);
    font-family: 'Noto Serif KR', serif;
    font-size: 18px;
    letter-spacing: 3px;
    animation: pulseText 1.5s infinite alternate;
}

@keyframes pulseText {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* =========================================
   [1. 공통 설정 및 타이포그래피 (Common)]
   ========================================= */
:root {
  --bg-dark: #0a0a0a;
  --bg-panel: #141414;
  --text-main: #f0ebd8;
  --text-muted: #a19d91;
  --gold: #c5a45f;
  --gold-dim: rgba(197, 164, 95, 0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.1); } }

/* =========================================
   [2. 인트로 전용 (Intro)]
   ========================================= */
#intro-container {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; 
    height: 100dvh; /* iOS Safari 하단바 잘림 방지 */
    background: #000;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; z-index: 99999;
    transform: translateZ(0); /* Safari 깜박임 픽스 */
}

.intro-bg {
    position: absolute; inset: -5%;
    background: url('../img/intro_bg.jpg') center/cover no-repeat;
    filter: brightness(0.5) contrast(1.1); 
    animation: slowZoom 20s infinite alternate linear;
    z-index: 1;
    transform: translate3d(0,0,0);
    will-change: transform; 
}

.intro-content { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; padding: 0 20px; }

.neon-sign { margin-bottom: 50px; position: relative; }
.neon-sign::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 140%; height: 160%;
    background: radial-gradient(ellipse at center, rgba(255, 107, 107, 0.35) 0%, transparent 70%);
    filter: blur(20px); z-index: -1; animation: neonPulse 3s infinite alternate; pointer-events: none;
}

.stroke-text {
    font-size: clamp(40px, 7vw, 80px); margin-bottom: 15px; letter-spacing: 3px;
    color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px #ff6b6b, 0 0 40px #ff6b6b, 0 0 80px #ff4d4d;
    animation: strokeFlicker 3s infinite alternate;
}
.neon-sign h2 { font-size: clamp(18px, 3vw, 24px); color: #e0dacc; letter-spacing: 5px; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }

@keyframes strokeFlicker {
    0%, 100% { text-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px #ff6b6b, 0 0 40px #ff6b6b, 0 0 80px #ff4d4d; opacity: 1; }
    50% { text-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px #ff6b6b, 0 0 20px #ff6b6b, 0 0 40px #ff4d4d; opacity: 0.8; }
    8%, 12% { text-shadow: none; opacity: 0.3; }
}
@keyframes neonPulse { 0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.95); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }

.intro-desc p { color: #f0f0f0; font-size: clamp(14px, 2.5vw, 16px); line-height: 1.8; margin-bottom: 50px; text-shadow: 0 2px 5px rgba(0,0,0,0.9); }

.enter-btn {
    position: relative; background: rgba(10, 10, 10, 0.6); border: 2px solid var(--gold);
    color: #ffffff; padding: 15px 45px; font-size: 18px; font-weight: bold; letter-spacing: 3px;
    border-radius: 50px; cursor: pointer; transition: all 0.4s ease; backdrop-filter: blur(5px);
    box-shadow: 0 0 20px rgba(197, 164, 95, 0.3), inset 0 0 10px rgba(197, 164, 95, 0.1); overflow: hidden;
}
.enter-btn span { position: relative; z-index: 2; }
.enter-btn::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 0; height: 0; background: var(--gold); border-radius: 50%;
    box-shadow: 0 0 50px 30px var(--gold), 0 0 100px 60px #fff; opacity: 0; transition: all 0.5s ease; z-index: 1;
}
.enter-btn:hover { color: #000; border-color: #fff; transform: translateY(-5px) scale(1.05); }
.enter-btn:hover::before { width: 300px; height: 300px; opacity: 1; }

/* =========================================
   [3. 로비 전용 (Lobby) - 비율 고정 및 스크롤 완벽 제거]
   ========================================= */
.interactive-lobby { 
    width: 100vw; 
    height: 100dvh; 
    background: #000; 
    position: relative; 
    overflow: hidden;
}

.lobby-scroll-area {
    width: 100%; 
    height: 100%; 
    overflow: auto; /* 스크롤은 허용하되 스크롤바는 숨김 */
    scrollbar-width: none; /* Firefox 스크롤바 숨김 */
    -ms-overflow-style: none; /* IE 스크롤바 숨김 */
}

.lobby-scroll-area::-webkit-scrollbar { 
    display: none; /* Chrome, Safari 스크롤바 완벽 숨김 */
}

/* 🌟 핵심: 16:9 원본 비율을 정확히 유지하며 화면에 꽉 차게 (Letterbox 기법) */
.lobby-bg-container { 
    position: relative; 
    /* 화면이 길든 넓든 무조건 화면을 다 덮는 사이즈로 자동 계산 (여백 절대 안 생김) */
    width: max(100vw, calc(100dvh * (1920 / 1080))); 
    height: max(100dvh, calc(100vw * (1080 / 1920))); 
    flex-shrink: 0;
}

.lobby-bg-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    pointer-events: none; /* 이미지 위에서 마우스 드래그가 끊기지 않도록 방지 */
    user-select: none; /* 이미지 드래그 시 파랗게 블록 씌워지는 현상 방지 */
    -webkit-user-drag: none;
}

/* 🌟 로비 중앙 천장 간판 로고 (새로운 배경의 돔 중앙에 맞춤) */

.lobby-header-floating h1 { font-size: clamp(24px, 5vw, 40px); font-weight: 900; letter-spacing: 2px; }
.lobby-header-floating p { color: #ccc; margin-top: 10px; font-size: clamp(12px, 2.5vw, 14px); word-break: keep-all; }

.door-hotspot {
    position: absolute; display: block; cursor: pointer; text-decoration: none;
    transition: all 0.4s ease; background: rgba(0, 0, 0, 0); z-index: 10;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}

/* 1층 */
.hall-1 { top: 59.1%; left: 12.9%; width: 5.3%; height: 16.7%; }
.hall-2 { top: 59.6%; left: 28.4%; width: 5.2%; height: 14.2%; }
.hall-3 { top: 60.1%; left: 46.9%; width: 5.5%; height: 13.7%; }
.hall-4 { top: 59.8%; left: 65.1%; width: 5.2%; height: 14.2%; }
.hall-5 { top: 59.1%; left: 80.5%; width: 5.3%; height: 16.7%; }
/* 2층 */
.hall-6 { top: 32.2%; left: 12.4%; width: 4.8%; height: 11.2%; }
.hall-7 { top: 38.3%; left: 28.4%; width: 5.1%; height: 10.2%; }
.hall-8 { top: 40.5%; left: 46.8%; width: 5.4%; height: 9.5%; }
.hall-9 { top: 38.6%; left: 65.0%; width: 5.2%; height: 9.8%; }
.hall-10 { top: 32.9%; left: 81.5%; width: 5.4%; height: 10.8%; }

/* 문 호버 이펙트 (새로운 배경의 아치형 디자인에 맞게 상단을 둥글게 수정) */
.door-hotspot::before {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; top: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(197, 164, 95, 0.4), transparent);
    box-shadow: 0 0 30px rgba(197, 164, 95, 0.8), inset 0 0 15px var(--gold); opacity: 0; transition: opacity 0.5s ease; 
    border-radius: 40% 40% 0 0; /* 🌟 아치형 문 모양 완벽 대응 */
}
.door-hotspot::after {
    content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    width: 0; height: 100px; background: radial-gradient(ellipse at top, rgba(255,255,255,0.8) 0%, rgba(197, 164, 95, 0.3) 40%, transparent 70%);
    filter: blur(10px); opacity: 0; pointer-events: none; transition: all 0.5s ease;
}
.door-label {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -30%); color: #fff; text-align: center;
    font-family: 'Noto Serif KR', serif; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; line-height: 1.3; white-space: nowrap;
    opacity: 0; transition: all 0.4s ease; text-shadow: 0 2px 10px #000, 0 0 20px var(--gold); pointer-events: none;
}
.door-label small { color: var(--gold); font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: clamp(12px, 0.9vw, 14px); }

.door-hotspot:hover::before, .door-hotspot:active::before { opacity: 1; }
.door-hotspot:hover::after, .door-hotspot:active::after { width: 300%; opacity: 1; bottom: -20px; }
.door-hotspot:hover .door-label, .door-hotspot:active .door-label { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }

/* 📱 모바일 환경 최적화 
@media (max-width: 768px) {
    .lobby-ceiling-sign { top: 8%; }
    .lobby-ceiling-sign img { height: 45px; }
}*/

/* =========================================
   [로비 중앙 천장 간판 로고 - 홀로그램 효과]
   ========================================= */
.lobby-ceiling-sign {
    position: absolute;
    top: 1%; /* 돔 중앙 조명 라인 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    text-align: center;
    pointer-events: none;
    animation: hologramFloat 6s ease-in-out infinite;
}
.lobby-ceiling-sign img {
    height: 100px;
    max-width: 80vw;
    opacity: 0.85;
    filter: drop-shadow(0 0 15px rgba(0, 191, 255, 0.8)) brightness(1.2);
    animation: hologramGlitch 4s infinite;
}

/* 🌟 상단 타이틀 위치 고정 */
.lobby-header-floating {
    position: absolute; 
    top: 6%; 
    left: 50%; 
    transform: translateX(-50%); 
    text-align: center;
    width: 100%; 
    padding: 0 15px; 
    z-index: 150; 
    pointer-events: none; 
    text-shadow: 0 5px 15px rgba(0,0,0,0.9);
}

/* 1. 위아래로 천천히 부유하는 효과 */
@keyframes hologramFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* 2. 홀로그램 지지직거림 및 깜빡임 (Glitch) 효과 */
@keyframes hologramGlitch {
    0%, 100% { 
        opacity: 0.85; 
        filter: drop-shadow(0 0 15px rgba(0, 191, 255, 0.7)) brightness(1.2) hue-rotate(0deg); 
        transform: skewX(0deg); 
    }
    10% { 
        opacity: 0.4; 
        filter: drop-shadow(0 0 5px rgba(0, 191, 255, 0.3)) brightness(0.8); 
        transform: skewX(1deg); 
    }
    12% { 
        opacity: 0.95; 
        filter: drop-shadow(0 0 25px rgba(0, 191, 255, 1)) brightness(1.5); 
        transform: skewX(-1deg); 
    }
    14% { 
        opacity: 0.85; 
        transform: skewX(0deg); 
    }
    45% { 
        opacity: 0.85; 
    }
    46% { 
        opacity: 0.5; 
        filter: hue-rotate(15deg); /* 미세하게 색상이 틀어지는 효과 */
    }
    47% { 
        opacity: 0.9; 
        filter: hue-rotate(0deg); 
    }
}

/* 📱 모바일 환경 최적화 */
@media (max-width: 768px) {
    .lobby-ceiling-sign { top: 25%; }
    .lobby-ceiling-sign img { height: 45px; }
}

/* =========================================
   [4. 전시관 공통 레이아웃 (view_bg.jpg 적용)]
   ========================================= */
/* 기존 배경 속성 제거 및 레이아웃 유지 */
.room-container { 
    width: 100vw; 
    min-height: 100vh; 
    margin: 0; 
    padding: 80px 5vw 120px; 
    animation: fadeInUp 0.8s; 
    position: relative; 
    z-index: 2; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

/* 🌟 새로운 가상 요소를 이용한 고정 배경 (iOS Safari 확대 버그 완벽 해결) */
.room-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* 모바일 하단바 대응 */
    background: url('../img/view_bg.jpg') center top / cover no-repeat;
    z-index: -1; /* 핀 조명 배경을 콘텐츠 가장 뒤로 배치 */
    pointer-events: none; /* 클릭 방해 금지 */
}

.room-content-wrapper { width: 100%; max-width: 1100px; margin: 0 auto; position: relative; z-index: 3; }

.room-header { text-align: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-top: 20px; position: relative; z-index: 10; transform: translateZ(0); }
.room-header h2 { font-size: clamp(24px, 5vw, 32px); color: var(--gold); margin-bottom: 10px; text-shadow: 0 5px 15px rgba(0,0,0,0.8); }
.room-header p { font-size: clamp(13px, 3vw, 15px); color: var(--text-muted); text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
.section-title { text-align: center; font-family: 'Noto Serif KR', serif; font-size: clamp(20px, 4vw, 24px); color: var(--gold); margin: 80px 0 20px; letter-spacing: 1px; border-bottom: 1px solid rgba(197, 164, 95, 0.2); padding-bottom: 15px; }

.back-btn {
  position: fixed; top: 15px; left: 15px; z-index: 1000;
  background: rgba(0,0,0,0.7); border: 1px solid var(--gold); color: var(--gold); padding: 8px 18px; border-radius: 30px;
  text-decoration: none; transition: all 0.3s ease; backdrop-filter: blur(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  font-family: 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: 500; transform: translateZ(0);
}
.back-btn:hover { background: var(--gold); color: #000; transform: translateY(-2px) translateZ(0); }
.sticky-top-bar {
    position: fixed; top: 0; left: 0; right: 0; background: rgba(15, 15, 15, 0.95); border-bottom: 2px solid var(--gold);
    color: var(--gold); text-align: center; padding: 16px 0; z-index: 9999; font-family: 'Noto Serif KR', serif; font-size: 18px; font-weight: bold; letter-spacing: 2px;
    transform: translateY(-100%); transition: transform 0.4s ease; box-shadow: 0 5px 20px rgba(0,0,0,0.7);
}
.sticky-top-bar.show { transform: translateY(0); }
.sticky-back-btn {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background: none; border: 1px solid var(--gold); color: var(--gold);
    padding: 6px 14px; border-radius: 4px; cursor: pointer; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; transition: all 0.3s;
}
.sticky-back-btn:hover { background: var(--gold); color: #000; }

.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease; padding: 20px;
}
.lightbox.active { opacity: 1; pointer-events: all; }
.lightbox img { max-width: 100%; max-height: 70vh; object-fit: contain; transform: scale(0.9); transition: transform 0.4s ease; border-radius: 8px; }
.lightbox.active img { transform: scale(1); }
.lightbox-close { position: absolute; top: 15px; right: 20px; color: #fff; font-size: 36px; cursor: pointer; z-index: 10001; }
.lightbox-caption { color: var(--text-muted); margin-top: 20px; font-size: 15px; text-align: center; max-width: 600px; line-height: 1.5; }
.lightbox-caption h5 { color: var(--gold); font-size: 18px; margin-bottom: 8px; font-weight: 700; }

/* =========================================
   [전시관 다이렉트 이동 버튼 (우측 상단)]
   ========================================= */
.hall-nav-btns {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1000;
    display: flex;
    gap: 8px;
}
.hall-nav-btn {
    background: rgba(0,0,0,0.7);
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 8px 18px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    font-weight: 500;
    transform: translateZ(0);
}
.hall-nav-btn:hover {
    background: var(--gold);
    color: #000;
    transform: translateY(-2px) translateZ(0);
}

/* 📱 모바일 환경 최적화 (버튼 크기 및 간격 축소) */
@media (max-width: 768px) {
    .hall-nav-btns { top: 12px; right: 12px; gap: 6px; }
    .hall-nav-btn { padding: 6px 12px; font-size: 11px; }
    .back-btn { top: 12px; left: 12px; padding: 6px 12px; font-size: 11px; }
}

/* =========================================
   [상단 고정바(탑바) 우측 다이렉트 이동 버튼]
   ========================================= */
.sticky-hall-nav-btns {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}

.sticky-nav-btn {
    background: none;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    transition: all 0.3s;
}

.sticky-nav-btn:hover {
    background: var(--gold);
    color: #000;
}

/* 📱 모바일 탑바 버튼 최적화 */
@media (max-width: 768px) {
    .sticky-top-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        padding: 10px 12px !important;
    }
    
    /* 1. 좌측 로비 버튼 (딱 자기 크기만 차지) */
    .sticky-back-btn {
        position: static !important;
        transform: none !important;
        flex: 0 0 auto !important; 
        padding: 4px 8px !important;
        font-size: 11px !important;
        margin: 0 !important;
    }
    
    /* 2. 🌟 중앙 타이틀 (남은 공간을 모두 차지하되, 우측 버튼 그룹은 제외) */
    .sticky-top-bar > div:not(.sticky-hall-nav-btns) {
        flex: 1 1 auto !important;
        min-width: 0; /* 글자 넘침 방지 */
        margin: 0 10px;
        display: flex;
        justify-content: center;
    }
    .sticky-top-bar > div:not(.sticky-hall-nav-btns) > span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px !important;
        text-align: center;
    }
    
    /* 3. 🌟 우측 관 이동 버튼 (공간 차지 없이 오른쪽 끝에 완벽 밀착) */
    .sticky-hall-nav-btns {
        position: static !important;
        transform: none !important;
        flex: 0 0 auto !important; /* 강제로 퍼지는 현상 방어 */
        display: flex !important;
        gap: 4px !important;
        margin: 0 !important;
        right: auto !important;
    }
    .sticky-nav-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }
}

/* =========================================
   [5. 관별 전용 (Halls) - 박물관 액자 스타일 통합 적용]
   ========================================= */
/* 🌟 슬라이더 영역 50% 축소 및 핀 조명 중앙 배치 */
.slider-wrap { 
    position: relative; 
    width: 50vw; /* 화면 너비의 50%로 제한 */
    left: 50%; /* 화면 중앙 정렬을 위한 위치 이동 */
    transform: translateX(-50%); /* 정확한 정중앙 안착 */
    overflow: hidden; 
    padding: 30px 0; 
    z-index: 1; 
    background: transparent; 
}

.image-slider { 
    display: flex; 
    gap: 20px; /* 카드 간격 축소 */
    overflow-x: auto; 
    padding: 20px 25vw; /* 50% 너비에 맞춰 스크롤 여백 축소 */
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch; 
    transform-style: preserve-3d; 
    transform: rotateX(-15deg); /* 시야각(기울기)을 부드럽게 완화 */
}
.image-slider::-webkit-scrollbar { display: none; }

/* 🌟 전시 작품 카드 크기 비례 축소 */
.img-card {
    flex: 0 0 180px; /* 기존 280px에서 액자 너비 축소 */
    background: transparent; border: none; box-shadow: none;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    -webkit-backface-visibility: hidden; backface-visibility: hidden; 
    transform-style: preserve-3d; position: relative;
}

/* 🖼️ 박물관 액자 (가로 고정, 세로 원본 비율대로 무제한 자동 확장) */
.img-card img, .comparison-img img, .anatomy-img img, .patent-frame img, .paper-frame img {
    width: 100%; 
    height: auto !important; /* 🌟 가로 사이즈에 맞춰 세로 길이를 자동 조절 */
    max-height: none !important; /* 🌟 핵심: 기존에 숨어있던 세로 높이 제한(320px 등)을 완벽히 무력화 */
    aspect-ratio: auto !important; /* 강제 비율 찌그러짐 방지 */
    display: block; 
    box-sizing: border-box; 
    background: #111; 
    padding: 8px; 
    border: 2px solid #222; border-top: 2px solid #333; border-left: 2px solid #333;
    box-shadow: 10px 15px 25px rgba(0, 0, 0, 0.9), inset 0 0 15px rgba(0, 0, 0, 1);
    cursor: zoom-in; pointer-events: auto; border-radius: 2px; transition: transform 0.3s ease;
}

/* 🌟 (중요) 기존에 혹시 남아있을지 모르는 높이 제한 찌꺼기 코드 강제 덮어쓰기 */
.comparison-img img, .anatomy-img img { 
    max-height: none !important; 
}

/* 🌟 사진마다 세로 길이가 달라도, 슬라이더 안에서 수직 중앙 정렬되어 갤러리처럼 예쁘게 보이도록 설정 */
.image-slider {
    align-items: center;
}
.img-card:hover img { transform: translateY(-5px); }

/* 🏷️ 박물관 명패 (크기 및 폰트 축소) */
.img-cap {
    position: relative; pointer-events: none;
    background: linear-gradient(135deg, #2a2a2a 0%, #151515 100%);
    border: 1px solid #333; border-bottom: 2px solid #0a0a0a; border-right: 2px solid #0a0a0a;
    padding: 10px; width: 90%; text-align: center; border-radius: 3px;
    box-shadow: 3px 6px 10px rgba(0, 0, 0, 0.7);
    color: #999; font-family: 'Noto Sans KR', sans-serif; font-size: 11px;
}
.img-cap h5 { 
    color: var(--gold); font-family: 'Noto Serif KR', serif; 
    font-size: 13px; font-weight: 700; margin-bottom: 4px; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); line-height: 1.3; 
}

/* 나사 디테일 (크기 축소) */
.img-cap::before, .img-cap::after {
    content: ''; position: absolute; width: 4px; height: 4px; background: #555; border-radius: 50%;
    box-shadow: inset -1px -1px 2px #111, 1px 1px 1px rgba(255,255,255,0.1);
}
.img-cap::before { top: 5px; left: 5px; }  
.img-cap::after { bottom: 5px; right: 5px; } 

/* 🌟 모바일 반응형 처리 */
@media (max-width: 768px) {
    .slider-wrap { width: 90vw; } /* 스마트폰에서는 너무 작아지지 않도록 90% 유지 */
    .image-slider { padding: 20px 45vw; }
    .img-card { flex: 0 0 160px; }
    .img-card img { height: 180px; }
}

/* 기타 전시관 내부 컴포넌트 */
.story-bridge { margin: 60px auto 0; max-width: 800px; text-align: center; padding: 50px 30px; border-top: 1px solid rgba(197, 164, 95, 0.3); border-bottom: 1px solid rgba(197, 164, 95, 0.3); background: linear-gradient(to right, transparent, rgba(197, 164, 95, 0.05), transparent); animation: fadeInUp 1s ease 0.5s both; }
.story-bridge h3 { font-family: 'Noto Serif KR', serif; font-size: clamp(20px, 4vw, 26px); color: var(--gold); margin-bottom: 25px; font-weight: 700; letter-spacing: 1px; }
.story-bridge p { font-family: 'Noto Serif KR', serif; font-size: clamp(14px, 3vw, 17px); color: var(--text-main); line-height: 1.9; margin-bottom: 15px; word-break: keep-all; }
.story-bridge p strong { color: var(--gold); font-weight: 900; }

.comparison-section, .anatomy-section { display: flex; flex-wrap: wrap; align-items: flex-start !important; gap: 40px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 40px; margin: 40px 0 80px; }
.comparison-img, .anatomy-img { flex: 1 1 300px; }
.comparison-text, .anatomy-text { flex: 1 1 300px; align-self: flex-start; padding-top: 5px; }
.comparison-text h3, .anatomy-text h3 { color: var(--gold); font-size: 22px; margin-bottom: 15px; font-family: 'Noto Serif KR', serif; }
.comparison-text p, .anatomy-text p { color: #ccc; line-height: 1.8; word-break: keep-all; font-size: 15px; }

.character-grid, .fixed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin-bottom: 60px; justify-items: center; }
.fixed-grid .img-card { width: 100%; max-width: 320px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 60px 0 30px; }
.stat-card { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 35px 30px; transition: transform 0.3s, border-color 0.3s; }
.stat-card:hover { transform: translateY(-5px); border-color: var(--gold); }
.stat-icon { width: 44px; height: 44px; border: 1px solid var(--gold); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: 16px; margin-bottom: 20px; }

.clinical-banner { background: linear-gradient(135deg, rgba(30,30,30,0.8), rgba(15,15,15,0.9)); border: 1px solid var(--gold); border-radius: 12px; padding: 35px; margin-bottom: 60px; position: relative; }
.clinical-banner h4 { font-size: 20px; color: var(--gold); margin: 15px 0 10px; font-family: 'Noto Serif KR', serif; }

.registry-table { width: 100%; margin-bottom: 60px; background: rgba(0, 0, 0, 0.6); border-radius: 8px; border: 1px solid rgba(197, 164, 95, 0.3); overflow-x: auto; font-family: 'Noto Sans KR', sans-serif; }
.registry-head { display: flex; background: rgba(197, 164, 95, 0.15); color: var(--gold); font-weight: 700; padding: 15px 20px; border-bottom: 1px solid rgba(197, 164, 95, 0.5); white-space: nowrap; font-size: 14px; }
.registry-row { display: flex; padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.3s; color: #ccc; font-size: 14px; align-items: center; min-width: 800px; }
.registry-row:hover { background: rgba(197, 164, 95, 0.1); color: #fff; }
.p-idx { width: 5%; color: var(--gold); font-weight: bold; } .p-title, .pp-title { width: 45%; padding-right: 15px; word-break: keep-all; } .p-org { width: 20%; color: #aaa; } .p-no { width: 20%; font-family: 'JetBrains Mono', monospace; } .p-date { width: 10%; text-align: right; } .pp-type { width: 7%; font-weight: bold; color: #88c0d0; } .pp-journal { width: 25%; color: #aaa; font-style: italic; }

.doc-wall { display: flex; gap: 20px; flex-wrap: wrap; margin: 60px 0; }
.doc-tile { background: linear-gradient(135deg, rgba(30,30,30,0.8), rgba(20,20,20,0.9)); border: 1px solid rgba(197, 164, 95, 0.4); padding: 30px; border-radius: 8px; flex: 1 1 300px; display: flex; gap: 20px; }
.doc-seal { font-size: 24px; color: var(--gold); border: 2px solid var(--gold); border-radius: 50%; min-width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif KR', serif; font-weight: bold; }

.photo-record { display: flex; flex-wrap: wrap; background: linear-gradient(135deg, rgba(20,20,20,0.8), rgba(10,10,10,0.9)); border: 1px solid rgba(197, 164, 95, 0.2); border-radius: 12px; margin-bottom: 30px; overflow: hidden; transition: transform 0.3s ease; }
.photo-record:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.pr-img { flex: 1 1 400px; } .pr-img img { width: 100%; height: 100%; object-fit: cover; }
.pr-text { flex: 1 1 400px; padding: 40px; display: flex; flex-direction: column; justify-content: center; }

.collab-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 60px; }
.cp-card { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; }
.cp-card:hover { transform: translateY(-5px); border-color: rgba(197, 164, 95, 0.5); }
.cp-img img { width: 100%; height: 220px; object-fit: cover; cursor: pointer; display: block; }
.cp-cap { padding: 20px; }
.cp-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gold); margin-bottom: 8px; }
.cp-cap h5 { font-size: 16px; color: #fff; margin-bottom: 10px; line-height: 1.4; }
.cp-cap p { font-size: 14px; color: var(--text-muted); line-height: 1.5; word-break: keep-all; }

.company-hero { position: relative; width: 100%; border-radius: 12px; overflow: hidden; margin: 20px 0 80px; border: 1px solid rgba(197, 164, 95, 0.4); }
.company-hero img { width: 100%; max-height: 600px; object-fit: cover; transition: transform 0.6s ease; }
.company-hero:hover img { transform: scale(1.03); }
.hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); padding: 60px 40px 35px; pointer-events: none; }

.commendation-box { display: flex; flex-wrap: wrap; background: linear-gradient(145deg, rgba(18,18,18,0.8), rgba(26,26,26,0.9)); border: 1px solid rgba(197, 164, 95, 0.4); border-radius: 12px; margin: 20px 0 80px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); }
.commendation-img { flex: 1.2 1 450px; padding: 50px 40px; display: flex; justify-content: center; align-items: center; }
.commendation-text { flex: 1 1 400px; padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; }

.frame-wrapper { background: #fdfbf7; padding: 25px; border: 18px solid #151312; border-radius: 2px; box-shadow: 0 25px 50px rgba(0,0,0,0.9), inset 0 0 0 3px var(--gold); max-width: 480px; cursor: pointer; transition: transform 0.4s ease; }
.frame-wrapper:hover { transform: scale(1.04) translateY(-5px); }
.frame-wrapper img { width: 100%; height: auto; display: block; object-fit: contain; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.15); }

/* 쇼핑몰 연동 버튼 전용 디자인 */
      .shop-link-btn { display: inline-block; margin-top: 15px; padding: 8px 20px; background: var(--gold); color: #000; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: bold; border-radius: 4px; text-decoration: none; transition: 0.3s; pointer-events: auto; }
      .shop-link-btn:hover { background: #fff; transform: translateY(-2px); }


/* =========================================
   [다국어 선택 드롭다운 UI - 우측 중상단 고정]
   ========================================= */
.lang-selector {
    position: fixed; /* 스크롤을 내려도 항상 화면에 고정 */
    top: 10%;        /* 중상단 위치 (숫자를 조절하여 원하는 높이로 맞추세요) */
    right: 20px;     /* 우측에 배치 */
    z-index: 9999;
    font-family: 'Noto Sans KR', sans-serif;
}

.lang-btn {
    background: rgba(0,0,0,0.7);
    border: 1px solid var(--gold, #d4af37);
    color: var(--gold, #d4af37);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* 버튼 입체감 추가 */
}

.lang-btn:hover {
    background: var(--gold, #d4af37);
    color: #000;
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: 110%;
    right: 0; /* 🌟 버튼 우측 끝선을 기준으로 아래로 열림 (화면 잘림 방지) */
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    min-width: 110px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.8);
}

.lang-dropdown.show {
    display: block;
    animation: fadeIn 0.2s ease;
}

.lang-dropdown a {
    display: block;
    padding: 10px 15px;
    color: #ccc;
    text-decoration: none;
    font-size: 12px;
    text-align: left;
    transition: 0.2s;
}

.lang-dropdown a:hover {
    background: #222;
    color: var(--gold, #d4af37);
}

/* 구글 번역 기본 UI 숨기기 */
#google_translate_element,
.skiptranslate,
.goog-te-banner-frame { 
    display: none !important; 
}
body { top: 0 !important; }

/* 📱 모바일 최적화 */
@media (max-width: 768px) {
    .lang-selector { 
        top: 8%; /* 모바일에서는 살짝 더 위로 */
        right: 10px; 
    }
    .lang-btn { padding: 4px 10px; font-size: 11px; }
}

/* =========================================
   [다국어 번역 전용 로딩 스크린]
   ========================================= */
#translate-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

/* 로딩창 활성화 클래스 */
#translate-loader.active {
    opacity: 1;
    pointer-events: all;
}

/* 회전하는 골드 스피너 */
.trans-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    border-top-color: var(--gold, #d4af37);
    animation: transSpin 1s ease-in-out infinite;
    margin-bottom: 20px;
}

@keyframes transSpin {
    to { transform: rotate(360deg); }
}

/* 깜빡이는 텍스트 */
.trans-text {
    color: var(--gold, #d4af37);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    letter-spacing: 2px;
    animation: pulseText 1.5s infinite alternate;
}