/* 工作坊課程（報名站搬進官網，穆穆 10/21）：.ws＝課程列表和三堂課、.wso＝線上工作坊。
   樣式從 tools/class-signup 和 ziner-order workshop.html 搬來、全部加範圍前綴；一排幾張看內容區寬度（container），不看整個視窗。 */
  .ws {
    --ink:#111; --paper:#FFFEFB; --line:#E5E2DC; --muted:#5A574F;
    --orange:#FF5F00; --orange-soft:#FFF0E6;
    --violet:#9D7AD2; --violet-soft:#F1EBFA;
    --amber:#B8935A; --amber-soft:#F7EFE3;   /* 琥珀功能色＋淡底、與下單頁同對 */
    --sage:#8AB374; --sage-soft:#EEF4E9;   /* 現場試印課色（穆穆 8/22：琥珀是提醒色、課色另立） */
    --lav-strong:#8A76BE;
    --ws-theme:#9D7AD2;   /* 工作坊磚專用主題色（後台 themeColor 只准動這顆——9/6 穆穆抓：九月金墨 themeColor 覆寫全站紫、連實體課都被染金） */
  }
  .ws * { margin:0; padding:0; box-sizing:border-box; }
  .ws { container:ws / inline-size; font-family:var(--font-cn); color:var(--ink); line-height:1.75; }
  .ws .mono { font-family:"SF Mono",Menlo,monospace; letter-spacing:.22em; text-transform:uppercase; }

  .ws .wrap { padding:40px 0 80px; }

  
  .ws .tiles { display:grid; grid-template-columns:1fr; gap:34px; max-width:820px; margin:0 auto; }
  @container ws (min-width:900px){ .ws .tiles { max-width:580px; gap:28px; } }/* 桌機海報磚縮 ~70%（穆穆 8/28：原尺寸一屏只裝得下兩張）；手機單欄不動 */   
  @container ws (min-width:900px){ .ws .tiles { grid-template-columns:1fr 1fr; } }/* 2×2、磚 max-width 收上限、iframe 窄版乖乖一欄（穆穆 8/22） */   
  @container ws (min-width:1080px){ .ws .tiles { grid-template-columns:repeat(4,1fr); max-width:1200px; gap:24px; } }/* 四海報並排（穆穆 2026-09-21 提案試穿）：夠寬時四課一眼全覽；10/15 一度撤回 2×2，同日看官網內嵌夠寬又恢復 */   
  .ws .tile { text-decoration:none; cursor:pointer; border:none; background:none; text-align:left; font:inherit; color:inherit;
          display:flex; flex-direction:column; justify-content:flex-start; padding:0; }/* button 預設垂直置中會讓卡片下滑、強制貼頂 */   
  .ws .tile .art { width:100%; aspect-ratio:3/4; border:none; border-radius:6px; overflow:hidden; position:relative;
               transition:transform .18s, box-shadow .18s; }
  .ws .tile:hover .art { transform:translate(-3px,-3px); }
  .ws .tile[data-theme=orange]:hover .art { box-shadow:6px 6px 0 var(--orange); }
  .ws .tile[data-theme=violet]:hover .art { box-shadow:6px 6px 0 var(--violet); }
  .ws .tile[data-theme=sage]:hover .art { box-shadow:6px 6px 0 var(--sage); }
  .ws .tile[data-theme=ws]:hover .art { box-shadow:6px 6px 0 var(--ws-theme); }
  .ws .tile .meta { display:flex; align-items:baseline; gap:10px; margin-top:12px; }
  .ws .tile h2 { font-family:var(--font-round); font-size:17px; letter-spacing:.06em; }/* 課名圓體（磚） */   
  .ws .tile .one-liner { font-size:14px; color:var(--muted); margin-top:2px; }
  .ws .tile .one-liner .nw { white-space:nowrap; }/* 斷行只准落在標點後的詞組間、不准孤字（穆穆 2026-09-21 四欄改版抓「多一個字出來」） *//* 標籤統一（穆穆 8/21）：同角度、無框、實色底、白字 */   
  
  .ws .stamp { font-size:11px; letter-spacing:.18em; padding:4px 11px; border:none; border-radius:3px;
           transform:rotate(-3deg); white-space:nowrap; font-weight:700; color:#fff; }
  .ws .stamp.open-o { background:var(--orange); }
  .ws .stamp.open-v { background:var(--lav-strong); }
  .ws .stamp.open-g { background:var(--sage); }
  .ws .stamp.open-ws { background:var(--ws-theme); }
  .ws .stamp.closed { background:var(--muted); }
  .ws .tile.closed { cursor:default; pointer-events:none; }/* 沒開＝真的鎖死（穆穆 2026-09-11：工作坊磚不當歷屆入口、四磚一致） */   
  .ws .tile.closed .art { filter:grayscale(.9) opacity(.55); }
  .ws .tile.closed:hover .art { transform:none; box-shadow:none; }/* 版圖占位（之後換成 <img>） */

  
  .ws .ph { width:100%; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:20px;
        position:relative; overflow:hidden; }
  .ws .ph > * { position:relative; z-index:1; }/* 文字浮在網點上層、不被蓋 *//* 網點跟底色一組：從底部升起、往上淡出的漸層網點（穆穆 8/21） */   
  
  .ws .ph::after { content:""; position:absolute; inset:0; z-index:0;
        background-image:radial-gradient(rgba(0,0,0,.28) 1.2px, transparent 1.5px); background-size:8px 8px;
        -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
        mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
        mix-blend-mode:multiply; pointer-events:none; }
  .ws .ph-violet { background:linear-gradient(165deg, #B79AE0 0%, #9D7AD2 55%, #7A57B5 100%); color:#fff; }
  .ws .ph-gray { background:linear-gradient(165deg, #C9C5BC 0%, #B9B5AC 60%, #A29E94 100%); color:#fff; }
  .ws .ph-sage { background:linear-gradient(165deg, #A8C795 0%, #8AB374 55%, #6E9459 100%); color:#fff; }/* 現場試印＝抹茶綠課 */   
  .ws .ph .big { font-size:46px; font-weight:800; line-height:1.15; letter-spacing:.02em; font-family:var(--font-round); }/* 海報大字圓體（穆穆 10/07） *//* 疊圖海報：圖當底、字照現場試印那套疊上去（穆穆 10/07「像現場試印那樣上字」） */   
  
  .ws .ph-over { color:#fff; }
  .ws .ph-over > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .ws .ph-over .tag, .ws .ph-over .big { text-shadow:0 1px 10px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.35); }
  .ws .ph-over::after { content:none; }/* 疊圖版不鋪網點、讓圖自己說話 */   
  .ws .ph .tag { font-size:11px; letter-spacing:.25em; white-space:nowrap; }
  @container ws (min-width:900px){ .ws .ph .tag { font-size:10px; letter-spacing:.14em; } }/* 磚變窄後 TAIPEI・2HR・1 ON 1 擠成兩行（穆穆 2026-09-21 抓）——縮字距鎖單行 *//* ── 課程頁 ── */   

  
  .ws .course { display:none; }
  .ws .course.open { display:block; }
  .ws .back { display:inline-block; margin-bottom:22px; font-size:13px; color:var(--muted); cursor:pointer; background:none; border:none; font-family:inherit; letter-spacing:.1em; }
  .ws .back:hover { color:var(--ink); }
  .ws .banner { border:none; border-radius:8px; overflow:hidden; aspect-ratio:5/2; margin-bottom:30px; }
  .ws .banner .ph .big { font-size:38px; }
  .ws .course h2.title { font-family:var(--font-round); font-size:24px; letter-spacing:.1em; margin-bottom:4px; }/* 課名圓體（課程頁） */   
  .ws .course .subtitle { font-size:13px; color:var(--muted); margin-bottom:24px; }

  .ws .chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
  .ws .chip { font-size:14px; border:1px solid var(--line); border-radius:20px; padding:5px 14px; color:var(--muted); }
  .ws .chip b { color:var(--ink); font-weight:600; }

  .ws .sec { margin-bottom:30px; }
  .ws .sec-title { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .ws .sec-title .mono { font-size:10px; }
  .ws .sec-title h3 { font-size:15px; letter-spacing:.12em; }
  .ws .sec p, .ws .sec li { font-size:14px; color:#333; }
  .ws .sec ul { list-style:none; }
  .ws .sec li { padding-left:1.3em; position:relative; margin-bottom:4px; }
  .ws .rule-card { border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin-bottom:10px; font-size:15px; color:#333; }/* 可帶回：嵌套比例圖＋數量卡（穆穆 8/22 定版 C 案；擇一/張數用琥珀當功能色、紫色留給圖） */
  
  .ws .takeaway { display:flex; gap:22px; align-items:center; border:1.5px solid var(--line); border-radius:8px; padding:18px; }
  .ws .takeaway .nest { position:relative; width:172px; height:236px; flex:none; }
  .ws .takeaway .nest .r { position:absolute; left:0; bottom:0; border:1.5px solid var(--theme); border-radius:2px; background:rgba(138,118,190,.08); }
  .ws .takeaway .nest .r span { position:absolute; right:4px; top:2px; font-size:10px; color:var(--theme); font-family:Menlo,monospace; }
  .ws .takeaway .tk-lead { font-size:12.5px; color:var(--muted); margin-bottom:8px; }
  .ws .takeaway .tk-lead b { color:var(--amber); background:var(--amber-soft); padding:1px 7px; border-radius:4px; }
  .ws .takeaway .tk-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .ws .takeaway .plan { padding:10px 8px; }
  .ws .takeaway .t-count { font-size:18px; font-weight:700; color:var(--amber); background:var(--amber-soft); border-radius:4px; display:inline-block; padding:0 10px; margin:2px 0; }
  .ws .takeaway .t-size { font-size:10.5px; color:var(--muted); font-family:Menlo,monospace; }
  .ws .takeaway .plan.on .t-count { background:var(--lav-strong); color:#fff; }/* 選中＝深紫底白字、琥珀讓位（穆穆 8/22） */   
  @container ws (max-width:560px){ .ws .takeaway { flex-direction:column; } .ws .takeaway > div:last-child { width:100%; } }/* 方案三卡（現場試印）——icon + 價 + 名 + 補充（穆穆 8/22） */
  
  .ws .pcard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  @container ws (max-width:560px){ .ws .pcard-grid { grid-template-columns:1fr; } }
  .ws .pcard { border:1.5px solid var(--line); border-radius:8px; padding:18px 14px 16px; text-align:center; background:var(--theme-soft); }
  .ws .pcard-icon { color:var(--theme); display:flex; justify-content:center; margin-bottom:6px; }
  .ws .pcard-price { font-family:var(--font-round); font-size:24px; font-weight:800; color:var(--theme); letter-spacing:.02em; }
  .ws .pcard-name { font-size:14.5px; letter-spacing:.06em; color:var(--ink); margin-top:2px; }
  .ws .pcard-note { font-size:13.5px; color:var(--muted); line-height:1.7; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
  .ws .pcard-note a { color:var(--theme); }/* 現場試印月曆（穆穆 8/22 定版：公開展示、灰掉不可點） */
  
  .ws .tp-cal { border:1.5px solid var(--line); border-radius:8px; padding:14px 16px 12px; background:#fff; }
  .ws .tp-cal .tc-head { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:10px; }
  .ws .tp-cal .tc-head button { border:1px solid var(--line); background:#fff; width:30px; height:30px; cursor:pointer; font-size:14px; color:var(--muted); border-radius:4px; font-family:inherit; }
  .ws .tp-cal .tc-head button:hover:not(:disabled) { border-color:var(--theme); color:var(--theme); }
  .ws .tp-cal .tc-head button:disabled { opacity:.3; cursor:default; }
  .ws .tp-cal .tc-mo { font-size:15px; letter-spacing:.08em; min-width:130px; text-align:center; font-family:var(--font-round); font-weight:600; }
  .ws .tp-cal .tc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .ws .tp-cal .tc-wd { text-align:center; font-size:11px; color:var(--muted); padding:4px 0; font-family:Menlo,monospace; letter-spacing:.1em; }
  .ws .tp-cal .tc-day { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:6px; font-size:14px; cursor:pointer; background:transparent; font-family:inherit; color:var(--ink); }
  .ws .tp-cal .tc-day:hover:not(:disabled) { border-color:var(--theme); color:var(--theme); }
  .ws .tp-cal .tc-day:disabled { color:#CDCDCD; cursor:not-allowed; background:transparent; }
  .ws .tp-cal .tc-day.on { background:var(--theme); color:#fff; font-weight:700; }/* 時段按鈕列 */
  
  .ws .tp-times { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  @container ws (max-width:500px){ .ws .tp-times { grid-template-columns:1fr 1fr; } }
  .ws .tp-times button { padding:12px 4px; border:1.5px solid var(--line); border-radius:6px; background:#fff; font-family:var(--font-round); font-weight:600; font-size:16px; letter-spacing:.05em; cursor:pointer; color:var(--ink); }
  .ws .tp-times button:hover:not(.on) { border-color:var(--theme); color:var(--theme); }
  .ws .tp-times button.on { background:var(--theme); border-color:var(--theme); color:#fff; }/* 左右分欄的上層 grid：日期時段｜個資 */
  
  .ws .tp-topgrid { align-items:start; gap:0 26px; }/* 內部 field 自帶 margin-bottom:20 就夠、pair 別再加免得跟下方全寬 field 湊成雙倍（穆穆 8/22 抓到） */   
  .ws .tp-cal .tc-day { font-size:14.5px; }
  .ws .tp-cal .tc-mo { font-size:14px; min-width:110px; }/* 紙材 chip 多選（最多 3、跟自帶開關互斥）——按 group 呈現 */
  
  .ws .tp-papers { display:flex; flex-wrap:wrap; gap:6px; }/* 拔 padding-top、依 field flex gap 對齊時段（穆穆 8/22） */   
  .ws .tp-papers .paper { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:8px 12px; border:1.5px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; font-family:inherit; font-size:13px; color:var(--ink); text-align:left; min-width:120px; }
  .ws .tp-papers .paper:hover:not(.on):not(:disabled) { border-color:var(--theme); }
  .ws .tp-papers .paper.on { border-color:var(--theme); background:var(--theme-soft); font-weight:600; }
  .ws .tp-papers .paper:disabled { opacity:.4; cursor:not-allowed; }
  .ws .tp-papers .paper .pg { font-size:10.5px; color:var(--muted); font-family:Menlo,monospace; letter-spacing:.05em; }
  .ws .tp-papers .paper .p { font-size:11.5px; color:var(--muted); font-family:Menlo,monospace; }
  .ws .tp-papers .paper.on .p { color:var(--theme); }
  .ws .tp-byo { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13.5px; cursor:pointer; color:var(--ink); }
  .ws .tp-byo input { width:16px; height:16px; accent-color:var(--theme); cursor:pointer; }/* 墨色琴鍵列（搬下單頁那套、換綠系）——一排 11 色到底、選中像按下去 */
  
  .ws .tp-inks { display:flex; gap:3px; }/* 同上：拔 padding、依 field flex gap 對齊 */   
  .ws .tp-inks .ink { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
    background:transparent; border:1.5px solid transparent; padding:4px 2px 6px; }
  .ws .tp-inks .ink .swatch { width:100%; height:44px; border:1px solid var(--ink); transition:transform .12s; }
  .ws .tp-inks .ink:hover:not(.on) { border-color:var(--line); }
  .ws .tp-inks .ink.on { border-color:var(--theme); background:var(--theme-soft); }
  .ws .tp-inks .ink.on .swatch { transform:translateY(2px); }
  .ws .tp-inks .ink .name { font-size:13.5px; color:var(--ink); letter-spacing:.05em; }
  .ws .tp-inks .ink .p { font-family:Menlo,monospace; font-size:11.5px; color:var(--muted); }
  .ws .tp-inks .ink.on .p { color:var(--theme); }
  @container ws (max-width:640px){   /* 窄版：11 色擠一排會把兩字墨名擠成直排、價錢一高一低（穆穆 10/21「油墨亂躺」）→ 一排 6 格、排兩排 */
    .ws .tp-inks { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px 4px; }
    .ws .tp-inks .ink .swatch { height:34px; } .ws .tp-inks .ink .name { font-size:12px; } .ws .tp-inks .ink .p { font-size:10px; } }
  .ws .tp-inks .ink .name, .ws .tp-inks .ink .p { white-space:nowrap; line-height:1.3; }
  /* 官網油墨頁也有 .ink（墨色泡泡：固定 122px、白字、背景遮罩），這裡的墨色按鈕不要吃到（10/21 抓到撐破手機版） */
  .ws .tp-inks .ink { width:auto; height:auto; isolation:auto; justify-content:flex-start; color:var(--ink); font-family:inherit; }
  .ws .tp-inks .ink::before { content:none; }
  .ws .tp-inks .ink span { letter-spacing:normal; }   /* 墨名、價錢不折行，每格同高、價錢對齊同一條線 *//* 一課一墨色 */

  
  .ws .course[data-theme=orange] { --theme:var(--orange); --theme-soft:var(--orange-soft); }
  .ws .course[data-theme=violet] { --theme:var(--lav-strong); --theme-soft:var(--violet-soft); }
  .ws .course[data-theme=sage] { --theme:var(--sage); --theme-soft:var(--sage-soft); }
  .ws .course .sec li::before { content:"◦"; position:absolute; left:.3em; color:var(--theme); font-weight:700; }
  .ws .course .sec-title .mono { color:var(--theme); }/* 方案卡 */

  
  .ws .plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
  .ws .plan { border:1.5px solid var(--line); border-radius:8px; padding:14px; cursor:pointer; text-align:center; transition:.12s; }
  .ws .plan:hover { border-color:var(--theme); }
  .ws .plan.on { border-color:var(--theme); background:var(--theme-soft); box-shadow:3px 3px 0 var(--theme); transform:translate(-2px,-2px); }
  .ws .plan .p-name { font-size:13.5px; letter-spacing:.06em; }
  .ws .plan .p-price { font-size:19px; font-weight:700; margin-top:2px; }
  .ws .plan .p-note { font-size:11px; color:var(--muted); }/* 表單 */

  
  .ws .form { border:1.5px solid var(--ink); border-radius:10px; padding:26px 26px 22px; }
  .ws .form .flbl { display:inline-block; font-size:13px; letter-spacing:.15em; color:var(--theme);
                background:var(--theme-soft); border-radius:4px; padding:3px 10px; margin-bottom:6px; }
  .ws .form .field { margin-bottom:20px; }/* 左右欄配對（穆穆 8/22 排版：狀態|系統、程度|卡住、用途|時段）；窄版疊回單欄 */
  
  .ws .pair { display:grid; grid-template-columns:1fr 1fr; gap:0 26px; align-items:start; }
  @container ws (max-width:640px){ .ws .pair { grid-template-columns:1fr; } }
  .ws .pair .slots { grid-template-columns:1fr; }/* 時段在半欄裡直列一排下去 */   
  .ws .form input[type=text], .ws .form input[type=email], .ws .form select, .ws .form textarea {
    width:100%; font-family:inherit; font-size:15px; padding:10px 2px; background:transparent;
    border:0; border-bottom:1.5px solid var(--line); outline:none; border-radius:0; color:var(--ink); }
  .ws .form input:focus, .ws .form select:focus, .ws .form textarea:focus { border-bottom-color:var(--theme); }
  .ws .form textarea { min-height:70px; resize:vertical; }
  .ws .form .hint { font-size:13px; color:var(--muted); margin-top:3px; }/* Email 手誤引導（2026-10-05、與下單頁同制）：琥珀提示、點建議即套用 */
  
  .ws .email-hint { font-size:13px; font-weight:600; color:var(--amber); margin-top:4px; }
  .ws .email-hint b { cursor:pointer; text-decoration:underline dashed; text-underline-offset:3px; }
  .ws .chk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:6px 14px; }
  .ws .chk-grid label { font-size:14.5px; display:flex; align-items:flex-start; gap:7px; cursor:pointer; color:#333; }
  .ws .chk-grid input { margin-top:4px; accent-color:var(--theme); }
  .ws .slots { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }
  .ws .slot { border:1.5px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13.5px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:.12s; }
  .ws .slot:hover { border-color:var(--theme); }
  .ws .slot.on { border-color:var(--theme); background:var(--theme-soft); }
  .ws .slot .left { font-size:11px; color:var(--muted); }
  .ws .slot.full { color:#B0ACA2; border-style:dashed; cursor:not-allowed; }
  .ws .submit { display:block; width:100%; margin-top:6px; background:var(--theme); color:#fff; border:none; font-family:inherit;
            font-size:15px; letter-spacing:.3em; text-indent:.3em; padding:14px; border-radius:8px; cursor:pointer;
            box-shadow:3px 3px 0 var(--ink); transition:.12s; }
  .ws .submit:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
  .ws .pay-note { font-size:12px; color:var(--muted); text-align:center; margin-top:12px; }
  .ws .pay-note.ok { font-size:14px; font-weight:600; color:var(--theme); }/* 送出成功＝課色大字（AI 橘/實體紫/試印綠自動對）（穆穆 8/23） */   

  .ws .foot { display:none; margin-top:56px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:18px; text-align:center; }
  .ws .foot a { color:var(--lav-strong); }
  .ws.embed .foot { display:none; }/* 內嵌在官網時不顯示：官網自己有頁尾（穆穆 10/15） */   
  @container ws (max-width:640px){ .ws .ph .big {font-size:34px;} .ws header.site h1 {font-size:24px;} }


  /* 回課程列表：做成看得到的按鈕（穆穆 10/21：原本那行小字很不直覺） */
  :is(.ws,.wso) .ws-back { display:inline-flex; align-items:center; gap:8px; margin:0 0 26px; padding:8px 18px 8px 14px; border:1.5px solid var(--ink); border-radius:999px;
             font-family:var(--font-round); font-weight:700; font-size:15px; letter-spacing:.06em; color:var(--ink); text-decoration:none; background:#fff; transition:background .15s, color .15s; }
  :is(.ws,.wso) .ws-back:hover { background:var(--ink); color:#fff; }
  :is(.ws,.wso) .ws-back b { font-size:17px; line-height:1; }
  :is(.ws,.wso) .ws-more { text-align:center; margin:56px 0 0; }
  :is(.ws,.wso) .ws-more .ws-back { margin:0; }
  .ws-hd { text-align:center; margin:0 0 44px; }
  .ws-hd h1 { font-size:30px; letter-spacing:.2em; text-indent:.2em; margin:0; }
  .ws-closed { border:1.5px dashed var(--line); border-radius:10px; padding:28px 20px; text-align:center; color:var(--muted); font-size:15px; }
  .ws-closed b { display:block; font-family:var(--font-round); font-size:18px; color:var(--ink); margin-bottom:6px; }

/* ── 線上工作坊（/workshop/online） ── */
  .wso { container:wso / inline-size; --ink:#111; --paper:#FFFEFB; --line:#E5E2DC; --muted:#5A574F; --theme:#8A76BE; --theme-soft:#F1EBFA; --theme-deep:#4A3F8E;
         font-family:var(--font-cn); color:var(--ink); line-height:1.8; }
  .wso * { margin:0; padding:0; box-sizing:border-box; }
  .wso .mono { font-family:"SF Mono",Menlo,monospace; letter-spacing:.22em; text-transform:uppercase; }
  .wso .wrap { max-width:820px; margin:0 auto; padding:40px 0 80px; }


  .wso .banner { border:none; border-radius:8px; overflow:hidden; margin-bottom:26px; position:relative; }
  .wso .banner img { display:block; width:100%; }
  .wso .banner .ph { aspect-ratio:5/2; background:var(--theme); color:#fff; display:flex; flex-direction:column;
                justify-content:space-between; padding:22px; position:relative; }/* 網點從底部升起、往上淡出——文字不被壓（跟報名站磚同款、穆穆 8/22 統一） */
  
  .wso .banner .ph::after { content:""; position:absolute; inset:0; z-index:0;
        background-image:radial-gradient(rgba(0,0,0,.28) 1.2px, transparent 1.5px); background-size:8px 8px;
        -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
                mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
        mix-blend-mode:multiply; pointer-events:none; }
  .wso .banner .ph > * { position:relative; z-index:1; }/* 文字浮在網點上層 */   
  .wso .banner .ph .big { font-family:var(--font-round); font-size:44px; font-weight:800; line-height:1.15; letter-spacing:.02em; }
  .wso .banner .ph .tag { font-size:11px; letter-spacing:.25em; }

  .wso .head { margin-bottom:26px; }
  .wso .head .mono { font-size:11px; color:var(--theme); }
  .wso .head h1 { font-family:var(--font-round); font-size:26px; letter-spacing:.1em; margin:4px 0 2px; }
  .wso .head .period { font-size:13px; color:var(--muted); }
  .wso .stamp { display:inline-block; font-size:11px; letter-spacing:.18em; padding:4px 11px; border:none; border-radius:3px;
           transform:rotate(-3deg); font-weight:700; margin-left:10px; vertical-align:middle; color:#fff; }
  .wso .stamp.on { background:var(--theme); }
  .wso .stamp.off { background:var(--muted); }

  .wso .sec { margin-bottom:32px; }
  .wso .sec-title { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .wso .sec-title .mono { font-size:10px; color:var(--theme); }
  .wso .sec-title h2 { font-size:16px; letter-spacing:.12em; }
  .wso .sec p { font-size:14.5px; color:#333; margin-bottom:12px; }

  .wso .photos { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
  .wso .photos figure { margin:0; }
  .wso .photos img { width:100%; border:1px solid var(--line); border-radius:6px; display:block; }
  .wso .photos figcaption { font-size:12px; color:var(--muted); margin-top:5px; text-align:center; letter-spacing:.05em; }
  .wso .example { font-family:"SF Mono",Menlo,monospace; font-size:13.5px; background:var(--theme-soft); border-radius:8px;
             padding:16px 18px; white-space:pre-wrap; line-height:1.9; }/* 做功課專區小卡（穆穆 8/22：拔黑框、改淡紫底卡片手感） */
  
  .wso .res-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
  .wso .res-cards a { display:flex; justify-content:space-between; align-items:center; gap:10px;
                 padding:14px 18px; background:var(--theme-soft); border-radius:8px; color:var(--ink);
                 text-decoration:none; font-size:14px; letter-spacing:.05em; transition:.12s; }
  .wso .res-cards a:hover { background:var(--theme); color:#fff; transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--theme-deep); }
  .wso .res-cards a .rc-arrow { font-family:Menlo,monospace; font-size:16px; opacity:.55; }
  .wso .res-cards a:hover .rc-arrow { opacity:1; }
  .wso .boards img { display:block; width:100%; border:1.5px solid var(--ink); border-radius:4px; margin-bottom:16px; }/* 視差帶：圖釘住、內容滑過（手機 Safari 不支援 fixed 背景、自動退回一般滿版圖） */
  
  .wso .parallax { position:relative; height:340px; border-radius:6px; margin-top:8px; margin-bottom:24px;
              background-size:cover; background-position:center; background-attachment:fixed;
              display:flex; align-items:center; justify-content:center; }
  .wso .parallax .px-title { font-size:40px; font-weight:800; color:#fff; letter-spacing:.15em;
              text-shadow:0 0 14px rgba(0,0,0,.45), 2px 2px 0 rgba(0,0,0,.35); text-align:center; padding:0 20px; }
  @supports (-webkit-touch-callout:none) { .wso .parallax { background-attachment:scroll; } }
  @container wso (max-width:640px){ .wso .parallax { height:220px; } .wso .parallax .px-title { font-size:26px; } }
/* 有底紋時收在墊白框內 */   
  .wso.has-bg { background-image:var(--bg-img); background-size:cover; background-attachment:fixed; background-position:center; border-radius:12px; padding:20px; margin:20px 0; }
  .wso.has-bg .wrap { padding-top:30px; padding-bottom:40px; background:rgba(255,254,251,.94); border-radius:12px; margin-top:20px; margin-bottom:20px;
                      padding-left:28px; padding-right:28px; box-shadow:0 0 40px rgba(0,0,0,.06); }

  .wso .plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
  .wso .plan { border:1.5px solid var(--line); border-radius:8px; padding:16px; }
  .wso .plan .p-name { font-size:14px; letter-spacing:.06em; }
  .wso .plan .p-qty { font-size:12px; color:var(--muted); }
  .wso .plan .p-price { font-size:22px; font-weight:700; color:var(--theme); margin-top:4px; }

  .wso .caution { border:1px solid var(--line); border-radius:8px; padding:13px 16px; margin-bottom:9px; font-size:13.5px; color:#333; }
  .wso .caution::before { content:"⚠ "; color:var(--theme); }


  .wso .dl { display:inline-block; border:1.5px solid var(--theme); color:var(--theme); text-decoration:none;
        font-size:14px; letter-spacing:.08em; padding:10px 22px; border-radius:8px; }
  .wso .dl:hover { background:var(--theme-soft); }

  .wso .cta { display:block; text-align:center; background:var(--theme); color:#fff; text-decoration:none; font-size:16px;
         letter-spacing:.3em; text-indent:.3em; padding:16px; border-radius:10px; box-shadow:3px 3px 0 var(--theme-deep);
         transition:.12s; margin-top:8px; }
  .wso .cta:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--theme-deep); }
  .wso .cta.off { background:#B9B5AC; box-shadow:none; pointer-events:none; }
  .wso .cta-note { text-align:center; font-size:12px; color:var(--muted); margin-top:10px; }

  .wso .next-tease { display:block; margin:-8px 0 26px; padding:11px 16px; background:var(--theme-soft); border-radius:8px;
                font-size:13.5px; letter-spacing:.05em; color:var(--ink); text-decoration:none; transition:.12s; }
  .wso .next-tease:hover { background:var(--theme); color:#fff; }
  .wso .empty { text-align:center; padding:80px 0; color:var(--muted); }
  .wso .empty h1 { font-size:22px; letter-spacing:.2em; color:var(--ink); margin-bottom:10px; }

  .wso .archive { margin-top:56px; border-top:1px solid var(--line); padding-top:22px; }
  .wso .archive h3 { font-size:13px; letter-spacing:.15em; color:var(--muted); margin-bottom:10px; }
  .wso .archive a { display:inline-block; font-size:12.5px; color:var(--theme); margin-right:16px; }