/* =====================
   顏色主題（奶油黃×森綠）
===================== */
:root{
  --bg:#fff6d5;
  --card:#fffdf5;
  --line:#e6dca8;

  --ink:#2f2f20;
  --muted:#7a7557;

  --green:#2e7d32;
  --green-2:#0f766e;
  --orange:#f59e0b;
  --graybtn:#9ca3af;
  --warn:#b00020;

  --topbar-h:70px;
  --dock-h:56px;

  /* 浮水印變數 */
  --wm-text:"@hori版權所有";
  --wm-size:36px;
  --wm-angle:-25deg;
  --wm-alpha:.05;
  --wm-shift:120px;
}

/* =====================
   全域設定
===================== */
*{ box-sizing:border-box; }

html, body { height: 100%; }

/* 強制顯示右側捲軸，防止切換頁面時跳動 */
html {
  overflow-y: scroll;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC","Microsoft JhengHei","PingFang TC",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  padding-bottom: var(--dock-h);
}
.hidden{ display:none !important; }
a{ color:var(--green); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =====================
   浮水印
===================== */
.watermark{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.wm-item{
  position:absolute;
  font-weight:800;
  font-size:var(--wm-size);
  color:rgba(0,0,0,var(--wm-alpha));
  transform:rotate(var(--wm-angle));
  white-space:nowrap;
  user-select:none;
  will-change:transform;
  animation:wm-sway var(--dur,12s) ease-in-out infinite alternate;
}
@keyframes wm-sway{
  0%{ transform:translateX(0) rotate(var(--wm-angle)); }
  100%{ transform:translateX(var(--wm-shift)) rotate(var(--wm-angle)); }
}
@media print{ .watermark{ opacity:.08; } }

/* =====================
   頂部導覽列 (固定位置 + 絕對置中)
===================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 253, 245, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  padding: 0 20px;
  height: 70px;
  
  /* ★ 關鍵：三欄式 Grid，中間自動置中 ★ */
  display: grid;
  grid-template-columns: 1fr auto 1fr; 
  align-items: center;
}

/* 1. 左側品牌 */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}
.brand img {
  height: 40px;
  width: auto;
  transition: transform .3s ease;
}
.brand img:hover{ transform:scale(1.08); }

.site-title {
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

/* 2. 中間選單 */
.nav-links {
  display: flex;
  gap: 20px;
  justify-self: center;
}

.nav-links a {
  text-decoration: none;
  color: #555;
  font-weight: 600;
  font-size: 16px;
  padding: 8px 4px;
  position: relative;
  transition: color 0.3s;
}

.nav-links a:hover { color: var(--orange); }

/* 亮起狀態 */
.nav-links a.active {
  color: var(--orange);
  font-weight: 800;
}
.nav-links a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--orange); border-radius: 2px;
}

/* 3. 右側按鈕 */
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  white-space: nowrap;
}
.actions-ghost{ min-width:10px; } /* 修正：不需要太寬，避免手機版爆掉 */
.divider{ height:10px; }

/* RWD 手機版導覽列調整 */
@media (max-width: 900px) {
  .topbar {
    grid-template-columns: auto 1fr;
    height: auto;
    padding: 10px 16px;
    gap: 10px;
  }
  .brand { grid-column: 1; }
  .actions { grid-column: 2; }
  
  .nav-links {
    grid-column: 1 / -1;
    justify-self: stretch;
    overflow-x: auto;
    padding-bottom: 4px;
    gap: 15px;
  }
  .site-title { display: none; }
}

/* =====================
   底部資訊條
===================== */
.footerbar{
  position:sticky; bottom:0; z-index:1000;
  background:rgba(255,253,245,.9);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--line);
  padding:10px 16px;
  padding-bottom:max(10px, env(safe-area-inset-bottom));
}
.foot{
  display:flex; justify-content:center; align-items:center;
  gap:20px; flex-wrap:wrap; font-weight:600; text-align:center;
}
.foot .ok{ color:var(--green); }
.foot .warn{ color:var(--warn); }

/* =====================
   容器與卡片通用
===================== */
.container{
  max-width:1360px; margin:0 auto; padding:18px 20px;
}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.05); height:100%;
}
.card-title{
  font-size:18px; font-weight:800; margin:0 0 12px 0; color:#2f2f20;
}

/* =====================
   按鈕元件
===================== */
.btn{
  border:none; cursor:pointer; padding:8px 14px;
  border-radius:10px; font-weight:700; color:#fff; background:var(--green);
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(1px); }
.btn.pill{ border-radius:999px; padding:8px 16px; }
.btn-green{ background:var(--green); color:#fff; }
.btn-orange{ background:var(--orange); color:#fff; }
.btn-gray{ background:var(--graybtn); color:#fff; }

/* =====================
   表格樣式 (計算機用)
===================== */
#tables{ width:100%; }
#tables table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--line);
  border-radius:12px; overflow:hidden; table-layout:fixed;
}
#tables thead th{
  position:sticky; top:0; z-index:5;
  background:#f6f1d9; color:#584f2a; padding:12px 18px;
  border-bottom:1px solid var(--line); font-weight:800; text-align:center;
}
#tables th:first-child, #tables td:first-child{ text-align:left; padding-left:18px; }
#tables td{
  padding:12px 18px; border-top:1px solid var(--line);
  vertical-align:middle; text-align:center; font-variant-numeric:tabular-nums;
}
#tables input[type="number"]{
  width:70px; height:36px; font-size:15px;
  text-align:center; margin:0 auto; display:block;
  border:1px solid var(--line); border-radius:6px; background:#fffdf6;
}

