/*
 * 紙本風格 v2（2026-10-28 預覽）：棉紙底、明體橫書標題、朱砂方印、「正」字筆畫段落標記。
 * v1（水彩紙＋大紅圓＋直書＋英文小標）太像參考範例，已備份在 washi-src-v1/。
 * 疊在 v3＋動態層之上，只覆寫外觀不改結構。紋理圖由 washi-src/xuan.py、gen-seal.js 產生。
 */

:root {
  --xuan: #efebe3;
  --xuan-hi: rgb(255 253 248 / 0.5);
  --sumi: #1f1e1c;
  --sumi-soft: #57534b;
  --hair: rgb(31 30 28 / 0.2);
  --shu: #b23a2f;
  --shu-deep: #962f26;
  --sumi-night: #1c1b19;
  --sumi-night-2: #282724;

  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-latin: "Cormorant Garamond", "Noto Serif TC", serif;
  --radius: 0;
  color-scheme: light;
}

/* 亮的色場全部換成同一張紙；深色展示段改成墨色 */
.field-mist,
.field-paper,
.svcbox {
  --bg: var(--xuan);
  --surface: var(--xuan-hi);
  --ink: var(--sumi);
  --soft: var(--sumi-soft);
  --accent: var(--shu);
  --accent-ink: #ffffff;
  --accent-text: var(--shu);
  --focus: var(--sumi);
  --paper: var(--xuan);
  --paper-2: var(--xuan-hi);
  --mist-2: rgb(31 30 28 / 0.12);
  --ink-dark: var(--sumi);
  --ink-dark-soft: var(--sumi-soft);
}

/* 原本的黑色展示段改成「深一階的紙」：整站維持紙本感，字一律用墨色，段落仍有深淺節奏 */
.field-char {
  --bg: #ebe6dc;
  --surface: rgb(255 253 248 / 0.55);
  --ink: var(--sumi);
  --soft: #4f4a41;
  --accent: var(--shu);
  --accent-ink: #ffffff;
  --accent-text: #9a2e24;
  --focus: var(--sumi);
  --paper: var(--xuan);
  --mist-2: rgb(31 30 28 / 0.14);
  background-color: #ebe6dc;
  background-image: url("../img/xuan.jpg");
  background-size: 640px 640px;
  background-blend-mode: multiply;
}

.field-mist,
.field-paper,
.svcbox,
body {
  background-color: var(--xuan);
  background-image: url("../img/xuan.jpg");
  background-size: 640px 640px;
}

body {
  color: var(--sumi);
}

