/* ===================================================
   Thrsv — 共用樣式
   全站只用這一個 CSS。
   配色會自動切換：
     訪客手機／電腦是淺色模式 → 蘋果拼貼
     訪客手機／電腦是深色模式 → 森林粉
   想固定某一種配色，把每頁 <html lang="zh-Hant"> 改成：
     class="pal-apple"（固定蘋果拼貼）、class="pal-forest"（固定森林粉）
     或 class="pal-tomato"（番茄汽水）
   =================================================== */

/* 版面概念：白紙拼貼——網點方塊從畫面邊角疊進來，手繪星星和線圈點綴 */
:root {
  /* 預設配色：蘋果拼貼（取自主視覺插畫） */
  --bg: #ffffff;         /* 主背景（白紙） */
  --bg-deep: #fdeef4;    /* 淡底，用在表格與作品預留格 */
  --ink: #161616;        /* 內文 */
  --soft: #5d5a6b;       /* 次要文字 */
  --title: #e8306f;      /* 站名與小標（蘋果桃紅） */
  --link: #1f35d6;       /* 連結（天空鈷藍） */
  --btn: #e8306f;        /* MENU 按鈕 */
  --btn-ink: #ffffff;    /* MENU 按鈕上的字 */
  --dot1: #1f35d6;       /* 右上網點方塊 */
  --dot2: #7a1f2a;       /* 左下網點方塊 */
  --star: #b8e6a0;       /* 星星的綠 */
  --glow: #fff27a;       /* 主視覺後面的黃色光暈 */
  --panel: rgba(255, 255, 255, 0.88); /* 內容區的半透明底色 */
  --menu-bg: rgba(31, 53, 214, 0.96);  /* 打開目錄的底色（鈷藍） */
  --menu-ink: #ffffff;                 /* 目錄文字 */
  --menu-soft: #d6dbff;                /* 目錄中文小字 */
  --menu-hi: #fff27a;                  /* 目錄滑過／目前頁面 */
  --todo: #fff3a0;       /* 委託表單 */
.tpl {
  width: 100%;
  font: inherit;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 10px 14px;
  resize: vertical;
}
.copy-btn {
  font: inherit;
  font-size: 15px;
  background: var(--btn);
  color: var(--btn-ink);
  border: none;
  border-radius: 6px;
  padding: 6px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.copy-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.copy-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

/* 待填寫標記（上線前要刪掉） */

  --en: "Josefin Sans", "Century Gothic", sans-serif;
  --zh: "Zen Maru Gothic", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color-scheme: light;
}

/* 配色二：番茄汽水 */
:root.pal-tomato {
  --bg: #8e1f2f;
  --bg-deep: #5a1220;
  --ink: #ffffff;
  --soft: #ffd6dc;
  --title: #ffe066;
  --link: #9fdcff;
  --btn: #9fdcff;
  --btn-ink: #5a1220;
  --dot1: #ffe066;
  --dot2: #ff8fb0;
  --glow: rgba(255, 224, 102, .35);
  --menu-bg: rgba(90, 18, 32, 0.96);
  --menu-ink: #ffffff;
  --menu-soft: #ffd6dc;
  --menu-hi: #ffe066;
  --panel: rgba(142, 31, 47, 0.88);
  color-scheme: dark;
}

/* 配色三：森林粉 */
:root.pal-forest {
  --bg: #1f4d3a;
  --bg-deep: #12301f;
  --ink: #ffffff;
  --soft: #cfe6d6;
  --title: #ff8cc0;
  --link: #ffe680;
  --btn: #ff6fae;
  --btn-ink: #ffffff;
  --dot1: #ff8cc0;
  --dot2: #9fd8ff;
  --glow: rgba(255, 140, 192, .35);
  --menu-bg: rgba(18, 48, 31, 0.96);
  --menu-ink: #ffffff;
  --menu-soft: #cfe6d6;
  --menu-hi: #ff8cc0;
  --panel: rgba(31, 77, 58, 0.88);
  color-scheme: dark;
}

/* 自動切換：深色模式的訪客看到森林粉（沒有指定固定配色時） */
@media (prefers-color-scheme: dark) {
  :root:not(.pal-apple):not(.pal-tomato):not([data-theme="light"]) {
  --bg: #1f4d3a;
  --bg-deep: #12301f;
  --ink: #ffffff;
  --soft: #cfe6d6;
  --title: #ff8cc0;
  --link: #ffe680;
  --btn: #ff6fae;
  --btn-ink: #ffffff;
  --dot1: #ff8cc0;
  --dot2: #9fd8ff;
  --glow: rgba(255, 140, 192, .35);
  --menu-bg: rgba(18, 48, 31, 0.96);
  --menu-ink: #ffffff;
  --menu-soft: #cfe6d6;
  --menu-hi: #ff8cc0;
  --panel: rgba(31, 77, 58, 0.88);
  color-scheme: dark;
}
}
:root[data-theme="dark"]:not(.pal-apple):not(.pal-tomato) {
  --bg: #1f4d3a;
  --bg-deep: #12301f;
  --ink: #ffffff;
  --soft: #cfe6d6;
  --title: #ff8cc0;
  --link: #ffe680;
  --btn: #ff6fae;
  --btn-ink: #ffffff;
  --dot1: #ff8cc0;
  --dot2: #9fd8ff;
  --glow: rgba(255, 140, 192, .35);
  --menu-bg: rgba(18, 48, 31, 0.96);
  --menu-ink: #ffffff;
  --menu-soft: #cfe6d6;
  --menu-hi: #ff8cc0;
  --panel: rgba(31, 77, 58, 0.88);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* 網點方塊（拼貼感），固定在畫面邊角，不擋內容 */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  width: clamp(140px, 26vw, 300px);
  aspect-ratio: 1 / 1;
}
body::before {
  top: -40px; right: -50px;
  transform: rotate(4deg);
  background:
    radial-gradient(circle, var(--bg) 0 1.6px, transparent 2px) 0 0 / 9px 9px,
    var(--dot1);
  opacity: .9;
}
body::after {
  bottom: -60px; left: -60px;
  transform: rotate(-6deg);
  background:
    radial-gradient(circle, var(--dot2) 0 2.4px, transparent 2.8px) 0 0 / 9px 9px;
}
@media (max-width: 600px) { body::before, body::after { opacity: .45; } }

body {
  margin: 0;
  position: relative;
  isolation: isolate;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--zh);
  font-size: 16px;
  line-height: 2;
  padding-block: 32px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.wrap {
  max-width: 800px;
  margin: 0 auto;
  /* 內容區加一層半透明底色，避免文字壓在網點方塊上看不清楚 */
  background: var(--panel);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 6px;
  padding-block: 8px 24px;
  padding-inline: clamp(16px, 4vw, 40px);
}

a { color: var(--link); text-underline-offset: 4px; }
a:hover { color: var(--title); }
a:focus-visible, label:focus-visible { outline: 2px solid var(--btn); outline-offset: 3px; }

/* ===== 站名 ===== */
.site-name {
  font-family: var(--en);
  font-weight: 300;
  font-size: clamp(40px, 9vw, 72px);
  letter-spacing: 0.12em;
  line-height: 1.1;
  margin: 24px 0 32px;
  text-align: center;
}
.site-name a {
  color: var(--title);
  text-decoration: none;
  display: inline-block;
  padding: 10px 40px;
  /* 手繪線圈 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90'%3E%3Cg fill='none' stroke='%23777' stroke-width='1.3'%3E%3Cellipse cx='150' cy='26' rx='140' ry='16'/%3E%3Cellipse cx='146' cy='38' rx='136' ry='15'/%3E%3Cellipse cx='152' cy='50' rx='138' ry='16'/%3E%3Cellipse cx='148' cy='63' rx='134' ry='15'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.site-name { position: relative; }
.site-name::after {
  /* 站名旁的星星 */
  content: "";
  display: inline-block;
  width: 0.55em; aspect-ratio: 1;
  vertical-align: top;
  margin-left: -0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L24 15 L38 14 L27 23 L32 37 L20 28 L7 37 L13 23 L2 13 L16 15 Z' fill='%23b8e6a0' stroke='%23161616' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-12deg);
}
.site-sub {
  font-family: var(--en);
  font-variant: small-caps;
  letter-spacing: 0.25em;
  color: var(--link);
  text-align: center;
  margin: 0 0 32px;
}

/* ===== 右上角 MENU 按鈕 ===== */
#menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-btn {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  z-index: 30;
  background: var(--btn);
  color: var(--btn-ink);
  font-family: var(--en);
  font-variant: small-caps;
  font-size: 20px;
  letter-spacing: 0.2em;
  padding: 6px 18px 4px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
  user-select: none;
}
.menu-btn::before { content: "☰  "; letter-spacing: 0; }
#menu-toggle:focus-visible + .menu-btn { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ===== 全螢幕目錄 ===== */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  /* 目錄底色跟著配色走，再疊一層淡淡的網點 */
  background:
    radial-gradient(circle, rgba(255,255,255,.12) 0 1.4px, transparent 1.8px) 0 0 / 10px 10px,
    var(--menu-bg);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
}
#menu-toggle:checked ~ .menu { display: flex; }
.menu a { color: var(--menu-ink); text-decoration: none; text-align: center; line-height: 1.3; }
.menu a .en {
  display: block;
  font-family: var(--en);
  font-variant: small-caps;
  font-size: 26px;
  letter-spacing: 0.08em;
}
.menu a .zh { display: block; font-size: 12px; color: var(--menu-soft); letter-spacing: 0.2em; }
.menu a:hover .en, .menu a.here .en { color: var(--menu-hi); }
.menu-close {
  margin-top: 28px;
  font-family: var(--en);
  font-variant: small-caps;
  font-size: 18px;
  letter-spacing: 0.15em;
  cursor: pointer;
  color: var(--menu-ink);
}

