body { 
  margin:0; 
  overflow:hidden; 
  font-family:'Orbitron', sans-serif; 
  background: linear-gradient(120deg,#0a0a1a,#1a001a); 
}

/* 3D 뷰어 */
#viewer { 
  position:absolute; top:0; left:0;
  width:100vw; height:100vh;
  z-index:1;
}

/* 좌측 메뉴 버튼 */
#menuBtn {
  position:absolute; top:20px; left:20px; z-index:1001;
  background: #00ffff;            /* 회색 배경 */
  padding:12px; font-size:18px; cursor:pointer; border-radius:6px;
  color:#5d00ff;
  transition: all 0.3s;
  border: 1px solid #00ffff;  /* 테두리 */
}
#menuBtn.shifted { left:270px; }

/* 좌측 메뉴 */
#sideMenu {
  position:absolute; top:0; left:-250px; width:250px; height:100%;
  background: rgba(20,20,30,0.95);
  backdrop-filter: blur(10px);
  color:#00ffff;
  z-index:1000; padding:20px; box-sizing:border-box;
  transition:left 0.3s ease;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;

  border: 2px solid #00ffff;   /* 메뉴 테두리 */
  border-radius:8px;           /* 모서리 둥글게 */
}
#sideMenu.open { left:0; }
#sideMenu h2 { margin:0 0 15px 0; font-size:20px; color:#00ffff; }

/* 메뉴 아이콘 + 글자 */
.menuItem, .barBtn {
  display:flex; align-items:center; gap:6px; 
  padding:10px 14px; 
  width:160px;                 
  background: rgba(20,20,30,0.9); 
  color:#00ffff;
  font-size:16px; 
  border-radius:6px; 
  cursor:pointer;
  transition: all 0.3s;
  justify-content:center;

  border: 1px solid #00ffff;  /* 메뉴 아이템 테두리 */
}
.menuItem i, .barBtn i { font-size:18px; }
.menuItem span { flex:1; }

/* 클릭 시 고정 색상 (주황색) */
.menuItem.active, .barBtn.active {
  background-color:#ff8800;
  color:#111;
  border-color:#ff8800;        /* 활성화 시 테두리 색상 변경 */
}

/* hover */
.menuItem:hover, .barBtn:hover {
  background: rgba(20,20,30,0.95); 
  color:#fff; 
  transform:scale(1.05); 
}

/* 상단/하단 메뉴 바 */
#topBar, #bottomBar {
  position:fixed; left:0; width:100%; height:50px; display:flex; justify-content:center; align-items:center; gap:20px;
  background: #555;            /* 회색 배경 */
  backdrop-filter: blur(10px);
  z-index:999;
}
#bottomBar { bottom:0; }

/* 라벨 */
.label {
  font-size:22px; color:#00ffff;
  padding:4px 8px; border-radius:5px; background: rgba(0,0,0,0.6);
  pointer-events:auto; cursor:pointer;
}
.label:hover { color:#fff; transform:scale(1.1); }

/* 팝업 */
#popup {
  position: fixed; 
  top:50%; left:50%; transform:translate(-50%,-50%);
  background: #555;            /* 회색 배경 */
  color:#00ffff; 
  padding:0;
  font-size:20px; 
  border-radius:8px;
  display:none; 
  text-align:center;
  box-shadow:0 0 12px #000;
  max-width:90vw;
  width:80vw;      /* 팝업 가로폭 */
  height:45vw;     /* 16:9 비율 */
  z-index:9999; 
}

/* 닫기 버튼 X */
#popup button#popupClose {
  position:absolute; top:5px; right:5px;
  padding:8px 12px;          /* 클릭 영역 확대 */
  background:#555;            /* 팝업 배경과 동일 */
  color:#ff8800;
  border:none; 
  border-radius:4px;
  font-size:24px;             /* X 표시 크게 */
  cursor:pointer;
  z-index:10;
}

/* iframe 16:9 비율로 중앙 */
#popupContent {
  position:relative;
  width:100%; height:100%;
}
#popupContent iframe {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  border:none;
  border-radius:0;
}

/* 로고 이미지 */
#sideMenu .logo, #bottomBar .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

/* 좌측 옵션 메뉴에서 로고 크기 키우고 하단으로 위치 */
#sideMenu {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 항목 사이의 공간을 분배 */
  height: 100%;  /* 높이를 100%로 설정하여 하단에 배치 */
}

#sideMenu .logo {
  margin-top: auto; /* 로고를 하단에 배치 */
}

#sideMenu .logo img {
  width: 100px;  /* 로고 크기 키움 */
  height: auto;
}

/* 하단 메뉴 로고 크기 */
#bottomBar .logo img {
  width: 40px;  /* 하단 메뉴에서는 기본 크기 */
  height: auto;
}