/* =============================================================
   cloth.css — 客製眼鏡布 (cloth.html)
   -------------------------------------------------------------
   命名空間 .cl
   依賴:lohas-tokens.css → lohas-base.css → lohas-components.css

   版面刻意與客製文創(design.html)一致:左邊看成品、右邊調整。
   兩頁做的是同一件事(把圖放到東西上),長得不一樣只會讓人重新學一次。
   ============================================================= */

.cl{ background:var(--bg-warm); color:var(--text-main) }

/* ⚠ padding-top 不可低於 header 的 70px。
   .main-header 是 position:fixed,頁面內容不會自動讓開 ——
   低於 70 標題就會鑽到 header 底下。 */
.cl-main{ max-width:1180px; margin:0 auto; padding:100px 24px 80px }

.cl-head{ text-align:center; margin-bottom:36px }
.cl-title{
  font-size:26px; font-weight:700; letter-spacing:2px;
  color:var(--lohas-brand); margin:0;
}
.cl-title-line{ width:40px; height:2px; background:var(--lohas-brand); margin:15px auto }
.cl-sub{ margin:0; font-size:15px; line-height:1.85; color:var(--text-sub) }

.cl-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:32px;
  align-items:start;
}

/* === 左:預覽 === */

.cl-stage{
  position:relative;
  background:#fff;
  border:1px solid var(--lohas-bd, #E8DED1);
  border-radius:var(--r-lg, 18px);
  overflow:hidden;
  /* 底圖是正方形照片,固定比例才不會在載入前後跳動 */
  aspect-ratio:1 / 1;
  touch-action:none;          /* 手機上拖曳圖案時不要跟著捲頁 */
  user-select:none;
}
.cl-base{ width:100%; height:100%; object-fit:contain; display:block }

/* 疊上去的圖案。用 background-image 而不是 <img>,
   因為 SVG 與 PNG 兩種來源都能用同一段程式處理。 */
.cl-overlay{
  position:absolute;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  /* ⚠ rotate 一定要在 translate 之後。
     順序反過來的話,位移會先被旋轉帶著跑,圖案會繞著布的角落畫圓,
     而不是原地轉。--cl-rot 由 JS 寫入。 */
  transform:translate(-50%, -50%) rotate(var(--cl-rot, 0deg));
  pointer-events:none;        /* 拖曳事件掛在 stage 上,這層不擋 */
  /* ⚠ 這裡【不要】寫 display:none。
     JS 的 show() 是把 inline 的 display 清成 '',若預設藏在 CSS 裡,
     清掉之後又會退回 none,永遠顯示不出來。
     預設隱藏寫在 HTML 的 inline style,與站上其他頁一致。 */
}

.cl-hint{
  margin:12px 2px 0; text-align:center;
  font-size:13px; color:var(--text-muted, #9B9186);
}
.cl-hint i{ margin-right:6px }

/* === 右:操作 === */

.cl-right{ display:flex; flex-direction:column; gap:16px }

.cl-card{
  background:#fff;
  border:1px solid var(--lohas-bd, #E8DED1);
  border-radius:var(--r-lg, 18px);
  padding:18px 18px 20px;
}
.cl-card-title{
  margin:0 0 14px;
  font-size:14px; font-weight:600; letter-spacing:.08em;
  color:var(--lohas-brand);
}

/* === 來源切換(置頂)===
   -------------------------------------------------------------
   「先決定圖從哪來」是這一頁的第一個動作,所以它在最上面。
   手機上還會釘住(見下方 RWD),捲到下面挑刻圖時仍然按得到。 */
.cl-sourcebar{
  position:sticky;
  top:70px;                    /* .main-header 的高度 */
  z-index:6;                   /* 要蓋過預覽(5)與卡片 */
  margin:0 0 16px;
  padding:12px 16px 14px;
  background:#fff;
  border:1px solid var(--lohas-bd, #E8DED1);
  border-radius:var(--r-lg, 18px);
}
.cl-bar-title{
  margin:0 0 10px;
  font-size:13px; font-weight:600; letter-spacing:.08em;
  color:var(--lohas-brand);
}

/* 來源切換 */
.cl-seg{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
}
.cl-seg-btn{
  min-height:42px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--lohas-bd, #E8DED1);
  border-radius:var(--r-md, 14px);
  background:#fff; color:var(--text-sub);
  font-family:inherit; font-size:14px; letter-spacing:.06em;
  cursor:pointer; transition:.18s;
}
.cl-seg-btn i{ font-size:12px; opacity:.7 }
.cl-seg-btn.on i{ opacity:1 }
.cl-seg-btn.on{
  background:var(--lohas-brand); color:#fff; border-color:var(--lohas-brand);
}

/* 搜尋 */
.cl-search{ position:relative; margin-bottom:12px }
.cl-search i{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--text-muted, #9B9186); font-size:13px; pointer-events:none;
}
.cl-input{
  width:100%; height:42px; padding:0 38px 0 14px;
  border:1px solid var(--lohas-bd, #E8DED1);
  border-radius:var(--r-md, 14px);
  background:#fff; font-family:inherit; font-size:14px;
  color:var(--text-main); outline:none;
}
.cl-input:focus{ border-color:var(--lohas-brand) }

/* === 取貨門市 === */

/* 原生 <select> 各家瀏覽器長得都不一樣(Windows 上是方角灰底、
   iOS 上是圓角藍字),放在一排圓角卡片中間會很突兀。
   把外觀關掉、自己畫一個箭頭,才會跟其他輸入框是同一套。 */
.cl-select-wrap{ position:relative }
.cl-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  cursor:pointer;
}
.cl-select-ico{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  pointer-events:none;                 /* 點到箭頭也要能打開下拉 */
  font-size:12px; color:var(--text-muted, #9B9186);
}
.cl-select:focus + .cl-select-ico{ color:var(--lohas-brand) }

/* 必填星號。與上傳模組、客製文創的 .req 同一個樣子 */
.cl-req{ color:var(--err, #C0392B); margin-left:4px; font-weight:400 }

.cl-field-hint{
  margin:8px 0 0; font-size:12px; line-height:1.7;
  color:var(--text-muted, #9B9186);
}

/* 門市清單載不出來時的救命鈕。
   沒有它的話,必填 + 清單是空的 = 客人畫完了卻永遠存不了。 */
.cl-retry{
  margin-top:10px; padding:8px 16px;
  border:1px solid var(--lohas-bd, #E8DED1);
  border-radius:var(--r-pill, 999px);
  background:#fff; color:var(--lohas-brand);
  font-family:inherit; font-size:13px; cursor:pointer;
}
.cl-retry:hover{ border-color:var(--lohas-brand) }

/* 刻圖格 */
.cl-designs{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
}
.cl-design{
  aspect-ratio:1/1;
  border:1px solid var(--lohas-bd, #E8DED1);
  border-radius:var(--r-md, 14px);
  background:#fff; padding:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.15s;
}
.cl-design img{ max-width:100%; max-height:100%; object-fit:contain }
.cl-design:hover{ border-color:var(--lohas-light, #CDBEA2) }
.cl-design.on{ border-color:var(--lohas-brand); box-shadow:0 0 0 1px var(--lohas-brand) }

.cl-more, .cl-reset{
  width:100%; min-height:38px; margin-top:12px;
  border:1px solid var(--lohas-bd, #E8DED1);
  border-radius:var(--r-pill, 999px);
  background:#fff; color:var(--text-sub);
  font-family:inherit; font-size:13px; cursor:pointer;
}
.cl-more:hover, .cl-reset:hover{ border-color:var(--lohas-brand); color:var(--lohas-brand) }

.cl-empty{ margin:0; padding:20px 0; text-align:center;
  font-size:13px; color:var(--text-muted, #9B9186) }

/* === 手繪 === */

.cl-canvas{
  width:100%; aspect-ratio:1/1;
  border:1px dashed var(--lohas-bd, #E8DED1);
  border-radius:var(--r-md, 14px);
  background:#fff;
  touch-action:none;          /* 手機上畫圖時不要捲頁 */
  cursor:crosshair;
  display:block;
}
.cl-draw-tools{ margin-top:12px; display:flex; flex-direction:column; gap:10px }
.cl-brush{ display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--text-sub) }
.cl-brush input{ flex:1 }
.cl-draw-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.cl-mini{
  min-height:36px;
  border:1px solid var(--lohas-bd, #E8DED1);
  border-radius:var(--r-pill, 999px);
  background:#fff; color:var(--text-sub);
  font-family:inherit; font-size:13px; cursor:pointer;
}
.cl-mini:hover{ border-color:var(--lohas-brand); color:var(--lohas-brand) }

/* 上傳自己的圖。做成次要外觀(實線細框、非實色)——
   多數人是來挑現成刻圖的,上傳是給少數已經有圖的人。
   做成主要按鈕會讓人以為「一定要先上傳點什麼」。 */
.cl-upload{
  width:100%; min-height:44px; margin-top:12px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--lohas-bd, #E8DED1);
  border-radius:var(--r-md, 14px);
  background:#fff; color:var(--text-sub);
  font-family:inherit; font-size:13.5px; cursor:pointer;
  transition:.15s;
}
.cl-upload:hover{
  border-color:var(--lohas-brand); color:var(--lohas-brand);
  background:var(--bg-soft, #F4F1EC);
}

.cl-apply{
  width:100%; min-height:44px; margin-top:12px;
  border:1px solid var(--lohas-brand);
  border-radius:var(--r-pill, 999px);
  background:#fff; color:var(--lohas-brand);
  font-family:inherit; font-size:14px; letter-spacing:.1em; cursor:pointer;
}
.cl-apply:hover{ background:var(--lohas-brand); color:#fff }
.cl-apply:disabled{ opacity:.5; cursor:default }

.cl-note-sm{ margin:10px 0 0; font-size:12px; line-height:1.75;
  color:var(--text-muted, #9B9186) }

/* === 滑桿 === */

.cl-range{ display:block; margin-bottom:14px }
.cl-range > span{
  display:block; margin-bottom:6px;
  font-size:13px; color:var(--text-sub);
}
.cl-range b{ color:var(--lohas-brand); font-weight:600 }
.cl-range input{ width:100% }

/* === 說明與送出 === */

.cl-note{
  display:flex; gap:10px; align-items:flex-start;
  padding:14px 16px;
  border-radius:var(--r-md, 14px);
  background:var(--bg-soft, #F4F1EC);
  font-size:13px; line-height:1.8; color:var(--text-sub);
}
.cl-note i{ margin-top:3px; color:var(--lohas-light, #CDBEA2) }

.cl-err{
  padding:12px 14px;
  border-radius:var(--r-md, 14px);
  background:var(--err-bg, #FDEDEC);
  color:var(--err, #C0392B);
  font-size:13px; line-height:1.8;
}

/* 本年度已完成的提示。刻意【不用】錯誤色 ——
   這不是他做錯了什麼,是一件已經完成的好事。
   用紅色的話,客人第一眼會以為自己的設計出了問題。 */
.cl-lock{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px;
  border-radius:var(--r-md, 14px);
  background:#F1F7F2;
  border:1px solid #CFE3D4;
  color:#3D6B4A;
  font-size:13px; line-height:1.8;
}
.cl-lock i{ margin-top:4px; flex:0 0 auto }

.cl-submit{
  width:100%; min-height:52px;
  border:0; border-radius:var(--r-pill, 999px);
  background:var(--lohas-brand); color:#fff;
  font-family:inherit; font-size:15px; letter-spacing:.16em;
  cursor:pointer; transition:background .18s;
}
.cl-submit:hover{ background:var(--lohas-hover, #765F4A) }
.cl-submit:disabled{ opacity:.45; cursor:default }
.cl-submit-hint{ margin:10px 0 0; text-align:center;
  font-size:12px; color:var(--text-muted, #9B9186) }

/* === 完成 === */

.cl-done{
  border:1px solid var(--lohas-bd, #E8DED1);
  border-radius:var(--r-lg, 18px);
  background:#fff; padding:28px 22px; text-align:center;
}
.cl-done > i{ font-size:32px; color:var(--lohas-brand) }
.cl-done-title{ margin:14px 0 8px; font-size:17px; font-weight:600;
  color:var(--lohas-brand) }
.cl-done-text{ margin:0 0 18px; font-size:13.5px; line-height:1.85;
  color:var(--text-sub) }
/* 兩顆並排,窄螢幕自動變上下。
   主要那顆(去門市領)實色,次要那顆(看自己存的)描邊 ——
   兩顆都實色的話等於沒有主次,客人得自己讀完才知道該按哪個。 */
.cl-done-btns{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.cl-done-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 22px;
  border:1px solid var(--lohas-brand); border-radius:var(--r-pill, 999px);
  color:var(--lohas-brand); text-decoration:none;
  font-size:14px; letter-spacing:.06em;
  transition:.15s;
}
.cl-done-btn:hover{ background:var(--lohas-brand); color:#fff }
.cl-done-btn.primary{ background:var(--lohas-brand); color:#fff }
.cl-done-btn.primary:hover{ background:var(--lohas-hover, #765F4A); border-color:var(--lohas-hover, #765F4A) }

@media (max-width:420px){
  .cl-done-btns{ flex-direction:column }
  .cl-done-btn{ width:100% }
}

/* === RWD === */

@media (max-width:960px){
  /* ⚠ 手機不能留著 grid。grid item 的 sticky 只在「自己那一格」裡有效,
     而一欄版每個 item 各佔一列 —— 格子高度就等於自己的高度,
     等於完全沒有可以釘的範圍,position:sticky 寫了也不會動。
     改成 block,.cl-left 的範圍才會是整個 .cl-body。 */
  .cl-body{ display:block }
  .cl-main{ padding:88px 18px 60px }

  /* 來源列貼齊兩側,捲動時底下的內容不會從圓角旁邊透出來 */
  .cl-sourcebar{
    margin-left:-18px; margin-right:-18px;
    border-left:0; border-right:0;
    border-radius:0;
    box-shadow:0 4px 14px rgba(80,66,45,.06);
  }
  .cl-seg-btn{ font-size:13px; letter-spacing:0 }

  /* 預覽釘在來源列【底下】。
     -----------------------------------------------------------
     top 必須等於「header ＋ 來源列實際高度」,而來源列的高度隨
     字級與換行變 —— 寫死會疊在一起或中間開一條縫,
     所以由 JS 量完寫進 --cl-preview-top(見 cloth.js 的 syncSticky)。

     為什麼預覽也要釘住:操作都在下面,拉滑桿、拖位置的時候
     看不到自己在調什麼的話,只能拉一下、捲上去看、再捲下來。 */
  .cl-left{
    position:sticky;
    top:var(--cl-preview-top, 140px);
    z-index:5;
    background:var(--bg-warm);
    padding:8px 18px;
    margin:0 -18px 16px;
    box-shadow:0 10px 10px -10px rgba(80,66,45,.10);
  }
  .cl-stage{
    max-width:min(320px, 32vh);
    margin:0 auto;
  }

  /* ⚠ 2026-09-05 移除「還沒選圖就不顯示眼鏡布」。
     原本的理由是「空的布佔掉 276px 的高度,而它什麼都沒告訴你」——
     那個理由在【一欄版】成立。改成左按鈕右預覽的兩欄之後,
     眼鏡布是擺在按鈕旁邊的空白處,不再吃掉任何垂直空間,
     而一進頁面就看到布,才知道自己在做什麼東西。 */

  /* 釘住之後這行提示佔的是寶貴的高度,而且手機是用拖曳不是滑桿 */
  .cl-hint{ display:none }
}
@media (max-width:420px){
  .cl-designs{ grid-template-columns:repeat(3, 1fr) }
  .cl-seg{ gap:6px }
  .cl-seg-btn{ padding:0 6px; font-size:12.5px }
  .cl-seg-btn i{ display:none }   /* 窄螢幕先犧牲圖示,字比較重要 */
}

/* =============================================================
   ⚠ 手機:輸入框字級不可小於 16px
   -------------------------------------------------------------
   iOS Safari 在 focus 一個字級小於 16px 的輸入框時會自動放大整頁,
   而且【關掉之後不會縮回去】—— 客人接著回到眼鏡布,整頁還是放大的,
   字被切掉、要自己雙指縮小才看得下去。

   不用 maximum-scale=1 擋掉縮放來解:那會連帶讓所有人都不能
   自己放大來看,視力不好的人首當其衝。

   ⚠ 2026-08-27 補:這條規則 CLAUDE.md 早就寫著,但這個檔案裡
   一直沒有 —— .cl-input 是 14px,所以搜尋框在 iOS 上一直會放大。
   取貨門市那個下拉也是輸入框,一併納入。
   (upload-design.css 1133 行有同一段,兩邊要一起維護)
   ============================================================= */
@media (max-width:768px){
  .cl-input, .cl-select{ font-size:16px }
}

/* =============================================================
   外框與節點(直接縮放 / 旋轉)
   -------------------------------------------------------------
   節點放在 .cl-overlay 裡面,所以會跟著圖案一起旋轉 ——
   節點永遠落在圖案真正的四個角上,而不是一個不會轉的方框。

   ⚠ .cl-overlay 是 pointer-events:none(移動的拖曳掛在 stage 上),
   子元素會繼承那個值,所以每個節點都要自己開回 auto,
   否則框看得到、拉不動。
   ============================================================= */
.cl-overlay::before{
  content:''; position:absolute; inset:0;
  border:1px dashed rgba(80,66,45,.55);
  pointer-events:none;
}
.cl-node{
  position:absolute; width:14px; height:14px;
  margin:-7px 0 0 -7px;            /* 用 margin 對齊中心,不用 transform —— */
                                   /* 那一格要留給旋轉手把自己的 transform */
  border:1.5px solid var(--lohas-brand);
  border-radius:3px; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  pointer-events:auto;
  touch-action:none;               /* 手機上不要被當成捲動 */
}
.cl-node--nw{ left:0;    top:0;    cursor:nwse-resize }
.cl-node--ne{ left:100%; top:0;    cursor:nesw-resize }
.cl-node--sw{ left:0;    top:100%; cursor:nesw-resize }
.cl-node--se{ left:100%; top:100%; cursor:nwse-resize }

/* 旋轉手把:圓的,而且離開框一段距離 ——
   跟四個方形角點在外觀上要一眼分得出來,不然人會去拉錯的東西。 */
.cl-node--rot{
  left:50%; top:0; margin-top:-33px;
  width:24px; height:24px; margin-left:-12px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--lohas-brand); font-size:11px;
  cursor:grab;
}
.cl-node--rot:active{ cursor:grabbing }
.cl-rot-arm{
  position:absolute; left:50%; top:-22px;
  width:1px; height:22px; margin-left:-.5px;
  background:rgba(80,66,45,.55);
  pointer-events:none;
}

/* 手機上手指比游標粗,節點要大一點才按得到 */
@media (max-width:768px){
  .cl-node{ width:18px; height:18px; margin:-9px 0 0 -9px }
  .cl-node--rot{ width:30px; height:30px; margin-left:-15px; margin-top:-40px }
  .cl-rot-arm{ top:-26px; height:26px }
}

/* === 打字 === */

.cl-text-tools{ display:flex; flex-direction:column; gap:12px; margin-top:14px }
.cl-text-row{ display:flex; align-items:center; gap:10px; position:relative }
.cl-text-row > span{
  flex:0 0 4.5em;
  font-size:13px; letter-spacing:.08em;
  color:var(--text-sub);
}
.cl-textarea{
  height:auto; padding:10px 14px; line-height:1.7; resize:vertical;
  min-height:64px;
}
/* select 的箭頭在這一列裡要對齊那個框,不是整列 */
.cl-text-row .cl-select-ico{ right:14px }

.cl-text-hint{
  margin:10px 0 0; font-size:12px; line-height:1.75;
  color:var(--text-muted, #9B9186);
}
.cl-text-hint b{ color:var(--text-sub) }

@media (max-width:768px){
  /* 手機上標籤自己一行,輸入框才有整行的寬度 */
  .cl-text-row{ flex-direction:column; align-items:stretch; gap:6px }
  .cl-text-row > span{ flex:none }
  .cl-text-row .cl-select-ico{ top:auto; bottom:14px; transform:none }
}

/* =============================================================
   分享活動(2026-09-05)
   -------------------------------------------------------------
   ⚠ 「取貨要出示貼文」是取貨條件,不是提醒。所以它在三個地方
     都要看得到:存檔前的告知、確認彈窗、完成畫面。
     只講一次的話,客人會在門市才知道。
   ============================================================= */

/* 存檔鈕上方的事前告知 */
.cl-campaign {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #e6d3a3;
    border-left: 4px solid #c9a227;
    border-radius: 8px;
    background: #fdf8ec;
    font-size: .88rem;
    line-height: 1.65;
    color: #4a3f28;
}
.cl-campaign i { color: #c9a227; margin-top: 3px; }
.cl-campaign b { display: block; margin-bottom: 2px; }
.cl-campaign-more,
.cl-linklike {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #8a6d1f;
    text-decoration: underline;
    cursor: pointer;
}

/* 彈窗 */
.cl-modal {
    position: fixed;
    inset: 0;
    /* ⚠ 必須高於全站 header(.main-header 是 z-index:9999)。
       原本寫 1000,結果彈窗被 header 蓋掉一角 ——
       而這個彈窗是【強制流程】(要勾選才能送出),被蓋住的話
       客人會以為卡住了。任何全螢幕遮罩都要比 header 高。 */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .5);
}
.cl-modal[hidden] { display: none; }
.cl-modal-box {
    width: 100%;
    max-width: 460px;
    /* ⚠ 手機上內容比螢幕高時要能捲,不然按鈕會被擠到看不見 */
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
.cl-modal-title { margin: 0 0 10px; font-size: 1.12rem; font-weight: 700; }
.cl-modal-lead  { margin: 0 0 14px; font-size: .92rem; line-height: 1.7; color: #444; }

.cl-steps { margin: 0 0 14px; padding: 0; list-style: none; }
.cl-steps li {
    display: flex;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: .9rem;
    line-height: 1.6;
}
/* 唯一會讓客人白跑一趟的一條,視覺要最重 */
.cl-steps li.key { background: #fdf8ec; border: 1px solid #e6d3a3; }
.cl-step-n {
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background: #3b3222;
    color: #fff;
    font-size: .78rem;
    line-height: 22px;
    text-align: center;
}
.cl-steps em { display: block; margin-top: 2px; font-size: .8rem; color: #7a7266; font-style: normal; }

.cl-modal-alt {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f4f4f2;
    font-size: .84rem;
    line-height: 1.65;
    color: #4a4a44;
}
.cl-modal-warn {
    margin: 0 0 14px;
    font-size: .84rem;
    line-height: 1.6;
    color: #9a3b32;
}
.cl-modal-warn i { margin-right: 5px; }

.cl-agree {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0 0 16px;
    font-size: .88rem;
    line-height: 1.55;
    cursor: pointer;
}
.cl-agree input { margin-top: 3px; flex: 0 0 auto; }

.cl-modal-btns { display: flex; gap: 10px; justify-content: flex-end; }
.cl-modal-cancel,
.cl-modal-ok {
    padding: 10px 18px;
    border-radius: 999px;
    font-size: .9rem;
    cursor: pointer;
}
.cl-modal-cancel { border: 1px solid #cfcabd; background: #fff; color: #55503f; }
.cl-modal-ok     { border: 0; background: #3b3222; color: #fff; }
.cl-modal-ok:disabled { background: #c4bfb3; cursor: not-allowed; }

.cl-rules { margin: 0 0 16px; padding-left: 20px; font-size: .86rem; line-height: 1.75; color: #444; }
.cl-rules li { margin-bottom: 7px; }

/* 完成畫面的分享區 */
.cl-share {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #e6d3a3;
    border-radius: 12px;
    background: #fdf8ec;
    text-align: center;
}
.cl-share-title { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: #4a3f28; }
.cl-share-title i { color: #c9584f; margin-right: 6px; }
.cl-share-note  { margin: 0 0 12px; font-size: .86rem; line-height: 1.6; color: #5c5240; }
.cl-share-img {
    max-width: 260px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e3dccb;
    background: #fff;
}
.cl-share-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}
.cl-share-hint { margin: 10px 0 0; font-size: .8rem; line-height: 1.55; color: #7a7266; min-height: 1.2em; }

/* =============================================================
   分享牆(2026-09-05)
   ⚠ 只顯示已完成的作品,姓名遮罩在伺服器端做。
   ⚠ 沒資料或載入失敗時整區由 JS 收起來 —— 空的分享牆比沒有難看。
   ============================================================= */
.cw-sec { max-width: 1080px; margin: 40px auto 8px; padding: 0 16px; }
.cw-sec[hidden] { display: none; }
.cw-head { text-align: center; margin-bottom: 18px; }
.cw-title { margin: 0 0 6px; font-size: 1.25rem; font-weight: 700; color: #3b3222; }
.cw-sub { margin: 0; font-size: .88rem; line-height: 1.65; color: #7a7266; }

.cw-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.cw-card {
    border: 1px solid #e8e3d7;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
/* 固定比例的框:圖還沒載進來時版面不會跳動 */
.cw-media { aspect-ratio: 1 / 1; background: #f4f2ee; }
.cw-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-body {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    font-size: .8rem;
}
.cw-name { font-weight: 600; color: #4a3f28; }
.cw-date { color: #9a9284; font-size: .74rem; white-space: nowrap; }

.cw-foot { text-align: center; margin-top: 16px; }
.cw-more {
    padding: 9px 26px;
    border: 1px solid #cfcabd;
    border-radius: 999px;
    background: #fff;
    font-size: .88rem;
    color: #55503f;
    cursor: pointer;
}
.cw-more[hidden] { display: none; }
.cw-end { margin: 0; font-size: .82rem; color: #9a9284; }

/* =============================================================
   手機:四個來源按鈕改成左側直排,預覽放右邊(2026-09-05)
   -------------------------------------------------------------
   原本來源列是整條橫的,在 375px 上會排成兩列(三顆 ＋ 上傳圖一顆),
   加上底下整張眼鏡布,光是「還沒開始挑圖」就吃掉大半個螢幕。
   改成左直排 ＋ 右預覽之後,同樣的內容只佔一個區塊的高度。

   ⚠ 只在【已經選了圖】之後才變兩欄。還沒有圖的時候右邊是空的,
     留一條窄窄的按鈕欄配一大塊空白很奇怪;那時維持原本的整條橫列。

   ⚠ 用 display:contents 讓 .cl-left / .cl-right 直接參與 .cl-main 的
     grid —— 因為 .cl-sourcebar 與 .cl-body 是兄弟,而預覽在 .cl-body
     裡面,不動 HTML 就沒辦法讓它們並排。
     動 HTML 的代價是桌機版也要跟著改,那是更大的風險。
   ============================================================= */
@media (max-width: 960px) {
  body.cl .cl-main {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 8px;
    /* 側邊留白收窄 —— 省下來的 12px 全部給眼鏡布。
       這一頁在手機上最重要的就是那張布看得清不清楚。 */
    padding-left: 12px;
    padding-right: 12px;
  }
  body.cl .cl-body { display: contents; }
  body.cl .cl-head,
  body.cl .cl-right,
  body.cl .cw-sec { grid-column: 1 / -1; }

  /* 左欄:四顆直排 */
  body.cl .cl-sourcebar {
    grid-column: 1;
    position: sticky;
    top: 70px;                    /* 與預覽同高,兩邊一起釘住 */
    z-index: 6;
    margin: 0 0 16px;
    padding: 6px;
    border: 1px solid var(--line-soft, #e8e3d7);
    border-radius: 10px;
    box-shadow: none;
    width: max-content;
  }
  body.cl .cl-bar-title { display: none; }   /* 兩欄時這行標題吃掉高度 */
  /* ⚠ .cl-seg 是 grid 不是 flex(基準樣式是 repeat(3,1fr))——
     寫 flex-direction:column 完全沒有作用,而且不會有任何錯誤,
     只是四顆按鈕照樣橫排。要改的是 grid-template-columns。 */
  body.cl .cl-seg {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  /* 按鈕欄壓到剛好放得下四個字,多出來的寬度留給眼鏡布 */
  body.cl .cl-seg-btn {
    width: 100%;
    justify-content: flex-start;
    white-space: nowrap;
    padding: 0 9px;
    gap: 5px;
    min-height: 38px;
    font-size: 12px;
    letter-spacing: 0;
  }
  body.cl .cl-seg-btn i { display: inline-block; }  /* 直排放得下圖示 */

  /* 右欄:預覽。兩欄時它不再需要貼齊兩側的滿版底 */
  body.cl .cl-left {
    grid-column: 2;
    top: 70px;
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  body.cl .cl-stage { max-width: 100%; }
}

/* 開始挑圖之後把大標題收起來(手機)。
   「客製眼鏡布」加底線在 375px 上佔約 120px 高度 —— 進頁面時它有用,
   開始工作之後就只是把工作區往下推,而手機每一次捲動都是成本。
   class 由 cloth.js 在按下來源列任何一顆時加上,加了就不再拿掉。 */
@media (max-width: 960px) {
  body.cl.cl-working .cl-head { display: none; }
}

/* 卡片標題右邊的提示:「完成後往下滑動」。
   -------------------------------------------------------------
   挑完圖之後下一步(放在哪裡、取貨門市、送出)在下面,而手機上
   挑圖卡片本身就佔滿一屏 —— 不講的話,客人挑完會停在原地,
   以為自己已經做完了。

   ⚠ 用 margin-left:auto 推到最右,不要用 float:
     .cl-card-title 需要 flex 才能讓長標題與提示各自不換行。 */
.cl-card-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.cl-card-tip {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: 0;
    color: #c0392b;
    white-space: nowrap;
}
.cl-card-tip::before {
    content: '\f107';                 /* fa-chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 4px;
}

/* 彈窗右上角的關閉鍵。
   ⚠ .cl-modal-box 要 position:relative,叉叉才會定位在框裡而不是視窗右上。
   ⚠ 點擊範圍做到 40px:手指按的目標小於 40px 會一直按不到,
     而按不到關閉鍵的彈窗會讓人覺得被困住。 */
.cl-modal-box { position: relative; }
.cl-modal-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8a8272;
    font-size: 1.05rem;
    cursor: pointer;
    line-height: 1;
}
.cl-modal-x:hover { background: #f1efe9; color: #3b3222; }
/* 標題右側留出叉叉的位置,長標題才不會跑到它底下 */
.cl-modal-title { padding-right: 40px; }