/* 這個檔是 scripts/port-from-mockup.mjs 從 mockup/doyle.css 產生的，不要手改。 */
/* 道爾的工具鋪「道爾風格」（提案稿，2026-11-13）。疊在 shop.html 和 newlook 上面的一層樣式，那兩邊都不改。
   出發點：十九世紀末倫敦一間老舖的商品目錄。紙、墨、細線、襯線字、像版畫的線條圖示。
   守則：安靜。只換外觀（顏色、字體、方角、框線、封面圖示），不加任何會自己動的東西。
   文字、按鈕、流程都不動；newlook 原本的動態（封面傾斜、放大轉場、飛進購物袋、彩點）也都留著。
   只在前台生效（body.sk）；後台、模擬綠界、App 流程不碰。
   色調三種（寫在 html 的 data-dy）：paper 目錄紙｜study 書房｜fog 倫敦霧。
   每種只訂五個顏色：底、字、綠、紅、店章的點綴色；其餘照 newlook 原本的算法從底和字推出來。 */
html[data-dy] body.sk{
  --dy-serif:"Baskerville","Big Caslon","Hoefler Text","Songti TC","Noto Serif TC","PMingLiU",serif;
  --display:var(--dy-serif);
  --dy-r:3px;
  --dy-rule:color-mix(in srgb,var(--ink) 24%,var(--bg));
  --dy-line:color-mix(in srgb,var(--ink) 58%,var(--bg));
  --sk-tint:color-mix(in srgb,var(--ink) 6%,var(--bg));
  --sk-sh1:0 0 0 1px var(--dy-rule);
  --sk-sh2:0 0 0 1px var(--dy-line);
}
html[data-dy=fog] body.sk{--bg:#e6e7e3;--ink:#17202b;--card:#f0f1ed;--green:#2d5c49;--red:#9a2a1d;--dy-acc:#27466e}
html[data-dy] body.sk ::selection{background:color-mix(in srgb,var(--dy-acc) 26%,transparent)}

/* ---------- 頁首：實底、下面一條雙線；店名前面是圓的店章 ---------- */
html[data-dy] body.sk .top,html[data-dy] body.sk .top.sk-scrolled{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom:3px double var(--dy-line)}
html[data-dy] body.sk .logo{font-family:var(--dy-serif);font-weight:700;font-size:21px;letter-spacing:.14em;gap:12px}
html[data-dy] body.sk .logo[data-ch]::before{width:36px;height:36px;border-radius:50%;background:none;color:var(--dy-acc);font-family:var(--dy-serif);font-size:18px;letter-spacing:0;
  box-shadow:inset 0 0 0 1.5px var(--dy-acc),inset 0 0 0 3.5px var(--bg),inset 0 0 0 4.3px var(--dy-acc)}
html[data-dy] body.sk .dd-b{border-radius:var(--dy-r)}
html[data-dy] body.sk .dd-m{border-radius:var(--dy-r);box-shadow:0 0 0 1px var(--dy-line),0 16px 30px -20px rgba(0,0,0,.45)}
html[data-dy] body.sk .dd-m button{border-radius:2px}

/* ---------- 搜尋、分類 ---------- */
html[data-dy] body.sk .search{border-radius:var(--dy-r);background:transparent;box-shadow:inset 0 0 0 1px var(--dy-rule)}
html[data-dy] body.sk .search:hover{background:var(--sk-tint)}
html[data-dy] body.sk .search:focus-within{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink)}
html[data-dy] body.sk .search button{border-radius:2px}
html[data-dy] body.sk .chip{border-radius:var(--dy-r);font-family:var(--dy-serif);letter-spacing:.08em}

