:root {
  --ink: #1c1c1a;
  --ink-soft: #6e6e68;
  --ink-faint: #a3a39c;
  --line: #e2e1da;
  --bg: #ffffff;
  --bg-soft: #f3f2ee;
  --accent: #48624B;
  --accent-dark: #384d3b;
  --radius: 2px;
  --header-h: 72px;
  /* iPhone瀏海/動態島/狀態列（時間、wifi、電量）、Android挖孔、橫放時的圓角
     都靠 env(safe-area-inset-*) 讓出空間，搭配 viewport-fit=cover 才有值；
     一般電腦/沒有安全區的裝置這些值是0，完全不影響版面。 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --header-total: calc(var(--header-h) + var(--safe-top));
  --font-display: "Jost", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --ease-reveal: cubic-bezier(0.16, 0.84, 0.44, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  margin: 0;
  overflow-x: clip;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.04em; margin: 0; }

.section {
  scroll-margin-top: var(--header-total);
  padding: clamp(64px, 11vw, 140px) max(24px, var(--safe-right)) clamp(64px, 11vw, 140px) max(24px, var(--safe-left));
}
.section-inner { max-width: 1120px; margin: 0 auto; }
.section-inner--narrow { max-width: 680px; }
.section-heading {
  position: relative;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0.3em;
  text-align: center;
  color: var(--ink);
  margin-bottom: 8px;
  padding-top: 28px;
}
.section-heading::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  width: 36px; height: 1px;
  background: var(--accent);
  transform: translateX(-50%);
}
.section-intro {
  text-align: center;
  max-width: 560px;
  margin: 20px auto 56px;
  color: var(--ink-soft);
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-reveal), transform 0.8s var(--ease-reveal);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-total);
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1280px; height: 100%;
  margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand-menu { position: relative; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 28px; height: 28px; object-fit: contain; filter: saturate(0.55) brightness(1.03); }
.brand-name { font-weight: 600; font-size: 14px; letter-spacing: 0.08em; color: var(--ink); white-space: nowrap; }

/* 標題/Logo滑過時的下拉選單（桌機限定，手機已經有漢堡選單服務同樣用途） */
.brand-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 14px;
  min-width: 180px; background: var(--bg);
  border: 1px solid var(--line); box-shadow: 0 16px 32px rgba(28, 28, 26, 0.09);
  padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.22s var(--ease-reveal), transform 0.22s var(--ease-reveal), visibility 0.22s;
  z-index: 110;
}
.brand-dropdown::before {
  content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.brand-dropdown a {
  display: block; padding: 11px 20px; font-size: 13px; letter-spacing: 0.06em;
  color: var(--ink-soft); white-space: nowrap; border-bottom: none;
}
.brand-dropdown a:hover { color: var(--ink); background: var(--bg-soft); }
.brand-dropdown a::before { display: none; }
@media (min-width: 861px) and (hover: hover) {
  .brand-menu:hover .brand-dropdown,
  .brand-menu:focus-within .brand-dropdown {
    opacity: 1; visibility: visible; transform: none;
  }
}
@media (max-width: 860px) {
  .brand-dropdown { display: none; }
}

/* 導覽列「作品集」hover下拉：跟brand-dropdown同一套視覺語言，只是改成在
   連結正下方置中展開，列出前幾筆作品標題快速連結（仿alwaysis.com「Works」
   選單hover出現作品清單的做法）。 */
.nav-item-menu { position: relative; }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; margin-top: 14px;
  min-width: 200px; max-width: 260px; background: var(--bg);
  border: 1px solid var(--line); box-shadow: 0 16px 32px rgba(28, 28, 26, 0.09);
  padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
  transition: opacity 0.22s var(--ease-reveal), transform 0.22s var(--ease-reveal), visibility 0.22s;
  z-index: 110;
}
/* 注意：.nav-dropdown實際巢狀在.main-nav裡面（結構是
   <nav class="main-nav"><div class="nav-item-menu"><div class="nav-dropdown">...），
   所以底下這些連結同時會命中後面的「.main-nav a」規則——兩邊選擇器優先權
   算出來一樣（1個class+1個元素），CSS規則依照「寫在後面的贏」，會讓
   .main-nav a的padding/display蓋掉這裡，間距整個跑掉、看起來「太擠」疊在一起
   （這個bug曾經讓使用者回報下拉選單樣式壞掉，查了很久才抓到）。用
   .nav-item-menu多包一層class把優先權拉高（2個class+1個元素），不管
   .main-nav a寫在前面還後面都一定贏，不要拿掉這層多餘看起來像是重複的class。 */
.nav-item-menu .nav-dropdown a {
  display: block; padding: 10px 20px; font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-soft); white-space: normal; border-bottom: none;
}
.nav-item-menu .nav-dropdown a:hover { color: var(--ink); background: var(--bg-soft); }
.nav-item-menu .nav-dropdown a::before { display: none; }
.nav-item-menu .nav-dropdown-all {
  margin-top: 4px; border-top: 1px solid var(--line);
  color: var(--accent) !important; font-size: 12px; letter-spacing: 0.08em;
}
@media (min-width: 861px) and (hover: hover) {
  .nav-item-menu:hover .nav-dropdown,
  .nav-item-menu:focus-within .nav-dropdown {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
  }
}
@media (max-width: 860px) {
  .nav-dropdown { display: none; }
}
.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a {
  position: relative; display: inline-block;
  font-size: 13px; letter-spacing: 0.1em; color: var(--ink); white-space: nowrap;
  padding: 18px 0 4px; transition: color 0.25s;
}
/* 上方細線寬度跟著文字寬度走（仿alwaysis.com導覽列每個字上方都有一條
   跟文字等寬的細線），不是固定短線；目前頁面對應的項目改成更粗、強調色，
   同時文字變淺灰（alwaysis.com「目前頁面」的那個字本身是淺灰、不是加深，
   用粗線本身當作「你在這一頁」的指示，文字反而低調下去）。 */
.main-nav a::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--line);
  transition: background 0.25s, height 0.25s;
}
.main-nav a:hover::before { background: var(--ink); height: 2px; }

/* 桌機：導覽列跟著貼在Logo旁邊，不要被space-between推去跟Logo拉開一大段
   距離——main-nav撐滿header-inner剩餘空間（flex:1），裡面的連結維持貼著
   Logo左邊（flex預設從起點排列），只有「聯絡我們」CTA按鈕用margin-left:auto
   單獨推到最右邊。手機不套用這段，維持原本漢堡選單收合的版型。 */
@media (min-width: 861px) {
  .main-nav { flex: 1; margin-left: 48px; }
  .nav-cta { margin-left: auto; }
}

/* 英文預設顯示，滑過去才變中文（仿alwaysis.com全英文導覽的作法，但保留
   中文可讀性：hover才切換）。手機/無hover裝置（touch）則一律直接顯示中文
   ——不然選單摸不到hover，英文字會卡死在那邊沒人看得懂。 */
.nav-en { display: none; }
.nav-zh { display: inline-block; white-space: nowrap; }
@media (min-width: 861px) and (hover: hover) {
  .nav-en {
    display: inline-block; white-space: nowrap;
    opacity: 1; transition: opacity 0.22s ease;
  }
  .main-nav a .nav-zh {
    position: absolute; top: 18px; left: 0;
    opacity: 0; transition: opacity 0.22s ease;
    pointer-events: none;
  }
  .main-nav a:hover .nav-en { opacity: 0; }
  .main-nav a:hover .nav-zh { opacity: 1; }
}

/* 用 .main-nav a.nav-cta 拉高優先權：否則會被 .main-nav a 的 padding(18px 0 4px) 蓋掉，按鈕變成又小又擠的圓 */
.main-nav a.nav-cta {
  background: var(--accent); color: #fff !important;
  padding: 10px 22px; border-radius: 999px; letter-spacing: 0.08em;
  transition: background 0.2s, transform 0.2s;
}
.main-nav a.nav-cta::before { display: none; }
.main-nav a.nav-cta:hover { background: var(--accent-dark); transform: translateY(-1px); }

/* 桌機「多頁」模式：目前網址對應的區塊，導覽列上同名連結上方細線變粗、
   變強調色，文字轉淺灰（跟alwaysis.com「目前頁面」風格一致）。 */
@media (min-width: 861px) {
  body[data-active-section="about"] .main-nav a[data-section="about"],
  body[data-active-section="flows"] .main-nav a[data-section="flows"],
  body[data-active-section="works"] .main-nav a[data-section="works"],
  body[data-active-section="work"] .main-nav a[data-section="works"],
  body[data-active-section="qa"] .main-nav a[data-section="qa"],
  body[data-active-section="contact"] .main-nav a[data-section="contact"] {
    color: var(--ink-faint);
  }
  body[data-active-section="about"] .main-nav a[data-section="about"]::before,
  body[data-active-section="flows"] .main-nav a[data-section="flows"]::before,
  body[data-active-section="works"] .main-nav a[data-section="works"]::before,
  body[data-active-section="work"] .main-nav a[data-section="works"]::before,
  body[data-active-section="qa"] .main-nav a[data-section="qa"]::before,
  body[data-active-section="contact"] .main-nav a[data-section="contact"]::before {
    height: 2px; background: var(--accent);
  }
}

