/* page-consent.css — 服務前注意事項導讀與同意簽名（批 3A，定稿 design/mockups/salon_notice_sign_mockup.html 狀態 ① ②）
   ⚠ 必須排在 main.css 之後（CLAUDE.md 8-1：CSS 的載入順序就是優先序）。

   ⚠⚠ class 一律 `cs-` 前綴、且全部限定在 #csFull 之下。
      理由見 8-1：限定範圍只防得了「我影響別人」，防不了 main.css 的通用 class 滲進來——
      定稿用的 .top / .head / .title / .sub / .meta / .row / .num / .mark / .lock 本站多半已有同名規則，
      直接沿用會吃到全站那一條（邊框、margin、animation 全照單全收），而且只在少數元素上出現。

   ⚠ 這是**內部後台頁**，不是 LIFF：一律 var(--lhrm-*)，**不得寫死深色**（十二章）。
      定稿的 --gold / --gold-soft / --lhrm-text-dim2 三個自訂名在本站不存在，對應為
      --lhrm-gold-text（金「字」，亮色會自動壓深）/ --lhrm-gold-soft / --lhrm-text-faint。
      ⚠ 金只出現在三處：NEXT 標記、已讀左邊線、進度數字。克制用金是定稿的要求，不要擴散。 */

/* ══ 全螢幕容器 ═══════════════════════════════════════════════
   z-index: 33 —— 取自 main.css「全站堆疊層級秩序」既有級距之間（.drawer 31 → .toast-host 40），
   **不新增更高層級**（8-1 規則一）。33 > .top(10) / .rail(5) 故蓋得住側欄與頁首；
   同時 < toast(40) 與 .cfm(50)，這是刻意的：跳條點擊的提示 toast 與「離開」的二次確認
   都必須蓋在本頁**之上**，取 45（.hb 那層）會把 toast 壓在底下、提示就看不見了。 */
#csFull {
  position: fixed; inset: 0; z-index: 33;
  background: var(--lhrm-bg); color: var(--lhrm-text);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#csFull[hidden] { display: none; }
.cs-sheet { max-width: 760px; margin: 0 auto; padding: 26px 22px 60px; }

/* ── 頁首 ── */
.cs-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--lhrm-border-2);
}
.cs-brand { font-size: 13px; letter-spacing: 3px; color: var(--lhrm-text); }
.cs-brand span { display: block; font-size: 9px; letter-spacing: 2px; color: var(--lhrm-text-faint); margin-top: 4px; }
.cs-code { font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 2px; color: var(--lhrm-text-faint); text-align: right; }
.cs-code i { display: block; font-style: normal; margin-top: 4px; }
.cs-exit {
  font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 2px;
  color: var(--lhrm-text-dim); background: none; border: 1px solid var(--lhrm-border-2);
  border-radius: 2px; padding: 7px 12px; cursor: pointer; white-space: nowrap;
}
.cs-exit:hover { color: var(--lhrm-text); border-color: var(--lhrm-text-faint); }

.cs-title { font-size: 21px; font-weight: 500; letter-spacing: 2px; margin: 22px 0 8px; }
.cs-sub { font-size: 12px; letter-spacing: .6px; color: var(--lhrm-text-dim); }

/* ── 本次服務資訊（由 opts 帶入，不另打 API）── */
.cs-meta {
  display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 18px;
  padding: 14px 16px; background: var(--lhrm-surface); border: 1px solid var(--lhrm-border);
}
.cs-meta div { display: flex; flex-direction: column; gap: 4px; }
.cs-meta k { font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 2px; color: var(--lhrm-text-faint); }
.cs-meta v { font-size: 13px; letter-spacing: .5px; }
.cs-meta v.m { font-family: var(--lhrm-font-mono); font-size: 12px; }

/* ── 進度 ── */
.cs-prog {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 2px 6px; font-size: 11px; color: var(--lhrm-text-dim); flex-wrap: wrap;
}
.cs-count { font-family: var(--lhrm-font-mono); letter-spacing: 2px; color: var(--lhrm-text-faint); }
.cs-count b { color: var(--lhrm-gold-text); font-weight: 500; }
.cs-hint { font-size: 11px; color: var(--lhrm-text-faint); }
.cs-hint b { font-family: var(--lhrm-font-mono); color: var(--lhrm-gold-text); font-weight: 500; }

