@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


/* Universal Box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}



/* === 전체 4분할 Grid 레이아웃 === */
#app-grid {
  display: grid;
  grid-template-columns: 1fr 300px;      /* 좌(본문), 우(패널) */
  grid-template-rows: auto 1fr;     /* topbar, navbar, 본문+패널 */
  grid-template-areas:
    "header-group header-group"
    "main-content-wrapper main-content-wrapper";
  height: 100vh;
  min-height: 100vh;
  background: #f1f1f1;
}

#header-group {
  grid-area: header-group; /* 이 부분이 중요 */
  z-index: 10; /* topbar의 z-index를 header-group에 적용 */
  display: flex; /* 내부 topbar와 navbar가 가로로 나열되도록 flex 사용 */
  flex-direction: column; /* topbar 위에 navbar가 오도록 column 방향 설정 */
/*   transition: transform; */
}

#main-content-wrapper {
  grid-area: main-content-wrapper; /* app-grid의 새로운 영역에 할당 */
  display: grid; /* 내부 요소를 위한 그리드 */
  grid-template-columns: 1fr; /* main-left와 main-right를 위한 2열 */
  grid-template-rows: 1fr; /* 단일 행 */
  overflow-y: auto; /* 이 컨테이너에 스크롤바 부여 */
  height: calc(100vh - 94px); /* header-group (94px) 제외한 나머지 높이 */
}

#topbar    { 
  z-index: 10; 
}

#navbar    { 
  z-index: 9;  
}

#main-left {
  background: #fff;
  padding-right: 315px;
}

#main-right{ 
  background: #fafafa; 
  border: 1px solid #ccc; 
  position: fixed;
  top: 15px; /* 스크롤 시 상단에 고정될 위치 */
  right: 15px; /* 화면 오른쪽에 고정 */
  width: 300px; /* 원래 너비 유지 */
  height: calc(100vh - 40px); /* 헤더 높이 제외한 전체 뷰포트 높이 */
  z-index: 5; /* 다른 요소 위에 오도록 z-index 조정 */
}

/* 기본은 보임 */
#topbar, #navbar {
  overflow: hidden;
}

/* 숨길 때(위로 올려서 화면 밖으로) */
.hide-on-scroll {
  pointer-events: none;
}





body {
  margin: 0;
  font-family: 'Roboto', 'Helvetica Neue', 'Segoe UI', 'Arial', sans-serif;
  padding: 0;
  background-color: #f1f1f1; /* 전체 배경색 */
  color: #333;
}



/* ✅ Top Navigation Bar (topnav) - 하얀 배경으로 변경 */
.topnav {
  background-color: #ffffff; /* 흰색 배경 */
  overflow: hidden; 
  padding: 0px 16px; 
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  border-bottom: 1px solid #ddd; 
}

.topnav .topbar-title {
  float: left; /* Align to the left */
  color: #333; /* 어두운 글자색 */
  text-align: center;
  text-decoration: none;
  font-size: 24px; /* Larger font for title */
  font-weight: bold;
  margin: 8px 0px;
}

.topnav .topbar-title:hover {
  background-color: #f1f1f1; /* 호버 시 배경색 약간 변경 */
  color: #04AA6D; /* 호버 시 W3Schools 녹색으로 변경 */
}

/* ✅ Main Navigation Bar (navbar) - 검은 배경으로 변경 */
.navbar {
  background-color: #282A35; /* 어두운 배경 */
  overflow: hidden;
  display: flex; /* Use flexbox for spacing */
  padding: 0 16px; /* Horizontal padding */
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); /* Subtle shadow */
}

.navbar a {
  display: block; /* Make links block level */
  color: #f2f2f2; /* 밝은 글자색 */
  text-align: center;
  padding: 14px 16px; /* Padding for links */
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #04AA6D; /* W3Schools 녹색 배경 */
  color: white; /* 호버 시 글자색 흰색 */
}

.navbar a.active {
  background-color: #04AA6D; /* W3Schools 녹색 for active */
  color: white;
  /* w3schools 스타일처럼 현재 페이지를 선택한 상태로 만들려면 추가적인 PHP 로직이 필요합니다. */
  /* 이 CSS만으로는 해당 기능을 구현할 수 없습니다. */
}

/* ✅ Responsive Adjustments */
@media (max-width: 900px) {
  #app-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr; /* header-group, main-content-wrapper */
    grid-template-areas:
      "header-group"
      "main-content-wrapper"; /* 변경된 영역 */
    height: auto;
  }

  #main-content-wrapper {
    grid-template-columns: 1fr; /* main-left만 1열 */
    grid-template-rows: auto auto; /* main-left, main-right를 세로로 쌓기 */
    overflow-y: auto; /* 스크롤 유지 */
    height: calc(100vh - 94px); /* 헤더 제외 높이 유지 */
  }

  #main-left, #main-right {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 16px; /* Space between stacked columns */
    min-width: unset; /* Remove min-width to allow full width */
    max-width: unset; /* Remove max-width */
    width: 100%; /* Take full width */
    padding-right: 0 !important;  
  }

  #main-right {
    display: none !important; /* right-box.css와 일치하도록 유지 */
  }
}