/* 深色模式也維持紙張：紙本身就是品牌 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field-mist,
  :root:not([data-theme="light"]) .field-paper,
  :root:not([data-theme="light"]) .svcbox {
    --surface: var(--xuan-hi);
    --accent-text: var(--shu);
    --focus: var(--sumi);
  }

  :root:not([data-theme="light"]) .hub__node {
    background: var(--surface);
    color: var(--ink);
  }
}

/* ---------- 字：標題用明體；拉丁字與數字用 Garamond（直立數字） ---------- */
.head,
.display,
.statement,
.intro__title,
.svc-hero__title,
.cap__title,
.story__title,
.pillar__word,
.slipcta__text b,
.footer__line,
.footer__mark,
.wordmark,
.faq summary,
.sheet__title,
.svcbox__name,
.contact__sentence,
.fees__title,
main h3,
.svcbox h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.cap__figure b,
.story__figs b,
.pillar__value {
  font-family: var(--font-latin), var(--font-serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.intro__title {
  font-size: clamp(2rem, 0.9rem + 3.4vw, 4.25rem);
  letter-spacing: 0.02em;
}

/* ---------- 朱砂方印：「正域」落款，字由上往下一格一格排 ---------- */
.wa-seal {
  display: inline-grid;
  grid-auto-flow: row;
  place-items: center;
  align-content: center;
  flex: none;
  width: 1.5em;
  padding: 0.2em 0.12em;
  border-radius: 0.12em;
  background: var(--shu) url("../img/seal.jpg") center / 200px;
  color: #fff8f2;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.05;
  box-shadow: inset 0 0 0 0.07em rgb(255 248 242 / 0.85); /* taste-skill-ignore：印章內框 */
  transform: rotate(-2deg);
}

.wa-seal--one {
  width: 1.3em;
  height: 1.3em;
  padding: 0;
}

.wordmark {
  gap: 10px;
  letter-spacing: 0.18em;
}

.wordmark .wa-seal {
  font-size: 15px;
}

.intro__text .wa-seal {
  margin-top: 28px;
  font-size: 22px;
}

/* 頁尾大字後的印章用偽元素畫：大字會被逐字拆開，印章不能放在字裡面 */
.footer__mark::after {
  content: "正域";
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  margin-left: 0.5em;
  padding: 0.12em;
  border-radius: 0.12em;
  background: var(--shu) url("../img/seal.jpg") center / 200px;
  color: #fff8f2;
  font-family: var(--font-serif);
  font-size: 0.3em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  writing-mode: vertical-rl;
  vertical-align: 0.6em;
  box-shadow: inset 0 0 0 0.07em rgb(255 248 242 / 0.85); /* taste-skill-ignore：印章內框 */
  transform: rotate(-2deg);
}

/* ---------- 「正」字筆畫：首頁五段，第 N 段寫到第 N 筆 ---------- */
.wa-head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.wa-head .section-title {
  margin: 0;
}

.wa-tally {
  flex: none;
  width: clamp(40px, 4vw, 56px);
  height: clamp(40px, 4vw, 56px);
  overflow: visible;
}

.wa-tally line {
  stroke-width: 3.2;
  stroke-linecap: square;
}

.wa-tally .is-todo {
  stroke: var(--hair);
  stroke-width: 1.2;
}

.wa-tally .is-done {
  stroke: var(--ink);
}

.wa-tally .is-now {
  stroke: var(--shu);
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal].wa-head .is-now {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    transition: stroke-dashoffset 900ms var(--ease-out) 350ms;
  }

  .js [data-reveal].wa-head.is-in .is-now {
    stroke-dashoffset: 0;
  }

  .js .intro__text .wa-seal {
    animation: wa-stamp 520ms cubic-bezier(0.3, 1.4, 0.5, 1) 1100ms backwards;
  }
}

/* 蓋章：從稍大、透明壓下來 */
@keyframes wa-stamp {
  from {
    opacity: 0;
    transform: rotate(-2deg) scale(1.5);
  }
}

/* ---------- 首頁開頭：說明在左、細墨線串接圖在右 ---------- */
.wa-catch {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--shu);
}

.hub__node {
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hair); /* taste-skill-ignore：示意圖的框線 */
}

.hub__node .icon {
  color: var(--ink);
}

.hub__core {
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px currentColor; /* taste-skill-ignore：示意圖的框線 */
}

.hub__core .icon {
  color: var(--accent-text);
}

/* 連線改成一條細墨線，跑的資料點是朱砂小方塊 */
.hub__line {
  height: 8px;
  border-radius: 0;
  background: linear-gradient(var(--hair), var(--hair)) center / 100% 1px no-repeat;
}

.hub__line b {
  top: 1px;
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: var(--shu);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hub__line {
    background: linear-gradient(var(--hair), var(--hair)) center / 100% 1px no-repeat;
  }
}

/* ---------- 按鈕：朱砂實心方塊 ---------- */
.button {
  border-radius: 0;
  letter-spacing: 0.1em;
}

.button:hover {
  background: var(--shu-deep);
}

.field-char .button:hover {
  background: var(--shu-deep);
}

.mobilecta {
  border-radius: 0;
  background: var(--shu);
  color: #ffffff;
  letter-spacing: 0.1em;
}

/* ---------- 卡片：不用底色塊，改成細框 ---------- */
.cap__link,
.story__link,
.slipcta,
.cmp tbody th,
.cmp tbody td {
  border-radius: 0;
}

.cap__link,
.story__link,
.slipcta {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hair); /* taste-skill-ignore：框註的細框線 */
}

@media (hover: hover) and (pointer: fine) {
  .cap__link:hover,
  .story__link:hover,
  .slipcta:hover {
    background: var(--xuan-hi);
  }

  .mo-spot > li > a::before {
    background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgb(255 253 248 / 0.6), transparent 62%);
  }

  .mo-spot > li > a::after {
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgb(31 30 28 / 0.55), transparent 70%);
  }
}

