/* page-hours.css —— 營業時間頁專屬樣式（UI-11.2，2026-09-01）

   定稿：design/mockups/salon_hours_closures_v2.html
   ⚠ 同目錄的 salon_business_hours_v1.html 是**舊版、已被取代**，不得參考。

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

   ⚠⚠ **除了浮層那兩支之外，所有選擇器都限定在 .hrs-wrap 之下。**
     定稿用了 .bh / .bhr / .sw / .dd / .mo / .fld / .opts / .d / .k / .q / .y / .w / .n
     這種通用名稱，而本站已有 .hd / .sec / .btn / .row / .cnt / .sp / .wd / .err 在用。
     不限定範圍會讓**別的頁面莫名其妙跑版**（v1.9.1 的 .biz-wrap 已踩過一次）。
     浮層那兩支（.hrs-mask / .hrs-dw）掛在 #view-app 下，故以 hrs- 前綴自保。

   ⚠ 定稿的色值是內嵌 hex（單檔 mockup 的權宜），這裡一律翻回 var(--lhrm-*)。
     公休紅 / 特殊藍已於本批 token 化為 --lhrm-closed / --lhrm-special（亮暗各一組）。
     定稿的 --line → --lhrm-border-2、--line2 → --lhrm-border、
     --dim → --lhrm-text-dim、--dim2 → --lhrm-text-faint。
     定稿的 --gold 當**字色**時一律翻 --lhrm-gold-text（亮色暖米底上品牌金讀不到），
     當**框線**時才用 --lhrm-gold / --lhrm-gold-soft。

   ⚠ 定稿以 .stage.phone 切手機版，實作翻成 @media (max-width: 760px)。 */

/* 容器寬度取自定稿的 .frame（max-width: 1000px）。
   ⚠ 少了這一條不是「稍微寬一點」：年曆是 4 欄 grid，沒有上限時
   在 2540px 螢幕上每個小月曆會被拉到 600px 寬，日期格變成又寬又扁的長方形。 */
@media (min-width: 761px) {
  #pgHours { max-width: 1000px; margin-left: auto; margin-right: auto; }
}

/* 定稿的 .hd 是「小標 + 中文副標 + 整條底線」，與 main.css 的 .hd（尾端髮絲線）不同。
   只在本頁覆寫：關掉 ::after 的尾線，改成整條 border-bottom。 */
.hrs-wrap .hd { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--lhrm-border-2); }
.hrs-wrap .hd::after { content: none; }
.hrs-wrap .hd .zh {
  font-family: var(--lhrm-font-sans); font-size: 12px; letter-spacing: 0;
  color: var(--lhrm-text-dim);
}
.hrs-wrap .hd .sp { flex: 1; }
.hrs-wrap .hd .cnt { font-family: var(--lhrm-font-mono); font-size: 11px; color: var(--lhrm-text-dim); letter-spacing: .5px; }
.hrs-wrap .hd .cnt b { color: var(--lhrm-closed); font-weight: 400; }
.hrs-wrap .sec { margin: 30px 0 0; }
.hrs-wrap .note2 {
  font-size: 11.5px; color: var(--lhrm-text-faint); line-height: 1.9; margin-top: 12px;
}
.hrs-wrap .note2 b { color: var(--lhrm-gold-text); font-weight: 400; }

/* ══ 常態營業時間 ═══════════════════════════════════════════════════ */
.hrs-wrap .bh {
  border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface);
  border-radius: 3px; overflow: hidden;
}
.hrs-wrap .bhr {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px;
  border-bottom: 1px solid var(--lhrm-border); flex-wrap: wrap;
}
.hrs-wrap .bhr:last-of-type { border-bottom: 0; }
.hrs-wrap .bhr .d { width: 52px; flex: none; font-size: 13px; }
.hrs-wrap .bhr .sp { flex: 1; }
/* ⚠⚠ 起訖時間永遠是一個整體，**絕不從中間斷開**（定稿第 ④ 點）。
   flex-wrap: nowrap + white-space: nowrap 兩層一起守：整組可以換到下一行，
   但「11:00 至 20:00」不會拆成兩行。手機上這是最容易出錯的地方。 */
.hrs-wrap .tgrp {
  display: flex; align-items: center; gap: 8px;
  flex: none; flex-wrap: nowrap; white-space: nowrap;
}
.hrs-wrap .tgrp select {
  background: var(--lhrm-input-bg); border: 1px solid var(--lhrm-border-2);
  color: var(--lhrm-text); border-radius: 2px; padding: 7px 8px;
  /* 16px：iOS Safari 對 < 16px 的表單控制項會在聚焦時自動放大整頁（全站慣例） */
  font-size: 16px; font-family: var(--lhrm-font-mono);
}
.hrs-wrap .tgrp select:focus { outline: none; border-color: var(--lhrm-gold); }
.hrs-wrap .tgrp .to { color: var(--lhrm-text-faint); font-size: 12px; flex: none; }
/* 公休列：時間整組淡出並停用點擊（後端同樣會把公休列強制寫成 NULL，兩層各守一次） */
.hrs-wrap .bhr.off .tgrp { opacity: .32; pointer-events: none; }
.hrs-wrap .bhr .err { font-size: 11px; color: var(--lhrm-danger); flex: none; }

