* { box-sizing: border-box; }
/* body{ outline: 10px solid red !important; } */


body{
        margin:0;
        font-family: system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
        color:#111;
        line-height:1.6;
      
        /* ✅ 大理石背景 */
        background-image: url("../images/background.png");
        background-size: cover;          /* 填滿畫面 */
        background-position: center;     /* 置中 */
        background-repeat: no-repeat;    /* 不重複 */
        background-attachment: fixed;    /* 滾動時背景不跟著動（可選） */
}

html, body { 
    width: 100%;
    overflow-x: hidden;   /* 止血：避免右側留白（水平卷軸） */
}
  
img, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}
  
.page{
        width: min(980px, 92%);
        margin: 28px auto;
      
        /* ✅ 內容卡片 */
        background: rgba(255,255,255,0.88);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(226,232,240,0.9);
        border-radius: 18px;
        padding: 18px;
        box-shadow: 0 10px 30px rgba(15,23,42,0.12);     
}

/* skip link */
.skip-link{
  position:absolute;
  left:-999px;
  top:8px;
  padding:8px 12px;
  background:#111;
  color:#fff;
  border-radius:8px;
}
.skip-link:focus{ left:12px; }

/* header */
.site-header{
    position: static;
    top: auto;
  
    /* ✅ 深黑（貼近 logo 黑底，不突兀） */
    background: #0b0b0d;
  
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 14px 0;
  }

.brand{
    width: min(980px, 92%);
    margin: 0 auto 10px auto;
    display:flex;
    align-items:center;
    gap:12px;
}  

.brand-logo{
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 14px;
    background: transparent; /* 你 logo 本來就黑底，不用再加 */
}
  
.logo-placeholder{
  width:56px;
  height:56px;
  border-radius:14px;
  border:2px dashed #94a3b8;
  display:grid;
  place-items:center;
  color:#64748b;
  font-weight:700;
}

.brand-name{
    margin: 0;
    font-size: 22px;
    color: #ffffff;
  }
  
  .brand-tagline{
    margin: 2px 0 0 0;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
}  

/* nav（父子選擇器示範：nav > a） */
.site-nav{
    width: min(980px, 92%);
    margin: 12px auto 0 auto;
  
    display: flex;
    gap: 10px;
  
    background: transparent;   /* ❗ 重點 */
}  

  
@media (max-width: 520px){
    .site-nav{
      width: 100%;
      padding: 0 10px;
      margin: 0 auto;
      flex-wrap: nowrap;
      overflow-x: auto;                 /* 可左右滑 */
      -webkit-overflow-scrolling: touch;
      gap: 10px;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .site-nav::-webkit-scrollbar {
        display: none;
    }
    .site-nav > a{ flex: 0 0 auto; }
  }
  
  /* nav 按鈕 */
.site-nav > a{
    background: #ffffff;      /* ⬅ 只有按鈕白 */
    color: #0f172a;
  
    padding: 8px 14px;
    border-radius: 999px;
  
    text-decoration: none;
    font-weight: 600;
  
    border: 1px solid rgba(255,255,255,0.6);
}
  
  
  /* hover */
.site-nav > a:hover{
    background: #0f172a;
    color: #ffffff;
}  
.site-nav::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.15));
    pointer-events: none;
  }  
  
/* hero 左右排版 */
.hero{
  display:flex;
  gap:18px;
  align-items:stretch;
}
.hero-photo{
    flex: 1;
    min-height: 260px;
    border-radius: 16px;
    overflow: hidden;              /* ✅ 很重要：裁切多餘部分 */
    background: #f1f5f9;
}
  
  /* hero 裡的照片 */
.hero-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;             /* ✅ 關鍵：填滿、不拉伸 */
    display: block;
}
  
.hero-text{
  flex: 1;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:16px;
  background:#ffffff;
}

.section-title{ margin:0 0 8px 0; font-size:18px; }

.quick-info{
  margin: 10px 0 12px 0;
  padding: 10px 12px;
  background:#f1f5f9;
  border-radius:12px;
}
.label{ font-weight:700; }

