.nav-menu {
  width: 100%;
  max-width: 100%;
  font-family: Arial, sans-serif;
  border: 1px solid #d1c4a6;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
}

/* ✅ 第一層 nav-item 的底線，只限非最後一個 */
.nav-menu > .nav-item:not(:last-child) {
  border-bottom: 1px solid #d1c4a6;
}

.nav-item {
  position: relative;
  white-space: nowrap;
}

/* ✅ 只有第一層 .nav-title 有 padding */
.nav-menu > .nav-item > .nav-title {
  padding: 8px 12px;
  font-size: 1.125rem;
  cursor: pointer;
}

/* 連結樣式 */
.nav-title a {
  text-decoration: none;
  color: #333;
  display: block;
  transition: color 0.3s ease;
}

.nav-title a:hover {
  color: #000;
}

/* ✅ 子分類容器設定 */
.nav-children {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 180px;
  max-width: 100%;
  background-color: #fff;
  border: 1px solid #d1c4a6;
  z-index: 999;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* ✅ 子分類的項目加底線，最後一個不加 */
.nav-children > .nav-item:not(:last-child) {
  border-bottom: 1px solid #d1c4a6;
}

/* 顯示子選單 */
.nav-item:hover > .nav-children,
.nav-children:hover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* 子選單的項目樣式一致 */
.nav-sub a,
.nav-children .nav-title a {
  padding: 8px 12px;
  font-size: 1.125rem;
  display: block;
  color: #333;
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-sub a:hover,
.nav-children .nav-title a:hover {
  background-color: #f0f0f0;
  color: #000;
  border-left-color: #c1a36e;
}

/* 支援第三層滑出 */
.nav-children .nav-item {
  position: relative;
}

.nav-children .nav-children {
  left: 100%;
  top: 0;
}

/*-------------------------------------------------
  響應式調整：手機板 max-width:768px
-------------------------------------------------*/
@media (max-width: 768px) {
  /* 主側欄區塊寬度 */
  .navside {
    width: 100%;
  }

  .sidebar-left {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0 !important;
    border-right: none !important;
    flex: 0 0 100%;
  }

  /* ✅ 手機版移除所有邊框 */
  .nav-menu,
  .nav-menu *,
  .nav-menu *::before,
  .nav-menu *::after {
    border: none !important;
    box-shadow: none !important;
  }

  /* ✅ 改為橫向排版的簡易分類標籤 */
  .nav-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border: none;
    background-color: #fff;
  }

  .nav-menu .nav-item {
    flex: 0 0 auto;
    border: none;
  }

  .nav-menu .nav-title {
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: #f3e8c8;
    display: inline-block;
    box-sizing: border-box;
  }

  .nav-menu .nav-title a {
    color: #333;
    text-decoration: none;
  }

  .nav-menu .nav-title:hover {
    background-color: #e3d6b3;
  }

  /* ✅ 隱藏滑出的子選單結構 */
  .nav-children {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}