/* ===== DADDY STUDIO 會員系統 — 官網視覺語彙 =====
   對齊 daddystudio3d.com 首頁／服務頁：白底、細線、近黑字，全站黑白灰，不用彩色主色。
   由 theme.js 自動掛載，頁面不需各別引用。 */

:root {
  --ds-brand:      #1F2226;   /* 主色＝近黑 */
  --ds-brand-deep: #000000;
  --ds-brand-soft: #EDEEEF;
  --ds-brand-tint: #F7F8F8;
  --ds-steel:      #B4B7BA;   /* 官網「離島之美」色塊（去彩後的中性灰） */
  --ds-char:       #4A4D52;   /* 官網工藝頁 pill 的深灰 */
  --ds-ink:        #1A1D21;
  --ds-muted:      #6E7276;
  --ds-faint:      #9AA0A6;
  --ds-line:       #E3E5E8;
  --ds-shell:      #F5F6F7;
}

/* ---------- 全站基調：拿掉圓角與陰影，改用一像素細線 ---------- */
.rounded-md, .rounded-lg { border-radius: 2px !important; }
.rounded-xl               { border-radius: 3px !important; }
.rounded-2xl, .rounded-3xl{ border-radius: 4px !important; }
/* rounded-full 保留：官網的頁籤、頭像、徽章本來就是全圓 */

.shadow-card      { box-shadow: 0 0 0 1px var(--ds-line) !important; }
.shadow-cardhover { box-shadow: 0 10px 30px -18px rgba(20, 24, 28, .45) !important; }

body { letter-spacing: .01em; }
h1, h2, h3, .ds-title { letter-spacing: .02em; }

/* ---------- 標題語彙 ---------- */

/* 置中標題兩側細線：官網「──── 3D數位製造 ────」 */
.ds-rule-title {
  display: flex; align-items: center; gap: 22px;
  font-size: 20px; font-weight: 700; color: var(--ds-ink);
  letter-spacing: .16em; margin: 0 0 22px;
}
.ds-rule-title::before, .ds-rule-title::after {
  content: ""; flex: 1; height: 1px; background: var(--ds-line);
}

/* 左側短豎線標題：官網「▌SLA光固化列印」 */
.ds-bar-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; color: var(--ds-ink); letter-spacing: .06em;
}
.ds-bar-title::before {
  content: ""; width: 3px; height: 17px; background: var(--ds-char); flex: none;
}

/* 字距拉開的小標：官網「讓 創 意 實 踐 在 生 活 的 每 個 角 落」 */
.ds-eyebrow {
  font-size: 12px; color: var(--ds-muted); letter-spacing: .42em;
}

/* ---------- 頁籤：官網工藝選擇的膠囊列 ---------- */
.ds-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-tab {
  padding: 7px 18px; border-radius: 999px; font-size: 14px;
  color: var(--ds-muted); background: transparent; border: 1px solid transparent;
  transition: .18s; cursor: pointer; white-space: nowrap;
}
.ds-tab:hover { color: var(--ds-ink); background: var(--ds-shell); }
.ds-tab.is-on { color: #fff; background: var(--ds-char); border-color: var(--ds-char); }

/* ---------- 頂部導覽：底線標示所在頁 ---------- */
.ds-nav-link {
  position: relative; flex: none;      /* 不可被 flex 壓縮，否則選單會擠在一起 */
  padding: 26px 13px; font-size: 15px;
  color: var(--ds-muted); transition: color .18s; white-space: nowrap;
}
@media (max-width: 1400px) { .ds-nav-link { padding: 26px 9px; font-size: 14px; } }
.ds-nav-link:hover { color: var(--ds-ink); }
.ds-nav-link.is-on { color: var(--ds-ink); }
.ds-nav-link.is-on::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 18px;
  height: 2px; background: var(--ds-ink);
}

/* ---------- 右下浮動按鈕：官網的 LINE／信件／回頂 ---------- */
.ds-fabs {
  position: fixed; right: 18px; bottom: 22px; z-index: 50;
  display: flex; flex-direction: column; gap: 10px;
}
.ds-fab {
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; transition: .2s;
  box-shadow: 0 6px 18px -8px rgba(20, 24, 28, .5);
}
/* LINE 原本是品牌綠，這裡依全站黑白基調改為深灰 */
.ds-fab-line { background: var(--ds-char); color: #fff; }
.ds-fab-mail { background: var(--ds-ink); color: #fff; }
.ds-fab-top  { background: #fff; color: var(--ds-muted); border: 1px solid var(--ds-line); }
.ds-fab:hover { transform: translateY(-2px); }

/* ---------- 側邊直排標語：官網左欄的「創意老爹 創意無限」 ---------- */
.ds-vertical {
  writing-mode: vertical-rl; letter-spacing: .5em;
  font-size: 12px; color: var(--ds-faint);
}

/* ---------- 分隔線與表格：改成官網的髮絲線 ---------- */
hr { border-color: var(--ds-line); }
table th { font-weight: 700; }

/* ---------- 頁尾：比照官網 daddystudio.com.tw 的灰底三欄 ----------
   本專案的 Tailwind 是「預編譯」的，沒有建置流程，所以編譯當下沒用到的
   自訂值 class（例如 md:grid-cols-[1.2fr_auto_1.1fr]、gap-x-8）在
   tailwind.css 裡並不存在，寫了也不會生效——實測過整排連結會擠成 0 間距。
   頁尾這幾條版面規則因此寫在這裡，跟 .ds-nav-link 一樣由本檔案自己維護。
   斷點 850px 取自官網，讓兩邊在同一個寬度換行。 */
.ds-foot-grid { display: grid; gap: 26px; }
@media (min-width: 850px) {
  .ds-foot-grid { grid-template-columns: 1.2fr auto 1.1fr; align-items: start; }
}

.ds-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 34px; }
@media (min-width: 850px) { .ds-foot-links { justify-content: center; padding-top: 2px; } }

.ds-foot-social { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
@media (min-width: 850px) { .ds-foot-social { justify-content: flex-end; } }

.ds-foot { background: rgb(112, 112, 112); color: #fff; }
.ds-foot-col { font-size: 13px; line-height: 1.75; }
.ds-foot-dim { color: rgba(255, 255, 255, .85); }
.ds-foot-link { color: #fff; transition: color .18s; }
.ds-foot-link:hover { color: rgba(255, 255, 255, .7); }
@media (min-width: 850px) { .ds-foot-contact { text-align: right; } }