/* 作品集 /work/（從 Showcase 作品集首頁搬來，2026-10-14 全站統一後改用全站語言）：首屏左字右點陣圖框、案例大卡（灰井舞台＋桌機框＋手機框）、
   換品牌膠囊、「一個檔案換成你的品牌」三張淺色縮圖。用 site.css 的全站 token（淺灰藍底、藍）；點陣與換圖動畫在 work.js。 */
/* 點陣：JS 畫在 canvas 上；沒 JS 時看到的是一片淡點格（不是空白） */
.dots-card { display: grid; gap: 8px; }
.dots {
  display: block; width: 100%; height: clamp(200px, 26vw, 300px); touch-action: pan-y; cursor: crosshair; border-radius: 18px;
  background: radial-gradient(var(--line-2) 1.2px, transparent 1.6px) 0 0 / 12px 12px;
}
.dots-hint { margin: 0 6px 2px; font-size: 13px; color: var(--ink-2); }
.dots-hint .touch { display: none; }
@media (hover: none) { .dots-hint .mouse { display: none; } .dots-hint .touch { display: inline; } }

.cases { display: grid; gap: clamp(48px, 7vw, 104px); }
.case { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 52px); align-items: end; }
.case:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.case:nth-child(even) .stage { order: 2; }
/* 舞台：跟服務卡的小畫面同一種灰井點格，不用品牌色漸層 */
.stage {
  position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 11; border-radius: 26px;
  background: radial-gradient(var(--line) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--well); box-shadow: 0 0 0 1px var(--line);
}
.flood { position: absolute; inset: 0; z-index: 1; clip-path: circle(0 at 50% 100%); pointer-events: none; }
.frame { position: absolute; z-index: 2; display: block; overflow: hidden; background: var(--surface); box-shadow: 0 30px 60px -30px rgb(20 30 60 / .35), 0 0 0 1px var(--line); }
.frame img { width: 100%; height: auto; display: block; border: 0; border-radius: 0; }
.desk { left: 7%; top: 9%; width: 80%; border-radius: 12px; transition: transform var(--dur-4) var(--ease); }
.phone { right: 6%; bottom: -14%; width: 23%; border-radius: 18px; border: 4px solid var(--ink); transition: transform var(--dur-4) var(--ease); }
.phone img { aspect-ratio: 390 / 760; object-fit: cover; object-position: top; }
@media (hover: hover) and (pointer: fine) {
  .stage:hover .desk { transform: translateY(-6px); }
  .stage:hover .phone { transform: translateY(-14px) rotate(-1.5deg); }
}
.case-info { display: grid; gap: 14px; align-content: end; padding-bottom: 6px; min-width: 0; }
.case-no { margin: 0; font: 500 13px/1 var(--font-mono); color: var(--ink-3); }
.case-title { margin: 0; font: 700 clamp(22px, 2.4vw, 30px)/1.25 var(--font-sans); font-feature-settings: 'palt'; }
.case-sum { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 46ch; }
.covers, .skins { display: grid; gap: 8px; }
.skins-label { margin: 0; font-weight: 600; font-size: 14px; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; text-decoration: none; color: var(--ink);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 13px/1 var(--font-sans);
  transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-2) var(--spring);
}
.chip i { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 210deg, var(--dot) 0 62%, var(--dot-2) 62% 100%); }
.chip[aria-current='true'] { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
@media (pointer: coarse) { .chip { min-height: 44px; padding-right: 14px; } .chip i { width: 26px; height: 26px; } }
.chip:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .chip:hover { box-shadow: inset 0 0 0 1px var(--ink-3); } .chip[aria-current='true']:hover { box-shadow: inset 0 0 0 1.5px var(--accent); } }
.case-info .btn { justify-self: start; margin-top: 8px; }

/* 一個檔案，換成你的品牌：說明＋三張淺色縮圖 */
.reskin-lead { margin: 0 0 12px; max-width: 42em; color: var(--ink-2); font-size: 17px; }
#reskin > .pills { margin-bottom: clamp(18px, 2.4vw, 28px); }
.tiles-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.skin-tile { margin: 0; }
.skin-tile figcaption { font: 600 14px/1.4 var(--font-sans); color: var(--ink-2); }

@media (max-width: 860px) {
  .case, .case:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .case:nth-child(even) .stage { order: 0; }
  .stage { aspect-ratio: 4 / 3.4; border-radius: 20px; }
  .desk { left: 5%; top: 7%; width: 84%; }
  .phone { width: 30%; right: 4%; bottom: -10%; border-width: 3px; border-radius: 14px; }
}
@media (max-width: 520px) { .dots { height: 200px; } }
/* 中文標題只在標點斷行（「即／時數據」「換／成你的」很難看）；放不下才硬斷 */
.case-title { word-break: keep-all; overflow-wrap: anywhere; }