.cap__example b,
.story__row b {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--shu);
}

.cap__desc,
.story__row {
  line-height: 1.9;
}

/* 四欄數字、合作流程、收費方式的圖形用墨色，朱砂只留給點綴 */
.pillar__art,
.pillar__value,
.timeline-steps,
.fees > :not(.button) {
  --accent: var(--sumi);
  --accent-text: var(--sumi);
}

.timeline-steps::before {
  height: 1px;
}

/* ---------- 其他元件 ---------- */
.svcbox {
  border-radius: 4px;
}

.svcbox__head,
.sheet__head {
  background: transparent;
}

.faq details {
  border-bottom: 1px solid var(--hair);
}

.faq details[open] {
  background: transparent;
}

.faq summary {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
}

.field input,
.field select,
.field textarea {
  border-radius: 0;
}

.footer__mark {
  font-size: 11vw;
  letter-spacing: 0.06em;
  color: rgb(31 30 28 / 0.9);
}

/* 段與段之間用一條很淡的線分開 */
main > section + section {
  box-shadow: inset 0 1px 0 var(--hair); /* taste-skill-ignore：段落分隔細線 */
}

/* ---------- 第三輪（User 回饋）：深色區塊看不清楚、品牌印章只有「正」 ---------- */
/* 串接示意圖在展示段裡：原本寫死黑底白字，改成跟著色場走 */
.demo .hub__node {
  background: var(--surface);
  color: var(--ink);
}

.demo .hub__line {
  background: linear-gradient(var(--hair), var(--hair)) center / 100% 1px no-repeat;
}

/* 示意畫面裡的按鈕：原本是 Apple 藍，改成朱砂 */
.console__btn,
.ui-confirm__button {
  background: var(--shu);
}

/* 數字用墨色，朱砂只留給點綴 */
.webstats b {
  color: var(--ink);
  font-family: var(--font-latin), var(--font-serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.01em;
}

/* 裝置外框從冷灰改成暖墨色，跟紙比較搭 */
.strip__frame,
.reel__frame {
  background: #2b2925;
}

.console__screen {
  border-color: #2b2925;
}

/* 導覽列的印章：「正域」兩個字，由上往下 */
.wordmark .wa-seal {
  font-size: 11px;
}

/* 系統深色模式下，案例卡的連接線原本是深灰，改成細墨線 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flow__line {
    background: var(--mist-2);
  }
}

/* ---------- 第四輪（User 回饋）：案例詳情、手寫單彈窗沒有跟著換 ----------
 * 根因：這兩個彈窗在 sheet.css、visuals.css 各自定義了一組色場變數（白紙＋Apple 藍），
 * 上面只覆寫了 .field-* 與 .svcbox。改成直接把最底層的色票換掉，任何元件引用到都會變成紙本色。
 */
:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"] {
  --mist: var(--xuan);
  --mist-2: rgb(31 30 28 / 0.12);
  --paper: var(--xuan);
  --paper-2: var(--xuan-hi);
  --ink-dark: var(--sumi);
  --ink-dark-soft: var(--sumi-soft);
  --blue: var(--shu);
  --blue-text: var(--shu);
  --blue-bright: var(--shu);
  --black: #1c1b19;
  --black-2: #282724;
}

.sheet,
.slipbox {
  --focus: var(--sumi);
  --ok-ink: #2f6b3a;
  --check-ink: var(--shu-deep);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sheet,
  :root:not([data-theme="light"]) .slipbox {
    --accent-text: var(--shu);
    --focus: var(--sumi);
    --check-ink: var(--shu-deep);
  }
}

.sheet__panel,
.slipbox {
  background-color: var(--xuan);
  background-image: url("../img/xuan.jpg");
  background-size: 640px 640px;
}

.slipbox {
  border-radius: 4px;
}

/* 手寫單上框選的那一行、「請再看一眼」標籤：原本是藍色半透明 */
.slipbox__mark {
  border-radius: 2px;
  background: rgb(178 58 47 / 0.08);
}

.slipbox__ok--check {
  background: rgb(178 58 47 / 0.1);
}