.nav-toggle {
  display: none; width: 44px; height: 44px;
  border: none; background: none; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav-toggle span { width: 22px; height: 1px; background: var(--ink); transition: 0.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-total));
  min-height: calc(100svh - var(--header-total));
  overflow: hidden;
  background: var(--ink);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--hero-img, url('/img/hero.jpg')) center/cover no-repeat;
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}
.hero-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 40px max(clamp(24px, 6vw, 72px), var(--safe-right)) calc(40px + var(--safe-bottom)) max(clamp(24px, 6vw, 72px), var(--safe-left));
  background: linear-gradient(transparent, rgba(0,0,0,0.62));
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
  color: #fff;
}
.hero-caption.reveal { transform: translateY(16px); transition-duration: 1.1s; }
.hero-caption h1 { font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 32px); font-weight: 500; letter-spacing: 0.1em; margin-bottom: 8px; }
.hero-caption p { margin: 0; font-size: 14px; letter-spacing: 0.06em; opacity: 0.9; }
.scroll-hint {
  position: absolute; bottom: calc(20px + var(--safe-bottom)); right: max(28px, var(--safe-right)); z-index: 1;
  color: #fff; opacity: 0.85; animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* 首頁輪播（2026-10-23 改版，仿 alwaysis.com 首頁）：四周留白的相框、照片維持原比例（contain，兩側灰底），
   切換只做淡入淡出，不再推近放大（低解析舊照放大會更糊）。開場整組由左往右揭開。
   相框寬度上限 1400px：舊站照片只有 1280px 寬，放太大會糊，這是畫質與版面的折衷。
   右上「01 / 06」張數、右下固定 Kiage Chen 草寫簽名（不隨照片切換）。單張大圖模式也套同一個相框。 */
.hero { --hf-t: clamp(12px, 2vh, 24px); --hf-b: clamp(16px, 3vh, 32px); --hf-x: max(calc((100vw - 1400px) / 2), clamp(12px, 5vw, 96px)); background: var(--bg); }
.hero::before { inset: var(--hf-t) var(--hf-x) var(--hf-b); animation: none; background-color: #9d9d9a; }
.hero--carousel::before { display: none; }
.hero-slides { position: absolute; inset: var(--hf-t) var(--hf-x) var(--hf-b); background: #9d9d9a; overflow: hidden; animation: heroWipe 1.4s cubic-bezier(.77,0,.18,1) both; }
@keyframes heroWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero-slide { position: absolute; inset: 0; background: center / contain no-repeat; opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.is-active { opacity: 1; }
body.tone-on .hero-slide { filter: var(--tone-extra, ) saturate(var(--tone-sat, .35)) contrast(var(--tone-contrast, 1.18)) brightness(var(--tone-bright, 1.01)); }
.hero .hero-caption { left: var(--hf-x); right: var(--hf-x); bottom: var(--hf-b); padding: 40px clamp(18px, 2.6vw, 40px) 30px; }
@media (min-width: 861px) { body[data-active-section="hero"] .scroll-hint { display: none; } } /* 桌機首頁整面不捲動，不需要往下箭頭 */
.hero-counter {
  position: absolute; z-index: 2; top: calc(var(--hf-t) + 16px); right: calc(var(--hf-x) + 20px);
  display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.18em; text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.hc-cur { font-size: 16px; font-weight: 400; }
.hc-sep { width: 18px; height: 1px; background: rgba(255,255,255,0.7); }
.hc-total { opacity: 0.75; }
.hc-bar { position: relative; width: 56px; height: 1px; margin-left: 6px; background: rgba(255,255,255,0.35); overflow: hidden; }
.hc-bar i { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left center; }
.hc-bar i.is-running { transform: scaleX(1); transition: transform var(--hc-dur, 6s) linear; }
.hero-sign {
  position: absolute; z-index: 2; right: calc(var(--hf-x) + 24px); bottom: calc(var(--hf-b) + 14px); pointer-events: none;
  font-family: "Mrs Saint Delafield", cursive; font-size: clamp(30px, 3.2vw, 46px); line-height: 1; color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
@media (prefers-reduced-motion: reduce) { .hero-slides { animation: none; } .hero-slide { transition: opacity 0.6s ease; } }
@media (max-width: 860px) { .hero { --hf-x: 10px; } .hc-bar { width: 32px; } .hero-sign { font-size: 26px; right: 22px; } }
/* 手機直立：相框原本是整個螢幕高（約 700px），橫幅照片 contain 後上下各留一大塊灰底。
   改成 4:5 直幅相框、照片 cover 填滿（左右裁一點），標題與按鈕仍疊在照片下方漸層上。 */
@media (max-width: 860px) and (orientation: portrait) {
  .hero { min-height: min(calc(100svh - var(--header-total)), calc((100vw - 20px) * 1.25 + 40px)); }
  .hero-slide { background-size: cover; }
}

/* ---------- About ---------- */
.about-body { text-align: center; font-size: 16px; color: var(--ink-soft); letter-spacing: 0.02em; }
.about-body p { margin: 0 0 22px; }
/* 「綠屋承諾」章：上下兩塊直式標章（品牌綠＋深綠），上面大號碼、下面承諾內容。
   刻意寫明「綠屋承諾 · PROMISE」，不寫成獎項（綠屋沒有得獎，不可做成像得獎的樣子）。 */
.promises { list-style: none; margin: 44px auto 8px; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; }
.promise { width: 138px; display: flex; flex-direction: column; gap: 5px; transition: transform 0.35s var(--ease-reveal, ease); }
.promise:hover { transform: translateY(-4px); }
.promise-top, .promise-bottom { display: flex; flex-direction: column; color: #fff; }
.promise-top { background: var(--accent); aspect-ratio: 1 / 1; justify-content: space-between; padding: 14px 14px 12px; }
.promise-num { font-family: var(--font-display); font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; }
.promise-brand { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.22em; opacity: 0.85; }
.promise-bottom { background: var(--accent-dark); padding: 14px 14px 12px; min-height: 104px; justify-content: space-between; text-align: left; }
.promise-bottom strong { font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: 0.06em; }
.promise-bottom em { font-style: normal; font-size: 10px; letter-spacing: 0.12em; opacity: 0.75; margin-top: 10px; }
@media (max-width: 860px) {
  .promises { gap: 12px; }
  .promise { width: calc(50% - 6px); max-width: 160px; }
}

/* ---------- Flows ---------- */
.section-flows { background: var(--bg-soft); }
.flow-list { list-style: none; margin: 0; padding: 0; }
.flow-step {
  display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 20px;
  padding: 26px 10px; border-bottom: 1px solid var(--line);
  transition: background-color 0.3s ease;
}
.flow-step:last-child { border-bottom: none; }
.flow-step:hover { background-color: rgba(72, 98, 75, 0.05); }
.flow-code { display: flex; flex-direction: column; gap: 2px; }
.flow-code-label { font-size: 10px; letter-spacing: 0.22em; color: var(--ink-faint); font-weight: 600; }
.flow-code-num {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 38px); font-weight: 300;
  color: var(--accent); line-height: 1; letter-spacing: 0.02em;
}
.flow-text { color: var(--ink); font-size: 15px; }

/* ---------- Works ---------- */
/* 仿alwaysis.com/awards頁：兩欄滿版無間距緊貼排列，圖片偏寬幅裁切，
   hover是整張圖變半透明（不是縮放），跟原本「作品集」頁稍微活潑的
   卡片風格不同、改成更乾淨安靜的編排。 */
.works-grid {
  display: grid; gap: clamp(16px, 2.2vw, 32px);
  grid-template-columns: repeat(2, 1fr);
}
/* 縮圖放大：桌機改兩欄、作品集區塊放寬（使用者 2026-10-22 要求預覽縮圖再大一些）；手機單欄 */
.section-works .section-inner { max-width: 1320px; }
@media (max-width: 560px) { .works-grid { grid-template-columns: 1fr !important; } }
.work-card { display: block; background: var(--bg); box-shadow: 0 1px 0 var(--line), 0 10px 28px rgba(28, 28, 26, 0.06); scroll-margin-top: var(--header-total); }
.work-card--extra { display: none; }
.work-card--extra.is-visible { display: block; }
.work-card-frame { display: block; overflow: hidden; }
.work-card img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: opacity 0.45s ease;
}
.work-card:hover img { opacity: 0.9; } /* 2026-10-23 使用者：滑過的發亮再少一些（原 0.55 偏白） */
.work-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  background: var(--bg-soft); color: var(--ink-soft);
  font-size: 13px; letter-spacing: 0.04em;
  transition: color 0.25s;
}
.work-card:hover .work-title { color: var(--accent-dark); }
/* 標題字加大；滑過整張卡片時標題變主題綠、再放大一點（使用者 2026-10-23） */
.work-title-main {
  display: inline-block; color: var(--ink); font-weight: 500; font-size: 17px; letter-spacing: 0.08em;
  transform-origin: left center; transition: color 0.25s, transform 0.3s var(--ease-reveal, ease);
}
.work-card:hover .work-title-main { color: var(--accent); transform: scale(1.08); }
.work-title-meta { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.works-empty { text-align: center; color: var(--ink-soft); }
.works-more {
  display: block; margin: 40px auto 0;
  background: none; border: 1px solid var(--line); color: var(--ink);
  padding: 12px 36px; font-size: 13px; letter-spacing: 0.1em; cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.works-more:hover { border-color: var(--ink); transform: translateY(-1px); }

/* ---------- Q&A ---------- */
.qa-list { display: flex; flex-direction: column; }
.qa-item { border-bottom: 1px solid var(--line); padding: 4px 0; }
.qa-item:first-child { border-top: 1px solid var(--line); }
.qa-item summary {
  cursor: pointer; padding: 18px 2px; font-size: 15px; letter-spacing: 0.02em;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary::after {
  content: '+'; font-size: 18px; font-weight: 300; color: var(--ink-faint); margin-left: 16px;
  transition: color 0.2s, transform 0.3s var(--ease-reveal);
}
.qa-item summary:hover::after { color: var(--accent); }
.qa-item[open] summary::after { content: '\2212'; transform: rotate(180deg); }
.qa-answer { padding: 0 2px 20px; color: var(--ink-soft); font-size: 14px; }
.qa-answer p { margin: 0 0 10px; }

/* ---------- Contact ---------- */
.stores-grid {
  display: grid; gap: 1px; max-width: 920px; margin: 0 auto 48px;
  grid-template-columns: 1fr; background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 700px) { .stores-grid { grid-template-columns: 1fr 1fr; } }
.store-card { background: var(--bg); padding: 28px; transition: box-shadow 0.3s ease; }
.store-card:hover { box-shadow: inset 0 0 0 1px var(--line); }
.store-card h3 { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; color: var(--ink); margin-bottom: 10px; }
.store-card p { margin: 4px 0; color: var(--ink-soft); font-size: 14px; }
.store-card a { color: var(--accent); }
.store-map { width: 100%; height: 160px; border: 0; margin-top: 14px; filter: grayscale(0.3); }
.contact-meta { text-align: center; color: var(--ink-soft); font-size: 14px; letter-spacing: 0.02em; }
.contact-meta p { margin: 4px 0; }
.contact-meta a { color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center; font-size: 12px;
  padding: 28px max(20px, var(--safe-right)) calc(28px + var(--safe-bottom)) max(20px, var(--safe-left));
  letter-spacing: 0.08em; color: var(--ink-faint); background: var(--bg); border-top: 1px solid var(--line);
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,10,0.94);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  padding: calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));
}
.lightbox[hidden] { display: none; }
.lightbox-img { max-width: min(90vw, 1100px); max-height: 78vh; max-height: 78dvh; }
.lightbox-caption { color: #fff; margin-top: 16px; font-size: 13px; letter-spacing: 0.04em; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: none; border: none; color: #fff;
  font-size: 26px; cursor: pointer; padding: 10px; opacity: 0.8;
}
.lightbox-close { top: calc(18px + var(--safe-top)); right: calc(22px + var(--safe-right)); font-size: 30px; }
.lightbox-prev { left: calc(12px + var(--safe-left)); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: calc(12px + var(--safe-right)); top: 50%; transform: translateY(-50%); }
.lightbox-close, .lightbox-prev, .lightbox-next { min-width: 44px; min-height: 44px; }

/* =========================================================
   桌機/平板「多頁」模式（861px起）：每個網址只顯示一個區塊，
   仿照 alwaysis.com 點選單切換到不同頁面的體驗——但實際上還是
   同一份HTML（所有區塊都有渲染出來），單純用這個屬性選擇器決定
   顯示哪一塊，手機寬度完全不套用這段、全部區塊照舊堆疊捲動。
   ========================================================= */
@media (min-width: 861px) {
  body[data-active-section] main > .hero,
  body[data-active-section] main > .section { display: none; }
  body[data-active-section="hero"] main > .hero,
  body[data-active-section="about"] main > #about,
  body[data-active-section="flows"] main > #flows,
  body[data-active-section="works"] main > #works,
  body[data-active-section="qa"] main > #qa,
  body[data-active-section="contact"] main > #contact {
    display: block;
  }
  body[data-active-section="hero"] main > .hero { display: flex; }
}

/* 個案頁（/works/:id）任何寬度都只顯示個案內容，不是一頁式堆疊 */
body[data-active-section="work"] main > .hero,
body[data-active-section="work"] main > .section:not(#work-detail) { display: none; }
body[data-active-section="work"] main > #work-detail { display: block; }

/* ---------- Mobile（<=860px）：維持一頁式捲動 ---------- */
@media (max-width: 860px) {
  .main-nav {
    position: fixed; top: var(--header-total); left: 0; right: 0;
    max-height: calc(100vh - var(--header-total)); max-height: calc(100dvh - var(--header-total));
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: var(--bg); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px max(24px, var(--safe-right)) calc(18px + var(--safe-bottom)) max(24px, var(--safe-left));
    transform: translateY(-120%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
  }
  .main-nav.open { transform: translateY(0); visibility: visible; }
  .main-nav a { padding: 15px 4px; border-bottom: 1px solid var(--line); }
  .main-nav a:last-child { border-bottom: none; }
  .nav-cta { text-align: center; margin-top: 10px; }
  .nav-toggle { display: flex; }
  .works-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   客人導向的新增區塊：Hero CTA／個案頁／收費／客戶回饋／諮詢表單／
   社群連結／浮動諮詢按鈕
   ========================================================= */
.hero-cta {
  display: inline-block; margin-top: 18px; padding: 11px 26px;
  border: 1px solid rgba(255,255,255,0.85); color: #fff;
  font-size: 13px; letter-spacing: 0.14em; border-radius: 999px;
  transition: background 0.25s, color 0.25s;
}
.hero-cta:hover { background: #fff; color: var(--ink); }

.btn-solid, .btn-line {
  display: inline-block; cursor: pointer; font: inherit; font-size: 14px;
  letter-spacing: 0.12em; padding: 13px 34px; border-radius: 999px;
  transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
}
.btn-solid { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn-solid:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn-solid:disabled { opacity: 0.6; cursor: wait; transform: none; }
.btn-line { border: 1px solid var(--accent); color: var(--accent); background: transparent; margin-top: 8px; }
.btn-line:hover { background: var(--accent); color: #fff; }

/* 個案頁 */
.section-detail { padding-top: clamp(40px, 6vw, 72px); }
.detail-back { display: inline-block; font-size: 13px; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 28px; padding: 8px 0; }
.detail-back:hover { color: var(--accent); }
.detail-head { margin-bottom: 28px; }
.detail-head h1 { font-size: clamp(26px, 4vw, 40px); letter-spacing: 0.08em; }
.detail-meta { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; letter-spacing: 0.08em; }
.detail-desc { max-width: 720px; color: var(--ink-soft); font-size: 15px; margin-bottom: 44px; }
.detail-desc p { margin: 0 0 16px; }
.detail-gallery { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .detail-gallery { grid-template-columns: 1fr 1fr; }
  .detail-photo--cover { grid-column: 1 / -1; }
}
.detail-photo { display: block; background: var(--bg-soft); overflow: hidden; cursor: zoom-in; }
.detail-photo img { width: 100%; height: auto; transition: opacity 0.35s ease; }
.detail-photo:hover img { opacity: 0.85; }
.detail-cta { text-align: center; margin: 72px 0 56px; }
.detail-cta p { color: var(--ink-soft); margin: 0 0 20px; letter-spacing: 0.06em; }
.detail-pager { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 28px; }
.detail-pager a { display: flex; flex-direction: column; gap: 4px; max-width: 46%; font-size: 14px; color: var(--ink); }
.detail-pager a span { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); }
.detail-pager a:hover { color: var(--accent); }
.detail-next { text-align: right; margin-left: auto; align-items: flex-end; }

/* 收費方式 */
.pricing { margin-top: 56px; padding: 36px 32px; background: var(--bg); border: 1px solid var(--line); text-align: center; }
.pricing h3 { font-size: 18px; letter-spacing: 0.2em; margin-bottom: 8px; }
.pricing-intro { color: var(--ink-soft); font-size: 14px; margin: 0 0 22px; }
.pricing dl { margin: 0 0 18px; }
.pricing-row { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 15px; }
.pricing-row:last-child { border-bottom: none; }
.pricing dt { color: var(--ink-soft); }
.pricing dd { margin: 0; color: var(--ink); text-align: right; }
@media (max-width: 520px) { .pricing-row { flex-direction: column; gap: 2px; } .pricing dd { text-align: left; } .pricing { padding: 28px 20px; } }

/* 客戶回饋 */
.testimonials { margin-top: 72px; }
.testimonials h3 { text-align: center; font-size: 18px; letter-spacing: 0.2em; margin-bottom: 28px; }
.testimonial-list { display: grid; gap: 20px; }
.testimonial { margin: 0; padding: 26px 28px; background: var(--bg-soft); }
.testimonial blockquote { margin: 0 0 14px; font-size: 15px; color: var(--ink); line-height: 1.9; }
.testimonial figcaption { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.06em; }
.testimonial figcaption span { margin-left: 10px; color: var(--ink-faint); }

/* 諮詢表單 */
.inquiry-form { max-width: 760px; margin: 0 auto 56px; padding: 36px 32px; border: 1px solid var(--line); background: var(--bg); }
.inquiry-form h3 { font-size: 18px; letter-spacing: 0.18em; text-align: center; }
.inquiry-note { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 8px 0 26px; }
.inquiry-grid { display: grid; gap: 16px 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .inquiry-grid { grid-template-columns: 1fr 1fr; } .inquiry-wide { grid-column: 1 / -1; } }
.inquiry-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); letter-spacing: 0.06em; }
.inquiry-form label em { color: var(--accent); font-style: normal; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea {
  font: inherit; font-size: 16px; /* 16px 避免 iOS 聚焦時自動放大 */
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink);
  letter-spacing: 0.02em; resize: vertical;
}
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(72,98,75,0.12); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.inquiry-hint { font-size: 12px; color: var(--ink-faint); margin: 14px 0 18px; }
.inquiry-form .btn-solid { display: block; margin: 0 auto; }
.inquiry-status { text-align: center; margin: 16px 0 0; font-size: 14px; min-height: 22px; }
.inquiry-status.is-ok { color: var(--accent); }
.inquiry-status.is-error { color: #b3543f; }
@media (max-width: 520px) { .inquiry-form { padding: 28px 18px; } }

/* 社群連結 */
.social-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 auto 48px; }
.social-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.social-link svg { width: 22px; height: 22px; }
.social-row .social-link { padding: 10px 22px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; letter-spacing: 0.1em; transition: border-color 0.2s, color 0.2s; }
.social-row .social-link:hover { border-color: var(--accent); color: var(--accent); }
.footer-social { display: flex; justify-content: center; gap: 18px; margin-bottom: 14px; }
.footer-social .social-link:hover { color: var(--accent); }

/* 浮動按鈕：右側直式排列的圓形圖示（社群／LINE／免費諮詢） */
.float-actions {
  position: fixed; z-index: 90; display: flex; flex-direction: column; gap: 10px; align-items: center;
  right: max(16px, var(--safe-right)); bottom: calc(18px + var(--safe-bottom));
}
.float-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; color: #fff;
  box-shadow: 0 6px 18px rgba(28,28,26,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}
.float-btn svg { width: 24px; height: 24px; }
.float-btn:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 24px rgba(28,28,26,0.26); }
/* 色調統一：全部用主題綠（--accent）為底、白色圖示，各平台品牌色只混進 35% 當淡淡的提示，
   滑過去才完全變成品牌色——整排看起來是同一個家族，又認得出是哪個平台，不會灰白。 */
.float-btn { --brand: var(--accent); background: var(--accent); background: color-mix(in srgb, var(--brand) 35%, var(--accent)); }
.float-btn:hover { background: var(--brand); }
.float-instagram { --brand: #d6249f; }
.float-threads { --brand: #3a3a3a; }
.float-facebook { --brand: #1877F2; }
.float-youtube { --brand: #E52D27; }
.float-line { --brand: #06C755; }
.float-consult { --brand: var(--accent-dark); background: var(--accent-dark); }
.float-consult:hover { background: var(--accent); }
/* 桌機滑過時在左側浮出文字標籤 */
@media (hover: hover) and (min-width: 861px) {
  .float-btn::after {
    content: attr(data-tip); position: absolute; right: calc(100% + 12px); top: 50%;
    transform: translateY(-50%) translateX(6px); white-space: nowrap;
    background: rgba(28,28,26,0.9); color: #fff; font-size: 12px; letter-spacing: 0.1em;
    padding: 6px 12px; border-radius: 999px; opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .float-btn:hover::after { opacity: 1; transform: translateY(-50%); }
}
@media (min-width: 861px) { body[data-active-section="contact"] .float-consult { display: none; } }
body[data-active-section="hero"] .scroll-hint { bottom: calc(20px + var(--safe-bottom)); right: auto; left: 50%; margin-left: -12px; }
@media (max-width: 860px) {
  .float-btn { width: 44px; height: 44px; }
  .float-btn svg { width: 22px; height: 22px; }
  .float-actions { gap: 8px; }
}
body:has(.lightbox:not([hidden])) .float-actions { display: none; }

@media (max-width: 600px) {
  /* 手機兩欄很窄：案名與「住宅・地點」上下排，避免案名被擠成兩行斷字 */
  .work-title { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 12px 14px; }
}

.work-card.is-filtered-out, .work-card--extra.is-visible.is-filtered-out { display: none; }

/* 作品分類篩選：跟頂部導覽同一套語言（使用者 2026-10-23 要一致的設計感）——
   英文字預設、滑過上下滑動換成中文；下方淡灰細線，滑過主題綠粗線由左畫到右；
   目前選中的分類固定主題綠粗線、文字轉淡（同導覽「目前頁面」）。右上小字是件數。 */
.works-filter { margin: -12px 0 48px; }
.filter-main { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 52px; }
.filter-tab {
  position: relative; display: inline-flex; align-items: flex-start; gap: 6px;
  padding: 8px 0 14px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.1em; color: var(--ink);
  transition: color 0.25s;
}
.filter-tab::before, .filter-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; }
.filter-tab::before { height: 1px; background: var(--line); }
.filter-tab::after {
  height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s var(--ease-reveal);
}
.filter-tab:hover::after, .filter-tab.is-active::after { transform: scaleX(1); }
.filter-tab.is-active { color: var(--ink-faint); }
.filter-tab:hover { color: var(--ink); }
.ft-label { position: relative; display: inline-block; }
.ft-en { display: none; }
.ft-zh { display: inline-block; white-space: nowrap; }
.ft-count { font-size: 11px; letter-spacing: 0.06em; color: var(--ink-faint); line-height: 1; margin-top: -1px; }
.filter-tab.is-active .ft-count, .filter-tab:hover .ft-count { color: var(--accent); }
@media (hover: hover) {
  .ft-en { display: inline-block; white-space: nowrap; transition: opacity 0.28s ease, transform 0.4s var(--ease-reveal); }
  .ft-zh {
    position: absolute; left: 50%; top: 0; opacity: 0; pointer-events: none;
    transform: translate(-50%, 12px); transition: opacity 0.28s ease, transform 0.4s var(--ease-reveal);
  }
  .filter-tab:hover .ft-en { opacity: 0; transform: translateY(-12px); }
  .filter-tab:hover .ft-zh { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 860px) { .filter-main { gap: 10px 32px; } }

/* 篩選後作品太少（例如商空只有 2 件）：不循環重複，改接一個收尾區塊 */
.works-end {
  grid-column: 1 / -1; text-align: center; padding: 56px 24px 24px;
  border-top: 1px solid var(--line); margin-top: 8px;
}
.works-end p { margin: 0 0 6px; color: var(--ink-soft); letter-spacing: 0.08em; }
.works-end .works-end-title { font-family: var(--font-display); font-size: 18px; color: var(--ink); letter-spacing: 0.16em; margin-bottom: 12px; }
.works-end-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.works-end-actions a, .works-end-actions button {
  font: inherit; font-size: 14px; letter-spacing: 0.12em; cursor: pointer;
  padding: 11px 26px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent);
  transition: background 0.25s, color 0.25s;
}
.works-end-actions a:hover, .works-end-actions button:hover, .works-end-actions .is-primary { background: var(--accent); color: #fff; }

/* =========================================================
   頂部導覽重做（2026-10-22）：導覽文字與 Logo 垂直置中同一條水平線、
   每個項目等高；下拉選單改成「編號＋名稱＋英文／箭頭」列，等高、寬鬆，
   開啟時逐列滑入，滑過有細線延伸與箭頭位移的小動畫。
   ========================================================= */
@media (min-width: 861px) {
  /* 每個導覽項目撐滿 header 高度，文字垂直置中（上方細線貼 header 頂端） */
  .site-header .main-nav { align-self: stretch; }
  .site-header .main-nav > a:not(.nav-cta),
  .site-header .main-nav .nav-item-menu > a {
    display: flex; align-items: center; height: 100%; padding: 0;
  }
  .site-header .nav-item-menu { display: flex; align-items: stretch; height: 100%; }
  .site-header .main-nav a::before { top: 0; }
  .site-header .main-nav a .nav-zh { top: 50%; transform: translateY(-50%); }
  .site-header .main-nav a.nav-cta { align-self: center; height: auto; }
  /* 下拉靠近 header 底線出現，不留縫 */
  .site-header .brand-menu { display: flex; align-items: center; height: 100%; }
  .site-header .brand-dropdown, .site-header .nav-item-menu .nav-dropdown { margin-top: 0; top: 100%; }
}

.site-header .brand-dropdown,
.site-header .nav-item-menu .nav-dropdown {
  min-width: 300px; max-width: 340px; padding: 10px;
  border: 1px solid var(--line); border-top: 2px solid var(--accent);
  border-radius: 0 0 6px 6px; background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 56px -12px rgba(28, 28, 26, 0.18);
}
.site-header .brand-dropdown::before { display: none; }
.site-header .brand-dropdown a,
.site-header .nav-item-menu .nav-dropdown a {
  position: relative; display: flex; align-items: center; gap: 16px;
  height: 54px; padding: 0 18px; margin: 0; border-radius: 4px;
  font-size: 14px; letter-spacing: 0.08em; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: background 0.3s, color 0.3s, padding 0.3s var(--ease-reveal);
}
.site-header .brand-dropdown a::before,
.site-header .nav-item-menu .nav-dropdown a::before {
  /* 左側細線：滑過時從中間展開 */
  content: ''; display: block; position: absolute; left: 0; top: 50%; width: 2px; height: 0;
  background: var(--accent); transform: translateY(-50%); transition: height 0.3s var(--ease-reveal);
}
.site-header .brand-dropdown a:hover,
.site-header .nav-item-menu .nav-dropdown a:hover { background: var(--bg-soft); color: var(--ink); padding-left: 24px; }
.site-header .brand-dropdown a:hover::before,
.site-header .nav-item-menu .nav-dropdown a:hover::before { height: 22px; }
.dd-num { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-faint); transition: color 0.3s; flex: none; }
.dd-zh { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-en { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-faint); text-transform: uppercase; transition: color 0.3s, transform 0.3s var(--ease-reveal); }
.dd-arrow { color: var(--accent); opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.3s var(--ease-reveal); }
.site-header a:hover > .dd-num, .site-header a:hover > .dd-en { color: var(--accent); }
.site-header a:hover > .dd-en { transform: translateX(-4px); }
.site-header a:hover > .dd-arrow { opacity: 1; transform: none; }
.site-header .nav-item-menu .nav-dropdown .nav-dropdown-all {
  margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 4px 4px;
  color: var(--accent) !important; font-size: 12px; letter-spacing: 0.16em;
}
/* 目前所在頁面：名稱變主題綠＋前面一個小圓點 */
body[data-active-section="hero"] .brand-dropdown a[data-dd="hero"],
body[data-active-section="about"] .brand-dropdown a[data-dd="about"],
body[data-active-section="flows"] .brand-dropdown a[data-dd="flows"],
body[data-active-section="works"] .brand-dropdown a[data-dd="works"],
body[data-active-section="work"] .brand-dropdown a[data-dd="works"],
body[data-active-section="qa"] .brand-dropdown a[data-dd="qa"],
body[data-active-section="contact"] .brand-dropdown a[data-dd="contact"] { color: var(--accent); }
body[data-active-section="hero"] .brand-dropdown a[data-dd="hero"] .dd-num,
body[data-active-section="about"] .brand-dropdown a[data-dd="about"] .dd-num,
body[data-active-section="flows"] .brand-dropdown a[data-dd="flows"] .dd-num,
body[data-active-section="works"] .brand-dropdown a[data-dd="works"] .dd-num,
body[data-active-section="work"] .brand-dropdown a[data-dd="works"] .dd-num,
body[data-active-section="qa"] .brand-dropdown a[data-dd="qa"] .dd-num,
body[data-active-section="contact"] .brand-dropdown a[data-dd="contact"] .dd-num { color: var(--accent); }

/* 開啟時逐列滑入 */
@keyframes dd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 861px) and (hover: hover) {
  .brand-menu:hover .brand-dropdown a,
  .brand-menu:focus-within .brand-dropdown a,
  .nav-item-menu:hover .nav-dropdown a,
  .nav-item-menu:focus-within .nav-dropdown a { animation: dd-in 0.45s var(--ease-reveal) both; }
  .brand-dropdown a:nth-child(2), .nav-dropdown a:nth-child(2) { animation-delay: 0.04s; }
  .brand-dropdown a:nth-child(3), .nav-dropdown a:nth-child(3) { animation-delay: 0.08s; }
  .brand-dropdown a:nth-child(4), .nav-dropdown a:nth-child(4) { animation-delay: 0.12s; }
  .brand-dropdown a:nth-child(5), .nav-dropdown a:nth-child(5) { animation-delay: 0.16s; }
  .brand-dropdown a:nth-child(6), .nav-dropdown a:nth-child(6) { animation-delay: 0.2s; }
  .nav-dropdown a:nth-child(n+7) { animation-delay: 0.24s; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-dropdown a, .nav-dropdown a { animation: none !important; }
}

/* 頂部導覽與下拉字體加大加粗（使用者 2026-10-22 要求） */
.site-header .brand-name { font-size: 16px; font-weight: 700; }
.site-header .main-nav a { font-size: 15px; font-weight: 500; letter-spacing: 0.1em; }
.site-header .main-nav a.nav-cta { font-size: 14px; font-weight: 600; }
.site-header .brand-dropdown a, .site-header .nav-item-menu .nav-dropdown a { font-size: 16px; font-weight: 500; }
.site-header .dd-num, .site-header .dd-en { font-size: 12px; font-weight: 500; }
.site-header .nav-item-menu .nav-dropdown .nav-dropdown-all { font-size: 14px; font-weight: 600; }
@media (min-width: 861px) and (max-width: 1060px) {
  .site-header .main-nav { margin-left: 28px; gap: 24px; }
  .site-header .main-nav a { font-size: 14px; letter-spacing: 0.06em; }
}
@media (max-width: 860px) {
  .site-header .main-nav a { font-size: 16px; }
}

/* 導覽橫條改到文字「下方」（使用者 2026-10-22 要求）：平常是一條淡淡的細線，
   滑過去時主題綠粗線從左畫到右；目前頁面固定是主題綠粗線。英文→中文改成
   上下滑動交換（不再是疊在一起的淡入淡出，避免兩種字同時半透明重疊）。 */
@media (min-width: 861px) {
  .site-header .main-nav > a:not(.nav-cta)::before,
  .site-header .main-nav .nav-item-menu > a::before {
    top: auto; bottom: 14px; left: 0; right: 0; height: 1px; background: var(--line);
  }
  .site-header .main-nav > a:not(.nav-cta)::after,
  .site-header .main-nav .nav-item-menu > a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 14px; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left center;
    transition: transform 0.45s var(--ease-reveal);
  }
  .site-header .main-nav > a:not(.nav-cta):hover::after,
  .site-header .main-nav .nav-item-menu > a:hover::after { transform: scaleX(1); }
  .site-header .main-nav > a:not(.nav-cta):hover::before,
  .site-header .main-nav .nav-item-menu > a:hover::before { background: var(--line); height: 1px; }
  /* 目前頁面：下方固定粗線（沿用既有 active 規則的高度/顏色，位置已改到下方） */
  .site-header .nav-dropdown a::after { display: none; }
}
@media (min-width: 861px) and (hover: hover) {
  .site-header .main-nav a .nav-en { transition: opacity 0.28s ease, transform 0.4s var(--ease-reveal); }
  .site-header .main-nav a .nav-zh { transform: translateY(calc(-50% + 12px)); transition: opacity 0.28s ease, transform 0.4s var(--ease-reveal); }
  .site-header .main-nav a:hover .nav-en { opacity: 0; transform: translateY(-12px); }
  .site-header .main-nav a:hover .nav-zh { opacity: 1; transform: translateY(-50%); }
}

/* =========================================================
   接案流程「簡報」版（桌機）／收費方式獨立頁／APP 下載
   ========================================================= */
/* 導覽最右邊的 APP 下載 */
.main-nav a.nav-app {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border: 1px solid var(--accent); border-radius: 999px; color: var(--accent);
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.main-nav a.nav-app svg { width: 18px; height: 18px; flex: none; }
.main-nav a.nav-app::before, .main-nav a.nav-app::after { display: none !important; }
.main-nav a.nav-app:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
@media (min-width: 861px) {
  .site-header .main-nav a.nav-app.nav-app { height: auto; align-self: center; margin-left: 14px; padding: 9px 18px; }
}
@media (max-width: 860px) {
  .main-nav a.nav-app { justify-content: center; margin-top: 10px; padding: 12px 18px; border-bottom: 1px solid var(--accent); }
}

/* 聯絡頁：APP 說明卡 */
.app-note {
  max-width: 920px; margin: 0 auto 48px; padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  background: var(--bg-soft); border-left: 3px solid var(--accent);
}
.app-note h3 { font-size: 17px; letter-spacing: 0.1em; margin-bottom: 6px; }
.app-note p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.app-note .btn-solid { flex: none; }
@media (max-width: 700px) { .app-note { flex-direction: column; align-items: flex-start; padding: 24px 20px; } }

/* 收費方式入口（接案流程頁最底下） */
.flow-pricing-link {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 72px auto 0; max-width: 360px; padding: 18px 28px;
  border: 1px solid var(--ink); font-size: 15px; letter-spacing: 0.3em; color: var(--ink);
  transition: background 0.3s, color 0.3s;
}
.flow-pricing-link i { font-style: normal; transition: transform 0.4s var(--ease-reveal); }
.flow-pricing-link:hover { background: var(--ink); color: #fff; }
.flow-pricing-link:hover i { transform: translateX(8px); }

/* 收費方式獨立頁：只在 /pricing 顯示（任何寬度） */
#pricing { display: none; }
body[data-active-section="pricing"] main > .hero,
body[data-active-section="pricing"] main > .section:not(#pricing) { display: none; }
body[data-active-section="pricing"] main > #pricing { display: block; }
body[data-active-section="pricing"] .main-nav a[data-section="flows"] { color: var(--ink-faint); }

/* 簡報 deck：手機不顯示（用原清單），桌機取代清單。
   2026-10-22 改成「高張力」版：深綠全幅舞台、巨大描邊字母（滑鼠視差）、
   整面色塊擦除轉場、逐字遮罩上升的動態文字、滾動數字、跟隨游標的光斑。 */
.flow-deck { display: none; }
@media (min-width: 861px) {
  .flow-list { display: none; }
  .flow-deck {
    --deck-bg: #14211a; --deck-ink: #eef5ea; --deck-soft: #9fbfa3; --deck-line: rgba(238, 245, 234, 0.18);
    display: block; position: relative; max-width: 1320px; margin: 0 auto; outline: none;
    background: var(--deck-bg); color: var(--deck-ink); overflow: hidden; isolation: isolate;
    --px: 70%; --py: 40%; --mx: 0; --my: 0;
  }
  /* 游標光斑：2026-10-23 使用者要求滑鼠指標不要特效，拿掉 */
  /* 緩慢漂移的柔光底層（用放射漸層，不會出現硬邊） */
  .flow-deck::after {
    content: ''; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(38% 46% at 18% 72%, rgba(72, 98, 75, 0.55), transparent 70%),
      radial-gradient(34% 42% at 82% 22%, rgba(72, 98, 75, 0.4), transparent 70%);
    animation: deck-drift 14s ease-in-out infinite alternate;
  }
  @keyframes deck-drift { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(3%, -2%, 0) scale(1.12); } }

  .deck-stage { position: relative; z-index: 1; height: clamp(520px, 74vh, 740px); }
  .deck-slide { position: absolute; inset: 0; visibility: hidden; pointer-events: none; padding: 40px clamp(28px, 5vw, 72px) 56px; }
  .deck-slide.is-active { visibility: visible; pointer-events: auto; }

  /* 巨大描邊字母（背景、視差） */
  .deck-bgcode {
    position: absolute; right: -1%; top: 50%; z-index: 0; pointer-events: none;
    font-family: var(--font-display); font-weight: 200; line-height: 0.8;
    font-size: clamp(380px, 78vh, 760px); color: transparent;
    -webkit-text-stroke: 1.5px rgba(214, 235, 212, 0.34);
    transform: translate3d(calc(var(--mx) * -34px), calc(-50% + var(--my) * -22px), 0);
    transition: transform 0.35s ease-out;
  }
  .deck-bgcode span { display: block; opacity: 0; transform: scale(1.5) rotate(5deg); filter: blur(14px); transition: opacity 0.6s ease, transform 1.2s var(--ease-reveal), filter 0.9s ease; }
  .deck-slide.is-active .deck-bgcode span { opacity: 1; transform: none; filter: none; animation: deck-float 9s ease-in-out 1.2s infinite alternate; }
  @keyframes deck-float { from { transform: translateY(-1.5%) rotate(-1deg); } to { transform: translateY(1.5%) rotate(1deg); } }

  /* 實心字母＋STEP 標籤 */
  .deck-label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: 0.5em; font-weight: 600; color: var(--deck-soft); }
  .deck-label::after { content: ''; width: 0; height: 1px; background: var(--deck-soft); transition: width 1s var(--ease-reveal) 0.5s; }
  .deck-slide.is-active .deck-label::after { width: 120px; }
  .deck-code {
    position: relative; z-index: 2; display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 300;
    font-size: clamp(150px, 20vw, 280px); line-height: 0.92; color: var(--deck-ink); letter-spacing: -0.02em;
    clip-path: inset(0 0 100% 0); transform: translateY(40px);
    transition: clip-path 0.9s var(--ease-reveal) 0.35s, transform 1s var(--ease-reveal) 0.35s;
  }
  .deck-slide.is-active .deck-code { clip-path: inset(0 0 -10% 0); transform: none; }

  /* 逐字遮罩上升的說明 */
  .deck-copy { position: absolute; left: clamp(28px, 5vw, 72px); right: 36%; bottom: 52px; z-index: 2; display: flex; flex-direction: column; gap: 18px; }
  .deck-text { margin: 0; font-size: clamp(26px, 3.1vw, 46px); line-height: 1.45; font-weight: 600; letter-spacing: 0.06em; color: var(--deck-ink); }
  .deck-desc {
    margin: 0; max-width: 560px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.95; letter-spacing: 0.06em; color: var(--deck-soft);
    padding-left: 18px; border-left: 2px solid rgba(159, 191, 163, 0.55);
    opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 0.9s var(--ease-reveal);
  }
  .deck-slide.is-active .deck-desc { opacity: 1; transform: none; transition-delay: 1.15s; }
  .deck-text .cm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .deck-text .ch { display: inline-block; transform: translateY(115%) rotate(8deg); transform-origin: left bottom; transition: transform 0.8s var(--ease-reveal); transition-delay: 0s; }
  .deck-slide.is-active .deck-text .ch { transform: none; transition-delay: calc(0.55s + var(--i) * 22ms); }

  /* 整面色塊擦除（轉場） */
  .deck-wipe { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
  .deck-wipe::after { content: attr(data-code); position: absolute; right: 6%; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 200; font-size: clamp(200px, 40vh, 420px); color: rgba(255, 255, 255, 0.14); line-height: 1; }

  /* 底部：滾動數字＋進度＋箭頭 */
  .deck-bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 28px; padding: 22px clamp(28px, 5vw, 72px); border-top: 1px solid var(--deck-line); }
  .deck-count { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); color: var(--deck-soft); letter-spacing: 0.2em; font-size: 14px; white-space: nowrap; }
  .deck-roll { display: inline-block; height: 1em; font-size: 44px; line-height: 1; overflow: hidden; color: var(--deck-ink); letter-spacing: 0.06em; font-weight: 300; }
  .deck-roll-track { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -1em)); transition: transform 0.9s var(--ease-reveal); }
  .deck-roll-track b { display: block; height: 1em; font-weight: inherit; }
  .deck-progress { position: relative; flex: 1; height: 3px; background: var(--deck-line); }
  .deck-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #6aa072, #cfe8c8); box-shadow: 0 0 18px rgba(160, 215, 165, 0.7); transition: width 0.9s var(--ease-reveal); }
  .deck-arrows { display: flex; gap: 12px; }
  .deck-arrow { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(238, 245, 234, 0.5); background: transparent; color: var(--deck-ink); font-size: 20px; cursor: pointer; transition: background 0.25s, color 0.25s, transform 0.25s, opacity 0.25s, border-color 0.25s; }
  .deck-arrow:hover:not(:disabled) { background: var(--deck-ink); color: var(--deck-bg); transform: scale(1.06); }
  .deck-arrow:active:not(:disabled) { transform: scale(0.92); }
  .deck-arrow:disabled { opacity: 0.22; cursor: default; }

  /* 字母跑馬燈導覽 */
  .deck-rail { position: relative; z-index: 3; display: flex; justify-content: space-between; padding: 0 clamp(28px, 5vw, 72px) 26px; }
  .deck-dot { position: relative; flex: none; width: 46px; height: 46px; border: none; background: transparent; cursor: pointer; font-family: var(--font-display); font-size: 17px; color: rgba(238, 245, 234, 0.38); transition: color 0.3s, transform 0.4s var(--ease-reveal); }
  .deck-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--deck-ink); transform: scale(0); transition: transform 0.45s var(--ease-reveal); z-index: -1; }
  .deck-dot:hover { color: var(--deck-ink); transform: translateY(-4px); }
  .deck-dot.is-active { color: var(--deck-bg); font-weight: 600; transform: translateY(-4px) scale(1.12); }
  .deck-dot.is-active::before { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-deck::after, .deck-slide.is-active .deck-bgcode span { animation: none; }
  .deck-bgcode span, .deck-code, .deck-text .ch, .deck-desc, .deck-roll-track, .deck-progress i { transition: none; }
}

/* 作品照片統一色調（使用者 2026-10-02 定案：降飽和＋拉高對比；2026-10-22 擴大到每個作品內的全部照片，
   並由管理員在後台「網站設定→作品照片色調」開關）。body 有 tone-on 才套用。 */
body.tone-on .work-card img,
body.tone-on .detail-photo img,
body.tone-on .lightbox-img { filter: var(--tone-extra, ) saturate(var(--tone-sat, 0.35)) contrast(var(--tone-contrast, 1.18)) brightness(var(--tone-bright, 1.01)) var(--tone-sharp, ); }
/* 濾鏡疊色（2026-10-23 色調強度改成 20 種濾鏡）：顏色／漸層、混合模式、不透明度都由選的濾鏡決定 */
body.tone-on .work-card-frame::before,
body.tone-on .detail-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--tone-ov, transparent); opacity: var(--tone-ov-op, 0); mix-blend-mode: var(--tone-ov-blend, normal);
}
body.wm-on .work-card-frame::after, body.wm-on .detail-photo::after { z-index: 3; }

.flow-desc { display: block; margin-top: 6px; font-size: 13px; line-height: 1.8; color: var(--ink-soft); letter-spacing: 0.04em; }

/* 接案流程（桌機）：簡報佔滿整個畫面，頁面本身不捲動（使用者 2026-10-22 要求「整面版、不要往下滑動」）。
   視窗太矮（<600px）時才退回可捲動，避免內容被切掉。標題／說明保留給螢幕閱讀器與搜尋引擎（視覺上隱藏）。 */
.deck-pricing { display: none; }
@media (min-width: 861px) and (min-height: 600px) {
  html:has(body[data-active-section="flows"]) { overflow: hidden; }
  body[data-active-section="flows"] .site-footer { display: none; }
  /* 2026-10-23 使用者要求四周留白：跟首頁輪播同一套相框留白（上下 2～3vh、左右至少 5vw） */
  body[data-active-section="flows"] #flows {
    --ff-t: clamp(12px, 2vh, 24px); --ff-b: clamp(16px, 3vh, 32px); --ff-x: max(calc((100vw - 1400px) / 2), clamp(12px, 5vw, 96px));
    padding: var(--ff-t) var(--ff-x) var(--ff-b); background: var(--bg);
  }
  body[data-active-section="flows"] #flows .section-heading,
  body[data-active-section="flows"] #flows .section-intro {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body[data-active-section="flows"] #flows .section-heading::before { display: none; }
  body[data-active-section="flows"] #flows .flow-pricing-link { display: none; }
  body[data-active-section="flows"] #flows .flow-deck {
    max-width: none; width: 100%; height: calc(100vh - var(--header-total) - var(--ff-t) - var(--ff-b)); height: calc(100dvh - var(--header-total) - var(--ff-t) - var(--ff-b));
    display: flex; flex-direction: column;
  }
  body[data-active-section="flows"] #flows .deck-stage { flex: 1; height: auto; min-height: 0; }
  body[data-active-section="flows"] #flows .deck-pricing {
    display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 12px 22px; border-radius: 999px;
    border: 1px solid rgba(238, 245, 234, 0.5); color: var(--deck-ink); font-size: 14px; letter-spacing: 0.24em;
    transition: background 0.25s, color 0.25s;
  }
  body[data-active-section="flows"] #flows .deck-pricing i { font-style: normal; transition: transform 0.4s var(--ease-reveal); }
  body[data-active-section="flows"] #flows .deck-pricing:hover { background: var(--deck-ink); color: var(--deck-bg); }
  body[data-active-section="flows"] #flows .deck-pricing:hover i { transform: translateX(6px); }
  body[data-active-section="flows"] #flows .deck-bar { padding-top: 18px; padding-bottom: 18px; }
  body[data-active-section="flows"] #flows .deck-rail { padding-bottom: 22px; }
}
@media (min-width: 861px) and (min-height: 600px) {
  /* 右側浮動圖示列（寬約 48px＋邊距）不要蓋住箭頭與字母導覽 */
  body[data-active-section="flows"] #flows .deck-bar,
  body[data-active-section="flows"] #flows .deck-rail { padding-right: 96px; }
  body[data-active-section="flows"] #flows .deck-copy { right: 40%; }
}

/* 首頁／常見問題（桌機）：同樣整面版、頁面不捲動（使用者 2026-10-22 要求）。
   首頁大圖剛好佔滿 header 以下；常見問題一次只展開一題（details name="qa"），
   內容置中，題目太多或視窗偏矮時只有問答清單本身捲動。 */
@media (min-width: 861px) and (min-height: 600px) {
  html:has(body[data-active-section="hero"]),
  html:has(body[data-active-section="qa"]) { overflow: hidden; }
  body[data-active-section="hero"] .site-footer,
  body[data-active-section="qa"] .site-footer { display: none; }
  body[data-active-section="hero"] main > .hero {
    height: calc(100vh - var(--header-total)); height: calc(100dvh - var(--header-total)); min-height: 0;
  }
  body[data-active-section="qa"] main > #qa {
    display: flex; flex-direction: column; justify-content: center;
    height: calc(100vh - var(--header-total)); height: calc(100dvh - var(--header-total));
    padding-top: clamp(24px, 5vh, 56px); padding-bottom: clamp(24px, 5vh, 56px);
  }
  body[data-active-section="qa"] #qa .section-inner { width: 100%; max-width: 860px; max-height: 100%; display: flex; flex-direction: column; min-height: 0; }
  body[data-active-section="qa"] #qa .section-intro { margin: 14px auto clamp(18px, 3vh, 36px); max-width: 720px; }
  body[data-active-section="qa"] #qa .qa-item summary { padding-top: 12px; padding-bottom: 12px; }
  body[data-active-section="qa"] #qa .qa-answer { padding-bottom: 14px; }
  body[data-active-section="qa"] #qa .qa-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}

/* 作品照片浮水印 logo（線條版、透明底；後台「網站設定→作品照片浮水印」開關，預設關閉）。
   疊在縮圖與個案頁照片的角落，位置／大小／透明度由 body 的 CSS 變數決定。 */
.work-card-frame, .detail-photo { position: relative; }
body.wm-on .work-card-frame::after,
body.wm-on .detail-photo::after {
  content: ''; position: absolute; pointer-events: none;
  width: var(--wm-size, 16%); aspect-ratio: 2155 / 1455; /* 線條 logo 母版比例 */
  background: var(--wm-url) center / contain no-repeat; opacity: var(--wm-opacity, 0.85);
  bottom: 4%; right: 3.5%;
}
body.wm-on.wm-bl .work-card-frame::after, body.wm-on.wm-bl .detail-photo::after { right: auto; left: 3.5%; }
body.wm-on.wm-bc .work-card-frame::after, body.wm-on.wm-bc .detail-photo::after { right: auto; left: 50%; transform: translateX(-50%); }

/* =========================================================
   圖片發光（預設灰色、可切淺綠：後台「網站設定→視覺效果」可分別開關＋選顏色；只在有滑鼠的桌機啟用）
   ========================================================= */
body { --glow: 150, 150, 150; --glow-hi: 240, 240, 240; --glow-mid: 190, 190, 190; --glow-edge: 135, 135, 135; }
body.fx-green { --glow: 150, 214, 160; --glow-hi: 200, 255, 210; --glow-mid: 150, 230, 165; --glow-edge: 115, 185, 128; }
@media (hover: hover) and (pointer: fine) {
  .glow-spot { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; mix-blend-mode: soft-light;
    background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--glow-hi), 0.45), rgba(var(--glow-mid), 0.15) 45%, transparent 70%); }
  body.fx-image .work-card-frame, body.fx-image .detail-photo { transition: box-shadow 0.45s ease; }
  body.fx-image .work-card:hover .work-card-frame,
  body.fx-image .detail-photo:hover { box-shadow: 0 0 0 1px rgba(var(--glow-edge), 0.35), 0 12px 36px rgba(var(--glow-edge), 0.22); }
  body.fx-image .work-card:hover .glow-spot, body.fx-image .detail-photo:hover .glow-spot { opacity: 1; }
}

