body {
    //font-family: 'Noto Sans TC', sans-serif;
    margin: 0;
    padding: 0;
  }
  
  /*選單範圍底色*/
  header {
    background:linear-gradient(#F5F2ED,#E6DBD0);
    color: white;
    padding: 10px 20px;
  }
  
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .menu, .submenu {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .menu {
    display: flex;
  }
  
  .menu li {
    position: relative;
    margin-left: 20px;
  }
  
  /*選單文字*/
  .menu a {
    color: #383737;
    text-decoration: none;
    font-size: 18px;
    //padding: 10px;
    display: block;
  }

  .submenu {
    display: none; /* 預設隱藏第二層選單 */
    position: absolute;
    top:100%;
    left:0;
    background:linear-gradient(#F5F2ED,#E6DBD0);    /*選單區塊背景 漸層*/
    min-width: 250px; /* 選單區塊寬度 */
    z-index: 1000; /* 確保選單在最上層 */
  }
  
  .submenu li {
    margin: 0;
  }
  
  .submenu a {
    padding: 10px;
    border-bottom: 1px solid #d8bc84;
  }
  
  /* 網頁版：顯示第二層選單 */
  .menu li:hover > .submenu,
  .menu li:focus-within > .submenu {
    display: block;
  }

  
  /* 漢堡選單按鈕 */
  .menu-icon {
    font-size: 24px;
    cursor: pointer;
    display: none; /* 預設隱藏 */
  }
  /* 新增 */
  .menu-icon .bar {
    width: 25px;
    height: 3px;
    background-color:#5F5F5F;
    margin: 5px 0;
    transition: 0.3s;
  }
  
  #menu-toggle {
    display: none; /* 隱藏 checkbox */
  }
  
  /* 響應式設計 */
  @media (max-width: 830px) {
    .menu-icon {
      display: block; /* 在小螢幕上顯示漢堡按鈕 */
    }
  
    .menu {
      display: none; /* 預設隱藏選單 */
      flex-direction: column;
      width:65%;
      background:linear-gradient(#F5F2ED,#E6DBD0);    /*選單區塊背景 漸層*/
      position: absolute; /*原本屬性 選單跟著滑動*/
      //position: fixed; /*修改過的 選單固定位置*/
      top:150px;
      left: 0;
      //right:0px;
      z-index: 1000; /* 確保選單在最上層 */
    }
  
    .menu li {
      margin: 0;
      padding: 10px 20px;
      border-bottom: 1px solid #d8bc84;
    }

    .menu a {
      //padding: 10px 20px;
      //border-bottom: 1px solid #555;
    }
    .submenu {
      position: static; /* 讓第二層選單變成垂直排列 */
      background:linear-gradient(#f1e1c8,#e2c1a0);    /*選單區塊背景 漸層*/
      min-width: 250px;
    }

    .submenu a {
      //padding-left:50px; /* 增加內縮，顯示層級關係 */
      padding: 0px;
      border-bottom: 0px;
    }
  
    /* 當 checkbox 被選中時顯示選單 */
    #menu-toggle:checked ~ .menu {
      display: flex;
    }
  }