/* ===== 段落標題（左邊直線＋中文＋英文） ===== */
.sec {
  border-left: 3px solid var(--ink);
  padding-left: 20px;
  margin: 48px 0 24px;
}
.sec h2::before {
  content: "";
  display: inline-block;
  width: 1em; aspect-ratio: 1;
  margin-right: 0.35em;
  vertical-align: -0.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L24 15 L38 14 L27 23 L32 37 L20 28 L7 37 L13 23 L2 13 L16 15 Z' fill='%23b8e6a0' stroke='%23161616' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sec h2 {
  font-size: clamp(22px, 4.5vw, 30px);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1.5;
  text-wrap: balance;
}
.sec .en {
  font-family: var(--en);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 18px;
  color: var(--soft);
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--soft);
  display: inline-block;
  min-width: min(100%, 320px);
}

h3 { font-size: 18px; color: var(--title); margin: 28px 0 4px; font-weight: 500; }
p { margin: 0 0 14px; }

.text { max-width: 36em; }
.text ul, .text ol { padding-left: 1.4em; margin: 0 0 14px; }
.text li::marker { color: var(--link); }

/* ===== 首頁主視覺 ===== */
.hero {
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 0 0 90px 24px var(--glow);   /* 黃色光暈，像畫裡蘋果後面那團 */
  background: var(--bg);
}
.hero img { width: 100%; height: auto; display: block; }