/* 手機：右側浮動按鈕預設只留「LINE／免費諮詢」＋一顆「＋」，點「＋」才展開其他社群（避免六顆圖示佔掉半個螢幕、遮住內容） */
.float-toggle { display: none; background: var(--accent-dark); border: none; cursor: pointer; padding: 0; }
.float-toggle svg { transition: transform 0.3s var(--ease-reveal); }
@media (max-width: 860px) {
  .float-toggle { display: flex; }
  .float-actions:not(.is-open) .float-btn:not(.float-toggle):not(.float-line):not(.float-consult) { display: none; }
  .float-actions.is-open .float-toggle svg { transform: rotate(45deg); }
  .site-footer { padding-bottom: calc(96px + var(--safe-bottom)); }
}

/* ---------- 手機版小問題修正（2026-10-22 全面檢查）---------- */
@media (max-width: 860px) {
  /* 手機選單裡不要出現桌機導覽的上／下裝飾線（會變成斷斷續續的怪線） */
  .main-nav a::before, .main-nav a::after { display: none !important; }
  .main-nav a:not(.nav-cta):not(.nav-app) { display: block; }
  /* 點擊範圍至少 44px（聯絡電話、Email、社群圖示、Logo 文字） */
  .brand { min-height: 44px; }
  .store-card p a, .contact-meta a { display: inline-block; padding: 10px 0; }
  .footer-social { gap: 6px; }
  .footer-social .social-link { padding: 11px; }
  .social-row .social-link { min-height: 44px; }
  /* 浮動按鈕往下捲時滑到畫面外，停下或往上捲才出現，避免擋住內容 */
  .float-actions { transition: transform 0.35s var(--ease-reveal), opacity 0.3s; }
  .float-actions.is-away { transform: translateX(80px); opacity: 0; pointer-events: none; }
  /* 放大檢視：上一張／下一張移到圖片下方，不要壓在照片上 */
  .lightbox-prev, .lightbox-next { top: auto; bottom: calc(20px + var(--safe-bottom)); transform: none; }
  .lightbox-prev { left: calc(18px + var(--safe-left)); }
  .lightbox-next { right: calc(18px + var(--safe-right)); }
  .lightbox-img { max-height: 68vh; max-height: 68dvh; max-width: 100%; }
  .lightbox-caption { margin: 14px 64px 0; text-align: center; }
}
.lightbox { background: rgba(8, 8, 8, 0.97); }

