/* ==========================================================
   佛具店網站樣式
   配色取自：檀木匾額（深褐）、金箔、金紙紙色、香灰、朱砂印
   不載入任何外部字型 — 手機開啟速度是 SEO 排名因素
   ========================================================== */

:root {
  /* 匾額（深色區） */
  --plaque:      #241c15;
  --plaque-soft: #33281e;
  --foil:        #cba53c;   /* 金箔，用在深色上 */
  --foil-dim:    #9a7f2e;

  /* 紙（淺色區） */
  --paper:       #f0e9da;   /* 金紙紙色 */
  --paper-deep:  #e5dbc4;
  --line:        #cec1a4;

  /* 字 */
  --ink:         #221e19;
  --ash:         #6b6357;   /* 香灰，次要文字 */

  /* 印 */
  --cinnabar:    #a83324;

  --wrap:        68rem;
  --gutter:      clamp(1.25rem, 5vw, 3rem);

  --cjk: "Microsoft JhengHei", "微軟正黑體", "PingFang TC",
         "Noto Sans TC", "Heiti TC", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--cjk);
  font-size: 1.0625rem;
  line-height: 1.9;          /* 中文需要比英文更鬆的行高 */
  letter-spacing: .02em;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cinnabar); text-underline-offset: .25em; }
a:hover { color: #8d2a1d; }

:focus-visible {
  outline: 2px solid var(--cinnabar);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 跳到主要內容（無障礙 + 對 SEO 無害） */
.skip {
  position: absolute; left: -9999px;
  background: var(--cinnabar); color: #fff;
  padding: .6em 1em; z-index: 99;
}
.skip:focus { left: var(--gutter); top: .5rem; }

/* ---------- 匾額：頁首 + 主視覺 ---------- */

.plaque {
  background: var(--plaque);
  background-image:
    radial-gradient(120% 90% at 78% 0%, #3b2e21 0%, transparent 60%);
  color: var(--paper);
  border-bottom: 3px solid var(--foil-dim);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .9rem;
  border-bottom: 1px solid rgba(203,165,60,.22);
}

.topbar__mark {
  font-size: .95rem;
  letter-spacing: .3em;
  color: var(--foil);
  text-decoration: none;
  font-weight: 700;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.7rem, 2.5vw, 1.5rem);
  list-style: none;
  margin: 0; padding: 0;
  font-size: .95rem;
}
.nav a {
  color: #ded3bd;
  text-decoration: none;
  padding-block: .2em;
  border-bottom: 1px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--foil);
  border-bottom-color: var(--foil);
}

/* 主視覺：右側直排店名，像門口掛的招牌 */
.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.75rem, 8vw, 5.5rem);
}

.hero__lede {
  font-size: clamp(1.55rem, 5.2vw, 2.6rem);
  line-height: 1.55;
  font-weight: 700;
  margin: 0 0 1rem;
  letter-spacing: .04em;
}
.hero__lede em {
  font-style: normal;
  color: var(--foil);
}

.hero__sub {
  color: #c3b9a5;
  margin: 0 0 2rem;
  max-width: 34em;
  font-size: 1.05rem;
}

/* 直排店名 — 全站的招牌，這是唯一大膽的地方 */
.signboard {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--foil);
  border: 2px solid var(--foil-dim);
  padding: clamp(1rem, 3vw, 1.7rem) clamp(.5rem, 1.6vw, .8rem);
  margin: 0;
  align-self: center;
  background: linear-gradient(180deg, rgba(203,165,60,.09), transparent);
}

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
  display: inline-block;
  padding: .8em 1.6em;
  border-radius: 2px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .08em;
  border: 1.5px solid transparent;
  transition: background-color .15s, color .15s;
}
.btn--call {
  background: var(--cinnabar);
  color: #fff;
  border-color: var(--cinnabar);
}
.btn--call:hover { background: #8d2a1d; color: #fff; }

.btn--line {
  background: transparent;
  color: var(--foil);
  border-color: var(--foil-dim);
}
.btn--line:hover { background: rgba(203,165,60,.12); color: var(--foil); }

/* 淺色區裡的按鈕 */
.paper .btn--line { color: var(--cinnabar); border-color: var(--cinnabar); }
.paper .btn--line:hover { background: rgba(168,51,36,.08); }

/* ---------- 事實速覽條 ----------
   放在主視覺正下方。對訪客是「一眼看完該知道的」，
   對 AI 搜尋引擎則是最容易被擷取引用的可驗證事實區塊。 */

.facts {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
}
.facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem 2rem;
  margin: 0;
  padding-block: 1.6rem;
}
.facts__grid > div { min-width: 0; }
.facts dt {
  font-size: .74rem;
  letter-spacing: .22em;
  color: var(--cinnabar);
  font-weight: 700;
  margin: 0 0 .3rem;
}
.facts dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 700;
}
.facts dd small {
  display: block;
  font-weight: 400;
  font-size: .86rem;
  color: var(--ash);
  letter-spacing: 0;
}
.facts dd a { text-decoration: none; }