.hrs-wrap .sw {
  display: flex; flex: none; border: 1px solid var(--lhrm-border-2);
  border-radius: 2px; overflow: hidden;
}
.hrs-wrap .sw button {
  padding: 5px 11px; font-size: 11.5px; color: var(--lhrm-text-faint);
  border-right: 1px solid var(--lhrm-border-2); white-space: nowrap;
}
.hrs-wrap .sw button:last-child { border-right: 0; }
.hrs-wrap .sw button.on { background: var(--lhrm-surface-2); color: var(--lhrm-gold-text); }
.hrs-wrap .sw button.on.red { background: var(--lhrm-closed-bg); color: var(--lhrm-closed); }

.hrs-wrap .bhf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 13px; border-top: 1px solid var(--lhrm-border-2);
  background: var(--lhrm-surface-2);
}
.hrs-wrap .bhf .k { flex: none; font-size: 12.5px; color: var(--lhrm-text-dim); }
.hrs-wrap .bhf .note { flex: none; font-size: 11px; color: var(--lhrm-text-faint); }
/* B3.6：最晚預約開始的說明較長，允許換行，窄螢幕不撐出水平捲動 */
.hrs-wrap .bhf .note.ls { flex: 1 1 180px; min-width: 0; }
.hrs-wrap .bhf .sp { flex: 1; }

/* ══ 年曆 ═══════════════════════════════════════════════════════════ */
.hrs-wrap .ybar { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; flex-wrap: wrap; }
.hrs-wrap .ybar .y { font-family: var(--lhrm-font-mono); font-size: 17px; letter-spacing: 2px; }
.hrs-wrap .yr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hrs-wrap .mo {
  border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface);
  border-radius: 3px; padding: 9px 9px 7px;
}
.hrs-wrap .mo .mh {
  display: flex; align-items: baseline; gap: 6px;
  padding-bottom: 6px; margin-bottom: 5px; border-bottom: 1px solid var(--lhrm-border);
}
.hrs-wrap .mo .mh .n { font-family: var(--lhrm-font-mono); font-size: 13px; }
.hrs-wrap .mo .mh .sp { flex: 1; }
.hrs-wrap .mo .mh .q { font-family: var(--lhrm-font-mono); font-size: 9.5px; color: var(--lhrm-text-faint); }
.hrs-wrap .mo .mh .q b { color: var(--lhrm-closed); font-weight: 400; }
.hrs-wrap .g7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hrs-wrap .g7 .w {
  text-align: center; padding-bottom: 2px;
  font-family: var(--lhrm-font-mono); font-size: 8px; color: var(--lhrm-text-faint);
}
.hrs-wrap .dd {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--lhrm-font-mono); font-size: 10px; color: var(--lhrm-text-dim);
  border: 0; border-radius: 2px; background: none; cursor: pointer; transition: .1s;
}
.hrs-wrap .dd.out { visibility: hidden; cursor: default; }
.hrs-wrap .dd:hover { background: var(--lhrm-surface-2); color: var(--lhrm-text); }
.hrs-wrap .dd.sun { color: var(--lhrm-text-faint); }
.hrs-wrap .dd.hol { color: var(--lhrm-gold-soft); }
/* 公休＝實心紅底白字（最強），特殊營業時間＝藍框藍字（次強）。
   ⚠ 兩者原本都用金色，亮色主題的暖米底上幾乎看不見——這是本批要修的問題之一。 */
.hrs-wrap .dd.cls { background: var(--lhrm-closed); color: var(--lhrm-on-closed); font-weight: 500; }
.hrs-wrap .dd.spc {
  background: var(--lhrm-special-bg); color: var(--lhrm-special);
  box-shadow: inset 0 0 0 1px var(--lhrm-special); font-weight: 500;
}
.hrs-wrap .dd.sel { outline: 2px solid var(--lhrm-gold); outline-offset: 1px; }