/* 5 字詩句標題的斷句線（render.js workTitleHtml）：主題綠 1px 細直線，高度約字高的九成 */
.title-bar {
  display: inline-block; width: 1px; height: 0.9em; margin: 0 0.6em;
  background: var(--accent); vertical-align: -0.1em;
}

/* 桌機作品集頁會無盡循環往下接（site.js worksLoop），頁尾永遠到不了，乾脆不顯示 */
@media (min-width: 861px) {
  body[data-active-section="works"] .site-footer { display: none; }
}

/* =========================================================
   2026-10-23 參考 alwaysis.com：細緻字體／右上角簽名／作品滑過變暗／作品內頁一頁式／作品誌
   ========================================================= */
/* 細緻字體：中文 Noto Sans TC 300、英文 Jost 300；內文顏色維持深灰確保清楚好讀 */
body { font-weight: 300; letter-spacing: 0.03em; }
h1, h2, h3 { font-weight: 300; }
.section-heading { font-weight: 300; }
.about-body, .detail-desc, .section-intro { color: #4a4a46; }
.site-header .main-nav a { font-weight: 400; }
.brand-name { font-weight: 500; }
.work-title-main { font-weight: 400; }
strong, b { font-weight: 500; }

/* 作品卡片：滑鼠移過去照片變暗，作品名與 View Project 浮出（仿 alwaysis 作品列表） */
.work-card-shade {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(18, 18, 16, 0); color: #fff; opacity: 0; transition: background 0.45s ease, opacity 0.45s ease;
}
.work-card-shade > span { font-size: 22px; font-weight: 300; letter-spacing: 0.14em; transform: translateY(8px); transition: transform 0.5s var(--ease-reveal); }
.work-card-shade .title-bar { background: rgba(255,255,255,0.8); }
.work-card-shade em { font-style: normal; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.8; }
@media (hover: hover) {
  .work-card:hover .work-card-shade { background: rgba(18, 18, 16, 0.5); opacity: 1; }
  .work-card:hover .work-card-shade > span { transform: none; }
  .work-card:hover img { opacity: 1; }
}

/* 作品內頁一頁式：作品名置中，照片一張接一張滿版往下看（草寫 Projects 已依使用者要求拿掉） */
.detail-head { text-align: center; margin: 8px 0 36px; }
.detail-head h1 { font-weight: 300; letter-spacing: 0.16em; }
.detail-meta { text-align: center; }
.detail-desc { margin: 0 auto 56px; text-align: center; font-size: 15px; line-height: 2.1; }
.detail-gallery { grid-template-columns: 1fr !important; gap: clamp(16px, 2.4vw, 32px); }
.detail-photo--cover { grid-column: auto; }

/* 作品誌 Journal：任何寬度都是獨立頁 */
body[data-active-section="journal"] main > .hero,
body[data-active-section="journal"] main > .section:not(#journal) { display: none; }
body[data-active-section="journal"] main > #journal { display: block; }
@media (min-width: 861px) {
  body[data-active-section="journal"] .main-nav a[data-section="journal"] { color: var(--ink-faint); }
  body[data-active-section="journal"] .main-nav a[data-section="journal"]::after { transform: scaleX(1); }
}
body[data-active-section="journal"] .brand-dropdown a[data-dd="journal"] { color: var(--accent); }
.section-intro small { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.08em; }
/* 作品誌：一張一張的雜誌封面（大刊頭、直排中文、細小英文封面字），像被拍下來的實體雜誌 */

.mag {
  position: relative; display: block; aspect-ratio: 220 / 285; overflow: hidden; color: #fff; background: #bdbcb8; container-type: inline-size;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 10px 16px 30px rgba(0,0,0,0.18);
  transition: transform 0.5s var(--ease-reveal), box-shadow 0.5s ease;
}
.mag:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(0,0,0,0.12), 16px 26px 44px rgba(0,0,0,0.24); }
.mag::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,0) 72%, rgba(0,0,0,0.12) 100%); }
.mag-photo { position: absolute; inset: 0; background: center / cover no-repeat;
  box-shadow: inset 0 150px 110px -70px rgba(0,0,0,0.42), inset 0 -120px 90px -60px rgba(0,0,0,0.45); }
