/* page-services.css —— 服務頁專屬樣式（v1.10.1 由 main.css 拆出）

   ⚠ 本檔內容是**從 main.css 原樣搬過來的**，v1.10.1 沒有改動任何一條規則的
     選擇器或宣告內容。要追原始出處看該版之前的 main.css。

   ⚠⚠ **本檔必須排在 index.html 的 main.css 之後。** CSS 的載入順序就是優先序：
     排到 main.css 前面，同權重的規則勝負會反轉，而且只會在少數幾個元素上出現，
     那是最難查的一種跑版。

   本檔的選擇器全部限定在 .sv-* / #svPricePane 之下，與其他頁面檔的範圍互斥。 */

/* ── 服務項目與價目表（UI-7.0）────────────────────────────
   沿用 .bar / .chips / .row / .hd / .sec / .fld / .drawer，只補這一區需要的幾條。
   抽屜共用 .drawer / .scrim（掛在 #view-app 內，見 public/js/services.js 的 mountDrawer）。 */
.sv-filter { margin: 0 0 4px; }
.sv-cat { margin-top: 22px; }
.sv-cat:first-child { margin-top: 4px; }
.sv-grp {
  font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 2px;
  color: var(--lhrm-text-faint); margin: 12px 0 2px;
}
.sv-row { gap: 12px; }
.sv-row .nm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-row .sub { margin-top: 3px; }
/* 停用項目淡化，但仍可點進去編輯 */
.sv-row.off { opacity: .5; }
.sv-off {
  font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 1px;
  color: var(--lhrm-danger); border: 1px solid var(--lhrm-danger);
  border-radius: 2px; padding: 1px 5px;
}
.sv-spec { font-size: 10px; color: var(--lhrm-text-faint); letter-spacing: 1px; }
/* NULL＝「還沒決定」，用警示色標出來，不要讓它看起來像 0 */
.sv-none { font-style: normal; color: var(--lhrm-gold-text); }

/* 計價方式標籤：形狀一致、只用邊框色區分，避免六個色塊在列表上打架 */
.sv-tag {
  flex: none; font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 2px;
  border: 1px solid var(--lhrm-border-2); color: var(--lhrm-text-dim);
}
.sv-tag.sv-quote, .sv-tag.sv-from { border-color: var(--lhrm-gold-soft); color: var(--lhrm-gold-text); }
.sv-tag.sv-addon, .sv-tag.sv-unit { border-color: var(--lhrm-border-2); color: var(--lhrm-text); }
.sv-tag.sv-free { border-color: var(--c-success, var(--lhrm-border-2)); color: var(--lhrm-text-dim); }

/* 右側三欄（定稿的 .pr / .mem / .pt）：定價 → 會員價 → 點數，各自靠右。
   ⚠ 寬度必須固定，不能用 min-width：三欄的內容逐列不同長
   （「1,600」/「150 / 指」/「詢價」），min-width 會讓短的那列縮回去，
   上下列的數字就對不齊了——而「一眼掃完整欄價格」正是價目表要做的事。 */
.sv-price { flex: none; width: 96px; text-align: right; }
.sv-price b { font-weight: 500; font-size: 15px; color: var(--lhrm-text); }
.sv-price .sv-u { font-size: 10px; color: var(--lhrm-text-dim); margin-left: 1px; }
.sv-price .sv-quote { font-size: 12px; color: var(--lhrm-gold-text); }
/* 會員價用柔金與定價分層：同一列兩個數字，不分色會讀成一個。
   --lhrm-gold-soft 是定稿 --gold-soft 的對應 token（見 DESIGN_TOKENS.css），
   亮色實測對比 4.71:1，足供 11px mono 小字。 */
.sv-mem {
  flex: none; width: 72px; text-align: right;
  font-family: var(--lhrm-font-mono); font-size: 11px; color: var(--lhrm-gold-soft);
}
.sv-pt {
  flex: none; width: 56px; text-align: right;
  font-family: var(--lhrm-font-mono); font-size: 11px; color: var(--lhrm-text-dim);
}