/* 案例詳情裡的數字、分頁、框線 */
.metric__value,
.slipbox__v {
  font-family: var(--font-latin), var(--font-serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.01em;
}

.sheet__tab,
.facts div,
.module,
.arch-node,
.caveat,
.old-flow span {
  border-radius: 0;
}

.sheet-subhead,
.module__name,
.arch-node__name {
  font-family: var(--font-serif);
  letter-spacing: 0.04em;
}

.slipbox h2,
.slipbox h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.slipbox__rows button,
.slipbox__photo,
.slipbox__photo img {
  border-radius: 2px;
}

/* 示意介面裡「新品項」的標籤：原本 Apple 藍，改成藍染的靛藍 */
.ui-flag--new {
  color: #3b5170;
}

/* ---------- 第五輪（User 回饋）：手機選單背景透明，跟底下內容疊在一起 ----------
 * 根因：選單面板用 var(--surface)，紙本風格把 --surface 設成半透明（讓卡片透出紙紋），
 * 浮在內容上的元素就變透明。浮層一律用實心紙色。
 */
@media (max-width: 899px) {
  .js .topbar.nav[data-open="true"] .nav__links {
    margin: 0;
    padding-inline: max(var(--margin), env(safe-area-inset-left, 0px));
    border-radius: 0;
    background-color: var(--xuan);
    background-image: url("../img/xuan.jpg");
    background-size: 640px 640px;
    box-shadow:
      inset 0 1px 0 var(--hair),
      0 18px 32px rgb(31 30 28 / 0.18); /* taste-skill-ignore：展開的選單浮在內容上 */
    /* 手機橫放時畫面比選單矮：選單自己可以捲 */
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .js .topbar.nav[data-open="true"] .nav__links a {
    border-bottom: 1px solid var(--hair);
  }

  /* 選單打開時，底部常駐的預約按鈕先讓開 */
  body:has(.topbar.nav[data-open="true"]) .mobilecta {
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
  }
}

.navdrop__menu a {
  border-radius: 0;
}

/* ---------- 第五輪：手機版全面檢查的修正 ---------- */
/* 標題平均斷行，不會只剩一個字掉到下一行；內文避免最後一行只剩一兩個字 */
h1,
h2,
h3,
.cap__title,
.story__title,
.svc-hero__title,
.sheet__title,
.slipcta__text b,
.contact__sentence,
.footer__line {
  text-wrap: balance;
}

p,
li,
.cap__desc,
.story__row {
  text-wrap: pretty;
}

@media (max-width: 599px) {
  /* 首頁標題：320 寬也放得下「從你現在的流程開始。」一行 */
  .intro__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
  }

  /* 段落標題（前面有「正」字筆畫）縮小一階，比較不會斷成三行 */
  .wa-head .section-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  /* 案例卡：流程小字不在詞中間斷開；數字不拆成兩行 */
  .flow__node span {
    word-break: keep-all;
    font-size: 0.8125rem;
  }

  .story__figs b {
    white-space: nowrap;
    font-size: clamp(1.5rem, 7.5vw, 2.25rem);
  }
}

/* 收費方式上緣的粗線改成細墨線 */
.fee-flow li::before {
  height: 1px;
  background: var(--hair);
}

/* 對照表在手機上改成一列一張卡：欄名寫在每格上方，不用左右滑 */
@media (max-width: 639px) {
  .cmp-wrap {
    overflow: visible;
  }

  .cmp,
  .cmp tbody,
  .cmp tr,
  .cmp th,
  .cmp td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .cmp thead {
    display: none;
  }

  .cmp tbody tr {
    margin-bottom: 12px;
    box-shadow: inset 0 0 0 1px var(--hair); /* taste-skill-ignore：表格改卡片後的外框 */
  }

  .cmp tbody th,
  .cmp tbody td,
  .cmp tbody th:first-child,
  .cmp tbody td:last-child,
  .field-mist .cmp tbody th,
  .field-mist .cmp tbody td {
    padding: 10px 16px;
    border-radius: 0;
    background: transparent;
    white-space: normal;
  }

  .cmp tbody th {
    padding-top: 14px;
    font-family: var(--font-serif);
    font-size: 1.0625rem;
  }

  .cmp tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--soft);
  }
}