body.tone-on .mag-photo { filter: var(--tone-extra, ) saturate(var(--tone-sat, .35)) contrast(var(--tone-contrast, 1.18)) brightness(var(--tone-bright, 1.01)); }
/* 封面文字（2026-10-23 改版：不放刊頭品牌字，走編輯設計——頂端細線資訊列、超細大期數、襯線標題、細線分隔、留白） */
.mag { --m: 6cqw; font-family: "Jost", "Noto Sans TC", sans-serif; text-shadow: 0 1px 10px rgba(0,0,0,0.28); }
.mag-top { position: absolute; z-index: 1; top: var(--m); left: var(--m); right: var(--m); display: flex; justify-content: space-between;
  padding-bottom: 2.2cqw; border-bottom: 1px solid rgba(255,255,255,0.55); font-size: max(9px, 2.6cqw); font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; }
.mag-num { position: absolute; z-index: 1; font-family: "Jost", sans-serif; font-weight: 200; font-size: 34cqw; line-height: 0.8; letter-spacing: -0.04em; opacity: 0.92; }
.mag-head { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 2cqw; max-width: 72%; }
.mag-zh { font-family: "Noto Serif TC", serif; font-weight: 500; font-size: 7.4cqw; line-height: 1.3; letter-spacing: 0.18em; }
.mag-en { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 400; font-size: 6cqw; line-height: 1.1; letter-spacing: 0.01em; }
.mag-lead { font-family: "Noto Serif TC", serif; font-weight: 300; font-size: max(10px, 3.2cqw); line-height: 1.7; letter-spacing: 0.08em; opacity: 0.92; }
.mag-feats { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1.4cqw; font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-size: max(11px, 3.8cqw); letter-spacing: 0.02em; }
.mag-feats span::before { content: ''; display: inline-block; width: 5cqw; height: 1px; margin: 0 2cqw 1cqw 0; vertical-align: middle; background: currentColor; opacity: 0.7; }
.mag-foot { position: absolute; z-index: 1; left: var(--m); right: var(--m); bottom: var(--m); padding-top: 2.2cqw; border-top: 1px solid rgba(255,255,255,0.45);
  font-size: max(9px, 2.5cqw); letter-spacing: 0.24em; opacity: 0.9; }
