@charset "utf-8";
/* CSS Document */

 :root{
      --bg:#0a0a0a; /* 全站底色 */
      --fg:#f5f5f5; /* 主要字色 */
      --muted:#b3b3b3;
      --accent:#a3e635; /* 螢綠點綴，可自行更改 */
      --container:1600px; /* 桌機最大寬度 */
      --banner-h-desktop:min(62vh, 720px);
      --banner-h-mobile:48vh;
      --nav-h:64px;
    }

.work-section {
  margin-top: 24px;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.work-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
}

.work-item img {
  width: 100%;
  aspect-ratio: 1 / 1; /* 保持正方形 */
  object-fit: cover;
  display: block;
}

.work-item p {
  padding: 8px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}

.car-card {
  border: 2px solid #007bff;
  border-radius: 12px;
  padding: 16px;
  background: #000;
  max-width: 360px;
  margin: 0 auto;
  text-align: left;
  font-family: "Microsoft JhengHei", sans-serif;
}

.car-card h3 {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12px;
}

.car-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

.car-card li {
  font-size: 15px;
  margin: 6px 0;
}

.car-card .price {
  font-size: 16px;
  margin-top: 8px;
}

.car-card .highlight {
  font-weight: bold;
  color: #d9534f;
}



    html,body{height:100%}
    body{
      margin:0; background:var(--bg); color:var(--fg);
      font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans TC, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{max-width:var(--container); margin-inline:auto; padding-inline:16px}

    /* ====== 頂部導覽 ====== */
    header{
      position:sticky; top:0; z-index:20; background:rgba(10,10,10,.8);
      backdrop-filter:saturate(140%) blur(6px);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h)}
    .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
    .brand .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent)}
    nav ul{display:flex; gap:20px; list-style:none; margin:0; padding:0}
    nav li a{opacity:.9}
    nav li a:hover{opacity:1}

    /* 手機漢堡 */
    .hamburger{display:none; background:none; border:0; color:var(--fg); width:44px; height:44px; border-radius:10px}
    .hamburger:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
    .hamburger svg{width:24px; height:24px}

    /* 手機選單抽屜 */
    .drawer{display:none}
    .drawer.open{display:block}
    .drawer-inner{padding:12px 16px 20px; border-top:1px solid rgba(255,255,255,.06)}
    .drawer ul{display:grid; gap:12px; list-style:none; margin:0; padding:0}

    /* 桌機：顯示水平選單，隱藏漢堡/抽屜 */
    @media (min-width: 960px){
      .hamburger{display:none}
      nav{display:block}
      .drawer{display:none !important}
    }
    /* 手機：隱藏水平選單，顯示漢堡 */
    @media (max-width: 959.98px){
      nav{display:none}
      .hamburger{display:inline-grid; place-items:center}
    }

    /* ====== 輪播 Banner（置於最上方） ====== */
    .banner{
      position:relative; width:100%; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06);
      background:linear-gradient(180deg, #111 0%, #0a0a0a 100%);
    }
    .carousel{position:relative}
    .track{display:flex; will-change:transform}
    .slide{
      position:relative; width:100vw; /* 滿版寬度（手機亦覆蓋）*/
      height:var(--banner-h-mobile);
      flex:0 0 100%;
      display:grid; place-items:center; text-align:center;
      background-size:cover; background-position:center; background-repeat:no-repeat;
    }
    @media (min-width: 960px){
      .slide{height:var(--banner-h-desktop)}
    }
    .slide::after{ /* 半透明遮罩讓文字清楚 */
      /*content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));*/
    }
    .slide-content{
      position:relative; z-index:1; padding:0 20px;
		margin-bottom: -236px;
    }
    .slide h2{margin:0 0 -6px; font-size:clamp(22px, 3.2vw, 42px)}
    .slide p{margin:0; color:var(--muted)}

    /* 控制鈕 */
    .controls{position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; pointer-events:none}
    .ctrl-btn{pointer-events:auto; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18); color:#fff;
      width:44px; height:44px; border-radius:50%; display:grid; place-items:center; margin:0 6px}
    .ctrl-btn:hover{background:rgba(0,0,0,.6)}

    /* 分頁點點 */
    .dots{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:8px}
    .dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35)}
    .dot.active{background:var(--accent); box-shadow:0 0 0 4px rgba(163,230,53,.18)}

    /* ====== 主要內容 ====== */
    main{padding:40px 0 80px}
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:24px;
      box-shadow:0 10px 30px rgba(0,0,0,.35);
    }

    /* 動畫偏好：尊重使用者減少動作設定 */
    @media (prefers-reduced-motion: reduce){
      .track{transition:none !important}
    }