.status {
  display: inline-block;
  background: var(--link);
  color: var(--bg-deep);
  font-weight: 700;
  padding: 2px 14px;
  border-radius: 999px;
  letter-spacing: 0.1em;
}

.news { list-style: none; padding: 0; margin: 0; }
.news li { display: flex; gap: 16px; flex-wrap: wrap; border-bottom: 1px dashed var(--soft); padding: 8px 0; }
.news .date { font-family: var(--en); color: var(--title); font-variant-numeric: tabular-nums; }

/* ===== 價目表 ===== */
.table-scroll { overflow-x: auto; }
.price {
  border-collapse: collapse;
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
  background: var(--bg-deep);
}
.price th, .price td { border: 1px solid var(--soft); padding: 8px 18px; }
.price th { font-weight: 500; color: var(--link); }
.price td.num { text-align: right; }

/* ===== 作品集 ===== */
.works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.works figure { margin: 0; }
.works img, .works .ph {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border: 2px solid var(--ink);
}
.works .ph {
  background: linear-gradient(160deg, var(--title), var(--bg-deep) 70%);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
}
.works figcaption { font-size: 13px; color: var(--soft); }

/* ===== 常見問題 ===== */
.faq dt { font-weight: 700; margin-top: 18px; }
.faq dt::before { content: "Q. "; color: var(--title); font-family: var(--en); }
.faq dd { margin: 0 0 0 1.8em; color: var(--soft); }

/* 待填寫標記：上線前把 class="todo" 的地方都改好 */
.todo, .news .date.todo { background: var(--todo); color: #222; padding: 0 3px; }

.small { font-size: 14px; color: var(--soft); }
footer { font-size: 12px; color: var(--soft); margin-top: 64px; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .menu a { transition: color .15s; }
}