/* =========================================
   Layout (Sidebar + Main)
========================================= */
header{
  width: max-content;
  border-right: 1px solid black;
}
a{
  text-decoration: none;
  color: black;
}
.home{
  list-style: none;
  border: 1px solid black;
  padding: 5px;
}
header ul{
  padding-inline-start: 0px;
  margin: 0px;
  padding: 5px;
}
header li{
  list-style: none;
  border: 1px solid black;
  padding: 5px;
}

/* 오른쪽 메인 영역 */
body > div:last-child {
  padding: 18px 18px;
}

/* =========================================
   Sidebar (menulist)
========================================= */
.menulist {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: gray;                /* 통일 */
  padding: 14px 12px;
  box-sizing: border-box;
  border-right: 1px solid rgba(0,0,0,0.18);
}

/* 스크롤바 */
.menulist::-webkit-scrollbar {
  width: 10px;
}
.menulist::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
}
.menulist::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
}

/* 메뉴 최소 크기 */
.wrap_menu {
  min-width: 150px;
}

/* =========================================
   Menu block (ul)
========================================= */
.menulist ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
}

/* =========================================
   Menu Title
========================================= */
.menutitle {
  padding: 12px 12px;
  background: rgba(0,0,0,0.16);
  border-bottom: 1px solid rgba(255,255,255,0.08);

  display: flex;
  justify-content: center;
}

.menutitle p {
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.2px;
  font-size: 14px;
}

/* =========================================
   Menu Items
========================================= */
.menulist li {
  margin: 0;
}

.menulist li a {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 11px 12px;
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  font-size: 13.5px;
  line-height: 1.2;

  border-bottom: 1px solid rgba(255,255,255,0.08);

  transition: background .15s ease, transform .05s ease, color .15s ease;
}

/* 마지막 아이템 border 제거 */
.menulist li:last-child a {
  border-bottom: none;
}

/* ● 아이콘 */
.menulist li a::before {
  content: "•";
  opacity: 0.8;
  transform: translateY(-1px);
}

/* hover */
.menulist li a:hover {
  background: rgba(255,255,255,0.10);
}

/* active 눌림 */
.menulist li a:active {
  transform: translateY(1px);
}

/* 빈 링크 숨기기 */
.menulist li a:empty {
  display: none;
}

/* active 상태 강조 */
.menulist li a.active {
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-weight: 800;
}

/* =========================================
   Responsive
========================================= */
@media (max-width: 980px) {
  body {
    grid-template-columns: 1fr;
  }

  .menulist {
    position: relative;
    height: auto;
    overflow: visible;
    border-right: none;
  }
}