.main-navigation {
      max-width: 980px;
      margin: 12px auto 22px;
      padding: 8px 14px;
      display: flex;
      justify-content: center;
      align-items: center;

      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }

    .nav-links {
      display: flex;
      flex-direction: row;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .nav-links::-webkit-scrollbar { display: none; }

    .nav-links a {
      flex: 0 0 auto;
      padding: 6px 16px;
      font-size: 15px;
      color: #444;
      text-decoration: none;

      background: #f3f3f5;
      border-radius: 999px;
      border: 1px solid #dcd7e5;

      transition: all 0.25s ease;
    }

    /* 滑過：淡紫色 */
    .nav-links a:hover {
      background: #efd9ff;
      border-color: #bf9ee6;
      color: #4b2a6a;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    /* 手動標示目前頁面 active */
    .nav-links a.active {
      background: #7a1fa2;
      color: #fff;
      border-color: #7a1fa2;
      box-shadow: 0 3px 10px rgba(122,31,162,0.35);
    }

    @media (max-width: 768px) {

      .nav-links {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }

    /* 手機nav排兩行 */
      .nav-links a {
        display: block;
        padding: 6px 10px;
        font-size: 14px;

        background: #f7f7f7;     /* 有顏色才看得出圓角 */
        border-radius: 20px;     /* ⭐ 這裡保留你的圓角 */
        overflow: hidden;        /* ⭐ 圓角才會完整呈現 */

        text-align: center;
      }
    }