/* 即時營業狀態：訪客最想知道的是「現在打得通嗎」 */
.openstate {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .2em .6em;
  border-radius: 999px;
  margin-top: .35rem;
}
.openstate::before {
  content: "";
  width: .5em; height: .5em;
  border-radius: 50%;
  background: currentColor;
}
.openstate[data-state="open"]   { color: #2f6b3a; background: rgba(47,107,58,.12); }
.openstate[data-state="closed"] { color: var(--ash); background: rgba(107,99,87,.12); }
.openstate:empty { display: none; }

/* ---------- 段落 ---------- */

.section { padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.section + .section { border-top: 1px solid var(--line); }
.section--deep { background: var(--paper-deep); border-top: none; }

/* 朱砂印：段落標記 */
.stamp {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.75rem;
  font-size: clamp(1.25rem, 3.6vw, 1.65rem);
  font-weight: 700;
  letter-spacing: .06em;
}
.stamp::before {
  content: attr(data-seal);
  flex: none;
  writing-mode: vertical-rl;
  text-orientation: upright;
  background: var(--cinnabar);
  color: var(--paper);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.35;
  padding: .5em .35em;
  border-radius: 2px;
}

.lead {
  max-width: 42em;
  color: var(--ash);
  margin: -.75rem 0 2rem;
}

/* ---------- 服務卡：依「什麼時候會用到」分組 ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0; padding: 0;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--foil-dim);
  padding: 1.5rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
}
.section:not(.section--deep) .card { background: #f6f1e6; }

.card__when {
  font-size: .8rem;
  letter-spacing: .22em;
  color: var(--cinnabar);
  font-weight: 700;
  margin: 0 0 .5rem;
}
.card__title {
  font-size: 1.2rem;
  margin: 0 0 .6rem;
  letter-spacing: .04em;
}
.card__body {
  margin: 0 0 1.1rem;
  font-size: .97rem;
  color: var(--ash);
  flex: 1;
}
.card__link {
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}

/* ---------- 常見問題清單（SEO 內鏈主力） ---------- */

.qlist { list-style: none; margin: 0; padding: 0; }
.qlist li { border-bottom: 1px solid var(--line); }
.qlist li:first-child { border-top: 1px solid var(--line); }

.qlist a {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: 1.05rem .25rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 500;
}
.qlist a:hover { background: rgba(168,51,36,.05); color: var(--cinnabar); }
.qlist a::before {
  content: "問";
  flex: none;
  font-size: .72rem;
  font-weight: 700;
  color: var(--cinnabar);
  border: 1px solid var(--cinnabar);
  border-radius: 2px;
  padding: .1em .35em;
  line-height: 1;
  position: relative;
  top: -.15em;
}

/* ---------- 影片展示（點擊才載入 Facebook 播放器）---------- */

.reel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}

.reel__frame {
  width: min(19rem, 78vw);
  aspect-ratio: 9 / 16;   /* Reels 是直式的 */
  border: 2px solid var(--foil-dim);
  background: var(--plaque);
  background-image: radial-gradient(120% 90% at 50% 30%, #3b2e21 0%, transparent 65%);
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  color: var(--foil);
  font-family: inherit;
}
.reel__frame:hover .reel__play,
.reel__frame:focus-visible .reel__play { background: var(--cinnabar); border-color: var(--cinnabar); }

.reel__play {
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  border: 2px solid var(--foil-dim);
  background: rgba(203, 165, 60, .14);
  display: grid; place-items: center;
  transition: background-color .15s, border-color .15s;
}
.reel__play::after {
  content: "";
  width: 0; height: 0;
  margin-left: .3em;
  border-left: 1.15rem solid var(--paper);
  border-top: .72rem solid transparent;
  border-bottom: .72rem solid transparent;
}

.reel__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: .9rem 1rem;
  font-size: .9rem;
  letter-spacing: .08em;
  color: #d8ccb4;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}

.reel__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- 來店資訊 ---------- */

.visit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem 2.5rem;
}
.visit dl { margin: 0; }
.visit dt {
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--ash);
  margin-top: 1.2rem;
}
.visit dt:first-child { margin-top: 0; }
.visit dd {
  margin: .25rem 0 0;
  font-size: 1.1rem;
  font-weight: 700;
}
.visit dd a { text-decoration: none; }

.map-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  filter: saturate(.85);
}

/* 還沒有 Google 地圖嵌入網址時的佔位框 */
.map-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--sandal, #8c6b4f);
  background: repeating-linear-gradient(
    45deg, transparent, transparent 12px,
    rgba(140,107,79,.06) 12px, rgba(140,107,79,.06) 24px);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--ash);
  font-size: .95rem;
  line-height: 1.7;
}

/* ---------- 文章頁 ---------- */

.article { padding-block: clamp(2rem, 6vw, 3.5rem); }
.article__wrap { max-width: 44rem; }

