@charset "utf-8";
/* 手機優先重排（BACKLOG #19）
*
* 早上 8 點那一小時佔全天 36% 訂單，多半是在通勤路上單手操作。實測 375px
* 寬度下版面本身不會橫向捲動（這一項本來就過），真正的問題是**觸控目標太小**：
* 選日期那一頁的單選鈕是 13×13、標籤 53×22；選菜頁的規格下拉 103×30、
* 打勾格 103×29；送出鈕 87×30。iOS 人機介面指南的最小觸控目標是 44×44。
*
* 規矩（刻意寫死在這裡，改的人請照做）：
* 1. 這個檔案**只加不改**。style.css／order.css／login_style.css 一個字都沒動——
* 那三支是九年前的資產，改下去沒有人能 review
* 2. 整包只活在 max-width:767px 以內，桌機版面一個像素都不會變
* 3. 要回滾就把 incHead.php 裡載入這一支的那一行拿掉，其他什麼都不用動
*
* 為什麼一個檔就夠：#37 之後前台 20 頁共用同一份 ，斷點補一次全站生效，
* 不必像原本規劃的那樣逐頁補三份 CSS。
*
* 載入順序在所有樣式表最後（incHead.php），所以不需要任何 !important。
*/
@media only screen and (max-width: 767px) {
/* ──────────────────────────────────────────────
1. 表單欄位：手指按得到，而且不會害整頁被放大
────────────────────────────────────────────── */
/* 16px 不只是為了看得清楚——iOS Safari 對小於 16px 的欄位會在聚焦時
自動把整頁放大，放大之後版面就跑掉了，這是手機上最常見的災情 */
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {
min-height: 44px;
font-size: 16px;
box-sizing: border-box;
}
textarea { min-height: 88px; }
/* 驗證碼欄位旁邊就是驗證碼圖，兩個要對得起來 */
#captcha { vertical-align: middle; }
/* ──────────────────────────────────────────────
2. 按鈕
────────────────────────────────────────────── */
/* 全站在用的三個按鈕樣式：button_style（頁尾三顆）、button_style1（聯絡我們的
送出與重填）、button_style2（其餘全部，31 處）。三個都要 */
.button_style,
.button_style1,
.button_style2 {
min-height: 44px;
font-size: 16px;
}
.button_style1,
.button_style2 {
padding: 10px 18px;
margin-top: 10px;
margin-bottom: 4px;
}
/* ──────────────────────────────────────────────
3. 單選／複選：整條標籤都能點，不是只有那顆 13px 的圓點
（取件方式、餐別、棟別都是這個結構：）
────────────────────────────────────────────── */
.write_right label,
.write_right1 label {
display: flex;
align-items: center;
min-height: 44px;
margin: 0;
padding: 2px 0;
}
.write_right input[type="radio"],
.write_right1 input[type="radio"],
.write_right input[type="checkbox"],
.write_right1 input[type="checkbox"] {
width: 22px;
height: 22px;
min-height: 0;
margin-right: 10px;
flex: none;
}
/* 標籤與欄位各佔一整行：原本是 92px 的標籤欄配 311px 的欄位欄並排，
中文標籤被擠成兩行還跟欄位對不齊 */
.write_left, .write_left1,
.write_right, .write_right1 {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.write_left, .write_left1 { padding-top: 10px; }
/* ──────────────────────────────────────────────
4. 選菜頁（order.php／edit.php）：一列改成上下堆疊
原本是三個 float 欄位各 32.3%，375px 下菜名只分到 111px，
「鹹蛋炒山苦瓜」這種名字會被折成三行，右邊兩欄卻只有 30px 高
────────────────────────────────────────────── */
/* 表頭那一列（菜色名稱／售價／選購）在堆疊版面下對不上任何東西，收起來 */
.dishes ul li:first-child { display: none; }
.dishes ul li {
margin-bottom: 10px;
padding-bottom: 10px;
}
.dishes ul li h1 {
width: 100%;
font-size: 16px;
line-height: 24px;
padding: 6px 0 2px;
}
.dishes ul li h2 {
width: 50%;
line-height: normal;
}
/* 規格下拉在左半、打勾在右半，兩個都是 44px 高 */
.dishes ul li h2 .write_form3 { width: 94%; }
.dishes ul li h2 section label {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin-bottom: 0;
}
/* ──────────────────────────────────────────────
5. 分類頁籤（主食類／主菜類…）與會員專區的分頁連結
────────────────────────────────────────────── */
ul.classLink1 li {
margin-right: 8px;
margin-bottom: 8px;
}
ul.classLink1 li a {
min-height: 44px;
font-size: 16px;
line-height: 30px;
padding: 6px 14px;
box-sizing: border-box;
}
/* 分頁的頁碼也是手指要點的 */
ul.pagination li a {
min-width: 44px;
min-height: 44px;
line-height: 32px;
box-sizing: border-box;
}
/* 訂單紀錄每一列的「瀏覽」是客人開明細的唯一入口，原本只有 32×22。
做成一顆小按鈕，位置不動 */
#saccount_table_order1 a {
display: inline-block;
min-width: 72px;
min-height: 44px;
line-height: 42px;
text-align: center;
border: 1px solid #D7D7D7;
border-radius: 4px;
box-sizing: border-box;
}
/* ──────────────────────────────────────────────
6. 手機頁首的店名：原本是 inline 的 ，實際可點區只有文字那 36px 高，
上下留白按不到。改成 block 就吃滿整條 65px 的頁首
────────────────────────────────────────────── */
.m_menu .controlBox .m_logo a {
display: block;
min-height: 44px;
}
/* 首頁公告彈窗的關閉鈕是 fancybox 自己的 36×36 圖示。圖是 sprite，
改寬高會讓圖跑掉，所以用一個看不見的 ::after 把可點範圍撐到 48×48，
圖示原地不動。（客人每次開首頁都會看到這個彈窗，關不掉很惱人） */
.fancybox-close::after {
content: "";
position: absolute;
top: -6px; right: -6px; bottom: -6px; left: -6px;
}
/* ──────────────────────────────────────────────
7. 購物車面板的收合鈕（餐點明細）：原本 21×28、字級 5px
────────────────────────────────────────────── */
ul.faqList li h3 a.toggleOpen {
min-width: 44px;
height: 44px;
line-height: 44px;
margin-top: -22px;
padding: 0;
font-size: 12px;
text-align: center;
box-sizing: border-box;
}
/* ──────────────────────────────────────────────
8. 自訂網頁（關於饗家／訂餐須知）裡的圖片
那兩頁的內容是後台「自訂網頁」貼進來的，圖片多半帶著 CKEditor 寫死的
inline 尺寸（現有三張是 width:800px）。實測 375px 下整頁被撐到 815px、
要橫向捲——#19 掃的是版型頁面，資料庫裡的內容沒掃到，所以一直沒被發現。
在這裡收住，往後老闆再貼任何圖進去都不會再撐破手機版面。
⚠ inline 的 height 蓋不掉（mobile.css 不用 !important，覆寫純靠順序），
所以圖片會被壓扁。真正的解法是貼圖時不要指定固定尺寸，見
docs/訂餐須知改寫稿_20260827.md。這條先讓頁面在手機上讀得下去。
────────────────────────────────────────────── */
#about_area img {
max-width: 100%;
}
/* ──────────────────────────────────────────────
9. 自訂網頁裡的行內連結
Q&A 搬進「關於饗家」之後，那頁開始有指向使用說明／訂餐須知的連結，
實測只有 22px 高——#19 訂的標準是觸控目標不小於 44×44。夾在句子裡的
連結沒辦法靠字級長高，用上下內距把點擊區撐開，負的 margin 讓行距不跟著長。
────────────────────────────────────────────── */
#about_area a {
display: inline-block;
padding: 11px 3px;
margin: -11px 0;
}
/* ──────────────────────────────────────────────
10. 三塊純裝飾的手機瘦身（2026-08-31 整併批次四）
375px 實測：每一頁固定被 #pic(330)＋.cd-fixed-bg(430)＋#contact_bg(200)
＝960px 裝飾佔掉——time 頁第一個欄位 330px 之後才出現、order 頁裝飾佔
全頁 51%、首頁 5.4 個螢幕。8 點趕單的人每頁先捲半屏照片。
#19 當時只處理觸控目標，這三塊一條都沒收。
⚠ .cd-fixed-bg 的 430 是 min-height（不是 height，改錯屬性等於沒改）；
background-attachment:fixed 在手機本來就失效或抖動，一併改 scroll。
767–999 平板蓋不到是已知限制（本檔只管 767 以下）。
────────────────────────────────────────────── */
#pic {
height: 120px;
}
.cd-fixed-bg {
min-height: 140px;
background-attachment: scroll;
}
/* 撐住外層的其實是它：.contact_box 自己 min-height:430（style.css:234）。
外層縮了裡面沒縮等於沒縮——實測就是這樣抓到的。 */
.cd-fixed-bg .contact_box {
min-height: 0;
}
/* 帶字的 banner 有 182px，塞不進 140 的帶子會溢出壓到下一區；而它的內容
（「聯絡我們」標題）跟正下方頁尾第一顆按鈕完全重複，手機上藏掉不損失資訊。 */
.cd-fixed-bg #contact_banner {
display: none;
}
#contact_bg {
height: auto;
padding: 12px 0;
}
}