/* UI-7.2 群組內排序箭頭。視覺與行為沿用技能維護那一套（.row > .acts > .btn，
   見 public/js/staff.js 的 skRowsHTML），這裡只補兩件它沒有的事：
   ① 不被壓縮（右側四欄都是固定寬，被壓到會讓上下列的數字對不齊）
   ② 箭頭走 mono —— ↑ ↓ 在中文字體下寬度不一致，兩顆按鈕會一寬一窄 */
.sv-row .sv-mv { flex: none; }
.sv-row .sv-mv .btn { font-family: var(--lhrm-font-mono); line-height: 1; }

/* UI-7.4：抽屜裡「這個技能沒有人具備」的提示。與列表的 .sv-none 同一個 token ——
   兩處講的是同一件事（資料還沒補齊），顏色不一致只會讓人以為是兩種問題。 */
.fld .hint.sv-warn { color: var(--lhrm-gold-text); }

.sv-empty { font-size: 12px; color: var(--lhrm-text-faint); padding: 20px 0; }
.sv-note { font-size: 12px; color: var(--lhrm-text-dim); line-height: 1.8; margin-bottom: 14px; }
.sv-act { margin-top: 16px; }
/* 表單控件一律 >= 16px：iOS Safari 對 <16px 的輸入框聚焦時會自動放大整頁，而且 blur 後不還原。
   ⚠ 只加在服務抽屜與計價設定上，**不動全域的 .fld input**（14px）——
   那會一次改掉員工抽屜、我的資訊、登入頁的版面，超出本批範圍。
   員工抽屜目前仍是 14px，靠 UI-2.7 的「開啟時不自動聚焦」迴避同一個問題；
   要不要統一成 16px 是獨立的一批。 */
#svDrawer .fld input, #svDrawer .fld select,
#svPricePane .fld input { font-size: 16px; }
/* 抽屜內的試算區：把「結帳時會變成多少」直接寫出來 */
.sv-calc {
  font-size: 12px; line-height: 1.9; color: var(--lhrm-text-dim);
  border-left: 2px solid var(--lhrm-gold-soft); padding: 8px 0 8px 12px;
}
.sv-calc b { font-weight: 500; font-family: var(--lhrm-font-mono); color: var(--lhrm-text); }

@media (max-width: 760px) {
  /* 手機（定稿 .stage.phone .it .mem）：390px 放不下三欄，會員價整欄隱藏。
     隱藏的是**會員價**不是定價——會員價可在抽屜的試算裡看到，定價不能不見。 */
  .sv-mem { display: none; }
  .sv-price { width: 76px; }
  .sv-pt { width: 42px; }
  .sv-row { gap: 6px; }
  .sv-filter { overflow-x: auto; }
  /* UI-7.2：箭頭要進來，右側各欄再讓出一點（比照 .sk-row .acts .btn 的手機邊距） */
  .sv-row .sv-mv { gap: 4px; }
  .sv-row .sv-mv .btn { padding: 3px 6px; }
}

/* ── B2-3 服務項目照（1:1，LINE 精選卡片用）──────────────────────
   列最前面 40px 方格。沒照片＝虛線灰格「＋照片」；有照片＝縮圖（點＝更換）+ 右上角 ×（移除）。
   ⚠ 固定寬、不被壓縮：同 .sv-price 的理由，上下列要對齊。 */
.sv-row .sv-ph {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 4px;
  background: var(--lhrm-surface-2); overflow: visible;
}
.sv-row .sv-ph.none {
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px dashed var(--lhrm-border-2); color: var(--lhrm-text-faint);
  font-family: var(--lhrm-font-sans); font-size: 9px; letter-spacing: 0; cursor: pointer;
}
span.sv-ph.none { cursor: default; }
.sv-row button.sv-ph.none:hover { border-color: var(--lhrm-gold-soft); color: var(--lhrm-gold-text); }
.sv-row .sv-ph img { display: block; width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.sv-row .sv-ph-in { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; }
.sv-row .sv-ph-x {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0;
  border-radius: 50%; border: 1px solid var(--lhrm-border-2);
  background: var(--lhrm-surface); color: var(--lhrm-text-dim);
  font-size: 12px; line-height: 16px; text-align: center; cursor: pointer;
}
.sv-row .sv-ph-x:hover { color: var(--lhrm-danger); border-color: var(--lhrm-danger); }
@media (max-width: 760px) {
  .sv-row .sv-ph, .sv-row .sv-ph img { width: 34px; height: 34px; }
}