/* 全局樣式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
    }
    
    html, body {
      overflow-x: hidden; 
      width: 100%;
    }

    body {
      background-color: #fdfaf7;
      color: #333; 

    }

    /* 1. 頂部導覽列 (Header) */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 50px;
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .logo-container {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .custom-logo {
    height: 30px; /* 讓圖片高度跟原本的印章圖示一樣 */
    width: auto;  /* 寬度會根據圖片比例自動調整，不會變形 */
    display: block;
}

    .logo-img {
      height: 45px; /* 品牌 Logo */
    }

    nav {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    nav a {
      text-decoration: none;
      color: #333;
      font-size: 15px;
      font-weight: 500;
      transition: color 0.3s;
    }

    nav a:hover {
      color: #0066cc;
    }

    .header-icons {
      display: flex;
      gap: 12px;
      margin-left: 10px;
      font-size: 18px;
      color: #555;
    }

    /* 2. Hero Banner 區塊 */
    .hero-banner {
      position: relative;
      width: 100%;
      height: 260px;
      /* 木紋與花卉背景圖 */
      background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), 
                  url('https://images.unsplash.com/photo-1513694203232-719a280e022f?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .hero-title {
      font-size: 32px;
      color: #222;
      letter-spacing: 4px;
      text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
      font-weight: 600;
      text-align: center;
    }

    /* 麵包屑導航 */
    .breadcrumb-container {
      max-width: 1200px;
      margin: 15px auto;
      padding: 0 20px;
      text-align: right;
      font-size: 14px;
      color: #666;
    }

    .breadcrumb-container a {
      color: #666666;
      text-decoration: none;
    }

    .breadcrumb-container a:hover {
      text-decoration: underline;
    }

    /* 3. 主要內容區域 (Main Content) */
    .container {
      max-width: 1200px;
      margin: 10px auto 60px;
      padding: 0 20px;
      display: grid;
      flex-direction: column;
      gap: 30px;
    }

    /* 左側邊欄 Sidebar */
    /* .sidebar-title {
      font-size: 20px;
      font-weight: normal;
      color: #444;
      margin-bottom: 20px;
    } */
/* 
    .sidebar-title span {
      font-family: serif;
      font-style: italic;
      color: #777;
    }

   */
    .category-list {
      list-style: none;
    }

    .category-item {
      padding: 12px 20px;
      background: #f0ebe5;
      border-radius: 20px;
      margin-bottom: 10px;
      font-size: 15px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .category-item:hover, .category-item.active {
      background: #e6ded5;
    }

    /* 右側文章列表 Content Grid */
    .article-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 20px;
    }

    .article-card {
      display: flex;
      background: #fff;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      border: 1px solid #f0f0f0;
    }

    .card-thumb {
      width: 120px;
      height: 120px;
      background-color: #fcebe8; /* 粉紅底色 */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
    }

    .card-thumb img {
      width: 60px;
      height: 60px;
    }

    .card-content {
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .card-title {
      font-size: 18px;
      color: #333;
      margin-bottom: 8px;
      font-weight: 500;
    }

    .card-date {
      font-size: 13px;
      color: #888;
    }

    /* 4. 右下角懸浮社群按鈕 (Floating Socials) */
    .floating-socials {
      position: fixed;
      right: 20px;
      bottom: 30px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 1000;
    }

    .social-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 22px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      text-decoration: none;
      transition: transform 0.2s;
    }

    .social-btn:hover {
      transform: scale(1.1);
    }

    .btn-fb { background-color: #3b5998; }
    .btn-line { background-color: #06c755; }
    .btn-phone { background-color: #f37023; }
    .btn-msg { background-color: #0084ff; }

    /* 🌟漢堡按鈕預設在電腦版隱藏 (放在響應式 @media 的上方) */
    .menu-toggle {
      display: none;
      background-color: transparent;
      border: none;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      cursor: pointer;
      padding: 15px 0;
      width: 100%;
      text-align: center;
      border-top: 1px solid #f0f0f0;
    }

    /* 電腦板下拉選單外層容器 */
    /* ========================================= */
    /* 第一層選單（您原本的設定）                  */
    /* ========================================= */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    /* 下拉選單本體（預設隱藏） */
    .dropdown-menu {
        display: none;
        position: absolute;
        width: 250px;
        top: 100%; /* 出現在按鈕正下方 */
        left: 0;
        min-width: 160px;
        background-color: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        border-radius: 6px;
        padding: 8px 0;
        z-index: 1000;
        border: 1px solid #e1e8ed;
    }

    /* 下拉選單內的子連結（共用樣式） */
    .dropdown-menu a {
        color: #333333;
        padding: 12px 15px;
        text-decoration: none;
        display: block;
        font-size: 14px;
        white-space: normal; /* 允許換行 */
        transition: background-color 0.2s, color 0.2s;
        border-bottom: 1px solid #eee; /* 淡淡的分隔線 */
    }

    /* 去除最後一個項目的底線 (包含第一層與第二層) */
    .dropdown-menu a:last-child,
    .dropdown-submenu:last-child > a {
        border-bottom: none;
    }

    /* 當滑鼠移入下拉子項目時 */
    .dropdown-menu a:hover {
        background-color: #eaf2f8; /* 淺藍色高亮 */
        color: #0066cc;
    }

    /* 核心魔法：滑鼠移入 .dropdown 容器時，顯示第一層選單 */
    .dropdown:hover > .dropdown-menu {
        display: block;
    }

    /* 滑鼠懸停時向下箭頭稍微旋轉 */
    .dropdown:hover .fa-angle-down {
        transform: rotate(180deg);
        transition: transform 0.3s;
    }

    /* ========================================= */
    /* 新增的「第二層選單」CSS 樣式                */
    /* ========================================= */
    .dropdown-submenu {
        position: relative;
    }

    /* 讓帶有子選單的母按鈕，在懸停時保持高亮狀態 */
    .dropdown-submenu:hover > a {
        background-color: #f7f9fc;
        color: #0056b3;
    }

    /* 母按鈕右側箭頭的旋轉動畫 */
    .dropdown-submenu > a > i {
        transition: transform 0.3s ease;
    }
    /* 展開時箭頭向上翻轉180度 */
    .dropdown-submenu.active a > i {
        transform: rotate(180deg); 
    }

    .submenu-content {
        /* 核心魔法：使用 max-height 創造手風琴般的滑順下拉效果 */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
        
        /* 🌟 關鍵修改：取消絕對定位，讓它留在原本的排列中撐開高度 */
        position: relative; 
        width: 100%; 
        
        /* 視覺層級區分：加上淡淡的灰底色與內陰影，營造凹下去的感覺 */
        background-color: #f8fafc; 
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.03);
        border-radius: 0; 
        border: none;
        z-index: 1;
    }

    /* 當滑鼠移入分類時，向下展開第二層 */
    .dropdown-submenu.active > .submenu-content {
        max-height: 800px; /* 設定一個大於內容實際總高度的安全值即可 */
        opacity: 1;
    }

    /* ========================================= */
    /* 調整第二層項目的文字與層級感                */
    /* ========================================= */
    .submenu-content a {
        padding-left: 32px; /* 增加左邊距，產生「縮進」的樹狀階層感 */
        font-size: 13px; /* 字體稍微縮小，區分主次 */
        color: #555;
        background-color: transparent;
        border-bottom: 1px solid #edf1f5;
    }

    /* 第二層最後一個項目不要底線 */
    .submenu-content a:last-child {
        border-bottom: none;
    }

    /* 懸停時的微互動 */
    .submenu-content a.active {
        color: #0056b3;
        padding-left: 38px; /* 一樣保留滑鼠移入時往右微推的質感 */
    }


        /* 確保父元素可以作為絕對定位的基準 */
        /* 1. 確保父容器是相對定位 */
    .floating-socials {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      align-items: flex-end; /* 讓內容靠右對齊 */
    }

    /* 2. 更新 QR Code 的 CSS 樣式 (關鍵！) */
    #line-qrcode {
      display: none; /* 預設隱藏 */
      width: 250px;  /* 圖片寬度 */
      height: 250px;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      
      /* 關鍵修正：使用絕對定位，讓它漂浮而不影響原本圖示 */
      position: absolute;
      bottom: 70px; /* 調整這個值，讓它顯示在 LINE 按鈕的正上方 */
      right: 0;
    }

    /* 用一個簡單的 hover 規則來控制顯示 */
    .floating-socials.active #line-qrcode {
      display: block;
    }
        
        /* 響應式調整 (Mobile Adaptive) */
    @media (max-width: 768px) {
      header { 
        padding: 15px 0 0 0; /* 取消左右內距，讓選單底線可以貼齊螢幕邊緣 */
        flex-direction: column; 
        gap: 15px; 
      }
      
      .logo-container {
        padding: 0 20px; /* 幫 Logo 獨立保留左右內距 */
      }

      /* 顯示漢堡按鈕 */
      .menu-toggle {
        display: block;
      }

      /* 預設隱藏導覽列，並設定為垂直排列 */
      nav { 
        display: none; 
        width: 100%;
        flex-direction: column; 
        background-color: #fff;
        padding-bottom: 20px;
      }

      /* 讓選單內的項目在手機版寬度滿版並置中 */
      nav > a, .dropdown {
        width: 100%;
        text-align: center;
      }

      nav > a, .dropdown > a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid #fdfaf7;
      }

      /* 調整聯絡圖示的間距與置中 */
      .header-icons {
        justify-content: center;
        padding-top: 15px;
      }

      /* 🌟 核心魔法：當 JS 加上 .active 類別時，將 display: none 改為 flex 顯示出來 */
      nav.active {
        display: flex;
      }
      /* 🌟 新增：修正手機版下拉選單的排版 */
      .dropdown {
        width: 100%;
        text-align: center;
      }

      .dropdown-menu {
        position: static; /* 核心魔法：取消懸浮，改為正常的網頁排版流，把下面的元素往下推 */
        width: 100%;
        box-shadow: none; /* 拿掉懸浮陰影 */
        border: none;
        border-radius: 0;
        background-color: #f9f9f9; /* 給一點淺灰底色，區別主選單與子選單 */
        padding: 0;
      }

      .dropdown-menu a {
        padding-left: 20px; /* 稍微往內縮排 */
        font-size: 14px; /* 子選單字體可以稍微小一點 */
        background-color: transparent;
      }
    
      .container {
        grid-template-columns: 1fr; /* 將原本的左右兩欄改為一欄 */
      }

      .sidebar-title {
        text-align: center; 
        margin-bottom: 15px;
      }
      .notary-section {
        grid-template-columns: 1fr;
      }
      .notary-card {
        padding: 25px 20px;
      }
  }