.hrs-wrap .lgd2 {
  display: flex; flex-wrap: wrap; gap: 16px; padding-top: 14px;
  font-size: 11.5px; color: var(--lhrm-text-dim);
}
.hrs-wrap .lgd2 span { display: flex; align-items: center; gap: 6px; }
.hrs-wrap .lgd2 i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; flex: none; }
.hrs-wrap .lgd2 i.c { background: var(--lhrm-closed); }
.hrs-wrap .lgd2 i.s { background: var(--lhrm-special-bg); box-shadow: inset 0 0 0 1px var(--lhrm-special); }
.hrs-wrap .lgd2 i.h { background: transparent; border: 1px solid var(--lhrm-gold-soft); }

/* ══ 單日抽屜 ═══════════════════════════════════════════════════════
   ⚠ 這兩支掛在 #view-app 之下（不是 .hrs-wrap 內），見 js/hours.js 檔頭。
   z-index 取自 main.css 的全站堆疊層級秩序表：
     30 .scrim / 31 .drawer → **32 .hrs-mask / 33 .hrs-dw** → 40 toast / 45 守則 / 50 二次確認。
   ⚠ 挑既有級距之間的值，不要隨手填大數字（那張表的規則一）。 */
.hrs-mask { position: fixed; inset: 0; z-index: 32; background: var(--lhrm-bg); opacity: .62; }
.hrs-dw {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 100%;
  z-index: 33; overflow-y: auto; padding: 18px 18px 26px;
  background: var(--lhrm-bg); border-left: 1px solid var(--lhrm-border-2);
}
.hrs-dw .dwh {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--lhrm-border-2);
}
.hrs-dw .dwh .t { font-size: 16px; }
.hrs-dw .dwh .sub { font-size: 10px; color: var(--lhrm-gold-text); letter-spacing: 1px; }
.hrs-dw .dwh .sp { flex: 1; }
.hrs-dw .fld { margin-bottom: 16px; }
.hrs-dw .fld label {
  display: block; margin-bottom: 7px; text-transform: uppercase;
  font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 2px;
  color: var(--lhrm-text-faint);
}
.hrs-dw .opts { display: flex; flex-direction: column; gap: 7px; }
.hrs-dw .opts button {
  display: flex; align-items: baseline; gap: 8px; text-align: left;
  border: 1px solid var(--lhrm-border-2); border-radius: 2px;
  padding: 10px 12px; font-size: 13px; color: var(--lhrm-text-dim);
}
.hrs-dw .opts button small { font-size: 11px; color: var(--lhrm-text-faint); }
.hrs-dw .opts button .sp { flex: 1; }
.hrs-dw .opts button.on {
  border-color: var(--lhrm-gold-soft); color: var(--lhrm-gold-text); background: var(--lhrm-surface-2);
}
.hrs-dw .opts button.on.red { border-color: var(--lhrm-closed); color: var(--lhrm-closed); background: var(--lhrm-closed-bg); }
.hrs-dw .opts button.on.blue { border-color: var(--lhrm-special); color: var(--lhrm-special); background: var(--lhrm-special-bg); }
.hrs-dw .tgrp { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
.hrs-dw .tgrp select {
  background: var(--lhrm-input-bg); border: 1px solid var(--lhrm-border-2);
  color: var(--lhrm-text); border-radius: 2px; padding: 7px 8px;
  font-size: 16px; font-family: var(--lhrm-font-mono);
}
.hrs-dw .tgrp select:focus { outline: none; border-color: var(--lhrm-gold); }
.hrs-dw .tgrp .to { color: var(--lhrm-text-faint); font-size: 12px; flex: none; }
.hrs-dw .err { margin-top: 6px; font-size: 11px; color: var(--lhrm-danger); }
.hrs-dw .effbox {
  border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface);
  padding: 10px 12px; font-size: 12px; color: var(--lhrm-text-dim); line-height: 1.85;
}
.hrs-dw .effbox b { color: var(--lhrm-text); font-weight: 400; font-family: var(--lhrm-font-mono); }
.hrs-dw .dwf {
  display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--lhrm-border-2);
}
.hrs-dw .dwf .sp { flex: 1; }

/* ══ 手機（定稿的 .stage.phone）═════════════════════════════════════ */
@media (max-width: 760px) {
  /* 年曆兩欄（四欄在 390px 上每格只剩 12px 寬，數字會被切掉） */
  .hrs-wrap .yr { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* ⚠⚠ 定稿第 ④ 點：手機上「日期 + 營業/公休」一行、起訖時間整組換到下一行，
     **但那一組本身不得斷開**（.tgrp 的 nowrap 已守住）。
     .sp 收掉才不會在窄欄裡把切換鈕推到看不見的地方。 */
  .hrs-wrap .bhr .sp { display: none; }
  .hrs-wrap .bhr .tgrp { flex-basis: 100%; justify-content: flex-start; }
  .hrs-wrap .bhf .sp { display: none; }
  .hrs-dw { width: auto; left: 0; }
}