: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; } }
/* 手機相框左右 10px；手機橫拿時至少讓出瀏海寬度（iPhone 橫向左右各約 47～59px），標題與按鈕才不會被瀏海擋住（2026-10-23 實測） */
@media (max-width: 860px) { .hero { --hf-x: max(10px, var(--safe-left), var(--safe-right)); } .hc-bar { width: 32px; } .hero-sign { font-size: 26px; right: calc(var(--hf-x) + 12px); } }
/* 手機直立：相框原本是整個螢幕高（約 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 { border-bottom: 1px solid var(--line); transition: background-color 0.3s ease; }
.flow-step:last-child { border-bottom: none; }
/* 手機收折（2026-10-25）：每步一列（STEP 字母＋標題＋箭頭），點了展開說明，一次只開一步 */
.flow-fold > summary {
  display: grid; grid-template-columns: 56px 1fr 18px; align-items: center; gap: 14px;
  padding: 18px 6px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.flow-fold > summary::-webkit-details-marker { display: none; }
.flow-fold[open] { background-color: rgba(72, 98, 75, 0.05); }
.flow-chev { width: 9px; height: 9px; border-right: 1.5px solid var(--ink-faint); border-bottom: 1.5px solid var(--ink-faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.25s ease; justify-self: center; }
.flow-fold[open] .flow-chev { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--accent); }
.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(24px, 4vw, 38px); font-weight: 300;
  color: var(--accent); line-height: 1; letter-spacing: 0.02em;
}
.flow-text { color: var(--ink); font-size: 15px; line-height: 1.6; }

/* ---------- 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;
}
/* 滑過效果只給滑鼠（2026-10-24）：手機點一下會先觸發 :hover 的過場，iPhone 會把那一下當成「顯示滑過效果」吃掉，要點 2～3 次才進得去 */
@media (hover: hover) and (pointer: fine) { .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;
}
@media (hover: hover) and (pointer: fine) { .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);
}
@media (hover: hover) and (pointer: fine) { .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-review { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink) !important; font-size: 14px; transition: border-color 0.25s, background 0.25s; width: fit-content; max-width: 100%; }
.store-review:hover { border-color: var(--accent); background: var(--bg-soft); }
.sr-stars { position: relative; font-size: 16px; letter-spacing: 2px; color: #d9d6cc; line-height: 1; }
.sr-stars::before { content: '★★★★★'; position: absolute; inset: 0; width: var(--r, 100%); overflow: hidden; color: #e0a526; }
.store-review b { font-family: "Jost", sans-serif; font-size: 17px; font-weight: 500; }
.sr-count { color: var(--ink-soft); }
.store-review i { font-style: normal; color: var(--accent); letter-spacing: 0.06em; }
.store-map { width: 100%; height: clamp(280px, 30vw, 440px); border: 0; margin-top: 18px; filter: grayscale(0.3); } /* 2026-10-23 使用者：地圖太小，160px → 280～440px */
.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);
}