.crumb {
  font-size: .88rem;
  color: var(--ash);
  margin: 0 0 1.5rem;
}
.crumb a { color: var(--ash); }

.article h1 {
  font-size: clamp(1.7rem, 5.2vw, 2.4rem);
  line-height: 1.45;
  letter-spacing: .03em;
  margin: 0 0 .75rem;
}
.article__meta {
  font-size: .88rem;
  color: var(--ash);
  border-bottom: 2px solid var(--foil-dim);
  padding-bottom: 1.25rem;
  margin: 0 0 2.25rem;
}

.article h2 {
  font-size: clamp(1.25rem, 3.6vw, 1.5rem);
  letter-spacing: .05em;
  margin: 2.75rem 0 1rem;
  padding-left: .8rem;
  border-left: 4px solid var(--cinnabar);
}
.article h3 {
  font-size: 1.1rem;
  margin: 2rem 0 .6rem;
  letter-spacing: .04em;
}
.article p { margin: 0 0 1.25rem; }
.article ul, .article ol { margin: 0 0 1.5rem; padding-left: 1.4rem; }
.article li { margin-bottom: .55rem; }

.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.75rem;
  font-size: .97rem;
}
.article th, .article td {
  border: 1px solid var(--line);
  padding: .7em .85em;
  text-align: left;
  vertical-align: top;
}
.article th { background: var(--paper-deep); font-weight: 700; }

/* 表格在窄螢幕可橫向捲動，頁面本身不橫捲 */
.table-scroll { overflow-x: auto; margin-bottom: 1.75rem; }
.table-scroll table { margin-bottom: 0; }

/* 提醒框：習俗因地區而異的地方 */
.note {
  background: var(--paper-deep);
  border-left: 4px solid var(--foil-dim);
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.75rem;
  font-size: .97rem;
}
.note strong { color: var(--cinnabar); }
.note :last-child { margin-bottom: 0; }

/* 文末轉換區 */
.ask {
  margin-top: 3rem;
  border: 2px solid var(--foil-dim);
  padding: 1.75rem 1.5rem;
  background: #f6f1e6;
}
.ask h2 {
  border: 0; padding: 0;
  margin: 0 0 .6rem;
  font-size: 1.25rem;
}
.ask p { color: var(--ash); }

/* ---------- 頁尾 ---------- */

.foot {
  background: var(--plaque);
  color: #b3a892;
  font-size: .92rem;
  padding-block: 2.5rem;
  border-top: 3px solid var(--foil-dim);
}
.foot a { color: #ded3bd; text-decoration: none; }
.foot a:hover { color: var(--foil); }
.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.75rem;
}
.foot h2 {
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--foil);
  margin: 0 0 .7rem;
  font-weight: 700;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .45rem; }
.foot__legal {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(203,165,60,.2);
  font-size: .85rem;
  color: #8b8172;
}

/* ---------- 手機固定撥號列 ---------- */

.callbar { display: none; }

@media (max-width: 44rem) {
  .reel { grid-template-columns: 1fr; justify-items: start; }

  .topbar { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .topbar__mark { letter-spacing: .12em; font-size: 1.05rem; }

  /* 導覽點擊區加大到手指好按的尺寸 */
  .nav { gap: .35rem 1.1rem; }
  .nav a { padding-block: .7em; }

  /* 頁尾也是導覽，點擊區同樣要夠大 */
  .foot li { margin-bottom: 0; }
  .foot li a {
    display: inline-block;
    padding-block: .55em;
  }
  /* 頁尾的電話是轉換元素，點擊區不能小 */
  .foot a[href^="tel:"] {
    display: inline-block;
    padding-block: .5em;
    font-size: 1.05rem;
  }

  /* 手機首屏很珍貴：招牌與標題並排，不要疊在上面佔掉整個畫面高度 */
  .hero {
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding-block: 1.75rem 2rem;
  }
  .hero__lede {
    font-size: clamp(1.45rem, 6.6vw, 1.9rem);
    margin-bottom: .75rem;
  }
  .hero__sub {
    font-size: .97rem;
    margin-bottom: 1.25rem;
  }
  .signboard {
    align-self: start;
    font-size: 1.25rem;
    letter-spacing: .22em;
    padding: .8rem .4rem;
  }

  /* hero 的兩顆按鈕在手機上並排且撐滿，不要被底部固定列蓋住 */
  .cta-row { gap: .5rem; }
  .cta-row .btn {
    flex: 1 1 auto;
    text-align: center;
    padding-inline: .8em;
    font-size: .95rem;
  }

  body { padding-bottom: 4.25rem; }

  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    border-top: 2px solid var(--foil-dim);
  }
  .callbar a {
    padding: 1em .5em;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .1em;
  }
  .callbar a:first-child { background: var(--cinnabar); color: #fff; }
  .callbar a:last-child  { background: var(--plaque);   color: var(--foil); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .plaque, .foot, .callbar, .cta-row { display: none; }
  body { background: #fff; color: #000; }
}