body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    background-color: #ffeea9; 
    display: flex;
    flex-direction: column;
    height: 100vh;
}

body::before {
    content: '';
    background-image: url('applogo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 300px;
    opacity: 0.1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    display: none; /* 배경 로고 숨기기 */
}

.page-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

.header {
    background-color: #fff5cc; 
    color: #5D4037; 
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    border-bottom: 2px solid rgba(0,0,0,0.05);
    z-index: 10;
    display: flex; /* 자식 요소 정렬을 위해 추가 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
}

.header h1 {
    display: flex;
    align-items: center;
    gap: 10px; /* 로고와 글씨 사이 간격 */
    margin: 0; /* h1의 기본 여백 제거 */
    font-size: 22px; /* 제목 글씨 크기 */
}

.header-logo {
    height: 45px;
    width: auto;
    display: none; /* 헤더 로고 숨기기 */
}

.dashboard-grid {
    display: flex;
    flex-grow: 1;
    padding: 20px;
    gap: 20px;
    min-height: 0;
}

.panel {
    background-color: var(--card, #fff5cc);
    border-radius: 16px;
    box-shadow: var(--shadow, 0 4px 10px rgba(0,0,0,0.1));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.left-panel {
    flex-basis: 380px;
    flex-shrink: 0;
}

.right-panel {
    flex-grow: 1;
}

.tab-header {
    padding: 10px;
    background-color: rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.tab-link {
    padding: 8px 15px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: var(--muted, #8D6E63);
    border-radius: 8px;
}

.tab-link.active {
    background-color: white;
    color: var(--text, #5D4037);
}

.tab-content {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto;
    display: none;
}

.tab-content.active {
    display: block;
}

.weather-widget { text-align: center; }
.widget-top { margin-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 15px; }
#weather-comment { font-size: 16px; color: #5D4037; margin: 0 0 10px; }
.current-time { font-size: 14px; color: #8D6E63; margin: 0 0 10px; }
.widget-title { font-size: 24px; font-weight: bold; margin: 0; }
.widget-bottom { display: flex; flex-direction: column; gap: 20px; }
.current-weather { background-color: rgba(255, 255, 255, 0.7); border-radius: 10px; padding: 15px; }
.current-weather h4 { margin: 0 0 10px; font-size: 16px; }
.temp-and-icon { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 10px; }
.current-temp { font-size: 36px; font-weight: bold; }
.current-icon { font-size: 36px; }
#current-condition { margin: 0; font-size: 16px; }
.hourly-forecast { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 10px; background-color: rgba(255, 255, 255, 0.7); border-radius: 10px; padding: 15px; }
.hourly-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hourly-item .time { font-size: 14px; font-weight: bold; }
.hourly-item .icon { font-size: 24px; }
.hourly-item .temp { font-size: 16px; }

#map { width: 100%; height: 100%; border-radius: 10px; }

.dashboard-menu { display: none; } /* 하단 메뉴는 더 이상 사용하지 않음 */

.hamburger-menu { font-size: 30px; color: #5D4037; cursor: pointer; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }

.sidenav { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1010; 
    top: 0; 
    left: 0; 
    background-color: #6D4C41; 
    overflow-x: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
}

.sidenav a, .sidenav-item { 
    padding: 10px 15px; 
    text-decoration: none; 
    font-size: 22px; 
    color: #FFFBEB; 
    display: flex; 
    align-items: center; 
    transition: 0.3s; 
}

.sidenav a:hover { color: #FBC02D; }

.sidenav-item { justify-content: space-between; }

/* 이야기 게임 + 퍼즐 게임 스타일 공통 적용 */
.sidenav a[href*="story-game"],
.sidenav a[href*="puzzle-game"] {
  font-weight: 600;
  color: #ff9800;
}
.sidenav a[href*="story-game"]:hover,
.sidenav a[href*="puzzle-game"]:hover {
  color: #ffa726;
}

.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #28a745; }
input:checked + .slider:before { transform: translateX(22px); }

.help-button-container { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.help-button { font-size: 24px; font-weight: bold; color: #5D4037; background-color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
#help-btn-close { display: none; font-size: 32px; }

/* 예전 모달 스타일은 제거하고, 리뉴얼 버전 사용 */
/* 도움말 말풍선 위치용 요소는 유지 */
.help-item { 
    position: absolute; 
    transform: translate(-50%, 15px); 
}
.help-text { 
    background-color: rgba(0, 0, 0, 0.7); 
    padding: 10px 15px; 
    border-radius: 8px; 
    color: white; 
    font-size: 16px; 
    text-align: center; 
    white-space: nowrap; 
}

/* === 모달/오버레이 리뉴얼 === */
:root{
  --accent-color:#ff9800; /* 주황 포인트 */
  --modal-bg:#fffdfa;
  --text-color:#222;
}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:99999; display:none;
}

.modal{
  position:fixed; 
  inset:0; 
  display:none; 
  align-items:center; 
  justify-content:center;
  z-index:100000; 
  animation:fadeIn .3s ease;
}

@keyframes fadeIn{ 
  from{opacity:0; transform:scale(.95)} 
  to{opacity:1; transform:scale(1)} 
}

.modal.open,
.modal-backdrop.open{ 
  display:flex; 
}

.modal-content{
  width:min(700px,90vw); 
  max-height:80vh; 
  height:auto;            /* 가운데 카드형 & 내용에 맞게 높이 */
  overflow-y:auto;
  background:var(--modal-bg); 
  border-radius:20px; 
  box-shadow:0 8px 40px rgba(0,0,0,.3);
  padding:30px 32px 36px; 
  color:var(--text-color); 
  line-height:1.6; 
  font-size:16px;
}

.modal-content h2{ 
  text-align:center; 
  margin-bottom:20px; 
}
.modal-content h2 span{ 
  color:var(--accent-color); 
  font-weight:700; 
}

.modal-content h3{
  margin-top:24px; 
  color:var(--accent-color); 
  font-size:1.05rem;
  border-bottom:2px solid #ffe0b2; 
  display:inline-block; 
  padding-bottom:3px;
}

.help-list li+li{ margin-top:6px; }

.modal-close-btn{
  position:absolute; 
  top:18px; 
  right:22px; 
  background:none; 
  border:none;
  font-size:28px; 
  color:#555; 
  cursor:pointer; 
  transition:color .2s ease;
}
.modal-close-btn:hover{ color:var(--accent-color); }

/* 스크롤바 */
.modal-content::-webkit-scrollbar{ width:8px; }
.modal-content::-webkit-scrollbar-thumb{ background:#ddd; border-radius:4px; }
.modal-content::-webkit-scrollbar-thumb:hover{ background:#bbb; }

/* 모달 열렸을 때 바디 스크롤 방지 */
body.no-scroll{ overflow:hidden; }

/* === 오른쪽 패널 분할 레이아웃 === */
.right-panel {
  display: flex;
  flex-direction: column;
}
.right-split {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  min-height: 0; /* 자식 overflow 올바르게 동작 */
}
.sub-panel {
  flex: 1 1 0;
  min-height: 0; /* 스크롤/채움 균형 */
}

/* === 슬라이드 쇼 === */
.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
#slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 이미지가 비율 유지하며 영역 채움 */
  display: block;
}
.slide-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.slide-dots {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
}
.slide-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
}
.slide-dots .dot.active {
  background: rgba(255,255,255,1);
}

/* === 모바일 대응 (오른쪽 분할 높이 보정) === */
@media (max-width: 860px) {
  .right-split {
    gap: 14px;
  }
  .top-panel, .bottom-panel {
    min-height: 260px; /* 모바일에서 패널이 너무 작아지지 않게 */
  }
  #map {
    min-height: 260px !important; /* 기존 맵 규칙과 충돌 방지 */
  }
}

/* === SideNav: 항상 스크롤 가능 + 마지막 항목이 가려지지 않도록 여유 확보 === */
.sidenav{
  position: fixed;
  inset: 0  auto  0  0;      /* top:0; left:0; bottom:0 */
  width: var(--sidenav-width, 280px);
  height: auto !important;   /* 100vh 고정 대신 bottom:0로 높이 확보 */
  max-height: none !important;
  overflow-y: scroll !important;   /* 항상 스크롤바 표시 */
  overflow-x: hidden !important;
  box-sizing: border-box;
  padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 28px) !important;  /* 하단 여유 */
  scrollbar-gutter: stable;         /* 스크롤 공간 상시 확보 */
  z-index: 1002;
  -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
  overscroll-behavior: contain;      /* 바디로 스크롤 전파 방지 */
}

/* 스크롤바를 눈에 띄게 */
.sidenav{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.45) rgba(0,0,0,.12); }
.sidenav::-webkit-scrollbar{ width: 10px; }
.sidenav::-webkit-scrollbar-track{ background: rgba(0,0,0,.12); border-radius: 8px; }
.sidenav::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.45); border-radius: 8px; }
.sidenav::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.6); }

/* 마지막 링크가 하단에 달라붙지 않도록 */
.sidenav a:last-child,
.sidenav .sidenav-item:last-child{
  margin-bottom: 12px !important;
  padding-bottom: 6px !important;
}

/* (혹시 있을 수 있는) 내부에 높이를 잡아먹는 transform/absolute 요소 무시 */
.sidenav *{ max-width: 100%; }

.sidenav-spacer{
  height: calc(env(safe-area-inset-bottom, 16px) + 24px);
  flex: 0 0 auto;
}

/* === 내 위치로 보기 공통 버튼 === */
.my-location-btn{
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: #5D4037;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 500;
}
.my-location-btn:hover{
  background: #fff8e1;
}

/* index.html 지도 탭을 버튼 기준으로 relative */
#map-tab{
  position: relative;
}

/* navigation.html에서 사용할 래퍼 */
.map-wrapper{
  position: relative;
}