/* ---------- 封面：圖示牌（一粗一細兩圈框，中間一個線條圖示） ---------- */
html[data-dy] body.sk .cv{border-radius:var(--dy-r)!important;background:var(--sk-tint)!important;color:var(--ink)!important;font-family:var(--dy-serif);box-shadow:none}
html[data-dy] body.sk .cv::after{box-shadow:inset 0 0 0 1px var(--dy-line)}
html[data-dy] body.sk .cv::before{content:"";position:absolute;inset:6px;z-index:2;border:1px solid var(--dy-rule);pointer-events:none}
html[data-dy] body.sk .cv.thumb::before{inset:3px}
html[data-dy] body.sk .cv.hero::before,html[data-dy] body.sk.sk-lay .grid .card:first-child .cv::before{inset:10px}
html[data-dy] body.sk .card:hover .cv{box-shadow:0 22px 26px -22px rgba(0,0,0,.42)}
html[data-dy] body.sk .hero{box-shadow:none}
.dy-ic{width:52%;height:auto;aspect-ratio:1;stroke-width:1.5px;overflow:visible}
.dy-ic *{vector-effect:non-scaling-stroke}
html[data-dy] body.sk .cv.thumb .dy-ic{width:58%;stroke-width:1.2px}
html[data-dy] body.sk .cv.hero .dy-ic{width:38%;stroke-width:2px}
html[data-dy] body.sk.sk-lay .grid .card:first-child .dy-ic{width:40%;stroke-width:1.8px}
html[data-dy] body.sk>.sk-fly{border-radius:var(--dy-r);background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--dy-line),0 14px 22px -14px rgba(0,0,0,.45)}
html[data-dy] body.sk>.sk-fly .dy-ic{width:62%}

/* ---------- 商品卡、價格 ---------- */
html[data-dy] body.sk .card h3{font-family:var(--dy-serif);font-size:18.5px;letter-spacing:.03em}
html[data-dy] body.sk .pr,html[data-dy] body.sk .price,html[data-dy] body.sk .total,html[data-dy] body.sk .plan b{font-family:var(--dy-serif);letter-spacing:.01em}
html[data-dy] body.sk .card .pr.ok,html[data-dy] body.sk .sale-n,html[data-dy] body.sk .owned{border-radius:2px}
html[data-dy] body.sk .hc{border-radius:var(--dy-r);box-shadow:0 0 0 1px var(--dy-line)}
html[data-dy] body.sk .closed,html[data-dy] body.sk .notice,html[data-dy] body.sk .who,html[data-dy] body.sk .empty::before{border-radius:var(--dy-r)}

/* ---------- 按鈕：方角、平的、襯線字 ---------- */
html[data-dy] body.sk .btn{border-radius:var(--dy-r);font-family:var(--dy-serif);letter-spacing:.1em}
html[data-dy] body.sk .btn:not(.ghost):not(.line):not(.danger):not(.off){background:var(--ink);box-shadow:none}
html[data-dy] body.sk .btn:not(.ghost):not(.line):not(.danger):not(.off):hover{box-shadow:0 12px 18px -14px rgba(0,0,0,.6)}
html[data-dy] body.sk .btn.big,html[data-dy] body.sk .btn.sm{border-radius:var(--dy-r)}
html[data-dy] body.sk .btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
html[data-dy] body.sk .btn.ghost:hover{background:var(--sk-tint)}
html[data-dy] body.sk .btn.line,html[data-dy] body.sk .btn.danger{box-shadow:inset 0 0 0 1px var(--dy-rule)}
html[data-dy] body.sk .btn.off{background:var(--sk-tint);box-shadow:none}
html[data-dy] body.sk .g-btn{border-radius:var(--dy-r);background:var(--ink);box-shadow:none;font-family:var(--dy-serif);letter-spacing:.08em}

/* ---------- 商品頁 ---------- */
html[data-dy] body.sk .buy{border-radius:var(--dy-r);box-shadow:none;border:1px solid var(--dy-line);border-top:3px double var(--ink)}
html[data-dy] body.sk .buy::before{display:none}
html[data-dy] body.sk .b-i img{border-radius:var(--dy-r);box-shadow:0 0 0 1px var(--dy-rule)}
html[data-dy] body.sk .video{box-shadow:0 0 0 1px var(--dy-line)}
html[data-dy] body.sk .buybar{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 -1px 0 var(--dy-line)}