/* A：左上超大期數、標題壓左下 */
.mag--a .mag-num { top: 17%; left: calc(var(--m) - 1.2cqw); }
.mag--a .mag-head { left: var(--m); bottom: 17%; }
.mag--a .mag-head::before { content: ''; width: 10cqw; height: 1px; margin-bottom: 1.5cqw; background: rgba(255,255,255,0.8); }
.mag--a .mag-feats { right: var(--m); top: 21%; align-items: flex-end; text-align: right; }
/* B：標題置中，上下細線框住；期數小放右下 */
.mag--b .mag-head { left: 12%; right: 12%; top: 40%; max-width: none; align-items: center; text-align: center; padding: 4cqw 0; border-top: 1px solid rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.7); }
.mag--b .mag-zh { font-size: 8.4cqw; letter-spacing: 0.3em; }
.mag--b .mag-num { right: var(--m); bottom: 13%; font-size: 18cqw; }
.mag--b .mag-feats { left: var(--m); bottom: 15%; }
/* C：中文直排在右、英文與期數在左 */
.mag--c .mag-head { right: var(--m); top: 17%; max-width: none; align-items: flex-end; }
.mag--c .mag-zh { writing-mode: vertical-rl; font-size: 8cqw; letter-spacing: 0.4em; font-weight: 300; }
.mag--c .mag-en, .mag--c .mag-lead { display: none; }
.mag--c .mag-num { left: calc(var(--m) - 1.2cqw); bottom: 14%; font-size: 30cqw; }
.mag--c .mag-feats { left: var(--m); top: 21%; }
/* D：內框（passe-partout）、描邊大期數在右下 */
.mag--d::before { content: ''; position: absolute; z-index: 1; inset: 3.5cqw; border: 1px solid rgba(255,255,255,0.6); pointer-events: none; }
.mag--d { --m: 8cqw; }
.mag--d .mag-top { border-bottom: 0; }
.mag--d .mag-head { left: var(--m); top: 19%; }
.mag--d .mag-num { right: calc(var(--m) - 1.5cqw); bottom: 12%; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.9); font-weight: 300; }
.mag--d .mag-feats { left: var(--m); bottom: 15%; }
.mag--d .mag-foot { border-top: 0; }
/* E：白邊印刷感（照片內縮、下方白紙黑字） */
.mag--e, .mag--f { color: #23231f; text-shadow: none; background: #f3f1ec; }
.mag--e .mag-photo { inset: 9cqw 6cqw 30% 6cqw; box-shadow: none; }
.mag--e .mag-top { top: 3cqw; color: #23231f; border-bottom: 0; padding-bottom: 0; font-size: max(8px, 2.2cqw); }
.mag--e .mag-num { right: var(--m); bottom: calc(var(--m) + 6cqw); font-size: 20cqw; color: var(--accent); }
.mag--e .mag-head { left: var(--m); bottom: calc(var(--m) + 7cqw); max-width: 58%; }
.mag--e .mag-lead, .mag--e .mag-feats { display: none; }
.mag--e .mag-foot, .mag--f .mag-foot { border-top-color: rgba(35,35,31,0.3); }
/* F：照片在上、下方米色色帶 */
.mag--f .mag-photo { inset: 0 0 36% 0; box-shadow: inset 0 120px 90px -70px rgba(0,0,0,0.4); }
.mag--f .mag-top { color: #fff; border-bottom-color: rgba(255,255,255,0.55); text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.mag--f .mag-num { left: calc(var(--m) - 1cqw); top: calc(64% - 22cqw); font-size: 24cqw; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,0.25); }
.mag--f .mag-head { left: var(--m); right: var(--m); top: 68%; max-width: none; }
.mag--f .mag-zh { font-size: 6.6cqw; }
.mag--f .mag-en { font-size: 5cqw; color: var(--accent); }
.mag--f .mag-lead, .mag--f .mag-feats { display: none; }
.mag--e::after, .mag--f::after { background: linear-gradient(120deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.06) 100%); }
.mag--big .mag-zh { font-size: 6.6cqw; }

/* ---------- 作品誌頁面編排（大封面＋目錄、錯落、跨頁、引言、編者的話） ---------- */
.jr-kicker { display: block; font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.jr-feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin: 40px 0 clamp(64px, 9vw, 120px); }
.jr-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line, #e4e4df); }
.jr-toc li a { display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line, #e4e4df); color: var(--ink); transition: color 0.25s, padding 0.35s var(--ease-reveal); }
.jr-toc li a:hover { color: var(--accent); padding-left: 8px; }
.toc-no { font-family: "Jost", sans-serif; font-weight: 200; font-size: 26px; line-height: 1; }
.toc-t b { display: block; font-family: "Noto Serif TC", serif; font-weight: 500; font-size: 16px; letter-spacing: 0.12em; }
.toc-t em { font-family: "Cormorant Garamond", Georgia, serif; font-size: 15px; color: var(--ink-soft); }
.toc-date { font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: 0.2em; color: var(--ink-faint); }
.jr-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); row-gap: clamp(56px, 7vw, 100px); align-items: start; }
.jr-stagger-0 { grid-column: 1 / span 4; }
.jr-stagger-1 { grid-column: 5 / span 4; margin-top: clamp(40px, 7vw, 110px); }
.jr-stagger-2 { grid-column: 9 / span 4; margin-top: clamp(16px, 3vw, 44px); }
.jr-spread { grid-column: 1 / span 8; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #f3f1ec; box-shadow: 10px 16px 30px rgba(0,0,0,0.12); }
.jr-spread .mag { box-shadow: none; }
.jr-spread .mag:hover { transform: none; }
.jr-page { padding: clamp(24px, 3.2vw, 48px); display: flex; flex-direction: column; border-left: 1px solid rgba(0,0,0,0.08); }
.jr-page h3 { font-family: "Noto Serif TC", serif; font-weight: 500; font-size: clamp(20px, 2vw, 28px); letter-spacing: 0.18em; }
.jr-en { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(17px, 1.5vw, 21px); color: var(--accent); margin: 6px 0 18px; }
.jr-text p { font-family: "Noto Serif TC", serif; font-weight: 300; font-size: 14px; line-height: 2; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 12px; }
.jr-more { margin-top: auto; padding-top: 14px; font-size: 13px; letter-spacing: 0.2em; color: var(--ink); align-self: flex-start; border-bottom: 1px solid currentColor; }
.jr-more i { font-style: normal; display: inline-block; transition: transform 0.35s var(--ease-reveal); }
.jr-more:hover { color: var(--accent); }
.jr-more:hover i { transform: translateX(5px); }
.jr-quote { grid-column: 9 / span 4; align-self: center; margin: 0; padding: 0 0 0 clamp(8px, 1vw, 16px); }
.jr-qmark { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 96px; line-height: 0.6; color: var(--accent); opacity: 0.6; }
.jr-quote p { font-family: "Noto Serif TC", serif; font-weight: 300; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.75; letter-spacing: 0.1em; margin: 14px 0 18px; }
.jr-quote cite { font-style: normal; font-family: "Jost", sans-serif; font-size: 12px; letter-spacing: 0.22em; color: var(--ink-faint); }
.jr-row3-0 { grid-column: 2 / span 3; margin-top: clamp(30px, 5vw, 80px); }
.jr-row3-1 { grid-column: 5 / span 5; }
.jr-row3-2 { grid-column: 10 / span 3; margin-top: clamp(60px, 9vw, 140px); }
.jr-last { grid-column: 1 / span 5; }
.jr-note { grid-column: 7 / span 5; align-self: end; padding-bottom: clamp(20px, 4vw, 60px); }
.jr-note p { font-family: "Noto Serif TC", serif; font-weight: 300; font-size: clamp(17px, 1.5vw, 21px); line-height: 2; letter-spacing: 0.08em; margin: 0 0 22px; }
.jr-note small { display: block; margin-top: 16px; font-size: 12px; color: var(--ink-faint); }
@media (max-width: 1100px) {
  .jr-feature { grid-template-columns: 1fr; }
  .jr-feature-cover { width: 100%; max-width: 560px; margin: 0 auto; }
  .jr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-grid > .jr-cell { grid-column: auto; margin-top: 0; }
  .jr-grid > .jr-stagger-1, .jr-grid > .jr-row3-1 { margin-top: 48px; }
  .jr-grid > .jr-spread, .jr-grid > .jr-quote, .jr-grid > .jr-note { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .jr-grid { grid-template-columns: 1fr; row-gap: 48px; }
  .jr-grid > .jr-cell, .jr-grid > .jr-stagger-1, .jr-grid > .jr-row3-1 { margin-top: 0; }
  .jr-grid .mag, .jr-feature-cover .mag { width: 88%; margin: 0 auto; }
  .jr-grid > .jr-stagger-1 .mag, .jr-grid > .jr-row3-1 .mag { width: 76%; margin: 0 4% 0 auto; }
  .jr-spread { grid-template-columns: 1fr; }
  .jr-spread .mag { width: 100%; }
  .jr-page { border-left: 0; }
}

/* 上一個／下一個作品：標題整段包在 .pager-title，避免 flex 直排把「霧灰｜映雁字」拆成三行 */
.detail-pager .pager-title { font-weight: 400; white-space: nowrap; }

/* 作品卡片（2026-10-23）：
   1. 封面比例改成 alwaysis 那種寬幅（約 1.92:1），只是畫面裁切顯示上下，原圖檔案完全不動，點進作品頁看得到完整照片。
   2. 有滑鼠的電腦：標題已經在滑過時浮在照片上，下方的標題列不再顯示；手機／平板摸不到 hover，照常顯示下方標題。 */
.work-card img { aspect-ratio: 25 / 13; }
@media (hover: hover) and (pointer: fine) {
  .work-card .work-title { display: none; }
}

/* 作品頁「AI 真實照片」管理員工具列（public/js/work-ai.js；訪客看不到） */
.ai-tools { margin: 0 0 28px; padding: 14px 18px; border: 1px solid var(--line, #e4e4df); border-radius: 12px; background: #f6f7f3; }
.ai-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ai-tools-row strong { font-size: 15px; color: var(--accent); letter-spacing: 0.06em; }
.ai-tools-note { font-size: 13px; color: var(--ink-soft); }
.ai-all { margin-left: auto; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.ai-all[disabled] { opacity: 0.6; cursor: default; }
.ai-progress { height: 6px; margin-top: 12px; border-radius: 3px; background: #dfe3da; overflow: hidden; }
.ai-progress i { display: block; height: 100%; background: var(--accent); transition: width 0.4s ease; }
.ai-progress-text { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); }
.detail-photo { position: relative; }
.ai-photo-bar { position: absolute; z-index: 4; top: 10px; right: 10px; display: flex; gap: 6px; }
.ai-photo-bar button, .ai-busy { min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(20, 33, 26, 0.78); color: #fff; font: inherit; font-size: 13px; line-height: 34px; cursor: pointer; }
.ai-busy { cursor: default; }
/* B 版：說明句不放（置中標題已有上下細線），封面小字移到右上；封面寬度小於 300px 時省略次要小字，避免擠在一起 */
.mag--b .mag-lead { display: none; }
.mag--b .mag-feats { left: auto; right: var(--m); top: 21%; bottom: auto; align-items: flex-end; text-align: right; }
@container (max-width: 300px) { .mag-feats, .mag-lead { display: none; } }