.tel{ color:#0f172a; }
.tel:hover{ text-decoration:underline; }

.cta{
  display:inline-block;
  margin-top: 6px;
  text-decoration:none;
  background:#0f172a;
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
}
.cta:hover{ opacity:0.9; }

/* footer（群組選擇器示範） */
.site-footer, .site-footer a{
  color:#334155;
}
.site-footer{
  width: min(980px, 92%);
  margin: 22px auto 40px auto;
  padding-top: 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.to-top{ text-decoration:none; }
.to-top:hover{ text-decoration:underline; }

/* 小螢幕：改上下 */
@media (max-width: 720px){
  .hero{ flex-direction:column; }
}







/*-----------------------------------------------------*/

/* location page */
.page-title{
    margin: 6px 0 14px 0;
    font-size: 20px;
  }
  
  .location-layout{
    display: grid;
    gap: 16px;
  }
  
  .info-card, .map-card{
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 10px 24px rgba(15,23,42,0.10);
  }
  
  .info-row{
    margin: 10px 0;
  }
  
  .info-actions{
    margin-top: 12px;
  }

  .hours{
    margin: 8px 0 0 0;
    padding-left: 18px;   /* 有縮排 */
    line-height: 1.9;
  }
  
  .hours__label{
    font-weight: 700;
    margin-right: 6px;
  }
  
  /* 地圖容器：控制比例與圓角 */
  .map-embed{
    margin-top: 10px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
  }
  
  .map-embed iframe{
    width: 100%;
    height: 360px;
    border: 0;
    display: block;
  }
  
  .hint{
    margin: 10px 0 0 0;
    color: #64748b;
    font-size: 14px;
  }
  
  /* 大螢幕：左右並排（父子/後代選擇器也能在你原本 nav > a 續用） */
  @media (min-width: 900px){
    .location-layout{
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }
    .map-embed iframe{
      height: 420px;
    }
  }
  








/* --------------------------------------------------------*/
/* MENU */
.muted{ color:#475569; margin: 6px 0 14px 0; }

.menu-card{
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(226,232,240,0.9);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.12);
}

.menu-link{ display:block; }

.menu-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}

.menu-caption{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
}










/* features 特色 =============================== */
.feature-block{
    background: transparent;   /* ✅ 拿掉底色 */
    border: none;               /* ✅ 拿掉外框 */
    box-shadow: none;           /* ✅ 拿掉陰影 */
    padding: 0;                 /* ✅ 不再需要內距 */
    margin: 56px 0;             /* 間距下面會再調 */
  }
  
  
  /* 一排：左文字 + 右圖片 */
  .feature-row{
    display: flex;
    gap: 16px;
    align-items: center;
    position: relative;
  }
  
  .feature-text{
    flex: 1;
    background: #2f2f2f;
    color: #fff;
    max-width: 420px;
    padding: 18px 20px;
    border-radius: 14px;
  }
  
  .feature-image{
    flex: 2;
  
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
  
    overflow: hidden;           /* 🔒 超出裁掉 */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .feature-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;     /* ✅ 不變形、填滿 */
    border-radius: 12px;
  }

  .feature-image.landscape{
    max-width: 400px;
    height: 330px;   /* 橫向比例 */
  }

  .feature-image.portrait{
    max-width: 400px;
    height: 440px;   /* 直向比例 */
  }
  
  
  
  
  /* 手機：上下堆疊 */
  @media (max-width: 720px){
    .feature-row{ flex-direction: column; }
    .feature-image{ min-height: 180px; }
  }
  
  .page-features{
    background: #6F7C6A;
    backdrop-filter: none;
    box-shadow: none;
  }
  

  /* ===== member.html ===== */
.page-member{
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 18px;
    padding: 18px;
  }
  
  .member-lead{
    margin: 6px 0 14px 0;
    color: #334155;
  }
  
  .member-card{
    display: block;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(226,232,240,0.9);
    box-shadow: 0 10px 30px rgba(15,23,42,0.12);
  }
  
  .member-card img{
    width: 100%;
    display: block;
  }
  
  .member-card:hover{
    transform: translateY(-2px);
    transition: transform 160ms ease;
  }
  
  .member-cta-wrap{
    margin: 14px 0 0 0;
  }
  

  /* ===== news.html ===== */
.page-news{
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.10);
  }
  
  .news-head{ margin-bottom: 12px; }
  .news-subtitle{ margin: 0; color:#475569; }
  
  .news-list{
    display: grid;
    gap: 16px; /* ✅ 一則一則的間距 */
  }
  
  .news-card{
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
  }
  
  .news-meta{
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap: 12px;
    margin-bottom: 8px;
  }
  
  .news-tag{
    display:inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-size: 12px;
    letter-spacing: .5px;
  }
  
  .news-date{
    color:#64748b;
    font-size: 12px;
  }
  
  .news-title{
    margin: 0 0 8px 0;
    font-size: 18px;
  }
  
  .news-text{
    margin: 0;
    color:#334155;
    line-height: 1.8;
  }
  
  .news-img{
    width: 100%;
    display: block;
    margin-top: 12px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
  }
  
  .news-actions{
    margin-top: 12px;
  }
  
  .news-btn{
    display:inline-block;
    text-decoration:none;
    padding: 10px 12px;
    border-radius: 12px;
    background:#0f172a;
    color:#fff;
  }
  
  .news-btn:hover{ opacity: .92; }
  
  @media (max-width: 720px){
    .news-meta{ flex-direction: column; align-items:flex-start; }
  }
  








  /* ===============================
   冷凍商品選購頁（shop.html）
================================ */

.page-shop {
    padding: 40px 24px 80px;
  }
  
  /* 標題 */
  .shop-hero {
    text-align: center;
    margin-bottom: 32px;
  }
  
  .shop-hero h1 {
    margin: 0 0 8px;
    font-size: 28px;
  }
  
  .shop-hero p {
    margin: 0;
    color: #64748b;
  }
  
  /* 商品卡片格線 */
  .shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
  }
  
  /* 卡片 */
  .shop-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  
  .shop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.12);
  }
  
  .shop-card a {
    color: inherit;
    text-decoration: none;
    display: block;
  }
  
  /* 🔑 圖片區：4:3 比例 */
  .shop-card-image {
    aspect-ratio: 4 / 3;
    background: #e5e7eb;
    overflow: hidden;
  }
  
  .shop-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* 文字區 */
  .shop-card-body {
    padding: 16px;
  }
  
  .shop-card-body h3 {
    margin: 0 0 6px;
    font-size: 18px;
  }
  
  .shop-card-body .desc {
    margin: 0 0 8px;
    font-size: 14px;
    color: #64748b;
  }
  
  .shop-card-body .price {
    margin: 0 0 12px;
    font-weight: 700;
  }
  
  /* CTA */
  .shop-card-body .cta {
    display: inline-block;
    padding: 8px 14px;
    background: #111827;
    color: #fff;
    border-radius: 999px;
    font-size: 14px;
  }
  
  /* 下方說明 */
  .shop-note {
    margin-top: 40px;
    text-align: center;
    color: #475569;
    font-size: 14px;
  }