/* ---------- 其餘畫面：一律方角 ---------- */
html[data-dy] body.sk .plan,html[data-dy] body.sk .b-l,html[data-dy] body.sk .video,html[data-dy] body.sk .file,html[data-dy] body.sk .units,html[data-dy] body.sk .cart-r,html[data-dy] body.sk .lib-r,html[data-dy] body.sk .field,html[data-dy] body.sk .seg,html[data-dy] body.sk .otp input,html[data-dy] body.sk .acc,html[data-dy] body.sk #toast{border-radius:var(--dy-r)}
html[data-dy] body.sk .unit,html[data-dy] body.sk .seg button,html[data-dy] body.sk .box,html[data-dy] body.sk .file .ic{border-radius:2px}
html[data-dy] body.sk .field{box-shadow:inset 0 0 0 1px var(--dy-rule)}
html[data-dy] body.sk .field:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
html[data-dy] body.sk .ft{border-top:3px double var(--dy-rule)}
html[data-dy] body.sk .mod{border-radius:4px;box-shadow:0 0 0 1px var(--dy-line),0 40px 80px -40px rgba(0,0,0,.6)}
@media(max-width:900px){html[data-dy] body.sk .buy{border:0}}
@media(max-width:640px){html[data-dy] body.sk .mod{border-radius:6px 6px 0 0}}


/* ---------- 2026-11-13 第二輪：色調定案倫敦霧之後補的 ---------- */
/* 同一個框可以放圖示，也可以放照片（圖示只是現階段方便，之後可能換成照片）：
   透明底的圖（.dy-icn，由 doyle.js 看圖判斷）當圖示：放在框的正中間、不裁切、不改顏色，大小跟畫好的圖示一樣；
   其餘當照片：照 newlook 原本的做法填滿整個框，裡面那圈細框收起來。 */
html[data-dy] body.sk .cv.dy-icn img{inset:0;margin:auto;width:52%;height:52%;object-fit:contain}
html[data-dy] body.sk .cv.thumb.dy-icn img{width:58%;height:58%}
html[data-dy] body.sk .cv.hero.dy-icn img{width:38%;height:38%}
html[data-dy] body.sk.sk-lay .grid .card:first-child .cv.dy-icn img{width:40%;height:40%}
html[data-dy] body.sk .cv.sk-has{color:transparent!important}
html[data-dy] body.sk .cv.sk-ok:not(.dy-icn)::before{display:none}
html[data-dyglow="3"] body.sk::before{background:radial-gradient(1000px 560px at 16% -10%,color-mix(in srgb,var(--amb) 60%,transparent),transparent 70%),radial-gradient(760px 440px at 94% -4%,color-mix(in srgb,var(--amb) 32%,transparent),transparent 70%)}

/* ---------- 2026-11-13 第三輪：檔案紙（html 上的 data-dysheet；右下角可以關掉比較） ----------
   結構：.card（a，原本的連結）＞ .dy-tilt（整張紙連同手一起轉）＞ 手後層、.dy-flip（翻面）＞ 正面／背面、拇指、紙角。
   只有被拿起來的那一張會動；平常是平放在桌上的紙。 */
