/* ① 전체 레이아웃 ------------------------------------------------ */
html,body{height:100%;margin:0;font:14px/1.5 'Noto Sans KR',sans-serif;background:#f5f7fa}
body {
  padding-bottom: 60px; /* 푸터 높이에 맞게 조정 */
}

/* ② 사이드바 ----------------------------------------------------- */
#sidebar{
  width:240px;height:100vh;overflow:auto;flex-shrink:0;
  background:#1f2937;color:#fff;position:fixed;left:0;top:0;z-index:1030
}
#sidebar .logo{padding:1rem 1.5rem;font-weight:600;font-size:1.1rem}
#sidebar .nav{list-style:none;margin:0;padding:0}
#sidebar .nav-link{display:block;padding:.65rem 1rem;color:#fff;text-decoration:none}
#sidebar .nav-link:hover,
#sidebar .nav-link.active{background:#374151;border-radius:.25rem}

/* ③ 본문(wrapper) ---------------------------------------------- */
#main-wrapper{margin-left:240px;flex:1;display:flex;flex-direction:column;min-height:100vh}

.site-footer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 60px; /* body 패딩과 동일 */
  background-color: #1a1a1a;
  color: #ccc;
  text-align: center;
  line-height: 60px;
  z-index: 999;
}


/* ⑤ 컨텐츠 영역 ------------------------------------------------- */
main.page-body{flex:1;padding:1.5rem;background:#fff;margin:1rem;border-radius:8px;
               box-shadow:0 2px 6px rgba(0,0,0,.08)}
canvas{display:block;width:100%!important;max-width:800px;height:auto!important;margin:1.5rem auto}

/* ⑥ 테이블 ------------------------------------------------------ */
table{width:100%;border-collapse:collapse;margin-top:2rem}
th,td{border:1px solid #ccc;padding:.5rem;text-align:right;font-size:.9rem}
th{background:#2ecc71;color:#fff;font-weight:600}
td:first-child,th:first-child,
td:nth-child(2),th:nth-child(2){text-align:left}
tbody tr:nth-child(even){background:#f9f9f9}

/* ⑦ 모바일 ------------------------------------------------------ */
@media(max-width:768px){
  #sidebar{transform:translateX(-240px);transition:transform .25s}
  #sidebar.show{transform:translateX(0)}
  #main-wrapper{margin-left:0}
}