/* =====================
   手機表格 RWD
===================== */
@media (max-width:860px){
  #tables{ overflow-x:visible; padding-bottom:calc(var(--dock-h) + 14px); display:block; }
  #tables table{ width:100%; min-width:0; border-collapse:separate; border-spacing:0 10px; border:none; background:none; }
  #tables thead{ display:none; }
  #tables tbody tr{
    display:block; background:#fff; border:1px solid var(--line);
    border-radius:12px; padding:8px 10px 6px; margin-bottom:10px;
  }
  #tables tbody td{
    display:flex; justify-content:space-between; align-items:center;
    padding:4px 0; border:none; font-size:13px; text-align:right;
  }
  #tables tbody td:first-child{
    flex-direction:column; align-items:flex-start;
    padding-bottom:6px; margin-bottom:4px; border-bottom:1px dashed var(--line);
    font-weight:700; text-align:left;
  }
  #tables tbody td:nth-child(n+2)::before{
    content:attr(data-label); font-size:12px; color:var(--muted); margin-right:6px;
  }
  /* 針對特定欄位加標籤 (配合 script.js 生成的結構) */
  #tables tbody td:nth-child(2)::before{ content:"單價"; }
  #tables tbody td:nth-child(3)::before{ content:"週次數"; }
  #tables tbody td:nth-child(4)::before{ content:"月次數"; }
  #tables tbody td:nth-child(5)::before{ content:"總次數"; }
  #tables tbody td:nth-child(6)::before{ content:"總金額"; }
  
  #tables input[type="number"]{
    width:52px; height:28px; font-size:12px; padding:0 4px;
    margin-left:auto !important; margin-right:0 !important;
  }
}

/* =====================
   其他計算機元件 (Chips, Input)
===================== */
.form-row{ display:flex; align-items:center; gap:10px; margin:12px 0; font-size:15px; flex-wrap:wrap; }
.form-row>label{ flex:0 0 90px; white-space:nowrap; }
.chips, .cms{ display:flex; gap:8px; flex-wrap:wrap; }
.chip, .cms label{
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 10px; border:1px solid var(--line);
  border-radius:999px; background:#fff; cursor:pointer; font-size:14px;
}
.cms label{ border-radius:12px; }
.form-row input[type="text"], .form-row input[type="number"]{
  height:34px; padding:2px 6px; border:1px solid var(--line);
  border-radius:6px; background:#fffdf6; width:100px;
}
.note.warn{ color:var(--warn); font-size:13px; }
.qrbox{ margin-top:20px; display:flex; gap:16px; align-items:center; border-top:1px dashed var(--line); padding-top:14px; }
.qr-left img{ width:84px; height:84px; border:1px solid var(--line); background:#fff; }
.grid-2 { display: grid; grid-template-columns: 2.2fr 1.3fr; gap: 16px; align-items: start; }
@media (max-width: 860px){ .grid-2{ grid-template-columns: 1fr; } }

/* =====================
   新版首頁 (Landing Page) - Wix 風格
===================== */

/* 1. 全螢幕 Hero 區塊 (背景圖 + 遮罩) */
.hero-section {
  position: relative;
  /* ★ 請在這裡換上你的照片網址 ★ */
  background-image: url('bg-hero.jpg'); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 視差滾動效果 */
  height: 85vh; /* 佔據螢幕 85% 高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 0 20px;
}

/* 黑色半透明遮罩 */
.hero-section::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 調整透明度 0.5 */
  z-index: 1;
}

/* 內容層 */
.hero-content {
  position: relative; z-index: 2; max-width: 800px;
  animation: fadeInUp 1s ease-out;
}

.hero-title {
  font-size: 3.5rem; font-weight: 900; margin-bottom: 20px;
  letter-spacing: 2px; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-desc {
  font-size: 1.25rem; margin-bottom: 40px; line-height: 1.6;
  opacity: 0.9; text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

/* 2. 功能卡片區塊 (往上浮動) */
.features-section {
  position: relative; max-width: 1200px;
  margin: -80px auto 60px; /* 負邊距造成懸浮效果 */
  padding: 0 20px; z-index: 5;
}

.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

/* Wix 風格卡片 */
.feature-card {
  background: #ffffff; border-radius: 16px; padding: 40px 30px;
  text-align: center; text-decoration: none; color: var(--ink);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  transition: all 0.3s ease; border-bottom: 4px solid transparent;
  display: block;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  border-bottom: 4px solid var(--orange);
}

.feature-icon {
  font-size: 48px; margin-bottom: 20px; display: inline-block; color: var(--green);
}

.feature-title {
  font-size: 1.4rem; font-weight: 800; margin-bottom: 12px; color: #333;
}

.feature-text {
  font-size: 0.95rem; color: #666; line-height: 1.6;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .hero-title { font-size: 2.2rem; }
  .features-section { margin-top: 40px; } /* 手機版不懸浮 */
  .hero-section { height: 60vh; }
}