/* ---------- 照片檢視器（仿 iPhone 照片；public/js/photo-viewer.js） ---------- */
.lightbox.pv { position: fixed; inset: 0; z-index: 200; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: contain; }
.lightbox[hidden] { display: none; }
.pv-bg { position: absolute; inset: 0; background: #000; will-change: opacity; }
.pv-track { position: absolute; inset: 0; will-change: transform; }
.pv-slide { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pv-zoom { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; will-change: transform; transform-origin: 50% 50%; }
.pv-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.lightbox.pv { cursor: grab; }
.lightbox.pv.pv-dragging { cursor: grabbing; }
/* 上方張數＋關閉、下方說明、左右箭頭（桌機才顯示）；點一下照片就隱藏（pv-chrome-off），拖曳關閉時也淡掉 */
.pv-top, .pv-caption, .pv-nav { position: absolute; z-index: 2; color: #fff; transition: opacity 0.25s ease; }
.pv-top { top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; padding: calc(10px + var(--safe-top)) 16px 10px;
  background: linear-gradient(rgba(0, 0, 0, 0.45), transparent); pointer-events: none; }
.pv-count { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.14em; }
.pv-close { position: absolute; right: calc(10px + var(--safe-right)); top: calc(4px + var(--safe-top)); width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; pointer-events: auto; }
.pv-caption { left: 0; right: 0; bottom: 0; margin: 0; padding: 24px max(20px, var(--safe-right)) calc(18px + var(--safe-bottom)) max(20px, var(--safe-left)); text-align: center; font-size: 13px; letter-spacing: 0.06em;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.45)); pointer-events: auto; cursor: pointer; }
/* 下方作品名稱＝說明入口（2026-10-23 使用者：說明不用滾輪拉，改點 i 或點下方提示打開） */
.pv-caption::after { content: '︿ 說明'; display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.2em; opacity: 0.6; transition: opacity 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .pv-caption:hover::after { opacity: 1; } }
/* 2026-10-23 使用者：照片說明太小、「說明」像藏起來看不出是按鈕 → 作品名稱放大很多，「說明」改成明顯的膠囊按鈕 */
.pv-caption { font-size: clamp(18px, 2vw, 22px); letter-spacing: 0.16em; font-weight: 400; padding-top: 48px; padding-bottom: calc(20px + var(--safe-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62)); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.pv-caption::after { content: '︿  說明'; display: table; margin: 12px auto 0; padding: 9px 22px 9px 24px; min-height: 22px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 15px; letter-spacing: 0.24em; opacity: 1; text-shadow: none; transition: background 0.2s ease, border-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .pv-caption:hover::after { background: rgba(255, 255, 255, 0.3); border-color: #fff; } }
.pv-nav { top: 50%; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); font-size: 34px; line-height: 44px; cursor: pointer; opacity: 0; }
.pv-prev { left: calc(16px + var(--safe-left)); }
.pv-next { right: calc(16px + var(--safe-right)); }
@media (hover: hover) and (pointer: fine) { .lightbox.pv:hover .pv-nav { opacity: 0.85; } .pv-nav:hover { background: rgba(255, 255, 255, 0.26); } }
.pv-first .pv-prev, .pv-last .pv-next { visibility: hidden; }
.pv-info-btn { position: absolute; left: calc(10px + var(--safe-left)); top: calc(4px + var(--safe-top)); width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; font: italic 600 18px/44px Georgia, "Times New Roman", serif; cursor: pointer; pointer-events: auto; }
.pv-info-open .pv-info-btn { background: #fff; color: #111; }
/* 往上滑出的說明面板（仿 iPhone 照片的資訊卡：深灰圓角、上方小把手） */
.pv-info { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; max-height: 62%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; overscroll-behavior: contain; user-select: text; -webkit-user-select: text;
  background: #1c1c1e; color: #f2f2f2; border-radius: 16px 16px 0 0; padding: 10px 22px calc(22px + var(--safe-bottom));
  transform: translate3d(0, 110%, 0); will-change: transform; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35); cursor: auto; }
.pv-info-handle { display: block; width: 38px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
.pv-info-no { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); }
.pv-info-title { margin: 0 0 6px; font-size: 20px; font-weight: 400; letter-spacing: 0.12em; color: #fff; }
.pv-info-meta { margin: 0 0 12px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.pv-info-desc { font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, 0.85); }
/* 這張照片的建材（AI 辨識，photo-viewer.js loadMat） */
.pv-info-mat { margin: 4px 0 18px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.pv-info-mat h3 { margin: 0 0 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; color: #a9c8ad; }
.pv-mat-text { margin: 0 0 12px; font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, 0.9); }
.pv-mat-list { margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
.pv-mat-list div { display: flex; gap: 12px; font-size: 13px; line-height: 1.6; }
.pv-mat-list dt { flex: none; width: 4.5em; color: rgba(255, 255, 255, 0.5); }
.pv-mat-list dd { margin: 0; color: rgba(255, 255, 255, 0.88); }
.pv-mat-loading { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.pv-mat-loading i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #a9c8ad; animation: pvSpin 0.9s linear infinite; }
@keyframes pvSpin { to { transform: rotate(360deg); } }
.pv-info-desc p { margin: 0 0 10px; }
/* 電腦：說明面板配合網頁加寬、整塊攤開（2026-10-23 使用者：資訊出來時要配合網頁較寬的全展示）。
   左欄＝張數／作品名／說明，右欄＝這張照片的建材；沒有建材時整塊單欄 */
@media (min-width: 861px) {
  .pv-info { left: 0; right: 0; margin: 0 auto; width: min(1120px, 94vw); max-height: 72%; padding: 10px 40px calc(28px + var(--safe-bottom)); }
  .pv-info-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 48px;
    grid-template-areas: "no mat" "title mat" "meta mat" "desc mat"; }
  .pv-info-body > .pv-info-no { grid-area: no; }
  .pv-info-body > .pv-info-title { grid-area: title; }
  .pv-info-body > .pv-info-meta { grid-area: meta; }
  .pv-info-body > .pv-info-desc { grid-area: desc; }
  .pv-info-body > .pv-info-mat { grid-area: mat; align-self: start; margin: 4px 0 0; }
  .pv-info-body:has(> .pv-info-mat[hidden]) { display: block; }
  .pv-mat-list { grid-template-columns: 1fr 1fr; column-gap: 20px; }
}
/* 建材區：管理員才有的按鈕／編輯（photo-viewer.js renderMat） */
.pv-mat-tag { margin-left: 10px; padding: 2px 8px; border-radius: 999px; font-size: 11px; letter-spacing: 0.06em; background: rgba(255, 180, 80, 0.18); color: #f2c27a; vertical-align: 1px; }
.pv-mat-tag.is-on { background: rgba(169, 200, 173, 0.16); color: #a9c8ad; }
.pv-info-mat.is-hidden { outline: 1px dashed rgba(242, 194, 122, 0.45); }
.pv-mat-empty { margin: 0 0 4px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.pv-mat-admin { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pv-mat-admin button { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: #f2f2f2; font: inherit; font-size: 13px; cursor: pointer; }
.pv-mat-admin button:hover { background: rgba(255, 255, 255, 0.14); }
.pv-mat-admin button[data-mat="save"], .pv-mat-admin button[data-mat="gen"] { border-color: #6f9474; background: #48624b; }
.pv-info-mat textarea, .pv-info-mat input { width: 100%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(0, 0, 0, 0.25); color: #f2f2f2; font: inherit; font-size: 14px; padding: 8px 10px; }
.pv-info-mat textarea { resize: vertical; line-height: 1.7; margin-bottom: 10px; }
.pv-mat-rows { display: grid; gap: 6px; }
.pv-mat-row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 36px; gap: 6px; }
.pv-mat-row button { border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); font-size: 18px; cursor: pointer; }
.pv-info-open .pv-caption, .pv-info-open .pv-nav { opacity: 0 !important; pointer-events: none; }
/* 橫向矮螢幕：說明從右邊滑出（JS measureInfo 加 pv-side） */
.pv-info.pv-side { left: auto; right: 0; top: 0; bottom: 0; max-height: none; margin-left: 0; border-radius: 16px 0 0 16px;
  padding: calc(18px + var(--safe-top)) calc(22px + var(--safe-right)) calc(22px + var(--safe-bottom)) 22px; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35); }
.pv-info.pv-side .pv-info-handle { display: none; }
/* 橫式觀看按鈕：只在手機直拿時出現；開著橫式時一定顯示（才能切回來） */
.pv-rot-btn { position: absolute; right: calc(62px + var(--safe-right)); top: calc(4px + var(--safe-top)); width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; pointer-events: auto; display: none; align-items: center; justify-content: center; }
@media (pointer: coarse) and (orientation: portrait) { .pv-rot-btn { display: inline-flex; } }
.pv-rot-on .pv-rot-btn { display: inline-flex; background: #fff; color: #111; }
/* iPhone 用：整個檢視器順時針轉 90 度鋪滿（寬高與位移由 JS sizeRotated 設定） */
.lightbox.pv.pv-rot { inset: auto; left: 0; top: 0; transform-origin: 0 0; }
/* 轉 90 度時安全區方向跟著轉（2026-10-23 手機實測：以前全設 0，i 鈕跑進上方動態島／時間列、× 跑進下方 Home 條）：
   內容順時針轉 90 度 → 內容的「左」＝實體螢幕上方、「右」＝實體下方、「上」＝實體右邊、「下」＝實體左邊 */
.lightbox.pv.pv-rot { --rs-t: var(--safe-top); --rs-r: var(--safe-right); --rs-b: var(--safe-bottom); --rs-l: var(--safe-left); }
.pv-rot > * { --safe-left: var(--rs-t); --safe-right: var(--rs-b); --safe-top: var(--rs-r); --safe-bottom: var(--rs-l); }
/* 轉橫向時上方工具列矮一點，照片空間多一點 */
@media (orientation: landscape) and (max-height: 560px) {
  .pv-top { padding-top: calc(4px + var(--safe-top)); padding-bottom: 4px; }
  .pv-caption { padding-top: 14px; padding-bottom: calc(8px + var(--safe-bottom)); font-size: 17px; }
  .pv-caption::after { margin-top: 6px; padding: 6px 18px 6px 20px; font-size: 14px; }
}
.pv-chrome-off .pv-top, .pv-chrome-off .pv-caption, .pv-chrome-off .pv-nav,
.pv-dragging .pv-top, .pv-dragging .pv-caption, .pv-dragging .pv-nav, .pv-closing .pv-top, .pv-closing .pv-caption, .pv-closing .pv-nav { opacity: 0 !important; pointer-events: none; }

/* =========================================================
   桌機/平板「多頁」模式（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; }
@media (hover: hover) and (pointer: fine) { .detail-photo:hover img { opacity: 0.85; } } /* 手機點過會一直停在 hover＝照片半透明（2026-10-23） */
.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; }
  /* 平板／Android 手機橫拿（約 900 寬，右邊再被導覽列佔 48px）：選單會擠出畫面 → 間距、按鈕再收一點（2026-10-23 實測） */
  .site-header .main-nav { margin-left: 18px; gap: 18px; }
  .site-header .main-nav a.nav-app.nav-app { margin-left: 6px; padding: 8px 12px; }
  .site-header .header-inner { padding: 0 16px; }
}
/* 手機橫拿（約 860～1000 寬，iPhone 左右瀏海各 59px）還是太擠：APP 下載只留手機圖示（仍可點，aria-label 有文字） */
@media (min-width: 861px) and (max-width: 1000px) {
  .site-header .main-nav a.nav-app.nav-app { font-size: 0; gap: 0; padding: 8px 10px; letter-spacing: 0; }
}
@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: 13px; height: 4px; border-radius: 2px; /* 滑過去要明顯（2026-10-23 使用者：比原本 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 改成「高張力」版：深綠全幅舞台、巨大描邊字母（滑鼠視差）、
   整面色塊擦除轉場、逐字遮罩上升的動態文字、滾動數字、跟隨游標的光斑。 */
/* 2026-10-25 使用者：網頁及手機都不要清單（.flow-list），只留大卡片簡報 → 簡報樣式改成所有寬度都套用，手機尺寸在檔尾另外縮 */
.flow-deck { display: none; }
@media all {
  .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 { margin: -6px 0 0; padding: 0 30px 18px 76px; font-size: 13.5px; line-height: 1.85; 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;
    --hf-b: clamp(32px, 6vh, 72px); /* 桌機相框下方留白（使用者 2026-10-23：下面也要留白） */
  }
  /* 管理員模式頂部多一條 34px 橫條，首頁高度要扣掉，否則相框下緣被推出畫面、留白不見 */
  body.is-admin[data-active-section="hero"] main > .hero {
    height: calc(100vh - var(--header-total) - 34px); height: calc(100dvh - var(--header-total) - 34px);
  }
  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) {
  .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; }
}

/* 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; }

/* 作品頁「相簿」檢視（public/js/album.js）：仿 iPhone 照片圖庫，正方形縮圖、2px 間隔，雙指縮放改每列張數 */
.album-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.album-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 9px; background: rgba(118, 118, 128, 0.14); }
.album-seg button { position: relative; z-index: 1; min-width: 72px; min-height: 34px; padding: 0 16px; border: 0; background: none; font: inherit; font-size: 14px; letter-spacing: 0.08em; color: var(--ink); cursor: pointer; }
.album-seg-thumb { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 7px; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04); transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1); }
.album-bar.is-album .album-seg-thumb { transform: translateX(100%); }
.album-seg button[aria-selected="true"] { font-weight: 500; }
.album-zoom { display: none; gap: 6px; }
.album-zoom button { width: 36px; height: 34px; border: 0; border-radius: 9px; background: rgba(118, 118, 128, 0.14); font-size: 18px; line-height: 1; color: var(--ink); cursor: pointer; }
.album-zoom button:disabled { opacity: 0.35; cursor: default; }
.album-hint { display: none; font-size: 12px; color: var(--ink-faint); letter-spacing: 0.06em; }
/* －／＋ 鈕不顯示（2026-10-23 使用者：電腦用滑鼠滾輪縮放）；提示文字手機、電腦各一句 */
.album-bar.is-album .album-hint { display: inline; }
.album-hint-pc { display: none; }
/* 電腦：整條「大圖｜相簿」切換列與提示文字都不顯示（一律相簿，滾輪縮放） */
@media (hover: hover) and (pointer: fine) { #work-detail .album-bar { display: none; } }
.detail-gallery.is-album { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) !important; gap: 2px !important; touch-action: pan-x pan-y; }
.detail-gallery.is-album .detail-photo { aspect-ratio: 1 / 1; }
.detail-gallery.is-album .detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery.is-album-1 .detail-photo { aspect-ratio: auto; }
.detail-gallery.is-album-1 .detail-photo img { height: auto; }
/* 不常駐 will-change：每張照片一層 GPU 圖層，手機記憶體不夠 → 往下捲照片慢慢畫出、像半透明過場（2026-10-23）。FLIP 動畫本身用 transform 就會自動升層 */
/* 每列 1 張（直列）時白色分界加大（2026-10-23 使用者） */
.detail-gallery.is-album-1 { gap: 10px !important; }
html.album-lock, html.album-lock body { touch-action: pan-x pan-y; }
/* 從相簿捏回全部作品：剛剛那個作品的縮圖從大縮回來、外框亮一下（site.js ?from=） */
.work-card.is-from .work-card-frame { animation: workFrom 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; box-shadow: 0 0 0 3px var(--accent); transition: box-shadow 0.9s ease 1.2s; z-index: 2; }
@keyframes workFrom { from { transform: scale(2.2); opacity: 0; } 35% { opacity: 1; } to { transform: none; opacity: 1; } }
/* 其他作品先暗著，0.9 秒後慢慢亮起來（focus 在剛剛那個作品） */
.works-from .work-card:not(.is-from) { opacity: 0.28; }
/* 只在這段過場用（不要蓋掉 .reveal 原本的淡入位移） */
.works-from-anim .work-card { transition: opacity 0.9s ease, transform 0.8s var(--ease-reveal); }
/* 換頁過場的底色幕：相簿縮小淡出時蓋上（is-on），到作品集再慢慢退開 */
.album-veil { position: fixed; inset: 0; z-index: 150; background: var(--bg, #fff); opacity: 0; pointer-events: none; transition: opacity 0.5s ease 0.25s; }
.album-veil.is-on { opacity: 1; }
.album-veil.is-out { transition: opacity 0.7s ease; }
@media (prefers-reduced-motion: reduce) { .work-card.is-from .work-card-frame { animation: none; } .album-veil { display: none; } }
/* 縮圖上不放管理員 AI 按鈕與浮水印（太小會擠）；要用 AI 工具請切回「大圖」 */
.detail-gallery.is-album .ai-photo-bar, .detail-gallery.is-album .ai-prog { display: none; }
body.wm-on .detail-gallery.is-album .detail-photo::after { display: none; }
/* 相簿雙指縮放提示（album.js playDemo，2026-10-24）：畫面正中央、斜線雙箭頭一張一縮＋閃爍約 4 秒，透明度／縮放由 JS 逐格設定 */
.album-pinch-hint { position: fixed; left: 50%; top: 50%; z-index: 140; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; opacity: 0; }
.album-pinch-hint .aph-ring { width: 136px; height: 136px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 20, 20, 0.5); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); }
.album-pinch-hint .aph-arrow { width: 92px; height: 92px; display: block; }
.album-pinch-hint .aph-text { padding: 5px 12px; border-radius: 999px; background: rgba(20, 20, 20, 0.5); color: #fff; font-size: 15px; letter-spacing: 0.12em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* 作品誌 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; }
.ai-photo-bar .ai-cmp-new { background: #f2b33d; color: #1c1c1a; font-weight: 500; }
/* 每張照片底部生成進度條（work-ai.js renderProgress） */
.ai-prog { position: absolute; z-index: 4; left: 10px; right: 10px; bottom: 10px; padding: 8px 12px 10px; border-radius: 10px; background: rgba(20, 33, 26, 0.82); color: #fff; pointer-events: none; }
.ai-prog-text { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: 0.04em; }
.ai-prog-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.ai-prog-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: #f2b33d; transition: width 0.5s linear; }
.ai-prog--fail { background: rgba(150, 40, 30, 0.9); } /* 生成失敗（2026-10-24）：紅底顯示原因 */
.ai-prog--fail .ai-prog-bar { display: none; }
.ai-photo-bar { left: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* 檢視器（單張滿版）裡的管理員 AI 鍵：放在作品名稱上方，拖曳／說明面板打開／關閉時跟其他按鈕一起隱藏 */
.pv-ai { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(52px + var(--safe-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 max(12px, var(--safe-right)) 0 max(12px, var(--safe-left)); pointer-events: none; transition: opacity 0.25s ease; }
.pv-ai[hidden] { display: none; }
.pv-ai-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; pointer-events: auto; }
.pv-ai-btns button, .pv-ai-btns .ai-busy, .pv-ai-btns .ai-done { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; font: inherit; font-size: 14px; line-height: 40px; cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pv-ai-btns .ai-decor-btn { background: rgba(72, 98, 75, 0.92); }
.pv-ai-btns .ai-both-btn { background: rgba(47, 74, 51, 0.92); }
.pv-ai-btns .ai-cmp-new { background: #f2b33d; color: #1c1c1a; font-weight: 500; }
.pv-ai-btns .ai-done { background: rgba(255, 255, 255, 0.9); color: #2f4a33; font-weight: 500; cursor: default; }
.pv-ai-btns .ai-busy { cursor: default; }
.pv-ai .pv-ai-prog { position: static; width: min(420px, 100%); box-sizing: border-box; }
.pv-info-open .pv-ai, .pv-dragging .pv-ai, .pv-closing .pv-ai, .pv-chrome-off .pv-ai { opacity: 0 !important; pointer-events: none; }
.pv-info-open .pv-ai *, .pv-dragging .pv-ai *, .pv-closing .pv-ai *, .pv-chrome-off .pv-ai * { pointer-events: none !important; }
.ai-photo-bar .ai-decor-btn { background: rgba(72, 98, 75, 0.92); }
.ai-photo-bar .ai-done { min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #2f4a33; font-size: 13px; font-weight: 500; line-height: 34px; }
.ai-all-btns { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 8px; }
.ai-all-btns .ai-all { margin-left: 0; }
.ai-all--decor { background: #2f4a33; }
.ai-all--both { background: #9a6a00; }
.ai-photo-bar .ai-both-btn { background: rgba(154, 106, 0, 0.92); }
/* AI 燈光色溫（2026-10-24）：暖光＝琥珀、中性光＝冷灰白；上方一列＋照片右上／檢視器裡的單張鍵 */
.ai-cct-row { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line, #e4e4df); }
.ai-all--warm { background: #b5651d; }
.ai-all--neutral { background: #e9ece6; color: #2f3a31; box-shadow: inset 0 0 0 1px #c9cfc4; }
/* 夜晚氛圍（2026-10-24 取代中性光 4000K）＋取消生成 */
.ai-all--night { background: #1f2a44; }
.ai-photo-bar .ai-cancel-btn, .pv-ai-btns .ai-cancel-btn { background: rgba(255, 255, 255, 0.94); color: #a23b2a; font-weight: 500; }
.ai-cancel-all { margin-left: 12px; min-height: 34px; padding: 0 16px; border: 1px solid #c9cfc4; border-radius: 999px; background: #fff; color: #a23b2a; font: inherit; font-size: 14px; cursor: pointer; }
.ai-cancel-all:disabled { opacity: 0.5; cursor: default; }
/* 照片上／檢視器裡的單張燈光鍵（暖光 3000K、夜晚氛圍）一律白底（2026-10-24 22:5x 使用者：暖光一樣用白色）；上方工具列的一鍵全部維持琥珀／深藍 */
.ai-photo-bar .ai-cct-btn, .pv-ai-btns .ai-cct-btn { background: rgba(240, 242, 236, 0.92); color: #2f3a31; }
/* 燈光版本切換（2026-10-24）：原本燈光｜暖光｜中性光，目前網站用的那個是白底 */
.ai-light-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(20, 33, 26, 0.82); }
.ai-light-seg em { padding: 0 8px 0 10px; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.08em; }
.ai-photo-bar .ai-light-seg button, .pv-ai-btns .ai-light-seg button { min-height: 28px; padding: 0 10px; border-radius: 999px; background: transparent; color: #fff; font-size: 12px; line-height: 28px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ai-photo-bar .ai-light-seg button.on, .pv-ai-btns .ai-light-seg button.on { background: #fff; color: #2f3a31; font-weight: 500; }
.ai-cmp-pick[hidden], .ai-cmp-erase-btn[hidden] { display: none; }
/* 對比視窗「點掉多餘物件」：黃色＝AI 新加的東西，點了換回原本畫面 */
.ai-cmp-erase-btn { min-height: 34px; padding: 0 14px; border: 1px solid #f2b33d; border-radius: 999px; background: none; color: #f2b33d; font: inherit; font-size: 13px; cursor: pointer; }
.ai-cmp-erase-btn:hover { background: rgba(242, 179, 61, 0.15); }
.ai-erase { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ai-erase[hidden] { display: none; }
.ai-erase-tip { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.75); text-align: center; }
.ai-erase-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: crosshair; background: #070907; border-radius: 8px; } /* 2026-10-25：可縮放平移、遮罩疊圖、筆刷圓圈，游標依工具（參照 Photoshop） */
.ai-erase-wrap[data-tool="hand"] { cursor: grab; }
.ai-erase-wrap[data-tool="hand"].is-grab { cursor: grabbing; }
.ai-erase-wrap[data-tool="zoom"] { cursor: zoom-in; }
.ai-erase-wrap[data-tool="brush"], .ai-erase-wrap[data-tool="eraser"] { cursor: none; }
.ai-erase-view { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.ai-erase-canvas, .ai-erase-ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ai-erase-ov { pointer-events: none; }
.ai-erase-cursor { position: absolute; z-index: 2; border: 1.5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); transform: translate(-50%, -50%); pointer-events: none; }
.ai-erase-cursor.is-sub { border-style: dashed; }
.ai-erase-cursor[hidden] { display: none; }
.ai-erase-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ai-erase-tools button { min-height: 38px; min-width: 38px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.ai-erase-tools button:disabled { opacity: 0.35; cursor: default; }
.ai-erase-tools button.is-on { border-color: #f2b33d; background: #f2b33d; color: #1c1c1a; }
.ai-erase-tools kbd { margin-left: 6px; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); font: 11px/16px ui-monospace, Menlo, Consolas, monospace; }
.ai-erase-tools button.is-on kbd { background: rgba(0, 0, 0, 0.14); }
.ai-erase-size, .ai-erase-zoom { display: inline-flex; align-items: center; gap: 6px; }
.ai-erase-size input { width: 110px; accent-color: #f2b33d; }
.ai-erase-zoomv { min-width: 48px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
@media (pointer: coarse) { .ai-erase-tools kbd { display: none; } } /* 手機沒有鍵盤 */
.ai-photo-bar .ai-erase-btn, .pv-ai-btns .ai-erase-btn { background: rgba(28, 28, 26, 0.82); color: #f2b33d; }
.ai-erase-msg { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.65); font-size: 13px; white-space: nowrap; pointer-events: none; }
.ai-erase-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* 2026-10-24 四顆鍵：手機會換行 */
.ai-erase-bar button { min-height: 44px; min-width: 96px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; background: none; color: #fff; font: inherit; font-size: 15px; cursor: pointer; }
.ai-erase-bar button:disabled { opacity: 0.4; cursor: default; }
.ai-erase-bar .ai-erase-save { border-color: #f2b33d; background: #f2b33d; color: #1c1c1a; font-weight: 500; }
/* 作品集列表（管理員模式）：每張卡片右上「AI 編修」→ 進作品頁的 AI 工具列 */
.work-card { position: relative; }
.work-ai-pill { position: absolute; z-index: 3; top: 10px; right: 10px; min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgba(47, 74, 51, 0.92); color: #fff; font-size: 12px; letter-spacing: 0.06em; line-height: 30px; }
.detail-photo.ai-has-cand { outline: 3px solid #f2b33d; outline-offset: -3px; }
.ai-wait-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #fff6df; font-size: 14px; }
.ai-wait-row b { color: #9a6a00; }
.ai-review { margin-left: auto; min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: #f2b33d; color: #1c1c1a; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }

/* AI 對比視窗：滑桿（拖曳左右看原圖／AI）或並排；選「用 AI 版／用原圖」才生效 */
html.ai-cmp-open { overflow: hidden; }
.ai-cmp { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: #0e120f; color: #fff;
  padding: calc(12px + var(--safe-top)) 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.ai-cmp-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 44px; font-size: 14px; }
.ai-cmp-count { font-family: var(--font-display); letter-spacing: 0.12em; }
.ai-cmp-using { color: rgba(255, 255, 255, 0.7); font-size: 13px; }
.ai-cmp-modes { margin-left: auto; display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; overflow: hidden; }
.ai-cmp-modes button { min-height: 34px; padding: 0 16px; border: 0; background: none; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.ai-cmp-modes button.is-on { background: #fff; color: #1c1c1a; }
.ai-cmp-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.ai-cmp-stage { --pos: 50%; position: relative; flex: 1; min-height: 0; margin: 12px 0; user-select: none; touch-action: none; }
.ai-cmp-stage figure { position: absolute; inset: 0; margin: 0; }
.ai-cmp-stage img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.ai-cmp-stage figcaption { position: absolute; top: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); font-size: 13px; letter-spacing: 0.1em; }
.ai-cmp-a figcaption { left: 10px; }
.ai-cmp-b figcaption { right: 10px; background: #f2b33d; color: #1c1c1a; }
.ai-cmp--slide .ai-cmp-stage { cursor: ew-resize; }
.ai-cmp--slide .ai-cmp-b { clip-path: inset(0 0 0 var(--pos)); }
.ai-cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.ai-cmp-handle i { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.ai-cmp-handle i::before { content: '‹ ›'; position: absolute; inset: 0; display: grid; place-items: center; color: #1c1c1a; font-size: 18px; font-style: normal; letter-spacing: 2px; }
/* 圓鈕：拉到邊邊時推回框內（--kshift，work-ai.js placeKnob）；手機加大；放大對比時再大一點、黃色外圈，一眼看到可以拉（2026-10-23 使用者） */
.ai-cmp-handle i { transform: translateX(var(--kshift, 0px)); transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease, box-shadow 0.2s ease; }
.ai-cmp-handle { z-index: 2; box-shadow: 0 0 6px rgba(0, 0, 0, 0.45); }
@media (pointer: coarse) {
  .ai-cmp-handle { width: 3px; margin-left: -1.5px; }
  .ai-cmp-handle i { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .ai-cmp-handle i::before { font-size: 22px; }
  .ai-cmp-zoomed .ai-cmp-handle i { width: 60px; height: 60px; margin: -30px 0 0 -30px; box-shadow: 0 0 0 4px #f2b33d, 0 3px 14px rgba(0, 0, 0, 0.5); }
}
.ai-cmp-zoomed .ai-cmp-handle i { box-shadow: 0 0 0 3px #f2b33d, 0 3px 14px rgba(0, 0, 0, 0.5); }
.ai-cmp--side .ai-cmp-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ai-cmp--side .ai-cmp-stage figure { position: relative; inset: auto; min-height: 0; }
.ai-cmp--side .ai-cmp-handle { display: none; }
/* 放大對比（work-ai.js applyCmpZoom）：放大套在 img 上，框外裁掉；右下角顯示倍數、點了還原 */
.ai-cmp-stage figure { overflow: hidden; }
.ai-cmp-stage img { transform-origin: 50% 50%; will-change: transform; }
.ai-cmp-zoomed .ai-cmp-stage { cursor: grab; }
.ai-cmp-zoom { position: absolute; z-index: 3; left: 50%; bottom: 10px; transform: translateX(-50%); min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: rgba(0, 0, 0, 0.62); color: #fff; font: inherit; font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; cursor: pointer; }
.ai-cmp-zoom[hidden] { display: none; }
@media (max-width: 700px) and (orientation: portrait) { .ai-cmp--side .ai-cmp-stage { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }
.ai-cmp-bottom { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-cmp-nav { min-height: 44px; padding: 0 16px; border: 0; background: none; color: rgba(255, 255, 255, 0.8); font: inherit; font-size: 14px; cursor: pointer; }
.ai-cmp-pick { min-height: 46px; min-width: 120px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; background: none; color: #fff; font: inherit; font-size: 15px; cursor: pointer; }
.ai-cmp-pick--ai { border-color: #f2b33d; background: #f2b33d; color: #1c1c1a; font-weight: 500; }
.ai-cmp-pick:disabled { opacity: 0.5; cursor: wait; }
.ai-cmp-pick, .ai-cmp-nav { white-space: nowrap; }
@media (max-width: 480px) {
  .ai-cmp-pick { min-width: 0; flex: 1 1 40%; padding: 0 12px; }
  .ai-cmp-nav { order: 2; flex: 1 1 40%; min-height: 40px; }
}
/* 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; } }

/* 聯絡頁「客戶好評」：Google 評論卡片（server/googleReviews.js） */
.reviews { margin-top: 56px; }
.reviews-title { font-family: "Noto Serif TC", serif; font-weight: 500; font-size: 22px; letter-spacing: 0.16em; margin-bottom: 22px; }
.reviews-title small { margin-left: 10px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-faint); font-weight: 400; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.rv-card { margin: 0; padding: 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.rv-head { display: flex; align-items: center; gap: 12px; }
.rv-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg-soft); }
.rv-who { display: flex; flex-direction: column; font-size: 15px; color: var(--ink); line-height: 1.4; }
.rv-who a { color: var(--ink); }
.rv-who small { font-size: 12px; color: var(--ink-faint); }
.rv-text { margin: 0; font-size: 14px; line-height: 1.9; color: var(--ink-soft); letter-spacing: 0.03em; }
.rv-more { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: 14px; }
.rv-more a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* 管理員模式（連點 Logo 5 次；public/js/site.js showAdminBar／openAdminLogin，訪客看不到） */
.admin-bar {
  position: sticky; top: 0; z-index: 120; height: calc(34px + var(--safe-top)); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: var(--safe-top) 16px 0; background: #1f2b21; color: #fff; font-size: 13px; letter-spacing: 0.08em;
}
.admin-bar-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.admin-bar-tag i { width: 8px; height: 8px; border-radius: 50%; background: #7fd38a; box-shadow: 0 0 0 3px rgba(127, 211, 138, 0.25); }
.admin-bar a, .admin-bar button {
  min-height: 26px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 13px;
  background: none; color: #fff; font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center;
}
.admin-bar a:hover, .admin-bar button:hover { background: rgba(255, 255, 255, 0.12); }
body.is-admin .site-header { top: calc(34px + var(--safe-top)); }
/* 管理員橫條已經讓出手機狀態列，下面的 header 不要再讓一次（2026-10-23 實測多出 24px 空白）；總高度不變（橫條 34＋安全區＋header 72） */
body.is-admin .site-header { padding-top: 0; height: var(--header-h); }
@media (max-width: 860px) {
  /* header 有 backdrop-filter，裡面的 fixed 選單是以 header 為準定位：管理員模式 header 沒有上方安全區，選單從 header 高度開始 */
  body.is-admin .main-nav { top: var(--header-h); max-height: calc(100dvh - var(--header-total) - 34px); }
}
@media (max-width: 480px) { .admin-bar { gap: 10px; font-size: 12px; } .admin-bar a, .admin-bar button { padding: 0 9px; } }

.admin-login { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(28, 28, 26, 0.45); }
.admin-login-card { width: min(360px, 100%); padding: 28px 24px 22px; border-radius: 10px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35); }
.admin-login-card h3 { margin: 0 0 18px; font-size: 18px; font-weight: 500; letter-spacing: 0.1em; }
.admin-login-card label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--ink-soft); }
.admin-login-card input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 15px; }
.admin-login-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.admin-login-note { margin: 0 0 6px; font-size: 12px; color: var(--ink-faint); }
.admin-login-err { min-height: 18px; margin: 0 0 8px; font-size: 13px; color: #b3261e; }
.admin-login-btns { display: flex; justify-content: flex-end; gap: 10px; }
.admin-login-btns button { min-height: 40px; padding: 0 20px; border-radius: 6px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.admin-login-btns button[type="submit"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.admin-login-btns button:disabled { opacity: 0.6; cursor: wait; }
/* 手機作品內頁（2026-10-23 使用者：直式、橫式都盡量滿版；照片在上、文字說明放下面）
   ①順序：返回／標題 → 大圖相簿切換 → 照片 → 說明 → 諮詢 → 上下一個（flex order，不改 HTML，桌機不受影響）
   ②照片貼齊左右兩邊（抵銷 .section 左右內距；相簿模式也一樣滿版）
   ③大圖模式每張照片高度不超過一個畫面（扣掉 header），整張看得到；手機橫拿時照片＝畫面高度置中 */
@media (max-width: 860px) {
  #work-detail .section-inner { display: flex; flex-direction: column; }
  #work-detail .detail-back { align-self: flex-start; }
  #work-detail .detail-head { margin-bottom: 20px; }
  #work-detail .detail-desc { order: 1; align-self: stretch; margin: 40px 0 0; }
  #work-detail .detail-cta, #work-detail .detail-pager { order: 2; }
  #work-detail .detail-gallery {
    margin-left: calc(-1 * max(24px, var(--safe-left)));
    margin-right: calc(-1 * max(24px, var(--safe-right)));
    gap: 6px;
  }
}
@media (max-width: 860px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  #work-detail .detail-gallery:not(.is-album) .detail-photo { width: fit-content; max-width: 100%; margin: 0 auto; background: none; }
  #work-detail .detail-gallery:not(.is-album) .detail-photo img { width: auto; max-width: 100%; max-height: calc(100svh - var(--header-total)); }
}

/* 管理員點 Logo 切換客人檢視／管理員模式的提示（2026-10-23） */
.admin-toast { position: fixed; left: 50%; top: calc(var(--header-total) + 16px); z-index: 400; transform: translate(-50%, -8px); opacity: 0;
  padding: 10px 18px; border-radius: 999px; background: rgba(30, 40, 32, 0.92); color: #fff; font-size: 13px; letter-spacing: 0.06em; white-space: nowrap;
  pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.admin-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* 作品內頁照片捲到才淡入（2026-10-23，比照作品集 .reveal；album.js 加 pv-rv／is-in）。
   用 translate 屬性，不佔用 transform（相簿換級 FLIP 用 inline transform） */
.detail-photo.pv-rv { opacity: 0; translate: 0 26px; transition: opacity 0.8s var(--ease-reveal), translate 0.8s var(--ease-reveal); }
.detail-photo.pv-rv.is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .detail-photo.pv-rv { opacity: 1; translate: none; transition: none; } }

/* 手機點作品卡片／作品照片：一下就進（2026-10-24 使用者：要點 2～3 次）。manipulation＝不等雙擊縮放判斷 */
.work-card, .detail-photo, .detail-pager a, .detail-back { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* 作品照片已蓋進 LOGO（2026-10-24 作品頁「蓋上 LOGO」）：網頁上疊的浮水印就不再疊，免得兩個 LOGO */
body.wm-on .work-card-frame.has-logo::after, body.wm-on .detail-photo.has-logo::after { display: none; }

/* 模糊人物擺放工具（2026-10-24，public/js/work-people.js）：全螢幕深色編輯器，蓋在照片檢視器上面 */
.ai-photo-bar .ai-people-btn, .pv-ai-btns .ai-people-btn { background: rgba(240, 242, 236, 0.92); color: #2f3a31; }
html.pp-open, html.pp-open body { overflow: hidden; }
.pp-modal { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; background: #161816; color: #eee; font-size: 14px;
  padding: var(--safe-top, 0) var(--safe-right, 0) var(--safe-bottom, 0) var(--safe-left, 0); }
.pp-top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.pp-top strong { font-size: 16px; letter-spacing: 0.12em; }
.pp-tip { flex: 1; font-size: 12px; color: rgba(255, 255, 255, 0.55); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pp-top button { min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; cursor: pointer; }
.pp-cancel { background: rgba(255, 255, 255, 0.12); color: #fff; }
.pp-save { background: #48624b; color: #fff; font-weight: 500; }
.pp-save:disabled { opacity: 0.6; cursor: default; }
.pp-main { flex: 1; min-height: 0; display: flex; }
.pp-stage { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 12px; }
.pp-canvas { display: block; touch-action: none; cursor: grab; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); }
.pp-loading { position: absolute; color: rgba(255, 255, 255, 0.6); }
.pp-side { width: 260px; flex: none; padding: 16px; border-left: 1px solid rgba(255, 255, 255, 0.1); overflow-y: auto; }
.pp-empty, .pp-count { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.pp-row { display: grid; grid-template-columns: 64px 1fr 44px; align-items: center; gap: 8px; margin-bottom: 14px; }
.pp-row span { font-size: 13px; }
.pp-row input { width: 100%; accent-color: #a9c8ad; }
.pp-row em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.6); text-align: right; }
.pp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.pp-btns button { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.pp-btns .pp-del { color: #f0a090; border-color: rgba(240, 160, 144, 0.5); }
.pp-lib { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); overflow-x: auto; }
.pp-up { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #48624b; color: #fff; font-size: 13px; cursor: pointer; white-space: nowrap; }
.pp-up.is-busy { opacity: 0.6; pointer-events: none; }
.pp-figs { display: flex; gap: 8px; }
.pp-fig { position: relative; flex: none; width: 64px; height: 84px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.06); cursor: pointer; }
.pp-fig img { width: 100%; height: 100%; object-fit: contain; }
.pp-fig-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #333; color: #fff; font-size: 13px; line-height: 20px; text-align: center; }
.pp-nofig { font-size: 13px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
/* 手機：控制區移到照片下方 */
@media (max-width: 760px) {
  .pp-main { flex-direction: column; }
  .pp-side { width: auto; max-height: 38%; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .pp-tip { display: none; }
}

/* 夜晚＋真實＋綠植＋傢俱（2026-10-24 23:xx）＋版本選擇（生成過的都保留、可換回） */
.ai-all--nightboth { background: #1f2a44; }
.ai-photo-bar .ai-nightboth-btn, .pv-ai-btns .ai-nightboth-btn { background: rgba(31, 42, 68, 0.92); color: #fff; }
.ai-photo-bar .ai-ver-btn, .pv-ai-btns .ai-ver-btn { background: rgba(240, 242, 236, 0.92); color: #2f3a31; }
.ai-ver { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.6); }
.ai-ver.is-busy { cursor: progress; }
.ai-ver-box { width: min(980px, 100%); max-height: 86vh; display: flex; flex-direction: column; border-radius: 16px; background: #1b1e1b; color: #eee; overflow: hidden; }
.ai-ver-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ai-ver-top strong { font-size: 16px; letter-spacing: 0.12em; }
.ai-ver-top span { flex: 1; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.ai-ver-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 20px; cursor: pointer; }
.ai-ver-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 16px; overflow-y: auto; }
.ai-ver-item { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 2px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: #eee; font: inherit; text-align: left; cursor: pointer; }
.ai-ver-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.ai-ver-item b { font-size: 13px; font-weight: 500; }
.ai-ver-item i { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.ai-ver-item.is-on { border-color: #a9c8ad; cursor: default; }
.ai-ver-item.is-on i { color: #a9c8ad; }
@media (hover: hover) and (pointer: fine) { .ai-ver-item:not(.is-on):hover { border-color: rgba(255, 255, 255, 0.4); } }

/* 電腦版作品內頁：雙排（每列 2 張，album.js desktop cols=2，使用者 2026-10-24）。照片 3:2、留白比手機相簿大；
   淡入浮上來沿用 .pv-rv（同作品集 .reveal：0.8 秒、往上 26px、同一批每張晚 70ms） */
@media (hover: hover) and (pointer: fine) {
  .detail-gallery.is-album { gap: clamp(14px, 1.6vw, 24px) !important; }
  .detail-gallery.is-album .detail-photo { aspect-ratio: 3 / 2; }
}

/* 未發布作品（管理員，public/js/works-admin.js，2026-10-24）：資料夾匯入的 3D 圖／完工照預設不發布 */
.wd { margin: 0 0 40px; padding: 18px 18px 20px; border: 1px dashed #b9c4b5; border-radius: 14px; background: #f6f7f3; }
.wd-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; }
.wd-head strong { font-size: 17px; font-weight: 500; letter-spacing: 0.12em; }
.wd-num { min-width: 28px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; text-align: center; }
.wd-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.wd-tabs button { min-height: 36px; padding: 0 14px; border: 1px solid #cfd6cb; border-radius: 999px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.wd-tabs button b { font-weight: 400; color: var(--ink-faint); margin-left: 2px; }
.wd-tabs button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wd-tabs button.is-on b { color: rgba(255, 255, 255, 0.8); }
.wd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .wd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .wd-tabs { margin-left: 0; } }
.wd-card { display: flex; flex-direction: column; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(28, 28, 26, 0.06); transition: opacity 0.4s, transform 0.4s var(--ease-reveal); }
.wd-card.is-gone { opacity: 0; transform: scale(0.94); }
.wd-img { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--bg-soft); }
.wd-img img { width: 100%; height: 100%; object-fit: cover; }
.wd-img i { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; font-style: normal; }
.wd-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 12px 12px; }
.wd-title { flex: 1 1 100%; font-size: 15px; letter-spacing: 0.1em; color: var(--ink); }
.wd-title em { font-style: normal; color: var(--ink-faint); }
.wd-case { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-pub { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: #eef2ec; font-size: 14px; cursor: pointer; user-select: none; }
.wd-pub input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.wd-more { display: block; margin: 16px auto 0; min-height: 40px; padding: 0 22px; border: 1px solid var(--accent); border-radius: 999px; background: #fff; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; }
.wd-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; letter-spacing: 0.06em; color: #fff; background: #1f2a44; }
.wd-badge--done { background: #9a6a00; }
.wd-img .wd-badge, .work-card-frame .wd-badge { position: absolute; left: 8px; top: 8px; z-index: 2; }
.wd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; padding: 10px 14px; border: 1px dashed #b9c4b5; border-radius: 12px; background: #f6f7f3; }
.wd-bar .wd-case { flex: 0 1 auto; font-size: 13px; }
.wd-state { margin-left: auto; font-size: 13px; color: var(--ink-soft); }

/* ===== 手機觸控效果（2026-10-25，public/js/mobile-fx.js） ===== */
/* 接案流程半收：露出前 4 步＋第 5 步一半，往下漸淡；「展開全部」鈕 */
.flow-list { transition: max-height 0.55s var(--ease-reveal, ease); }
.flow-list.is-half { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); }
.flow-more { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px auto 0; padding: 12px 26px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--accent); font: inherit; font-size: 14px; letter-spacing: 0.12em; cursor: pointer; }
.flow-more[hidden] { display: none; }
.flow-more-chev { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.flow-more-chev.is-up { transform: rotate(-135deg) translate(-2px, -2px); }
@media (min-width: 861px) { .flow-more { display: none; } }

/* 作品卡：手指點下去先暗下來、作品名浮出（跟滑鼠移過同一套） */
.work-card.is-tapped .work-card-shade { background: rgba(18, 18, 16, 0.5); opacity: 1; }
.work-card.is-tapped .work-card-shade > span { transform: none; }
/* 照片從卡片放大到滿版並外溢，再淡成底色 */
.wk-fly { position: fixed; z-index: 9999; overflow: hidden; pointer-events: none; border-radius: 2px;
  transition: left 0.62s cubic-bezier(0.22, 1, 0.36, 1), top 0.62s cubic-bezier(0.22, 1, 0.36, 1), width 0.62s cubic-bezier(0.22, 1, 0.36, 1), height 0.62s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.62s; }
.wk-fly.is-go { border-radius: 0; }
.wk-fly img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-fly-shade { position: absolute; inset: 0; background: rgba(18, 18, 16, 0.5); transition: background 0.5s ease; }
.wk-fly.is-go .wk-fly-shade { background: rgba(18, 18, 16, 0.12); }
.wk-fly-veil { position: absolute; inset: 0; background: var(--bg, #f6f3ee); opacity: 0; transition: opacity 0.3s ease; }
.wk-fly.is-veil .wk-fly-veil { opacity: 0.85; }
body.wk-flying > *:not(.wk-fly) { transition: opacity 0.5s ease; opacity: 0.35; }
/* 作品頁進場：從半透明淡入 */
/* 2026-10-25 改：接上一頁「整面暗下來」，作品頁從暗慢慢亮起（暗幕淡出＝半透明淡入），只動暗幕的透明度 */
@keyframes wkVeilOut { from { opacity: 1; } to { opacity: 0; } }
html.wk-enter body::after { content: ''; position: fixed; inset: 0; z-index: 10000; background: #121210; pointer-events: none; animation: wkVeilOut 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both; }
@media (prefers-reduced-motion: reduce) { html.wk-enter body::after { display: none; } }

/* ===== 照片與下拉選單一律倒圓角（使用者 2026-10-25：手機＋網頁的照片預覽、點進去的照片、下拉選單） ===== */
:root { --r-photo: 22px; --r-menu: 16px; } /* 2026-10-25 使用者：照片圓角再大一些（14→22，手機 12→18） */
@media (max-width: 560px) { :root { --r-photo: 18px; } }
.work-card { border-radius: var(--r-photo); overflow: hidden; }
.work-card-frame { border-radius: var(--r-photo) var(--r-photo) 0 0; }
.detail-photo { border-radius: var(--r-photo); }
.detail-gallery.is-album .detail-photo { border-radius: 10px; } /* 相簿方格很密，圓角小一點 */
.pv-img { border-radius: var(--r-photo); }
.wk-fly { border-radius: var(--r-photo); }
.wk-fly.is-go { border-radius: var(--r-photo); }
.nav-dropdown, .brand-dropdown,
.site-header .brand-dropdown, .site-header .nav-item-menu .nav-dropdown { border-radius: var(--r-menu); overflow: hidden; } /* 頁首版原本只有下緣 6px（第 854 行），要蓋過它 */
@media (max-width: 860px) { .main-nav { border-radius: 0 0 var(--r-menu) var(--r-menu); } } /* 手機漢堡選單往下展開的面板：下緣兩角圓 */

/* ===== 2026-10-25 第二輪：作品集手機浮出、點擊轉場放慢、作品頁「全部作品」鍵放大 ===== */
/* 手機滑動作品集：下面上來的作品從半透明慢慢浮出 */
@media (max-width: 860px) {
  .works-grid > .work-card.reveal { transform: translateY(46px); transition: opacity 1.3s var(--ease-reveal), transform 1.3s var(--ease-reveal); }
  .works-grid > .work-card.reveal.is-visible { transform: none; }
}
/* 點作品：暗幕慢慢罩上 → 照片放大外溢 0.95 秒 → 整面暗下來 */
.work-card.is-tapped .work-card-shade { background: rgba(18, 18, 16, 0.55); transition: background 0.8s ease, opacity 0.8s ease; }
.work-card.is-tapped .work-card-shade > span { transition: transform 0.8s var(--ease-reveal); }
.wk-fly { transition: left 0.95s cubic-bezier(0.22, 1, 0.36, 1), top 0.95s cubic-bezier(0.22, 1, 0.36, 1), width 0.95s cubic-bezier(0.22, 1, 0.36, 1), height 0.95s cubic-bezier(0.22, 1, 0.36, 1); }
.wk-fly-shade { background: rgba(18, 18, 16, 0.55); transition: background 0.95s ease; }
.wk-fly.is-go .wk-fly-shade { background: rgba(18, 18, 16, 0.62); }
.wk-fly-veil { background: #121210; transition: opacity 0.48s ease; }
.wk-fly.is-veil .wk-fly-veil { opacity: 1; }
body.wk-flying > *:not(.wk-fly) { transition: opacity 0.9s ease; opacity: 0.15; }
/* 作品頁「← 全部作品」：放大成好按的膠囊鈕 */
.detail-back { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 22px 10px 18px; font-size: 15px; letter-spacing: 0.1em; color: var(--ink); border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, 0.7); margin-bottom: 24px; }
.detail-back:hover { color: var(--accent); border-color: var(--accent); }

/* ===== 2026-10-25 第三輪：浮動鈕全部顯示＋LINE 官方圖示；看過的作品變灰 ===== */
/* LINE：綠色圓角方塊＋白色對話框（官方圖示樣式），不跟其他圓鈕一樣混色 */
.float-btn.float-line { --line-tone: color-mix(in srgb, #06C755 35%, var(--accent)); background: #4f7a58; background: var(--line-tone); border-radius: 28%; } /* 2026-10-25 使用者：跟其他鈕同色調、低飽和（同 .float-btn 的 35% 混色） */
.float-btn.float-line:hover { --line-tone: #06C755; }
.float-btn.float-line svg.line-logo text { fill: var(--line-tone); } /* 對話框裡的 LINE 字跟底色同色 */
.float-btn.float-line svg.line-logo { width: 38px; height: 38px; }
@media (max-width: 860px) { .float-btn.float-line svg.line-logo { width: 34px; height: 34px; } }
/* 看過的作品（作品頁停留超過 10 秒，記在這支手機／電腦的 localStorage）：回到作品集時照片變灰、作品名一直浮著 */
/* 2026-10-25 使用者：再透灰一些、保留一點淡淡的顏色 → 去色 0.6、提亮降對比，暗幕從 0.45 降到 0.3，字加陰影維持看得清楚 */
.work-card.is-seen .work-card-shade { background: rgba(28, 28, 26, 0.3); opacity: 1; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }
.work-card.is-seen .work-card-shade > span { transform: none; }
.work-card.is-seen img { filter: grayscale(0.6) brightness(1.04) contrast(0.9); }
body.tone-on .work-card.is-seen img { filter: grayscale(0.6) brightness(1.04) contrast(0.9); }
/* 編輯者（官網管理員模式）不用「看過變灰」 */
body.is-admin .work-card.is-seen .work-card-shade { background: rgba(18, 18, 16, 0); opacity: 0; text-shadow: none; }
body.is-admin .work-card.is-seen img { filter: none; }
body.is-admin.tone-on .work-card.is-seen 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, ); } /* 跟一般作品一樣套全站色調 */
@media (hover: hover) { body.is-admin .work-card.is-seen:hover .work-card-shade { background: rgba(18, 18, 16, 0.5); opacity: 1; } }

/* ===== 2026-10-25 管理員：作品卡直接勾發布、作品頁每張照片勾顯示（public/js/works-admin.js） ===== */
/* 隱藏的相簿照片：客人頁面本來就拿不到；2026-10-26 使用者：管理員編輯時也不出現，要找回來才按上方「已隱藏 N 張」淡淡地顯示 */
.detail-photo.is-hidden-photo { display: none; }
body.wd-show-hidden .detail-photo.is-hidden-photo { display: block; opacity: 0.38; }
body.wd-show-hidden .detail-photo.is-hidden-photo:hover { opacity: 0.6; }
.wd-pubbtn, .wd-vis { position: absolute; top: 10px; left: 10px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.92); color: var(--accent-dark, #344a37); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); cursor: pointer; }
.wd-pubbtn i, .wd-vis i { width: 18px; height: 18px; border-radius: 5px; background: var(--accent, #48624B); color: #fff; font-style: normal; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.wd-pubbtn.is-off, .wd-vis.is-off { background: rgba(28, 28, 26, 0.82); color: #fff; }
.wd-pubbtn.is-off i, .wd-vis.is-off i { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.8); }
.wd-pubbtn:disabled, .wd-vis:disabled { opacity: 0.6; cursor: wait; }
.wd-vis.is-cover { cursor: default; padding: 6px 12px; font-weight: 500; color: var(--ink-soft, #666); }
.work-card.is-unpub .work-card-frame img { opacity: 0.45; filter: grayscale(0.6); }
.detail-gallery.is-album .wd-vis { top: 6px; left: 6px; padding: 4px 8px 4px 5px; font-size: 11px; }
.detail-gallery.is-album .wd-vis.is-cover { display: none; }
.work-card-frame .wd-pubbtn ~ .wd-badge, .work-card-frame .wd-badge:has(~ .wd-pubbtn) { top: 50px; left: 10px; } /* 3D 圖／完工照標籤讓到發布鈕下面 */

/* ===== 2026-10-25 桌機也改成一頁式往下捲（使用者：網頁版像手機一樣一頁式往下）=====
   首頁、關於、接案流程、作品集、常見問題、聯絡我們六個網址：頁首 inline script 把 data-active-section 改成 page
   （原本的區塊記在 data-land，site.js 載入後捲過去），以前「一個網址只顯示一塊、整面不捲動」的桌機規則就都不會套用。
   作品誌、收費方式、作品內頁照舊是獨立頁。導覽列目前區塊改由捲動位置決定（site.js 設 data-spy）。 */
@media (min-width: 861px) {
  body[data-active-section="page"] main > .hero { display: flex; }
  body[data-active-section="page"] main > :is(#about, #flows, #works, #qa, #contact) { display: block; }
  body[data-active-section="page"] main > .hero {
    height: calc(100vh - var(--header-total)); height: calc(100dvh - var(--header-total)); min-height: 520px;
    --hf-b: clamp(32px, 6vh, 72px);
  }
  body.is-admin[data-active-section="page"] main > .hero { height: calc(100vh - var(--header-total) - 34px); height: calc(100dvh - var(--header-total) - 34px); }
  body[data-spy="about"] .main-nav a[data-section="about"],
  body[data-spy="flows"] .main-nav a[data-section="flows"],
  body[data-spy="works"] .main-nav a[data-section="works"],
  body[data-spy="qa"] .main-nav a[data-section="qa"],
  body[data-spy="contact"] .main-nav a[data-section="contact"] { color: var(--ink-faint); }
  body[data-spy="about"] .main-nav a[data-section="about"]::before,
  body[data-spy="flows"] .main-nav a[data-section="flows"]::before,
  body[data-spy="works"] .main-nav a[data-section="works"]::before,
  body[data-spy="qa"] .main-nav a[data-section="qa"]::before,
  body[data-spy="contact"] .main-nav a[data-section="contact"]::before { height: 2px; background: var(--accent); }
  /* 接案流程簡報：一頁式裡當成一般區塊，四周同首頁相框留白，高度約一個畫面 */
  body[data-active-section="page"] #flows .flow-deck { height: min(78vh, 760px); }
  body[data-active-section="page"] #flows .deck-stage { flex: 1; height: auto; min-height: 0; }
}
/* 首頁往下箭頭：一頁式（任何寬度）都放在相框正下方中間 */
body[data-active-section="page"] .scroll-hint { bottom: calc(20px + var(--safe-bottom)); right: auto; left: 50%; margin-left: -12px; }

/* 首頁相框依照片比例調寬（2026-10-25 使用者：照片左下加寬、符合照片比例）：site.js 量每張照片的長寬比，
   算出剛好容得下照片的相框寬度寫進 --hf-x（左右留白），兩側不再有灰底，左下標題漸層也剛好貼齊照片；換張時平滑改變寬度 */
@property --hf-x { syntax: '<length>'; inherits: true; initial-value: 0px; }
@media (min-width: 861px) {
  .hero.hero--fit { transition: --hf-x 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
  .hero.hero--fit .hero-slide { background-size: cover; }
}

/* ===== 接案流程重新設計（2026-10-25 使用者：淺色莫蘭迪色、邊角都是圓角）=====
   取代深綠「高張力」配色：暖米底＋每一步一個低彩度莫蘭迪色（鼠尾草綠、灰玫瑰、霧藍、沙米、灰薰衣草、橄欖灰，6 色循環），
   面板、卡片、按鈕、圓點、進度條、轉場色塊全部圓角；去掉發光與深色漸層。手機清單改成一張張圓角色卡。 */
.flow-step:nth-child(6n+1), .deck-slide:nth-child(6n+1) { --tone: #dfe5da; --tone-deep: #8fa287; }
.flow-step:nth-child(6n+2), .deck-slide:nth-child(6n+2) { --tone: #ecdfda; --tone-deep: #b58e83; }
.flow-step:nth-child(6n+3), .deck-slide:nth-child(6n+3) { --tone: #dde3e7; --tone-deep: #8798a3; }
.flow-step:nth-child(6n+4), .deck-slide:nth-child(6n+4) { --tone: #ece5da; --tone-deep: #ad9a7c; }
.flow-step:nth-child(6n+5), .deck-slide:nth-child(6n+5) { --tone: #e5e0e8; --tone-deep: #988ca3; }
.flow-step:nth-child(6n+6), .deck-slide:nth-child(6n+6) { --tone: #e4e3d6; --tone-deep: #9a9877; }

/* 手機：圓角色卡 */
.section-flows { background: #f5f2ee; }
.flow-list { display: flex; flex-direction: column; gap: 10px; }
.flow-step, .flow-step:last-child { flex: none; border: 0; border-radius: 18px; background: var(--tone, #ece7e1); overflow: hidden; } /* flex: none：清單收合（只露一半）時卡片不會被壓成 0 高 */
.flow-fold[open] { background-color: rgba(255, 255, 255, 0.45); }
.flow-code-num { color: var(--tone-deep, var(--accent)); }
.flow-code-label { color: #8d8781; }
.flow-text { color: #4d4a46; }
.flow-fold[open] .flow-chev { border-color: var(--tone-deep, var(--accent)); }
.flow-desc { color: #6b6661; }
.flow-pricing-link { border-radius: 999px; }

@media all { /* 2026-10-25 起手機也用簡報（原本只有桌機） */
  .flow-deck {
    --deck-bg: #f3efea; --deck-ink: #4d4a46; --deck-soft: #8d8781; --deck-line: rgba(77, 74, 70, 0.12);
    border-radius: 28px; box-shadow: 0 1px 0 rgba(77, 74, 70, 0.06), 0 18px 48px rgba(77, 74, 70, 0.08);
    display: flex; flex-direction: column;
  }
  .flow-deck::after { display: none; } /* 深色漂移光暈拿掉 */
  .deck-stage { margin: 14px 14px 0; border-radius: 22px; overflow: hidden; height: clamp(440px, 62vh, 640px); }
  .deck-slide { background: var(--tone, #e8e3dc); border-radius: 22px; }
  .deck-slide::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(60% 70% at 85% 20%, rgba(255, 255, 255, 0.55), transparent 70%); }
  .deck-bgcode { -webkit-text-stroke: 1.5px rgba(77, 74, 70, 0.13); }
  .deck-label { color: var(--tone-deep, var(--deck-soft)); }
  .deck-label::after { background: var(--tone-deep, var(--deck-soft)); border-radius: 1px; }
  .deck-code { color: var(--tone-deep, var(--deck-ink)); }
  .deck-text { color: var(--deck-ink); font-weight: 500; }
  .deck-desc { color: #6b6661; border-left: 0; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.55); }
  .deck-wipe { background: #d9cfc4; border-radius: 22px; }
  .deck-wipe::after { color: rgba(255, 255, 255, 0.5); }
  .deck-bar { border-top: 0; padding-top: 18px; padding-bottom: 14px; }
  .deck-roll { color: var(--deck-ink); }
  .deck-progress { height: 6px; border-radius: 999px; background: rgba(77, 74, 70, 0.08); overflow: hidden; }
  .deck-progress i { border-radius: 999px; background: linear-gradient(90deg, #b7c4b1, #d9c2ba, #b9c5cc); box-shadow: none; }
  .deck-arrow { border: 0; background: #fff; color: var(--deck-ink); box-shadow: 0 2px 10px rgba(77, 74, 70, 0.1); }
  .deck-arrow:hover:not(:disabled) { background: var(--deck-ink); color: #fff; }
  .deck-pricing { border-radius: 999px; }
  .deck-rail { padding-bottom: 20px; }
  .deck-dot { width: 52px; height: 40px; color: rgba(77, 74, 70, 0.45); }
  .deck-dot::before { border-radius: 999px; background: #e3ddd6; }
  .deck-dot:hover { color: var(--deck-ink); }
  .deck-dot.is-active { color: var(--deck-ink); transform: translateY(-2px); }
  .deck-dot.is-active::before { transform: scale(1); background: #d9cfc4; }
  /* 一頁式：簡報跟著內容高度，不再固定高度（舊規則用 min(78vh,760px)） */
  body[data-active-section="page"] #flows .flow-deck { height: auto; }
  body[data-active-section="page"] #flows .deck-stage { flex: none; height: clamp(440px, 62vh, 640px); }
}

/* 作品頁管理員「設為封面」（works-admin.js photoToggles，2026-10-25）：照片左下角（右上角是 AI 工具鈕），滑鼠移過或手機常駐 */
.wd-cover { position: absolute; bottom: 10px; left: 10px; z-index: 6; padding: 6px 12px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.92); color: var(--accent-dark, #344a37); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); cursor: pointer; }
.wd-cover:hover { background: var(--accent, #48624B); color: #fff; }
.wd-cover:disabled { opacity: 0.6; cursor: wait; }
@media (hover: hover) and (pointer: fine) { .detail-photo .wd-cover { opacity: 0; transition: opacity 0.2s; } .detail-photo:hover .wd-cover { opacity: 1; } }
.detail-gallery.is-album .wd-cover { bottom: 6px; left: 6px; padding: 4px 8px; font-size: 11px; }

/* ===== 收費方式重新設計（2026-10-25 使用者：跟接案流程一樣的設計）=====
   暖米底、每一項一張莫蘭迪色圓角卡（同接案流程的 6 色循環），大號碼 01／02／03 用該色深色（像流程的 A、B、C），
   項目名稱小字、金額大字；說明放半透明白圓角框；返回與預約鍵改圓角膠囊。只改樣式，內容照後台「收費方式」。 */
.section-pricing { background: #f5f2ee; }
.section-pricing .section-inner--narrow { max-width: 1080px; }
.section-pricing .section-intro { display: table; margin: 18px auto 0; padding: 12px 22px; border-radius: 16px; background: rgba(255, 255, 255, 0.7); color: #6b6661; }
.section-pricing .detail-back { border-radius: 999px; }
.pricing { margin-top: 40px; padding: 0; background: none; border: 0; text-align: left; }
.pricing dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; counter-reset: price; }
.pricing-row, .pricing-row:last-child {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px;
  padding: 26px 26px 30px; border: 0; border-radius: 22px; background: var(--tone, #ece7e1); overflow: hidden;
  counter-increment: price; min-height: 230px;
}
.pricing-row::before {
  content: counter(price, decimal-leading-zero); font-family: var(--font-display); font-weight: 300;
  font-size: 72px; line-height: 0.9; letter-spacing: -0.02em; color: var(--tone-deep, var(--accent)); margin-bottom: 6px;
}
.pricing-row::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 70% at 85% 15%, rgba(255, 255, 255, 0.55), transparent 70%); }
.pricing dt { position: relative; z-index: 1; font-size: 13px; letter-spacing: 0.16em; color: var(--tone-deep, #8d8781); font-weight: 600; }
.pricing dd { position: relative; z-index: 1; margin: 0; text-align: left; font-size: clamp(20px, 2vw, 24px); line-height: 1.55; letter-spacing: 0.04em; color: #4d4a46; font-weight: 500; }
.pricing-row:nth-child(6n+1) { --tone: #dfe5da; --tone-deep: #8fa287; }
.pricing-row:nth-child(6n+2) { --tone: #ecdfda; --tone-deep: #b58e83; }
.pricing-row:nth-child(6n+3) { --tone: #dde3e7; --tone-deep: #8798a3; }
.pricing-row:nth-child(6n+4) { --tone: #ece5da; --tone-deep: #ad9a7c; }
.pricing-row:nth-child(6n+5) { --tone: #e5e0e8; --tone-deep: #988ca3; }
.pricing-row:nth-child(6n+6) { --tone: #e4e3d6; --tone-deep: #9a9877; }
.section-pricing .detail-cta { margin-top: 36px; border: 0; padding: 0; text-align: center; }
.section-pricing .btn-solid { border-radius: 999px; padding-left: 34px; padding-right: 34px; }
@media (max-width: 520px) {
  .pricing { padding: 0; }
  .pricing-row, .pricing-row:last-child { min-height: 0; padding: 22px 22px 24px; border-radius: 18px; }
  .pricing-row::before { font-size: 56px; }
  .pricing dd { text-align: left; }
}

/* ===== 聯絡我們重新設計（2026-10-25 使用者：同接案流程／收費方式的淺色莫蘭迪＋圓角）=====
   暖米底；預約表單＝大圓角白卡、欄位圓角淺底、送出圓角膠囊；社群連結＝莫蘭迪色膠囊；APP 說明＝灰薰衣草圓角卡；
   門市＝沙米／橄欖灰圓角卡＋圓角地圖；Google 評論＝圓角白卡；Email／營業時間／統編＝半透明白圓角框。只改樣式。 */
.section-contact { background: #f5f2ee; }
.section-contact .section-intro { color: #6b6661; }
.inquiry-form { border: 0; border-radius: 28px; background: #fff; padding: 40px 40px 34px; box-shadow: 0 1px 0 rgba(77, 74, 70, 0.05), 0 18px 48px rgba(77, 74, 70, 0.07); }
.inquiry-form h3 { color: #4d4a46; }
.inquiry-note { color: #8d8781; }
.inquiry-form label { color: #8d8781; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea { border: 1px solid transparent; border-radius: 14px; background: #f6f3ef; color: #4d4a46; }
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus { border-color: #b7c4b1; background: #fff; box-shadow: 0 0 0 4px rgba(183, 196, 177, 0.35); }
.inquiry-form .btn-solid, .app-note .btn-solid { border-radius: 999px; padding-left: 36px; padding-right: 36px; }
.inquiry-hint { text-align: center; }
.social-row .social-link { border: 0; color: #4d4a46; background: #e8e3dc; }
.social-row .social-link:nth-child(6n+1) { background: #dfe5da; }
.social-row .social-link:nth-child(6n+2) { background: #ecdfda; }
.social-row .social-link:nth-child(6n+3) { background: #dde3e7; }
.social-row .social-link:hover { color: #4d4a46; filter: brightness(0.96); }
.app-note { border: 0; border-radius: 22px; background: #e5e0e8; }
.stores-grid { gap: 16px; background: none; border: 0; }
.store-card { border-radius: 22px; padding: 28px 28px 24px; background: #ece5da; overflow: hidden; }
.store-card:nth-child(2n) { background: #e4e3d6; }
.store-card:hover { box-shadow: none; }
.store-card h3 { color: #4d4a46; font-size: 16px; }
.store-card p { color: #6b6661; }
.store-card a { color: #4d4a46; text-decoration: underline; text-decoration-color: rgba(77, 74, 70, 0.3); text-underline-offset: 4px; }
.store-review { border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.6); text-decoration: none; }
.store-review:hover { background: #fff; }
.store-map { border-radius: 16px; filter: grayscale(0.35) sepia(0.08); }
.reviews .rv-card { border: 0; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(77, 74, 70, 0.06); }
.contact-meta { display: table; margin: 8px auto 0; padding: 16px 28px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); color: #6b6661; }
.contact-meta a { color: #4d4a46; }
@media (max-width: 520px) {
  .inquiry-form { padding: 28px 18px 24px; border-radius: 22px; }
  .store-card { padding: 22px 18px 18px; border-radius: 18px; }
  .contact-meta { display: block; padding: 14px 18px; }
}

/* ===== 關於我們重新設計（2026-10-25 使用者：太單調，要跟接案流程一樣的設計與美術）=====
   內容照後台「關於綠屋」的段落，只改樣式：第一段（品牌故事）放進鼠尾草綠「拱窗」形大圓角面板＋大引號；
   其餘段落＝灰玫瑰／霧藍／沙米圓角色卡，大號碼 02／03／04（同收費方式）；背景兩團柔焦莫蘭迪色塊增加層次。
   電腦兩欄（拱窗在左、色卡在右疊放），手機單欄。 */
.section-about { position: relative; overflow: hidden; background: #f5f2ee; isolation: isolate; }
.section-about::before, .section-about::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.section-about::before { width: 520px; height: 520px; left: -160px; top: 8%; background: rgba(183, 196, 177, 0.45); }
.section-about::after { width: 460px; height: 460px; right: -140px; bottom: 4%; background: rgba(217, 194, 186, 0.45); }
.section-about .section-inner--narrow { max-width: 1120px; }
.about-body { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; text-align: left; counter-reset: about; font-size: 15.5px; line-height: 1.95; color: #5a5652; }
.about-body p { position: relative; margin: 0; padding: 28px 28px 30px; border-radius: 22px; background: var(--tone, #ece7e1); counter-increment: about; overflow: hidden; }
.about-body p::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 70% at 85% 15%, rgba(255, 255, 255, 0.5), transparent 70%); }
.about-body p:not(:first-child)::before { content: counter(about, decimal-leading-zero); display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-weight: 300; font-size: 52px; line-height: 0.9; letter-spacing: -0.02em; color: var(--tone-deep); }
/* 第一段：拱窗面板＋大引號 */
.about-body p:first-child { --tone: #dfe5da; --tone-deep: #8fa287; padding: 96px 34px 40px; border-radius: 200px 200px 26px 26px; font-size: clamp(17px, 1.6vw, 20px); line-height: 2; color: #4d4a46; }
.about-body p:first-child::before { content: '\201C'; position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif; font-size: 96px; line-height: 1; color: var(--tone-deep); opacity: 0.55; }
.about-body p:first-child { box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.35); } /* 拱窗內框 */
.about-body p:nth-child(4n+2) { --tone: #ecdfda; --tone-deep: #b58e83; }
.about-body p:nth-child(4n+3) { --tone: #dde3e7; --tone-deep: #8798a3; }
.about-body p:nth-child(4n+4) { --tone: #ece5da; --tone-deep: #ad9a7c; }
.about-body p:nth-child(4n+5) { --tone: #e5e0e8; --tone-deep: #988ca3; }
@media (min-width: 861px) {
  .about-body { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 18px 22px; align-items: stretch; }
  .about-body p:first-child { grid-row: 1 / span 3; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 120px 48px 56px; border-radius: 280px 280px 28px 28px; }
}
@media (max-width: 520px) {
  .about-body p { padding: 22px 20px 24px; border-radius: 18px; }
  .about-body p:first-child { padding: 84px 22px 30px; border-radius: 160px 160px 20px 20px; }
  .about-body p:not(:first-child)::before { font-size: 44px; }
}
/* 首頁相框改固定 16:9（site.js fitHero，2026-10-25）：取代同日稍早「依照片比例調寬」，照片 cover 上下裁切 */

/* 「真實＋擺飾＋傢俱（無植物）」鍵（2026-10-25）：莫蘭迪灰褐，跟有綠植的琥珀色、夜晚的深藍分開 */
.ai-all--bothnp { background: #7d6f5c; }
.ai-photo-bar .ai-bothnp-btn, .pv-ai-btns .ai-bothnp-btn { background: rgba(125, 111, 92, 0.92); color: #fff; }

/* ===== 2026-10-25 使用者：首頁播放照片四角倒圓角、作品誌也要；常見問題重新設計跟關於我們一樣（莫蘭迪＋圓角＋美術） ===== */
/* 首頁輪播相框圓角（單張大圖模式 .hero::before 也一樣）；左下標題的深色漸層下緣跟著圓 */
.hero-slides, .hero::before { border-radius: var(--r-photo, 22px); overflow: hidden; }
.hero .hero-caption { border-radius: 0 0 var(--r-photo, 22px) var(--r-photo, 22px); overflow: hidden; }
@keyframes heroWipe { from { clip-path: inset(0 100% 0 0 round var(--r-photo, 22px)); } to { clip-path: inset(0 0 0 0 round var(--r-photo, 22px)); } }

/* 作品誌：雜誌封面、跨頁、首頁大封面全部圓角 */
.mag { border-radius: 18px; overflow: hidden; }
.jr-spread { border-radius: 22px; overflow: hidden; }
.jr-feature-cover .mag { border-radius: 22px; }

/* 常見問題：同關於我們——暖米底＋柔焦莫蘭迪色塊；每一題一張圓角色卡（6 色循環），大號碼 01／02…、
   右側圓形白鈕 ＋／－，展開的答案放半透明白圓角框 */
.section-qa { position: relative; overflow: hidden; background: #f5f2ee; isolation: isolate; }
.section-qa::before, .section-qa::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.section-qa::before { width: 480px; height: 480px; right: -150px; top: 6%; background: rgba(185, 197, 204, 0.5); }
.section-qa::after { width: 440px; height: 440px; left: -140px; bottom: 6%; background: rgba(220, 207, 190, 0.55); }
.section-qa .section-inner--narrow { max-width: 900px; }
.qa-list { gap: 12px; counter-reset: qa; }
.qa-item, .qa-item:first-child { border: 0; padding: 0; border-radius: 20px; background: var(--tone, #ece7e1); counter-increment: qa; overflow: hidden; transition: box-shadow 0.3s ease; }
.qa-item[open] { box-shadow: 0 12px 32px rgba(77, 74, 70, 0.08); }
.qa-item:nth-child(6n+1) { --tone: #dfe5da; --tone-deep: #8fa287; }
.qa-item:nth-child(6n+2) { --tone: #ecdfda; --tone-deep: #b58e83; }
.qa-item:nth-child(6n+3) { --tone: #dde3e7; --tone-deep: #8798a3; }
.qa-item:nth-child(6n+4) { --tone: #ece5da; --tone-deep: #ad9a7c; }
.qa-item:nth-child(6n+5) { --tone: #e5e0e8; --tone-deep: #988ca3; }
.qa-item:nth-child(6n+6) { --tone: #e4e3d6; --tone-deep: #9a9877; }
.qa-item summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 18px 18px 22px; color: #4d4a46; font-size: 16px; line-height: 1.6; }
.qa-item summary::before { content: counter(qa, decimal-leading-zero); font-family: var(--font-display); font-weight: 300; font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: var(--tone-deep, var(--accent)); min-width: 1.6em; }
.qa-item summary::after { position: static; margin-left: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); color: var(--tone-deep, var(--accent)); display: grid; place-items: center; font-size: 20px; line-height: 1; transform: none; flex: none; }
.qa-item[open] summary::after { transform: none; background: #fff; }
.qa-item summary:hover::after { color: var(--tone-deep, var(--accent)); background: #fff; }
.qa-answer { margin: 0 14px 14px; padding: 16px 20px 6px; border-radius: 16px; background: rgba(255, 255, 255, 0.6); color: #5a5652; font-size: 14.5px; line-height: 1.95; }
@media (max-width: 520px) {
  .qa-item, .qa-item:first-child { border-radius: 16px; }
  .qa-item summary { gap: 12px; padding: 14px 12px 14px 16px; font-size: 15px; }
  .qa-item summary::before { font-size: 26px; }
  .qa-item summary::after { width: 32px; height: 32px; font-size: 18px; }
  .qa-answer { margin: 0 10px 10px; padding: 14px 16px 4px; }
}

/* 自訂提示詞（2026-10-25）：照片上「✎ 提示詞」鍵＋輸入視窗（四種生成鍵配色同工具列） */
.ai-photo-bar .ai-prompt-btn, .pv-ai-btns .ai-prompt-btn { background: rgba(255, 255, 255, 0.92); color: #4d4a46; }
.ai-prompt { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.45); }
.ai-prompt-box { width: min(560px, 100%); padding: 20px 20px 18px; border-radius: 22px; background: #f5f2ee; color: #4d4a46; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); }
.ai-prompt-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ai-prompt-top strong { font-size: 17px; letter-spacing: 0.12em; font-weight: 500; }
.ai-prompt-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: #4d4a46; font-size: 20px; cursor: pointer; }
.ai-prompt textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; background: #fff; font: inherit; font-size: 16px; line-height: 1.7; color: #4d4a46; resize: vertical; }
.ai-prompt textarea:focus { outline: none; border-color: #b7c4b1; box-shadow: 0 0 0 4px rgba(183, 196, 177, 0.35); }
.ai-prompt-count { margin: 6px 2px 12px; text-align: right; font-size: 12px; color: #8d8781; }
.ai-prompt-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-prompt-go { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 999px; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.ai-prompt-go--both { background: #9a6a00; }
.ai-prompt-go--bothnp { background: #7d6f5c; }
.ai-prompt-go--nightboth, .ai-prompt-go--cctnight { background: #1f2a44; }
@media (max-width: 420px) { .ai-prompt-kinds { grid-template-columns: 1fr; } }

/* ===== 2026-10-25 使用者：作品誌併入一頁式（首頁往下捲到 作品集 → 作品誌 → 常見問題）、19 期、色彩比照常見問題 =====
   /journal 網址也是同一頁（落在作品誌）；封面照片改 <img loading=lazy>，首頁不會一次載 19 張大圖。
   莫蘭迪 6 色（同常見問題 .qa-item）：每期 .jr-t1～6 帶 --tone／--tone-deep，紙本封面底色、跨頁、引言卡、目錄號碼跟著變。 */
body[data-active-section="page"] main > #journal { display: block; }
@media (min-width: 861px) {
  body[data-spy="journal"] .main-nav a[data-section="journal"] { color: var(--ink-faint); }
  body[data-spy="journal"] .main-nav a[data-section="journal"]::before { height: 2px; background: var(--accent); }
}
.mag-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-photo { z-index: 0; }
.mag-photo::after { content: ''; position: absolute; inset: 0; box-shadow: inherit; pointer-events: none; }
.jr-t1 { --tone: #dfe5da; --tone-deep: #8fa287; }
.jr-t2 { --tone: #ecdfda; --tone-deep: #b58e83; }
.jr-t3 { --tone: #dde3e7; --tone-deep: #8798a3; }
.jr-t4 { --tone: #ece5da; --tone-deep: #ad9a7c; }
.jr-t5 { --tone: #e5e0e8; --tone-deep: #988ca3; }
.jr-t6 { --tone: #e4e3d6; --tone-deep: #9a9877; }

.section-journal { position: relative; overflow: hidden; background: #f5f2ee; isolation: isolate; }
.section-journal::before, .section-journal::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.section-journal::before { width: 520px; height: 520px; left: -170px; top: 4%; background: rgba(214, 222, 208, 0.6); }
.section-journal::after { width: 480px; height: 480px; right: -160px; bottom: 8%; background: rgba(229, 224, 232, 0.7); }
.section-journal .jr-kicker { color: #8fa287; }

/* 紙本封面（E、F 版）底色＝該期莫蘭迪色，期數／英文副標＝深一階 */
.mag--e, .mag--f { background: var(--tone, #f3f1ec); }
.mag--e .mag-num { color: var(--tone-deep, var(--accent)); }
.mag--f .mag-en { color: var(--tone-deep, var(--accent)); }
.mag { box-shadow: 0 1px 2px rgba(77, 74, 70, 0.08), 10px 16px 30px rgba(77, 74, 70, 0.14); }

/* 目錄：半透明白圓角卡，號碼依每期色，滑過整列上色 */
.jr-toc { padding: clamp(18px, 2.4vw, 30px); border-radius: 22px; background: rgba(255, 255, 255, 0.6); }
.jr-toc ol { border-top: 0; display: grid; gap: 4px; }
.jr-toc li a { padding: 8px 12px; border-bottom: 0; border-radius: 14px; }
.jr-toc li:nth-child(6n+1) { --tone: #dfe5da; --tone-deep: #8fa287; }
.jr-toc li:nth-child(6n+2) { --tone: #ecdfda; --tone-deep: #b58e83; }
.jr-toc li:nth-child(6n+3) { --tone: #dde3e7; --tone-deep: #8798a3; }
.jr-toc li:nth-child(6n+4) { --tone: #ece5da; --tone-deep: #ad9a7c; }
.jr-toc li:nth-child(6n+5) { --tone: #e5e0e8; --tone-deep: #988ca3; }
.jr-toc li:nth-child(6n+6) { --tone: #e4e3d6; --tone-deep: #9a9877; }
.jr-toc .toc-no { color: var(--tone-deep); font-size: 22px; }
.jr-toc .toc-t b { font-size: 15px; color: #4d4a46; }
.jr-toc .toc-t em { font-size: 14px; }
.jr-toc li a:hover { padding-left: 18px; background: var(--tone); color: #4d4a46; }

/* 跨頁、引言、編者的話：圓角色卡 */
.jr-spread { background: var(--tone, #f3f1ec); box-shadow: 0 12px 32px rgba(77, 74, 70, 0.08); }
.jr-page { border-left: 0; }
.jr-spread .jr-en, .jr-spread .jr-kicker { color: var(--tone-deep); }
.jr-quote { padding: clamp(22px, 2.6vw, 36px); border-radius: 22px; background: var(--tone); }
.jr-quote .jr-qmark { color: var(--tone-deep); opacity: 0.8; }
.jr-quote p { color: #4d4a46; }
.jr-quote--end { grid-column: 7 / span 5; align-self: end; margin-bottom: clamp(20px, 4vw, 60px); }
.jr-note { padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: #dfe5da; align-self: center; }
.jr-note .jr-kicker { color: #6f8268; }
.jr-stagger-1 + .jr-note { grid-column: 9 / span 4; } /* 最後一組只有兩期：編者的話補在第三格 */
@media (max-width: 1100px) {
  .jr-grid > .jr-quote--end, .jr-grid > .jr-note { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) {
  .jr-grid > .jr-quote--end, .jr-grid > .jr-note { grid-column: auto !important; margin-bottom: 0; }
  .jr-toc { padding: 12px; border-radius: 18px; }
  .jr-spread, .jr-quote, .jr-note { border-radius: 18px; }
}
/* 19 期目錄：每期一行（中文＋英文同一行），大封面跟目錄上緣對齊、捲動時封面黏著 */
.section-journal .jr-feature { align-items: start; }
.section-journal .jr-feature-cover { position: sticky; top: calc(var(--header-total, 72px) + 24px); }
.jr-toc li a { padding: 6px 12px; align-items: center; }
.jr-toc .toc-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-toc .toc-t b { display: inline; margin-right: 10px; }
@media (max-width: 1100px) { .section-journal .jr-feature-cover { position: static; } }
@media (max-width: 600px) { .jr-toc .toc-t em { display: none; } .jr-toc .toc-date { font-size: 10px; letter-spacing: 0.12em; } }

/* 2026-10-25 使用者：作品上方 AI 工具列也可以寫提示詞（一鍵全部套用同一段提示詞）——白底細框，跟生成鍵區分 */
.ai-all.ai-all--prompt { background: #fff; color: #4d4a46; box-shadow: inset 0 0 0 1px #cfc8bd; }
.ai-all.ai-all--prompt:hover { background: #f5f2ee; }
.ai-all.ai-all--prompt:disabled { opacity: 0.5; cursor: default; }

/* ===== 2026-10-25 使用者：接案流程網頁及手機都不要 A～K 清單，只留大卡片簡報 =====
   清單 .flow-list 一律隱藏（上面 @media all）；手機（≤860）用同一個簡報：左右滑動或按箭頭／字母換步驟（site.js 已有 touch 滑動）。 */
.section-flows .flow-list { display: none !important; }
@media (max-width: 860px) {
  #flows .flow-deck { margin: 0 12px; border-radius: 22px; }
  #flows .deck-stage { height: auto; min-height: 400px; height: 62svh; max-height: 560px; margin: 10px 10px 0; border-radius: 18px; }
  #flows .deck-slide { padding: 22px 20px 24px; border-radius: 18px; }
  #flows .deck-bgcode { font-size: min(70vw, 360px); right: -4%; }
  #flows .deck-label { font-size: 11px; letter-spacing: 0.4em; }
  #flows .deck-slide.is-active .deck-label::after { width: 56px; }
  #flows .deck-code { font-size: min(32vw, 150px); }
  #flows .deck-copy { left: 20px; right: 20px; bottom: 24px; gap: 12px; }
  #flows .deck-text { font-size: clamp(21px, 6vw, 28px); line-height: 1.5; }
  #flows .deck-desc { font-size: 14px; line-height: 1.85; padding: 12px 14px; border-radius: 14px; }
  #flows .deck-wipe { border-radius: 18px; }
  #flows .deck-wipe::after { font-size: min(60vw, 260px); }
  #flows .deck-bar { gap: 14px; padding: 14px 16px 10px; }
  #flows .deck-roll { font-size: 30px; }
  #flows .deck-count { font-size: 12px; gap: 6px; letter-spacing: 0.12em; }
  #flows .deck-arrows { gap: 8px; }
  #flows .deck-arrow { width: 44px; height: 44px; font-size: 18px; }
  #flows .deck-rail { justify-content: flex-start; gap: 2px; padding: 0 10px 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #flows .deck-rail::-webkit-scrollbar { display: none; }
  #flows .deck-dot { width: 40px; height: 40px; font-size: 15px; }
  #flows .deck-dot.is-active { transform: none; }
}
.section-flows .flow-more { display: none !important; } /* 清單拿掉了，手機「展開全部 N 個步驟」鈕（mobile-fx.js）也不顯示 */

/* 2026-10-25 使用者：接案流程大卡片背景的空心線條字改成每一步說明的第一個中文字（render.js deck-bgcode--zh）——
   中文字是方的、比英文字母寬，用細明體空心線、尺寸比字母小一點 */
.deck-bgcode.deck-bgcode--zh { font-family: "Noto Serif TC", serif; font-weight: 300; line-height: 1; font-size: clamp(300px, 60vh, 580px); right: 2%; }
@media (max-width: 860px) { #flows .deck-bgcode.deck-bgcode--zh { font-size: min(58vw, 280px); right: 3%; top: 46%; } }

/* 2026-10-25 使用者：手機滑到接案流程大卡片時右側浮動連結不顯示（怕擋到左右箭頭），site.js 加 is-deck-away */
@media (max-width: 860px) { .float-actions.is-deck-away { transform: translateX(80px); opacity: 0; pointer-events: none; } }

/* 2026-10-25 使用者：電腦版作品誌目錄只列最新 14 期、跟左邊大封面同高；滑過的效果重做——
   整份目錄滑入時其他列淡出、滑到的那列上該期色＋右側箭頭取代日期，左邊大封面同步換成那一期（site.js jrPeek） */
@media (min-width: 1101px) {
  .section-journal .jr-feature { align-items: stretch; }
  .section-journal .jr-toc { display: flex; flex-direction: column; }
  .section-journal .jr-toc ol { flex: 1; grid-auto-rows: 1fr; gap: 2px; }
  .section-journal .jr-toc li { display: flex; }
  .section-journal .jr-toc li a { flex: 1; position: relative; transition: opacity .3s, background-color .3s, padding .35s var(--ease-reveal), color .25s; }
  .section-journal .jr-toc ol:hover li a { opacity: .42; }
  .section-journal .jr-toc ol:hover li a:hover { opacity: 1; }
  .section-journal .jr-toc .toc-no { transition: transform .35s var(--ease-reveal); }
  .section-journal .jr-toc li a:hover .toc-no { transform: scale(1.18); }
  .section-journal .jr-toc .toc-date { transition: opacity .25s, transform .35s var(--ease-reveal); }
  .section-journal .jr-toc .toc-go { position: absolute; right: 16px; top: 50%; font-style: normal; color: var(--tone-deep); font-size: 18px; opacity: 0; transform: translate(-10px, -50%); transition: opacity .25s, transform .35s var(--ease-reveal); }
  .section-journal .jr-toc li a:hover .toc-date { opacity: 0; transform: translateX(-12px); }
  .section-journal .jr-toc li a:hover .toc-go { opacity: 1; transform: translate(0, -50%); }
  .jr-feature-cover .mag .mag-photo img, .jr-feature-cover .mag .mag-head, .jr-feature-cover .mag .mag-num { transition: opacity .28s ease; }
  .jr-feature-cover .mag.is-swapping .mag-photo img, .jr-feature-cover .mag.is-swapping .mag-head, .jr-feature-cover .mag.is-swapping .mag-num { opacity: 0; }
  .jr-feature-cover .mag.is-peek .mag-lead, .jr-feature-cover .mag.is-peek .mag-feats { display: none; }
}
.jr-toc .toc-go { display: none; }
@media (min-width: 1101px) { .section-journal .jr-toc .toc-go { display: block; } }

/* =========================================================
   2026-10-25 使用者：頂部「聯絡我們／APP 下載」與線上諮詢表單改莫蘭迪色；
   電腦版表單加寬（左側色塊說明＋右側三個分色區塊），加地址欄（public/js/inquiry-address.js）
   色票沿用作品誌目錄那組：鼠尾草綠 #8fa287／乾燥玫瑰 #b58e83／霧藍 #8798a3／奶茶 #ad9a7c
   ========================================================= */
.site-header .main-nav a.nav-cta { background: #8fa287; box-shadow: 0 6px 16px rgba(143, 162, 135, 0.35); }
.site-header .main-nav a.nav-cta:hover { background: #7b8f74; }
.site-header .main-nav a.nav-app { background: #ecdfda; border-color: #d9c3ba; color: #8a675d; }
.site-header .main-nav a.nav-app:hover { background: #b58e83; border-color: #b58e83; color: #fff; }

.inquiry-form { max-width: 1180px; padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr; background: #fbfaf8; }
@media (min-width: 960px) { .inquiry-form { grid-template-columns: minmax(300px, 33%) minmax(0, 1fr); } }
.inq-side { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 52px) clamp(22px, 3.4vw, 44px); background: linear-gradient(160deg, #94a68c 0%, #7f9379 100%); color: #fff; }
.inq-side::before { content: ''; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(236, 223, 218, 0.28); }
.inq-side::after { content: ''; position: absolute; left: -60px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; background: rgba(221, 227, 231, 0.22); }
.inq-side > * { position: relative; z-index: 1; }
.inq-kicker { display: block; font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); margin-bottom: 14px; }
.inquiry-form .inq-side h3 { text-align: left; color: #fff; font-size: clamp(20px, 2vw, 26px); letter-spacing: 0.14em; line-height: 1.5; }
.inq-side .inquiry-note { text-align: left; color: rgba(255, 255, 255, 0.88); font-size: 14.5px; line-height: 1.9; margin: 12px 0 28px; }
.inq-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.inq-steps li { display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.95); }
.inq-steps b { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: "Jost", sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.06em; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.4); }
.inq-main { padding: clamp(20px, 3.2vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.inq-group { margin: 0; border: 0; min-width: 0; padding: 20px 22px 22px; border-radius: 20px; background: var(--inq-tone); }
.inq-g1 { --inq-tone: #e4e9e0; --inq-deep: #7f9379; }
.inq-g2 { --inq-tone: #e3e8eb; --inq-deep: #7d8f9b; }
.inq-g3 { --inq-tone: #efe9e0; --inq-deep: #a08d70; }
.inq-group legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font-family: "Noto Serif TC", serif; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; color: #4d4a46; }
.inq-group legend i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: "Jost", sans-serif; font-size: 13px; color: #fff; background: var(--inq-deep); }
.inq-group legend small { font-family: inherit; font-size: 12.5px; font-weight: 400; letter-spacing: 0.06em; color: #8d8781; }
.inq-group .inquiry-grid { clear: both; gap: 14px 16px; }
.inquiry-form .inq-group label { color: #6f6a64; font-size: 13px; }
.inquiry-form .inq-group input, .inquiry-form .inq-group select, .inquiry-form .inq-group textarea { background: #fff; border: 1px solid rgba(77, 74, 70, 0.08); border-radius: 12px; font-size: 15px; }
.inquiry-form .inq-group input:focus, .inquiry-form .inq-group select:focus, .inquiry-form .inq-group textarea:focus { border-color: var(--inq-deep); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7); }
.inq-credit { margin: 10px 2px 0; font-size: 11px; color: #9a948d; }
.inq-main .inquiry-hint { margin: 4px 0 0; }
.inq-main .btn-solid { background: #8fa287; border-color: #8fa287; min-width: 220px; box-shadow: 0 10px 24px rgba(143, 162, 135, 0.35); }
.inq-main .btn-solid:hover { background: #7b8f74; border-color: #7b8f74; }
.inq-main .inquiry-status { margin-top: 0; }
@media (min-width: 960px) {
  .inq-g2 .inquiry-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 959px) {
  .inq-steps { gap: 10px; }
  .inq-steps b { width: 32px; height: 32px; }
}
@media (max-width: 600px) {
  .inquiry-form { padding: 0; }
  .inq-group { padding: 16px 14px 18px; border-radius: 16px; }
  .inq-main { padding: 14px 12px 22px; gap: 12px; }
}

/* 2026-10-25 使用者：「聯絡我們」「APP 下載」兩顆一樣大、一樣高（電腦版 >1000px；860～1000 的 APP 只留圖示不在此限） */
@media (min-width: 1001px) {
  .site-header .main-nav a.nav-cta.nav-cta, .site-header .main-nav a.nav-app.nav-app {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 132px; height: 46px; padding: 0; align-self: center;
    border: 1px solid transparent; border-radius: 999px;
    font-size: 14px; font-weight: 600; letter-spacing: 0.08em; line-height: 1;
  }
  .site-header .main-nav a.nav-cta.nav-cta { border-color: #8fa287; }
  .site-header .main-nav a.nav-cta.nav-cta:hover { border-color: #7b8f74; }
  .site-header .main-nav a.nav-app.nav-app { border-color: #d9c3ba; }
  .site-header .main-nav a.nav-app.nav-app:hover { border-color: #b58e83; }
}

/* 2026-10-25 使用者：①「聯絡我們」字體要跟網站導覽一樣（原本 600 粗體，跟導覽 400 細字不一致）——兩顆按鈕一起改成導覽同字重、字級、字距
   ② 作品集／品牌下拉：滑鼠移過去慢慢以半透明毛玻璃淡入，項目逐一浮現
   ③ FAQ 右邊多一個「Estimate／粗估試算」（樣式同其他導覽字，滑過英文換中文） */
@media (min-width: 1001px) {
  .site-header .main-nav a.nav-cta.nav-cta, .site-header .main-nav a.nav-app.nav-app { font-family: inherit; font-size: 15px; font-weight: 400; letter-spacing: 0.1em; }
}
@media (min-width: 861px) and (hover: hover) {
  .site-header .brand-dropdown, .site-header .nav-item-menu .nav-dropdown {
    background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    transition: opacity 0.6s ease, transform 0.6s var(--ease-reveal), visibility 0.6s;
  }
  .site-header .brand-dropdown a, .site-header .nav-item-menu .nav-dropdown a { opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s var(--ease-reveal), background 0.3s, color 0.3s, padding 0.3s var(--ease-reveal); }
  .site-header .brand-menu:hover .brand-dropdown a, .site-header .brand-menu:focus-within .brand-dropdown a,
  .site-header .nav-item-menu:hover .nav-dropdown a, .site-header .nav-item-menu:focus-within .nav-dropdown a { opacity: 1; transform: none; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(1) { transition-delay: 0.08s, 0.08s, 0s, 0s, 0s; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(2) { transition-delay: 0.13s, 0.13s, 0s, 0s, 0s; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(3) { transition-delay: 0.18s, 0.18s, 0s, 0s, 0s; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(4) { transition-delay: 0.23s, 0.23s, 0s, 0s, 0s; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(5) { transition-delay: 0.28s, 0.28s, 0s, 0s, 0s; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(6) { transition-delay: 0.33s, 0.33s, 0s, 0s, 0s; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(7) { transition-delay: 0.38s, 0.38s, 0s, 0s, 0s; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(8) { transition-delay: 0.43s, 0.43s, 0s, 0s, 0s; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(n+9) { transition-delay: 0.48s, 0.48s, 0s, 0s, 0s; }
  .site-header .brand-dropdown a:hover, .site-header .nav-item-menu .nav-dropdown a:hover { background: rgba(255, 255, 255, 0.75); }
}
@media (min-width: 861px) and (max-width: 1180px) { .site-header .main-nav { gap: 20px; } }

/* 2026-10-25 使用者：「聯絡我們」改成跟關於我們拱形一樣的淡綠；右側浮動按鈕、下拉選單都用接案流程（#flows）那組莫蘭迪色
   淡色：#dfe5da 綠／#ecdfda 玫瑰／#dde3e7 霧藍／#ece5da 奶茶／#e5e0e8 藕紫／#e4e3d6 橄欖；深色同序：#8fa287／#b58e83／#8798a3／#ad9a7c／#988ca3／#9a9877 */
.site-header .main-nav a.nav-cta.nav-cta { background: #dfe5da; border-color: #dfe5da; color: #5f7358 !important; box-shadow: none; }
.site-header .main-nav a.nav-cta.nav-cta:hover { background: #8fa287; border-color: #8fa287; color: #fff !important; }

/* 右側浮動按鈕：各用一個流程深色，外圈一圈同色系淡色 */
.float-btn { background: var(--fb, #8fa287); box-shadow: 0 0 0 3px var(--fb-tone, #dfe5da), 0 8px 20px rgba(77, 74, 70, 0.18); }
.float-btn:hover { background: var(--fb, #8fa287); filter: brightness(0.93); box-shadow: 0 0 0 3px var(--fb-tone, #dfe5da), 0 12px 26px rgba(77, 74, 70, 0.24); }
.float-instagram { --fb: #b58e83; --fb-tone: #ecdfda; }
.float-threads { --fb: #988ca3; --fb-tone: #e5e0e8; }
.float-facebook { --fb: #8798a3; --fb-tone: #dde3e7; }
.float-youtube { --fb: #ad9a7c; --fb-tone: #ece5da; }
.float-btn.float-line { --fb: #8fa287; --fb-tone: #dfe5da; --line-tone: #8fa287; background: #8fa287; }
.float-btn.float-line:hover { --line-tone: #8fa287; background: #8fa287; }
.float-consult, .float-consult:hover { --fb: #9a9877; --fb-tone: #e4e3d6; background: #9a9877; }

/* 下拉選單：每一列用流程的淡色當底、編號用同色深色，滑過加深 */
@media (min-width: 861px) {
  .site-header .brand-dropdown, .site-header .nav-item-menu .nav-dropdown { border-top-color: #8fa287; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a { margin-bottom: 4px; border-radius: 12px; background: var(--dd-tone); }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(6n+1) { --dd-tone: rgba(223, 229, 218, 0.85); --dd-deep: #8fa287; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(6n+2) { --dd-tone: rgba(236, 223, 218, 0.85); --dd-deep: #b58e83; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(6n+3) { --dd-tone: rgba(221, 227, 231, 0.85); --dd-deep: #8798a3; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(6n+4) { --dd-tone: rgba(236, 229, 218, 0.85); --dd-deep: #ad9a7c; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(6n+5) { --dd-tone: rgba(229, 224, 232, 0.85); --dd-deep: #988ca3; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a:nth-child(6n+6) { --dd-tone: rgba(228, 227, 214, 0.85); --dd-deep: #9a9877; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a .dd-num { color: var(--dd-deep); font-weight: 500; }
  .site-header :is(.brand-dropdown, .nav-dropdown) a::before { background: var(--dd-deep); }
  .site-header .brand-dropdown a:hover, .site-header .nav-item-menu .nav-dropdown a:hover { background: var(--dd-tone); filter: saturate(1.4) brightness(0.97); color: #4d4a46; }
  .site-header a:hover > .dd-num, .site-header a:hover > .dd-en { color: var(--dd-deep); }
  .site-header .nav-item-menu .nav-dropdown .nav-dropdown-all { margin: 6px 0 0; border-top: 0; border-radius: 12px; background: #8fa287; color: #fff !important; justify-content: center; }
  .site-header .nav-item-menu .nav-dropdown .nav-dropdown-all:hover { background: #7b8f74; color: #fff !important; filter: none; }
  .site-header .nav-item-menu .nav-dropdown .nav-dropdown-all::before { display: none; }
}

/* 2026-10-25 使用者：浮動按鈕平常是莫蘭迪色，滑鼠移過去（電腦）／手指按下去（手機，site.js 加 .is-press）變回各平台正常品牌色 */
@media (hover: hover) {
  .float-instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); filter: none; }
  .float-threads:hover { background: #000; filter: none; }
  .float-facebook:hover { background: #1877F2; filter: none; }
  .float-youtube:hover { background: #FF0000; filter: none; }
  .float-btn.float-line:hover { --line-tone: #06C755; background: #06C755; filter: none; }
  .float-consult:hover { background: var(--accent); filter: none; }
}
.float-instagram.is-press, .float-instagram:active { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); filter: none; }
.float-threads.is-press, .float-threads:active { background: #000; filter: none; }
.float-facebook.is-press, .float-facebook:active { background: #1877F2; filter: none; }
.float-youtube.is-press, .float-youtube:active { background: #FF0000; filter: none; }
.float-btn.float-line.is-press, .float-btn.float-line:active { --line-tone: #06C755; background: #06C755; filter: none; }
.float-consult.is-press, .float-consult:active { background: var(--accent); filter: none; }
.float-btn { transition: transform 0.2s, box-shadow 0.2s, background-color 0.25s, filter 0.25s; -webkit-tap-highlight-color: transparent; }

/* 2026-10-25 使用者：客戶好評也要有色彩——卡片輪流用接案流程六種淡色、右上大引號與分隔線用對應深色、頭像白框 */
.reviews .rv-card { position: relative; overflow: hidden; background: var(--rv-tone, #dfe5da); box-shadow: 0 10px 26px rgba(77, 74, 70, 0.07); transition: transform 0.35s var(--ease-reveal), box-shadow 0.35s; }
.reviews .rv-card:nth-child(6n+1) { --rv-tone: #dfe5da; --rv-deep: #8fa287; }
.reviews .rv-card:nth-child(6n+2) { --rv-tone: #ecdfda; --rv-deep: #b58e83; }
.reviews .rv-card:nth-child(6n+3) { --rv-tone: #dde3e7; --rv-deep: #8798a3; }
.reviews .rv-card:nth-child(6n+4) { --rv-tone: #ece5da; --rv-deep: #ad9a7c; }
.reviews .rv-card:nth-child(6n+5) { --rv-tone: #e5e0e8; --rv-deep: #988ca3; }
.reviews .rv-card:nth-child(6n+6) { --rv-tone: #e4e3d6; --rv-deep: #9a9877; }
.reviews .rv-card::before { content: '\201C'; position: absolute; right: 20px; top: 2px; font-family: Georgia, serif; font-size: 96px; line-height: 1; color: var(--rv-deep); opacity: 0.28; pointer-events: none; }
.reviews .rv-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(77, 74, 70, 0.12); }
.reviews .rv-head { padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--rv-deep) 30%, transparent); }
.reviews .rv-avatar { box-shadow: 0 0 0 3px #fff; }
.reviews .rv-who small { color: var(--rv-deep); }
.reviews .rv-text { color: #5c5852; }
.reviews .rv-more a { color: #7b8f74; }

/* =========================================================
   2026-10-25 官網自己的粗估試算（public/js/estimator.js）＋收費方式按鈕／說明
   色票同接案流程：淡 #dfe5da／#ecdfda／#dde3e7／#ece5da／#e5e0e8／#e4e3d6，深 #8fa287／#b58e83／#8798a3／#ad9a7c／#988ca3／#9a9877
   ========================================================= */
.section-pricing .btn-estimate { background: #dfe5da; border-color: #dfe5da; color: #5f7358; min-width: 220px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.section-pricing .btn-estimate small { font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.75; }
.section-pricing .btn-estimate:hover { background: #8fa287; border-color: #8fa287; color: #fff; }
.pricing-note { max-width: 860px; margin: 28px auto 0; padding: 22px 28px; border-radius: 20px; background: rgba(255, 255, 255, 0.7); text-align: left; }
.pricing-note p { margin: 0; font-size: 14.5px; line-height: 1.95; color: #6b6661; letter-spacing: 0.04em; padding-left: 18px; position: relative; }
.pricing-note p + p { margin-top: 6px; }
.pricing-note p::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 7px; height: 7px; border-radius: 50%; background: #8fa287; }
.pricing-note p:nth-child(2)::before { background: #b58e83; }
.pricing-note p:nth-child(3)::before { background: #8798a3; }
.pricing-note p:nth-child(4)::before { background: #ad9a7c; }
.section-pricing .detail-cta { margin-top: 36px; }

html.est-lock, html.est-lock body { overflow: hidden; }
.est-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity 0.45s ease, visibility 0.45s; }
.est-modal.is-open { visibility: visible; opacity: 1; }
.est-backdrop { position: absolute; inset: 0; background: rgba(77, 74, 70, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.est-panel { position: relative; width: min(1040px, 100%); max-height: calc(100dvh - 40px); overflow: auto; border-radius: 28px; background: #fbfaf8; box-shadow: 0 30px 80px rgba(28, 28, 26, 0.25); transform: translateY(18px) scale(0.98); transition: transform 0.5s var(--ease-reveal); }
.est-modal.is-open .est-panel { transform: none; }
.est-close { position: absolute; right: 16px; top: 14px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: #6b6661; font-size: 24px; line-height: 1; cursor: pointer; }
.est-close:hover { background: #ecdfda; }
.est-head { padding: 34px 40px 22px; background: linear-gradient(120deg, #dfe5da 0%, #e5e0e8 55%, #ecdfda 100%); }
.est-kicker { display: block; font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: #7b8f74; margin-bottom: 8px; }
.est-head h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: 0.16em; color: #4d4a46; }
.est-head p { margin: 8px 0 0; color: #6b6661; font-size: 14px; letter-spacing: 0.04em; }
.est-body { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 26px 40px 32px; }
@media (min-width: 900px) { .est-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.est-form { display: flex; flex-direction: column; gap: 22px; }
.est-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: "Noto Serif TC", serif; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; color: #4d4a46; }
.est-label i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: "Jost", sans-serif; font-size: 13px; color: #fff; background: #8fa287; }
.est-s2 .est-label i { background: #8798a3; }
.est-s3 .est-label i { background: #b58e83; }
.est-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.est-type { padding: 14px 8px; border: 2px solid transparent; border-radius: 16px; background: var(--t); color: #4d4a46; font-size: 15px; letter-spacing: 0.06em; cursor: pointer; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.est-t1 { --t: #dfe5da; --d: #8fa287; }
.est-t2 { --t: #ece5da; --d: #ad9a7c; }
.est-t3 { --t: #ecdfda; --d: #b58e83; }
.est-type:hover { transform: translateY(-2px); }
.est-type.is-on { border-color: var(--d); box-shadow: 0 8px 20px rgba(77, 74, 70, 0.1); font-weight: 600; }
.est-ping { display: flex; align-items: center; gap: 10px; padding: 6px 18px; border-radius: 16px; background: #dde3e7; }
.est-ping input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: "Jost", sans-serif; font-size: 28px; color: #4d4a46; padding: 8px 0; outline: none; }
.est-ping span { color: #6b6661; font-size: 15px; }
.est-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.est-chips button { padding: 7px 14px; border: 1px solid #c9d1d6; border-radius: 999px; background: #fff; color: #6b6661; font-size: 13px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.est-chips button:hover { background: #8798a3; border-color: #8798a3; color: #fff; }
.est-levels { display: grid; gap: 10px; }
.est-level { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "b em" "s em"; gap: 2px 14px; align-items: center; padding: 14px 18px; border: 2px solid transparent; border-radius: 16px; background: var(--t); text-align: left; cursor: pointer; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.est-l1 { --t: #e4e3d6; --d: #9a9877; }
.est-l2 { --t: #e5e0e8; --d: #988ca3; }
.est-l3 { --t: #ecdfda; --d: #b58e83; }
.est-level b { grid-area: b; font-size: 15px; font-weight: 600; color: #4d4a46; letter-spacing: 0.06em; }
.est-level small { grid-area: s; font-size: 12.5px; color: #7a746d; line-height: 1.6; }
.est-level em { grid-area: em; font-style: normal; font-size: 13px; color: var(--d); font-weight: 600; white-space: nowrap; }
.est-level:hover { transform: translateX(3px); }
.est-level.is-on { border-color: var(--d); box-shadow: 0 8px 20px rgba(77, 74, 70, 0.1); }
.est-result { position: sticky; top: 0; padding: 26px 24px; border-radius: 22px; background: linear-gradient(160deg, #94a68c 0%, #7f9379 100%); color: #fff; }
.est-result .est-kicker { color: rgba(255, 255, 255, 0.78); }
.est-empty p { margin: 30px 0 20px; font-size: 16px; line-height: 1.9; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.08em; }
.est-total small { display: block; font-size: 13px; letter-spacing: 0.14em; opacity: 0.85; }
.est-total strong { display: block; margin: 6px 0; font-family: "Jost", "Noto Sans TC", sans-serif; font-weight: 400; font-size: clamp(26px, 3vw, 34px); letter-spacing: 0.02em; line-height: 1.25; }
.est-total span { display: block; font-size: 12.5px; opacity: 0.85; letter-spacing: 0.04em; }
.est-lines { margin: 18px 0 0; display: grid; gap: 8px; }
.est-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); }
.est-line dt { font-size: 14px; letter-spacing: 0.08em; }
.est-line dt small { display: block; font-size: 11px; opacity: 0.8; letter-spacing: 0.04em; }
.est-line dd { margin: 0; font-family: "Jost", "Noto Sans TC", sans-serif; font-size: 15px; white-space: nowrap; }
.est-note { margin: 14px 0 0; font-size: 12px; line-height: 1.8; color: rgba(255, 255, 255, 0.85); }
.est-cta { margin-top: 16px; width: 100%; padding: 13px 16px; border: 0; border-radius: 999px; background: #fff; color: #5f7358; font-size: 14.5px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: transform 0.2s, background 0.2s; }
.est-cta:hover { transform: translateY(-2px); background: #ecdfda; }
.est-admin { padding: 0 40px 28px; }
.est-admin-btn { padding: 9px 16px; border: 1px dashed #b58e83; border-radius: 999px; background: #fff; color: #8a675d; font-size: 13px; cursor: pointer; }
.est-admin-btn.est-save { border-style: solid; background: #8fa287; border-color: #8fa287; color: #fff; }
.est-admin-msg { margin-left: 10px; font-size: 13px; color: #7b8f74; }
.est-ed { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.est-ed-type { padding: 14px; border-radius: 16px; background: #f1ede7; display: grid; gap: 8px; }
.est-ed-type b { font-size: 14px; color: #4d4a46; }
.est-ed-type label { display: grid; grid-template-columns: 4.5em 1fr auto; align-items: center; gap: 6px; font-size: 12.5px; color: #6b6661; }
.est-ed-type input { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid #ddd6cc; border-radius: 8px; font-size: 14px; }
.est-ed-type small { font-size: 11px; color: #9a948d; }
.est-ed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 600px) {
  .est-modal { padding: 0; align-items: flex-end; }
  .est-panel { max-height: 94dvh; border-radius: 24px 24px 0 0; }
  .est-head { padding: 26px 20px 18px; }
  .est-body { padding: 18px 16px 24px; }
  .est-types { gap: 6px; }
  .est-type { font-size: 13.5px; padding: 12px 4px; }
  .est-result { position: static; }
  .est-admin { padding: 0 16px 20px; }
}

/* 2026-10-25 粗估試算第二版：右上「✎ 編輯價格」（管理員）、A 快速估算／B 勾選工程項目分頁、項目勾選版面 */
.est-top { position: absolute; right: 16px; top: 14px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.est-top .est-close { position: static; }
.est-edit { padding: 9px 16px; border: 1px dashed #b58e83; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #8a675d; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; }
.est-edit:hover, .est-edit.is-on { background: #b58e83; border-style: solid; color: #fff; }
.est-steps { display: flex; gap: 8px; margin-top: 16px; }
.est-steps button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.55); color: #6b6661; font-size: 14px; letter-spacing: 0.06em; cursor: pointer; transition: background 0.25s, color 0.25s; }
.est-steps button i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: "Jost", sans-serif; font-size: 12px; background: #fff; color: #8fa287; }
.est-steps button.is-on { background: #8fa287; color: #fff; }
.est-steps button.is-on i { color: #7b8f74; }
.est-next { margin-top: 16px; width: 100%; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; background: transparent; color: #fff; font-size: 14px; letter-spacing: 0.06em; cursor: pointer; transition: background 0.2s; }
.est-next:hover { background: rgba(255, 255, 255, 0.16); }
.est-next + .est-cta { margin-top: 10px; }
.est-admin-title { font-size: 13px; color: #8a675d; margin-bottom: 10px; letter-spacing: 0.04em; }
.est-admin { margin: 0 40px 28px; padding: 16px; border: 1px dashed #d9c3ba; border-radius: 18px; background: #fffaf8; }
.est-admin--items { margin: 0 0 12px; }
.est-body--items { grid-template-columns: 1fr !important; }
.est-body--items .est-form { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .est-body--items .est-form { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.est-loading { padding: 40px; text-align: center; color: #8d8781; }
.est-items { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1000px) { .est-items { grid-template-columns: 200px minmax(0, 1fr) 300px; align-items: start; } }
.est-nav { display: none; }
@media (min-width: 1000px) {
  .est-nav { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; max-height: 70vh; overflow: auto; }
  .est-result--items { position: sticky; top: 0; }
}
.est-nav b { font-size: 13px; color: #8d8781; letter-spacing: 0.14em; margin-bottom: 4px; }
.est-nav-i { display: flex; justify-content: space-between; gap: 6px; padding: 9px 12px; border: 0; border-radius: 12px; background: var(--c); color: #4d4a46; font-size: 13px; text-align: left; cursor: pointer; }
.est-nav-i em { font-style: normal; font-size: 11px; color: #8d8781; white-space: nowrap; }
.est-nav-i.has { box-shadow: inset 3px 0 0 var(--cd); }
.est-nav-i.has em { color: var(--cd); font-weight: 600; }
.est-c1 { --c: #dfe5da; --cd: #8fa287; } .est-c2 { --c: #ecdfda; --cd: #b58e83; } .est-c3 { --c: #dde3e7; --cd: #8798a3; }
.est-c4 { --c: #ece5da; --cd: #ad9a7c; } .est-c5 { --c: #e5e0e8; --cd: #988ca3; } .est-c6 { --c: #e4e3d6; --cd: #9a9877; }
.est-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.est-cat { border-radius: 16px; background: var(--c); overflow: hidden; }
.est-cat summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; }
.est-cat summary::-webkit-details-marker { display: none; }
.est-cat summary b { font-size: 15px; color: #4d4a46; letter-spacing: 0.06em; }
.est-cat summary span { font-size: 12px; color: var(--cd); font-weight: 600; }
.est-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin: 0 8px 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.55); transition: background 0.2s; }
.est-it.on { background: #fff; box-shadow: inset 3px 0 0 var(--cd); }
.est-it-l { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #4d4a46; line-height: 1.5; cursor: pointer; }
.est-it-l input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--cd); flex: none; }
.est-it-l small { display: block; font-size: 11.5px; color: #9a948d; }
.est-it-q { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #8d8781; white-space: nowrap; }
.est-it-q input { width: 64px; padding: 5px 6px; border: 1px solid #ddd6cc; border-radius: 8px; font-size: 13px; text-align: right; background: #fff; }
.est-it-q input:disabled { opacity: 0.45; }
.est-it-p { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 12px; color: #8a675d; }
.est-it-p input { width: 96px; padding: 5px 6px; border: 1px dashed #b58e83; border-radius: 8px; font-size: 13px; text-align: right; background: #fffaf8; }
@media (max-width: 600px) {
  .est-top { right: 10px; top: 10px; }
  .est-edit { padding: 7px 12px; font-size: 12px; }
  .est-steps button { font-size: 13px; padding: 7px 12px 7px 7px; }
  .est-admin { margin: 0 16px 20px; }
  .est-it { margin: 0 6px 6px; }
}
/* 2026-10-25 使用者：坪數要寫實際坪數（不含公設）——標題旁小字 */
.est-label .est-label-hint { font-family: "Noto Sans TC", sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0.04em; color: #8d8781; }

/* 2026-10-25 使用者：房子類型可以勾選、右邊卡片並排比較（快速估算） */
.est-types--multi .est-type { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.est-check { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--d); background: rgba(255, 255, 255, 0.7); position: relative; transition: background 0.2s; }
.est-type.is-on .est-check { background: var(--d); }
.est-type.is-on .est-check::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.est-cmp-hint { font-size: 12.5px; opacity: 0.88; letter-spacing: 0.04em; margin: 2px 0 12px; }
.est-cmp-card { margin-bottom: 10px; padding: 14px 16px; border-radius: 16px; background: var(--t); color: #4d4a46; box-shadow: inset 4px 0 0 var(--d); }
.est-cmp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.est-cmp-top b { font-size: 14px; letter-spacing: 0.06em; }
.est-cmp-top strong { font-family: "Jost", "Noto Sans TC", sans-serif; font-weight: 500; font-size: 20px; color: var(--d); filter: brightness(0.8); white-space: nowrap; }
.est-cmp-lines { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: #6b6661; }
/* 2026-10-25 使用者：點坪數上下鍵頁面會跳 → 拿掉瀏覽器數字框的上下小箭頭，改成自己的 − ＋ 圓鈕（estimator.js data-ping-step） */
.est-ping input[type=number] { -moz-appearance: textfield; appearance: textfield; text-align: center; }
.est-ping input[type=number]::-webkit-inner-spin-button, .est-ping input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.est-step-btn { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: #8798a3; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(77, 74, 70, 0.08); transition: background 0.2s, color 0.2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.est-step-btn:hover { background: #8798a3; color: #fff; }
.est-step-btn:active { transform: scale(0.94); }

/* ===== 2026-10-25 使用者：頂部六個導覽項目間距平均、滑過英文換中文不壓到旁邊；配色跟官網莫蘭迪一致 =====
   ① 英文、中文疊在同一個格子（grid 同一格），格寬＝兩者較寬那個 → 每項之間的 gap 一樣、切換時不跳動、底線跟著格寬
   ② 每項一個接案流程色（同序：鼠尾草／玫瑰／霧藍／沙／霧紫／卡其）：滑過＝底線畫成該色、中文用該色深字；目前區塊＝底線＋字固定該色
   （屬於「官網莫蘭迪」主題那批規則，之後做主題切換時跟頂部按鈕那幾段一起加前綴） */
.site-header .main-nav a[data-section="about"]   { --nv: #8fa287; --nv-ink: #5f7358; }
.site-header .main-nav a[data-section="flows"]   { --nv: #b58e83; --nv-ink: #8a675d; }
.site-header .main-nav a[data-section="works"]   { --nv: #8798a3; --nv-ink: #5d6e79; }
.site-header .main-nav a[data-section="journal"] { --nv: #ad9a7f; --nv-ink: #7f6d55; }
.site-header .main-nav a[data-section="qa"]      { --nv: #988ca3; --nv-ink: #6d6279; }
.site-header .main-nav a.nav-est                 { --nv: #9a9877; --nv-ink: #6f6d50; }
@media (min-width: 861px) {
  .site-header .main-nav > a:not(.nav-cta):not(.nav-app)::after,
  .site-header .main-nav .nav-item-menu > a::after { background: var(--nv, var(--accent)); }
  .site-header .main-nav > a:not(.nav-cta):not(.nav-app):hover,
  .site-header .main-nav .nav-item-menu > a:hover { color: var(--nv-ink, var(--ink)); }
  /* 目前區塊（一頁式捲到哪裡 data-spy／獨立頁 data-active-section）：字與底線固定該色，原本的淺灰字＋上方主題綠線取消 */
  body:is([data-spy="about"], [data-active-section="about"]) .site-header .main-nav a[data-section="about"],
  body:is([data-spy="flows"], [data-active-section="flows"], [data-active-section="pricing"]) .site-header .main-nav a[data-section="flows"],
  body:is([data-spy="works"], [data-active-section="works"], [data-active-section="work"]) .site-header .main-nav a[data-section="works"],
  body[data-active-section="journal"] .site-header .main-nav a[data-section="journal"],
  body:is([data-spy="qa"], [data-active-section="qa"]) .site-header .main-nav a[data-section="qa"] { color: var(--nv-ink); }
  body:is([data-spy="about"], [data-active-section="about"]) .site-header .main-nav a[data-section="about"]::before,
  body:is([data-spy="flows"], [data-active-section="flows"], [data-active-section="pricing"]) .site-header .main-nav a[data-section="flows"]::before,
  body:is([data-spy="works"], [data-active-section="works"], [data-active-section="work"]) .site-header .main-nav a[data-section="works"]::before,
  body[data-active-section="journal"] .site-header .main-nav a[data-section="journal"]::before,
  body:is([data-spy="qa"], [data-active-section="qa"]) .site-header .main-nav a[data-section="qa"]::before { height: 1px; background: var(--line); }
  body:is([data-spy="about"], [data-active-section="about"]) .site-header .main-nav a[data-section="about"]::after,
  body:is([data-spy="flows"], [data-active-section="flows"], [data-active-section="pricing"]) .site-header .main-nav a[data-section="flows"]::after,
  body:is([data-spy="works"], [data-active-section="works"], [data-active-section="work"]) .site-header .main-nav a[data-section="works"]::after,
  body[data-active-section="journal"] .site-header .main-nav a[data-section="journal"]::after,
  body:is([data-spy="qa"], [data-active-section="qa"]) .site-header .main-nav a[data-section="qa"]::after { transform: scaleX(1); }
}
@media (min-width: 861px) and (hover: hover) {
  .site-header .main-nav > a:not(.nav-cta):not(.nav-app),
  .site-header .main-nav .nav-item-menu > a { display: grid; grid-template-areas: "t"; justify-items: center; align-content: center; }
  .site-header .main-nav a .nav-en,
  .site-header .main-nav a .nav-zh { grid-area: t; position: static; top: auto; left: auto; }
  .site-header .main-nav a .nav-zh { transform: translateY(12px); }
  .site-header .main-nav a:hover .nav-zh { transform: none; }
}
/* 格寬改成中英較寬者後總寬多約 50px：861～960（平板／手機橫拿）間距再收，避免 APP 鈕擠出畫面 */
@media (min-width: 861px) and (max-width: 960px) { .site-header .main-nav { gap: 12px; margin-left: 14px; } }

/* 2026-10-25 使用者：網頁版試算按 ＋／− 卡片會跳動——比較卡的名稱＋金額、工程／設計／監工三段用 flex-wrap，
   金額字數一變換行數就變，卡片高度在 491／518／545px 之間跳（面板捲到底時整個畫面跟著跳）。
   改成固定版面：名稱一行、金額一行；明細「工程」一整行、「設計｜監工」一行；數字等寬。高度不再隨數字變 */
.est-result { font-variant-numeric: tabular-nums; }
.est-cmp-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; line-height: 1.35; }
.est-cmp-lines { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; line-height: 1.6; }
.est-cmp-lines span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-cmp-lines span:first-child { grid-column: 1 / -1; }

/* 2026-10-25 使用者：導覽英文字要比較圓弧感 → Quicksand（圓頭無襯線）。屬於莫蘭迪主題這一層（永久記憶 #148）：拿掉這段＝回到原本 Noto Sans TC */
.site-header .main-nav a .nav-en { font-family: "Quicksand", "Noto Sans TC", sans-serif; font-weight: 600; letter-spacing: 0.1em; }
@media (min-width: 861px) and (max-width: 1180px) { .site-header .main-nav { gap: 14px; } .site-header .main-nav a .nav-en { letter-spacing: 0.06em; } }

/* 2026-10-25 使用者：品牌名改優美弧線字體（霞鶩文楷 LXGW WenKai TC）、LOGO 改線條版並放大。屬莫蘭迪主題層（#148）：
   舊版＝原本 logo.png 28px＋Noto Sans TC 粗體；新版＝.brand-logo-line SVG（樣板 index.template.html）。拿掉這段＝回舊版 */
.brand-logo-line { display: none; }
.site-header .brand { gap: 12px; }
.site-header .brand-logo { display: none; }
.site-header .brand-logo-line { display: block; width: 66px; height: 46px; flex: none; color: #8fa287; transition: color 0.3s, transform 0.4s var(--ease-reveal); }
.site-header .brand:hover .brand-logo-line { color: #7b8f74; transform: translateY(-1px); }
.site-header .brand-name { font-family: "LXGW WenKai TC", "Noto Serif TC", serif; font-size: 20px; font-weight: 400; letter-spacing: 0.14em; color: #4d4a46; }
@media (min-width: 861px) and (max-width: 1180px) { .site-header .brand-logo-line { width: 54px; height: 38px; } .site-header .brand-name { font-size: 17px; letter-spacing: 0.08em; } }
@media (max-width: 860px) { .site-header .brand-logo-line { width: 50px; height: 35px; } .site-header .brand-name { font-size: 17px; letter-spacing: 0.08em; } }
/* 2026-10-25 LOGO 改用作品浮水印那個線條母版＋進度條漸層（img/logo-line-gradient.svg）：圖檔本身有顏色，尺寸比例 2155:1455 */
.site-header .brand-logo-line { width: 68px; height: 46px; object-fit: contain; color: inherit; }
.site-header .brand:hover .brand-logo-line { filter: saturate(1.25); }
@media (min-width: 861px) and (max-width: 1180px) { .site-header .brand-logo-line { width: 56px; height: 38px; } }
@media (max-width: 860px) { .site-header .brand-logo-line { width: 52px; height: 35px; } }

/* 2026-10-25 使用者：品牌名字體要跟右邊英文（Quicksand 圓體）同感覺、淡彩色、再小一些 → 粉圓體 Huninn＋LOGO 同款漸層字（比 LOGO 深一階才讀得清楚）。
   霞鶩文楷那段保留在上面當備用，這段覆蓋它（#148） */
.site-header .brand-name { font-family: "Huninn", "Quicksand", "Noto Sans TC", sans-serif; font-size: 17px; font-weight: 400; letter-spacing: 0.16em;
  background: linear-gradient(90deg, #7f9676 0%, #b08578 52%, #7c909c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (min-width: 861px) and (max-width: 1180px) { .site-header .brand-name { font-size: 15px; letter-spacing: 0.1em; } }
@media (max-width: 860px) { .site-header .brand-name { font-size: 15px; letter-spacing: 0.1em; } }

/* 2026-10-25 使用者：手機版選單的中文字也要有色彩——每一項用接案流程一個深色，前面一個同色小圓點（莫蘭迪主題層，#148） */
@media (max-width: 860px) {
  .site-header .main-nav a[data-section] .nav-zh, .site-header .main-nav a.nav-est .nav-zh { color: var(--mn, #4d4a46); font-weight: 500; letter-spacing: 0.12em; }
  .site-header .main-nav a[data-section] .nav-zh::before, .site-header .main-nav a.nav-est .nav-zh::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 12px 2px 0; border-radius: 50%; background: var(--mn, #8fa287); vertical-align: middle; }
  .site-header .main-nav a[data-section="about"] { --mn: #7f9676; }
  .site-header .main-nav a[data-section="flows"] { --mn: #a87d72; }
  .site-header .main-nav a[data-section="works"] { --mn: #74899a; }
  .site-header .main-nav a[data-section="journal"] { --mn: #9a8566; }
  .site-header .main-nav a[data-section="qa"] { --mn: #887a96; }
  .site-header .main-nav a.nav-est { --mn: #87855f; }
}

/* 2026-10-25 使用者：LOGO 跟品牌名都不填色、不彩色，單純跟右邊導覽英文一樣的黑（#1C1C1A）。上面漸層字那段保留不刪（被這段覆蓋，#148）；LOGO 改用 img/logo-line-ink.svg（彩色版 logo-line-gradient.svg 仍在） */
.site-header .brand-name { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #1C1C1A; -webkit-text-fill-color: #1C1C1A; }
.site-header .brand:hover .brand-logo-line { filter: none; opacity: 0.75; }

/* 2026-10-25 使用者：作品集封面不要有 LOGO，點進作品相簿一樣要有——封面卡片不疊網頁浮水印（燒進圖的 LOGO 由 render.js coverUrl 帶 nl=1 拿掉） */
body.wm-on .work-card-frame::after { display: none; }

/* 2026-10-25 使用者：每個作品 LOGO 位置一樣（不要有高有低）、位置更有彈性、手機不能太小（後台改了全部連動）。
   網頁疊的浮水印改成跟燒進圖的 LOGO（server/workLogo.js logoLayer）同一套：九宮格位置 wm-<上中下 t/m/b><左中右 l/c/r>，
   左右／上下邊距都用「照片寬度 %」（margin 的 % 一律以寬度計）——以前下緣用 bottom:4%＝照片高度的 4%，直式照片的 LOGO 就比較高。
   手機（≤860px）大小改用 --wm-msize。 */
body.wm-on .work-card-frame::after,
body.wm-on .detail-photo::after {
  top: auto; right: auto; bottom: auto; left: auto; margin: 0; transform: none;
}
body.wm-on[class*="wm-t"] .detail-photo::after { top: 0; margin-top: var(--wm-my, 3%); }
body.wm-on[class*="wm-b"] .detail-photo::after { bottom: 0; margin-bottom: var(--wm-my, 3%); }
body.wm-on[class*="wm-m"] .detail-photo::after { top: 50%; }
body.wm-on:is(.wm-tl, .wm-ml, .wm-bl) .detail-photo::after { left: 0; margin-left: var(--wm-mx, 3.5%); }
body.wm-on:is(.wm-tr, .wm-mr, .wm-br) .detail-photo::after { right: 0; margin-right: var(--wm-mx, 3.5%); }
body.wm-on:is(.wm-tc, .wm-mc, .wm-bc) .detail-photo::after { left: 50%; transform: translateX(-50%); }
body.wm-on:is(.wm-ml, .wm-mr) .detail-photo::after { transform: translateY(-50%); }
body.wm-on.wm-mc .detail-photo::after { transform: translate(-50%, -50%); }
@media (max-width: 860px) {
  body.wm-on .detail-photo::after { width: var(--wm-msize, var(--wm-size, 16%)); }
}

/* 2026-10-25 使用者：照片檢視器的作品標題要在最下面——「︿ 說明」膠囊鈕移到標題上方（column-reverse 讓 ::after 排在文字上面），標題貼螢幕最底 */
.pv-caption { display: flex; flex-direction: column-reverse; align-items: center; }
.pv-caption::after { margin: 0 auto 12px; }
@media (orientation: landscape) and (max-height: 560px) { .pv-caption::after { margin: 0 auto 6px; } }

/* 2026-10-25 使用者：①作品封面、作品內頁大圖／相簿都看不到 LOGO，只有點開單張（照片檢視器）才有——內頁不疊網頁浮水印
   （燒進圖的 LOGO 由 render.js：內頁 img 用 coverUrl 不帶 LOGO，連結 href／6K 才帶）；
   ②禁止複製：手機長按不跳「儲存影像」、照片不能拖出去（右鍵選單由 site.js 擋） */
body.wm-on .detail-photo::after { display: none; }
img { -webkit-user-drag: none; -webkit-touch-callout: none; }
.detail-photo, .work-card, .work-card-frame, .hero, .lightbox, .detail-gallery { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* 2026-10-25 作品頁「案場資訊」（地區／坪數／屋況／風格）：說明下方置中一排莫蘭迪淡色小卡，標籤小字、內容一般字（render.js workFactsHtml） */
.detail-facts { max-width: 760px; margin: -24px auto 52px; text-align: center; }
.detail-facts-title { margin: 0 0 12px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.32em; color: var(--ink-faint); }
.detail-facts dl { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.detail-facts .df-item { min-width: 120px; padding: 10px 18px 11px; border-radius: 14px; background: var(--df-tone); text-align: center; }
.detail-facts dt { font-size: 11.5px; letter-spacing: 0.2em; color: var(--df-deep); margin-bottom: 2px; }
.detail-facts dd { margin: 0; font-size: 15px; letter-spacing: 0.06em; color: #4d4a46; }
.detail-facts .df-1 { --df-tone: #dfe5da; --df-deep: #6f8467; }
.detail-facts .df-2 { --df-tone: #ecdfda; --df-deep: #9a7268; }
.detail-facts .df-3 { --df-tone: #dde3e7; --df-deep: #6d7f8a; }
.detail-facts .df-4 { --df-tone: #ece5da; --df-deep: #8f7d63; }
@media (max-width: 560px) {
  .detail-facts { margin: -28px auto 40px; padding: 0 4px; }
  .detail-facts dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .detail-facts .df-item { min-width: 0; padding: 9px 10px; }
}
/* 手機作品內頁順序（#115）：案場資訊跟在說明後面（order 1，HTML 也在說明後面），不要跑到照片上方 */
@media (max-width: 860px) {
  #work-detail .detail-facts { order: 1; align-self: stretch; margin: 4px 0 8px; }
}

/* 2026-10-25 在地介紹頁（/linkou-interior-design、/keelung-interior-design，server/localPages.js）：跟收費方式頁一樣是獨立頁，任何寬度只顯示這一塊；
   莫蘭迪淡彩（鼠尾草／玫瑰／霧藍／沙）、大圓角，跟作品頁案場資訊同一組色票 */
#local { display: none; }
body[data-active-section^="local-"] main > .hero,
body[data-active-section^="local-"] main > .section:not(#local) { display: none; }
body[data-active-section^="local-"] main > #local { display: block; }
.section-local { background: #f5f2ee; }
.section-local .section-inner { max-width: 1080px; }
.local-head { text-align: center; }
.local-eyebrow { margin: 0 0 10px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.36em; color: #8a9a82; }
.local-lead { margin: 16px 0 0; font-size: 17px; letter-spacing: 0.12em; color: #6b6661; }
.local-intro { max-width: 760px; margin: 40px auto 0; padding: 28px 32px; border-radius: 22px; background: rgba(255, 255, 255, 0.72); color: #4a4a46; line-height: 2; }
.local-intro p { margin: 0 0 12px; }
.local-intro p:last-child { margin-bottom: 0; }
.local-block { margin-top: 64px; }
.local-h2 { text-align: center; font-size: 15px; font-weight: 400; letter-spacing: 0.32em; color: #5e6b58; margin: 0 0 24px; }
.local-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.local-services li { padding: 20px 20px 22px; border-radius: 22px; background: var(--ls-tone); display: flex; flex-direction: column; gap: 8px; }
.local-services b { font-weight: 500; letter-spacing: 0.08em; color: var(--ls-deep); }
.local-services span { font-size: 14px; line-height: 1.8; color: #5a5651; }
.local-services .ls-1 { --ls-tone: #dfe5da; --ls-deep: #5f7458; }
.local-services .ls-2 { --ls-tone: #ecdfda; --ls-deep: #8d655b; }
.local-services .ls-3 { --ls-tone: #dde3e7; --ls-deep: #5f717c; }
.local-services .ls-4 { --ls-tone: #ece5da; --ls-deep: #7f6d54; }
.local-promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.local-promises li { padding: 22px 20px; border-radius: 22px; background: #fff; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 30px -22px rgba(60, 56, 50, 0.35); }
.local-promises .lp-num { font-family: var(--font-display); font-size: 26px; font-weight: 300; color: #9bab93; letter-spacing: 0.04em; }
.local-promises b { font-weight: 500; letter-spacing: 0.08em; color: var(--ink); }
.local-promises span:last-child { font-size: 14px; line-height: 1.8; color: #5a5651; }
.local-areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.local-areas span { padding: 8px 18px; border-radius: 999px; background: #fff; border: 1px solid #e2ddd5; font-size: 14px; letter-spacing: 0.12em; color: #5a5651; }
.local-works .works-grid { margin-top: 0; }
.local-more { text-align: center; margin: 28px 0 0; }
.local-more .btn-line, .local-call { border-radius: 999px; }
.section-local .qa-list { max-width: 820px; margin: 0 auto; }
.local-store .store-card { max-width: 820px; margin: 0 auto; border-radius: 22px; background: #fff; }
.section-local .detail-cta .btn-solid { border-radius: 999px; }
.local-call { display: inline-block; margin: 0 0 0 10px; padding: 12px 26px; }
.local-other { text-align: center; margin: 0 0 24px; font-size: 14px; letter-spacing: 0.16em; }
.local-other a { color: #6b6661; }
.local-other a:hover { color: var(--accent); }
.store-local { display: inline-block; margin: 2px 0 12px; font-size: 13px; letter-spacing: 0.08em; color: var(--accent); }
.footer-local { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.14em; }
.footer-local a { color: inherit; opacity: 0.8; }
.footer-local a:hover { opacity: 1; color: var(--accent); }
.footer-local span { margin: 0 6px; opacity: 0.5; }
@media (max-width: 860px) { .local-promises { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .local-intro { margin-top: 28px; padding: 22px 20px; line-height: 1.9; }
  .local-block { margin-top: 48px; }
  .local-services, .local-promises { grid-template-columns: 1fr; gap: 10px; }
  .local-call { margin: 10px 0 0; }
}

/* 2026-10-25 使用者：①桌機下拉選單點了連結就收回（site.js 加 .dd-closed，滑鼠離開選單才解除）；
   ②只有管理員（body.is-admin）可以右鍵另存、手機長按存照片，訪客照舊擋（上面 2026-10-25 禁止複製那段） */
@media (min-width: 861px) {
  .nav-item-menu.dd-closed .nav-dropdown, .site-header .nav-item-menu.dd-closed .nav-dropdown,
  .brand-menu.dd-closed .brand-dropdown, .site-header .brand-menu.dd-closed .brand-dropdown { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}
body.is-admin img { -webkit-touch-callout: default; -webkit-user-drag: auto; }
body.is-admin .detail-photo, body.is-admin .work-card, body.is-admin .work-card-frame, body.is-admin .hero, body.is-admin .detail-gallery { -webkit-touch-callout: default; }
/* 照片檢視器裡的「儲存」鈕（只有管理員看得到；手勢層擋住長按，所以另外給鈕） */
.pv-save-btn { position: absolute; left: calc(62px + var(--safe-left)); top: calc(4px + var(--safe-top)); width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; pointer-events: auto; display: none; align-items: center; justify-content: center; }
body.is-admin .pv-save-btn { display: inline-flex; }
.pv-save-btn:hover { background: rgba(255, 255, 255, 0.26); }
/* 2026-10-25 使用者回報：管理員在照片檢視器裡右鍵只出現「另存網頁」——.pv-img 是 pointer-events:none（手勢層接手），右鍵打到的是網頁。
   管理員模式下讓照片本身接收右鍵（另存圖片）／iPhone 長按（儲存影像）；仍不准拖曳，免得滑鼠左右滑換張被瀏覽器拖曳搶走 */
body.is-admin .lightbox .pv-img { pointer-events: auto; -webkit-user-drag: none; -webkit-touch-callout: default; }
body.is-admin .lightbox.pv { -webkit-touch-callout: default; }
/* 2026-10-25 21:20 使用者：頁首 LOGO 改回原本綠色那一個（img/logo-green.png，564×375），再小一些、淡一些綠。
   沿用 .brand-logo-line 的位置與 hover；顏色用 filter 調淡（原圖 #8DC63F 偏亮螢光綠）。拿掉這段＋樣板 src 改回 logo-line-sage.svg＝回線條版 */
.site-header .brand-logo-line { width: 54px; height: 36px; object-fit: contain; filter: saturate(0.62) brightness(1.12); opacity: 0.92; }
.site-header .brand:hover .brand-logo-line { filter: saturate(0.8) brightness(1.05); opacity: 1; }
@media (min-width: 861px) and (max-width: 1180px) { .site-header .brand-logo-line { width: 48px; height: 32px; } }
@media (max-width: 860px) { .site-header .brand-logo-line { width: 45px; height: 30px; } }
/* 2026-10-25 使用者：作品照片檢視器上下留黑邊，說明／張數不蓋住照片——photo-viewer.js measure() 算 --pv-padv（上下等高） */
.lightbox.pv .pv-slide { padding: var(--pv-padv, 0px) 0; box-sizing: border-box; }
/* 2026-10-25 21:4x 使用者（附截圖要那樣的比例）：照片太小、說明太大 → 下方不再放作品名＋「說明」膠囊，
   只在最下面放一個閃爍的小箭頭（點它或往上滑＝打開說明；作品名在說明面板裡照樣有）。
   上下黑邊跟著變窄（photo-viewer.js measure() 取上方列與這個小箭頭較高者）。 */
.lightbox.pv .pv-caption { left: 50%; right: auto; width: 140px; margin-left: -70px; padding: 4px 0 calc(6px + var(--safe-bottom));
  font-size: 0; letter-spacing: 0; background: none; text-shadow: none; display: flex; flex-direction: column; align-items: center; }
.lightbox.pv .pv-caption::after { content: ''; display: block; width: 13px; height: 13px; margin: 12px auto 8px; padding: 0; min-height: 0;
  border: 0; border-top: 2px solid rgba(255, 255, 255, 0.9); border-left: 2px solid rgba(255, 255, 255, 0.9); border-radius: 2px;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; transform: rotate(45deg); animation: pvHint 1.6s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .lightbox.pv .pv-caption:hover::after { background: none; border-color: #fff; animation-duration: 0.9s; } }
@keyframes pvHint { 0%, 100% { opacity: 0.25; transform: translateY(4px) rotate(45deg); } 50% { opacity: 1; transform: translateY(-3px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .lightbox.pv .pv-caption::after { animation: none; opacity: 0.75; } }
/* 2026-10-25 21:5x 使用者：照片左右撐滿、上下裁一些（上下黑邊一樣大），管理員可拉照片調整上下顯示的範圍。
   大小／裁切由 photo-viewer.js sizeSlot() 指定（img 寬高＋translate＋clip-path，最多裁照片高度 22%）。
   管理員才看得到「⇕」調整鈕（i、⬇ 右邊）；調整中照片顯示上下箭頭游標、提示條在上方。 */
.pv-adj-btn { position: absolute; left: calc(114px + var(--safe-left)); top: calc(4px + var(--safe-top)); width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; pointer-events: auto; display: none; align-items: center; justify-content: center; }
body.is-admin .pv-adj-btn { display: inline-flex; }
.pv-adj-btn:hover { background: rgba(255, 255, 255, 0.26); }
.pv-adjusting .pv-adj-btn { background: #8fa287; color: #fff; }
.lightbox.pv.pv-adjusting, .lightbox.pv.pv-adjusting .pv-slide { cursor: ns-resize; }
.pv-adjusting .pv-caption, .pv-adjusting .pv-nav { opacity: 0 !important; pointer-events: none; }
.pv-adj-hint { position: absolute; z-index: 4; left: 50%; top: calc(58px + var(--safe-top)); transform: translateX(-50%); max-width: calc(100% - 32px);
  padding: 9px 18px; border-radius: 999px; background: rgba(28, 28, 26, 0.82); color: #fff; font-size: 14px; letter-spacing: 0.06em; text-align: center; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pv-adj-hint[hidden] { display: none; }

/* ===== 2026-10-26 管理員作品頁：已隱藏 N 張（找回用）＋分享相簿給 LINE 好友（public/js/works-admin.js） ===== */
.wd-hidbtn, .wd-sharebtn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid #c9d2c5; border-radius: 999px; background: #fff; color: var(--ink-soft, #555); font: inherit; font-size: 14px; cursor: pointer; }
.wd-hidbtn[hidden] { display: none; }
.wd-hidbtn.is-on { background: #3a3a36; border-color: #3a3a36; color: #fff; }
.wd-sharebtn { border-color: var(--accent, #48624B); color: var(--accent, #48624B); }
.wd-sharebtn svg, .wd-sharebar svg, .wd-sheet-btn svg { width: 18px; height: 18px; flex: none; }
body.wd-sharing .detail-photo { cursor: pointer; }
body.wd-sharing .detail-photo .wd-vis, body.wd-sharing .detail-photo .wd-cover, body.wd-sharing .ai-tools, body.wd-sharing .ai-photo-bar, body.wd-sharing .ai-ver { visibility: hidden; }
.wd-pick { position: absolute; z-index: 8; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.25); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.detail-photo.is-picked .wd-pick { background: var(--accent, #48624B); }
.detail-photo.is-picked img { outline: 3px solid var(--accent, #48624B); outline-offset: -3px; }
.wd-sharebar { position: fixed; z-index: 90; left: 50%; bottom: calc(18px + var(--safe-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(28, 28, 26, 0.9); color: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wd-sh-count { font-size: 14px; letter-spacing: 0.04em; white-space: nowrap; margin-right: 4px; }
.wd-sharebar button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.wd-sharebar .wd-sh-go { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--accent, #48624B); font-weight: 600; }
.wd-sharebar .wd-sh-go:disabled { opacity: 0.45; cursor: default; }
.wd-sheet { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.4); padding: 16px 16px calc(16px + var(--safe-bottom, 0px)); }
@media (min-width: 700px) { .wd-sheet { align-items: center; } }
.wd-sheet-card { width: 100%; max-width: 420px; padding: 22px 18px 14px; border-radius: 18px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
.wd-sheet-t { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--ink, #222); text-align: center; }
.wd-sheet-url { margin: 0 0 14px; font-size: 12px; color: var(--ink-faint, #888); text-align: center; word-break: break-all; }
.wd-sheet-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; margin: 0 0 8px; padding: 0 16px; border: 1px solid #dde3da; border-radius: 12px; background: #fff; color: var(--ink, #222); font: inherit; font-size: 15px; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.wd-sheet-btn.is-line { border-color: #06C755; background: #06C755; color: #fff; }
.wd-sheet-close { width: 100%; min-height: 44px; border: 0; background: none; color: var(--ink-soft, #666); font: inherit; font-size: 15px; cursor: pointer; }
/* 分享相簿頁（/share/<代碼>）：只有勾選的照片，頂部一行說明 */
.share-note { margin: 4px 0 0; font-size: 13px; letter-spacing: 0.08em; color: var(--ink-faint, #888); }
body.wd-sharing .float-actions { display: none; } /* 勾選分享時浮動鈕讓位給下方分享列 */

/* ===== 2026-10-26 管理員作品集拖曳排序（works-admin.js dragSort）：滑鼠按住拖、放開就存 ===== */
@media (hover: hover) and (pointer: fine) { .wd-sortable a.work-card:not(.work-card--loop) { cursor: grab; } }
body.wd-sorting, body.wd-sorting * { cursor: grabbing !important; user-select: none; }
a.work-card.is-dragging { position: fixed; z-index: 120; margin: 0; pointer-events: none; opacity: 0.92; transform: scale(1.03) rotate(-0.6deg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); transition: transform 0.15s; }
.wd-sort-ph { border: 2px dashed #9fb09a; border-radius: 14px; background: rgba(72, 98, 75, 0.06); box-sizing: border-box; }

/* ===== 作品連結案場資料夾（2026-10-26，works-admin.js folderBox／pickFolder、server/folderLink.js） ===== */
.wd-folder { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.wd-folder svg, .wd-fl svg { width: 18px; height: 18px; flex: none; }
.wd-folder-path { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--ink-soft, #555); }
.wd-folder-path > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-folder-path b { font-weight: 600; color: var(--accent, #48624B); }
.wd-folder-path svg { color: var(--accent, #48624B); }
.wd-folderbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px dashed var(--accent, #48624B); border-radius: 999px; background: #fff; color: var(--accent, #48624B); font: inherit; font-size: 14px; cursor: pointer; }
.wd-folder-x { min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--ink-faint, #888); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.wd-fl-card { display: flex; flex-direction: column; max-width: 520px; max-height: min(82vh, 720px); }
.wd-fl-kind { display: flex; gap: 6px; margin: 0 0 10px; padding: 4px; border-radius: 999px; background: #eef2ec; }
.wd-fl-kind button { flex: 1; min-height: 38px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft, #555); font: inherit; font-size: 14px; cursor: pointer; }
.wd-fl-kind button.is-on { background: #fff; color: var(--accent, #48624B); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.wd-fl-q { width: 100%; min-height: 44px; margin: 0 0 8px; padding: 0 14px; border: 1px solid #dde3da; border-radius: 12px; font: inherit; font-size: 16px; box-sizing: border-box; }
.wd-fl-list { flex: 1; min-height: 160px; overflow-y: auto; margin: 0 -6px 8px; padding: 0 6px; -webkit-overflow-scrolling: touch; }
.wd-fl-year { position: sticky; top: 0; margin: 0; padding: 8px 4px 4px; background: #fff; font-size: 12px; letter-spacing: 0.12em; color: var(--ink-faint, #888); }
.wd-fl-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-bottom: 1px solid #eef0ec; background: none; color: var(--ink, #222); font: inherit; text-align: left; cursor: pointer; }
.wd-fl-row svg { color: var(--accent, #48624B); }
.wd-fl-row:hover:not(:disabled) { background: #f4f6f2; }
.wd-fl-row:disabled { opacity: 0.45; cursor: default; }
.wd-fl-name { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.wd-fl-note { flex: none; font-size: 12px; color: var(--ink-faint, #888); }
.wd-fl-empty { margin: 30px 0; text-align: center; font-size: 14px; color: var(--ink-faint, #888); }
@media (max-width: 560px) { .wd-fl-row { flex-wrap: wrap; } .wd-fl-note { flex-basis: 100%; padding-left: 28px; } }

/* ===== 作品集一鍵全部作品生成 LOGO（2026-10-26，works-admin.js logoAll） ===== */
.wd-logoall { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px; border: 1px dashed #b9c4b5; border-radius: 12px; background: #f6f7f3; }
.wd-logoall-t { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 14px; color: var(--ink-soft, #555); }
.wd-logoall-t svg { width: 18px; height: 18px; flex: none; color: var(--accent, #48624B); }
.wd-logoall-t b { color: var(--accent, #48624B); }
.wd-logoall button { min-height: 38px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; }
.wd-logoall-on { border: 1px solid var(--accent, #48624B); background: var(--accent, #48624B); color: #fff; }
.wd-logoall-off { border: 1px solid #c9d2c5; background: #fff; color: var(--ink-soft, #555); }
.wd-logoall button:disabled { opacity: 0.5; cursor: default; }