/* ── 條款清單 ── */
.cs-terms { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lhrm-border-2); }
.cs-item {
  display: flex; gap: 16px; padding: 18px 6px 18px 4px;
  border-bottom: 1px solid var(--lhrm-border);
  cursor: pointer; position: relative; transition: var(--transition);
}
.cs-no {
  font-family: var(--lhrm-font-mono); font-size: 12px; letter-spacing: 1px;
  color: var(--lhrm-text-faint); flex: 0 0 26px; padding-top: 2px;
}
.cs-tx { flex: 1; min-width: 0; }
.cs-tx h3 { margin: 0 0 6px; font-size: 14px; font-weight: 500; letter-spacing: 1.2px; }
.cs-tx p { margin: 0; font-size: 12.5px; line-height: 1.85; color: var(--lhrm-text-dim); letter-spacing: .4px; }
.cs-mk {
  font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 2px;
  color: var(--lhrm-text-faint); align-self: flex-start; padding-top: 3px; white-space: nowrap;
}

/* 已讀：左側金邊（金的第二處用途） */
.cs-item.is-read { box-shadow: inset 2px 0 0 var(--lhrm-gold-soft); }
.cs-item.is-read .cs-no { color: var(--lhrm-text-dim); }
.cs-item.is-read .cs-mk { color: var(--lhrm-gold-text); }
/* 目前該講的那一條（金的第三處用途） */
.cs-item.is-next { background: var(--lhrm-surface); }
.cs-item.is-next .cs-no { color: var(--lhrm-gold-text); }
.cs-item.is-next .cs-mk { color: var(--lhrm-gold-text); }
.cs-item.is-next:hover { background: var(--lhrm-surface-2); }
/* 還沒輪到：淡化 + LOCKED，點了會被擋下並抖動 */
.cs-item.is-lock { opacity: .38; cursor: not-allowed; }
@keyframes cs-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.cs-item.is-shake { animation: cs-shake .32s ease; }
@media (prefers-reduced-motion: reduce) { .cs-item.is-shake { animation: none; outline: 1px solid var(--lhrm-closed); } }