/* 左右間距要維持 newlook 的 24px：一列四張剛好排滿（4×250＋3×24＝1072），多 1px 就會掉成三張 */
html[data-dysheet] body.sk .grid{gap:46px 24px}
html[data-dysheet] body.sk .grid .card.dy-sheet{position:relative;display:flex;flex-direction:column;perspective:1100px}
html[data-dysheet] body.sk .card.dy-held{z-index:6}
/* 桌上的影子：紙拿起來，影子變大變淡、往下掉 */
html[data-dysheet] body.sk .card.dy-sheet::before{content:"";position:absolute;inset:12% 7% 0;border-radius:40%;background:rgba(0,0,0,.42);filter:blur(18px);opacity:0;transform:translateY(6px) scale(.9);transition:opacity .35s ease,transform .5s var(--sk-ease);pointer-events:none}
html[data-dysheet] body.sk .card.dy-held::before{opacity:.5;transform:translateY(30px) scale(.97)}
html[data-dysheet] body.sk .dy-tilt{position:relative;flex:1;display:flex;flex-direction:column;transform-origin:2px calc(100% + 17px);perspective:1500px;transition:transform .5s var(--sk-ease),transform-origin .75s var(--sk-ease)}
/* 翻過去之後手在右下角，軸心跟著換邊 */
html[data-dysheet] body.sk .card.dy-flipped .dy-tilt{transform-origin:calc(100% - 2px) calc(100% + 17px)}
/* 軸心在手腕（紙的左下角再往左下一點），所以轉的時候紙和手是一起擺的 */
html[data-dysheet] body.sk .card.dy-held .dy-tilt{transform:translate3d(var(--mx,0px),calc(var(--my,0px) - 14px),0) rotate(var(--sz,0deg)) rotateX(var(--sx,0deg)) rotateY(var(--sy,0deg)) scale(1.035)}
html[data-dysheet] body.sk .card.dy-live .dy-tilt{transition:transform .14s linear}
html[data-dysheet] body.sk .dy-flip{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .75s var(--sk-ease)}
/* 2026-11-13 卡 #23 第 7 項：往反方向翻（原本 180deg），跟會彎的紙同一個方向 */
html[data-dysheet] body.sk .card.dy-flipped .dy-flip{transform:rotateY(-180deg)}
html[data-dysheet] body.sk .dy-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--card);border:1px solid var(--dy-rule);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.1),0 8px 12px -10px rgba(0,0,0,.25)}
html[data-dysheet] body.sk .dy-front{flex:1;display:flex;flex-direction:column;position:relative;padding:10px 10px 34px;transform:rotateY(0deg)}
html[data-dysheet] body.sk .dy-back{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;padding:20px 18px 36px;overflow:hidden;transform:rotateY(180deg)}
/* 紙裡面的封面不再自己傾斜、浮起來（改成整張紙在動） */
html[data-dysheet] body.sk .grid .cv{transform:none!important}
html[data-dysheet] body.sk .card:hover .cv{box-shadow:none}
html[data-dysheet] body.sk .card.dy-sheet h3{margin-top:14px}
/* 背面 */
html[data-dysheet] body.sk .dy-bt{font-family:var(--dy-serif);font-size:18.5px;letter-spacing:.03em;line-height:1.4;padding-bottom:10px;border-bottom:3px double var(--dy-rule)}
html[data-dysheet] body.sk .dy-bd{font-size:14.5px;line-height:1.7;color:var(--ink2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
html[data-dysheet] body.sk .dy-bl{display:grid;gap:4px;font-size:14px}
html[data-dysheet] body.sk .dy-bl span{position:relative;padding-left:14px}
html[data-dysheet] body.sk .dy-bl span::before{content:"";position:absolute;left:1px;top:.72em;width:6px;height:1px;background:var(--ink)}
html[data-dysheet] body.sk .dy-bp{display:grid;gap:4px;margin-top:auto;padding-top:10px;border-top:1px solid var(--dy-rule);font-size:14.5px}
html[data-dysheet] body.sk .dy-bp>span{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
html[data-dysheet] body.sk .dy-bp i{font-style:normal;color:var(--ink2)}
/* 翻面鈕：紙的左右邊緣各一顆，滑鼠到那一邊（外側五分之一）才出現，位置固定在剛進來時的高度（--ey），不跟著紙翻。
   出現時整條邊緣都能按（doyle.js 處理），所以鈕本身只是告訴你「這裡按了會翻面」 */
html[data-dysheet] body.sk .dy-turn{position:absolute;top:var(--ey,50%);z-index:3;display:grid;place-items:center;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:var(--ink);color:var(--card);font-size:17px;cursor:pointer;
  box-shadow:0 0 0 2px var(--card),0 6px 14px -4px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:scale(.6);transition:opacity .15s ease,transform .22s var(--sk-ease)}
html[data-dysheet] body.sk .dy-turn.r{right:7px}
html[data-dysheet] body.sk .dy-turn.l{left:7px}
html[data-dysheet] body.sk .card[data-dyedge=r] .dy-turn.r,html[data-dysheet] body.sk .card[data-dyedge=l] .dy-turn.l,html[data-dysheet] body.sk .dy-turn:focus-visible{opacity:1;pointer-events:auto;transform:none}
@media(hover:none){html[data-dysheet] body.sk .dy-turn.r{top:auto;bottom:6px;right:6px;margin:0;opacity:1;pointer-events:auto;transform:none}}
/* ---------- 2026-11-13 掛進正式稿（卡 #23 第 6～8 項）：被拿起來的那張紙 ----------
   手不再放在紙裡面跟著樣式轉，改成 doyle.js 每一格算好位置（會彎的紙和平的紙兩條路用同一套）；只畫剪影（整隻墨色）。
   上下順序（同一張紙裡）：手的本體（紙後面）1 ＜ 紙 2 ＜ 拇指 3；翻到背面時，手指那一面在紙前面。
   紙裡面：網頁的紙 1 ＜ 會彎的紙的畫布 2 ＜ 翻面鈕 3 */
html[data-dysheet] body.sk .dy-tilt{z-index:2}
html[data-dysheet] body.sk .dy-hand{position:absolute;left:0;top:0;z-index:1;width:50px;height:62.5px;overflow:visible;pointer-events:none;fill:var(--ink);stroke:none;opacity:0;transition:opacity .22s ease;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35));transform-origin:15px 31px;will-change:transform}
html[data-dysheet] body.sk .dy-hand.f{z-index:3}
html[data-dysheet] body.sk .dy-hand.on{opacity:1}
html[data-dysheet] body.sk .dy-hand .k{display:none}
html[data-dysheet] body.sk .dy-hand.bk .a{display:none}
html[data-dysheet] body.sk .dy-hand.bk .k{display:inline}
html[data-dysheet] body.sk .dy-hand.b.bk{z-index:3}
html[data-dysheet] body.sk .dy-hand .fg{fill:none;stroke:var(--ink);stroke-width:5.4;stroke-linecap:round;stroke-linejoin:round}
/* 會彎的紙畫好了：網頁的紙變透明（還在原位接點擊），畫布在它上面、不接滑鼠 */
html[data-dysheet] body.sk .card.dy-gl .dy-face{opacity:0}
html[data-dysheet] body.sk .dy-gl-cv{position:absolute;z-index:2;display:block;pointer-events:none}
/* 第一張放大：讓紙撐滿兩列高（newlook 是直接對 .card 的子元素排版，現在中間多了幾層） */
@media(max-width:640px){
  html[data-dysheet] body.sk .grid{gap:22px 12px}
  html[data-dysheet] body.sk .dy-front{padding:10px 10px 30px}
  html[data-dysheet] body.sk .dy-back{padding:14px 12px 32px;gap:8px}
  html[data-dysheet] body.sk .dy-bd{-webkit-line-clamp:3;font-size:13.5px}
  html[data-dysheet] body.sk .dy-bl{display:none}
}

/* ---------- 2026-11-13 定案：上傳的圖是圖示還是照片，後台自己選 ---------- */
/* 後台編輯商品：封面下面那組兩選一（元件是正式稿現成的 .seg，這裡只給它跟封面之間的距離） */
.dy-kind{margin-top:10px}
/* 後台沒有道爾風格，圖示在那邊一樣擺在框中間、不裁切（前台的寫法在上面「第二輪」那一段） */
.cv.dy-icn img{width:52%;height:52%;object-fit:contain}
.cv.hero.dy-icn img{width:38%;height:38%}