/* ── 同意勾選 ── */
.cs-agree {
  display: flex; align-items: center; gap: 16px; margin-top: 26px;
  padding: 20px 22px; background: var(--lhrm-surface); border: 1px solid var(--lhrm-border-2);
  cursor: pointer; user-select: none; transition: var(--transition); width: 100%; text-align: left;
  color: inherit; font: inherit;
}
.cs-agree:hover { background: var(--lhrm-surface-2); }
.cs-box {
  width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid var(--lhrm-text-faint);
  border-radius: 2px; display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.cs-box svg {
  width: 15px; height: 15px; opacity: 0; transform: scale(.6); transition: var(--transition);
  stroke: var(--lhrm-gold-text); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.cs-agree.is-on .cs-box { border-color: var(--lhrm-gold-text); }
.cs-agree.is-on .cs-box svg { opacity: 1; transform: none; }
.cs-atx { font-size: 15px; letter-spacing: 1.2px; }
.cs-atx small { display: block; font-size: 11px; color: var(--lhrm-text-faint); margin-top: 5px; letter-spacing: .5px; }
.cs-alock {
  margin-left: auto; font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 2.5px;
  color: var(--lhrm-text-faint); border: 1px solid var(--lhrm-border-2);
  padding: 5px 9px; border-radius: 2px; white-space: nowrap;
}
.cs-agree.is-locked { opacity: .42; cursor: not-allowed; }
.cs-agree.is-locked:hover { background: var(--lhrm-surface); }
.cs-agree.is-on .cs-alock { display: none; }

/* ── 簽名區（3A 只放佔位框與鎖住遮罩，canvas / 送出於 3B）── */
.cs-sign { margin-top: 22px; position: relative; }
.cs-shead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cs-slbl { font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 3px; color: var(--lhrm-text-faint); }
.cs-sbox {
  position: relative; height: 230px; background: var(--lhrm-surface);
  border: 1px solid var(--lhrm-border-2); border-radius: 3px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cs-todo { font-size: 12px; letter-spacing: 1.5px; color: var(--lhrm-text-faint); }
.cs-base { position: absolute; left: 40px; right: 40px; bottom: 56px; height: 1px; background: var(--lhrm-border-2); pointer-events: none; }
/* 未勾同意時的鎖住遮罩。勾選後由 JS 移除 .is-locked → 遮罩消失（閘門本批就要對） */
.cs-slock {
  position: absolute; inset: 0; background: var(--lhrm-bg); opacity: .82;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 3;
}
.cs-sign:not(.is-locked) .cs-slock { display: none; }
.cs-l1 { font-size: 14px; letter-spacing: 2px; color: var(--lhrm-text-dim); }
.cs-l2 { font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 3px; color: var(--lhrm-text-faint); }

/* ── 錯誤態（例如尚未設定生效中的條款）：不得白畫面 ── */
.cs-err { padding: 60px 8px; text-align: center; }
.cs-err .cs-em { font-size: 14px; letter-spacing: 1.5px; color: var(--lhrm-closed); margin-bottom: 8px; }
.cs-err .cs-es { font-size: 12px; color: var(--lhrm-text-dim); letter-spacing: .5px; }

/* ══ 批 3B：簽名 canvas · 送出 · 完成卡 ════════════════════════
   ⚠ 筆跡顏色走 token（JS 由 getComputedStyle 讀 --cs-ink 再畫進 canvas）。
     canvas 的像素是 JS 畫的，**CSS 管不到**，所以顏色一定要能被 JS 讀出來；
     直接在 JS 寫死 hex 會讓亮色主題畫出暗底才對的筆跡（十二章）。 */
#csFull { --cs-ink: var(--lhrm-text); }
.cs-pad {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none;            /* ⚠ 不加這行 iPad 上手寫會變成捲動頁面 */
  cursor: crosshair;
}
.cs-clr {
  font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 1.5px;
  color: var(--lhrm-text-dim); background: none; border: none; cursor: pointer; padding: 4px 2px;
}
.cs-clr:hover { color: var(--lhrm-gold-text); }
.cs-clr:disabled { opacity: .35; cursor: not-allowed; }
.cs-clr:disabled:hover { color: var(--lhrm-text-dim); }
.cs-act { display: flex; gap: 12px; margin-top: 26px; align-items: center; }
.cs-act .cs-grow { flex: 1; }

/* 報到失敗時的警示：簽名已經寫進資料庫了，絕不能讓人以為兩件事都沒發生 */
.cs-warn {
  margin-top: 18px; padding: 14px 16px; text-align: left;
  border: 1px solid var(--lhrm-closed); background: var(--lhrm-closed-bg);
  font-size: 13px; line-height: 1.7; letter-spacing: .5px; color: var(--lhrm-text);
}

/* ── 完成卡（定稿狀態 ④）── */
.cs-done { text-align: center; padding: 44px 0 10px; }
.cs-seal {
  width: 72px; height: 72px; margin: 0 auto 22px; border: 1px solid var(--lhrm-gold-text);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.cs-seal svg { width: 30px; height: 30px; stroke: var(--lhrm-gold-text); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-dh2 { font-size: 22px; font-weight: 400; letter-spacing: 4px; margin: 0 0 10px; }
.cs-dsub { font-size: 12px; color: var(--lhrm-text-dim); letter-spacing: 1px; margin-bottom: 30px; }
.cs-card {
  border-top: 1px solid var(--lhrm-border-2); border-bottom: 1px solid var(--lhrm-border-2);
  padding: 22px 0; display: grid; grid-template-columns: 1.1fr 1fr; text-align: left;
}
.cs-kv { padding: 0 20px; border-right: 1px solid var(--lhrm-border); }
.cs-kv:last-child { border-right: none; }
.cs-kv k { display: block; font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 2.5px; color: var(--lhrm-text-faint); margin: 0 0 6px; }
.cs-kv v { display: block; font-size: 14px; margin-bottom: 16px; }
.cs-kv v.m { font-family: var(--lhrm-font-mono); font-size: 13px; }
.cs-kv v:last-child { margin-bottom: 0; }
/* 縮圖直接用送出那份 dataURL，不另打 /image 端點（那支是 3D 查閱用的） */
.cs-thumb {
  height: 96px; border: 1px solid var(--lhrm-border); border-radius: 2px;
  background: var(--lhrm-surface); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cs-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

@media (max-width: 640px) {
  .cs-sheet { padding: 18px 14px 48px; }
  .cs-title { font-size: 18px; }
  .cs-meta { gap: 10px 18px; }
  .cs-agree { padding: 16px; gap: 12px; }
  .cs-alock { margin-left: 0; }
  .cs-card { grid-template-columns: 1fr; gap: 20px; }
  .cs-kv { border-right: none; }
  .cs-act { flex-wrap: wrap; }
}

/* ══ 批 4C：schema 2 逐段勾選（定稿 salon_notice_sign_v2.html ①~⑤）════════════
   ⚠ 段落狀態沿用 3A 的 is-read / is-next / is-lock（＋ is-open 重讀展開），
     **不得用 .done / .active 這類通用名**（mockup 開發時撞到完成卡 .done，版面整個跑掉）。
   ⚠ main.css 有不帶範圍的 .bar / .sec（8-1），所以進度條與段落一律 cs- 前綴。
   ⚠ 照片授權短標籤：公開＝柔金框，不公開＝--lhrm-danger 框（「不可拿去用」要一眼看得出來）。 */
.cs-pbar { flex: 1; height: 2px; background: var(--lhrm-border-2); position: relative; overflow: hidden; min-width: 80px; }
.cs-pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--lhrm-gold-soft); transition: width .35s ease; }
.cs-secs { border-bottom: 1px solid var(--lhrm-border-2); }
.cs-sec { border-top: 1px solid var(--lhrm-border-2); transition: background .2s; }
.cs-sh { display: flex; align-items: center; gap: 14px; padding: 16px 4px; }
.cs-stt { flex: 1; min-width: 0; font-size: 15px; letter-spacing: 1.5px; }
.cs-sst { font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 2px; color: var(--lhrm-text-faint); white-space: nowrap; }
.cs-sb { display: none; padding: 0 4px 22px 46px; }
.cs-sec.is-next { background: var(--lhrm-surface); }
.cs-sec.is-next .cs-no, .cs-sec.is-next .cs-sst { color: var(--lhrm-gold-text); }
.cs-sec.is-next .cs-sb, .cs-sec.is-open .cs-sb { display: block; }
.cs-sec.is-read .cs-sh { cursor: pointer; }
.cs-sec.is-read .cs-no { color: var(--lhrm-text-dim); }
.cs-sec.is-read .cs-sst { color: var(--lhrm-gold-text); }
.cs-sec.is-open { background: var(--lhrm-surface); }
.cs-sec.is-lock { opacity: .36; }
.cs-sec.is-lock .cs-sh { cursor: not-allowed; }
.cs-sec.is-shake { animation: cs-shake .32s ease; }
@media (prefers-reduced-motion: reduce) { .cs-sec.is-shake { animation: none; outline: 1px solid var(--lhrm-closed); } }

.cs-bp { margin: 0 0 12px; font-size: 14px; line-height: 1.95; color: var(--lhrm-text-dim); letter-spacing: .4px; }
.cs-bp.cs-bs { color: var(--lhrm-text); font-weight: 400; }
.cs-its { margin: 0 0 16px; border-top: 1px solid var(--lhrm-border); }
.cs-it { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--lhrm-border); }
.cs-ik { font-size: 13.5px; color: var(--lhrm-text); letter-spacing: 1px; line-height: 1.7; }
.cs-iv { font-size: 13.5px; color: var(--lhrm-text-dim); line-height: 1.9; letter-spacing: .3px; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 16px; }
.cs-tags span {
  font-size: 12.5px; color: var(--lhrm-text); letter-spacing: .5px;
  border: 1px solid var(--lhrm-border-2); border-radius: 2px; padding: 5px 10px; background: var(--lhrm-bg);
}

/* 勾選（ack）與二選一（opt）：button，鍵盤可操作 */
.cs-ack, .cs-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 8px; padding: 16px 18px;
  border: 1px solid var(--lhrm-border-2); border-radius: 2px; background: var(--lhrm-bg);
  color: inherit; font: inherit; text-align: left; cursor: pointer; user-select: none;
}
.cs-ack.is-on .cs-box { border-color: var(--lhrm-gold-text); }
.cs-ack.is-on .cs-box svg { opacity: 1; transform: none; }
.cs-ack:disabled { cursor: default; opacity: .7; }
.cs-alb { font-size: 15px; letter-spacing: 1px; line-height: 1.6; }
.cs-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.cs-opts .cs-opt { margin-top: 0; }
.cs-rd {
  width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid var(--lhrm-text-faint); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cs-rd i { width: 10px; height: 10px; border-radius: 50%; background: var(--lhrm-gold-text); opacity: 0; }
.cs-opt.is-on { border-color: var(--lhrm-gold-soft); }
.cs-opt.is-on .cs-rd { border-color: var(--lhrm-gold-text); }
.cs-opt.is-on .cs-rd i { opacity: 1; }
.cs-ohint { font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--lhrm-text-faint); margin-top: 10px; }

.cs-pbadge {
  display: inline-flex; align-items: center; font-family: var(--lhrm-font-mono); font-size: 10px;
  letter-spacing: 1.5px; padding: 4px 9px; border-radius: 2px; border: 1px solid; white-space: nowrap;
}
.cs-pbadge.is-pub { color: var(--lhrm-gold-text); border-color: var(--lhrm-gold-soft); }
.cs-pbadge.is-priv { color: var(--lhrm-danger); border-color: var(--lhrm-danger); }

.cs-date { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin: 6px 0 16px; font-size: 14px; color: var(--lhrm-text-dim); }
.cs-dd { font-family: var(--lhrm-font-mono); font-size: 15px; color: var(--lhrm-text); letter-spacing: 1px; }
.cs-dauto { font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 2px; color: var(--lhrm-text-faint); }
.cs-sec .cs-sign { margin-top: 0; }

@media (max-width: 640px) {
  .cs-sb { padding-left: 4px; }
  .cs-it { grid-template-columns: 1fr; gap: 4px; }
}